/* Material 3 interaction behaviour — SHARED, page-agnostic.
 * References no page component classes, so any page can adopt it by linking
 * this file and tagging its controls with .md-state.
 */
/* ── Material: state layers, ripple and focus rings ─────────────────────────
   What a component library would buy us, without the library. MD3 says an
   interactive element carries a translucent overlay of the FOREGROUND colour
   at fixed opacities — hover 8%, focus 10%, pressed 10% — plus a ripple that
   originates at the touch point.

   Implemented on ::after so no markup changes and no wrapper elements. The
   selector list is explicit rather than a bare `button` because position/
   overflow changes on 89 arbitrary buttons would clip menus and popovers. */
html[data-design="material"] .md-state{
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
/* Only a STATICALLY positioned control needs this. md3.js stamps .md-keep-pos
   on anything already absolute/fixed/sticky, because forcing relative there
   drops a floating control back into normal flow — which is how the trail-map
   overlay buttons ended up 790px below the modal under Material. */
html[data-design="material"] .md-state:not(.md-keep-pos){
  position:relative;
}
html[data-design="material"] .md-state::after{
  content:'';
  position:absolute;
  inset:0;
  background:currentColor;
  opacity:0;
  transition:opacity .12s linear;
  pointer-events:none;
  z-index:-1;
}
@media (hover:hover){
  html[data-design="material"] .md-state:hover::after{opacity:.08}
}
html[data-design="material"] .md-state:active::after{opacity:.10}

/* Focus ring. Applies in BOTH designs: keyboard users could not previously
   see where focus was, which is an accessibility defect independent of look. */
.md-state:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:3px solid var(--acc);
  outline-offset:2px;
  /* No border-radius here. `inherit` takes the PARENT's radius, not the
     element's own, so it flattened rounded controls (the settings close
     button lost its 4px corner). Browsers already draw the outline following
     the element's own corner radius. */
}
/* Pointer clicks should not leave a ring behind. */
.md-state:focus:not(:focus-visible){outline:none}

/* Ripple: a circle scaled from the touch point, fading as it grows. */
html[data-design="material"] .md-ripple{
  position:absolute;
  border-radius:50%;
  background:currentColor;
  opacity:.22;
  transform:scale(0);
  animation:md-ripple-in .5s ease-out forwards;
  pointer-events:none;
  z-index:-1;
}
@keyframes md-ripple-in{
  0%{transform:scale(0);opacity:.24}
  45%{opacity:.20}
  100%{transform:scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  html[data-design="material"] .md-ripple{animation-duration:.01ms}
  html[data-design="material"] .md-state::after{transition:none}
}