/* Primitivos nativos dos três produtos. Identidade em tokens.css;
   composição específica em cada produto. Ver docs/ui-refactor/CONTRACT.md. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block: var(--space-6); }
body {
  margin: 0;
  background: var(--brand-white);
  color: var(--brand-blue);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
body[data-surface="app"], body[data-surface="admin"], body.admin {
  font-size: var(--text-operational);
  line-height: 1.6;
}
a { color: var(--brand-blue); text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
h1, h2, h3, p, li, label { overflow-wrap: break-word; }
a, dd { overflow-wrap: anywhere; }
h1 {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}
h2 { line-height: 1.25; letter-spacing: var(--tracking-tight); font-weight: 600; }
h3 { line-height: 1.35; font-weight: 600; }
p { margin-block: 0 var(--space-4); }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.skip { position: absolute; left: -10000px; color: var(--brand-blue); }
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-white);
  z-index: 20;
}

/* Containers e cabeçalhos: cada superfície conserva sua navegação. */
.shell {
  padding: var(--space-5) max(var(--page-gutter), calc((100% - var(--container-max)) / 2));
}
header.shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
header.shell nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
header.shell nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  color: var(--brand-blue);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
header.shell nav a:hover, header.shell nav a:focus-visible {
  color: var(--brand-blue);
  background: var(--brand-beige);
  border-bottom-color: var(--brand-orange);
}
header.shell nav a[aria-current="page"] { border-bottom-color: var(--brand-orange); font-weight: 600; }
.logo { width: 160px; height: auto; flex-shrink: 0; }
.brand-word { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; }
footer.shell { background: var(--brand-blue); color: var(--brand-white); }
footer.shell a { color: var(--brand-beige); }
footer.shell :focus-visible { outline-color: var(--brand-orange); }
footer.shell p { margin: var(--space-1) 0; font-weight: 500; }
footer.shell nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
footer.shell nav a { display: inline-flex; align-items: center; min-height: 44px; }
body[data-header="blue"] header.shell { background: var(--brand-blue); color: var(--brand-white); border-bottom-color: var(--brand-blue); }
body[data-header="blue"] header.shell nav a,
body[data-header="blue"] header.shell .brand-word,
body[data-header="blue"] header.shell .store-title,
body[data-header="blue"] header.shell .cart-link,
body[data-header="blue"] header.shell label { color: var(--brand-white); }
body[data-header="blue"] header.shell nav a:hover,
body[data-header="blue"] header.shell nav a:focus-visible { color: var(--brand-blue); background: var(--brand-beige); }
body[data-header="blue"] header.shell :focus-visible { outline-color: var(--brand-orange); }
body[data-footer="light"] footer.shell { background: var(--brand-white); color: var(--brand-blue); border-top: 1px solid var(--border-subtle); }
body[data-footer="light"] footer.shell a { color: var(--brand-blue); }
body[data-footer="light"] footer.shell :focus-visible { outline-color: var(--brand-blue); }

/* Ações: dimensões consistentes, inclusive no HTML gerado pelo servidor. */
.btn, :where(button, input[type="submit"]) {
  background: var(--brand-orange);
  color: var(--brand-blue);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  min-height: var(--control-min-height);
  padding: var(--control-padding-y) var(--control-padding-x);
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  text-align: center;
  white-space: normal;
  transition: var(--control-transition);
}
:where(button:not([class]), input[type="submit"]:not([class])) {
  background: var(--brand-white);
  border-color: var(--brand-blue);
}
.btn:hover, :where(button, input[type="submit"]):hover { background: var(--brand-beige); }
.btn-secondary { background: transparent; color: var(--brand-blue); border: 1px solid var(--brand-blue); }
:where(button, input, select, textarea):disabled { cursor: not-allowed; border-style: dashed; }
.btn:active, :where(button):active { text-decoration: underline; text-underline-offset: 0.2em; }

input, select, textarea {
  max-width: 100%;
  min-width: 0;
  min-height: var(--control-min-height);
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-white);
  color: var(--brand-blue);
  line-height: 1.5;
}
input[type="checkbox"], input[type="radio"] {
  min-height: auto;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  accent-color: var(--brand-blue);
}
input[type="hidden"] { display: none; }
textarea { resize: vertical; }
fieldset { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin: var(--space-5) 0; padding: var(--space-5); }
legend { padding-inline: var(--space-2); font-weight: 600; }
label { display: inline-block; margin: var(--space-1) var(--space-3) var(--space-1) 0; }
label:has(input[type="checkbox"], input[type="radio"]) { min-height: var(--control-min-height); align-content: center; }
summary { cursor: pointer; min-height: var(--control-min-height); align-content: center; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-5); margin: var(--space-5) 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.card { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); background: var(--brand-white); }
.card h2 { margin-top: 0; font-size: 1.125rem; }
body[data-card-fit="contain"] .card img { object-fit: contain; width: 100%; height: 8rem; }
body[data-card-fit="cover"] .card img { object-fit: cover; width: 100%; height: 8rem; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.table th { font-weight: 600; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: var(--space-5); }
.table-scroll .table { min-width: 36rem; }
.flash, .error { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.flash { background: var(--brand-beige); }
.error { background: var(--brand-gray-100); }
.meta { color: var(--ink-muted); font-size: var(--text-sm); }
.steps { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-left: var(--space-5); }
.chart { display: flex; flex-direction: column; gap: var(--space-2); max-width: 36rem; margin: var(--space-4) 0; }
.chart .bar { background: var(--brand-orange); color: var(--brand-blue); min-height: 1.6rem; padding: var(--space-1) var(--space-2); font-weight: 600; border-radius: var(--radius-sm); }
.chart .bar.out { background: var(--brand-beige); }
/* ==========================================================================
   Contrato premium — camada compartilhada pelos três produtos.
   Regras acima continuam valendo; o que segue é o sistema de componentes.
   Direção e decisões: docs/ui-premium/CONTRACT.md.
   ========================================================================== */

/* --- Iconografia: Hugeicons Stroke Rounded, via {{ icon "alias" }} --------- */
.ico {
  display: inline-block;
  flex: none;
  vertical-align: -0.135em; /* alinhamento óptico com a linha de texto */
  color: inherit;
}

/* --- Tipografia editorial ------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: var(--space-5);
  height: 2px;
  background: var(--brand-orange);
  flex: none;
}
.display {
  margin: 0 0 var(--space-5);
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-title);
  text-wrap: balance;
}
.lead {
  max-width: var(--measure-narrow);
  margin: 0 0 var(--space-5);
  color: var(--ink-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.section {
  padding-block: var(--density-section);
}
.container {
  padding-inline: max(var(--page-gutter), calc((100% - var(--container-editorial)) / 2));
}

/* Cabeçalho de seção: título à esquerda, ação opcional à direita, alinhados
   pela linha de base — não centralizados por acidente. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.section-head > :last-child { margin-bottom: 0; }
.section-head .lead { margin-bottom: 0; }

/* --- Ações ---------------------------------------------------------------- */
/* Hierarquia estável: uma primária por contexto. */
.btn, :where(button, input[type="submit"]) {
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard),
    color var(--dur-state) var(--ease-standard),
    box-shadow var(--dur-state) var(--ease-standard),
    transform var(--dur-press) var(--ease-standard);
}
.btn-primary {
  background: var(--brand-orange);
  color: var(--brand-blue);
  border-color: transparent;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: color-mix(in srgb, var(--brand-orange) 88%, var(--brand-blue)); box-shadow: var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--brand-blue); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-sunken); }
.btn-quiet {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
}
.btn-quiet:hover { background: var(--surface-sunken); color: var(--brand-blue); }
/* Pressão discreta: o botão responde ao toque sem "pular". */
.btn:active, :where(button, input[type="submit"]):active { transform: translateY(1px); }
/* Estado de carregamento não pode mudar a largura do botão. */
.btn[aria-busy="true"], button[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
.btn[aria-busy="true"] .ico, button[aria-busy="true"] .ico { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Link de ação editorial: sublinhado que cresce, ícone que anda um pouco. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min-height);
  color: var(--brand-blue);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.link-action > span { box-shadow: inset 0 -1px 0 var(--brand-orange); transition: box-shadow var(--dur-state) var(--ease-standard); }
.link-action:hover > span { box-shadow: inset 0 -2px 0 var(--brand-orange); }
.link-action .ico { transition: transform var(--dur-state) var(--ease-standard); }
.link-action:hover .ico { transform: translate(2px, -2px); }

/* --- Campos --------------------------------------------------------------- */
input, select, textarea {
  border-radius: var(--radius-field);
  border-color: var(--border-strong);
  transition: border-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-blue); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field > label { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.field .hint { color: var(--ink-muted); font-size: var(--text-sm); }
/* Erro reserva espaço: a mensagem não empurra o formulário ao aparecer. */
.field .field-error { display: flex; align-items: center; gap: var(--space-2); min-height: 1.25rem; color: var(--brand-blue); font-size: var(--text-sm); font-weight: 600; }
.field .field-error .ico { color: var(--brand-orange); }
.field:has([aria-invalid="true"]) > input,
.field:has([aria-invalid="true"]) > select,
.field:has([aria-invalid="true"]) > textarea { border-color: var(--brand-orange); border-width: 2px; }

/* --- Superfícies ---------------------------------------------------------- */
.panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--brand-white);
  padding: var(--density-panel);
}
.panel-flush { padding: 0; overflow: hidden; }
.card { border-radius: var(--radius-card); }

/* Card editorial com mídia: a ação inteira é clicável por um stretched link,
   sem aninhar botão dentro de link. */
.card-editorial {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--brand-white);
  overflow: hidden;
  transition: box-shadow var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard);
}
.card-editorial:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card-editorial:has(a:focus-visible) { box-shadow: var(--shadow-2); }
.card-editorial .card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.card-editorial h3 { margin: 0; font-size: 1.125rem; letter-spacing: var(--tracking-tight); }
.card-editorial .stretch::after { content: ""; position: absolute; inset: 0; }

/* --- Mídia e fallback editorial ------------------------------------------
   Não há fotografia neste ambiente. Onde falta imagem, a capa é uma
   composição tipográfica intencional e identificada — nunca um retângulo
   vazio e nunca uma foto ilustrativa passando por obra executada.
   Pendência registrada em docs/ui-premium/MEDIA.md. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface-sunken);
}
.media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-16x9 { aspect-ratio: 16 / 9; }
.media-4x5 { aspect-ratio: 4 / 5; }
.media-3x2 { aspect-ratio: 3 / 2; }
/* Dentro de card, a mídia acompanha o raio do card no topo e some embaixo. */
.card-editorial .media { border-radius: 0; }

.media-fallback {
  /* Preenche a caixa de mídia inteira: a capa editorial ocupa exatamente o
     espaço que uma fotografia ocuparia, sem sobra de fundo. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--brand-blue);
  color: var(--brand-white);
  /* Campo de cor, não textura. A versão anterior usava listras diagonais
     repetidas (115deg, 22/44px) que liam como placeholder quebrado — foi
     exatamente o que a revisão reprovou. Aqui a capa é uma superfície sólida
     com um banho tonal suave do próprio azul e um filete laranja da marca:
     assume que não há foto, em vez de imitar uma. */
  background-image:
    linear-gradient(to top, var(--brand-orange) 0 3px, transparent 3px),
    radial-gradient(120% 90% at 82% 8%,
      color-mix(in srgb, var(--brand-white) 12%, transparent) 0%,
      transparent 62%);
}
.media-fallback .fb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.media-fallback .fb-index {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--brand-beige);
}
.media-fallback .fb-kind {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-beige);
}
.media-fallback .fb-title {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-title);
  text-wrap: balance;
}
.media-fallback .fb-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--brand-beige); }
/* Marca de honestidade: a capa diz que é conteúdo demonstrativo. */
.media-fallback .fb-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: color-mix(in srgb, var(--brand-white) 76%, var(--brand-blue));
}
.media-fallback.is-warm {
  background-color: var(--brand-beige);
  color: var(--brand-blue);
  /* Sobre o bege, a régua da base é laranja: vira acento de marca em vez de
     uma barra escura sem função. */
  background-image:
    linear-gradient(to top, var(--brand-orange) 0 4px, transparent 4px),
    repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in srgb, var(--brand-white) 22%, transparent) 22px 44px);
}
.media-fallback.is-warm .fb-index,
.media-fallback.is-warm .fb-kind,
.media-fallback.is-warm .fb-foot { color: color-mix(in srgb, var(--brand-blue) 78%, var(--brand-beige)); }
.media-fallback.is-warm .fb-note { color: color-mix(in srgb, var(--brand-blue) 70%, var(--brand-beige)); }

/* --- Badges e status ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-badge);
  background: var(--surface-sunken);
  color: var(--brand-blue);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Significado por rótulo + forma, nunca só por cor. */
.badge-accent { background: var(--accent-soft); }
.badge-warm { background: var(--surface-warm); }
.badge-solid { background: var(--brand-blue); color: var(--brand-white); }

/* --- Tabelas e listas operacionais ---------------------------------------- */
.table th {
  position: sticky;
  top: 0;
  background: var(--brand-white);
  color: var(--ink-muted);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color var(--dur-state) var(--ease-standard); }
.table tbody tr:hover { background: var(--surface-raised); }
.table-scroll { border-radius: var(--radius-card); }

/* --- Estados vazios ------------------------------------------------------- */
/* Orienta a próxima ação; não parece falha técnica. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.empty-state .ico { color: var(--ink-soft); }
.empty-state h3 { margin: 0; font-size: 1.0625rem; }
.empty-state p { margin: 0; max-width: var(--measure-narrow); color: var(--ink-muted); }

/* --- Overlays: diálogo e sheet -------------------------------------------- */
dialog {
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--brand-white);
  color: var(--brand-blue);
  box-shadow: var(--shadow-3);
  max-width: min(32rem, calc(100vw - 2 * var(--page-gutter)));
}
dialog::backdrop { background: color-mix(in srgb, var(--brand-blue) 45%, transparent); }
dialog > .dialog-body { padding: var(--space-6); }
dialog > .dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) 0;
}
dialog > .dialog-head h2 { margin: 0; font-size: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: overlay-in var(--dur-overlay) var(--ease-standard); }
  dialog[open]::backdrop { animation: fade-in var(--dur-overlay) var(--ease-standard); }
}
@keyframes overlay-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes fade-in { from { opacity: 0; } }

/* --- Movimento editorial --------------------------------------------------
   A versão anterior usava `animation-timeline: view()` numa classe `.reveal`
   que nenhum template chegava a usar: o efeito existia no arquivo e nunca
   executava na página. Agora o gatilho é IntersectionObserver
   (`/static/js/motion.js`) e o estado é uma classe, o que funciona nos três
   motores e não depende de scroll-driven animations.

   Contrato de segurança: TODA regra de entrada exige `html.motion`, e essa
   classe só existe se o JS rodou. Sem JS, sem suporte ou com erro, o conteúdo
   nasce visível. Nenhum `opacity: 0` fica órfão esperando JavaScript.

   Estas regras são inertes até um template optar por `data-reveal`. */
:where([data-reveal]) { --reveal-y: 18px; }

.motion:not(.motion-reduced) [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-editorial),
    transform var(--dur-reveal) var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.motion:not(.motion-reduced) [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Título por palavras: máscara + deslize vertical. É o gesto principal das
   páginas públicas — um por dobra, nunca em parágrafo corrido. */
.rv-word {
  display: inline-block;
  overflow: hidden;
  /* O overflow cortaria descendentes (g, p, ç). A folga é devolvida em
     margem negativa para não mexer na entrelinha. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}
.motion:not(.motion-reduced) [data-reveal="words"] {
  /* O container não se move: quem se move são as palavras dentro da máscara. */
  opacity: 1;
  transform: none;
  transition: none;
}
.motion:not(.motion-reduced) [data-reveal="words"] .rv-word-i {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--dur-words) var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * var(--stagger-word));
}
.motion:not(.motion-reduced) [data-reveal="words"].is-in .rv-word-i {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --control-transition: none; --dur-press: 1ms; --dur-state: 1ms; --dur-overlay: 1ms; --dur-enter: 1ms; }
  html { scroll-behavior: auto; }
  .btn:active, :where(button, input[type="submit"]):active { transform: none; }
  .link-action:hover .ico { transform: none; }
  .btn[aria-busy="true"] .ico, button[aria-busy="true"] .ico { animation: none; }
}