/* PRE tactile button: a shaped face, a firm edge and compressible depth.
   Add .pre-tactile to any <button>. .pre-tactile--accent gives an ice-blue face (coming-soon Enter);
   toggles with aria-pressed="true" sit held down. assets/js/tactile.js adds the Enter key press look.
   Only transform (translate) and clip-path animate. The edge is the box-shadow of ::before, which never
   paints under the face, so translucent faces stay clean; clip-path trims it as the face travels. */
.pre-tactile.pre-tactile {
  --tactile-depth: 4px;
  --tactile-lift: 1px;
  --tactile-travel: calc(var(--tactile-depth) - 1px);
  --tactile-ease: cubic-bezier(.3, .7, .4, 1);
  --tactile-face: #20242c;
  --tactile-face-hover: #262b34;
  --tactile-edge: #13161c;
  --tactile-rim: rgba(255, 255, 255, .12);
  --tactile-text: #fff;
  --tactile-highlight: rgba(255, 255, 255, .14);
  --tactile-ring: var(--accent, #9fd8ff);
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: var(--tactile-rim);
  background-color: var(--tactile-face);
  background-image: none;
  color: var(--tactile-text);
  box-shadow: inset 0 1px 0 var(--tactile-highlight), inset 0 -1px 0 rgba(0, 0, 0, .28);
  translate: 0 0;
  transition: translate 120ms var(--tactile-ease), transform .45s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

.pre-tactile.pre-tactile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 calc(var(--tactile-depth) + var(--tactile-lift)) 0 0 var(--tactile-edge);
  clip-path: inset(0 0 calc(var(--tactile-depth) * -1) 0);
  pointer-events: none;
  transition: clip-path 120ms var(--tactile-ease);
}

.pre-tactile--accent.pre-tactile,
.pre-tactile.pre-tactile[aria-pressed="true"] {
  --tactile-face: var(--accent, #9fd8ff);
  --tactile-face-hover: #c3e6ff;
  --tactile-edge: #3d7299;
  --tactile-rim: transparent;
  --tactile-text: #020304;
  --tactile-highlight: rgba(255, 255, 255, .5);
  --tactile-ring: #fff;
}

/* Small segmented toggles sit in a 3px padded track, so they get a shallower edge. */
.pre-tactile.pre-tactile[aria-pressed] { --tactile-depth: 3px; }

.pre-tactile.pre-tactile:focus-visible {
  outline: 2px solid var(--tactile-ring);
  outline-offset: calc(var(--tactile-depth) + 2px);
}

@media (hover: hover) {
  .pre-tactile.pre-tactile:hover:not(:disabled, :active, .is-pressed, [aria-pressed="true"]) {
    --lift: 0px;
    background-color: var(--tactile-face-hover);
    translate: 0 calc(var(--tactile-lift) * -1);
  }

  .pre-tactile.pre-tactile:hover:not(:disabled, :active, .is-pressed, [aria-pressed="true"])::before {
    clip-path: inset(0 0 calc((var(--tactile-depth) + var(--tactile-lift)) * -1) 0);
  }
}

.pre-tactile.pre-tactile:active:not(:disabled),
.pre-tactile.pre-tactile.is-pressed:not(:disabled),
.pre-tactile.pre-tactile[aria-pressed="true"] {
  --lift: 0px;
  background-color: var(--tactile-face);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .06);
  translate: 0 var(--tactile-travel);
}

.pre-tactile.pre-tactile:active:not(:disabled)::before,
.pre-tactile.pre-tactile.is-pressed:not(:disabled)::before,
.pre-tactile.pre-tactile[aria-pressed="true"]::before {
  clip-path: inset(0 0 calc((var(--tactile-depth) - var(--tactile-travel)) * -1) 0);
}

.pre-tactile.pre-tactile:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .pre-tactile.pre-tactile,
  .pre-tactile.pre-tactile::before { transition: none; }
}

/* Radio chips (a <label> wrapping an <input type="radio">) share the held-down look of aria-pressed toggles. */
.pre-tactile.pre-tactile:has(> input:checked) {
  --tactile-face: var(--accent, #9fd8ff);
  --tactile-face-hover: #c3e6ff;
  --tactile-edge: #3d7299;
  --tactile-rim: transparent;
  --tactile-text: #020304;
  --tactile-highlight: rgba(255, 255, 255, .5);
  --lift: 0px;
  background-color: var(--tactile-face);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .06);
  translate: 0 var(--tactile-travel);
}
.pre-tactile.pre-tactile:has(> input:checked)::before {
  clip-path: inset(0 0 calc((var(--tactile-depth) - var(--tactile-travel)) * -1) 0);
}