/* Box-sizing reset — all other styles handled by Tailwind CSS */
*, *::before, *::after { box-sizing: border-box; }

/* Fonts: the Vem family fonts, self-hosted (static/vendor/vem-design/dist/fonts.css). */

/* ──────────────────────────────────────────────────────────────────────────
   Vemhere global polish layer
   Styles the shared primitives every template renders through — especially the
   bare Django-widget form controls (`{{ form.field }}`) that carry no Tailwind
   classes — so the whole app reads premium with zero per-template edits.
   Loaded AFTER tailwind.css, so any control that DOES have utility classes
   keeps its own look (a class selector beats these element selectors).
   ────────────────────────────────────────────────────────────────────────── */

/* Crisper, more even text rendering app-wide */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Instrument Sans has a narrow space (0.2em); small links ran words together. */
body { word-spacing: var(--vem-word-spacing, 0.06em); }

/* Brand-tinted text selection */
::selection { background: rgba(13, 181, 157, 0.22); }

/* A field's border is its only edge, so it needs 3:1 (WCAG 1.4.11); line-strong is
   1.37:1 light and 1.92:1 dark. premium-v2 AUDIT.md A1, vem-design change #24 - here
   until vem-design 0.3.0 carries it. */
:root { --vem-line-input: #857E76; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --vem-line-input: #857D74; } }
.dark, [data-theme="dark"] { --vem-line-input: #857D74; }

/* ── Bare form controls — text-like inputs, selects, textareas ──────────────
   Excludes checkboxes / radios / buttons / file / range / color (left native).
   Vem tokens only (AUDIT.md A2): they switch with the theme, and focus is the
   family's ring, not a fixed teal glow that ignored the institution's colour. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background-color: var(--vem-surface);
    border: 1px solid var(--vem-line-input);
    border-radius: var(--vem-radius-md);
    padding: 0.55rem 0.8rem;
    color: var(--vem-text);
    line-height: 1.45;
}
textarea { line-height: 1.6; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--vem-focus);
    outline-offset: 2px;
}

::placeholder { color: var(--vem-muted); opacity: 1; }

/* A native file picker is ~410 px wide: on a phone it pushed the page sideways (AUDIT.md §6). */
input[type="file"] { max-width: 100%; }

/* Checkboxes and radios, drawn rather than left native (the white square on a
   dark page). 20 px on the kit's tokens; the row around them gives the 44 px. */
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
    display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
    border: 1.5px solid var(--vem-line-input); background: var(--vem-surface);
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before { content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform .12s;
    background: var(--vem-on-primary); clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 22%, 86% 8%, 40% 72%); }
input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0);
    transition: transform .12s; background: var(--vem-on-primary); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--vem-primary); border-color: var(--vem-primary); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate { background: var(--vem-primary); border-color: var(--vem-primary); }
input[type="checkbox"]:indeterminate::before { transform: scale(1); clip-path: inset(40% 10%); }
input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--vem-primary); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--vem-focus); outline-offset: 2px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
/* A checkbox marked role="switch" is a toggle: a pill whose knob slides on. */
input[type="checkbox"][role="switch"] { width: 40px; height: 24px; border-radius: 999px; place-content: center start; padding: 0 2px;
    background: var(--vem-subtle); border-color: var(--vem-line-input); }
input[type="checkbox"][role="switch"]::before { width: 18px; height: 18px; border-radius: 50%; clip-path: none; transform: none;
    background: var(--vem-surface); box-shadow: 0 1px 3px rgba(20,17,15,.25); transition: translate .15s var(--vem-ease, ease); }
input[type="checkbox"][role="switch"]:checked { background: var(--vem-primary); border-color: var(--vem-primary); }
input[type="checkbox"][role="switch"]:checked::before { translate: 15px 0; background: var(--vem-on-primary); }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"], input[type="radio"],
    input[type="checkbox"]::before, input[type="radio"]::before { transition: none; } }

/* Kit fields and the ones Python forms and templates style with Tailwind's pale
   borders take the same edge (focus keeps its own colour). */
.vem-input, .vem-select, .vem-textarea { border-color: var(--vem-line-input); }
:root :is(input, select, textarea):is(.border-slate-200, .border-slate-300, .dark\:border-slate-600):not(:focus) {
    border-color: var(--vem-line-input);
}

/* Messages (templates/components/flash.html) stack with a gap. */
.vem-flash-list { display: grid; gap: 8px; margin-bottom: 16px; }

/* Danger text inside a vem-menu (the activity page's Delete). */
.vem-danger-text { color: var(--vem-danger); }

/* Contrast (PLAN-VERTICALS D6, measured with axe): Tailwind's slate-400/500
   and emerald-600 fail WCAG AA as small text on white and on the bone ground,
   and no single grey passes on both light and dark surfaces. Each theme takes
   the family's muted / success colour instead (vem-design, all AA). */
html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-500 { color: var(--vem-muted); }
html.dark .text-slate-500, html.dark .dark\:text-slate-500 { color: var(--vem-muted); }
html:not(.dark) .text-emerald-600 { color: var(--vem-success); }
/* The brand teal (600) is 4.0:1 under small text on white; light text uses
   the family primary (teal-700, 5.8:1) - the same rule vem-design gates on. */
html:not(.dark) .text-ocean-600, html:not(.dark) .text-brand-600 { color: var(--vem-primary); }

/* Print (PLAN-VERTICALS D6): the page's content only - no sidebar, header,
   breadcrumbs, footer, menus or buttons; tables print whole. */
@media print {
  .vh-header, .vh-sidebar, .vh-crumbbar, .vh-scrim, footer, .vem-skip,
  .vem-menu, .vem-tabs, button, [data-host-tools], [data-checkin-tools] { display: none !important; }
  .vh-main, .vh-content, main { margin: 0 !important; padding: 0 !important; width: auto !important; }
  body { background: #fff !important; color: #000 !important; }
  .overflow-x-auto, .vem-table-wrap { overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* Icon ink: an svg draws in currentColor and takes a role colour from one of these,
   because an svg's stroke/fill attribute cannot read a CSS variable. */
.vem-ink-primary    { color: var(--vem-primary); }
.vem-ink-on-primary { color: var(--vem-on-primary); }
.vem-ink-success    { color: var(--vem-success); }
.vem-ink-danger     { color: var(--vem-danger); }
.vem-ink-warning    { color: var(--vem-warning); }
.vem-ink-muted      { color: var(--vem-muted); }
.vem-ink-text-2     { color: var(--vem-text-2); }
.vem-ink-text       { color: var(--vem-text); }

/* Text and icons on a primary fill (.bg-brand-gradient is the primary variable; see
   tailwind.config.js). The primary is light teal on the dark theme and may be an
   institution's colour, so "white on it" is on-primary, never a literal white. */
.bg-brand-gradient.text-white,
.bg-brand-gradient [class*="text-white"],
.bg-brand-gradient[class*="text-white"] { color: var(--vem-on-primary); }
.bg-brand-gradient svg[stroke="#fff"], .bg-brand-gradient svg[stroke="white"],
.bg-brand-gradient[stroke="#fff"] { stroke: var(--vem-on-primary); }
.bg-brand-gradient svg [fill="#fff"], .bg-brand-gradient svg[fill="#fff"] { fill: var(--vem-on-primary); }

/* Skipped dates (premium redesign GAP G18): the institution's list, a slot's
   skipped occurrence, and a skipped slot on the timetable. */
.vh-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
.vh-crumbs a { color: var(--vem-muted); text-decoration: none; font-weight: 500; }
.vh-crumbs [aria-current] { color: var(--vem-text); font-weight: 600; }
.vh-page-narrow { max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.vh-page-narrow h1, .vh-page-narrow h2 { margin: 0; }
.vh-page-narrow section > h2 { margin-bottom: 10px; }
.vh-lede { margin: 6px 0 0; color: var(--vem-text-2); }
.vh-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.vh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vem-line); }
.vh-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--vem-line); }
.vh-list__sub { display: block; font-size: .85rem; color: var(--vem-text-2); }
.vh-struck { text-decoration: line-through; }
.vh-skip-badge { margin-top: 4px; }
.vh-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.vh-inline-form { display: flex; gap: 6px; padding: 8px; }
.vh-tt-skipped { display: block; border-radius: 10px; border: 1px dashed var(--vem-line-strong); padding: 8px 10px; text-decoration: none; color: var(--vem-text-2); }
.vh-tt-skipped__time { font-size: 11px; font-weight: 700; text-decoration: line-through; }
.vh-tt-skipped__name { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 2px; text-decoration: line-through; }
.vh-tt-skipped__why { font-size: 10.5px; margin-top: 2px; }

/* Check-in result (premium redesign, Tier 1). Status colours, never the
   institution's: its colour stays on the primary button. */
.vh-result-page { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.vh-result { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px 20px 24px; border-radius: var(--vem-radius-lg); border: 2px solid var(--vh-result-ink); background: var(--vh-result-soft); color: var(--vem-text); }
.vh-result--success { --vh-result-ink: var(--vem-success); --vh-result-soft: var(--vem-success-soft); }
.vh-result--warning { --vh-result-ink: var(--vem-warning); --vh-result-soft: var(--vem-warning-soft); }
.vh-result--danger { --vh-result-ink: var(--vem-danger); --vh-result-soft: var(--vem-danger-soft); }
.vh-result--neutral { --vh-result-ink: var(--vem-line-strong); --vh-result-soft: var(--vem-subtle); }
.vh-result__ring { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--vh-result-ink); color: var(--vh-result-ink); background: var(--vem-surface); margin-bottom: 8px; }
.vh-result--neutral .vh-result__ring { color: var(--vem-text-2); }
.vh-result__ring .vem-icon { width: 34px; height: 34px; }
.vh-result__title { margin: 0; }
/* The check-in result as approved (premium-v2 1a "Quiet", CLASS-MAP.md design change A):
   no card - the ring and a serif title on the page ground, status colours kept. */
.vh-result--quiet { border: 0; background: none; padding: 12px 0 0; }
.vh-result--quiet .vh-result__ring { width: 72px; height: 72px; background: var(--vh-result-soft); }
.vh-result--quiet .vh-result__title { font-family: var(--vem-font-display); font-weight: 400; font-size: 3.75rem; line-height: 1; margin-top: 20px; overflow-wrap: anywhere; }
.vh-result__sub { margin: 0; color: var(--vem-text-2); }
.vh-result__ref { margin: 4px 0 0; font-size: .875rem; color: var(--vem-text-2); }
.vh-result__body { display: flex; flex-direction: column; gap: 14px; }
.vh-result__body .vem-flash { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.vh-result__details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.vh-facts { margin: 0; border-top: 1px solid var(--vem-line); }
.vh-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vem-line); }
.vh-facts dt { color: var(--vem-text-2); }
.vh-facts dd { margin: 0; text-align: right; }
.vh-result__actions { display: flex; flex-direction: column; gap: 8px; }
.vh-result__actions .vem-btn { min-height: 48px; justify-content: center; }
.vh-result__details summary { justify-content: space-between; list-style: none; }
.vh-result__details summary::-webkit-details-marker { display: none; }
.vh-result__details[open] summary .vem-icon { transform: rotate(180deg); }

/* Live session (premium redesign, Tier 1). The institution colour is on the
   primary button and the meter only; status lives in badges with words. */
.vh-session { display: flex; flex-direction: column; gap: 24px; max-width: 1120px; }
.vh-session__head .vem-h1 { margin: 0; }
.vh-session__head .vh-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vh-session__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 960px) { .vh-session__grid { grid-template-columns: 340px minmax(0, 1fr); gap: 32px; } }
.vh-session__side, .vh-session__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vh-session__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.vh-session__bar .vem-h2, .vh-session__bar p { margin: 0; }
.vh-session__reports { display: flex; flex-direction: column; gap: 8px; }
.vh-session__reports-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.vh-session__reports-row .vem-btn, .vh-btn-block { width: 100%; justify-content: center; min-height: 48px; }
.vh-session__excuses, .vh-session__map { display: flex; flex-direction: column; gap: 14px; }
.vh-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.vh-qr__plate { background: #fff; padding: 8px; border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line); line-height: 0; }
.vh-qr__plate img { width: 100%; max-width: 240px; height: auto; }
.vh-qr__label { margin: 8px 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-muted); }
.vh-qr__code { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: .18em; line-height: 1.1; }
.vh-qr .vem-help { margin: 0 0 6px; }
.vh-count { display: flex; flex-direction: column; gap: 10px; }
.vh-count__figure { margin: 0; font-family: var(--vem-font-display); font-size: 2.6rem; line-height: 1; }
.vh-count__of { color: var(--vem-muted); font-size: .55em; }
.vh-session__bar .vh-count__of { font-size: .7em; }
.vh-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--vem-radius-pill); background: var(--vem-subtle); overflow: hidden; }
.vh-meter::-webkit-progress-bar { background: var(--vem-subtle); border-radius: var(--vem-radius-pill); }
.vh-meter::-webkit-progress-value { background: var(--vem-primary); border-radius: var(--vem-radius-pill); }
.vh-meter::-moz-progress-bar { background: var(--vem-primary); border-radius: var(--vem-radius-pill); }
.vh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vh-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line); background: var(--vem-surface); color: var(--vem-text); font: inherit; cursor: pointer; }
.vh-stat[aria-expanded="true"] { border-color: var(--vem-primary); box-shadow: inset 0 -3px 0 var(--vem-primary); }
.vh-stat:focus-visible { outline: 2px solid var(--vem-focus); outline-offset: 2px; }
.vh-stat__n { font-family: var(--vem-font-mono); font-size: 1.15rem; font-weight: 700; }
.vh-stat__label { font-size: .72rem; color: var(--vem-text-2); }
.vh-stat__sub { font-size: .68rem; color: var(--vem-muted); text-align: center; }
.vh-stats__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vh-stats__cats:empty { display: none; }
/* The session screen's stat lists scroll; a card that is also a .vh-panel does not (Tier 10). */
[data-panel].vh-panel { max-height: 360px; overflow: auto; }
.vh-panel__head { margin: 10px 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-muted); }
.vh-panel__empty { color: var(--vem-text-2); }
.vh-fold summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 600; list-style: none; }
.vh-fold summary::-webkit-details-marker { display: none; }
.vh-fold[open] summary .vem-icon { transform: rotate(180deg); }
.vh-fold__body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.vh-fold__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.vh-fold__line .vem-select, .vh-fold__line .vem-input { flex: 1 1 180px; min-width: 0; }
.vh-fold__title { font-weight: 600; }
.vh-fold .vem-field { margin: 0; }
.vh-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.vh-review { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.vh-review p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.vh-arrivals { max-height: 560px; overflow: auto; }
.vh-arrivals > li, .vh-session__excuses .vh-list > li { padding: 8px 0; }
.vh-arrivals > li { flex-wrap: wrap; }
.vh-arrivals__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.vh-arrivals__name { font-weight: 600; }
.vh-menu-field { padding: 6px 10px; margin: 0; }
.vh-excuse p { margin: 6px 0 0; }
.vh-map { height: 380px; width: 100%; border-radius: var(--vem-radius-md); z-index: 0; }
.vh-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.vh-dot--in { background: var(--vem-success); }
.vh-dot--out { background: var(--vem-danger); }
@media print { .vh-qr, .vh-fold, .vh-session__map, .vh-stats { display: none !important; } }

/* Leaflet's attribution link sits in running text: underline it, so it is not told apart by colour alone (axe link-in-text-block). */
.leaflet-container .leaflet-control-attribution a { text-decoration: underline; }
.vh-count__change { margin: 0; font-size: .9rem; color: var(--vem-text-2); }

/* Stage: the bare full-screen shell for the projection and the kiosk. */
.vh-stage-body { margin: 0; min-height: 100vh; background: var(--vem-ground); color: var(--vem-text); }
.vh-stage { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 40px); padding: clamp(20px, 4vh, 64px) clamp(20px, 6vw, 112px); }
.vh-stage__inst { margin: 0; font-size: .95rem; color: var(--vem-text-2); }
.vh-stage__title { margin: 4px 0 0; font-family: var(--vem-font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; }
.vh-stage__band[hidden] { display: none; }
.vh-stage__band { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--vem-radius-md); background: var(--vem-warning-soft); color: var(--vem-text); border: 1px solid var(--vem-warning); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.vh-stage__middle { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); align-items: center; justify-items: center; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .vh-stage__middle { grid-template-columns: auto minmax(0, 1fr); justify-items: start; } }
.vh-stage__plate { background: #fff; padding: clamp(10px, 1.6vw, 24px); border-radius: var(--vem-radius-lg); line-height: 0; }
.vh-stage__plate img { width: min(62vmin, 560px); height: auto; image-rendering: pixelated; }
.vh-stage__codeblock { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 18px); min-width: 0; }
.vh-stage__label { margin: 0; font-size: clamp(1.1rem, 2vw, 2.1rem); color: var(--vem-text-2); }
.vh-stage__code { margin: 0; font-size: clamp(4rem, 12.5vw, 15rem); font-weight: 700; letter-spacing: .1em; line-height: 1; }
.vh-stage__countdown { margin: 0; font-size: clamp(1rem, 1.8vw, 2.1rem); color: var(--vem-text-2); }
.vh-stage__bar { height: 8px; max-width: 520px; border-radius: var(--vem-radius-pill); background: var(--vem-subtle); overflow: hidden; }
.vh-stage__bar > div { height: 100%; width: 100%; background: var(--vem-primary); transition: width 1s linear; }
.vh-stage__nocam { margin: 0; font-size: clamp(1rem, 1.6vw, 1.9rem); color: var(--vem-text-2); }
.vh-stage__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: end; }
.vh-stage__countline { margin: 0; font-size: clamp(1.1rem, 2vw, 2.25rem); color: var(--vem-text-2); }
.vh-stage__count { font-family: var(--vem-font-display); font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: 1; color: var(--vem-text); }
.vh-stage__meter { grid-column: 1 / -1; height: 14px; }
.vh-stage__tools { grid-row: 1; grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vh-stage__closed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.vh-stage__ring { display: inline-flex; align-items: center; justify-content: center; width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--vem-line-strong); color: var(--vem-text-2); }
.vh-stage__ring .vem-icon { width: 56px; height: 56px; }
.vh-stage__closedtitle { margin: 0; font-family: var(--vem-font-display); font-weight: 400; font-size: clamp(3rem, 9vw, 8.75rem); line-height: 1; }
@media print { .vh-stage__tools { display: none !important; } }

/* Kiosk (Tier 1 §4): one code field or one tap on your name; 64 px targets. */
.vh-kiosk { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; padding: clamp(16px, 3vw, 32px); max-width: 1280px; margin: 0 auto; }
.vh-kiosk__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--vem-line); }
.vh-kiosk__activity { margin: 2px 0 0; font-weight: 600; font-size: 1.1rem; }
.vh-kiosk__net { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vh-kiosk__failed { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.vh-kiosk__ok { align-items: flex-start; }
.vh-kiosk__ok .vem-btn { min-height: 56px; margin-top: 8px; }
.vh-kiosk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) { .vh-kiosk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.vh-kiosk__code .vem-h1, .vh-kiosk__names .vem-h2 { margin: 0; }
.vh-kiosk__code { display: flex; flex-direction: column; gap: 14px; }
.vh-kiosk__form { display: flex; gap: 10px; flex-wrap: wrap; }
.vh-kiosk__input { flex: 1 1 220px; min-height: 64px; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .06em; }
.vh-kiosk__go { min-height: 64px; padding: 0 28px; font-size: 1.15rem; }
.vh-kiosk__names { display: flex; flex-direction: column; gap: 12px; }
.vh-kiosk__names .vem-input { min-height: 52px; }
.vh-kiosk__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.vh-kiosk__list li[hidden] { display: none; }
.vh-kiosk__name { width: 100%; min-height: 64px; padding: 10px 16px; text-align: left; font: inherit; font-size: 1.05rem; color: var(--vem-text); background: var(--vem-surface); border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); cursor: pointer; }
.vh-kiosk__name:hover { border-color: var(--vem-primary); background: var(--vem-primary-soft); }
.vh-kiosk__name:focus-visible { outline: 2px solid var(--vem-focus); outline-offset: 2px; }
.vh-code { display: flex; flex-direction: column; gap: 14px; }
.vh-code .vem-field { margin: 0; }
.vh-code__input { min-height: 64px; text-align: center; font-size: 2rem; letter-spacing: .4em; text-transform: uppercase; }
/* The stage shell loads no Tailwind; screen-reader-only labels still need hiding. */
.vh-stage-body .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vh-filters { margin-bottom: 12px; }
.vh-filters > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; list-style: none; }
.vh-filters > summary::-webkit-details-marker { display: none; }
.vh-filters[open] > summary .vem-icon { transform: rotate(180deg); }
.vh-filters .vem-field { margin: 0; }
.vh-figure { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--vem-line); }
.vh-figure p { margin: 0; }
.vh-figure__label { font-size: .85rem; color: var(--vem-text-2); }
.vh-figure__value { font-family: var(--vem-font-display); font-size: 2.6rem; line-height: 1; }
.vh-figure__unit { font-size: .55em; color: var(--vem-text-2); margin-left: 2px; }
.vh-figure__change { font-size: .9rem; color: var(--vem-text-2); }
.vh-strip { margin-bottom: 24px; }
.vh-strip .vem-h2 { margin: 0 0 10px; }
.vh-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vh-strip__list li { display: grid; grid-template-columns: minmax(80px, 9rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: 10px; font-size: .88rem; }
.vh-strip__label { color: var(--vem-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-strip__bar { height: 8px; }
.vh-strip__value { text-align: right; }
.vh-words { display: flex; flex-direction: column; gap: 12px; }
.vh-words .vem-input { min-width: 8rem; }

/* Page scaffolding shared by the reskinned screens (Tier 2). */
.vh-page { display: flex; flex-direction: column; gap: 20px; max-width: 1120px; }
.vh-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vh-page__head .vem-h1, .vh-page__head .vh-lede { margin-bottom: 0; }
.vh-page__head .vem-h1 { margin: 0; }
.vh-flash-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0; }
.vh-flash-row p, .vh-flash-row > span { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vh-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .vh-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vh-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vh-card-head .vem-h2 { margin: 0; }
.vh-list__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; color: var(--vem-text); text-decoration: none; }
.vh-list__link > .vem-icon { color: var(--vem-muted); flex: none; }
.vh-list__link:hover > span:first-child { text-decoration: underline; }
.vh-card-foot { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; }
.vh-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vh-empty .vem-h2, .vh-empty p { margin: 0; }
.vh-tiles { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.vh-tiles > div { padding: 14px 16px; background: var(--vem-surface); border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); }
.vh-tiles dt { font-size: .82rem; color: var(--vem-text-2); }
.vh-tiles dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vh-tiles__n { font-family: var(--vem-font-display); font-size: 2.2rem; line-height: 1; }
.vh-list__title { display: block; font-weight: 600; }
.vh-live { background: var(--vem-success-soft); border: 1px solid var(--vem-success); }
.vh-page--mid { max-width: 760px; }
.vh-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.vh-clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-prewrap { white-space: pre-wrap; text-align: left !important; }
.vh-review-card .vh-facts > div { flex-direction: column; align-items: flex-start; gap: 4px; }
.vh-card-head .vh-count__of { font-size: .8em; }

/* Activity page panels (Tier 2 §6) after the kit pass. */
.vh-panel { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.vh-panel > .vh-card-head { margin-bottom: 0; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--vem-line); }
.vh-panel .vem-h2 { margin: 0; }
.vh-panel .vem-table-wrap { margin: 0; }
.vh-label { display: block; margin-bottom: 4px; font-size: .85rem; font-weight: 600; color: var(--vem-text); }
.vh-divided { border-top: 1px solid var(--vem-line); padding-top: 12px; margin-top: 12px; }
.vh-link-danger { color: var(--vem-danger); }
.vh-flash-ok { background: var(--vem-success-soft); border: 1px solid var(--vem-success); color: var(--vem-text); }
.vh-panel .vem-input, .vh-panel .vem-select { min-height: 40px; }
.vh-panel form.flex > .vem-input, .vh-panel form.flex > .vem-select { flex: 1 1 140px; width: auto; min-width: 0; }

/* Line chart (GAP G17): the plot stretches, strokes do not; labels are HTML. */
.vh-chart { display: flex; flex-direction: column; gap: 6px; }
.vh-chart__frame { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 8px; }
.vh-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font-size: .75rem; line-height: 1; color: var(--vem-muted); text-align: right; }
.vh-chart__y span { margin: -.5em 0; }
.vh-chart__plot { position: relative; height: 220px; outline-offset: 4px; }
.vh-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vh-chart__grid { stroke: var(--vem-line); stroke-width: 1; }
.vh-chart__threshold { stroke: var(--vem-text-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vh-chart__line { fill: none; stroke: var(--vem-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vh-chart__dot { stroke: var(--vem-primary); stroke-width: 8; stroke-linecap: round; }
.vh-chart__x { display: flex; justify-content: space-between; margin-left: calc(2rem + 8px); font-size: .75rem; color: var(--vem-muted); }
.vh-chart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--vem-line-strong); pointer-events: none; }
.vh-chart__tip { position: absolute; top: 4px; transform: translateX(-50%); padding: 6px 8px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font-size: .8rem; white-space: nowrap; pointer-events: none; }
.vh-chart__key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; font-size: .8rem; color: var(--vem-text-2); }
.vh-chart__key span::before { content: ""; display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--vem-primary); }
.vh-chart__key .vh-chart__key-threshold::before { border-top: 2px dashed var(--vem-text-2); }
.vh-views { display: inline-flex; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); overflow: hidden; }
.vh-views a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--vem-text-2); text-decoration: none; }
.vh-views a[aria-current] { background: var(--vem-subtle); color: var(--vem-text); font-weight: 600; }
form.vh-filters, div.vh-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
form.vh-filters .vem-field, div.vh-filters .vem-field { flex: 1 1 180px; max-width: 28rem; }
.vh-num { text-align: right; }
.vh-strip--badged .vh-strip__list li { grid-template-columns: minmax(80px, 9rem) minmax(0, 1fr) auto; }

/* Timetable (Tier 3): a week of days, seven across on a wide screen. */
.vh-tt-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .vh-tt-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .vh-tt-week { grid-template-columns: minmax(0, 1fr); } }
.vh-tt-day { display: flex; flex-direction: column; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); background: var(--vem-surface); overflow: hidden; }
.vh-tt-day--today { border-color: var(--vem-primary); }
.vh-tt-day__head { margin: 0; padding: 8px 12px; display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--vem-line); }
.vh-tt-day__head .vem-mono { font-weight: 400; color: var(--vem-text-2); }
.vh-tt-day--today .vh-tt-day__head { background: var(--vem-subtle); }
.vh-tt-day > ul { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.vh-tt-slot { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 10px; border-left: 3px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-subtle); color: var(--vem-text); text-decoration: none; }
.vh-tt-slot--teaching { border-left-color: var(--vem-primary); }
.vh-tt-slot__time { font-size: .78rem; color: var(--vem-text-2); }
.vh-tt-slot__name { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.vh-tt-slot__sub { font-size: .75rem; color: var(--vem-text-2); }
.vh-tt-slot__sub:empty { display: none; }
.vh-tt-none { padding: 6px 2px; font-size: .8rem; color: var(--vem-muted); }
.vh-tt-key { margin-top: 12px; }
.vh-tt-key .vh-tt-key--attending::before { border-top-color: var(--vem-line-strong); border-top-width: 3px; }
.vh-tt-key .vh-tt-key--teaching::before { border-top-width: 3px; }
.vh-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vh-form-grid .vem-field { margin: 0; }
.vh-span-all { grid-column: 1 / -1; }
@media (max-width: 480px) { .vh-form-grid { grid-template-columns: minmax(0, 1fr); } }
/* Four fields abreast (platform pricing); two on a tablet, one on a phone. */
.vh-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .vh-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vh-form-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* A number in a table row: wide enough for the value, not the column. */
.vh-input-num { width: 6.5rem; }
.vh-scroll { max-height: 460px; overflow: auto; }
.vh-choices { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vh-choices > legend { margin-bottom: 6px; font-weight: 600; }
.vh-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); cursor: pointer; }
.vh-choice:has(input:checked) { border-color: var(--vem-primary); background: var(--vem-subtle); }
.vh-choice input { accent-color: var(--vem-primary); }
.vh-row-actions--start { justify-content: flex-start; }
.vem-card > form.vh-filters, .vem-card > p + form { margin-top: 12px; }
.vh-search { display: flex; align-items: center; gap: 6px; }
.vh-search .vem-input { width: 14rem; max-width: 100%; min-height: 40px; }
.vh-flash-stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.vh-flash-stack p { margin: 0; }

/* First-run checklist (GAP G28). */
.vh-setup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vh-setup .vh-card-head { margin: 0; }
.vh-setup__steps li { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
.vh-setup__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--vem-line-strong); font-size: .85rem; font-weight: 600; color: var(--vem-text-2); }
.vh-setup__next .vh-setup__mark { border-color: var(--vem-primary); color: var(--vem-text); }
.vh-setup__body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vh-setup__features { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.vh-setup__hide { align-self: flex-end; }
.vh-auth-page { padding: 32px 16px 48px; }
.vh-institution { display: flex; align-items: center; gap: 10px; margin: 0; }
.vh-institution__logo { width: 40px; height: 40px; object-fit: contain; border-radius: var(--vem-radius-md); }
.vh-ticket { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vh-ticket__code { margin: 0; font-size: 2rem; letter-spacing: .12em; }
.vh-planned { align-self: stretch; }
.vh-planned li { min-height: 40px; }

/* Tier 4 public pages: a plain shell for error and card pages, the address field, avatars. */
.vh-plain { min-height: 100vh; display: flex; flex-direction: column; background: var(--vem-ground); color: var(--vem-text); }
.vh-plain > main { flex: 1; }
.vh-plain__head { display: flex; align-items: center; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--vem-line); background: var(--vem-surface); }
.vh-plain__head a { color: var(--vem-text); text-decoration: none; }
.vh-plain__foot { margin: 0; padding: 14px 16px; text-align: center; font-size: .75rem; color: var(--vem-muted); }
.vh-plain__foot a { color: var(--vem-text-2); }
.vh-affix { display: flex; align-items: stretch; }
.vh-affix .vem-input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vh-affix__suffix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--vem-line-strong); border-left: 0; border-radius: 0 var(--vem-radius-md) var(--vem-radius-md) 0; background: var(--vem-subtle); color: var(--vem-text-2); font-size: .9rem; }
.vh-avatar { flex: none; width: 88px; height: 88px; border-radius: var(--vem-radius-lg); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--vem-subtle); color: var(--vem-text); font-family: var(--vem-font-display); font-size: 2rem; }
.vh-institution__initial { display: inline-flex; align-items: center; justify-content: center; background: var(--vem-subtle); color: var(--vem-text); font-weight: 600; }
.vh-fp-page { max-width: 880px; margin: 0 auto; }

/* Tier 4 settings pages. */
[hidden] { display: none !important; }
.vh-feature { display: flex; flex: 1; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
.vh-feature input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--vem-primary); }
.vh-feature__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vh-feature--held { opacity: .6; cursor: default; }
.vh-feature-group { margin: 0; }
.vh-feature-group > legend { padding: 0 4px; }
.vh-choices--stack { grid-template-columns: minmax(0, 1fr); }
.vh-choice--card { align-items: flex-start; padding: 12px 14px; }
.vh-choice--card input { margin-top: 4px; }
.vh-chipbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); }
.vh-chipbox input { flex: 1; min-width: 150px; border: 0; background: transparent; color: var(--vem-text); font: inherit; outline: none; }
.vh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--vem-radius-pill); background: var(--vem-subtle); border: 1px solid var(--vem-line-strong); font-size: .85rem; }
.vh-chip button { border: 0; background: none; color: var(--vem-muted); cursor: pointer; padding: 0; min-width: 24px; min-height: 24px; }
.vh-views button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--vem-text-2); font: inherit; cursor: pointer; }
.vh-views button[aria-pressed="true"] { background: var(--vem-subtle); color: var(--vem-text); font-weight: 600; }
.vh-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vh-plans__current { border-color: var(--vem-primary); }
.vh-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; text-align: left; }
.vh-tier[aria-pressed="true"] { border-color: var(--vem-primary); box-shadow: 0 0 0 1px var(--vem-primary); }
.vh-tier:not([disabled]) { cursor: pointer; }
.vh-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.vh-steps li { padding: 10px 12px; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-md); background: var(--vem-subtle); color: var(--vem-text-2); font-weight: 600; font-size: .88rem; }
.vh-steps__n { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-muted); }
.vh-steps__now { border-color: var(--vem-primary); color: var(--vem-text); }
.vh-steps__done { border-color: var(--vem-success); background: var(--vem-success-soft); color: var(--vem-text); }
.vh-ts input[type="text"], .vh-ts textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; }
.vh-ts textarea { font-family: var(--vem-font-mono); }
.vh-ts input[type="color"] { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); cursor: pointer; }
.vh-ts input[type="file"] { flex: 1; min-width: 0; font-size: .85rem; color: var(--vem-text-2); }
.vh-colour { flex-wrap: nowrap; }
.vh-locked { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; border: 1px dashed var(--vem-line-strong); border-radius: var(--vem-radius-md); color: var(--vem-text-2); }
.vh-initials { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--vem-radius-md); background: var(--vem-primary); color: var(--vem-on-primary); font-weight: 700; }
.vh-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--vem-surface); box-shadow: 0 0 0 1px var(--vem-line-strong), inset -16px 0 0 var(--sw-a); background: var(--sw-p); cursor: pointer; }
.vh-ts__preview { position: sticky; top: 5rem; }
.vh-preview { border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); overflow: hidden; }
.vh-preview__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--vem-primary); color: var(--vem-on-primary); }
.vh-preview__logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: var(--vem-radius-sm); font-size: .7rem; font-weight: 700; }
.vh-preview__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-preview__chip { padding: 1px 8px; border-radius: var(--vem-radius-pill); background: var(--vem-accent); font-size: .7rem; font-weight: 700; }
.vh-preview__body { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--vem-subtle); font-size: .85rem; }
.vh-preview__body p { margin: 0; }
.vh-preview__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--vem-primary); vertical-align: middle; }
.vh-preview__btn { display: block; padding: 8px; border-radius: var(--vem-radius-md); background: var(--vem-primary); color: var(--vem-on-primary); text-align: center; font-weight: 600; }
.vh-preview__link { color: var(--vem-primary); font-weight: 600; text-align: center; }

/* Bulk actions on a list (GAP G30): the bar shows once something is ticked. */
.vh-bulkbar { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-lg); background: var(--vem-surface); }
.vh-bulkform:not(:has(input[name="ids"]:checked)) .vh-bulkbar { display: none; }

/* Venue test (GAP G31). */
.vh-venue-test { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.vh-vt-result:empty { display: none; }
.vh-vt-result { padding: 10px 12px; border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line-strong); background: var(--vem-subtle); }
.vh-vt-result--success { border-color: var(--vem-success); background: var(--vem-success-soft); }
.vh-vt-result--warning { border-color: var(--vem-warning); background: var(--vem-warning-soft); }

/* Tier 5 groups and places. */
/* Grows across a row; a basis of auto so a phone's stacked (column) form does not make it 260px tall. */
.vh-typeahead { position: relative; flex: 1 1 auto; min-width: min(260px, 100%); }
.vh-typeahead__results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 0; list-style: none; max-height: 15rem; overflow: auto; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); font-size: .9rem; }
.vh-typeahead__results li { min-height: 44px; }
.vh-typeahead__option { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; cursor: pointer; color: var(--vem-text); }
.vh-typeahead__option:hover, .vh-typeahead__option[aria-selected="true"] { background: var(--vem-subtle); }
.vh-typeahead__name { font-weight: 500; }
.vh-typeahead__sub, .vh-typeahead__none { color: var(--vem-muted); }
.vh-typeahead__none { display: flex; align-items: center; padding: 8px 12px; }
.vh-typeahead--block { flex: none; margin-bottom: 8px; }
/* A status line a script sets (the activity page's location messages). */
.vh-note--ok { color: var(--vem-success); }
.vh-note--warn { color: var(--vem-warning); font-weight: 500; }
.vh-note--err { color: var(--vem-danger); }
/* A label whose control is waiting on another field. */
.vh-is-off { color: var(--vem-muted); }
.vh-grow { flex: 1 1 auto; min-width: 0; }
.vh-filters > .vem-help { flex-basis: 100%; margin: 0; }
.vh-populate { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vh-widgets #id_name, .vh-widgets #id_fallback_radius_m, .vh-widgets #id_shared_activities { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; }
.vh-widgets #id_fallback_radius_m { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vh-widgets #id_shared_activities { padding: 6px; }
.vh-affix--narrow { max-width: 12rem; }
.vh-venue-grid { align-items: start; }
.vh-howto { margin: 8px 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 8px; color: var(--vem-text-2); }

/* Tier 5 forms: Django widgets without a class, type pills, key-value rows, the unit landing preview. */
.vh-rawform input[type="text"], .vh-rawform input[type="number"], .vh-rawform input[type="date"], .vh-rawform input[type="email"], .vh-rawform select, .vh-rawform textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; }
.vh-rawform input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--vem-primary); }
.vh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.vh-pill { min-height: 36px; padding: 0 14px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text-2); font: inherit; font-weight: 600; cursor: pointer; }
.vh-pill[aria-pressed="true"] { border-color: var(--vem-primary); background: var(--vem-primary); color: var(--vem-on-primary); }
.kv-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.kv-row input { flex: 1 1 0; min-width: 0; }
.kv-remove { flex: none; width: 40px; height: 40px; border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line-strong); background: var(--vem-surface); color: var(--vem-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.kv-remove:hover { background: var(--vem-danger-soft); color: var(--vem-danger); border-color: var(--vem-danger); }
.kv-add { margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--vem-primary); font: inherit; font-weight: 700; cursor: pointer; }
.vh-landing__tree { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 12px; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); background: var(--vem-subtle); }
.vh-landing__root { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-weight: 700; }
.vh-landing__new { display: flex; align-items: center; gap: 8px; margin-left: 14px; padding: 10px 12px; border: 1.5px dashed var(--vem-primary); border-radius: var(--vem-radius-md); background: var(--vem-surface); }
#gf-search { padding-left: 36px; }

/* Gradebook (Tier 6): score cells, a refused one marked, one item at a time. */
.vh-score { width: 5.5rem; min-height: 40px; text-align: right; }
.vh-score--bad { border: 2px solid var(--vem-danger); }
.vh-score__why { display: block; font-size: .75rem; }
.vh-grade-matrix th[scope="row"] { font-weight: 500; white-space: nowrap; }
.vh-grade-one > li { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.vh-grade-one__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vh-feedback summary { min-height: 36px; display: inline-flex; align-items: center; cursor: pointer; color: var(--vem-text-2); font-size: .88rem; }
.vh-feedback textarea { width: 100%; }
.vh-grade-row { align-items: flex-start; padding: 10px 0; }
.vh-grade-feedback { display: block; margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--vem-line-strong); color: var(--vem-text-2); font-size: .9rem; white-space: pre-line; }

/* Tier 7 people and account pages. */
.pf-link { color: var(--vem-primary); font-weight: 600; text-decoration: none; }
.pf-link:hover { text-decoration: underline; }
.vh-rawform input[type="tel"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; }
.vh-rawform input[type="file"] { width: 100%; font-size: .9rem; color: var(--vem-text-2); }
.vh-profile__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vh-profile__av { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--vem-radius-lg); }
.vh-profile__av .vh-avatar { width: 76px; height: 76px; font-size: 1.6rem; }
.vh-profile__pencil { position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--vem-radius-sm); border: 2px solid var(--vem-surface); background: var(--vem-primary); color: var(--vem-on-primary); }
.vh-break { word-break: break-all; }
.vh-flash-stack .vh-list > li { min-height: 40px; }

/* Front-page editor (Tier 8). */
.vh-fp-blocks { gap: 0; }
.vh-fp-block { flex-wrap: wrap; gap: 10px; cursor: grab; }
.vh-fp-block__grip { color: var(--vem-muted); font-size: 18px; line-height: 1; user-select: none; }
.vh-fp-block__summary { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-fp-block .vh-row-actions form { margin: 0; }
.vh-swatch--sm { width: 24px; height: 24px; flex: none; }
.vh-fp-kinds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vh-fp-kinds form { margin: 0; }
.vh-fp-kind { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; cursor: pointer; }
.vh-fp-kind:hover { border-color: var(--vem-primary); }
.vh-fp-edit { display: grid; gap: 20px; }
.vh-fp-edit--preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 960px) { .vh-fp-edit--preview { grid-template-columns: minmax(0, 1fr); } }
.vh-fp-preview { position: sticky; top: 16px; }
.vh-fp-preview iframe { width: 100%; height: 560px; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); background: var(--vem-surface); }
.vh-fp-rich { min-height: 220px; background: var(--vem-surface); color: var(--vem-text); border-radius: 0 0 var(--vem-radius-md) var(--vem-radius-md); }
.ql-toolbar.ql-snow { border-radius: var(--vem-radius-md) var(--vem-radius-md) 0 0; background: var(--vem-subtle); }
.ql-container.ql-snow { border-radius: 0 0 var(--vem-radius-md) var(--vem-radius-md); font: inherit; font-size: 15px; }
.vh-fp-colour { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); cursor: pointer; }
.vh-fp-hex { width: 8rem; }
.vh-fp-thumb { max-height: 140px; border-radius: var(--vem-radius-md); }
.vh-fp-gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 10px; }
.vh-fp-pick { display: grid; gap: 4px; cursor: pointer; }
.vh-fp-pick img { width: 100%; height: 72px; object-fit: cover; border-radius: var(--vem-radius-sm); border: 2px solid transparent; }
.vh-fp-pick--on img, .vh-fp-pick:has(input:checked) img { border-color: var(--vem-primary); }
.vh-fp-pick .vh-check { min-height: 32px; font-size: .8rem; }
.vh-rawform input[type="url"], .vh-rawform input[type="password"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md); background: var(--vem-surface); color: var(--vem-text); font: inherit; }

/* The apex front page: pictures first, a heading and a line beside each.
   The pictures are animated SVGs in static/img/landing/; the sector stages
   below are drawn here so their words stay real text. */
.vh-home { display: flex; flex-direction: column; gap: 64px; padding: 32px 0 64px; }
@media (min-width: 960px) { .vh-home { gap: 104px; } }
.vh-home__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 960px) { .vh-home__hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding-top: 24px; } }
.vh-home__kicker, .vh-home__eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vem-primary); }
.vh-home__eyebrow { display: block; color: var(--vem-text-2); }
.vh-home__title { margin: 12px 0 0; font-family: var(--vem-font-display); font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -.02em; color: var(--vem-text); text-wrap: balance; }
.vh-home__lede { margin: 16px 0 0; max-width: 30rem; font-size: 1.15rem; line-height: 1.6; color: var(--vem-text-2); }
.vh-home__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vh-home__actions .vem-btn { min-height: 48px; }
.vh-home__art { display: block; width: 100%; height: auto; border-radius: var(--vem-radius-lg); }
.vh-home__art--hero, .vh-home__live .vh-home__art, .vh-home__family .vh-home__art { box-shadow: 0 30px 60px -30px rgb(3 48 41 / .55); }
.vh-home__family { display: block; width: 100%; max-width: 960px; align-self: center; }
@media (max-width: 640px) { .vh-home__family { max-width: 420px; } }
.vh-home__section { display: flex; flex-direction: column; gap: 24px; }
.vh-home__head { max-width: 42rem; }
.vh-home__head .vem-h2, .vh-home__end .vem-h2 { margin: 8px 0 0; font-family: var(--vem-font-display); font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.vh-home__live { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; justify-items: center; }
.vh-home__phone { display: block; width: 100%; max-width: 240px; height: auto; filter: drop-shadow(0 24px 30px rgb(3 48 41 / .35)); }
@media (min-width: 760px) { .vh-home__live { grid-template-columns: minmax(0, 1fr) 220px; } }
.vh-home__grid, .vh-home__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .vh-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-home__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vh-home__grid h3, .vh-home__steps h3, .vh-home__sector h3 { margin: 14px 0 0; font-size: 1.1rem; color: var(--vem-text); }
.vh-home__grid p, .vh-home__sectortext p:not(.vh-home__eyebrow) { margin: 6px 0 0; color: var(--vem-text-2); line-height: 1.5; }
.vh-home__art + h3 { margin-top: 14px; }
.vh-home__steps h3 { display: flex; align-items: center; gap: 10px; }
.vh-home__step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--vem-radius-pill); background: var(--vem-primary); color: var(--vem-on-primary); font-family: var(--vem-font-mono); font-size: .9rem; font-weight: 700; }
.vh-home__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 600; color: var(--vem-primary); }

/* Sector switcher: chips become tabs in static/js/landing.js. */
.vh-home__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-home__chips[hidden], .vh-home__sector[hidden] { display: none; }
.vh-home__chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-pill); background: var(--vem-surface); color: var(--vem-text-2); font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.vh-home__chip:hover { border-color: var(--vem-primary); transform: translateY(-1px); }
.vh-home__chip[aria-selected="true"] { background: var(--vem-primary); border-color: transparent; color: var(--vem-on-primary); }
.vh-home__sectors { display: flex; flex-direction: column; gap: 16px; }
.vh-home__sector { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 760px) { .vh-home__sector { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.vh-home__sector h3 { margin-top: 10px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-family: var(--vem-font-display); line-height: 1.15; }
.vh-home__sectortext { animation: vhShowUp .45s ease both; }

.vh-show { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: 28px; border-radius: var(--vem-radius-lg); color: white; overflow: hidden;
  background: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(160deg, var(--vem-teal-900), var(--vem-teal-950) 60%, rgb(10 25 29)); }
.vh-show p { margin: 0; }
.vh-show__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vem-teal-200); }
.vh-show__live { display: inline-flex; align-items: center; gap: 8px; color: white; letter-spacing: 0; text-transform: none; font-size: .85rem; }
.vh-show__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vem-teal-400); box-shadow: 0 0 0 4px rgb(69 196 178 / .2); animation: vhBlink 1.6s ease-in-out infinite; }
.vh-show__roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vh-show__roster li { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 12px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); animation: vhRowIn .5s ease both; }
.vh-show__roster li:nth-child(2) { animation-delay: .18s; }
.vh-show__roster li:nth-child(3) { animation-delay: .36s; }
.vh-show__roster li:nth-child(4) { animation-delay: .54s; }
.vh-show__roster .vem-icon { flex: none; color: var(--vem-teal-300); }
.vh-show__face { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vem-teal-500), var(--vem-teal-700)); font-size: .75rem; font-weight: 700; }
.vh-show__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vh-show__lines span { height: 8px; width: 66%; border-radius: var(--vem-radius-pill); background: rgb(255 255 255 / .5); }
.vh-show__lines span + span { height: 7px; width: 40%; background: rgb(255 255 255 / .18); }
.vh-show__roster li:nth-child(even) .vh-show__lines span { width: 54%; }
.vh-show__big { font-family: var(--vem-font-display); font-size: clamp(3rem, 7vw, 4.25rem); line-height: 1; letter-spacing: -.02em; animation: vhShowUp .5s ease both; }
.vh-show__unit { margin-top: 6px !important; color: var(--vem-teal-200); font-weight: 600; }
.vh-show__bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; margin-top: 24px; }
.vh-show__bars span { flex: 1; height: 50%; border-radius: 6px 6px 0 0; background: rgb(255 255 255 / .14); transform-origin: bottom; animation: vhGrow 1.2s ease both; }
.vh-show__bars span:nth-child(2) { height: 72%; animation-delay: .1s; }
.vh-show__bars span:nth-child(3) { height: 60%; animation-delay: .2s; }
.vh-show__bars span:nth-child(4) { height: 92%; animation-delay: .3s; background: linear-gradient(180deg, var(--vem-teal-300), var(--vem-teal-700)); }
.vh-show__bars span:nth-child(5) { height: 78%; animation-delay: .4s; }
.vh-show__badge { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 14px; padding: 6px 12px; border-radius: var(--vem-radius-pill); background: rgb(69 196 178 / .18); color: var(--vem-teal-200); font-size: .85rem; font-weight: 700; }
.vh-show__meter { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--vem-radius-pill); background: rgb(255 255 255 / .12); overflow: hidden; }
.vh-show__meter::-webkit-progress-bar { background: rgb(255 255 255 / .12); }
.vh-show__meter::-webkit-progress-value { background: var(--vem-teal-400); border-radius: var(--vem-radius-pill); }
.vh-show__meter::-moz-progress-bar { background: var(--vem-teal-400); border-radius: var(--vem-radius-pill); }

.vh-home__faq { display: flex; flex-direction: column; max-width: 48rem; }
.vh-home__faq .vh-fold + .vh-fold { border-top: 1px solid var(--vem-line); }
.vh-home__faq .vh-fold p { margin: 0 0 12px; color: var(--vem-text-2); line-height: 1.55; }

.vh-home__end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: clamp(44px, 7vw, 80px) clamp(24px, 5vw, 64px); border-radius: 28px; color: white;
  background: url("../img/landing/cta-bg.svg") center / cover no-repeat, linear-gradient(160deg, var(--vem-teal-800), var(--vem-teal-950) 60%, rgb(10 25 29)); }
.vh-home__end .vem-h2 { max-width: 34rem; margin: 0; color: white; }
.vh-home__end .vh-home__actions { justify-content: center; }
.vh-home__ghost { color: white; background: transparent; border: 1px solid rgb(255 255 255 / .4); }
.vh-home__ghost:hover { background: rgb(255 255 255 / .08); color: white; }

@keyframes vhRowIn { from { opacity: 0; transform: translateX(12px); } }
@keyframes vhShowUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes vhGrow { from { transform: scaleY(.05); } }
@keyframes vhBlink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .vh-home *, .vh-home *::before { animation: none !important; transition: none !important; }
}

/* Tier 9 (D7): deleting an institution, on its own at the foot of the page. */
.vh-danger-zone { border-color: var(--vem-danger); }
.vh-danger-zone .vem-h2 { color: var(--vem-danger); }
.vh-danger-zone .vh-facts dd { text-align: left; }
.vh-danger-zone .vh-facts > div { flex-direction: column; gap: 4px; }

/* Tier 9 (D7): the Vem-Portal sign-in page. */
.vh-auth-form { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.vh-auth-form .vem-h1 { margin: 0; }
.vh-auth-form__switch { display: flex; justify-content: center; margin-bottom: 10px; }

/* Tier 9 (D7): an absolutely placed .sr-only inside a scrolling table must not
   widen the page; a state badge stays on one line. */
.vem-table-wrap { position: relative; }
.vem-table .vem-badge { white-space: nowrap; }

/* G6: check-ins kept on this phone, sent from any signed-in page. */
.vh-phone-queue { margin: 0 0 16px; }

/* Tier 10 (D7): the sign-in side panel and sign-in buttons. */
.vh-auth-aside { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); background: var(--vem-primary-soft); color: var(--vem-on-primary-soft); }
.vh-auth-aside__inner { max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.vh-auth-aside__mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--vem-radius-md); background: var(--vem-primary); color: var(--vem-on-primary); }
.vh-auth-aside__mark .vem-icon { width: 24px; height: 24px; }
.vh-auth-aside__title { margin: 0; font-family: var(--vem-font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; color: var(--vem-on-primary-soft); }
.vh-auth-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: .95rem; }
.vh-auth-aside__list li { display: flex; align-items: center; gap: 10px; }
.vh-auth-aside__list .vem-icon { flex: none; color: var(--vem-on-primary-soft); }
.vh-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: .75rem; color: var(--vem-muted); }
.vh-or::before, .vh-or::after { content: ""; flex: 1; height: 1px; background: var(--vem-line); }
.vh-sso-form { margin: 0 0 10px; }
.vh-sso-form:last-child { margin-bottom: 0; }
.vh-sso-btn { width: 100%; min-height: 44px; justify-content: center; }
.vh-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; min-height: 44px; }

/* Tier 10 (D7): activity page stats, the shorter map, the dashboard view switch. */
.vh-stat-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
@media (min-width: 640px) { .vh-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vh-statline { display: flex; align-items: center; gap: 12px; }
.vh-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--vem-radius-md); background: var(--vem-subtle); color: var(--vem-primary); }
.vh-stat-icon .vem-icon { width: 20px; height: 20px; }
.vh-map--short { height: 320px; }
.vh-seg { display: inline-flex; gap: 4px; padding: 2px; margin-top: 8px; border-radius: var(--vem-radius-md); background: var(--vem-subtle); }
.vh-seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--vem-radius-md); font-size: .85rem; font-weight: 600; color: var(--vem-text-2); text-decoration: none; }
.vh-seg a[aria-current="page"] { background: var(--vem-surface); color: var(--vem-text); box-shadow: inset 0 0 0 1px var(--vem-line); }
.vh-empty__icon .vem-icon { width: 40px; height: 40px; color: var(--vem-muted); }
.vh-role-request { align-items: flex-end; }

/* Tier 10 (D7): the map editors (zone and venue). */
.vh-geo { display: grid; gap: 10px; }
.vh-geo__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.vh-geo__label { font-weight: 600; font-size: .9rem; }
.vh-geo__map { height: 340px; width: 100%; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-md); z-index: 0; }
.vh-geo__search { position: relative; }
.vh-geo__search .vem-input { width: 100%; }
.vh-geo__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vem-muted); pointer-events: none; }
.vh-geo__results { position: absolute; z-index: 20; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 15rem; overflow: auto; background: var(--vem-surface); border: 1px solid var(--vem-line); border-radius: var(--vem-radius-md); box-shadow: var(--vem-shadow-md); }
.vh-geo__option { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; cursor: pointer; color: var(--vem-text); }
.vh-geo__option:hover { background: var(--vem-subtle); }
.vh-geo__note { padding: 10px 12px; color: var(--vem-muted); }

/* Phones (premium-v2 AUDIT.md F2-F3, vem-design rule #25): names and titles wrap,
   never cut to one line with an ellipsis; a row's end slot drops under its title. */
@media (max-width: 599px) {
  .truncate, .vh-clip, .vh-strip__label, .vh-preview__name, .vh-fp-block__summary {
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .vh-list > li { flex-wrap: wrap; }
  .vh-list__title, .vh-list__sub { overflow-wrap: anywhere; }
}

/* The institution switch screen and the apex chooser (V-D68): one card each. */
.vh-inst-grid { list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vh-inst-card { display:flex; align-items:center; gap:14px; height:100%; padding:18px; border-radius:var(--vem-radius-lg, 14px);
  border:1px solid var(--vem-line); background:var(--vem-surface); color:var(--vem-text); text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
a.vh-inst-card:hover, a.vh-inst-card:focus-visible { border-color:var(--vem-primary); box-shadow:0 8px 24px rgba(15,23,42,.10); transform:translateY(-1px); }
.vh-inst-card.is-current { border-color:var(--vem-primary); background:var(--vem-primary-soft); }
.vh-inst-card__logo { flex:none; width:48px; height:48px; border-radius:12px; object-fit:contain; }
.vh-inst-card__initial { display:inline-flex; align-items:center; justify-content:center; font-size:20px; font-weight:700;
  background:var(--vem-primary); color:var(--vem-on-primary); }
.vh-inst-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vh-inst-card__name { font-size:15px; font-weight:650; overflow-wrap:anywhere; }
.vh-inst-card__words { font-size:13px; color:var(--vem-text-2); overflow-wrap:anywhere; }
.vh-inst-card__number { font-size:12px; color:var(--vem-muted); }
.vh-inst-card__here { flex:none; display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--vem-primary); }
.vh-inst-card__go { flex:none; color:var(--vem-muted); transition:transform .15s, color .15s; }
a.vh-inst-card:hover .vh-inst-card__go { color:var(--vem-primary); transform:translateX(2px); }
html.dark .vh-inst-card { border-color:rgba(255,255,255,0.10); }
html.dark a.vh-inst-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .vh-inst-card, .vh-inst-card__go { transition:none; } a.vh-inst-card:hover { transform:none; } }

/* Motion (GAPS G54): pages glide in on same-origin navigation, where the browser
   supports view transitions; elsewhere navigation stays instant. Nothing else
   moves. All of it is off under prefers-reduced-motion. */
:root { --vem-ease: cubic-bezier(.2, .7, .2, 1); --vem-dur-1: 160ms; --vem-dur-2: 300ms; --vem-dur-3: 550ms; }
@view-transition { navigation: auto; }
.vh-content { view-transition-name: page; }
::view-transition-old(page) { animation: vh-page-out var(--vem-dur-1) var(--vem-ease) both; }
::view-transition-new(page) { animation: vh-page-in var(--vem-dur-2) var(--vem-ease) both; }
@keyframes vh-page-out { to { opacity: 0; } }
@keyframes vh-page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
}

/* Press and pending feedback (shell pass, 2026-10-27): a button answers the
   press at once, and a posted form's button shows it is working. */
.vem-btn { transition: transform var(--vem-dur-1) var(--vem-ease), background-color .15s, border-color .15s, color .15s; }
.vem-btn:active:not(:disabled) { transform: scale(.98); }
button[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
    border-radius: 50%; border: 2px solid currentColor; border-color: var(--vem-text-2) transparent var(--vem-text-2) var(--vem-text-2);
    animation: vh-spin .7s linear infinite; }
.vem-btn--primary[aria-busy="true"]::after { border-color: var(--vem-on-primary) transparent var(--vem-on-primary) var(--vem-on-primary); }
@keyframes vh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .vem-btn, .vem-btn:active { transition: none; transform: none; }
    button[aria-busy="true"]::after { animation: none; border-color: var(--vem-text-2); }
}

/* A meter under the at-risk line (CLASS-MAP: vh-meter--warn). */
.vh-meter--warn::-webkit-progress-value { background: var(--vem-warning); }
.vh-meter--warn::-moz-progress-bar { background: var(--vem-warning); }

/* Guardian portal: one surface per child (HANDOFF §19). Sections inside it are
   separated by space and hairlines, never by a second box. */
.vh-child { display: flex; flex-direction: column; gap: 22px; padding: 22px; }
.vh-child__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vh-child__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 17px; background: var(--vem-primary-soft); color: var(--vem-on-primary-soft); }
.vh-child__who { flex: 1; min-width: 160px; }
.vh-child__name { margin: 0; font-size: 1.15rem; font-weight: 650; line-height: 1.3; }
.vh-child__sub { margin: 2px 0 0; font-size: 13px; color: var(--vem-text-2); }
.vh-child__figures { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vh-child__figures > div { padding: 14px 16px; border-radius: var(--vem-radius-md); background: var(--vem-subtle); }
.vh-child__figures dt { font-size: 13px; color: var(--vem-text-2); }
.vh-child__figures dd { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.vh-child__n { font-family: var(--vem-font-display); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vh-child__n small { font-family: var(--vem-font-sans); font-size: 1rem; margin-left: 2px; color: var(--vem-text-2); }
.vh-child__n.is-warn { color: var(--vem-warning); }
.vh-child__part { display: flex; flex-direction: column; gap: 4px; }
.vh-child__label { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-muted); }
.vh-child__rows { list-style: none; margin: 0; padding: 0; }
.vh-child__rows > li { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--vem-line); }
.vh-child__rows > li:first-child { border-top: 0; }
.vh-child__what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vh-child__time { flex: none; color: var(--vem-text-2); }
.vh-child__meter { flex: none; width: 64px; }
.vh-child__pct, .vh-child__grade { flex: none; min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.vh-child__grade { color: var(--vem-text-2); }
html.dark .vh-child__figures > div { background: rgba(255,255,255,0.05); }
html.dark .vh-child__rows > li { border-color: rgba(255,255,255,0.08); }
@media (max-width: 599px) { .vh-child { padding: 16px; } .vh-child__meter { display: none; } }

/* Settings-style groups (My data, and any page of switches and requests): a
   heading and one sentence on the left of a calm card; rows split by hairlines,
   actions bottom-right. Two columns from 900 px, one below. */
.vh-settings { display: grid; gap: 12px 32px; padding: 8px 0 20px; border-bottom: 1px solid var(--vem-line); }
.vh-settings:last-of-type { border-bottom: 0; }
@media (min-width: 900px) { .vh-settings { grid-template-columns: 220px 1fr; } }
.vh-settings__title { margin: 0; font-size: 15px; font-weight: 650; }
.vh-settings__sub { margin: 4px 0 0; font-size: 13px; color: var(--vem-text-2); }
.vh-settings__body { padding: 6px 20px; margin: 0; }
.vh-settings__body.vh-stack, form.vh-settings__body { padding: 16px 20px; }
.vh-settings__rows { list-style: none; margin: 0; padding: 0; }
.vh-settings__rows > li, .vh-settings__row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0; }
.vh-settings__rows > li + li { border-top: 1px solid var(--vem-line); }
.vh-settings__row { padding: 14px 20px; }
.vh-settings__label { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.vh-settings__icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--vem-subtle); color: var(--vem-text-2); }
.vh-settings__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
form.vh-settings__body .vh-settings__rows + .vh-settings__foot { border-top: 1px solid var(--vem-line); padding-top: 12px; margin-top: 2px; }
.vh-btn-danger-text { color: var(--vem-danger); }
.vh-btn-danger-text:hover { background: var(--vem-danger-soft); color: var(--vem-danger); }
html.dark .vh-settings, html.dark .vh-settings__rows > li + li { border-color: rgba(255,255,255,0.08); }
html.dark .vh-settings__icon { background: rgba(255,255,255,0.06); }

/* The guardian home (owner, 2026-10-27): a few calm blocks, one label each. */
.vh-home { gap: 28px; }
.vh-home__label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-muted); }
.vh-home__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vh-home__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.vh-needs { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-color: var(--vem-warning);
    background: color-mix(in srgb, var(--vem-warning) 8%, var(--vem-surface)); }
.vh-needs__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; color: var(--vem-warning); background: color-mix(in srgb, var(--vem-warning) 16%, transparent); }
.vh-needs__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vh-needs__text span { font-size: 13px; color: var(--vem-text-2); }
.vh-now { list-style: none; margin: 0; padding: 4px 18px; }
.vh-now > li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; }
.vh-now > li + li { border-top: 1px solid var(--vem-line); }
.vh-now__avatar { width: 40px; height: 40px; font-size: 14px; }
.vh-now__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vh-dot--live { background: var(--vem-success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vem-success) 60%, transparent);
    animation: vh-live 2s var(--vem-ease) infinite; }
@keyframes vh-live { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.vh-pulse { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.vh-pulse__name { font-weight: 650; }
.vh-pulse__n { font-family: var(--vem-font-display); font-size: 2.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vh-pulse__n small { font-family: var(--vem-font-sans); font-size: 1rem; color: var(--vem-text-2); margin-left: 2px; }
.vh-pulse.is-warn .vh-pulse__n, .vh-pulse.is-warn .vh-pulse__line { color: var(--vem-warning); }
.vh-pulse__line { font-size: 13px; color: var(--vem-text-2); display: flex; align-items: center; gap: 6px; }
.vh-pulse__streak { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px; background: var(--vem-primary-soft); color: var(--vem-on-primary-soft); }
.vh-pulse__streak svg, .vh-pulse__line svg { width: 14px; height: 14px; }
html.dark .vh-now > li + li { border-color: rgba(255,255,255,0.08); }
@media (prefers-reduced-motion: reduce) { .vh-dot--live { animation: none; } }
@media (max-width: 599px) { .vh-needs { flex-wrap: wrap; } .vh-needs .vem-btn { width: 100%; } }
/* One card per child on the guardian home: head (who, right now) and body (rate, margin). */
.vh-home__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.vh-kid { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.vh-kid__head { display: flex; align-items: center; gap: 12px; }
.vh-kid__body { display: flex; align-items: center; gap: 18px; padding-top: 14px; border-top: 1px solid var(--vem-line); }
.vh-kid__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vh-kid.is-warn .vh-pulse__n, .vh-kid.is-warn .vh-pulse__line { color: var(--vem-warning); }
html.dark .vh-kid__body { border-color: rgba(255,255,255,0.08); }

/* Inline forms (fields + a button in one row): everything sits on the controls'
   bottom line, buttons as tall as the fields. Centring a labelled field against a
   bare button put the button half a label lower (owner, 'jagged', 2026-10-27). */
.vh-row-actions:has(> .vem-field), form.vh-filters:has(> .vem-field) { align-items: flex-end; }
.vh-row-actions > .vem-field { margin: 0; }
.vh-row-actions:has(> .vem-field) > .vem-btn, form.vh-filters:has(> .vem-field) > .vem-btn { min-height: 44px; }

/* The sidebar scrolls without showing a raw scrollbar until the pointer is on it. */
.vh-navwrap { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.vh-navwrap:hover { scrollbar-color: var(--vem-line) transparent; }
.vh-navwrap::-webkit-scrollbar { width: 6px; }
.vh-navwrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.vh-navwrap:hover::-webkit-scrollbar-thumb { background: var(--vem-line); }