/* craft.css: shell+toolbar chrome, app-origin; palette in tokens.css, also loaded by UGC. */

/* ── Shell tokens ─────────────────────────────────────────────────────────── */

:root {
    /* 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;
}

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

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

body {
    margin: 0;
    /* Column shell — a full-height page claims the remainder, never a guessed toolbar height. */
    display: flex;
    flex-direction: column;
    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);
    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;
}
/* The ⚡CRAFT lockup inside running text — sized to its context, never split across a line. */
.brand-lockup { white-space: nowrap; }
.brand-lockup .brand-mark { margin-inline-end: var(--space-3xs); }
.brand-lockup .brand-mark, .brand-lockup .brand-wordmark { font-size: 1em; }
/* ⚡ 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: steady dot=open, pulse=morph batch; --off via data-class; pulsed in 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);
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.live-pill:hover { background: color-mix(in srgb, var(--craft-ok) 16%, transparent); }
.pill-caret {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.live-pill[aria-expanded="true"] .pill-caret { transform: rotate(180deg); }
.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;
}

/* Control panel (craft#20): pill IS the trigger; a READOUT not settings, monospace ids. */

.control-pill { position: relative; }
.control-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(17.5rem, calc(100vw - 2 * var(--space-s)));
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    border-radius: 12px;
    background: var(--craft-surface);
    border: 1px solid var(--craft-line);
    /* The toolbar's own 1px accent seam, repeated — the panel reads as a drawer of the same instrument. */
    box-shadow: inset 0 1px 0 var(--craft-accent-dim),
                0 14px 40px -14px light-dark(rgba(20, 24, 30, 0.30), rgba(0, 0, 0, 0.70));
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--craft-text);
    z-index: 60;
}

/* Identity line: monospace, truncating, so a long address can never widen the panel. */
.cp-status {
    display: flex;
    min-width: 0;
    margin: 0;
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step--2);
}
.cp-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--craft-text-dim);
}

/* VISIBLE label, not placeholder-only — it vanishes on first keystroke, reading as email. */
.cp-field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.cp-field-label { font-size: var(--step--2); color: var(--craft-text-dim); }
.cp-field-hint { opacity: 0.7; }
.cp-field-input {
    min-width: 0;
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: var(--craft-bg);
    color: var(--craft-text);
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step--2);
}
/* Claimed name READ on a construct origin, changed on app host (craft#320) — same shape. */
.cp-field-locked { text-decoration: none; display: block; }

/* Money chrome. Both halves collapse until their morph lands — a blank heading reads as broken. */
.panel-billing:empty { display: none; }
.control-panel .wallet-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--step--2);
    opacity: 1;
}
.control-panel .wallet-chip:empty { display: none; }
/* The key-custody button is a utility, not a call to action — inside the panel it drops the accent pill it wears in a toolbar row, so the fund/activate CTA beside it stays the only thing asking to be pressed. */
.control-panel .wallet-manage {
    padding: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    border-radius: 6px;
    background: none;
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.65;
}
.control-panel .wallet-manage:hover { filter: none; opacity: 1; background: var(--craft-hover-tint); }

.bill-hero {
    margin: 0;
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--craft-accent);
}
.bill-hero--warn { color: var(--craft-err); }
.bill-warn { margin: 0; font-size: var(--step--2); color: var(--craft-err); }
.bill-sub {
    margin: 0;
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step--2);
    color: var(--craft-text-dim);
}

.bill-rows {
    margin: var(--space-3xs) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step--2);
}
.bill-rows li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: 1px 0;
}
.bill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--craft-text-muted);
}
.bill-amt {
    color: var(--craft-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bill-earned {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin: 0;
    font-family: var(--shell-font-mono, monospace);
    font-size: var(--step--2);
    color: var(--craft-text-dim);
}
.bill-earned span { color: var(--craft-ok); font-variant-numeric: tabular-nums; }

/* Footer rail: theme icons left, actions right — the only horizontal rule in the panel. */
.cp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding-top: var(--space-2xs);
    border-top: 1px solid var(--craft-line);
}
.theme-seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--craft-surface-2);
    border: 1px solid var(--craft-line);
}
.theme-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--craft-text-dim);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.theme-opt svg { width: 0.95rem; height: 0.95rem; display: block; }
.theme-opt:hover { color: var(--craft-text); }
:root[data-theme-mode="system"] .theme-opt[data-theme-set="system"],
:root[data-theme-mode="light"]  .theme-opt[data-theme-set="light"],
:root[data-theme-mode="dark"]   .theme-opt[data-theme-set="dark"] {
    background: color-mix(in srgb, var(--craft-accent) 16%, var(--craft-surface));
    color: var(--craft-accent);
}

.cp-act {
    font-size: var(--step--2);
    color: var(--craft-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.cp-act:hover { color: var(--craft-accent); text-decoration: none; }
/* Navigation reads as an action; ending the session reads as an exit. Same row, deliberately unequal weight. */
.cp-act--go { color: var(--craft-accent); font-weight: 600; }
.cp-act--quiet { color: var(--craft-text-dim); font-size: var(--step--2); }
.cp-act--quiet:hover { color: var(--craft-text); }

/* ── 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;
}

/* ── 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, explicit placement — auto-flow pushes live zone to row 3 (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, .brand, .back-nav, .toolbar-badge, .live-pill, .pill-caret, .theme-opt {
        transition: none;
    }
    .live-dot { animation: none; }
}

@media print {
    .app-toolbar, .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; }

/* 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); }

/* Muted supporting line inside the wallet chip / paywall — the one shared quiet-text token in platform chrome. */
.chip-dim { color: var(--craft-text-dim); }