/* 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(#f7f8fa, #0b0d10);
    --craft-surface:   light-dark(#ffffff, #14181d);
    --craft-surface-2: light-dark(#f1f3f5, #0e1216);
    --craft-line:      light-dark(#e1e5ea, #232a31);

    /* Text */
    --craft-text:       light-dark(#1a1d22, #e8edf2);
    --craft-text-muted: light-dark(#4a5560, #8a97a3);
    --craft-text-dim:   light-dark(#7a8590, #6b7280);

    /* Accent — the craft brand (⚡ yellow). Light-mode is deeper for AA contrast. */
    --craft-accent:       light-dark(#b88a00, #ffd23f);
    --craft-accent-hover: light-dark(#9b7400, #ffdf6b);
    --craft-accent-dim:   light-dark(#d4ad33, #6e5d1f);
    --craft-accent-ink:   light-dark(#1a1205, #1a1205);
    --craft-accent-glow:  light-dark(rgba(184,138,0,0.10), rgba(255,210,63,0.14));

    /* Status */
    --craft-ok:      light-dark(#2f8a5e, #5fd08a);
    --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: "IBM Plex Sans", 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: "JetBrains Mono", 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: "JetBrains Mono", 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); }
.brand-mark {
    font-size: var(--step-1);
    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: "JetBrains Mono", 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; }
}