/* Nusva Design System 3.6 · component styles. Two weights (400, 600), 12px floor, teal only on what can be clicked or is selected. Group by space and ground, not by rules. Values follow VISUAL-REFERENCE-v0.7; colours, space, radius from tokens. The 3.6 place-colour layer is at the end. */
.nv{font-family:var(--font-sans);font-size:0.875rem;line-height:1.45;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
.nv *{box-sizing:border-box}
.nv h1,.nv h2,.nv h3,.nv h4,.nv h5,.nv h6,.nv b,.nv strong,.nv th{font-weight:600}
/* Raised: the selected item on a grouped ground. Lighter than the ground in both themes. */
:root,[data-theme="light"]{--nv-raised:var(--surface)}
[data-theme="dark"]{--nv-raised:var(--soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--nv-raised:var(--soft)}}
.nv .num,.nv table{font-variant-numeric:tabular-nums}
.nv :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nv-eyebrow{font-size:0.75rem;line-height:1.35;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.nv-micro{display:block;font-size:0.75rem;letter-spacing:0;color:var(--muted);font-weight:600}
.nv-muted{color:var(--muted)}

/* Button */
.nv-btn{font:inherit;font-size:0.8125rem;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--radius-small);padding:7px 10px;cursor:pointer;transition:background var(--duration-quick,160ms) var(--easing-standard,ease),border-color var(--duration-quick,160ms) var(--easing-standard,ease),color var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-btn:hover{background:var(--surfaceMuted)}
.nv-btn.is-active{border-color:color-mix(in srgb,var(--teal) 50%,var(--line));background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.nv-btn.is-primary{background:var(--teal);background-image:var(--gradient-action);border-color:transparent;color:var(--on-teal);font-weight:600}
.nv-btn.is-primary:hover{background:var(--teal);background-image:var(--gradient-action);filter:brightness(.9)}
.nv-btn.is-destructive{color:var(--critical)}
.nv-btn:disabled{opacity:.48;cursor:not-allowed}
.nv-link{font:inherit;border:0;background:none;color:var(--teal);font-weight:400;cursor:pointer;padding:5px;white-space:nowrap}
.nv-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Decision head + metric */
.nv-decision-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-bottom:12px}
.nv-decision-head h3{font-size:2rem;line-height:1.15;letter-spacing:-.021em;font-weight:600;margin:6px 0 8px;text-wrap:balance}
.nv-decision-head p{margin:0;color:var(--muted)}
.nv-source{font-size:0.75rem;color:var(--muted);text-align:right}
.nv-metric{font-family:var(--font-data);font-size:3rem;letter-spacing:-.022em;font-weight:600;margin:30px 0 2px;font-variant-numeric:tabular-nums;line-height:1}
.nv-metric-label{color:var(--muted)}
.nv-facts{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 0;color:var(--muted)}
.nv-facts strong{color:var(--text)}
.nv-unknown{color:var(--muted);font-style:italic}

/* Signal row / attention queue */
.nv-attention{margin-top:36px}
.nv-attention-title{font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:4px}
.nv-signal{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--line) 70%,transparent)}
.nv-signal:last-child{box-shadow:none}
.nv-signal-num{font-size:1.5625rem;font-weight:600;font-variant-numeric:tabular-nums}
.nv-signal strong{display:block}
.nv-signal p{margin:3px 0;color:var(--muted);font-size:0.8125rem}
.nv-signal.is-blocking .nv-signal-num{color:var(--critical)}

/* Nexa note */
.nv-nexa{background:color-mix(in srgb,var(--teal) 7%,var(--surface));border-radius:var(--radius-medium);padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px}
.nv-nexa-icon{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:color-mix(in srgb,var(--teal) 14%,var(--surface));color:var(--teal);margin-top:1px}
.nv-nexa small{color:var(--muted);display:block;margin-bottom:3px;font-size:0.75rem}
.nv-nexa p{margin:0}
.nv-nexa .nv-why{color:var(--teal);cursor:pointer;white-space:nowrap;background:none;border:0;font:inherit;font-weight:400;padding:0}
.nv-intel{background:var(--surfaceMuted);border-radius:var(--radius-large);padding:6px}
.nv-intel-level{width:100%;display:grid;grid-template-columns:34px 1fr;gap:8px;text-align:left;border:0;border-radius:var(--radius-medium);background:transparent;color:var(--muted);padding:13px 14px;font:inherit;cursor:pointer}
.nv-intel-level.is-active{color:var(--text);background:var(--nv-raised);box-shadow:var(--shadow-raised)}
.nv-intel-level:not(.is-active)>span{color:var(--muted)}
.nv-intel-level>span{font-size:0.75rem;color:var(--teal);font-weight:600}
.nv-intel-level b{font-size:0.8125rem}
.nv-intel-level p{font-size:0.75rem;color:var(--muted);margin:3px 0}

/* Decision strip */
.nv-strip{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;background:var(--surfaceMuted);border-radius:var(--radius-large);padding:4px}
.nv-strip>div{padding:18px}
.nv-strip>i{font-style:normal;color:var(--muted);align-self:center;text-align:center}
.nv-strip b{display:block;font-size:1.0625rem;margin-top:5px}
.nv-strip span{font-size:0.75rem;color:var(--muted)}
.nv-strip .is-action{background:var(--nv-raised);border-radius:var(--radius-medium);box-shadow:var(--shadow-raised)}
.nv-strip .is-action b{color:var(--teal)}

/* Context rail */
.nv-rail{background:var(--surfaceMuted);border-radius:var(--radius-large);padding:20px;width:var(--rail-width);max-width:100%}
.nv-rail h3{font-size:1.25rem;letter-spacing:-.017em;margin:5px 0 2px}
.nv-rail .nv-sub{color:var(--muted);margin-bottom:20px}
.nv-rail-section{padding:14px 0 4px}
.nv-rail-row{display:flex;justify-content:space-between;gap:16px;margin:8px 0}
.nv-rail-row span{color:var(--muted)}

/* Evidence trail */
.nv-evidence{font-size:0.75rem;padding:12px 0 0;color:var(--muted)}
.nv-evidence ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;color:var(--text)}
.nv-evidence li+li:before{content:"→";color:var(--muted);margin-right:6px}
.nv-evidence time{display:block;margin-top:6px}

/* Data table + control language */
.nv-table-wrap{border:1px solid var(--line);border-radius:var(--radius-medium);background:var(--surface);overflow:auto}
.nv-filterbar,.nv-selectionbar{display:flex;align-items:center;gap:6px;padding:11px 13px;border-bottom:1px solid var(--line)}
.nv-filterbar .nv-btn,.nv-selectionbar .nv-btn{font-size:0.75rem;padding:6px 9px;background:transparent}
.nv-filterbar .nv-count{color:var(--attention);font-weight:600}
.nv-search{border:0;border-radius:var(--radius-small);padding:7px 10px;color:var(--muted);font-size:0.75rem;min-width:180px;background:var(--surfaceMuted)}
.nv-spacer{flex:1}
.nv-selectionbar{background:color-mix(in srgb,var(--teal) 5%,var(--surface))}
.nv-selectionbar b{margin-right:8px}
.nv-selectionbar .is-destructive{margin-left:auto}
.nv-table{border-collapse:collapse;width:100%;font-family:var(--font-data);font-size:0.8125rem}
.nv-table th,.nv-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.nv-table th{color:var(--muted);font-weight:600;background:var(--surfaceMuted);position:sticky;top:0;font-size:0.75rem}
.nv-table td small{color:var(--muted);display:block}
.nv-table tr.is-selected{background:color-mix(in srgb,var(--teal) 6%,var(--surface))}
.nv-status{font-weight:600}
.nv-status.is-attention{color:var(--attention)}
.nv-status.is-positive{color:var(--positive)}
.nv-status.is-critical{color:var(--critical)}

/* States */
.nv-states{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nv-state{background:var(--surfaceMuted);border-radius:var(--radius-large);padding:18px;min-height:220px}
.nv-state>b{display:block;margin:5px 0 18px}
.nv-state p{font-size:0.75rem;color:var(--muted)}
.nv-skeleton i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--line) 45%,var(--surface)),var(--line));background-size:200% 100%;margin:10px 0;animation:nv-shimmer 1.5s infinite}
.nv-skeleton i:nth-child(2){width:70%}.nv-skeleton i:nth-child(3){height:42px}.nv-skeleton i:nth-child(4){width:45%}
@keyframes nv-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.nv-skeleton i{animation:none}}
.nv-empty-symbol{font-size:2.1875rem;color:var(--positive);margin-top:20px}
.nv-error-line{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;padding:10px 12px;border-radius:var(--radius-medium);background:color-mix(in srgb,var(--attention) 9%,var(--surface));font-size:0.75rem;color:var(--text)}
.nv-error-line>.nv-icon{color:var(--attention);margin-top:1px}
.nv-progress{height:6px;border-radius:3px;overflow:hidden;background:var(--line);margin:34px 0 10px}
.nv-progress i{display:block;height:100%;background:var(--teal)}
.nv-progress.is-positive i{background:var(--gradient-meter)}

/* Command palette */
.nv-scrim{background:rgba(7,15,20,.35);display:flex;justify-content:center;padding:32px 16px}
.nv-palette{width:min(620px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-large);box-shadow:var(--shadow-overlay);overflow:hidden}
.nv-palette input{width:100%;border:0;border-bottom:1px solid var(--line);padding:18px 20px;background:transparent;color:var(--text);outline:0;font:inherit;font-size:1rem}
.nv-result{padding:11px 14px;margin:0 6px;border-radius:var(--radius-small);display:flex;justify-content:space-between}
.nv-palette>div:last-child{padding:6px 0}
.nv-result.is-active{background:color-mix(in srgb,var(--teal) 6%,var(--surface))}
.nv-result span{color:var(--muted);font-size:0.75rem}

/* Decision Spine */
.nv-spine{display:grid;grid-template-columns:260px minmax(0,1fr);gap:8px;background:var(--surface)}
.nv-spine-list{position:relative;background:var(--surfaceMuted);border-radius:var(--radius-large);padding:8px;align-self:start}
.nv-spine-node:not(:last-child)::after{content:"";position:absolute;left:27px;top:31px;bottom:-14px;width:1px;background:var(--line)}
.nv-spine-node{position:relative;display:grid;grid-template-columns:14px 1fr;gap:12px;width:100%;text-align:left;border:0;border-radius:var(--radius-medium);background:transparent;color:var(--text);font:inherit;padding:13px 14px 13px 21px;cursor:pointer}
.nv-spine-node>i{width:13px;height:13px;border-radius:50%;border:2px solid var(--slate);background:var(--surfaceMuted);margin-top:3px}
.nv-spine-node b{display:block;font-size:0.9375rem}
.nv-spine-node span{font-size:0.75rem;color:var(--muted)}
.nv-spine-node.is-active{background:var(--nv-raised);box-shadow:var(--shadow-raised)}
.nv-spine-node.is-active>i{border-color:var(--teal);background:var(--teal)}
.nv-spine-focus{padding:26px 30px}
.nv-focus-index{font-family:var(--font-data);font-size:0.8125rem;color:var(--teal);font-weight:600}
.nv-spine-focus h3{font-size:1.625rem;letter-spacing:-.021em;margin:6px 0 8px;line-height:1.12;text-wrap:balance}
.nv-spine-focus>p{color:var(--muted);margin:0;max-width:520px}
.nv-focus-proof{margin-top:22px;padding:12px 14px;background:var(--surfaceMuted);border-radius:var(--radius-medium)}
.nv-focus-proof span{display:block;font-size:0.75rem;color:var(--muted);margin-bottom:3px}
.nv-focus-number{display:flex;align-items:baseline;gap:10px;margin:18px 0}
.nv-focus-number strong{font-family:var(--font-data);font-size:2.125rem;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.nv-focus-number span{color:var(--muted)}

/* Human Lens */
.nv-lens{display:grid;grid-template-columns:270px minmax(0,1fr);gap:8px;background:var(--surface)}
.nv-lens-list{background:var(--surfaceMuted);border-radius:var(--radius-large);padding:6px;align-self:start}
.nv-person{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;width:100%;border:0;border-radius:var(--radius-medium);background:transparent;color:var(--text);font:inherit;text-align:left;padding:11px 12px;cursor:pointer}
.nv-person>i,.nv-lens-id>i{font-style:normal;display:grid;place-items:center;border-radius:50%;background:var(--line);color:var(--text);font-weight:600;font-size:0.75rem;width:34px;height:34px}
.nv-person b{display:block;font-size:0.8125rem}
.nv-person span{font-size:0.75rem;color:var(--muted)}
.nv-person em{font-style:normal;font-size:0.75rem;color:var(--muted)}
.nv-person.is-active{background:var(--nv-raised);box-shadow:var(--shadow-raised)}
.nv-person.is-active em{color:var(--teal);font-weight:600}
.nv-lens-body{padding:22px 26px}
.nv-lens-id{display:flex;gap:14px;align-items:center}
.nv-lens-id>i{width:52px;height:52px;font-size:1rem}
.nv-lens-id h3{font-size:1.25rem;letter-spacing:-.017em;margin:2px 0}
.nv-lens-id p{margin:0;color:var(--muted);font-size:0.8125rem}
.nv-lens-axis{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surfaceMuted);border-radius:var(--radius-medium);padding:2px 14px;margin:20px 0}
.nv-lens-axis div{padding:12px 0}
.nv-lens-axis span{display:block;font-size:0.75rem;color:var(--muted)}
.nv-bar{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:12px;margin:10px 0;font-size:0.8125rem}
.nv-bar span{display:block;height:6px;background:var(--soft)}
.nv-bar span i{display:block;height:100%;background:var(--slate)}
.nv-bar.is-focus span i{background:var(--teal)}
.nv-lens-note{margin-top:18px;font-size:0.75rem;color:var(--muted)}
.nv-lens-note b{color:var(--text)}
@media (max-width:650px){.nv-strip{grid-template-columns:1fr}.nv-strip>i{display:none}.nv-states{grid-template-columns:1fr 1fr}.nv-spine,.nv-lens{grid-template-columns:1fr}}

/* ===== Charts (from VISUAL-REFERENCE-v0.7 chart lab, gallery and anatomy) ===== */
.nv-viz{background:var(--surface);border-radius:var(--radius-large);padding:20px}
.nv-viz-head{display:flex;justify-content:space-between;gap:20px;align-items:start}
.nv-viz-head b{display:block;font-size:0.9375rem;margin-top:3px}
.nv-viz-head>span{font-size:0.75rem;color:var(--muted)}
.nv-chart{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.nv-chart .grid line{stroke:var(--line);stroke-width:1}
.nv-chart .ref{fill:none;stroke:var(--slate);stroke-width:2;stroke-dasharray:5 5}
.nv-chart .main{fill:none;stroke:var(--teal);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.nv-chart .second{fill:none;stroke:var(--series-secondary);stroke-width:2}
.nv-chart .forecast{fill:none;stroke:var(--cyan);stroke-width:3;stroke-dasharray:6 5}
.nv-chart .pt{fill:var(--teal);stroke:var(--surface);stroke-width:2}
.nv-chart .xhair{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.nv-chart .event{stroke:var(--attention);stroke-width:1;stroke-dasharray:2 3}
.nv-chart .event-t{fill:var(--attention);font-size:12px;font-weight:600;font-family:var(--font-sans)}
.nv-chart .lbl{fill:var(--text);font-size:12px;font-weight:600;font-family:var(--font-data)}
.nv-chart .axis{fill:var(--muted);font-size:12px;font-family:var(--font-data)}
.nv-chart-wrap{position:relative}
.nv-tooltip{position:absolute;border:1px solid var(--line);background:var(--surface);padding:10px 12px;box-shadow:var(--shadow-tooltip);border-radius:var(--radius-small);pointer-events:none;font-size:0.75rem;min-width:120px}
.nv-tooltip small{display:block;font-size:0.75rem;color:var(--muted)}
.nv-tooltip b{display:block;font-family:var(--font-data);font-size:0.9375rem;font-variant-numeric:tabular-nums}
.nv-tooltip span{font-size:0.75rem;color:var(--positive);font-weight:600}
.nv-tooltip span.is-neutral{color:var(--muted)}
.nv-tooltip span.is-critical{color:var(--critical)}
.nv-tooltip span.is-attention{color:var(--attention)}
.nv-chart-foot{padding-top:8px;margin-top:4px;display:flex;flex-wrap:wrap;gap:18px;font-size:0.75rem;color:var(--muted)}
.nv-key{display:inline-flex;align-items:center;gap:6px}
.nv-key i{display:inline-block;width:16px;height:0;border-top:3px solid var(--teal)}
.nv-key i.ref{border-top:2px dashed var(--slate)}
.nv-range{display:flex}
.nv-range button{font:inherit;font-size:0.75rem;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);min-height:2rem;padding:0 10px;cursor:pointer}
.nv-range button.is-active{color:var(--text);border-bottom:2px solid var(--teal);font-weight:600}
/* bars: gray first, one focus */
.nv-hbars>div{margin:14px 0}
.nv-hbars label{display:flex;justify-content:space-between;font-size:0.75rem}
.nv-hbars label em{font-style:normal;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.nv-hbars span{display:block;height:6px;background:var(--soft);margin-top:6px}
.nv-hbars i{display:block;height:100%;background:var(--slate)}
.nv-hbars .is-focus i{background:var(--teal)}
.nv-hbars .is-focus label{font-weight:600}
/* variance / bullet */
.nv-variance>div{display:grid;grid-template-columns:110px 1fr 60px;gap:12px;align-items:center;margin:16px 0}
.nv-variance label{font-size:0.75rem}
.nv-track{height:7px;background:var(--soft);position:relative}
.nv-track i{display:block;height:100%;background:var(--slate)}
.nv-track b{position:absolute;top:-4px;width:2px;height:15px;background:var(--text)}
.nv-variance em{font-style:normal;text-align:right;font-size:0.75rem;font-weight:600;font-family:var(--font-data);color:var(--positive)}
.nv-variance em.is-adverse{color:var(--critical)}
.nv-variance .is-adverse-row .nv-track i{background:var(--critical)}
/* histogram */
.nv-hist{height:150px;display:flex;align-items:end;gap:5px;margin-top:20px;border-bottom:1px solid var(--line)}
.nv-hist i{flex:1;background:var(--slate)}
.nv-hist i.is-focus{background:var(--teal)}
.nv-hist-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:0.75rem;margin-top:6px;font-family:var(--font-data)}
/* matrix */
.nv-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:16px}
.nv-matrix div{min-height:58px;padding:9px;font-size:0.75rem;border-radius:var(--radius-small);background:var(--surfaceMuted)}
.nv-matrix div b{display:block;font-family:var(--font-data);font-size:0.9375rem}
.nv-matrix .is-hot{background:color-mix(in srgb,var(--teal) 14%,var(--surface));font-weight:600}
.nv-matrix .is-risk{background:color-mix(in srgb,var(--critical) 14%,var(--surface));font-weight:600}
.nv-axisnote{font-size:0.75rem;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}
/* funnel */
.nv-funnel{display:flex;flex-direction:column;align-items:center;margin-top:16px}
.nv-funnel div{background:var(--soft);border-bottom:1px solid var(--surface);padding:8px 12px;display:flex;justify-content:space-between;gap:12px;min-width:170px}
.nv-funnel b{font-size:0.8125rem;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.nv-funnel span{font-size:0.75rem;color:var(--muted)}
.nv-funnel .is-focus{background:color-mix(in srgb,var(--teal) 18%,var(--surface))}
.nv-funnel .is-focus span{color:var(--text);font-weight:600}
/* composition + aging (stacked bars) */
.nv-stack{display:flex;height:14px;margin-top:14px;gap:2px}
.nv-stack i{display:block;height:100%;background:var(--slate)}
.nv-stack i:first-child{background:var(--teal)}
.nv-stack i.is-risk{background:var(--critical)}
.nv-stack-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:0.75rem}
.nv-stack-legend span{display:inline-flex;gap:6px;align-items:center}
.nv-stack-legend span::before{content:"";width:10px;height:10px;background:var(--slate)}
.nv-stack-legend span.is-primary::before{background:var(--teal)}
.nv-stack-legend span.is-risk::before{background:var(--critical)}
.nv-stack-legend b{font-family:var(--font-data)}
/* single value + microtrend */
.nv-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;background:transparent}
.nv-kpi>div{background:var(--surface);border-radius:var(--radius-large);padding:16px;box-shadow:var(--shadow-card)}
.nv-kpi strong{display:block;font-family:var(--font-data);font-size:2.125rem;letter-spacing:-.022em;font-weight:600;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.nv-kpi svg{width:100%;height:40px;display:block;margin:6px 0}
.nv-kpi polyline{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round}
.nv-kpi .nv-unknown{display:block;font-size:1.375rem;margin:12px 0 4px}
.nv-kpi p{margin:0;font-size:0.75rem;color:var(--muted)}
.nv-kpi p.is-positive{color:var(--positive);font-weight:600}

/* ===== Controls ===== */
.nv-field{display:grid;gap:6px;max-width:320px;align-content:start}
.nv-field label{font-size:0.8125rem;font-weight:600}
.nv-field .nv-help{font-size:0.75rem;color:var(--muted)}
.nv-field .nv-err{font-size:0.75rem;color:var(--critical);font-weight:600}
.nv-input,.nv-select{font:inherit;font-size:0.875rem;color:var(--text);background:var(--surface);border:1px solid var(--slate);border-radius:var(--radius-small);padding:8px 10px;min-height:2.375rem;width:100%}
.nv-input::placeholder{color:var(--muted)}
.nv-input:focus,.nv-select:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--teal)}
.nv-input.is-invalid{border-color:var(--critical)}
.nv-input:disabled{background:var(--surfaceMuted);color:var(--muted);cursor:not-allowed}
.nv-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.nv-affix{display:flex;align-items:center;border:1px solid var(--slate);border-radius:var(--radius-small);background:var(--surface)}
.nv-affix span{padding:0 10px;color:var(--muted);font-size:0.8125rem;font-family:var(--font-data)}
.nv-affix .nv-input{border:0;min-height:2.25rem;font-family:var(--font-data);text-align:right;font-variant-numeric:tabular-nums}
.nv-check{display:flex;align-items:center;gap:10px;font-size:0.875rem;cursor:pointer;margin:6px 0}
.nv-check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--slate);border-radius:4px;background:var(--surface);display:grid;place-items:center;margin:0;cursor:pointer}
.nv-check input[type=radio]{border-radius:50%}
.nv-check input:checked{background:var(--teal);border-color:var(--teal)}
.nv-check input[type=checkbox]:checked::after{content:"";width:5px;height:9px;border:solid var(--on-teal);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.nv-check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-teal)}
.nv-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nv-toggle{display:flex;align-items:center;gap:10px;font-size:0.875rem}
.nv-toggle input{appearance:none;width:36px;height:20px;border-radius:10px;background:var(--slate);position:relative;margin:0;cursor:pointer;transition:background var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:left var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-toggle input:checked{background:var(--teal)}
.nv-toggle input:checked::after{left:18px}
/* tabs */
.nv-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow:auto}
.nv-tab{font:inherit;font-size:0.875rem;border:0;background:transparent;color:var(--muted);padding:10px 13px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.nv-tab.is-active{color:var(--text);border-bottom-color:var(--teal);font-weight:600}
.nv-tab .nv-count{font-family:var(--font-data);font-size:0.75rem;margin-left:6px;color:var(--muted)}
.nv-seg{display:inline-flex;border-radius:var(--radius-small);padding:2px;background:var(--surfaceMuted)}
.nv-seg button{font:inherit;font-size:0.8125rem;border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:4px;cursor:pointer}
.nv-seg button.is-active{background:var(--nv-raised);color:var(--text);font-weight:600;box-shadow:var(--shadow-raised)}
/* status badge: semantic pill, text on surface */
.nv-badge{display:inline-flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;padding:3px 10px;border-radius:999px;border:0;background:color-mix(in srgb,currentColor 6%,var(--surface));line-height:1.4;white-space:nowrap}
.nv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nv-badge.is-positive{color:var(--positive)}
.nv-badge.is-attention{color:var(--attention)}
.nv-badge.is-critical{color:var(--critical)}
.nv-badge.is-neutral{color:var(--muted)}
.nv-badge.is-syariah{color:var(--finansial-gold-text)}
.nv-badge.is-syariah::before{background:var(--syariah)}
/* app shell */
.nv-shell{display:grid;grid-template-rows:var(--topbar-height) 1fr;border:1px solid var(--line);border-radius:var(--radius-medium);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-workspace)}
.nv-top{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:var(--chrome)}
.nv-top-brand{display:flex;align-items:center;gap:10px;font-weight:600}
.nv-top-brand img{width:28px;height:28px;border-radius:6px}
.nv-top-brand span{color:var(--muted);font-weight:400;font-size:0.8125rem}
.nv-top-brand img.nv-lockup{width:auto;height:48px;margin:-6px 0 -6px -12px;border-radius:0}
.nv-top-brand .nv-brand-alt{display:none;align-items:center;gap:10px}
[data-theme="dark"] .nv-top-brand .nv-lockup{display:none}
[data-theme="dark"] .nv-top-brand .nv-brand-alt{display:inline-flex}
.nv-top-brand img.nv-lockup-dark{width:auto;height:48px;margin:-6px 0 -6px -12px;border-radius:0}
.nv-body{display:grid;grid-template-columns:var(--nav-width) minmax(0,1fr);min-height:0}
.nv-nav{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column}
.nv-ws{padding:6px 8px 10px;margin-bottom:4px}
.nv-ws small{display:block;color:var(--muted);font-size:0.75rem}
.nv-ws strong{display:block;font-size:0.8125rem;margin-top:3px}
.nv-nav-label{font-size:0.75rem;font-weight:600;color:var(--muted);padding:14px 8px 4px}
.nv-nav-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-small);color:var(--muted);font-size:0.8125rem;text-decoration:none}
.nv-nav-item i{width:1.25rem;display:inline-flex;justify-content:center;font-style:normal;color:var(--muted)}
.nv-nav-item.is-active i{color:var(--teal)}
.nv-nav-item.is-active{background:var(--surfaceMuted);color:var(--text);font-weight:600}
.nv-nav-item:not(.is-active):hover{background:color-mix(in srgb,var(--surfaceMuted) 60%,transparent);color:var(--text)}
.nv-nav-label{margin-top:8px}
.nv-nav-label:first-child{margin-top:0}
.nv-work{min-width:0;display:flex;flex-direction:column}
.nv-workbar{height:var(--workbar-height);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}
.nv-crumb{color:var(--muted);font-size:0.75rem}
.nv-cmd{font:inherit;font-size:0.75rem;border:0;border-radius:var(--radius-small);padding:7px 10px;color:var(--muted);background:var(--surfaceMuted);min-width:200px;text-align:left}
.nv-content{padding:24px 26px}
.nv-content h3{font-size:1.625rem;letter-spacing:-.021em;margin:4px 0 6px;line-height:1.12;text-wrap:balance}
.nv-content p{margin:0;color:var(--muted)}
@media (max-width:650px){.nv-body{grid-template-columns:var(--nav-compact) 1fr}.nv-nav-label,.nv-ws{display:none}.nv-nav-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nv-kpi{grid-template-columns:1fr}}

/* Icons (Lucide geometry, stroke 1.75, currentColor) */
.nv-icon{display:inline-block;flex:none;vertical-align:-.18em}
.nv-btn .nv-icon{margin-right:6px}
.nv-cmd{display:inline-flex;align-items:center;gap:6px}
.nv-cmd kbd{font:inherit;font-size:0.75rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.nv-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.nv-icon-grid div{border-radius:var(--radius-medium);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;font-size:0.75rem;color:var(--muted);text-align:center}
.nv-icon-grid svg{color:var(--text)}
.nv-icon-group{font-size:0.8125rem;color:var(--text);font-weight:600;margin:18px 0 8px}

/* ---------- Adaptive foundations: touch targets, motion, text size, icon weight ---------- */
:root{--nv-move:8px;--nv-scale:.98}
.nv-btn{min-height:2rem}
.nv-seg button,.nv-tab,.nv-cmd{min-height:2rem}
/* Text size follows the reader: every size is in rem, so the browser or OS text setting scales the UI. Apps offering their own setting set data-text-size on <html>. */
html[data-text-size="large"]{font-size:112.5%}
html[data-text-size="xlarge"]{font-size:125%}
html[data-text-size="xxlarge"]{font-size:150%}
/* Motion: one vocabulary, from the duration and easing tokens */
.nv-tab,.nv-seg button,.nv-range button,.nv-nav-item,.nv-result,.nv-spine-node,.nv-person,.nv-link,.nv-cmd{transition:background var(--duration-quick,160ms) var(--easing-standard,ease),color var(--duration-quick,160ms) var(--easing-standard,ease),border-color var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-input,.nv-select,.nv-check input{transition:border-color var(--duration-instant,100ms) var(--easing-standard,ease),background var(--duration-instant,100ms) var(--easing-standard,ease)}
.nv-bar i,.nv-hbars i,.nv-track i,.nv-progress i,.nv-stack i,.nv-hist i{transition:width var(--duration-standard,240ms) var(--easing-standard,ease),height var(--duration-standard,240ms) var(--easing-standard,ease)}
@keyframes nv-enter{from{opacity:0;transform:translateY(var(--nv-move)) scale(var(--nv-scale))}to{opacity:1;transform:none}}
@keyframes nv-fade{from{opacity:0}to{opacity:1}}
@keyframes nv-slide-in{from{opacity:0;transform:translateX(calc(var(--nv-move) * 3))}to{opacity:1;transform:none}}
.nv-scrim{animation:nv-fade var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-palette{animation:nv-enter var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-tooltip{animation:nv-fade var(--duration-quick,160ms) var(--easing-enter,ease-out)}
.nv-rail{animation:nv-slide-in var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-spine-focus,.nv-lens-body,.nv-enter{animation:nv-enter var(--duration-emphasis,360ms) var(--easing-emphasized,ease-out)}
/* Reduced motion: movement becomes a short dissolve, loops stop. System setting or an app-level .nv-reduce-motion class. */
@media (prefers-reduced-motion:reduce){
:root{--nv-move:0px;--nv-scale:1}
.nv-skeleton i{animation:none}
.nv *{scroll-behavior:auto!important}
}
.nv-reduce-motion{--nv-move:0px;--nv-scale:1}
.nv-reduce-motion .nv-skeleton i{animation:none}
/* Icons: weight follows the text beside it, like SF Symbols */
.nv-icon{stroke-width:1.75}
.nv-icon--light{stroke-width:1.5}
.nv-icon--medium,b .nv-icon,strong .nv-icon,.nv-btn.is-primary .nv-icon,.nv-nav-item.is-active .nv-icon,.nv-tab.is-active .nv-icon,.nv-link .nv-icon{stroke-width:2}
.nv-icon--bold,h1 .nv-icon,h2 .nv-icon,h3 .nv-icon{stroke-width:2.25}
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.nv-btn .nv-icon{margin-right:0}
/* Touch: 44px minimum hit area, Apple HIG size. Automatic on touch screens, or force with .nv-touch */
@media (pointer:coarse){
.nv-btn,.nv-input,.nv-select,.nv-tab,.nv-seg button,.nv-range button,.nv-cmd,.nv-nav-item,.nv-result,.nv-link{min-height:var(--target-touch,44px)}
.nv-link{display:inline-flex;align-items:center}
.nv-affix .nv-input{min-height:calc(var(--target-touch,44px) - 2px)}
.nv-check{min-height:var(--target-touch,44px);margin:0}
.nv-check input{width:22px;height:22px}
.nv-toggle{min-height:var(--target-touch,44px)}
.nv-toggle input{width:51px;height:31px;border-radius:16px}
.nv-toggle input::after{width:27px;height:27px}
.nv-toggle input:checked::after{left:22px}
.nv-spine-node,.nv-person{min-height:var(--target-touch,44px)}
}
.nv-touch .nv-btn,.nv-touch .nv-input,.nv-touch .nv-select,.nv-touch .nv-tab,.nv-touch .nv-seg button,.nv-touch .nv-range button,.nv-touch .nv-cmd,.nv-touch .nv-nav-item,.nv-touch .nv-result,.nv-touch .nv-link{min-height:var(--target-touch,44px)}
.nv-touch .nv-link{display:inline-flex;align-items:center}
.nv-touch .nv-affix .nv-input{min-height:calc(var(--target-touch,44px) - 2px)}
.nv-touch .nv-check{min-height:var(--target-touch,44px);margin:0}
.nv-touch .nv-check input{width:22px;height:22px}
.nv-touch .nv-toggle{min-height:var(--target-touch,44px)}
.nv-touch .nv-toggle input{width:51px;height:31px;border-radius:16px}
.nv-touch .nv-toggle input::after{width:27px;height:27px}
.nv-touch .nv-toggle input:checked::after{left:22px}
.nv-touch .nv-spine-node,.nv-touch .nv-person{min-height:var(--target-touch,44px)}

/* ---------- Accessibility ---------- */
.nv-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nv-skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--teal);color:var(--on-teal);padding:10px 14px;border-radius:var(--radius-small);font-weight:600;text-decoration:none}
.nv-skip:focus{top:12px}
.nv-shell{position:relative}
.nv-work:focus{outline:none}
.nv-chart:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
/* Windows High Contrast and other forced-colour modes: keep every boundary, state and mark visible */
@media (forced-colors:active){
.nv-btn,.nv-input,.nv-select,.nv-seg,.nv-cmd,.nv-badge,.nv-tooltip,.nv-palette,.nv-rail,.nv-shell,.nv-viz,.nv-kpi>div,.nv-table-wrap,.nv-spine-list,.nv-lens-list,.nv-intel,.nv-nexa,.nv-strip,.nv-state,.nv-error-line,.nv-focus-proof,.nv-lens-axis,.nv-matrix div,.nv-search{border:1px solid CanvasText}
.nv-btn.is-primary{background:Highlight;color:HighlightText;border-color:Highlight}
.nv-tab.is-active,.nv-range button.is-active{border-bottom-color:Highlight}
.nv-seg button.is-active,.nv-nav-item.is-active,.nv-spine-node.is-active,.nv-person.is-active,.nv-intel-level.is-active,.nv-result.is-active{outline:2px solid Highlight;outline-offset:-2px}
.nv-check input,.nv-toggle input{border:1px solid CanvasText}
.nv-check input:checked,.nv-toggle input:checked{background:Highlight}
.nv-hbars i,.nv-track i,.nv-hist i,.nv-stack i,.nv-progress i,.nv-bar i{background:CanvasText;forced-color-adjust:none}
.nv-hbars .is-focus i,.nv-hist i.is-focus,.nv-stack i:first-child{background:Highlight}
.nv-chart .main,.nv-kpi polyline{stroke:Highlight}
.nv-chart .ref,.nv-chart .grid line,.nv-chart .xhair{stroke:CanvasText}
:focus-visible{outline:2px solid Highlight!important}
}

/* ---------- Density: Calm, Operational (default), Expert. Set data-density on any container ---------- */
:root,[data-density="operational"]{--nv-body:.875rem;--nv-pad:32px;--nv-panel:18px;--nv-cell-y:11px;--nv-cell-x:14px;--nv-control:2.375rem;--nv-btn-y:7px;--nv-btn-x:10px;--nv-gap:16px}
[data-density="calm"]{--nv-body:1rem;--nv-pad:42px;--nv-panel:24px;--nv-cell-y:15px;--nv-cell-x:18px;--nv-control:2.75rem;--nv-btn-y:10px;--nv-btn-x:16px;--nv-gap:24px}
[data-density="expert"]{--nv-body:.8125rem;--nv-pad:20px;--nv-panel:12px;--nv-cell-y:6px;--nv-cell-x:10px;--nv-control:2rem;--nv-btn-y:5px;--nv-btn-x:8px;--nv-gap:10px}
.nv{font-size:var(--nv-body)}
.nv-content{padding:var(--nv-pad)}
.nv-table th,.nv-table td{padding:var(--nv-cell-y) var(--nv-cell-x)}
.nv-input,.nv-select{min-height:max(var(--nv-control),var(--nv-touch-min,0px))}
@media (pointer:coarse){:root{--nv-touch-min:var(--target-touch,44px)}}
.nv-touch{--nv-touch-min:var(--target-touch,44px)}
.nv-btn{padding:var(--nv-btn-y) var(--nv-btn-x)}
.nv-rail{padding:var(--nv-panel)}
.nv-state,.nv-kpi>div,.nv-strip>div{padding:var(--nv-panel)}
[data-density="calm"] .nv-table{font-size:.9375rem}
[data-density="expert"] .nv-table{font-size:.75rem}
[data-density="expert"] .nv-table td small{display:inline;margin-left:6px}

/* ---------- Shared small parts ---------- */
.nv-icon-btn{display:inline-grid;place-items:center;min-width:2rem;min-height:2rem;border:1px solid transparent;border-radius:var(--radius-small);background:transparent;color:var(--muted);cursor:pointer;transition:background var(--duration-quick,160ms) var(--easing-standard,ease),color var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-icon-btn:hover{background:var(--surfaceMuted);color:var(--text)}
.nv-icon-btn:disabled{opacity:.48;cursor:not-allowed}
.nv-label{font-size:.8125rem;font-weight:600}

/* ---------- Dialog and Sheet ---------- */
.nv-overlay{position:fixed;inset:0;z-index:50;background:rgba(7,15,20,.42);display:grid;place-items:center;padding:24px;animation:nv-fade var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-dialog-stage,.nv-sheet-stage{background:rgba(7,15,20,.42);display:grid;place-items:center;padding:28px 16px;border-radius:var(--radius-medium)}
.nv-sheet-stage{place-items:stretch end;padding:0;min-height:100%}
.nv-dialog{width:min(480px,100%);background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-large);box-shadow:var(--shadow-overlay);animation:nv-enter var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-dialog:focus{outline:none}
.nv-dialog-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;margin-bottom:10px;background:color-mix(in srgb,var(--critical) 12%,var(--surface));color:var(--critical)}
.nv-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 0}
.nv-dialog-head h2{margin:2px 0 0;font-size:1.25rem;letter-spacing:-.017em;line-height:1.25}
.nv-dialog-body{padding:10px 22px 4px;color:var(--muted)}
.nv-dialog-body p{margin:0 0 10px}
.nv-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px 20px}
.nv-sheet{background:var(--surface);color:var(--text);border-left:1px solid var(--line);box-shadow:var(--shadow-overlay);display:flex;flex-direction:column;width:min(420px,100%);max-height:100%;animation:nv-slide-in var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-sheet:focus{outline:none}
.nv-sheet-body{padding:12px 22px;overflow:auto;flex:1}
.nv-overlay.is-sheet{place-items:stretch end;padding:0}
.nv-sheet.is-bottom{width:100%;border-left:0;border-top:1px solid var(--line);border-radius:var(--radius-large) var(--radius-large) 0 0;max-height:85vh}
@media (max-width:650px){.nv-overlay.is-sheet{place-items:end stretch}.nv-sheet{width:100%;border-left:0;border-top:1px solid var(--line);border-radius:var(--radius-large) var(--radius-large) 0 0;max-height:85vh}}

/* ---------- Toast ---------- */
.nv-toast{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:start;width:min(380px,100%);background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius-medium);box-shadow:var(--shadow-tooltip);padding:12px;animation:nv-enter var(--duration-standard,240ms) var(--easing-enter,ease-out)}
.nv-toast-icon{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surfaceMuted);color:var(--muted)}
.nv-toast b{display:block;font-size:.875rem;margin-top:3px}
.nv-toast span{font-size:.8125rem;color:var(--muted)}
.nv-toast.is-positive .nv-toast-icon{color:var(--positive);background:color-mix(in srgb,var(--positive) 12%,var(--surface))}
.nv-toast.is-attention .nv-toast-icon{color:var(--attention);background:color-mix(in srgb,var(--attention) 12%,var(--surface))}
.nv-toast.is-critical .nv-toast-icon{color:var(--critical);background:color-mix(in srgb,var(--critical) 12%,var(--surface))}
.nv-toast .nv-link{padding:2px 4px}
.nv-toast-region{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;gap:10px}
.nv-toast-region.is-inline{position:static}
@media (max-width:650px){.nv-toast-region{left:12px;right:12px;bottom:12px}}

/* ---------- Menu and Popover ---------- */
.nv-menu-wrap{position:relative;display:inline-block}
.nv-menu,.nv-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:248px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-medium);box-shadow:var(--shadow-tooltip);padding:6px;animation:nv-enter var(--duration-quick,160ms) var(--easing-enter,ease-out)}
.nv-menu.is-end,.nv-popover.is-end{left:auto;right:0}
.nv-menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:.8125rem;text-align:left;padding:8px 10px;border-radius:var(--radius-small);cursor:pointer;min-height:2rem}
.nv-menu-item:hover,.nv-menu-item:focus{background:var(--surfaceMuted);outline:none}
.nv-menu-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nv-menu-item span{flex:1}
.nv-menu-item kbd{font:inherit;font-size:.75rem;color:var(--muted)}
.nv-menu-item.is-destructive{color:var(--critical)}
.nv-menu-item[aria-disabled="true"]{color:var(--muted);cursor:not-allowed}
.nv-menu-gap{display:inline-block;width:1rem}
.nv-menu-sep{height:1px;background:var(--line);margin:6px 4px}
.nv-popover{padding:14px 16px;width:280px;font-size:.8125rem;color:var(--muted)}
.nv-popover b{display:block;color:var(--text);font-size:.875rem;margin-bottom:4px}
.nv-popover p{margin:0}

/* ---------- Date and period pickers ---------- */
.nv-datepicker{position:relative}
.nv-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}
.nv-cal,.nv-period{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-medium);padding:12px;width:292px}
.nv-cal{position:absolute;top:calc(100% + 6px);left:0;z-index:40;box-shadow:var(--shadow-tooltip);animation:nv-enter var(--duration-quick,160ms) var(--easing-enter,ease-out)}
.nv-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.nv-cal-head b{font-size:.875rem}
.nv-cal-grid{border-collapse:collapse;width:100%;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.nv-cal-grid th{font-size:.75rem;color:var(--muted);font-weight:600;padding:4px 0}
.nv-cal-grid td{padding:1px;text-align:center}
.nv-day{width:36px;height:34px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--text);font:inherit;font-size:.8125rem;cursor:pointer}
.nv-day:hover{background:var(--surfaceMuted)}
.nv-day.is-out{color:var(--muted)}
.nv-day.is-today{box-shadow:inset 0 0 0 1px var(--slate)}
.nv-day.is-selected{background:var(--teal);color:var(--on-teal);font-weight:600}
.nv-period-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.nv-month{display:grid;gap:1px;justify-items:center;border:1px solid transparent;border-radius:var(--radius-small);background:var(--surfaceMuted);color:var(--text);font:inherit;font-size:.8125rem;padding:8px 4px;min-height:2.75rem;cursor:pointer}
.nv-month small{font-size:.75rem;color:var(--muted)}
.nv-month:hover{background:var(--surfaceMuted)}
.nv-month.is-active{background:var(--teal);border-color:var(--teal);color:var(--on-teal);font-weight:600}
.nv-month.is-active small{color:var(--on-teal)}

/* ---------- Pagination, textarea, avatar ---------- */
.nv-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nv-pages-info{font-size:.75rem;color:var(--muted);margin-right:10px;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.nv-page{min-width:2rem;min-height:2rem;border:1px solid transparent;border-radius:var(--radius-small);background:transparent;color:var(--text);font:inherit;font-size:.8125rem;font-family:var(--font-data);cursor:pointer}
.nv-page:hover{background:var(--surfaceMuted)}
.nv-page.is-active{border-color:var(--teal);color:var(--teal);font-weight:600}
.nv-pages-gap{color:var(--muted);padding:0 4px}
.nv-textarea{min-height:6rem;resize:vertical;line-height:1.5}
.nv-field-foot{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;color:var(--muted)}
.nv-field-foot.is-error{color:var(--critical);font-weight:600}
.nv-avatar{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--soft);color:var(--text);font-weight:600;overflow:visible;font-family:var(--font-sans)}
.nv-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.nv-avatar.is-small{width:1.75rem;height:1.75rem;font-size:.75rem}
.nv-avatar.is-medium{width:2.5rem;height:2.5rem;font-size:.8125rem}
.nv-avatar.is-large{width:4rem;height:4rem;font-size:1.25rem}
.nv-avatar-dot{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--surface);background:var(--slate)}
.nv-avatar-dot.is-positive{background:var(--positive)}.nv-avatar-dot.is-attention{background:var(--attention)}.nv-avatar-dot.is-critical{background:var(--critical)}

/* ---------- Table: sort, loading, empty ---------- */
.nv-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;color:inherit;font-weight:inherit;cursor:pointer}
.nv-sort.is-active{color:var(--text)}
.nv-sort-idle{opacity:.6}
.nv-cell-skeleton{display:block;height:9px;width:70%;background:linear-gradient(90deg,var(--soft),var(--line),var(--soft));background-size:200% 100%;animation:nv-shimmer 1.5s infinite}
.nv-reduce-motion .nv-cell-skeleton{animation:none}
@media (prefers-reduced-motion:reduce){.nv-cell-skeleton{animation:none}}
.nv-table-empty{text-align:center!important;color:var(--muted);padding:32px 14px!important;white-space:normal!important}

/* ---------- Bottom navigation (phones) ---------- */
.nv-bottomnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:var(--surface);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.nv-bottomnav-item{display:grid;justify-items:center;gap:2px;padding:6px 2px;min-height:var(--target-touch,44px);color:var(--muted);text-decoration:none;font-size:.75rem;border-radius:var(--radius-small)}
.nv-bottomnav-item.is-active{color:var(--teal);font-weight:600}
.nv-bottomnav-icon{position:relative;display:inline-flex}
.nv-bottomnav-icon em{position:absolute;top:-4px;right:-10px;min-width:16px;height:16px;border-radius:8px;background:var(--critical);color:var(--surface);font-style:normal;font-size:.75rem;font-weight:600;display:grid;place-items:center;padding:0 5px;min-width:18px;height:18px;border-radius:9px}

/* touch and forced colours for the new parts */
@media (pointer:coarse){.nv-icon-btn,.nv-page,.nv-menu-item,.nv-day{min-height:var(--target-touch,44px);min-width:var(--target-touch,44px)}}
.nv-touch .nv-icon-btn,.nv-touch .nv-page,.nv-touch .nv-menu-item,.nv-touch .nv-day{min-height:var(--target-touch,44px);min-width:var(--target-touch,44px)}
@media (forced-colors:active){.nv-dialog,.nv-sheet,.nv-toast,.nv-menu,.nv-popover,.nv-cal,.nv-period,.nv-month,.nv-bottomnav{border:1px solid CanvasText}.nv-day.is-selected,.nv-month.is-active,.nv-page.is-active{outline:2px solid Highlight}}

/* components keep the brand type even outside an .nv container */
.nv-btn,.nv-link,.nv-icon-btn,.nv-input,.nv-select,.nv-tab,.nv-seg button,.nv-range button,.nv-menu-item,.nv-page,.nv-day,.nv-month,.nv-toast,.nv-avatar{font-family:var(--font-sans)}
.nv-cal-grid .nv-day,.nv-page,.nv-affix .nv-input{font-family:var(--font-data)}

/* 2.6 · links read as links without weight */
.nv-link:hover,.nv-link:focus-visible,.nv-nexa .nv-why:hover,.nv-nexa .nv-why:focus-visible{text-decoration:underline;text-underline-offset:3px}
.nv-nav-item{min-width:0;white-space:nowrap}
.nv-nav-item>span,.nv-nav-item>.nv-nav-text{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 2.6 · PageAnswer: the L1 layer. Eyebrow, the answer as a sentence, why, at most four facts, source, actions. */
.nv-answer{display:block}
.nv-answer .nv-eyebrow{display:block;margin:0 0 6px}
.nv-answer h1{margin:0;font-size:2rem;line-height:1.15;letter-spacing:-.021em;font-weight:600;color:var(--text);text-wrap:balance;max-width:36ch}
.nv-answer-why{margin:8px 0 0;color:var(--muted);max-width:68ch}
.nv-answer-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 0;padding:0;list-style:none}
.nv-answer-facts li{display:flex;align-items:baseline;gap:6px;min-width:0}
.nv-answer-facts b{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.nv-answer-facts span{color:var(--muted)}
.nv-answer-facts .nv-unknown-inline{color:var(--muted);font-style:normal}
.nv-answer-source{display:block;margin-top:10px;font-size:.75rem;color:var(--muted)}
.nv-answer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
[data-density="calm"] .nv-answer h1{max-width:24ch}
[data-density="expert"] .nv-answer h1{font-size:1.5rem;letter-spacing:-.019em}
@media (max-width:640px){.nv-answer h1{font-size:1.625rem}.nv-answer-facts{gap:6px 20px}}
/* 2.6.2 · app chrome on white: the nav is its own ground with a hairline on its content edge; the workspace bar keeps its bottom line. Use nv-nav on any sidebar, even outside AppShell. */
.nv-sidebar{background:var(--chrome);border-right:1px solid var(--line)}
/* Deprecated in 3.3.0 (P-011): every Nusva app, Nusva OS included, uses the white sidebar. data-nav="tinted" still works so older screens do not break; do not use it in new screens. */
[data-nav="tinted"].nv-nav,[data-nav="tinted"].nv-sidebar,[data-nav="tinted"] .nv-nav,[data-nav="tinted"] .nv-sidebar{background:var(--surfaceMuted)}
[data-nav="tinted"] .nv-nav-item.is-active,[data-nav="tinted"].nv-nav .nv-nav-item.is-active{background:var(--nv-raised);box-shadow:var(--shadow-raised)}
[data-nav="tinted"] .nv-nav-item:not(.is-active):hover,[data-nav="tinted"].nv-nav .nv-nav-item:not(.is-active):hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.nv-chromebar{border-bottom:1px solid var(--line);background:var(--surface)}

/* 2.7.0 · Family shell. One full-width frame for every app in a product family (Nusva People: Hub, JEM, Work).
   Top bar edge to edge, white sidebar per app, content left-aligned up to content-max. Never a boxed layout with grey side margins. */
.nv-shell.is-full{border:0;border-radius:0;box-shadow:none;min-height:100vh;min-height:100dvh;grid-template-rows:var(--topbar-height) minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.nv-shell.is-full>.nv-top{position:sticky;top:0;z-index:20;gap:8px;justify-content:flex-start;padding:0 12px}
.nv-shell.is-full>.nv-body{grid-template-columns:var(--nav-width) minmax(0,1fr)}
@media (max-width:650px){.nv-shell.is-full>.nv-body{grid-template-columns:var(--nav-compact) minmax(0,1fr)}}
.nv-top-tools{display:flex;align-items:center;gap:4px;margin-left:auto}
.nv-appswitch{font:inherit;font-size:0.875rem;font-weight:600;color:var(--text);background:transparent;border:0;border-radius:var(--radius-medium);display:inline-flex;align-items:center;gap:6px;padding:0 10px;min-height:var(--target-pointer);cursor:pointer}
.nv-appswitch:hover{background:var(--surfaceMuted)}
.nv-appswitch .nv-icon{color:var(--muted)}
.nv-top-divider{width:1px;height:20px;background:var(--line);flex:none}
.nv-shell.is-full .nv-cmd{min-width:280px}
.nv-content-max{max-width:var(--content-max);margin-inline-end:auto}
@media (max-width:760px){.nv-shell.is-full .nv-cmd{min-width:0}.nv-shell.is-full .nv-cmd span{display:none}.nv-top-divider{display:none}.nv-shell.is-full>.nv-top{overflow-x:auto;scrollbar-width:none}}

/* 2.7.0 · Search and Tanya Nexa focus: a 1px focus edge plus the soft cyan ring-brand halo. Only these two fields; every other control keeps the plain focus ring. */
.nv-cmd:hover,.nv-search:hover{box-shadow:0 0 0 1px var(--line)}
.nv-cmd:focus-visible,.nv-search:focus-visible{outline:0;background:var(--surface);box-shadow:0 0 0 1px var(--focus),var(--ring-brand)}

/* Deprecated in 3.4.0 (P-016): the cyan content glow is gone. nv-home and nv-glow now only set the page ground (canvas) and stay so older markup does not break. Prefer nv-page. */
.nv-home{background:var(--canvas)}

/* 2.7.0 · Tanya Nexa: the visible entry to the Command Layer's "ask" on a family home. One field, a logo tile, one send button, at most three suggestions.
   Answers open in a Sheet or the Context Rail (L4), never inline on the page. */
.nv-ask{display:grid;gap:12px;max-width:720px}
.nv-ask-field{display:flex;align-items:center;gap:12px;min-height:var(--ask-height);padding:0 8px 0 14px;background:var(--surface);border:1px solid var(--slate);border-radius:var(--radius-large);transition:border-color var(--duration-quick,160ms) var(--easing-standard,ease),box-shadow var(--duration-quick,160ms) var(--easing-standard,ease)}
.nv-ask-field:focus-within{border-color:var(--focus);box-shadow:var(--ring-brand)}
.nv-ask-mark{width:28px;height:28px;border-radius:7px;flex:none;display:block}
.nv-ask-field input{flex:1 1 auto;width:0;min-width:0;min-height:var(--target-touch);border:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--text)}
.nv-ask-field input::placeholder{color:var(--muted)}
.nv-ask-field input:focus-visible{outline:0}
.nv-ask-send{flex:none;width:var(--target-touch);height:var(--target-touch);border:0;border-radius:var(--radius-medium);background:var(--teal);color:var(--on-teal);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nv-ask-send:disabled{background:var(--surfaceMuted);color:var(--muted);cursor:default}
.nv-ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.nv-ask-chip{font:inherit;font-size:0.8125rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-large);padding:0 14px;min-height:var(--target-pointer);cursor:pointer}
.nv-ask-chip:hover{background:var(--surfaceMuted)}
@media (pointer:coarse){.nv-ask-chip,.nv-appswitch{min-height:var(--target-touch)}}
@media (prefers-reduced-motion:reduce){.nv-ask-field{transition:none}}
@media (forced-colors:active){.nv-ask-field,.nv-ask-chip{border:1px solid CanvasText}.nv-ask-send{background:Highlight;color:HighlightText}}

/* 2.8.0 · Behaviour levels (docs/behavior-levels.md). */
/* MetricValue (nv-mv, not the Decision Surface nv-metric): one number as business language. Certainty is never shown by colour alone. */
.nv-mv{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
.nv-mv-value{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.nv-mv-base,.nv-mv-label,.nv-mv-compare{color:var(--muted)}
.nv-mv-base{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.nv-mv-delta{font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--text)}
.nv-mv-delta[data-good="true"]{color:var(--positive)}
.nv-mv-delta[data-good="false"]{color:var(--critical)}
.nv-mv-flag{font-size:0.75rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.nv-mv-flag.is-conflict{color:var(--attention);font-weight:600}
.nv-mv-src{flex-basis:100%;font-size:0.75rem;color:var(--muted)}
[data-certainty="stale"] .nv-mv-value{color:var(--muted)}
/* Attention: neutral count badge for A1 and A2; red only for A3. One A3 line per screen, under the top bar. */
.nv-count{display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 4px;border-radius:999px;font-size:0.75rem;font-weight:600;line-height:1;background:var(--surfaceMuted);color:var(--text);font-variant-numeric:tabular-nums}
.nv-count[data-attention="3"]{background:var(--critical);color:var(--surface)}
.nv-urgent{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--critical) 8%,var(--surface));color:var(--text);font-size:0.875rem}
.nv-urgent .nv-icon{color:var(--critical);flex:none}
.nv-urgent>a,.nv-urgent>button{margin-left:auto;flex:none}
/* Visibility: V2 masked values and the quiet V3 no-access line. Never a red box. */
.nv-masked{font-family:var(--font-data);letter-spacing:.12em;color:var(--muted)}
.nv-noaccess{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:0.8125rem}
/* Nexa autonomy label on a Nexa note: "Nexa · menyarankan" */
.nv-autonomy{font-size:0.75rem;color:var(--muted)}
@media (forced-colors:active){.nv-count[data-attention="3"]{background:Highlight;color:HighlightText}}

/* 2.9.0 · Feature finder inside AskNexa: intent groups, then features, two clicks from home. Works with Nexa on or off. */
.nv-finder{display:grid;gap:10px}
.nv-finder-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nv-finder-label{margin:0;font-size:0.75rem;color:var(--muted)}
.nv-finder-groups{display:flex;flex-wrap:wrap;gap:4px;padding:3px;background:var(--surfaceMuted);border-radius:var(--radius-medium);width:fit-content;max-width:100%}
.nv-finder-group{font:inherit;font-size:0.8125rem;color:var(--muted);background:transparent;border:0;border-radius:var(--radius-small);padding:0 12px;min-height:var(--target-pointer);cursor:pointer}
.nv-finder-group:hover{color:var(--text)}
.nv-finder-group[aria-pressed="true"]{background:var(--nv-raised);color:var(--text);font-weight:600;box-shadow:var(--shadow-raised)}
.nv-finder-items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.nv-finder-item{font:inherit;font-size:0.8125rem;color:var(--teal);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-medium);padding:0 12px;min-height:var(--target-pointer);cursor:pointer}
.nv-finder-item:hover{background:var(--surfaceMuted);border-color:var(--slate)}
@media (pointer:coarse){.nv-finder-group,.nv-finder-item{min-height:var(--target-touch)}}
@media (forced-colors:active){.nv-finder-item{border:1px solid CanvasText}.nv-finder-group[aria-pressed="true"]{outline:2px solid Highlight}}

/* 3.1.0 · Nexa's mark is the Nusva N logo, not a sparkle. */
.nv-nexa-mark{width:1.25rem;height:1.25rem;border-radius:5px;display:block;margin-top:2px}
.nv-nexa.is-plain{grid-template-columns:minmax(0,1fr) auto}

/* ============================================================
   3.3.0 · Family shell with a full-height sidebar (P-013), content glow on every screen (P-012),
   white sidebar for every app (P-011), Nexa spark for AI output (P-014).
   ============================================================ */

/* 3.4.0 (P-016) · Page and card. The page is canvas (a quiet neutral); content lives on cards (surface + shadow-card); groups inside a card use surfaceMuted. Chrome (sidebar, top bar) uses the chrome token. */
.nv-page{background:var(--canvas)}
.nv-card{background:var(--surface);border-radius:var(--radius-large);box-shadow:var(--shadow-card)}
.nv-shell.is-full{background:var(--canvas)}
.nv-glow{background:var(--canvas)}

/* Full-height sidebar layout, as in Gemini: the sidebar runs the full window height and holds the logo and the
   collapse button at the top, the menu, Recent, and the profile and settings at the bottom. The top bar sits
   over the content column only. Markup: nv-shell is-full has-side > nv-side + nv-col > (nv-top + nv-content). */
.nv-shell.is-full.has-side{display:flex;align-items:stretch;grid-template-rows:none}
.nv-side{flex:none;width:var(--nav-width);height:100vh;height:100dvh;position:sticky;top:0;display:flex;flex-direction:column;box-sizing:border-box;background:var(--chrome);border-right:1px solid var(--line);overflow:hidden;transition:width var(--duration-standard) cubic-bezier(.2,0,0,1)}
.nv-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.nv-col>.nv-top{position:sticky;top:0;z-index:20;gap:8px;justify-content:flex-start;padding:0 12px;height:var(--topbar-height);flex:none}
.nv-side-top{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--topbar-height);padding:0 10px 0 14px}
.nv-side-brand{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);text-decoration:none;font-weight:600}
.nv-side-brand img{width:28px;height:28px;border-radius:7px;flex:none}
.nv-side-toggle{flex:none}
.nv-side-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 10px 12px}
.nv-side-recent{margin-top:4px}
.nv-recent-item{display:block;min-height:32px;line-height:32px;padding:0 8px;border-radius:var(--radius-small);font-size:0.8125rem;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-recent-item:hover{background:var(--surfaceMuted)}
.nv-side-foot{flex:none;display:flex;align-items:center;gap:4px;padding:8px 10px 12px}
.nv-side-me{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--target-touch);padding:0 6px;border-radius:var(--radius-medium);color:var(--text);font-size:0.8125rem;font-weight:600;text-decoration:none}
.nv-side-me:hover{background:var(--surfaceMuted)}
.nv-side-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Collapsed rail: data-side="collapsed" on the shell. Labels stay in the accessibility tree. */
[data-side="collapsed"] .nv-side{width:var(--nav-compact)}
[data-side="collapsed"] .nv-side .nv-side-label,[data-side="collapsed"] .nv-side .nv-nav-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-side="collapsed"] .nv-side .nv-nav-label,[data-side="collapsed"] .nv-side-recent{display:none}
[data-side="collapsed"] .nv-side-top{justify-content:center;padding:0}
[data-side="collapsed"] .nv-side-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;background:var(--surface)}
[data-side="collapsed"] .nv-side-top:hover .nv-side-toggle,[data-side="collapsed"] .nv-side-toggle:focus-visible{opacity:1}
[data-side="collapsed"] .nv-side-top:hover .nv-side-brand,[data-side="collapsed"] .nv-side-top:has(.nv-side-toggle:focus-visible) .nv-side-brand{opacity:0}
[data-side="collapsed"] .nv-side .nv-nav-item{justify-content:center;padding-left:0;padding-right:0}
[data-side="collapsed"] .nv-side-foot{flex-direction:column-reverse;gap:8px}
[data-side="collapsed"] .nv-side-me{flex:none;width:var(--target-touch);padding:0;justify-content:center}
@media (max-width:650px){.nv-side{width:var(--nav-compact)}.nv-side .nv-side-label,.nv-side .nv-nav-item span{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nv-side .nv-nav-label,.nv-side-recent,.nv-side-toggle{display:none}.nv-side-top{justify-content:center;padding:0}.nv-side .nv-nav-item{justify-content:center}.nv-side-foot{flex-direction:column-reverse}.nv-side-me{flex:none;width:var(--target-touch);padding:0;justify-content:center}}
@media (prefers-reduced-motion:reduce){.nv-side{transition:none}}

/* Icon-only button for chrome (sidebar toggle, settings, top-bar tools). Always with aria-label. */
.nv-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:0;border-radius:var(--radius-medium);background:transparent;color:var(--muted);cursor:pointer;padding:0}
.nv-iconbtn:hover{background:var(--surfaceMuted);color:var(--text)}
@media (pointer:coarse){.nv-iconbtn{width:var(--target-touch);height:var(--target-touch)}}

/* Nexa spark (P-014): marks content produced by AI (a draft, suggestion, summary or computed figure).
   The N logo stays Nexa's identity at its entry point (Tanya Nexa). Use NexaSpark or nexa-spark.svg; never redraw. */
.nv-spark{display:inline-block;flex:none;vertical-align:-0.15em}
.nv-nexa-spark{display:block;margin-top:2px}
.nv-made-by{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:0.75rem}

/* ============================================================================
 * 3.6 · WHITE FIRST AND PLACE COLOUR (from Nusva Kerja, October 2026)
 * The work area is `surface`, the sidebar is `side`, and colour marks the place
 * (module badge, stage pill, module ink), always next to a word.
 * Works with the family shell (nv-side) and the reference bundle's AppShell (nv-nav).
 * ========================================================================== */

/* Type: tracking by size, with word spacing because Plus Jakarta Sans sets words close. */
.nv{letter-spacing:0;word-spacing:0.03em;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga"}
.nv h1{letter-spacing:-0.018em;word-spacing:0.06em}
.nv h2{letter-spacing:-0.014em;word-spacing:0.05em}
.nv h3,.nv h4{letter-spacing:-0.01em;word-spacing:0.04em}
.nv .nv-eyebrow{letter-spacing:0.06em}
.nv .nv-prose{font-size:1.0625rem;line-height:1.47}

/* Family shell: the sidebar sticks to the window (overflow:clip, not hidden, so position:sticky keeps working) and the content column is white. */
.nv-shell.is-full.has-side{overflow:visible;overflow:clip}
.nv-shell.is-full.has-side,.nv-shell.is-full.has-side>.nv-col>main.nv-page{background:var(--surface)}

/* Sidebar ala web: almost-white `side`, the active item a white card with a hairline. */
.nv .nv-side,.nv .nv-nav{background:var(--side)}
.nv .nv-side .nv-nav-label,.nv .nv-nav .nv-nav-label{color:var(--muted);font-weight:400;font-size:0.75rem}
.nv .nv-side .nv-nav-item,.nv .nv-nav .nv-nav-item{color:var(--text);font-size:0.875rem;gap:10px;border-radius:9px}
.nv .nv-side .nv-nav-item:not(.is-active):hover,.nv .nv-nav .nv-nav-item:not(.is-active):hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.nv .nv-side .nv-nav-item.is-active,.nv .nv-nav .nv-nav-item.is-active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,37,48,.06)}

/* ModuleBadge: a solid square in the module colour with a white icon. Decoration (aria-hidden); the label beside it is what is read. */
.nv .nv-modul{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:#fff;font-style:normal}
.nv .nv-modul.is-bulat{border-radius:999px}
.nv .nv-modul.is-kecil{width:22px;height:22px;border-radius:6px}
.nv .nv-modul svg{color:#fff;stroke:#fff}
.nv .nv-modul.ungu{background:var(--tahap-ungu)}.nv .nv-modul.amber{background:var(--tahap-amber)}.nv .nv-modul.biru{background:var(--tahap-biru)}
.nv .nv-modul.hijau{background:var(--tahap-hijau)}.nv .nv-modul.coral{background:var(--tahap-coral)}.nv .nv-modul.tosca{background:var(--tahap-tosca)}

/* ModuleEyebrow: the small badge plus the module name, in the module ink. */
.nv .nv-eyebrow-modul{display:inline-flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}

/* StagePill: pastel ground, a dot in the stage colour, the label in `text`. */
.nv .nv-pil-tahap{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:0.75rem;font-weight:600;color:var(--text);letter-spacing:0.005em}
.nv .nv-pil-tahap>i{width:8px;height:8px;border-radius:999px;flex:none}
.nv .nv-pil-tahap .n{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}

/* IconMedallion and NameTile: pastel ground, icon or initial in the ink of the same colour. */
.nv .nv-lencana{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:12px}
.nv .nv-ubin-nama{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:11px;font-size:1rem;font-weight:600}

/* Colour helpers, one per hue: nv-t-* (ground + ink), nv-pil-* (pill ground), nv-dot-* (dot), nv-ink-* (ink). */
.nv .nv-t-ungu{background:var(--tahap-ungu-latar);color:var(--tahap-ungu-tinta)}.nv .nv-t-amber{background:var(--tahap-amber-latar);color:var(--tahap-amber-tinta)}
.nv .nv-t-biru{background:var(--tahap-biru-latar);color:var(--tahap-biru-tinta)}.nv .nv-t-hijau{background:var(--tahap-hijau-latar);color:var(--tahap-hijau-tinta)}
.nv .nv-t-coral{background:var(--tahap-coral-latar);color:var(--tahap-coral-tinta)}.nv .nv-t-tosca{background:var(--tahap-tosca-latar);color:var(--tahap-tosca-tinta)}
.nv .nv-pil-ungu{background:var(--tahap-ungu-pil)}.nv .nv-pil-amber{background:var(--tahap-amber-pil)}.nv .nv-pil-biru{background:var(--tahap-biru-pil)}
.nv .nv-pil-hijau{background:var(--tahap-hijau-pil)}.nv .nv-pil-coral{background:var(--tahap-coral-pil)}.nv .nv-pil-tosca{background:var(--tahap-tosca-pil)}
.nv .nv-pil-abu{background:var(--surfaceMuted)}.nv .nv-pil-merah{background:color-mix(in srgb,var(--critical) 14%,var(--surface))}
.nv .nv-dot-ungu{background:var(--tahap-ungu)}.nv .nv-dot-amber{background:var(--tahap-amber)}.nv .nv-dot-biru{background:var(--tahap-biru)}
.nv .nv-dot-hijau{background:var(--tahap-hijau)}.nv .nv-dot-coral{background:var(--tahap-coral)}.nv .nv-dot-tosca{background:var(--tahap-tosca)}
.nv .nv-dot-abu{background:var(--muted)}.nv .nv-dot-merah{background:var(--critical)}
.nv .nv-ink-ungu{color:var(--tahap-ungu-tinta)}.nv .nv-ink-amber{color:var(--tahap-amber-tinta)}.nv .nv-ink-biru{color:var(--tahap-biru-tinta)}
.nv .nv-ink-hijau{color:var(--tahap-hijau-tinta)}.nv .nv-ink-coral{color:var(--tahap-coral-tinta)}.nv .nv-ink-tosca{color:var(--tahap-tosca-tinta)}

/* CardTitle and StatTile. */
.nv .nv-judul-kartu{display:flex;align-items:center;gap:10px;margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-0.014em;color:var(--text)}
.nv .nv-ubin{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-large);background:var(--surface);box-shadow:var(--shadow-card)}
.nv .nv-ubin>.nv-modul{position:absolute;right:12px;top:12px}
.nv .nv-ubin>dt{padding-right:32px}
.nv .nv-ubin .v{font-size:2rem;line-height:1.15;font-weight:600;letter-spacing:-0.018em;font-variant-numeric:tabular-nums}
.nv .nv-ubin .s{font-size:0.75rem;color:var(--muted)}