:root{
  --paper:#EEF1EF;--panel:#FFFFFF;--ink:#17242C;--muted:#566771;--rule:#D3DAD7;--rule2:#E4E9E7;
  --cmd:#0D5C4A;--cmd-ink:#FFFFFF;--cmd-soft:#DCEBE6;--sig:#B42318;--sig-soft:#F8E1DE;
  --amber:#9A5B00;--amber-soft:#F7EBD6;--ok:#2E7D4F;--ok-soft:#DDEFE3;--grey-soft:#E7ECEA;
  --focus:#1F6FEB;--shadow:0 1px 0 rgba(23,36,44,.06);
  --f-text:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-num:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1A1E;--panel:#162329;--ink:#E4EBE9;--muted:#9AABB1;--rule:#2B3B41;--rule2:#22323A;
  --cmd:#5BBFA4;--cmd-ink:#0B1A16;--cmd-soft:#17392F;--sig:#F2867B;--sig-soft:#3A1F1D;
  --amber:#E4AA4E;--amber-soft:#3A2D16;--ok:#67C793;--ok-soft:#173326;--grey-soft:#1D2B31;--focus:#79A8FF;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F1A1E;--panel:#162329;--ink:#E4EBE9;--muted:#9AABB1;--rule:#2B3B41;--rule2:#22323A;
  --cmd:#5BBFA4;--cmd-ink:#0B1A16;--cmd-soft:#17392F;--sig:#F2867B;--sig-soft:#3A1F1D;
  --amber:#E4AA4E;--amber-soft:#3A2D16;--ok:#67C793;--ok-soft:#173326;--grey-soft:#1D2B31;--focus:#79A8FF;color-scheme:dark}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--f-text);-webkit-font-smoothing:antialiased}
a{color:var(--cmd)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-num);font-weight:600;letter-spacing:.005em;margin:0}
h2{font-size:1.65rem;line-height:1.15}
h3{font-size:1.15rem;line-height:1.25}
p{margin:.4em 0}
.muted{color:var(--muted)}
.small{font-size:.84rem}

/* ---------- top band ---------- */
.top{background:var(--panel);border-bottom:1px solid var(--rule)}
.top-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding:14px 20px 10px;max-width:1500px;margin:0 auto}
.brand h1{font-size:1.35rem;line-height:1.1}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.who{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.who label{font-size:.82rem;color:var(--muted)}
.who select{max-width:270px}
.sync{font-size:.78rem;padding:3px 8px;border-radius:20px;background:var(--grey-soft);color:var(--muted);white-space:nowrap}
.sync.on{background:var(--ok-soft);color:var(--ok)}
.sync.warn{background:var(--amber-soft);color:var(--amber)}

.band{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;padding:4px 20px 16px;max-width:1500px;margin:0 auto}
.ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.rung{position:relative;padding:8px 10px 9px;background:var(--grey-soft);border-radius:3px;min-height:58px}
.rung b{display:block;font-family:var(--f-num);font-size:1.5rem;line-height:1;font-weight:700;color:var(--muted)}
.rung span{display:block;font-size:.76rem;line-height:1.2;color:var(--muted);margin-top:4px}
.rung.past{background:var(--cmd-soft)}
.rung.past b,.rung.past span{color:var(--cmd)}
.rung.now{background:var(--sig);color:#fff}
.rung.now b,.rung.now span{color:#fff}
.rung.now::after{content:"Current level";position:absolute;right:8px;top:7px;font-size:.68rem;opacity:.9}
.clock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center}
.clock .big{font-family:var(--f-num);font-weight:700;font-size:3rem;line-height:.9;color:var(--ink)}
.clock .big small{font-size:1.05rem;font-weight:500;color:var(--muted);margin-left:4px}
.track{height:10px;background:var(--grey-soft);border-radius:5px;position:relative;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;background:var(--cmd);border-radius:5px}
.ticks{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:3px}
.clock .note{grid-column:1/-1;font-size:.8rem;color:var(--muted)}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1500px;margin:0 auto;gap:0}
nav.side{padding:18px 10px 40px 20px;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}
nav.side a{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:4px;text-decoration:none;color:var(--ink);font-size:.93rem}
nav.side a:hover{background:var(--grey-soft)}
nav.side a.on{background:var(--cmd);color:var(--cmd-ink)}
nav.side a em{font-style:normal;font-size:.75rem;opacity:.75}
nav.side .grp{font-size:.75rem;color:var(--muted);margin:14px 10px 4px}
main{padding:18px 20px 60px;min-width:0}
.view-h{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.view-h p{max-width:72ch;color:var(--muted);margin:4px 0 0}

.sec{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.sec>h3{margin-bottom:10px}
.sec-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2>.sec,.grid3>.sec{margin-bottom:0}
.stack{display:grid;gap:16px;margin-bottom:16px}

/* key figures strip */
.figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--rule);border-radius:6px;background:var(--panel);margin-bottom:16px}
.fig{padding:12px 16px;border-left:1px solid var(--rule2)}
.fig:first-child{border-left:0}
.fig b{display:block;font-family:var(--f-num);font-size:2rem;line-height:1;font-weight:700}
.fig span{display:block;font-size:.8rem;color:var(--muted);margin-top:6px}
.fig.alert b{color:var(--sig)}

/* bars */
.bars{display:grid;gap:7px}
.bar-row{display:grid;grid-template-columns:minmax(120px,230px) minmax(0,1fr) 136px;gap:10px;align-items:center;font-size:.88rem}
.bar-row .lab{overflow:hidden;text-overflow:ellipsis}
.bar-row>span:last-child{white-space:nowrap}
.meter{height:14px;background:var(--grey-soft);border-radius:2px;position:relative}
.meter .base{position:absolute;top:0;bottom:0;left:0;background:var(--rule)}
.meter .cur{position:absolute;top:3px;bottom:3px;left:0;background:var(--cmd);border-radius:1px}
.meter .cur.low{background:var(--sig)}.meter .cur.mid{background:var(--amber)}
.meter .tgt{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:12px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:1px}

.crit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crit div{border-top:4px solid var(--sig);padding-top:8px}
.crit div.ok{border-color:var(--ok)}.crit div.mid{border-color:var(--amber)}
.crit b{font-family:var(--f-num);font-size:2.2rem;line-height:1}
.crit span{display:block;font-size:.83rem;color:var(--muted)}

.stackbar{display:flex;height:22px;border-radius:3px;overflow:hidden;background:var(--grey-soft)}
.stackbar i{display:block;height:100%}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.87rem}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--rule2);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.78rem;border-bottom:1px solid var(--rule);white-space:nowrap}
td.n,th.n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--grey-soft)}
tr.open td{background:var(--cmd-soft)}
tr.grp td{background:var(--grey-soft);font-weight:600;font-size:.8rem}
.id{font-family:var(--f-num);color:var(--muted);white-space:nowrap}

/* chips and status */
.chip{display:inline-block;font-size:.74rem;line-height:1.3;padding:1px 7px;border-radius:10px;background:var(--grey-soft);color:var(--ink);margin:1px 3px 1px 0;white-space:nowrap}
.chip.lead{background:var(--cmd-soft);color:var(--cmd);font-weight:600}
.chip.partner{border:1px dashed var(--muted);background:transparent}
.st{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;white-space:nowrap}
.st::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted)}
.st.ip::before{background:var(--amber)}.st.done::before{background:var(--ok)}.st.delay::before,.st.block::before,.st.over::before{background:var(--sig)}
.st.over{color:var(--sig);font-weight:600}
.pri-U{color:var(--sig);font-weight:600}.pri-H{color:var(--amber)}
.flag{font-size:.72rem;color:var(--sig);font-weight:600}
.added{font-size:.72rem;color:var(--cmd);font-weight:600}
.rag{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--rule);vertical-align:-2px}
.rag.g{background:var(--ok)}.rag.a{background:var(--amber)}.rag.r{background:var(--sig)}
.pbar{width:70px;height:6px;background:var(--grey-soft);border-radius:3px;display:inline-block;vertical-align:middle;position:relative;overflow:hidden}
.pbar i{position:absolute;inset:0 auto 0 0;background:var(--cmd)}

/* controls */
.ctrl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
select,input[type=text],input[type=number],input[type=date],textarea{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:5px 8px;min-height:32px}
textarea{width:100%;min-height:64px;resize:vertical}
input[type=number]{width:96px}
.btn{border:1px solid var(--rule);background:var(--panel);border-radius:4px;padding:5px 12px;min-height:32px;cursor:pointer}
.btn:hover{border-color:var(--cmd)}
.btn.pri{background:var(--cmd);color:var(--cmd-ink);border-color:var(--cmd)}
.btn.on{background:var(--cmd-soft);border-color:var(--cmd);color:var(--cmd)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:5px 10px;cursor:pointer;min-height:32px}
.seg button+button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--cmd);color:var(--cmd-ink)}
.editor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;padding:10px 4px 6px}
.editor label{display:grid;gap:3px;font-size:.78rem;color:var(--muted)}
.editor .wide{grid-column:1/-1}
.editor .half{grid-column:span 2}
.checks{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.84rem;color:var(--ink)}
.checks label{display:flex;gap:4px;align-items:center;color:var(--ink);font-size:.84rem}
.hist{font-size:.78rem;color:var(--muted);grid-column:1/-1;border-top:1px dashed var(--rule);padding-top:6px}
.ro-note{font-size:.82rem;background:var(--amber-soft);color:var(--amber);padding:8px 12px;border-radius:4px;margin-bottom:14px}
.empty{padding:20px;color:var(--muted);text-align:center}

/* pillar board */
.board{display:grid;gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--panel)}
.prow{display:grid;grid-template-columns:64px minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1.6fr) 120px;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--rule2);text-decoration:none;color:var(--ink)}
.prow:first-child{border-top:0}
.prow:hover{background:var(--grey-soft)}
.prow .pn{font-family:var(--f-num);font-size:2.3rem;font-weight:700;line-height:1;color:var(--cmd)}
.prow .pt{font-weight:600}
.prow .pl{font-size:.8rem;color:var(--muted)}
.mini{display:flex;gap:2px;height:12px}
.mini i{flex:1;background:var(--grey-soft);border-radius:1px}
.mini i.done{background:var(--ok)}.mini i.ip{background:var(--amber)}.mini i.bad{background:var(--sig)}

/* gantt */
.gantt{position:relative;min-width:780px}
.g-head,.g-row{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center}
.g-head{position:sticky;top:0;background:var(--panel);z-index:2;border-bottom:1px solid var(--rule);font-size:.72rem;color:var(--muted)}
.g-scale{position:relative;height:30px}
.g-scale span{position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap;text-align:center;line-height:1.2}
.g-scale span.end{transform:translateX(-100%);text-align:right}
.g-head{height:40px}.g-scale{height:40px}
.g-row{border-bottom:1px solid var(--rule2);min-height:30px}
.g-row.ph{background:var(--grey-soft);font-weight:600;font-size:.8rem}
.g-lab{padding:4px 10px 4px 0;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-lane{position:relative;height:30px}
.g-bar{position:absolute;top:8px;height:14px;border-radius:2px;background:var(--rule);min-width:6px;cursor:pointer;border:0;padding:0}
.g-bar.ns{background:var(--rule)}
.g-bar.ip{background:var(--amber)}.g-bar.done{background:var(--ok)}.g-bar.delay,.g-bar.block{background:var(--sig)}
.g-bar.over{background:repeating-linear-gradient(135deg,var(--sig) 0 4px,var(--sig-soft) 4px 8px)}
.g-bar.ms{width:12px!important;min-width:12px;height:12px;top:9px;margin-left:-6px;transform:rotate(45deg);border-radius:1px}
.g-lane{overflow:visible}
.g-grid{position:absolute;inset:0 0 0 300px;pointer-events:none}
.g-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--rule2)}
.g-grid i.mile{background:var(--rule);width:1px}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--sig);z-index:1}
.g-today span{position:absolute;top:2px;left:4px;font-size:.7rem;color:var(--sig);white-space:nowrap;font-weight:600;background:var(--panel);padding:0 3px}

/* matrix */
.mx td,.mx th{text-align:center;padding:5px 4px;min-width:30px}
.mx td:first-child,.mx th:first-child{text-align:left;min-width:220px}
.mx .L{background:var(--cmd);color:var(--cmd-ink);font-weight:700;border-radius:2px}
.mx .S{background:var(--cmd-soft);color:var(--cmd)}
.mx .A{background:var(--amber-soft);color:var(--amber)}
.mx .P{outline:1px dashed var(--muted);outline-offset:-3px;color:var(--muted)}

/* estimator */
.calc{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.params{position:sticky;top:10px}
.prm{display:grid;gap:3px;padding:8px 0;border-bottom:1px solid var(--rule2)}
.prm-top{display:flex;justify-content:space-between;gap:8px;font-size:.86rem}
.prm-top b{font-family:var(--f-num);font-size:1.05rem}
.prm input[type=range]{width:100%;accent-color:var(--cmd)}
.prm .src{font-size:.72rem;color:var(--muted);line-height:1.35}
.prm .src em{font-style:normal;color:var(--amber);font-weight:600}
.presets{display:flex;flex-wrap:wrap;gap:4px}
.presets .btn{font-size:.78rem;padding:2px 8px;min-height:28px}
.eq{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--muted)}
.hero-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:6px;background:var(--panel);margin-bottom:16px}
.hero-n div{padding:12px 16px;border-left:1px solid var(--rule2)}
.hero-n div:first-child{border-left:0}
.hero-n b{display:block;font-family:var(--f-num);font-size:2.1rem;line-height:1;font-weight:700}
.hero-n span{font-size:.8rem;color:var(--muted)}
.ok-t{color:var(--ok);font-weight:600}.bad-t{color:var(--sig);font-weight:600}.amb-t{color:var(--amber);font-weight:600}

/* findings */
.find{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 14px;padding:12px 0;border-top:1px solid var(--rule2)}
.find:first-of-type{border-top:0}
.sev{font-family:var(--f-num);font-weight:700;font-size:.85rem;padding:2px 8px;border-radius:3px;align-self:start;text-align:center}
.sev.h{background:var(--sig);color:#fff}.sev.m{background:var(--amber-soft);color:var(--amber)}.sev.l{background:var(--grey-soft);color:var(--muted)}
.find h4{margin:0 0 3px;font-size:.98rem}
.find p{margin:2px 0;font-size:.88rem;max-width:90ch}
.find .lbl{color:var(--muted);font-size:.78rem}

.srcl li{margin-bottom:8px;font-size:.88rem}
.srcl .tag{font-size:.72rem;padding:1px 6px;border-radius:8px;background:var(--grey-soft);margin-right:6px}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:5px;font-size:.88rem;z-index:20;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

@media (max-width:1100px){
  .figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig:nth-child(4){border-left:0}
  .calc{grid-template-columns:minmax(0,1fr)}
  .params{position:static}
  .prow{grid-template-columns:52px minmax(0,1fr) 110px}
  .prow .hide-m{display:none}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  nav.side{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);display:flex;overflow-x:auto;padding:8px 12px;max-height:none;border-bottom:1px solid var(--rule);gap:4px}
  nav.side .grp{display:none}
  nav.side a{white-space:nowrap;flex:none}
  nav.side a em{display:none}
  .band{grid-template-columns:minmax(0,1fr)}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .top-in{grid-template-columns:minmax(0,1fr)}
  .who{justify-content:flex-start}
  .editor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-n div:nth-child(3){border-left:0}
  .crit{grid-template-columns:minmax(0,1fr)}
  main{padding:14px 12px 60px}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
}
@media (max-width:560px){
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{border-left:0;border-top:1px solid var(--rule2)}
  .bar-row{grid-template-columns:minmax(0,1fr) auto}
  .bar-row .meter{grid-column:1/-1;grid-row:2}
  .find{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}