/* av-kit interaction styles (company code). Controls keep their own look at rest; on use they get a soft glow and a small
   lift on hover (fine pointers only), a quick compression on press that springs back on release, on-states that grow in,
   a focus ring that snaps in, and a slim volume slider. Only transform, colour, shadow and opacity change: nothing in the
   page flow moves. Motion lives only under prefers-reduced-motion: no-preference and html:not(.av-reduced-motion).
   Default values are the universe guide's; each site overrides the --av-* tokens on :root (or any ancestor) to match its
   own subject. Every selector is wrapped in :where(), so any site rule wins without !important.

   Vendor pseudo-elements (::-webkit-*, ::-moz-*) always stand in rules of their own: one unknown selector drops a whole rule.

   Classes: .av-control (buttons, pills) · .av-control--icon (round icon buttons: scale instead of lift) · .av-row (list
   rows) · .av-toggle (aria-pressed toggle: grows an on-state pill) · .av-range (volume slider) · .av-hit (44 px touch area). */
:root {
  --av-accent-rgb: 226, 201, 143;
  --av-focus-color: #d3bea0;
  --av-track-color: rgba(191, 206, 227, .28);
  --av-spring: cubic-bezier(.34, 1.56, .64, 1);
  --av-ease: cubic-bezier(.2, .8, .2, 1.08);
  --av-out: cubic-bezier(.22, 1, .36, 1);
  --av-dur-transform: 180ms;
  --av-dur-color: 160ms;
  --av-dur-shadow: 180ms;
  --av-dur-filter: 120ms;
  --av-dur-press: 120ms;
  --av-dur-slide: 220ms;
  --av-dur-grow: 240ms;
  --av-dur-focus: 200ms;
  --av-hover-lift: -1px;
  --av-hover-scale: 1.07;
  --av-row-shift: 3px;
  --av-press-scale: .92;
  --av-press-scale-row: .985;
  --av-press-brightness: 1.22;
  --av-toggle-from-scale: .55;
  --av-focus-width: 2px;
  --av-focus-offset: 5px;
  --av-focus-from-offset: 10px;
  --av-range-focus-offset: 4px;
  --av-hit-min: 44px;
  --av-range-width: 58px;
  --av-range-height: 44px;
  --av-track-height: 2px;
  --av-thumb-size: 10px;
  --av-thumb-hover-scale: 1.3;
  --av-thumb-active-scale: 1.5;
  --av-muted-opacity: .45;
}

/* ---- base: transitions and hover glow (all pointers; colour and shadow only) */
:where(.av-control, .av-toggle, .av-row) {
  transition:
    transform var(--av-dur-transform) var(--av-spring),
    color var(--av-dur-color) ease,
    background-color var(--av-dur-color) ease,
    border-color var(--av-dur-shadow) ease,
    box-shadow var(--av-dur-shadow) ease,
    text-shadow var(--av-dur-shadow) ease,
    opacity var(--av-dur-color) ease,
    filter var(--av-dur-filter) ease;
}
:where(.av-control, .av-toggle):where(:hover:not(:disabled)) {
  border-color: var(--av-hover-border, rgba(var(--av-accent-rgb), .42));
  box-shadow: var(--av-glow, 0 6px 20px -8px rgba(var(--av-accent-rgb), .5)), var(--av-ring, inset 0 0 0 1px rgba(var(--av-accent-rgb), .3));
}
:where(.av-row):where(:hover) { text-shadow: var(--av-row-glow, 0 0 10px rgba(var(--av-accent-rgb), .35)); }

/* ---- press: a brighter surface at once (also with reduced motion); the compression itself is motion, below */
:where(.av-control, .av-toggle, .av-row):where(:active:not(:disabled)) { filter: brightness(var(--av-press-brightness)); }

/* ---- on-state of a toggle: a pill grows in behind the label */
:where(.av-toggle) { position: relative; isolation: isolate; }
:where(.av-toggle)::before {
  content: "";
  position: absolute;
  inset: var(--av-toggle-inset, 5px 2px);
  border-radius: var(--av-toggle-radius, 999px);
  z-index: -1;
  pointer-events: none;
  background: var(--av-toggle-fill, rgba(var(--av-accent-rgb), .1));
  box-shadow: var(--av-toggle-shadow, inset 0 0 0 1px rgba(var(--av-accent-rgb), .26), 0 0 14px -3px rgba(var(--av-accent-rgb), .32));
  opacity: 0;
  transform: scale(var(--av-toggle-from-scale));
  transition: transform var(--av-dur-grow) var(--av-ease), opacity var(--av-dur-color) var(--av-out);
}
:where(.av-toggle[aria-pressed="true"])::before { opacity: 1; transform: none; }

/* ---- focus ring (keyboard focus only) */
:where(.av-control, .av-toggle, .av-row):where(:focus-visible) {
  outline: var(--av-focus-width) solid var(--av-focus-color);
  outline-offset: var(--av-focus-offset);
}
@keyframes av-focus-in { from { outline-offset: var(--av-focus-from-offset); outline-color: transparent; } }

/* ---- touch: at least 44 px to hit, without changing the layout */
:where(.av-hit) { position: relative; }
:where(.av-hit)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--av-hit-min));
  height: max(100%, var(--av-hit-min));
  transform: translate(-50%, -50%);
}

/* ---- volume slider: thin track filled to --av-fill (set by bindSoundControls), a small dot that grows under the pointer */
:where(.av-range) {
  -webkit-appearance: none;
  appearance: none;
  width: var(--av-range-width);
  height: var(--av-range-height);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: rgb(var(--av-accent-rgb));
  transition: opacity var(--av-dur-color) ease;
}
:where(.av-range[data-av-muted="true"]) { opacity: var(--av-muted-opacity); }
:where(.av-range)::-webkit-slider-runnable-track {
  height: var(--av-track-height);
  border-radius: var(--av-track-height);
  background: linear-gradient(90deg, var(--av-fill-color, rgba(var(--av-accent-rgb), .85)) 0 var(--av-fill, 60%), var(--av-track-color) var(--av-fill, 60%) 100%);
}
:where(.av-range)::-moz-range-track { height: var(--av-track-height); border-radius: var(--av-track-height); background: var(--av-track-color); }
:where(.av-range)::-moz-range-progress { height: var(--av-track-height); border-radius: var(--av-track-height); background: var(--av-fill-color, rgba(var(--av-accent-rgb), .85)); }
:where(.av-range)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--av-thumb-size);
  height: var(--av-thumb-size);
  margin-top: calc((var(--av-track-height) - var(--av-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: rgb(var(--av-accent-rgb));
  transition: transform var(--av-dur-transform) var(--av-spring), box-shadow var(--av-dur-shadow) ease;
}
:where(.av-range)::-moz-range-thumb {
  width: var(--av-thumb-size);
  height: var(--av-thumb-size);
  border: 0;
  border-radius: 50%;
  background: rgb(var(--av-accent-rgb));
  transition: transform var(--av-dur-transform) var(--av-spring), box-shadow var(--av-dur-shadow) ease;
}
:where(.av-range:hover)::-webkit-slider-thumb { box-shadow: var(--av-thumb-glow, 0 0 0 4px rgba(var(--av-accent-rgb), .16), 0 0 12px rgba(var(--av-accent-rgb), .55)); }
:where(.av-range:hover)::-moz-range-thumb { box-shadow: var(--av-thumb-glow, 0 0 0 4px rgba(var(--av-accent-rgb), .16), 0 0 12px rgba(var(--av-accent-rgb), .55)); }
:where(.av-range:focus-visible) { outline: var(--av-focus-width) solid var(--av-focus-color); outline-offset: var(--av-range-focus-offset); }
:where(.av-range:focus-visible)::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--av-accent-rgb), .3); }
:where(.av-range:focus-visible)::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--av-accent-rgb), .3); }

/* ---- motion: only when the visitor has not asked for reduced motion, and the site has not switched it off */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    :where(html:not(.av-reduced-motion)) :where(.av-control:hover:not(:disabled)) { transform: translateY(var(--av-hover-lift)); }
    :where(html:not(.av-reduced-motion)) :where(.av-control--icon:hover:not(:disabled)) { transform: scale(var(--av-hover-scale)); }
    :where(html:not(.av-reduced-motion)) :where(.av-row:hover) { transform: translateX(var(--av-row-shift)); }
    :where(html:not(.av-reduced-motion)) :where(.av-range:hover)::-webkit-slider-thumb { transform: scale(var(--av-thumb-hover-scale)); }
    :where(html:not(.av-reduced-motion)) :where(.av-range:hover)::-moz-range-thumb { transform: scale(var(--av-thumb-hover-scale)); }
  }
  :where(html:not(.av-reduced-motion)) :where(.av-control, .av-toggle):where(:active:not(:disabled)) {
    transform: scale(var(--av-press-scale));
    transition-duration: var(--av-dur-press);
    transition-timing-function: var(--av-out);
  }
  :where(html:not(.av-reduced-motion)) :where(.av-row:active) {
    transform: scale(var(--av-press-scale-row));
    transition-duration: var(--av-dur-press);
    transition-timing-function: var(--av-out);
  }
  :where(html:not(.av-reduced-motion)) :where(.av-range:active)::-webkit-slider-thumb { transform: scale(var(--av-thumb-active-scale)); }
  :where(html:not(.av-reduced-motion)) :where(.av-range:active)::-moz-range-thumb { transform: scale(var(--av-thumb-active-scale)); }
  :where(html:not(.av-reduced-motion)) :where(.av-control, .av-toggle, .av-row, .av-range):where(:focus-visible) { animation: av-focus-in var(--av-dur-focus) var(--av-out); }
}

/* ---- reduced motion (system setting, or html.av-reduced-motion set by watchReducedMotion): every state shows at once */
@media (prefers-reduced-motion: reduce) {
  :where(.av-control, .av-toggle, .av-row, .av-range), :where(.av-toggle)::before { transition: none !important; animation: none !important; }
  :where(.av-range)::-webkit-slider-thumb { transition: none !important; animation: none !important; }
  :where(.av-range)::-moz-range-thumb { transition: none !important; animation: none !important; }
}
:where(html.av-reduced-motion) :where(.av-control, .av-toggle, .av-row, .av-range),
:where(html.av-reduced-motion) :where(.av-toggle)::before { transition: none !important; animation: none !important; }
:where(html.av-reduced-motion) :where(.av-range)::-webkit-slider-thumb { transition: none !important; animation: none !important; }
:where(html.av-reduced-motion) :where(.av-range)::-moz-range-thumb { transition: none !important; animation: none !important; }