/* ═══ nsi-ui.css v2 — polished components per 13 §3 (tokens only — IS-01) ═══ */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--nsi-font);color:var(--nsi-text);background:var(--nsi-bg);font-size:14px;line-height:1.5}
#nsi-shell{display:flex;min-height:100vh}
a{color:var(--nsi-primary)}
h1,h2,h3,h4{font-weight:600;color:var(--nsi-navy);margin:0}

/* ── AppSidebar (guideline §18) ── */
.nsi-sidebar{width:248px;background:var(--nsi-card);border-right:1px solid var(--nsi-border);padding:var(--sp-4) var(--sp-3);flex:none;display:flex;flex-direction:column;gap:2px}
.sb-brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2) var(--sp-4)}
.sb-logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--nsi-navy),var(--nsi-blue));color:var(--nsi-card);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.5px;flex:none}
.sb-name{font-weight:700;font-size:15px;color:var(--nsi-navy);letter-spacing:-.2px}
.sb-group{margin-bottom:var(--sp-1)}
.sb-glabel{font-size:10.5px;font-weight:600;color:var(--nsi-text-muted);padding:var(--sp-3) var(--sp-2) var(--sp-1);text-transform:uppercase;letter-spacing:.7px;display:flex;align-items:center;gap:6px}
.sb-item{display:flex;align-items:center;height:38px;padding:0 var(--sp-3);border-radius:var(--r-chip);color:var(--nsi-text);text-decoration:none;font-size:13.5px;font-weight:500;transition:background var(--mo-fast) var(--mo-ease)}
.sb-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--nsi-border);margin-right:10px;flex:none;transition:background var(--mo-fast) var(--mo-ease)}
.sb-item:hover{background:var(--nsi-bg);color:var(--nsi-navy)}
.sb-item:hover::before{background:var(--nsi-blue)}
.sb-item.active{background:var(--nsi-primary);color:var(--nsi-card);box-shadow:var(--el-active);font-weight:600}
.sb-item.active::before{background:var(--nsi-card)}
.sb-badge{background:var(--nsi-critical);color:var(--nsi-card);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700;line-height:1.5}

/* ── Topbar / page header ── */
.nsi-main{flex:1;display:flex;flex-direction:column;min-width:0}
.nsi-topbar{height:56px;background:var(--nsi-card);border-bottom:1px solid var(--nsi-border);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-6);flex:none}
.tb-sol{font-size:16px;font-weight:700;color:var(--nsi-navy);letter-spacing:-.2px}
.tb-spacer{flex:1}
.tb-switch,.tb-bell,.tb-avatar{height:36px;border:1px solid var(--nsi-border);background:var(--nsi-card);border-radius:var(--r-card);padding:0 var(--sp-3);font-size:12.5px;font-weight:500;color:var(--nsi-text);cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:6px;transition:border-color var(--mo-fast) var(--mo-ease)}
.tb-switch:hover,.tb-bell:hover,.tb-avatar:hover{border-color:var(--nsi-select)}
.tb-avatar b{font-weight:600;color:var(--nsi-navy)}
.tb-dot{position:absolute;top:-5px;right:-5px;background:var(--nsi-critical);color:var(--nsi-card);border-radius:999px;font-size:9.5px;font-style:normal;font-weight:700;padding:1px 5px;border:2px solid var(--nsi-card)}
.nsi-crumb{padding:var(--sp-3) var(--sp-6) 0;font-size:12px;color:var(--nsi-text-muted)}
.nsi-content{padding:0 var(--sp-6) var(--sp-6);flex:1;max-width:1560px;width:100%}
.nsi-pagehead{display:flex;align-items:flex-end;gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-4)}
.nsi-pagehead h1{font-size:22px;font-weight:700;letter-spacing:-.3px}
.nsi-pagehead .ph-sub{font-size:12.5px;color:var(--nsi-text-muted);padding-bottom:3px;min-width:0}
/* SMS-only design pass (25 Sep, MV: tombol header jadi "besar besar") — root cause was the
   default flex-shrink on .ph-right's button children: when title+description text was long,
   the row (forced nowrap by sms-pagehead-fix.js) squeezed the BUTTONS instead of the text,
   wrapping button labels to 2 lines. Fix: buttons never shrink and never wrap their own text;
   the title/description block absorbs the squeeze instead (ph-sub already wraps naturally).
   Padding snapped to the existing --sp- tokens (8px/16px) rather than the old ad hoc 9px. */
.nsi-pagehead .ph-right{margin-left:auto;font-size:12px;color:var(--nsi-text-muted);padding-bottom:3px;flex:none;display:flex;align-items:center;gap:var(--sp-2)}
.nsi-pagehead .ph-right .nsi-btn{white-space:nowrap;flex:none}

/* ── Cards / sections ── */
.nsi-card{background:var(--nsi-card);border:1px solid var(--nsi-border);border-radius:var(--r-card);padding:var(--sp-4);box-shadow:var(--el-card)}
.nsi-sect{display:flex;align-items:center;gap:var(--sp-2);font-size:13.5px;font-weight:600;color:var(--nsi-navy);margin:0 0 var(--sp-3);letter-spacing:-.1px}
.nsi-sect .s-right{margin-left:auto;font-weight:400}

/* ── KpiCard (06 §1 anatomy) ── */
.nsi-kpi{position:relative;display:flex;flex-direction:column;gap:6px;min-height:144px;transition:box-shadow var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)}
.nsi-kpi:hover{box-shadow:0 4px 14px rgba(30,68,128,.10);transform:translateY(-1px)}
/* min-height reserves space for 2 lines always (25 Sep design pass, MV: "card dashboard juga
   berantakan") — root cause: some KPI names ("Overdue Escalations") wrap to 2 lines while
   shorter ones on the same row ("Active Emergency") stay on 1, so the k-val number below sits
   at a different height card to card in the same row. Reserving 2 lines' worth up front (even
   for 1-line labels) keeps every card's value row aligned regardless of label length. */
.nsi-kpi .k-name{font-size:11px;font-weight:600;color:var(--nsi-text-muted);text-transform:uppercase;letter-spacing:.5px;padding-right:28px;line-height:1.35;min-height:2.7em}
.k-q{width:22px;height:22px;border-radius:50%;border:1px solid var(--nsi-border);background:var(--nsi-bg);color:var(--nsi-text-muted);cursor:pointer;font-size:11.5px;font-weight:600;line-height:1;transition:all var(--mo-fast) var(--mo-ease);flex:none}
.k-q:hover{background:var(--nsi-primary);border-color:var(--nsi-primary);color:var(--nsi-card)}
.nsi-kpi .k-q{position:absolute;top:12px;right:12px}
.nsi-kpi .k-val{font-size:29px;font-weight:700;color:var(--nsi-navy);line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.nsi-kpi .k-unit{font-size:11px;font-weight:400;color:var(--nsi-text-muted);letter-spacing:0}
.nsi-kpi .k-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nsi-kpi .k-spark{display:block}
.nsi-kpi .k-src{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;border-top:1px dashed var(--nsi-border)}
.nsi-kpi .k-more{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;background:var(--nsi-bg);border:1px solid var(--nsi-border);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:600;color:var(--nsi-text-muted);cursor:pointer;transition:all var(--mo-fast) var(--mo-ease)}
.nsi-kpi .k-more:hover{border-color:var(--nsi-primary);color:var(--nsi-primary)}
.nsi-kpi .k-more .nsi-ic{width:11px;height:11px;transition:transform var(--mo-fast) var(--mo-ease)}
.nsi-kpi .k-more[aria-expanded="true"] .nsi-ic{transform:rotate(180deg)}
.nsi-kpi .k-lines{font-size:11px;color:var(--nsi-text-muted);line-height:1.6;font-variant-numeric:tabular-nums}
/* GS-5 pg tabs */
.nsi-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nsi-border);margin-top:4px}
.nsi-tab{padding:8px 18px;font-size:13px;font-weight:600;color:var(--nsi-text-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.nsi-tab.active{color:var(--nsi-primary);border-bottom-color:var(--nsi-primary)}
.nsi-tab:hover{color:var(--nsi-navy)}
/* M1 sales-dimension matrix */
.mx-table th:first-child{min-width:150px}
.mx-cell{min-width:118px;background:var(--nsi-bg)}
.mx-cell.on{background:var(--nsi-t-success)}
.mx-cell select,.mx-cell input[type=date]{width:100%;font-size:11px;padding:3px 4px;border:1px solid var(--nsi-border);border-radius:4px;margin-bottom:3px;font-family:var(--nsi-font);background:var(--nsi-card)}
.mx-cell .mx-en{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--nsi-text-muted);margin-bottom:3px;cursor:help}
.mx-cell .mx-flabel{font-size:9px;font-weight:700;letter-spacing:.4px;color:var(--nsi-text-muted);cursor:help;margin-bottom:1px}
.mx-cell select,.mx-cell input[type=date]{cursor:help}
.mx-cell select:focus,.mx-cell input[type=date]:focus{cursor:auto}
.mx-region td{background:var(--nsi-select);color:var(--nsi-navy);font-weight:700;font-size:12px;letter-spacing:.4px}
/* M2 Sales Budget Entry — dense matrix + gate panel (GS-6/GS-7) */
.sben-matrix{font-size:12px}
.sben-matrix th,.sben-matrix td{white-space:nowrap}
.sben-cell{width:56px;padding:3px 4px;font-size:11.5px;border:1px solid var(--nsi-border);border-radius:4px;font-family:var(--nsi-font);text-align:right;font-variant-numeric:tabular-nums}
.sben-cell:disabled{background:var(--nsi-bg);color:var(--nsi-text-muted);border-color:transparent}
.sben-tot td{background:var(--nsi-bg);font-weight:600;border-top:2px solid var(--nsi-border)}
.sben-remark-ic{width:13px;height:13px;color:var(--nsi-primary);cursor:help}
/* M3 SB-Entry rebuild — hierarchical grid group rows (Region > Customer), Discussion thread,
   presence badge, Document Verification (signature + code). Neutral tones only — 06 §22 "Do not
   create colorful playful UI / Do not use random color palettes". */
.sben-grouphead.sben-region td{background:var(--nsi-bg);font-weight:700;font-size:11.5px;letter-spacing:.3px;border-top:2px solid var(--nsi-border);border-bottom:1px solid var(--nsi-border)}
.sben-grouphead.sben-customer td{background:var(--nsi-card);font-weight:600;font-size:11.5px;border-bottom:1px solid var(--nsi-border)}
.sben-grouphead.sben-customer td:first-child{padding-left:26px;color:var(--nsi-text-muted)}
.sbdisc-item{padding:8px 10px;background:var(--nsi-bg);border-radius:6px}
.sbdisc-item .sd-name{color:var(--nsi-navy)}
.nsi-gate{padding:2px 0}
.nsi-gaterow{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--nsi-border);font-size:12px}
.nsi-gaterow:last-child{border-bottom:0}
.nsi-gaterow .g-ico{flex:none;font-size:13px;line-height:1.4}
.nsi-gaterow.g-hard .g-ico{color:var(--nsi-critical)}
.nsi-gaterow.g-soft .g-ico{color:var(--nsi-warning)}
.nsi-gaterow .nsi-btn{margin-left:auto;flex:none;padding:3px 10px;font-size:11px}
/* GS-11 modal (12 §11: 640–840px, overlay/Esc cancel) */
.nsi-modal-ov{position:fixed;inset:0;background:rgba(30,68,128,.32);z-index:500;display:flex;align-items:center;justify-content:center}
/* [hidden] must actually hide (22 Jul r8): the class's display:flex silently overrides the
   HTML hidden attribute's UA display:none, so a page shipping a static `<div class="nsi-modal-ov"
   hidden>` gets an invisible full-screen overlay that swallows every click on the page (found by
   the SMS EMG-arc browser sweep on SMS-EMG-COMMAND; SMS-EMG-ACTIVATE had the same latent trap).
   One rule fixes the pattern everywhere instead of per-page display-style surgery. */
.nsi-modal-ov[hidden]{display:none}
.nsi-modal{width:680px;max-width:calc(100vw - 48px);max-height:82vh;overflow:auto;background:var(--nsi-card);border-radius:var(--r-modal);box-shadow:0 20px 48px rgba(30,68,128,.28)}
.nsi-modal .m-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--nsi-border)}
.nsi-modal .m-head h3{margin:0;font-size:15.5px;color:var(--nsi-navy)}
.nsi-modal .m-body{padding:16px 18px;font-size:13px}
.nsi-modal .m-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--nsi-border)}

/* ── Badges & chips (13 §1.2 triads) ── */
.nsi-badge{display:inline-flex;gap:5px;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid;line-height:1.5;white-space:nowrap}
.nsi-badge i{font-style:normal;font-size:8px;line-height:1}
.b-neutral{background:var(--nsi-t-neutral);border-color:var(--nsi-b-neutral);color:var(--nsi-x-neutral)}
.b-info{background:var(--nsi-t-info);border-color:var(--nsi-select);color:var(--nsi-x-info)}
.b-success{background:var(--nsi-t-success);border-color:var(--nsi-b-success);color:var(--nsi-x-success)}
.b-warn{background:var(--nsi-t-warn);border-color:var(--nsi-b-warn);color:var(--nsi-x-warn)}
.b-high{background:var(--nsi-t-high);border-color:var(--nsi-t-high-b);color:var(--nsi-x-high)}
.b-crit{background:var(--nsi-t-crit);border-color:var(--nsi-b-crit);color:var(--nsi-x-crit)}
.nsi-chip{display:inline-flex;gap:5px;align-items:center;padding:1.5px 9px;border-radius:999px;font-size:10.5px;font-weight:500;border:1px solid;line-height:1.6;white-space:nowrap}
.nsi-chip i{font-style:normal;font-weight:700}
.chip-erp{background:var(--nsi-t-info);border-color:var(--nsi-select);color:var(--nsi-x-info)}
.chip-xsol{background:var(--nsi-t-ext);border-color:var(--nsi-b-ext);color:var(--nsi-x-ext)}
.chip-ext{background:var(--nsi-t-neutral);border-color:var(--nsi-b-neutral);color:var(--nsi-x-neutral);border-style:dashed}
.chip-scada{background:var(--nsi-t-teal);border-color:var(--nsi-teal);color:var(--nsi-x-teal)}
a:has(.nsi-chip){text-decoration:none}

/* ── Tables: .nsi-table (worklist 13px/40px) & .nsi-grid (planning 12px/44px) ── */
.nsi-table{border-collapse:collapse;font-size:12.5px;width:100%}
.nsi-table th{background:var(--nsi-bg);color:var(--nsi-text-muted);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--nsi-border)}
.nsi-table td{padding:9px 12px;border-bottom:1px solid var(--nsi-border);text-align:left;vertical-align:middle}
.nsi-table tbody tr{transition:background var(--mo-fast) var(--mo-ease)}
.nsi-table tbody tr:hover{background:var(--nsi-bg)}
.nsi-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.nsi-grid{border-collapse:collapse;font-size:12px}
.nsi-grid th{background:var(--nsi-select);color:var(--nsi-x-info);padding:6px 8px;position:sticky;top:0;font-weight:600}
.nsi-grid td{border:1px solid var(--nsi-border);padding:0 8px;height:44px;text-align:right;font-variant-numeric:tabular-nums;background:var(--nsi-card)}
.nsi-grid td.c-edit{background:var(--nsi-primary-light)}
.nsi-grid td.c-comp{background:var(--nsi-bg)}
.nsi-grid td.c-viol{background:var(--nsi-t-crit);border:1.5px solid var(--nsi-critical)}
.nsi-grid td.c-warn{background:var(--nsi-t-warn)}
.nsi-grid td.c-peach{background:var(--nsi-t-high)}
.nsi-grid td.c-frozen{background:repeating-linear-gradient(135deg,var(--nsi-t-frozen),var(--nsi-t-frozen) 6px,var(--nsi-b-neutral) 6px,var(--nsi-b-neutral) 11px);cursor:not-allowed}

/* ── Exception rows (HOME board) ── */
.nsi-exrow{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--nsi-border);border-radius:var(--r-card);margin-bottom:8px;text-decoration:none;color:var(--nsi-text);font-size:13px;background:var(--nsi-card);transition:all var(--mo-fast) var(--mo-ease)}
.nsi-exrow:hover{border-color:var(--nsi-select);box-shadow:var(--el-card);transform:translateX(2px)}
.nsi-exrow .x-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;font-weight:700}
.x-ico.i-appr{background:var(--nsi-t-info);color:var(--nsi-x-info)}
.x-ico.i-crp{background:var(--nsi-t-warn);color:var(--nsi-x-warn)}
.x-ico.i-short{background:var(--nsi-t-crit);color:var(--nsi-x-crit)}
.x-ico.i-gap{background:var(--nsi-t-high);color:var(--nsi-x-high)}
.nsi-exrow .x-arr{margin-left:auto;color:var(--nsi-text-muted);font-weight:600}

/* ── Simple lists (feed / health) ── */
.nsi-list a{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:8px 2px;border-bottom:1px solid var(--nsi-border);text-decoration:none;color:var(--nsi-text);line-height:1.45}
.nsi-list a:last-child{border-bottom:0}
.nsi-list a:hover{color:var(--nsi-navy)}
.nsi-list .l-dot{color:var(--nsi-primary);font-size:9px;line-height:1.9;flex:none}
.nsi-kv{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:6px 2px;border-bottom:1px solid var(--nsi-border)}
.nsi-kv:last-child{border-bottom:0}
.nsi-kv a{text-decoration:none;font-weight:500}

/* ── Gate panel + signature ── */
.nsi-gate{border:1px solid var(--nsi-border);border-radius:var(--r-card);background:var(--nsi-card)}
.nsi-gate .g-row{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--nsi-border);font-size:13px}
.nsi-gate .g-empty{color:var(--nsi-x-success);background:var(--nsi-t-success);padding:var(--sp-3);border-radius:var(--r-card);font-weight:600}
.nsi-sig{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.nsi-stamp{border:1.5px solid var(--nsi-border);border-radius:var(--r-card);padding:7px 12px;font-size:12px;background:var(--nsi-card);line-height:1.4}
.nsi-stamp.done{border-color:var(--nsi-b-success);background:var(--nsi-t-success)}
.nsi-stamp.current{border-color:var(--nsi-primary);animation:nsi-pulse 1.6s ease infinite;font-weight:600;color:var(--nsi-navy)}
.nsi-stamp.pending{color:var(--nsi-text-muted);border-style:dashed}
@keyframes nsi-pulse{50%{box-shadow:0 0 0 4px rgba(0,94,255,.18)}}

/* ── Approval Information (GS-8b, 00 §A5.1 Prepared/Checked/Approved grouping) ── */
.nsi-approval{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:var(--sp-5);align-items:start}
.nsi-approval .ai-col{display:flex;flex-direction:column;gap:8px}
.nsi-approval .ai-head{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--nsi-text-muted);text-transform:uppercase;border-bottom:1px solid var(--nsi-border);padding-bottom:6px}
.nsi-sigbox{display:flex;flex-direction:column;gap:2px;min-width:96px}
.nsi-sigbox .sb-mark{height:26px;display:flex;align-items:center;border-bottom:1.5px dashed var(--nsi-border)}
.nsi-sigbox.done .sb-mark{border-bottom-style:solid;border-bottom-color:var(--nsi-b-success)}
.nsi-sigbox.current .sb-mark{border-bottom-color:var(--nsi-primary)}
.nsi-sigbox .sb-ic{width:44px;height:22px;color:var(--nsi-primary)}
.nsi-sigbox .sb-name{font-size:12px;font-weight:600;color:var(--nsi-navy);margin-top:4px}
.nsi-sigbox .sb-role{font-size:11px;color:var(--nsi-text-muted)}
.nsi-sigbox .sb-ts{font-size:9.5px;color:var(--nsi-text-muted)}

/* ── Dropdown action menu (SR-PURB-08, "More options" — matches reference Modal More Option.png) ── */
.nsi-dropdown-menu{position:absolute;z-index:410;min-width:180px;max-width:260px;max-height:70vh;overflow-y:auto;background:var(--nsi-card);border:1px solid var(--nsi-border);border-radius:8px;box-shadow:var(--el-drawer);padding:6px;display:flex;flex-direction:column;gap:1px}
.nsi-dropdown-menu .ndm-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;background:none;border-radius:6px;font-family:var(--nsi-font);font-size:13px;color:var(--nsi-navy);text-align:left;cursor:pointer;white-space:normal;line-height:1.3}
.nsi-dropdown-menu .ndm-item:hover{background:var(--nsi-bg)}
.nsi-dropdown-menu .ndm-item svg{width:15px;height:15px;flex:none;color:var(--nsi-text-muted)}
.nsi-dropdown-menu .ndm-item.ndm-current{background:var(--nsi-bg);font-weight:700}
.nsi-dropdown-menu .ndm-group{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--nsi-text-muted);text-transform:uppercase;padding:6px 10px 2px}

/* ── Toast / flowbanner / FAB / drawer / popover ── */
/* z-index 600 (> modal-ov's 500), 22 Jul r8: H.modal() appends its overlay to <body> AFTER the
   toasts container, so a success modal opened right after NsiFlow.fire() used to sit ON TOP of
   the RoleHandoffToast and swallow its "Continue as … →" click (found by the X1 E2E sweep on
   SMS-JSA-REVIEW; affects any fire→success-modal sequence in ANY solution). Toasts are small,
   corner-anchored and non-blocking — floating them above modals is the standard toast contract
   and fixes every such page with one rule instead of per-page modal surgery. */
.nsi-toasts{position:fixed;top:14px;right:14px;z-index:600;display:flex;flex-direction:column;gap:var(--sp-2);max-width:360px}
.nsi-toast{background:var(--nsi-card);border:1px solid var(--nsi-border);border-left:4px solid var(--nsi-primary);border-radius:var(--r-card);padding:var(--sp-3) var(--sp-4);box-shadow:0 8px 24px rgba(30,68,128,.14);font-size:13px;display:flex;flex-direction:column;gap:4px}
.nsi-toast b{color:var(--nsi-navy);font-size:12px;letter-spacing:.3px}
.nsi-toast span{font-size:12.5px;color:var(--nsi-text)}
.nsi-toast.t-warn{border-left-color:var(--nsi-warning)}
.nsi-toast.t-handoff{border-left-color:var(--nsi-purple)}
.t-actions{display:flex;gap:var(--sp-2);margin-top:6px}
.t-continue{background:var(--nsi-primary);color:var(--nsi-card);border:0;border-radius:var(--r-chip);padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--nsi-font)}
.t-stay{background:var(--nsi-card);border:1px solid var(--nsi-border);border-radius:var(--r-chip);padding:7px 12px;font-size:12px;cursor:pointer;font-family:var(--nsi-font)}
/* 22 Jul UX-clarity fix (MV: "harus melakukan apa di page yang disarankan") — banner now
   leads with the current step's own instruction (.fb-do, via NsiFlow.stepText()) instead of
   only the static flow title, since this is the one guidance surface visible on every page for
   the whole time a flow is active. flex-wrap so a long instruction never crowds the stop
   button off-screen on a narrow viewport — it just wraps to its own line instead. */
.nsi-flowbanner{background:linear-gradient(90deg,var(--nsi-navy),var(--nsi-blue));color:var(--nsi-card);padding:9px var(--sp-6);font-size:12.5px;display:flex;flex-wrap:wrap;row-gap:4px;gap:var(--sp-2);align-items:center;z-index:90}
.fb-step{font-weight:700;background:rgba(255,255,255,.16);border-radius:999px;padding:2px 10px;font-size:11.5px;flex:none}
.fb-do{flex:1 1 320px;min-width:0;line-height:1.4}
.fb-title{flex:none;font-size:11px;opacity:.72}
.fb-x{margin-left:auto;background:none;border:0;color:var(--nsi-card);cursor:pointer;font-size:14px;flex:none}
.nsi-fab{position:fixed;bottom:18px;right:18px;width:46px;height:46px;border-radius:50%;background:var(--nsi-primary);color:var(--nsi-card);border:0;font-size:19px;font-weight:700;cursor:pointer;z-index:600;box-shadow:var(--el-active);font-family:var(--nsi-font);transition:transform var(--mo-fast) var(--mo-ease),bottom var(--mo-fast) var(--mo-ease)}
.nsi-fab:hover{transform:scale(1.06)}
.nsi-backlink{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:12.5px;font-weight:600;color:var(--nsi-primary);text-decoration:none;margin-bottom:var(--sp-2)}
.nsi-backlink:hover{text-decoration:underline}
.nsi-backlink .nsi-ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.nsi-addfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--nsi-border)}
.nsi-addfoot .r{display:flex;gap:var(--sp-3);margin-left:auto}
.nsi-fab-panel{position:fixed;bottom:74px;right:18px;width:346px;background:var(--nsi-card);border:1px solid var(--nsi-border);border-radius:var(--r-modal);box-shadow:0 12px 32px rgba(30,68,128,.18);z-index:600;font-size:13px;overflow:hidden}
.fp-tabs{display:flex;border-bottom:1px solid var(--nsi-border);background:var(--nsi-bg)}
.fp-tabs button{flex:1;padding:10px var(--sp-2);border:0;background:none;cursor:pointer;font-size:12px;font-weight:500;font-family:var(--nsi-font);color:var(--nsi-text-muted)}
.fp-tabs button.on{border-bottom:2px solid var(--nsi-primary);color:var(--nsi-primary);font-weight:600;background:var(--nsi-card)}
.fp-body{padding:var(--sp-4);max-height:420px;overflow:auto}
.fp-body h4{margin:0 0 5px;font-size:12.5px;color:var(--nsi-navy)}
.fp-body p{margin:0 0 10px;font-size:12px;line-height:1.55;color:var(--nsi-text)}
/* ── GS-9/GS-2 Demo Flow tab (v2, 00 §26 item 23 — visual reference: card header w/ icon +
   derived subtitle, numbered step rows w/ role badge + "ANDA DI SINI"/"menunggu X" state +
   actionKey code, restart/close actions). Demo Flow is now the main/default Help tab. Picker
   list when idle. Same header treatment (.fp-fl-head/.fp-fl-icon) reused on Page/Method tabs
   for visual consistency across all 3. Reuses .nsi-btn/.b-ghost/.nsi-badge — zero new hex. ── */
.fp-fl-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.fp-fl-icon{width:30px;height:30px;flex:none;padding:6px;border-radius:50%;background:var(--nsi-t-info);box-sizing:border-box}
.fp-fl-icon.nsi-ic{color:var(--nsi-x-info)}
.fp-fl-head h4{margin:0 0 2px}
.fp-fl-sub{margin:0!important;font-size:11px;color:var(--nsi-text-muted);line-height:1.5}
.fp-fl-list,.fp-fl-steps{list-style:none;margin:0 0 10px;padding:0}
.fp-fl-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--nsi-border);font-size:12px;color:var(--nsi-text)}
.fp-fl-list li:last-child{border-bottom:0}
.fp-fl-list .nsi-btn{flex:none;padding:4px 11px;font-size:11px}
.fp-fl-meta{font-size:10.5px;color:var(--nsi-text-muted)}
.fp-fl-row{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--nsi-border)}
.fp-fl-row:last-child{border-bottom:0}
.fp-fl-num{flex:none;width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;border:1.5px solid var(--nsi-border);color:var(--nsi-text-muted);margin-top:1px}
.fp-fl-now .fp-fl-num{background:var(--nsi-primary);border-color:var(--nsi-primary);color:var(--nsi-card)}
.fp-fl-done .fp-fl-num{background:var(--nsi-x-success);border-color:var(--nsi-x-success);color:var(--nsi-card)}
.fp-fl-body{flex:1;min-width:0}
.fp-fl-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:3px}
.fp-fl-actor{font-weight:600}
.fp-fl-action{font-size:12px;line-height:1.45;color:var(--nsi-text)}
.fp-fl-next .fp-fl-action{color:var(--nsi-text-muted)}
.fp-fl-done .fp-fl-action{color:var(--nsi-text-muted);text-decoration:line-through}
/* 22 Jul UX-clarity fix (MV: "tidak tau harus klik apa di page yang dituju dan harus
   melakukan apa di page yang disarankan") — the active step's callout: WHERE (page) + WHAT
   (instruction), visually separated from the terse context line above (.fp-fl-action) so the
   two never blur into one wall of text. Info-blue tokens reused from the "ANDA DI SINI" badge
   (IS-01: zero new hex) — this box IS that badge's promise ("you're here") made actionable. */
.fp-fl-cta{background:var(--nsi-t-info);border:1px solid var(--nsi-select);border-radius:var(--r-card);padding:8px 10px;margin:6px 0;font-size:11.5px;line-height:1.5}
.fp-fl-cta-page{color:var(--nsi-x-info)}
.fp-fl-cta-page b,.fp-fl-cta-do b{color:var(--nsi-navy)}
.fp-fl-cta-do{color:var(--nsi-text);margin-top:2px}
.fp-fl-code{display:block;margin-top:4px;font-size:9.5px;color:var(--nsi-text-muted);font-family:monospace;opacity:.6}
.fp-fl-goto{display:block;width:100%;margin:6px 0 2px;padding:6px 10px;font-size:11.5px;text-align:center}
.fp-fl-actions{display:flex;gap:8px;margin-top:12px}
.fp-fl-actions .nsi-btn{flex:1;text-align:center;padding:9px 10px;font-size:12px}
.fp-fl-stoplink{display:block;width:100%;margin-top:9px;background:none;border:0;color:var(--nsi-text-muted);font-size:11px;text-decoration:underline;cursor:pointer;font-family:var(--nsi-font);text-align:center}
.fp-fl-stoplink:hover{color:var(--nsi-critical)}

/* ── Home "Demo Flows" showcase (00 §27) — wide card-grid variant of the Help panel's
   narrow Demo Flow picker list (.fp-fl-list) above, exposed directly on PPS-HOME so a
   first-time/lay user sees "what this app can do" without finding the "?" FAB first.
   Same data source (NsiFlow.FLOWS) + same startFlow()/goToFlowStep() calc as the Help
   panel — IS-03, one calc not two. Tokens only — IS-01, zero new hex. */
.nsi-flowshowcase-sub{margin:0 0 var(--sp-3)!important;font-size:12px;color:var(--nsi-text-muted);line-height:1.5}
.nsi-flowgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.nsi-flowcard{border:1px solid var(--nsi-border);border-radius:var(--r-card);padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--nsi-bg);transition:border-color var(--mo-fast) var(--mo-ease)}
.nsi-flowcard:hover{border-color:var(--nsi-select)}
.nsi-flowcard.active{border-color:var(--nsi-primary);background:var(--nsi-primary-light)}
.nsi-flowcard-id{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--nsi-text-muted)}
.nsi-flowcard h4{font-size:13px;margin:0 0 2px}
.nsi-flowcard-meta{margin:0;font-size:11px;color:var(--nsi-text-muted);line-height:1.4}
.nsi-flowcard-btn{margin-top:auto;width:100%;text-align:center;padding:7px 10px;font-size:12px}
.nsi-flowcard-here{align-self:flex-start;margin-top:auto}

/* ── ISA canvas + animation (PoC keyframes) ── */
.nsi-statechip{display:inline-flex;gap:4px;padding:2.5px 9px;border-radius:10px;font-size:9.5px;font-weight:700;letter-spacing:.4px;border:1px solid}
.sc-ok{background:var(--isa-ok-tint);border-color:var(--isa-ok-b);color:var(--isa-ok)}
.sc-warn{background:var(--isa-warn-tint);border-color:var(--isa-warn);color:var(--isa-warn-text)}
.sc-crit{background:var(--isa-crit-tint);border-color:var(--isa-crit);color:var(--isa-crit)}
.sc-blink{animation:nsi-pc 1.1s steps(2) infinite}
svg text{font-family:var(--nsi-font)}
svg text.t-mono{font-family:var(--nsi-mono);font-variant-numeric:tabular-nums}
.nsi-ic{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.x-ico .nsi-ic{width:15px;height:15px}
.tb-bell .nsi-ic{width:17px;height:17px}
.nsi-dash{stroke-dasharray:6 7;animation:nsi-dashmove var(--spd,2.2s) linear infinite}
.nsi-wave{animation:nsi-wavemove 5s ease-in-out infinite}
.nsi-spin{transform-origin:center;animation:nsi-spinmove 6s linear infinite}
@keyframes nsi-dashmove{to{stroke-dashoffset:-13}}
@keyframes nsi-wavemove{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}
@keyframes nsi-spinmove{to{transform:rotate(360deg)}}
@keyframes nsi-pc{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .nsi-dash,.nsi-wave,.nsi-spin,.sc-blink,.nsi-stamp.current{animation:none}
  .nsi-kpi:hover,.nsi-exrow:hover,.nsi-fab:hover{transform:none}
}

/* ── Buttons, inputs, misc ── */
/* 25 Sep design pass — padding snapped to the --sp- tokens (was ad hoc 9px 16px). */
.nsi-btn{background:var(--nsi-primary);color:var(--nsi-card);border:0;border-radius:var(--r-chip);padding:var(--sp-2) var(--sp-4);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--nsi-font);transition:filter var(--mo-fast) var(--mo-ease);text-decoration:none;display:inline-block}
.nsi-btn:hover{filter:brightness(1.08)}
.nsi-btn[disabled]{background:var(--nsi-t-neutral);color:var(--nsi-x-neutral);cursor:not-allowed}
.nsi-btn.b-ghost{background:var(--nsi-card);color:var(--nsi-primary);border:1px solid var(--nsi-primary)}
.nsi-btn.b-danger{background:var(--nsi-card);color:var(--nsi-critical);border:1px solid var(--nsi-critical)}
.nsi-btn.b-danger:hover{background:var(--nsi-t-crit)}
/* Compact button variant (25 Sep, MV: "tombol action berapa px, untuk di tabel berapa px") —
   replaces ~54 one-off inline style="padding:...;font-size:...px" overrides that had drifted
   into at least 10 different pixel combos across the SMS pages (table row actions, filter
   "Reset" buttons, small inline actions). One standard compact size now, on tokens. */
.nsi-btn.b-sm{padding:var(--sp-1) var(--sp-3);font-size:11.5px}
select,input[type=text],input:not([type]){font-family:var(--nsi-font);font-size:12.5px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--nsi-border);border-radius:var(--r-chip);background:var(--nsi-card);color:var(--nsi-text)}
select:focus,input:focus{border-color:var(--nsi-primary)}
:focus-visible{outline:2px solid var(--nsi-primary);outline-offset:2px}
@media print{.nsi-sidebar,.nsi-topbar,.nsi-fab,.nsi-fab-panel,.nsi-toasts,.nsi-flowbanner{display:none!important}}

/* ── 13 §3.11 Discussion / Chat panel (client reference: chat bubbles + status timeline
   dividers + attachment card + input bar). Colors strictly from the existing semantic
   token set — self bubble = primary-light tint, status text = semantic x-colors. ── */
.nsi-chat{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto;padding:4px 2px}
.ch-div{display:flex;align-items:center;gap:10px;margin:10px 0 6px;font-size:11.5px;color:var(--nsi-text-muted)}
.ch-div::before,.ch-div::after{content:"";flex:1;height:1px;background:var(--nsi-border)}
.ch-div .cd-status{font-weight:700}
.cd-info{color:var(--nsi-x-info)}.cd-success{color:var(--nsi-x-success)}
.cd-warn{color:var(--nsi-x-warn)}.cd-crit{color:var(--nsi-x-crit)}.cd-neutral{color:var(--nsi-x-neutral)}
.ch-row{display:flex;gap:8px;margin:6px 0;align-items:flex-start}
.ch-row.me{flex-direction:row-reverse}
.ch-av{width:30px;height:30px;border-radius:50%;background:var(--nsi-primary-light);color:var(--nsi-navy);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.ch-body{max-width:72%;display:flex;flex-direction:column}
.ch-row.me .ch-body{align-items:flex-end}
.ch-bub{background:var(--nsi-t-neutral);border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.45;
  color:var(--nsi-text);white-space:pre-wrap;word-break:break-word}
.ch-row.me .ch-bub{background:var(--nsi-primary-light)}
.ch-meta{font-size:10.5px;color:var(--nsi-text-muted);margin-top:3px}
.ch-file{background:var(--nsi-card);border:1px solid var(--nsi-border);border-radius:8px;padding:10px 12px;min-width:260px;margin-bottom:4px}
.ch-file .cf-row{display:flex;align-items:center;gap:10px}
.ch-file .cf-ico{width:30px;height:34px;border-radius:4px;background:var(--nsi-t-crit);color:var(--nsi-x-crit);
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.ch-file .cf-name{font-size:12.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-file .cf-size{font-size:11px;color:var(--nsi-text-muted);flex:none}
.ch-file .cf-dl{font-size:11.5px;color:var(--nsi-primary);text-decoration:none;display:inline-block;margin-top:6px;cursor:pointer}
.ch-inputbar{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nsi-border)}
.ch-inputbar input{flex:1;min-width:0}
.ch-clip{background:none;border:0;cursor:pointer;color:var(--nsi-text-muted);padding:6px;border-radius:6px}
.ch-clip:hover{background:var(--nsi-t-neutral)}
.ch-send .nsi-ic{margin-right:4px}

/* ── 13 §3.10b addendum — sheet scroll region with ALWAYS-VISIBLE frozen totals footer.
   Body rows scroll; tfoot totals stay pinned at the bottom of the visible area. ── */
.nsi-sheet-scroll{max-height:62vh;overflow:auto}
.nsi-sheet-scroll table tfoot td{position:sticky;bottom:0;background:var(--nsi-card);z-index:4;
  border-top:2px solid var(--nsi-navy);box-shadow:0 -2px 6px rgba(30,68,128,.08)}
.nsi-sheet-scroll table tfoot tr.sben-tot td{background:var(--nsi-t-frozen)}

/* ── GS-8c — approval signature image + verification QR inside signed boxes ── */
.nsi-sigbox .sb-sig svg{display:block;max-width:96px;height:30px}
.nsi-sigbox .sb-qr{margin-top:4px}
.nsi-sigbox .sb-qr svg{display:block;width:52px;height:52px}
.nsi-stamp .sb-qr svg{display:block;width:44px;height:44px;margin-top:4px}

/* ── MPS-WEEKLY PlanningGrid (P1, GS-6) — dense weekly grid inside .nsi-sheet-scroll for
   sticky header (existing .nsi-grid th) + sticky footer (existing tfoot rule), PLUS sticky
   FIRST 2 COLUMNS for horizontal scroll (Layout System: "frozen first 2 cols + sticky
   header/footer — never reflow"). Class-based (.g-col1/.g-col2/.g-tot-label), NOT nth-child:
   the CAA block's rowspan="3" Block cell means the 2AA/3AA continuation rows emit only ONE
   leading <td> (the Line cell), and the tfoot label cell is colspan="2" — in both cases
   nth-child(2) would land on a DATA cell instead of the Line column, forcing it 112px wide
   and sticky-overlapping the next week's cell (found via qa_m4.js interactive click testing,
   not visible in static screenshots). Explicit classes are DOM-position-independent, so they
   stay correct regardless of rowspan/colspan. Only opted-in cells get these classes — the
   smaller reference tables (Tank/Transfer/Backup, 1 leading column, no horizontal scroll
   needed) intentionally do NOT, so they keep their natural (unforced) column widths. */
.nsi-grid .g-col1{position:sticky;left:0;width:60px;min-width:60px;max-width:60px;z-index:2;background:var(--nsi-card)}
.nsi-grid .g-col2{position:sticky;left:60px;width:112px;min-width:112px;max-width:112px;z-index:2;background:var(--nsi-card)}
.nsi-grid thead .g-col1,.nsi-grid thead .g-col2{z-index:7;background:var(--nsi-select)}
.nsi-grid tfoot .g-col1,.nsi-grid tfoot .g-col2,.nsi-grid tfoot .g-tot-label{z-index:7;background:var(--nsi-t-frozen)}
.nsi-grid .g-tot-label{position:sticky;left:0;width:172px;min-width:172px;max-width:172px}
.nsi-grid .g-block-cell{font-weight:700;color:var(--nsi-navy);vertical-align:top;border-right:2px solid var(--nsi-border);font-size:10.5px;padding-top:8px!important}
.nsi-grid .g-line-cell{font-weight:600;color:var(--nsi-text);font-size:11px;border-right:2px solid var(--nsi-border)}
.nsi-grid td.c-frozen{position:relative}
.nsi-grid .lock-ic{position:absolute;top:1px;right:1px;width:10px;height:10px;color:var(--nsi-text-muted);opacity:.8;stroke-width:2.5}
.nsi-grid td.c-frozen:hover{outline:1.5px solid var(--nsi-primary);outline-offset:-1px;cursor:pointer}
.nsi-grid td.c-susd{background:var(--nsi-t-neutral);color:var(--nsi-text-muted);font-style:italic;font-size:10.5px}
.nsi-grid .diff-badge{display:inline-block;margin-left:3px;font-size:8px;padding:0 3px;border-radius:3px;background:var(--nsi-t-info);color:var(--nsi-x-info);vertical-align:1px;font-style:normal}
.nsi-token-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--nsi-t-ext);color:var(--nsi-x-ext);border:1px solid var(--nsi-b-ext)}
.nsi-grid-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--nsi-text-muted);margin:6px 2px 10px}
.nsi-grid-legend span{display:inline-flex;align-items:center;gap:4px}
.nsi-grid-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;border:1px solid var(--nsi-border)}
.nsi-grid .pending-ic{position:absolute;bottom:1px;right:1px;width:9px;height:9px;color:var(--nsi-x-info);opacity:.85}

/* ── one-shot highlight flash for [Fix →] in-page focus (GS-7 "load cell → in-grid focus") —
   discrete feedback, not ambient motion; respects reduced-motion like every other animation. */
.flash-hi{animation:nsi-flash 1.6s ease}
@keyframes nsi-flash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 3px var(--nsi-primary) inset}}
@media (prefers-reduced-motion: reduce){.flash-hi{animation:none;box-shadow:0 0 0 3px var(--nsi-primary) inset}}

/* ── 13 §3.2a CapacityBar (v1.10, Phase C design-quality refresh, 00 §26 Q11-3) — glance
   indicator for any value expressed as a proportion of a ceiling (PlanningGrid load/batches
   cells, PB-MONTHLY CRP HEAT rows). Bands reuse success/warning/high/critical verbatim — zero
   new hex (IS-01). >100% gets a thicker bar AND a hatch fill so the state never depends on
   hue alone (WCAG 1.4.1, 13 §6 v1.10 addendum). Number stays primary; the bar is a support. */
.nsi-capcell{display:flex;flex-direction:column;gap:3px;align-items:stretch;min-width:56px}
.nsi-capval{font-family:var(--nsi-mono);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px;white-space:nowrap}
.nsi-capbar{height:5px;border-radius:3px;background:var(--nsi-t-neutral);overflow:hidden}
.nsi-capbar i{display:block;height:100%;border-radius:3px;font-style:normal}
.nsi-capbar.cap-ok i{background:var(--nsi-success)}
.nsi-capbar.cap-warn i{background:var(--nsi-warning)}
.nsi-capbar.cap-high i{background:var(--nsi-high)}
.nsi-capbar.cap-over{height:7px;background:repeating-linear-gradient(135deg,var(--nsi-t-crit),var(--nsi-t-crit) 4px,var(--nsi-card) 4px,var(--nsi-card) 7px)}
.nsi-capbar.cap-over i{background:var(--nsi-critical)}

/* ── 13 §3.5a DeltaChip (v1.10, Phase C) — direction + signed magnitude variance chip,
   replaces icon-only Δ markers. Existing StatusBadge triads only — zero new hex (IS-01). */
.nsi-dchip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:1.5px 7px;border-radius:999px;border:1px solid;font-family:var(--nsi-mono);white-space:nowrap;line-height:1.5}
.nsi-dchip.ok{background:var(--nsi-t-success);border-color:var(--nsi-b-success);color:var(--nsi-x-success)}
.nsi-dchip.amber{background:var(--nsi-t-warn);border-color:var(--nsi-b-warn);color:var(--nsi-x-warn)}
.nsi-dchip.red{background:var(--nsi-t-crit);border-color:var(--nsi-b-crit);color:var(--nsi-x-crit)}

/* ── M4 PPS-MPS-DAILY — day-gantt grid (00 §26 Q12 flow map; tokens only, IS-01) ── */
.nsi-dg{border-collapse:collapse;width:max-content;font-size:10.5px}
.nsi-dg th,.nsi-dg td{border:1px solid var(--nsi-border);padding:2px 4px;text-align:center;min-width:34px;height:26px}
.nsi-dg th{background:var(--nsi-bg);font-weight:600;position:sticky;top:0;z-index:2}
.nsi-dg .dg-line{position:sticky;left:0;background:var(--nsi-card);z-index:3;min-width:92px;text-align:left;font-weight:600}
.nsi-dg th.dg-line{z-index:4}
.nsi-dg td.d-wknd{background:var(--nsi-t-neutral)}
.nsi-dg td.d-pre{background:var(--nsi-bg);color:var(--nsi-muted)}
.nsi-dg td.d-seg{padding:0;position:relative;cursor:default}
.nsi-dg td.d-seg.sel{outline:2px solid var(--nsi-primary);outline-offset:-2px}
.d-bar{height:100%;min-height:24px;display:flex;align-items:center;justify-content:flex-start;font-size:8.5px;line-height:1.15;padding:1px 3px;white-space:nowrap;overflow:visible}
.d-bar.exec{background:var(--nsi-teal);color:var(--nsi-navy)}
.d-bar.plan{background:var(--nsi-high);color:var(--nsi-card)}
.d-bar.sd{background:repeating-linear-gradient(135deg,var(--nsi-t-neutral),var(--nsi-t-neutral) 5px,var(--nsi-b-neutral) 5px,var(--nsi-b-neutral) 9px);color:var(--nsi-text)}
.d-lbl{font-weight:700;text-shadow:none}
.d-ev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}
.d-ev.ev-type{background:repeating-linear-gradient(135deg,var(--nsi-yellow-fill),var(--nsi-yellow-fill) 4px,var(--nsi-card) 4px,var(--nsi-card) 7px);color:var(--nsi-text)}
.d-ev.ev-emerg{background:repeating-linear-gradient(135deg,var(--nsi-t-crit),var(--nsi-t-crit) 4px,var(--nsi-card) 4px,var(--nsi-card) 7px);color:var(--nsi-x-crit)}
.d-ev.ev-x{color:var(--nsi-text)}
.dg-evlane td{height:20px;padding:0}
.dg-evchip{display:inline-block;font-size:8px;font-weight:700;padding:0 3px;border-radius:3px;background:var(--nsi-t-crit);border:1px solid var(--nsi-b-crit);color:var(--nsi-x-crit);white-space:nowrap}
.dg-consum td{background:var(--nsi-t-info, var(--nsi-primary-light))}
.dg-consum td.editable{cursor:pointer;font-weight:700;color:var(--nsi-primary)}

/* ── 13 §3.13 CalendarBoard ◆ (v2.0, M6 — first shipped instance; RW/SD share this component,
   13-DESIGN-SYSTEM.md addendum on M6 close-out). Month grid; entry chips reuse StatusBadge
   triads verbatim (IS-01 — zero new hex); legend fixed per Figma (SR-RWCA-03). ── */
.nsi-cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--nsi-border);border-radius:var(--r-card);overflow:hidden}
.nsi-cal-dow{background:var(--nsi-bg);color:var(--nsi-text-muted);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;text-align:center;border-bottom:1px solid var(--nsi-border)}
.nsi-cal-day{min-height:78px;border-right:1px solid var(--nsi-border);border-bottom:1px solid var(--nsi-border);padding:5px 6px;font-size:11px;display:flex;flex-direction:column;gap:3px}
.nsi-cal-day:nth-child(7n){border-right:0}
.nsi-cal-day.cd-other{background:var(--nsi-bg)}
.nsi-cal-day.cd-other .cd-num{color:var(--nsi-text-muted)}
.nsi-cal-day.cd-today{background:var(--nsi-primary-light)}
.nsi-cal-day .cd-num{font-weight:600;font-variant-numeric:tabular-nums}
.nsi-cal-chip{display:block;padding:2px 6px;border-radius:4px;font-size:9.5px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:1px solid;background:none;text-align:left;width:100%}
.nsi-cal-chip.cc-sched{background:var(--nsi-t-info);color:var(--nsi-x-info);border-color:var(--nsi-select)}
.nsi-cal-chip.cc-prog{background:var(--nsi-t-warn);color:var(--nsi-x-warn);border-color:var(--nsi-b-warn)}
.nsi-cal-chip.cc-reject{background:var(--nsi-t-crit);color:var(--nsi-x-crit);border-color:var(--nsi-b-crit)}
.nsi-cal-chip.cc-done{background:var(--nsi-t-success);color:var(--nsi-x-success);border-color:var(--nsi-b-success)}
.nsi-cal-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--nsi-text-muted);margin-top:10px}
.nsi-cal-legend .lg-sw{display:inline-flex;align-items:center;gap:6px}
.nsi-cal-legend .lg-sw i{width:9px;height:9px;border-radius:2px;display:inline-block;border:1px solid}

/* ── 13 §3.14 PrintFrame ◆ (GS-15, v2.0, M6 — first shipped instance: RW-INSTRUCTION).
   A4, no shell chrome (global rule above already hides sidebar/topbar/fab/toasts on print);
   this block additionally hides page-local action bars and shows the print-only footer. ── */
.nsi-printfoot{display:none}
@media print{
  .nsi-crumb,.nsi-pagehead .ph-right,[data-noprint]{display:none!important}
  .nsi-content{padding:0;max-width:none}
  .nsi-printfoot{display:block;font-size:9.5px;color:var(--nsi-text-muted);border-top:1px solid var(--nsi-border);margin-top:18px;padding-top:8px}
}
.dg-consum td.editable:hover{background:var(--nsi-primary-light)}