/* ════════════════════════════════════════════════════════════════════════════
   Cackle docs — the chrome for site/docs.html.

   This file used to dress BOTH pages. The landing is now self-contained (its
   CSS is inline, so it is one request and one file to move), which left this
   stylesheet carrying a hero, a quickstart, an API mock and a features grid
   that nothing rendered any more. Those are gone. What remains is only what
   docs.html actually uses: the shared chrome, the chapter rail, and the
   markdown body.

   The tokens below are the LANDING's tokens, name for name and value for
   value, including its light theme. That is the point: a reader who sets the
   light theme on the landing and clicks "Docs" used to land on a permanently
   dark page in a different palette. Both pages read `cackle-site-theme` from
   localStorage before first paint and resolve to the same surface.

   COLOUR — three, per brand/logo.svg and the canonical spec: RED #FF4848,
   WHITE #FFFFFF, INK #14121A, with BONE #F7F3EE as the light-theme sunken
   surface so white cards lift off it.

   MEASURED, not guessed: #FF4848 on white is 3.02:1 — a superb FILL and an
   unusable INK for text on a light ground. So red-coloured TEXT (links, the
   active rail item) resolves to --red-ink: #C42323 (5.9:1) in light, and
   #FF4848 itself in dark, where it measures 5.5:1 against the ink ground. The
   red is otherwise only ever a fill, an edge, or the wordmark's dot.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('./fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*,*::before,*::after{box-sizing:border-box}

:root{
  /* Dark theme = INK ground. */
  --bg:#14121A; --bg-2:#1A1722; --panel:#1D1A25; --panel-2:#252131; --sunken:#100E15;
  --line:#2A2633; --line-2:#3A3547;
  --t1:#FFFFFF; --t2:#A9A2B4; --t3:#8E87A0;
  --red:#FF4848; --red-ink:#FF4848;
  --red-wash:rgba(255,72,72,.13); --red-edge:rgba(255,72,72,.34);
  --red-glow:rgba(255,72,72,.55);
  --err:#FF7B7B; --err-wash:rgba(255,72,72,.09); --err-edge:rgba(255,72,72,.28);
  --r:14px; --r-sm:9px; --max:1200px;
  --quick:130ms; --ease:cubic-bezier(.2,0,.2,1);
  --sans:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{
  /* Light theme = WHITE ground, BONE for anything sunken. */
  --bg:#FFFFFF; --bg-2:#F7F3EE; --panel:#FFFFFF; --panel-2:#F7F3EE; --sunken:#F2ECE4;
  --line:#E5DED5; --line-2:#D6CCC0;
  --t1:#14121A; --t2:#57515E; --t3:#6B6470;
  --red-ink:#C42323;              /* 5.9:1 on white — red as TEXT resolves here */
  --red-wash:#FFF0F0; --red-edge:rgba(196,35,35,.30);
  --red-glow:rgba(255,72,72,.42);
  --err:#C81E1E; --err-wash:rgba(200,30,30,.07); --err-edge:rgba(200,30,30,.28);
  color-scheme:light;
}

html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;font-family:var(--sans);background:var(--bg);color:var(--t1);
  line-height:1.62;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:7px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 26px}
@media(max-width:560px){.wrap{padding:0 18px}}

.skip{
  position:absolute;left:14px;top:-70px;z-index:200;padding:11px 18px;border-radius:10px;
  background:var(--red);color:#fff;font-weight:750;font-size:14px;
  transition:top var(--quick) var(--ease);
}
.skip:focus{top:14px}

/* The page's one structural motif, shared with the landing: a ticket's tear
   line. Restyled in the new palette, not replaced. */
.perf{
  height:2px;width:100%;border:0;margin:0;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 14px);
}
.perf-red{background-image:repeating-linear-gradient(90deg,var(--red-edge) 0 7px,transparent 7px 14px)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:19px;flex:none}
.brand .tile{
  width:31px;height:31px;border-radius:9px;display:block;flex:none;
  box-shadow:0 4px 14px -5px var(--red-glow);
}
/* Identity, not decoration: RED in BOTH themes, so it never follows the OS. */
.brand .dot{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:3px;margin-left:auto}
.nav-links a{
  padding:7px 11px;border-radius:8px;color:var(--t2);font-size:14px;font-weight:550;
  transition:color var(--quick) var(--ease),background var(--quick) var(--ease);
}
.nav-links a:hover{color:var(--t1);background:var(--panel-2)}
.nav-act{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.nav-links+.nav-act{margin-left:14px}
.iconbtn{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  display:grid;place-items:center;color:var(--t2);
  transition:color var(--quick) var(--ease),border-color var(--quick) var(--ease);
}
.iconbtn:hover{color:var(--t1);border-color:var(--line-2)}
.iconbtn svg{width:17px;height:17px}
:root[data-theme=light] .moon{display:none}
:root[data-theme=dark] .sun{display:none}
.ghlink{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;color:var(--t2);
  transition:color var(--quick) var(--ease),border-color var(--quick) var(--ease);
}
.ghlink:hover{color:var(--t1);border-color:var(--line-2)}
.ghlink svg{width:16px;height:16px}
@media(max-width:760px){.nav-links{display:none}}
@media(max-width:560px){.ghlink span{display:none}.ghlink{padding:0 10px}}

/* ── Docs shell ──────────────────────────────────────────────────────────── */
/* A chapter rail is right HERE and wrong on a marketing page: a reader of
   reference material navigates between chapters constantly. */
.docs-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start;padding:34px 0 70px}
@media(max-width:860px){.docs-shell{grid-template-columns:minmax(0,1fr);gap:24px}}
.docs-nav{
  position:sticky;top:84px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:13px;min-width:0;
}
@media(max-width:860px){.docs-nav{position:static}}
.docs-nav .label{
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);
  padding:6px 10px;font-weight:800;
}
.docs-nav a{
  display:block;padding:8px 11px;border-radius:8px;color:var(--t2);font-size:14.5px;font-weight:550;
  transition:color var(--quick) var(--ease),background var(--quick) var(--ease);
}
.docs-nav a:hover{background:var(--panel-2);color:var(--t1)}
.docs-nav a.active{background:var(--red-wash);color:var(--red-ink)}
.docs-main{min-width:0}
.docs-title{font-size:12.5px;color:var(--t3);margin-bottom:8px;font-weight:600;letter-spacing:.02em}
.docs-error{
  color:var(--err);background:var(--err-wash);border:1px solid var(--err-edge);
  padding:14px 16px;border-radius:var(--r-sm);
}

/* ── Markdown body ───────────────────────────────────────────────────────── */
.markdown{font-size:16.2px}
.markdown>*:first-child{margin-top:0}
.markdown h1,.markdown h2,.markdown h3,.markdown h4{letter-spacing:-.028em;font-weight:800;line-height:1.15}
.markdown h1{font-size:clamp(28px,4.2vw,36px);margin:.2em 0 .55em;border-bottom:1px solid var(--line);padding-bottom:.3em}
.markdown h2{font-size:clamp(21px,3vw,26px);margin:1.7em 0 .6em;border-bottom:1px solid var(--line);padding-bottom:.25em}
.markdown h3{font-size:19px;margin:1.5em 0 .5em}
.markdown h4{font-size:16.2px;margin:1.3em 0 .4em}
.markdown p,.markdown li{color:var(--t2)}
.markdown strong,.markdown b{color:var(--t1);font-weight:700}
.markdown a{color:var(--red-ink);font-weight:600}
.markdown a:hover{text-decoration:underline}
.markdown code{
  font-family:var(--mono);font-size:.87em;background:var(--sunken);
  border:1px solid var(--line);padding:1px 5px;border-radius:5px;color:var(--t1);
}
/* Inline code is the ONE thing on this page that cannot be line-broken by
   default, and docs prose is full of long identifiers and file paths. An
   unbreakable 400px token inside a <p> takes the whole document horizontal at
   360px — it is not in a scroll container and nothing else can absorb it. Code
   inside <pre> is deliberately excluded: that block opted into scrolling, and
   wrapping it would corrupt the commands it contains. */
.markdown :is(p,li,td,th,h1,h2,h3,h4,blockquote) code{overflow-wrap:anywhere;word-break:break-word}
.markdown pre{
  background:var(--sunken);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;
}
.markdown pre code{background:none;border:0;padding:0;font-size:13.4px;line-height:1.72;color:var(--t1);overflow-wrap:normal;word-break:normal}
.markdown blockquote{
  margin:1.2em 0;padding:.5em 1.1em;border-left:3px solid var(--red);
  background:var(--red-wash);color:var(--t2);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.markdown blockquote>*:first-child{margin-top:0}
.markdown table{
  border-collapse:collapse;width:100%;margin:1.3em 0;font-size:14.5px;
  display:block;overflow-x:auto;max-width:100%;
}
.markdown th,.markdown td{border:1px solid var(--line);padding:9px 12px;text-align:left;color:var(--t2)}
.markdown th{background:var(--panel-2);font-weight:700;color:var(--t1);white-space:nowrap}
.markdown img{border-radius:10px;margin:1.2em 0;border:1px solid var(--line)}
.markdown hr{border:none;border-top:2px dashed var(--line-2);margin:2.2em 0}
.markdown ul,.markdown ol{padding-left:1.35em}
.markdown li+li{margin-top:.3em}
.markdown .mermaid{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin:1.3em 0;text-align:center;overflow-x:auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);margin-top:20px}
.foot{
  padding:34px 0 46px;display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;justify-content:space-between;
}
.foot .left{display:flex;align-items:center;gap:11px;color:var(--t3);font-size:14px}
.foot .left img{width:24px;height:24px;border-radius:7px}
.foot .links{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:14px;color:var(--t2)}
.foot .links a:hover{color:var(--t1)}


/* ── Vulos suite chrome — identical on every product landing ───────────────
   Two elements, and only two: a logo-only home button in the top bar, and
   one line in the footer. Deliberately free of repo variables so the block
   is byte-identical across the suite and can be diffed as one thing. */
.vulos-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.vulos-home:hover, .vulos-home:focus-visible { opacity: 1; transform: translateY(-1px); }
.vulos-home img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vulos-foot { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; text-decoration: none; color: inherit; opacity: .85; transition: opacity .15s ease; }
.vulos-foot:hover { opacity: 1; text-decoration: none; }
.vulos-foot img { display: block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }