/* Sloosh palette — tokens from assets/sloosh.css, mapped onto the handbook */
:root {
  --paper:#FFF8E6; --card:#FFFFFF; --ink:#090909; --dim:#6E6E6E;
  --rule:#090909; --signal:#5C4ADE; --warn:#FA4903; --chip:#FECC15;
  --side:#FECC15;
  --display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(22px,4vw,64px);
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#090909; --card:#161616; --ink:#FFF8E6; --dim:#9A9A94;
    --rule:#FFF8E6; --signal:#9E92FF; --warn:#FF7A47; --chip:#FECC15; --side:#000000; }
}
:root[data-theme="dark"] { --paper:#090909; --card:#161616; --ink:#FFF8E6; --dim:#9A9A94;
  --rule:#FFF8E6; --signal:#9E92FF; --warn:#FF7A47; --chip:#FECC15; --side:#000000; }
:root[data-theme="light"] { --paper:#FFF8E6; --card:#FFFFFF; --ink:#090909; --dim:#6E6E6E;
  --rule:#090909; --signal:#5C4ADE; --warn:#FA4903; --chip:#FECC15; --side:#FECC15; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--display);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--signal); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns:266px minmax(0,1fr); align-items:start; }

.sidebar { position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--side); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:22px; padding:26px 20px 22px; }
.brand { display:flex; flex-direction:column; gap:5px;
  padding-bottom:20px; border-bottom:1px solid var(--rule); }
.brand .org { font-family:var(--mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); }
.brand .nm { font-size:22px; font-weight:700; letter-spacing:-0.035em; line-height:1.05; }
.brand .sub { font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; color:var(--dim); }

.toc { display:flex; flex-direction:column; gap:1px; }
.toc button { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:9px;
  align-items:center; background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--display); font-size:14px; color:var(--dim);
  padding:8px 9px; border-radius:2px; transition:color .15s, background .15s; }
.toc button:hover { color:var(--ink); background:var(--chip); }
.toc button[aria-current="true"] { color:var(--ink); background:var(--chip); font-weight:600; }
.toc .n { font-family:var(--mono); font-size:10.5px; color:var(--dim);
  font-variant-numeric:tabular-nums; }
.toc button[aria-current="true"] .n { color:var(--signal); }
.toc .tick { font-family:var(--mono); font-size:8.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--signal); border:1px solid var(--signal);
  border-radius:2px; padding:2px 4px; }

.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:12px;
  padding-top:18px; border-top:1px solid var(--rule); }
.progress { display:flex; gap:3px; }
.progress i { height:3px; flex:1; background:var(--rule); border-radius:2px; }
.progress i.on { background:var(--signal); }
.side-foot p { font-family:var(--mono); font-size:10px; line-height:1.6;
  color:var(--dim); margin:0; }
.side-foot a { color:var(--dim); text-decoration:none; border-bottom:1px solid var(--rule); }
.side-foot a:hover { color:var(--signal); border-bottom-color:var(--signal); }

.content { min-width:0; padding:0 0 clamp(60px,9vw,120px); }

/* ---------- section furniture ---------- */
.sec { display:none; }
.sec.is-on { display:block; }
.sec-head { padding:clamp(40px,6vw,86px) var(--pad) clamp(24px,3vw,40px); }
.sec-no { font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  color:var(--signal); margin-bottom:14px; }
h1.sec-title { font-size:clamp(33px,5.6vw,66px); font-weight:700; letter-spacing:-0.042em;
  line-height:0.98; text-wrap:balance; margin:0 0 20px; max-width:19ch; }
h1.sec-title em { font-style:italic; color:var(--signal); }
.sec-rule { width:64px; height:2px; background:var(--signal); margin-bottom:22px; }
.lede { font-size:clamp(15px,1.45vw,18.5px); line-height:1.55; max-width:62ch;
  color:var(--dim); margin:0; }
.lede strong { color:var(--ink); font-weight:600; }

.prose { padding:0 var(--pad); max-width:calc(68ch + var(--pad) * 2); }
.prose h2 { font-size:clamp(23px,2.6vw,31px); font-weight:700; letter-spacing:-0.03em;
  line-height:1.1; margin:clamp(36px,4vw,54px) 0 14px; text-wrap:balance; }
.prose h3 { font-size:19px; font-weight:700; letter-spacing:-0.022em; margin:28px 0 10px; }
.prose p { font-size:15.5px; line-height:1.62; margin:0 0 14px; }
.prose p.big { font-size:17.5px; line-height:1.55; }
.prose ul, .prose ol { margin:0 0 16px; padding-left:20px; }
.prose li { font-size:15.5px; line-height:1.6; margin-bottom:8px; }
.prose strong { font-weight:650; }

.callout { border-left:2px solid var(--signal); padding:2px 0 2px 16px; margin:22px 0; }
.callout.warn { border-left-color:var(--warn); }
.callout p { margin:0 0 8px; }
.callout p:last-child { margin:0; }

.kicker { font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); margin:0 0 9px; }

/* ---------- index list ---------- */
.index-list { display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin-top:6px; }
.index-item { background:var(--paper); border:0; cursor:pointer; text-align:left;
  font-family:var(--display); color:var(--ink);
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:16px; align-items:start;
  padding:20px 22px; transition:background .15s; }
.index-item:hover { background:var(--card); }
.index-item[disabled] { cursor:default; opacity:.55; }
.index-item[disabled]:hover { background:var(--paper); }
.index-item .n { font-family:var(--mono); font-size:11px; color:var(--dim);
  font-variant-numeric:tabular-nums; padding-top:4px; }
.index-item .nm { font-size:20px; font-weight:700; letter-spacing:-0.028em;
  line-height:1.12; margin-bottom:6px; }
.index-item .ds { font-size:14px; line-height:1.48; color:var(--dim); }
.index-item .go { font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--signal); white-space:nowrap; padding-top:5px; }
.index-item[disabled] .go { color:var(--warn); }

/* ---------- outcome case ---------- */
.case { border:1px solid var(--rule); border-radius:3px; background:var(--card);
  overflow:hidden; margin-top:8px; }
.case-top { padding:22px 24px 20px; border-bottom:1px solid var(--rule); }
.case-nm { font-size:clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-0.035em;
  line-height:1.02; margin:0 0 10px; }
.case-one { font-size:16px; line-height:1.5; margin:0; color:var(--dim); }
.case-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:1px; background:var(--rule); border-bottom:1px solid var(--rule); }
.fact { background:var(--card); padding:15px 18px; }
.fact .k { font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.fact .v { font-size:19px; font-weight:700; letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums; line-height:1.15; }
.case-body { padding:22px 24px 24px; }
.case-body h4 { font-size:16px; font-weight:700; letter-spacing:-0.02em; margin:0 0 9px; }
.case-body h4 + p, .case-body h4 + blockquote { margin-top:0; }
.case-body p { font-size:15px; line-height:1.6; margin:0 0 18px; }
.case-body p:last-child { margin:0; }

blockquote.post { margin:0 0 20px; padding:18px 20px; background:var(--paper);
  border:1px solid var(--rule); border-radius:3px;
  font-size:14.5px; line-height:1.62; white-space:pre-wrap; }
blockquote.post cite { display:block; margin-top:14px; font-style:normal;
  font-family:var(--mono); font-size:10px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--dim); }

.lesson { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; margin-top:8px; }
.lesson-row { background:var(--paper); padding:16px 18px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.lesson-row .lk { font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--signal); }
.lesson-row .lv { font-size:15px; line-height:1.55; }
.lesson-row .lv b { font-weight:650; }

.slot { border:1px dashed var(--rule); border-radius:3px; padding:20px 22px; margin-top:16px; }
.slot .k { font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.slot p { font-size:14.5px; line-height:1.55; color:var(--dim); margin:0; }

/* ---------- idea grid ---------- */
.ideas { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; margin-top:8px; }
.idea { background:var(--paper); padding:19px 20px; display:flex;
  flex-direction:column; gap:8px; }
.idea .t { font-size:18px; font-weight:700; letter-spacing:-0.025em; line-height:1.1; }
.idea .d { font-size:13.5px; line-height:1.5; color:var(--dim); margin:0; }
.idea .s { margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--signal); }

/* ---------- rails ---------- */
.track { padding:clamp(28px,4vw,56px) 0 clamp(10px,2vw,22px); border-bottom:1px solid var(--rule); }
.track:last-of-type { border-bottom:0; }
.track-head { padding:0 var(--pad); margin-bottom:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:10px; }
.track-title { font-size:clamp(25px,3.8vw,44px); font-weight:700;
  letter-spacing:-0.035em; line-height:1; margin:0; }
.track-note { font-size:14.5px; line-height:1.5; color:var(--dim); max-width:58ch; margin:0; }

.rail { display:grid; grid-template-columns:172px minmax(0,1fr); align-items:start;
  gap:0 24px; padding:0 0 clamp(28px,3.5vw,46px) var(--pad); }
.rail-tab { position:sticky; top:20px; padding-top:4px; display:flex;
  flex-direction:column; gap:9px; border-top:2px solid var(--ink); }
.rail-name { font-size:17px; font-weight:600; letter-spacing:-0.02em;
  line-height:1.15; text-wrap:balance; }
.rail-meta { font-family:var(--mono); font-size:10px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums; }
.rail-arrows { display:flex; gap:6px; margin-top:2px; }
.rail-arrows button { width:29px; height:29px; border:1px solid var(--rule);
  background:transparent; color:var(--ink); border-radius:2px; font-size:13px;
  line-height:1; cursor:pointer; font-family:var(--display);
  transition:border-color .15s,color .15s,opacity .15s; }
.rail-arrows button:hover:not(:disabled) { border-color:var(--signal); color:var(--signal); }
.rail-arrows button:disabled { opacity:.3; cursor:default; }

.rail-scroll { display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:2px var(--pad) 13px 0; scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent; cursor:grab; }
.rail-scroll.dragging { cursor:grabbing; scroll-snap-type:none; }
.rail-scroll::-webkit-scrollbar { height:5px; }
.rail-scroll::-webkit-scrollbar-thumb { background:var(--rule); border-radius:3px; }
.rail-scroll::-webkit-scrollbar-track { background:transparent; }

.card { flex:0 0 auto; width:280px; min-height:330px; scroll-snap-align:start;
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:17px 17px 15px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .18s ease, transform .18s ease; }
.card:hover { border-color:var(--ink); transform:translateY(-3px); }
.card.is-anti { border-left:3px solid var(--warn); }
.card.is-bench { background:transparent; border-style:dashed; }
.card-kind { font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); }
.card.is-anti .card-kind { color:var(--warn); }
.card-name { font-size:23px; font-weight:700; letter-spacing:-0.035em;
  line-height:1.03; text-wrap:balance; margin:0; }
.card-def { font-size:13.5px; line-height:1.42; margin:0; }
.card-why { font-size:12.5px; line-height:1.45; color:var(--dim); margin:0;
  padding-top:10px; border-top:1px solid var(--rule); }
.card-foot { margin-top:auto; padding-top:11px; display:flex; flex-direction:column; gap:7px; }
.card-stat { font-family:var(--mono); font-size:11.5px; line-height:1.4;
  font-variant-numeric:tabular-nums; background:var(--chip);
  border-radius:2px; padding:7px 9px; }
.card.is-anti .card-stat { color:var(--warn); }
.card-src { font-family:var(--mono); font-size:9.5px; letter-spacing:0.05em; color:var(--dim); }

/* ---------- blocks ---------- */
.stage { margin-top:clamp(32px,4vw,54px); }
.stage-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-top:2px solid var(--ink); padding-top:13px; margin-bottom:18px; }
.stage-head h3 { font-size:24px; font-weight:700; letter-spacing:-0.03em; margin:0; }
.stage-head span { font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim); }
.blocks { display:grid; gap:15px; }
.block { border:1px solid var(--rule); border-radius:3px; background:var(--card); overflow:hidden; }
.block-top { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:15px 17px 13px; }
.block-titles { display:flex; flex-direction:column; gap:5px; min-width:0; }
.block-name { font-size:18px; font-weight:700; letter-spacing:-0.025em; line-height:1.15; }
.block-use { font-size:13px; line-height:1.45; color:var(--dim); max-width:66ch; }
.copy { flex:0 0 auto; font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; background:transparent; border:1px solid var(--rule);
  color:var(--ink); border-radius:2px; padding:7px 11px; cursor:pointer;
  transition:border-color .15s,color .15s; }
.copy:hover, .copy.done { border-color:var(--signal); color:var(--signal); }
pre.text { margin:0; padding:15px 17px 17px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; background:transparent; }
pre.text b { color:var(--signal); font-weight:400; }

/* ---------- steps ---------- */
.steps { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; }
.step { background:var(--paper); padding:19px 21px;
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; align-items:start; }
.step-no { font-family:var(--mono); font-size:11.5px; color:var(--signal);
  font-variant-numeric:tabular-nums; padding-top:4px; }
.step h4 { font-size:18px; font-weight:700; letter-spacing:-0.025em; margin:0 0 6px; }
.step p { font-size:14px; line-height:1.55; margin:0 0 8px; color:var(--dim); }
.step p strong { color:var(--ink); font-weight:600; }
.step .ask { font-family:var(--mono); font-size:11.5px; line-height:1.55;
  background:var(--chip); border-radius:2px; padding:10px 12px; margin:0; color:var(--ink); }

/* ---------- table ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--rule); border-radius:3px; }
table { border-collapse:collapse; width:100%; min-width:600px; }
th, td { text-align:left; padding:12px 15px; border-bottom:1px solid var(--rule);
  font-size:13.5px; line-height:1.45; vertical-align:top; }
th { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dim); font-weight:400; background:var(--card); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
td.w { font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--signal); white-space:nowrap; }
td.n { font-weight:600; }

.pager { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:clamp(40px,5vw,70px) var(--pad) 0; margin-top:clamp(30px,4vw,50px);
  border-top:1px solid var(--rule); }
.pager button { background:transparent; border:1px solid var(--rule); color:var(--ink);
  border-radius:2px; padding:12px 16px; cursor:pointer; font-family:var(--display);
  font-size:14px; text-align:left; transition:border-color .15s,color .15s; max-width:46%; }
.pager button:hover { border-color:var(--signal); color:var(--signal); }
.pager button span { display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.pager button:only-child { margin-left:auto; }

.srcs { padding:clamp(34px,4vw,56px) var(--pad) 0; }
.srcs h4 { font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); font-weight:400; margin:0 0 12px; }
.srcs ul { list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:7px 26px; }
.srcs li { font-size:13px; line-height:1.5; }
.srcs a { text-decoration:none; border-bottom:1px solid var(--rule); }
.srcs a:hover { border-bottom-color:var(--signal); }
.srcs .caveat { font-size:12.5px; line-height:1.55; color:var(--dim); margin:18px 0 0;
  max-width:68ch; border-left:2px solid var(--warn); padding-left:14px; }
code { font-family:var(--mono); font-size:12.5px; background:var(--chip);
  padding:1.5px 5px; border-radius:2px; }

@media (max-width: 960px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:sticky; top:0; height:auto; z-index:30;
    flex-direction:row; align-items:center; gap:16px; overflow-x:auto; overflow-y:hidden;
    padding:12px var(--pad); border-right:0; border-bottom:1px solid var(--rule); }
  .brand { border-bottom:0; padding-bottom:0; flex:0 0 auto; }
  .brand .org, .brand .sub { display:none; }
  .brand .nm { font-size:16px; white-space:nowrap; }
  .toc { flex-direction:row; gap:3px; }
  .toc button { grid-template-columns:auto; white-space:nowrap; padding:7px 10px; }
  .toc .n, .toc .tick { display:none; }
  .side-foot { display:none; }
  .rail { grid-template-columns:minmax(0,1fr); gap:13px; padding-right:0; }
  .rail-tab { position:static; padding-right:var(--pad); }
  .rail-arrows { display:none; }
  .card { width:255px; min-height:312px; }
  .step { grid-template-columns:minmax(0,1fr); gap:5px; }
  .block-top { flex-direction:column; }
  .index-item { grid-template-columns:28px minmax(0,1fr); }
  .index-item .go { grid-column:2; padding-top:8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
  .card:hover { transform:none; }
}

/* ============================================================================
   SLOOSH sticker treatment — thick rules, offset shadows
   ========================================================================== */
.sidebar { border-right-width:3px; }
.toc button[aria-current="true"] { border:2px solid var(--ink); font-weight:800; }
.toc .tick { border-width:2px; font-weight:800; background:var(--chip); color:var(--ink); }
.progress i.on { background:var(--ink); }

.card { border-width:3px; border-radius:14px; box-shadow:4px 4px 0 var(--ink); }
.card:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.card.is-anti { border-left-width:9px; border-left-color:var(--warn); }
.card.is-bench { border-style:dashed; }
.card-stat { border:2px solid var(--ink); border-radius:7px; color:var(--ink); }

.block, .steps, .index-list, .case, .lesson, .table-wrap, .ideas {
  border-width:3px; border-radius:14px; box-shadow:4px 4px 0 var(--ink); }
.steps, .index-list, .lesson, .ideas, .case-facts { gap:3px; }
.copy { border-width:2px; border-radius:999px; font-weight:700; }
.step-no { font-weight:800; }
.step .ask { border:2px solid var(--ink); border-radius:7px; }
.rail-arrows button { border-width:2px; border-radius:999px; font-weight:800; }
.sec-rule { height:5px; background:var(--ink); }
.stage-head { border-top-width:4px; }
.rail-tab { border-top-width:4px; }
.track-card { border-top-width:4px; }
.callout { border-left-width:5px; }
.pager button { border-width:3px; border-radius:9px; box-shadow:3px 3px 0 var(--ink); font-weight:700; }
.pager button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
blockquote.post { border-width:3px; border-radius:11px; }
th { border-bottom-width:3px; }
/* small mono labels stay ink for contrast on cream/yellow */
.sec-no { color:var(--ink); font-weight:700; }
.eyebrow { color:var(--ink); font-weight:700; }
.toc .tick { color:var(--ink); border-color:var(--ink); }

/* the 128 cards, mounted inside the handbook's Cards section */
.cards-mount { padding:0 var(--pad); }
.cards-mount.cardset { --cg-fg:var(--ink); --cg-bg:var(--paper); --cg-line:var(--ink);
  --cg-mute:var(--dim); --cg-field:var(--card); }
.cards-mount .cg-bar { padding-top:10px; }