@import url("../tokens/fonts.css");

/* ==========================================================================
   Vital — calm, clear UI for GP surgeries and clinics.
   Colours, spacing, radii, shadows and motion tokens come from tokens.css.
   Rules: transform/opacity only for movement; entrances fill BACKWARDS;
   box-shadow changes only on one element's own hover/press state.
   ========================================================================== */

:root {
  /* motion (token fallbacks so the bundle works on its own) */
  --vt-press: var(--dur-press, 90ms);
  --vt-quick: var(--dur-quick, 160ms);
  --vt-settle: var(--dur-settle, 280ms);
  --vt-calm: var(--dur-calm, 360ms);
  --vt-slide: var(--dur-slide, 420ms);
  --vt-beat: var(--dur-beat, 1600ms);
  --vt-e-press: var(--ease-press, cubic-bezier(.3, 0, .5, 1));
  --vt-e-settle: var(--ease-settle, cubic-bezier(.2, 1.3, .4, 1));
  --vt-e-calm: var(--ease-calm, cubic-bezier(.25, .8, .25, 1));
  --vt-e-slide: var(--ease-slide, cubic-bezier(.65, 0, .35, 1));
  --vt-e-beat: var(--ease-beat, cubic-bezier(.45, .05, .55, .95));
  /* ECG chart paper: the page pattern, a faint rose rule by day and teal by night */
  --vt-grid-minor: color-mix(in srgb, #c0574a 7%, transparent);
  --vt-grid-major: color-mix(in srgb, #c0574a 13%, transparent);
  --vt-scrim: rgb(6 16 20 / .55);
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
  --vt-grid-minor: color-mix(in srgb, #68d1c7 5%, transparent);
  --vt-grid-major: color-mix(in srgb, #68d1c7 10%, transparent);
  --vt-scrim: rgb(2 8 10 / .7);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  /* the page: warm clinical paper ruled like an ECG strip, 8px minor and 40px major squares. Static. */
  background-color: var(--page);
  background-image:
    linear-gradient(var(--vt-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--vt-grid-major) 1px, transparent 1px),
    linear-gradient(var(--vt-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--vt-grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.vt-locked { overflow: hidden; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--primary-tint); color: var(--ink); }

/* ---------- utilities ---------- */
.vt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vt-tnum { font-variant-numeric: tabular-nums; }
.vt-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vt-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; }
.vt-link:hover { color: var(--primary-deep); text-decoration-thickness: 3px; }
[data-theme="dark"] .vt-link:hover { color: var(--ink); }
.vt-link .vt-icon { width: 20px; height: 20px; transition: transform var(--vt-quick) var(--vt-e-calm); }
.vt-link:hover .vt-icon { transform: translateX(3px); }
.vt-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.vt-col { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.vt-overline { width: 100%; margin: var(--space-2) 0 0; font: 700 15px/22px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.vt-overline:first-child { margin-top: 0; }

/* ---------- type ---------- */
.vt-display, .vt-title, .vt-heading { font-family: var(--font-serif); font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; font-optical-sizing: auto; }
.vt-display { font-size: 56px; line-height: 62px; letter-spacing: -0.015em; }
.vt-title { font-size: 36px; line-height: 44px; letter-spacing: -0.01em; }
.vt-heading { font-size: 24px; line-height: 32px; }
.vt-lead { font-size: 21px; line-height: 32px; margin: 0; color: var(--ink); text-wrap: pretty; }
.vt-body { font-size: 18px; line-height: 28px; margin: 0; }
.vt-label { font-size: 17px; line-height: 24px; font-weight: 600; }
.vt-small { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-figure { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .vt-display { font-size: 40px; line-height: 46px; }
  .vt-title { font-size: 30px; line-height: 38px; }
}

/* ---------- surfaces ---------- */
.vt-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* ---------- logo mark ---------- */
.vt-mark { display: inline-block; flex: none; line-height: 0; }
.vt-mark svg { display: block; }
.vt-mark__tile { fill: var(--primary); }
.vt-mark__trace { fill: none; stroke: var(--on-primary); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.vt-mark__dot { fill: var(--attention-tint); }
[data-theme="dark"] .vt-mark__dot { fill: var(--attention); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Heartbeat — the signature trace
   ========================================================================== */
.vt-beat { position: relative; display: inline-block; vertical-align: middle; width: 240px; height: 40px; overflow: hidden; color: var(--primary); flex: none; }
.vt-beat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vt-beat__dim { opacity: .2; }
.vt-beat__win { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80%); mask-image: linear-gradient(90deg, transparent, #000 80%);
  animation: vt-beat-win var(--vt-beat) linear infinite; }
.vt-beat__in { position: absolute; top: 0; bottom: 0; left: 0; width: 285.7143%; animation: vt-beat-in var(--vt-beat) linear infinite; }
.vt-beat__in svg { stroke-width: 2.6; }
.vt-beat__head { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; animation: vt-beat-win var(--vt-beat) linear infinite; pointer-events: none; }
.vt-beat__head::after { content: ""; position: absolute; right: -1px; top: 20%; bottom: 20%; width: 2px; border-radius: 1px; background: currentColor; opacity: .35; }
@keyframes vt-beat-win { from { transform: translateX(-100%); } to { transform: translateX(285.7143%); } }
@keyframes vt-beat-in { from { transform: translateX(35%); } to { transform: translateX(-100%); } }
.vt-beat--xs { width: 56px; height: 22px; }
.vt-beat--xs svg { stroke-width: 2.2; }
.vt-beat--sm { width: 120px; height: 28px; }
.vt-beat--lg { width: 100%; height: 64px; }
.vt-beat--inherit { color: inherit; }
.vt-beat--well { color: var(--well); }
.vt-beat.is-still .vt-beat__win, .vt-beat.is-still .vt-beat__head { display: none; }
.vt-beat.is-still .vt-beat__dim { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vt-beat__win, .vt-beat__head { display: none; }
  .vt-beat__dim { opacity: 1; }
}

/* ==========================================================================
   Button — soft pressure
   ========================================================================== */
.vt-btn {
  --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_base: var(--line); --_lift: var(--shadow-sm);
  --_h: 48px; --_px: 22px; --_fs: 17px; --_depth: 4px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: var(--_h); padding: 0 var(--_px); margin: 0 0 var(--_depth);
  border: 1.5px solid var(--_edge); border-radius: var(--radius-md);
  background: var(--_face); color: var(--_fg);
  font: 600 var(--_fs)/24px var(--font-sans); text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  box-shadow: 0 var(--_depth) 0 var(--_base), var(--_lift);
  transform: translateY(0);
  transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-settle), background-color var(--vt-quick) ease, border-color var(--vt-quick) ease, color var(--vt-quick) ease;
}
.vt-btn::after { content: ""; position: absolute; inset: -2px -4px calc(-2px - var(--_depth)) -2px; z-index: -1; }
.vt-btn__face { display: inline-flex; align-items: center; gap: 10px; transition: opacity var(--vt-quick) ease; }
.vt-btn__face .vt-icon { width: 22px; height: 22px; stroke-width: 2.1; }
.vt-btn__after { transition: transform var(--vt-quick) var(--vt-e-calm); }
.vt-btn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--_depth) + 1px) 0 var(--_base), var(--shadow-md); }
.vt-btn:hover .vt-btn__after { transform: translateX(3px); }
.vt-btn:active:not(:disabled):not(.is-loading) {
  transform: translateY(calc(var(--_depth) - 1px));
  box-shadow: 0 1px 0 var(--_base), var(--shadow-pressed);
  transition-duration: var(--vt-press); transition-timing-function: var(--vt-e-press);
}
.vt-btn:focus-visible { outline-offset: 4px; }
.vt-btn--primary { --_face: var(--primary); --_fg: var(--on-primary); --_edge: var(--primary-deep); --_base: var(--primary-deep); }
.vt-btn--primary:hover { --_face: color-mix(in srgb, var(--primary) 90%, var(--primary-deep)); }
.vt-btn--secondary:hover { --_edge: var(--ink-soft); --_face: color-mix(in srgb, var(--surface) 70%, var(--primary-tint)); }
.vt-btn--urgent { --_face: var(--urgent); --_fg: var(--on-primary); --_edge: color-mix(in srgb, var(--urgent) 62%, #000); --_base: color-mix(in srgb, var(--urgent) 55%, #000); }
[data-theme="dark"] .vt-btn--urgent { --_edge: color-mix(in srgb, var(--urgent) 45%, #000); --_base: color-mix(in srgb, var(--urgent) 42%, #000); }
.vt-btn--tertiary { --_face: transparent; --_edge: transparent; --_base: transparent; --_lift: 0 0 #0000; --_fg: var(--primary); --_depth: 0px; padding: 0 14px; }
.vt-btn--tertiary .vt-btn__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vt-btn--tertiary:hover { --_face: var(--primary-tint); transform: none; box-shadow: none; }
.vt-btn--tertiary:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.vt-btn--sm { --_h: 44px; --_px: 16px; --_fs: 16px; --_depth: 3px; }
.vt-btn--sm .vt-btn__face .vt-icon { width: 20px; height: 20px; }
.vt-btn--lg { --_h: 58px; --_px: 28px; --_fs: 19px; --_depth: 5px; border-radius: 16px; }
.vt-btn--block { display: flex; width: 100%; }
.vt-btn:disabled, .vt-btn[aria-disabled="true"] { --_face: var(--surface-sunk); --_fg: var(--ink-soft); --_edge: var(--line); --_base: var(--line); --_lift: 0 0 #0000; cursor: not-allowed; transform: none; }
.vt-btn:disabled:hover { transform: none; box-shadow: 0 var(--_depth) 0 var(--_base); }
.vt-btn__load { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--vt-quick) ease; }
.vt-btn.is-loading { cursor: progress; }
.vt-btn.is-loading:disabled { --_face: var(--primary-tint); --_fg: var(--primary); --_edge: var(--primary); --_base: color-mix(in srgb, var(--primary) 35%, var(--primary-tint)); }
.vt-btn--secondary.is-loading:disabled { --_face: var(--surface); --_edge: var(--line-strong); --_base: var(--line); }
.vt-btn.is-loading .vt-btn__face { opacity: 0; }
.vt-btn.is-loading .vt-btn__load { opacity: 1; }

/* ---------- IconButton ---------- */
.vt-ibtn {
  --_s: 48px; --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_base: var(--line); --_depth: 3px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); padding: 0; margin: 0 0 var(--_depth);
  border: 1.5px solid var(--_edge); border-radius: var(--radius-md); background: var(--_face); color: var(--_fg); cursor: pointer;
  box-shadow: 0 var(--_depth) 0 var(--_base), var(--shadow-sm);
  transform: translateY(0);
  transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-settle), background-color var(--vt-quick) ease, color var(--vt-quick) ease;
}
.vt-ibtn::after { content: ""; position: absolute; inset: -2px -4px -6px -2px; z-index: -1; }
.vt-ibtn__face { display: grid; place-items: center; }
.vt-ibtn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--_depth) + 1px) 0 var(--_base), var(--shadow-md); }
.vt-ibtn:active:not(:disabled) { transform: translateY(calc(var(--_depth) - 1px)); box-shadow: 0 1px 0 var(--_base), var(--shadow-pressed); transition-duration: var(--vt-press); transition-timing-function: var(--vt-e-press); }
.vt-ibtn--ghost { --_face: transparent; --_edge: transparent; --_base: transparent; --_depth: 0px; box-shadow: none; }
.vt-ibtn--ghost:hover { --_face: var(--primary-tint); transform: none; box-shadow: none; }
.vt-ibtn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.vt-ibtn--primary { --_face: var(--primary); --_fg: var(--on-primary); --_edge: var(--primary-deep); --_base: var(--primary-deep); }
.vt-ibtn[aria-pressed="true"] { --_face: var(--primary-tint); --_fg: var(--primary); --_edge: var(--primary); --_base: color-mix(in srgb, var(--primary) 45%, var(--primary-tint)); }
.vt-ibtn--sm { --_s: 44px; }
.vt-ibtn--lg { --_s: 56px; }
.vt-ibtn:disabled { --_face: var(--surface-sunk); --_fg: var(--ink-soft); --_edge: var(--line); cursor: not-allowed; transform: none; box-shadow: none; }
.vt-ibtn__count { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--urgent); color: var(--on-primary); font: 700 14px/24px var(--font-sans); font-variant-numeric: tabular-nums; border: 2px solid var(--surface); box-sizing: content-box; }

/* ==========================================================================
   Progress
   ========================================================================== */
.vt-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.vt-progress__label { display: flex; justify-content: space-between; gap: var(--space-3); font: 600 16px/22px var(--font-sans); color: var(--ink); }
.vt-progress__val { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.vt-progress__track { position: relative; height: 12px; border-radius: var(--radius-full); background: var(--surface-sunk); box-shadow: var(--shadow-inset); overflow: hidden; }
.vt-progress__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform-origin: left center; transform: scaleX(0); transition: transform 640ms var(--vt-e-calm); }
.vt-progress--well .vt-progress__fill { background: var(--well); }
.vt-progress--pulse .vt-beat { width: 100%; }

.vt-steps { --_fill: 0; position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.vt-steps::before, .vt-steps::after { content: ""; position: absolute; top: 15px; left: 16px; right: 16px; height: 3px; border-radius: 2px; background: var(--line); }
.vt-steps::after { background: var(--primary); transform-origin: left center; transform: scaleX(var(--_fill)); transition: transform var(--vt-slide) var(--vt-e-slide); }
.vt-steps__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.vt-steps__item:first-child { align-items: flex-start; }
.vt-steps__item:last-child { align-items: flex-end; }
.vt-steps__dot { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -1px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-soft); font: 700 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; transition: background-color var(--vt-quick) ease, border-color var(--vt-quick) ease; }
.vt-steps__dot .vt-icon { width: 18px; height: 18px; stroke-width: 2.6; }
.vt-steps__item.is-done .vt-steps__dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.vt-steps__item.is-done .vt-steps__dot .vt-icon { animation: vt-pop var(--vt-calm) var(--vt-e-settle) backwards; }
.vt-steps__item.is-current .vt-steps__dot { border: 3px solid var(--primary); color: var(--primary); }
.vt-steps__name { font: 600 15px/20px var(--font-sans); color: var(--ink-soft); white-space: nowrap; }
.vt-steps__item.is-current .vt-steps__name { color: var(--ink); }
@keyframes vt-pop { from { transform: scale(.4); opacity: 0; } }

/* ==========================================================================
   Toggle — with an ECG blip
   ========================================================================== */
.vt-toggle { position: relative; display: inline-flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 6px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vt-toggle__input { position: absolute; left: 0; top: 6px; width: 66px; height: 36px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.vt-toggle__track { position: relative; flex: none; width: 66px; height: 36px; border-radius: var(--radius-full); background: var(--surface-sunk); border: 2px solid var(--line-strong); box-shadow: var(--shadow-inset); transition: background-color var(--vt-settle) ease, border-color var(--vt-settle) ease; }
.vt-toggle__knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-sm); transform: translateX(0); transition: transform var(--vt-settle) var(--vt-e-settle), background-color var(--vt-settle) ease, border-color var(--vt-settle) ease; }
.vt-toggle__blip { position: absolute; left: 5px; top: 8px; width: 28px; height: 16px; overflow: visible; fill: none; stroke: var(--on-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--vt-quick) ease; }
.vt-toggle__input:checked + .vt-toggle__track { background: var(--primary); border-color: var(--primary-deep); }
.vt-toggle__input:checked + .vt-toggle__track .vt-toggle__knob { transform: translateX(30px); background: var(--on-primary); border-color: var(--primary-deep); }
[data-theme="dark"] .vt-toggle__input:checked + .vt-toggle__track .vt-toggle__knob { background: var(--surface); }
.vt-toggle__input:checked + .vt-toggle__track .vt-toggle__blip { opacity: 1; }
.vt-toggle.is-beating .vt-toggle__blip { animation: vt-blip 520ms var(--vt-e-calm) backwards; }
@keyframes vt-blip { from { transform: translateX(16px); opacity: 0; } }
.vt-toggle:active .vt-toggle__knob { transform: scale(.92); }
.vt-toggle:active .vt-toggle__input:checked + .vt-toggle__track .vt-toggle__knob { transform: translateX(30px) scale(.92); }
.vt-toggle__input:focus-visible + .vt-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; }
.vt-toggle__text { display: flex; flex-direction: column; padding-top: 4px; }
.vt-toggle__label { font: 600 17px/24px var(--font-sans); color: var(--ink); }
.vt-toggle__hint { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-toggle.is-disabled { cursor: not-allowed; }
.vt-toggle.is-disabled .vt-toggle__track { opacity: .55; }
.vt-toggle.is-disabled .vt-toggle__label { color: var(--ink-soft); }

/* ==========================================================================
   Checkbox / Radio
   ========================================================================== */
.vt-choice { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; min-height: 48px; padding: 8px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vt-choice__input { position: absolute; left: 0; top: 8px; width: 30px; height: 30px; margin: 0; opacity: 0; cursor: pointer; }
.vt-choice__box { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface); border: 2px solid var(--line-strong); color: var(--on-primary); transition: background-color var(--vt-quick) ease, border-color var(--vt-quick) ease, transform var(--vt-settle) var(--vt-e-settle); pointer-events: none; }
.vt-choice--radio .vt-choice__box { border-radius: 50%; }
.vt-choice__tick { width: 20px; height: 20px; stroke-width: 3; transform: scale(0); opacity: 0; transition: transform var(--vt-settle) var(--vt-e-settle), opacity var(--vt-quick) ease; }
.vt-choice__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--on-primary); transform: scale(0); transition: transform var(--vt-settle) var(--vt-e-settle); }
.vt-choice__input:checked + .vt-choice__box { background: var(--primary); border-color: var(--primary); }
.vt-choice__input:checked + .vt-choice__box .vt-choice__tick { transform: scale(1); opacity: 1; }
.vt-choice__input:checked + .vt-choice__box .vt-choice__dot { transform: scale(1); }
.vt-choice:hover .vt-choice__input:not(:checked):not(:disabled) + .vt-choice__box { border-color: var(--ink); }
.vt-choice:active .vt-choice__box { transform: translateY(1px) scale(.94); transition-duration: var(--vt-press); }
.vt-choice__input:focus-visible + .vt-choice__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.vt-choice__text { display: flex; flex-direction: column; padding-top: 2px; min-width: 0; }
.vt-choice__label { font: 600 17px/26px var(--font-sans); color: var(--ink); }
.vt-choice__hint { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-choice__aside { align-self: center; font: 600 15px/22px var(--font-sans); color: var(--ink-soft); white-space: nowrap; }
.vt-choice.is-disabled { cursor: not-allowed; }
.vt-choice.is-disabled .vt-choice__box { background: var(--surface-sunk); border-color: var(--line); }
.vt-choice.is-disabled .vt-choice__label { color: var(--ink-soft); }

/* option cards: the whole card is the target */
.vt-choice--card { align-items: center; padding: 16px 18px; min-height: 72px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 3px 0 var(--line), var(--shadow-sm); transform: translateY(0);
  transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-settle), border-color var(--vt-quick) ease, background-color var(--vt-quick) ease; }
.vt-choice--card .vt-choice__input { left: 18px; top: 50%; margin-top: -15px; }
.vt-choice--card::after { content: ""; position: absolute; inset: -2px -4px -7px -2px; z-index: -1; }
.vt-choice--card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 4px 0 var(--line), var(--shadow-md); }
.vt-choice--card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), var(--shadow-pressed); transition-duration: var(--vt-press); transition-timing-function: var(--vt-e-press); }
.vt-choice--card:has(.vt-choice__input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 55%, var(--primary-tint)), var(--shadow-sm); }
.vt-choice--card .vt-choice__text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 0; }
.vt-choice--card .vt-choice__text:has(.vt-choice__hint) .vt-choice__icon { grid-row: span 2; }
.vt-choice--card .vt-choice__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); }
.vt-choice--card:has(.vt-choice__input:checked) .vt-choice__icon { background: var(--surface); }
.vt-choice--card .vt-choice__label, .vt-choice--card .vt-choice__hint { grid-column: 2; }
.vt-choice--card .vt-choice__text:not(:has(.vt-choice__icon)) { grid-template-columns: minmax(0, 1fr); }
.vt-choice--card .vt-choice__text:not(:has(.vt-choice__icon)) > * { grid-column: 1; }
.vt-choice--card .vt-choice__label { font-size: 18px; }
.vt-choice--card .vt-choice__aside { font-size: 15px; color: var(--primary); }

.vt-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vt-legend { padding: 0; margin: 0 0 var(--space-2); font: 600 19px/26px var(--font-sans); color: var(--ink); }
.vt-fieldset__list { display: flex; flex-direction: column; }
.vt-fieldset--cards .vt-fieldset__list { gap: var(--space-3); }
.vt-fieldset--cols .vt-fieldset__list { display: grid; grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 640px) {
  .vt-fieldset--cols .vt-fieldset__list { grid-template-columns: minmax(0, 1fr); }
  .vt-choice--card { grid-template-rows: auto auto; }
  .vt-choice--card .vt-choice__aside { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 4px; padding-left: 56px; }
  .vt-choice--card .vt-choice__text:not(:has(.vt-choice__icon)) + .vt-choice__aside { padding-left: 0; }
}

/* ==========================================================================
   Fields
   ========================================================================== */
.vt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; }
.vt-field--short { max-width: 200px; }
.vt-field--md { max-width: 380px; }
.vt-field__label { font: 600 17px/24px var(--font-sans); color: var(--ink); }
.vt-field__opt { font-weight: 400; color: var(--ink-soft); }
.vt-field__hint { margin: -2px 0 2px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-field__error { display: none; align-items: flex-start; gap: 8px; margin: 2px 0; font: 600 16px/22px var(--font-sans); color: var(--urgent); }
.vt-field__error:not(:empty) { display: flex; }
.vt-field__error .vt-icon { width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.2; }
.vt-field__error.is-entering { animation: vt-fade-down var(--vt-calm) var(--vt-e-calm) backwards; }
@keyframes vt-fade-down { from { opacity: 0; transform: translateY(-4px); } }
.vt-input-wrap { position: relative; display: flex; align-items: center; }
.vt-input {
  width: 100%; min-height: 54px; padding: 12px 16px; margin: 0;
  border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink);
  font: 400 18px/26px var(--font-sans); box-shadow: var(--shadow-inset);
  transition: border-color var(--vt-quick) ease, background-color var(--vt-quick) ease;
}
.vt-input::placeholder { color: var(--ink-soft); opacity: 1; }
.vt-input:hover { border-color: var(--ink-soft); }
.vt-input:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.vt-input--area { resize: vertical; min-height: 96px; }
.vt-input:disabled { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.vt-input-wrap.has-icon .vt-input { padding-left: 48px; }
.vt-input__icon { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
.vt-input-wrap.has-suffix .vt-input { padding-right: 64px; }
.vt-input__suffix { position: absolute; right: 14px; font: 600 16px/22px var(--font-sans); color: var(--ink-soft); pointer-events: none; }
.vt-field.is-invalid .vt-input, .vt-field.is-invalid .vt-select__btn { border-color: var(--urgent); border-width: 3px; padding-left: 15px; }
.vt-field.is-invalid .vt-input-wrap.has-icon .vt-input { padding-left: 47px; }

/* ---------- Select ---------- */
.vt-select__btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 14px 0 16px;
  border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink);
  font: 400 18px/26px var(--font-sans); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color var(--vt-quick) ease, transform var(--vt-settle) var(--vt-e-settle);
}
.vt-select__btn:hover { border-color: var(--ink-soft); }
.vt-select__btn:active { transform: translateY(1px); transition-duration: var(--vt-press); }
.vt-select__btn[aria-expanded="true"] { border-color: var(--ink); }
.vt-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-select__value.is-placeholder { color: var(--ink-soft); }
.vt-select__icon { color: var(--primary); }
.vt-select__chev { color: var(--ink-soft); transition: transform var(--vt-settle) var(--vt-e-calm); }
.vt-select__btn[aria-expanded="true"] .vt-select__chev { transform: rotate(180deg); }
.vt-float { position: fixed; z-index: 1000; left: 0; top: 0; }
.vt-select__pop { opacity: 0; transform: translateY(-4px); transition: opacity var(--vt-quick) ease, transform var(--vt-calm) var(--vt-e-calm); }
.vt-select__pop.is-up { transform: translateY(4px); }
.vt-select__pop.is-open { opacity: 1; transform: none; }
.vt-select__list { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); outline: none; }
.vt-select__list:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vt-select__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; line-height: 24px; }
.vt-select__opt.is-active { background: var(--primary-tint); }
.vt-select__opt[aria-selected="true"] { font-weight: 600; }
.vt-select__opt[aria-disabled="true"] { color: var(--ink-soft); cursor: not-allowed; }
.vt-select__opttext { display: flex; flex-direction: column; }
.vt-select__opthint { font-size: 15px; line-height: 20px; color: var(--ink-soft); font-weight: 400; }
.vt-select__tick { color: var(--primary); opacity: 0; }
.vt-select__opt[aria-selected="true"] .vt-select__tick { opacity: 1; }

/* ---------- Slider ---------- */
.vt-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.vt-slider__out { min-width: 3ch; text-align: right; font: 600 24px/28px var(--font-sans); color: var(--primary); font-variant-numeric: tabular-nums; }
.vt-slider__rail { position: relative; height: 48px; margin: 0 2px; }
.vt-slider__input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 48px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.vt-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 48px; }
.vt-slider__input::-moz-range-thumb { width: 30px; height: 48px; border: 0; }
.vt-slider__track { position: absolute; left: 0; right: 0; top: 19px; height: 10px; border-radius: var(--radius-full); background: var(--surface-sunk); box-shadow: var(--shadow-inset); overflow: hidden; outline: 1px solid var(--line); }
.vt-slider__fill { position: absolute; inset: 0; background: var(--primary); transform-origin: left center; transform: scaleX(0); transition: transform 120ms ease-out; }
.vt-slider__thumbwrap { --_f: 0; position: absolute; left: 0; right: 30px; top: 0; bottom: 0; pointer-events: none; }
.vt-slider__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(calc(var(--_f) * 100%)); transition: transform 120ms ease-out; }
.vt-slider__thumb::before { content: ""; position: absolute; left: 0; top: 9px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-shadow: 0 2px 0 var(--primary-deep), var(--shadow-sm); transition: transform var(--vt-settle) var(--vt-e-settle); }
.vt-slider.is-dragging .vt-slider__thumb::before { transform: translateY(1px) scale(1.12); }
.vt-slider__input:focus-visible ~ .vt-slider__thumbwrap .vt-slider__thumb::before { outline: 3px solid var(--focus); outline-offset: 3px; }
.vt-slider__marks { position: relative; height: 22px; margin: -4px 17px 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-slider__marks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vt-slider__marks span:first-child { transform: translateX(-15px); }
.vt-slider__marks span:last-child { transform: translateX(calc(-100% + 15px)); }

/* ==========================================================================
   Tabs
   ========================================================================== */
.vt-tabs { min-width: 0; }
.vt-tabs__rail { border-bottom: 1px solid var(--line); }
.vt-tabs__list { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vt-tabs__list::-webkit-scrollbar { display: none; }
.vt-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 54px; padding: 0 18px; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; color: var(--ink-soft); font: 600 17px/24px var(--font-sans); cursor: pointer; transition: color var(--vt-quick) ease, background-color var(--vt-quick) ease; }
.vt-tabs__tab:hover { color: var(--ink); background: var(--primary-tint); }
.vt-tabs__tab[aria-selected="true"] { color: var(--ink); }
.vt-tabs__tab:focus-visible { outline-offset: -3px; }
.vt-tabs__tab .vt-icon { width: 22px; height: 22px; }
.vt-tabs__tab[aria-selected="true"] .vt-icon { color: var(--primary); }
.vt-tabs__count { min-width: 26px; padding: 0 7px; border-radius: var(--radius-full); background: var(--surface-sunk); color: var(--ink); font: 700 14px/24px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
.vt-tabs__tab[aria-selected="true"] .vt-tabs__count { background: var(--primary); color: var(--on-primary); }
.vt-tabs__bar { position: absolute; left: 0; bottom: 0; width: 100px; height: 4px; border-radius: 4px 4px 0 0; background: var(--primary); transform-origin: left center; transition: transform var(--vt-calm) var(--vt-e-slide); pointer-events: none; }
.vt-tabs.is-still .vt-tabs__bar { transition: none; }
.vt-tabs__panel { padding: var(--space-6) 0 0; outline: none; }
.vt-tabs__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.vt-tabs__panel.is-entering { animation: vt-panel-in var(--vt-calm) var(--vt-e-calm) backwards; }
@keyframes vt-panel-in { from { opacity: 0; transform: translateX(calc(var(--_dir, 1) * 16px)); } }

/* ==========================================================================
   SegmentedControl
   ========================================================================== */
.vt-seg { position: relative; display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunk); box-shadow: var(--shadow-inset); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vt-seg::-webkit-scrollbar { display: none; }
.vt-seg--block { display: flex; }
.vt-seg--block .vt-seg__opt { flex: 1; }
.vt-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 2px 0 var(--line), var(--shadow-sm); transition: transform var(--vt-settle) var(--vt-e-settle); }
.vt-seg.is-still .vt-seg__thumb { transition: none; }
.vt-seg__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); font: 600 16px/22px var(--font-sans); white-space: nowrap; cursor: pointer; transition: color var(--vt-quick) ease; }
.vt-seg__opt:hover { color: var(--ink); }
.vt-seg__opt[aria-checked="true"] { color: var(--ink); }
.vt-seg__opt:active { transform: translateY(1px); }
.vt-seg__opt:focus-visible { outline-offset: -2px; }
.vt-seg__opt .vt-icon { width: 20px; height: 20px; }
.vt-seg__count { min-width: 24px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 700 14px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.vt-seg__opt[aria-checked="true"] .vt-seg__count { background: var(--primary-tint); color: var(--primary); }

/* ==========================================================================
   Card
   ========================================================================== */
.vt-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; }
.vt-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); flex: 1; }
.vt-card--tight .vt-card__body { padding: var(--space-4); }
.vt-card__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; line-height: 0; }
.vt-card__eyebrow { display: flex; align-items: center; gap: 10px; font: 600 15px/22px var(--font-sans); color: var(--primary); }
.vt-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); }
.vt-card__title { margin: 0; font: 600 24px/32px var(--font-serif); color: var(--ink); text-wrap: balance; }
.vt-card__text { margin: 0; color: var(--ink-soft); }
.vt-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.vt-card--link { cursor: pointer; transform: translateY(0); transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-calm), border-color var(--vt-quick) ease; }
.vt-card--link::after { content: ""; position: absolute; inset: -2px -6px -8px -2px; z-index: -1; }
.vt-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.vt-card--link:active { transform: translateY(0); box-shadow: var(--shadow-sm); transition-duration: var(--vt-press); }
.vt-card--link:focus-visible { outline-offset: 4px; }
.vt-card--flat { box-shadow: none; }
.vt-card--tint { background: var(--primary-tint); border-color: transparent; }
.vt-card--well { background: var(--well-tint); border-color: transparent; }
.vt-card--attention { background: var(--attention-tint); border-color: transparent; }
.vt-card--sunk { background: var(--surface-sunk); border-color: transparent; box-shadow: none; }

/* ==========================================================================
   Badge, Tag
   ========================================================================== */
.vt-badge { --_bg: var(--surface-sunk); --_fg: var(--ink); display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border-radius: var(--radius-full); background: var(--_bg); color: var(--_fg); font: 600 15px/22px var(--font-sans); white-space: nowrap; vertical-align: middle; }
.vt-badge .vt-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.vt-badge--sm { min-height: 26px; padding: 1px 10px; }
.vt-badge--primary { --_bg: var(--primary-tint); --_fg: var(--primary); }
.vt-badge--well { --_bg: var(--well-tint); --_fg: var(--well); }
.vt-badge--attention { --_bg: var(--attention-tint); --_fg: var(--attention); }
.vt-badge--urgent { --_bg: var(--urgent-tint); --_fg: var(--urgent); }
.vt-badge.is-solid.vt-badge--primary { --_bg: var(--primary); --_fg: var(--on-primary); }
.vt-badge.is-solid.vt-badge--urgent { --_bg: var(--urgent); --_fg: var(--on-primary); }
.vt-badge__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.vt-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); font: 400 15px/22px var(--font-sans); border: 1px solid var(--line); }
.vt-tag .vt-icon { width: 18px; height: 18px; color: var(--primary); }
.vt-tag--primary { background: var(--primary-tint); border-color: transparent; }
.vt-tag__x { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -8px -4px 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.vt-tag__x .vt-icon { width: 16px; height: 16px; color: inherit; stroke-width: 2.4; }
.vt-tag__x:hover { background: var(--line); color: var(--ink); }
.vt-tag.is-leaving { opacity: 0; transform: scale(.9); transition: opacity 200ms ease, transform 200ms var(--vt-e-calm); }

/* ==========================================================================
   Avatar
   ========================================================================== */
.vt-avatar { --_s: 48px; --_bg: var(--primary-tint); --_fg: var(--primary); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%; background: var(--_bg); color: var(--_fg); font: 600 calc(var(--_s) * .38)/1 var(--font-serif); letter-spacing: .01em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_fg) 18%, transparent); }
.vt-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vt-avatar--sm { --_s: 36px; }
.vt-avatar--lg { --_s: 64px; }
.vt-avatar--xl { --_s: 88px; }
.vt-avatar--sage { --_bg: var(--well-tint); --_fg: var(--well); }
.vt-avatar--sand { --_bg: var(--attention-tint); --_fg: var(--attention); }
.vt-avatar--stone { --_bg: var(--surface-sunk); --_fg: var(--ink); }
.vt-avatar__status { position: absolute; right: 0; bottom: 0; width: calc(var(--_s) * .26); height: calc(var(--_s) * .26); min-width: 12px; min-height: 12px; border-radius: 50%; border: 3px solid var(--surface); background: var(--line-strong); box-sizing: content-box; transform: translate(10%, 10%); }
.vt-avatar__status--in { background: var(--well); }
.vt-avatars { display: inline-flex; }
.vt-avatars .vt-avatar { box-shadow: 0 0 0 3px var(--surface); }
.vt-avatars .vt-avatar + .vt-avatar { margin-left: -6px; }
.vt-avatar--more { --_bg: var(--surface-sunk); --_fg: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 14px; }

/* ==========================================================================
   Tooltip
   ========================================================================== */
.vt-tipwrap { display: inline-flex; }
.vt-tip { max-width: min(280px, calc(100vw - 16px)); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font: 400 15px/22px var(--font-sans); box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--vt-quick) ease, transform var(--vt-quick) var(--vt-e-calm); }
.vt-tip[data-side="bottom"] { transform: translateY(-4px); }
.vt-tip[data-side="left"] { transform: translateX(4px); }
.vt-tip[data-side="right"] { transform: translateX(-4px); }
.vt-tip.is-open { opacity: 1; transform: none; }
.vt-tip__arrow { position: absolute; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.vt-tip[data-side="top"] .vt-tip__arrow { bottom: -5px; left: calc(var(--_ax, 50%) - 6px); }
.vt-tip[data-side="bottom"] .vt-tip__arrow { top: -5px; left: calc(var(--_ax, 50%) - 6px); }
.vt-tip[data-side="left"] .vt-tip__arrow { right: -5px; top: calc(var(--_ay, 50%) - 6px); }
.vt-tip[data-side="right"] .vt-tip__arrow { left: -5px; top: calc(var(--_ay, 50%) - 6px); }
.vt-tip__text { position: relative; z-index: 1; }

/* ==========================================================================
   Toast
   ========================================================================== */
.vt-toasts { position: fixed; z-index: 1100; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.vt-toasts > * { pointer-events: auto; }
@media (max-width: 600px) { .vt-toasts { right: 16px; bottom: 16px; } }
.vt-toast { --_c: var(--primary); --_t: var(--primary-tint); position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 14px 10px 16px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; animation: vt-toast-in var(--vt-calm) var(--vt-e-calm) backwards; }
@keyframes vt-toast-in { from { opacity: 0; transform: translateY(16px); } }
.vt-toast.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease; }
.vt-toast--well { --_c: var(--well); --_t: var(--well-tint); }
.vt-toast--attention { --_c: var(--attention); --_t: var(--attention-tint); }
.vt-toast--urgent { --_c: var(--urgent); --_t: var(--urgent-tint); }
.vt-toast--neutral { --_c: var(--ink); --_t: var(--surface-sunk); }
.vt-toast__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--_t); color: var(--_c); }
.vt-toast__icon .vt-icon { stroke-width: 2.2; }
.vt-toast__body { padding-top: 7px; min-width: 0; }
.vt-toast__title { margin: 0; font: 600 17px/24px var(--font-sans); }
.vt-toast__msg { margin: 2px 0 0; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.vt-toast__action { margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--primary); font: 600 16px/22px var(--font-sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
.vt-toast__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; }
.vt-toast__x:hover { background: var(--surface-sunk); color: var(--ink); }
.vt-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--_c); opacity: .5; transform-origin: left center; animation: vt-timer linear forwards; }
.vt-toast.is-paused .vt-toast__timer { animation-play-state: paused; }
@keyframes vt-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ==========================================================================
   Modal / Sheet
   ========================================================================== */
.vt-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px 16px; }
.vt-modal[hidden] { display: none; }
.vt-modal__scrim { position: absolute; inset: 0; background: var(--vt-scrim); opacity: 0; transition: opacity var(--vt-calm) ease; }
.vt-modal.is-open .vt-modal__scrim { opacity: 1; }
.vt-modal__panel { position: relative; display: flex; flex-direction: column; width: min(580px, 100%); max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); outline: none; opacity: 0; transform: translateY(18px); transition: opacity var(--vt-calm) ease, transform var(--vt-calm) var(--vt-e-calm); }
.vt-modal__panel--lg { width: min(820px, 100%); }
.vt-modal.is-open .vt-modal__panel { opacity: 1; transform: none; }
.vt-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-4) 0 var(--space-8); }
.vt-modal__eyebrow { margin: 0 0 2px; font: 600 15px/22px var(--font-sans); color: var(--primary); }
.vt-modal__title { margin: 6px 0 0; font: 600 30px/38px var(--font-serif); text-wrap: balance; }
.vt-modal__body { padding: var(--space-4) var(--space-8) var(--space-6); overflow: auto; }
.vt-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-8) var(--space-6); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .vt-modal--sheet { place-items: end stretch; padding: 0; }
  .vt-modal--sheet .vt-modal__panel { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(48px); }
  .vt-modal--sheet .vt-modal__panel::before { content: ""; display: block; width: 48px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-strong); }
  .vt-modal__head { padding: var(--space-4) var(--space-3) 0 var(--space-4); }
  .vt-modal__title { font-size: 26px; line-height: 32px; }
  .vt-modal__body { padding: var(--space-4); }
  .vt-modal__foot { padding: var(--space-4); }
  .vt-modal__foot .vt-btn { flex: 1; }
}

/* ==========================================================================
   Accordion
   ========================================================================== */
.vt-acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.vt-acc__item + .vt-acc__item { border-top: 1px solid var(--line); }
.vt-acc__btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 14px 20px 14px 24px; border: 0; background: transparent; color: var(--ink); font: 600 19px/26px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--vt-quick) ease; }
.vt-acc__btn:hover { background: color-mix(in srgb, var(--primary-tint) 60%, transparent); }
.vt-acc__btn:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }
.vt-acc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); flex: none; }
.vt-acc__title { flex: 1; min-width: 0; }
.vt-acc__pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--primary); transition: background-color var(--vt-quick) ease, border-color var(--vt-quick) ease; }
.vt-acc__pm span { position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform var(--vt-settle) var(--vt-e-settle); }
.vt-acc__pm span:last-child { transform: rotate(90deg); }
.vt-acc__item.is-open .vt-acc__pm { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.vt-acc__item.is-open .vt-acc__pm span:last-child { transform: rotate(0deg); }
.vt-acc__inner { padding: 0 24px 22px; color: var(--ink-soft); max-width: 70ch; }
.vt-acc__btn:has(.vt-acc__icon) + .vt-acc__panel .vt-acc__inner { padding-left: 78px; }
.vt-acc__inner p { margin: 0 0 12px; }
.vt-acc__inner p:last-child { margin-bottom: 0; }
.vt-acc__panel.is-entering .vt-acc__inner { animation: vt-fade-down var(--vt-calm) var(--vt-e-calm) backwards; }
@media (max-width: 640px) { .vt-acc__btn { padding-left: 16px; padding-right: 12px; font-size: 18px; } .vt-acc__inner { padding: 0 16px 18px !important; } }

/* ==========================================================================
   Header
   ========================================================================== */
.vt-header { position: relative; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.vt-header.is-sticky { position: sticky; top: 0; }
.vt-header__bar { display: flex; align-items: center; gap: var(--space-6); max-width: 1240px; min-height: 80px; margin: 0 auto; padding: 12px var(--space-6); }
.vt-header__brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.vt-header__name { display: flex; flex-direction: column; }
.vt-header__title { font: 600 22px/26px var(--font-serif); white-space: nowrap; }
.vt-header__sub { font-size: 15px; line-height: 20px; color: var(--ink-soft); white-space: nowrap; }
.vt-header__nav { flex: 1; min-width: 0; }
.vt-header__links { display: flex; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vt-header__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); color: var(--ink); font: 600 17px/24px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color var(--vt-quick) ease; }
.vt-header__link:hover { background: var(--primary-tint); }
.vt-header__link[aria-current="page"] { color: var(--primary); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.vt-header__tools { display: flex; align-items: center; gap: var(--space-4); flex: none; margin-left: auto; }
.vt-header__tools .vt-btn, .vt-header__tools .vt-ibtn { margin-bottom: 0; }
.vt-header__phone { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; color: var(--ink); font: 600 17px/22px var(--font-sans); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: var(--radius-md); }
.vt-header__phone .vt-icon { color: var(--primary); }
.vt-header__phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.vt-header__phonelabel { font-weight: 400; color: var(--ink-soft); }
.vt-header__menu { display: none; }
.vt-header__drawer { position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-2) var(--space-6) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform var(--vt-calm) var(--vt-e-calm); }
.vt-header.is-menu .vt-header__drawer { opacity: 1; transform: none; }
.vt-header__mlinks { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.vt-header__mlinks a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line); color: var(--ink); font: 600 19px/26px var(--font-sans); text-decoration: none; }
.vt-header__mlinks a::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 2.5px solid var(--primary); border-top: 2.5px solid var(--primary); transform: rotate(45deg); }
.vt-header__mlinks a[aria-current="page"] { color: var(--primary); }
.vt-header__mphone { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); padding: 14px 16px; border-radius: var(--radius-md); background: var(--primary-tint); color: var(--ink); text-decoration: none; }
.vt-header__mphone .vt-icon { color: var(--primary); }
.vt-header__mphone > span { display: flex; flex-direction: column; }
.vt-header__mphone strong { font-size: 20px; line-height: 26px; font-variant-numeric: tabular-nums; }
.vt-header__mphone strong + span { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
@media (max-width: 1100px) { .vt-header__phonelabel { display: none; } }
@media (max-width: 980px) {
  .vt-header__nav { display: none; }
  .vt-header__menu { display: inline-grid; }
}
@media (max-width: 640px) {
  .vt-header__bar { min-height: 68px; gap: var(--space-3); padding: 10px var(--space-4); }
  .vt-header__phone, .vt-header__tools > .vt-btn { display: none; }
  .vt-header__title { font-size: 19px; line-height: 24px; }
  .vt-header__sub { font-size: 15px; }
  .vt-header__brand .vt-mark, .vt-header__brand .vt-mark svg { width: 40px !important; height: 40px !important; }
  .vt-header__drawer { padding: var(--space-2) var(--space-4) var(--space-4); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.vt-footer { background: var(--surface-sunk); border-top: 1px solid var(--line); color: var(--ink); }
.vt-footer__inner { display: grid; grid-template-columns: minmax(240px, 1.2fr) 2fr; gap: var(--space-8); max-width: 1240px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-8); }
.vt-footer__brand { display: flex; align-items: center; gap: 12px; font: 600 22px/28px var(--font-serif); margin-bottom: var(--space-4); }
.vt-footer__addr { display: flex; gap: 10px; margin: 0 0 var(--space-3); color: var(--ink); }
.vt-footer__addr .vt-icon { color: var(--primary); margin-top: 2px; }
.vt-footer__addr a { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-footer__note { margin: var(--space-4) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); max-width: 40ch; }
.vt-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-6); }
.vt-footer__h { margin: 0 0 var(--space-2); font: 700 15px/22px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.vt-footer__col ul { list-style: none; margin: 0; padding: 0; }
.vt-footer__col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.vt-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; color: var(--primary); }
.vt-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); max-width: 1240px; margin: 0 auto; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-footer__ll { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.vt-footer__ll a { color: var(--ink-soft); }
.vt-footer__ll a:hover { color: var(--ink); }
@media (max-width: 820px) { .vt-footer__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-4) var(--space-6); } .vt-footer__legal { padding: var(--space-4); } }
@media (max-width: 420px) { .vt-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

/* ==========================================================================
   Shared domain pieces: slide stage, rolling figures, the check mark
   ========================================================================== */
.vt-stage-slide { display: grid; min-width: 0; }
.vt-stage-slide > * { grid-area: 1 / 1; min-width: 0; }
.vt-stage-slide > .is-in-fwd { animation: vt-slide-in-f var(--vt-slide) var(--vt-e-slide) backwards; }
.vt-stage-slide > .is-in-back { animation: vt-slide-in-b var(--vt-slide) var(--vt-e-slide) backwards; }
.vt-stage-slide > .is-out-fwd { animation: vt-slide-out-f var(--vt-slide) var(--vt-e-slide) forwards; pointer-events: none; }
.vt-stage-slide > .is-out-back { animation: vt-slide-out-b var(--vt-slide) var(--vt-e-slide) forwards; pointer-events: none; }
@keyframes vt-slide-in-f { from { opacity: 0; transform: translateX(56px); } }
@keyframes vt-slide-in-b { from { opacity: 0; transform: translateX(-56px); } }
@keyframes vt-slide-out-f { to { opacity: 0; transform: translateX(-56px); } }
@keyframes vt-slide-out-b { to { opacity: 0; transform: translateX(56px); } }
.vt-stage-slide { overflow: hidden; margin: -6px; padding: 6px; }

.vt-roll { display: inline-flex; font-variant-numeric: tabular-nums; vertical-align: bottom; }
.vt-roll__d { position: relative; display: inline-block; width: .58em; height: 1.1em; overflow: hidden; text-align: center; }
.vt-roll__d.is-narrow { width: auto; min-width: .3em; }
.vt-roll__c { position: absolute; left: 0; right: 0; top: 0; line-height: 1.1em; }
.vt-roll__d.is-narrow .vt-roll__c { position: relative; }
.vt-roll__c.is-in { animation: vt-roll-in var(--vt-calm) var(--vt-e-calm) backwards; }
.vt-roll__c.is-out { animation: vt-roll-out var(--vt-calm) var(--vt-e-calm) forwards; }
@keyframes vt-roll-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes vt-roll-out { to { transform: translateY(-100%); opacity: 0; } }

.vt-checkmark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--well-tint); color: var(--well); flex: none; animation: vt-pop var(--vt-calm) var(--vt-e-settle) backwards; }
.vt-checkmark .vt-icon { width: 40px; height: 40px; stroke-width: 2.6; animation: vt-pop var(--vt-calm) var(--vt-e-settle) 120ms backwards; }
.vt-checkmark--sm { width: 48px; height: 48px; }
.vt-checkmark--sm .vt-icon { width: 28px; height: 28px; }

/* ==========================================================================
   UrgentBanner
   ========================================================================== */
.vt-urgent { border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--urgent); background: var(--surface); box-shadow: var(--shadow-sm); }
.vt-urgent__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--urgent); color: var(--on-primary); }
.vt-urgent__sym { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--on-primary); color: var(--urgent); flex: none; }
.vt-urgent__sym .vt-icon { width: 28px; height: 28px; stroke-width: 2.3; }
.vt-urgent__h { margin: 0; font: 700 22px/28px var(--font-sans); }
.vt-urgent__copy p { margin: 2px 0 0; font-size: 17px; line-height: 25px; }
.vt-urgent__call.vt-btn { --_face: var(--on-primary); --_fg: var(--urgent); --_edge: color-mix(in srgb, var(--urgent) 50%, var(--on-primary)); --_base: color-mix(in srgb, var(--urgent) 55%, #000); margin-bottom: 5px; }
.vt-urgent__call.vt-btn:hover { --_face: var(--on-primary); }
.vt-urgent__low { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--space-6); background: var(--urgent-tint); color: var(--ink); }
.vt-urgent__low p { margin: 0; flex: 1 1 320px; }
.vt-urgent__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vt-urgent__btns .vt-btn { margin-bottom: 4px; }
.vt-urgent--compact { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); border-width: 0; border-radius: 0; background: var(--urgent); color: var(--on-primary); box-shadow: none; }
.vt-urgent--compact .vt-urgent__sym { width: 32px; height: 32px; }
.vt-urgent--compact .vt-urgent__sym .vt-icon { width: 20px; height: 20px; }
.vt-urgent--compact p { margin: 0; font-size: 17px; line-height: 24px; }
.vt-urgent--compact a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.vt-urgent--compact a:focus-visible { outline-color: var(--on-primary); }
@media (max-width: 720px) {
  .vt-urgent__top { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
  .vt-urgent__call { grid-column: 1 / -1; width: 100%; }
  .vt-urgent__low { padding: var(--space-4); }
  .vt-urgent__btns { width: 100%; }
  .vt-urgent__btns .vt-btn { flex: 1; }
  .vt-urgent__h { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   HealthAlert
   ========================================================================== */
.vt-alert { --_c: var(--attention); --_t: var(--attention-tint); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--_t); color: var(--ink); }
.vt-alert--info { --_c: var(--primary); --_t: var(--primary-tint); }
.vt-alert--well { --_c: var(--well); --_t: var(--well-tint); }
.vt-alert.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 240ms ease, transform 240ms var(--vt-e-calm); }
.vt-alert__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--_c); box-shadow: var(--shadow-sm); }
.vt-alert__icon .vt-icon { width: 30px; height: 30px; stroke-width: 2; }
.vt-alert__eyebrow { margin: 0; font: 700 15px/22px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--_c); }
.vt-alert__h { margin: 2px 0 4px; font: 600 26px/34px var(--font-serif); text-wrap: balance; }
.vt-alert__text { margin: 0; color: var(--ink); max-width: 62ch; }
.vt-alert__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px var(--space-4); margin: var(--space-3) 0 0; padding: 0; }
.vt-alert__list li { display: flex; gap: 8px; align-items: flex-start; }
.vt-alert__list .vt-icon { color: var(--_c); width: 22px; height: 22px; margin-top: 3px; stroke-width: 2.4; }
.vt-alert__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.vt-alert__chips .vt-tag { background: var(--surface); }
.vt-alert__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.vt-alert__x { margin: -8px -8px 0 0; }
.vt-alert__x.vt-ibtn--ghost:hover { --_face: var(--surface); }
.vt-alert--stack { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-4) var(--space-6) var(--space-6); }
.vt-alert--stack .vt-alert__icon { width: 48px; height: 48px; }
.vt-alert--stack .vt-alert__body { grid-column: 1 / -1; grid-row: 2; }
.vt-alert--stack .vt-alert__h { font-size: 23px; line-height: 30px; }
@media (max-width: 640px) {
  .vt-alert { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-4); }
  .vt-alert__icon { width: 48px; height: 48px; }
  .vt-alert__body { grid-column: 1 / -1; grid-row: 2; }
  .vt-alert__h { font-size: 23px; line-height: 30px; }
  .vt-alert__actions .vt-btn--primary { width: 100%; }
}

/* ==========================================================================
   ServiceCard
   ========================================================================== */
.vt-service { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; height: 100%; padding: var(--space-6); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; transform: translateY(0); transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-calm), border-color var(--vt-quick) ease; }
a.vt-service::after { content: ""; position: absolute; inset: -2px -6px -8px -2px; z-index: -1; }
a.vt-service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
a.vt-service:active { transform: translateY(0); box-shadow: var(--shadow-sm); transition-duration: var(--vt-press); }
.vt-service__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--primary-tint); color: var(--primary); }
.vt-service__icon .vt-icon { width: 30px; height: 30px; stroke-width: 1.8; }
.vt-service--well .vt-service__icon { background: var(--well-tint); color: var(--well); }
.vt-service--attention .vt-service__icon { background: var(--attention-tint); color: var(--attention); }
.vt-service__main { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vt-service__title { font: 600 22px/30px var(--font-serif); text-wrap: balance; }
.vt-service__text { color: var(--ink-soft); font-size: 17px; line-height: 26px; }
.vt-service__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.vt-service__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-service__meta .vt-icon { width: 18px; height: 18px; }
.vt-service__go { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 17px; }
.vt-service__go .vt-icon { width: 20px; height: 20px; transition: transform var(--vt-quick) var(--vt-e-calm); }
a.vt-service:hover .vt-service__go .vt-icon { transform: translateX(4px); }
a.vt-service:hover .vt-service__go span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ==========================================================================
   ClinicianProfile
   ========================================================================== */
.vt-clin { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; height: 100%; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.vt-clin__top { display: flex; align-items: center; gap: var(--space-4); }
.vt-clin__id { min-width: 0; }
.vt-clin__name { margin: 0; font: 600 22px/28px var(--font-serif); }
.vt-clin__role { margin: 2px 0 0; font: 600 16px/22px var(--font-sans); color: var(--primary); }
.vt-clin__meta { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-clin__bio { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 26px; }
.vt-clin__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-clin__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.vt-clin__foot .vt-btn { margin-bottom: 3px; }
.vt-clin__when { display: flex; flex-direction: column; gap: 8px; }
.vt-clin__week { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vt-clin__day { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--line-strong); color: var(--ink-soft); font: 700 14px/1 var(--font-sans); }
.vt-clin__day.is-on { border: 0; background: var(--primary-tint); color: var(--primary); }
.vt-clin__day.is-today { outline: 2px solid var(--ink); outline-offset: 2px; }
.vt-clin__lang { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-clin__lang .vt-icon { width: 18px; height: 18px; }
.vt-clin--compact { padding: var(--space-4); gap: var(--space-3); }

/* ==========================================================================
   PracticeNews
   ========================================================================== */
.vt-news__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.vt-news__h { margin: 0; font: 600 28px/36px var(--font-serif); }
.vt-news__list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.vt-news__list li + li { border-top: 1px solid var(--line); }
.vt-news__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); color: var(--ink); text-decoration: none; transition: background-color var(--vt-quick) ease; }
.vt-news__item:hover { background: color-mix(in srgb, var(--primary-tint) 55%, transparent); }
.vt-news__item:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }
.vt-news__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--surface-sunk); }
.vt-news__dd { font: 600 26px/26px var(--font-serif); font-variant-numeric: tabular-nums; }
.vt-news__mm { font: 700 14px/18px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.vt-news__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-news__meta { display: flex; gap: 8px; }
.vt-news__meta:empty { display: none; }
.vt-news__title { font: 600 19px/26px var(--font-sans); }
.vt-news__item:hover .vt-news__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.vt-news__sum { color: var(--ink-soft); font-size: 16px; line-height: 24px; }
.vt-news__chev { color: var(--primary); transition: transform var(--vt-quick) var(--vt-e-calm); }
.vt-news__item:hover .vt-news__chev { transform: translateX(3px); }
@media (max-width: 640px) { .vt-news__item { grid-template-columns: 52px minmax(0, 1fr); padding: var(--space-4); gap: var(--space-3); align-items: start; } .vt-news__date { width: 52px; height: 56px; } .vt-news__dd { font-size: 22px; } .vt-news__chev { display: none; } }

/* ==========================================================================
   OpeningHours
   ========================================================================== */
.vt-hours { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.vt-hours__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vt-hours__h { margin: 0; font: 600 24px/32px var(--font-serif); }
.vt-hours__status { display: flex; align-items: center; gap: 10px; height: 52px; margin: var(--space-3) 0 var(--space-2); padding: 0 16px; border-radius: var(--radius-md); background: var(--surface-sunk); font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-hours.is-open .vt-hours__status { background: var(--well-tint); }
.vt-hours__status strong { color: var(--ink); }
.vt-hours.is-open .vt-hours__status strong { color: var(--well); }
.vt-hours__status span:last-child { overflow: hidden; text-overflow: ellipsis; }
.vt-hours__dot { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--well); }
.vt-hours__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--well); opacity: 0; animation: vt-breathe calc(var(--vt-beat) * 2) var(--vt-e-beat) infinite; }
.vt-hours__dot.is-closed { background: var(--ink-soft); }
.vt-hours__dot.is-closed::after { display: none; }
@keyframes vt-breathe { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.vt-hours__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vt-hours__table th, .vt-hours__table td { height: 44px; padding: 0 12px; text-align: left; font-size: 17px; line-height: 24px; border-bottom: 1px solid var(--line); }
.vt-hours__table tr:last-child th, .vt-hours__table tr:last-child td { border-bottom: 0; }
.vt-hours__table th { font-weight: 400; color: var(--ink); }
.vt-hours__table td { text-align: right; color: var(--ink); white-space: nowrap; }
.vt-hours__table tr.is-today th, .vt-hours__table tr.is-today td { background: var(--primary-tint); font-weight: 700; border-bottom-color: transparent; }
.vt-hours__table tr.is-today th { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.vt-hours__table tr.is-today td { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.vt-hours__today { margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 14px; line-height: 20px; font-weight: 700; vertical-align: 1px; }
.vt-hours__note { display: flex; gap: 8px; margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-hours__note .vt-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--primary); }
@media (max-width: 640px) { .vt-hours { padding: var(--space-4); } .vt-hours__status { font-size: 16px; padding: 0 12px; } }

/* ==========================================================================
   AppointmentPicker
   ========================================================================== */
.vt-ap.is-bare, .vt-tri.is-bare { padding: 0; border: 0; box-shadow: none; background: transparent; }
.vt-ap.is-bare .vt-ap__head .vt-progress--steps, .vt-tri.is-bare .vt-tri__head .vt-progress { flex: 1 1 100%; }
.vt-ap { container-type: inline-size; padding: var(--space-6) var(--space-8) var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.vt-ap__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.vt-ap__title { margin: 0; font: 600 30px/38px var(--font-serif); }
.vt-ap__head .vt-progress--steps { flex: 0 1 340px; min-width: 260px; }
.vt-ap__panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.vt-ap__q { margin: 0; font: 600 24px/32px var(--font-serif); outline: none; }
.vt-ap__q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.vt-ap__hint { margin: -8px 0 0; color: var(--ink-soft); }
.vt-ap__lead { margin: 0; font-size: 21px; line-height: 32px; }
.vt-ap__qrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.vt-ap__qrow .vt-ap__hint { margin: 4px 0 0; }
.vt-ap__qrow .vt-select { width: 280px; flex: none; }
.vt-ap__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.vt-ap__nav .vt-btn { margin-bottom: 4px; }
.vt-ap__chosen { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; margin: 0; min-height: 28px; color: var(--ink-soft); }
.vt-ap__chosen .vt-icon { color: var(--well); stroke-width: 2.6; }
.vt-ap__chosen strong { color: var(--ink); }
.vt-ap__days { display: flex; gap: var(--space-2); overflow-x: auto; padding: 4px 4px 10px; margin: 0 -4px; scrollbar-width: thin; }
.vt-day { --_depth: 3px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 0 84px; min-height: 96px; padding: 8px 6px; margin-bottom: var(--_depth); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 var(--_depth) 0 var(--line); transform: translateY(0); transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-settle), border-color var(--vt-quick) ease, background-color var(--vt-quick) ease; }
.vt-day:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-1px); }
.vt-day:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); transition-duration: var(--vt-press); }
.vt-day__w { font: 600 15px/20px var(--font-sans); color: var(--ink-soft); }
.vt-day__d { font: 600 28px/34px var(--font-serif); font-variant-numeric: tabular-nums; }
.vt-day__n { font: 600 14px/20px var(--font-sans); color: var(--well); }
.vt-day.is-on { border-color: var(--primary); background: var(--primary); color: var(--on-primary); box-shadow: 0 var(--_depth) 0 var(--primary-deep); }
.vt-day.is-on .vt-day__w, .vt-day.is-on .vt-day__n { color: var(--on-primary); }
.vt-day:disabled { cursor: not-allowed; background: var(--surface-sunk); border-style: dashed; box-shadow: none; }
.vt-day:disabled .vt-day__n { color: var(--ink-soft); }
.vt-ap__slots { display: flex; flex-direction: column; gap: var(--space-4); min-height: 132px; }
.vt-ap__slots.is-nudge { animation: vt-nudge 360ms var(--vt-e-calm); }
@keyframes vt-nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(4px); } }
.vt-ap__parth { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-2); font: 600 17px/24px var(--font-sans); }
.vt-ap__parth span { font-weight: 400; font-size: 15px; color: var(--ink-soft); }
.vt-ap__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); }
.vt-ap__empty { margin: 0; padding: var(--space-6); border: 2px dashed var(--line); border-radius: var(--radius-md); color: var(--ink-soft); text-align: center; }
.vt-ap__sum { display: grid; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.vt-ap__sum > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); padding: 12px 16px; }
.vt-ap__sum > div + div { border-top: 1px solid var(--line); }
.vt-ap__sum > div:nth-child(odd) { background: color-mix(in srgb, var(--surface-sunk) 45%, var(--surface)); }
.vt-ap__sum dt { font-weight: 600; color: var(--ink-soft); }
.vt-ap__sum dd { margin: 0; font-weight: 600; }
.vt-ap__done { align-items: flex-start; }
.vt-ap__done .vt-ap__hint { margin: 0; max-width: 60ch; }
.vt-ap__done .vt-ap__nav { width: 100%; justify-content: flex-start; }
@container (max-width: 560px) {
  .vt-ap__qrow .vt-select { width: 100%; }
  .vt-ap__sum > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vt-ap__nav--sticky .vt-ap__chosen { order: -1; width: 100%; flex: none; justify-content: flex-start; }
  .vt-ap__nav--sticky .vt-btn--primary { flex: 1; }
  .vt-ap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .vt-day { flex: 0 0 76px; }
}
@media (max-width: 640px) {
  .vt-ap { padding: var(--space-4) var(--space-4) var(--space-6); }
  .vt-ap__head { padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
  .vt-ap__head .vt-progress--steps { flex: 1 1 100%; min-width: 0; }
  .vt-ap__title { font-size: 26px; line-height: 32px; }
}

/* ---------- Slot: checks in with a tick ---------- */
.vt-slot { --_depth: 3px; position: relative; display: block; width: 100%; height: 52px; padding: 0; margin-bottom: var(--_depth); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 600 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; overflow: hidden; box-shadow: 0 var(--_depth) 0 var(--line); transform: translateY(0); transition: transform var(--vt-settle) var(--vt-e-settle), box-shadow var(--vt-settle) var(--vt-e-settle), border-color var(--vt-quick) ease, background-color var(--vt-quick) ease; }
.vt-slot:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 calc(var(--_depth) + 1px) 0 var(--line), var(--shadow-sm); }
.vt-slot:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), var(--shadow-pressed); transition-duration: var(--vt-press); transition-timing-function: var(--vt-e-press); }
.vt-slot__drum { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transform: translateY(0); transition: transform var(--vt-calm) var(--vt-e-settle); }
.vt-slot__row { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; }
.vt-slot__row--held .vt-icon { width: 20px; height: 20px; stroke-width: 3; }
.vt-slot.is-on { border-color: var(--well); background: var(--well-tint); color: var(--well); box-shadow: 0 var(--_depth) 0 color-mix(in srgb, var(--well) 50%, var(--well-tint)); }
.vt-slot.is-on .vt-slot__drum { transform: translateY(-48px); }
.vt-slot:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--line); color: var(--ink-soft); background: var(--surface-sunk); box-shadow: none; text-decoration: line-through; }

/* ==========================================================================
   TriageStepper
   ========================================================================== */
.vt-tri { container-type: inline-size; padding: var(--space-6) var(--space-8) var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.vt-tri__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.vt-tri__head .vt-progress { flex: 0 1 300px; min-width: 220px; }
.vt-tri__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/22px var(--font-sans); color: var(--primary); }
.vt-tri__eyebrow .vt-icon { width: 22px; height: 22px; }
.vt-tri__title { margin: 4px 0 0; font: 600 30px/38px var(--font-serif); }
.vt-tri__panel { display: flex; flex-direction: column; gap: var(--space-4); }
.vt-tri__q { margin: 0; font: 600 26px/34px var(--font-serif); outline: none; text-wrap: balance; }
.vt-tri__q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.vt-tri__hint { margin: -8px 0 0; color: var(--ink-soft); }
.vt-tri__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px var(--space-6); margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); border-radius: var(--radius-md); background: var(--urgent-tint); color: var(--ink); }
.vt-tri__list li::marker { color: var(--urgent); }
.vt-tri__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.vt-tri__nav .vt-btn { margin-bottom: 4px; }
.vt-tri .vt-slider { padding: var(--space-4) var(--space-4) var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-sunk) 45%, var(--surface)); border: 1px solid var(--line); }
@media (max-width: 640px) {
  .vt-tri { padding: var(--space-4) var(--space-4) var(--space-6); }
  .vt-tri__head .vt-progress { flex: 1 1 100%; min-width: 0; }
  .vt-tri__title { font-size: 26px; line-height: 32px; }
  .vt-tri__q { font-size: 23px; line-height: 30px; }
  .vt-tri__list { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); }
  .vt-tri__nav .vt-btn--primary, .vt-tri__nav .vt-btn--secondary { flex: 1; }
}

.vt-outcome { --_c: var(--primary); --_t: var(--primary-tint); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--_t); color: var(--ink); }
.vt-outcome--well { --_c: var(--well); --_t: var(--well-tint); }
.vt-outcome--attention { --_c: var(--attention); --_t: var(--attention-tint); }
.vt-outcome--urgent { --_c: var(--urgent); --_t: var(--urgent-tint); border: 2px solid var(--urgent); }
.vt-outcome__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--_c); color: var(--_t); animation: vt-pop var(--vt-calm) var(--vt-e-settle) 140ms backwards; }
.vt-outcome--urgent .vt-outcome__icon { color: var(--on-primary); }
.vt-outcome__icon .vt-icon { width: 30px; height: 30px; stroke-width: 2.2; }
.vt-outcome__h { margin: 4px 0 6px; font: 600 28px/36px var(--font-serif); color: var(--ink); outline: none; }
.vt-outcome__h:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.vt-outcome__p { margin: 0; max-width: 60ch; font-size: 19px; line-height: 30px; }
.vt-outcome__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 640px) { .vt-outcome { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .vt-outcome__actions .vt-btn { flex: 1 1 100%; } }

/* ==========================================================================
   RepeatPrescription
   ========================================================================== */
.vt-rx { container-type: inline-size; padding: var(--space-6) var(--space-8) var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.vt-rx__head { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.vt-rx__title { margin: 0; font: 600 30px/38px var(--font-serif); }
.vt-rx__lead { margin: 4px 0 0; color: var(--ink-soft); }
.vt-rx__form, .vt-rx__done { display: flex; flex-direction: column; gap: var(--space-4); }
.vt-rx__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.vt-rx__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: 6px var(--space-4); transition: background-color var(--vt-quick) ease; }
.vt-rx__item + .vt-rx__item { border-top: 1px solid var(--line); }
.vt-rx__item:has(input:checked) { background: var(--primary-tint); }
.vt-rx__item.is-blocked { background: color-mix(in srgb, var(--surface-sunk) 50%, var(--surface)); }
.vt-rx__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vt-rx__review { font-size: 15px; }
.vt-rx__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.vt-rx__more .vt-field--md { max-width: none; }
.vt-rx__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.vt-rx__foot .vt-btn { margin-bottom: 4px; }
.vt-rx__count { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vt-rx__donehead { display: flex; align-items: center; gap: var(--space-4); }
.vt-rx__q { margin: 0; font: 600 26px/34px var(--font-serif); outline: none; }
.vt-rx__q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
@container (max-width: 620px) {
  .vt-rx__item { grid-template-columns: minmax(0, 1fr); padding: 6px var(--space-3) 12px; }
  .vt-rx__aside { flex-direction: row; flex-wrap: wrap; align-items: center; padding-left: 44px; }
  .vt-rx__more { grid-template-columns: minmax(0, 1fr); }
  .vt-rx__foot .vt-btn { width: 100%; }
}
@media (max-width: 640px) { .vt-rx { padding: var(--space-4) var(--space-4) var(--space-6); } .vt-rx__title { font-size: 26px; line-height: 32px; } }

/* ==========================================================================
   TestResults
   ========================================================================== */
.vt-results { min-width: 0; }
.vt-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.vt-results__h { margin: 0; font: 600 28px/36px var(--font-serif); }
.vt-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.vt-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color var(--vt-quick) ease; }
.vt-result.is-entering { animation: vt-fade-up var(--vt-calm) var(--vt-e-calm) backwards; animation-delay: calc(var(--_i, 0) * 40ms); }
@keyframes vt-fade-up { from { opacity: 0; transform: translateY(8px); } }
.vt-result.is-open { border-color: var(--line-strong); }
.vt-result__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); width: 100%; min-height: 76px; padding: 12px var(--space-4) 12px var(--space-6); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--vt-quick) ease; }
.vt-result__btn:hover { background: color-mix(in srgb, var(--primary-tint) 50%, transparent); }
.vt-result__btn:focus-visible { outline-offset: -4px; border-radius: var(--radius-lg); }
.vt-result__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink); }
.vt-result__icon--well { background: var(--well-tint); color: var(--well); }
.vt-result__icon--attention { background: var(--attention-tint); color: var(--attention); }
.vt-result__icon--urgent { background: var(--urgent-tint); color: var(--urgent); }
.vt-result__main { display: flex; flex-direction: column; min-width: 0; }
.vt-result__name { font: 600 18px/26px var(--font-sans); }
.vt-result__meta { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-result__chev { color: var(--ink-soft); transition: transform var(--vt-settle) var(--vt-e-calm); }
.vt-result.is-open .vt-result__chev { transform: rotate(180deg); }
.vt-result__detail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-6) var(--space-6) calc(var(--space-6) + 44px + var(--space-4)); }
.vt-result__detail.is-entering > * { animation: vt-fade-down var(--vt-calm) var(--vt-e-calm) backwards; }
.vt-result__note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunk); }
.vt-result__note p { margin: 0; }
.vt-result__note footer { margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
.vt-result__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vt-result__wait { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-soft); }
.vt-results__empty { padding: var(--space-6); border: 2px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-soft); text-align: center; }
@media (max-width: 640px) {
  .vt-result__btn { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px var(--space-3) 12px var(--space-4); gap: var(--space-3); }
  .vt-result__btn .vt-badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .vt-result__chev { grid-column: 3; grid-row: 1 / span 2; }
  .vt-result__detail { padding: var(--space-2) var(--space-4) var(--space-4); }
  .vt-results__head .vt-seg { width: 100%; }
}

/* range bar: fixed height so nothing shifts */
.vt-range { position: relative; padding: 34px 0 0; max-width: 520px; }
.vt-range__track { position: relative; height: 14px; border-radius: var(--radius-full); background: var(--surface-sunk); box-shadow: var(--shadow-inset); }
.vt-range__band { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); background: var(--well-tint); outline: 2px solid color-mix(in srgb, var(--well) 50%, transparent); outline-offset: -2px; }
.vt-range__mark { position: absolute; top: -6px; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.vt-range__val { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 0 8px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font: 700 15px/24px var(--font-sans); white-space: nowrap; }
.vt-range__ends { position: relative; height: 22px; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.vt-range__ends span { position: absolute; transform: translateX(-50%); }

/* ==========================================================================
   PrescriptionTracker
   ========================================================================== */
.vt-track { container-type: inline-size; --_fill: 0; min-width: 0; }
.vt-track:not(.vt-track--compact) { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.vt-track__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.vt-track__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/22px var(--font-sans); color: var(--primary); }
.vt-track__eyebrow .vt-icon { width: 22px; height: 22px; }
.vt-track__h { margin: 2px 0 0; font: 600 24px/32px var(--font-serif); }
.vt-track__ref { padding: 2px 10px; border-radius: var(--radius-sm); background: var(--surface-sunk); font: 600 15px/24px var(--font-sans); color: var(--ink); white-space: nowrap; }
.vt-track__rail { position: relative; }
.vt-track__rail::before, .vt-track__fill { content: ""; position: absolute; top: 19px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 2px; background: var(--line); }
.vt-track__fill { background: var(--primary); transform-origin: left center; transform: scaleX(var(--_fill)); transition: transform 700ms var(--vt-e-slide); }
.vt-track.is-complete .vt-track__fill { background: var(--well); }
.vt-track__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.vt-track__step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 4px; }
.vt-track__dot { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); color: var(--on-primary); margin-bottom: 6px; }
.vt-track__dot .vt-icon { width: 22px; height: 22px; stroke-width: 2.8; }
.vt-track__step.is-done .vt-track__dot { background: var(--primary); border-color: var(--primary); }
.vt-track__step.is-current .vt-track__dot { border: 3px solid var(--primary); }
.vt-track.is-complete .vt-track__step.is-current .vt-track__dot { background: var(--well); border-color: var(--well); color: var(--on-primary); }
[data-theme="dark"] .vt-track.is-complete .vt-track__step.is-current .vt-track__dot { color: var(--well-tint); }
.vt-track__beat { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); animation: vt-beatdot calc(var(--vt-beat) * 1.2) var(--vt-e-beat) infinite; }
@keyframes vt-beatdot { 0%, 100% { transform: scale(.75); } 12% { transform: scale(1.1); } 24% { transform: scale(.85); } 34% { transform: scale(1); } }
.vt-track__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.vt-track__step.is-todo .vt-track__t { color: var(--ink-soft); font-weight: 400; }
.vt-track__s { font-size: 15px; line-height: 20px; color: var(--ink-soft); }
.vt-track__note { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunk); font-size: 16px; line-height: 24px; }
@container (max-width: 520px) {
  .vt-track__rail::before, .vt-track__fill { top: 21px; bottom: 21px; left: 19px; right: auto; width: 4px; height: auto; }
  .vt-track__fill { transform-origin: center top; transform: scaleY(var(--_fill)); }
  .vt-track__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .vt-track__step { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; text-align: left; padding: 0; }
  .vt-track__dot { grid-row: span 2; margin: 0; }
  .vt-track__t { align-self: end; }
  .vt-track__s { align-self: start; }
}

/* ==========================================================================
   QueueCall
   ========================================================================== */
.vt-queue { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.vt-queue__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vt-queue__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 17px/24px var(--font-sans); }
.vt-queue__eyebrow .vt-icon { color: var(--primary); }
.vt-queue__live .vt-badge__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: vt-breathe calc(var(--vt-beat) * 2) var(--vt-e-beat) infinite; }
.vt-queue__fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--radius-md); background: var(--primary-tint); }
.vt-queue__pos, .vt-queue__wait { display: flex; flex-direction: column; min-width: 0; }
.vt-queue__wait { padding-left: var(--space-4); border-left: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.vt-queue__big { display: flex; align-items: flex-start; height: 64px; font: 600 60px/64px var(--font-serif); color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vt-queue__big .vt-roll__d { height: 64px; width: .56em; }
.vt-queue__big .vt-roll__c { line-height: 64px; }
.vt-queue__suf { font: 600 24px/34px var(--font-serif); margin-left: 2px; width: 1.2em; }
.vt-queue__mid { display: flex; align-items: center; height: 64px; padding-top: 18px; font: 600 30px/40px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-queue__mid .vt-roll__d { height: 40px; }
.vt-queue__mid .vt-roll__c { line-height: 40px; }
.vt-queue__mid > span:last-child { font-size: 20px; margin-left: 4px; }
.vt-queue__approx { font-size: 17px; font-weight: 400; color: var(--ink-soft); margin-right: 6px; }
.vt-queue__lab { font-size: 15px; line-height: 22px; color: var(--ink); }
.vt-queue__seats { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vt-queue__seats li { flex: 1; height: 30px; border-radius: 8px; border: 1.5px dashed var(--line-strong); font: 700 14px/27px var(--font-sans); text-align: center; color: var(--on-primary); transition: background-color var(--vt-calm) ease, border-color var(--vt-calm) ease; }
.vt-queue__seats li.is-ahead { border: 0; background: color-mix(in srgb, var(--primary) 32%, var(--surface)); }
.vt-queue__seats li.is-you { border: 0; background: var(--primary); }
.vt-queue.is-next .vt-queue__seats li.is-you { background: var(--well); }
.vt-queue__msg { margin: 0; height: 56px; color: var(--ink-soft); font-size: 17px; line-height: 26px; }
.vt-queue__acts { display: flex; flex-direction: column; gap: var(--space-2); }
@container (max-width: 340px) { .vt-queue__fig { grid-template-columns: minmax(0, 1fr); } .vt-queue__wait { padding-left: 0; border-left: 0; padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); } .vt-queue__mid { padding-top: 0; height: 44px; } }

/* ==========================================================================
   NextAppointment
   ========================================================================== */
.vt-next { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.vt-next__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.vt-next__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/22px var(--font-sans); color: var(--primary); }
.vt-next__eyebrow .vt-icon { width: 22px; height: 22px; }
.vt-next__h { margin: 4px 0 0; font: 600 26px/32px var(--font-serif); }
.vt-next__time { margin: 2px 0 0; font-size: 18px; color: var(--ink); }
.vt-next__count { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); }
.vt-next__cd { font: 600 40px/44px var(--font-serif); }
.vt-next__cd .vt-roll__d { height: 44px; }
.vt-next__cd .vt-roll__c { line-height: 44px; }
.vt-next__cdl { font: 600 14px/18px var(--font-sans); color: var(--ink); text-align: center; max-width: 72px; }
.vt-next__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vt-next__facts li { display: flex; align-items: center; gap: 10px; }
.vt-next__facts .vt-icon { color: var(--primary); }
.vt-next__acts { display: flex; flex-direction: column; gap: var(--space-2); min-height: 116px; }
.vt-next__in { display: flex; align-items: center; gap: var(--space-4); min-height: 108px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--well-tint); outline: none; animation: vt-fade-up var(--vt-calm) var(--vt-e-calm) backwards; }
.vt-next__in:focus-visible { outline: 3px solid var(--well); outline-offset: 3px; }
.vt-next__inh { margin: 0; font: 600 20px/26px var(--font-serif); color: var(--well); }
.vt-next__inp { margin: 2px 0 0; font-size: 16px; line-height: 24px; color: var(--ink); }
@container (max-width: 360px) { .vt-next__count { width: 80px; height: 80px; } .vt-next__cd { font-size: 32px; } .vt-next__h { font-size: 22px; line-height: 28px; } }