/* ============================================================================
   ValetOS Ticket · CAPA 2 — NÚCLEO ESTRUCTURAL
   ----------------------------------------------------------------------------
   Layout, slots, motor de densidad, accesibilidad. ESTABLE: los temas no
   deberían necesitar tocar este archivo.

   No hay un solo color literal aquí abajo. Todo sale de tokens.css.
   ========================================================================== */

/* ── Raíz y contexto de contenedor ────────────────────────────────────────
   container-type: size permite usar cqi/cqb. Esto es lo que hace que el
   ticket se escale igual a pantalla completa que dentro del marco de
   previsualización del studio. Nunca uses vw/vh en un tema.              */

.vt-root {
  container-type: size;
  container-name: vt;
  position: relative;
  isolation: isolate;
  block-size: 100%;
  inline-size: 100%;
  overflow: hidden;
  background-color: var(--vt-canvas);
  background-image: var(--vt-canvas-image);
  background-size: cover;
  background-position: center;
  color: var(--vt-ink);
  font-family: var(--vt-font-body);
  line-height: 1.45;
  /* Ojo: el font-size NO va aquí. Las unidades cqi resuelven contra el
     contenedor ANCESTRO, y .vt-root es el contenedor: aquí caerían a
     unidades de viewport. Va en .vt-ticket, que sí es descendiente. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Multiplicador de densidad — lo escribe el motor de ajuste */
  --vt-dm: 1;

  /* Escala tipográfica derivada. cqi = 1% del ancho del contenedor. */
  --vt-fs-display: calc(clamp(50px, 15.5cqi, 104px) * var(--vt-scale-display) * var(--vt-dm));
  --vt-fs-title:   calc(clamp(18px, 5.4cqi, 30px)   * var(--vt-scale-title)   * var(--vt-dm));
  --vt-fs-text:    calc(clamp(13px, 3.6cqi, 16px)   * var(--vt-scale-text)    * var(--vt-dm));
  --vt-fs-small:   calc(clamp(11px, 3.1cqi, 13.5px) * var(--vt-scale-text)    * var(--vt-dm));
  --vt-fs-label:   calc(clamp(9.5px, 2.7cqi, 11.5px)* var(--vt-scale-text));
  --vt-fs-amount:  calc(clamp(26px, 8.2cqi, 44px)   * var(--vt-scale-display) * var(--vt-dm));

  --vt-gap-d: calc(var(--vt-gap) * var(--vt-dm));
  --vt-pad-frame-d: calc(var(--vt-pad-frame) * var(--vt-dm));
  --vt-pad-card-d: calc(var(--vt-pad-card) * var(--vt-dm));
}

.vt-root *,
.vt-root *::before,
.vt-root *::after { box-sizing: border-box; }

.vt-root p,
.vt-root h1, .vt-root h2, .vt-root h3 { margin: 0; }

/* ── Capa decorativa ──────────────────────────────────────────────────────
   Los ornamentos del tema viven aquí, fuera del flujo y fuera del árbol de
   accesibilidad. Un tema puede pintar hasta 4 pseudo-elementos:
   .vt-ornaments::before/::after y .vt-ornaments > i::before/::after      */

.vt-ornaments {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--vt-ornament-opacity);
  overflow: hidden;
}
.vt-ornaments > i { position: absolute; inset: 0; display: block; }

/* ── Marco del ticket ─────────────────────────────────────────────────────
   Grid de 3 filas: cabecera fija · cuerpo flexible · pie fijo.
   El pie NUNCA sale de pantalla — es donde vive el CTA.                  */

.vt-ticket {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: 560px;
  margin-inline: auto;
  padding: var(--vt-pad-frame-d);
  /* Área segura: notch / isla dinámica arriba, barra de gestos abajo.
     El consumidor inyecta --vt-safe-top/-bottom desde env(safe-area-inset-*).
     Sin ellos vale 0, así que el ticket sigue funcionando fuera de un móvil. */
  padding-block-start: calc(var(--vt-pad-frame-d) + var(--vt-safe-top, 0px));
  padding-block-end: calc(var(--vt-pad-frame-d) + var(--vt-safe-bottom, 0px));
  gap: var(--vt-gap-d);
  font-size: var(--vt-fs-text);
  background-color: var(--vt-surface);
  background-image: var(--vt-texture);
  border-radius: var(--vt-radius-frame);
  box-shadow: var(--vt-shadow-frame);
  margin-block: var(--vt-frame-inset);
  block-size: calc(100% - var(--vt-frame-inset) * 2);
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.vt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-block-size: 0;
}

.vt-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
}
.vt-brand-mark {
  block-size: calc(clamp(20px, 6cqi, 30px) * var(--vt-brand-size) * var(--vt-dm));
  inline-size: auto;
  max-inline-size: 42cqi;
  object-fit: contain;
}
.vt-brand-name {
  font-family: var(--vt-font-display);
  font-weight: var(--vt-display-weight);
  font-size: calc(clamp(15px, 4.6cqi, 22px) * var(--vt-brand-size) * var(--vt-dm));
  letter-spacing: var(--vt-title-tracking);
  color: var(--vt-brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-head-aux {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-3);
  white-space: nowrap;
}
.vt-head-aux svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }

/* ── Cuerpo ───────────────────────────────────────────────────────────────
   overflow:auto es la última red de seguridad: solo actúa si ni en densidad
   `dense` cabe el contenido. Cabecera y pie siguen fijos.                */

.vt-body {
  display: flex;
  flex-direction: column;
  gap: var(--vt-gap-d);
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.vt-body::-webkit-scrollbar { inline-size: 0; }

/* ── Hero: eyebrow + número + título ──────────────────────────────────── */

.vt-hero { text-align: var(--vt-hero-align); }

.vt-eyebrow {
  font-family: var(--vt-label-font);
  font-size: var(--vt-fs-label);
  font-weight: var(--vt-label-weight);
  letter-spacing: var(--vt-label-tracking);
  text-transform: var(--vt-label-transform);
  color: var(--vt-accent);
  margin-block-end: .25em;
}

.vt-ticket-no {
  font-family: var(--vt-font-display);
  font-size: var(--vt-fs-display);
  font-weight: var(--vt-display-weight);
  letter-spacing: var(--vt-display-tracking);
  text-transform: var(--vt-display-transform);
  line-height: var(--vt-display-leading);
  color: var(--vt-ink);
  /* Evita que un número largo (#1284) desborde su columna */
  overflow-wrap: anywhere;
}

/* inline-block para que siga el text-align del hero (--vt-hero-align) y se
   centre solo en los temas simétricos, sin reglas condicionales. */
.vt-rule {
  display: inline-block;
  inline-size: 56px;
  block-size: 3px;
  background: var(--vt-accent);
  margin-block: calc(var(--vt-gap-d) * .5);
  border: 0;
}

.vt-title {
  font-family: var(--vt-font-display);
  font-size: var(--vt-fs-title);
  font-weight: var(--vt-title-weight);
  letter-spacing: var(--vt-title-tracking);
  text-transform: var(--vt-title-transform);
  line-height: 1.1;
  color: var(--vt-ink);
  text-wrap: balance;
}

.vt-subtitle {
  margin-block-start: .35em;
  font-size: var(--vt-fs-text);
  color: var(--vt-ink-2);
  text-wrap: pretty;
}

/* ── Banda de estado ──────────────────────────────────────────────────── */

.vt-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--vt-pad-card-d) * .8) var(--vt-pad-card-d);
  border-radius: var(--vt-radius-card);
  background: var(--vt-status-soft, var(--vt-neutral-soft));
  color: var(--vt-status-ink, var(--vt-neutral-ink));
  border: var(--vt-border-width) var(--vt-border-style) transparent;
}
.vt-status-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: calc(26px * var(--vt-dm));
  block-size: calc(26px * var(--vt-dm));
  border-radius: 999px;
  border: 2px solid currentColor;
  color: var(--vt-status, var(--vt-neutral));
}
.vt-status-icon svg { inline-size: 60%; block-size: 60%; }
.vt-status-text { min-inline-size: 0; }
.vt-status-title {
  display: block;
  font-weight: 700;
  font-size: var(--vt-fs-text);
  line-height: 1.25;
}
.vt-status-note {
  display: block;
  font-size: var(--vt-fs-small);
  opacity: .82;
  line-height: 1.3;
}

/* Resolución de intención → tokens semánticos */
[data-vt-intent="ok"]      { --vt-status: var(--vt-ok);      --vt-status-soft: var(--vt-ok-soft);      --vt-status-ink: var(--vt-ok-ink); }
[data-vt-intent="warn"]    { --vt-status: var(--vt-warn);    --vt-status-soft: var(--vt-warn-soft);    --vt-status-ink: var(--vt-warn-ink); }
[data-vt-intent="danger"]  { --vt-status: var(--vt-danger);  --vt-status-soft: var(--vt-danger-soft);  --vt-status-ink: var(--vt-danger-ink); }
[data-vt-intent="info"]    { --vt-status: var(--vt-info);    --vt-status-soft: var(--vt-info-soft);    --vt-status-ink: var(--vt-info-ink); }
[data-vt-intent="neutral"] { --vt-status: var(--vt-neutral); --vt-status-soft: var(--vt-neutral-soft); --vt-status-ink: var(--vt-neutral-ink); }

/* ── Tarjeta genérica ─────────────────────────────────────────────────── */

.vt-card {
  padding: var(--vt-pad-card-d);
  background: var(--vt-surface-2);
  border: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
  border-radius: var(--vt-radius-card);
  box-shadow: var(--vt-shadow-card);
}

.vt-divider {
  display: var(--vt-divider-display);
  block-size: 0;
  border: 0;
  border-block-start: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
  margin-block: calc(var(--vt-pad-card-d) * .7);
}

/* ── Vehículo ─────────────────────────────────────────────────────────── */

.vt-vehicle-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vt-vehicle-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: calc(40px * var(--vt-dm));
  block-size: calc(40px * var(--vt-dm));
  border-radius: var(--vt-radius-chip);
  background: var(--vt-surface-3);
  color: var(--vt-ink);
}
.vt-vehicle-icon svg { inline-size: 58%; block-size: 58%; }
.vt-vehicle-id { flex: 1 1 auto; min-inline-size: 0; }
.vt-vehicle-name {
  display: block;
  font-weight: 700;
  font-size: var(--vt-fs-text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.vt-vehicle-plate {
  display: block;
  font-family: var(--vt-font-mono);
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-3);
  letter-spacing: .04em;
}

.vt-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .32em .72em;
  border-radius: var(--vt-radius-chip);
  background: var(--vt-status-soft, var(--vt-neutral-soft));
  color: var(--vt-status-ink, var(--vt-neutral-ink));
  font-size: var(--vt-fs-small);
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.vt-chip svg { inline-size: 1em; block-size: 1em; }

.vt-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.vt-amount-label {
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-2);
}
.vt-amount {
  font-family: var(--vt-amount-font);
  font-size: var(--vt-fs-amount);
  font-weight: var(--vt-amount-weight);
  letter-spacing: var(--vt-amount-tracking);
  line-height: 1;
  color: var(--vt-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Métricas (ETA · zona) ────────────────────────────────────────────── */

/* flex-wrap y no grid: con una sola métrica ocupa el ancho completo, con dos
   se reparten, y con tres saltan de línea sin dejar huecos. */
.vt-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-gap-d);
}
.vt-metric {
  flex: 1 1 128px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--vt-pad-card-d);
  background: var(--vt-surface-2);
  border: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
  border-radius: var(--vt-radius-card);
  box-shadow: var(--vt-shadow-card);
  min-inline-size: 0;
}
.vt-metric-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: calc(32px * var(--vt-dm));
  block-size: calc(32px * var(--vt-dm));
  border-radius: var(--vt-radius-chip);
  background: var(--vt-accent-soft);
  color: var(--vt-accent);
}
.vt-metric-icon svg { inline-size: 58%; block-size: 58%; }
.vt-metric-body { min-inline-size: 0; }
.vt-metric-label {
  display: block;
  font-family: var(--vt-label-font);
  font-size: var(--vt-fs-label);
  font-weight: var(--vt-label-weight);
  letter-spacing: var(--vt-label-tracking);
  text-transform: var(--vt-label-transform);
  color: var(--vt-ink-3);
}
.vt-metric-value {
  display: block;
  font-family: var(--vt-font-display);
  font-weight: 750;
  font-size: calc(var(--vt-fs-text) * 1.28);
  line-height: 1.15;
  color: var(--vt-ink);
  overflow-wrap: anywhere;
}
.vt-metric-note {
  display: block;
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-3);
  line-height: 1.25;
}

/* ── Aviso informativo ────────────────────────────────────────────────── */

.vt-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: calc(var(--vt-pad-card-d) * .85) var(--vt-pad-card-d);
  border-radius: var(--vt-radius-card);
  background: var(--vt-info-soft);
  color: var(--vt-info-ink);
  font-size: var(--vt-fs-small);
  line-height: 1.35;
}
.vt-notice-icon { flex: none; color: var(--vt-info); margin-block-start: .05em; }
.vt-notice-icon svg { inline-size: calc(18px * var(--vt-dm)); block-size: calc(18px * var(--vt-dm)); }
.vt-notice-title { font-weight: 700; display: block; }

/* ── Recibo (estado cerrado) ──────────────────────────────────────────── */

.vt-receipt { display: flex; flex-direction: column; gap: .45em; }
.vt-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-2);
}
.vt-receipt-row > span:last-child {
  font-family: var(--vt-font-mono);
  color: var(--vt-ink);
  text-align: end;
}
.vt-receipt-row[data-total] {
  font-size: var(--vt-fs-text);
  font-weight: 700;
  color: var(--vt-ink);
  padding-block-start: .5em;
  border-block-start: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
}

/* ── Propina al valet ─────────────────────────────────────────────────────
   Se monta sobre .vt-card para que cada tema la herede sin escribir reglas:
   la receta de tarjeta del tema ya define fondo, borde, radio y sombra.   */

.vt-tip-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-block-end: calc(var(--vt-pad-card-d) * .65);
}
.vt-tip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--vt-fs-text);
  line-height: 1.2;
  color: var(--vt-ink);
}
.vt-tip-title svg {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  color: var(--vt-accent);
}
.vt-tip-note {
  display: block;
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-3);
  line-height: 1.3;
}

/* Grid y no flex-wrap: con flex, el cuarto importe caía solo a una segunda
   fila y se estiraba a todo el ancho. auto-fit con mínimo fijo reparte los
   cuatro en una fila y degrada a 2×2 —equilibrado— en pantallas muy estrechas
   o cuando el copy es largo ("Sin propina" mide el doble que "No tip"). */
.vt-tip-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 6px;
}
.vt-tip-option {
  min-inline-size: 0;
  min-block-size: 44px;                     /* target táctil — no reducir */
  padding: .5em .6em;
  font-family: var(--vt-font-body);
  font-size: var(--vt-fs-text);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--vt-ink-2);
  background: var(--vt-surface-3);
  border: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
  border-radius: var(--vt-radius-control);
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.vt-tip-option:hover { filter: brightness(1.06); }
.vt-tip-option:active { transform: translateY(1px); }
.vt-tip-option:focus-visible { outline: 3px solid var(--vt-accent); outline-offset: 2px; }

/* La selección no se marca solo con color: aria-pressed la expone a lectores
   de pantalla y el peso tipográfico la refuerza para daltonismo.

   La clase va DUPLICADA a propósito. Un tema que redefina el fondo de
   .vt-tip-option tiene la misma especificidad que este selector y, al cargarse
   después, borraría el resaltado sin querer — el usuario dejaría de ver cuánto
   va a propinar. Duplicar la clase sube la especificidad a (0,3,0) y convierte
   el olvido en imposible; un tema que quiera su propio estilo de selección
   sigue pudiendo, con [data-vt-theme="x"] .vt-tip-option[aria-pressed="true"]. */
.vt-tip-option.vt-tip-option[aria-pressed="true"] {
  color: var(--vt-accent-ink);
  background: var(--vt-accent);
  border-color: var(--vt-accent);
  font-weight: 800;
}

.vt-tip-custom { display: block; margin-block-start: 6px; }
.vt-tip-custom input {
  inline-size: 100%;
  min-block-size: 40px;
  padding: .5em .75em;
  font-family: var(--vt-font-body);
  font-size: var(--vt-fs-small);
  color: var(--vt-ink);
  background: var(--vt-surface-3);
  border: var(--vt-border-width) var(--vt-border-style) var(--vt-border-color);
  border-radius: var(--vt-radius-control);
}
.vt-tip-custom input::placeholder { color: var(--vt-ink-3); }
.vt-tip-custom input:focus-visible { outline: 3px solid var(--vt-accent); outline-offset: 1px; }

/* ── Pie: acciones ────────────────────────────────────────────────────── */

/* ── QR de retiro ─────────────────────────────────────────────────────────
   El plato del QR es SIEMPRE blanco: debe escanear bien sobre cualquier
   tema. El marco exterior sí toma la superficie/borde del tema.           */

.vt-qr {
  display: grid;
  justify-items: center;
  gap: calc(6px * var(--vt-dm));
  text-align: center;
}
.vt-qr-title {
  font-family: var(--vt-label-font);
  font-size: var(--vt-fs-label);
  font-weight: var(--vt-label-weight);
  letter-spacing: var(--vt-label-tracking);
  text-transform: var(--vt-label-transform);
  color: var(--vt-ink-3);
}
.vt-qr-plate {
  display: grid;
  place-items: center;
  padding: calc(8px * var(--vt-dm));
  background: #ffffff;
  border-radius: calc(var(--vt-radius-card) * 0.75);
  box-shadow: var(--vt-shadow-card);
  line-height: 0;
}
.vt-qr-plate img {
  inline-size: clamp(96px, 34cqi, 168px);
  block-size: auto;
  aspect-ratio: 1;
}
.vt-qr-note {
  max-inline-size: 34ch;
  font-size: var(--vt-fs-small);
  color: var(--vt-ink-2);
}
/* En densidad compacta el QR se reduce antes que desaparecer. */
.vt-root[data-vt-density="dense"] .vt-qr-plate img { inline-size: clamp(84px, 26cqi, 128px); }
.vt-root[data-vt-density="dense"] .vt-qr-note { display: none; }

.vt-foot {
  display: flex;
  flex-direction: column;
  gap: calc(var(--vt-gap-d) * .6);
}

.vt-btn {
  --_bg: var(--vt-surface-2);
  --_fg: var(--vt-ink);
  --_bd: var(--vt-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 100%;
  min-block-size: 44px;                    /* target táctil — no reducir */
  padding: .7em 1.1em;
  font-family: var(--vt-btn-font, var(--vt-font-body));
  font-size: var(--vt-fs-text);
  font-weight: var(--vt-btn-weight, 700);
  letter-spacing: var(--vt-btn-tracking, 0);
  text-transform: var(--vt-btn-transform, none);
  line-height: 1.15;
  text-align: center;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--vt-border-width) var(--vt-border-style) var(--_bd);
  border-radius: var(--vt-radius-control);
  box-shadow: var(--vt-shadow-control);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.vt-btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.vt-btn > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

.vt-btn--primary {
  --_bg: var(--vt-accent);
  --_fg: var(--vt-accent-ink);
  --_bd: var(--vt-accent);
}
.vt-btn--ghost {
  --_bg: transparent;
  --_fg: var(--vt-ink);
  --_bd: var(--vt-border-color);
  box-shadow: none;
  font-weight: 600;
}

.vt-btn:hover { filter: brightness(1.06); }
.vt-btn:active {
  transform: translateY(1px);
  box-shadow: var(--vt-shadow-control-active);
}
.vt-btn:focus-visible {
  outline: 3px solid var(--vt-accent);
  outline-offset: 2px;
}
.vt-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.vt-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--vt-fs-label);
  color: var(--vt-ink-3);
  text-align: center;
  line-height: 1.3;
}
.vt-trust svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* ── MOTOR DE DENSIDAD ────────────────────────────────────────────────────
   Tres escalones. Los escribe valetos-ticket.js midiendo desbordamiento.
   No se usa transform:scale: rompería el texto y los targets táctiles.  */

.vt-root[data-vt-density="compact"] { --vt-dm: .90; }
.vt-root[data-vt-density="dense"]   { --vt-dm: .80; }

/* Prioridad 3 = ornamento informativo. Es lo primero que se sacrifica. */
.vt-root[data-vt-density="dense"] [data-vt-priority="3"] { display: none; }

/* Prioridad 2 solo cae si ni en `dense` cabe (lo marca el motor). */
.vt-root[data-vt-collapse="2"] [data-vt-priority="3"],
.vt-root[data-vt-collapse="2"] [data-vt-priority="2"] { display: none; }

/* Prioridad 1 nunca se oculta: ticket, estado, importe y CTA. */

/* ── Accesibilidad ────────────────────────────────────────────────────── */

.vt-sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .vt-root *, .vt-root *::before, .vt-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  .vt-root { --vt-ink-3: var(--vt-ink-2); }
  .vt-card, .vt-metric { --vt-border-width: 2px; }
}