/* ─────────────────────────────────────────────────────────────────────────
   fractional.quest — design system
   Two surfaces, one language:
     [data-surface="editorial"]  warm white, long-form, executive trust
     [data-surface="console"]    dark phosphor, working tools (job browse)
   Shared: JetBrains Mono for data/UI, Geist for prose, phosphor accent,
   `›` `~/` `[ ]` motifs, tier badges, mono numerics.
   ───────────────────────────────────────────────────────────────────────── */

/* shared tokens */
:root{
  --accent-h: 150;
  /* shared sizing rhythm */
  --r-2: 2px;
  --r-4: 4px;
}

/* EDITORIAL surface — warm white */
[data-surface="editorial"]{
  --bg:        oklch(0.985 0.004 90);
  --bg-2:      oklch(0.965 0.006 90);
  --bg-3:      oklch(0.945 0.008 90);
  --bg-ink:    oklch(0.16  0.012 90);   /* hero / footer dark band */
  --line:      oklch(0.88  0.008 90);
  --line-2:    oklch(0.78  0.012 90);
  --ink:       oklch(0.18  0.012 90);
  --ink-2:     oklch(0.36  0.014 90);
  --ink-3:     oklch(0.50  0.014 90);
  --ink-4:     oklch(0.62  0.014 90);
  /* Canonical editorial accent — BLUE (single source of truth).
     Console surface keeps phosphor green below. Do not redeclare per-page. */
  --accent:     oklch(0.52 0.22 264);
  --accent-2:   oklch(0.40 0.20 264);
  --accent-bg:  oklch(0.52 0.22 264 / 0.08);
  --accent-bg2: oklch(0.52 0.22 264 / 0.04);
  --warn:      oklch(0.58 0.16 65);
  --hot:       oklch(0.55 0.20 25);
  --cool:      oklch(0.50 0.16 240);
}

/* CONSOLE surface — dark phosphor */
[data-surface="console"]{
  --bg:        oklch(0.14 0.012 160);
  --bg-2:      oklch(0.17 0.014 160);
  --bg-3:      oklch(0.20 0.016 160);
  --line:      oklch(0.27 0.014 160);
  --line-2:    oklch(0.34 0.018 160);
  --ink:       oklch(0.96 0.012 130);
  --ink-2:     oklch(0.78 0.012 140);
  --ink-3:     oklch(0.58 0.014 140);
  --ink-4:     oklch(0.42 0.014 140);
  --accent:    oklch(0.86 0.18 var(--accent-h));
  --accent-2:  oklch(0.66 0.16 var(--accent-h));
  --accent-bg: oklch(0.86 0.18 var(--accent-h) / 0.12);
}

/* ─── primitives ──────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:'Geist','Inter',ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"calt","ss02"}
.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:#fff}
[data-surface="editorial"] ::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* ─── topbar (shared) ─────────────────────────────────────────────────── */
.fq-top{display:flex;align-items:center;gap:18px;padding:12px 28px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.fq-top .brand{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.01em;font-size:14px;color:var(--ink)}
.fq-top .brand a{color:inherit}
.fq-top .glyph{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);border-radius:var(--r-2);font-size:12px}
.fq-top .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent)}
.fq-top nav{display:flex;gap:2px;font-family:'JetBrains Mono',monospace;font-size:12px}
.fq-top nav a{padding:6px 10px;color:var(--ink-3);border-radius:var(--r-2)}
.fq-top nav a.on{color:var(--accent);background:var(--accent-bg)}
.fq-top nav a:hover{color:var(--ink);text-decoration:none}
.fq-top .spacer{flex:1}

/* ─── buttons ─────────────────────────────────────────────────────────── */
.btn{appearance:none;cursor:pointer;font-family:'Geist',sans-serif;font-weight:500;font-size:13.5px;
  padding:9px 16px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;transition:border-color .15s, background .15s}
.btn:hover{border-color:var(--ink-3);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-surface="console"] .btn.primary{color:var(--bg)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:12.5px}

/* ─── eyebrow / labels ────────────────────────────────────────────────── */
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);font-weight:500}
.eyebrow .accent{color:var(--accent)}

/* ─── tier badges ─────────────────────────────────────────────────────── */
.tier-badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;font-weight:600;
  padding:2px 7px;border:1px solid var(--line-2);border-radius:1px}
.tier-badge[data-t="COMMAND"]{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
.tier-badge[data-t="OPS"]{color:var(--warn);border-color:var(--warn)}
.tier-badge[data-t="RECON"]{color:var(--cool);border-color:var(--cool)}

/* ─── data tag ────────────────────────────────────────────────────────── */
.tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);
  padding:2px 7px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-2);display:inline-block}

/* ─── footer (shared) ─────────────────────────────────────────────────── */
.fq-foot{padding:48px 28px 28px;background:var(--bg-ink, var(--bg-3));color:#d8d6cd;
  border-top:1px solid var(--line)}
[data-surface="editorial"] .fq-foot{background:oklch(0.16 0.012 90);color:#d8d6cd}
.fq-foot a{color:#a5a399}
.fq-foot a:hover{color:#fff}
.fq-foot .grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;max-width:1200px;margin:0 auto}
.fq-foot h6{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#7e7c72;margin:0 0 12px;font-weight:500}
.fq-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:13px}
.fq-foot .colophon{display:flex;justify-content:space-between;align-items:center;
  max-width:1200px;margin:36px auto 0;padding-top:20px;border-top:1px solid #2b2920;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#7e7c72;letter-spacing:.04em}
.fq-foot .brand-mark{font-family:'JetBrains Mono',monospace;font-weight:600;color:#fff;font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.fq-foot .brand-mark .glyph{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);border-radius:var(--r-2);font-size:11px}
.fq-foot p.tag-line{font-size:13px;color:#a5a399;margin:0 0 16px;max-width:32ch}

/* page max */
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* ─── responsive ──────────────────────────────────────────────────────── */
@media (max-width:880px){
  .fq-foot .grid{grid-template-columns:1fr 1fr}
  .fq-top nav{display:none}
}