/* ═══════════════════════════════════════════════════════════════════════════
   MoatBrain · POSITIONING PASS
   Copy and framing only. Same stages, same order, same components — the tokens
   below are the shipped Desk values, copied verbatim, because a positioning
   round that arrives in a new palette is arguing two things at once.

   The register this pass is written in: ENFORCEMENT, NOT EDUCATION. The reader
   already holds positions and has usually been burned once. Every line that
   explains something they know, or offers to improve their judgment, tells them
   we have mistaken them for a beginner.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#141210; --surface:#1B1815; --raised:#221E1A; --sunk:#100E0C;
  --line:#2C2622; --line-2:#3A322C;
  --cream:#F2EBDD; --cream-2:#B5A894; --cream-3:#7E7365;
  --accent:#7FBFA8; --pos:#6FBF9B; --neg:#D2764F; --warn:#E0B15E;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;
  --num:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --r:12px;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--ground);color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;line-height:1.55}
code,.n{font-family:var(--num);font-variant-numeric:tabular-nums}
code{font-size:12px;color:var(--accent);background:var(--sunk);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1020px;margin:0 auto;padding:28px 26px 80px}

/* ── round chrome ── */
.hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.hd b{font-size:16px;letter-spacing:-.02em}
.hd .sp{flex:1}
.chip{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;background:var(--surface)}
.chip.on{color:var(--accent);border-color:#3a5f54}
.nav{display:flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;
  background:var(--surface);margin:18px 0 24px;flex-wrap:wrap}
.nav a{padding:9px 15px;font-size:12.5px;color:var(--cream-2);border-right:1px solid var(--line);
  flex:1;min-width:150px}
.nav a:last-child{border-right:0}
.nav a b{display:block;font-size:12.5px;color:var(--cream);font-weight:600}
.nav a span{display:block;font-size:10.5px;color:var(--cream-3);margin-top:2px}
.nav a:hover,.nav a.on{background:var(--raised)}
.nav a.on b{color:var(--accent)}

h1{font-size:27px;letter-spacing:-.035em;margin:14px 0 10px;font-weight:600;text-wrap:balance}
.lede{font-size:14px;color:var(--cream-2);line-height:1.7;max-width:76ch;margin:0 0 10px}
.lede b{color:var(--cream);font-weight:600}
h2{font-size:16.5px;letter-spacing:-.02em;margin:34px 0 4px;font-weight:600}
h2 .q{font-family:var(--num);font-size:11px;color:var(--accent);margin-right:9px}
.sub{font-size:12px;color:var(--cream-3);margin:0 0 12px}
p{font-size:13.5px;color:var(--cream-2);line-height:1.7;max-width:78ch;margin:0 0 12px}
p b,li b,td b{color:var(--cream);font-weight:600}
ul{font-size:13.5px;color:var(--cream-2);line-height:1.7;max-width:78ch;margin:0 0 12px;padding-left:21px}
li{margin-bottom:5px}
.rule{border-left:2px solid var(--accent);background:var(--sunk);border-radius:0 8px 8px 0;
  padding:12px 15px;margin:0 0 14px}
.rule.warn{border-left-color:var(--warn)} .rule.bad{border-left-color:var(--neg)}
.rule p{margin:0;max-width:none} .rule b{color:var(--accent)}
.rule.warn b{color:var(--warn)} .rule.bad b{color:var(--neg)}

/* ── the before/after pair, the core component of this round ─────────────────
   Both sides are set at the SAME size and weight. A comparison where the
   replacement is typeset larger than the incumbent is not a comparison. */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:13px;margin-bottom:14px}
.bax{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.bax.now{border-style:dashed;background:transparent}
.bah{padding:9px 14px;background:var(--raised);border-bottom:1px solid var(--line);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);
  display:flex;gap:8px;align-items:center}
.bax.now .bah{background:transparent}
.bah .tag2{margin-left:auto;font-family:var(--num);letter-spacing:0;text-transform:none;font-size:10.5px}
.bab{padding:15px 16px}
.bab .say{font-size:15px;line-height:1.5;color:var(--cream);letter-spacing:-.01em;margin:0}
.bax.now .bab .say{color:var(--cream-3)}
.bab .why{font-size:11.5px;color:var(--cream-3);line-height:1.6;margin:11px 0 0;
  padding-top:10px;border-top:1px solid var(--line)}
.bab .say + .say{margin-top:9px}
.bab .say.small{font-size:12.5px;color:var(--cream-2)}

.where{font-family:var(--num);font-size:11px;color:var(--cream-3);margin:0 0 16px;line-height:1.7}
.where b{color:var(--cream-2);font-weight:600;font-family:var(--sans)}

/* ── in-situ shell mock ─────────────────────────────────────────────────────
   The real furniture at real sizes, so the words can be judged where they land
   rather than in a list. Structure is unchanged from the shipped shell. */
.app{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--ground);
  margin-bottom:16px}
.omhead{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);
  background:var(--surface)}
.wm{font-size:16px;letter-spacing:-.02em;font-weight:600}
.wm i{font-style:normal;color:var(--accent)}
.tag{font-size:12.5px;color:var(--cream-2)}
.omhead .sp{flex:1}
.hbtn{font-size:11.5px;color:var(--cream-2);border:1px solid var(--line-2);border-radius:7px;
  padding:5px 11px;background:transparent}
.saved{font-size:11px;color:var(--cream-3)}

/* THE REFUSAL BAND. Same slot the RuleBar already occupies — no new structure.
   What changes is that it is set as a STATEMENT: cream, not muted; upright, not
   italic; no warning colour, no border-left "notice" styling, nothing that
   reads as a disclaimer someone made us print. */
.refusal{padding:15px 18px;border-bottom:1px solid var(--line);background:var(--sunk);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.refusal b{font-size:15.5px;color:var(--cream);letter-spacing:-.015em;font-weight:600}
.refusal span{font-size:12.5px;color:var(--cream-2);line-height:1.55}
.ctxbar{display:flex;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto}
.ctxbar .c{padding:10px 18px;border-right:1px solid var(--line);flex:none}
.ctxbar .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.ctxbar .v{font-size:13px;margin-top:3px;font-family:var(--num)}
.orient{display:flex;border-bottom:1px solid var(--line);background:var(--raised);overflow-x:auto}
.orient .o{padding:12px 18px;border-right:1px solid var(--line);flex:1;min-width:210px}
.orient .o b{display:block;font-size:12.5px;color:var(--cream);font-weight:600}
.orient .o span{display:block;font-size:11.5px;color:var(--cream-3);margin-top:3px;line-height:1.5}
.panes{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.workp{padding:20px 22px;min-width:0}
.eyebrow{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.workp h3{font-size:24px;margin:7px 0 0;letter-spacing:-.03em;font-weight:600}
.workp .lede2{font-size:12.5px;color:var(--cream-2);margin:8px 0 0;line-height:1.6;max-width:70ch}
.drawerp{border-left:1px solid var(--line);background:var(--sunk);padding:16px 17px;min-width:0}
.dk{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}

/* evidence-first drawer header: the corpus claim leads, identity follows */
.evlead{font-size:13px;color:var(--cream);line-height:1.55;margin:9px 0 0}
.evcite{margin-top:12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  overflow:hidden}
.evh{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--raised);
  border-bottom:1px solid var(--line)}
.srckind{font-size:9px;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;padding:3px 6px;
  border:1px solid #3d5568;color:#8FB8D6;background:#16222b}
.evdate{font-size:10.5px;color:var(--cream-3);margin-left:auto;font-family:var(--num)}
.equote{margin:9px 11px;padding:8px 11px 8px 12px;border-left:2px solid var(--accent);background:var(--sunk);
  font-size:11.5px;line-height:1.55;color:var(--cream-2);font-style:italic;border-radius:0 6px 6px 0}
.esrc{display:block;padding:8px 11px;border-top:1px solid var(--line);font-size:11px;color:var(--accent)}
.whois{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
.whois .face{width:26px;height:26px;border-radius:50%;background:var(--raised);
  border:1px solid var(--line-2);flex:none}
.whois .nm{font-size:12px;color:var(--cream-2)}
.whois .nm b{color:var(--cream);font-weight:600;display:block;font-size:12.5px}

/* ── first-run surface ── */
.fr{max-width:820px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  padding:26px 28px;margin-bottom:16px}
.fr .k2{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-family:var(--num)}
.fr h3{font-size:22px;margin:9px 0 10px;letter-spacing:-.03em;font-weight:600}
.fr .frl{font-size:13.5px;color:var(--cream-2);line-height:1.65;max-width:70ch;margin:0 0 8px}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin-top:18px}
.pick{border:1px solid var(--line-2);border-radius:10px;background:var(--sunk);padding:13px 14px}
.pick.sel{border-color:var(--accent)}
.pick .face{width:44px;height:44px;border-radius:50%;background:var(--raised);
  border:1px solid var(--line-2);margin-bottom:10px}
.pick b{display:block;font-size:13px;letter-spacing:-.01em}
.pick span{display:block;font-size:11.5px;color:var(--cream-3);line-height:1.5;margin-top:5px}
.frfoot{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{font:inherit;font-size:12.5px;font-weight:500;border-radius:9px;padding:8px 15px;
  border:1px solid var(--line-2);background:transparent;color:var(--cream);cursor:pointer}
.btn.solid{background:var(--accent);color:#0E1A16;border-color:transparent;font-weight:600}
.frnote{font-size:11.5px;color:var(--cream-3)}

.foot{margin-top:38px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--cream-3);line-height:1.7}
@media(max-width:820px){ .panes{grid-template-columns:1fr} .drawerp{border-left:0;border-top:1px solid var(--line)} }
@media(max-width:700px){ .wrap{padding:22px 16px 60px} h1{font-size:22px} }