#downbeat { --accent: var(--h2); }

/* ── 07 DOWNBEAT (db-) ─────────────────────────────── */
/* ── 07 DOWNBEAT ─────────────────────────────────────────── */
/* .seg sets display, which would beat the hidden attribute */
#downbeat .seg[hidden], .db-review[hidden], #dbTheirs[hidden] { display: none; }
#downbeat .stage > .inline-msg { margin: 14px 18px; }

/* score ribbon: 16 bars × 4 beats; widths are the real beat lengths.
   The bar numbers get their own 14 px strip above it, so a loud beat is never covered */
.db-score-wrap { position: relative; height: 86px; padding-top: 14px; border-bottom: 1px solid rgba(244,239,230,0.08); }
.db-score { display: block; width: 100%; height: 72px; }
.db-score rect { vector-effect: non-scaling-stroke; }
.db-score .db-tick { stroke: rgba(244,239,230,0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.db-score .db-b  { fill: rgba(244,239,230,0.07); }
.db-score .db-l0 { fill: var(--h4);    fill-opacity: 0.6; }
.db-score .db-l1 { fill: var(--paper); fill-opacity: 0.6; }
.db-score .db-l2 { fill: var(--h3);    fill-opacity: 0.6; }
.db-score .db-l3 { fill: var(--h1);    fill-opacity: 0.6; }
.db-score .db-cur { stroke: var(--accent); stroke-width: 1.5; fill-opacity: 0.85; }
.db-score .db-g { fill: none; stroke: var(--paper); stroke-opacity: 0.35; stroke-width: 1; }
.db-score .db-off { display: none; }
.db-bars { position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none; }
.db-bars span {
  position: absolute; top: 2px;
  font-family: var(--mono); font-size: 9px; line-height: 10px; letter-spacing: 0.12em;
  color: var(--paper-mute); font-variant-numeric: tabular-nums;
}
.db-bars span:nth-child(1) { left: 16px; }          /* clear of the stage's rounded corner */
.db-bars span:nth-child(2) { left: calc(25% + 3px); }
.db-bars span:nth-child(3) { left: calc(50% + 3px); }
.db-bars span:nth-child(4) { left: calc(75% + 3px); }

/* the conducting pad */
.db-pad-wrap { position: relative; aspect-ratio: 16 / 10; min-height: 320px; }
#dbPad {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#dbPad:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 0; }
.db-lanes {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}
.db-lanes.db-end { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-lanes span {
  padding: 0 6px 14px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim); line-height: 1.35;
  transition: color 0.3s;
}
.db-lanes span.in { color: var(--paper-mute); }
.db-lanes span.lit { color: var(--accent); }
.db-lanes small {
  display: block; margin-top: 2px;
  font-size: 9px; letter-spacing: 0.08em; text-transform: none; color: var(--paper-dim);
}
.db-ruler {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  padding-left: 10px; pointer-events: none;
}
.db-ruler span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; font-style: italic;
  color: var(--paper-dim); transition: color 0.2s;
}
.db-ruler span.on { color: var(--accent); }
.db-state {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: 24px 32px 64px;
  pointer-events: none;
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: pretty;
  transition: opacity 0.3s, color 0.3s;
}
.db-state.off { opacity: 0; }
.db-state span { display: block; position: relative; }
/* the caption hangs under the main line, so that line stays centred under the ring */
.db-state small {
  position: absolute; left: 0; right: 0; top: 100%;
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-mute);
}
/* waiting must be unmistakable: big, amber, under the pulsing ring */
.db-state.db-wait { color: var(--accent); font-size: clamp(30px, 3.6vw, 48px); padding-top: 110px; }
.db-state.db-rest { color: var(--paper-mute); padding-top: 110px; }
.db-state.db-cap {
  place-items: start center; padding-top: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.db-review {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px));
  padding: 24px 24px 22px;
  text-align: center;
  background: radial-gradient(90% 70% at 50% 0%, rgba(244,239,230,0.05), transparent 70%), var(--ink-soft);
  border: 1px solid rgba(244,239,230,0.14);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.db-take { font-family: var(--display); font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.db-review .mono-note { margin: 12px 0 18px; line-height: 1.65; }

@media (max-width: 560px) {
  .db-pad-wrap { aspect-ratio: 4 / 5; max-height: 60vh; min-height: min(320px, 60vh); }
  .db-ruler span:nth-child(2), .db-ruler span:nth-child(4), .db-ruler span:nth-child(5) { visibility: hidden; }
  .db-lanes span { padding: 0 2px 12px; font-size: 9px; letter-spacing: 0.1em; }
  /* LOW END steps right of the ruler's pp; the hint wraps inside the dashed lane border */
  .db-lanes:not(.db-end) span:first-child { padding-left: 18px; }
  .db-lanes small { max-width: 9ch; margin: 2px auto 0; font-size: 8.5px; letter-spacing: 0.02em; }
  .db-state { padding: 20px 30px 64px; }
  .db-state.db-wait, .db-state.db-rest { padding-top: 96px; }
  .db-take { font-size: 28px; }
  .db-review { padding: 20px 16px 18px; }
}

/* Landscape phone: the touch-action:none surfaces (03 crowd, 04 roll, 07 pad) are bounded
   by height at full width, so the page still scrolls above and below them. An explicit
   height, not max-height: with an aspect ratio a max-height would shrink the width instead */
@media (max-width: 960px) and (max-height: 560px) {
  .db-pad-wrap { aspect-ratio: auto; height: 60vh; height: 60svh; min-height: 200px; }
  .db-ruler span:nth-child(2), .db-ruler span:nth-child(4), .db-ruler span:nth-child(5) { visibility: hidden; }
  .db-state.db-wait, .db-state.db-rest { padding-top: 64px; }
}

/* hl:own */
/* Owner additions (T2), not checked by tests/css.test.js. On a short phone the pad's max-height
   (60vh) with its 4:5 aspect ratio shrank its width, leaving a dead strip at the stage's right
   edge (319 px pad in a 351 px stage at 390 x 664, the same on the interim page): full width,
   the height still capped. */
@media (max-width: 560px) {
  .db-pad-wrap { width: 100%; }
}