/*! AUTO-GENERATED — DO NOT EDIT HERE.
 * Vendored from civicos/packages/ui/src/primitives.css (@civicos/ui v0.3.26 @505457f) on 2026-09-04.
 * Edit the source in the civicos repo and run `pnpm --filter @civicos/ui sync`.
 * App-specific styles belong in your own namespaced CSS, never in this file. */
/**
 * CivicOS primitives — Layer 1, the cross-product component set.
 *
 * Framework-neutral `.cvc-*` classes on plain HTML → usable from React, Rails ERB,
 * Jinja or vanilla JS. Consumes Layer 0 (tokens.css) only. This is the file that
 * gets vendored into the CMS and council apps alongside tokens.css.
 *
 * What lives here vs in an app: see README.md. Rule of thumb — if two products want
 * it to look the same, it's here; if it's specific to how one product works (the
 * portal's launcher tiles, the council meeting timeline), it stays in that app.
 */

/* ---- Skip link (WCAG 2.4.1) — first focusable control on pages with chrome ---- */
.cvc-skip {
  position: absolute;
  left: var(--cvc-space-3);
  top: var(--cvc-space-3);
  z-index: 4000;
  padding: 8px 14px;
  background: var(--cvc-color-focus);
  color: var(--cvc-color-focus-ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--cvc-radius-sm);
  transform: translateY(calc(-100% - 24px));
}
.cvc-skip:focus {
  transform: none;
}

/* Screen-reader only. Used by header search and other labelled controls. */
.cvc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Top bar (the standard black brand bar; keeps the logo in one position
   across products). Apps fill their own brand + right-side content. ----
   Secondary labels (council name, Tools, account) share one type spec:
   --cvc-text-sm / 500 / #f2f3f4 / line-height 1.2. Do not restyle that from
   an app — the portal used 0.94rem/600 and the CMS used a 0.875rem name
   override, which is how the two bars drifted. Smoothing is set here so a
   product's body line-height / font-smoothing cannot leak into the bar. */
.cvc-topbar {
  height: 56px; display: flex; align-items: stretch; justify-content: space-between;
  padding: 0 20px; background: var(--cvc-color-text); color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.cvc-topbar__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
/* Buttons keep their intrinsic height. Stretching them fills the 56px bar and
   the 2px GOV.UK bottom edge overflows. Menus still stretch via .cvc-usermenu. */
.cvc-topbar > .cvc-btn { align-self: center; }
.cvc-topbar__mark { width: 28px; height: 28px; display: block; flex: none; }
.cvc-topbar__name { font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; color: inherit; }

/* Brand + context on the left, hairline between them. Render .cvc-bar__context
   only when it has content (portal); CMS keeps the wrapper always and hides the
   hairline when the breadcrumb is empty. */
.cvc-bar__left {
  display: flex; align-items: stretch; align-self: stretch; gap: 14px; min-width: 0;
}
.cvc-bar__context {
  display: flex; align-items: stretch; gap: 14px; min-width: 0;
  font-size: var(--cvc-text-sm); font-weight: 500; line-height: 1.2;
  color: #f2f3f4; letter-spacing: normal;
}
.cvc-bar__context:not(:empty)::before {
  content: ""; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.18);
  align-self: center; flex: none;
}
.cvc-context-label {
  display: flex; align-items: center; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem;
}

/* Search + account on the right of the staff top bar. */
.cvc-account {
  display: flex; align-items: stretch; align-self: stretch;
  gap: 0.5rem; flex-shrink: 1; min-width: 0; margin-left: auto;
}

/* ---- Bar menu + dropdown (account, Tools, More — any product) ----
   Shared contract: the trigger is .cvc-userbtn inside .cvc-usermenu; the panel is
   .cvc-dropdown; it opens ONLY when the panel has .is-open (click). Hover-to-open
   is portal chrome (styles.css), not this file — encoding both here is how
   products drifted (CMS and Committees had to disable hover locally).
   Stretch the topbar (align-items: stretch above) so top: 100% is the bar's
   bottom edge. Don't add vertical padding on .cvc-topbar or the panel sits high.
   .cvc-usermenu stretches itself (align-self) so a centred flex parent cannot
   shrink it to the button's content box — that was how menus sat too high.
   Items: .cvc-dropdown__item. Hang left with .cvc-dropdown--start (More).
   Trigger type size is --cvc-text-sm, same as dropdown items — do not restyle
   the trigger with app nav-link classes or the browser's button font wins. */
.cvc-usermenu { position: relative; display: flex; align-items: stretch; align-self: stretch; }
.cvc-userbtn {
  display: flex; align-items: center; gap: 9px; background: transparent; border: 0;
  cursor: pointer; font: inherit; font-size: var(--cvc-text-sm); font-weight: 500;
  line-height: 1.2; letter-spacing: normal; color: #f2f3f4;
  padding: 0 14px; transition: background 0.12s, color 0.12s;
}
.cvc-usermenu:hover .cvc-userbtn, .cvc-usermenu:focus-within .cvc-userbtn { background: rgba(255,255,255,0.08); color: #fff; }
.cvc-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 1.5px solid #fff; background: transparent; display: grid; place-items: center; color: #fff; }
.cvc-avatar svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cvc-caret { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.cvc-dropdown {
  position: absolute; right: 0; top: 100%; min-width: 12rem;
  background: #15181c; border: 1px solid rgba(255,255,255,0.1); border-top: 0; border-radius: 0 0 3px 3px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.45); padding: 4px 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s; z-index: 20;
}
.cvc-dropdown--start { left: 0; right: auto; }
.cvc-dropdown.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.cvc-dropdown__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--cvc-text-sm); font-weight: 500;
  color: #f2f3f4; text-decoration: none; padding: 9px 18px; transition: background 0.12s, color 0.12s;
}
.cvc-dropdown__item:hover, .cvc-dropdown__item:focus-visible { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.cvc-dropdown form { margin: 0; }
.cvc-dropdown__item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Council switcher (top-bar context) ----
   Same click-to-open contract as .cvc-dropdown (.is-open). Destinations are
   real <a href> rows. React CouncilSwitcher is the reference markup; non-JS
   products render this HTML themselves. Hover-to-open stays portal chrome
   for the account menu only — not here. */
.cvc-switcher {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  max-width: 16rem;
}
.cvc-switcher__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 16rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--cvc-text-sm);
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  padding: 0 12px 0 0;
  transition: background 0.12s, color 0.12s;
}
.cvc-switcher:hover .cvc-switcher__btn,
.cvc-switcher:focus-within .cvc-switcher__btn {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cvc-switcher__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvc-switcher__caret {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.cvc-switcher__menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 13rem;
  max-height: 340px;
  overflow: auto;
  background: #15181c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
  padding: 4px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 20;
}
.cvc-switcher__menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.cvc-switcher__menu a {
  display: block;
  padding: 9px 16px;
  color: #f2f3f4;
  font-size: var(--cvc-text-sm);
  font-weight: 500;
  text-decoration: none;
}
.cvc-switcher__menu a:hover,
.cvc-switcher__menu a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cvc-switcher__menu a.is-active {
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--cvc-color-brand);
}

/* ---- Signed-out landing (portal + Committees; Keycloak theme mirrors the card) ---- */
.cvc-landing {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--cvc-color-bg);
  color: var(--cvc-color-text);
  font-family: var(--cvc-font-sans);
  padding: 24px;
  border-top: 3px solid var(--cvc-color-brand);
}
.cvc-signin {
  background: var(--cvc-color-surface);
  border: 1px solid #15181c;
  box-shadow: var(--cvc-shadow);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
}
.cvc-signin__head {
  background: #15181c;
  color: #fff;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cvc-signin__wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.cvc-signin__body {
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cvc-signin__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.cvc-signin__lead {
  color: var(--cvc-color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.cvc-signin__foot {
  color: var(--cvc-color-text-muted);
  font-size: 0.82rem;
  margin: 6px 0 0;
}

/* ---- Buttons (GOV.UK-style solid bottom edge, in indigo) ---- */
.cvc-btn {
  font: inherit; font-weight: 600; font-size: 0.98rem; line-height: 1.1; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; border-radius: 3px; padding: 11px 18px;
  background: var(--cvc-color-brand); color: var(--cvc-color-brand-contrast);
  text-decoration: none;
  box-shadow: 0 2px 0 #1a1170;
  transition: background 0.14s ease, box-shadow 0.1s ease, transform 0.06s ease, color 0.14s ease, border-color 0.14s ease;
}
/* Icons in buttons — sized to the text, line-style by default (matches the system's icons). */
.cvc-btn svg { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cvc-btn:hover { background: #2f25c4; }
.cvc-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.cvc-btn:disabled { opacity: 0.42; cursor: not-allowed; }
/* Persist control with nothing to write (React `SaveButton`). Not a faded
   primary — quiet, readable, not a target. */
.cvc-btn.cvc-btn--idle,
.cvc-btn.cvc-btn--idle:hover,
.cvc-btn.cvc-btn--idle:active,
.cvc-btn.cvc-btn--idle:disabled {
  opacity: 1; cursor: default; transform: none;
  background: var(--cvc-color-muted); color: var(--cvc-color-text-muted);
  box-shadow: none;
}
.cvc-btn--secondary { background: #e8eaf1; color: var(--cvc-color-text); box-shadow: 0 2px 0 #b2b8c6; }
.cvc-btn--secondary:hover { background: #dbdfea; }
/* Primary on a DARK surface (top bars, CTA bands): white button, ink text, grey edge. */
.cvc-btn--inverse { background: #ffffff; color: var(--cvc-color-text); box-shadow: 0 2px 0 #c2c7d0; }
.cvc-btn--inverse:hover { background: #eef0f6; }
.cvc-btn--ghost { background: transparent; color: var(--cvc-color-brand); box-shadow: none; padding-left: 6px; padding-right: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.cvc-btn--ghost:hover { color: var(--cvc-color-brand-dark); background: transparent; }
.cvc-btn--danger { background: var(--cvc-color-danger); color: #fff; box-shadow: 0 2px 0 #6e0d07; }
.cvc-btn--danger:hover { background: #9d1109; }
.cvc-btn--sm { padding: 7px 12px; font-size: 0.86rem; }
.cvc-btn--block { display: block; width: 100%; text-align: center; padding: 14px 22px; font-size: 1.02rem; }
.cvc-btn:focus-visible { outline: 3px solid transparent; background: var(--cvc-color-focus); color: var(--cvc-color-focus-ink); box-shadow: 0 2px 0 var(--cvc-color-focus-ink); text-decoration: none; }

/* ---- Panels / cards ---- */
.cvc-panel { background: var(--cvc-color-surface); border: 1px solid var(--cvc-color-border); padding: 20px 22px; }
.cvc-panel h2, .cvc-panel h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.cvc-panel p { margin: 0; color: var(--cvc-color-text-muted); font-size: 0.94rem; line-height: 1.55; }

/* ---- Tag chips (metadata: roles, permissions, categories — NOT status) ----
   Deliberately different from status pills: mono, bordered, squared, no dot. */
.cvc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cvc-font-mono); font-size: 0.76rem; font-weight: 500;
  padding: 2px 8px; border-radius: var(--cvc-radius-sm);
  background: var(--cvc-color-muted); color: var(--cvc-color-text-muted);
  border: 1px solid var(--cvc-color-border-strong);
}
.cvc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Status labels (live state of a thing) ----
   Typed labels use colour plus a shape so status is not colour-only.
   The visible text is the product's wording (Published, Ended, Due).
   Types: success, warning, danger, brand, cancelled, neutral.
   Products map their own status keys onto those types — do not add
   domain classes here. Untyped / .cvc-pill--neutral has no icon. */
.cvc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--cvc-color-muted); color: var(--cvc-color-text);
}
.cvc-pill--success,
.cvc-pill--warning,
.cvc-pill--danger,
.cvc-pill--brand,
.cvc-pill--cancelled {
  padding-left: 8px;
}
.cvc-pill--success::before,
.cvc-pill--warning::before,
.cvc-pill--danger::before,
.cvc-pill--brand::before,
.cvc-pill--cancelled::before {
  content: "";
  width: 0.75em; height: 0.75em; flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.cvc-pill--success {
  background: var(--cvc-color-success-soft); color: var(--cvc-color-success);
  --cvc-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.2 6.2 4.8 8.8 9.8 3.2'/%3E%3C/svg%3E");
}
.cvc-pill--success::before { -webkit-mask-image: var(--cvc-pill-icon); mask-image: var(--cvc-pill-icon); }
.cvc-pill--warning {
  background: var(--cvc-color-warning-soft); color: var(--cvc-color-warning);
  --cvc-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round' d='M6 1.5 11 10.5H1L6 1.5z'/%3E%3Cpath fill='black' d='M5.55 4.55h.9v2.7h-.9zm0 3.4h.9V9.6h-.9z'/%3E%3C/svg%3E");
}
.cvc-pill--warning::before { -webkit-mask-image: var(--cvc-pill-icon); mask-image: var(--cvc-pill-icon); }
.cvc-pill--danger {
  background: var(--cvc-color-danger-soft); color: var(--cvc-color-danger);
  --cvc-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M3 3l6 6M9 3L3 9'/%3E%3C/svg%3E");
}
.cvc-pill--danger::before { -webkit-mask-image: var(--cvc-pill-icon); mask-image: var(--cvc-pill-icon); }
.cvc-pill--brand {
  background: var(--cvc-color-brand-soft); color: var(--cvc-color-brand-dark);
  --cvc-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.1' fill='black'/%3E%3C/svg%3E");
}
.cvc-pill--brand::before { -webkit-mask-image: var(--cvc-pill-icon); mask-image: var(--cvc-pill-icon); }
.cvc-pill--cancelled {
  background: var(--cvc-color-muted); color: var(--cvc-color-text-muted);
  --cvc-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}
.cvc-pill--neutral {
  /* Same as an untyped .cvc-pill: no icon, no status colour. */
}
.cvc-pill--cancelled::before { -webkit-mask-image: var(--cvc-pill-icon); mask-image: var(--cvc-pill-icon); }

/* Filter / view toolbars above a table: sit on the trailing edge. */
.cvc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.5rem 0.75rem;
}

/* ---- Form controls ----
   Editable fields always sit on --cvc-color-surface (white), never page ground
   (--cvc-color-bg / muted indigo). Soft brand tint is for focus rings and
   notices — not field fills. Dense UIs (modals, toolbars) use --sm. */
.cvc-field { display: grid; gap: 6px; }
.cvc-label { font-size: 0.86rem; font-weight: 600; color: var(--cvc-color-text); }
.cvc-input, .cvc-select, .cvc-textarea {
  font: inherit; font-size: 0.95rem; color: var(--cvc-color-text);
  background: var(--cvc-color-surface); border: 1px solid var(--cvc-color-border-strong);
  border-radius: var(--cvc-radius-sm); padding: 9px 12px; width: 100%;
  transition: border-color 0.14s, box-shadow 0.14s;
}
/* Dates, times, and numbers hug their value. Text and selects stay full width. */
.cvc-field :is(.cvc-input, input)[type="date"],
.cvc-field :is(.cvc-input, input)[type="month"],
.cvc-field :is(.cvc-input, input)[type="week"],
.cvc-field :is(.cvc-input, input)[type="time"],
.cvc-field :is(.cvc-input, input)[type="datetime-local"] {
  width: auto; max-width: 100%;
}
.cvc-field :is(.cvc-input, input)[type="number"] {
  width: 8rem; max-width: 100%;
}
.cvc-input:focus, .cvc-select:focus, .cvc-textarea:focus { outline: none; border-color: var(--cvc-color-brand); box-shadow: 0 0 0 3px var(--cvc-color-brand-soft); }
.cvc-input:disabled, .cvc-select:disabled, .cvc-textarea:disabled {
  background: var(--cvc-color-muted); color: var(--cvc-color-text-muted); cursor: not-allowed;
}
.cvc-input--sm, .cvc-select--sm, .cvc-textarea--sm {
  font-size: 0.85rem; padding: 5px 8px;
}
/* Toolbar select matching .cvc-btn--secondary / .cvc-btn--sm (filters next to
   action buttons). Not a full-width form field — width hugs the selected option. */
.cvc-select--btn {
  width: auto;
  max-width: 100%;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.1;
  padding: 7px 28px 7px 12px;
  color: var(--cvc-color-text);
  background-color: #e8eaf1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2315181C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: 0 2px 0 #b2b8c6;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.14s ease, box-shadow 0.1s ease, transform 0.06s ease, color 0.14s ease;
}
.cvc-select--btn:hover { background-color: #dbdfea; }
.cvc-select--btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.cvc-select--btn:focus { outline: none; border-color: transparent; box-shadow: 0 2px 0 #b2b8c6; }
.cvc-select--btn:focus-visible {
  outline: 3px solid transparent;
  background-color: var(--cvc-color-focus);
  color: var(--cvc-color-focus-ink);
  box-shadow: 0 2px 0 var(--cvc-color-focus-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2315181C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.cvc-select--btn:disabled {
  opacity: 0.42; cursor: not-allowed; transform: none;
  background-color: #e8eaf1; color: var(--cvc-color-text);
}
/* Filter-toolbar text field matching .cvc-select--btn height (search next to
   filter menus). Same padding / type / chrome; full width of its grid cell. */
.cvc-input--btn {
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.1;
  padding: 7px 12px;
  color: var(--cvc-color-text);
  background-color: #e8eaf1;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: 0 2px 0 #b2b8c6;
  box-sizing: border-box;
  transition: background-color 0.14s ease, box-shadow 0.1s ease, color 0.14s ease;
}
.cvc-input--btn:hover { background-color: #dbdfea; }
.cvc-input--btn:focus {
  outline: none; border-color: transparent;
  box-shadow: 0 2px 0 #b2b8c6;
}
.cvc-input--btn:focus-visible {
  outline: 3px solid transparent;
  background-color: var(--cvc-color-focus);
  color: var(--cvc-color-focus-ink);
  box-shadow: 0 2px 0 var(--cvc-color-focus-ink);
}
.cvc-input--btn::placeholder { color: var(--cvc-color-text-muted); font-weight: 500; }
/* Search field — white editable surface with a leading magnifier. This is
   deliberately distinct from the filled .cvc-select--btn filter trigger while
   matching its 34px toolbar height. */
.cvc-search {
  position: relative;
  display: block;
  width: 100%;
}
.cvc-search::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%235b6470' stroke-width='1.5'/%3E%3Cpath d='m9.25 9.25 3 3' fill='none' stroke='%235b6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cvc-search__input {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 7px 12px 7px 34px;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.1;
  color: var(--cvc-color-text);
  background: var(--cvc-color-surface);
  border: 1px solid var(--cvc-color-border-strong);
  border-radius: var(--cvc-radius-sm);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.cvc-search__input::placeholder { color: var(--cvc-color-text-muted); }
.cvc-search__input:focus {
  outline: none;
  border-color: var(--cvc-color-brand);
  box-shadow: 0 0 0 3px var(--cvc-color-brand-soft);
}
.cvc-search__input:disabled {
  background: var(--cvc-color-muted);
  color: var(--cvc-color-text-muted);
  cursor: not-allowed;
}
.cvc-hint { font-size: 0.82rem; color: var(--cvc-color-text-muted); }
/* Read-only mirror of a textarea (Markdown preview, etc.): same chrome, no edit cue. */
.cvc-input-static {
  font: inherit; font-size: 0.95rem; color: var(--cvc-color-text);
  background: var(--cvc-color-surface); border: 1px solid var(--cvc-color-border);
  border-radius: var(--cvc-radius-sm); padding: 9px 12px; width: 100%;
  line-height: 1.5; box-sizing: border-box;
}
.cvc-input-static--sm { font-size: 0.85rem; padding: 5px 8px; }
.cvc-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--cvc-color-text); cursor: pointer; user-select: none;
}
.cvc-check input[type="checkbox"] {
  width: 24px; height: 24px; margin: 0; flex: none;
  accent-color: var(--cvc-color-brand); cursor: pointer;
}

/* ---- Form layout ----
   Stack long forms in .cvc-form. One topic per .cvc-form__section, separated
   by .cvc-form__rule. Field context that is not the value lives in .cvc-tip
   (the (i) badge), not a paragraph under every input. */
.cvc-form { display: flex; flex-direction: column; gap: 28px; }
.cvc-form__section { display: flex; flex-direction: column; gap: 16px; }
.cvc-form__header {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px;
}
.cvc-form__title {
  margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--cvc-color-text);
}
.cvc-form__lede {
  margin: 0; font-size: var(--cvc-text-sm); color: var(--cvc-color-text-muted); line-height: 1.45;
}
.cvc-form__rule {
  border: 0; height: 0; margin: 0; border-top: 1px solid var(--cvc-color-border);
}
.cvc-form__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 640px) {
  .cvc-form__row { grid-template-columns: 1fr; }
}
/* Short fields that should sit together on the leading edge (started / ended). */
.cvc-form__cluster {
  display: flex; flex-wrap: wrap; align-items: start; gap: 16px;
}
.cvc-form__cluster > .cvc-field { width: max-content; max-width: 100%; }
.cvc-form__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
}
.cvc-form__actions--start { justify-content: flex-start; }
.cvc-form__panel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 18px; background: var(--cvc-color-muted);
  border: 1px solid var(--cvc-color-border); border-radius: var(--cvc-radius);
}
.cvc-form__panel--gate { border-style: dashed; }
.cvc-field__title { display: flex; align-items: center; gap: 2px; min-height: 24px; }

/* Multi-select as chips (committee types, categories). The label is the 24×24
   target; the input stays 24px so it matches .cvc-check. */
.cvc-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.cvc-choice {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 4px 10px 4px 8px; background: var(--cvc-color-muted);
  border: 1px solid var(--cvc-color-border); border-radius: var(--cvc-radius-pill);
  font-size: var(--cvc-text-sm); font-weight: 500; color: var(--cvc-color-text);
  cursor: pointer; user-select: none;
}
.cvc-choice:has(:checked) {
  background: var(--cvc-color-brand-soft); border-color: var(--cvc-color-brand);
}
.cvc-choice input {
  width: 24px; height: 24px; margin: 0; flex: none;
  accent-color: var(--cvc-color-brand); cursor: pointer;
}

/* ---- Searchable multi-select (picks) ----
   Selected values are chips in the field. The input filters a listbox.
   Options are direct children of `[role=listbox]` — do not wrap them
   in `<li>`. `.cvc-picks--open` shows the list. Create-new is a list
   option (`.cvc-picks__create`), not a separate control. */
.cvc-picks { position: relative; display: grid; gap: 6px; }
.cvc-picks__control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  box-sizing: border-box; min-height: 42px; padding: 5px 8px; width: 100%;
  background: var(--cvc-color-surface); border: 1px solid var(--cvc-color-border-strong);
  border-radius: var(--cvc-radius-sm);
}
.cvc-picks__control:focus-within {
  outline: none; border-color: var(--cvc-color-brand);
  box-shadow: 0 0 0 3px var(--cvc-color-brand-soft);
}
.cvc-picks__chip {
  display: inline-flex; align-items: center; gap: 2px;
  max-width: 100%; padding: 2px 4px 2px 10px;
  background: var(--cvc-color-brand-soft); border: 1px solid var(--cvc-color-brand);
  border-radius: var(--cvc-radius-pill);
  font-size: var(--cvc-text-sm); font-weight: 500; color: var(--cvc-color-brand-dark);
}
.cvc-picks__chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvc-picks__chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; padding: 0; border: 0;
  border-radius: 999px; background: transparent; color: inherit;
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.cvc-picks__chip-remove:hover { background: color-mix(in srgb, var(--cvc-color-brand) 16%, transparent); }
.cvc-picks__input {
  flex: 1 1 8rem; min-width: 8rem; min-height: 28px; margin: 0; padding: 2px 4px;
  border: 0; background: transparent; color: var(--cvc-color-text);
  font: inherit; font-size: 0.95rem;
}
.cvc-picks__input:focus { outline: none; }
.cvc-picks__input::placeholder { color: var(--cvc-color-text-muted); }
.cvc-picks__list {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px 0; list-style: none; max-height: 16rem; overflow: auto;
  background: var(--cvc-color-surface); border: 1px solid var(--cvc-color-border-strong);
  border-radius: var(--cvc-radius-sm); box-shadow: var(--cvc-shadow-sm);
}
.cvc-picks--open .cvc-picks__list { display: block; }
.cvc-picks__option,
.cvc-picks__empty {
  display: block; width: 100%; margin: 0; padding: 8px 12px; border: 0;
  background: transparent; color: var(--cvc-color-text);
  font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer;
}
.cvc-picks__empty { color: var(--cvc-color-text-muted); cursor: default; }
.cvc-picks__option:hover,
.cvc-picks__option[aria-selected="true"] {
  background: var(--cvc-color-brand-soft); color: var(--cvc-color-brand-dark);
}
.cvc-picks__create { font-weight: 600; }

/* ---- Pipeline (ordered steps as destinations) ----
   Tiles are a fixed size so a chain reads as one system. When they do not
   fit a row they WRAP — do not hide steps in a horizontal scroller. Each
   tile is a real href; numbering keeps the sequence after wrap. */
.cvc-pipeline {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.cvc-pipeline__item { display: flex; align-items: center; gap: 8px; }
.cvc-pipeline__arrow { flex: none; color: var(--cvc-color-text-muted); font-size: 0.9rem; }
.cvc-pipeline__step {
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
  gap: 4px; width: 10.5rem; min-height: 5.5rem; padding: 10px 12px;
  background: var(--cvc-color-muted); border: 1px solid var(--cvc-color-border);
  border-radius: var(--cvc-radius); color: var(--cvc-color-text); text-decoration: none;
}
.cvc-pipeline__step:hover { text-decoration: none; border-color: var(--cvc-color-border-strong); }
.cvc-pipeline__step[aria-current="step"] {
  background: var(--cvc-color-brand-soft); border-color: var(--cvc-color-brand);
}
.cvc-pipeline__step--gate { border-style: dashed; }
.cvc-pipeline__kind {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--cvc-color-text-muted);
}
.cvc-pipeline__label { font-size: 0.9rem; font-weight: 650; line-height: 1.25; }
.cvc-pipeline__meta { font-size: var(--cvc-text-sm); color: var(--cvc-color-text-muted); }

/* ---- Notices / alerts ---- */
.cvc-notice { border: 1px solid var(--cvc-color-border); border-left-width: 4px; padding: 12px 16px; background: var(--cvc-color-surface); font-size: 0.92rem; line-height: 1.5; }
.cvc-notice strong { font-weight: 700; }
.cvc-notice--success { border-left-color: var(--cvc-color-success); background: var(--cvc-color-success-soft); }
.cvc-notice--warning { border-left-color: var(--cvc-color-warning); background: var(--cvc-color-warning-soft); }
.cvc-notice--danger  { border-left-color: var(--cvc-color-danger);  background: var(--cvc-color-danger-soft); }
.cvc-notice--info    { border-left-color: var(--cvc-color-brand);   background: var(--cvc-color-brand-soft); }

/* ---- Context banner (full-bleed strip: viewing another version, preview mode)
   Distinct from .cvc-notice (in-flow card callout). Use for page/column chrome
   that must stay visible while the user reads a non-current document state. */
.cvc-banner {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  box-shadow: var(--cvc-shadow-sm);
  box-sizing: border-box;
}
.cvc-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  box-sizing: border-box;
}
.cvc-banner__text {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: inherit;
}
.cvc-banner__text strong { font-weight: 700; }
.cvc-banner__link {
  color: var(--cvc-color-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cvc-banner__link:hover { text-decoration: none; }
.cvc-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.cvc-banner__dismiss {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.75;
}
.cvc-banner__dismiss:hover { opacity: 1; background: rgba(21, 24, 28, 0.08); }
.cvc-banner--warning {
  background: var(--cvc-color-warning-soft);
  border-bottom-color: color-mix(in srgb, var(--cvc-color-warning) 28%, #ffffff);
  border-left: 4px solid var(--cvc-color-warning);
  color: var(--cvc-color-warning);
}
.cvc-banner--warning .cvc-banner__dismiss:hover {
  background: color-mix(in srgb, var(--cvc-color-warning) 12%, transparent);
}
@media (max-width: 768px) {
  .cvc-banner__inner { padding: 10px 12px; align-items: flex-start; }
  .cvc-banner__text { font-size: 0.8125rem; }
}

/* ---- Hover tip (ink popover on hover/focus) ----
   Wrap a trigger (plain text, a <time>, or the optional .cvc-tip__i badge) and a
   .cvc-tip__pop. Opens on :hover / :focus / :focus-within — no JS required.

   Placement modifiers:
   - .cvc-tip--above  open upward (sticky bars, table action cells)
   - .cvc-tip--end    align the pop's end edge to the trigger (opens leftward in
                      LTR) — use in the last column of a .cvc-table so the pop
                      stays inside the scrollport instead of inflating scrollWidth
*/
.cvc-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: help;
  outline: none;
}
.cvc-tip__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  opacity: 0.8;
}
.cvc-tip__pop {
  /* display:none when closed so the pop doesn't inflate a parent scrollHeight
     (visibility:hidden absolute boxes still do — that caused phantom vertical
     scrollbars on .cvc-table-scroll). */
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 280px;
  padding: 8px 11px;
  background: var(--cvc-color-text);
  color: var(--cvc-color-surface);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(21, 24, 28, 0.28);
  pointer-events: none;
}
.cvc-tip--above .cvc-tip__pop {
  top: auto;
  bottom: calc(100% + 8px);
}
.cvc-tip--end .cvc-tip__pop {
  left: auto;
  right: 0;
}
.cvc-tip:hover .cvc-tip__pop,
.cvc-tip:focus .cvc-tip__pop,
.cvc-tip:focus-within .cvc-tip__pop {
  display: block;
}
/* Escape scrollport overflow when CSS anchor positioning is available: a
   position:absolute tip inside .cvc-table-scroll otherwise extends scrollWidth
   on hover and flashes a horizontal scrollbar. Fixed + anchor paints over the
   edge without becoming scrollable overflow. */
@supports (anchor-name: --cvc-tip) {
  /* Scope the shared name to each wrapper. Without anchor-scope every pop
     resolves to the same (last) --cvc-tip anchor in the document. */
  .cvc-tip {
    anchor-name: --cvc-tip;
    anchor-scope: --cvc-tip;
  }
  .cvc-tip__pop {
    position: fixed;
    position-anchor: --cvc-tip;
    left: anchor(--cvc-tip left);
    top: anchor(--cvc-tip bottom);
    margin-top: 8px;
    right: auto;
    bottom: auto;
  }
  .cvc-tip--above .cvc-tip__pop {
    top: auto;
    bottom: anchor(--cvc-tip top);
    margin-top: 0;
    margin-bottom: 8px;
  }
  .cvc-tip--end .cvc-tip__pop {
    left: auto;
    right: anchor(--cvc-tip right);
  }
}

/* ---- Data table — ink header (default), hairline rows, on an ink-bordered wrapper.
   `.cvc-table--surface` is the white-header variant for public / reading surfaces. ---- */
.cvc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cvc-table th, .cvc-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--cvc-color-border); vertical-align: middle; white-space: nowrap; }
.cvc-table thead th { background: var(--cvc-color-text); color: var(--cvc-color-surface); font-weight: 600; vertical-align: middle; }
.cvc-table--surface thead th {
  background: var(--cvc-color-surface);
  color: var(--cvc-color-text);
  border-bottom: 2px solid var(--cvc-color-text);
}
.cvc-table tbody tr:last-child td { border-bottom: none; }
.cvc-table tbody tr:hover { background: var(--cvc-color-muted); }
/* Bordered container for a .cvc-table (+ optional footer). The table scrolls
   horizontally inside .cvc-table-scroll so an attached footer stays put.
   overflow:visible on the wrap lets tip pops (with .cvc-tip--end / --above, or
   CSS anchor positioning) paint over the ink border without being clipped. */
.cvc-table-wrap { border: 1px solid var(--cvc-color-text); background: var(--cvc-color-surface); overflow: visible; }
/* overflow-x alone makes overflow-y compute to auto (CSS overflow pairing),
   which shows a useless vertical scrollbar when a descendant (e.g. a tip pop)
   extends the scrollHeight. Pin y to clip so only horizontal scroll appears,
   and tips that still escape do so without a phantom y-scrollbar. Prefer
   .cvc-tip--end + .cvc-tip--above in trailing action cells so the open tip
   stays inside this scrollport when CSS anchors are unavailable. */
.cvc-table-scroll { overflow-x: auto; overflow-y: clip; }
/* Footer bar attached inside the wrapper — row count on the left, pager on the right. */
.cvc-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--cvc-color-border); background: var(--cvc-color-muted); }
.cvc-table-foot__count { color: var(--cvc-color-text-muted); font-size: 0.86rem; }
.cvc-table-foot .cvc-pagination { margin-top: 0; }

/* ---- Table calendar — month view of dated rows from a data table.
   Lives inside `.cvc-table-wrap`. `.cvc-cal--surface` matches the white
   public table header. Week starts Monday. Products wire prev/next and
   item destinations as real links; keep the current scroll position on
   same-page month / view switches. ---- */
.cvc-cal { background: var(--cvc-color-surface); }
.cvc-cal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--cvc-color-border);
}
.cvc-cal__title { margin: 0; font-size: 1rem; font-weight: 600; }
.cvc-cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cvc-cal__dow {
  padding: 10px 12px; background: var(--cvc-color-text); color: var(--cvc-color-surface);
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em;
}
.cvc-cal--surface .cvc-cal__dow {
  background: var(--cvc-color-surface); color: var(--cvc-color-text);
  border-bottom: 2px solid var(--cvc-color-text);
}
.cvc-cal__cell {
  min-height: 7.25rem; padding: 8px 10px 10px; box-sizing: border-box;
  border-bottom: 1px solid var(--cvc-color-border);
  border-right: 1px solid var(--cvc-color-border);
  vertical-align: top;
}
.cvc-cal__cell:nth-child(7n) { border-right: none; }
.cvc-cal__cell.is-out { background: var(--cvc-color-bg); }
.cvc-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--cvc-color-brand); }
.cvc-cal__day { font-weight: 600; font-size: 0.82rem; margin-bottom: 6px; }
.cvc-cal__cell.is-out .cvc-cal__day { color: var(--cvc-color-text-muted); }
.cvc-cal__items { list-style: none; margin: 0; padding: 0; }
.cvc-cal__items li + li { margin-top: 4px; }
.cvc-cal__item {
  display: block; font-size: 0.82rem; line-height: 1.35; font-weight: 600;
  color: var(--cvc-color-brand); text-decoration: underline; text-underline-offset: 2px;
  white-space: normal; overflow-wrap: break-word;
}
.cvc-cal__item-meta {
  display: block; font-weight: 400; color: var(--cvc-color-text-muted);
}
@media (max-width: 640px) {
  .cvc-cal__nav { flex-wrap: wrap; }
  .cvc-cal__grid { display: flex; flex-direction: column; }
  .cvc-cal__dow { display: none; }
  .cvc-cal__cell { min-height: 0; border-right: none; }
  .cvc-cal__cell.is-out:not(.has-items) { display: none; }
}

/* ---- Pagination ---- */
.cvc-pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; font-size: 0.9rem; }
.cvc-pagination__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cvc-pagination__page, .cvc-pagination__step { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px; border: 1px solid var(--cvc-color-border-strong); background: var(--cvc-color-surface); color: var(--cvc-color-text); text-decoration: none; font-weight: 600; border-radius: 6px; }
.cvc-pagination__page:hover, .cvc-pagination__step:hover { background: var(--cvc-color-bg); }
.cvc-pagination__page.is-current { background: var(--cvc-color-brand); border-color: var(--cvc-color-brand); color: #fff; }
.cvc-pagination__step.is-disabled { opacity: 0.4; pointer-events: none; }
.cvc-pagination__gap { padding: 0 4px; color: var(--cvc-color-text-muted); }
.cvc-pagination__page:focus-visible, .cvc-pagination__step:focus-visible { outline: 3px solid #ffdd00; outline-offset: 1px; }

/* Mobile: each row collapses into a stacked card. Cells are labelled with their
   column name via `data-label="…"`; a cell with no data-label (e.g. the identity
   or an actions cell) just shows its content. The header row is kept for assistive
   tech but hidden visually. */
@media (max-width: 640px) {
  /* Header hidden visually but kept for assistive tech (cells are labelled via
     data-label below). */
  .cvc-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .cvc-table, .cvc-table tbody, .cvc-table tr, .cvc-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .cvc-table tr { padding: 14px 16px; border-bottom: 1px solid var(--cvc-color-border); }
  .cvc-table tbody tr:last-child { border-bottom: none; }
  .cvc-table tbody tr:hover { background: transparent; }
  .cvc-table td { padding: 10px 0 0; border: 0; white-space: normal; text-align: left; }
  .cvc-table td:first-child { padding-top: 0; }
  .cvc-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--cvc-color-text-muted);
  }
  /* Footer stacks: count above the pager. */
  .cvc-table-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Eyebrow (small uppercase brand label above a heading) ---- */
.cvc-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--cvc-color-brand); margin: 0 0 12px; }

/* ---- Breadcrumb (product-wide location trail) ----
   Horizontal ol; last crumb is the current page (no link). Without these
   rules the browser paints a numbered stacked list. */
.cvc-breadcrumb { margin: 0 0 1.25rem; }
.cvc-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.9rem; line-height: 1.4;
}
.cvc-breadcrumb__item { display: inline-flex; align-items: center; }
.cvc-breadcrumb__sep {
  margin: 0 0.45rem; color: var(--cvc-color-text-muted); font-weight: 400;
  user-select: none;
}
.cvc-breadcrumb__link {
  color: var(--cvc-color-brand); font-weight: 600; text-decoration: none;
}
.cvc-breadcrumb__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cvc-breadcrumb__current {
  color: var(--cvc-color-text); font-weight: 700;
}

/* ---- Stat strip (metrics) ----
   Default: editorial row — big tabular numbers, hairline dividers, no box.
   --cells: a bordered dashboard grid. --display: big hero numbers, sentence labels. */
.cvc-stats { display: flex; flex-wrap: wrap; }
.cvc-stat { padding: 2px 28px; border-left: 1px solid var(--cvc-color-border-strong); }
.cvc-stat:first-child { padding-left: 0; border-left: 0; }
.cvc-stat__num { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cvc-stat__label { display: block; font-size: 0.76rem; color: var(--cvc-color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 8px; }
.cvc-stats--cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--cvc-color-border); background: var(--cvc-color-surface); }
.cvc-stats--cells .cvc-stat { padding: 16px 20px; border-left: 1px solid var(--cvc-color-border); }
.cvc-stats--cells .cvc-stat:first-child { border-left: 0; padding-left: 20px; }
.cvc-stats--cells .cvc-stat__num { font-size: 1.7rem; }
.cvc-stats--cells .cvc-stat__label { text-transform: none; letter-spacing: 0; margin-top: 2px; font-size: 0.78rem; }
/* Display — big hero numbers, sentence-case labels, no dividers. Numbers stay ink. */
.cvc-stats--display { gap: 48px; }
.cvc-stats--display .cvc-stat { padding: 0; border-left: 0; }
.cvc-stats--display .cvc-stat__num { font-size: 3.2rem; letter-spacing: -0.03em; }
.cvc-stats--display .cvc-stat__label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; margin-top: 10px; max-width: 22ch; line-height: 1.4; }

/* ---- Dialog (confirm / prompt / choice — replaces window.confirm/prompt)
   Overlay + panel. CSS only: apps wire open/close, focus trap, and the
   promise. Use the hidden attribute to hide (not a .hidden class).

   <div class="cvc-dialog" role="dialog" aria-modal="true" aria-labelledby="d-title">
     <div class="cvc-dialog__backdrop"></div>
     <div class="cvc-dialog__panel">
       <div class="cvc-dialog__header">
         <h2 class="cvc-dialog__title" id="d-title">Title</h2>
         <button type="button" class="cvc-dialog__close" aria-label="Close">&times;</button>
       </div>
       <div class="cvc-dialog__body">
         <p class="cvc-dialog__message">…</p>
         <!-- optional .cvc-field / .cvc-dialog__list -->
       </div>
       <div class="cvc-dialog__footer">
         <button type="button" class="cvc-btn cvc-btn--secondary">Cancel</button>
         <button type="button" class="cvc-btn">OK</button>
       </div>
     </div>
   </div>

   Default panel is 28rem (confirm / one field). .cvc-dialog--md (36rem) for
   choice lists. .cvc-dialog--lg (48rem) for rich detail panels (audit entry,
   record inspectors). z-index 2000 sits above typical app modals. */
.cvc-dialog {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--cvc-space-5);
  box-sizing: border-box;
}
.cvc-dialog[hidden] { display: none; }
.cvc-dialog__backdrop {
  position: absolute; inset: 0;
  background: rgba(21, 24, 28, 0.45);
}
.cvc-dialog__panel {
  position: relative;
  width: 100%; max-width: 28rem; max-height: min(80vh, 40rem);
  display: flex; flex-direction: column;
  background: var(--cvc-color-surface);
  color: var(--cvc-color-text);
  border: 1px solid var(--cvc-color-border);
  border-radius: var(--cvc-radius);
  box-shadow: var(--cvc-shadow);
  overflow: hidden;
}
.cvc-dialog--md .cvc-dialog__panel { max-width: 36rem; }
.cvc-dialog--lg .cvc-dialog__panel { max-width: 48rem; max-height: min(88vh, 52rem); }
.cvc-dialog__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cvc-space-3);
  padding: var(--cvc-space-4) var(--cvc-space-5);
  border-bottom: 1px solid var(--cvc-color-border);
}
.cvc-dialog__title {
  margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25;
}
.cvc-dialog__close {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  font: inherit; font-size: 1.5rem; line-height: 1;
  color: var(--cvc-color-text-muted);
  background: transparent; border: 0; border-radius: var(--cvc-radius-sm);
  cursor: pointer;
}
.cvc-dialog__close:hover { background: var(--cvc-color-muted); color: var(--cvc-color-text); }
.cvc-dialog__body {
  flex: 1; min-height: 0;
  padding: var(--cvc-space-5);
  overflow-y: auto;
  display: grid; gap: var(--cvc-space-4);
}
.cvc-dialog__panel:has(.cvc-picks--open),
.cvc-dialog__body:has(.cvc-picks--open) {
  overflow: visible;
}
.cvc-dialog__message {
  margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--cvc-color-text);
}
.cvc-dialog__footer {
  display: flex; justify-content: flex-end; gap: var(--cvc-space-3);
  padding: var(--cvc-space-4) var(--cvc-space-5);
  border-top: 1px solid var(--cvc-color-border);
}
.cvc-dialog__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  border: 1px solid var(--cvc-color-border);
  border-radius: var(--cvc-radius-sm);
  overflow: hidden;
  background: var(--cvc-color-surface);
}
.cvc-dialog__option {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 0.92rem; line-height: 1.4;
  color: var(--cvc-color-text);
  background: var(--cvc-color-surface);
  border: 0; border-bottom: 1px solid var(--cvc-color-border);
  padding: 10px 12px;
  cursor: pointer;
}
.cvc-dialog__list > :last-child .cvc-dialog__option { border-bottom: 0; }
.cvc-dialog__option:hover { background: var(--cvc-color-muted); }
.cvc-dialog__option.is-selected {
  background: var(--cvc-color-brand-soft);
  color: var(--cvc-color-brand-dark);
  font-weight: 600;
}
.cvc-dialog__option-meta {
  display: block; margin-top: 2px;
  font-size: 0.8rem; font-weight: 400;
  color: var(--cvc-color-text-muted);
}

/* ---- App frame + side navigation
   Staff chrome for products that outgrow a top-bar menu. CSS only: the product
   owns collapse persistence, burger open/close, and the link element
   (<a> or Next.js <Link>). Destinations stay real hrefs.

   Open by default. `.cvc-sidenav.is-collapsed` is the icon rail (desktop).
   Below 52rem the rail becomes a drawer: `.cvc-sidenav-burger` appears in the
   top bar; `.cvc-sidenav.is-open` + an open backdrop show the panel. Collapse
   is ignored on small screens so the drawer always shows labels. */
.cvc-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.cvc-app > .cvc-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: none;
  padding-right: 8px;
  gap: 0 12px;
}
.cvc-app .cvc-topbar__brand { flex-shrink: 0; }
.cvc-app .cvc-topbar__name { white-space: nowrap; }
.cvc-app__body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.cvc-app__main {
  flex: 1;
  min-width: 0;
}
.cvc-sidenav {
  --cvc-sidenav-width: 15.5rem;
  --cvc-sidenav-collapsed: 3.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--cvc-sidenav-width);
  background: var(--cvc-color-surface);
  border-right: 1px solid var(--cvc-color-border);
  min-height: calc(100dvh - 56px);
  max-height: calc(100dvh - 56px);
  position: sticky;
  top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.16s ease;
}
.cvc-sidenav.is-collapsed { width: var(--cvc-sidenav-collapsed); }
.cvc-sidenav__nav {
  display: flex;
  flex-direction: column;
  gap: var(--cvc-space-4);
  padding: var(--cvc-space-3) var(--cvc-space-2) var(--cvc-space-2);
  flex: 1;
}
.cvc-sidenav__group { margin: 0; padding: 0; border: 0; }
.cvc-sidenav__heading {
  margin: 0 10px 6px;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cvc-color-text-muted);
  line-height: 1.2;
}
.cvc-sidenav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.cvc-sidenav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--cvc-radius-sm);
  color: var(--cvc-color-text);
  font-size: var(--cvc-text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
}
.cvc-sidenav__item:hover {
  background: var(--cvc-color-muted);
  color: var(--cvc-color-text);
  text-decoration: none;
}
.cvc-sidenav__item.is-current {
  background: var(--cvc-color-brand-soft);
  color: var(--cvc-color-brand-dark);
  font-weight: 600;
}
.cvc-sidenav__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cvc-sidenav__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cvc-sidenav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvc-sidenav__collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  min-height: 40px;
  margin: auto 8px 10px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--cvc-color-border);
  border-radius: var(--cvc-radius-sm);
  background: transparent;
  color: var(--cvc-color-text-muted);
  font: inherit;
  font-size: var(--cvc-text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.cvc-sidenav__collapse:hover {
  background: var(--cvc-color-muted);
  color: var(--cvc-color-text);
}
.cvc-sidenav.is-collapsed .cvc-sidenav__heading,
.cvc-sidenav.is-collapsed .cvc-sidenav__label,
.cvc-sidenav.is-collapsed .cvc-sidenav__collapse-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cvc-sidenav.is-collapsed .cvc-sidenav__item,
.cvc-sidenav.is-collapsed .cvc-sidenav__collapse {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.cvc-sidenav.is-collapsed .cvc-sidenav__heading { margin: 0; }
.cvc-sidenav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px 0 -8px;
  padding: 0;
  border: 0;
  border-radius: var(--cvc-radius-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-self: center;
  flex: none;
}
.cvc-sidenav-burger svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.cvc-sidenav-burger:hover { background: rgba(255, 255, 255, 0.08); }
.cvc-sidenav-backdrop {
  display: none;
}
@media (max-width: 52rem) {
  .cvc-sidenav-burger { display: inline-flex; }
  .cvc-sidenav {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: min(20rem, 88vw);
    max-height: none;
    min-height: 0;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: var(--cvc-shadow);
    transition: transform 0.16s ease, visibility 0.16s ease;
  }
  .cvc-sidenav.is-collapsed { width: min(20rem, 88vw); }
  .cvc-sidenav.is-collapsed .cvc-sidenav__heading,
  .cvc-sidenav.is-collapsed .cvc-sidenav__label,
  .cvc-sidenav.is-collapsed .cvc-sidenav__collapse-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 10px 6px;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
  .cvc-sidenav.is-collapsed .cvc-sidenav__label,
  .cvc-sidenav.is-collapsed .cvc-sidenav__collapse-label { margin: 0; }
  .cvc-sidenav.is-collapsed .cvc-sidenav__item,
  .cvc-sidenav.is-collapsed .cvc-sidenav__collapse {
    justify-content: flex-start;
    padding: 8px 10px;
    gap: 10px;
  }
  .cvc-sidenav.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .cvc-sidenav__collapse { display: none; }
  .cvc-sidenav-backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0;
    z-index: 25;
    background: rgba(21, 24, 28, 0.45);
    border: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
  }
  .cvc-sidenav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ---- Header search (staff top bar + public site). Distinct from
   .cvc-search, which is the white toolbar field. ---- */
.cvc-search-box {
  position: relative;
  z-index: 30;
}
.cvc-search-box__form {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.cvc-search-box__label {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.cvc-search-box__label::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%235b6470' stroke-width='1.5'/%3E%3Cpath d='m9.25 9.25 3 3' fill='none' stroke='%235b6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cvc-search-box__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.cvc-search-box__input[type="search"]::-webkit-search-decoration,
.cvc-search-box__input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.cvc-search-box__kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.22rem 0.38rem;
  border-radius: 3px;
}
.cvc-search-box__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  width: max(100%, 22rem);
  max-width: min(28rem, calc(100vw - 1.5rem));
  max-height: min(24rem, calc(100vh - 6rem));
  overflow: auto;
  background: #fff;
  color: var(--cvc-color-text);
  border: 1px solid var(--cvc-color-border-strong);
  border-radius: var(--cvc-radius-sm);
  box-shadow: 0 16px 36px rgba(21, 24, 28, 0.18);
}
.cvc-search-box__status {
  margin: 0;
  padding: 0.85rem 1rem;
  color: var(--cvc-color-text-muted);
  font-size: 0.9rem;
}
.cvc-search-box__hits {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
}
.cvc-search-box__icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--cvc-color-text-muted);
}
.cvc-search-box__hit,
.cvc-search-box__more {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  color: inherit;
}
.cvc-search-box__hit .cvc-search-box__icon { margin-top: 0.18rem; }
.cvc-search-box__hit-body {
  min-width: 0;
  flex: 1 1 auto;
}
.cvc-search-box__hit:hover,
.cvc-search-box__hit:focus-visible,
.cvc-search-box__more:hover,
.cvc-search-box__more:focus-visible {
  background: var(--cvc-color-brand-soft);
  text-decoration: none;
  outline: none;
}
.cvc-search-box__hit-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
}
.cvc-search-box__hit-meta {
  display: block;
  margin-top: 0.12rem;
  color: var(--cvc-color-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cvc-search-box__more {
  border-top: 1px solid var(--cvc-color-border);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cvc-color-brand);
}
.cvc-search-box--staff {
  flex: 0 1 18rem;
  width: 18rem;
  min-width: 9.5rem;
  align-self: center;
}
.cvc-account .cvc-search-box--staff { align-self: center; }
.cvc-search-box--staff .cvc-search-box__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%23c5cad3' stroke-width='1.5'/%3E%3Cpath d='m9.25 9.25 3 3' fill='none' stroke='%23c5cad3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cvc-search-box--staff .cvc-search-box__input {
  height: 34px;
  padding: 0 2.7rem 0 2rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--cvc-radius-sm);
}
.cvc-search-box--staff .cvc-search-box__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.cvc-search-box--staff .cvc-search-box__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}
.cvc-search-box--staff .cvc-search-box__input:focus-visible {
  outline: 3px solid var(--cvc-color-focus);
  outline-offset: 2px;
}
.cvc-search-box--staff .cvc-search-box__kbd {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.cvc-search-box--staff .cvc-search-box__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.cvc-search-box--public .cvc-search-box__input {
  height: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 2.7rem 0.45rem 2rem;
  font-size: 1rem;
  border: 2px solid var(--cvc-color-text);
  border-right: 0;
  border-radius: 0;
  background: #fff;
  color: var(--cvc-color-text);
}
.cvc-search-box--public .cvc-search-box__input:focus { outline: none; }
.cvc-search-box--public .cvc-search-box__kbd {
  color: var(--cvc-color-text-muted);
  background: var(--cvc-color-muted);
  border: 1px solid var(--cvc-color-border);
}
.cvc-search-box--public .cvc-search-box__submit {
  flex: 0 0 auto;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--cvc-color-text);
  border-radius: 0;
  background: var(--cvc-color-text);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}
.cvc-search-box--public .cvc-search-box__submit:hover { background: #000; }
.cvc-search-box--public .cvc-search-box__submit:focus-visible,
.cvc-search-box--public .cvc-search-box__input:focus-visible {
  outline: 3px solid var(--cvc-color-focus);
  outline-offset: 0;
}
.cvc-search-box--public .cvc-search-box__panel {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  border: 2px solid var(--cvc-color-text);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(21, 24, 28, 0.12);
}
@media (max-width: 52rem) {
  .cvc-app > .cvc-topbar { padding: 0 16px; }
  .cvc-search-box--staff {
    flex: 1 1 8rem;
    width: auto;
    max-width: 16rem;
    min-width: 0;
  }
}
@media (max-width: 720px) {
  .cvc-search-box__kbd { display: none; }
  .cvc-search-box--staff .cvc-search-box__input,
  .cvc-search-box--public .cvc-search-box__input { padding-right: 0.75rem; }
  .cvc-search-box--staff .cvc-search-box__panel {
    position: fixed;
    top: 56px;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .cvc-app .cvc-topbar__name,
  .cvc-app .cvc-userbtn__name { display: none; }
  .cvc-app .cvc-context-label { max-width: 8rem; }
  .cvc-app .cvc-search-box--staff {
    display: block;
    flex: 1 1 8rem;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

/* ---- Focus (GOV.UK-style yellow) for links and inputs.
   Buttons define their own focus above; app-specific components (e.g. tiles) add
   their own :focus-visible in the app stylesheet. ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cvc-color-focus); outline-offset: 2px;
}

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