/* Copia de sputnik/design/components.css (commit 18da3ba). No se edita aquí: se cambia la fuente y se corre tools/sync_design.py. */
/* =====================================================================================
   Sputnik Racing · componentes compartidos (Settings hoy; Debrief y las vistas web después)

   Clases de los controles que se repiten en todo el producto, medidas en la referencia de diseño
   (workspace: docs/research/web-design-reference/, §4, §6b y §6c) con nuestros tokens. Las medidas
   salen de tokens.css, salvo los bordes de 1 px, el aire de 6 px (bajo las etiquetas y en la píldora), que
   venían de settings.css, y la flecha del bloque plegable (6 px, trazo de 1.5 px). Un cambio aquí cambia el control en todas las páginas que lo cargan.
   El overlay tiene su propia escala (--ov-*) y no carga este archivo.
   ===================================================================================== */

/* ---- Menú lateral (rail) ----
   Abierto muestra ícono y etiqueta; cerrado (`.rail-collapsed` en el <body>) solo el ícono, con el
   nombre y lo que hay adentro en un tooltip (`.rail-tooltip`). El contenido ocupa el espacio que libera. */
.rail {
  position: sticky; top: 0; height: 100vh; z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-1);
  width: var(--rail-w); padding: var(--space-3) var(--space-2);
  background: var(--surface-1); border-right: 1px solid var(--border-1);
  overflow: hidden;
  transition: width var(--dur-rail) var(--ease-rail);
}
.rail-collapsed .rail { width: var(--rail-w-collapsed); }
.rail-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--nav-item-h); margin-bottom: var(--space-2); }
.rail-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.rail-foot { margin-top: auto; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--nav-item-h); padding: 0 var(--space-2); border-radius: var(--radius-md);
  color: var(--text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--surface-3); color: var(--text-primary); }
.nav-item.active { background: var(--surface-3); color: var(--text-primary); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: var(--nav-bar-w); height: var(--nav-bar-h); transform: translateY(-50%);
  border-radius: var(--radius-pill); background: var(--accent);
}
.nav-icon { flex: none; width: var(--nav-icon); height: var(--nav-icon); }
/* Una marca sobre el ícono que se ve también con el menú cerrado (cambios sin guardar). */
.nav-dot {
  position: absolute; left: calc(var(--space-2) + var(--nav-icon) - var(--dot-size) / 2); top: calc(50% - var(--nav-icon) / 2 - var(--dot-size) / 4);
  width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-pill); background: var(--status-warn);
}
.nav-dot[hidden] { display: none; }
/* Abierto, la etiqueta ya lo dice: el punto solo va con el menú cerrado. */
body:not(.rail-collapsed) .nav-dot { display: none; }
@media (max-width: 1017px) { body:not(.rail-collapsed) .nav-dot:not([hidden]) { display: block; } }
/* La etiqueta se desvanece al cerrar, en el mismo tiempo, para que nada salte. */
.nav-label { opacity: 1; transition: opacity var(--dur-rail) var(--ease-rail); }
.rail-collapsed .nav-label { opacity: 0; pointer-events: none; }
/* Cabecera: el logo y el nombre; abierto, el botón de cerrar a la derecha. Cerrado, el logo es el
   botón de abrir: con el mouse o el foco se cruza con el ícono de la barra lateral. */
.rail-head { position: relative; justify-content: flex-start; }
.rail-logo {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: var(--nav-item-h); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-primary); text-align: left;
  cursor: default; pointer-events: none;
}
.logo-swap { position: relative; flex: none; width: var(--logo-size); height: var(--logo-size); }
.logo-swap > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity var(--dur-swap) var(--ease-out); }
.logo-mark { width: var(--logo-size); height: var(--logo-size); color: var(--accent); }
.ls-toggle { opacity: 0; color: var(--text-secondary); }
.brand-text { white-space: nowrap; font-weight: 700; letter-spacing: 0.02em; transition: opacity var(--dur-rail) var(--ease-rail); }
.brand-text span { font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.rail-toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.rail-toggle:hover { background: var(--surface-3); color: var(--text-primary); }
.rail-toggle .flip { display: inline-flex; transform: scaleX(-1); }
.rail-collapsed .rail-head { justify-content: center; }
.rail-collapsed .rail-logo { pointer-events: auto; cursor: pointer; width: var(--nav-item-h); justify-content: center; padding: 0; }
.rail-collapsed .rail-logo:hover { background: var(--surface-3); }
.rail-collapsed .rail-logo:hover .ls-mark, .rail-collapsed .rail-logo:focus-visible .ls-mark { opacity: 0; }
.rail-collapsed .rail-logo:hover .ls-toggle, .rail-collapsed .rail-logo:focus-visible .ls-toggle { opacity: 1; }
.rail-collapsed .brand-text { opacity: 0; width: 0; overflow: hidden; }
.rail-collapsed .rail-toggle { opacity: 0; visibility: hidden; }
/* En pantallas angostas el menú queda cerrado siempre y no se abre (breakpoint `lg` de la referencia):
   el logo es solo logo. */
@media (max-width: 1017px) {
  .rail { width: var(--rail-w-collapsed); }
  .nav-label { opacity: 0; pointer-events: none; }
  .rail-head { justify-content: center; }
  .rail-toggle, .brand-text, .ls-toggle { display: none; }
  .rail-logo { pointer-events: none !important; width: var(--nav-item-h); justify-content: center; padding: 0; }
  .rail-collapsed .rail-logo:hover { background: none; }
  .rail-collapsed .rail-logo:hover .ls-mark { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .nav-label, .logo-swap > span, .brand-text { transition: none; }
}

/* Tooltip del menú cerrado: el nombre y lo que hay adentro. Va fijo en el <body> porque el menú
   recorta su contenido (overflow: hidden). */
.rail-tooltip {
  position: fixed; z-index: 50; transform: translateY(-50%); display: grid; gap: 2px; max-width: var(--rail-tip-max);
  padding: var(--space-2) var(--space-3); background: var(--surface-4); border: 1px solid var(--border-2); border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--text-xs); line-height: var(--leading-normal); pointer-events: none;
}
.rail-tooltip strong { font-weight: 600; font-size: var(--text-sm); }
.rail-tooltip span { color: var(--text-secondary); white-space: pre-line; }

/* ---- Tarjeta ---- */
.card {
  background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 var(--space-4); border-radius: var(--radius-md); cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border-2); font-weight: 500; font-size: var(--text-sm); white-space: nowrap;
}
.btn:hover { background: var(--surface-4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
/* Lo que corta algo (apagar el core): borde y texto en rojo, nunca relleno. */
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) var(--banner-tint), transparent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Un botón principal deshabilitado no parece listo para usar: con opacity sola el acento seguía llamando. */
.btn.primary:disabled { background: var(--surface-3); border-color: var(--border-2); color: var(--text-dim); opacity: 1; }

/* ---- Campos ---- */
.field label, .field legend { display: block; padding: 0; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.field input[type="text"], .field input[type="number"], .field select {
  width: 100%; height: var(--control-h); padding: 0 var(--space-3);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-md);
}
.field input.narrow { max-width: var(--input-narrow); }
/* El foco de un campo es solo su borde en el acento. */
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .help { margin-top: 6px; font-size: var(--text-xs); color: var(--text-dim); }
.field .field-error { margin-top: 6px; font-size: var(--text-xs); color: var(--status-error); }
.field input[aria-invalid="true"] { border-color: var(--status-error); }

/* Título de un control dentro de una tarjeta (Brake tone, Track offset…): un escalón bajo el título de
   la tarjeta y siempre por encima de su ayuda, que va en --text-secondary. Gana a `.field legend`. */
.control-title, .field legend.control-title { margin: 0 0 6px; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }

/* ---- Etiqueta con su ayuda (i): la explicación larga va en un tooltip, como en la referencia ----
   El texto vive en el DOM (`.info-tip`, con id) para que el campo lo nombre en aria-describedby;
   se muestra al pasar el mouse o al llegar con el teclado. */
.label-row { display: flex; align-items: center; gap: var(--space-1); margin-bottom: 6px; }
.label-row label { margin-bottom: 0; }
.info {
  position: relative; display: inline-flex; padding: 0; border: 0; background: none;
  color: var(--text-dim); cursor: help; border-radius: var(--radius-pill);
}
.info:hover, .info:focus-visible { color: var(--text-primary); }
.info-icon { width: var(--info-size); height: var(--info-size); }
.info-tip {
  position: absolute; z-index: 3; left: calc(var(--space-2) * -1); bottom: calc(100% + var(--space-2));
  width: max-content; max-width: min(var(--tip-max), 80vw); padding: var(--space-2) var(--space-3); text-align: left;
  background: var(--surface-4); border: 1px solid var(--border-2); border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-normal);
  visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
/* Puente invisible sobre el hueco: el mouse llega al texto sin que se cierre. */
.info-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--space-2); }
.info:hover .info-tip, .info:focus-visible .info-tip { visibility: visible; opacity: 1; }
/* Escape lo cierra aunque siga el foco (la página pone `.tip-closed`). */
.info.tip-closed .info-tip { visibility: hidden; opacity: 0; }

/* ---- Campos en dos columnas dentro de una franja; en una ventana angosta, una ---- */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); align-items: start; }
@media (max-width: 760px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}
.check { display: flex; align-items: center; gap: var(--space-3); }
.check label { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); cursor: pointer; }
.field-grid > .check { min-height: var(--control-h); }

/* ---- Bloque plegable («Advanced settings») ---- */
.disclosure > summary {
  display: flex; align-items: center; gap: var(--space-2); list-style: none; cursor: pointer;
  max-width: var(--content-max); margin: 0 auto var(--space-5); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-1); color: var(--text-secondary); font-size: var(--text-sm);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure > summary:hover { color: var(--text-primary); }

/* ---- Casilla ---- */
.check-box {
  appearance: none; flex: none; display: inline-grid; place-content: center;
  width: var(--check-size); height: var(--check-size); margin: 0;
  background: var(--surface-4); border: 1px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check-box::before {
  content: ""; width: var(--check-mark-w); height: var(--check-mark-h); margin-top: calc(var(--check-mark-stroke) * -1);
  border: solid var(--accent-contrast); border-width: 0 0 var(--check-mark-stroke) var(--check-mark-stroke); transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.check-box:checked { background: var(--accent); border-color: var(--accent); }
.check-box:checked::before { transform: rotate(-45deg) scale(1); }
.check-box:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.check-box:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Interruptor: encender o apagar algo (un módulo). Es un checkbox con role="switch". ---- */
.switch {
  appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-pill);
  background: var(--surface-4); border: 1px solid var(--border-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.switch::before {
  content: ""; position: absolute; top: 50%; left: 1px;
  width: var(--switch-knob); height: var(--switch-knob); border-radius: var(--radius-pill);
  background: var(--text-secondary); transform: translateY(-50%);
  transition: left var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::before { left: calc(100% - var(--switch-knob) - 1px); background: var(--accent-contrast); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent); }
.switch:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::before { transition: none; }
}

/* ---- Control segmentado: una opción de pocas, a la vista (radios) ---- */
fieldset.field { margin: 0; border: 0; min-width: 0; padding-left: 0; padding-right: 0; }
.segmented {
  display: inline-flex; gap: var(--segment-pad); padding: var(--segment-pad); margin: 0;
  background: var(--surface-1); border: 1px solid var(--border-2); border-radius: var(--radius-md);
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label {
  display: inline-flex; align-items: center; height: var(--segment-h); padding: 0 var(--space-3); margin: 0;
  border-radius: calc(var(--radius-md) - var(--segment-pad)); cursor: pointer;
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
}
.segmented label:hover { color: var(--text-primary); }
.segmented input:checked + label { background: var(--surface-4); color: var(--text-primary); }
.segmented input:focus-visible + label { box-shadow: inset 0 0 0 1px var(--accent); }

/* ---- Píldora de estado (con punto) ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600;
  background: var(--surface-4); color: var(--text-secondary);
  --pill-color: var(--status-off);
}
.pill::before { content: ""; width: var(--pill-dot); height: var(--pill-dot); border-radius: var(--radius-pill); background: var(--pill-color); }
.pill.ok { --pill-color: var(--status-ok); color: var(--text-primary); }
.pill.degraded, .pill.not_implemented { --pill-color: var(--status-warn); color: var(--text-primary); }
.pill.error { --pill-color: var(--status-error); color: var(--text-primary); }
.pill.disabled { --pill-color: var(--status-off); }

/* ---- Badge: una marca corta junto a un nombre («Changed») ---- */
.badge {
  display: inline-flex; align-items: center; height: var(--badge-h); padding: 0 var(--space-1);
  border-radius: var(--radius-sm); background: var(--surface-4); color: var(--text-primary);
  font-size: var(--text-2xs); font-weight: 500; white-space: nowrap; vertical-align: middle;
}
/* Lo que no sigue la regla de la pantalla se marca a la vista, no en un tooltip («Needs restart»). */
.badge.warn { background: color-mix(in srgb, var(--status-warn) var(--banner-tint), transparent); color: var(--status-warn); }
.badge.info { background: color-mix(in srgb, var(--status-info) var(--banner-tint), transparent); color: var(--status-info); }

/* ---- Fase de neumático: el ícono del neumático en el color de la fase y su nombre («Peak») ----
   Los colores son los del pie del DDU (`--tire-*`); `data-phase` elige cuál. */
.phase-tag { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-primary); white-space: nowrap; }
.phase-tag .tire-icon { flex: none; width: 1em; height: 1em; fill: none; stroke: var(--tire, var(--text-dim)); stroke-width: 2; }
.phase-tag[data-phase="cold"] { --tire: var(--tire-cold); }
.phase-tag[data-phase="warming"] { --tire: var(--tire-warming); }
.phase-tag[data-phase="peak"] { --tire: var(--tire-peak); }

/* ---- Banner: un aviso que pide atención, con el color de su estado ---- */
.banner {
  --banner-color: var(--status-info);
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--banner-color) var(--banner-tint), transparent);
  border: 1px solid color-mix(in srgb, var(--banner-color) var(--banner-edge), transparent);
  color: var(--text-primary); font-size: var(--text-sm);
}
.banner[hidden] { display: none; }
.banner.warn { --banner-color: var(--status-warn); }
.banner.error { --banner-color: var(--status-error); }
.banner.ok { --banner-color: var(--status-ok); }
.banner-icon { flex: none; width: 1.2em; height: 1.2em; color: var(--banner-color); }

/* ---- Lo que lleva hidden no se ve, aunque una regla le dé display (pasa con .btn o un flex) ---- */
[hidden] { display: none !important; }

/* ---- Texto solo para lectores de pantalla ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Interruptor o casilla en lista: el nombre arriba y qué hace debajo; una marca a la derecha ---- */
.check .check-text { display: grid; gap: 2px; min-width: 0; }
.check .check-text .sub { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; }
.check > .badge { margin-left: auto; }
.label-row .badge { margin-left: var(--space-1); }

/* ---- La opción elegida de un control segmentado, explicada debajo ---- */
.option-hint { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Botón que se lee como un enlace (en el pie, en un banner) ---- */
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--text-dim); cursor: default; text-decoration: none; } /* p. ej. «Near today» sin iRacing */

/* ---- Lista vacía que dice qué significa («No problems found») ---- */
.empty-ok { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.empty-ok .banner-icon { color: var(--status-ok); }

/* ---- Tira de métricas: pocas cifras en una fila, separadas por una línea ---- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.stat { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border-1); }
.stat:last-child { border-right: 0; }
.stat .k { color: var(--text-secondary); font-size: var(--text-xs); }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
}

/* ---- Diálogo de confirmación: las consecuencias se leen justo antes de actuar ---- */
.dialog {
  width: min(var(--dialog-w), calc(100vw - var(--space-6))); padding: var(--space-5);
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
}
.dialog::backdrop { background: color-mix(in srgb, var(--surface-overlay) 70%, transparent); }
.dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.dialog p { margin: 0 0 var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }

/* ---- Toast: el resultado de una acción, arriba a la derecha, que se va solo (api/web/toast.js) ----
   Lo pone toast.js en <ol id="toasts" class="toast-stack">. Lo que sigue siendo cierto no va aquí:
   un error de campo, algo en curso o un estado se quedan junto a su control (banner, field-msg). */
.toast-stack {
  position: fixed; z-index: var(--z-toast); top: var(--space-4); right: var(--space-4);
  display: grid; gap: var(--space-2); width: min(var(--toast-w), calc(100vw - 2 * var(--space-4)));
  margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.toast {
  --toast-color: var(--status-info);
  display: flex; align-items: flex-start; gap: var(--space-2); pointer-events: auto;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-3); color: var(--text-primary); font-size: var(--text-sm);
  border: 1px solid color-mix(in srgb, var(--toast-color) var(--banner-edge), transparent);
  box-shadow: inset 3px 0 0 var(--toast-color), var(--toast-shadow);
  animation: toast-in var(--dur-normal) var(--ease-out);
}
.toast.ok { --toast-color: var(--status-ok); }
.toast.warn { --toast-color: var(--status-warn); }
.toast.error { --toast-color: var(--status-error); }
.toast-icon {
  flex: none; width: var(--icon-size); height: var(--icon-size); margin-top: 1px; color: var(--toast-color);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.toast-text { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.toast-count { flex: none; color: var(--text-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.toast-close {
  flex: none; width: var(--icon-size); height: var(--icon-size); padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-secondary); font: inherit; line-height: 1; cursor: pointer;
}
.toast-close:hover { color: var(--text-primary); }
.toast-close:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 1px; }
.toast.is-leaving { animation: toast-out var(--dur-normal) var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(calc(100% + var(--space-4))); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(calc(100% + var(--space-4))); } }
/* Sin movimiento: el aviso aparece y se desvanece en su lugar. */
@keyframes toast-fade-in { from { opacity: 0; } }
@keyframes toast-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation-name: toast-fade-in; }
  .toast.is-leaving { animation-name: toast-fade-out; }
}

/* Pantalla de «esta página ya no funciona» (por ejemplo, la pestaña vieja de Settings tras un reinicio): oscura a
   pagina completa en cualquier tema, por eso usa la escala neutra y no los tokens de superficie y texto, que cambian
   con el tema claro. Quien la usa la deja `hidden` y pone `inert` en el resto de la página. */
.retired { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-5); background: var(--n-950); color: var(--n-0); text-align: center; }
.retired[hidden] { display: none; }
.retired-title { margin: 0; font-size: calc(var(--text-xl) * 2); font-weight: 700; outline: none; }
.retired-detail { margin: 0; max-width: 40ch; color: var(--n-200); font-size: var(--text-lg); }