/*
 * Metronome additions (swing, practice tools, tala, presets, polyrhythm).
 * Loaded after site.css on /tools/metronome/ only. Uses the site tokens; no new colours.
 * All CSS lives in files: the CSP forbids <style> blocks and style="" attributes.
 */

/* ------------------------------------------------------------ stage additions */
.pattern-name { margin: var(--s-4) auto 0; font-weight: 650; font-size: var(--step--1); max-width: 34em; }
.beat-legend { margin: var(--s-2) auto 0; max-width: 34em; color: var(--text); }
/* Tala: each vibhag (or Carnatic anga) is an outlined box; its sign (X, 2, 0, 3 / laghu, dhrutam)
   sits on the top edge of the box above its first matra, like a legend. */
.beats.is-tala { gap: var(--s-4) var(--s-2); margin-top: var(--s-5); }
.beats.is-tala .beat-group, .beats.is-tala .beat-group + .beat-group {
  border: 2px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 6px 4px; gap: 4px;
}
.beat .sign {
  position: absolute; top: -23px; left: 50%; transform: translateX(-50%); padding: 0 5px; white-space: nowrap;
  background: var(--surface); font-family: var(--font-num); font-weight: 800; font-size: .875rem; line-height: 1.2rem;
  color: var(--text); letter-spacing: .02em;
}
.beat .sign:empty { display: none; }
.beats.is-tala .beat { width: auto; min-width: 52px; }
/* Khali / wave matras: a hollow-looking dot (the dotted "empty" hand) plus the sign above. */
.beat[data-wave="1"]:not(.active) .dot { background: var(--surface-2); }
/* Subdivision pip: lights on the current beat when a subdivision (swung or straight) is heard. */
.beat .dot { position: relative; }
.beat .dot::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--surface); opacity: 0;
}
.beat.sub-on .dot::after { opacity: 1; }
/* Gap click: during silent bars the moving light turns hollow and dashed. */
.stage.is-silent .beat.active .dot { background: var(--surface); color: var(--text); border-style: dashed; }
.ring[data-silent="1"] { border-style: dashed; background: none; }

/* Many matras on a phone: keep each vibhag together, a little tighter. */
@media (max-width: 639px) {
  .beats.many { gap: var(--s-2) var(--s-1); }
  .beats.many .beat-group { gap: 4px; }
  .beats.many .beat, .beats.is-tala.many .beat { width: 46px; min-width: 46px; }
  .beats.many .beat .dot { width: 44px; height: 44px; }
  .beats.many .beat .lvl { font-size: .6875rem; }
}

.practice-line {
  margin: var(--s-2) auto 0; max-width: 34em; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums;
}

/* Polyrhythm: a dashed rose ring and dot for the second voice, plus a row of numbered lights. */
.ring.poly-ring { inset: 14%; border: 3px dashed var(--rose); background: none; }
.poly-dot { left: auto; right: 6%; top: 10%; margin-left: 0; }
.poly-dot.on { background: var(--rose); }
.poly-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0 0; }
.poly-pip {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px dashed var(--rose); font-size: .75rem; font-weight: 800; font-family: var(--font-num); color: var(--text);
}
.poly-pip.active { background: var(--rose); color: var(--bg); border-style: solid; }

/* ------------------------------------------------------------ settings additions */
.swing-field input[type="range"] { margin-top: 2px; }
.swing-field label .hint { font-variant-numeric: tabular-nums; }
.tala-note { margin: calc(-1 * var(--s-3)) 0 0; color: var(--text); }

/* ------------------------------------------------------------ panels below the instrument */
.metro-more { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: var(--s-5); }
@media (min-width: 760px) { .metro-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .metro-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); } }
.more-panel { display: grid; gap: var(--s-4); }
.more-panel h2 { margin: 0; }
.more-panel h3 { margin: 0; font-size: var(--step-1); }
.more-panel p { margin: 0; }
.tool-block { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.tool-block .switch { justify-self: start; }
.field-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-2); }
.field-grid input { width: 100%; }
.timer-read { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-variant-numeric: tabular-nums; }
.timer-read strong { font-family: var(--font-num); font-size: 1.25rem; margin-left: var(--s-1); }
.timer-block button { justify-self: start; }

/* Tala chips grouped under "Hindustani" and "Carnatic" labels */
.chip-label { width: 100%; margin: var(--s-2) 0 0; font-size: var(--step--1); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.tala-key { display: grid; gap: var(--s-2); }
.tala-key b { font-family: var(--font-num); }

/* Presets */
.preset-form { display: grid; gap: 6px; }
.preset-row { display: flex; gap: var(--s-2); align-items: flex-start; }
.preset-row input { flex: 1 1 auto; min-width: 0; }
.preset-row button { flex: none; }
.preset-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.preset-list:empty { display: none; }
.preset-list li { display: flex; gap: var(--s-2); align-items: stretch; }
.preset-load {
  flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 8px 14px; border-radius: var(--r-md); border: 2px solid var(--line-strong); background: var(--surface);
  color: var(--text); text-align: left; -webkit-tap-highlight-color: transparent;
}
.preset-load:hover { background: var(--surface-2); }
.preset-name { font-weight: 700; overflow-wrap: anywhere; }
.preset-sum { font-size: var(--step--1); color: var(--muted); overflow-wrap: anywhere; }
.preset-del {
  flex: none; min-width: 72px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-md); border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--rose); font-weight: 650;
}
.preset-del:hover { background: var(--surface-2); }
.share-out input { width: 100%; font-family: var(--font-mono); font-size: var(--step--1); }
#share-btn { justify-self: start; }

/* ------------------------------------------------------------ round 4: type and motion */
/* Everything here is visual only and follows the audio-clock times metronome.js already uses.
   Calm motion / reduced motion: site.css cuts transitions and animations to ~0 ms, the rings
   become the small dot (as before) and the pendulum is hidden. */
.dial-knob { transform-box: view-box; transform-origin: 120px 120px; }
/* The dial's size is one variable, and the BPM number scales with it (so it never crowds the pendulum). */
.dial-wrap { --dial: 240px; width: var(--dial); height: var(--dial); }
@media (min-width: 640px) { .dial-wrap { --dial: 280px; } }
.bpm-value { font-size: calc(var(--dial) * .27); }
.bpm-value[data-roll] { --dg-w: .55em; }

/* Pendulum: reaches the end of its swing on each counted beat. Resting at the top while stopped. */
.pend-arc { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.pend-bob {
  fill: var(--line-strong); transform-box: view-box; transform-origin: 120px 120px;
  transition: transform var(--dur-4) var(--ease-spring), fill var(--dur-2) var(--ease-out);
}
.stage.is-playing .pend-bob { fill: var(--saffron); stroke: var(--saffron-edge); stroke-width: 1.5; transition: fill var(--dur-2) var(--ease-out); }
.stage.is-playing .pend-arc { stroke: var(--line-strong); stroke-opacity: .5; }
.stage.is-playing.is-silent .pend-bob { fill: var(--surface); stroke-dasharray: 3 2.4; stroke-width: 2; }
.stage.is-playing.is-countin .pend-bob { fill: var(--teal); stroke: var(--teal); }
.stage.is-calm .pend-bob, .stage.is-calm .pend-arc { display: none; }

/* Beat lights: a short pop on the beat (the class is set on the heard beat, so the pop starts with it). */
.beat.active .dot { animation: beat-pop 260ms var(--ease-out) both; }
@keyframes beat-pop { from { transform: scale(1.26); } to { transform: scale(1.1); } }
/* A new pattern drops its beats in one after another; a changed accent springs. */
.beats.mo-enter .beat { animation: beat-in 420ms var(--ease-emph) backwards; animation-delay: calc(min(var(--i, 0), 16) * 18ms); }
@keyframes beat-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.beat.accent-changed .dot { animation: accent-change 380ms var(--ease-spring); }
@keyframes accent-change { from { transform: scale(.8); } }

/* Start / Stop: a play triangle that folds into a stop square. */
.start-btn::before {
  content: ""; flex: none; width: .7em; height: .7em; background: currentColor;
  clip-path: polygon(16% 4%, 96% 50%, 96% 50%, 16% 96%);
  transition: clip-path var(--dur-3) var(--ease-out);
}
.start-btn[aria-pressed="true"]::before { clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%); }

/* Wide screens: the instrument stays at the top and in view while the settings column scrolls. */
@media (min-width: 1280px) {
  .metro { align-items: start; }
  .stage { position: sticky; top: var(--s-4); justify-content: flex-start; }
  .dial-wrap { --dial: clamp(280px, min(19vw, 36vh), 26rem); } /* round 5: was clamp(280px, min(24vw, 40vh), 30rem) */
}
@media (min-width: 1280px) and (max-height: 940px) {
  .dial-wrap { --dial: clamp(260px, min(20vw, 32vh), 26rem); } /* round 5: was clamp(260px, min(24vw, 34vh), 30rem) */
  .stage { padding-top: var(--s-5); }
}

/* Reserve the space metronome.js fills just after the first paint (beat lights, chip rows), so
   nothing jumps when they appear (layout shift). Usual heights; the real content replaces them. */
.beats:empty { min-height: 69px; }
/* Round 5: heights re-measured after the smaller type (headless Chrome, filled rows). */
#subdivision:not(:has(.chip)) { min-height: 77px; }
#meter:not(:has(.chip)), #sound-field:not(:has(.chip)) { min-height: 129px; }
@media (min-width: 640px) and (max-width: 959px) { #meter:not(:has(.chip)), #sound-field:not(:has(.chip)) { min-height: 77px; } }
@media (min-width: 1280px) { .beats:empty { min-height: 77px; } #subdivision:not(:has(.chip)) { min-height: 79px; } #meter:not(:has(.chip)), #sound-field:not(:has(.chip)) { min-height: 132px; } }
@media (min-width: 1440px) { #sound-field:not(:has(.chip)) { min-height: 79px; } }
@media (min-width: 1800px) { #meter:not(:has(.chip)) { min-height: 79px; } }

@media (prefers-reduced-motion: reduce) {
  .pend-bob, .pend-arc { display: none; }
  .beat.active .dot, .beats.mo-enter .beat, .beat.accent-changed .dot { animation: none; }
}
:root[data-motion="reduce"] .beat.active .dot, :root[data-motion="reduce"] .beats.mo-enter .beat, :root[data-motion="reduce"] .beat.accent-changed .dot { animation: none; }

/* ------------------------------------------------------------ round 6: "Staff and String" */
/* The tempo dial sits on a staff, like a whole note on the middle line: five brass hairlines run behind the dial
   from edge to edge of the stage (clipped by its rounded box). Lines are dial/8 apart, so they scale with it.
   Decorative only (a pseudo-element behind the dial); off in forced-colours mode. */
.stage { isolation: isolate; }
.dial-wrap::before {
  content: ""; position: absolute; z-index: -1; top: 50%; left: -100vw; right: -100vw; pointer-events: none;
  height: calc(var(--dial) / 2 + 1px); margin-top: calc(var(--dial) / -4);
  background: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px calc(var(--dial) / 8));
}
/* Panel titles get the short brass rule of the section titles. */
.settings > h2::before, .more-panel > h2::before {
  content: ""; display: block; width: 24px; height: 1.5px; margin-bottom: 10px; background: var(--brass);
}
.tool-block { border-top-color: var(--card-edge); }
.dial-face { stroke: var(--card-edge); }
@media (forced-colors: active) {
  .dial-wrap::before, .settings > h2::before, .more-panel > h2::before { display: none; }
}