/*
 * The VirgilTrack component library (B-06): styles for Components/Shared/UI (VtCard, VtKpiTile, VtTable, VtStatusPill …).
 * Loaded after vt-components.css. Tokens only: every colour, size and radius comes from vt-tokens.css, so each
 * component follows light and dark mode, and nesting data-bs-theme="dark" inside a light page works too (the /dev/ui
 * gallery shows both side by side).
 *
 * Class names are global (vt-*), not scoped, so markup drawn by scripts (the Kanban board, the assistant's cards)
 * can use them as well: <span class="vt-pill vt-tone-success">Mitigated</span>.
 * See docs/stable-release/COMPONENTS.md.
 */

/* ── Library-wide roles built from the tokens. Declared on every themed element (not only :root) so a dark section
   inside a light page resolves them from its own dark tokens. ── */
:root, [data-bs-theme] {
  --vt-empty-icon-bg: var(--vt-brand-100);
  --vt-scroll-shadow: color-mix(in srgb, var(--vt-ink) 16%, transparent);
  --vt-skeleton: var(--vt-gray-100);
  --vt-skeleton-shine: color-mix(in srgb, var(--vt-white) 70%, transparent);
  --vt-hero-solid: var(--vt-brand-800);
  --vt-on-hero-solid: var(--vt-white);
  /* Avatar colours: soft background + text pairs (all ≥ 4.5:1), picked by a hash of the person's id */
  --vt-avatar-1-bg: var(--vt-brand-100);  --vt-avatar-1-fg: var(--vt-brand-800);
  --vt-avatar-2-bg: var(--vt-success-soft); --vt-avatar-2-fg: var(--vt-success-text);
  --vt-avatar-3-bg: var(--vt-warning-soft); --vt-avatar-3-fg: var(--vt-warning-text);
  --vt-avatar-4-bg: var(--vt-danger-soft);  --vt-avatar-4-fg: var(--vt-danger-text);
  --vt-avatar-5-bg: var(--vt-neutral-soft); --vt-avatar-5-fg: var(--vt-neutral-text);
  --vt-avatar-6-bg: var(--vt-risk-2);       --vt-avatar-6-fg: var(--vt-risk-2-text);
  --vt-avatar-7-bg: var(--vt-risk-4);       --vt-avatar-7-fg: var(--vt-risk-4-text);
  --vt-avatar-8-bg: var(--vt-brand-200);    --vt-avatar-8-fg: var(--vt-brand-900);
}
[data-bs-theme=dark] {
  --vt-empty-icon-bg: var(--vt-primary-soft);
  --vt-scroll-shadow: color-mix(in srgb, var(--vt-ink) 60%, transparent);
  --vt-skeleton: var(--vt-surface-muted);
  --vt-skeleton-shine: color-mix(in srgb, var(--vt-border-strong) 55%, transparent);
  --vt-hero-solid: var(--vt-brand-900);
  --vt-avatar-1-bg: var(--vt-primary-soft); --vt-avatar-1-fg: var(--vt-brand-200);
  --vt-avatar-8-bg: var(--vt-surface-tint); --vt-avatar-8-fg: var(--vt-brand-300);
}

/* ── Tones: one class sets the text, soft background and solid colours of a status (B-20) ── */
.vt-tone-neutral { --vt-tone-text: var(--vt-neutral-text); --vt-tone-soft: var(--vt-neutral-soft); --vt-tone-solid: var(--vt-neutral); }
.vt-tone-info    { --vt-tone-text: var(--vt-info-text);    --vt-tone-soft: var(--vt-info-soft);    --vt-tone-solid: var(--vt-info); }
.vt-tone-success { --vt-tone-text: var(--vt-success-text); --vt-tone-soft: var(--vt-success-soft); --vt-tone-solid: var(--vt-success); }
.vt-tone-warning { --vt-tone-text: var(--vt-warning-text); --vt-tone-soft: var(--vt-warning-soft); --vt-tone-solid: var(--vt-warning); }
.vt-tone-danger  { --vt-tone-text: var(--vt-danger-text);  --vt-tone-soft: var(--vt-danger-soft);  --vt-tone-solid: var(--vt-danger); }
.vt-tone-brand   { --vt-tone-text: var(--vt-primary-hover); --vt-tone-soft: var(--vt-primary-soft); --vt-tone-solid: var(--vt-primary); }
.vt-tone-risk-1  { --vt-tone-text: var(--vt-risk-1-text); --vt-tone-soft: var(--vt-risk-1); --vt-tone-solid: var(--vt-risk-1-text); }
.vt-tone-risk-2  { --vt-tone-text: var(--vt-risk-2-text); --vt-tone-soft: var(--vt-risk-2); --vt-tone-solid: var(--vt-risk-2-text); }
.vt-tone-risk-3  { --vt-tone-text: var(--vt-risk-3-text); --vt-tone-soft: var(--vt-risk-3); --vt-tone-solid: var(--vt-risk-3-text); }
.vt-tone-risk-4  { --vt-tone-text: var(--vt-risk-4-text); --vt-tone-soft: var(--vt-risk-4); --vt-tone-solid: var(--vt-risk-4-text); }
.vt-tone-risk-5  { --vt-tone-text: var(--vt-risk-5-text); --vt-tone-soft: var(--vt-risk-5); --vt-tone-solid: var(--vt-risk-5-text); }

/* ── VtIcon ── */
.vt-icon { line-height: 1; vertical-align: -0.125em; }
/* Keenicons set their own 1rem size and muted colour; inside these parts the icon takes the part's size and colour */
.vt-empty__icon .vt-icon, .vt-toast__icon .vt-icon, .vt-toast__close .vt-icon, .vt-menu-button .vt-icon, .vt-icon-button .vt-icon,
.vt-menu__item .vt-icon, .vt-field__error .vt-icon, .vt-search .vt-icon, .vt-action-button .vt-icon, .vt-tabs__tab .vt-icon,
.vt-pagination__page .vt-icon { font-size: inherit; color: inherit; }

/* ── VtStatusPill and VtBadge ── */
.vt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid transparent;          /* shows as an outline in Windows high-contrast mode */
  border-radius: var(--vt-radius-pill);
  background: var(--vt-tone-soft, var(--vt-neutral-soft));
  color: var(--vt-tone-text, var(--vt-neutral-text));
  font-size: var(--vt-text-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.vt-pill--sm { padding: 0 8px; font-size: var(--vt-text-xs); }
.vt-pill__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--vt-tone-solid, var(--vt-neutral)); }
.vt-pill__label { overflow: hidden; text-overflow: ellipsis; }
.vt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--vt-radius-sm);
  background: var(--vt-tone-soft, var(--vt-neutral-soft));
  color: var(--vt-tone-text, var(--vt-neutral-text));
  font-size: var(--vt-text-xs);
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vt-badge--solid { background: var(--vt-tone-solid, var(--vt-neutral)); color: var(--vt-surface); }
.vt-badge--outline { background: transparent; border-color: var(--vt-border-strong); color: var(--vt-text-muted); }

/* ── VtPageHeader ── */
.vt-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vt-space-4); margin-bottom: var(--vt-space-6); }
.vt-page-header__text { flex: 1 1 320px; min-width: 0; }
.vt-crumbs { margin: 0 0 var(--vt-space-2); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--vt-text-sm); color: var(--vt-text-muted); }
.vt-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.vt-crumbs li + li::before { content: "/"; color: var(--vt-text-subtle); }
.vt-crumbs a { color: var(--vt-text-muted); text-decoration: none; }
.vt-crumbs a:hover { color: var(--vt-link); text-decoration: underline; }
.vt-crumbs [aria-current=page] { color: var(--vt-text); }
.vt-eyebrow { margin: 0 0 var(--vt-space-1); color: var(--vt-primary); font-size: var(--vt-text-xs); font-weight: 600; letter-spacing: .02em; }
.vt-page-header__title { margin: 0; color: var(--vt-text); font-family: var(--vt-font-display); font-size: var(--vt-text-2xl); font-weight: 600; line-height: var(--vt-leading-tight); overflow-wrap: anywhere; }
.vt-page-header__subtitle { margin: var(--vt-space-1) 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-md); max-width: 72ch; }
.vt-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-2); }
.vt-action-row { display: contents; }   /* VtActionButtons' buttons join their parent's row */

/* ── VtToolbar ── */
.vt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-3); margin-bottom: var(--vt-space-4); }
.vt-toolbar__search { flex: 0 1 280px; min-width: 200px; }
.vt-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-2); min-width: 0; }
.vt-toolbar__actions { display: flex; align-items: center; gap: var(--vt-space-2); margin-inline-start: auto; }
.vt-search { position: relative; }
.vt-search .vt-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--vt-text-subtle); font-size: var(--vt-text-lg); pointer-events: none; }
.vt-search input { padding-inline-start: 38px; }

/* ── VtCard ── */
.vt-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow-sm);
  color: var(--vt-text);
}
.vt-card__header { display: flex; align-items: flex-start; gap: var(--vt-space-3); padding: 20px var(--vt-space-6) 0; }
.vt-card__heading { flex: 1 1 auto; min-width: 0; }
.vt-card__title { margin: 0; color: var(--vt-text); font-family: var(--vt-font-body); font-size: var(--vt-text-lg); font-weight: 600; line-height: var(--vt-leading-tight); }
.vt-card__helper { margin: var(--vt-space-1) 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-card__actions { display: flex; align-items: center; gap: var(--vt-space-2); flex: none; }
.vt-card__body { flex: 1 1 auto; padding: var(--vt-space-6); min-width: 0; }
.vt-card__header + .vt-card__body { padding-top: var(--vt-space-4); }
.vt-card--flush > .vt-card__body { padding: 0; }
.vt-card--flush > .vt-card__header + .vt-card__body { padding-top: var(--vt-space-4); }
.vt-card__footer { padding: var(--vt-space-3) var(--vt-space-6); border-top: 1px solid var(--vt-border); color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
@media (max-width: 575.98px) {
  .vt-card__header { padding: var(--vt-space-4) var(--vt-space-4) 0; }
  .vt-card__body { padding: var(--vt-space-4); }
  .vt-card__footer { padding: var(--vt-space-3) var(--vt-space-4); }
}

/* ── VtKpiTile (B-14) ── */
.vt-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--vt-space-4); }
.vt-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-1);
  min-width: 0;
  padding: 20px;
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow-sm);
  color: var(--vt-text);
  text-decoration: none;
  transition: border-color var(--vt-motion-fast) var(--vt-ease), box-shadow var(--vt-motion-fast) var(--vt-ease);
}
a.vt-kpi:hover { border-color: var(--vt-border-strong); box-shadow: var(--vt-shadow); color: var(--vt-text); }
a.vt-kpi:hover .vt-kpi__label { color: var(--vt-link); }
.vt-kpi__label { color: var(--vt-text-muted); font-size: var(--vt-text-sm); font-weight: 500; }
.vt-kpi__value { display: flex; align-items: baseline; gap: 6px; font-family: var(--vt-font-display); font-size: var(--vt-text-3xl); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-kpi__unit { color: var(--vt-text-muted); font-family: var(--vt-font-body); font-size: var(--vt-text-lg); font-weight: 500; }
.vt-kpi__value--empty { color: var(--vt-text-subtle); }
.vt-kpi__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--vt-text-sm); }
.vt-kpi__delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-kpi__delta--good { color: var(--vt-success-text); }
.vt-kpi__delta--bad { color: var(--vt-danger-text); }
.vt-kpi__delta--neutral { color: var(--vt-text-muted); }
.vt-kpi__context { color: var(--vt-text-muted); }
.vt-kpi__spark { margin-top: var(--vt-space-2); }

/* ── VtSparkline ── */
.vt-spark { display: block; width: 100%; height: 32px; overflow: visible; }
.vt-spark__line { fill: none; stroke: var(--vt-tone-solid, var(--vt-primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vt-spark__area { fill: var(--vt-tone-soft, var(--vt-primary-soft)); stroke: none; }
.vt-spark__end { fill: var(--vt-tone-solid, var(--vt-primary)); stroke: var(--vt-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ── VtSkeleton (B-27): shimmer blocks shaped like what will appear ── */
.vt-skeleton { display: block; }
.vt-skel {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--vt-skeleton);
  border-radius: var(--vt-radius-sm);
}
.vt-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--vt-skeleton-shine), transparent);
  animation: vt-shimmer 1.4s var(--vt-ease) infinite;
}
@keyframes vt-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .vt-skel::after { animation: none; display: none; } }
.vt-skel--line { height: 12px; margin: 8px 0; }
.vt-skel--title { height: 20px; width: 40%; margin-bottom: 12px; }
.vt-skel--value { height: 36px; width: 55%; margin: 8px 0; }
.vt-skel--circle { border-radius: 50%; }
.vt-skel-rows { display: flex; flex-direction: column; }
.vt-skel-row { display: flex; align-items: center; gap: var(--vt-space-4); height: 48px; padding: 0 var(--vt-space-4); border-bottom: 1px solid var(--vt-border); }
.vt-skel-row .vt-skel { height: 12px; flex: 1 1 0; }
.vt-skel-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: var(--vt-space-4); }
.vt-skel-chart .vt-skel { flex: 1 1 0; border-radius: 4px 4px 0 0; }

/* ── VtEmptyState (B-27) ── */
.vt-empty { display: flex; flex-direction: column; align-items: center; padding: var(--vt-space-8) var(--vt-space-6); text-align: center; }
.vt-empty--compact { padding: var(--vt-space-6) var(--vt-space-4); }
.vt-empty__icon { display: inline-flex; line-height: 1; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--vt-space-4); border-radius: 50%; background: var(--vt-empty-icon-bg); color: var(--vt-primary); font-size: 32px; }
.vt-empty--compact .vt-empty__icon { width: 48px; height: 48px; font-size: 24px; margin-bottom: var(--vt-space-3); }
.vt-empty__title { margin: 0; color: var(--vt-text); font-family: var(--vt-font-body); font-size: var(--vt-text-lg); font-weight: 600; }
.vt-empty__reason { margin: var(--vt-space-1) 0 0; max-width: 46ch; color: var(--vt-text-muted); font-size: var(--vt-text-md); }
.vt-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vt-space-2); margin-top: var(--vt-space-4); }
.vt-empty__help { margin-top: var(--vt-space-3); font-size: var(--vt-text-sm); }

/* ── VtErrorState (B-27) ── */
.vt-error { display: flex; gap: var(--vt-space-3); align-items: flex-start; padding: var(--vt-space-4); border: 1px solid color-mix(in srgb, var(--vt-danger) 30%, var(--vt-surface)); border-radius: var(--vt-radius); background: var(--vt-danger-soft); color: var(--vt-text); }
.vt-error__icon { flex: none; color: var(--vt-danger-text); font-size: 24px; }
.vt-error__title { margin: 0; color: var(--vt-text); font-size: var(--vt-text-md); font-weight: 600; }
.vt-error__message { margin: 2px 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-error__reference { margin: 4px 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-xs); }
.vt-error__reference code { color: inherit; background: none; padding: 0; font-size: inherit; user-select: all; }
.vt-error__actions { margin-top: var(--vt-space-3); display: flex; gap: var(--vt-space-2); }

/* ── VtTable ── */
.vt-table-wrap { position: relative; min-width: 0; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); }
.vt-table-wrap--plain { border: 0; border-radius: 0; background: transparent; }
.vt-table-scroll { overflow: auto; max-height: var(--vt-table-max-height, none); border-radius: inherit; overscroll-behavior-x: contain; }
.vt-table-scroll:focus-visible { outline: 2px solid var(--vt-primary); outline-offset: -2px; }
.vt-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; color: var(--vt-text); font-size: var(--vt-text-sm); }
.vt-table caption { caption-side: top; }
.vt-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 40px;
  padding: 0 var(--vt-space-4);
  background: var(--vt-surface-muted);
  border-bottom: 1px solid var(--vt-border);
  color: var(--vt-text-muted);
  font-size: var(--vt-text-xs);
  font-weight: 600;
  text-align: start;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}
.vt-table td { height: 48px; padding: var(--vt-space-2) var(--vt-space-4); border-bottom: 1px solid var(--vt-border); background: var(--vt-surface); vertical-align: middle; }
.vt-table tbody tr:last-child td { border-bottom: 0; }
.vt-table tbody tr:hover td { background: var(--vt-surface-muted); }
.vt-table--clickable tbody tr { cursor: pointer; }
.vt-table .vt-col--end { text-align: end; }
.vt-table .vt-col--center { text-align: center; }
.vt-table .vt-col--nowrap { white-space: nowrap; }
.vt-table .vt-col--num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-table .vt-col--sticky-start { position: sticky; inset-inline-start: 0; z-index: 1; }
.vt-table th.vt-col--sticky-start { z-index: 3; }
.vt-table .vt-col--actions { position: sticky; inset-inline-end: 0; z-index: 1; width: 1%; text-align: end; white-space: nowrap; }
.vt-table th.vt-col--actions { z-index: 3; }
.vt-table-wrap[data-scroll~=start] .vt-col--sticky-start { box-shadow: 6px 0 6px -6px var(--vt-scroll-shadow); }
.vt-table-wrap[data-scroll~=end] .vt-col--actions { box-shadow: -6px 0 6px -6px var(--vt-scroll-shadow); }
.vt-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.vt-table__sort:hover { color: var(--vt-text); }
.vt-table__sort-icon { color: var(--vt-text-subtle); font-size: 11px; }
.vt-table th[aria-sort=ascending] .vt-table__sort, .vt-table th[aria-sort=descending] .vt-table__sort { color: var(--vt-text); }
.vt-table th[aria-sort=ascending] .vt-table__sort-icon, .vt-table th[aria-sort=descending] .vt-table__sort-icon { color: var(--vt-primary); }
.vt-table__row-actions { display: inline-flex; align-items: center; gap: var(--vt-space-1); }
.vt-table__empty td { height: auto; padding: 0; }
.vt-table__empty:hover td { background: var(--vt-surface) !important; }
.vt-table__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vt-space-3); padding: var(--vt-space-3) var(--vt-space-4); border-top: 1px solid var(--vt-border); }
/* Below 768 px every row becomes a card: the first column is its title, the others are label/value lines */
@media (max-width: 767.98px) {
  .vt-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vt-table--cards, .vt-table--cards tbody, .vt-table--cards tr, .vt-table--cards td { display: block; width: 100%; }
  .vt-table--cards tbody tr { margin: var(--vt-space-2) 0; padding: var(--vt-space-3) var(--vt-space-4); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface); }
  .vt-table--cards tbody tr:hover td { background: transparent; }
  .vt-table--cards td { display: flex; justify-content: space-between; gap: var(--vt-space-3); height: auto; padding: 4px 0; border: 0; background: transparent; text-align: end; position: static !important; box-shadow: none !important; }
  .vt-table--cards td::before { content: attr(data-label); flex: none; color: var(--vt-text-muted); font-size: var(--vt-text-xs); font-weight: 600; text-align: start; }
  .vt-table--cards td.vt-col--primary { display: block; padding-bottom: var(--vt-space-2); font-size: var(--vt-text-md); font-weight: 600; text-align: start; }
  .vt-table--cards td.vt-col--primary::before, .vt-table--cards td.vt-col--actions::before, .vt-table--cards td[data-label=""]::before { content: none; }
  .vt-table--cards td.vt-col--actions { justify-content: flex-end; width: 100%; padding-top: var(--vt-space-2); }
  .vt-table--cards .vt-table__empty { border: 0; padding: 0; }
  .vt-table-wrap:has(.vt-table--cards) { border: 0; background: transparent; }
  .vt-table-wrap:has(.vt-table--cards) .vt-table__footer { border-top: 0; padding-inline: 0; }
}

/* ── VtPagination ── */
.vt-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-3); font-size: var(--vt-text-sm); }
.vt-pagination__summary { color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.vt-pagination__pages { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vt-pagination__page { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.vt-pagination__page:hover:not(:disabled) { background: var(--vt-surface-muted); }
.vt-pagination__page[aria-current=page] { border-color: var(--vt-primary); background: var(--vt-primary-soft); color: var(--vt-primary-hover); font-weight: 600; }
.vt-pagination__page:disabled { color: var(--vt-text-subtle); cursor: default; }
.vt-pagination__gap { padding: 0 4px; color: var(--vt-text-subtle); }

/* ── VtMenu (the "More actions" kebab): a popover, so tables and cards never clip it ── */
.vt-menu-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text-muted); font-size: 20px; cursor: pointer; }
.vt-menu-button:hover, .vt-menu-button[aria-expanded=true] { background: var(--vt-surface-muted); color: var(--vt-text); }
.vt-menu-button--labelled { width: auto; gap: 6px; padding: 0 12px; border-color: var(--vt-border-strong); color: var(--vt-text); font: inherit; font-size: var(--vt-text-md); }
.vt-menu {
  margin: 0;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--vt-space-1);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  background: var(--vt-surface);
  box-shadow: var(--vt-shadow-lg);
  color: var(--vt-text);
  inset: auto;   /* placed by vt-ui.js next to its button */
  position: fixed;
}
.vt-menu:not(:popover-open) { display: none; }
.vt-menu__item { display: flex; align-items: center; gap: var(--vt-space-2); width: 100%; padding: 8px 12px; border: 0; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text); font: inherit; font-size: var(--vt-text-md); text-align: start; text-decoration: none; cursor: pointer; }
.vt-menu__item:hover, .vt-menu__item:focus-visible { background: var(--vt-surface-muted); color: var(--vt-text); outline: none; }
.vt-menu__item--danger, .vt-menu__item--danger:hover { color: var(--vt-danger-text); }
.vt-menu__item[aria-disabled=true] { color: var(--vt-text-subtle); cursor: not-allowed; }
.vt-menu__reason { display: block; color: var(--vt-text-subtle); font-size: var(--vt-text-xs); }
.vt-menu__separator { height: 1px; margin: var(--vt-space-1) 0; background: var(--vt-border); }

/* ── Action buttons in rows and headers ── */
.vt-action-button { display: inline-flex; align-items: center; gap: 6px; }
.vt-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text-muted); font-size: var(--vt-text-lg); cursor: pointer; text-decoration: none; }
.vt-icon-button:hover { background: var(--vt-surface-muted); color: var(--vt-text); }
.vt-icon-button--danger:hover { color: var(--vt-danger-text); }
.vt-icon-button:disabled, .vt-icon-button[aria-disabled=true] { color: var(--vt-text-subtle); background: transparent; cursor: not-allowed; }

/* ── VtField ── */
.vt-field { margin-bottom: var(--vt-space-4); }
.vt-field__label { display: block; margin-bottom: 6px; color: var(--vt-text); font-size: var(--vt-text-md); font-weight: 500; }
.vt-field__required { color: var(--vt-danger-text); margin-inline-start: 2px; }
.vt-field__optional { color: var(--vt-text-muted); font-weight: 400; margin-inline-start: 4px; }
.vt-field__helper { margin: 6px 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-field__error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--vt-danger-text); font-size: var(--vt-text-sm); }
.vt-field__error .vt-icon { margin-top: 2px; font-size: 16px; }
/* One input style (B-06): outlined, 40 px high */
.vt-input, .vt-field .form-control, .vt-field .form-select {
  min-height: 40px;
  padding-block: 8px;
  border: 1px solid var(--vt-border-strong);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-surface);
  color: var(--vt-text);
}
.vt-input:focus, .vt-field .form-control:focus, .vt-field .form-select:focus { border-color: var(--vt-primary); box-shadow: var(--vt-focus-ring); }
.vt-input.is-invalid, .vt-field .is-invalid, .vt-field--invalid .rz-dropdown { border-color: var(--vt-danger) !important; }
.vt-input:disabled, .vt-input.disabled { background-color: var(--vt-surface-muted); color: var(--vt-text-muted); }

/* ── VtDateRange ── */
.vt-date-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vt-space-3); }
.vt-date-range__label { display: block; margin-bottom: 4px; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-date-range__summary { grid-column: 1 / -1; margin: 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
@media (max-width: 479.98px) { .vt-date-range { grid-template-columns: 1fr; } }

/* ── VtSelect / VtPeoplePicker (Radzen DropDown, themed by vt-radzen.css) ── */
.vt-select { width: 100%; min-height: 40px; }
.vt-person-option { display: flex; align-items: center; gap: var(--vt-space-2); min-width: 0; }
.vt-person-option__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vt-person-option__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-person-option__meta { overflow: hidden; color: var(--vt-text-muted); font-size: var(--vt-text-xs); text-overflow: ellipsis; white-space: nowrap; }

/* ── VtDialog / VtDrawer: Radzen dialogs with one layout (sticky footer: Cancel left, primary right) ── */
/* The side panel is a column: title, then the content filling the rest, so the footer sits at the bottom of the screen */
.vt-drawer.rz-dialog-side { display: flex; flex-direction: column; overflow: hidden; }
.vt-drawer .rz-dialog-side-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
.vt-dialog .rz-dialog-content, .vt-drawer .rz-dialog-side-content { display: flex; flex-direction: column; padding: 0; }
.vt-dialog .rz-dialog-titlebar, .vt-drawer .rz-dialog-side-titlebar { padding-inline: var(--vt-space-6); }
.vt-dialog-layout { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.vt-dialog-layout__eyebrow { margin: 0; padding: var(--vt-space-2) var(--vt-space-6) 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-dialog-layout__body { flex: 1 1 auto; min-height: 0; padding: var(--vt-space-4) var(--vt-space-6) var(--vt-space-6); overflow: auto; }
.vt-dialog-layout__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  padding: var(--vt-space-3) var(--vt-space-6);
  border-top: 1px solid var(--vt-border);
  background: var(--vt-surface);
}
.vt-dialog-layout__footer-start { margin-inline-end: auto; display: flex; gap: var(--vt-space-2); }
.vt-dialog-layout__error { margin: 0 var(--vt-space-6) var(--vt-space-3); }
@media (max-width: 575.98px) {
  .vt-dialog-layout__body { padding: var(--vt-space-4); }
  .vt-dialog-layout__footer { padding: var(--vt-space-3) var(--vt-space-4); }
}
/* The assistant's round button (VtFab in the brief) steps aside while a dialog or side panel is open, so it never
   covers the dialog's primary button. */
body:has(.rz-dialog-side.rz-open, .rz-dialog-wrapper .rz-dialog) .va-launcher { display: none !important; }
.vt-confirm__message { margin: 0; color: var(--vt-text); font-size: var(--vt-text-md); }
.vt-confirm__details { margin: var(--vt-space-2) 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }

/* ── VtToast (B-26): one stack, bottom right, above the assistant's button ── */
.vt-toasts {
  position: fixed;
  inset-inline-end: var(--vt-space-6);
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: var(--vt-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--vt-space-2);
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.vt-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
  width: 100%;
  padding: var(--vt-space-3) var(--vt-space-3) var(--vt-space-3) var(--vt-space-4);
  border: 1px solid var(--vt-border);
  border-inline-start: 4px solid var(--vt-tone-solid, var(--vt-primary));
  border-radius: var(--vt-radius);
  background: var(--vt-surface);
  box-shadow: var(--vt-shadow-lg);
  color: var(--vt-text);
  pointer-events: auto;
  animation: vt-toast-in var(--vt-motion) var(--vt-ease);
}
@keyframes vt-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .vt-toast { animation: none; } }
.vt-toast__icon { flex: none; margin-top: 1px; color: var(--vt-tone-text, var(--vt-primary)); font-size: 20px; }
.vt-toast__body { flex: 1 1 auto; min-width: 0; }
.vt-toast__title { margin: 0; font-size: var(--vt-text-md); font-weight: 600; }
.vt-toast__message { margin: 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); overflow-wrap: anywhere; }
.vt-toast__title + .vt-toast__message { margin-top: 2px; }
.vt-toast__title:only-child, .vt-toast__message:only-child { color: var(--vt-text); }
.vt-toast__action { margin-top: var(--vt-space-2); padding: 0; border: 0; background: none; color: var(--vt-link); font: inherit; font-size: var(--vt-text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.vt-toast__action:hover { text-decoration: underline; }
.vt-toast__close { flex: none; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -2px -2px 0 0; padding: 0; border: 0; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text-muted); cursor: pointer; }
.vt-toast__close:hover { background: var(--vt-surface-muted); color: var(--vt-text); }
.vt-toast__spinner { width: 18px; height: 18px; border-width: 2px; color: var(--vt-primary); }
@media (max-width: 575.98px) {
  .vt-toasts { inset-inline: var(--vt-space-4); width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ── VtAvatar (B-12) ── */
.vt-avatar {
  --vt-avatar-size: 40px;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--vt-avatar-size);
  height: var(--vt-avatar-size);
  border-radius: 50%;
  background: var(--vt-avatar-bg, var(--vt-avatar-5-bg));
  color: var(--vt-avatar-fg, var(--vt-avatar-5-fg));
  font-family: var(--vt-font-body);
  font-size: calc(var(--vt-avatar-size) * .4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  user-select: none;
  vertical-align: middle;
}
.vt-avatar--24 { --vt-avatar-size: 24px; font-size: 10px; }
.vt-avatar--32 { --vt-avatar-size: 32px; font-size: 12px; }
.vt-avatar--40 { --vt-avatar-size: 40px; }
.vt-avatar--56 { --vt-avatar-size: 56px; }
.vt-avatar--96 { --vt-avatar-size: 96px; }
.vt-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--vt-surface-muted); }
.vt-avatar__presence { position: absolute; inset-inline-end: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border: 2px solid var(--vt-surface); border-radius: 50%; background: var(--vt-neutral); }
.vt-avatar__presence--online { background: var(--vt-success); }
.vt-avatar__presence--away { background: var(--vt-warning); }
.vt-avatar__presence--offline { background: var(--vt-surface); box-shadow: inset 0 0 0 2px var(--vt-neutral); }
.vt-avatar--c1 { --vt-avatar-bg: var(--vt-avatar-1-bg); --vt-avatar-fg: var(--vt-avatar-1-fg); }
.vt-avatar--c2 { --vt-avatar-bg: var(--vt-avatar-2-bg); --vt-avatar-fg: var(--vt-avatar-2-fg); }
.vt-avatar--c3 { --vt-avatar-bg: var(--vt-avatar-3-bg); --vt-avatar-fg: var(--vt-avatar-3-fg); }
.vt-avatar--c4 { --vt-avatar-bg: var(--vt-avatar-4-bg); --vt-avatar-fg: var(--vt-avatar-4-fg); }
.vt-avatar--c5 { --vt-avatar-bg: var(--vt-avatar-5-bg); --vt-avatar-fg: var(--vt-avatar-5-fg); }
.vt-avatar--c6 { --vt-avatar-bg: var(--vt-avatar-6-bg); --vt-avatar-fg: var(--vt-avatar-6-fg); }
.vt-avatar--c7 { --vt-avatar-bg: var(--vt-avatar-7-bg); --vt-avatar-fg: var(--vt-avatar-7-fg); }
.vt-avatar--c8 { --vt-avatar-bg: var(--vt-avatar-8-bg); --vt-avatar-fg: var(--vt-avatar-8-fg); }
.vt-avatar-stack { display: inline-flex; align-items: center; padding-inline-start: 6px; }
.vt-avatar-stack > .vt-avatar { margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--vt-surface); }
.vt-avatar-stack__more { --vt-avatar-bg: var(--vt-surface-muted); --vt-avatar-fg: var(--vt-text-muted); }

/* ── VtSegmented (B-29): filter chips ── */
.vt-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--vt-space-1); padding: 0; margin: 0; border: 0; }
.vt-segmented__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--vt-border-strong);
  border-radius: var(--vt-radius-pill);
  background: var(--vt-surface);
  color: var(--vt-text);
  font: inherit;
  font-size: var(--vt-text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.vt-segmented__option:hover { background: var(--vt-surface-muted); }
.vt-segmented__option[aria-checked=true] { border-color: var(--vt-primary); background: var(--vt-primary-soft); color: var(--vt-primary-hover); font-weight: 600; }
.vt-segmented__option:disabled { color: var(--vt-text-subtle); cursor: not-allowed; }
.vt-segmented__count { color: var(--vt-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.vt-segmented__option[aria-checked=true] .vt-segmented__count { color: inherit; }

/* ── VtTabs (B-29) ── */
.vt-tabs__list { display: flex; gap: var(--vt-space-6); margin: 0 0 var(--vt-space-4); padding: 0; border-bottom: 1px solid var(--vt-border); overflow-x: auto; scrollbar-width: thin; }
.vt-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; color: var(--vt-text-muted); font: inherit; font-size: var(--vt-text-md); font-weight: 500; white-space: nowrap; cursor: pointer; }
.vt-tabs__tab:hover { color: var(--vt-text); }
.vt-tabs__tab[aria-selected=true] { color: var(--vt-primary); font-weight: 600; }
.vt-tabs__tab[aria-selected=true]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--vt-primary); }
.vt-tabs__panel:focus-visible { outline: 2px solid var(--vt-primary); outline-offset: 4px; border-radius: var(--vt-radius-sm); }
.vt-tabs--vertical { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: var(--vt-space-6); }
.vt-tabs--vertical .vt-tabs__list { flex-direction: column; gap: 2px; margin: 0; border: 0; overflow: visible; }
.vt-tabs--vertical .vt-tabs__tab { padding: 8px 12px; border-radius: var(--vt-radius-sm); text-align: start; }
.vt-tabs--vertical .vt-tabs__tab[aria-selected=true] { background: var(--vt-primary-soft); }
.vt-tabs--vertical .vt-tabs__tab[aria-selected=true]::after { content: none; }
@media (max-width: 767.98px) {
  .vt-tabs--vertical { grid-template-columns: 1fr; gap: var(--vt-space-4); }
  .vt-tabs--vertical .vt-tabs__list { flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--vt-border); }
}

/* ── VtHero (B-30): home pages only; a brand tint or brand solid, no photos ── */
.vt-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-6); padding: var(--vt-space-6) var(--vt-space-8); border-radius: var(--vt-radius-lg); background: var(--vt-surface-tint); color: var(--vt-text); margin-bottom: var(--vt-space-6); }
.vt-hero--solid { background: var(--vt-hero-solid); color: var(--vt-on-hero-solid); }
.vt-hero__text { flex: 1 1 360px; min-width: 0; }
.vt-hero__eyebrow { margin: 0 0 var(--vt-space-1); color: var(--vt-primary); font-size: var(--vt-text-sm); font-weight: 600; }
.vt-hero--solid .vt-hero__eyebrow { color: var(--vt-brand-200); }
.vt-hero__title { margin: 0; font-family: var(--vt-font-display); font-size: var(--vt-text-2xl); font-weight: 600; line-height: var(--vt-leading-tight); color: inherit; }
.vt-hero__subtitle { margin: var(--vt-space-2) 0 0; max-width: 64ch; color: var(--vt-text-muted); font-size: var(--vt-text-md); }
.vt-hero--solid .vt-hero__subtitle { color: var(--vt-brand-100); }
.vt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--vt-space-2); margin-top: var(--vt-space-4); }
.vt-hero__aside { flex: 0 1 auto; min-width: 0; }
@media (max-width: 575.98px) { .vt-hero { padding: var(--vt-space-4); } }

/* ── VtUpload (B-42) ── */
.vt-upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--vt-space-2); padding: var(--vt-space-6); border: 1px dashed var(--vt-border-strong); border-radius: var(--vt-radius); background: var(--vt-surface-muted); color: var(--vt-text); text-align: center; transition: border-color var(--vt-motion-fast), background var(--vt-motion-fast); }
.vt-upload:hover, .vt-upload--dragging { border-color: var(--vt-primary); background: var(--vt-primary-soft); }
.vt-upload:focus-within { border-color: var(--vt-primary); box-shadow: var(--vt-focus-ring); }
.vt-upload--disabled { opacity: .6; }
.vt-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vt-upload--disabled .vt-upload__input { cursor: not-allowed; }
.vt-upload__icon { color: var(--vt-primary); font-size: 32px; }
.vt-upload__title { margin: 0; font-weight: 600; }
.vt-upload__title u { color: var(--vt-link); text-decoration-thickness: 1px; }
.vt-upload__limits { margin: 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-upload__files { width: 100%; margin: var(--vt-space-3) 0 0; padding: 0; list-style: none; text-align: start; }
.vt-upload__file { display: flex; align-items: center; gap: var(--vt-space-2); padding: 6px 0; font-size: var(--vt-text-sm); }
.vt-upload__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-upload__file-size { color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.vt-upload__progress { width: 100%; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--vt-border); overflow: hidden; }
.vt-upload__progress > span { display: block; height: 100%; background: var(--vt-primary); transition: width var(--vt-motion); }
.vt-upload__problems { width: 100%; margin: var(--vt-space-2) 0 0; padding: 0; list-style: none; color: var(--vt-danger-text); font-size: var(--vt-text-sm); text-align: start; }

/* ── VtChart (B-09): ApexCharts on the tokens; series colours from --vt-chart-* (validated in light and dark) ── */
:root, [data-bs-theme] {
  --vt-chart-1: var(--vt-cat-1); --vt-chart-2: var(--vt-cat-2); --vt-chart-3: var(--vt-cat-3);
  --vt-chart-4: var(--vt-cat-4); --vt-chart-5: var(--vt-cat-5); --vt-chart-6: var(--vt-cat-6);
  /* Palette="RiskLevels": low, moderate, high, critical, not assessed (vt-tokens.css, validated as an ordinal ramp) */
  --vt-chart-level-1: var(--vt-level-1); --vt-chart-level-2: var(--vt-level-2); --vt-chart-level-3: var(--vt-level-3);
  --vt-chart-level-4: var(--vt-level-4); --vt-chart-level-5: var(--vt-level-none);
}
.vt-chart { position: relative; min-width: 0; }
.vt-chart__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--vt-space-2); margin-bottom: var(--vt-space-2); }
.vt-chart__title { margin: 0; font-size: var(--vt-text-md); font-weight: 600; }
.vt-chart__description { margin: 2px 0 0; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-chart__toggle { padding: 0; border: 0; background: none; color: var(--vt-link); font: inherit; font-size: var(--vt-text-sm); cursor: pointer; }
.vt-chart__toggle:hover { text-decoration: underline; }
.vt-chart__canvas { min-height: var(--vt-chart-height, 260px); }
.vt-chart__legend { display: flex; flex-wrap: wrap; gap: var(--vt-space-1) var(--vt-space-4); margin: var(--vt-space-2) 0 0; padding: 0; list-style: none; color: var(--vt-text-muted); font-size: var(--vt-text-sm); }
.vt-chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.vt-chart__swatch { width: 10px; height: 10px; border-radius: 3px; }
.vt-chart__swatch--1 { background: var(--vt-chart-1); } .vt-chart__swatch--2 { background: var(--vt-chart-2); } .vt-chart__swatch--3 { background: var(--vt-chart-3); }
.vt-chart__swatch--4 { background: var(--vt-chart-4); } .vt-chart__swatch--5 { background: var(--vt-chart-5); } .vt-chart__swatch--6 { background: var(--vt-chart-6); }
.vt-chart__swatch--level-1 { background: var(--vt-chart-level-1); } .vt-chart__swatch--level-2 { background: var(--vt-chart-level-2); } .vt-chart__swatch--level-3 { background: var(--vt-chart-level-3); }
.vt-chart__swatch--level-4 { background: var(--vt-chart-level-4); } .vt-chart__swatch--level-5 { background: var(--vt-chart-level-5); }
.vt-chart .apexcharts-tooltip { border: 1px solid var(--vt-border) !important; background: var(--vt-surface) !important; color: var(--vt-text) !important; box-shadow: var(--vt-shadow) !important; }
.vt-chart .apexcharts-tooltip-title { border-bottom-color: var(--vt-border) !important; background: var(--vt-surface-muted) !important; }
.vt-chart .apexcharts-xaxistooltip { display: none; }

/* ── VtPartBoundary / VtAsync: nothing of their own; they draw VtSkeleton, VtEmptyState and VtErrorState ── */

/* ── The /dev/ui gallery ── */
.vt-gallery__themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: var(--vt-space-6); }
.vt-gallery__theme { min-width: 0; padding: var(--vt-space-6); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-lg); background: var(--vt-bg); color: var(--vt-text); }
.vt-gallery__theme-name { margin: 0 0 var(--vt-space-4); color: var(--vt-text-muted); font-size: var(--vt-text-sm); font-weight: 600; }
.vt-gallery__section + .vt-gallery__section { margin-top: var(--vt-space-8); }
.vt-gallery__section > h2 { margin: 0 0 var(--vt-space-3); font-size: var(--vt-text-lg); color: var(--vt-text); }
.vt-gallery__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-2); }
.vt-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vt-space-4); }
.vt-gallery__note { margin: 0 0 var(--vt-space-3); color: var(--vt-text-muted); font-size: var(--vt-text-sm); }