/* boardroom.css — the design system: tokens (light + dark), shell, and every shared component.
   Views compose from these classes; view files carry no CSS of their own. */

/* ── tokens: light on :root, dark via system preference + explicit toggle ───────────── */
:root{
  --bg:#F2F5F8; --panel:#FFFFFF; --panel2:#E9EEF4; --border:#D8E0E9; --border2:#C9D3DE;
  --ink:#17202B; --muted:#5C6B7C; --faint:#8C9AAA;
  --accent:#12946A; --accent-ink:#0B6B4C; --accent-dim:rgba(18,148,106,.12);
  --gold:#A97F14; --gold-dim:rgba(169,127,20,.12);
  --blue:#2673D6; --blue-dim:rgba(38,115,214,.12);
  --violet:#7C5CE0; --violet-dim:rgba(124,92,224,.12);
  --amber:#B4720B; --amber-dim:rgba(180,114,11,.14);
  --rose:#D6455C; --rose-dim:rgba(214,69,92,.12);
  --scrim:rgba(15,23,32,.45); --code:#EDF1F6;
  --shadow:0 10px 30px rgba(23,32,43,.10), 0 2px 8px rgba(23,32,43,.06);
  --shadow-lg:0 24px 60px rgba(23,32,43,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E13; --panel:#12161E; --panel2:#181E29; --border:#232C39; --border2:#2E394A;
    --ink:#E8EDF4; --muted:#8C98A8; --faint:#5B6878;
    --accent:#3DDC97; --accent-ink:#7FEBBE; --accent-dim:rgba(61,220,151,.13);
    --gold:#E5B94E; --gold-dim:rgba(229,185,78,.13);
    --blue:#62A8FA; --blue-dim:rgba(98,168,250,.13);
    --violet:#A78BFA; --violet-dim:rgba(167,139,250,.14);
    --amber:#F0A32F; --amber-dim:rgba(240,163,47,.14);
    --rose:#F26D7E; --rose-dim:rgba(242,109,126,.13);
    --scrim:rgba(4,7,11,.62); --code:#0E1319;
    --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
    --shadow-lg:0 30px 80px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0E13; --panel:#12161E; --panel2:#181E29; --border:#232C39; --border2:#2E394A;
  --ink:#E8EDF4; --muted:#8C98A8; --faint:#5B6878;
  --accent:#3DDC97; --accent-ink:#7FEBBE; --accent-dim:rgba(61,220,151,.13);
  --gold:#E5B94E; --gold-dim:rgba(229,185,78,.13);
  --blue:#62A8FA; --blue-dim:rgba(98,168,250,.13);
  --violet:#A78BFA; --violet-dim:rgba(167,139,250,.14);
  --amber:#F0A32F; --amber-dim:rgba(240,163,47,.14);
  --rose:#F26D7E; --rose-dim:rgba(242,109,126,.13);
  --scrim:rgba(4,7,11,.62); --code:#0E1319;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.55 "IBM Plex Sans","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Sora","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.01em; text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
a{color:var(--accent-ink,var(--accent)); text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
button:disabled{opacity:.55; cursor:default}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none!important; animation:none!important} }

/* ── app shell ───────────────────────────────────────────────────────────────────────── */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.sidebar{position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
  background:var(--panel); border-right:1px solid var(--border);
  padding:16px 12px 20px; display:flex; flex-direction:column; gap:2px; scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.brand{display:flex; align-items:center; gap:10px; padding:4px 10px 14px}
.brand .sig{width:32px;height:32px;border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--gold)); display:grid;place-items:center; color:#0A0F14; font-weight:700; font-family:Sora; font-size:15px}
.brand b{font-family:Sora; font-size:15px}
.brand small{display:block; color:var(--faint); font-size:11px; margin-top:1px}
.navgroup{margin-top:11px}
.navgroup>span{display:block; padding:0 10px 4px; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.navitem{display:flex; align-items:center; gap:9px; width:100%; padding:6px 10px; border-radius:8px; color:var(--muted); text-align:left; font-weight:500; transition:background .12s,color .12s}
.navitem:hover{background:var(--panel2); color:var(--ink)}
.navitem[aria-current="true"]{background:var(--accent-dim); color:var(--accent-ink,var(--accent))}
.navitem .ico{width:17px; text-align:center; opacity:.9}
.navitem .tag{margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.06em; padding:2px 6px; border-radius:99px; text-transform:uppercase}
.tag.live{background:var(--accent-dim); color:var(--accent-ink,var(--accent))}
.tag.next{background:var(--gold-dim); color:var(--gold)}
.tag.plan{background:var(--panel2); color:var(--faint)}
.tag.paused{background:var(--amber-dim); color:var(--amber)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:10px 22px; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.pulse-dot{width:8px;height:8px;border-radius:99px;background:var(--accent); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.topstat{display:flex; align-items:baseline; gap:7px; padding:0 4px}
.topstat .k{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600}
.topstat .v{font-family:"IBM Plex Mono"; font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums}
.v.neg{color:var(--rose)} .v.pos{color:var(--accent-ink,var(--accent))} .v.gold{color:var(--gold)} .v.dim{color:var(--faint)}
.tbtn{padding:6px 12px; border:1px solid var(--border2); border-radius:8px; font-weight:600; font-size:12.5px; color:var(--muted); transition:border-color .12s,color .12s}
.tbtn:hover{color:var(--ink); border-color:var(--faint)}
.tbtn.on{background:var(--accent-dim); border-color:transparent; color:var(--accent-ink,var(--accent))}
.tbtn.warn{background:var(--amber-dim); border-color:transparent; color:var(--amber)}

/* ── content + shared components ─────────────────────────────────────────────────────── */
.content{padding:24px 24px 64px; max-width:1240px; width:100%; margin:0 auto}
.viewhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:6px; flex-wrap:wrap}
.viewhead h1{font-size:22px; margin:0}
.viewhead .sub{color:var(--muted); margin:4px 0 0; max-width:70ch}
.seg{display:inline-flex; border:1px solid var(--border2); border-radius:9px; overflow:hidden}
.seg button{padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--muted)}
.seg button.on{background:var(--panel2); color:var(--ink)}
.grid{display:grid; gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin:18px 0 20px}
.kpi{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.kpi .k{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); font-weight:600}
.kpi .v{font-family:Sora; font-size:22px; font-weight:600; margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; word-break:break-word}
.kpi .d{font-size:12px; color:var(--muted); margin-top:2px}
.kpi.alert{border-color:color-mix(in srgb,var(--rose) 45%, var(--border))}
.kpi.alert .v{color:var(--rose)}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:14px}
.panel h3{margin:0 0 4px; font-size:14.5px}
.panel .hint{color:var(--muted); font-size:12.5px; margin:0 0 12px; max-width:88ch}
.cols2{grid-template-columns:1.35fr 1fr}
@media(max-width:960px){.cols2{grid-template-columns:1fr}}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.03em; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:99px; background:currentColor}
.pill.researching{background:var(--blue-dim); color:var(--blue)}
.pill.building,.pill.deployed{background:var(--amber-dim); color:var(--amber)}
.pill.verifying,.pill.fixing{background:var(--violet-dim); color:var(--violet)}
.pill.verified,.pill.won,.pill.done,.pill.active,.pill.paid{background:var(--accent-dim); color:var(--accent-ink,var(--accent))}
.pill.selling{background:var(--gold-dim); color:var(--gold)}
.pill.blocked,.pill.setting,.pill.started,.pill.submitted{background:var(--amber-dim); color:var(--amber)}
.pill.proposed,.pill.found,.pill.none{background:var(--panel2); color:var(--muted)}
.pill.escalated,.pill.rejected,.pill.lost,.pill.killed,.pill.failed{background:var(--rose-dim); color:var(--rose)}
.pill.neutral{background:var(--panel2); color:var(--muted)}

.bar{height:6px; background:var(--panel2); border-radius:99px; overflow:hidden}
.bar>i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.bar>i.viol{background:var(--violet)} .bar>i.warn{background:var(--amber)}
.stepper{display:flex; align-items:center; margin:2px 0; flex-wrap:wrap; row-gap:6px}
.step{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint)}
.step .dot{width:9px;height:9px;border-radius:99px; background:var(--panel2); border:2px solid var(--border2)}
.step.donept .dot{background:var(--accent); border-color:var(--accent)}
.step.now .dot{background:var(--panel); border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-dim)}
.step.now{color:var(--violet)} .step.donept{color:var(--accent-ink,var(--accent))}
.stepline{flex:1; height:2px; background:var(--border); margin:0 8px; min-width:14px}
.stepline.fill{background:var(--accent)}

.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--panel)}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
th{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:left; font-weight:600; padding:10px 14px; border-bottom:1px solid var(--border)}
td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer; transition:background .1s}
tbody tr.click:hover{background:var(--panel2)}
td .mono{font-size:12.5px}
tr.subrow td{background:var(--code)}

.board{display:grid; grid-auto-flow:column; grid-auto-columns:262px; gap:12px; overflow-x:auto; padding:4px 2px 14px}
.col{background:color-mix(in srgb, var(--panel) 55%, transparent); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:10px; min-height:160px}
.col>header{display:flex; align-items:center; justify-content:space-between; padding:2px 4px}
.col>header b{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.col>header .n{font-family:"IBM Plex Mono"; font-size:11px; color:var(--faint)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s}
.card:hover{transform:translateY(-1px); border-color:var(--border2); box-shadow:var(--shadow)}
.card b{font-size:13.5px; display:block; margin-bottom:2px}
.card .m{font-size:11.5px; color:var(--muted)}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; flex-wrap:wrap}
.card .geo{font-size:10.5px; color:var(--faint); letter-spacing:.05em; text-transform:uppercase; font-weight:600}

.memo{white-space:pre-wrap; background:var(--code); border-radius:8px; padding:14px 16px; font-size:13px}
.digest{white-space:pre-wrap; background:var(--code); border-radius:8px; padding:12px 14px; font:12px/1.55 "IBM Plex Mono",ui-monospace,monospace; color:var(--muted); overflow-x:auto}
pre.doc{white-space:pre-wrap; word-break:break-word; font:12.5px/1.6 "IBM Plex Mono",ui-monospace,monospace; background:var(--code); border-radius:8px; padding:14px 16px; max-height:60vh; overflow:auto; margin:0}
input,textarea,select{background:var(--code); border:1px solid var(--border); color:var(--ink); border-radius:8px; padding:8px 10px; font:inherit; width:100%}
textarea{min-height:70px}
label.f{display:block; font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin:10px 0 4px; font-weight:600}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.msg{color:var(--muted); font-size:12.5px; margin-left:10px}
.msg.ok{color:var(--accent-ink,var(--accent))} .msg.bad{color:var(--rose)}
.btn{padding:8px 14px; border-radius:9px; font-weight:600; font-size:12.5px; border:1px solid var(--border2); color:var(--ink); background:var(--panel)}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent); border-color:transparent; color:#08130D}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{border-color:color-mix(in srgb,var(--rose) 55%,var(--border2)); color:var(--rose); background:none}
.sm{padding:4px 10px; border-radius:7px; font-size:12px; font-weight:600; border:1px solid var(--border2); color:var(--muted); background:var(--panel)}
.sm:hover{color:var(--ink); border-color:var(--faint)}
.sm.acc{border-color:color-mix(in srgb,var(--accent) 50%,var(--border2)); color:var(--accent-ink,var(--accent))}
.empty{border:1px dashed var(--border2); border-radius:12px; padding:22px; text-align:center; color:var(--faint); font-size:13px}
.note{font-size:12px; color:var(--faint); margin-top:10px}
.organ{display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border)}
.organ:last-child{border-bottom:0}
.organ .st{width:9px;height:9px;border-radius:99px; flex:none}
details.fold{border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin:8px 0}
details.fold>summary{cursor:pointer; font-weight:600; font-size:12.5px; color:var(--muted)}
details.fold[open]>summary{margin-bottom:8px}

/* ── drawer (the dossier sheet) ─────────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(560px,94vw); z-index:70;
  background:var(--panel); border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
  transform:translateX(102%); transition:transform .24s cubic-bezier(.32,.72,.36,1);
  display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer>header{padding:18px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px}
.drawer>header h2{margin:0; font-size:17px}
.drawer>header .host{font-family:"IBM Plex Mono"; font-size:11px; color:var(--faint); word-break:break-all}
.drawer .dbody{overflow-y:auto; padding:16px 20px 32px; display:flex; flex-direction:column; gap:16px}
.dclose{margin-left:auto; width:30px;height:30px; border-radius:8px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--border); flex:none}
.dclose:hover{color:var(--ink); border-color:var(--border2)}
.dsec>h4{margin:0 0 8px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.crit{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.crit li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--panel2) 45%, transparent)}
.crit .ic{font-weight:700; font-size:12px; line-height:1.5; flex:none}
.crit .ic.ok{color:var(--accent-ink,var(--accent))} .crit .ic.bad{color:var(--rose)} .crit .ic.unk{color:var(--faint)}
.crit .why{display:block; color:var(--rose); font-size:11.5px; margin-top:3px}
.crit .why.warn{color:var(--amber)}
.actrow{display:flex; gap:8px; flex-wrap:wrap}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:12.5px}
.kv dt{color:var(--faint)} .kv dd{margin:0; font-family:"IBM Plex Mono"; font-size:12px}

/* ── strategy view ──────────────────────────────────────────────────────────────────── */
.hero{border:1px solid color-mix(in srgb,var(--gold) 35%, var(--border)); background:linear-gradient(180deg, var(--gold-dim), transparent 70%); border-radius:14px; padding:20px 22px; margin:16px 0 18px}
.hero h2{margin:0 0 6px; font-size:17px}
.hero p{margin:0; color:var(--muted); max-width:78ch}
.hero p b{color:var(--ink)}
.ranklist{counter-reset:r; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ranklist>li{counter-increment:r; display:grid; grid-template-columns:34px 1fr; gap:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.ranklist>li::before{content:counter(r,decimal-leading-zero); font-family:"IBM Plex Mono"; font-weight:600; color:var(--gold); font-size:15px; padding-top:2px}
.ranklist b{display:block; margin-bottom:2px; font-size:13.5px}
.ranklist p{margin:0; color:var(--muted); font-size:12.5px; max-width:88ch}
.orggrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tl{list-style:none; margin:0; padding:0}
.tl li{display:grid; grid-template-columns:auto 1fr; gap:10px; padding:7px 0; align-items:baseline}
.tl .nd{width:8px;height:8px;border-radius:99px;background:var(--border2); position:relative; top:2px}
.tl .nd.ok{background:var(--accent)} .tl .nd.bad{background:var(--rose)} .tl .nd.warn{background:var(--amber)}
.tl p{margin:0; font-size:13px}

/* ── responsive: tablet then mobile (off-canvas sidebar behind the scrim) ───────────── */
@media(max-width:1100px){
  .content{padding:18px 18px 56px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .topbar{gap:10px}
}
@media(max-width:960px){ .topstat.opt{display:none} }
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; z-index:80; transform:translateX(-102%); transition:transform .22s cubic-bezier(.32,.72,.36,1); width:min(264px,82vw); box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .menubtn{display:grid!important}
  .topbar{padding:10px 14px}
  .board{grid-auto-columns:238px}
  .viewhead h1{font-size:20px}
}
@media(max-width:560px){
  .topstat.opt2{display:none}
  .content{padding:14px 12px 48px}
  .kpi .v{font-size:19px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); gap:10px}
  .drawer{width:100vw; border-left:0}
  .tbtn{padding:6px 9px; font-size:12px}
  .pulse-dot{display:none}
  .hero{padding:16px}
  .ranklist>li{grid-template-columns:26px 1fr; padding:12px 13px}
}
.menubtn{display:none; place-items:center; width:34px;height:34px; border:1px solid var(--border2); border-radius:8px; color:var(--muted)}