/* ==========================================================================
   North Star — "Ink & Paper" design system
   Source of truth: docs/refactor/north-star/docs/CRAFT-STANDARD.md
   Token values taken from the running prototypes (design/*.dc.html).
   North Star pages link ONLY this sheet (+ Google Fonts). Markup is
   prototype-faithful inline styles referencing these tokens; this file
   carries what inline can't: tokens, reset, keyframes, focus/hover/active
   states, reduced-motion.
   ========================================================================== */

:root {
  /* surfaces */
  --paper: #ffffff;          /* page bg where you read */
  --paper-2: #f6f6f4;        /* alternating / subtle panel */
  --panel: #ffffff;          /* card bg */
  --ink: #0d0d0f;            /* instrument band bg; primary ink on white */
  --ink-warm: #0d0d0f;       /* dark band variant */
  --ink-soft: #22201b;

  /* gold — the single rationed signal */
  --gold: #d8a035;           /* bright gold — DARK bands only */
  --gold-deep: #946810;      /* gold text on white (AA) */
  --gold-deep-alt: #8b6a1f;
  --gold-soft: #f3d89c;
  --gold-line: #c9a049;

  /* text */
  --t1: #0d0d0f;             /* body on white */
  --t2: #44444a;             /* secondary */
  --t3: #6b6b72;             /* tertiary / captions */

  /* hairlines */
  --hair: rgba(0, 0, 0, 0.09);
  --hair2: rgba(0, 0, 0, 0.16);
  --haird: rgba(255, 255, 255, 0.13);

  /* type */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Outfit', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  /* stage palette (engine parcel field) */
  --stage-inactive: #d8d8d4;
  --stage-proposed: #8a7cb8;
  --stage-approved: #3f72d4;
  --stage-construction: #d8a035;
  --stage-completed: #3a9d5d;

  /* motion */
  --m-micro: 150ms;
  --m-state: 300ms;
  --m-entrance: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* cadence tokens — one source so the page's pulses/scans can't drift */
  --c-pulse: 2.4s;   /* gold "live" status dot */
  --c-scan: 6.5s;    /* instrument scan sweep */
  --c-sweep: 3.2s;   /* one-shot solve convergence */
}

/* ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--t1);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; }
::selection { background: #d8a035; color: #141414; }

/* ── interaction-state system: focus-visible + active on every control ── */
a, button, input, select, textarea, [role="group"] button { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
button:active { transform: translateY(1px); }
button, a { -webkit-tap-highlight-color: transparent; }

/* ── keyframes (demonstrate, never decorate) ────────────────────────────── */
@keyframes helioRise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes helioScan  { 0% { transform: translateX(-110%); } 100% { transform: translateX(720%); } }
@keyframes helioPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@keyframes wfSweep    { 0% { left: 1%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 99%; opacity: 0; } }
@keyframes invPulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes invScan    { 0% { transform: translateX(-120%); } 100% { transform: translateX(780%); } }
@keyframes mapScan    { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(420%); opacity: 0; } }
@keyframes solveShimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }   /* idle "living archive" breathe on the Cost node — CSS so the §02 rAF rests at 0 */

/* ── component states (the prototype's style-hover, made real) ──────────── */
.ns-navlink { transition: color var(--m-micro) ease; }
.ns-navlink:hover { color: var(--ink); }

.ns-footlink { transition: color var(--m-micro) ease; }
.ns-footlink:hover { color: #fff; }

.ns-cta-dark { transition: background var(--m-state) ease, border-color var(--m-state) ease, transform var(--m-micro) ease; }
.ns-cta-dark:hover { border-color: var(--gold); background: #16161a; transform: translateY(-1px); }

/* ghost (outlined) CTA — peer-weight secondary door on light surfaces */
.ns-cta-ghost { transition: border-color var(--m-state) ease, transform var(--m-micro) ease; }
.ns-cta-ghost:hover { border-color: var(--gold-line); transform: translateY(-1px); }

.ns-btn-gold { transition: background var(--m-state) ease, border-color var(--m-state) ease; }
.ns-btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

.ns-underline { transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.ns-underline:hover { color: var(--gold-deep); border-color: var(--gold) !important; }

/* cards: gold top-rule reveal + subtle bg shift, all via CSS */
.ns-card { transition: background var(--m-state) ease; }
.ns-card:hover { background: #f8f8f6; }
.ns-card [data-topline] { transition: opacity var(--m-micro) ease; }
.ns-card:hover [data-topline] { opacity: 1 !important; }

.ns-proj { transition: border-color var(--m-state) ease; }
.ns-proj:hover { border-color: var(--hair2); }

.ns-figframe { transition: border-color var(--m-state) ease; }
.ns-figframe:hover { border-color: var(--gold-line); }
.ns-maplaunch { transition: transform var(--m-state) cubic-bezier(0.16,1,0.3,1), box-shadow var(--m-state) ease; will-change: transform; }
.ns-maplaunch:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 32px 64px -26px rgba(216,160,53,0.4) !important; }
/* devmap launcher scene — stage-coloured massing rises in view; static otherwise */
[data-devmap-scene] .bld { transform-box: fill-box; transform-origin: 50% 100%; }
[data-devmap-scene].is-live .bld { animation: bldRise 0.85s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--d, 0s); }
[data-devmap-scene] .scan2 { opacity: 0; }
[data-devmap-scene].is-live .scan2 { animation: mapScan 4.4s ease-in-out 1s infinite; }
@keyframes bldRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── type primitives: one eyebrow / fig / dark-footnote spec so the scale can't drift ── */
.ns-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; }
.ns-fig { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
.ns-foot-dark { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.6; color: rgba(255,255,255,0.7); }
.ns-solve-resolve:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
/* §02 instrument corner telemetry — desktop only (would crowd the ring on phones) */
.ns-solve-corner { position: absolute; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); pointer-events: none; max-width: 42%; line-height: 1.4; }
@media (max-width: 767px) { .ns-solve-corner { display: none; } }

/* ── composition primitives (DESIGN-DOCTRINE) — so pages COMPOSE these instead of re-deriving ── */
/* P5 · surface scopes: a band declares its surface; text never hard-codes a colour that can go invisible */
.on-paper { color: var(--t2); }
.on-ink { color: rgba(255,255,255,0.66); }
/* P4 · in-line keyword emphasis (the scan layer) — ink-weight on light, white on dark; gold is NEVER body emphasis */
.ns-key { font-weight: 600; color: var(--ink); }
.on-ink .ns-key, [data-band="ink"] .ns-key { color: #fff; }
/* MESSAGING-DOCTRINE L6 · the highlight — the ONE "read this" phrase per block (the marker treatment from ::selection). Rationed ~1/block; ink text on a soft-gold band, box-decoration-break so it wraps cleanly. */
.ns-mark { background: var(--gold-soft); color: var(--ink); font-weight: 600; padding: 0.04em 0.18em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.on-ink .ns-mark, [data-band="ink"] .ns-mark { background: var(--gold-soft); color: #1a1208; }
/* P4 · mono-square bullets (terminal register, never disc) */
.ns-blist { list-style: none; margin: 0; padding: 0; }
.ns-blist li { position: relative; padding-left: 17px; margin: 0 0 8px; }
.ns-blist li:last-child { margin-bottom: 0; }
.ns-blist li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 7px; height: 7px; background: var(--gold-deep); }
.on-ink .ns-blist li::before, [data-band="ink"] .ns-blist li::before { background: var(--gold); }
/* P7 · the named-noun link (quieter than a CTA; the noun itself is the proof link) */
.ns-herolink { color: var(--gold-deep); border-bottom: 1.5px solid var(--gold); font-weight: 500; transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.ns-herolink:hover { color: var(--ink); border-color: var(--gold-deep); }
/* P3 · hero ratio — text-dominant, gadget the witness; collapses to one column (message first) on phones */
.ns-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px,5vw,52px); align-items: center; }
@media (min-width: 768px) { .ns-hero-grid { grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: clamp(40px,4.5vw,64px); } }
/* P2 · section header — lead column + supporting column (full-width earns its width) */
.ns-sec-head { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,36px); }
@media (min-width: 960px) { .ns-sec-head { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(40px,5vw,72px); align-items: center; } }
/* P1/P2 · the SaaS console — left context rail · centre stage · right telemetry rail; one viewport on desktop, stacks on phone */
.ns-console { display: grid; grid-template-columns: 1fr; gap: clamp(18px,2.4vw,26px); position: relative; }
@media (min-width: 1024px) {
  .ns-console { grid-template-columns: minmax(168px,1fr) minmax(0,2.1fr) minmax(200px,1.18fr); gap: 0; align-items: stretch; }
  .ns-console > * { padding-inline: clamp(14px,1.5vw,24px); }
  .ns-console > * + * { border-left: 1px solid rgba(216,160,53,0.14); }
}
.ns-rail { display: flex; flex-direction: column; gap: clamp(14px,1.6vw,20px); }
/* P8 · reusable instrument figure-ground (hairline + radial, never drop-shadow theatrics) — for any dark data band */
.ns-instrument { box-shadow: inset 0 0 0 1px rgba(216,160,53,0.12); }

/* ── R5 mobile: dense underwrite grid stays readable; comfortable tap targets ── */
.ns-uw-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .ns-uw-records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* secondary interactive controls — bump to a comfortable touch height */
[data-pchip], [data-mass-btn], [data-deq-btn], [data-wfbtn], [data-wfrun] { min-height: 44px; }
/* horizontal-scroll wrappers for the wide diagrams get momentum scroll on touch */
.ns-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* reduced motion: show final state, no movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}