/* ============================================================
   BlueAlly Field Guide — Shared Design System
   Extracted verbatim from anatomy-of-an-ai-agent-harness.html
   Single source of truth for the look and feel of every page.
   Colours, type, and spacing follow the BlueAlly Brand Guidelines.
   ============================================================ */

:root{
  /* Brand palette (canonical PDF hex values) */
  --navy:#001278; --blue:#02A2FD; --black:#040822; --green:#36BF78;
  --lblue:#CDE5F1; --white:#FFFFFF; --mist:#EFF6FB;
  /* Derived ink tones */
  --ink:#040822; --ink-soft:rgba(4,8,34,.66); --ink-faint:rgba(4,8,34,.5);
  --hair:rgba(0,18,120,.12); --hair-strong:rgba(0,18,120,.2);
  /* Layout */
  --wrap:1120px; --read:730px;
  /* Type scale */
  --h1:clamp(2.45rem,5.2vw,4.3rem);
  --h2:clamp(1.7rem,3.4vw,2.55rem);
  --h3:1.28rem;
  --lead:clamp(1.12rem,1.9vw,1.34rem);
  --body:1.135rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--body); line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--navy); font-weight:700; line-height:1.1; letter-spacing:-.018em; margin:0 0 .5em}
h2{font-size:var(--h2); margin-bottom:.35em}
h3{font-size:var(--h3); letter-spacing:-.01em}
p{margin:0 0 1.15em}
a{color:var(--navy); text-decoration:underline; text-decoration-color:var(--hair-strong); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{text-decoration-color:var(--blue)}
strong{font-weight:700; color:var(--navy)}
em{font-style:italic}
sup a{font-size:.62em; font-weight:700; padding-left:1px; text-decoration:none; color:var(--blue); top:-.5em; position:relative}

/* progress + header */
.progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:linear-gradient(90deg,var(--navy),var(--blue)); transition:width .08s linear}
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--hair)}
.site-header .bar{max-width:var(--wrap); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.site-header img{height:30px; width:auto; display:block}
.site-header a{display:flex; align-items:center; text-decoration:none}
.site-header .tag{font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}

/* layout helpers */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.read{max-width:var(--read); margin-left:auto; margin-right:auto}
section{padding:clamp(54px,7vw,96px) 0}
.band-mist{background:var(--mist)}
.band-navy{background:var(--navy); color:var(--lblue)}
.band-navy h2,.band-navy h3,.band-navy h4{color:var(--white)}
.band-navy .lead,.band-navy p{color:var(--lblue)}
.band-navy strong{color:var(--white)}
.band-navy a{color:var(--white); text-decoration-color:rgba(255,255,255,.5)}
.band-navy a:hover{text-decoration-color:var(--white)}
.band-navy .step .b,.band-navy .fw .f h4,.band-navy .fw .f .bet{color:var(--white)}
.band-navy .step p,.band-navy .fw .f p{color:var(--lblue)}
.band-navy .step .num{border-color:var(--lblue); color:var(--lblue)}
/* Elements that sit DIRECTLY on a navy band need light text. The band stays
   navy in dark mode too, so light text is correct in both themes. (Light cards
   nested inside the band — .stat, .callout — keep their own dark-on-light text.) */
.band-navy figcaption{color:var(--lblue)}
.band-navy figcaption b{color:var(--white)}
.band-navy .comp .c .b{color:var(--white)}
.band-navy .comp .c p{color:var(--lblue)}
.band-navy .pull q{color:var(--white)}
.band-navy .pull .src{color:var(--lblue)}
.band-navy .def dt{color:var(--white)}
.band-navy .def dd{color:var(--lblue)}
/* A citation link inside a nested white .stat card must not inherit the band's
   white link colour (it would vanish on white). Restore a readable hue per theme. */
.band-navy .stat a{color:var(--navy)}
:root[data-theme="dark"] .band-navy .stat a{color:#58B4FD}
.kicker{font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 1.1em; display:flex; align-items:center; gap:.7em}
.kicker::before{content:""; width:26px; height:2px; background:var(--blue); display:inline-block}
.band-navy .kicker{color:var(--lblue)} .band-navy .kicker::before{background:var(--lblue)}
.lead{font-size:var(--lead); line-height:1.55; color:var(--ink-soft); font-weight:400}
.eyebrow-num{font-weight:700; color:var(--blue)}

/* hero */
.hero{padding:clamp(40px,6vw,76px) 0 clamp(40px,5vw,64px)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center}
.hero h1{margin-bottom:.32em}
.hero .lead{max-width:42ch}
.hero-tag{margin-top:1.8em; font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:.6em}
.hero-tag span{width:30px; height:2px; background:var(--green); display:inline-block}
.hero-fig{position:relative}
.hero-fig svg{filter:drop-shadow(0 18px 40px rgba(0,18,120,.12))}

/* TOC */
.toc{display:grid; grid-template-columns:repeat(2,1fr); gap:2px 40px; counter-reset:toc; max-width:880px}
.toc a{display:flex; gap:14px; padding:13px 4px; border-bottom:1px solid var(--hair); text-decoration:none; color:var(--navy); align-items:baseline}
.toc a:hover{color:var(--blue)}
.toc a .n{font-size:.82rem; font-weight:700; color:var(--blue); min-width:24px}
.toc a .t{font-weight:500}

/* callout (plain english) */
.callout{background:var(--lblue); border-radius:18px; padding:clamp(24px,3vw,40px); margin:2.2em 0}
.callout .pill{display:inline-block; background:var(--navy); color:var(--white); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:1.1em}
.callout h3{color:var(--navy); margin-bottom:.6em}
.defs{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 36px; margin-top:.4em}
.def{padding:0}
.def dt{font-weight:700; color:var(--navy); margin-bottom:2px}
.def dd{margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.5}

/* figure */
figure{margin:2.4em 0;}
figure svg{display:block; width:100%; height:auto; border-radius:18px; background:var(--white); border:1px solid var(--hair)}
figure.bleed svg{border:none; background:transparent}
figcaption{margin-top:.95em; font-size:.95rem; color:var(--ink-faint); text-align:center; max-width:60ch; margin-left:auto; margin-right:auto}
figcaption b{color:var(--ink-soft); font-weight:600}

/* stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:2.2em 0}
.stat{border:1px solid var(--hair); border-radius:16px; padding:24px 22px; background:var(--white)}
.stat .big{font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; color:var(--navy); line-height:1; letter-spacing:-.02em}
.stat .big .arw{color:var(--green)}
.stat .lab{margin-top:.6em; font-size:.95rem; color:var(--ink-soft); line-height:1.45}
.band-mist .stat{background:var(--white)}

/* component grid */
.layer{margin:1.8em 0 0}
.layer .h{display:flex; align-items:center; gap:12px; margin-bottom:.4em}
.layer .chip{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); padding:5px 12px; border-radius:999px}
.chip.run{background:var(--lblue)} .chip.cap{background:var(--green)} .chip.gov{background:var(--lblue)}
.comp{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 30px; margin-top:.8em}
.comp .c{display:flex; gap:14px}
.comp .c .num{flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:var(--navy); color:#fff; font-weight:700; font-size:.92rem; display:flex; align-items:center; justify-content:center}
.comp .c .b{font-weight:700; color:var(--navy)}
.comp .c p{margin:.1em 0 0; font-size:1.02rem; line-height:1.5; color:var(--ink-soft)}

/* steps */
.steps{counter-reset:s; margin:1.6em 0 0}
.step{display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--hair)}
.step .num{flex:0 0 auto; width:34px; height:34px; border-radius:999px; border:2px solid var(--navy); color:var(--navy); font-weight:700; display:flex; align-items:center; justify-content:center}
.step .b{font-weight:700; color:var(--navy)}
.step p{margin:.15em 0 0; color:var(--ink-soft); font-size:1.04rem; line-height:1.5}

/* framework list */
.fw{margin:1.6em 0 0; display:grid; gap:14px}
.fw .f{border:1px solid var(--hair); border-radius:14px; padding:18px 22px}
.fw .f h4{margin:0 0 .25em; color:var(--navy); font-size:1.1rem}
.fw .f p{margin:0; color:var(--ink-soft); font-size:1.03rem; line-height:1.5}
.fw .f .bet{font-weight:700; color:var(--navy)}

/* pullquote */
.pull{margin:1.6em auto; max-width:30ch; text-align:center}
.pull q{font-size:clamp(1.4rem,3vw,2rem); font-weight:300; color:var(--navy); line-height:1.25; quotes:none; letter-spacing:-.01em}
.pull .src{display:block; margin-top:.9em; font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--ink-faint); text-transform:none}

/* sources */
.refs{counter-reset:r; max-width:880px; margin:1.4em 0 0; padding:0; list-style:none; font-size:.98rem}
.refs li{padding:11px 0 11px 40px; border-bottom:1px solid var(--hair); position:relative; color:var(--ink-soft); line-height:1.45}
.refs li::before{counter-increment:r; content:counter(r); position:absolute; left:0; top:11px; font-weight:700; color:var(--blue); font-size:.84rem}
.refs li a{word-break:break-word}
.refs cite{font-style:normal; color:var(--navy); font-weight:600}

/* footer */
.site-footer{background:var(--black); color:var(--lblue); padding:64px 0 48px}
.site-footer img{height:34px; width:auto; margin-bottom:22px}
.site-footer .ft-tag{font-size:1.4rem; font-weight:700; color:#fff; letter-spacing:-.01em; margin:0 0 .4em}
.site-footer p{color:rgba(205,229,241,.72); font-size:.96rem; max-width:60ch; margin:0 0 .6em}
.site-footer .meta{margin-top:26px; padding-top:22px; border-top:1px solid rgba(205,229,241,.18); font-size:.86rem; color:rgba(205,229,241,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.site-footer a{color:var(--lblue)}

/* reveal */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.hero-fig svg{opacity:0; transform:scale(.94); transition:opacity 1s ease .15s, transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.hero-fig.in svg{opacity:1; transform:none}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero-fig{order:-1; max-width:460px}
  .toc,.defs,.comp,.stats{grid-template-columns:1fr}
  .stats{gap:14px}
  .site-header .tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.hero-fig svg{transition:none; opacity:1; transform:none}
}

/* ============================================================
   Homepage hub additions (cards / grid) — same visual language
   ============================================================ */
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:1.8em 0 0}
.card{display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:18px; background:var(--white);
  padding:26px 24px 22px; text-decoration:none; color:var(--navy);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,18,120,.10); border-color:var(--hair-strong)}
.card .ic{width:46px; height:46px; margin-bottom:16px}
.card .ct{font-size:1.18rem; font-weight:700; color:var(--navy); line-height:1.22; letter-spacing:-.01em; margin:0 0 .45em}
.card .cd{font-size:.99rem; color:var(--ink-soft); line-height:1.5; margin:0 0 1em}
.card .cgo{margin-top:auto; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--blue); display:flex; align-items:center; gap:.5em}
.card .cgo::after{content:"\2192"; transition:transform .2s ease}
.card:hover .cgo::after{transform:translateX(4px)}
.cat-head{display:flex; align-items:baseline; gap:14px; margin:0 0 .2em}
.cat-head .cnum{font-size:.82rem; font-weight:700; color:var(--blue)}
@media (max-width:960px){ .hub-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .hub-grid{grid-template-columns:1fr} }

/* ============================================================
   Header controls: theme toggle + "All field guides" back-link
   (theme-independent base styles; dark tweaks live below)
   ============================================================ */
.bar-right{display:flex; align-items:center; gap:16px}
.theme-toggle{appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center;
  justify-content:center; width:38px; height:38px; padding:0; border-radius:10px;
  border:1px solid var(--hair); background:transparent; color:var(--navy); cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease}
.theme-toggle:hover{border-color:var(--hair-strong); background:rgba(0,18,120,.05)}
.theme-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.theme-toggle svg{width:18px; height:18px; display:block}
.theme-toggle .i-sun{display:none}
.hero-back{margin:0 0 1.3em; font-size:.85rem; font-weight:600; letter-spacing:.01em}
.hero-back a{color:var(--ink-faint); text-decoration:none; display:inline-flex; align-items:center;
  gap:.45em; transition:color .2s ease}
.hero-back a:hover{color:var(--blue)}

/* ============================================================
   Dark theme — additive layer. Light mode above is unchanged.
   Activated by html[data-theme="dark"] (set pre-paint by the
   no-flash <head> script). Strategy: redefine the DERIVED ink /
   hairline / mist tokens so most rules adapt automatically, then
   override only the selectors that hardcode navy/white as INK or
   white as a SURFACE. Diagrams stay on a light "paper" card in
   both themes so the palette SVGs remain legible. On-dark text
   stays within the brand's approved set: white / light-blue /
   bright-blue / green.
   ============================================================ */
:root[data-theme="dark"]{
  --ink:#CBDDF2;
  --ink-soft:rgba(203,221,242,.72);
  --ink-faint:rgba(203,221,242,.5);
  --hair:rgba(205,229,241,.13);
  --hair-strong:rgba(205,229,241,.26);
  --mist:#0E1533;
}
/* page + surfaces */
body{transition:background-color .3s ease, color .3s ease}
:root[data-theme="dark"] body{background:#0A0E24}
:root[data-theme="dark"] .site-header{background:rgba(10,14,36,.85)}
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .band-mist .stat,
:root[data-theme="dark"] .card{background:#151B3F}
:root[data-theme="dark"] figure svg{background:#F3F7FC; border-color:rgba(0,18,120,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
:root[data-theme="dark"] .callout{background:#122149}
:root[data-theme="dark"] .chip.run,
:root[data-theme="dark"] .chip.gov{background:#1D2B59; color:var(--lblue)}
/* ink: selectors that hardcode navy (or white) as text/stroke */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] .stat .big,
:root[data-theme="dark"] .comp .c .b,
:root[data-theme="dark"] .step .b,
:root[data-theme="dark"] .fw .f h4,
:root[data-theme="dark"] .fw .f .bet,
:root[data-theme="dark"] .pull q,
:root[data-theme="dark"] .refs cite,
:root[data-theme="dark"] .callout h3,
:root[data-theme="dark"] .def dt,
:root[data-theme="dark"] .card .ct,
:root[data-theme="dark"] .hero-tag{color:#FFFFFF}
:root[data-theme="dark"] .card{color:#E7EFFA}
:root[data-theme="dark"] a{color:#58B4FD; text-decoration-color:rgba(88,180,253,.42)}
:root[data-theme="dark"] a:hover{text-decoration-color:#58B4FD}
:root[data-theme="dark"] .toc a{color:#E7EFFA}
:root[data-theme="dark"] .toc a:hover{color:#58B4FD}
:root[data-theme="dark"] .step .num{border-color:#FFFFFF; color:#FFFFFF}
/* hero figure: bind currentColor so on-background marks flip navy->white */
.hero-fig svg{color:var(--navy)}
:root[data-theme="dark"] .hero-fig svg{color:#FFFFFF; filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
/* toggle in dark */
:root[data-theme="dark"] .theme-toggle{color:#FFFFFF; border-color:rgba(205,229,241,.22)}
:root[data-theme="dark"] .theme-toggle:hover{background:rgba(205,229,241,.08); border-color:rgba(205,229,241,.34)}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
/* logo swaps to the white mark on the dark header (brand rule) */
.site-header .logo-dark{display:none}
:root[data-theme="dark"] .site-header .logo-light{display:none}
:root[data-theme="dark"] .site-header .logo-dark{display:block}
@media (prefers-reduced-motion:reduce){ body{transition:none} }