/* PCC Production Planning — Fulcrum-style white ground, ink text, indigo accent; monday/ClickUp status pills. */
:root{
  --ink:#292932; --ink2:#62626f; --ink3:#9a9aab; --rule:#e6e6ee; --rule2:var(--bg2); --paper:#ffffff; --bg:#f7f7fa; --hover:#f4f5ff;
  --indigo:#3840EA; --indigo-d:#2c33c4; --indigo-l:#eceefd; --indigo-xl:#f5f6ff;
  --green:#00C875; --green-l:#e0f8ee; --amber:#FDAB3D; --amber-l:#fff1de; --red:#E2445C; --red-l:#fde3e7; --purple:#A25DDC; --purple-l:#f1e6fa; --blue:#579BFC; --blue-l:#e6f0ff; --teal:#00A6A6; --grey:#c4c4c4; --grey-l:#f0f0f3; --dark:#333333;
  --smt:#3840EA; --tht:#FF642E; --insp:#00C875; --test:#FFCB00; --back:#00A9A5; --asm:#0086C0; --mat:#7E8B99; --ship:#FF5AC4; --out:#7F5347; --other:#c4c4c4;
  --ot:#E2445C; --ot-l:rgba(226,68,92,.12);
  --font:"Plus Jakarta Sans",system-ui,Segoe UI,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
  --side:232px; --r:8px; --sh:0 1px 2px rgba(41,41,50,.06),0 4px 14px rgba(41,41,50,.05);
  --paper2:#fafafc; --bg2:#f1f1f6; --topbar:#292932; --topbar-ink:#ffffff; --field:#ffffff; --on-accent:#fff;
}
[data-theme=dark]{
  --ink:#e9e9f1; --ink2:#b6b6c6; --ink3:#83839a; --rule:#2c2c3a; --rule2:#252532; --paper:#1a1a23; --paper2:#1f1f2a; --bg:#121218; --bg2:#1e1e28; --hover:#23233a; --field:#141420;
  --indigo-l:#262a5e; --indigo-xl:#1c1e3c; --green-l:#0f3a2a; --amber-l:#3d2a10; --red-l:#42171f; --purple-l:#2f1d45; --blue-l:#17294a; --grey-l:#262630; --topbar:#0f0f16; --sh:none;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--link,var(--indigo))} b,strong{font-weight:700}
/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
aside.side{background:var(--paper);border-right:1px solid var(--rule);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--indigo);color:var(--on-accent,#fff);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em}
.brand .nm{font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.1} .brand .nm small{display:block;font-weight:500;color:var(--ink3);font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
nav.nav{padding:4px 10px 10px;overflow-y:auto;flex:1}
nav.nav .grp{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:14px 10px 6px}
/* sidebar modules are <a href="#tab=…" data-tab="…"> links (round 5: Ctrl / middle click opens a module in a new tab); [data-tab] also styles a <button data-tab> */
nav.nav [data-tab]{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font:inherit;font-weight:600;font-size:13.5px;color:var(--ink2);cursor:pointer;text-decoration:none;-webkit-user-drag:element}
nav.nav [data-tab]:hover{background:var(--hover);color:var(--ink)} nav.nav [data-tab].active{background:var(--indigo-l);color:var(--indigo)}
nav.nav [data-tab]:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px}
nav.nav [data-tab] .ic{width:18px;height:18px;flex:none;display:inline-grid;place-items:center} nav.nav [data-tab] .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav.nav [data-tab] .n{margin-left:auto;min-width:22px;text-align:center;padding:1px 7px;border-radius:10px;background:var(--grey-l);color:var(--ink2);font-size:11.5px;font-family:var(--mono);font-weight:500}
nav.nav [data-tab].active .n{background:var(--field);color:var(--indigo)} nav.nav [data-tab] .n.hot{background:var(--red);color:var(--red-ink,#fff)}
.side-foot{padding:12px 16px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink3);font-family:var(--mono);line-height:1.5}
.side-foot .lock{display:flex;align-items:center;gap:6px;font-family:var(--font);font-weight:600;color:var(--ink2);cursor:pointer;margin-top:4px} .side-foot .lock.on{color:var(--green)}
header.top{display:flex;align-items:center;gap:12px;padding:12px 26px;background:var(--topbar);color:var(--topbar-ink);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
header.top .btn{background:var(--tb-btn-bg,rgba(255,255,255,.08));border-color:var(--tb-btn-bd,rgba(255,255,255,.22));color:var(--tb-btn-ink,#fff);box-shadow:none} header.top .btn:hover{background:var(--tb-btn-hover,rgba(255,255,255,.16))} header.top .btn.primary{background:var(--tb-primary,var(--indigo));border-color:var(--tb-primary,var(--indigo));color:var(--tb-primary-ink,var(--on-accent,#fff))}
header.top input{background:var(--tb-field,rgba(255,255,255,.1));border-color:var(--tb-field-bd,rgba(255,255,255,.22));color:var(--tb-field-ink,#fff)} header.top input::placeholder{color:var(--tb-field-ph,rgba(255,255,255,.55))} header.top input:focus{background:var(--tb-field,rgba(255,255,255,.16));box-shadow:none;border-color:var(--tb-field-focus,rgba(255,255,255,.5))}
header.top h1{font-size:19px;margin:0;font-weight:800;letter-spacing:-.015em;color:var(--topbar-ink,#fff)} header.top .sub{font-size:12px;color:var(--tb-sub,rgba(255,255,255,.6));font-family:var(--mono)} header.top .sp{flex:1}
/* round 5: "← Back" (browser history; greyed until this tab has somewhere to go back to) · in-app links (jobLink, bell) */
header.top h1{white-space:nowrap} header.top #btnBack{flex:none;padding-left:9px;padding-right:11px;white-space:nowrap} header.top #btnBack:disabled{opacity:.35;cursor:default;background:var(--tb-btn-bg,rgba(255,255,255,.08))}
a.joblink{color:inherit;text-decoration:none;font-weight:inherit;cursor:pointer} a.joblink:hover{color:var(--link,var(--indigo));text-decoration:underline;text-underline-offset:2px} a.joblink:focus-visible{outline:2px solid var(--indigo);outline-offset:1px;border-radius:3px}
a.btn,a.btn:hover{text-decoration:none} a.btn.joblink:hover{color:inherit} .ta-item a.ta-link{color:inherit;text-decoration:none} .ta-item a.ta-link:hover{text-decoration:underline}
main{padding:20px 26px 80px;max-width:1900px}
h2{font-size:17px;margin:4px 0 12px;font-weight:800;letter-spacing:-.01em} h2 .muted{font-weight:500;letter-spacing:0} h3{font-size:14px;margin:18px 0 8px;font-weight:700} h4{font-size:12.5px;margin:12px 0 6px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0} .row.tight{margin:0;gap:6px}
.muted{color:var(--ink2)} .faint{color:var(--ink3)} .small{font-size:12.5px} .xs{font-size:11.5px} .mono{font-family:var(--mono)} .right{text-align:right}
/* ── controls ──────────────────────────────────────────────────────────── */
.btn{background:var(--paper);border:1px solid var(--rule);border-radius:7px;padding:7px 13px;font:inherit;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;box-shadow:0 1px 1px rgba(41,41,50,.03);white-space:nowrap}
.btn:hover{border-color:var(--rule-hi,#c9c9d6);background:var(--btn-hover,#fafafd)} .btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--indigo);color:var(--on-accent,#fff);border-color:var(--indigo)} .btn.primary:hover{background:var(--indigo-d)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--indigo)} .btn.ghost:hover{background:var(--indigo-l)}
.btn.danger{color:var(--red)} .btn.danger.solid{background:var(--red);color:var(--red-ink,#fff);border-color:var(--red)} .btn.green{background:var(--green);color:var(--green-ink,#fff);border-color:var(--green)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px} .btn.xs{padding:2px 7px;font-size:11.5px;border-radius:5px} .btn.big{padding:12px 18px;font-size:15px;min-width:110px;border-radius:9px}
input,select,textarea{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--rule);border-radius:7px;background:var(--field);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-l)}
input[type=number]{width:84px;text-align:right;font-family:var(--mono)} input[type=date],input[type=datetime-local]{font-family:var(--mono)} input[type=checkbox]{width:16px;height:16px;accent-color:var(--indigo);vertical-align:-3px}
label{font-size:12.5px;color:var(--ink2);font-weight:600} label input,label select{margin-left:6px;font-weight:500;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:4px} .field>span{font-size:11.5px;font-weight:700;color:var(--ink2);letter-spacing:.02em} .field input,.field select{width:100%} .field input[type=checkbox],.field input[type=radio]{width:auto;align-self:flex-start}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper)} .seg button{background:none;border:0;padding:6px 12px;font:inherit;font-weight:600;font-size:12.5px;color:var(--ink2);cursor:pointer;border-right:1px solid var(--rule)} .seg button:last-child{border-right:0} .seg button.on{background:var(--indigo-l);color:var(--indigo)}
/* ── cards, kpis ───────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin:10px 0;box-shadow:var(--sh)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 14px}
.kpi{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--indigo)} .kpi.ok:before{background:var(--green)} .kpi.warn:before{background:var(--amber)} .kpi.bad:before{background:var(--red)} .kpi.mute:before{background:var(--grey)}
.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums} .kpi .l{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:4px}
.kpi .d{font-size:11.5px;color:var(--ink3);margin-top:2px}
.banner{background:var(--amber-l);border:1px solid var(--amber-bd,#fbd9a8);padding:9px 13px;border-radius:9px;margin:8px 0;font-size:13px}
.banner.info{background:var(--indigo-xl);border-color:var(--indigo-bd,#d7daf9)} .banner.bad{background:var(--red-l);border-color:var(--red-bd,#f5bcc6)} .banner.ok{background:var(--green-l);border-color:var(--green-bd,#b8ecd3)}
/* ── tables ────────────────────────────────────────────────────────────── */
.tblwrap{overflow:auto;border:1px solid var(--rule);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th{position:sticky;top:0;background:var(--paper2);text-align:left;padding:9px 11px;border-bottom:1px solid var(--rule);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;z-index:2;font-weight:700}
td{padding:7px 11px;border-bottom:1px solid var(--rule2);vertical-align:middle} tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)} td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} td.c{font-family:var(--mono);font-size:12px} th.n{font-family:var(--font)}
tr.sel td{background:var(--indigo-xl)} tr.grp td{background:var(--paper2);font-weight:700;color:var(--ink)} tr.dim td{color:var(--ink3)}
td .sub{display:block;font-size:11.5px;color:var(--ink3);font-weight:500}
/* ── pills (monday-style) ──────────────────────────────────────────────── */
.pill{display:inline-block;padding:2px 9px;border-radius:5px;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--pill-ink,#fff);line-height:1.5;letter-spacing:.01em}
.pill.green{background:var(--green)} .pill.amber{background:var(--amber);color:var(--amber-ink,#2a1d00)} .pill.red{background:var(--red)} .pill.purple{background:var(--purple)} .pill.blue{background:var(--blue)} .pill.grey{background:var(--grey);color:var(--grey-ink,#2a2a2a)} .pill.dark{background:var(--dark);color:var(--dark-ink,#fff)} .pill.teal{background:var(--teal)} .pill.indigo{background:var(--indigo);color:var(--on-accent,#fff)}
.pill.soft{color:var(--ink);font-weight:600} .pill.soft.green{background:var(--green-l);color:var(--green-t,#0a7a4a)} .pill.soft.amber{background:var(--amber-l);color:var(--amber-t,#8a5200)} .pill.soft.red{background:var(--red-l);color:var(--red-t,#b01e37)} .pill.soft.grey{background:var(--grey-l);color:var(--ink2)} .pill.soft.indigo{background:var(--indigo-l);color:var(--indigo)} .pill.soft.purple{background:var(--purple-l);color:var(--purple-t,#6a2fa3)} .pill.soft.blue{background:var(--blue-l);color:var(--blue-t,#1f5fc7)}
.pill.p0{background:var(--red)} .pill.p1{background:var(--amber);color:var(--amber-ink,#2a1d00)} .pill.p2{background:var(--blue)} .pill.p3{background:var(--grey);color:var(--grey-ink,#2a2a2a)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.a-smt{background:var(--smt)} .a-tht{background:var(--tht)} .a-insp{background:var(--insp)} .a-test{background:var(--test)} .a-back{background:var(--back)} .a-asm{background:var(--asm)} .a-mat{background:var(--mat)} .a-other{background:var(--other)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin:6px 0} .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* ── gantt ─────────────────────────────────────────────────────────────── */
.gantt{display:grid;grid-template-columns:340px 1fr;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:var(--sh)}
.gantt .left{border-right:1px solid var(--rule)} .gantt .right{overflow-x:auto;position:relative}
.gantt .hdr{height:46px;background:var(--paper2);border-bottom:1px solid var(--rule);display:flex;align-items:center;padding:0 12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.gantt .weeks{display:grid;height:46px;background:var(--paper2);border-bottom:1px solid var(--rule)}
.gantt .week{border-left:1px solid var(--rule);padding:6px 7px;font-size:11px;font-family:var(--mono);color:var(--ink3)} .gantt .week b{display:block;color:var(--ink);font-family:var(--font);font-size:12px}
.gantt .week.cur{background:var(--indigo-xl)}
.gantt .grow{height:40px;border-bottom:1px solid var(--rule2);display:flex;align-items:center;padding:0 10px;gap:8px;overflow:hidden;white-space:nowrap;cursor:pointer} .gantt .grow:hover{background:var(--hover)}
.gantt .grow .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis} .gantt .grow .acct{color:var(--ink3);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.gantt .lane{position:relative;height:40px;border-bottom:1px solid var(--rule2);background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px)}
.gantt .bar{position:absolute;top:7px;height:26px;border-radius:6px;background:var(--indigo);opacity:.14;cursor:grab} .gantt .bar:active{cursor:grabbing}
.gantt .op{position:absolute;top:12px;height:16px;border-radius:4px;opacity:.95;pointer-events:none}
.gantt .act{position:absolute;top:29px;height:4px;border-radius:2px;background:var(--ink);opacity:.7;pointer-events:none}
.gantt .lbl{position:absolute;top:11px;font-size:11.5px;font-family:var(--mono);color:var(--ink2);pointer-events:none;white-space:nowrap}
.gantt .today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:3;pointer-events:none}
.gantt .due{position:absolute;top:4px;height:32px;width:0;border-left:2px dashed var(--ink);z-index:2;pointer-events:none;opacity:.6}
.gantt .hol{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(41,41,50,.06) 4px 6px);pointer-events:none}
/* order gantt */
.ogantt .grow{height:34px} .ogantt .lane{height:34px} .ogantt .op{top:8px;height:14px} .ogantt .act{top:24px}
/* ── heat ──────────────────────────────────────────────────────────────── */
td.heat{text-align:center;font-family:var(--mono);font-size:12px;min-width:76px;cursor:pointer}
td.h0{background:var(--paper2);color:var(--ink3)} td.h1{background:var(--green-l)} td.h2{background:var(--amber-l)} td.h3{background:var(--red-l);color:var(--red-t,#b01e37);font-weight:700}
/* ── kanban ────────────────────────────────────────────────────────────── */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kcol{flex:0 0 250px;background:var(--bg2);border-radius:12px;padding:10px;min-height:120px;border:2px solid transparent}
.kcol.over{border-color:var(--indigo);background:var(--indigo-xl)}
.kcol h4{margin:2px 4px 10px;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)} .kcol h4 .n{margin-left:auto;font-family:var(--mono);font-weight:500;color:var(--ink3);font-size:12px} .kcol h4 .cap{font-family:var(--mono);font-weight:500;color:var(--ink3);font-size:11px}
.kcard{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:9px 11px;margin-bottom:8px;cursor:grab;box-shadow:0 1px 2px rgba(41,41,50,.05)} .kcard:active{cursor:grabbing} .kcard:hover{border-color:var(--rule-hi,#c9c9d6)}
.kcard .t{font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center;justify-content:space-between} .kcard .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .m{font-size:11.5px;color:var(--ink2);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kcard .bar{height:4px;background:var(--rule);border-radius:2px;margin-top:8px;overflow:hidden} .kcard .bar i{display:block;height:100%;background:var(--green)}
.kcard.running{border-left:4px solid var(--amber)} .kcard.late{border-left:4px solid var(--red)}
/* ── floor ─────────────────────────────────────────────────────────────── */
.ops{display:grid;gap:8px} .opcard{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:10px 14px;box-shadow:var(--sh)}
.opcard .seq{font-family:var(--mono);font-size:20px;color:var(--ink3)} .opcard .st{font-weight:700;font-size:15px} .opcard .wcn{color:var(--ink2);font-size:12.5px;margin-top:2px}
.opcard.done{opacity:.55} .opcard.running{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-l)} .opcard.skipped{opacity:.4}
.status-Planned{color:var(--ink3)} .status-Ready{color:var(--blue)} .status-Running{color:var(--amber-t,#b06d00)} .status-Done{color:var(--green-t,#0a7a4a)} .status-Skipped{color:var(--ink3)}
/* ── job drawer / modal ────────────────────────────────────────────────── */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--toast-ink,#fff);padding:10px 16px;border-radius:9px;font-size:13.5px;opacity:0;transition:opacity .2s;z-index:80;max-width:80vw;box-shadow:0 8px 30px rgba(0,0,0,.2)}
#toast.show{opacity:1} #toast.err{background:var(--red);color:var(--red-ink,#fff)}
.modal-bg{position:fixed;inset:0;background:var(--scrim,rgba(41,41,50,.4));display:none;align-items:center;justify-content:center;z-index:60;padding:20px} .modal-bg.show{display:flex}
.modal{background:var(--paper);border-radius:14px;padding:18px 22px;min-width:360px;max-width:min(1500px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{margin-top:0} .modal .close{float:right;border:0;background:none;font-size:20px;color:var(--ink3);cursor:pointer;line-height:1}
.job{display:grid;grid-template-columns:minmax(380px,460px) 1fr;gap:18px}
.job .panel{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--hover)}
.job .panel h4{margin:10px 0 6px} .job .panel h4:first-child{margin-top:0}
.job .panel .fields{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.job .oplist{max-height:70vh;overflow:auto}
.pin{display:grid;place-items:center;gap:12px;padding:10px} .pin input{font-size:28px;letter-spacing:.4em;text-align:center;width:180px;font-family:var(--mono)}
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:4px 0 12px} .tabs2 button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font:inherit;font-weight:600;font-size:13px;color:var(--ink2);cursor:pointer;margin-bottom:-1px} .tabs2 button.on{color:var(--indigo);border-bottom-color:var(--indigo)}
.prog{height:6px;background:var(--rule);border-radius:3px;overflow:hidden;min-width:60px} .prog i{display:block;height:100%;background:var(--green)}
.gap{color:var(--red-t,#b01e37);font-weight:700} .have{color:var(--green-t,#0a7a4a);font-weight:700}
@media (max-width:1100px){.job{grid-template-columns:1fr}} @media (max-width:900px){.gantt{grid-template-columns:200px 1fr} main{padding:12px}}   /* R10: the sidebar is a rail + flyout at every width (end of file) */

/* ── print (dispatch) ─────────────────────────────────────────────────── */
.printonly{display:none}
@media print{aside.side,header.top,.noprint,#toast,.modal-bg{display:none!important} .printonly{display:inline} .printhead{display:block!important;margin:0 0 8px;font-size:14px} .shell{grid-template-columns:1fr} main{padding:0;max-width:none} body{background:var(--field);font-size:11.5px} .tblwrap{box-shadow:none;border-radius:0;overflow:visible} th{position:static} h3{margin:10px 0 4px;page-break-after:avoid} tr{page-break-inside:avoid}}
.a-ship{background:var(--ship)} .a-out{background:var(--out)}

/* round 7: many modules added top-bar controls — keep the bar on one line at 1440px: the subtitle truncates, the search shrinks */
header.top{min-width:0} header.top .sub{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} header.top #gSearch{min-width:150px!important;flex:0 1 260px;width:auto} header.top>.btn,header.top>button{flex:none;white-space:nowrap}

/* round 7 sidebar tree: sections, parents with fold-out children (js/navtree.js) */
nav.nav .nv-sec{margin:0} nav.nav .nv-row{position:relative} nav.nav .nv-row>[data-tab]{padding-right:30px}
nav.nav .nv-tog{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:inherit;opacity:.55;cursor:pointer;padding:0}
nav.nav .nv-tog::before{content:'';display:block;width:6px;height:6px;margin:auto;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
nav.nav .nv-par.open .nv-tog::before{transform:rotate(45deg)} nav.nav .nv-tog:hover{opacity:1;background:var(--hover)}
nav.nav .nv-kids{display:none;margin:1px 0 4px 17px;padding-left:9px;border-left:1px solid var(--rule)} nav.nav .nv-par.open>.nv-kids{display:block}
nav.nav .nv-kids [data-tab]{font-size:12.8px;font-weight:500;padding:6px 10px} nav.nav .nv-kids [data-tab] .ic{transform:scale(.85)}
nav.nav .nv-par.flat>.nv-kids{margin-left:0;padding-left:0;border-left:0} nav.nav .nv-par.flat .nv-tog{display:none}
nav.nav .nv-par.nokids .nv-tog{display:none} nav.nav .nv-par.nokids>.nv-kids{display:none} nav.nav .nv-par.nokids .nv-row>[data-tab]{padding-right:10px}   /* v1: every child hidden by access: no chevron */
/* v1: version chip in the brand, first-load line, "can't reach" card, connection-lost corner banner (js/app.js bootLoad / connection watch) */
.brand .nm small .ver{display:inline-block;padding:0 5px;border-radius:4px;background:var(--indigo-l);color:var(--indigo);font-weight:800;letter-spacing:.02em}
.boot-load{display:flex;align-items:center;gap:10px;padding:40px 6px;color:var(--ink2);font-weight:600}
.boot-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--indigo);animation:bootspin .8s linear infinite} @keyframes bootspin{to{transform:rotate(360deg)}}
.boot-fail{max-width:680px;border-left:4px solid var(--red)} .boot-fail h3{margin-top:2px}
#netBanner{position:fixed;right:18px;bottom:18px;z-index:90;max-width:420px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:var(--red);color:var(--red-ink,#fff);padding:10px 14px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:13px}
#netBanner b{font-size:13.5px} #netBanner span{flex:1 1 100%} #netBanner .btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);color:inherit}
@media print{#netBanner{display:none}}
/* v1: tablet top bar (≤ 1180 px) — js/app.js tbOverflow moves Sign in / Dark / Export / Sync into the ⋯ menu; the title truncates instead of pushing the bar off the page */
header.top #tbMore{font-size:16px;line-height:1;padding:3px 10px} header.top #tbMore[hidden]{display:none}
.tb-menu{display:none;position:absolute;right:14px;top:calc(100% + 4px);z-index:45;flex-direction:column;align-items:stretch;gap:6px;min-width:190px;padding:8px;border-radius:10px;background:var(--topbar);border:1px solid var(--tb-btn-bd,rgba(255,255,255,.22));box-shadow:0 12px 32px rgba(0,0,0,.3)}
header.top.tb-open .tb-menu{display:flex} .tb-menu>.btn,.tb-menu .si-bar,.tb-menu .si-bar .btn{width:100%;text-align:left} .tb-menu .si-bar{display:flex;flex-direction:column;gap:6px}
@media (max-width:1180px){
  header.top{gap:8px;padding:10px 14px} header.top .sub{display:none}
  header.top h1{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:17px}
  header.top #gSearch{min-width:110px!important;flex:1 1 150px} header.top .sp{flex:0 0 0}
  @media (max-width:420px){ header.top #gSearch{min-width:0!important;flex:1 1 40px} }   /* 2026-11-04: phones — the search box no longer pushes the header past 375 px */
  header.top #whoBtn{max-width:170px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){ header.top .acc-chip{display:none} header.top #whoBtn{max-width:120px} }
/* v1: collapsed sidebar (≤ 900 px, icons only): no fold chevrons, children sit in the same icon column */
/* v1: Dawg Walk dark — primary buttons mirror light mode (ink on the page: off-white with dark text) instead of the low-contrast steel; still no red (identity only) */
:root[data-skin="dawgwalk"][data-theme="dark"] .btn.primary,:root[data-skin="dawgwalk"][data-theme="dark"] a.btn.primary{background:#F2F0ED;border-color:#F2F0ED;color:#121212}
:root[data-skin="dawgwalk"][data-theme="dark"] .btn.primary:hover,:root[data-skin="dawgwalk"][data-theme="dark"] a.btn.primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:#121212}
/* 2026-09-28 module switches (Settings → Modules, js/access.js + js/modswitch.js): an off page an admin still sees = dimmed + "hidden" tag in the sidebar */
nav.nav [data-tab].mod-dim{opacity:.5} nav.nav [data-tab].mod-dim:hover,nav.nav [data-tab].mod-dim.active{opacity:.85}
nav.nav [data-tab].mod-dim::after{content:"off";margin-left:auto;flex:none;padding:0 5px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:0;line-height:16px;background:var(--side-chip,var(--grey-l));color:var(--side-chip-ink,var(--ink2))}
nav.nav [data-tab].mod-dim:has(.n)::after{margin-left:6px} nav.nav [data-tab].mod-dim>span:not(.ic):not(.n){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-offcard h3{font-size:17px}
/* the Modules card */
.msw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 12px} .msw-bar input[type=search]{flex:0 1 240px;min-width:170px} .msw-bar .sp{flex:1}
.msw-show{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink2);cursor:pointer} .msw-show input{margin:0}
.msw-dirty{color:var(--amber-t,#8a5200);font-weight:700}
.msw-grid{column-width:240px;column-gap:10px}   /* columns, not a grid: sections pack top to bottom in sidebar order */
.msw-sec{break-inside:avoid;display:block;margin:0 0 10px;border:1px solid var(--rule);border-radius:10px;padding:6px 10px 8px;background:var(--paper2)} .msw-sec.top{padding-top:8px}
.msw-sh{display:flex;align-items:center;gap:8px;padding:2px 0 6px;margin-bottom:4px;border-bottom:1px solid var(--rule)}
.msw-sh b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)} .msw-sn{font-size:11px;color:var(--ink3)} .msw-sh .msw-sw{margin-left:auto}
.msw-row{display:flex;align-items:center;gap:8px;min-height:28px;font-size:13px} .msw-row.kid{padding-left:20px;font-size:12.5px}
.msw-row .msw-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msw-row.off .msw-l{color:var(--ink3)}
.msw-k{font-size:10.5px;color:var(--ink3);font-family:var(--mono)} .msw-lk{margin-left:auto;font-size:10.5px;color:var(--ink3);white-space:nowrap}
.msw-hid{margin-left:auto;padding:0 5px;border-radius:4px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:16px;background:var(--grey-l);color:var(--ink2)}
.msw-sw{display:inline-flex;align-items:center;gap:6px;flex:none;min-width:58px;padding:2px 0;border:0;background:none;font:inherit;font-size:11px;font-weight:700;color:var(--ink2);cursor:pointer}
.msw-sw i{position:relative;flex:none;width:30px;height:17px;border-radius:9px;background:var(--grey);transition:background .15s}
.msw-sw i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.msw-sw[aria-checked="true"] i{background:var(--green)} .msw-sw[aria-checked="true"] i::after{transform:translateX(13px)}
.msw-sw[aria-checked="mixed"] i{background:var(--amber)} .msw-sw[aria-checked="mixed"] i::after{transform:translateX(6.5px)}
.msw-sw:disabled{cursor:default;opacity:.5} .msw-sw:focus-visible{outline:2px solid var(--focus,var(--indigo));outline-offset:2px;border-radius:9px}
.msw [hidden]{display:none!important}
/* ══ R10 sidebar (G18, Sahil approved style B 2026-09-29): icon rail of two-letter groups + a flyout with the group's pages (js/navtree.js) ══
   html[data-nav="pin"] (≥ 1280 px, pinned): rail + flyout side by side · html[data-nav="rail"]: rail only, the flyout overlays the page. */
html:root[data-nav="rail"]{--side:60px} html:root[data-nav="pin"]{--side:284px}
aside.side{flex-direction:row;overflow:visible;z-index:46}   /* sticky = its own stack: above the sticky top bar (20) so the overlay and tooltips sit on top; below dialogs (60) */
aside.side .rail{flex:none;width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 12px;border-right:1px solid var(--side-rule,var(--rule));background:var(--side-bg,var(--paper))}
aside.side .rail .brand{padding:0 0 6px} aside.side .rail .brand .nm{display:none}
aside.side .rl-find,aside.side .fly-pin{display:grid;place-items:center;border:0;background:transparent;color:var(--side-muted,var(--ink2));cursor:pointer;border-radius:8px}
aside.side .rl-find{width:44px;height:34px} aside.side .rl-find svg,aside.side .fly-pin svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
aside.side .rl-find:hover,aside.side .fly-pin:hover{background:var(--side-hover,var(--hover));color:var(--side-ink,var(--ink))}
aside.side .rl-g{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding-top:4px;border-top:1px solid var(--side-rule,var(--rule))}
.rl-b{position:relative;width:44px;height:38px;flex:none;border:0;border-radius:9px;background:transparent;color:var(--side-ink,var(--ink2));font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;cursor:pointer;opacity:.82}
.rl-b:hover{background:var(--side-hover,var(--hover));opacity:1}
.rl-b.on{background:var(--side-hover,var(--hover));opacity:1;box-shadow:inset 0 0 0 1.5px var(--side-muted,var(--ink3))}
.rl-b.cur,.rl-b.cur:hover{background:var(--brand,var(--indigo));color:var(--brand-ink,#fff);opacity:1;box-shadow:none}
.rl-b:focus-visible,aside.side .rl-find:focus-visible,aside.side .fly-pin:focus-visible{outline:2px solid var(--side-ink,var(--indigo));outline-offset:1px}
.rl-dot{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--side-hot,var(--red));box-shadow:0 0 0 2px var(--side-bg,var(--paper))}
.rl-b::after{content:attr(data-name);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);z-index:75;white-space:nowrap;padding:5px 9px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;letter-spacing:0;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .1s}
.rl-b:hover::after{opacity:1;transition-delay:.25s} .rl-b:focus-visible::after{opacity:1}
aside.side.fly-open .rl-b.on::after{display:none}
aside.side .fly{display:none;flex-direction:column;width:224px;min-width:0;height:100vh;background:var(--side-bg,var(--paper));color:var(--side-ink,var(--ink))}
aside.side.fly-open .fly{display:flex}
html[data-nav="rail"] aside.side .fly{position:fixed;left:60px;top:0;bottom:0;z-index:50;border-right:1px solid var(--side-rule,var(--rule));box-shadow:10px 0 32px rgba(0,0,0,.22)}
aside.side .fly-h{display:flex;align-items:center;gap:6px;padding:17px 10px 8px 20px;min-height:52px}
aside.side .fly-h b{flex:1;min-width:0;font-size:var(--fs-16,16px);font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
aside.side .fly-pin{width:30px;height:30px} aside.side .fly-pin[aria-pressed="true"]{color:var(--side-ink,var(--ink))} aside.side .fly-pin[aria-pressed="true"] svg{fill:currentColor} aside.side .fly-pin[hidden]{display:none}
aside.side .fly nav.nav{padding:2px 10px 10px}
nav.nav [data-tab]>span:not(.ic):not(.n){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.nav .nv-sec{display:none} nav.nav .nv-sec.nv-on{display:block} nav.nav .nv-sec>.grp{display:none}   /* the flyout heading names the group */
nav.nav .nv-na{display:none!important}   /* a page whose view is not built yet */
nav.nav .nv-kids{margin:1px 0 4px;padding-left:0;border-left:0}
nav.nav .nv-kids [data-tab]{padding-left:14px;gap:8px} nav.nav .nv-kids [data-tab] .ic{display:none} nav.nav .nv-kids [data-tab]::before{content:"↳";flex:none;width:14px;opacity:.55;font-weight:500}
nav.nav .nv-par.flat>.nv-kids [data-tab]{padding-left:10px;font-size:13.5px;font-weight:600} nav.nav .nv-par.flat>.nv-kids [data-tab]::before{content:none} nav.nav .nv-par.flat>.nv-kids [data-tab] .ic{display:inline-grid;transform:none}
aside.side .side-foot{font-family:var(--font);font-size:var(--fs-11,11px)}
/* page finder (Ctrl K or /, js/navtree.js NAVFIND) */
.nf-bg{position:fixed;inset:0;z-index:85;background:var(--scrim,rgba(20,20,26,.42));display:flex;justify-content:center;align-items:flex-start;padding:11vh 16px 16px}
.nf{width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.nf-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--rule)}
.nf-in svg{width:18px;height:18px;flex:none;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round}
.nf-in input{flex:1;min-width:0;height:52px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;box-shadow:none;padding:0}
.nf kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;background:var(--paper2);color:var(--ink2);font:600 11px var(--font);text-align:center}
.nf-list{overflow-y:auto;padding:6px}
.nf-h{padding:8px 10px 4px;font-size:var(--fs-11,11px);font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.nf-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-14,14px)}
.nf-row.hi{background:var(--indigo-l);color:var(--ink)} .nf-row:hover{text-decoration:none}
.nf-ic{display:grid;place-items:center;color:var(--ink2)} .nf-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nf-ic.nf-wo{font-size:11px;font-weight:800;letter-spacing:.02em}
.nf-nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nf-g{font-size:var(--fs-12,12px);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.nf-tag{padding:0 5px;border-radius:4px;background:var(--grey-l);color:var(--ink2);font-size:11px;font-weight:700}
.nf-none{padding:22px 12px;text-align:center;color:var(--ink2);font-size:var(--fs-14,14px)}
.nf-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--rule);font-size:var(--fs-12,12px);color:var(--ink3)} .nf-foot kbd{margin-right:3px}
@media (max-width:700px){.nf-g{display:none} .nf-foot{display:none}}
@media print{.nf-bg{display:none!important}}
/* ══ 2026-09-29 menu style A (Sahil): grouped sidebar, every group listed, a group heading folds it (js/navtree.js LIST).
   html[data-nav="list"] (> 1100 px): brand + find across the top of the sidebar, groups below · html[data-nav="listnarrow"]: a 60 px strip with a
   Menu button; the same grouped list opens over the page. ══ */
html:root[data-nav="list"]{--side:244px} html:root[data-nav="listnarrow"]{--side:60px}
html[data-nav="list"] aside.side{flex-direction:column}
html[data-nav="list"] aside.side .rail{width:auto;flex-direction:row;align-items:center;gap:8px;padding:14px 12px 10px 16px;border-right:0}
html[data-nav="list"] aside.side .rail .brand{padding:0;flex:1;min-width:0} html[data-nav="list"] aside.side .rail .brand .nm{display:block}
html[data-nav="list"] aside.side .rl-g{display:none}
html[data-nav="list"] aside.side .fly{display:flex;width:auto;flex:1;min-height:0;height:auto}
html[data-nav="list"] aside.side .fly-h,html[data-nav="listnarrow"] aside.side .fly-h{display:none}
html[data-nav="list"] aside.side .fly nav.nav,html[data-nav="listnarrow"] aside.side .fly nav.nav{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 10px}
html[data-nav="listnarrow"] aside.side .fly{position:fixed;left:60px;top:0;bottom:0;z-index:50;width:260px;border-right:1px solid var(--side-rule,var(--rule));box-shadow:10px 0 32px rgba(0,0,0,.22)}
html[data-nav="listnarrow"] aside.side .fly-open .fly,html[data-nav="listnarrow"] aside.side.fly-open .fly{display:flex}
html[data-nav^="list"] nav.nav .nv-sec{display:none} html[data-nav^="list"] nav.nav .nv-sec.nv-on{display:block;margin:0 0 2px}
html[data-nav^="list"] nav.nav .nv-sec>.grp{display:flex;align-items:center;gap:6px;margin:8px 0 2px;padding:5px 8px;border-radius:6px;cursor:pointer;user-select:none;
  font-size:var(--fs-11,11px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--side-muted,var(--ink3))}
html[data-nav^="list"] nav.nav .nv-sec>.grp::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .15s;opacity:.7}
html[data-nav^="list"] nav.nav .nv-sec.nv-shut>.grp::after{transform:rotate(-45deg)}
html[data-nav^="list"] nav.nav .nv-sec>.grp:hover{background:var(--side-hover,var(--hover));color:var(--side-ink,var(--ink))}
html[data-nav^="list"] nav.nav .nv-sec>.grp:focus-visible{outline:2px solid var(--side-ink,var(--indigo));outline-offset:1px}
html[data-nav^="list"] nav.nav .nv-sec[data-g="home"]>.grp{display:none}
html[data-nav^="list"] nav.nav .nv-sec.nv-shut>:not(.grp){display:none}
html[data-nav="listnarrow"] .rl-menu svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* ── R11 (A3): Late & at-risk view tabs (js/late.js) — scoped to .lt-page ── */
.lt-page .lt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:2px 0 10px;overflow-x:auto;scrollbar-width:none}
.lt-page .lt-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--ink2);font:inherit;font-size:var(--fs-13);font-weight:600;white-space:nowrap;cursor:pointer;border-radius:6px 6px 0 0}
.lt-page .lt-tab:hover{background:var(--hover);color:var(--ink)}
.lt-page .lt-tab.on{color:var(--indigo);border-bottom-color:var(--indigo)}
:root[data-skin="dawgwalk"] .lt-page .lt-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.lt-page .lt-tab:focus-visible{outline:2px solid var(--focus,var(--indigo));outline-offset:-2px}
.lt-page .lt-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lt-page .sp{flex:1}
.lt-page .lt-gh{font-size:var(--fs-12);color:var(--ink2);font-weight:500;white-space:nowrap}
.lt-page .lt-wc{font-size:var(--fs-12);white-space:nowrap;color:var(--ink2)} .lt-page .lt-wc.run{color:var(--green);font-weight:600}
.lt-page .lt-wc.run:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px;vertical-align:1px}
.lt-page .lt-legend{display:inline-flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-12);color:var(--ink2)} .lt-page .lt-legend>span{display:inline-flex;align-items:center;gap:5px}
.lt-page .lt-k{display:inline-block;width:12px;height:10px;border-radius:3px;background:var(--grey)}
.lt-page .lt-k.late,.lt-page .lt-k.over{background:var(--red)} .lt-page .lt-k.risk{background:var(--amber)} .lt-page .lt-k.bar{background:var(--ink3);opacity:.55}
.lt-page .lt-k.due{width:10px;height:10px;border-radius:1px;background:var(--ink);transform:rotate(45deg) scale(.8)} .lt-page .lt-k.pr{width:3px;height:12px;border-radius:2px;background:var(--ink)}
.lt-page .lt-note{margin-top:8px;padding:0 14px} .lt-page .lt-more{text-align:center;padding:10px 0 2px}
/* By work center: bottleneck strip */
.lt-page .lt-bn{padding:12px 14px;margin:0 0 10px}
.lt-page .lt-bn-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px} .lt-page .lt-bn-h .btn{margin-left:auto}
.lt-page .lt-bn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:2px 18px}
.lt-page .lt-bn-r{display:grid;grid-template-columns:minmax(120px,170px) 1fr 62px 108px;align-items:center;gap:8px;padding:4px 6px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:var(--fs-13);text-align:left;cursor:pointer}
.lt-page .lt-bn-r:hover{background:var(--hover)} .lt-page .lt-bn-r.on{background:var(--indigo-l)}
.lt-page .lt-bn-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lt-page .lt-bn-n .pill{margin-left:4px}
.lt-page .lt-bn-t{height:10px;background:var(--bg2);border-radius:5px;overflow:hidden} .lt-page .lt-bn-b{display:block;height:100%;background:var(--amber);border-radius:5px}
.lt-page .lt-bn-r.top .lt-bn-b{background:var(--red)}
.lt-page .lt-bn-v{text-align:right;font-variant-numeric:tabular-nums} .lt-page .lt-bn-s{font-size:var(--fs-12);color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Timeline */
.lt-page .lt-tl{padding:10px 0 12px;margin:0}
.lt-page .lt-tl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px 10px;border-bottom:1px solid var(--rule)}
.lt-page .lt-tl-g{position:relative;max-height:calc(100vh - 300px);overflow-y:auto}
.lt-page .lt-tl-r{display:grid;grid-template-columns:230px 1fr;align-items:center;min-height:34px;border-bottom:1px solid var(--rule2);cursor:pointer}
.lt-page .lt-tl-r:hover{background:var(--hover)} .lt-page .lt-tl-r.dim{opacity:.6}
.lt-page .lt-tl-head{position:sticky;top:0;z-index:3;background:var(--paper);min-height:28px;cursor:default;border-bottom:1px solid var(--rule)} .lt-page .lt-tl-head:hover{background:var(--paper)}
.lt-page .lt-tl-l{padding:3px 10px 3px 14px;min-width:0;line-height:1.25} .lt-page .lt-tl-l b{display:block;font-size:var(--fs-13);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-page .lt-tl-l .sub{display:block;font-size:var(--fs-11);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-page .lt-tl-t{position:relative;height:34px;margin-right:18px}
.lt-page .lt-tl-head .lt-tl-t{height:28px}
.lt-page .lt-tl-tick{position:absolute;top:7px;font-size:var(--fs-11);color:var(--ink3);white-space:nowrap;padding-left:4px;border-left:1px solid var(--rule);height:21px}
.lt-page .lt-tl-today{position:absolute;top:0;bottom:0;border-left:2px solid var(--indigo)} .lt-page .lt-tl-today span{position:absolute;top:6px;left:4px;font-size:var(--fs-11);font-weight:700;color:var(--indigo);background:var(--paper);padding:0 3px}
.lt-page .lt-tl-tn{position:absolute;top:0;bottom:0;border-left:1px dashed var(--indigo);opacity:.45;pointer-events:none}
.lt-page .lt-tl-b{position:absolute;top:13px;height:8px;border-radius:4px 0 0 4px;background:var(--ink3);opacity:.5}
.lt-page .lt-tl-b.risk{background:var(--amber);opacity:.8;border-radius:4px}
.lt-page .lt-tl-over{position:absolute;top:13px;height:8px;background:var(--red);border-radius:0 4px 4px 0;opacity:.85}
.lt-page .lt-tl-due{position:absolute;top:10px;width:9px;height:9px;margin-left:-6px;background:var(--ink);transform:rotate(45deg);border:2px solid var(--paper)}
.lt-page .lt-tl-due.stale{background:var(--red)}
.lt-page .lt-tl-duel{position:absolute;left:0;top:9px;font-size:var(--fs-11);line-height:16px;color:var(--ink3);white-space:nowrap;pointer-events:none;z-index:1;background:var(--paper);padding-right:4px;border-radius:0 4px 4px 0} .lt-page .lt-tl-r:hover .lt-tl-duel{background:var(--hover)} .lt-page .lt-tl-duel.stale{color:var(--red)}
.lt-page .lt-tl-pr{position:absolute;top:9px;width:3px;height:16px;margin-left:-1px;border-radius:2px;background:var(--ink)}
.lt-page .lt-tl-due.out-l,.lt-page .lt-tl-pr.out-l,.lt-page .lt-tl-due.out-r,.lt-page .lt-tl-pr.out-r{opacity:.45}
.lt-page .lt-tl-tag{position:absolute;top:9px;margin-left:8px;font-size:var(--fs-11);font-weight:700;white-space:nowrap;line-height:16px;color:var(--ink2);pointer-events:none}
.lt-page .lt-tl-tag.late{color:var(--red)} .lt-page .lt-tl-tag.left{transform:translateX(calc(-100% - 16px));background:var(--paper);padding:0 5px;border-radius:4px;box-shadow:var(--sh)}
/* Cards by risk */
.lt-page .lt-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.lt-page .lt-lane{background:var(--bg2);border-radius:12px;padding:0 8px 8px;min-width:0}
.lt-page .lt-lane header{display:flex;align-items:center;gap:8px;padding:10px 6px 8px;background:var(--bg2);border-radius:12px 12px 0 0}
.lt-page .lt-lane-dot{width:10px;height:10px;border-radius:3px;background:var(--grey)} .lt-page .lt-lane.late .lt-lane-dot{background:var(--red)} .lt-page .lt-lane.risk .lt-lane-dot{background:var(--amber)} .lt-page .lt-lane.watch .lt-lane-dot{background:var(--blue)}
.lt-page .lt-lane-n{font-size:var(--fs-12);font-weight:700;color:var(--ink2);background:var(--paper);border-radius:999px;padding:1px 8px}
.lt-page .lt-lane-b{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 290px);overflow-y:auto;padding:2px}
.lt-page .lt-lane-e{padding:10px 6px} .lt-page .lt-lane-more{align-self:center}
.lt-page .lt-card{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;padding:9px 10px 9px 12px;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--grey);border-radius:8px;color:var(--ink);font:inherit;font-size:var(--fs-13);cursor:pointer;box-shadow:var(--sh)}
.lt-page .lt-card:hover{border-color:var(--indigo)} .lt-page .lt-card.late{border-left-color:var(--red)} .lt-page .lt-card.risk{border-left-color:var(--amber)} .lt-page .lt-card.watch{border-left-color:var(--blue)} .lt-page .lt-card.dim{opacity:.65}
.lt-page .lt-card-h{display:flex;gap:8px;align-items:baseline} .lt-page .lt-card-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-page .lt-card-s{font-size:var(--fs-12);font-weight:700;white-space:nowrap;color:var(--ink2)} .lt-page .lt-card.late .lt-card-s{color:var(--red)}
.lt-page .lt-card-c{font-size:var(--fs-12);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-page .lt-card-d{display:flex;gap:12px;font-size:var(--fs-12);color:var(--ink2)} .lt-page .lt-card-d b{color:var(--ink);font-weight:600}
.lt-page .lt-card-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-12)} .lt-page .lt-card-v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
/* Chart */
.lt-page .lt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 10px}
.lt-page .lt-ch-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.lt-page .lt-charts{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}
.lt-page .lt-ch{margin:0;padding:12px 14px} .lt-page .lt-ch-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lt-page .lt-cols{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:260px;align-items:end;border-bottom:1px solid var(--rule);padding-top:18px}
.lt-page .lt-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;cursor:default;padding-bottom:30px}
.lt-page .lt-col:hover{background:var(--hover);border-radius:6px 6px 0 0}
.lt-page .lt-col-stack{display:flex;flex-direction:column;gap:2px;width:min(70%,34px);min-height:0}
.lt-page .lt-col-stack i{display:block;min-height:2px;background:var(--grey)} .lt-page .lt-col-stack i:first-child{border-radius:4px 4px 0 0}
.lt-page .lt-col-stack i.late{background:var(--red)} .lt-page .lt-col-stack i.risk{background:var(--amber)}
.lt-page .lt-col-v{font-size:var(--fs-11);font-weight:600;color:var(--ink2);margin-bottom:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lt-page .lt-col-l{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:var(--fs-11);color:var(--ink3);white-space:nowrap;line-height:1.15} .lt-page .lt-col-l.now{color:var(--indigo);font-weight:700}
.lt-page .lt-hbs{display:flex;flex-direction:column;gap:6px}
.lt-page .lt-hb{display:grid;grid-template-columns:minmax(90px,40%) 1fr 58px;gap:8px;align-items:center;font-size:var(--fs-12);padding:2px 4px;border-radius:6px}
.lt-page .lt-hb:hover{background:var(--hover)}
.lt-page .lt-hb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .lt-page .lt-hb-v{text-align:right;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.lt-page .lt-hb-t{height:14px} .lt-page .lt-hb-s{display:flex;gap:2px;height:100%;min-width:3px}
.lt-page .lt-hb-s i{display:block;min-width:2px;background:var(--grey)} .lt-page .lt-hb-s i:last-child{border-radius:0 4px 4px 0}
.lt-page .lt-hb-s i.late{background:var(--red)} .lt-page .lt-hb-s i.risk{background:var(--amber)}
.lt-page .lt-body{position:relative}
.lt-page .lt-tip{position:absolute;z-index:20;max-width:230px;padding:7px 9px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:var(--fs-12);line-height:1.4;white-space:pre-line;pointer-events:none;box-shadow:var(--sh)}
@media (max-width:1100px){.lt-page .lt-lanes{grid-template-columns:repeat(2,minmax(0,1fr))} .lt-page .lt-charts{grid-template-columns:1fr} .lt-page .lt-bn-list{grid-template-columns:1fr} .lt-page .lt-tl-r{grid-template-columns:180px 1fr}}
@media (max-width:760px){.lt-page .lt-lanes{grid-template-columns:1fr} .lt-page .lt-bn-r{grid-template-columns:110px 1fr 54px} .lt-page .lt-bn-s{display:none} .lt-page .lt-tl-r{grid-template-columns:130px 1fr} .lt-page .lt-cols{gap:1px}}