/* Light, calm, low-cognitive-load. Mostly grayscale on white, one restrained accent, generous space.
   Built for reading and fast scanning, not for show. */
:root{
  --bg:#ffffff; --bg-2:#fafafa; --panel:#fcfcfc; --tint:#fbf4f4;
  --line:#ececec; --line-2:#e0e0e0; --line-3:#cfcfcf;
  --accent:#b21e35; --accent-soft:#f7e9eb; --accent-dim:#d98b96;
  --pos:#2f7d4f; --neg:#b21e35; --warn:#9a6b15;
  --ink:#1b1b1b; --body:#3a3a3a; --meta:#717171; --faint:#a0a0a0;
  --mono:'Roboto Mono',ui-monospace,Menlo,monospace;
  --disp:'Chakra Petch',system-ui,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
body{padding-bottom:80px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}

/* header */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:30px 0 18px;flex-wrap:wrap}
.brand h1{margin:0;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:.5px;color:var(--ink)}
.brand .sub{font-family:var(--sans);font-size:12.5px;color:var(--meta);margin-top:5px;display:block;letter-spacing:.2px}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--faint);text-transform:uppercase}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.live.on .dot{background:var(--pos)} .live.on{color:var(--pos)}
.presence{display:flex;gap:4px}
.pchip{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#fff}
.userpick{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.userpick button{font-family:var(--sans);font-size:11px;padding:5px 11px;background:#fff;border:none;border-left:1px solid var(--line-2);color:var(--meta);cursor:pointer}
.userpick button:first-child{border-left:none}
.userpick button.sel{color:#fff;background:var(--accent)}

/* one-line how-to */
.howto{font-size:13px;color:var(--meta);padding:0 0 16px;border-bottom:1px solid var(--line)}
.howto b{color:var(--ink);font-weight:600}

/* scoreboard */
.dash{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:20px 0 0}
.card{padding:16px 17px;background:#fff}
.card .k{font-family:var(--sans);font-size:11px;letter-spacing:.3px;color:var(--meta)}
.card .v{font-family:var(--mono);font-size:25px;font-weight:500;color:var(--ink);margin-top:8px;line-height:1}
.card .vsub{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:6px}
.card.alloc .v{color:var(--ink)}
.card.left .v{color:var(--pos)} .card.left.over .v{color:var(--neg)}
.card.cap2 .v{color:var(--ink)}
.bar{height:4px;border-radius:3px;background:var(--line-2);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent-dim);width:0;transition:width .15s}
.bar i.over{background:var(--neg)}

/* cap controls */
.capbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 2px;margin-top:4px}
.capbar .lab{font-family:var(--sans);font-size:11px;color:var(--meta)}
.capbar label{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11px;color:var(--meta)}
.capbar input{background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:13px;padding:7px 9px;width:120px}
.capbar input:focus{outline:none;border-color:var(--accent)}
.presets{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.presets button{font-family:var(--mono);font-size:12px;padding:7px 13px;background:#fff;border:none;border-left:1px solid var(--line-2);color:var(--meta);cursor:pointer}
.presets button:first-child{border-left:none}
.presets button.sel{color:#fff;background:var(--accent)}

/* sections of cards: plans, show, timeline */
.block{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:14px;background:#fff}
.block .bh{font-family:var(--sans);font-size:11px;letter-spacing:.3px;color:var(--meta);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.block .bh .hint{color:var(--faint)}

/* plans */
.scen-actions{display:flex;gap:8px}
.scen-actions button{font-family:var(--sans);font-size:11px;padding:6px 11px;background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--body);cursor:pointer}
.scen-actions button:hover{border-color:var(--line-3)} .scen-actions button.sel{color:#fff;background:var(--accent);border-color:var(--accent)}
.scen-row{display:flex;gap:8px;flex-wrap:wrap}
.scen{flex:1;min-width:148px;padding:11px 13px;border:1px solid var(--line-2);border-radius:8px;cursor:pointer;background:#fff;text-align:left}
.scen:hover{border-color:var(--line-3)} .scen.sel{border-color:var(--accent);background:var(--tint)}
.scen .nm{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.scen .delta{font-family:var(--mono);font-size:12px;margin-top:6px;color:var(--body)}
.scen .wk{font-family:var(--sans);font-size:11px;color:var(--meta);margin-top:3px}
.scen .ctag{font-family:var(--sans);font-size:9px;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.scen.newscen{flex:0 0 auto;min-width:130px;border-style:dashed} .scen.newscen .nm{color:var(--meta)}
.scen-detail{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:none}
.scen-detail.show{display:block}
.scen-detail .thesis{font-size:13px;color:var(--body);line-height:1.55}
.scen-detail .thesis b{color:var(--ink)}
.scen-detail .meta-line{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:7px}
.scen-detail .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.scen-detail .acts button{font-family:var(--sans);font-size:11px;padding:7px 13px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--body);cursor:pointer}
.scen-detail .acts button.apply{border-color:var(--accent);color:#fff;background:var(--accent)} .scen-detail .acts button:hover{border-color:var(--line-3)}
.scen-editor{display:flex;flex-direction:column;gap:11px}
.scen-editor label{display:flex;flex-direction:column;gap:5px;font-family:var(--sans);font-size:11px;color:var(--meta)}
.scen-editor input,.scen-editor textarea{background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-family:var(--sans);font-size:13px;padding:8px 10px;resize:vertical}
.scen-editor input:focus,.scen-editor textarea:focus{outline:none;border-color:var(--accent)}
.scen-editor .acts{display:flex;gap:8px}
.scen-editor .acts button{font-family:var(--sans);font-size:11px;padding:7px 13px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--body);cursor:pointer}
.scen-editor .acts button.apply{border-color:var(--accent);color:#fff;background:var(--accent)}
.scen-compare{display:none;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.scen-compare.show{display:block}
.cmpt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;min-width:560px}
.cmpt th{text-align:right;color:var(--meta);font-weight:500;font-size:10px;letter-spacing:.3px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.cmpt th:first-child{text-align:left}
.cmpt td{text-align:right;padding:9px 14px;color:var(--body);border-bottom:1px solid var(--line);white-space:nowrap}
.cmpt tr:last-child td{border-bottom:none}
.cmpt td.nmc{text-align:left;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:12.5px}
.cmpt tbody tr{cursor:pointer} .cmpt tbody tr:hover{background:var(--bg-2)}
.cmpt tbody tr.on{background:var(--tint)}
.cmpt .fit{color:var(--pos)} .cmpt .nofit{color:var(--neg)}
.cmpt .mini{font-family:var(--sans);font-size:10px;padding:4px 9px;border:1px solid var(--line-2);border-radius:5px;background:#fff;color:var(--meta);cursor:pointer} .cmpt .mini:hover{color:var(--ink);border-color:var(--accent)}

/* what you show */
.showlist{display:flex;flex-direction:column;gap:8px}
.showlist .s{display:flex;gap:12px;align-items:baseline;font-size:13px;color:var(--body);line-height:1.45}
.showlist .s .f{font-family:var(--mono);font-size:10px;color:var(--accent);flex-shrink:0;width:96px}
.showlist .s b{color:var(--ink);font-weight:600}
.tl-empty{font-family:var(--sans);font-size:12px;color:var(--faint);padding:4px 0}

/* timeline */
.tl-months{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:8px}
.tl-months span{font-family:var(--mono);font-size:10px;color:var(--faint);border-left:1px solid var(--line);padding-left:6px}
.tl-months span:first-child{border-left:none}
.tl-grid{}
.tl-row{display:flex;align-items:center;gap:10px;padding:3px 0}
.tl-row .tl-lbl{width:170px;flex-shrink:0;font-family:var(--sans);font-size:12px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-track{flex:1;position:relative;height:16px;border-radius:4px;background:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100%/4) 100%}
.tl-bar{position:absolute;height:12px;top:2px;border-radius:3px;background:var(--accent-soft);border:1px solid var(--accent-dim);display:flex;align-items:center;padding:0 5px}
.tl-bar span{font-family:var(--mono);font-size:8px;color:var(--accent);white-space:nowrap;overflow:hidden}

/* toolbar */
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:4px 2px 16px}
.controls .fbtn{font-family:var(--sans);font-size:12px;padding:7px 12px;background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--meta);cursor:pointer}
.controls .fbtn:hover{color:var(--ink);border-color:var(--line-3)} .controls .fbtn.sel{color:#fff;background:var(--ink);border-color:var(--ink)}
.controls .sp{flex:1}
.controls .gbtn{font-family:var(--sans);font-size:12px;padding:7px 12px;background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--body);cursor:pointer}
.controls .gbtn:hover{border-color:var(--line-3)} .controls .gbtn.add{color:#fff;background:var(--accent);border-color:var(--accent)}
.controls select{font-family:var(--sans);font-size:12px;background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--body);padding:7px 9px;cursor:pointer}

/* team section */
.area{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:#fff;overflow:hidden}
.area-head{display:flex;align-items:center;gap:14px;padding:14px 17px;cursor:pointer;user-select:none}
.area-head:hover{background:var(--bg-2)}
.area-head .nm{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink);flex:1;letter-spacing:.2px}
.area-head .tot{font-family:var(--mono);font-size:12px;color:var(--meta)} .area-head .tot .c{color:var(--ink);font-weight:500}
.area.collapsed .area-body{display:none}
.area-body{border-top:1px solid var(--line)}

/* item */
.item{border-bottom:1px solid var(--line)} .area-body .item:last-child{border-bottom:none}
.item.inplan{background:var(--tint)}
.irow{display:flex;align-items:center;gap:13px;padding:13px 17px;cursor:pointer}
.item.inplan .irow{box-shadow:inset 3px 0 0 var(--accent)}
.iname{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:14px}
.iwhat{font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.imid{flex:1;min-width:0}
.idots{display:inline-flex;gap:3px;margin-right:9px;vertical-align:middle}
.idots i{width:6px;height:6px;border-radius:50%;background:var(--line-3);display:inline-block}
.idots i.on{background:var(--accent-dim)}
.scflag{font-family:var(--sans);font-size:10px;padding:2px 7px;border-radius:4px}
.scflag.show{color:var(--pos);background:#eef5f0} .scflag.no{color:var(--faint);background:var(--bg-2)}
.icost{font-family:var(--mono);font-size:15px;color:var(--ink);text-align:right;flex-shrink:0;min-width:78px}
.itoggle{flex-shrink:0;font-family:var(--sans);font-size:11px;padding:6px 12px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--meta);cursor:pointer}
.itoggle.on{background:var(--accent);border-color:var(--accent);color:#fff}
.caret{color:var(--faint);font-size:9px;width:12px;flex-shrink:0;transition:transform .12s}
.item.open .caret{transform:rotate(90deg);color:var(--accent)}

.ibody{display:none;padding:2px 17px 20px}
.item.open .ibody{display:block}
.ibody .grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 22px;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:680px){.ibody .grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.full{grid-column:1/-1}
.fld .l{font-family:var(--sans);font-size:11px;color:var(--meta)}
.fld input,.fld textarea,.fld select{background:#fff;border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-family:var(--sans);font-size:13px;padding:8px 10px;width:100%;resize:vertical}
.fld textarea{line-height:1.5}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.capset{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.capset button{flex:1;font-family:var(--mono);font-size:12px;padding:7px 0;border:none;border-left:1px solid var(--line-2);background:#fff;color:var(--meta);cursor:pointer}
.capset button:first-child{border-left:none}
.capset button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.tog{display:flex;align-items:center;gap:10px;cursor:pointer}
.tog input{display:none}
.tog .sw{width:34px;height:18px;border-radius:9px;background:var(--line-2);position:relative;flex-shrink:0;transition:.12s}
.tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.12s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tog input:checked + .sw{background:var(--accent)} .tog input:checked + .sw::after{transform:translateX(16px)}
.tog .tl2{font-family:var(--sans);font-size:12px;color:var(--body)}
.costbox{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.costbox .l{font-family:var(--sans);font-size:11px;color:var(--meta);margin-bottom:9px;display:flex;justify-content:space-between}
.costbox .l .sum{font-family:var(--mono);color:var(--ink);font-weight:500}
.subt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.subt th{text-align:left;color:var(--faint);font-weight:500;font-size:10px;padding:3px 6px}
.subt td{padding:2px 5px}
.subt input{background:#fff;border:1px solid var(--line-2);border-radius:5px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:6px 8px;width:100%}
.subt input:focus{outline:none;border-color:var(--accent)}
.subt .amt{width:120px}
.subt .rm{color:var(--faint);cursor:pointer;border:none;background:none;font-size:15px;padding:0 4px} .subt .rm:hover{color:var(--neg)}
.addrow{font-family:var(--sans);font-size:11px;color:var(--accent);background:#fff;border:1px dashed var(--accent-dim);border-radius:6px;padding:6px 11px;cursor:pointer;margin-top:8px}
.itembtns{grid-column:1/-1;display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.itembtns .rmitem{font-family:var(--sans);font-size:11px;padding:7px 12px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--meta);cursor:pointer}
.itembtns .rmitem:hover{color:var(--neg);border-color:var(--accent-dim)}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);border-radius:8px;color:#fff;font-family:var(--sans);font-size:12.5px;padding:11px 18px;opacity:0;transition:.18s;pointer-events:none;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:720px){
  .dash{grid-template-columns:repeat(2,1fr)} .card .v{font-size:21px}
  .scen{min-width:46%}
  .tl-row .tl-lbl{width:110px}
  .iwhat{display:none}
}