/* ==========================================================================
   Marrinn — Documentation
   A skin over the site stylesheet, not a second design system. styles.css is
   loaded first and owns the reset, the fonts, the colour tokens, the spacing
   scale (--s-*, --sec-y, --gap, --card-p, --panel-p) and the type scale
   (--t-* / --d-*). Everything below is the docs app shell: sidebar, TOC,
   rendered Markdown, search. Same rule as the main sheet — a raw px value
   that isn't a hairline, a radius or a fixed rail width is a bug.

   The chrome (header, footer) is pushed in by tools/sync-chrome.py. Nothing
   docs-specific may live inside <header> or <footer> or the next sync eats it,
   which is why the docs controls sit in .docs-bar underneath.
   ========================================================================== */
:root{
  --sidebar-w:264px;          /* fixed rails: the content column is the fluid one */
  --toc-w:216px;
  --db-h:52px;                /* docs sub-bar */
  --docs-top:calc(var(--hdr-h-sm) + var(--db-h));
  --chip:rgba(123,88,197,0.10);
  --chip-line:rgba(123,88,197,0.22);
  --code-ground:#0d0f16;
}
/* the sub-bar sticks below the header, so anchored headings need to clear both */
html{scroll-padding-top:calc(var(--docs-top) + var(--s-4));}
body{background:var(--cream);}

/* --- docs sub-bar --------------------------------------------------------
   No backdrop-filter: this is sticky, and blurring the page width on every
   scroll frame is the exact thing the main header had removed. Solid cream. */
.docs-bar{
  position:sticky;top:var(--hdr-h-sm);z-index:20;
  background:var(--cream);border-bottom:1px solid var(--rule-cream);
}
.db-in{display:flex;align-items:center;gap:var(--s-4);height:var(--db-h);}
.db-tag{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--violet-ink);white-space:nowrap;
}
.db-crumb{
  flex:1;min-width:0;font-size:var(--t-xs);color:var(--on-cream-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-crumb .sep{opacity:.45;padding:0 var(--s-1);}
.db-search{
  display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;
  font-size:var(--t-xs);color:var(--on-cream-3);background:var(--card-hi);
  border:1px solid var(--rule-cream);border-radius:var(--s-2);
  padding:var(--s-2) var(--s-3);min-width:212px;
  transition:border-color .25s ease,color .25s ease;
}
.db-search:hover{border-color:var(--violet-ink);color:var(--ink-text);}
.db-search .lbl{flex:1;text-align:left;}
.db-search kbd{
  font-family:var(--mono);font-size:var(--t-mono-s);color:var(--on-cream-3);
  background:var(--cream-2);border:1px solid var(--rule-cream);
  border-radius:var(--s-1);padding:1px var(--s-2);
}
.db-menu{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:var(--s-1);}
.db-menu span{width:18px;height:1.5px;background:var(--ink-text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s ease;}
.db-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.db-menu[aria-expanded="true"] span:nth-child(2){opacity:0;}
.db-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* --- shell --------------------------------------------------------------- */
.docs-shell{background:var(--cream);color:var(--ink-text);}
/* --gap-lg is the editorial two-column gutter and eats 120px here; three rails
   want the smaller step, so the reading column keeps its measure */
.ds-in{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);gap:var(--s-8);}

/* --- sidebar ------------------------------------------------------------- */
.sidebar{
  position:sticky;top:var(--docs-top);align-self:start;
  height:calc(100vh - var(--docs-top));height:calc(100dvh - var(--docs-top));overflow-y:auto;
  padding:var(--s-8) var(--s-4) var(--s-10) 0;
  border-right:1px solid var(--rule-cream);
}
.nav-section{margin-bottom:var(--s-1);}
.nav-sec-btn{
  width:100%;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);text-align:left;transition:background .2s ease;
}
.nav-sec-btn:hover{background:var(--cream-2);}
.nav-sec-btn .ic{
  width:26px;height:26px;border-radius:var(--s-2);background:var(--chip);
  border:1px solid var(--chip-line);display:grid;place-items:center;font-size:var(--t-xs);flex:none;
}
.nav-sec-btn .lbl{flex:1;font-size:var(--t-sm);font-weight:600;color:var(--ink-text);letter-spacing:-0.01em;}
.nav-sec-btn .chev{font-size:var(--t-mono-s);color:var(--on-cream-3);transition:transform .25s var(--ease);}
.nav-section.collapsed .chev{transform:rotate(-90deg);}
.nav-section.collapsed .nav-group,.nav-section.collapsed .nav-links{display:none;}
.nav-group{margin:var(--s-2) 0 var(--s-1);padding-left:var(--s-3);}
.nav-group-lbl{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--on-cream-3);padding:var(--s-2) var(--s-3) var(--s-1);
}
.nav-links{list-style:none;padding-left:var(--s-3);margin-left:var(--s-3);border-left:1px solid var(--rule-cream);}
.nav-links a{
  display:block;font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--on-cream);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  transition:background .18s ease,color .18s ease;
}
.nav-links a:hover{background:var(--cream-2);color:var(--ink-text);}
.nav-links a.active{background:var(--chip);color:var(--violet-ink);font-weight:600;box-shadow:inset 2px 0 0 var(--violet-ink);}

/* --- content ------------------------------------------------------------- */
.content{min-width:0;padding:var(--s-9) 0 var(--sec-y);}
.doc-body{min-width:0;max-width:76ch;overflow-wrap:break-word;}
.doc-body h1{font-size:var(--d-lg);margin-bottom:var(--s-4);}
.doc-body h2{
  font-size:var(--d-sm);margin:var(--s-10) 0 var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--rule-cream);
}
.doc-body h3{font-size:var(--d-xs);margin:var(--s-8) 0 var(--s-3);}
.doc-body h4,.doc-body h5,.doc-body h6{
  font-family:var(--display);font-weight:500;letter-spacing:-0.02em;line-height:var(--lh-head);
  font-size:var(--t-xl);margin:var(--s-6) 0 var(--s-2);
}
.doc-body h2,.doc-body h3,.doc-body h4{scroll-margin-top:calc(var(--docs-top) + var(--s-4));}
.doc-body p{margin:var(--s-4) 0;color:var(--on-cream);}
.doc-body h1 + p{font-size:var(--t-xl);color:var(--on-cream-2);margin-bottom:var(--s-8);}
.doc-body strong{color:var(--ink-text);font-weight:600;}
.doc-body a.link{color:var(--violet-ink);font-weight:500;border-bottom:1px solid var(--chip-line);transition:border-color .2s ease;}
.doc-body a.link:hover{border-bottom-color:var(--violet-ink);}
.doc-body ul,.doc-body ol{margin:var(--s-4) 0;padding-left:var(--s-6);color:var(--on-cream);}
.doc-body li{margin:var(--s-2) 0;}
.doc-body li>ul,.doc-body li>ol{margin:var(--s-2) 0;}
.doc-body hr{border:0;border-top:1px solid var(--rule-cream);margin:var(--s-9) 0;}
.doc-body img{border-radius:var(--r);border:1px solid var(--rule-cream);margin:var(--s-6) 0;}

/* code — the pre is the scroll container, never the page */
.doc-body code{
  font-family:var(--mono);font-size:0.88em;background:var(--chip);color:var(--violet-ink);
  padding:2px var(--s-1);border-radius:var(--s-1);border:1px solid var(--chip-line);
}
.doc-body pre{
  max-width:100%;overflow-x:auto;background:var(--code-ground);
  border:1px solid rgba(123,88,197,0.22);border-radius:var(--r);
  padding:var(--s-5);margin:var(--s-5) 0;
}
.doc-body pre code{
  display:block;background:none;border:0;padding:0;color:var(--on-ink);
  font-size:var(--t-xs);line-height:1.75;white-space:pre;
}

/* tables */
.doc-body .table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--rule-cream);border-radius:var(--r);margin:var(--s-6) 0;}
.doc-body table{width:100%;border-collapse:collapse;background:var(--card-hi);font-size:var(--t-sm);}
.doc-body th,.doc-body td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--rule-cream-2);color:var(--on-cream);vertical-align:top;}
.doc-body thead th{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--on-cream-3);font-weight:500;background:var(--cream-2);
}
.doc-body tbody tr:last-child td{border-bottom:0;}
.doc-body td code{white-space:nowrap;}

/* quotes + callouts */
.doc-body blockquote{
  margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);border-radius:var(--r-sm);
  background:var(--cream-2);border:1px solid var(--rule-cream);border-left:3px solid var(--violet-ink);color:var(--on-cream);
}
.doc-body blockquote p{margin:var(--s-1) 0;}
.callout{margin:var(--s-5) 0;padding:var(--s-4) var(--s-4) var(--s-4) var(--s-10);border-radius:var(--r-sm);border:1px solid;position:relative;font-size:var(--t-sm);}
.callout::before{position:absolute;left:var(--s-4);top:var(--s-4);font-size:var(--t-lg);line-height:1.2;}
.callout p{margin:var(--s-1) 0;}
.callout .ttl{display:block;font-weight:600;margin-bottom:var(--s-1);}
.callout.note{background:#F4EFFC;border-color:#E2D2FB;color:#4B1D8C;}
.callout.note::before{content:"💡";}
.callout.tip{background:#ECFDF3;border-color:#BBF0D0;color:#10663B;}
.callout.tip::before{content:"✅";}
.callout.warning{background:#FFF7ED;border-color:#FBD9A8;color:#9A4A07;}
.callout.warning::before{content:"⚠️";}
.callout.danger{background:#FEF2F2;border-color:#FBCACA;color:#B42318;}
.callout.danger::before{content:"⛔";}
.callout.info{background:#EFF6FF;border-color:#BFD9FE;color:#1B4FA8;}
.callout.info::before{content:"ℹ️";}

.doc-body .badge{
  display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:0.08em;text-transform:uppercase;padding:2px var(--s-2);border-radius:var(--s-1);
  background:var(--chip);color:var(--violet-ink);border:1px solid var(--chip-line);
}
.doc-body .badge.role{background:#EEF6FF;color:#1B4FA8;border-color:#CFE2FE;}
.doc-body .badge.plan{background:#FFF7ED;color:#9A4A07;border-color:#FBD9A8;}

/* --- prev / next --------------------------------------------------------- */
.page-nav{display:flex;gap:var(--gap);margin-top:var(--s-11);border-top:1px solid var(--rule-cream);padding-top:var(--s-8);}
.page-nav a{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--rule-cream);
  border-radius:var(--r);padding:var(--card-p);
  transition:border-color .25s ease,transform .3s var(--ease);
}
.page-nav a:hover{border-color:var(--violet-ink);transform:translateY(-2px);}
.page-nav a.next{text-align:right;}
.page-nav .dir{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--on-cream-3);}
.page-nav .ttl{margin-top:var(--s-2);font-family:var(--display);font-size:var(--d-xs);font-weight:500;letter-spacing:-0.02em;color:var(--ink-text);}
.edit-note{margin-top:var(--s-7);font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.08em;color:var(--on-cream-3);}
.doc-loading{padding:var(--s-8) 0;color:var(--on-cream-3);font-size:var(--t-md);}

/* --- on-this-page -------------------------------------------------------- */
.toc{
  position:sticky;top:var(--docs-top);align-self:start;
  height:calc(100vh - var(--docs-top));height:calc(100dvh - var(--docs-top));overflow-y:auto;padding:var(--s-9) 0 var(--s-10);
}
.toc-ttl{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--on-cream-3);margin-bottom:var(--s-3);
}
.toc ul{list-style:none;}
.toc a{
  display:block;font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--on-cream-3);
  padding:var(--s-2) var(--s-3);border-left:2px solid var(--rule-cream);transition:color .18s ease,border-color .18s ease;
}
.toc a:hover{color:var(--ink-text);}
.toc a.active{color:var(--violet-ink);border-left-color:var(--violet-ink);font-weight:600;}
.toc a.lvl-3{padding-left:var(--s-6);}

/* --- search -------------------------------------------------------------- */
/* Same panel as the header dropdowns, so it reads as one system. The scrim is
   flat — a blurred full-screen layer is the cost the main site already paid. */
.search-overlay{
  position:fixed;inset:0;z-index:120;background:rgba(8,9,13,0.66);
  display:none;align-items:flex-start;justify-content:center;padding:clamp(60px,12vh,120px) var(--s-5);
}
.search-overlay.open{display:flex;}
.search-box{
  width:100%;max-width:600px;overflow:hidden;
  background:linear-gradient(160deg,#14161f,#0b0c12);
  border:1px solid rgba(123,88,197,0.22);border-radius:var(--r-lg);
  box-shadow:0 var(--s-6) var(--s-10) rgba(0,0,0,.55);
}
.search-box input{
  width:100%;border:0;border-bottom:1px solid rgba(255,255,255,0.09);background:none;
  font-size:var(--t-lg);padding:var(--s-5) var(--s-6);color:var(--on-ink);outline:none;
}
.search-box input::placeholder{color:var(--on-ink-4);}
.search-results{max-height:52vh;overflow-y:auto;padding:var(--s-2);}
.search-results a{display:block;padding:var(--s-3);border-radius:var(--r-sm);}
.search-results a:hover,.search-results a.sel{background:rgba(123,88,197,.13);}
.search-results .r-ttl{font-family:var(--display);font-size:var(--d-xs);font-weight:500;letter-spacing:-0.02em;color:var(--on-ink);}
.search-results .r-path{margin-top:2px;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.1em;text-transform:uppercase;color:var(--on-ink-4);}
.search-empty{padding:var(--s-8);text-align:center;color:var(--on-ink-4);font-size:var(--t-sm);}

.sidebar-backdrop{display:none;}

/* --- responsive — breakpoints match styles.css --------------------------- */
@media(max-width:1180px){
  .ds-in{grid-template-columns:var(--sidebar-w) minmax(0,1fr);}
  .toc{display:none;}
}
@media(max-width:960px){
  .ds-in{grid-template-columns:1fr;}
  .db-menu{display:flex;}
  .db-crumb{display:none;}
  .db-search{min-width:0;}
  .db-search .lbl,.db-search kbd{display:none;}
  /* The drawer keeps the sticky rule's top and height — top + bottom + auto
     height does not resolve here, it collapses to the nav tree's own height
     and pins to y=0, straight over the header. One formula, both states. */
  .sidebar{
    position:fixed;left:0;z-index:25;width:min(320px,86vw);
    background:var(--cream);padding:var(--s-6) var(--s-5) var(--s-10);
    box-shadow:var(--s-1) 0 var(--s-9) rgba(8,9,13,.22);
    transform:translateX(-105%);transition:transform .28s var(--ease);
  }
  .sidebar.open{transform:none;}
  .sidebar-backdrop.open{display:block;position:fixed;inset:var(--docs-top) 0 0;z-index:24;background:rgba(8,9,13,.42);}
  .content{padding:var(--s-7) 0 var(--s-10);}
  .page-nav{flex-direction:column;}
  .page-nav a.next{text-align:left;}
}

/* --- touch targets ------------------------------------------------------- */
/* Matches the marketing site's rule. The drawer toggle and search button are
   the only way to navigate docs on a phone, so they get the full 44px box.
   Prose links inside .doc-body stay inline — they are exempt. */
@media(max-width:960px),(pointer:coarse){
  .db-menu{min-width:44px;min-height:44px;justify-content:center;align-items:center;}
  .db-search{min-height:44px;}
  .nav-sec-btn{min-height:44px;}
  .nav-links a{display:flex;align-items:center;min-height:44px;}
}

/* ---- "See the layer" button ------------------------------------------------
   The docs markdown parser escapes raw HTML (inline() calls esc()), so a
   hand-written <a class="button"> renders as visible tag text. A markdown link
   that is the ONLY thing in its paragraph becomes the button instead; links
   inside sentences and table cells stay ordinary links. */
.doc-body p > a.link:only-child[href^="/architecture/"]{
  display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);
  padding:var(--s-3) var(--s-5);border:0;border-radius:var(--r-pill);
  background:var(--violet-ink);color:#fff;font-weight:600;font-size:var(--t-sm);
  text-decoration:none;transition:background .25s ease,transform .25s var(--ease),box-shadow .25s ease;
}
.doc-body p > a.link:only-child[href^="/architecture/"]::after{
  content:"→";font-weight:400;transition:transform .3s var(--ease);}
.doc-body p > a.link:only-child[href^="/architecture/"]:hover{
  background:#6A46B4;transform:translateY(-2px);box-shadow:0 6px 18px rgba(123,88,197,.28);}
.doc-body p > a.link:only-child[href^="/architecture/"]:hover::after{transform:translateX(4px);}
