/* VectorAtlas component styles: a port of Zentivue's app.css (cgs-dev @ 2df6b7f5, ContentGenerationSystem/app/Cgs.App/wwwroot/css/app.css)
   with --va-/.va- renamed --va-/.va- and Zentivue-only sections (review flow, calendar, editor, channels) left out.
   Keep section order and rule text in step with the source so later Zentivue changes can be pulled across (Phase 21a, criterion 1). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--va-color-bg);
    color: var(--va-color-text);
    font-family: var(--va-font-sans);
    font-size: var(--va-text-md);
    line-height: var(--va-leading);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--va-space-3); font-weight: var(--va-weight-bold); }
p { margin: 0 0 var(--va-space-3); }
a { color: var(--va-color-brand-action); text-underline-offset: 2px; }
a:hover { color: var(--va-color-brand-action-hover); }
img, svg { max-width: 100%; }
code, pre, kbd { font-family: var(--va-font-mono); font-size: 0.9em; }

:focus-visible { outline: 2px solid var(--va-color-focus); outline-offset: 2px; border-radius: var(--va-radius-sm); }
h1:focus { outline: none; }

.va-icon { flex: none; display: inline-block; vertical-align: middle; }

/* Phase 21a E3: Skip to content, off screen until it has keyboard focus, then over the top bar. */
.va-skip { position: absolute; left: var(--va-space-3); top: -100px; z-index: 70; min-height: var(--va-tap); padding: var(--va-space-2) var(--va-space-4); border: 1px solid var(--va-color-border-strong); border-radius: var(--va-radius-md); background: var(--va-color-surface); color: var(--va-color-text); font: inherit; font-weight: var(--va-weight-medium); }
.va-skip:focus { top: var(--va-space-2); }
.va-main:focus { outline: none; }

.va-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Loading (in-page; the boot placeholder is the gate card below) ---------- */
.va-page-loading {
    display: flex; align-items: center; justify-content: center; gap: var(--va-space-3);
    color: var(--va-color-text-muted); font-size: var(--va-text-md);
}
.va-page-loading { padding: var(--va-space-6) 0; }
.va-boot__spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--va-color-border); border-top-color: var(--va-color-brand);
    animation: va-spin 0.8s linear infinite;
}
@keyframes va-spin { to { transform: rotate(360deg); } }

/* ---------- Brand ---------- */
.va-brand {
    display: inline-flex; align-items: center; gap: var(--va-space-2);
    color: var(--va-color-text); font-weight: var(--va-weight-bold); font-size: var(--va-text-lg);
    text-decoration: none; min-height: var(--va-tap);
}
.va-brand:hover { color: var(--va-color-text); }
/* The logo (mark and name together) comes in a dark-ink and a light-ink version; the one that contrasts with the theme shows. */
.va-brand__logo { display: inline-flex; align-items: center; }
.va-brand__logo img { height: 32px; width: auto; display: block; }
.va-brand__logo--dark { display: none !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .va-brand__logo--light { display: none; }
    :root:not([data-theme="light"]) .va-brand__logo--dark { display: block !important; }
}
:root[data-theme="dark"] .va-brand__logo--light { display: none; }
:root[data-theme="dark"] .va-brand__logo--dark { display: block !important; }
.va-brand--large { font-size: var(--va-text-xl); }
.va-brand--large .va-brand__logo img { height: 44px; }

/* ---------- Sign-in / no-access gate ---------- */
.va-gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--va-space-4); }
.va-gate__card {
    width: 100%; max-width: 420px; background: var(--va-color-surface);
    border: 1px solid var(--va-color-border); border-radius: var(--va-radius-lg);
    box-shadow: var(--va-shadow-md); padding: var(--va-space-6) var(--va-space-5);
}
.va-gate__title { font-size: var(--va-text-xl); margin-top: var(--va-space-5); }
.va-gate__text { color: var(--va-color-text-muted); margin-bottom: var(--va-space-5); overflow-wrap: anywhere; }
.va-gate__link { display: flex; align-items: center; justify-content: center; min-height: var(--va-tap); margin-top: var(--va-space-3); font-size: var(--va-text-sm); }
.va-gate__loading { display: flex; align-items: center; gap: var(--va-space-3); min-height: var(--va-tap); }
.va-gate__loading .va-boot__spinner { flex: none; }


/* The pages anyone can open without signing in (/terms): a bar, the page, a footer. */
.va-public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.va-public__bar {
    display: flex; align-items: center; gap: var(--va-space-2); min-height: var(--va-topbar-height);
    padding: 0 var(--va-gutter); background: var(--va-color-surface); border-bottom: 1px solid var(--va-color-border);
}
.va-public__main { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: var(--va-space-5) var(--va-gutter); }
.va-public__foot {
    display: flex; flex-wrap: wrap; gap: var(--va-space-1) var(--va-space-3); justify-content: center;
    padding: var(--va-space-4) var(--va-gutter); font-size: var(--va-text-xs); color: var(--va-color-text-muted);
}


/* ---------- App shell: top bar + drawer on phones, fixed sidebar from 768px ---------- */
.va-shell { min-height: 100vh; min-height: 100dvh; }

.va-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--va-space-2);
    height: var(--va-topbar-height); padding: 0 var(--va-space-2);
    background: var(--va-color-surface); border-bottom: 1px solid var(--va-color-border);
}
.va-topbar__spacer { flex: 1; }

.va-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(85vw, var(--va-sidebar-width));
    display: flex; flex-direction: column;
    background: var(--va-color-sidebar); border-right: 1px solid var(--va-color-border);
    transform: translateX(-100%); transition: transform var(--va-motion);
    visibility: hidden;
}
.va-shell--drawer-open .va-sidebar { transform: none; visibility: visible; box-shadow: var(--va-shadow-lg); }

.va-scrim { display: none; }
.va-shell--drawer-open .va-scrim {
    display: block; position: fixed; inset: 0; z-index: 30; background: var(--va-color-scrim);
}

.va-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--va-topbar-height); padding: 0 var(--va-space-2) 0 var(--va-space-4);
    border-bottom: 1px solid var(--va-color-border);
}

.va-nav { flex: 1; overflow-y: auto; padding: var(--va-space-3) var(--va-space-2); }
.va-nav__section {
    margin: var(--va-space-4) var(--va-space-3) var(--va-space-1);
    font-size: var(--va-text-xs); font-weight: var(--va-weight-bold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--va-color-text-muted);
}
.va-nav__link {
    display: flex; align-items: center; gap: var(--va-space-3);
    min-height: var(--va-tap); padding: 0 var(--va-space-3); margin-bottom: 2px;
    border-radius: var(--va-radius-md); color: var(--va-color-text); text-decoration: none;
    font-weight: var(--va-weight-medium);
}
.va-nav__link .va-icon { color: var(--va-color-text-muted); }
.va-nav__link:hover { background: var(--va-color-surface-2); color: var(--va-color-text); }
/* Solid brand for the current page, as in Zentivue. Light mode uses the AA-safe action blue: white on #0090F8 is only 3.3:1, on #006BB8 5.5:1. */
.va-nav__link.active, .va-nav__link.active:hover { background: var(--va-color-brand-action); color: var(--va-color-on-brand); }
.va-nav__link.active .va-icon { color: var(--va-color-on-brand); }

/* Quick switch (admins): a search-field-looking button at the top of the sidebar, and its dialog's result list. */
.va-nav__quick {
    display: flex; align-items: center; gap: var(--va-space-2); width: 100%; min-height: var(--va-tap);
    margin-bottom: var(--va-space-2); padding: 0 var(--va-space-3); font: inherit; text-align: left; cursor: pointer;
    background: var(--va-color-surface); color: var(--va-color-text-muted);
    border: 1px solid var(--va-color-border); border-radius: var(--va-radius-md);
}
.va-nav__quick:hover { background: var(--va-color-surface-2); color: var(--va-color-text); }
.va-nav__quick--icon { width: auto; min-height: 0; margin: 0; padding: 0; flex: none; background: none; border: 0; color: inherit; }
.va-nav__quick-text { flex: 1 1 auto; }
.va-nav__kbd { font: inherit; font-size: var(--va-text-xs); padding: 0 var(--va-space-2); border: 1px solid var(--va-color-border); border-radius: var(--va-radius-sm, 4px); }
@media (max-width: 767px) { .va-nav__kbd { display: none; } }
.va-quick { display: flex; flex-direction: column; gap: var(--va-space-3); }
.va-quick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.va-quick__item {
    display: flex; align-items: baseline; gap: var(--va-space-3); min-height: var(--va-tap); padding: var(--va-space-2) var(--va-space-3);
    border-radius: var(--va-radius-md); cursor: pointer;
}
.va-quick__item:hover { background: var(--va-color-surface-2); }
.va-quick__item--active, .va-quick__item--active:hover { background: var(--va-color-brand-action); color: var(--va-color-on-brand); }
.va-quick__kind { flex: none; width: 6.5rem; font-size: var(--va-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--va-color-text-muted); }
/* Zentivue dims this with opacity: .75, which axe measures below 4.5:1 on the highlighted row; full on-brand colour there instead. */
.va-quick__item--active .va-quick__kind { color: var(--va-color-on-brand); }
.va-quick__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--va-weight-medium); }
.va-quick__hint { flex: none; font-size: var(--va-text-sm); opacity: .8; }
.va-quick__note { margin: 0; font-size: var(--va-text-sm); color: var(--va-color-text-muted); }

/* Grouped navigation (NavGroup): a disclosure row, an indented list of 44px child links, and the "Viewing as" block. */
.va-nav__group-btn { width: 100%; border: 0; font: inherit; font-weight: var(--va-weight-medium); text-align: left; cursor: pointer; }
.va-nav__group-btn:not(:hover) { background: none; }
.va-nav__chevron { margin-left: auto; transition: transform var(--va-motion); }
.va-nav__group-btn[aria-expanded="true"] .va-nav__chevron { transform: rotate(180deg); }
.va-nav__children[hidden] { display: none; }
.va-nav__link--child { padding-left: calc(var(--va-space-3) + 20px + var(--va-space-3)); font-weight: 400; }
/* Closed, but holding the current page: the location stays visible. */
.va-nav__group--current > .va-nav__group-btn { box-shadow: inset 3px 0 0 var(--va-color-brand-action); }
.va-nav__group--current > .va-nav__group-btn .va-icon { color: var(--va-color-brand-action); }
.va-nav__divider { height: 1px; margin: var(--va-space-3) var(--va-space-3); background: var(--va-color-border); }
/* One compact row, the name on a single line (full name in its title): the sidebar has to stay short for a long Customer name. */
.va-nav__context {
    display: flex; align-items: center; gap: var(--va-space-2);
    margin: 0 0 var(--va-space-2); padding: var(--va-space-1) var(--va-space-1) var(--va-space-1) var(--va-space-3);
    background: var(--va-color-warning-soft); color: var(--va-color-warning); border-radius: var(--va-radius-md);
}
.va-nav__context .va-icon { flex: none; }
.va-nav__context-text { flex: 1 1 auto; min-width: 0; font-size: var(--va-text-xs); line-height: 1.3; }
.va-nav__context-text strong {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--va-text-sm); color: var(--va-color-text);
}
.va-nav__context .va-btn { flex: none; padding: 0 var(--va-space-3); }

/* The phone menu button's pip: what's waiting, visible before the drawer opens. */
/* The pip sits beside the icon, not over it: the button widens to hold both, so "99+" never covers the menu icon. */
.va-topbar__menu:has(.va-topbar__count) { width: auto; padding: 0 var(--va-space-2); gap: var(--va-space-1); }
.va-topbar__count {
    min-width: 1.25rem; padding: 0 var(--va-space-1); border-radius: 999px; text-align: center;
    font-size: var(--va-text-xs); font-weight: var(--va-weight-bold); line-height: 1.25rem;
    background: var(--va-color-brand-action); color: var(--va-color-on-brand);
}

.va-sidebar__foot {
    display: flex; align-items: center; gap: var(--va-space-2);
    padding: var(--va-space-3) var(--va-space-2) var(--va-space-3) var(--va-space-4);
    border-top: 1px solid var(--va-color-border);
}
.va-user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.va-user__name { font-size: var(--va-text-sm); font-weight: var(--va-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-user__role { font-size: var(--va-text-xs); color: var(--va-color-text-muted); }
.va-sidebar__actions { display: flex; }
.va-sidebar__legal {
    display: flex; flex-wrap: wrap; gap: var(--va-space-1) var(--va-space-3);
    padding: 0 var(--va-space-4) var(--va-space-3);
    font-size: var(--va-text-xs); color: var(--va-color-text-muted);
}

.va-main {
    width: 100%; max-width: var(--va-content-max); margin: 0 auto;
    /* The bottom is left clear so the last control on a page can scroll above the Atlas launcher (Phase 10). */
    padding: var(--va-space-5) var(--va-gutter) calc(var(--va-space-6) + var(--va-tap) + var(--va-space-4));
    min-width: 0;
}

/* Desktop and tablet: the sidebar is always there; the phone top bar, scrim and close button go. */
@media (min-width: 768px) {
    .va-topbar, .va-scrim, .va-sidebar__close { display: none !important; }
    .va-sidebar { transform: none; visibility: visible; width: var(--va-sidebar-width); box-shadow: none !important; }
    .va-shell { padding-left: var(--va-sidebar-width); }
    .va-main { padding-top: var(--va-space-6); }
}

/* What's waiting, on a nav link (the menu button's count is .va-topbar__count). */
.va-nav__count {
    margin-left: auto; min-width: 1.5rem; padding: 0 var(--va-space-2); border-radius: 999px; text-align: center;
    font-size: var(--va-text-xs); font-weight: var(--va-weight-bold); line-height: 1.5rem;
    background: var(--va-color-warning-soft); color: var(--va-color-warning);
}
.va-nav__link.active .va-nav__count { background: var(--va-color-on-brand); color: var(--va-color-brand-action); }


/* ---------- Page header ---------- */
.va-page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--va-space-3); margin-bottom: var(--va-space-5);
}
.va-page-header__text { min-width: 0; }
.va-page-title { font-size: var(--va-text-2xl); margin: 0; }
.va-page-subtitle { margin: var(--va-space-1) 0 0; color: var(--va-color-text-muted); }
.va-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--va-space-2); }

/* ---------- Card ---------- */
.va-card {
    background: var(--va-color-surface); border: 1px solid var(--va-color-border);
    border-radius: var(--va-radius-lg); box-shadow: var(--va-shadow-sm);
    padding: var(--va-space-4);
}
@media (min-width: 768px) { .va-card { padding: var(--va-space-5); } }

/* ---------- Buttons (44px minimum tap target) ---------- */
.va-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--va-space-2);
    min-height: var(--va-tap); min-width: var(--va-tap); padding: 0 var(--va-space-4);
    border: 1px solid transparent; border-radius: var(--va-radius-md);
    font: inherit; font-weight: var(--va-weight-medium); line-height: 1.2;
    text-decoration: none; cursor: pointer; transition: background var(--va-motion), border-color var(--va-motion);
    -webkit-tap-highlight-color: transparent;
    /* Phase 21a E3: a table cell lets text break anywhere (long names), which split a one-word button: "Vie / w". */
    overflow-wrap: normal;
}
.va-btn:disabled, .va-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.va-btn--primary { background: var(--va-color-brand-action); color: var(--va-color-on-brand); }
.va-btn--primary:hover:not(:disabled) { background: var(--va-color-brand-action-hover); color: var(--va-color-on-brand); }
.va-btn--secondary { background: var(--va-color-surface); color: var(--va-color-text); border-color: var(--va-color-border-strong); }
.va-btn--secondary:hover:not(:disabled) { background: var(--va-color-surface-2); color: var(--va-color-text); }
.va-btn--ghost { background: transparent; color: var(--va-color-text-muted); }
.va-btn--ghost:hover:not(:disabled) { background: var(--va-color-surface-2); color: var(--va-color-text); }
.va-btn--danger { background: var(--va-color-danger); color: var(--va-color-on-brand); }
.va-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--va-color-danger) 85%, black); color: var(--va-color-on-brand); }
/* Success actions use the action blue, as Zentivue uses its action green: white on #006BB8 is 5.5:1 in light, #0a1626 on #4db1ff 7.8:1 in dark. */
.va-btn--success { background: var(--va-color-brand-action); color: var(--va-color-on-brand); }
.va-btn--success:hover:not(:disabled) { background: var(--va-color-brand-action-hover); color: var(--va-color-on-brand); }
/* Caution (Zentivue's yellow Regenerate button): VectorAtlas Primary Gold with navy text, 8.6:1 in both themes (AA). */
.va-btn--caution { background: var(--va-color-accent); color: var(--va-color-on-accent); }
.va-btn--caution:hover:not(:disabled) { background: var(--va-color-accent-hover); color: var(--va-color-on-accent); }
/* Outline variants for secondary actions: the meaning colour stays on the border and text, the fill is the page surface.
   Tokens give AA contrast in both themes (danger 6.5:1 / 6:1, warning 5.6:1 / 9:1, brand-action 5.5:1 / 9.7:1 on surface). */
.va-btn--outline-danger { background: var(--va-color-surface); color: var(--va-color-danger); border-color: var(--va-color-danger); }
.va-btn--outline-danger:hover:not(:disabled) { background: var(--va-color-danger-soft); color: var(--va-color-danger); }
.va-btn--outline-caution { background: var(--va-color-surface); color: var(--va-color-warning); border-color: var(--va-color-warning); }
.va-btn--outline-caution:hover:not(:disabled) { background: var(--va-color-warning-soft); color: var(--va-color-warning); }
.va-btn--outline-success { background: var(--va-color-surface); color: var(--va-color-brand-action); border-color: var(--va-color-brand-action); }
.va-btn--outline-success:hover:not(:disabled) { background: var(--va-color-surface-2); color: var(--va-color-brand-action-hover); }
.va-btn--icon { padding: 0; width: var(--va-tap); }
.va-btn--block { width: 100%; }

/* ---------- Form fields (full width on phones; right mobile keyboards set per input) ---------- */
.va-field { display: flex; flex-direction: column; gap: var(--va-space-1); min-width: 0; }
.va-field__label { font-size: var(--va-text-sm); font-weight: var(--va-weight-medium); color: var(--va-color-text-muted); }
.va-input, .va-select {
    width: 100%; min-height: var(--va-tap); padding: 0 var(--va-space-3);
    /* 16px minimum stops iOS Safari zooming into a focused field */
    font: inherit; font-size: max(16px, var(--va-text-md));
    color: var(--va-color-text); background: var(--va-color-surface);
    border: 1px solid var(--va-color-border-strong); border-radius: var(--va-radius-md);
}
/* WebKit lets a select's longest option (a deployment name) spill past the select and widen the page, and
   ignores overflow on a select: paint containment clips it to the box. */
.va-select { contain: paint; }
.va-input:focus, .va-select:focus { outline: 2px solid var(--va-color-focus); outline-offset: 0; border-color: transparent; }

.va-field__hint { font-size: var(--va-text-sm); color: var(--va-color-text-muted); }

/* Forms and stacked sections (Admin → Customers). One column on phones, two from 768px. */
.va-form-grid { display: grid; gap: var(--va-space-3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--va-space-4); }
@media (min-width: 768px) { .va-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.va-form-grid .va-field--wide { grid-column: 1 / -1; }
.va-actions { display: flex; flex-wrap: wrap; gap: var(--va-space-2); align-items: center; }
/* The Website panel (Phase 20) stacks its buttons between fields and hints, so give them room above and below. */
.va-card--website .va-actions { margin-block: var(--va-space-2); }
/* Generation packs (Options): name, fee and Buy in aligned columns, one row per pack. */
.va-packs { list-style: none; margin: var(--va-space-3) 0 0; padding: 0; display: grid; gap: var(--va-space-2); max-width: 28rem; }
.va-packs__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 5rem; align-items: center; gap: var(--va-space-3); }
.va-packs__fee { text-align: right; }
.va-packs__row .va-btn { width: 100%; }
/* Change your plan (Subscription): plan name with its suggested range, the monthly fee, and Upgrade / Move down in aligned columns. A narrow screen stacks them. */
.va-plan-list { list-style: none; margin: var(--va-space-3) 0; padding: 0; display: grid; gap: var(--va-space-3); max-width: 40rem; }
.va-plan-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 7rem; align-items: center; gap: var(--va-space-3); }
.va-plan-list__name { display: grid; gap: var(--va-space-1); }
.va-plan-list__fee { text-align: right; white-space: nowrap; }
.va-plan-list__row .va-btn, .va-plan-list__row .va-badge { justify-self: stretch; text-align: center; }
@media (max-width: 480px) { .va-plan-list__row { grid-template-columns: minmax(0, 1fr) auto; } .va-plan-list__row .va-btn, .va-plan-list__row .va-badge { grid-column: 1 / -1; } }
.va-callout { border: 1px solid var(--va-color-border-strong); background: var(--va-color-surface-2); border-radius: var(--va-radius-md); padding: var(--va-space-3) var(--va-space-4); margin: var(--va-space-3) 0; }
.va-callout p { margin-top: 0; }
/* minmax(0, 1fr), as in .va-form-grid: a card never grows past the page to fit a tab row or a long select option. */
.va-stack { display: grid; gap: var(--va-space-4); grid-template-columns: minmax(0, 1fr); }
.va-card__title { font-size: var(--va-text-lg); margin-bottom: var(--va-space-3); }
.va-card--danger { border-color: color-mix(in srgb, var(--va-color-danger) 40%, transparent); }
.va-muted { color: var(--va-color-text-muted); }
.va-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.va-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.va-add-user { margin-top: var(--va-space-5); padding-top: var(--va-space-4); border-top: 1px solid var(--va-color-border); }
.va-purge-steps { list-style: none; margin: 0 0 var(--va-space-4); padding: 0; display: grid; gap: var(--va-space-2); }
.va-needs { margin: 0; padding-left: var(--va-space-5); display: grid; gap: var(--va-space-2); }

.va-filters {
    display: grid; gap: var(--va-space-3); grid-template-columns: 1fr;
    margin-bottom: var(--va-space-4);
}
@media (min-width: 768px) { .va-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .va-filters { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; } }

/* ---------- Data table → stacked cards when its container is narrow ----------
   A container query, not a viewport query: at 768px the sidebar leaves the content ~510px wide, too
   narrow for a multi-column table. The wrapper also scrolls sideways as a backstop, so a table can
   never widen the page. */
/* position: an absolutely placed child (a visually hidden column label) is otherwise outside this scroller, and widened the page. */
.va-table-wrap { container-type: inline-size; container-name: va-table; overflow-x: auto; position: relative; }
.va-table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--va-text-sm);
    background: var(--va-color-surface); border: 1px solid var(--va-color-border); border-radius: var(--va-radius-lg);
}
.va-table thead th:first-child { border-top-left-radius: var(--va-radius-lg); }
.va-table thead th:last-child { border-top-right-radius: var(--va-radius-lg); }
.va-table th {
    text-align: left; font-weight: var(--va-weight-bold); color: var(--va-color-text-muted);
    font-size: var(--va-text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--va-space-3) var(--va-space-4); border-bottom: 1px solid var(--va-color-border);
    background: var(--va-color-surface-2);
}
.va-table td { padding: var(--va-space-3) var(--va-space-4); border-bottom: 1px solid var(--va-color-border); vertical-align: top; overflow-wrap: anywhere; }
.va-table tbody tr:last-child td { border-bottom: none; }
.va-table tbody tr.va-table__row--clickable { cursor: pointer; }
.va-table tbody tr.va-table__row--clickable:hover { background: var(--va-color-surface-2); }
.va-table .va-nowrap { white-space: nowrap; }

@container va-table (max-width: 719.98px) {
    .va-table { background: none; border: none; border-radius: 0; }
    .va-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .va-table, .va-table tbody, .va-table tr, .va-table td { display: block; width: 100%; }
    .va-table tr {
        background: var(--va-color-surface); border: 1px solid var(--va-color-border);
        border-radius: var(--va-radius-lg); padding: var(--va-space-2) 0; margin-bottom: var(--va-space-3);
        box-shadow: var(--va-shadow-sm);
    }
    .va-table td {
        display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--va-space-3);
        border-bottom: none; padding: var(--va-space-2) var(--va-space-4);
    }
    .va-table td::before {
        content: attr(data-label); font-size: var(--va-text-xs); font-weight: var(--va-weight-bold);
        text-transform: uppercase; letter-spacing: 0.04em; color: var(--va-color-text-muted); padding-top: 2px;
    }
    .va-table .va-nowrap { white-space: normal; }
    /* VectorAtlas: a badge keeps its own width in a card cell rather than stretching across it. */
    .va-table td > .va-badge { justify-self: start; }
}

/* ---------- Badges, alerts, empty state ---------- */
.va-badge {
    display: inline-flex; align-items: center; padding: 2px var(--va-space-2); border-radius: 999px;
    font-size: var(--va-text-xs); font-weight: var(--va-weight-bold);
    background: var(--va-color-surface-2); color: var(--va-color-text-muted); white-space: nowrap;
}
.va-badge--brand { background: var(--va-color-brand-soft); color: var(--va-color-brand-strong); }
.va-badge--success { background: var(--va-color-success-soft); color: var(--va-color-success); }
.va-badge--warning { background: var(--va-color-warning-soft); color: var(--va-color-warning); }
.va-badge--danger { background: var(--va-color-danger-soft); color: var(--va-color-danger); }

.va-alert {
    display: flex; gap: var(--va-space-3); align-items: flex-start;
    padding: var(--va-space-3) var(--va-space-4); border-radius: var(--va-radius-md);
    border: 1px solid transparent; margin-bottom: var(--va-space-4);
}
.va-alert--danger { background: var(--va-color-danger-soft); color: var(--va-color-danger); border-color: color-mix(in srgb, var(--va-color-danger) 30%, transparent); }
.va-alert--success { background: var(--va-color-success-soft); color: var(--va-color-success); border-color: color-mix(in srgb, var(--va-color-success) 30%, transparent); }
.va-alert--warning { background: var(--va-color-warning-soft); color: var(--va-color-warning); border-color: color-mix(in srgb, var(--va-color-warning) 30%, transparent); }

.va-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--va-space-6) var(--va-space-4); color: var(--va-color-text-muted);
    background: var(--va-color-surface); border: 1px dashed var(--va-color-border-strong);
    border-radius: var(--va-radius-lg);
}
.va-empty__icon { color: var(--va-color-brand); margin-bottom: var(--va-space-3); }
.va-empty__title { font-weight: var(--va-weight-bold); color: var(--va-color-text); font-size: var(--va-text-lg); margin-bottom: var(--va-space-2); }
.va-empty__body { max-width: 46ch; }
.va-empty__body p:last-child { margin-bottom: 0; }

/* ---------- Pagination ---------- */
.va-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--va-space-3); margin-top: var(--va-space-4); color: var(--va-color-text-muted); font-size: var(--va-text-sm);
}
.va-pagination__buttons { display: flex; gap: var(--va-space-2); }

/* ---------- Dialog: centred card from 768px, full-screen sheet on phones ---------- */
.va-dialog-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--va-color-scrim); }
.va-dialog {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
    background: var(--va-color-surface); color: var(--va-color-text);
}
.va-dialog__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--va-space-3);
    padding: var(--va-space-2) var(--va-space-2) var(--va-space-2) var(--va-space-4);
    border-bottom: 1px solid var(--va-color-border);
}
.va-dialog__title { font-size: var(--va-text-lg); margin: 0; }
.va-dialog__body { flex: 1; overflow: auto; padding: var(--va-space-4); }
.va-dialog__footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--va-space-2);
    padding: var(--va-space-3) var(--va-space-4); border-top: 1px solid var(--va-color-border);
    padding-bottom: max(var(--va-space-3), env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
    .va-dialog {
        inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(720px, calc(100vw - 4rem)); max-height: calc(100vh - 4rem);
        border-radius: var(--va-radius-lg); box-shadow: var(--va-shadow-lg);
    }
}

/* ---------- Definition list (dialog details) ---------- */
.va-dl { display: grid; grid-template-columns: 1fr; gap: var(--va-space-1) var(--va-space-4); margin: 0 0 var(--va-space-4); }
.va-dl dt { font-size: var(--va-text-xs); font-weight: var(--va-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--va-color-text-muted); }
.va-dl dd { margin: 0 0 var(--va-space-2); overflow-wrap: anywhere; }
@media (min-width: 768px) { .va-dl { grid-template-columns: 10rem minmax(0, 1fr); } .va-dl dd { margin: 0; } }

.va-code {
    background: var(--va-color-surface-2); border: 1px solid var(--va-color-border);
    border-radius: var(--va-radius-md); padding: var(--va-space-3); margin: 0 0 var(--va-space-4);
    overflow-x: auto; font-size: var(--va-text-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- Docs viewer: Contents sidebar + article from 1280px; stacked on phones and tablets ---------- */
.va-docs { display: grid; gap: var(--va-space-4); grid-template-columns: minmax(0, 1fr); }
.va-docs__toc { align-self: start; }
.va-docs__toc-title { font-size: var(--va-text-xs); font-weight: var(--va-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--va-color-text-muted); margin: 0 0 var(--va-space-2); }
.va-docs__list { list-style: none; margin: 0; padding: 0; }
.va-docs__link {
    display: flex; align-items: center; min-height: var(--va-tap); width: 100%;
    padding: var(--va-space-1) var(--va-space-3); border-radius: var(--va-radius-md);
    color: var(--va-color-text); text-decoration: none; font-size: var(--va-text-sm); line-height: 1.3;
}
.va-docs__link:hover { background: var(--va-color-surface-2); color: var(--va-color-text); }
.va-docs__link[aria-current="page"] { background: var(--va-color-brand-soft); color: var(--va-color-brand-strong); font-weight: var(--va-weight-medium); }
.va-docs__picker { display: block; }
.va-docs__search { display: block; margin-bottom: var(--va-space-3); }
.va-docs__group { font-size: var(--va-text-xs); font-weight: var(--va-weight-bold); color: var(--va-color-text-muted); margin: var(--va-space-3) 0 var(--va-space-1) var(--va-space-3); }
.va-docs__link { gap: var(--va-space-2); justify-content: space-between; }
.va-docs__marker { flex: none; }
/* Search results stay visible on phones too (the topic list is replaced by the picker there). */
.va-docs__results { list-style: none; margin: 0; padding: 0; }
.va-docs__hit { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: var(--va-space-2); }
.va-docs__hit-title { font-weight: var(--va-weight-medium); }
.va-docs__hit-excerpt { font-size: var(--va-text-xs); color: var(--va-color-text-muted); }
.va-docs__toc .va-docs__list { display: none; }
@media (min-width: 1280px) {
    .va-docs { grid-template-columns: 240px minmax(0, 1fr); gap: var(--va-space-5); }
    .va-docs__toc { position: sticky; top: var(--va-space-5); }
    .va-docs__picker { display: none; }
    .va-docs__toc .va-docs__list { display: block; }
}

.va-prose { min-width: 0; overflow-wrap: anywhere; }
.va-prose h1 { font-size: var(--va-text-2xl); }
.va-prose h2 { font-size: var(--va-text-xl); margin-top: var(--va-space-6); padding-bottom: var(--va-space-2); border-bottom: 1px solid var(--va-color-border); }
.va-prose h3 { font-size: var(--va-text-lg); margin-top: var(--va-space-5); }
.va-prose ul, .va-prose ol { padding-left: 1.4em; margin: 0 0 var(--va-space-3); }
.va-prose li { margin-bottom: var(--va-space-1); }
.va-prose code { background: var(--va-color-surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
.va-prose pre { background: var(--va-color-surface-2); border: 1px solid var(--va-color-border); border-radius: var(--va-radius-md); padding: var(--va-space-3); overflow-x: auto; }
.va-prose pre code { background: none; padding: 0; }
.va-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--va-space-4); font-size: var(--va-text-sm); }
.va-prose th, .va-prose td { border: 1px solid var(--va-color-border); padding: var(--va-space-2) var(--va-space-3); text-align: left; vertical-align: top; }
.va-prose th { background: var(--va-color-surface-2); }
.va-prose blockquote { margin: 0 0 var(--va-space-3); padding: var(--va-space-2) var(--va-space-4); border-left: 3px solid var(--va-color-brand); background: var(--va-color-surface-2); border-radius: 0 var(--va-radius-sm) var(--va-radius-sm) 0; }
.va-prose .va-mermaid { overflow-x: auto; margin: 0 0 var(--va-space-4); }
.va-prose .va-mermaid svg { max-width: 100%; height: auto; }


/* ---------- Usage meter and tabs ---------- */

/* Usage against a limit: "3 of 5 data sources" and a bar. */
.va-usage { max-width: 28rem; margin-bottom: var(--va-space-4); }
.va-usage__text { margin: 0 0 var(--va-space-2); }
.va-meter { height: 8px; border-radius: 999px; background: var(--va-color-surface-2); border: 1px solid var(--va-color-border); overflow: hidden; }
.va-meter__fill { height: 100%; background: var(--va-color-brand-action); }
.va-meter__fill--warning { background: var(--va-color-warning); }
.va-meter__fill--danger { background: var(--va-color-danger); }

/* Tabs: one row that scrolls sideways on phones rather than wrapping (criterion 6a). */
.va-tabs {
    display: flex; gap: var(--va-space-1); overflow-x: auto; overscroll-behavior-x: contain;
    border-bottom: 1px solid var(--va-color-border); scrollbar-width: thin; scroll-snap-type: x proximity;
}
.va-tab {
    flex: none; min-height: var(--va-tap); min-width: var(--va-tap); padding: 0 var(--va-space-3); scroll-snap-align: start;
    border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
    font: inherit; font-weight: var(--va-weight-medium); color: var(--va-color-text-muted); white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.va-tab:hover { color: var(--va-color-text); }
.va-tab[aria-selected="true"] { color: var(--va-color-brand-strong); border-bottom-color: var(--va-color-brand-action); }
.va-tabpanel { margin-top: var(--va-space-4); }
.va-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--va-space-2); margin-bottom: var(--va-space-2); }
.va-card__head .va-card__title { margin: 0; }


.va-field__hint--error { color: var(--va-color-danger); }
.va-input[aria-invalid="true"] { border-color: var(--va-color-danger); }

/* Radio and checkbox choices: the whole label is a 44px target. */
.va-choices { display: flex; flex-wrap: wrap; gap: 0 var(--va-space-4); }
.va-choice { display: inline-flex; align-items: center; gap: var(--va-space-2); min-height: var(--va-tap); min-width: var(--va-tap); cursor: pointer; }
.va-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--va-color-brand-action); flex: none; }
.va-choice--inline { margin-bottom: var(--va-space-3); }
.va-fieldset:disabled .va-choice { cursor: not-allowed; color: var(--va-color-text-muted); }
.va-option-list { display: grid; gap: var(--va-space-2); margin: var(--va-space-2) 0 var(--va-space-4); }
.va-option-list .va-choice { align-items: flex-start; padding-top: var(--va-space-2); min-width: 0; overflow-wrap: anywhere; }
.va-option-list__hint { display: block; color: var(--va-color-text-muted); font-size: var(--va-text-sm); }
.va-textarea { display: block; min-height: 6.5rem; padding: var(--va-space-2) var(--va-space-3); line-height: var(--va-leading); resize: vertical; }
.va-disclosure { margin-top: var(--va-space-2); }
.va-disclosure > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--va-color-text-muted); }
/* VectorAtlas: a select and its button on one line in a table cell (wraps on a narrow card). */
.va-inline-form { display: flex; flex-wrap: wrap; gap: var(--va-space-2); align-items: center; }
.va-inline-form > .va-input { flex: 1 1 10rem; min-width: 0; }


/* Number stepper: − [n] + */
.va-stepper { display: inline-flex; align-items: center; gap: var(--va-space-1); }
.va-stepper__input { width: 5rem; text-align: center; padding: 0 var(--va-space-2); -moz-appearance: textfield; appearance: textfield; }
.va-stepper__input::-webkit-outer-spin-button, .va-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.va-link-btn {
    display: inline-flex; align-items: center; min-height: var(--va-tap); padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--va-color-brand-action); text-decoration: underline; text-underline-offset: 2px;
}
.va-link-btn:hover:not(:disabled) { color: var(--va-color-brand-action-hover); }
.va-link-btn:disabled { opacity: 0.55; cursor: not-allowed; }


/* ---------- Screen streamline: breadcrumbs, menu button, action bar ---------- */
.va-crumbs-row { display: flex; align-items: center; justify-content: space-between; gap: var(--va-space-3); flex-wrap: wrap; margin: 0 0 var(--va-space-2); }
.va-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: var(--va-text-sm); }
.va-crumbs__item { display: inline-flex; align-items: center; min-height: var(--va-tap); }
.va-crumbs__item + .va-crumbs__item::before { content: "/"; margin: 0 var(--va-space-2); color: var(--va-color-text-muted); }
.va-crumbs__item a { display: inline-flex; align-items: center; min-height: var(--va-tap); font-weight: var(--va-weight-medium); }
.va-crumbs__item [aria-current="page"] { color: var(--va-color-text-muted); }

.va-menu { position: relative; display: inline-block; }
.va-menu__backdrop { position: fixed; inset: 0; z-index: 29; }
.va-menu__list {
    position: absolute; z-index: 30; top: calc(100% + var(--va-space-1)); right: 0; min-width: 14rem; max-width: calc(100vw - 2 * var(--va-gutter));
    display: grid; padding: var(--va-space-1); background: var(--va-color-surface); border: 1px solid var(--va-color-border-strong);
    border-radius: var(--va-radius-md); box-shadow: var(--va-shadow-md);
}
.va-menu--up .va-menu__list { top: auto; bottom: calc(100% + var(--va-space-1)); }
.va-menu__item {
    display: flex; align-items: center; gap: var(--va-space-2); width: 100%; min-height: var(--va-tap); padding: 0 var(--va-space-3);
    border: 0; border-radius: var(--va-radius-sm, var(--va-radius-md)); background: none; color: var(--va-color-text);
    font: inherit; text-align: left; cursor: pointer;
}
.va-menu__item:hover:not(:disabled), .va-menu__item:focus-visible { background: var(--va-color-surface-2); }
.va-menu__item:disabled { opacity: 0.55; cursor: not-allowed; }
.va-menu__item--danger { color: var(--va-color-danger); }

/* A bar of decision or save buttons fixed to the bottom at every width; the page reserves its height. */
.va-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: var(--va-space-2) var(--va-gutter); padding-bottom: max(var(--va-space-2), env(safe-area-inset-bottom));
    background: var(--va-color-surface); border-top: 1px solid var(--va-color-border); box-shadow: var(--va-shadow-md);
}
.va-action-bar__inner { display: flex; align-items: center; gap: var(--va-space-3); max-width: var(--va-content-max, none); margin: 0 auto; }
.va-action-bar__summary { flex: 1 1 auto; min-width: 0; font-size: var(--va-text-sm); }
.va-action-bar__buttons { display: flex; flex: 1 1 auto; gap: var(--va-space-2); }
.va-action-bar__buttons > .va-btn, .va-action-bar__buttons > .va-menu { flex: 1 1 0; }
.va-action-bar__buttons > .va-menu > .va-btn { width: 100%; }
.va-action-bar__buttons > .va-btn--main { flex-grow: 2; }
.va-main:has(.va-action-bar) { padding-bottom: calc(var(--va-space-6) + var(--va-tap) + var(--va-space-4) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
    /* From 768px the sidebar is fixed at the left, over anything that starts at 0 (Phase 21a D5, the first page with an ActionBar). */
    .va-action-bar { left: var(--va-sidebar-width); }
    .va-action-bar__buttons { flex: 0 1 auto; margin-left: auto; }
    .va-action-bar__buttons > .va-btn, .va-action-bar__buttons > .va-menu { flex: 0 0 auto; }
    .va-action-bar__buttons > .va-menu > .va-btn { width: auto; }
}

/* ---------- Account → Options and Admin → Platform settings (Phase 8) ---------- */
.va-subhead { margin: var(--va-space-5) 0 var(--va-space-2); font-size: var(--va-text-md); }
.va-stat-row { display: grid; gap: var(--va-space-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0 0 var(--va-space-4); }
.va-stat { display: grid; gap: var(--va-space-1); }
.va-stat__value { font-size: var(--va-text-2xl); font-weight: var(--va-weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.va-stat__label { font-size: var(--va-text-sm); color: var(--va-color-text-muted); }
.va-builtin summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.va-rules-table input { max-width: 7rem; }

/* ---------- Dashboard (Phase 8) ---------- */
/* One column on a phone, tiles first. The bars carry their numbers as text beside them, so nothing
   needs hover (there's none on a phone) and colour is never the only way to read them. */
.va-dash-filters { margin: 0 0 var(--va-space-4); }
@media (min-width: 1280px) { .va-dash-filters { grid-template-columns: repeat(3, minmax(0, 18rem)); } }
.va-dash-tiles { margin: 0; }
.va-dash-start { border-left: 4px solid var(--va-color-brand); }
.va-dash-start__steps { margin: 0; padding-left: var(--va-space-5); display: grid; gap: var(--va-space-2); }
.va-dash-tile { padding: var(--va-space-2); border-radius: var(--va-radius-sm); color: inherit; text-decoration: none; }
a.va-dash-tile:hover { background: var(--va-color-surface-2); }
/* Sign-up progress (screen streamline): four numbered steps; the current one is filled and named, the others are quiet. */
.va-steps { margin-bottom: var(--va-space-4); }
.va-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--va-space-2) var(--va-space-4); }
.va-steps__item { display: inline-flex; align-items: center; gap: var(--va-space-2); color: var(--va-color-text-muted); }
.va-steps__num {
    display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; border: 2px solid var(--va-color-border); font-weight: 600; font-size: var(--va-text-sm);
}
.va-steps__item--done .va-steps__num { border-color: var(--va-color-brand-action); color: var(--va-color-brand-action); }
.va-steps__item--current { color: inherit; font-weight: 600; }
.va-steps__item--current .va-steps__num { background: var(--va-color-brand-action); border-color: var(--va-color-brand-action); color: var(--va-color-on-brand); }
/* A step already reached, as a button back to it (Onboarding). The 44px box is the tap target, with the label beside the number. */
.va-steps__btn {
    display: inline-flex; align-items: center; gap: var(--va-space-2); min-height: var(--va-tap); min-width: var(--va-tap);
    padding: 0 var(--va-space-2); margin: 0 calc(-1 * var(--va-space-2)); border: 0; border-radius: var(--va-radius-sm);
    background: none; color: var(--va-color-brand-action); font: inherit; cursor: pointer; justify-content: center;
}
.va-steps__btn:hover .va-steps__label { text-decoration: underline; }
@media (max-width: 40rem) {
    .va-steps__item:not(.va-steps__item--current) .va-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .va-steps__list { gap: var(--va-space-2); }
}
.va-dash-grid { display: grid; gap: var(--va-space-4); }
@media (min-width: 1280px) { .va-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.va-dash-bars { list-style: none; margin: 0 0 var(--va-space-3); padding: 0; display: grid; gap: var(--va-space-3); container-type: inline-size; }
.va-dash-bars__row {
    display: grid; gap: var(--va-space-1) var(--va-space-3); align-items: center;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track";
}
.va-dash-bars__label { grid-area: label; font-weight: var(--va-weight-medium); }
.va-dash-bars__value { grid-area: value; font-size: var(--va-text-sm); color: var(--va-color-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.va-dash-bars__track {
    grid-area: track; display: flex; height: 12px; overflow: hidden;
    border-radius: 999px; background: var(--va-color-surface-2); border: 1px solid var(--va-color-border);
}
/* The value column is capped, so a long figure (Run Rate's cost by kind) wraps rather than squeezing out the bar. One line per row
   once the list itself is wide enough, measured in rem (Phase 21a E3): at 200% text a card in the two-column grid is too narrow for
   the 9rem label, so its rows stack, where a px breakpoint kept them on one line and pushed them out of the card. */
@container (min-width: 26rem) {
    .va-dash-bars__row { grid-template-columns: 9rem minmax(0, 1fr) fit-content(40%); grid-template-areas: "label track value"; }
}
.va-dash-bar { height: 100%; flex: none; }
.va-dash-bar--yes { background: var(--va-color-success); }
.va-dash-bar--no { background: var(--va-color-danger); }
.va-dash-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--va-space-2); margin: 0 0 var(--va-space-3); font-size: var(--va-text-sm); color: var(--va-color-text-muted); }
.va-dash-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.va-dash-list { list-style: none; margin: 0 0 var(--va-space-3); padding: 0; display: grid; gap: var(--va-space-3); }
.va-dash-list__item {
    display: grid; gap: var(--va-space-1) var(--va-space-3); align-items: center;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date badge" "what what";
    padding-bottom: var(--va-space-3); border-bottom: 1px solid var(--va-color-border);
}
.va-dash-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.va-dash-list__date { grid-area: date; font-size: var(--va-text-sm); color: var(--va-color-text-muted); font-variant-numeric: tabular-nums; }
.va-dash-list__what { grid-area: what; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.va-dash-list__item .va-badge { grid-area: badge; }
@media (min-width: 768px) {
    .va-dash-list__item { grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "date what badge"; }
}



/* ---------- VectorAtlas: the Pulse sign-up's license agreement (Phase 21a D1) ---------- */
/* Rendered Markdown (MarkdownRenderer), in a box that scrolls rather than lengthening the payment step; the summary is a full-size
   tap target. */
.va-eula { border: 1px solid var(--va-color-border); border-radius: var(--va-radius-md); background: var(--va-color-surface-2); }
.va-eula > summary {
    display: flex; align-items: center; min-height: var(--va-tap); padding: 0 var(--va-space-3);
    cursor: pointer; font-weight: var(--va-weight-medium);
}
.va-eula > summary:focus-visible { outline: 2px solid var(--va-color-focus); outline-offset: 2px; }
.va-eula__text {
    max-height: 20rem; overflow: auto; margin: 0; padding: var(--va-space-3); border-top: 1px solid var(--va-color-border);
    overflow-wrap: anywhere; font-size: var(--va-text-sm);
}

/* The in-app license agreement (EulaGate), in place of the page until accepted: a readable measure. */
.va-eula-gate { max-width: 60rem; }

/* ---------- VectorAtlas: a KPI suggestion to confirm (KpiSuggestionCard; Data source → Mapping, Onboarding) ---------- */
.va-kpi-card { padding: var(--va-space-4); border: 1px solid var(--va-color-border); border-radius: var(--va-radius-md); background: var(--va-color-surface-2); }
.va-kpi-card__title { font-size: var(--va-text-md); margin: 0; }
.va-kpi-card p { margin: 0; }
.va-kpi-card__alternatives { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--va-space-2); }
.va-kpi-card__alternatives li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--va-space-2); }

/* ---------- Status row (pressed filter buttons) and a card feed, as Zentivue's Content Agent (Phase 21a D4) ---------- */
.va-status-row { display: flex; flex-wrap: wrap; gap: var(--va-space-2); margin-bottom: var(--va-space-3); }
.va-status-row .va-btn[aria-pressed="true"] { border-color: var(--va-color-brand-action); background: var(--va-color-surface-2); box-shadow: inset 0 0 0 1px var(--va-color-brand-action); font-weight: 600; }
.va-status-row__count { font-variant-numeric: tabular-nums; color: var(--va-color-text-muted); }
.va-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--va-space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .va-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- VectorAtlas: one insight in the feed ---------- */
.va-insight { display: grid; gap: var(--va-space-2); align-content: start; min-width: 0; }
.va-insight__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--va-space-2); }
.va-insight__title { font-size: var(--va-text-md); margin: 0; overflow-wrap: anywhere; }
.va-insight__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.va-insight__meta { display: flex; flex-wrap: wrap; gap: var(--va-space-1) var(--va-space-3); margin: 0; color: var(--va-color-text-muted); font-size: var(--va-text-sm); }
.va-insight__warning { display: flex; gap: var(--va-space-2); align-items: flex-start; margin: 0; color: var(--va-color-danger); font-size: var(--va-text-sm); }

/* ---------- A plain list of rows, each a name with a badge or one action at the end (Onboarding, Phase 21a D5) ---------- */
.va-rowlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--va-color-border); border-radius: var(--va-radius-md); }
.va-rowlist__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--va-space-2) var(--va-space-3); padding: var(--va-space-3); min-width: 0; }
.va-rowlist__item + .va-rowlist__item { border-top: 1px solid var(--va-color-border); }
.va-rowlist__main { display: grid; gap: var(--va-space-1); min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.va-rowlist__main .va-muted { font-size: var(--va-text-sm); }
/* Phase 21a D8: a neutral bar (a score breakdown category that isn't Good), beside the dashboard's better/worse colours. */
.va-dash-bar--brand { background: var(--va-color-brand-action); }
.va-dash-bar--warn { background: var(--va-color-warning); }

/* ---------- LineChart (Phase 21a D8): a small line chart beside numbers the page writes out ---------- */
.va-chart { width: 100%; height: auto; display: block; }
.va-chart__grid { stroke: var(--va-color-border); stroke-width: 1; }
.va-chart__label { font-size: 7px; fill: var(--va-color-text-muted); }
.va-chart__line { fill: none; stroke: var(--va-color-brand-action); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.va-chart__dot { fill: var(--va-color-brand-action); stroke: var(--va-color-surface); stroke-width: 1; }
.va-chart__band { fill: var(--va-color-brand-action); fill-opacity: 0.16; }
/* Phase 21a D10: a doc starts with its own heading (now an H2), so no gap above it inside the card. */
.va-prose > :first-child { margin-top: 0; }