/* ============================================================================
   Trove Floor Kit — the shared layout layer for the OBS surfaces.
   ----------------------------------------------------------------------------
   Frame 01 of the "Trove OBS Overhaul" (Claude Design, 2026-06-25), ported.
   The palette already unifies the floor (theme.css tokens). This makes the
   LAYOUT unify too: one card, one metric block, one chip vocabulary, one
   type scale, one spacing scale — so surfaces stop each inventing their own.

   Load AFTER theme.css. Purely additive: the existing 14 templates don't link
   this, so adopting it can't regress them. Page-specific composition stays
   inline in each template; only the repeating primitives live here.

   Type scale  · L1 metric (display, tabular) → L2 heading (ui 600) → L3 label
                 (uppercase, tracked, muted). Three levels, no more.
   Spacing     · 4 · 8 · 12 · 16 · 24 · 40. Pad/gap/rhythm snap to these.
   Categories  · left-edge colour is load-bearing:
                 accent = structural/filings · ma2 = market/tape · bear = risk/rot
   ========================================================================== */

/* ── Spacing scale (use via var, or just match the values) ───────────────── */
:root {
  --fk-1: 4px;  --fk-2: 8px;  --fk-3: 12px;
  --fk-4: 16px; --fk-5: 24px; --fk-6: 40px;
}

/* ── Scene container — full-surface pages (home, Lockbox, Intel) ─────────── */
.fk-scene {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(0deg, rgba(54,217,138,.05), rgba(54,217,138,0) 42%),
    radial-gradient(140% 110% at 50% -12%, #221b15 0%, #0c0a08 56%, #050403 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.06);
}
.fk-grid-bg {            /* faint engineering grid, decorative */
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.018) 0 1px, transparent 1px 84px);
}

/* ── Panel — the one translucent card used on every surface ──────────────── */
.fk-panel {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
/* Left-edge category accent. Colour = what kind of thing this is. */
.fk-panel--accent { border-left: 3px solid var(--t-accent); }
.fk-panel--market { border-left: 3px solid var(--t-ma2); }
.fk-panel--bull   { border-left: 3px solid var(--t-bull); }
.fk-panel--risk   { border-left: 3px solid var(--t-bear); }
.fk-panel--watch  { border-left: 3px solid var(--t-warn); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.fk-h1 {
  font: 700 26px/1 var(--t-font-display);
  color: var(--t-text); letter-spacing: -.01em; text-shadow: var(--t-textsh);
}
.fk-sub   { font: 500 12px/1.3 var(--t-font-ui); color: var(--t-muted); }
.fk-h2    { font: 600 16px/1.3 var(--t-font-ui); color: var(--t-text); }
.fk-kicker {            /* L3 section header — uppercase, tracked, accent */
  font: 600 10px/1 var(--t-font-ui);
  letter-spacing: .14em; text-transform: uppercase; color: var(--t-accent);
}
.fk-label {            /* L3 metric label — uppercase, tracked, muted */
  font: 600 9px/1 var(--t-font-ui);
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted);
}
.fk-frame-eyebrow {    /* small muted caption above a section */
  font: 600 12px/1 var(--t-font-ui);
  letter-spacing: .16em; text-transform: uppercase; color: #7c756c;
}

/* ── Metric block — label small on top → big number → delta below ────────── */
/* The number LEADS. Never stranded at the bottom of a 70%-empty tile. */
.fk-metric__label { font: 600 9px/1 var(--t-font-ui); letter-spacing: .12em;
  text-transform: uppercase; color: var(--t-muted); margin-bottom: 8px; }
.fk-metric__value { font: 600 30px/1 var(--t-font-display); color: var(--t-text);
  font-variant-numeric: tabular-nums; }
.fk-metric__value .unit { font-size: .6em; color: var(--t-muted); }
.fk-metric__delta { font: 600 11px/1 var(--t-font-mono); margin-top: 7px; }
.fk-pos { color: var(--t-bull); }
.fk-neg { color: var(--t-bear); }
.fk-flat { color: var(--t-muted); }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.fk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font: 600 10px/1 var(--t-font-ui); letter-spacing: .06em;
  background: var(--t-surface-2); color: var(--t-text-2);
  border: 1px solid var(--t-border); white-space: nowrap;
}
/* Gate chips — the decision. Colour fill = state. */
.fk-chip.is-pass  { background: rgba(54,217,138,.14); color: var(--t-bull); border-color: rgba(54,217,138,.30); }
.fk-chip.is-watch { background: rgba(245,166,35,.14); color: var(--t-warn); border-color: rgba(245,166,35,.30); }
.fk-chip.is-fail  { background: rgba(255,81,71,.14);  color: var(--t-bear); border-color: rgba(255,81,71,.30); }
/* Lifecycle chips — research state. Neutral pill + a leading dot for colour. */
.fk-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.fk-dot--bull { background: var(--t-bull); }
.fk-dot--ma2  { background: var(--t-ma2); }
.fk-dot--warn { background: var(--t-warn); }
.fk-dot--bear { background: var(--t-bear); }
.fk-dot--dim  { background: var(--t-dim); }
.fk-dot--accent { background: var(--t-accent); }

/* Live state pill (glowing dot) */
.fk-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(54,217,138,.12); border: 1px solid rgba(54,217,138,.28);
  font: 600 11px/1 var(--t-font-ui); color: var(--t-bull);
}
.fk-live .fk-dot { width: 7px; height: 7px; box-shadow: 0 0 8px var(--t-bull); }
.fk-live.is-closed {
  background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-muted);
}
.fk-live.is-closed .fk-dot { background: var(--t-dim); box-shadow: none; }

/* ── Hit-rate bar (Lockbox leaderboard, etc.) ────────────────────────────── */
.fk-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--t-surface-2); overflow: hidden; }
.fk-bar > span { display: block; height: 100%; background: var(--t-bull); }
.fk-bar.is-watch > span { background: var(--t-warn); }
.fk-bar.is-fail  > span { background: var(--t-bear); }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.fk-rule { border: 0; border-top: 1px solid var(--t-border); margin: 0; }

/* ── Shared top nav — single source of truth ─────────────────────────────
   Pages include templates/_nav.html for the links and get these styles by
   linking this file. Do NOT redefine .nav per page — that is exactly how
   the per-page size drift happened (tests/obs/test_nav_single_source.py
   enforces this). Local-var fallbacks keep per-page themes working: the
   Floor's ?theme=white redefines --panel/--ink/--muted/--rule and the nav
   follows; pages without locals fall back to the kit tokens. */
.nav { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.nav a { text-decoration:none; font:700 12px/1.2 var(--t-font-ui); letter-spacing:.4px;
  padding:5px 13px; border-radius:8px;
  background:var(--panel, var(--t-surface));
  border:1px solid var(--rule, var(--t-border));
  color:var(--muted, var(--t-muted));
  display:inline-flex; align-items:center; gap:7px; }
.nav a:hover { color:var(--ink, var(--t-text)); }
.nav a[aria-current="page"] { color:var(--ink, var(--t-text));
  border-color:var(--ink, var(--t-text));
  box-shadow:inset 0 0 0 1px var(--ink, var(--t-text)); }
.nav a .dot { width:7px; height:7px; border-radius:50%; }

/* ── Canonical page frame ────────────────────────────────────────────────
   The same numbers ledger.html (.wrap) and floor.html (.floor) already use:
   nav-bearing pages share one frame so the bar sits at the same offset on
   every page. New pages: <div class="fk-wrap"> …nav + content… </div>. */
.fk-wrap { padding:18px; max-width:1180px; margin:0 auto; }