/* craft.css — global shell + theme + toolbar chrome. Ships on every page.
 * Page-specific styles: /css/pages/<name>.css, loaded via {% block head %}.
 *
 * Theme: CSS light-dark() over color-scheme. :root follows system; data-theme
 * attr overrides. Native controls/scrollbars/autofill follow color-scheme automatically.
 * theme.js cycles light → dark → system. */

/* ── Theme tokens ─────────────────────────────────────────────────────────── */

:root {
    color-scheme: light dark;

    /* Surfaces */
    --craft-bg:        light-dark(#f8fafc, #0F1419);
    --craft-surface:   light-dark(#ffffff, #1A2029);
    --craft-surface-2: light-dark(#f1f5f9, #111720);
    --craft-line:      light-dark(#e2e8f0, #2A3341);

    /* Text */
    --craft-text:       light-dark(#1e293b, #E2E8F0);
    --craft-text-muted: light-dark(#64748b, #94A3B8);
    --craft-text-dim:   light-dark(#94a3b8, #8B99AD);

    /* Accent — the craft brand (⚡ yellow). Light-mode is deeper for AA contrast. */
    --craft-accent:       light-dark(#2563eb, #3B82F6);
    --craft-accent-hover: light-dark(#1d4ed8, #60A5FA);
    --craft-accent-dim:   light-dark(#93c5fd, #1e3a8a);
    --craft-accent-ink:   light-dark(#ffffff, #ffffff);
    --craft-accent-glow:  light-dark(rgba(37,99,235,0.10), rgba(59,130,246,0.16));

    /* Status */
    --craft-ok:      light-dark(#10B981, #34D399);
    --craft-ok-glow: light-dark(rgba(47,138,94,0.30), rgba(95,208,138,0.40));
    --craft-err:     light-dark(#c44545, #ff6b6b);

    /* Per-row hover-tint that reads on both themes without per-rule overrides. */
    --craft-hover-tint: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.04));

    /* Sticky toolbar height the fixed .shell offsets below — must match the rendered .app-toolbar (brand wordmark + --space-2xs padding + 1px border ≈ 55px). Slight over-value only exposes --craft-bg (== shell bg), so round up to be clip-proof. */
    --craft-toolbar-h: 56px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── Element resets + body ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--craft-bg);
    color: var(--craft-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--step-0);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: var(--craft-accent);
    text-decoration: none;
}
a:hover { color: var(--craft-accent-hover); text-decoration: underline; }

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Focus rings — visible on both themes. */
:focus-visible {
    outline: 2px solid var(--craft-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── App toolbar — 3-zone header (1fr | auto | 1fr). Outer columns balance center optically regardless of right-zone width. */

.app-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    /* Reserve space for fixed #theme-btn (1.5rem) so Live pill doesn't overlap it. */
    padding-inline-end: calc(var(--space-s) + 1.5rem + var(--space-xs));
    background: var(--craft-surface);
    border-bottom: 1px solid var(--craft-line);
    /* 1px accent seam at top — loadout's pipeline-seam pattern in craft palette. */
    box-shadow: inset 0 1px 0 var(--craft-accent-dim);
}

.toolbar-zone {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.toolbar-right { justify-content: flex-end; }

/* ── Brand: ⚡ + craft wordmark ────────────────────────────────────────────── */

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 6px;
    color: var(--craft-text);
    text-decoration: none;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}
.brand:hover {
    text-decoration: none;
}
.brand:hover .brand-wordmark { color: var(--craft-accent); }
/* CRAFT wordmark — CODEX logo style: system sans, light weight, wide tracking. */
.brand-wordmark {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    font-size: var(--step-2);
    letter-spacing: 0.2em;
    line-height: 1;
}
/* ⚡ as the yellow COLOR emoji (emoji font first so no text glyph wins), sized to the wordmark — ⚡CRAFT reads as one balanced lockup matching the Official badge's bolt. */
.brand-mark {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: var(--step-2);
    line-height: 1;
}

/* ── Back affordance ──────────────────────────────────────────────────────── */

.back-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    color: var(--craft-text-muted);
    font-size: var(--step--1);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.back-nav:hover {
    color: var(--craft-text);
    background: var(--craft-hover-tint);
    text-decoration: none;
}

/* ── Live pill ─────────────────────────────────────────────────────────────
 * Two signals: steady dot = channel open; one-shot ring (.live-dot.pulse) = morph batch received.
 * .live-pill--off applied via data-class when $_live false. Pulse toggled by MutationObserver
 * in templates/health.html. */

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-s);
    border-radius: 999px;
    background: color-mix(in srgb, var(--craft-ok) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--craft-ok) 38%, transparent);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--craft-ok);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--craft-ok);
    box-shadow: 0 0 0 0 transparent;
}
.live-dot.pulse { animation: live-activity 1.6s ease-out 1; }
@keyframes live-activity {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--craft-ok) 65%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}
.live-pill--off {
    color: var(--craft-text-dim);
    background: transparent;
    border-color: var(--craft-line);
}
.live-pill--off .live-dot {
    background: var(--craft-text-dim);
    animation: none;
}

/* ── Live-pill identity tooltip (craft#20) — PII off always-visible surface; hover/focus reveals. */
.live-pill { position: relative; }
.status-tip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: var(--space-2xs) var(--space-s);
    border-radius: 10px;
    background: var(--craft-surface);
    border: 1px solid var(--craft-line);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    gap: 3px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: var(--step--2);
    color: var(--craft-text);
    text-align: left;
    z-index: 50;
}
.live-pill:hover .status-tip,
.live-pill:focus-within .status-tip { display: flex; }
.status-tip-line { white-space: nowrap; }
.status-tip-line code { font-family: var(--shell-font-mono, monospace); }
.status-tip-dim { color: var(--craft-text-dim); }

/* ── Center-zone trust attributes (craft#20/#23) — unreviewed notice or badge chips. */
.toolbar-ugc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--step--2);
    color: #e5a23d;
    white-space: nowrap;
}
.toolbar-badges {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    justify-content: center;
}
.toolbar-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 999px;
    background: color-mix(in srgb, var(--craft-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--craft-accent) 30%, transparent);
    font-size: var(--step--2);
    color: var(--craft-text);
    white-space: nowrap;
}

/* ── Theme toggle (fixed top-right; outside toolbar so accessible on toolbarless pages) ── */

#theme-btn {
    position: fixed;
    top: 0.6rem;
    right: var(--space-s);
    z-index: 100;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--craft-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.15s ease;
}
#theme-btn:hover {
    color: var(--craft-text);
    transform: scale(1.12);
}
#theme-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}
#theme-btn .icon-sun,
#theme-btn .icon-moon,
#theme-btn .icon-system { display: none; }

:root[data-theme-mode="light"]  #theme-btn .icon-sun    { display: block; }
:root[data-theme-mode="dark"]   #theme-btn .icon-moon   { display: block; }
:root[data-theme-mode="system"] #theme-btn .icon-system { display: block; }

/* ── Version stamp (fixed bottom-right) ── */

.craft-version {
    position: fixed;
    right: max(var(--space-2xs), env(safe-area-inset-right, 0px));
    bottom: max(var(--space-3xs), env(safe-area-inset-bottom, 0px));
    font-family: ui-monospace, monospace;
    font-size: var(--step--2);
    color: var(--craft-text-dim);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

/* ── Responsiveness + a11y ────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* 2-row layout: brand/pill on row 1; trust-attrs full-width on row 2.
     * Explicit placement required — auto-flow would push live zone to row 3 (center's 1/-1 span eats row 2). */
    .app-toolbar { grid-template-columns: 1fr auto; row-gap: var(--space-2xs); }
    .toolbar-zone.toolbar-left  { grid-row: 1; grid-column: 1; }
    .toolbar-zone.toolbar-right { grid-row: 1; grid-column: 2; }
    .toolbar-ugc, .toolbar-badges { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    body, #theme-btn, .brand, .back-nav, .toolbar-badge, .live-pill {
        transition: none;
    }
    .live-dot { animation: none; }
}

@media print {
    .app-toolbar, #theme-btn, .craft-version { display: none !important; }
}

/* wallet chip — platform toolbar chrome (wallet.js hydrates #wallet-chrome on /editor) */
.wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.78rem;
    opacity: 0.85;
}
.wallet-chip button {
    font: inherit;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--craft-accent) 35%, transparent);
    background: color-mix(in srgb, var(--craft-accent) 10%, transparent);
    color: inherit;
    cursor: pointer;
}
.wallet-chip button:hover { background: color-mix(in srgb, var(--craft-accent) 22%, transparent); }
.wallet-chip { position: relative; }
.wallet-manage { line-height: 1; font-size: 0.95rem; }

/* wallet panel — self-custody backup/import + connect-your-own (the teaching surface). Opens below the chip on demand. */
.wallet-panel {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    right: 0;
    z-index: 50;
    width: min(23rem, 92vw);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-s);
    border-radius: 12px;
    border: 1px solid var(--craft-line);
    background: var(--craft-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    color: var(--craft-text);
    font-size: 0.8rem;
    text-align: left;
    cursor: default;
}
.wallet-panel-head { display: flex; align-items: center; gap: var(--space-3xs); font-size: 0.95rem; }
.wallet-panel-head b { font-weight: 600; }
.wallet-panel-intro { margin: 0; line-height: 1.5; color: var(--craft-text-muted); }
.wallet-panel-intro b { color: var(--craft-text); font-weight: 600; }
.wallet-panel .wallet-addr {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    word-break: break-all;
    padding: var(--space-2xs);
    border-radius: 8px;
    border: 1px solid var(--craft-line);
    background: var(--craft-surface-2);
    color: var(--craft-text-muted);
    cursor: pointer;
    transition: border-color 0.15s;
}
.wallet-panel .wallet-addr:hover { border-color: var(--craft-accent-dim); }
.wallet-panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-3xs); }
.wallet-panel button {
    font: inherit;
    font-size: 0.76rem;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: 8px;
    border: 1px solid var(--craft-line);
    background: var(--craft-surface-2);
    color: var(--craft-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wallet-panel button:hover { border-color: var(--craft-accent-dim); background: var(--craft-hover-tint); }
.wallet-panel button.wallet-primary {
    flex: 1 1 100%;
    border-color: var(--craft-accent);
    background: var(--craft-accent-glow);
    color: var(--craft-accent);
    font-weight: 600;
}
.wallet-panel button.wallet-primary:hover { background: var(--craft-accent); color: var(--craft-accent-ink); }
.wallet-panel-out:empty { display: none; }
.wallet-panel-out { display: flex; flex-direction: column; gap: var(--space-2xs); }
.wallet-warn { margin: 0; color: var(--craft-err); line-height: 1.45; }
.wallet-key, .wallet-import-input {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    padding: var(--space-2xs);
    border-radius: 8px;
    border: 1px solid var(--craft-line);
    background: var(--craft-surface-2);
    color: var(--craft-text);
    box-sizing: border-box;
}
.wallet-key { min-height: 3.4rem; resize: vertical; word-break: break-all; }

/* Identity action in the app toolbar — the visible rung of the identity ladder (unclaimed → Sign in, claimed → Sign out). Quiet pill, same scale as .live-pill. */
.toolbar-auth { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border: 1px solid var(--craft-line); border-radius: 999px; font-size: var(--step--1); font-weight: 600; color: var(--craft-accent); text-decoration: none; }
.toolbar-auth:hover { border-color: var(--craft-accent); background: var(--craft-accent-glow); }
.toolbar-auth--out { color: var(--craft-text-muted); }
.status-tip-link { color: var(--craft-accent); text-decoration: none; font-weight: 600; }
.status-tip-link:hover { text-decoration: underline; }