/* 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%; }

/* 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; }

/* Tier 9 (D7): the apex front page. */
.vh-home { display: flex; flex-direction: column; gap: 56px; padding: 32px 0 56px; }
.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, 1.1fr) minmax(0, .9fr); gap: 56px; padding-top: 32px; } .vh-home { gap: 88px; } }
.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: 34rem; font-size: 1.1rem; 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__marks, .vh-home__ticks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--vem-text-2); font-size: .9rem; }
.vh-home__ticks { flex-direction: column; margin-top: 12px; }
.vh-home__marks li, .vh-home__ticks li, .vh-home__in { display: inline-flex; align-items: center; gap: 6px; }
.vh-home__marks .vem-icon, .vh-home__ticks .vem-icon, .vh-home__in .vem-icon { color: var(--vem-success); flex: none; }
.vh-home__demo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.vh-home__in { font-size: .85rem; color: var(--vem-text-2); }
.vh-home__count { margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--vem-text-2); }
.vh-home__section { display: flex; flex-direction: column; gap: 24px; }
.vh-home__head { max-width: 42rem; }
.vh-home__head .vem-h2 { margin: 8px 0 0; }
.vh-home__grid, .vh-home__sectors, .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, .vh-home__sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-home__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vh-home__sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vh-home__feature h3, .vh-home__sectors h3, .vh-home__steps h3 { margin: 10px 0 0; font-size: 1.1rem; color: var(--vem-text); }
.vh-home__feature p, .vh-home__sectors p:not(.vh-home__eyebrow), .vh-home__steps p { margin: 8px 0 0; color: var(--vem-text-2); line-height: 1.55; }
.vh-home__sectors > li { display: flex; flex-direction: column; }
.vh-home__mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--vem-radius-md); background: var(--vem-subtle); color: var(--vem-primary); }
.vh-home__step { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--vem-radius-pill); border: 1px solid var(--vem-line-strong); font-family: var(--vem-font-mono); font-weight: 700; color: var(--vem-text); }
.vh-home__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--vem-primary); }
.vh-home__faq { display: flex; flex-direction: column; }
.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: flex-start; gap: 4px; }

/* 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; }
}