/* ============================================================================
   Cerveau docs — shared shell.
   Tokens lifted verbatim from site/index.html so the two read as one product.
   ========================================================================== */
:root{
  --cream:#D9D9D9;
  --ink:#161616;
  --cobalt:#C0304A;

  --bg:var(--cream);
  --fg:var(--ink);
  --fg-soft:#403C34;
  --fg-faint:#635E4C;
  --rule:rgba(22,22,22,.14);
  --card:rgba(22,22,22,.045);
  --accent:var(--cobalt);
  --accent-fg:var(--cream);
  --band-bg:#1B1B1B;
  --band-fg:var(--cream);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"DejaVu Sans Mono",Menlo,Consolas,monospace;

  --measure:44rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --radius:14px;

  --side:17rem;      /* the section nav */
  --toc:14rem;       /* on-page contents */
  --nav-h:3.75rem;
}
html[data-theme="dark"]{
  --bg:#161616;
  --fg:#D9D9D9;
  --fg-soft:#B8B2A6;
  --fg-faint:#8D8778;
  --rule:rgba(217,217,217,.16);
  --card:rgba(217,217,217,.05);
  --accent:#C0304A;
  --accent-fg:#D9D9D9;
  --band-bg:#1B1B1B;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{font-weight:400;line-height:1.15;letter-spacing:-.021em;margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}

/* ---------- top bar ---------- */
.top{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:0 var(--gutter);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.top .brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.8125rem;
  letter-spacing:.24em;
  text-transform:lowercase;
}
.top .brand svg{width:20px;height:20px;color:var(--accent);flex:none}
.top .in{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-faint);
  padding:.15rem .5rem;
  border:1px solid var(--rule);
  border-radius:999px;
}
.top .sp{flex:1}
.top a.tl{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--fg-faint);
  text-decoration:none;
  transition:color .25s ease;
}
.top a.tl:hover{color:var(--accent)}
.tgl{
  width:2.4rem;height:1.3rem;flex:none;
  border:1px solid var(--rule);
  border-radius:999px;
  background:none;
  position:relative;
  cursor:pointer;
  padding:0;
}
.tgl::after{
  content:"";
  position:absolute;
  top:50%;left:.22rem;
  width:.8rem;height:.8rem;
  border-radius:50%;
  background:var(--fg);
  transform:translateY(-50%);
  transition:transform .3s cubic-bezier(.6,0,.2,1);
}
html[data-theme="dark"] .tgl::after{transform:translate(1.05rem,-50%)}

/* ---------- shell ---------- */
.shell{
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr) var(--toc);
  gap:clamp(1.5rem,3vw,3rem);
  max-width:96rem;
  margin:0 auto;
  padding:0 var(--gutter);
  align-items:start;
}

/* ---------- section nav ---------- */
.side{
  position:sticky;
  top:var(--nav-h);
  max-height:calc(100vh - var(--nav-h));
  overflow-y:auto;
  padding:2rem 0 4rem;
}
.side-grp{margin-bottom:1.6rem}
.side-grp > span{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:.6rem;
}
.side a{
  display:block;
  padding:.3rem 0 .3rem .8rem;
  border-left:1px solid var(--rule);
  font-size:.9375rem;
  color:var(--fg-soft);
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease;
}
.side a:hover{color:var(--fg);border-left-color:var(--fg-faint)}
.side a.on{color:var(--accent);border-left-color:var(--accent)}

/* ---------- page body ---------- */
.doc{
  padding:clamp(2rem,5vh,3.5rem) 0 6rem;
  min-width:0;
  max-width:var(--measure);
}
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:1rem;
}
.doc h1{font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);margin-bottom:1rem}
.doc .lede{
  font-size:1.15rem;
  line-height:1.55;
  color:var(--fg-soft);
  margin-bottom:2.5rem;
}
.doc h2{
  font-size:1.55rem;
  margin:3rem 0 1rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.doc h3{
  font-size:1.15rem;
  margin:2rem 0 .7rem;
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.doc p{margin:0 0 1rem}
.doc ul,.doc ol{margin:0 0 1.15rem;padding-left:1.35rem}
.doc li{margin-bottom:.4rem}
.doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.doc a:hover{border-bottom-color:var(--accent)}
.doc strong{font-weight:400;color:var(--fg)}
.doc em{font-style:italic;color:var(--fg-soft)}

/* inline code */
.doc code{
  font-family:var(--mono);
  font-size:.85em;
  padding:.1em .35em;
  border-radius:4px;
  background:var(--card);
  color:var(--fg);
}
/* blocks */
.doc pre{
  margin:0 0 1.35rem;
  padding:1rem 1.15rem;
  background:var(--band-bg);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow-x:auto;
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.75;
  color:#D9D9D9;
}
.doc pre code{background:none;padding:0;color:inherit;font-size:inherit}
.doc pre .c{color:#8D8778}          /* comment */
.doc pre .k{color:var(--cobalt)}    /* keyword / prompt */
.doc pre .s{color:#B8B2A6}          /* string / value */

/* tables */
.doc table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.5rem;
  font-size:.9375rem;
}
.doc th{
  text-align:left;
  font-family:var(--mono);
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-faint);
  padding:.5rem .75rem .5rem 0;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.doc td{
  padding:.6rem .75rem .6rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  color:var(--fg-soft);
}
.doc td:first-child{color:var(--fg)}
.doc td code{white-space:nowrap}
.tw{overflow-x:auto;margin-bottom:1.5rem}
.tw table{margin-bottom:0}

/* callouts */
.note,.warn,.tip{
  margin:0 0 1.5rem;
  padding:1rem 1.15rem;
  border:1px solid var(--rule);
  border-left:2px solid var(--fg-faint);
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--card);
  font-size:.9375rem;
}
.note b,.warn b,.tip b{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.4rem;
}
.warn{border-left-color:var(--accent)}
.warn b{color:var(--accent)}
.tip{border-left-color:var(--accent)}
.tip b{color:var(--accent)}
.note b{color:var(--fg-faint)}

/* ---------- diagrams ----------
   Built to the diagram-design system, skinned with the Cerveau profile.
   Semantic roles are CSS custom properties so one SVG serves both themes —
   the skill emits fixed light/dark files, the docs toggle at runtime. */
.fig{
  /* light */
  --d-paper:#D9D9D9;
  --d-paper2:#CFCFCF;
  --d-ink:#161616;
  --d-muted:#403C34;
  --d-soft:#635E4C;
  --d-rule:rgba(22,22,22,.14);
  --d-accent:#C0304A;
  --d-accent-text:#AB2A42;   /* cherry fails AA as text: 3.95:1 */
  --d-accent-tint:rgba(192,48,74,.08);
  --d-zone:rgba(22,22,22,.02);
  --d-zone-line:rgba(22,22,22,.10);

  margin:0 0 2rem;
  padding:1.75rem 1.5rem 1.25rem;
  border:1px solid var(--rule);
  border-radius:8px;
  background:transparent;
}
html[data-theme="dark"] .fig{
  --d-paper:#161616;
  --d-paper2:#1B1B1B;
  --d-ink:#D9D9D9;
  --d-muted:#B8B2A6;
  --d-soft:#8D8778;
  --d-rule:rgba(217,217,217,.16);
  --d-accent:#C0304A;
  --d-accent-text:#E05A70;   /* 5.05:1 on #161616 */
  --d-accent-tint:rgba(192,48,74,.12);
  --d-zone:rgba(217,217,217,.02);
  --d-zone-line:rgba(217,217,217,.10);
}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{
  margin-top:1.25rem;
  padding-top:.9rem;
  border-top:1px solid var(--rule);
  font-family:"Instrument Serif",var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.5;
  color:var(--fg-faint);
}

/* --- primitives, per the design system's node-treatment table --- */
.fig .mask{fill:var(--d-paper)}                                  /* opaque under-mask */
.fig .box{fill:var(--d-paper);stroke:var(--d-ink);stroke-width:1}          /* backend / step */
.fig .store{fill:rgba(22,22,22,.05);stroke:var(--d-muted);stroke-width:1}  /* store / state */
html[data-theme="dark"] .fig .store{fill:rgba(217,217,217,.05)}
.fig .ext{fill:var(--d-zone);stroke:var(--d-rule);stroke-width:1}          /* external */
.fig .focal{fill:var(--d-accent-tint);stroke:var(--d-accent);stroke-width:1}
.fig .async{fill:none;stroke:var(--d-rule);stroke-width:1;stroke-dasharray:4 3}
.fig .zone{fill:var(--d-zone);stroke:var(--d-zone-line);stroke-width:.8}

/* connectors: muted default, accent for the headline path */
.fig .c{fill:none;stroke:var(--d-muted);stroke-width:1.2}
.fig .ca{fill:none;stroke:var(--d-accent);stroke-width:1.2}
.fig .cd{stroke-dasharray:4 3;stroke-width:1}

/* type — the system's roles, in its own families */
.fig .name{                       /* node name: sans, 12px, 600 */
  font-family:"Geist",system-ui,sans-serif;
  font-size:12px;font-weight:600;fill:var(--d-ink);
}
.fig .sub{                        /* technical only: ports, paths, types */
  font-family:"Geist Mono",var(--mono);
  font-size:9px;fill:var(--d-muted);
}
.fig .eyebrow{                    /* zone + axis labels */
  font-family:"Geist Mono",var(--mono);
  font-size:7px;font-weight:500;letter-spacing:.18em;
  fill:var(--d-soft);text-transform:uppercase;
}
.fig .alabel{                     /* arrow annotation */
  font-family:"Geist Mono",var(--mono);
  font-size:8px;letter-spacing:.06em;fill:var(--d-soft);
}
.fig .tag{                        /* rectangular type tag */
  font-family:"Geist Mono",var(--mono);
  font-size:7px;letter-spacing:.08em;fill:var(--d-muted);
}
.fig .focal .name,.fig text.fname{fill:var(--d-accent-text)}

/* key/value grid, for schemas */
.kv{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.5rem 1.25rem;
  margin:0 0 1.5rem;
  font-size:.9375rem;
}
.kv dt{font-family:var(--mono);font-size:.8125rem;color:var(--accent);white-space:nowrap}
.kv dd{margin:0;color:var(--fg-soft)}

/* route signature */
.sig{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.9375rem;
  margin:2rem 0 .6rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.sig .m{
  font-size:.625rem;
  letter-spacing:.14em;
  padding:.15rem .45rem;
  border:1px solid var(--accent);
  border-radius:3px;
  color:var(--accent);
}
.sig .u{color:var(--fg)}

/* pill tags */
.pill{
  display:inline-block;
  font-family:var(--mono);
  font-size:.5625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.15rem .45rem;
  border-radius:999px;
  border:1px solid var(--rule);
  color:var(--fg-faint);
  white-space:nowrap;
}
.pill.safe{color:var(--fg-faint)}
.pill.sens{color:var(--accent);border-color:var(--accent)}
.pill.dang{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ---------- on-page contents ---------- */
.toc{
  position:sticky;
  top:var(--nav-h);
  max-height:calc(100vh - var(--nav-h));
  overflow-y:auto;
  padding:calc(clamp(2rem,5vh,3.5rem) + .5rem) 0 4rem;
  font-size:.875rem;
}
.toc > span{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:.7rem;
}
.toc a{
  display:block;
  padding:.25rem 0;
  color:var(--fg-faint);
  text-decoration:none;
  line-height:1.4;
  transition:color .2s ease;
}
.toc a:hover,.toc a.on{color:var(--accent)}
.toc a.h3{padding-left:.8rem;font-size:.8125rem}

/* ---------- prev / next ---------- */
.pn{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:4rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.pn a{
  display:block;
  padding:1rem 1.15rem;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .25s ease;
}
.pn a:hover{border-color:var(--accent)}
.pn a span{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:.3rem;
}
.pn a b{font-weight:400;color:var(--fg)}
.pn .nx{text-align:right}

/* ---------- cards, for the index ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;
  margin:0 0 2rem;
}
.card{
  display:block;
  padding:1.25rem;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--card);
  text-decoration:none;
  transition:border-color .25s ease;
}
.card:hover{border-color:var(--accent)}
.card b{
  display:block;
  font-weight:400;
  font-size:1.0625rem;
  margin-bottom:.35rem;
  color:var(--fg);
}
.card span{font-size:.875rem;color:var(--fg-soft);line-height:1.5}

/* ---------- mobile ---------- */
.menu{display:none}
@media (max-width:64rem){
  .shell{grid-template-columns:var(--side) minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:52rem){
  :root{--gutter:1.15rem;--nav-h:3.25rem}
  .shell{grid-template-columns:minmax(0,1fr)}

  /* The bar has room for four things at 360px: the toggle, the mark, one
     link and the theme switch. The section menu becomes a dot. */
  .top{gap:.75rem}
  .menu{
    display:inline-grid;
    place-items:center;
    width:1.9rem;height:1.9rem;
    flex:none;
    padding:0;
    background:none;
    border:1px solid var(--rule);
    border-radius:50%;
    color:var(--fg-faint);
    cursor:pointer;
    transition:color .2s ease,border-color .2s ease;
  }
  /* three dots stacked: a section list, not a hamburger */
  .menu::before{
    content:"";
    width:3px;height:3px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .menu[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}

  /* the wordmark goes, the brain stays — it is the identity */
  .top .brand span{display:none}
  .top .brand svg{width:22px;height:22px}
  .top .in{display:none}
  /* one link, not two: github is the one worth reaching from a phone */
  .top a.tl[href^="https://cerveau.sh"]{display:none}

  .side{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    background:var(--bg);
    border-bottom:1px solid var(--rule);
    padding:1.25rem var(--gutter) 2rem;
    display:none;
    z-index:90;
  }
  .side.open{display:block}
  /* two columns of links: five groups fit one screen instead of three */
  .side-grp{margin-bottom:1.25rem}
  .side a{padding:.4rem 0 .4rem .75rem;font-size:.9375rem}

  .doc{max-width:none;padding-top:1.75rem}
  .doc h1{font-size:clamp(1.75rem,1.4rem + 2.4vw,2.2rem)}
  .doc .lede{font-size:1.0625rem;margin-bottom:1.75rem}
  .doc h2{font-size:1.35rem;margin-top:2.25rem}
  .doc h3{font-size:1.0625rem}

  /* code and tables are the two things that break a phone layout */
  .doc pre{
    margin-inline:calc(var(--gutter) * -1);
    border-radius:0;
    border-left:0;border-right:0;
    padding:.9rem var(--gutter);
    font-size:.75rem;
  }
  .tw{
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;
  }
  .doc table{font-size:.875rem;min-width:30rem}
  .fig{padding:1rem .85rem .8rem;margin-inline:calc(var(--gutter) * -.5)}
  .kv{grid-template-columns:minmax(0,1fr);gap:.15rem .75rem}
  .kv dt{margin-top:.6rem}
  .kv dd{padding-bottom:.35rem}
  .sig{gap:.45rem;font-size:.875rem}
  .cards{grid-template-columns:1fr}

  .pn{grid-template-columns:1fr}
  .pn .nx{text-align:left}
}

/* very narrow: drop the last link so the bar never wraps */
@media (max-width:24rem){
  .top a.tl{display:none}
  .top{gap:.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* desktop only: phones use their own overlay bars */
@media (min-width:52.01rem){
  /* ---- the scrollbar, in the page's own palette ----
     A track in the page ground and a faint ink thumb that darkens under the
     pointer; every scroller gets the same one. Firefox cannot style the
     thumb, so it gets the thin, recoloured native bar instead. */
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:var(--fg-faint);border:3px solid var(--bg);border-radius:999px}
  ::-webkit-scrollbar-thumb:hover{background:var(--fg-soft)}
  ::-webkit-scrollbar-corner{background:var(--bg)}
  @supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:var(--fg-faint) var(--bg)}
  }
}