/* Tokens, the page column and the header come from ../shared/theme.css;
   this file holds only what is the drill's own. */

:root {
  --stop: #b3261e;
  --stop-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stop: #ff9c92;
    --stop-ink: #0f1115;
  }
}

/* --- the tempo panel -------------------------------------------------------- */

.tempo-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The number in the middle, a step either side of it: the buttons keep their
   own width and the readout takes whatever is left, so 30 and 252 sit still. */
.tempo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tempo-readout {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  container: tempo-readout / inline-size;
}

/* The nudge buttons keep their width, so a narrow screen squeezes only the
   readout. When it can no longer hold three digits and the unit side by
   side, the unit goes — the number never clips or wraps. The margin over
   the ~136px they need covers a browser minimum-font-size pref inflating
   the unit, the one preference fixed-px type does not pin down. */
@container tempo-readout (max-width: 150px) {
  .tempo-unit {
    display: none;
  }
}

.tempo-value {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tempo-unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.nudge {
  min-width: 44px;
  padding: 10px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.nudge:hover:enabled {
  border-color: var(--accent);
}

.nudge:disabled {
  opacity: 0.4;
  cursor: default;
}

.marking {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.tempo-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

/* The slider takes the row; Tap sits at its right hand, sized to its word. */
.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.tap {
  -webkit-user-select: none;
  user-select: none;
  padding: 12px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.tap:hover {
  border-color: var(--accent);
}

/* --- meter ------------------------------------------------------------------ */

.meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Twelve beats in two rows of six, so each stays a thumb wide. */
.beat-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.beat {
  padding: 10px 0;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
}

.beat.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.meter-caption {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.segmented {
  position: relative;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 3px;
}

.segmented-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.25s ease;
}

.segment {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.segment.is-active {
  color: var(--accent-ink);
}

/* The rhythm drawings: filled shapes only, coloured by the button they sit in. */
.segment .icon {
  display: block;
  margin: 0 auto;
}

.segment .icon-fill {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .segmented-thumb,
  .segment {
    transition: none;
  }
}

/* --- the beat itself -------------------------------------------------------- */

.board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* `--pulse` is written from the animation frame: 1 the instant a click sounds,
   0 once its flash has run out. `--pulse-peak` is how bright that click gets —
   the downbeat full, the other beats less, the subdivisions least — so the bar
   can be read off the screen the way it is heard. */
.pulse-card {
  --pulse: 0;
  --pulse-peak: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 220px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* The card is the start/stop control. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

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

/* The circle and its stopped-state play triangle share one footprint. */
.pulse-wrap {
  position: relative;
}

.pulse-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.pulse-play .icon {
  width: 44px;
  height: 44px;
  /* Optically centred: a triangle's weight sits left of its box. */
  margin-left: 6px;
}

.pulse-play .icon-fill {
  fill: currentColor;
}

.pulse-card.is-beat {
  --pulse-peak: 0.66;
}

.pulse-card.is-sub {
  --pulse-peak: 0.34;
}

.pulse {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent);
  opacity: calc(0.1 + 0.9 * var(--pulse) * var(--pulse-peak));
  transform: scale(calc(0.84 + 0.16 * var(--pulse) * var(--pulse-peak)));
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    transform: none;
  }
}

.beat-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

/* The downbeat's dot is the larger one, so the top of the bar is findable
   without counting. */
.dot:first-child {
  width: 13px;
  height: 13px;
}

.dot.is-on {
  background: var(--accent);
}

/* --- volume ------------------------------------------------------------------ */

.volume-panel {
  display: flex;
  flex-direction: column;
}

/* The label keeps its width and the slider takes the rest, so the track does
   not jump when the word changes language. */
.volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.volume-label {
  font-size: 13px;
  color: var(--muted);
}

.volume {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

/* --- pieces ------------------------------------------------------------------ */

.pieces {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.piece-saver {
  display: flex;
  flex-direction: column;
}

/* The button under the page; the naming happens in the dialog it opens. */
.piece-save-open {
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.piece-save-open:hover {
  border-color: var(--accent);
}

.piece-dialog {
  min-width: min(320px, 80vw);
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

.piece-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.piece-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.piece-name-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.piece-dialog-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.piece-cancel {
  padding: 10px 16px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.piece-cancel:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.piece-name {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
}

.piece-save {
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.piece-save:hover:enabled {
  border-color: var(--accent);
}

.piece-save:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Positioned, so a dragged pill can float over it in its own coordinates. */
.piece-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A pill is two buttons sharing one outline: the piece, and its ×. */
.piece {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  /* A drag must own the pointer: no scrolling, no text selection under it. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* How the others slide aside while a drag is on; the shell inverts their
     positions and lets this play them back. */
  transition: transform 0.18s ease;
}

.piece.is-dragging {
  opacity: 0.75;
  z-index: 1;
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: none; /* the dragged pill is the pointer's, not the easing's */
}

/* The slot the drag would land in, holding the dragged pill's size open. */
.piece-ghost {
  border-style: dashed;
  background: none;
}

.piece.is-active {
  border-color: var(--accent);
  background: var(--panel);
}

.piece-load {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 4px 8px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.piece.is-active .piece-load {
  color: var(--accent);
}

.piece-title {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-bpm {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.piece-remove {
  padding: 8px 12px 8px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.piece-remove:hover {
  color: var(--stop);
}