/* ==========================================================================
   REACTR DOCS — GitBook-style, lime on black
   ========================================================================== */
:root {
  --bg-0:#f3eede; --bg:#f6f1e4; --bg-2:#efe8d6; --surface:#fbf8ef; --surface-2:#f1ead8; --surface-3:#e8e0cc;
  --line:rgba(40,35,24,0.12); --line-soft:rgba(40,35,24,0.07); --line-2:rgba(95,140,10,0.30); --line-heat:rgba(199,110,30,0.28);
  --text:#221f17; --text-dim:#5c574a; --text-mute:#8a8472; --text-faint:#b3ac98;
  --core:#5f8c0a; --core-bright:#c4f73a; --core-deep:#46680a; --core-soft:rgba(95,140,10,0.10); --core-glow:rgba(196,247,58,0.45);
  --heat:#c4751c; --heat-soft:rgba(199,110,30,0.10); --pos:#2f9d57; --neg:#c4382f;
  --font-display:'Hanken Grotesk',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:3px; --r-lg:8px; --ease:cubic-bezier(0.22,1,0.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg-0); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; border:0; background:none; }
::selection { background:var(--core-bright); color:#1a2400; }
img,svg { display:block; }

/* ---------- top bar ---------- */
.dtop { position:fixed; top:0; inset-inline:0; height:56px; z-index:100; display:flex; align-items:center; gap:22px;
  padding:0 20px; background:rgba(246,241,228,0.88); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.dtop .logo { display:flex; align-items:center; gap:10px; }
.dtop .logo img { width:26px; height:26px; filter:drop-shadow(0 0 8px rgba(196,247,58,0.35)); }
.dtop .logo-text { font-family:var(--font-display); font-weight:700; font-size:1.04rem; letter-spacing:-0.01em; }
.dtop .logo-text b { color:var(--core); }
.dtop .spacer { flex:1; }
.dtop a.tlink { font-family:var(--font-mono); font-size:0.73rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); transition:color .2s; }
.dtop a.tlink:hover { color:var(--core); }
.dsearch { position:relative; }
.dsearch input { width:248px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--text);
  font-family:var(--font-mono); font-size:0.78rem; padding:9px 12px 9px 32px; transition:border-color .2s, box-shadow .2s; }
.dsearch input:focus { outline:none; border-color:var(--core); box-shadow:0 0 0 3px var(--core-soft); }
.dsearch svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-mute); }
.dsearch .kbd { position:absolute; right:9px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:0.6rem; color:var(--text-faint); border:1px solid var(--line); border-radius:3px; padding:1px 5px; }
.dmenu { display:none; color:var(--text); }

/* ---------- layout ---------- */
.dlayout { display:grid; grid-template-columns:278px minmax(0,1fr) 224px; max-width:1400px; margin:0 auto; padding-top:56px; }
.dnav { position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); overflow-y:auto; padding:28px 14px 60px; border-right:1px solid var(--line); }
.dnav::-webkit-scrollbar { width:6px; } .dnav::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:3px; }
.dnav .grp { margin-bottom:20px; }
.dnav .grp-t { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-mute); margin:0 12px 8px; }
.dnav a { display:block; padding:7px 12px; font-size:0.875rem; color:var(--text-dim); border-radius:var(--r); transition:color .15s, background .15s; }
.dnav a:hover { color:var(--text); background:rgba(255,255,255,0.035); }
.dnav a.active { color:var(--core); background:var(--core-soft); font-weight:500; }
.dnav a.hidden { display:none; }
.dnav .no-res { display:none; padding:10px 12px; color:var(--text-mute); font-size:0.8rem; font-family:var(--font-mono); }

/* content */
.dmain { padding:44px clamp(24px,4vw,68px) 90px; max-width:1px; min-width:0; }
.dmain { max-width:none; }
.dwrap { max-width:760px; }
.crumb { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--text-mute); text-transform:uppercase; margin-bottom:16px; }
.crumb b { color:var(--core); font-weight:500; }
.dmain h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.6vw,2.7rem); letter-spacing:-0.03em; line-height:1.05; }
.dlede { color:var(--text-dim); font-size:1.1rem; margin:14px 0 6px; line-height:1.6; }
.dmain h2 { font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-0.025em; margin:48px 0 14px; padding-top:8px; scroll-margin-top:78px; }
.dmain h3 { font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:28px 0 10px; letter-spacing:-0.015em; scroll-margin-top:78px; }
.dmain p { color:var(--text-dim); margin-bottom:15px; line-height:1.72; }
.dmain ul, .dmain ol { color:var(--text-dim); margin:0 0 16px 2px; padding-left:20px; display:flex; flex-direction:column; gap:9px; line-height:1.6; }
.dmain li::marker { color:var(--core); }
.dmain li strong, .dmain p strong { color:var(--text); font-weight:600; }
.dmain a.ln { color:var(--core); border-bottom:1px solid var(--line-2); }
.dmain a.ln:hover { border-bottom-color:var(--core); }
.dmain code { font-family:var(--font-mono); font-size:0.85em; background:var(--surface-2); padding:2px 6px; border-radius:3px; color:var(--core-deep); border:1px solid var(--line); }
.dmain pre { background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; overflow-x:auto; font-family:var(--font-mono); font-size:0.82rem; color:#3a3528; margin-bottom:18px; line-height:1.65; }
.dmain pre code { background:none; border:0; padding:0; color:inherit; }

/* callouts */
.callout, .warn { border:1px solid var(--line-2); border-left:2px solid var(--core); border-radius:var(--r); padding:15px 19px; background:var(--core-soft); margin:20px 0; color:var(--text-dim); display:flex; gap:11px; }
.callout .ic, .warn .ic { color:var(--core); flex:none; font-size:1rem; line-height:1.5; }
.callout strong { color:var(--core); } .callout { line-height:1.6; }
.warn { border-color:var(--line-heat); border-left-color:var(--heat); background:var(--heat-soft); }
.warn .ic, .warn strong { color:var(--heat); }

/* tables */
.dtable { width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:0.88rem; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.dtable thead th { text-align:left; padding:12px 16px; background:var(--surface-2); color:var(--text-mute); font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; }
.dtable td { padding:12px 16px; border-top:1px solid var(--line); color:var(--text-dim); }
.dtable tr:hover td, .dtable tbody tr:hover td { background:rgba(196,247,58,0.025); }
.dtable td strong { color:var(--text); }
.dtable .mono { font-family:var(--font-mono); font-size:0.82rem; }
.tag-lime { display:inline-block; font-family:var(--font-mono); font-size:0.66rem; color:var(--core); border:1px solid var(--line-2); padding:2px 8px; border-radius:3px; }
.tag-heat { display:inline-block; font-family:var(--font-mono); font-size:0.66rem; color:var(--heat); border:1px solid var(--line-heat); padding:2px 8px; border-radius:3px; }

/* figure / diagrams */
.figure { border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:26px; margin:8px 0 22px; box-shadow:0 1px 0 rgba(255,255,255,0.03) inset; }
.figure svg { width:100%; height:auto; }
.figcap { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--text-mute); text-align:center; margin-top:14px; text-transform:uppercase; }

/* pager */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:60px; padding-top:28px; border-top:1px solid var(--line); }
.pager a { border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px; transition:border-color .2s, transform .2s, background .2s; }
.pager a:hover { border-color:var(--line-2); transform:translateY(-2px); background:rgba(196,247,58,0.02); }
.pager .dir { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mute); }
.pager .ttl { display:block; margin-top:6px; font-family:var(--font-display); font-weight:600; color:var(--text); }
.pager .next { text-align:right; } .pager .empty { border:0; background:none; pointer-events:none; }

/* right toc */
.dtoc { position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); overflow-y:auto; padding:46px 20px 60px; }
.dtoc .toc-t { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:14px; }
.dtoc a { display:block; font-size:0.8rem; color:var(--text-mute); padding:5px 0 5px 12px; border-left:1px solid var(--line); transition:color .15s, border-color .15s; line-height:1.4; }
.dtoc a.sub { padding-left:24px; font-size:0.76rem; }
.dtoc a:hover { color:var(--text-dim); }
.dtoc a.active { color:var(--core); border-left-color:var(--core); }

@media (max-width:1140px){ .dlayout{ grid-template-columns:262px minmax(0,1fr); } .dtoc{ display:none; } }
@media (max-width:880px){
  .dlayout{ grid-template-columns:1fr; }
  .dnav{ position:fixed; top:56px; left:0; width:284px; background:var(--bg); z-index:95; transform:translateX(-100%); transition:transform .3s var(--ease); border-right:1px solid var(--line-2); }
  .dnav.open{ transform:none; }
  .dmenu{ display:block; }
  .dsearch input{ width:150px; }
}
:focus-visible { outline:2px solid var(--core); outline-offset:2px; }