/* ===========================================================
   ui.css — VNE.ui v2 components + VNE.charts chrome (spec §2.3, §3).
   Loaded right after assets/styles.css (which declares the self-hosted fonts, §2.2).

   Tokens: every colour, radius, type and motion value is a v2 token from
   §2.1 (defined in styles.css; brand/viz tokens written by js/brand.js).
   The @layer block below only carries FALLBACK values for tokens this file
   relies on: a layered declaration always loses to the unlayered
   styles.css / brand.js ones, so it can never override a real token — it
   just keeps the kit rendering if a token is missing.
   =========================================================== */

/* ---------- Fallback tokens (lose to every unlayered definition) ---------- */
@layer vne-ui-fallback{
  :root{
    --viz-primary:#4F46E5; --viz-primary-dark:#8E9AFE; --focus:#4F46E5;
    --cat-1:#4F46E5; --cat-2:#D0467C; --cat-3:#2A78D6; --cat-4:#15936A; --cat-5:#9333EA; --cat-6:#0891B2; --cat-other:#7C8AA0;
    --ent-1:#2A78D6; --ent-2:#D0467C; --ent-3:#4A3AA7; --ent-4:#15936A; --ent-5:#9333EA; --ent-6:#0891B2;
    --seq-1:#EEF1FF; --seq-2:#D6DCFD; --seq-3:#B5BFFE; --seq-4:#939EFC; --seq-5:#757FEB; --seq-6:#5D63CD; --seq-7:#464AA8;
    --st-complete:#16A34A; --st-complete-soft:#DCFCE7; --st-complete-text:#15803D;
    --st-active:#2563EB; --st-active-soft:#DBEAFE; --st-active-text:#1D4ED8;
    --st-atrisk:#D97706; --st-atrisk-soft:#FEF3C7; --st-atrisk-text:#B45309;
    --st-delayed:#DC2626; --st-delayed-soft:#FEE2E2; --st-delayed-text:#B91C1C;
    --st-blocked:#991B1B; --st-blocked-soft:#FEE2E2; --st-blocked-text:#991B1B;
    --st-hold:#C026D3; --st-hold-soft:#FAE8FF; --st-hold-text:#A21CAF;
    --st-future:#E6EAF1; --st-future-soft:#F1F5F9; --st-future-text:#475569; --st-future-mark:#CBD5E1;
    --st-na:transparent; --st-na-soft:#F8FAFC; --st-na-text:#5B6475;
    --sev-fill-low:#EBA295; --sev-fill-med:#E47D6D; --sev-fill-high:#DD5847; --sev-fill-crit:#B71C0E;
    --chart-grid:#EDF0F5; --chart-axis:#CFD6E3; --chart-label:#475569; --chart-baseline:#7C8AA0; --chart-plan:#1E293B; --chart-muted-line:#7C8AA0;
    --radius-xs:4px; --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
    --z-sticky:5; --z-popover:60; --z-drawer:80; --z-modal:90; --z-toast:100;
    --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --dur-4:400ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
    --t-kicker:600 11px/16px var(--fb); --t-caption:500 12px/16px var(--fb); --t-body-sm:400 13px/20px var(--fb); --t-body:400 14px/22px var(--fb);
    --t-title-sm:600 14px/20px var(--fh); --t-title:600 16px/24px var(--fh); --t-page:700 20px/28px var(--fh); --t-value:600 28px/32px var(--fh); --t-display:700 32px/36px var(--fh);
  }
  /* Dark content surfaces (W1 band, war-room header): the dark sidebar palette */
  [data-surface="dark"]{
    --nav:#0F172A; --nav-2:#131C31; --nav-line:#22304A; --nav-ink:#CBD5E1; --nav-ink-soft:#94A3B8; --nav-ink-strong:#FFFFFF; --nav-menu:#18223A;
    --nav-ok:#4ADE80; --nav-warn:#FBBF24;
  }
}

/* ---------- Kit-wide ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{--ui-mark:var(--viz-primary)}
[data-surface="dark"],.sidebar{--ui-mark:var(--viz-primary-dark)}
.i{display:inline-block;flex:none;vertical-align:-.15em;overflow:visible}
.i-missing{opacity:.55}
.i-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:var(--radius-pill);background:var(--bg-2);color:var(--muted);font:600 11px/1 var(--fb);font-variant-numeric:tabular-nums}
.is-updated{animation:ui-flash 600ms var(--ease-out)}
@keyframes ui-flash{0%{background-color:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}100%{background-color:transparent;box-shadow:0 0 0 3px transparent}}
[data-surface="dark"] .is-updated{animation-name:ui-flash-dark}
@keyframes ui-flash-dark{0%{background-color:rgba(255,255,255,.10);box-shadow:0 0 0 3px rgba(255,255,255,.10)}100%{background-color:transparent;box-shadow:0 0 0 3px transparent}}
:where(.ui-seg-btn,.ui-tab,.ui-chip,.ui-pill-x,.ui-pills-clear,.ui-info,.ui-menu-item,.card-link,.kpi-card.is-link,.kpi-hit,.ui-hm-btn,.ui-bl-seg,.ui-toast-x,.ui-toast-act,.ui-tabs-more,.ui-dr-preset,.vne-chart-rowbtn,.ui-table tr[tabindex],.btn):focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Buttons (btn btn-{variant} btn-{size}) ---------- */
.btn.btn-md,.btn.btn-sm{justify-content:center;white-space:nowrap;gap:6px;border-radius:var(--radius-sm);font:600 13px/1 var(--fb);letter-spacing:0;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1),box-shadow var(--dur-1),filter var(--dur-1)}
.btn.btn-md{height:36px;padding:0 14px}
.btn.btn-sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.btn-icon{padding:0;width:36px}
.btn.btn-icon.btn-sm{width:30px}
.btn.btn-primary:hover{transform:none}
.btn-secondary{background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.btn-secondary:hover:not(:disabled){background:var(--card-2);border-color:var(--line-3);color:var(--ink)}
.btn.btn-ghost{background:transparent;border:1px solid transparent;color:var(--ink-2)}
.btn.btn-ghost:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.btn-danger{background:var(--st-delayed);border:1px solid var(--st-delayed);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.1)}
.btn-danger:hover:not(:disabled){background:var(--st-delayed-text);border-color:var(--st-delayed-text)}
.btn-link{background:none;border:0;color:var(--brand-text);padding-inline:2px}
.btn-link:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .btn-label{overflow:hidden;text-overflow:ellipsis}
[data-surface="dark"] .btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
[data-surface="dark"] .btn.btn-ghost{color:var(--nav-ink)}
[data-surface="dark"] .btn.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- Page toolbar ---------- */
.ui-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:44px;margin-bottom:16px}
.ui-toolbar.is-sticky{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);padding-block:6px}
.ui-toolbar-left,.ui-toolbar-right{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
/* PD-33: when the toolbar wraps, the right-hand group (with the primary action last) stays right-aligned. */
.ui-toolbar-right{margin-left:auto}
.ui-toolbar-spacer{flex:1 1 auto}
.ui-toolbar-context{font:var(--t-caption);color:var(--muted);white-space:nowrap}

/* ---------- Card ---------- */
.vne-card{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:none}
.vne-card>.card-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:28px;margin:0}
.vne-card .card-titles{display:flex;align-items:center;gap:4px;min-width:0}
.vne-card .card-title{margin:0;font:var(--t-title-sm);letter-spacing:-.005em;color:var(--ink);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vne-card .card-badges{display:flex;gap:6px;flex-wrap:wrap}
.vne-card .card-head-spacer{flex:1 1 auto}
.vne-card .card-control{display:flex;align-items:center;min-width:0;max-width:100%}
.vne-card .card-menu{margin-right:-6px;color:var(--muted)}
.vne-card .card-sub{margin-top:2px}
.vne-card .card-headline{margin:0;font:500 13px/20px var(--fb);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}
.vne-card .card-caption{margin:0;font:var(--t-caption);color:var(--muted)}
.vne-card>.card-body{flex:1 1 auto;min-width:0;margin-top:14px}
.vne-card>.card-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font:var(--t-caption);color:var(--muted)}
.card-foot-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-link{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px 2px;border:0;background:none;border-radius:6px;color:var(--brand-text);font:600 13px/1 var(--fb);white-space:nowrap;text-decoration:none;cursor:pointer}
.card-link .i{transition:transform var(--dur-1) var(--ease-out)}
.card-link:hover .i{transform:translateX(2px)}
.vne-card.is-compact{padding:14px}
.vne-card-bare{min-width:0}
.vne-card-bare>.card-body{margin:0}

/* ---------- Info tip + tooltip ---------- */
.ui-info{display:inline-grid;place-items:center;width:22px;height:22px;margin:-2px 0;padding:0;border:0;border-radius:6px;background:none;color:var(--faint);cursor:help;flex:none}
.ui-info:hover{color:var(--ink);background:var(--hover)}
.ui-tip{position:fixed;z-index:calc(var(--z-toast) + 5);max-width:300px;padding:8px 10px;border-radius:8px;background:#0F172A;border:1px solid rgba(255,255,255,.10);color:#F8FAFC;font:400 12px/17px var(--fb);box-shadow:var(--shadow-md);pointer-events:none}
.ui-tip[hidden]{display:none}
.ui-tip-q{font-weight:600;color:#fff;margin-bottom:3px}
.ui-tip-r{color:#CBD5E1}
.ui-tip-s{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.14);color:#94A3B8;font-size:11px}
.ui-tip-list{display:grid;gap:3px;min-width:170px}
.ui-tip-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px}
.ui-tip-row b{font-weight:600;font-variant-numeric:tabular-nums}
[data-surface="dark"] .ui-info{color:var(--nav-ink-soft)}
[data-surface="dark"] .ui-info:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---------- KPI card ---------- */
.kpi.kpi-card{container-type:inline-size;position:relative;display:block;min-width:0;min-height:116px;padding:15px 16px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;text-align:left;color:var(--ink);font:inherit;overflow:hidden}
.kpi.kpi-card.is-compact{min-height:96px;padding:12px 14px}
.kpi-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"label delta" "value spark" "ctx ctx";column-gap:10px;row-gap:6px;min-height:calc(116px - 29px);height:100%}
.kpi-card.is-compact .kpi-grid{min-height:calc(96px - 24px);row-gap:4px}
.kpi-grid>.kpi-label{grid-area:label}.kpi-grid>.kpi-delta{grid-area:delta;justify-self:end;align-self:center}
.kpi-grid>.kpi-valwrap{grid-area:value;align-self:end;min-width:0}.kpi-grid>.kpi-spark{grid-area:spark;align-self:end}
.kpi-grid>.kpi-context{grid-area:ctx}
button.kpi.kpi-card{width:100%;cursor:pointer}
.kpi.kpi-card.is-link{cursor:pointer;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.kpi.kpi-card.is-link:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.kpi-hit{position:absolute;inset:0;z-index:1;width:100%;border:0;background:transparent;border-radius:inherit;cursor:pointer}
.kpi-card .ui-info{position:relative;z-index:2}
.kpi-label{display:flex;align-items:center;gap:2px;min-width:0;font:var(--t-caption);color:var(--muted)}
.kpi-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-delta{position:relative;display:inline-flex;align-items:center;gap:3px;flex:none;min-width:0;height:20px;padding:0 7px 0 5px;border-radius:var(--radius-pill);font:600 11px/1 var(--fb);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-delta .i{width:12px;height:12px;stroke-width:2.5}
.kpi-delta-l{font-weight:500;opacity:.85;overflow:hidden;text-overflow:ellipsis}
.kpi-delta.is-good{background:var(--green-soft);color:var(--green-text)}
.kpi-delta.is-bad{background:var(--red-soft);color:var(--red-text)}
.kpi-delta.is-neutral{background:var(--bg-2);color:var(--muted)}
.kpi-delta.is-empty{padding:0;background:none;color:var(--faint);font-weight:500}
.kpi-card .v.kpi-value{font:var(--t-value);font-variant-numeric:normal;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;background:none;-webkit-text-fill-color:currentColor}
.kpi-card.is-compact .v.kpi-value{font-size:24px;line-height:28px}
.kpi-unit{margin-left:2px;font-size:.62em;font-weight:600;letter-spacing:0;color:var(--muted)}
.kpi-spark{flex:none;display:block;width:96px;height:40px;margin-bottom:2px}
.kpi-card.is-compact .kpi-spark{height:24px}
/* A KPI context line may wrap to two lines (EX-05, EX-28): the explanation of a key number is never cut mid-word. */
.kpi-context{min-width:0;font:400 12px/16px var(--fb);color:var(--muted);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.kpi-context.is-empty{visibility:hidden}
.kpi-card.is-ctx2 .kpi-context,.kpi-ctx2 .kpi-context{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-overflow:clip}
.kpi-skel-v{width:58%;height:28px}.kpi-skel-c{width:80%;height:12px}
@container (max-width:169px){.kpi-spark{display:none}}
@container (max-width:259px){.kpi-delta-l{display:none}.kpi-delta{padding-right:6px}}
@container (max-width:219px){
  .kpi-grid{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:space-between;column-gap:8px}
  .kpi-grid>.kpi-label{order:1;flex:1 0 100%}.kpi-grid>.kpi-valwrap{order:2;flex:0 0 auto}
  .kpi-grid>.kpi-delta{order:3;margin:0 0 4px auto}.kpi-grid>.kpi-spark{display:none}.kpi-grid>.kpi-context{order:5;flex:1 0 100%}
}
.ui-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:20px}
.ui-kpi-row>.kpi{margin:0}
[data-surface="dark"] .kpi.kpi-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:#fff}
[data-surface="dark"] .kpi-card .v.kpi-value{color:#fff}
[data-surface="dark"] .kpi-label,[data-surface="dark"] .kpi-context{color:var(--nav-ink-soft)}

/* ---------- Segmented control ---------- */
.ui-seg{display:inline-flex;align-items:center;gap:2px;height:32px;padding:2px;border-radius:var(--radius-sm);background:var(--bg-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ui-seg::-webkit-scrollbar{display:none}
.ui-seg-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:500 13px/1 var(--fb);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.ui-seg-btn:hover:not(.is-on):not(:disabled){color:var(--ink)}
.ui-seg-btn.is-on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600}
.ui-seg-btn:disabled{opacity:.5;cursor:not-allowed}
.ui-seg.is-sm{height:28px}.ui-seg.is-sm .ui-seg-btn{height:24px;padding:0 9px;font-size:12px}
.ui-seg-btn .ui-count{height:16px;min-width:16px;padding:0 5px;font-size:10.5px}
.ui-seg-btn.is-on .ui-count{background:var(--brand-soft);color:var(--brand-text)}
[data-surface="dark"] .ui-seg{background:rgba(255,255,255,.08)}
[data-surface="dark"] .ui-seg-btn{color:var(--nav-ink-soft)}
[data-surface="dark"] .ui-seg-btn.is-on{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* ---------- Tabs (line | pill) with overflow ---------- */
.ui-tabs{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%}
.ui-tabs-list{display:flex;align-items:stretch;gap:2px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.ui-tabs-list::-webkit-scrollbar{display:none}
.ui-tab.is-clipped{visibility:hidden}
.ui-tabs-line{border-bottom:1px solid var(--line)}
.ui-tabs-line .ui-tabs-list{gap:18px}
.ui-tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;padding:0 1px;height:40px;border:0;background:none;color:var(--muted);font:500 13.5px/1 var(--fb);white-space:nowrap;cursor:pointer}
.ui-tab:hover:not(:disabled){color:var(--ink)}
.ui-tab:disabled{opacity:.45;cursor:not-allowed}
.ui-tabs-line .ui-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:transparent;transition:background-color var(--dur-2)}
.ui-tabs-line .ui-tab.is-on{color:var(--ink);font-weight:600}
.ui-tabs-line .ui-tab.is-on::after{background:var(--brand)}
.ui-tabs-line .ui-tab:focus-visible{outline-offset:-2px;border-radius:6px}
.ui-tab.is-on .ui-count{background:var(--brand-soft);color:var(--brand-text)}
.ui-tabs-pill .ui-tabs-list{gap:6px;padding:2px 0}
.ui-tabs-pill .ui-tab{height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid transparent}
.ui-tabs-pill .ui-tab:hover:not(.is-on){background:var(--hover)}
.ui-tabs-pill .ui-tab.is-on{background:var(--card);border-color:var(--line-2);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.ui-tabs.fade-r .ui-tabs-list{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.ui-tabs.fade-l .ui-tabs-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.ui-tabs.fade-l.fade-r .ui-tabs-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.ui-tabs-more{display:inline-flex;align-items:center;gap:4px;flex:none;align-self:center;height:30px;margin-left:6px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--card);color:var(--ink-2);font:500 12.5px/1 var(--fb);cursor:pointer}
.ui-tabs-more[hidden]{display:none}
.ui-tabs-more:hover{background:var(--hover)}

/* ---------- Filter chips + active-filter pills ---------- */
.ui-chips{display:flex;flex-wrap:wrap;gap:6px}
.ui-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--card);color:var(--ink-2);font:500 12.5px/1 var(--fb);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.ui-chip:hover:not(:disabled){border-color:var(--line-3);background:var(--card-2)}
.ui-chip[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text);font-weight:600}
.ui-chip[aria-pressed="true"] .ui-count{background:var(--card);color:var(--brand-text)}
.ui-chip .ui-count{height:16px;min-width:16px;padding:0 5px;font-size:10.5px}
.ui-pills{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:28px}
.ui-pills.is-empty{min-height:0}
.ui-pills-summary{font:var(--t-caption);color:var(--muted);margin-right:4px}
.ui-pill{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 3px 0 10px;border-radius:var(--radius-pill);background:var(--brand-softer);border:1px solid var(--brand-line);color:var(--ink-2);font:500 12px/1 var(--fb)}
.ui-pill-x{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.ui-pill-x:hover{background:var(--card);color:var(--ink)}
.ui-pills-clear{border:0;background:none;padding:4px 6px;border-radius:6px;color:var(--brand-text);font:600 12px/1 var(--fb);cursor:pointer}
.ui-pills-clear:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Date field + date range ---------- */
/* 148 px by default, never wider than its cell: a date field in a narrow grid column shrinks (the caption ellipsises) instead of overlapping the next column */
.ui-date{position:relative;display:inline-flex;align-items:center;width:148px;min-width:0;max-width:100%;height:36px}
.ui-date-input{width:100%;height:100%;padding:0 30px 0 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:400 13px/1 var(--fb);font-variant-numeric:tabular-nums}
.ui-date-input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.ui-date-cap{position:absolute;left:12px;right:30px;top:50%;transform:translateY(-50%);font:400 13px/1 var(--fb);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;background:var(--card)}
.ui-date.is-empty .ui-date-cap{color:var(--faint)}
.ui-date:focus-within .ui-date-cap{display:none}
.ui-date:not(:focus-within) .ui-date-input{color:transparent}
.ui-date:not(:focus-within) .ui-date-input::-webkit-datetime-edit{opacity:0}
.ui-date-ico{position:absolute;right:10px;color:var(--muted);pointer-events:none}
.ui-date-input::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;position:absolute;right:6px;width:22px;height:22px}
.ui-dr{display:grid;gap:12px;width:min(340px,calc(100vw - 32px));padding:6px}
.ui-dr-presets{display:grid;gap:2px}
.ui-dr-preset{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:500 13px/1.2 var(--fb);text-align:left;cursor:pointer}
.ui-dr-preset:hover{background:var(--hover)}
.ui-dr-preset-r{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.ui-dr-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ui-dr-f{display:grid;gap:5px;font:var(--t-caption);color:var(--muted)}
.ui-dr-f .ui-date{min-width:0;width:100%}
.ui-dr-err{margin:0;font:var(--t-caption);color:var(--st-delayed-text)}
.ui-dr-err[hidden]{display:none}
.ui-dr-actions{display:flex;justify-content:flex-end;gap:8px}
.ui-dr-custom-ico{display:none}
.ui-daterange.is-compact .ui-dr-custom-ico{display:inline-block}
.ui-daterange.is-compact .ui-dr-custom{padding:0 9px}
.ui-daterange.is-compact .ui-dr-custom-l,.ui-daterange.is-compact .ui-dr-custom>.i:last-child:not(.ui-dr-custom-ico){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (max-width:480px){
  .ui-daterange.is-compact-auto .ui-dr-custom-ico{display:inline-block}
  .ui-daterange.is-compact-auto .ui-dr-custom{padding:0 9px}
  .ui-daterange.is-compact-auto .ui-dr-custom-l,.ui-daterange.is-compact-auto .ui-dr-custom>.i:last-child:not(.ui-dr-custom-ico){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* Native date inputs enhanced in place (VNE.ui.enhanceDates): record editors, schedule matrices, time logs */
.ui-date.is-enhanced{display:flex;width:100%;min-width:0;height:auto}
.ui-date.is-enhanced>.ui-date-input{min-height:36px;padding-right:30px}
.ui-date.is-enhanced.is-disabled .ui-date-cap{background:transparent;color:var(--muted)}
.ui-date.is-enhanced.is-disabled .ui-date-ico{opacity:.5}

/* ---------- Table ---------- */
.ui-table-wrap{position:relative;overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.vne-card .ui-table-wrap{border:0;border-radius:0;margin:0 -18px;max-width:calc(100% + 36px);width:calc(100% + 36px)}
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font:var(--t-body-sm);color:var(--ink-2)}
.ui-table caption.ui-table-cap{caption-side:top;text-align:left;padding:0 0 8px;font:var(--t-caption);color:var(--muted)}
.ui-table thead th{position:sticky;top:0;z-index:2;height:36px;padding:0 12px;background:var(--card-2);border-bottom:1px solid var(--line);font:600 12px/16px var(--fb);color:var(--muted);text-align:left;white-space:nowrap;text-transform:none;letter-spacing:0}
.ui-table tbody th,.ui-table tbody td{height:40px;padding:6px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle;font-weight:400;background:var(--card)}
.ui-table tbody th{color:var(--ink);font-weight:500}
.ui-table tbody tr:last-child>*{border-bottom:0}
.ui-table.is-compact tbody th,.ui-table.is-compact tbody td{height:32px;padding-block:3px}
.ui-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-table .is-center{text-align:center}
.ui-table .is-sticky{position:sticky;left:0;z-index:1}
.ui-table thead .is-sticky{z-index:3}
.ui-table .is-sticky::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;background:var(--line-soft)}
.ui-table tbody tr:hover>*{background:var(--hover)}
.ui-table.is-clickable tbody tr[tabindex]{cursor:pointer}
.ui-table tbody tr[tabindex]:focus-visible{outline-offset:-2px}
.ui-th-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ui-th-sort:hover{color:var(--ink)}
.ui-table th.is-num .ui-th-sort{flex-direction:row-reverse}
.ui-sort-ico{opacity:.55}.ui-sort-ico.is-on{opacity:1;color:var(--ink)}
.ui-table-empty-row td{height:auto;padding:0}
.ui-table-empty{padding:28px 16px;text-align:center;color:var(--muted);font:var(--t-body-sm)}
.vl-pad-row td{padding:0!important;border:0!important;height:0}
@media (max-width:1535px){.ui-table .ui-p4{display:none}}   /* priority 4: only on wide screens (MOD-16) */
@media (max-width:1023px){.ui-table .ui-p3{display:none}}
@media (max-width:767px){.ui-table .ui-p2{display:none}}
/* Stacked rows (VNE.ui.table({stack:true}), PD-16/MOD-06/EX-10): below 560 px of container width a register row is a
   card — the key column on one line, then status, owner and dates on a wrapping meta line. Nothing is cut at the edge. */
.ui-table-wrap.is-stack{container-type:inline-size;container-name:uitable}
@container uitable (max-width:559.98px){
  .ui-table.is-stack,.ui-table.is-stack>tbody{display:block;width:100%}
  .ui-table.is-stack>thead{display:none}
  .ui-table.is-stack>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 16px;border-bottom:1px solid var(--line-soft)}
  .ui-table.is-stack>tbody>tr>*{display:block;width:auto!important;min-width:0!important;max-width:100%;height:auto;padding:0!important;border:0!important;background:none;text-align:left;white-space:normal}
  .ui-table.is-stack>tbody>tr>:first-child{flex:1 1 100%;font-weight:500}
  .ui-table.is-stack>tbody>tr>.ui-sm{order:-1;flex:1 1 100%;font-weight:500;color:var(--ink)}
  .ui-table.is-stack>tbody>tr:has(>.ui-sm)>:first-child{flex:0 0 auto;font-weight:400}
  .ui-table.is-stack>tbody>tr>.ui-p2{display:block}
  .ui-table.is-stack>tbody>tr>.ui-p3,.ui-table.is-stack>tbody>tr>.ui-sh{display:none}
  .ui-table.is-stack>tbody>tr>[data-label]::before{content:attr(data-label) " ";color:var(--muted);font:var(--t-caption)}
  .ui-table.is-stack>tbody>tr.ui-table-empty-row>td{flex:1 1 100%}
  .ui-table.is-stack .is-sticky{position:static}
}

/* ---------- Status pill, RAG chip, severity ---------- */
.ui-status,.ui-rag{position:relative;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:var(--radius-pill);font:500 12px/1 var(--fb);white-space:nowrap;vertical-align:middle;max-width:100%}
.ui-status.is-sm,.ui-rag.is-sm{height:20px;font-size:11.5px;padding:0 7px 0 5px;gap:4px}
.ui-status.is-compact,.ui-rag.is-compact{width:22px;padding:0;justify-content:center}
.ui-status-t,.ui-rag-t{overflow:hidden;text-overflow:ellipsis}
.ui-status.st-complete{background:var(--st-complete-soft);color:var(--st-complete-text)}
.ui-status.st-active{background:var(--st-active-soft);color:var(--st-active-text)}
.ui-status.st-atrisk{background:var(--st-atrisk-soft);color:var(--st-atrisk-text)}
.ui-status.st-delayed{background:var(--st-delayed-soft);color:var(--st-delayed-text)}
.ui-status.st-blocked{background:var(--st-blocked-soft);color:var(--st-blocked-text);box-shadow:inset 0 0 0 1px rgba(153,27,27,.25)}
.ui-status.st-hold{background:var(--st-hold-soft);color:var(--st-hold-text)}
.ui-status.st-future{background:var(--st-future-soft);color:var(--st-future-text);box-shadow:inset 0 0 0 1px var(--line)}
.ui-status.st-na{background:var(--st-na-soft);color:var(--st-na-text);box-shadow:inset 0 0 0 1px var(--line);opacity:.85}
.ui-rag.rag-green{background:var(--green-soft);color:var(--green-text)}
.ui-rag.rag-amber{background:var(--amber-soft);color:var(--amber-text)}
.ui-rag.rag-red{background:var(--red-soft);color:var(--red-text)}
.ui-rag.rag-grey{background:var(--grey-soft);color:var(--grey-text);box-shadow:inset 0 0 0 1px var(--line)}
:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-rag,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-rag.rag-green .i,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status.st-complete .i{color:var(--nav-ok)}
:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-rag.rag-amber .i,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status.st-atrisk .i{color:var(--nav-warn)}
:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-rag.rag-red .i,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status.st-delayed .i,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status.st-blocked .i{color:#F87171}
:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-rag.rag-grey .i,:is([data-surface="dark"],html:not([data-nav="light"]) .sidebar) .ui-status.st-future .i{color:var(--nav-ink-soft)}
/* Status menu (VNE.ui.statusMenu): an editable status pill — the chevron and a hover ring say it can be changed */
button.ui-status-menu{border:0;cursor:pointer;padding-right:5px;transition:box-shadow var(--dur-1),filter var(--dur-1)}
button.ui-status-menu.is-sm{padding-right:4px}
button.ui-status-menu .ui-status-caret{flex:none;opacity:.7;margin-left:-1px}
button.ui-status-menu:hover:not(:disabled),button.ui-status-menu[aria-expanded="true"]{box-shadow:inset 0 0 0 1px currentColor;filter:saturate(1.15)}
button.ui-status-menu:hover:not(:disabled) .ui-status-caret,button.ui-status-menu[aria-expanded="true"] .ui-status-caret{opacity:1}
button.ui-status-menu:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.ui-status-menu:disabled{cursor:default;padding-right:7px;opacity:1}
.perm-readonly button.ui-status-menu{pointer-events:none}
.perm-readonly button.ui-status-menu .ui-status-caret{display:none}
.ui-menu.ui-status-list{min-width:176px}
.ui-menu-item.ui-status-opt{grid-template-columns:1fr auto;min-height:32px;padding:0 8px}
.ui-menu-item.ui-status-opt .ui-menu-node{display:flex;min-width:0}
.ui-menu-item .ui-menu-tick{color:var(--brand-text)}
.ui-menu-item .ui-menu-tick.is-blank{opacity:0}
.ui-sev{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--radius-pill);font:600 11px/1 var(--fb);white-space:nowrap}
.ui-sev-n{font-weight:500;opacity:.8;font-variant-numeric:tabular-nums}
.ui-sev-n::before{content:"\00b7";margin-right:5px}
.ui-sev.sev-low{background:var(--sev-low,#F1F5F9);color:var(--sev-low-text,#334155)}
.ui-sev.sev-med{background:var(--sev-med,#FEF3C7);color:var(--sev-med-text,#B45309)}
.ui-sev.sev-high{background:var(--sev-high,#FFEDD5);color:var(--sev-high-text,#9A3412)}
.ui-sev.sev-crit{background:var(--sev-crit,#FEE2E2);color:var(--sev-crit-text,#B91C1C)}

/* ---------- Avatar, entity chip ---------- */
.ui-av{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--av,#334155);color:#fff;font:600 10px/1 var(--fb);letter-spacing:.02em;text-transform:uppercase;user-select:none;overflow:hidden}
.ui-av-18{width:18px;height:18px;font-size:8px}.ui-av-28{width:28px;height:28px;font-size:11px}.ui-av-32{width:32px;height:32px;font-size:12px}.ui-av-40{width:40px;height:40px;font-size:14px}
.ui-av.is-neutral{background:var(--bg-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.ui-av-stack{display:inline-flex;align-items:center}
.ui-av-stack>.ui-av{box-shadow:0 0 0 2px var(--card)}
.ui-av-stack>.ui-av+.ui-av{margin-left:-3px}
/* PD-25: a 2 px card ring and a 3 px overlap keep both initials readable; per-person decision badge bottom-right. */
.ui-av-stack>.ui-av-wb{position:relative;display:inline-flex;flex:none}
.ui-av-stack>.ui-av-wb>.ui-av{box-shadow:0 0 0 2px var(--card)}
.ui-av-stack>*+.ui-av-wb,.ui-av-stack>.ui-av-wb+.ui-av{margin-left:-3px}
/* The badge sits low (its top 17 px down, below the initials) and above the next avatar, so where it reaches into the
   overlapping neighbour it never covers that neighbour's first initial. */
.ui-av-badge{position:absolute;z-index:1;right:-3px;bottom:-5px;display:inline-grid;place-items:center;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--card)}
.ui-av-badge.is-ok{color:var(--st-complete)}
.ui-av-badge.is-bad{color:var(--st-delayed)}
.ui-av-badge.is-wait{color:var(--muted)}
.ui-av-more{background:var(--bg-2);color:var(--muted);font-weight:600}
.ui-person{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;white-space:nowrap;vertical-align:middle}
.ui-person-n{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.ui-person-s{color:var(--muted);font-size:12px}
.ui-ent{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;vertical-align:middle}
.ui-ent .flag-img{width:16px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(15,23,42,.12);object-fit:cover;flex:none}
.ui-ent .flag-iso{display:inline-grid;place-items:center;height:14px;padding:0 3px;border-radius:3px;background:var(--bg-2);color:var(--muted);font:700 9px/1 var(--fb)}
.ui-ent .flag-ico{display:inline-flex;color:var(--muted)}
.ui-ent-code{font:700 12px/1 var(--fb);letter-spacing:.03em;color:var(--ink-2)}
.ui-ent-name{font:500 13px/1.2 var(--fb);color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.ui-ent-dot{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
@media (max-width:767px){.ui-ent-name{display:none}}
[data-surface="dark"] .ui-ent-code{color:#fff}
[data-surface="dark"] .ui-ent-name{color:var(--nav-ink)}

/* ---------- Progress, bullet, meter, distribution bar, legend ---------- */
.ui-progress{position:relative;display:block;flex:1 1 auto;min-width:40px;height:var(--h,6px);border-radius:var(--radius-pill);background:var(--track)}
.ui-progress-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--c,var(--ui-mark));min-width:0}
.ui-progress.tone-good .ui-progress-fill{background:var(--st-complete)}
.ui-progress.tone-warn .ui-progress-fill{background:var(--st-atrisk)}
.ui-progress.tone-bad .ui-progress-fill{background:var(--st-delayed)}
.ui-progress.tone-neutral .ui-progress-fill{background:var(--chart-muted-line)}
.ui-progress-tick{position:absolute;top:50%;width:2px;height:12px;margin-left:-1px;transform:translateY(-50%);border-radius:1px;background:var(--ink)}
.ui-progress-row{display:flex;align-items:center;gap:10px;min-width:0}
.ui-progress-v{font:600 12px/1 var(--fb);font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:34px;text-align:right}
.ui-bullet{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.ui-bullet-l{flex:0 1 auto;min-width:min(44px,30%);max-width:40%;font:var(--t-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-bullet-track{position:relative;flex:1 1 auto;min-width:48px;height:10px;border-radius:5px;background:var(--track)}
/* Bullets are neutral (R9): the fill is slate, the status colour only marks the gap to the target as a solid soft tint
   (the 45° hatch is reserved for Blocked). */
.ui-bullet-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c,var(--chart-label))}
.ui-bullet-gap{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;opacity:.9}
.ui-bullet-gap.gap-warn{background:color-mix(in srgb,var(--st-atrisk) 38%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-atrisk) 55%,transparent)}
.ui-bullet-gap.gap-bad{background:color-mix(in srgb,var(--st-delayed) 34%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-delayed) 55%,transparent)}
.ui-bullet-over{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;background:repeating-linear-gradient(135deg,var(--st-delayed) 0 3px,color-mix(in srgb,var(--st-delayed) 60%,var(--card)) 3px 6px)}
.ui-bullet.is-cap.is-over .ui-bullet-fill{border-radius:5px 0 0 5px}
.ui-bullet.is-over .ui-bullet-v{color:var(--st-delayed-text)}
.ui-bullet-tick{position:absolute;top:50%;width:2px;height:14px;margin-left:-1px;transform:translateY(-50%);border-radius:1px;background:var(--ink);box-shadow:0 0 0 1px var(--card)}
.ui-bullet-v{flex:none;min-width:36px;text-align:right;font:600 12px/1 var(--fb);font-variant-numeric:tabular-nums;color:var(--ink)}
.ui-bullet.is-compact .ui-bullet-track{height:8px}
.ui-bullet.is-compact .ui-bullet-tick{height:12px}
[data-surface="dark"] .ui-bullet-track,[data-surface="dark"] .ui-progress{background:rgba(255,255,255,.10)}
[data-surface="dark"] .ui-bullet-fill{background:rgba(255,255,255,.72)}
[data-surface="dark"] .ui-bullet-tick,[data-surface="dark"] .ui-progress-tick{background:#fff;box-shadow:none}
[data-surface="dark"] .ui-bullet-v{color:#fff}
[data-surface="dark"] .ui-bullet-l{color:var(--nav-ink-soft)}
.ui-meter,.ui-dist{display:flex;gap:2px;width:100%;min-width:40px;height:var(--h,8px);border-radius:var(--radius-xs);overflow:hidden}
.ui-meter{cursor:default}
.ui-meter:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ui-meter-seg,.ui-dist-seg{flex:1 1 0;min-width:3px;background:var(--c,var(--st-future-mark))}
.ui-meter-empty{flex:1;background:var(--track)}
.is-st-complete{--c:var(--st-complete)}.is-st-active{--c:var(--st-active)}.is-st-atrisk{--c:var(--st-atrisk)}.is-st-delayed{--c:var(--st-delayed)}
.is-st-blocked{--c:var(--st-blocked)}.is-st-hold{--c:var(--st-hold)}.is-st-future{--c:var(--st-future-mark)}.is-st-na{--c:transparent}
.is-rag-green{--c:var(--green)}.is-rag-amber{--c:var(--amber)}.is-rag-red{--c:var(--red)}.is-rag-grey{--c:var(--grey)}
.ui-meter-seg.is-hatch{background:repeating-linear-gradient(135deg,var(--c) 0 3px,color-mix(in srgb,var(--c) 62%,#fff) 3px 5px)}
.ui-meter-wrap,.ui-dist-wrap{display:grid;gap:8px;width:100%}
.ui-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:400 12px/16px var(--fb);color:var(--ink-2)}
.ui-legend-i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ui-swatch{display:inline-block;flex:none;width:10px;height:10px;border-radius:2.5px;background:var(--c,var(--ui-mark))}
.ui-legend-v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
[data-surface="dark"] .ui-legend{color:var(--nav-ink)}
[data-surface="dark"] .ui-legend-v{color:#fff}

/* ---------- Micro-visuals: sparkline, ring, RAG strip, bar list ---------- */
.ui-spark{position:relative;display:inline-block;line-height:0;--sc:var(--c,var(--ui-mark))}
.ui-spark-svg{display:block;overflow:visible}
.ui-spark-line{fill:none;stroke:var(--sc);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ui-spark-area{fill:var(--sc);opacity:.10;stroke:none}
.ui-spark-dot{fill:var(--sc);stroke:var(--card);stroke-width:2}
[data-surface="dark"] .ui-spark-dot{stroke:var(--nav)}
.ui-spark.is-empty{width:96px;height:2px;margin-top:20px;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px)}
.ui-ring{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ui-ring-disc{position:relative;display:grid;place-items:center;line-height:0}
.ui-ring-svg{display:block;overflow:visible}
.ui-ring-track{stroke:var(--track)}
.ui-ring-fill{stroke:var(--c,var(--ui-mark))}
.ui-ring-tick{stroke:var(--ink)}
.ui-ring-v{position:absolute;inset:0;display:grid;place-items:center;font:700 20px/1 var(--fh);letter-spacing:-.02em;color:var(--ink)}
.ui-ring-sm .ui-ring-v{font-size:13px}
.ui-ring-lg .ui-ring-v{font-size:28px}
.ui-ring-l{font:500 11px/14px var(--fb);color:var(--muted);max-width:120px}
.ui-ring-t{margin-top:-4px;font:400 11px/14px var(--fb);color:var(--muted)}
[data-surface="dark"] .ui-ring-track{stroke:rgba(255,255,255,.10)}
[data-surface="dark"] .ui-ring-v{color:#fff}
[data-surface="dark"] .ui-ring-tick{stroke:#fff}
[data-surface="dark"] .ui-ring-l,[data-surface="dark"] .ui-ring-t{color:var(--nav-ink-soft)}
.ui-ragstrip{display:inline-flex;line-height:0;vertical-align:middle}
.ui-rs-sq{fill:var(--c,var(--line))}
.ui-rs-cell.is-rag-none .ui-rs-sq{fill:var(--bg-2)}
.ui-rs-cell.is-rag-grey .ui-rs-sq{fill:var(--st-future-mark)}
.ui-rs-g{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ui-rs-cell.is-rag-amber .ui-rs-g{stroke:#0F172A}
.ui-rs-cell.is-rag-grey .ui-rs-g,.ui-rs-cell.is-rag-none .ui-rs-g{stroke:var(--muted)}
.ui-barlist{display:grid;gap:12px;min-width:0}
.ui-bl-rows{display:grid;grid-template-columns:minmax(64px,max-content) minmax(0,1fr) minmax(40px,max-content);gap:10px 12px}
.ui-bl-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
@supports not (grid-template-columns:subgrid){.ui-bl-row{grid-template-columns:minmax(64px,140px) minmax(0,1fr) 40px;gap:12px}}
.ui-bl-label{font:500 12px/16px var(--fb);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.ui-bl-track{display:block;min-width:0}
.ui-bl-bar{display:flex;gap:2px;height:22px;min-width:2px;max-width:100%}
.ui-bl-seg{display:flex;align-items:center;justify-content:center;min-width:3px;padding:0;border:0;background:var(--c);color:#fff;font:600 11px/1 var(--fb);font-variant-numeric:tabular-nums;cursor:default;overflow:hidden}
button.ui-bl-seg{cursor:pointer}
button.ui-bl-seg:hover{filter:brightness(1.08) saturate(1.05)}
.ui-bl-seg:first-child{border-radius:4px 0 0 4px}.ui-bl-seg:last-child{border-radius:0 4px 4px 0}.ui-bl-seg:only-child{border-radius:4px}
.ui-bl-seg.ink-ink{color:#0F172A}
.ui-bl-seg.is-narrow .ui-bl-n{display:none}
.ui-bl-total{font:600 12px/1 var(--fb);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}

/* ---------- Health matrix (R10) ---------- */
.ui-hm-wrap{overflow-x:auto;max-width:100%;container-type:inline-size;container-name:uihm}
.ui-hm{width:100%;border-collapse:separate;border-spacing:0;font:var(--t-body-sm)}
.ui-hm thead th{height:34px;padding:0 10px;background:var(--card-2);border-bottom:1px solid var(--line);font:600 12px/16px var(--fb);color:var(--muted);text-align:center;white-space:nowrap}
.ui-hm th.ui-hm-rowh{position:sticky;left:0;z-index:1;text-align:left;background:var(--card);min-width:120px}
.ui-hm thead th.ui-hm-rowh{background:var(--card-2);z-index:2}
.ui-hm tbody th,.ui-hm tbody td{height:44px;padding:4px 10px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle}
.ui-hm tbody th{display:table-cell}
.ui-hm tbody th .ui-ent{margin-right:6px}
.ui-hm-name{font:500 13px/1.2 var(--fb);color:var(--ink);vertical-align:middle}
.ui-hm tbody tr:last-child>*{border-bottom:0}
.ui-hm .is-overall{border-left:2px solid var(--line-2)}
.ui-hm-btn,.ui-hm-cell{display:inline-flex;padding:0;border:0;border-radius:var(--radius-pill);background:none;cursor:pointer}
.ui-hm-cell{cursor:help}
.ui-hm-btn:hover .ui-rag{filter:brightness(.97);box-shadow:inset 0 0 0 1px currentColor}
.ui-hm-lbl{display:none}
/* EX-16: below 720 px of container width the matrix stacks into one card per project: project chip and name on top,
   then each dimension as "caption · chip with words" (never icon-only, never a clipped column header). */
@container uihm (max-width:719.98px){
  .ui-hm,.ui-hm tbody{display:block}
  .ui-hm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ui-hm tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px 16px;padding:10px 2px 12px;border-bottom:1px solid var(--line-soft)}
  .ui-hm tbody tr:last-child{border-bottom:0}
  .ui-hm tbody th,.ui-hm tbody td{height:auto;padding:0;border:0;text-align:left}
  .ui-hm tbody th.ui-hm-rowh{grid-column:1/-1;position:static;min-width:0;display:flex;align-items:center;gap:6px;background:none}
  .ui-hm tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
  .ui-hm .is-overall{border-left:0}
  .ui-hm td.is-overall{font-weight:600}
  .ui-hm-lbl{display:inline;font:12px/16px var(--fb);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .ui-hm-name{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}

/* ---------- Empty, skeleton, live dot ---------- */
.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:28px 16px;text-align:center}
.ui-empty.is-compact{padding:16px 12px}
.ui-empty-ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:8px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text)}
.ui-empty.is-compact .ui-empty-ico{width:36px;height:36px;margin-bottom:4px}
.ui-empty-title{margin:0;font:600 14px/20px var(--fb);color:var(--ink)}
.ui-empty-body{margin:0;max-width:46ch;font:400 13px/19px var(--fb);color:var(--muted)}
.ui-empty-act{margin-top:10px}
[data-surface="dark"] .ui-empty-ico{background:rgba(255,255,255,.08);color:#fff}
[data-surface="dark"] .ui-empty-title{color:#fff}
[data-surface="dark"] .ui-empty-body{color:var(--nav-ink-soft)}
.ui-skel{display:grid;gap:10px;align-content:start}
.ui-skel-card{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.ui-skel-kpi{min-height:116px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.ui-skel-b{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--hover) 40%,var(--bg-2) 80%);background-size:200% 100%;animation:ui-shimmer 1.4s linear infinite}
.sk-title{width:38%;height:14px}.sk-line{width:92%}.sk-short{width:64%}.sk-block{height:var(--sk-h,120px);border-radius:8px}
.sk-l{width:48%}.sk-v{width:36%;height:26px}.sk-c{width:70%}
.sk-chart{height:var(--sk-h,240px);border-radius:10px}
.sk-th{height:32px;border-radius:6px}.sk-tr{height:18px}
@keyframes ui-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ui-skel-b,.vne-chart.is-loading::before{animation:none!important}}
.ui-live-dot{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--grey);vertical-align:middle}
.ui-live-dot.is-live{background:var(--st-complete)}
.ui-live-dot.is-reconnecting{background:var(--st-atrisk)}
.ui-live-dot.is-offline{background:var(--grey)}
.ui-live-dot.is-local{background:var(--st-active)}
.ui-live-dot.is-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--st-complete);opacity:0;animation:ui-pulse 2s var(--ease-out) infinite}
@keyframes ui-pulse{0%{opacity:.35;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.ui-live-dot.is-live::after{animation:none;opacity:0}}

/* ---------- Popover, menu ---------- */
.ui-pop{position:fixed;z-index:var(--z-popover);min-width:180px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);color:var(--ink);animation:ui-pop-in var(--dur-2) var(--ease-out)}
.ui-pop:focus{outline:none}
.ui-pop.demo-pop{padding:14px 16px;z-index:calc(var(--z-toast) + 2)}   /* the demo banner's details: above the sign-in page (z 100) too */
/* A menu opened from inside a drawer, modal or dialog must sit above it (popover 60 < modal 90 < dialog 95). */
body.modal-open .ui-pop:not(.demo-pop){z-index:calc(var(--z-modal) + 6)}
@keyframes ui-pop-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.ui-menu{display:grid;gap:1px;min-width:200px}
.ui-menu-item{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;min-height:34px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--ink-2);font:500 13px/1.2 var(--fb);text-align:left;cursor:pointer}
.ui-menu-item .i{color:var(--muted)}
.ui-menu-item .i.is-blank{opacity:0}
.ui-menu-item:hover:not(:disabled),.ui-menu-item:focus-visible{background:var(--hover);color:var(--ink);outline:none}
.ui-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.ui-menu-item:disabled{opacity:.45;cursor:not-allowed}
.ui-menu-item.is-danger{color:var(--st-delayed-text)}
.ui-menu-item.is-danger .i{color:var(--st-delayed-text)}
.ui-menu-hint{color:var(--faint);font-size:12px;font-weight:400}
.ui-menu-sep{height:1px;margin:5px 6px;background:var(--line-soft)}
.ui-menu-head{padding:8px 10px 4px;font:600 11px/1 var(--fb);color:var(--faint)}
.ui-menu-noicon{width:16px}

/* ---------- Toasts ---------- */
.ui-toasts{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:min(400px,calc(100vw - 32px));pointer-events:none}
.ui-toast{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 10px 12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);color:var(--ink);font:400 13px/19px var(--fb);pointer-events:auto;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.ui-toast.is-in{opacity:1;transform:none}
.ui-toast.is-leaving{opacity:0;transform:translateY(4px)}
.ui-toast-ico{display:inline-flex;margin-top:1px;flex:none}
.ui-toast-info .ui-toast-ico{color:var(--st-active)}
.ui-toast-success .ui-toast-ico{color:var(--st-complete)}
.ui-toast-warn .ui-toast-ico{color:var(--st-atrisk)}
.ui-toast-error{border-color:var(--red-line,#FECACA)}
.ui-toast-error .ui-toast-ico{color:var(--st-delayed)}
.ui-toast-msg{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ui-toast-act{flex:none;padding:2px 6px;border:0;border-radius:6px;background:none;color:var(--brand-text);font:600 13px/19px var(--fb);cursor:pointer}
.ui-toast-act:hover{background:var(--brand-softer)}
.ui-toast-x{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:-2px 0 -2px 2px;padding:0;border:0;border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.ui-toast-x:hover{background:var(--hover);color:var(--ink)}
/* While a drawer or modal is open its footer (Save / Done) sits bottom-right: toasts move to the bottom-left so they never cover it. */
@media (min-width:901px){body.modal-open .ui-toasts{right:auto;left:20px;align-items:flex-start}}
@media (max-width:900px){.ui-toasts{left:50%;right:auto;transform:translateX(-50%);align-items:stretch;bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ---------- Confirm dialog (in the app modal, or its own stacked layer) ---------- */
.ui-dialog-layer{position:fixed;inset:0;z-index:calc(var(--z-modal) + 5);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.ui-dialog-layer.is-in{opacity:1}
.ui-dialog-layer.is-leaving{opacity:0}
.ui-dialog-backdrop{position:absolute;inset:0;background:var(--overlay,rgba(15,23,42,.48))}
.ui-dialog-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transform:translateY(6px);transition:transform var(--dur-3) var(--ease-out)}
.ui-dialog-layer.is-in .ui-dialog-card{transform:none}
body.ui-dialog-open{overflow:hidden}
.ui-confirm{display:grid;gap:14px;max-width:420px}
.ui-confirm-head{display:flex;align-items:center;gap:12px}
.ui-confirm-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text)}
.ui-confirm.is-danger .ui-confirm-ico{background:var(--st-delayed-soft);color:var(--st-delayed-text)}
.ui-confirm-title{margin:0;font:var(--t-title);letter-spacing:-.01em;color:var(--ink)}
.ui-confirm-body{display:grid;gap:12px;font:400 14px/21px var(--fb);color:var(--muted)}
.ui-confirm-body p{margin:0}
.ui-confirm-req{display:grid;gap:6px;font:var(--t-caption);color:var(--ink-2)}
.ui-confirm-req strong{font-weight:700;color:var(--ink)}
.ui-confirm-input{height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font:400 14px/1 var(--fb);color:var(--ink);background:var(--card)}
.ui-confirm-input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.ui-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#modal .modal-card:has(> #modal-body > .ui-confirm),#modal .modal-card:has(#modal-body > .ui-confirm:only-child){width:min(440px,calc(100vw - 32px))}

/* ===========================================================
   Charts (VNE.charts): figure, loading/empty/error, data table, tooltip
   =========================================================== */
.vne-chart-wrap{position:relative;margin:0;min-width:0}
.vne-chart-cap{margin:0 0 8px;font:500 13px/20px var(--fb);color:var(--ink-2)}
.vne-chart{position:relative;width:100%;min-width:0}
.vne-chart[data-drill]{cursor:pointer}
.vne-chart.is-loading::before{content:"";position:absolute;inset:4px 0;border-radius:10px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--hover) 40%,var(--bg-2) 80%);background-size:200% 100%;animation:ui-shimmer 1.4s linear infinite}
[data-surface="dark"] .vne-chart.is-loading::before{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.09) 40%,rgba(255,255,255,.04) 80%);background-size:200% 100%}
.vne-chart.is-empty{display:grid;place-items:center;border:1px dashed var(--line);border-radius:10px}
.vne-chart.is-empty .ui-empty{height:100%}
.vne-chart.is-error{display:grid;place-items:center;border:1px dashed var(--line-2);border-radius:10px;background:var(--card-2)}
.vne-chart-msg{margin:0;font:500 13px/1 var(--fb);color:var(--muted)}
/* "View data": the summary is visually hidden until focused (skip-link pattern); ⋯ → Show data table opens it */
.vne-chart-data{margin-top:4px}
.vne-chart-data>summary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;list-style:none;font:600 12px/1 var(--fb);color:var(--brand-text);cursor:pointer}
.vne-chart-data>summary::-webkit-details-marker{display:none}
.vne-chart-data>summary:focus-visible,.vne-chart-data[open]>summary,.vne-chart-wrap.show-data .vne-chart-data>summary,.vne-chart-wrap.has-error .vne-chart-data>summary{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:inline-flex;padding:6px 2px;border-radius:6px}
.vne-chart-data>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vne-chart-data[open]{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.vne-chart-data[open]>summary{position:sticky;top:0;z-index:2;width:100%;padding:8px 12px;background:var(--card-2);border-bottom:1px solid var(--line)}
.vne-chart-table{width:100%;border-collapse:collapse;font:400 12.5px/18px var(--fb);color:var(--ink-2)}
.vne-chart-table th,.vne-chart-table td{padding:6px 12px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vne-chart-table thead th{font-weight:600;color:var(--muted);background:var(--card)}
.vne-chart-table th[scope="row"],.vne-chart-table thead th:first-child{text-align:left;font-weight:500;color:var(--ink)}
.vne-chart-rowbtn{padding:0;border:0;background:none;color:var(--brand-text);font:500 12.5px/18px var(--fb);text-align:left;cursor:pointer;border-radius:4px}
.vne-chart-rowbtn:hover{text-decoration:underline;text-underline-offset:2px}
[data-surface="dark"] .vne-chart-data>summary{color:#fff}
/* Tooltip (ECharts sets position, background and border; everything inside is ours) */
.vne-chart-tip{box-shadow:var(--shadow-md)!important;pointer-events:none}
.vct{display:grid;gap:4px;min-width:150px;max-width:280px;font:400 12px/16px var(--fb)}
.vct-h{font:600 12px/16px var(--fb);color:var(--ink);margin-bottom:2px;white-space:normal}
.vct-r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vct-k{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vct-v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.vct-dot{flex:none;display:block}
.vct-f{margin-top:4px;padding-top:6px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--muted)}
[data-surface="dark"] .vct-h,[data-surface="dark"] .vct-v{color:#fff}
[data-surface="dark"] .vct-k,[data-surface="dark"] .vct-f{color:var(--nav-ink-soft)}
[data-surface="dark"] .vct-f{border-top-color:rgba(255,255,255,.12)}
@media print{.vne-chart,.vne-chart-wrap{break-inside:avoid}.vne-chart-data,.ui-toasts,.ui-pop,.ui-tip{display:none!important}}
/* MOD-17: on a phone the card headline (the card's answer) wraps to two lines instead of losing its end. */
@media (max-width:767px){.vne-card .card-headline{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}