/* ============================================================================
 * components-ui.css — token-driven primitive component classes (Checkpoint 1)
 *
 * The ~20 primitives inventoried in handoff/findings/013, re-expressed from the
 * source's Tailwind utilities into plain CSS classes that read purely off the
 * tokens in tokens.css. New primitives get a `.ui-` prefix; a few additive
 * variants extend the existing styles.css classes (.btn/.card/.pill) so the
 * live app can opt in during C2 without name churn.
 *
 * LOAD ORDER: after styles.css + tokens.css (tokens must be defined; additive
 * .btn/.card enhancements intentionally come last so they win where used).
 *
 * NOTE: `.material-symbols-outlined` (icon font) is wired via <link> in
 * index.html / gallery.html; these classes just size + colour it.
 * ==========================================================================*/

/* ---- type-role utility classes (optional helpers mirroring the source roles) ---- */
.t-display-hero{font-family:var(--font-display);font-size:var(--fs-display-hero);line-height:var(--lh-display-hero);font-weight:var(--fw-display-hero);letter-spacing:var(--ls-display-hero)}
.t-headline-lg{font-family:var(--font-display);font-size:var(--fs-headline-lg);line-height:var(--lh-headline-lg);font-weight:var(--fw-headline-lg);letter-spacing:var(--ls-headline-lg)}
.t-headline-md{font-family:var(--font-display);font-size:var(--fs-headline-md);line-height:var(--lh-headline-md);font-weight:var(--fw-headline-md);letter-spacing:var(--ls-headline-md)}
.t-headline-sm{font-family:var(--font-display);font-size:var(--fs-headline-sm);line-height:var(--lh-headline-sm);font-weight:var(--fw-headline-sm);letter-spacing:var(--ls-headline-sm)}
.t-body-lg{font-family:var(--font-body);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-body-lg)}
.t-body-md{font-family:var(--font-body);font-size:var(--fs-body-md);line-height:var(--lh-body-md);font-weight:var(--fw-body-md)}
.t-body-sm{font-family:var(--font-body);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-body-sm)}
.t-code-lg{font-family:var(--font-mono);font-size:var(--fs-code-lg);line-height:var(--lh-code-lg);font-weight:var(--fw-code-lg)}
.t-code-md{font-family:var(--font-mono);font-size:var(--fs-code-md);line-height:var(--lh-code-md);font-weight:var(--fw-code-md)}
.t-code-sm{font-family:var(--font-mono);font-size:var(--fs-code-sm);line-height:var(--lh-code-sm);font-weight:var(--fw-code-sm)}
.t-label-caps{font-family:var(--font-mono);font-size:var(--fs-label-caps);line-height:var(--lh-label-caps);font-weight:var(--fw-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--on-surface-variant)}
.t-badge-status{font-family:var(--font-mono);font-size:var(--fs-badge-status);line-height:var(--lh-badge-status);font-weight:var(--fw-badge-status)}

.material-symbols-outlined{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-size:20px;vertical-align:middle}

/* ============================================================================
 * 1 · BUTTON — variants: glow (violet gradient CTA), solid, tonal, ghost/icon,
 * danger. Sizes sm/md. States hover/active/disabled/focus. `.ui-btn` is the
 * standalone primitive; `.btn.ui-glow` etc. also extend the existing .btn.
 * ==========================================================================*/
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md);border:1px solid transparent;border-radius:var(--radius-lg);
  font-family:var(--font-body);font-size:var(--fs-body-md);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  background:var(--surface-container-low);color:var(--on-surface);box-shadow:var(--shadow-soft);
  transition:background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.ui-btn:hover{background:var(--surface-container)}
.ui-btn:active{transform:translateY(1px)}
.ui-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.ui-btn.sm{padding:var(--space-xs) var(--space-sm);font-size:var(--fs-body-sm)}
.ui-btn .material-symbols-outlined{font-size:18px}

/* glow gradient CTA — the signature move */
.ui-btn.ui-glow,.btn.ui-glow{border:none;color:var(--on-primary);
  background:linear-gradient(90deg,var(--inverse-primary),var(--primary-container));
  box-shadow:var(--shadow-glow-primary)}
.ui-btn.ui-glow:hover,.btn.ui-glow:hover{box-shadow:var(--shadow-glow-primary-strong);background:linear-gradient(90deg,var(--inverse-primary),var(--primary-container))}
/* solid primary */
.ui-btn.solid{background:var(--primary-container);color:var(--on-primary-container);border:none}
.ui-btn.solid:hover{filter:brightness(1.06)}
/* tonal (neutral fill) */
.ui-btn.tonal{background:var(--surface-container);color:var(--on-surface)}
.ui-btn.tonal:hover{background:var(--surface-container-high)}
/* ghost / icon-only */
.ui-btn.ghost{background:transparent;box-shadow:none;color:var(--on-surface-variant)}
.ui-btn.ghost:hover{background:var(--surface-container);color:var(--on-surface)}
.ui-btn.icon{padding:var(--space-sm);background:transparent;box-shadow:none;color:var(--on-surface-variant);border-radius:var(--radius-lg)}
.ui-btn.icon:hover{background:var(--surface-container);color:var(--on-surface)}
/* danger */
.ui-btn.danger{background:transparent;color:var(--error);border-color:var(--error-container)}
.ui-btn.danger:hover{background:color-mix(in srgb,var(--error) 12%,transparent)}

/* ============================================================================
 * 2 · BADGE / PILL / CHIP — status (dot+label tinted), version-mono, count,
 * tag, filter-pill(active), label-caps. `.ui-badge` base + colour modifiers.
 * ==========================================================================*/
.ui-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:2px var(--space-sm);
  border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--fs-badge-status);
  line-height:var(--lh-badge-status);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid transparent}
.ui-badge .ui-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-badge.done{background:color-mix(in srgb,var(--tertiary) 18%,transparent);color:var(--tertiary);border-color:color-mix(in srgb,var(--tertiary) 30%,transparent)}
.ui-badge.live,.ui-badge.open{background:color-mix(in srgb,var(--tertiary) 18%,transparent);color:var(--tertiary)}
.ui-badge.info,.ui-badge.progress{background:color-mix(in srgb,var(--secondary) 18%,transparent);color:var(--secondary);border-color:color-mix(in srgb,var(--secondary) 30%,transparent)}
.ui-badge.accent{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary)}
.ui-badge.warn{background:color-mix(in srgb,var(--warning) 20%,transparent);color:var(--warning)}
.ui-badge.blocked,.ui-badge.crit{background:color-mix(in srgb,var(--error) 18%,transparent);color:var(--error)}
.ui-badge.neutral{background:var(--surface-container-high);color:var(--on-surface-variant)}
.ui-badge .ui-dot.pulse{animation:ui-pulse 1.6s ease-in-out infinite}
@keyframes ui-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* version chip / tag slug (mono on raised container) */
.ui-chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:1px var(--space-sm);
  border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-code-sm);font-weight:500;
  background:var(--surface-container-highest);color:var(--on-surface-variant)}
.ui-chip.count{border-radius:var(--radius-full);min-width:20px;justify-content:center}

/* filter pill (catalog strip) — default / active */
.ui-filter{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);
  border-radius:var(--radius-full);font-size:var(--fs-body-sm);font-weight:600;cursor:pointer;
  background:var(--surface-container-low);color:var(--on-surface-variant);border:1px solid var(--outline-variant);
  transition:all var(--dur-fast) var(--ease-standard)}
.ui-filter:hover{background:var(--surface-container);color:var(--on-surface)}
.ui-filter.on{background:color-mix(in srgb,var(--primary-container) 30%,var(--surface));color:var(--primary);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}

/* label-caps mini caption */
.ui-caps{font-family:var(--font-mono);font-size:var(--fs-label-caps);line-height:var(--lh-label-caps);
  font-weight:600;letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--on-surface-variant)}

/* ============================================================================
 * 3 · CARD — glass panel base / hover / selected(ring+glow+accent bar) /
 * gradient-border. `.ui-card` base; also enhances existing `.card.ui-glass`.
 * ==========================================================================*/
.ui-card,.card.ui-glass{position:relative;background:color-mix(in srgb,var(--surface-card) 92%,transparent);
  border:1px solid var(--outline-variant);border-radius:var(--radius-xl);padding:var(--space-md);
  box-shadow:var(--shadow-soft);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
/* three distinct states: resting (recessed --surface-card) -> hover (raised --surface-bright) ->
 * selected (accent-tinted --surface-container + glow + left accent bar — a different color again) */
.ui-card.hover:hover,.ui-card.interactive:hover{background:var(--surface-bright);border-color:var(--outline)}
.ui-card.selected{background:color-mix(in srgb,var(--primary) 10%,var(--surface-container));border-color:color-mix(in srgb,var(--primary) 60%,transparent);
  box-shadow:var(--shadow-glow-primary);padding-left:calc(var(--space-md) + 3px)}
.ui-card.selected::before{content:"";position:absolute;left:0;top:var(--space-sm);bottom:var(--space-sm);width:3px;
  border-radius:var(--radius-full);background:var(--primary)}
/* gradient-border card (blurred violet→cyan→mint behind) */
.ui-card.gradient{border:none;background:var(--surface-card)}
.ui-card.gradient::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,var(--primary),var(--secondary),var(--tertiary));filter:blur(6px);opacity:.5}

/* ============================================================================
 * 4 · INPUT — text/search: leading icon, focus ring, inner shadow. Trailing btn.
 * ==========================================================================*/
.ui-field{position:relative;display:flex;align-items:center}
.ui-field>.material-symbols-outlined{position:absolute;left:10px;color:var(--outline);font-size:18px;pointer-events:none}
.ui-field.has-icon .ui-input{padding-left:34px}
.ui-input{width:100%;box-sizing:border-box;padding:var(--space-sm) var(--space-md);
  background:var(--surface-container-low);color:var(--on-surface);border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--fs-body-md);
  box-shadow:var(--shadow-inner);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.ui-input::placeholder{color:var(--outline)}
.ui-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-inner),0 0 0 1px var(--primary)}
.ui-input:disabled{opacity:.5;cursor:not-allowed}
.ui-field .ui-trailing{position:absolute;right:6px}

/* ============================================================================
 * 5 · SELECT — native <select>, appearance-none + custom arrow.
 * ==========================================================================*/
.ui-select{position:relative;display:inline-flex;align-items:center;width:100%}
.ui-select select{appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;
  padding:var(--space-sm) 32px var(--space-sm) var(--space-md);
  background:var(--surface-container-low);color:var(--on-surface);border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--fs-body-md);cursor:pointer}
.ui-select select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.ui-select .material-symbols-outlined{position:absolute;right:8px;color:var(--on-surface-variant);font-size:18px;pointer-events:none}

/* ============================================================================
 * 6 · TABS — header underline + in-card with count chip.
 * ==========================================================================*/
.ui-tabs{display:flex;align-items:center;gap:var(--space-lg);border-bottom:1px solid var(--outline-variant)}
.ui-tabs button,.ui-tabs a{background:none;border:none;cursor:pointer;padding:10px 0;margin-bottom:-1px;
  font-family:var(--font-body);font-size:var(--fs-body-md);font-weight:500;color:var(--on-surface-variant);
  border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:var(--space-sm);
  transition:color var(--dur-fast) var(--ease-standard)}
.ui-tabs button:hover,.ui-tabs a:hover{color:var(--on-surface)}
.ui-tabs button.on,.ui-tabs a.on{color:var(--primary);font-weight:600;border-bottom-color:var(--primary)}
.ui-tabs .ui-chip{background:var(--surface-container-high)}
.ui-tabs button.on .ui-chip{background:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--primary)}

/* ============================================================================
 * 7 · STEPPER — horizontal stage progress (done / active(ping) / upcoming).
 * ==========================================================================*/
.ui-stepper{display:flex;align-items:center;gap:0}
.ui-step{display:flex;align-items:center;gap:var(--space-sm);color:var(--on-surface-variant);font-size:var(--fs-body-sm)}
.ui-step .ui-node{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--surface-container-high);border:2px solid var(--outline-variant);color:var(--on-surface-variant)}
.ui-step .ui-node .material-symbols-outlined{font-size:16px}
.ui-step.done .ui-node{background:var(--tertiary-container);border-color:var(--tertiary-container);color:var(--on-tertiary-container)}
.ui-step.done{color:var(--on-surface)}
.ui-step.active .ui-node{background:var(--surface-container);border-color:var(--secondary);color:var(--secondary);position:relative}
.ui-step.active .ui-node::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--secondary);opacity:.5;animation:ui-ping 1.6s var(--ease-standard) infinite}
.ui-step.active{color:var(--on-surface);font-weight:600}
.ui-connector{flex:1;height:2px;min-width:28px;background:var(--outline-variant);margin:0 var(--space-sm)}
.ui-connector.done{background:var(--tertiary)}
@keyframes ui-ping{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ui-step.active .ui-node::after{animation:none}.ui-badge .ui-dot.pulse{animation:none}}

/* ============================================================================
 * 8 · TIMELINE / STEP LIST — vertical execution steps: actor tile, status
 * badge, cost/runtime, optional log preview.
 * ==========================================================================*/
.ui-timeline{display:flex;flex-direction:column;gap:var(--space-sm)}
.ui-tl-row{display:grid;grid-template-columns:40px 1fr auto;gap:var(--space-md);align-items:center;
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:var(--surface-card);
  border:1px solid var(--outline-variant)}
.ui-tl-row .ui-actor{width:40px;height:40px;border-radius:var(--radius-lg);display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-code-sm)}
.ui-tl-row .ui-actor.agent{background:color-mix(in srgb,var(--secondary) 18%,transparent);color:var(--secondary)}
.ui-tl-row .ui-actor.human{background:var(--surface-container-highest);color:var(--on-surface)}
.ui-tl-row .ui-actor.engine{background:var(--surface-container);color:var(--on-surface-variant);border:1px solid var(--outline-variant)}
.ui-tl-row b{display:block;font-size:var(--fs-body-md);font-weight:600}
.ui-tl-row small{color:var(--on-surface-variant);font-size:var(--fs-body-sm)}
.ui-tl-row .ui-tl-meta{text-align:right;font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface-variant)}

/* ============================================================================
 * 9 · FLOW NODE (vertical graph) — numbered node tile + gradient spine.
 * ==========================================================================*/
.ui-flow{display:flex;flex-direction:column;gap:0}
.ui-flow-node{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);position:relative}
.ui-flow-node .ui-num{width:34px;height:34px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-weight:600;font-size:var(--fs-code-md);z-index:1;
  background:var(--surface-container-high);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 40%,transparent)}
.ui-flow-node:not(:last-child)::before{content:"";position:absolute;left:16px;top:34px;bottom:-16px;width:2px;
  background:linear-gradient(var(--primary),var(--secondary));opacity:.4}
.ui-flow-node .ui-flow-body{background:var(--surface-card);border:1px solid var(--outline-variant);
  border-radius:var(--radius-xl);padding:var(--space-md);margin-bottom:var(--space-md);min-width:0}

/* ============================================================================
 * 10 · CODE TERMINAL / CONSOLE — mac dots header, mono body, blinking cursor.
 * ==========================================================================*/
.ui-terminal{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-inner)}
.ui-terminal .ui-term-head{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);
  border-bottom:1px solid var(--outline-variant);background:var(--surface-container-low)}
.ui-terminal .ui-term-dots{display:flex;gap:6px}
.ui-terminal .ui-term-dots i{width:10px;height:10px;border-radius:50%;display:block}
.ui-terminal .ui-term-dots i:nth-child(1){background:var(--error)}
.ui-terminal .ui-term-dots i:nth-child(2){background:var(--warning)}
.ui-terminal .ui-term-dots i:nth-child(3){background:var(--tertiary)}
.ui-terminal .ui-term-title{font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface-variant)}
.ui-terminal pre{margin:0;padding:var(--space-md);font-family:var(--font-mono);font-size:var(--fs-code-md);
  line-height:var(--lh-code-md);color:var(--on-surface);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.ui-terminal .c-p{color:var(--primary)}.ui-terminal .c-s{color:var(--secondary)}.ui-terminal .c-t{color:var(--tertiary)}
.ui-terminal .c-m{color:var(--on-surface-variant)}
.ui-terminal .ui-cursor{display:inline-block;width:8px;background:var(--tertiary);animation:ui-blink 1s steps(1) infinite}
.ui-terminal .ui-term-foot{display:flex;gap:var(--space-md);padding:var(--space-xs) var(--space-md);
  border-top:1px solid var(--outline-variant);font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface-variant)}
@keyframes ui-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ui-terminal .ui-cursor{animation:none}}

/* ============================================================================
 * 11 · DATA TABLE — dense rows + label-caps head + pagination footer.
 * ==========================================================================*/
.ui-table-wrap{overflow-x:auto;border:1px solid var(--outline-variant);border-radius:var(--radius-xl);background:var(--surface-card)}
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.ui-table thead th{position:sticky;top:0;background:var(--surface-container-lowest);text-align:left;
  padding:var(--space-sm) var(--space-md);font-family:var(--font-mono);font-size:var(--fs-label-caps);
  letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--on-surface-variant);
  border-bottom:1px solid var(--outline-variant);white-space:nowrap}
.ui-table tbody td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--outline-variant);color:var(--on-surface);vertical-align:middle}
.ui-table tbody tr:last-child td{border-bottom:none}
.ui-table tbody tr:hover{background:color-mix(in srgb,var(--surface-container) 80%,transparent)}
.ui-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md);border-top:1px solid var(--outline-variant)}
.ui-pagination button{min-width:30px;height:30px;padding:0 var(--space-sm);border-radius:var(--radius-lg);
  background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface-variant);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-code-sm)}
.ui-pagination button:hover:not(:disabled){background:var(--surface-container);color:var(--on-surface)}
.ui-pagination button.on{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent}
.ui-pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================================
 * 12 · METER / PROGRESS BAR — track + fill (duration-500).
 * ==========================================================================*/
.ui-meter{height:6px;border-radius:var(--radius-full);background:var(--surface-container-highest);overflow:hidden}
.ui-meter>i{display:block;height:100%;border-radius:var(--radius-full);background:var(--secondary);transition:width var(--dur-slow) var(--ease-standard)}
.ui-meter>i.primary{background:var(--primary)}
.ui-meter>i.over{background:var(--error)}

/* ============================================================================
 * 13 · PROGRESS RING (SVG helper classes).
 * ==========================================================================*/
.ui-ring{transform:rotate(-90deg)}
.ui-ring .ui-ring-track{fill:none;stroke:var(--surface-container-highest);stroke-width:3}
.ui-ring .ui-ring-fill{fill:none;stroke:var(--tertiary);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray var(--dur-slow) var(--ease-standard)}

/* ============================================================================
 * 14 · SPARKLINE (SVG — colour via currentColor).
 * ==========================================================================*/
.ui-sparkline{display:block;color:var(--secondary)}
.ui-sparkline path{fill:none;stroke:currentColor;stroke-width:1.5}
.ui-sparkline circle{fill:currentColor}

/* ============================================================================
 * 15 · KPI / STAT TILE — label-caps caption + value; default / alert.
 * ==========================================================================*/
.ui-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--space-sm) var(--space-md);
  background:var(--surface-card);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);min-width:110px}
.ui-kpi .ui-kpi-label{font-family:var(--font-mono);font-size:var(--fs-label-caps);letter-spacing:var(--ls-label-caps);
  text-transform:uppercase;color:var(--on-surface-variant)}
.ui-kpi .ui-kpi-value{font-family:var(--font-mono);font-size:var(--fs-code-lg);font-weight:600;color:var(--on-surface)}
.ui-kpi.alert{border-color:color-mix(in srgb,var(--error) 50%,transparent)}
.ui-kpi.alert .ui-kpi-value{color:var(--error)}

/* ============================================================================
 * 16 · STICKY ACTION TOOLBAR — bottom glass bar, summary + button cluster.
 * ==========================================================================*/
.ui-toolbar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);background:color-mix(in srgb,var(--surface-container-lowest) 85%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--outline-variant);
  box-shadow:var(--shadow-md)}
.ui-toolbar .ui-toolbar-actions{display:flex;gap:var(--space-sm);align-items:center}

/* ============================================================================
 * 17 · BREADCRUMB — mono, arrow_back + /-separated crumbs + stage chip.
 * ==========================================================================*/
.ui-breadcrumb{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-mono);
  font-size:var(--fs-code-sm);color:var(--on-surface-variant)}
.ui-breadcrumb a{color:var(--on-surface-variant);text-decoration:none}
.ui-breadcrumb a:hover{color:var(--on-surface)}
.ui-breadcrumb .sep{color:var(--outline)}
.ui-breadcrumb .cur{color:var(--on-surface)}

/* ============================================================================
 * 18 · AMBIENT GLOW DECORATION — blurred colour blobs behind panels.
 * ==========================================================================*/
.ui-glow-blob{position:absolute;border-radius:var(--radius-full);filter:blur(48px);pointer-events:none;opacity:.5;z-index:0}
.ui-glow-blob.primary{background:color-mix(in srgb,var(--primary-container) 40%,transparent)}
.ui-glow-blob.secondary{background:color-mix(in srgb,var(--secondary) 40%,transparent)}
.ui-glow-blob.tertiary{background:color-mix(in srgb,var(--tertiary) 40%,transparent)}

/* ============================================================================
 * 19 · APP-SHELL bits (sidebar/header rail) — token-driven nav link + rail.
 * ==========================================================================*/
.ui-nav-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);color:var(--on-surface-variant);
  font-size:var(--fs-body-md);text-decoration:none;cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
/* three distinct states: resting (transparent) -> hover (neutral raise) -> current-route/selected
 * (accent-tinted, clearly a different color from hover, not just a shadow) */
.ui-nav-link:hover{background:var(--surface-container);color:var(--on-surface)}
.ui-nav-link.on{background:color-mix(in srgb,var(--primary) 16%,var(--surface-container));color:var(--on-surface);font-weight:600;box-shadow:var(--shadow-soft)}
.ui-nav-link .material-symbols-outlined{color:var(--on-surface-variant)}
.ui-nav-link:hover .material-symbols-outlined{color:var(--primary)}