/* Meldar Strategies — the Ladder skin (DECISIONS.md D-001).
   Light is the default. Dark is set by media query AND by [data-theme], so the
   toggle wins in both directions. Richness adds ground, ornament and motion —
   it never adds information. */

:root{
  --paper:#F9F6EF; --card:#FFFFFF; --ink:#20201E; --muted:#5A5648; --faint:#8A8574;
  --line:#E2DCCB; --brass:#7A5C15; --brass2:#A97C1E; --navy:#1E4A76; --teal:#2C6B62;
  --red:#A33726; --ok:#2C7A68; --warn:#8A6A1F;
  --shadow:0 2px 3px rgba(23,42,71,.02), 0 24px 48px -28px rgba(23,42,71,.14);
  --fd:'EB Garamond',"Iowan Old Style",Georgia,serif;
  --fu:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --maxw:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15161A; --card:#1D1F24; --ink:#ECE8DF; --muted:#A8A294; --faint:#807B6E;
    --line:#2E313A; --brass:#D2A64A; --brass2:#E0BC72; --navy:#7FA8D4; --teal:#63B8A8;
    --red:#E08A78; --ok:#63B8A8; --warn:#D2A64A;
    --shadow:0 2px 3px rgba(0,0,0,.3), 0 24px 48px -28px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15161A; --card:#1D1F24; --ink:#ECE8DF; --muted:#A8A294; --faint:#807B6E;
  --line:#2E313A; --brass:#D2A64A; --brass2:#E0BC72; --navy:#7FA8D4; --teal:#63B8A8;
  --red:#E08A78; --ok:#63B8A8; --warn:#D2A64A;
  --shadow:0 2px 3px rgba(0,0,0,.3), 0 24px 48px -28px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--fu);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:-.004em;line-height:1.12;margin:0}
p{margin:0 0 14px;text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- top bar : every control is here, none is three taps deep ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex-shrink:0}
.mark svg{display:block}
.mark b{font-family:var(--fd);font-size:19px;font-weight:500;letter-spacing:.01em}
.mark i{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  font-weight:700;font-family:var(--fu)}
nav{display:flex;gap:2px;margin-left:6px;flex-wrap:wrap}
nav button{background:none;border:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);
  padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
nav button:hover{background:var(--paper);color:var(--ink)}
nav button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.tools{margin-left:auto;display:flex;align-items:center;gap:7px}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{background:none;border:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.icobtn{background:var(--paper);border:1px solid var(--line);border-radius:999px;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);flex-shrink:0}
.icobtn svg{display:block;pointer-events:none}

/* ---------- page furniture ---------- */
.view{padding:34px 0 90px;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
[data-motion="off"] .view{animation:none}
.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--brass)}
h1.big{font-size:clamp(34px,5.2vw,56px);margin:10px 0 0;max-width:19ch;text-wrap:balance}
.lede{font-size:18.5px;line-height:1.6;color:var(--muted);max-width:62ch;margin:16px 0 0}
.sec{margin-top:52px}
.sec>h2{font-size:clamp(24px,3vw,32px);margin-bottom:6px}
.sec>.sub{color:var(--muted);font-size:15.5px;margin:0 0 20px;max-width:66ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.v{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pill.q{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.num{font-family:var(--fm);font-size:13px;color:var(--faint)}
.warn{color:var(--red);font-size:14px;line-height:1.5;margin-top:8px}
.hr{height:1px;background:var(--line);margin:34px 0}

/* ---------- the ladder ---------- */
.ladder{position:relative;padding-left:34px}
.ladder:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.rung{position:relative;margin-bottom:14px}
.rung:before{content:"";position:absolute;left:-28px;top:22px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:2px solid var(--brass)}
.rung.on:before{background:var(--brass)}
.rung h3{font-size:19px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rung .id{font-family:var(--fm);font-size:12.5px;color:var(--brass);font-weight:700}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:0 12px 9px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- decisions ---------- */
.dq{margin-bottom:18px}
.dq>h3{font-size:22px;margin-bottom:4px}
.dq .why{color:var(--muted);font-size:15px;margin:0 0 14px;max-width:70ch}
.opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.opt{text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;
  cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s, transform .15s, box-shadow .15s}
[data-motion="off"] .opt{transition:none}
.opt:hover{border-color:var(--brass)}
[data-rich] .opt:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.opt[aria-pressed="true"]{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 7%,var(--card))}
.opt b{display:block;font-size:16.5px;font-weight:700;margin-bottom:2px}
.opt .osub{font-size:12.5px;color:var(--brass);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.opt dl{margin:0;font-size:13.5px;line-height:1.5}
.opt dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:8px}
.opt dd{margin:2px 0 0;color:var(--muted)}
.brief{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:22px}
pre.out{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:15px;
  font-family:var(--fm);font-size:12.5px;line-height:1.65;overflow:auto;max-height:340px;white-space:pre-wrap;margin:0}
.btn{background:var(--navy);color:#fff;border:0;border-radius:999px;padding:11px 20px;font:inherit;
  font-size:15px;font-weight:600;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn:hover{filter:brightness(1.08)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- mockups ---------- */
.mk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mk header{padding:16px 18px;border-bottom:1px solid var(--line)}
.mk header h3{font-size:34px;line-height:1.05}
.mk header .idea{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:700}
.mk header p{font-size:15px;color:var(--muted);margin:9px 0 0}
.stage{height:400px;position:relative;background:var(--paper);overflow:hidden}
.mk footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.steal{font-size:12.5px;color:var(--faint)}

/* motion: every animation is gated on the dial */
[data-motion="off"] *{animation-duration:0s !important;transition-duration:0s !important}
.node{transition:r .4s ease, opacity .4s ease}
[data-motion="off"] .node{transition:none}

/* richness: ornament only, never information (CLAUDE.md standing rule) */
.orn{display:none}
[data-rich] .orn{display:block}
[data-rich] .hero{background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 7%,transparent),transparent);
  border-radius:var(--r);padding:26px 24px;margin-top:-8px}

.foot{border-top:1px solid var(--line);margin-top:60px;padding:26px 0 60px;color:var(--faint);font-size:13.5px}
@media(max-width:720px){
  .bar .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  nav{order:3;width:100%}
  .stage{height:270px}
}

/* mockup frames are two-up at most — three-across made them unreadable at the zoom he sees */
#mks{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
@media(max-width:960px){ #mks{grid-template-columns:1fr} .stage{height:340px} }