/* Tune - the sheet that says it in dials. Prefix tune-, tokens from styles.css only. */

/* ── the sheet ───────────────────────────────────────────────────────────── */

.tune-sheet {
  /* Never the whole screen: the wall keeps a fifth of it, also with all six dials out. Not
     less than 80: with three dials the sheet stands about 432px tall, and that has to fit
     the shortest phone browser (100dvh of about 548px, its toolbars showing) unscrolled. */
  max-height: min(80dvh, 720px);
}

/* No scrim to tap, and the sheet covers the dock: the grip is all a finger has to close it
   with. 44 to touch, grown upward over the wall, so none of it lies on the first dial. */
.tune-grip {
  position: relative;
}

.tune-grip::after {
  content: "";
  position: absolute;
  inset: calc(var(--s4) * -1) 0 0;
}

.tune {
  --tune-gap: var(--s5); /* between sections */
  --tune-thumb: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--tune-gap);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tune-lower {
  display: flex;
  flex-direction: column;
  gap: var(--tune-gap);
}

/* ── dials ───────────────────────────────────────────────────────────────── */

/* One grid for every row, so the tracks start and end on the same two lines. */
.tune-dials {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content 26px;
  column-gap: var(--s3);
  row-gap: var(--s4);
}

.tune-dial {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 4.25rem 26px; /* where subgrid is not understood */
  grid-template-columns: subgrid;
  column-gap: var(--s3);
  align-items: center;
  height: 44px;
}

.tune-word {
  white-space: nowrap;
}

/* both words sit against their end of the track */
.tune-word-low {
  justify-self: end;
}

.tune-track {
  position: relative;
  height: 44px; /* the whole of it takes the finger */
  border-radius: var(--radius-chip); /* the focus ring follows it */
  container-type: inline-size; /* the thumb travels in cqw */
  touch-action: none;
  cursor: pointer;
}

.tune-line,
.tune-fill {
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
}

/* Two pieces, scaled from their ends to meet the thumb's edge: nothing runs through it. */
.tune-line {
  width: calc(100% - var(--tune-thumb));
  background: var(--line);
}

.tune-line-low {
  left: 0;
  transform-origin: 0 50%;
}

.tune-line-high {
  right: 0;
  transform-origin: 100% 50%;
}

/* centre to thumb, either way, once the dial is set */
.tune-fill {
  left: 50%;
  width: calc(50% - var(--tune-thumb) / 2);
  background: var(--ink);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 140ms ease-out;
}

.tune-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--tune-thumb);
  height: var(--tune-thumb);
  margin-top: calc(var(--tune-thumb) / -2);
  border: 1.5px solid var(--ink-faint); /* free: a ring */
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* set: solid, laid over the ring */
.tune-thumb::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 140ms ease-out;
}

.tune-dial.is-set .tune-fill,
.tune-dial.is-set .tune-thumb::after {
  opacity: 1;
}

/* Letting go. Its place is kept while it is not there, so no row ever shifts. */
.tune-free {
  display: grid;
  place-items: center;
  width: 44px; /* wider than its column: the cross ends on the sheet's right margin */
  height: 44px;
  border-radius: 50%;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 140ms ease-out;
}

.tune-free:disabled {
  pointer-events: none;
  cursor: default;
}

.tune-dial.is-set .tune-free {
  opacity: 1;
}

.tune-free:active {
  color: var(--ink);
}

.tune-free svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2; /* of 24: the dock's weight at this size */
  stroke-linecap: round;
}

/* ── chips, start over ───────────────────────────────────────────────────── */

/* 36 to look at, 44 to touch */
.tune-chip {
  position: relative;
}

.tune-chip::before {
  content: "";
  position: absolute;
  inset: -5px -1px;
}

.tune-more {
  align-self: flex-start;
}

/* 44 to touch, and none of it under the chips above: 12 over the words, 21 beneath. */
.tune-reset {
  align-self: center;
  padding: 12px var(--s4) 21px;
  margin: -12px 0 -21px;
  border-radius: var(--radius-chip);
}

.tune-reset:active {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .tune-fill,
  .tune-thumb::after,
  .tune-free {
    transition-duration: 1ms;
  }
}

/* colour swatches: one row that scrolls sideways, above the dials */
.tune-swatches {
  display: flex;
  gap: var(--s1);
  margin: 0 calc(-1 * var(--s5)) var(--s3);
  padding: 0 calc(var(--s5) - var(--s2));
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}

.tune-swatches::-webkit-scrollbar {
  display: none;
}

.tune-swatch {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.tune-swatch::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.tune-swatch:active::before {
  transform: scale(0.9);
}

.tune-swatch.is-on::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px var(--ground-raised), 0 0 0 4.5px var(--ink);
}