/* Trader Brain. The desk ledger at 09:15. See DESIGN.md. */
:root{
  --bg:#0b0e13;--surface:#11151c;--raised:#161c25;--line:#222a35;--line-2:#2d3744;
  --text:#e7ebf0;--mut:#93a0b0;--accent:#e0b25c;--accent-ink:#1a1405;--accent-dim:#4a3d1f;
  --long:#4cae6a;--long-dim:#24422c;--short:#e06c5f;--short-dim:#4a2a26;--flat:#93a0b0;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:6px;--rp:10px;--wrap:1180px;--gutter:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scrollbar-color:var(--line-2) var(--bg);scrollbar-width:thin}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;caret-color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
.mono,.num,td.num,.kv{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
.narrow{max-width:66ch}
h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
h2{font-size:1.45rem;letter-spacing:-.02em;font-weight:600;margin-bottom:14px;text-wrap:balance}
h3{font-size:1.02rem;font-weight:600;margin:24px 0 8px}
p{margin-bottom:12px}
b,strong{font-weight:600}
section{padding:44px 0}
section+section{border-top:1px solid var(--line)}
.lede{font-size:1.15rem;color:var(--mut);max-width:58ch;text-wrap:pretty}

/* nav */
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,14,19,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text);letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:22px;height:22px}
.brand:hover{text-decoration:none}
.nav nav{display:flex;gap:4px;font-size:.92rem;overflow-x:auto;scrollbar-width:none}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{color:var(--mut);padding:6px 10px;border-radius:var(--r);white-space:nowrap}
.nav nav a.on{color:var(--text);background:var(--raised)}
.nav nav a:hover{color:var(--text);text-decoration:none}
.nav nav a.cta{color:var(--accent-ink);background:var(--accent);font-weight:600}
.nav nav a.cta:hover{background:#eac071}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.foot{max-width:var(--wrap);margin:72px auto 40px;padding:28px var(--gutter) 0;border-top:1px solid var(--line);font-size:.82rem;color:var(--mut);display:grid;grid-template-columns:1fr auto;gap:24px}
.foot p{max-width:88ch;margin:0}
.foot .links{display:flex;gap:16px;white-space:nowrap}
.foot .links a{color:var(--mut)}

/* controls */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--text);font-weight:600;font-size:.95rem;background:var(--surface);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,transform .08s}
.btn:hover{text-decoration:none;border-color:#3f4b5c;background:var(--raised)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#eac071;border-color:#eac071}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.btn svg{width:16px;height:16px}
label{display:block;font-size:.84rem;color:var(--mut);margin-bottom:14px}
label.row{display:flex;gap:10px;align-items:center;color:var(--text);font-size:.9rem}
input,select,textarea{width:100%;margin-top:6px;background:var(--bg);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:.95rem;transition:border-color .15s}
input::placeholder,textarea::placeholder{color:#5f6b7a}
input:hover,select:hover,textarea:hover{border-color:#3f4b5c}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=date],input[type=time],input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{display:block;font-size:.78rem;color:var(--mut);margin-top:6px;line-height:1.45}

/* segmented profile picker */
.seg{display:grid;gap:6px;margin-top:6px}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0;margin:0}
.seg label.opt{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;margin:0;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.seg label.opt:hover{border-color:#3f4b5c}
.seg input:checked+label.opt{border-color:var(--accent);background:var(--raised)}
.seg input:focus-visible+label.opt{outline:2px solid var(--accent);outline-offset:2px}
.seg .nm{font-weight:600;font-size:.92rem;line-height:1.25}
.seg .sub{font-size:.76rem;color:var(--mut);display:block}
.avatar{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.02em;background:var(--accent-dim);color:var(--accent);border:1px solid #5c4a24}
.avatar.lg{width:52px;height:52px;font-size:1.05rem;border-radius:10px}

/* hero */
.hero{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center;padding:64px 0 48px}
.hero-text .lede{margin:18px 0 26px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero-proof{margin-top:30px;font-size:.84rem;color:var(--mut);max-width:48ch;line-height:1.5}
.hero-proof b{color:var(--text)}
.hero-card .ledger{box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.hero-card .chart img{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.hero-card figcaption{font-size:.8rem;color:var(--mut);margin-top:10px;font-family:var(--mono)}
.art-empty{border:1px dashed var(--line-2);border-radius:var(--rp);padding:64px 24px;color:var(--mut);text-align:center}

/* ledger */
.ledger{border:1px solid var(--line);border-radius:var(--rp);background:var(--surface);overflow:hidden}
.ledger-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.82rem;color:var(--mut);background:var(--raised)}
.ledger-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ledger-row:last-child{border-bottom:0}
.ledger-row .k{color:var(--mut);font-size:.82rem;padding-top:3px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.ledger-row .v{text-wrap:pretty}
.ledger-row .v small{display:block;color:var(--mut);font-weight:400;font-size:.8rem;margin-top:2px}
.bias{font-weight:600}
.bias small{font-weight:400}
.bias.lean_long{color:var(--long)}.bias.lean_short{color:var(--short)}.bias.no_trade{color:var(--flat)}
.bias-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:.9rem;font-weight:600;border:1px solid}
.bias-pill.lean_long{color:var(--long);border-color:var(--long-dim);background:#13221a}
.bias-pill.lean_short{color:var(--short);border-color:var(--short-dim);background:#241614}
.bias-pill.no_trade{color:var(--flat);border-color:var(--line-2);background:var(--raised)}
.bias-pill svg{width:14px;height:14px}
.tag{display:inline-block;font-family:var(--mono);font-size:.7rem;padding:2px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--mut);white-space:nowrap}
.tag.grounded{color:var(--long);border-color:var(--long-dim)}
.tag.extrapolated{color:var(--accent);border-color:var(--accent-dim)}
.tag.hard{color:var(--short);border-color:var(--short-dim)}
.tag.live{color:var(--long);border-color:var(--long-dim)}
.tag.training{color:var(--accent);border-color:var(--accent-dim)}
.right{color:var(--long)}.wrong{color:var(--short)}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rp);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{color:var(--mut);font-weight:500;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;background:var(--raised);white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover td{background:rgba(255,255,255,.015)}
table.rules td:nth-child(2){min-width:34ch;max-width:56ch}
.ev{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ev .reading{max-width:46ch}
.ev .reading p{text-wrap:pretty}
.ev .reading .key{font-family:var(--mono);font-size:2.4rem;letter-spacing:-.03em;line-height:1;color:var(--text);margin:8px 0 4px}
.ev .reading .key small{font-size:.95rem;color:var(--mut);letter-spacing:0;font-family:var(--sans)}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--rp);background:var(--surface);overflow:hidden}
.steps li{padding:22px 20px 24px;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.steps b{display:block;margin-bottom:6px;font-size:1rem}
.steps p{font-size:.9rem;color:var(--mut);margin:0;text-wrap:pretty}
.principles{list-style:none;max-width:72ch}
.principles li{padding:12px 0;border-bottom:1px solid var(--line);text-wrap:pretty}
.principles li:last-child{border-bottom:0}
.prose ul,.prose ol{margin:0 0 12px 22px;max-width:70ch}
.prose li{margin-bottom:8px;text-wrap:pretty}
.prose p{max-width:70ch;text-wrap:pretty}

/* traders grid */
.traders{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.trader{display:block;border:1px solid var(--line);border-radius:var(--rp);background:var(--surface);padding:20px;color:var(--text);transition:border-color .15s,background .15s}
.trader:hover{text-decoration:none;border-color:#3f4b5c;background:var(--raised)}
.trader .top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.trader h3{margin:0;font-size:1.1rem}
.trader .mk{font-family:var(--mono);font-size:.76rem;color:var(--mut)}
.trader p{font-size:.9rem;color:var(--mut);margin:0 0 14px;text-wrap:pretty}
.trader .facts{display:flex;gap:18px;font-family:var(--mono);font-size:.8rem;color:var(--mut);border-top:1px solid var(--line);padding-top:12px}
.trader .facts b{color:var(--text);font-weight:600}
.trader.ghost{border-style:dashed;background:transparent}
.trader.ghost:hover{background:var(--surface)}
.req{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.req form{border:1px solid var(--line);border-radius:var(--rp);background:var(--surface);padding:20px}
.req .ok{border:1px solid var(--long-dim);background:#13221a;color:var(--long);border-radius:var(--r);padding:12px 14px;font-size:.92rem}
.pipeline{list-style:none;counter-reset:p;max-width:60ch}
.pipeline li{counter-increment:p;position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--line);font-size:.92rem;text-wrap:pretty}
.pipeline li:last-child{border-bottom:0}
.pipeline li::before{content:counter(p);position:absolute;left:0;top:11px;width:26px;height:26px;border:1px solid var(--line-2);border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:.76rem;color:var(--mut)}

/* app */
.tool{display:grid;grid-template-columns:380px 1fr;gap:28px;padding:28px 0 40px}
.panel{border:1px solid var(--line);border-radius:var(--rp);background:var(--surface);padding:20px;align-self:start;position:sticky;top:76px}
.panel h1{font-size:1.35rem;margin-bottom:16px;letter-spacing:-.02em}
.panel .btn{width:100%;margin-top:4px;justify-content:center;padding:12px 16px}
.results .empty,.empty{border:1px dashed var(--line-2);border-radius:var(--rp);padding:36px 28px;color:var(--mut);max-width:60ch;text-wrap:pretty}
.empty b{color:var(--text)}
.results .err{border:1px solid var(--short-dim);background:#241614;border-radius:var(--r);padding:14px 16px;color:#f0a9a0}
.results .notice{border:1px solid var(--accent-dim);background:#1d180d;border-radius:var(--r);padding:10px 14px;color:var(--accent);font-size:.9rem;margin-bottom:14px}
.skel{display:grid;gap:10px}
.skel div{height:16px;background:linear-gradient(90deg,var(--surface),var(--raised),var(--surface));background-size:200% 100%;animation:sh 1.2s infinite;border-radius:4px}
.skel div:nth-child(1){width:35%}.skel div:nth-child(2){width:70%}.skel div:nth-child(3){width:100%;height:240px}
@keyframes sh{to{background-position:-200% 0}}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rhead h2{margin:0;font-size:1.25rem}
.rhead .tags{display:flex;gap:6px;flex-wrap:wrap}
.chart img{width:100%;border:1px solid var(--line);border-radius:var(--rp);display:block;margin:16px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.kv{font-size:.84rem}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv div span:first-child{color:var(--mut)}
.kv div span:last-child{text-align:right;text-wrap:pretty}
.outcome{margin-top:20px}
.outcome .h{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.outcome .h div{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-family:var(--mono);font-size:.86rem;background:var(--surface)}
.outcome .h b{display:block;font-weight:500;color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.outcome .h .mv{font-size:1.15rem;font-weight:600}
.sizing{margin-top:20px}
details{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-top:16px;background:var(--surface)}
summary{cursor:pointer;color:var(--mut);font-size:.9rem;list-style:none;display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
details[open] summary::before{transform:rotate(45deg)}
details[open] summary{margin-bottom:10px}
.cites{list-style:none}
.cites li{font-size:.88rem;padding:7px 0;border-bottom:1px solid var(--line);text-wrap:pretty}
.cites li:last-child{border-bottom:0}
.vnote{font-size:.86rem;color:var(--accent);border-left:0;padding:8px 12px;border:1px solid var(--accent-dim);border-radius:var(--r);background:#1d180d;margin:10px 0}
.insample{font-size:.84rem;color:var(--mut);margin:8px 0}

/* the one authored motion: ledger rows print in sequence when a read lands */
.results .printed .ledger-row,.results .printed .outcome,.results .printed .sizing,.results .printed .grid2,.results .printed .chart{animation:print .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes print{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding:36px 0 24px}
  .tool{grid-template-columns:1fr}
  .panel{position:static}
  .grid2,.two,.outcome .h,.ev,.req{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps li:nth-child(2n){border-right:0}
  .steps li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ledger-row{grid-template-columns:1fr;gap:4px}
  .foot{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .nav{height:56px;gap:8px}
  .brand span{display:none}
  .nav nav{gap:2px;font-size:.88rem}
  .nav nav a{padding:6px 8px}
  .nav nav a.about{display:none}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;border-bottom:1px solid var(--line)}
  .steps li:last-child{border-bottom:0}
  h1{font-size:2rem}
  .ev .reading .key{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){.skel div{animation:none}.btn{transition:none}.results .printed *{animation:none!important}}