/* ═══════════════════════════════════════════════════════════════════════════
   OwnerMind · C — THE DESK
   The craft borrowed from TradingView and its neighbours: a calm dark ground,
   dense but unhurried data, tabular numerals that line up to the pixel, thin
   silky charts with a soft fill.
   What is deliberately NOT borrowed: rating gauges, Strong-Buy dials, score
   badges, sentiment meters. Those are verdict furniture, and this product does
   not give verdicts. Instrument craft, not instrument opinions.
   Warm, not steel — this is a cream-on-charcoal room, distinct from The Terminal.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#141210; --surface:#1B1815; --raised:#221E1A; --sunk:#100E0C;
  --line:#2C2622; --line-2:#3A322C;
  --cream:#F2EBDD; --cream-2:#B5A894; --cream-3:#7E7365;
  --accent:#7FBFA8;            /* one restrained interactive hue */
  --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;font-feature-settings:"tnum" 1,"cv01" 1}
a{color:inherit;text-decoration:none}

/* every figure in the product lines up and never jitters */
.n{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── shell ── */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.side{background:var(--sunk);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column}
.brand{display:flex;align-items:baseline;gap:8px;padding:0 8px 20px}
.brand b{font-size:16px;letter-spacing:-.02em}
.brand span{font-size:10px;color:var(--cream-3);letter-spacing:.14em;text-transform:uppercase}
.sgroup{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-3);padding:16px 8px 7px}
.snav a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:13.5px;color:var(--cream-2)}
.snav a:hover{background:var(--surface);color:var(--cream)}
.snav a.on{background:var(--raised);color:var(--cream)}
.snav a .dot{width:5px;height:5px;border-radius:50%;background:var(--cream-3);flex:none}
.snav a.on .dot{background:var(--accent)}
.spring{flex:1}
.rule-note{font-size:10.5px;color:var(--cream-3);line-height:1.6;padding:12px 9px;border-top:1px solid var(--line);margin-top:12px}
.rule-note b{color:var(--cream-2);font-weight:600}

.main{min-width:0;display:flex;flex-direction:column}
.tape{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);background:var(--surface);
  padding:0 20px;overflow-x:auto}
.tape .cell{padding:11px 18px;border-right:1px solid var(--line);flex:none}
.tape .cell:first-child{padding-left:0}
.tape .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.tape .v{font-size:15px;margin-top:4px;letter-spacing:-.02em}
.tape .v.pos{color:var(--pos)} .tape .v.neg{color:var(--neg)}
.tape .sp{flex:1;border:0}

.head{padding:22px 26px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;
  justify-content:space-between;gap:22px;flex-wrap:wrap}
.head h1{font-size:25px;margin:0;letter-spacing:-.03em;font-weight:600}
.head .sub{font-size:13px;color:var(--cream-2);margin-top:6px;line-height:1.5}
.head .acts{display:flex;gap:9px;flex:none}
.body{padding:22px 26px 80px;flex:1}

/* ── controls ── */
.btn{font:inherit;font-size:13px;font-weight:500;border-radius:9px;padding:8px 15px;border:1px solid var(--line-2);
  background:transparent;color:var(--cream);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--surface)}
.btn.solid{background:var(--accent);color:#0E1A16;border-color:transparent;font-weight:600}
.btn.sm{padding:6px 12px;font-size:12px}
.chip{font-size:10.5px;font-weight:600;letter-spacing:.03em;border-radius:6px;padding:3px 9px;color:var(--cream-2);background:var(--raised)}
.chip.accent{color:var(--accent);background:#16241F}
.chip.warn{color:var(--warn);background:#2A2114}

/* ── panels ── */
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:1.35fr .95fr}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.p-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--line)}
.p-head b{font-size:13px;font-weight:600;flex:1}
.p-head .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.p-body{padding:17px}

/* ── the loop ── */
.loop{display:flex;flex-direction:column}
.step{display:flex;align-items:center;gap:12px;padding:10px 17px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .mk{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;
  font-size:9px;color:var(--cream-3);flex:none}
.step.done .mk{background:var(--pos);border-color:var(--pos);color:#0C1A14}
.step.now .mk{border-color:var(--accent);color:var(--accent)}
.step .nm{flex:1;font-size:13px;color:var(--cream-2)}
.step.done .nm{color:var(--cream-3)}
.step.now .nm{color:var(--cream);font-weight:500}
.step .st{font-size:10.5px;color:var(--cream-3)}
.step.req .st{color:var(--warn)}

/* ── figures ── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.fig{background:var(--surface);padding:15px 17px}
.fig .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.fig .v{font-size:29px;margin-top:8px;letter-spacing:-.035em;font-weight:400;line-height:1}
.fig .v.pos{color:var(--pos)} .fig .v.neg{color:var(--neg)}
.fig .cap{font-size:11px;color:var(--cream-3);margin-top:7px;line-height:1.45}

/* ── chart ── */
.chart{padding:6px 4px 0}
.chart svg{width:100%;display:block}
.chart .axis{font-family:var(--num);font-size:9px;fill:var(--cream-3)}
.mirror{display:flex;align-items:flex-start;gap:14px;padding:14px 17px;border-top:1px solid var(--line);background:var(--raised)}
.mirror .q{flex:1;font-size:13px;line-height:1.6;color:var(--cream-2)}
.mirror .q b{color:var(--cream);font-weight:600}
.mirror .yn{display:flex;gap:7px;flex:none}

/* ── memo ── */
.memo{max-width:820px}
.msec{padding:24px 0;border-top:1px solid var(--line)}
.msec:first-child{border-top:0;padding-top:6px}
.msec .num{font-family:var(--num);font-size:10.5px;color:var(--cream-3);letter-spacing:.1em}
.msec h2{font-size:19px;margin:7px 0 12px;letter-spacing:-.02em;font-weight:600}
.msec p{font-size:14.5px;line-height:1.72;color:var(--cream-2);margin:0 0 12px;max-width:70ch}
.msec p:last-child{margin-bottom:0}
.msec p b,.msec p strong{color:var(--cream);font-weight:600}
.msec em{color:var(--cream);font-style:italic}
.pull{border-left:2px solid var(--accent);padding:2px 0 2px 15px;margin:16px 0;font-size:14px;color:var(--cream-2);line-height:1.65}

.hero{padding:4px 0 22px}
.hero .tick{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hero .tick b{font-size:31px;letter-spacing:-.035em;font-weight:600}
.hero .tick .sym{font-family:var(--num);font-size:13px;color:var(--cream-3);letter-spacing:.06em}
.hero .meta{font-size:12.5px;color:var(--cream-3);margin-top:9px}
.hero .thesis{font-size:17px;line-height:1.6;color:var(--cream-2);margin-top:16px;max-width:64ch}

/* the standing constraint, stated in the product itself */
.constraint{display:flex;align-items:center;gap:11px;background:var(--raised);border:1px solid var(--line);
  border-radius:10px;padding:11px 15px;font-size:12px;color:var(--cream-2);line-height:1.55}
.constraint .m{font-family:var(--num);font-size:10.5px;color:var(--accent);letter-spacing:.04em;flex:none}

.evid{display:flex;gap:11px;padding:12px 17px;border-bottom:1px solid var(--line)}
.evid:last-child{border-bottom:0}
.evid .tagsrc{font-size:9.5px;font-weight:700;letter-spacing:.06em;border-radius:5px;padding:3px 7px;flex:none;height:fit-content}
.evid .tagsrc.src{background:#152220;color:var(--pos)}
.evid .tagsrc.you{background:#231D14;color:var(--warn)}
.evid .tagsrc.ai{background:#1D1C26;color:#9B92C4}
.evid .tx{font-size:12.5px;color:var(--cream-2);line-height:1.55}
.evid .tx b{color:var(--cream);display:block;font-weight:600;margin-bottom:2px}

@media(max-width:1000px){ .g-2{grid-template-columns:1fr} .figs{grid-template-columns:1fr} .app{grid-template-columns:1fr} .side{display:none} }

/* ══ REDRAFT — the real product shell: funnel rail · working surface · agent drawer ══ */
.app3{display:grid;grid-template-columns:246px minmax(0,1fr) 400px;
  grid-template-rows:auto auto auto minmax(0,1fr);align-content:start;
  height:100vh;overflow:hidden}
.omhead{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line);background:var(--sunk)}
.omhead .wm{font-size:16px;font-weight:600;letter-spacing:-.02em}
.omhead .wm i{color:var(--accent);font-style:normal}
.omhead .tag{font-size:12px;color:var(--cream-3)}
.omhead .sp{flex:1}
.omhead .saved{font-size:11px;color:var(--cream-3)}
.rulebar{grid-column:1/-1;font-family:var(--num);font-size:11px;color:var(--cream-3);padding:8px 22px;border-bottom:1px solid var(--line);background:var(--ground)}
.ctxbar{grid-column:1/-1;display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--surface);padding:0 22px;overflow-x:auto}
.ctxbar .c{padding:11px 20px;border-right:1px solid var(--line);flex:none}
.ctxbar .c:first-child{padding-left:0}
.ctxbar .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.ctxbar .v{font-size:14px;margin-top:4px}
.ctxbar .sp{flex:1;border:0}

.funnel{border-right:1px solid var(--line);background:var(--sunk);padding:18px 12px;overflow:auto;min-height:0}
.fgroup{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);padding:16px 10px 8px}
.fgroup:first-child{padding-top:2px}
.fitem{display:block;padding:9px 11px;border-radius:9px;margin-bottom:2px}
.fitem b{font-size:13px;font-weight:500;color:var(--cream-2);display:block}
.fitem span{font-size:11px;color:var(--cream-3)}
.fitem:hover{background:var(--surface)}
.fitem.on{background:var(--raised)}
.fitem.on b{color:var(--cream)} .fitem.on span{color:var(--accent)}
.fitem.done b{color:var(--cream-3)}

.work{min-width:0;padding:22px 24px 80px;overflow:auto;min-height:0}

/* the agent drawer, persistent on the right */
.drawer{border-left:1px solid var(--line);background:var(--sunk);display:flex;flex-direction:column;min-width:0;min-height:0}
.dhead{padding:14px 16px;border-bottom:1px solid var(--line)}
.dhead .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.dhead b{font-size:15px;display:block;margin-top:5px;font-weight:600}
.roster{display:flex;flex-wrap:wrap;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ava{width:32px;height:32px;border-radius:50%;border:1.5px solid transparent;background:var(--raised);display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:var(--cream-2);cursor:pointer;font-family:var(--num)}
.ava:hover{border-color:var(--line-2)}
.ava.on{border-color:var(--accent);color:var(--cream)}
.who-sel{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line)}
.who-sel .a{width:34px;height:34px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font-size:11px;font-weight:600;font-family:var(--num);flex:none}
.who-sel .t b{font-size:13.5px;display:block}
.who-sel .t span{font-size:11px;color:var(--cream-3)}
.dbody{flex:1;overflow:auto;padding:15px 16px}
.dnote{font-size:12px;color:var(--cream-2);line-height:1.6}
.dnote b{color:var(--cream)}
.lenses{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.lens{font-size:11.5px;color:var(--cream-2);background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.lens:hover{border-color:var(--accent);color:var(--cream)}
.srcbasis{font-size:10.5px;color:var(--cream-3);margin-top:9px}
.dcompose{border-top:1px solid var(--line);padding:12px 16px}
.dcompose textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  color:var(--cream);font:inherit;font-size:12.5px;resize:none;min-height:66px}
.dcompose textarea::placeholder{color:var(--cream-3)}
.dcompose .row{display:flex;align-items:center;gap:10px;margin-top:9px}
.dcompose .hint{flex:1;font-size:10.5px;color:var(--cream-3);line-height:1.45}

/* a proposal: the agent suggests, the owner disposes */
.prop{border:1px solid var(--line-2);border-radius:10px;background:var(--surface);margin-top:14px;overflow:hidden}
.prop .ph{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--raised)}
.prop .ph b{font-size:11.5px;flex:1}
.prop .pb{padding:12px 13px;font-size:12.5px;line-height:1.6;color:var(--cream-2)}
.prop .pa{display:flex;gap:7px;padding:0 13px 12px}

/* an index built only from the owner's own ratings — components always visible */
.idx{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.idx .big{font-size:44px;letter-spacing:-.04em;line-height:1}
.idx .comp{display:flex;flex-direction:column;gap:7px}
.crow{display:flex;align-items:center;gap:10px;font-size:12px}
.crow .cl{width:120px;color:var(--cream-2);flex:none}
.crow .bar{flex:1;height:5px;border-radius:3px;background:var(--raised);overflow:hidden}
.crow .bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.crow .cv{width:34px;text-align:right;color:var(--cream-3);font-family:var(--num)}
.provenance{font-size:11px;color:var(--cream-3);line-height:1.6;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.provenance b{color:var(--cream-2)}
@media(max-width:1200px){ .app3{grid-template-columns:1fr} .funnel,.drawer{display:none} }

/* ══ REAL AGENT PORTRAITS — the product's own 3x3 sprite, so you see faces.
   index -> column = i % 3, row = floor(i / 3), positioned at 50% steps. ══ */
.ava,.who-sel .a{background-image:url("agent-sprite.webp");background-size:300% 300%;
  background-repeat:no-repeat;color:transparent;text-indent:-9999px;overflow:hidden}
.roster{gap:9px}
.ava{width:52px;height:52px;border-radius:12px;border:2px solid transparent}
.ava:hover{border-color:var(--line-2)}
.ava.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,191,168,.14)}
.who-sel .a{width:46px;height:46px;border-radius:12px}
/* sprite cells, keyed by the agent's avatar index in the product source */
.av0{background-position:0%   0%}    /* Elias Ward */
.av1{background-position:50%  0%}    /* Mira Chen */
.av2{background-position:100% 0%}    /* Noah Vale */
.av3{background-position:0%   50%}   /* Priya Raman */
.av4{background-position:50%  50%}   /* Hana Wells */
.av5{background-position:100% 50%}   /* Sofia Bennett · Lena Ortiz */
.av6{background-position:0%   100%}  /* Julian Park */
.av7{background-position:50%  100%}  /* Tessa Morgan */
.av8{background-position:100% 100%}  /* Caleb Reed */

/* ══ CLOSEABLE DRAWER ══ */
.drawer{transition:margin-right .22s ease}
.app3.drawer-closed .drawer{margin-right:-400px}
.dclose{border:1px solid var(--line-2);background:transparent;color:var(--cream-3);border-radius:8px;
  width:28px;height:28px;cursor:pointer;font-size:12px;flex:none;line-height:1}
.dclose:hover{background:var(--raised);color:var(--cream)}
.dhead{display:flex;align-items:center;gap:12px}
.dhead .dh-t{flex:1;min-width:0}
/* the reopen handle, only visible once the drawer is away */
.dopen{position:fixed;right:0;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line-2);border-right:0;border-radius:10px 0 0 10px;
  padding:11px 12px;color:var(--cream-2);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;z-index:30;
  writing-mode:vertical-rl}
.dopen:hover{color:var(--cream);background:var(--raised)}
.app3.drawer-closed .dopen{display:flex}

/* ══ THEME SWITCHER ══ */
.themeswitch{display:inline-flex;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex:none}
.themeswitch button{border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--cream-3);
  padding:5px 11px;border-radius:999px;cursor:pointer}
.themeswitch button.on{background:var(--surface);color:var(--cream)}

/* Light: the same room with the lamps on. Semantic colours are re-tuned for
   contrast on a pale ground but never re-assigned — a warning stays a warning. */
body[data-theme="light"]{
  --ground:#F6F3EC; --surface:#FFFFFF; --raised:#EFEAE0; --sunk:#EDE8DE;
  --line:#DED6C8; --line-2:#C8BCA8;
  --cream:#241E17; --cream-2:#5C5245; --cream-3:#8A7E6E;
  --accent:#2F7F68; --pos:#2C7F5E; --neg:#B4552A; --warn:#9A6B12;
}
body[data-theme="light"] .btn.solid{color:#fff}
body[data-theme="light"] .chip.accent{background:#E2F0EA;color:#256B58}
body[data-theme="light"] .chip.warn{background:#F6EBD2;color:#87600F}
body[data-theme="light"] .tagsrc.src{background:#E2F0EA;color:#256B58}
body[data-theme="light"] .tagsrc.you{background:#F6EBD2;color:#87600F}
body[data-theme="light"] .tagsrc.ai{background:#EAE7F4;color:#5B4E96}
body[data-theme="light"] .step.done .mk{color:#fff}
body[data-theme="light"] .kept{background:#E6F1EB}
body[data-theme="light"] .left{background:#F7E9E0}
/* charts were authored with literal hex; retune the few that need it on a pale ground */
body[data-theme="light"] .chart svg g[stroke]{stroke:#DED6C8}

/* ══ SUB-SECTIONS — the product routes several named views onto one page
   (agent-center, evidence-board, data-room, sources-audit all land on compound).
   A tab strip makes each one reachable and visible instead of hidden in a URL. ══ */
.subtabs{display:flex;gap:2px;background:var(--raised);border:1px solid var(--line);border-radius:10px;
  padding:3px;margin-bottom:18px;flex-wrap:wrap}
.subtabs button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--cream-3);
  padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
.subtabs button:hover{color:var(--cream)}
.subtabs button.on{background:var(--surface);color:var(--cream)}
.subpanel{display:none}.subpanel.on{display:block}
/* agent center: the roster at full size, with what each is for */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;display:flex;gap:13px}
.acard .p{width:56px;height:56px;border-radius:12px;flex:none;background-image:url("agent-sprite.webp");
  background-size:300% 300%;background-repeat:no-repeat}
.acard .t{min-width:0}
.acard .t b{font-size:14px;display:block}
.acard .t .r{font-size:11px;color:var(--accent);margin-top:2px}
.acard .t p{font-size:12px;color:var(--cream-2);line-height:1.55;margin:7px 0 0}