/* ===========================================================================
   guide-full.css , v3 skin for the full 16-chapter reference (guide-full.html).
   The booklet is self-contained; this overrides its tokens + element styles to
   the aihd v3 editorial system (loaded AFTER the booklet's own <style> and after
   aihd.css + site.css, so these win). Content + Mermaid diagrams untouched.
   Direction: quiet grey field, one Klein blue, generous air, a single reading
   measure centred with fluid gutters, drawn nav underline. No glow.
   =========================================================================== */

:root{
  --ink:#14151a; --ink-2:#2b2d34; --muted:#6a6e76; --line:rgba(20,21,26,.14); --soft:rgba(20,21,26,.045);
  --accent:#1d2bd4; --accent-press:#0c2bb0; --accent-soft:rgba(29,43,212,.08); --accent-line:rgba(29,43,212,.34);
  --code-bg:#15161b; --code-line:#2a2c33;
  --maxw:900px;                          /* comfortable long-form measure */
  --gutter:clamp(22px, 4.5vw, 96px);     /* fluid side gutter, matches the site */
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

body{
  background:#ececed !important; color:#14151a !important;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  background-image:radial-gradient(rgba(20,21,26,.05) 1px,transparent 1.2px); background-size:30px 30px;
}

/* restore the booklet's 2-column layout: sticky sidebar contents + reading column */
.wrap{display:grid !important; grid-template-columns:248px minmax(0,1fr) !important; gap:52px !important;
  max-width:1340px !important; margin:0 auto !important; padding:0 var(--gutter) 90px !important; align-items:start !important;}
main{min-width:0; padding-top:8px !important;}

/* cover + footer sit outside the grid , centred blocks on the reading measure */
.cover,.gf-foot{max-width:calc(var(--maxw) + 2 * var(--gutter)) !important;
  margin:0 auto !important; padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}

/* headings , Archivo */
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif !important; color:#14151a !important; letter-spacing:-.025em;}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem) !important; font-weight:600 !important; border-bottom:1px solid #14151a !important; padding-bottom:.36em !important; margin:0 0 .8em !important; line-height:1.05;}
h3{font-size:1.32rem !important; font-weight:600 !important; color:#14151a !important; margin:2em 0 .5em !important;}
h4{font-weight:600 !important;}
p,li{color:#2b2d34; font-size:1.02rem; line-height:1.66;}
a{color:#1d2bd4 !important; text-decoration:none !important; border-bottom:1px solid rgba(29,43,212,.34) !important; transition:border-color .18s var(--ease-out);}
a:hover{border-bottom-color:#1d2bd4 !important;}
strong,b{color:#14151a;}
hr{border:none !important; border-top:1px solid var(--line) !important; margin:2.4em 0 !important;}

/* code , dark blocks like the rest of the site */
code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace !important; font-size:.86em !important;
  background:#e4e4e6 !important; border:1px solid var(--line) !important; border-radius:5px !important; color:#14151a !important;}
pre{background:#15161b !important; border:1px solid #2a2c33 !important; border-radius:9px !important; padding:16px 18px !important; color:#e8eaee !important; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace !important;}
pre code{background:none !important; border:0 !important; color:#e8eaee !important; padding:0 !important;}
.copy-btn{font-family:"JetBrains Mono",monospace !important; text-transform:uppercase; letter-spacing:.08em; font-size:.56rem !important;
  color:rgba(255,255,255,.6) !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:5px !important; opacity:1 !important; transition:color .18s,background .18s;}
.copy-btn:hover{color:#fff !important; background:rgba(255,255,255,.16) !important;}
.copy-btn.copied{color:#8fa0ff !important; border-color:#8fa0ff !important;}

/* mermaid diagrams , keep light so the SVG reads, framed */
pre.mermaid{background:#fff !important; border:1px solid var(--line) !important; border-radius:12px !important; padding:24px !important; box-shadow:0 10px 30px rgba(20,21,26,.06);}
/* Mermaid uses class="node"/"edgeLabel" too , stop site.css's .node flow-primitive
   from uppercasing / mono-ing the labels (which overflowed and clipped the boxes). */
pre.mermaid *{text-transform:none !important; letter-spacing:normal !important;}
pre.mermaid text,pre.mermaid .nodeLabel,pre.mermaid .edgeLabel,pre.mermaid span,pre.mermaid div,pre.mermaid .node{font-family:"trebuchet ms",verdana,arial,sans-serif !important;}
pre.mermaid .node rect,pre.mermaid .node polygon,pre.mermaid .node circle{background:none !important;}

/* blockquote , callout */
blockquote{background:var(--accent-soft) !important; border-left:3px solid #1d2bd4 !important; border-radius:0 12px 12px 0 !important; color:#2b2d34 !important; padding:1em 1.2em !important; margin:1.3em 0 !important;}

/* explainer video , screen framing */
.explainer{margin:26px 0 34px;}
.explainer video{border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:0 14px 40px rgba(20,21,26,.10) !important;}
.explainer figcaption{font-family:"JetBrains Mono",monospace !important; font-size:.6rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important; font-weight:400 !important; margin-top:12px;}
.explainer figcaption::before{color:#1d2bd4 !important;}

/* ---- header (drawn-underline nav, matches the site) ---- */
.gf-nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:60px; padding:0 var(--gutter); border-bottom:1px solid var(--line);
  background:rgba(236,236,237,.72); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);}
.gf-brand{font-family:"Archivo",sans-serif; font-weight:600; font-size:1.34rem; letter-spacing:-.03em; color:#14151a !important; text-decoration:none; border:0 !important; display:inline-flex; align-items:baseline; line-height:1;}
.gf-brand .ii{position:relative; display:inline-block;}
.gf-brand .ii::after{content:""; position:absolute; left:50%; transform:translateX(-50%); width:.15em; height:.15em; border-radius:50%; background:#1d2bd4; top:.04em;}
.gf-navlinks{display:flex; gap:30px; align-items:center;}
.gf-navlinks a:not(.cta){position:relative; font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted) !important; text-decoration:none; border:0 !important; padding:2px 0;}
.gf-navlinks a:not(.cta)::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:#14151a; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out);}
.gf-navlinks a:not(.cta):hover{color:#14151a !important;}
.gf-navlinks a:not(.cta):hover::after{transform:scaleX(1);}
.gf-navlinks a.cta{font-family:"Archivo",sans-serif; font-weight:600; font-size:.84rem; letter-spacing:-.01em; text-transform:none; color:#fff !important; background:#1d2bd4; padding:8px 16px; border-radius:7px; text-decoration:none; border:0 !important; transition:background .18s var(--ease-out);}
.gf-navlinks a.cta:hover{background:#0c2bb0;}
.nav-burger{display:none; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:40px; height:40px; background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; padding:0;}
.nav-burger span{display:block; width:17px; height:1.5px; background:#14151a; transition:transform .18s ease, opacity .18s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-menu{display:none; position:fixed; top:60px; left:0; right:0; z-index:49; background:rgba(236,236,237,.86); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:0 24px 44px rgba(20,21,26,.14); padding:8px 20px 20px; flex-direction:column;}
.mobile-menu.open{display:flex;}
.mobile-menu a,.mobile-menu .mm-search{font-family:"Archivo",sans-serif; font-weight:500; font-size:1.18rem; letter-spacing:-.015em; color:#14151a !important; text-decoration:none; text-align:left; padding:15px 2px; border:0 !important; border-bottom:1px solid var(--line) !important; background:none; cursor:pointer; width:100%;}
.mobile-menu .mm-search{color:var(--muted) !important; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:0 !important;}
@media(max-width:820px){ .gf-navlinks a:not(.cta){display:none} .gf-navlinks .nav-search{display:none} .nav-burger{display:flex} }

/* scroll progress bar (top hairline fill) */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent;}
.scroll-progress > span{display:block; height:100%; width:0; background:#1d2bd4;}

/* ---- cover ---- */
.cover{padding-top:64px !important; padding-bottom:20px !important;}
.cover .kicker{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 18px;}
.cover h1{font-size:clamp(2.4rem,6.4vw,4.6rem) !important; font-weight:600 !important; letter-spacing:-.04em; line-height:.98; margin:0 0 14px;}
.cover .sub{font-size:1.18rem; color:var(--muted); margin:0 0 30px; max-width:60ch;}
.cover .rule{height:4px; width:88px; background:#1d2bd4; border-radius:4px; margin:0 0 30px;}
.cover .meta{display:flex; gap:34px; flex-wrap:wrap; font-size:.9rem; color:#42505e; border-top:1px solid var(--line); padding-top:22px;}
.cover .meta b{display:block; font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:4px;}
.cover-note{color:var(--muted); max-width:60ch;}

/* ---- table of contents , sticky sidebar, accessible while reading ---- */
.toc{position:sticky !important; top:78px !important; align-self:start !important;
  max-height:calc(100vh - 100px) !important; overflow:auto !important;
  padding:6px 20px 24px 0 !important; border-right:1px solid var(--line) !important;
  max-width:none !important; margin:0 !important;}
.toc h4{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--ink);}
.toc ol{columns:1 !important; list-style:none; margin:0; padding:0;}
.toc li{font-size:.82rem; line-height:1.35;}
.toc li a{display:block; padding:.32em .5em !important; border:0 !important; color:#3a444f !important; border-radius:6px; transition:background .18s, color .18s;}
.toc li a:hover{background:var(--accent-soft); color:#1d2bd4 !important;}
.toc-appendix a{color:var(--muted) !important; font-style:italic;}

/* ---- chapters , fill the main column; text keeps a reading measure, but
   diagrams / tables / media get the full width so flows aren't squished ---- */
.chapter{max-width:none !important; margin:0 !important; padding:72px 0 !important; border-top:1px solid var(--line) !important;}
.chapter:first-child{border-top:0 !important;}
.chapter.appendix{background:transparent !important;}
.chapter p,.chapter ul,.chapter ol,.chapter h2,.chapter h3,.chapter h4,
.chapter blockquote,.chapter .codewrap,.chapter hr,.chapter .cover-note{max-width:820px;}
.chapter pre.mermaid,.chapter table,.chapter .explainer,.chapter figure{max-width:100% !important; width:100% !important;}

/* ---- reference tables ---- */
table{border-collapse:collapse; width:100%; font-size:.92rem; margin:1.2em 0;}
th,td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top;}
th{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--soft); font-weight:400;}
tr:nth-child(even) td{background:rgba(20,21,26,.02);}

/* ---- footer ---- */
.gf-foot{padding-top:36px !important; padding-bottom:56px !important; border-top:1px solid var(--line) !important; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:center;}
.gf-foot,.gf-foot a{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.gf-foot a{border:0 !important; color:var(--muted) !important;}
.gf-foot a:hover{color:var(--ink) !important;}

/* skip-link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{position:fixed; left:16px; top:12px; width:auto; height:auto; z-index:300; background:#1d2bd4; color:#fff !important; padding:8px 14px; border-radius:8px; border:0 !important;}

/* decorative overlay off (site uses a structural grid instead) */
.grid-overlay{display:none !important;}

/* ---- collapse the sidebar to a top block on narrow screens ---- */
@media(max-width:980px){
  .wrap{grid-template-columns:1fr !important; gap:0 !important; padding-bottom:60px !important;}
  .toc{position:static !important; max-height:none !important; overflow:visible !important;
    border-right:0 !important; border-bottom:1px solid var(--line) !important; padding:8px 0 20px !important; margin-bottom:8px !important;}
  .toc ol{columns:2 !important; column-gap:40px;}
  .chapter{max-width:none !important;}
}
@media(max-width:560px){ .toc ol{columns:1 !important;} }