/* =========================================================
   components.css

   The design system's components where bridge.css and concept.css do not already
   draw them. Scoped like those two (html[data-ui="next"]) so it competes on equal
   terms with them until A10 strips the prefix from all three at once, and loaded
   after them so a component defined here wins a tie.
   ========================================================= */

/* ---------- Button: the variants and sizes concept.css does not have ---------- */
/* Amber with night text: a call to action on night or marketing surfaces only.
   White on amber fails contrast (1.9:1); night on amber is 11.6:1. */
html[data-ui="next"] .btn.btn-accent{
  background:var(--amber); color:var(--on-amber); border-color:var(--amber);
}
html[data-ui="next"] .btn.btn-accent:hover{ background:var(--amber-hover); border-color:var(--amber-hover); }

/* 56px: a gloved hand on a scanner's screen. */
html[data-ui="next"] .btn.btn-touch{ min-height:var(--touch-min); padding:0 20px; font-size:15px; }

/* Icon only: square, the glyph centred. */
html[data-ui="next"] .btn.btn-icon{ padding:0; width:32px; justify-content:center; }
html[data-ui="next"] .btn.btn-icon.btn-sm{ width:28px; }
html[data-ui="next"] .btn.btn-icon.btn-lg{ width:38px; }
html[data-ui="next"] .btn.btn-icon.btn-touch{ width:var(--touch-min); }

/* ---------- Segmented, small ---------- */
html[data-ui="next"] .seg.seg-sm button{ padding:4px 10px; font-size:12.5px; }

/* ---------- Pager: the gap between page runs ---------- */
html[data-ui="next"] .pager .pager-gap{ align-self:center; padding:0 4px; color:var(--ink-faint); }

/* ---------- Progress: a bar coloured by meaning ---------- */
html[data-ui="next"] .progress-bar.is-good{ background:var(--good); }
html[data-ui="next"] .progress-bar.is-warn{ background:var(--warn); }
html[data-ui="next"] .progress-bar.is-crit{ background:var(--crit); }

/* ---------- Accordion, on <details> ---------- */
html[data-ui="next"] .vn-acc{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); overflow:hidden; }
html[data-ui="next"] .vn-acc-item + .vn-acc-item{ border-top:1px solid var(--line); }
html[data-ui="next"] .vn-acc-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; cursor:pointer; list-style:none;
  font-weight:600; color:var(--ink);
}
html[data-ui="next"] .vn-acc-head::-webkit-details-marker{ display:none; }
html[data-ui="next"] .vn-acc-head:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
html[data-ui="next"] .vn-acc-title{ flex:1; min-width:0; }
html[data-ui="next"] .vn-acc-chev{ color:var(--ink-muted); transition:rotate .18s var(--ease); }
html[data-ui="next"] .vn-acc-item[open] > .vn-acc-head .vn-acc-chev{ rotate:180deg; }
html[data-ui="next"] .vn-acc-body{ padding:4px 16px 16px; color:var(--ink-muted); }

/* ---------- Toasts ---------- */
html[data-ui="next"] .vn-toasts{
  position:fixed; left:50%; bottom:24px; translate:-50% 0;
  z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
html[data-ui="next"] .vn-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  min-width:280px; max-width:min(520px, calc(100vw - 32px));
  padding:10px 10px 10px 14px;
  background:var(--night); color:var(--on-night);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
  font-size:13.5px;
  animation:vn-toast-in .22s var(--ease) both;
}
/* The tone is a 3px edge, so the text stays on night and keeps its contrast. */
html[data-ui="next"] .vn-toast.is-good{ box-shadow:inset 3px 0 0 var(--good-night), var(--shadow-pop); }
html[data-ui="next"] .vn-toast.is-warn{ box-shadow:inset 3px 0 0 var(--warn-night), var(--shadow-pop); }
html[data-ui="next"] .vn-toast.is-crit{ box-shadow:inset 3px 0 0 var(--crit-night), var(--shadow-pop); }
html[data-ui="next"] .vn-toast.is-info{ box-shadow:inset 3px 0 0 var(--signal-night), var(--shadow-pop); }
html[data-ui="next"] .vn-toast-text{ flex:1; min-width:0; }
html[data-ui="next"] .vn-toast-action{
  background:none; border:0; padding:4px 6px; border-radius:var(--radius-xs);
  color:var(--amber); font-weight:600; cursor:pointer;
}
html[data-ui="next"] .vn-toast-action:hover{ background:var(--night-raised); }
html[data-ui="next"] .vn-toast-x{
  background:none; border:0; padding:4px; border-radius:var(--radius-xs);
  color:var(--on-night-muted); cursor:pointer; display:inline-flex;
}
html[data-ui="next"] .vn-toast-x:hover{ color:var(--on-night); background:var(--night-raised); }
@keyframes vn-toast-in{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce){
  html[data-ui="next"] .vn-toast{ animation:none; }
  html[data-ui="next"] .vn-acc-chev{ transition:none; }
}

/* ---------- Logo ---------- */
/* The lockup and the mark never squeeze in a flex row; their width follows the height. */
html[data-ui="next"] .vn-logo,
html[data-ui="next"] .vn-mark{ flex-shrink:0; width:auto; }
/* A brand without a lockup of its own: its mark and its name, set in the wordmark's place. */
html[data-ui="next"] .vn-logo-named{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-sans);
  font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
html[data-ui="next"] .vn-logo-named.vn-logo-night{ color:var(--on-night); }

/* ---------- Radio-button groups (btn-check + label.btn) ---------- */
/* The checked option reads as Segmented's: a teal tint, teal text. Bootstrap drew it
   from variables the design system's buttons never set, so it only got an outline. */
html[data-ui="next"] .btn-check:checked + .btn,
html[data-ui="next"] .btn-check:active + .btn{
  background:var(--signal-soft); color:var(--signal);
  border-color:color-mix(in srgb, var(--signal) 30%, transparent);
  font-weight:600;
}
html[data-ui="next"] .btn-check:focus-visible + .btn{ outline:2px solid var(--focus); outline-offset:2px; }

/* =========================================================
   A5: the existing components in the approved Vision look
   (brand/design-reference/components: StatusChip, Tabs, DeviceTable,
   Button). Same markup and classes; only the paint changes.
   ========================================================= */

/* Chips: soft-filled pills, no outline. */
html[data-ui="next"] .chip{
  border-radius:var(--radius-full);
  border-color:transparent;
  background:var(--surface-sunken);
  color:var(--ink-muted);
  font-weight:600;
  padding:2px 9px;
}
html[data-ui="next"] .chip.chip-on{ background:var(--signal-soft); color:var(--signal); border-color:transparent; }
html[data-ui="next"] .chip.chip-off{ background:var(--surface-sunken); color:var(--ink-muted); }
html[data-ui="next"] .chip.chip-warn{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
html[data-ui="next"] .chip.chip-crit,
html[data-ui="next"] .chip.chip-alert{ background:var(--crit-soft); color:var(--crit); border-color:transparent; }

/* Tabs: the current tab is ink, underlined in ink. Teal is for links and data. */
html[data-ui="next"] .tabs button.on{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }

/* Table heads: small uppercase labels, as the reference's device table. */
html[data-ui="next"] table.tbl th{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted);
}
html[data-ui="next"] table.tbl tbody tr:hover > td{ background:var(--surface); }

/* Primary buttons: ink with a hairline of light along the top edge. */
html[data-ui="next"] .btn.btn-blue{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--on-inverse) 12%, transparent), var(--shadow-1); }
html[data-ui="next"] .btn.btn-accent{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--on-inverse) 35%, transparent), var(--shadow-1); }

/* =========================================================
   D1: status chips, the instrument strip and the fleet table
   (brand/design-reference/components: StatusChip, LocationLabel,
   DeviceTable). The readouts are the family's own: no cards,
   no delta pills, a drawing per figure.
   ========================================================= */

/* ---------- Status: one shape for every state ---------- */
/* StatusChip, StatusDot and the identity history's .dot-* rows share it. */
html[data-ui="next"] .vn-status,
html[data-ui="next"] .dot.dot-good,
html[data-ui="next"] .dot.dot-warn,
html[data-ui="next"] .dot.dot-crit,
html[data-ui="next"] .dot.dot-idle,
html[data-ui="next"] .dot.dot-info{
  display:inline-flex; align-items:center; gap:7px;
  height:24px; padding:0 10px 0 8px;
  border-radius:var(--radius-full);
  font-size:12.5px; line-height:1; font-weight:600; white-space:nowrap;
  background:var(--surface-sunken); color:var(--ink-muted);
}
html[data-ui="next"] .vn-status::before,
html[data-ui="next"] .dot.dot-good::before,
html[data-ui="next"] .dot.dot-warn::before,
html[data-ui="next"] .dot.dot-crit::before,
html[data-ui="next"] .dot.dot-idle::before,
html[data-ui="next"] .dot.dot-info::before{
  content:""; flex:none; width:6px; height:6px;
  border-radius:var(--radius-full); background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
html[data-ui="next"] .vn-status-good, html[data-ui="next"] .dot.dot-good{ background:var(--good-soft); color:var(--good); }
html[data-ui="next"] .vn-status-warn, html[data-ui="next"] .dot.dot-warn{ background:var(--warn-soft); color:var(--warn); }
html[data-ui="next"] .vn-status-crit, html[data-ui="next"] .dot.dot-crit{ background:var(--crit-soft); color:var(--crit); }
html[data-ui="next"] .vn-status-info, html[data-ui="next"] .dot.dot-info{ background:var(--signal-soft); color:var(--signal); }
html[data-ui="next"] .vn-status-live::before{ animation:vn-pulse 1.8s ease-out infinite; }
@keyframes vn-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  100%{ box-shadow:0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion:reduce){ html[data-ui="next"] .vn-status-live::before{ animation:none; } }

/* ---------- Instrument strip ---------- */
/* The hairlines are each cell's left and top edge, drawn over its neighbour; the outer ones
   are clipped. A short last row leaves no grey gaps, as a gap-on-a-line background would. */
html[data-ui="next"] .vn-readouts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
html[data-ui="next"] .vn-readout{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:var(--space-4) var(--space-5) var(--space-4);
  background:var(--surface-raised); color:var(--ink); text-decoration:none;
  box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line);
}
html[data-ui="next"] a.vn-readout-link:hover{ background:var(--surface); }
html[data-ui="next"] a.vn-readout-link:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
html[data-ui="next"] .vn-readout-label{
  font:var(--type-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
}
html[data-ui="next"] .vn-readout-value{
  font:var(--type-metric); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:6px; min-width:0;
}
html[data-ui="next"] .vn-readout-of{ font:500 15px/1 var(--font-sans); color:var(--ink-muted); letter-spacing:0; }
html[data-ui="next"] .vn-readout-visual{ display:block; }
html[data-ui="next"] .vn-readout-note{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  font-size:12.5px; line-height:16px; color:var(--ink-muted);
}

/* The fleet as a barcode. */
/* Spread across the readout like a printed code, whether the fleet is 12 devices or 400. */
html[data-ui="next"] .vn-fleet{ display:flex; align-items:stretch; justify-content:space-between; gap:1px; height:28px; overflow:hidden; }
html[data-ui="next"] .vn-fleet i{ flex:1 1 0; min-width:1px; max-width:3px; border-radius:1px; background:var(--ink); }
html[data-ui="next"] .vn-fleet i.w{ max-width:6px; flex-grow:2; }
html[data-ui="next"] .vn-fleet i.q{ background:var(--line-strong); }
html[data-ui="next"] .vn-fleet i.warn{ background:var(--warn); }
html[data-ui="next"] .vn-fleet i.crit{ background:var(--crit); }

/* The day as its hours. */
html[data-ui="next"] .vn-hours{ display:block; }
html[data-ui="next"] .vn-hours-cols{ display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; align-items:end; height:28px; }
html[data-ui="next"] .vn-hours-cols i{
  display:block; height:calc(var(--h) * 1%); min-height:2px; border-radius:1px 1px 0 0;
  background:color-mix(in srgb, var(--ink) 38%, transparent);
}
html[data-ui="next"] .vn-hours-cols i.zero{ background:var(--line); }
html[data-ui="next"] .vn-hours-cols i.now{ background:var(--amber); min-height:4px; }
html[data-ui="next"] .vn-hours-cols i.next{ height:2px; background:var(--line); }
html[data-ui="next"] .vn-hours-ticks{
  display:grid; grid-template-columns:repeat(4, 1fr); margin-top:4px;
  font:500 10px/1 var(--font-sans); letter-spacing:.06em; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .vn-hours-ticks b{ font-weight:500; }

/* ---------- Location label: the amber beam label ---------- */
html[data-ui="next"] .vn-loc{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 12px 0 8px;
  border-radius:var(--radius-xs); background:var(--amber); color:var(--on-amber);
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--night) 12%, transparent);
}
html[data-ui="next"] .vn-loc-bars{ display:block; width:30px; height:24px; }
html[data-ui="next"] .vn-loc-bars rect{ fill:var(--on-amber); }
html[data-ui="next"] .vn-loc-code{ font:var(--type-location); line-height:1; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
html[data-ui="next"] .vn-loc-code i{ font-style:normal; opacity:.4; padding:0 1px; }
html[data-ui="next"] .vn-loc-sm{ height:24px; gap:6px; padding:0 7px 0 5px; }
html[data-ui="next"] .vn-loc-sm .vn-loc-bars{ width:16px; height:13px; }
html[data-ui="next"] .vn-loc-sm .vn-loc-code{ font-size:12.5px; }

/* ---------- Signal and battery ---------- */
html[data-ui="next"] .vn-signal{ display:inline-flex; align-items:center; white-space:nowrap; }
html[data-ui="next"] .vn-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; margin-right:8px; }
html[data-ui="next"] .vn-bars i{ width:3px; border-radius:1px; background:var(--line); }
html[data-ui="next"] .vn-bars i:nth-child(1){ height:4px; }
html[data-ui="next"] .vn-bars i:nth-child(2){ height:7px; }
html[data-ui="next"] .vn-bars i:nth-child(3){ height:10px; }
html[data-ui="next"] .vn-bars i:nth-child(4){ height:14px; }
html[data-ui="next"] .vn-bars[data-level="4"] i,
html[data-ui="next"] .vn-bars[data-level="3"] i:nth-child(-n+3),
html[data-ui="next"] .vn-bars[data-level="2"] i:nth-child(-n+2){ background:var(--ink); }
html[data-ui="next"] .vn-bars[data-level="1"] i:nth-child(1){ background:var(--warn); }
html[data-ui="next"] .vn-dbm{ font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
html[data-ui="next"] .vn-batt{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
html[data-ui="next"] .vn-batt i{ position:relative; width:44px; height:6px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; }
html[data-ui="next"] .vn-batt i::before{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--pct) * 1%); border-radius:inherit; background:var(--ink-muted); }
html[data-ui="next"] .vn-batt-low{ color:var(--warn); font-weight:600; }
html[data-ui="next"] .vn-batt-low i::before{ background:var(--warn); }

/* ---------- Fleet table cells ---------- */
html[data-ui="next"] .vn-dev{ display:flex; align-items:center; gap:12px; min-width:0; }
html[data-ui="next"] .vn-dev-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--surface-sunken); color:var(--ink-muted); }
html[data-ui="next"] .vn-dev-ico svg{ width:18px; height:18px; }
html[data-ui="next"] .vn-dev-name{ display:block; font-weight:600; color:var(--ink); }
html[data-ui="next"] .vn-dev-id{ display:block; font-size:12px; line-height:16px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
html[data-ui="next"] .vn-op{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
html[data-ui="next"] .vn-avatar{
  width:26px; height:26px; flex:none; border-radius:var(--radius-full);
  display:grid; place-items:center; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background:var(--surface-sunken); color:var(--ink);
}
html[data-ui="next"] .vn-count{
  display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 6px; margin-left:6px;
  border-radius:var(--radius-full); background:var(--surface-sunken); color:var(--ink-muted);
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .vn-count-crit{ background:var(--crit-soft); color:var(--crit); }

/* The fleet table's tabs sit on the panel head's rule instead of drawing a second, shorter one. */
html[data-ui="next"] .vn-fleet-panel > .panel-head{ padding-bottom:0; align-items:flex-end; }
html[data-ui="next"] .vn-fleet-panel > .panel-head .tabs{ border-bottom:0; margin-bottom:-1px; }

/* ---------- Health: rules as gauges against their threshold ---------- */
/* Same hairline grid as the readouts, no coloured edges and no tinted cards: the state
   is the word under each rule, and the rail shows how close the value is to alerting. */
html[data-ui="next"] .vn-gauges{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
html[data-ui="next"] .vn-gauge{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  padding:var(--space-3) var(--space-4) var(--space-3);
  box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line);
}
html[data-ui="next"] .vn-gauge-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui="next"] .vn-gauge-name{
  font-size:12.5px; line-height:16px; font-weight:500; color:var(--ink-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
html[data-ui="next"] .vn-gauge-info{ flex:none; width:13px; height:13px; margin-top:1px; color:var(--ink-faint); cursor:help; }
html[data-ui="next"] .vn-gauge-value{
  font:600 22px/26px var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-ui="next"] .vn-gauge-unit{ font:500 12px/1 var(--font-sans); color:var(--ink-muted); margin-left:4px; letter-spacing:0; }
html[data-ui="next"] .vn-gauge-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; line-height:14px; color:var(--ink-muted); white-space:nowrap; min-width:0;
}
html[data-ui="next"] .vn-gauge-rule{ overflow:hidden; text-overflow:ellipsis; min-width:0; font-variant-numeric:tabular-nums; }
html[data-ui="next"] .vn-gauge-state{ display:inline-flex; align-items:center; gap:6px; flex:none; font-weight:600; }
html[data-ui="next"] .vn-gauge-state::before{ content:""; width:6px; height:6px; border-radius:var(--radius-full); background:currentColor; }
html[data-ui="next"] .vn-gauge.is-healthy .vn-gauge-state{ color:var(--good); }
html[data-ui="next"] .vn-gauge.is-warning .vn-gauge-state,
html[data-ui="next"] .vn-gauge.is-warning .vn-gauge-value{ color:var(--warn); }
html[data-ui="next"] .vn-gauge.is-breaching .vn-gauge-state,
html[data-ui="next"] .vn-gauge.is-breaching .vn-gauge-value{ color:var(--crit); }
html[data-ui="next"] .vn-gauge.is-unknown .vn-gauge-value{ color:var(--ink-faint); font-size:17px; }
html[data-ui="next"] .vn-gauge.is-disabled > *{ opacity:.5; }

/* The threshold rail. */
html[data-ui="next"] .vn-thr{ display:block; padding:4px 0; }
html[data-ui="next"] .vn-thr-track{ position:relative; display:block; height:6px; border-radius:var(--radius-full); background:var(--surface-sunken); }
html[data-ui="next"] .vn-thr-zone{
  position:absolute; top:0; bottom:0; border-radius:var(--radius-full);
  background:repeating-linear-gradient(-45deg, var(--line-strong) 0 3px, transparent 3px 6px);
}
html[data-ui="next"] .vn-thr-crit .vn-thr-zone{ background:repeating-linear-gradient(-45deg, var(--crit) 0 3px, transparent 3px 6px); }
html[data-ui="next"] .vn-thr-warn .vn-thr-zone{ background:repeating-linear-gradient(-45deg, var(--warn) 0 3px, transparent 3px 6px); }
html[data-ui="next"] .vn-thr-notch{ position:absolute; left:50%; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); }
html[data-ui="next"] .vn-thr-mark{
  position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:var(--radius-full); background:var(--ink);
  box-shadow:0 0 0 2px var(--surface-raised);
}
html[data-ui="next"] .vn-thr-good .vn-thr-mark{ background:var(--good); }
html[data-ui="next"] .vn-thr-warn .vn-thr-mark{ background:var(--warn); }
html[data-ui="next"] .vn-thr-crit .vn-thr-mark{ background:var(--crit); }
html[data-ui="next"] .vn-thr-quiet .vn-thr-notch{ background:var(--line-strong); }

/* ---------- Administration: rows, small forms, choices, cards ----------
   The pieces an administration page is built from (the suite's organisation pages first), drawn once here so every
   app's settings look the same. */

/* The buttons at the end of a table row, on the right, never wrapping under each other. */
html[data-ui="next"] .tbl td.row-actions{ text-align:right; white-space:nowrap; width:1%; }
html[data-ui="next"] :not(td).row-actions{ display:flex; justify-content:flex-end; align-items:center; gap:6px; }
html[data-ui="next"] .tbl td.row-actions > *{ display:inline-flex; vertical-align:middle; margin-left:6px; }
html[data-ui="next"] .tbl td.row-actions > *:first-child{ margin-left:0; }

/* A dropdown says it is one: a chevron on the right, drawn with two gradients so its colour is a token. */
html[data-ui="next"] select.inp:not([multiple]){
  appearance:none; padding-right:30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* A form of one field and a button, inside a row or a cell. */
html[data-ui="next"] .inline-form{ display:inline-flex; align-items:center; gap:6px; margin:0; }
html[data-ui="next"] .inp.inp-sm{ height:28px; padding:0 8px; font-size:12.5px; width:8.5rem; }

/* A role given at a place, with its Remove beside it. */
html[data-ui="next"] .assignment{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
html[data-ui="next"] .assignment + .assignment{ margin-top:2px; }

/* A form's vertical rhythm, and a long list of ticks in a box of its own. */
html[data-ui="next"] .form-stack{ display:grid; gap:var(--space-3); }
html[data-ui="next"] .form-stack > .field{ margin-bottom:0; }
html[data-ui="next"] .form-stack > .btn{ justify-self:start; }
html[data-ui="next"] fieldset.field{ border:0; padding:0; margin:0; min-width:0; }
html[data-ui="next"] fieldset.field > legend{ padding:0; margin-bottom:6px; }
html[data-ui="next"] .check-list{
  display:grid; gap:6px; max-height:320px; overflow-y:auto;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
}
html[data-ui="next"] .check-list .check{ align-items:flex-start; color:var(--ink); }
html[data-ui="next"] .check-list .check input{ margin-top:2px; flex-shrink:0; }

/* Numbered steps. */
html[data-ui="next"] .steps{ display:grid; gap:var(--space-3); margin:0 0 var(--space-4); padding-left:1.25rem; }

/* Label and value pairs to copy: a secret, an id, an endpoint. */
html[data-ui="next"] .secret-list{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 16px; margin:0 0 var(--space-4); align-items:baseline; }
html[data-ui="next"] .secret-list dt{ font-size:12px; color:var(--ink-muted); font-weight:500; }
html[data-ui="next"] .secret-list dd{ margin:0; overflow-wrap:anywhere; }

/* A confirm step (a <details>): the row's button opens what will happen right under it, with Cancel and the danger
   button. In the flow, not floating, so a table's scrolling box never cuts it off. */
html[data-ui="next"] details.confirm{ display:inline-block; }
html[data-ui="next"] details.confirm > summary{ list-style:none; cursor:pointer; }
html[data-ui="next"] details.confirm > summary::-webkit-details-marker{ display:none; }
html[data-ui="next"] details.confirm[open] > summary{ display:none; }
html[data-ui="next"] .confirm-pop{
  display:grid; gap:8px; width:min(20rem, 80vw); padding:10px 12px; text-align:left; white-space:normal;
  border:1px solid color-mix(in srgb, var(--crit) 40%, var(--line)); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--crit) 5%, var(--surface-raised));
}
html[data-ui="next"] .confirm-pop p{ margin:0; }
html[data-ui="next"] .confirm-title{ font-weight:600; color:var(--ink); }
html[data-ui="next"] .confirm-actions{ display:flex; justify-content:flex-end; gap:6px; }
/* The same step holding a small form that isn't a removal (Give a role, Edit, Add below): the plain panel look. */
html[data-ui="next"] .confirm-pop.give-pop{ width:min(22rem, 90vw); border-color:var(--line); background:var(--surface-raised); }

/* Link tabs: the pages of one rail entry (People: members, invitations, operators) as tabs over the page, links on a
   static page where Ui/Tabs' buttons would need a circuit. The tabs' own look, on <a>. */
html[data-ui="next"] .tabs a{
  font-family:var(--font-sans); font-weight:500; font-size:13.5px; white-space:nowrap; flex-shrink:0;
  color:var(--ink-muted); text-decoration:none; padding:9px 12px; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .12s ease, border-color .12s ease;
}
html[data-ui="next"] .tabs a:hover{ color:var(--ink); }
html[data-ui="next"] .tabs a.on{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }

/* A setup checklist: its progress, then each step a link, done ones ticked and quiet. */
html[data-ui="next"] .setup-list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:2px; }
html[data-ui="next"] .setup-list a, html[data-ui="next"] .setup-list .done{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); color:var(--ink); text-decoration:none;
}
html[data-ui="next"] .setup-list a:hover{ background:color-mix(in srgb, var(--signal) 8%, transparent); color:var(--signal); }
html[data-ui="next"] .setup-list .done{ color:var(--ink-muted); text-decoration:line-through; }
html[data-ui="next"] .setup-list .ico{ width:16px; height:16px; flex-shrink:0; color:var(--ink-muted); }
html[data-ui="next"] .setup-list .done .ico{ color:var(--good); }

/* What waits for someone: each line a link to where it is done. */
html[data-ui="next"] .todo-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
html[data-ui="next"] .todo-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm); color:var(--ink); text-decoration:none;
}
html[data-ui="next"] .todo-list a:hover{ background:color-mix(in srgb, var(--signal) 8%, transparent); color:var(--signal); }
html[data-ui="next"] .todo-list a .ico{ width:14px; height:14px; color:var(--ink-muted); flex-shrink:0; }

/* Cards that each open a page: an icon, a name, a line about it. On a .grid, so bridge.css's panel-after-panel
   margin leaves the row alone. */
html[data-ui="next"] .link-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--gap); }
html[data-ui="next"] a.link-card{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
  color:var(--ink); text-decoration:none; transition:border-color .12s ease, box-shadow .12s ease;
}
html[data-ui="next"] a.link-card:hover{ border-color:color-mix(in srgb, var(--signal) 45%, var(--line)); box-shadow:var(--shadow-pop); }
html[data-ui="next"] a.link-card b{ display:block; margin-bottom:2px; }
html[data-ui="next"] a.link-card .vn-small{ display:block; }
html[data-ui="next"] .link-card-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--signal) 10%, transparent); color:var(--signal);
}
html[data-ui="next"] .link-card-icon .ico{ width:16px; height:16px; }

/* Lists without bullets (administrators, products), a tree indented by its depth (a site under its company: style
   --depth), and a list of what changes (a catalogue's next version against the published one). */
html[data-ui="next"] .plain-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
html[data-ui="next"] .plain-list.tree-list{ gap:2px; }
html[data-ui="next"] .tree-list > li{ padding-left:calc(var(--depth, 0) * var(--space-4)); }
html[data-ui="next"] .tree-list label.check{ display:flex; align-items:center; gap:8px; }
html[data-ui="next"] .change-list .change-added{ color:var(--good); }
html[data-ui="next"] .change-list .change-removed{ color:var(--crit); }
html[data-ui="next"] .change-list .change-changed{ color:var(--amber-text); }

/* ---------- The frame without the rail (Ui/AppBar), as the CaptureTech Suite's SuiteBar ----------
   The portal and someone's own account: the mark and name where the rail would be, the page centred below. */
html[data-ui="next"] .bar-shell{min-height:100vh;display:flex;flex-direction:column;}
html[data-ui="next"] .bar-top{padding:0 20px;}
html[data-ui="next"] .bar-brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.01em;text-decoration:none;}
html[data-ui="next"] .bar-brand:hover{color:var(--ink);}
/* The mark at the size it was asked for: the topbar's own image rules would stretch it. */
html[data-ui="next"] .bar-brand .vn-mark{width:24px;height:24px;flex-shrink:0;}
html[data-ui="next"] .bar-page{width:100%;max-width:1240px;margin:0 auto;padding:28px 24px 40px;flex:1;}
html[data-ui="next"] .bar-foot{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding:18px 24px 26px;font-size:12px;color:var(--ink-muted);}
html[data-ui="next"] .bar-foot a{color:var(--ink-muted);}
html[data-ui="next"] .bar-foot a:hover{color:var(--signal);}
html[data-ui="next"] .bar-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--signal);box-shadow:var(--shadow-pop);font-weight:600;}
html[data-ui="next"] .bar-skip:focus{top:10px;}
@media (max-width: 640px){
  html[data-ui="next"] .bar-top .div{display:none;}
  html[data-ui="next"] .bar-brand span{display:none;}
  html[data-ui="next"] .bar-page{padding:18px 16px 28px;}
}

/* ---------- App tiles (Ui/AppTiles, Ui/AppTile), as the CaptureTech Suite's: the portal's apps ---------- */
html[data-ui="next"] .app-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
html[data-ui="next"] .app-tile{
  --app-accent:var(--signal);
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:18px 18px 14px;min-height:176px;
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);color:inherit;text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s var(--ease);
}
html[data-ui="next"] .app-accent-signal{--app-accent:var(--signal);}
html[data-ui="next"] .app-accent-amber{--app-accent:var(--amber-text);}
html[data-ui="next"] .app-accent-good{--app-accent:var(--good);}
html[data-ui="next"] .app-accent-night{--app-accent:var(--night);}
html[data-ui="next"] a.app-tile:hover{border-color:color-mix(in srgb, var(--app-accent) 40%, var(--line));box-shadow:var(--shadow-pop);transform:translateY(-1px);color:inherit;}
html[data-ui="next"] a.app-tile:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px;}
html[data-ui="next"] .app-tile-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb, var(--app-accent) 12%, transparent);
}
html[data-ui="next"] .app-tile-icon .vn-mark{width:28px;height:28px;}
html[data-ui="next"] .app-tile-body{display:flex;flex-direction:column;gap:4px;flex:1;}
html[data-ui="next"] .app-tile-body b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--ink);}
html[data-ui="next"] .app-tile-body span{font-size:13px;line-height:1.5;color:var(--ink-muted);}
html[data-ui="next"] .app-tile-body span.app-tile-meta{font-size:12px;color:var(--ink-faint);margin-top:2px;}
html[data-ui="next"] .app-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;}
html[data-ui="next"] .app-open{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--app-accent);}
html[data-ui="next"] .app-open .ico{width:14px;height:14px;transition:transform .15s var(--ease);}
html[data-ui="next"] a.app-tile:hover .app-open .ico{transform:translateX(2px);}
html[data-ui="next"] .app-tile.is-soon{background:var(--surface-sunken);box-shadow:none;border-style:dashed;border-color:color-mix(in srgb, var(--ink-muted) 40%, transparent);}
html[data-ui="next"] .app-tile.is-soon .app-tile-icon{filter:grayscale(.6);opacity:.75;}
html[data-ui="next"] .app-soon{
  padding:1px 7px;border-radius:var(--radius-full);
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);background:color-mix(in srgb, var(--ink) 6%, transparent);white-space:nowrap;
}
html[data-ui="next"] .app-tile-foot .link{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  html[data-ui="next"] .app-tile,html[data-ui="next"] .app-open .ico{transition:none;}
  html[data-ui="next"] a.app-tile:hover{transform:none;}
}

/* ---------- Blazor's error bar (VnScripts) ----------
   Blazor only switches #blazor-error-ui to display:block when the page loses its server session to an error; hiding
   it is left to the stylesheet. Nothing hid it, so "Something went wrong and this page stopped responding. Reload" sat
   at the foot of every page, under the rail. Hidden here, and a bar over everything when it is shown. */
#blazor-error-ui{
  display:none;
  position:fixed; left:50%; bottom:20px; translate:-50% 0; z-index:calc(var(--z-toast) + 1);
  max-width:calc(100vw - 32px);
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--crit-soft); color:var(--crit); border:1px solid color-mix(in srgb, var(--crit) 35%, transparent);
  box-shadow:var(--shadow-pop); font-size:14px;
}
#blazor-error-ui .reload{ color:inherit; font-weight:600; margin-left:8px; text-decoration:underline; }