.sounds {
  --sounds-systole: rgb(179 18 46 / 7%);
  --sounds-murmur: #b3122e;
  --sounds-tone: #1b1b1f;
  --sounds-cursor: #1f5fbf;

  display: grid;
  gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  .sounds {
    --sounds-systole: rgb(255 122 138 / 10%);
    --sounds-murmur: #ff7a8a;
    --sounds-tone: #f2f2f5;
    --sounds-cursor: #7fb2ff;
  }
}

.sounds legend {
  margin-block-end: 0.375rem;
  padding: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* The sound choice is a segmented switch, like the states of the diagrams (Diagram.astro). */
.choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.segments {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);

  /* Half a row: a second row on a narrow screen keeps its corners instead of being clipped. */
  border-radius: 1.125rem;
  overflow: hidden;
}

.segments label {
  flex: 1 1 auto;
  padding-block: 0.375rem;
  padding-inline: clamp(0.625rem, 3vw, 1rem);
  text-align: center;
  cursor: pointer;
}

.segments label:has(:checked) {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Inside the label: the rounded switch clips anything drawn outside it. */
.segments label:has(:focus-visible) {
  outline: 2px solid currentcolor;
  outline-offset: -4px;
}

.segments input {
  position: absolute;
  opacity: 0;
}

/* Forced colours drop the background, so the chosen sound gets an outline instead. */
@media (forced-colors: active) {
  .segments label:has(:checked) {
    outline: 2px solid Highlight;
    outline-offset: -4px;
  }
}

/* An accent pill with a play or stop icon, like the pressed pills of the site's switches. */
.listen {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-self: start;

  /* Wide enough for both labels, so the pill does not jump when it switches. */
  min-inline-size: 9rem;
  padding-block: 0.5rem;
  padding-inline: 1rem 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.listen:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.icon {
  inline-size: 1rem;
  block-size: 1rem;
  fill: currentcolor;
}

.diagram {
  padding-block: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.diagram svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Labels are HTML over the drawing's time axis, so they keep the text size on any screen. The
   diagram is always left to right, so the inline start is its left edge. */
.phases,
.tones {
  position: relative;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.phases {
  block-size: 1.5em;
  margin-block-end: 0.25rem;
}

.tones {
  block-size: 1.5em;
  margin-block-start: 0.25rem;
}

.tones:has([data-row='2']) {
  block-size: 3em;
}

.phases span,
.tones span {
  position: absolute;
  inset-block-start: 0;
  translate: -50% 0;
  white-space: nowrap;
}

.tones span[data-row='2'] {
  inset-block-start: 1.5em;
  color: var(--color-muted);
}

.systole {
  fill: var(--sounds-systole);
}

.baseline {
  stroke: var(--color-border);
  stroke-width: 1;
}

.murmur {
  fill: var(--sounds-murmur);
  fill-opacity: 0.45;
  stroke: var(--sounds-murmur);
  stroke-width: 1;
}

/* Told apart without colour: a rumble is hatched by its dashed outline. */
.murmur[data-timbre='rumble'] {
  stroke-dasharray: 4 3;
}

.tone {
  stroke: var(--sounds-tone);
  stroke-width: 4;
  stroke-linecap: round;
}

.cursor {
  stroke: var(--sounds-cursor);
  stroke-width: 2;
}

.description {
  margin: 0;
}

.cite {
  line-height: 0;
  white-space: nowrap;
}