/* ============================================================================
   Nuvonic · Engineering Order Flow — styles
   Base palette + component classes copied VERBATIM from the mockup
   (mockup_decoded.html lines 307-498) so the live board is visually
   indistinguishable from the design. Additions for modals / toasts /
   role-selector / connection-state / wall-mode follow the mockup section.
   ============================================================================ */

:root{
  --bg:#0a0d13;--panel:#121823;--panel-2:#171f2d;--line:#232d3d;--line-soft:#1b2330;
  --ink:#e8edf5;--ink-dim:#8995a8;--ink-faint:#5a6678;
  --brand:#37e0d8;--ok:#34d399;--watch:#f5b942;--crit:#ff5d5d;--blocked:#7e8db0;--rush:#c084fc;
  --d-e:#f5b942;--d-m:#37e0d8;--d-c:#c084fc;--d-a:#5fa8ff;--d-p:#5fd38a;
  --radius:10px;--mono:"JetBrains Mono",ui-monospace,monospace;--sans:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);min-height:100vh;letter-spacing:.01em;
  background:radial-gradient(1200px 700px at 80% -10%,rgba(55,224,216,.06),transparent 60%),
    radial-gradient(900px 600px at 0% 110%,rgba(192,132,252,.05),transparent 55%),var(--bg);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;}
.wrap{position:relative;z-index:1;max-width:1640px;margin:0 auto;padding:22px 26px 60px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#1f9c98);display:grid;place-items:center;font-weight:800;color:#04201f;font-size:20px;box-shadow:0 0 24px rgba(55,224,216,.35)}
.brand h1{font-size:18px;font-weight:700}
.brand .sub{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.22em;font-weight:600}
.live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--brand)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
.clock{font-family:var(--mono);font-size:14px;color:var(--ink-dim)}

.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;flex-wrap:wrap}
.tab{border:0;background:transparent;color:var(--ink-dim);font-family:var(--sans);font-weight:600;font-size:13px;padding:9px 15px;border-radius:8px;cursor:pointer;transition:.18s}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.view{display:none;animation:fade .4s ease both}
.view.active{display:block}

.alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.alert{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden}
.alert .num{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1}
.alert .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-dim);font-weight:600;margin-top:7px}
.alert .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.alert.crit .bar{background:var(--crit)} .alert.crit .num{color:var(--crit)}
.alert.watch .bar{background:var(--watch)} .alert.watch .num{color:var(--watch)}
.alert.blocked .bar{background:var(--blocked)} .alert.blocked .num{color:var(--blocked)}
.alert.crit.flash{animation:flash 1.6s infinite}

/* inbox / classification strip */
.inbox{background:var(--panel);border:1px solid var(--watch);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.inbox .ttl{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--watch);font-weight:700;display:flex;align-items:center;gap:7px}
.inbox .ttl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--watch);animation:pulse-w 2s infinite}
.ichip{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:7px 11px;display:flex;align-items:center;gap:9px}
.ichip.over{border-color:var(--crit)}
.ichip .iid{font-family:var(--mono);font-size:12px;font-weight:700}
.ichip .icu{font-size:11px;color:var(--ink-dim)}
.ichip .iw{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.ichip.over .iw{color:var(--crit)}
.ichip .cls{font-size:9.5px;font-weight:700;background:var(--brand);color:#04201f;border-radius:5px;padding:3px 7px}

/* swim lanes */
.lanes-scroll{overflow-x:auto;padding-bottom:6px}
.lanes{min-width:1180px}
.colhead{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:8px}
.colhead .ch{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-dim);text-align:center;padding:6px 4px;text-transform:uppercase}
.lane{margin-bottom:14px;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:rgba(18,24,35,.5)}
.lane-head{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
.tier-badge{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.t1{background:rgba(52,211,153,.15);color:var(--ok)} .t2{background:rgba(95,168,255,.15);color:var(--d-a)} .t3{background:rgba(192,132,252,.15);color:var(--rush)}
.lane-head .nm{font-size:13px;font-weight:700}
.lane-head .sla{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.lane-head .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.lane-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:8px}
.cell{min-height:64px;border-radius:7px;display:flex;flex-direction:column;gap:6px;padding:5px}
.cell.off{background:repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(35,45,61,.25) 7px,rgba(35,45,61,.25) 14px)}

.card{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:7px 8px;border-left:3px solid var(--ok);transition:.15s}
.card:hover{border-color:var(--brand);transform:translateY(-1px)}
.card.watch{border-left-color:var(--watch)} .card.crit{border-left-color:var(--crit)}
.card.blocked{border-left-color:var(--blocked);background:repeating-linear-gradient(135deg,var(--panel-2),var(--panel-2) 8px,#141b27 8px,#141b27 16px)}
.card .id{font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.card .cust{font-size:10px;color:var(--ink-dim);margin:2px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:3px;margin-bottom:5px}
.chip{width:17px;height:17px;border-radius:4px;font-size:9px;font-weight:700;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-faint);position:relative}
.chip.on{color:#06121f}
.chip.e.on{background:var(--d-e)} .chip.m.on{background:var(--d-m)} .chip.c.on{background:var(--d-c)} .chip.a.on{background:var(--d-a)} .chip.p.on{background:var(--d-p)}
.chip.alert::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--crit);border:1.5px solid var(--panel-2)}
.chip.warn::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--watch);border:1.5px solid var(--panel-2)}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:5px}
.card .who{font-size:9.5px;font-weight:600;color:var(--ink-faint)}
.card .who.unalloc{color:var(--crit)}
.card .timer{font-family:var(--mono);font-size:9.5px;color:var(--ink-dim)}
.due{margin-top:5px;font-family:var(--mono);font-size:9px;font-weight:700;display:flex;align-items:center;gap:4px;border-top:1px dashed var(--line);padding-top:4px}
.due.risk{color:var(--crit)} .due.tight{color:var(--watch)}
.pill{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 5px;border-radius:4px}
.pill.rush{background:rgba(192,132,252,.15);color:var(--rush)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px}
.kpi .v{font-family:var(--mono);font-size:23px;font-weight:700}
.kpi .v small{font-size:13px;color:var(--ink-dim)}
.kpi .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);font-weight:600;margin-top:6px}

/* targets */
.section-intro{font-size:12.5px;color:var(--ink-dim);margin:18px 0 14px;line-height:1.6;max-width:760px}
.trow{display:grid;grid-template-columns:54px 1fr 230px 130px;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:9px;border-left:3px solid var(--line);cursor:pointer}
.trow.risk{border-left-color:var(--crit)} .trow.tight{border-left-color:var(--watch)} .trow.ok{border-left-color:var(--ok)}
.trow:hover{border-color:var(--brand)}
.trow .oid{font-family:var(--mono);font-size:12px;font-weight:700}
.trow .ocu{font-size:13px;font-weight:600} .trow .osub{font-size:11px;color:var(--ink-faint);margin-top:2px}
.ttrack{height:8px;background:var(--line);border-radius:5px;position:relative;margin-top:4px}
.ttrack .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.ttrack .promise{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.ttrack .promise::after{content:"promise";position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--ink-dim);font-family:var(--mono);white-space:nowrap}
.tdates{font-family:var(--mono);font-size:10px;color:var(--ink-faint);display:flex;justify-content:space-between;margin-top:8px}
.slack{text-align:right} .slack .s{font-family:var(--mono);font-size:18px;font-weight:700} .slack .sl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.slack.risk .s{color:var(--crit)} .slack.tight .s{color:var(--watch)} .slack.ok .s{color:var(--ok)}

/* submittals */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.scard .n{font-family:var(--mono);font-size:26px;font-weight:700} .scard.hot .n{color:var(--crit)} .scard.our .n{color:var(--watch)}
.scard .l{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);font-weight:600;margin-top:6px}
.stable{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shead,.srow{display:grid;grid-template-columns:130px 1fr 70px 80px 1fr 120px;gap:12px;align-items:center;padding:11px 16px}
.shead{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:700;border-bottom:1px solid var(--line)}
.srow{border-bottom:1px solid var(--line-soft);font-size:12px}
.srow:last-child{border-bottom:0}
.srow .spkg{font-weight:600} .srow .sproj{font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.srev{font-family:var(--mono);font-size:11px} .srev.high{color:var(--watch);font-weight:700}
.sstat{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;display:inline-block}
.st-rev{background:rgba(126,141,176,.16);color:var(--blocked)}
.st-rev.late{background:rgba(255,93,93,.16);color:var(--crit)}
.st-rework{background:rgba(245,185,66,.16);color:var(--watch)}
.st-draft{background:rgba(137,149,168,.14);color:var(--ink-dim)}
.st-done{background:rgba(52,211,153,.16);color:var(--ok)}
.court{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.c-us{background:rgba(245,185,66,.14);color:var(--watch)} .c-rev{background:rgba(95,168,255,.14);color:var(--d-a)} .c-done{background:rgba(52,211,153,.14);color:var(--ok)}
.sage{font-family:var(--mono);font-size:11px} .sage.late{color:var(--crit);font-weight:700}

/* disciplines */
.disc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.disc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;border-top:3px solid var(--line)}
.disc-card.e{border-top-color:var(--d-e)} .disc-card.m{border-top-color:var(--d-m)} .disc-card.c{border-top-color:var(--d-c)} .disc-card.a{border-top-color:var(--d-a)} .disc-card.p{border-top-color:var(--d-p)}
.disc-card h3{font-size:15px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.disc-card h3 .tag{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-left:auto;font-weight:500}
.disc-stats{display:flex;gap:22px;margin-bottom:16px}
.disc-stats div .n{font-family:var(--mono);font-size:22px;font-weight:700}
.disc-stats div .l{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);margin-top:3px}
.disc-stats .hot .n{color:var(--crit)}
.eng-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.eng-row:last-child{border-bottom:0}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;font-weight:700;font-size:11px;border:1px solid var(--line);flex-shrink:0}
.eng-info{flex:1;min-width:0} .eng-info .nm{font-size:13px;font-weight:600}
.cap{width:120px;flex-shrink:0}
.cap .track{height:6px;background:var(--line);border-radius:5px;overflow:hidden} .cap .fill{height:100%}
.cap .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ink-dim);margin-top:4px}
.status{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;flex-shrink:0;width:76px;text-align:center}
.s-active{background:rgba(52,211,153,.14);color:var(--ok)} .s-full{background:rgba(245,185,66,.14);color:var(--watch)} .s-over{background:rgba(255,93,93,.14);color:var(--crit)} .s-leave{background:rgba(126,141,176,.16);color:var(--blocked)}

/* order detail */
.eng-grid{display:grid;grid-template-columns:1fr .95fr;gap:18px;margin-top:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim);font-weight:700;margin-bottom:16px}
.detail .id{font-family:var(--mono);font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.detail .cu{color:var(--ink-dim);font-size:13px;margin:4px 0 16px}
.target-box{background:var(--panel-2);border:1px solid var(--crit);border-radius:8px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.target-box.ok{border-color:var(--ok)} .target-box.tight{border-color:var(--watch)}
.target-box .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}
.target-box .v{font-family:var(--mono);font-size:13px;font-weight:700;margin-top:3px}
.target-box .big{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--crit)}
.target-box.ok .big{color:var(--ok)} .target-box.tight .big{color:var(--watch)}
.dmatrix{display:flex;flex-direction:column;gap:7px}
.drow{display:grid;grid-template-columns:96px 1fr 78px;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;border-left:3px solid var(--line)}
.drow.ok{border-left-color:var(--ok)} .drow.watch{border-left-color:var(--watch)} .drow.crit{border-left-color:var(--crit)} .drow.blocked{border-left-color:var(--blocked)} .drow.off{opacity:.45}
.drow .dn{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.ddot{width:9px;height:9px;border-radius:3px}
.drow .ds{font-family:var(--mono);font-size:11px;color:var(--ink-dim)} .drow .dw{font-size:11px;color:var(--ink-faint);text-align:right}
.btn{margin-top:18px;width:100%;border:0;background:var(--brand);color:#04201f;font-family:var(--sans);font-weight:700;font-size:13px;padding:11px;border-radius:8px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}

/* workflow */
.flow{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.tier-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.tier-row .th{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tier-row .th .sla{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-left:auto}
.pathline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.step{font-size:11px;padding:5px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font-weight:600}
.step.skip{opacity:.3;text-decoration:line-through} .step.cls{background:rgba(245,185,66,.14);border-color:var(--watch);color:var(--watch)}
.arrow{color:var(--ink-faint);font-size:13px}
.flow-note{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.flow-note h4{font-size:13px;margin-bottom:8px;color:var(--brand)}
.flow-note p{font-size:13px;color:var(--ink-dim);line-height:1.6}
.flow-note .tag{font-family:var(--mono);font-size:12px;color:var(--ink)}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(55,224,216,.6)}70%{box-shadow:0 0 0 9px rgba(55,224,216,0)}100%{box-shadow:0 0 0 0 rgba(55,224,216,0)}}
@keyframes pulse-w{0%{box-shadow:0 0 0 0 rgba(245,185,66,.6)}70%{box-shadow:0 0 0 7px rgba(245,185,66,0)}100%{box-shadow:0 0 0 0 rgba(245,185,66,0)}}
@keyframes flash{0%,100%{box-shadow:0 0 0 1px var(--line)}50%{box-shadow:0 0 0 1px var(--crit),0 0 20px rgba(255,93,93,.25)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.kpis,.disc-grid{grid-template-columns:1fr 1fr}.eng-grid{grid-template-columns:1fr}.trow{grid-template-columns:1fr;gap:8px}.shead{display:none}.srow{grid-template-columns:1fr 1fr;gap:8px}}

/* ============================================================================
   ADDITIONS — interactivity the mockup did not need: connection state,
   role selector, desk action buttons, modals, toasts, empty states.
   All reuse the mockup palette so they remain visually consistent.
   ============================================================================ */

/* connection state next to the LIVE dot */
.live.disconnected{color:var(--crit)}
.live.disconnected .dot{background:var(--crit);animation:none;box-shadow:0 0 0 0 transparent}
.live .state{color:var(--ink-faint);font-size:11px}

/* topbar controls cluster (role selector + new order button) */
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.role-select{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.role-select select{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;text-transform:none;letter-spacing:0}
.role-select select:focus{outline:none;border-color:var(--brand)}
.btn-new{border:0;background:var(--brand);color:#04201f;font-family:var(--sans);font-weight:700;font-size:12px;padding:9px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
.btn-new:hover{filter:brightness(1.1)}

/* wall mode hides desk-only chrome */
body.mode-wall .desk-only{display:none !important}

/* auth control (topbar) + role pills */
.auth-control{display:flex;align-items:center;gap:10px}
.who-badge{display:flex;align-items:center;gap:8px}
.who-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.role-pill{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.role-pill.engineer{background:rgba(137,149,168,.16);color:var(--ink-dim)}
.role-pill.lead{background:rgba(95,168,255,.16);color:var(--d-a)}
.role-pill.manager{background:rgba(55,224,216,.16);color:var(--brand)}

/* the Admin tab shows only for a signed-in manager (desk-only already hides it on the wall) */
.admin-only{display:none}
body.is-manager .admin-only{display:inline-block}

/* admin / people page */
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.admin-head h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);font-weight:700}
.admin-list{display:flex;flex-direction:column}
.urow{display:grid;grid-template-columns:36px 1.4fr 90px 1fr 1fr auto;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.urow:last-child{border-bottom:0}
.urow.inactive{opacity:.5}
.uavatar{width:34px;height:34px;border-radius:9px;background:var(--panel-2);display:grid;place-items:center;font-weight:700;font-size:11px;border:1px solid var(--line)}
.uinfo .unm{font-size:13px;font-weight:600}
.uinfo .uun{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.udisc{display:flex;gap:4px;flex-wrap:wrap}
.umeta{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.uacts{display:flex;gap:6px;justify-content:flex-end}
.uacts .mini{border:1px solid var(--line);background:var(--bg);color:var(--ink-dim);font-size:10px;font-weight:700;padding:4px 9px;border-radius:5px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.uacts .mini:hover{color:var(--ink);border-color:var(--brand)}
.uacts .mini.rm:hover{color:var(--crit);border-color:var(--crit)}
.uacts .mini.add{color:var(--brand);border-color:var(--brand)}
.admin-note{font-size:11.5px;color:var(--ink-faint);line-height:1.6;margin-top:16px;max-width:760px}
.muted{color:var(--ink-faint)}

/* reports / analytics */
.report-controls{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.segbtn{border:0;background:transparent;color:var(--ink-dim);font-family:var(--sans);font-weight:600;font-size:12px;padding:6px 12px;border-radius:7px;cursor:pointer;transition:.15s}
.segbtn:hover{color:var(--ink)}
.segbtn.active{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.report-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);font-weight:700;margin-bottom:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rp-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--ink-faint);font-weight:500}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .ylab,.chart .xlab{fill:var(--ink-faint);font-family:var(--mono);font-size:9px}
.chart .dot{fill:var(--bg);stroke:var(--brand);stroke-width:1.5}
/* cycle-time horizontal bars */
.ct-rows{display:flex;flex-direction:column;gap:7px}
.ct-row{display:grid;grid-template-columns:138px 1fr 92px;align-items:center;gap:10px}
.ct-name{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap}
.ct-name .tier-badge{font-size:9px;padding:1px 5px}
.ct-bar{height:9px;background:var(--line);border-radius:5px;overflow:hidden}
.ct-fill{height:100%;border-radius:5px}
.ct-val{font-family:var(--mono);font-size:11px;font-weight:700;text-align:right}
.ct-val .ct-n{color:var(--ink-faint);font-weight:400;font-size:9.5px}
@media(max-width:1100px){.report-grid{grid-template-columns:1fr}}

/* global activity feed */
.act-search{flex:1;min-width:180px;font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.act-search:focus{outline:none;border-color:var(--brand)}
.timeline.feed{max-height:none}
.feed-day{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);font-weight:700;margin:14px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.feed-day:first-child{margin-top:0}
.feed-order{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--brand);text-decoration:none;cursor:pointer}
.feed-order:hover{text-decoration:underline}
@media(max-width:900px){.urow{grid-template-columns:36px 1fr auto;gap:10px}.urow .udisc,.urow .umeta{display:none}}

/* small inline desk action buttons (order detail discipline rows + footer) */
.act-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.act{border:1px solid var(--line);background:var(--panel-2);color:var(--ink-dim);font-family:var(--sans);font-weight:600;font-size:11px;padding:6px 11px;border-radius:7px;cursor:pointer;transition:.15s}
.act:hover{color:var(--ink);border-color:var(--brand)}
.act.primary{background:var(--brand);color:#04201f;border-color:var(--brand)}
.act.danger:hover{border-color:var(--crit);color:var(--crit)}
.drow .dacts{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.drow .mini{border:1px solid var(--line);background:var(--bg);color:var(--ink-dim);font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.drow .mini:hover{color:var(--ink);border-color:var(--brand)}
.drow .mini.rm:hover{color:var(--crit);border-color:var(--crit)}
.drow .mini.add{color:var(--brand);border-color:var(--brand)}
.drow .mini-lock{font-size:10px;font-weight:700;color:var(--d-p);border:1px solid var(--d-p);border-radius:5px;padding:3px 7px;white-space:nowrap;opacity:.85;align-self:center}
.nuvo-opt.locked span{color:var(--d-p)}
/* order-detail discipline rows: give the action cluster room to wrap */
.dmatrix .drow.has-acts{grid-template-columns:120px 1fr auto}
.dmatrix .drow.off{grid-template-columns:120px 1fr auto}
.dmatrix .dacts{max-width:360px}

/* tier switcher (move between Express / Configured / Project) */
.tier-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 16px}
.tier-switch .tsl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);font-weight:700}
.tierbtn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink-dim);font-family:var(--sans);font-weight:700;font-size:11px;padding:6px 11px;border-radius:7px;cursor:pointer;transition:.15s}
.tierbtn:hover:not(.active){color:var(--ink);border-color:var(--brand)}
.tierbtn.active{background:var(--brand);color:#04201f;border-color:var(--brand);cursor:default}

/* activity log + comments */
.activity-panel{margin-top:18px}
.comment-box{display:flex;gap:8px;margin-bottom:16px}
.comment-box input{flex:1;font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.comment-box input:focus{outline:none;border-color:var(--brand)}
.timeline{display:flex;flex-direction:column;gap:0;max-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tl-item{display:grid;grid-template-columns:14px 1fr;gap:12px;padding:9px 2px;position:relative}
.tl-item::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line-soft)}
.tl-item:first-child::before{top:14px} .tl-item:last-child::before{bottom:calc(100% - 14px)}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);margin-top:5px;z-index:1;border:2px solid var(--panel)}
.tl-item.comment .tl-dot{background:var(--brand)}
.tl-text{font-size:12.5px;color:var(--ink);line-height:1.5}
.tl-item.comment .tl-text{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:8px;padding:9px 12px;color:var(--ink)}
.tl-meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:3px}

/* empty-state placeholder */
.empty{color:var(--ink-faint);font-size:13px;padding:26px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius)}

/* modal overlay (actions.js may build its own; these are shared utility styles) */
.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(4,8,14,.66);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s ease both}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;width:100%;max-width:440px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal h3{font-size:15px;font-weight:700;margin-bottom:16px}
.modal label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);font-weight:600;margin:12px 0 6px}
.modal input,.modal select,.modal textarea{width:100%;font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--brand)}
.modal .checks{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.modal .checks label{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);margin:0}
.modal .checks input{width:auto}
.modal .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.modal .modal-actions button{font-family:var(--sans);font-weight:700;font-size:13px;padding:10px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--line)}
.modal .modal-actions .ghost{background:transparent;color:var(--ink-dim)}
.modal .modal-actions .ghost:hover{color:var(--ink)}
.modal .modal-actions .go{background:var(--brand);color:#04201f;border-color:var(--brand)}

/* toast stack (top-right) */
.toast-stack{position:fixed;top:18px;right:18px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:9px;padding:12px 15px;font-size:13px;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.4);animation:fade .25s ease both}
.toast.error{border-left-color:var(--crit)}
.toast.success{border-left-color:var(--ok)}
.toast.info{border-left-color:var(--brand)}

/* ============================================================================
   WALL MODE — fixed 16:9 (1920x1080) kiosk canvas, uniformly scaled to fill the
   screen. The board is designed once at 1080p; app.js sets
   --wall-scale = min(vw/1920, vh/1080) so the whole thing scales together and
   fills a 16:9 TV at ANY resolution (×2 on a 4K panel) instead of capping out
   with empty space. Non-16:9 screens letterbox (centered) instead of distorting.
   ============================================================================ */
body.mode-wall{overflow:hidden}
body.mode-wall::before{background-size:64px 64px}
body.mode-wall .wrap{
  position:fixed;left:50%;top:50%;
  width:1920px;height:1080px;max-width:none;margin:0;
  transform:translate(-50%,-50%) scale(var(--wall-scale,1));
  transform-origin:center center;
  padding:24px 32px;display:flex;flex-direction:column;gap:14px;
}

/* topbar */
body.mode-wall .topbar{margin:0;flex:0 0 auto;flex-wrap:nowrap}
body.mode-wall .logo{width:54px;height:54px;font-size:27px;border-radius:12px}
body.mode-wall .brand h1{font-size:30px}
body.mode-wall .brand .sub{font-size:13px}
body.mode-wall .live{font-size:18px;gap:10px}
body.mode-wall .live .dot{width:13px;height:13px}
body.mode-wall .clock{font-size:24px}

/* hide tab bar + desk intros on the wall */
body.mode-wall .tabs{display:none}
body.mode-wall .section-intro{display:none}

/* active view fills remaining canvas height as a flex column */
body.mode-wall .view.active{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}

/* alert strip */
body.mode-wall .alerts{margin:0;flex:0 0 auto;gap:14px}
body.mode-wall .alert{padding:14px 22px}
body.mode-wall .alert .num{font-size:58px}
body.mode-wall .alert .lbl{font-size:16px;letter-spacing:.06em;margin-top:7px}
body.mode-wall .alert .bar{width:6px}

/* classification inbox */
body.mode-wall .inbox{margin:0;flex:0 0 auto;padding:12px 20px;gap:16px}
body.mode-wall .inbox .ttl{font-size:16px}
body.mode-wall .ichip{padding:9px 15px;gap:13px}
body.mode-wall .ichip .iid{font-size:18px}
body.mode-wall .ichip .icu{font-size:16px}
body.mode-wall .ichip .iw{font-size:14px}
body.mode-wall .ichip .cls{font-size:13px}

/* swim lanes — the three tiers share the remaining height */
body.mode-wall .lanes-scroll{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
body.mode-wall .lanes{min-width:0;width:100%;height:100%;display:flex;flex-direction:column;min-height:0}
body.mode-wall .colhead{flex:0 0 auto;gap:10px;margin-bottom:7px}
body.mode-wall .colhead .ch{font-size:15px;padding:6px 4px}
body.mode-wall #lanes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:13px}
body.mode-wall .lane{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0}
body.mode-wall .lane-head{flex:0 0 auto;padding:9px 18px;gap:16px}
body.mode-wall .lane-head .tier-badge{font-size:17px;padding:4px 11px}
body.mode-wall .lane-head .nm{font-size:21px}
body.mode-wall .lane-head .sla{font-size:15px}
body.mode-wall .lane-head .cnt{font-size:17px}
body.mode-wall .lane-grid{flex:1 1 auto;min-height:0;gap:11px;padding:10px}
body.mode-wall .cell{min-height:0;overflow-y:auto;gap:9px;padding:7px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.mode-wall .cell::-webkit-scrollbar{width:6px}
body.mode-wall .cell::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* cards — readable from across the room */
body.mode-wall .card{padding:9px 12px;border-left-width:5px}
body.mode-wall .card .id{font-size:19px;gap:6px}
body.mode-wall .card .cust{font-size:14px;margin:3px 0 6px}
body.mode-wall .chips{gap:5px;margin-bottom:7px}
body.mode-wall .chip{width:26px;height:26px;font-size:13px;border-radius:6px}
body.mode-wall .chip.alert::after,body.mode-wall .chip.warn::after{width:10px;height:10px;top:-4px;right:-4px}
body.mode-wall .card .who{font-size:14px}
body.mode-wall .card .timer{font-size:14px}
body.mode-wall .due{font-size:13px;margin-top:6px;padding-top:6px}
body.mode-wall .pill{font-size:12px;padding:2px 7px}

/* KPIs row */
body.mode-wall .kpis{margin:0;flex:0 0 auto;gap:16px}
body.mode-wall .kpi{padding:15px 24px}
body.mode-wall .kpi .v{font-size:46px}
body.mode-wall .kpi .v small{font-size:22px}
body.mode-wall .kpi .k{font-size:15px;margin-top:7px}

/* rotated wall views (Targets / Submittals) — rows flex to fill the screen */
body.mode-wall #targets.view.active,body.mode-wall #subs.view.active{overflow:hidden}
body.mode-wall #targetList{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.mode-wall .trow{margin:0;flex:1 1 auto;min-height:58px;max-height:104px;
  grid-template-columns:72px 1fr 420px 190px;padding:12px 24px;gap:26px}
body.mode-wall .trow .ocu{font-size:22px} body.mode-wall .trow .osub{font-size:16px}
body.mode-wall .trow .oid{font-size:17px}
body.mode-wall .trow .tier-badge{font-size:18px;padding:4px 11px}
body.mode-wall .ttrack{height:13px}
body.mode-wall .tdates{font-size:15px;margin-top:9px}
body.mode-wall .slack .s{font-size:34px} body.mode-wall .slack .sl{font-size:14px}
body.mode-wall .sgrid{flex:0 0 auto;gap:16px;margin:0}
body.mode-wall .scard{padding:20px 26px}
body.mode-wall .scard .n{font-size:46px} body.mode-wall .scard .l{font-size:16px}
body.mode-wall #subs .stable{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.mode-wall #subs .shead,body.mode-wall #subs .srow{padding:14px 24px;font-size:18px}
body.mode-wall #subs .shead{font-size:14px}

/* --- SLA baselines (learned vs live; Admin, Workstream B) --------------- */
.bl-tools{display:flex;gap:8px}
.bl-head,.bl-row{display:grid;grid-template-columns:1.4fr 1.2fr 1.2fr .8fr 1.6fr;gap:12px;align-items:center;padding:8px 12px}
.bl-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);border-bottom:1px solid var(--line-soft)}
.bl-list{display:flex;flex-direction:column}
.bl-row{border-bottom:1px solid var(--line-soft);font-size:13px}
.bl-row:last-child{border-bottom:0}
.bl-row.locked{background:rgba(126,141,176,.06)}
.bl-stage{display:flex;align-items:center;gap:8px;font-weight:600}
.bl-cur,.bl-learn{font-family:var(--mono);font-size:12px}
.bl-n{color:var(--ink-faint);font-size:10.5px;margin-left:4px}
.bl-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.src-pill{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--ink-faint)}
.src-pill.historical{color:var(--ok);border-color:rgba(52,211,153,.4)}
.src-pill.manual{color:var(--watch);border-color:rgba(245,185,66,.4)}
.drift{font-family:var(--mono);font-size:12px;font-weight:700}
.drift.up{color:var(--crit)} .drift.down{color:var(--ok)} .drift.zero{color:var(--ink-faint);font-weight:600}
.mini.on{border-color:var(--watch);color:var(--watch)}