/* ═══ 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}
.nsi-pagehead .ph-right{margin-left:auto;font-size:12px;color:var(--nsi-text-muted);padding-bottom:3px}

/* ── 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)}
.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}
.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)}
.nsi-fab:hover{transform:scale(1.06)}
.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 ── */
.nsi-btn{background:var(--nsi-primary);color:var(--nsi-card);border:0;border-radius:var(--r-chip);padding:9px 16px;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)}
select,input[type=text],input:not([type]){font-family:var(--nsi-font);font-size:12.5px;padding:8px 10px;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)}