/* ============================================================
   AI BUILD LAB — Field Manual design system (single source)
   Light "Field Manual" aesthetic, lifted from the approved sandbox
   (library/index-fieldguide.html) and the-studio/design-system.

   Canonical tokens + shared primitives for the whole portal. Each
   surface (portal.css, cards/cards.css, library/index.html, lib/nav.js)
   keeps its own component CSS but draws every color/font from here.

   Wired in three places:
     - cards/_template/shell.html      <link> (regenerates to all cards)
     - library/index.html              <link>
     - onboarding/colors_and_type.css  @import (covers standard pages + nav)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Box-sizing reset — the dark-era cards.css had this; the Field Manual conversion
   dropped it, which made padded+max-width elements (e.g. .body) render wider than
   intended (content-box). Restores border-box so FM widths match the design + terminal. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- Field Manual palette ---- */
  --cream:        #F4F1EA;   /* paper */
  --cream-2:      #E8E3D6;
  --grid:         #E5E2D9;   /* graph-paper lines (legacy bridge: --dark-3 border consumers) */
  --grid-whisper: rgba(17,17,17,0.02);  /* canonical FM background grid line — Wade-approved
                                            round-3 finals (07-11), promoted from the Library
                                            review demo. Kept distinct from --grid so border
                                            consumers (--dark-3) are unaffected. */
  --cream-border: rgba(17,17,17,0.10);
  --surface:      #ffffff;   /* card / panel fill (theme-aware; replaces hardcoded #fff) */
  --surface-2:    #ffffff;   /* nested surface */
  --ink:          #111111;   /* text + borders */
  --ink-2:        #3A3A3A;
  --ink-3:        #6B6B6B;
  --neon:         #C8FF00;   /* PRIMARY accent — unified HOT 06-29-2026 */
  --neon-soft:    #DBFB6B;   /* retained calm variant / one-token revert */
  --neon-dim:     rgba(200,255,0,0.18);
  --neon-glow:    rgba(200,255,0,0.35);
  --on-accent:    #111111;   /* fixed dark text/icon on lime/coral fills — never flips with theme */
  --on-ink:       #F4F1EA;   /* fixed light text/icon on ink/dark-band fills — never flips with theme.
                                 The a-ink cover band stays dark in BOTH themes (terminal gives it its
                                 own dark gradient), so its icon needs a pinned light color, not --cream
                                 (which flips to near-black under terminal and made the band's icon
                                 disappear — rule 8, found by Wade 07-11). */
  --blue:         #00D4FF;
  --blue-dim:     rgba(0,212,255,0.12);
  --coral:        #FF6B6B;
  --coral-dim:    rgba(255,107,107,0.12);
  --teal:         #4ECDC4;
  --teal-dim:     rgba(78,205,196,0.12);

  /* Opaque accent tints (the *-dim colors are translucent and let the graph-paper
     grid show through; use these solid equivalents for any card/block/badge fill). */
  --neon-tint:    #EEF6CC;
  --blue-tint:    #DAF2F6;
  --coral-tint:   #F9E2DE;
  --teal-tint:    #DCF1ED;

  /* ---- Fonts ---- */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Rhythm ---- */
  --inset: clamp(24px, 6vw, 96px);
  --ease:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --read-width: 760px;

  /* ---- Vertical rail layout tokens (lib/nav.js) ----
     One place owns the content offset for the fixed left rail. Rail hidden or
     narrow viewport → the tokens collapse and content reclaims full width. */
  --rail-w:   248px;   /* content offset for the fixed left rail (desktop, open) */
  --topbar-h: 0px;     /* mobile top-bar height; 0 in desktop rail mode */

  /* ---- Legacy-name bridge ----
     The dark-era component CSS in portal.css / cards.css / nav.js refers to
     --black, --dark-*, --white, --gray-*, --purple, --amber, --rose, etc.
     Re-point those names at Field Manual values so existing rules resolve to
     the light palette while each surface is reworked. Per the handoff color
     map, the dark site's violet/purple fold to ink, amber to neon, rose to
     coral. Only five card accents survive: neon, blue, coral, teal, ink. */
  --black:     var(--cream);
  --dark:      #ffffff;
  --dark-2:    #ffffff;
  --dark-3:    var(--grid);
  --dark-4:    #d8d4c8;
  --white:     var(--ink);
  --gray:      var(--ink-2);
  --gray-dim:  var(--ink-3);
  --gray-dark: #cfcabc;
  --purple:     var(--ink);   --purple-dim: rgba(17,17,17,0.08);
  --violet:     var(--ink);   --violet-dim: rgba(17,17,17,0.08);
  --amber:      var(--neon);  --amber-dim:  var(--neon-dim);
  --rose:       var(--coral); --rose-dim:   var(--coral-dim);
}

/* ============================================================
   TERMINAL theme (dark) — the toggle's alternate, over the SAME markup.
   Flips the base Field Manual tokens to dark; the legacy-name bridge
   (--black:var(--cream), --white:var(--ink), ...) and every component
   that reads these vars follow automatically. --neon stays hot.
   Default (no attribute) = Field Manual (light). Set data-design="terminal"
   on <html> for dark (Option-2 in-place recolor, used by card pages + the
   design-toggle slider). Hardcoded #fff fills must be swept to var(--surface)
   so they go dark here too (done in cards.css + each card's inline styles).
   ============================================================ */
html[data-design="terminal"] {
  --cream:        #0a0a0a;
  --cream-2:      #161616;
  --grid:         rgba(245,245,245,0.035);
  --grid-whisper: rgba(245,245,245,0.035);  /* terminal grid stays near-invisible, unchanged */
  --cream-border: rgba(245,245,245,0.12);
  --surface:      #111111;
  --surface-2:    #161616;
  --ink:          #f5f5f5;
  --ink-2:        #b3b3b3;
  --ink-3:        #9A9A9A;
  /* legacy literals (not var-bridged) need explicit dark values */
  --dark:         #111111;
  --dark-2:       #161616;
  --dark-4:       #2a2a2a;
  --gray-dark:    #2a2a2a;
  /* opaque accent tints → dark-appropriate */
  --neon-tint:    #1c2400;
  --blue-tint:    #062a30;
  --coral-tint:   #2e0f0f;
  --teal-tint:    #0c2a27;
  /* --neon stays hot #C8FF00; translucent --neon-dim/glow read fine on dark */
}

/* Rail state → content offset. These live outside :root so the attribute/media
   overrides win. body padding is the only layout participant; the rail is fixed. */
html[data-rail="hidden"] { --rail-w: 0px; }
@media (max-width: 980px) { :root { --rail-w: 0px; --topbar-h: 52px; } }

/* ============ Page surface: cream + faint graph-paper grid ============ */
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-whisper) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-whisper) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  padding-left: var(--rail-w);
  padding-top: var(--topbar-h);
  transition: padding-left .2s var(--ease);
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ============ Mono eyebrow with leading bar ============ */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--ink-2); letter-spacing: 2.5px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--ink); }
.eyebrow.neon::before { background: var(--neon); }

/* ============ Neon highlighter pill ============ */
.hilite {
  background: var(--neon); color: var(--on-accent);
  padding: 2px 10px; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ============ Field-manual buttons (square, ink border, offset shadow) ============ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  padding: 13px 22px; border: 2px solid var(--ink); border-radius: 4px;
  text-decoration: none; color: var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--neon); color: var(--on-accent); }
.btn-ghost   { background: var(--surface); }

/* ============ Status flag — NEW / UPDATED stamp (CSS only; not yet wired) ============
   Solid ink stamp so it pops on every accent band; the neon/cream border keeps
   it legible on the ink band. Reserved for the card cover's top-right corner. */
.cover-flag {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 8px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--cream);
}
.cover-flag.new     { color: var(--neon);  border-color: var(--neon); }
.cover-flag.updated { color: var(--cream); border-color: var(--cream); }

/* ============ Per-shelf pager arrow (square, ink border, offset shadow, neon hover) ============ */
.scroll-arrow {
  width: 44px; height: 44px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}
.scroll-arrow:hover  { background: var(--neon); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.scroll-arrow:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .btn, .scroll-arrow { transition: none; }
}

/* ============================================================
   Shelf plate + prominent-type utilities (promoted from the Library
   review demo, Stage 01, Wade-approved 07-11). A bordered plate wraps
   a shelf's stage-num/heading/sub so it reads as a labeled header
   card on the whisper-quiet grid, replacing the old paper-wash halo
   (which the whisper grid at --grid-whisper makes unnecessary — see
   the deleted "grid-legibility wash" rule in library/index.html).
   ============================================================ */
.fm-eyebrow-strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.fm-lede { font-size: 17px; color: var(--ink); }

.shelf-plate {
  background: var(--cream); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 16px 24px 18px; width: fit-content; max-width: 880px;
  margin: 0 var(--inset) 24px; position: relative;
}
.shelf-plate .shelf-head h2 { font-size: 34px; }
.shelf-plate .stage-num,
.shelf-plate .shelf-head,
.shelf-plate .shelf-sub { padding-left: 0; padding-right: 0; }
.shelf-plate .shelf-sub { padding-bottom: 0; max-width: 800px; }
.shelf-plate .shelf-head .shelf-meta {
  position: absolute; top: 16px; right: 24px;
  background: var(--surface); border: 2px solid var(--ink);
  font-size: 12px; padding: 5px 10px;
}

/* ============================================================
   TERMINAL SKIN — shared component re-skin (dark, "one layout two skins")
   Turns the shared Field Manual primitives into the classic console look so
   every field-manual page gets a good Terminal without per-page work. Values
   lifted from portal.classic.css / cards.classic.css (dark panels with a soft
   top-light gradient, lime as a TEXT accent, hairline borders, neon glow).
   Page-specific components add small touches on top of this.
   ============================================================ */
html[data-design="terminal"] .hilite { background: transparent; color: var(--neon); padding: 0; }
/* The FM hard offset shadows use --ink, which flips to light on black (harsh);
   drop them for the console look and use a neon glow on hover instead. */
html[data-design="terminal"] .btn { box-shadow: none; }
html[data-design="terminal"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 0 0 22px var(--neon-glow); }
html[data-design="terminal"] .btn:active { transform: translate(1px, 1px); box-shadow: none; }
html[data-design="terminal"] .btn-ghost { background: transparent; border-color: var(--cream-border); }
html[data-design="terminal"] .btn-ghost:hover { border-color: var(--neon); }
/* Accent-filled buttons: the .btn border is var(--ink), which flips near-white on
   terminal and reads as a WHITE RING around the lime fill (Wade 07-12, named on
   the library "Workshop Day" button). Class-level fix: lime-filled buttons get a
   literal dark border on terminal — never a light ring around an accent fill. */
html[data-design="terminal"] .btn-primary { border-color: #111111; }
html[data-design="terminal"] .scroll-arrow { box-shadow: none; border-color: var(--cream-border); }
html[data-design="terminal"] .scroll-arrow:hover { background: var(--surface); transform: translate(-1px,-1px); border-color: var(--neon); box-shadow: 0 0 18px var(--neon-glow); }
html[data-design="terminal"] .eyebrow.neon::before { background: var(--blue); }
/* Generic cards/panels: dark rounded + hairline + soft top-light gradient + glow hover. */
html[data-design="terminal"] .card {
  border-radius: 12px; border: 1.5px solid var(--cream-border); box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--surface);
}
html[data-design="terminal"] .card:hover { transform: translate(-3px, -3px); box-shadow: 0 0 0 1.5px var(--neon), 0 0 30px var(--neon-glow); }

/* Shelf plate (terminal variant): solid dark panel, hairline border, no hard offset. */
html[data-design="terminal"] .shelf-plate {
  background: var(--dark); border-color: #2a2a2a; border-width: 1px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
}
html[data-design="terminal"] .shelf-plate .shelf-head .shelf-meta {
  background: var(--dark); border-color: #2a2a2a; color: var(--ink);
}

/* ============================================================
   Keyboard focus (WDG audit leverage point, 07-11) — ONE coherent
   generic :focus-visible treatment for every interactive element, so
   individual components/pages never need their own focus ring. Any
   more-specific rule elsewhere (e.g. .learn-door:focus-visible) still
   wins on specificity and is left as-is. FM = blue outline; terminal
   flips via the same html[data-design="terminal"] pattern used above.
   ============================================================ */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
html[data-design="terminal"] a:focus-visible,
html[data-design="terminal"] button:focus-visible,
html[data-design="terminal"] [role="tab"]:focus-visible,
html[data-design="terminal"] [role="button"]:focus-visible,
html[data-design="terminal"] input:focus-visible,
html[data-design="terminal"] select:focus-visible,
html[data-design="terminal"] textarea:focus-visible,
html[data-design="terminal"] summary:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

/* ============================================================
   Skip-to-content link (lib/nav.js + lib/nav.classic.js inject this as
   the FIRST focusable element in #aibl-nav, targeting the page's main
   landmark). Visually hidden off-canvas until keyboard focus.
   ============================================================ */
.aibl-skip {
  position: fixed; top: -80px; left: 12px; z-index: 100001;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  text-decoration: none; padding: 10px 16px;
  border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink);
  transition: top .15s var(--ease);
}
.aibl-skip:focus-visible { top: 12px; outline: 3px solid var(--blue); outline-offset: 2px; }
html[data-design="terminal"] .aibl-skip { box-shadow: none; border-color: var(--cream-border); }
html[data-design="terminal"] .aibl-skip:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .aibl-skip { transition: none; } }