/* App controls share short feedback. The landing does not load this layer. */
:where(body.af-refresh, body.admin-page) {
  --af-interaction-rgb: 203 176 255;
  --af-interaction-accent: rgb(var(--af-interaction-rgb));
}
:where(body.af-refresh, body.admin-page) .worldview {
  --af-interaction-rgb: 116 212 195;
}
:where(body.af-refresh, body.admin-page) .passport-card.style-paper {
  --af-interaction-rgb: 101 67 145;
}
/* Low specificity preserves the tailored transitions on existing controls.
   Layout, backdrop filters and scrolling surfaces are never interpolated. */
:where(body.af-refresh, body.admin-page) :where(
  a[href], button, summary, input:not([type="hidden"]), select, textarea,
  [role="button"], [role="tab"], [role="option"], [role="menuitem"],
  [role="combobox"], [role="slider"], [tabindex]:not([tabindex="-1"]),
  label[for], label:has(input:not([type="hidden"]), select, textarea)
) {
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, opacity 140ms ease,
    outline-color 140ms ease, outline-offset 140ms ease,
    text-decoration-color 160ms ease, transform 160ms ease;
}
:where(body.af-refresh, body.admin-page) :where(
  a[href], button, summary, input:not([type="hidden"]), select, textarea,
  [role="button"], [role="tab"], [role="option"], [role="menuitem"],
  [role="combobox"], [role="slider"], [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--af-interaction-accent);
  outline-offset: 3px;
}
:where(body.af-refresh, body.admin-page) :where(
  .play-chip, .play-profile-chip, .af-unknown-time,
  label:has(input[type="file"])
):has(input:focus-visible) {
  outline: 2px solid var(--af-interaction-accent);
  outline-offset: 3px;
}
@keyframes af-interaction-choice {
  from { opacity: 0; scale: .55; }
  to { opacity: 1; scale: 1; }
}
@keyframes af-interaction-reveal {
  from { opacity: .72; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :where(body.af-refresh, body.admin-page) input:is([type="checkbox"], [type="radio"]):checked::after {
    animation: af-interaction-choice 160ms ease-out;
  }
/* Opening fades the content; native state and closing remain immediate. */
  :where(body.af-refresh, body.admin-page) details[open]:not(
    .af-legacy-menu, .mobile-more, .mobile-menu, #af-tools-menu
  ) > :not(summary) {
    animation: af-interaction-reveal 150ms ease-out;
  }
  :where(body.af-refresh, body.admin-page) dialog[open]:not(
    .af-play-drawer, .af-admin-login, #play-profile-dialog
  ) {
    animation: af-interaction-reveal 180ms ease-out;
  }
}
:where(body.af-refresh, body.admin-page) input[type="range"]::-webkit-slider-thumb {
  transition: scale 150ms ease, box-shadow 150ms ease;
}
:where(body.af-refresh, body.admin-page) input[type="range"]::-moz-range-thumb {
  transition: scale 150ms ease, box-shadow 150ms ease;
}
:where(body.af-refresh, body.admin-page) input[type="range"]:is(:hover, :focus-visible)::-webkit-slider-thumb {
  scale: 1.12;
}
:where(body.af-refresh, body.admin-page) input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb {
  scale: 1.12;
}
:where(body.af-refresh, body.admin-page) input[type="file"]::file-selector-button {
  transition: filter 150ms ease;
}
:where(body.af-refresh, body.admin-page) input[type="file"]:hover::file-selector-button {
  filter: brightness(1.12);
}
/* Respect both the OS preference and the app's motion setting. */
@media (prefers-reduced-motion: reduce) {
  html:root body:is(.af-refresh, .admin-page) :is(
    a[href], button, summary, input, select, textarea, [role="button"],
    [role="tab"], [role="option"], [role="menuitem"], [role="combobox"],
    [role="slider"], [tabindex], label:has(input), details > :not(summary), dialog,
    .formula-node, .formula-edge, .formula-edge-hit, .cosmo-planet
  ),
  html:root body:is(.af-refresh, .admin-page) :is(a[href], button, summary, [role="button"]) *,
  html:root body:is(.af-refresh, .admin-page) :is(a[href], button, summary, input, label:has(input))::before,
  html:root body:is(.af-refresh, .admin-page) :is(a[href], button, summary, input, label:has(input))::after {
    transition: none !important;
    animation: none !important;
  }
  html:root body:is(.af-refresh, .admin-page) input[type="range"]::-webkit-slider-thumb,
  html:root body:is(.af-refresh, .admin-page) input[type="range"]::-moz-range-thumb {
    transition: none !important;
    scale: 1 !important;
  }
  html:root body:is(.af-refresh, .admin-page) input[type="file"]::file-selector-button {
    transition: none !important;
  }
}
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) :is(
  a[href], button, summary, input, select, textarea, [role="button"],
  [role="tab"], [role="option"], [role="menuitem"], [role="combobox"],
  [role="slider"], [tabindex], label:has(input), details > :not(summary), dialog,
  .formula-node, .formula-edge, .formula-edge-hit, .cosmo-planet
),
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) :is(a[href], button, summary, [role="button"]) *,
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) :is(a[href], button, summary, input, label:has(input))::before,
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) :is(a[href], button, summary, input, label:has(input))::after {
  transition: none !important;
  animation: none !important;
}
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) input[type="range"]::-webkit-slider-thumb,
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) input[type="range"]::-moz-range-thumb {
  transition: none !important;
  scale: 1 !important;
}
html:root[data-motion-paused="true"] body:is(.af-refresh, .admin-page) input[type="file"]::file-selector-button {
  transition: none !important;
}