/* Euclid's Drum Machine — Euclidean rhythm sequencer
   ----------------------------------------------------------------------
   Added 2026-10-05. Self-contained and additive: every selector in this
   file is scoped under #euclid, so it cannot reach anything that was
   already on the page.

   The console is a dark panel on the otherwise light page, deliberately
   matching the dark display case #shelf introduced rather than restyling
   anything around it.

   Reduced motion: the only continuous animation here is the step
   highlight travelling around each ring, which is discrete state (it is
   also the page's only indication of where the playhead is, so it stays).
   What gets dropped under prefers-reduced-motion is the easing, the
   flash-decay on a triggered onset, and the pulsing play button. */

#euclid{
  background:var(--bg);
  border-top:1px solid var(--border);
}

#euclid .eu-intro{
  max-width:62ch;
  color:var(--muted);
}

#euclid .eu-intro code{
  font-family:var(--mono);
  font-size:.92em;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
}

/* ---------- the console ---------- */

#euclid .eu-console{
  /* identity, handed to the shared .panel system */
  --panel-accent:#8fb6ff;
  --panel-accent-soft:rgba(110,168,255,.7);

  --eu-line:rgba(255,255,255,.09);
  --eu-ink:#e8eaf0;
  --eu-dim:#8b93a6;

  margin-top:var(--space-m);
}

/* ---------- transport bar ---------- */

#euclid .eu-transport{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--eu-line);
}

/* Chrome is .panel-btn / .panel-dot in panel.css; only the beat pulse,
   which is particular to a metronome, stays here. */
#euclid .eu-play{ min-width:118px; }

#euclid .eu-play[aria-pressed="true"] .panel-dot{
  animation:eu-beat 1.2s ease-in-out infinite;
}

@keyframes eu-beat{
  0%,100%{ opacity:1 }
  50%{ opacity:.35 }
}

#euclid .eu-knob{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--fs-sm);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--eu-dim);
}

#euclid .eu-knob input[type="range"]{
  width:clamp(80px, 16vw, 130px);
}

#euclid .eu-readout{
  font-family:var(--mono);
  font-size:var(--fs-sm);
  letter-spacing:0;
  color:var(--eu-ink);
  min-width:3.4em;
  text-align:right;
}

/* ---------- body: rings + tracks ---------- */

#euclid .eu-body{
  display:grid;
  gap:clamp(18px, 3vw, 32px);
  grid-template-columns:1fr;
  padding-top:18px;
}

@media (min-width:760px){
  #euclid .eu-body{ grid-template-columns:minmax(0,340px) minmax(0,1fr); align-items:start; }
}

#euclid .eu-rings{
  margin-inline:auto;
  width:100%;
  max-width:340px;
}

#euclid .eu-rings svg{ width:100%; height:auto; overflow:visible; }

#euclid .eu-ring-base{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:1; }

#euclid .eu-dot{
  fill:#2a2f3c;
  stroke:rgba(255,255,255,.08);
  stroke-width:1;
  transition:fill .25s ease, stroke .25s ease;
}

#euclid .eu-dot.is-onset{
  fill:var(--eu-hue);
  stroke:transparent;
  opacity:.55;
}

/* The playhead: the step currently under each ring's own cursor. Tracks
   can have different lengths, so every ring gets its own cursor and they
   drift against each other. */
#euclid .eu-dot.is-cursor{
  stroke:#ffffff;
  stroke-width:1.6;
  opacity:1;
}

#euclid .eu-dot.is-hit{
  fill:#ffffff;
  opacity:1;
  transition:none;
}

#euclid .eu-dot.is-fade{
  fill:var(--eu-hue);
  opacity:1;
  transition:fill .42s ease-out, opacity .42s ease-out;
}

#euclid .eu-ring-tag{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.16em;
  fill:var(--eu-dim);
  dominant-baseline:middle;
}

#euclid .eu-cycle-num{
  font-family:'GameBoy',ui-monospace,monospace;
  font-size:21px;
  fill:var(--eu-ink);
}

#euclid .eu-cycle-cap{
  font-family:var(--mono);
  font-size:7.5px;
  letter-spacing:var(--track-wide);
  fill:var(--eu-dim);
  text-transform:uppercase;
}

/* ---------- track rows ---------- */

#euclid .eu-tracks{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

#euclid .eu-track{
  padding:12px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--eu-line);
  border-left:3px solid var(--eu-hue);
  background:rgba(255,255,255,.025);
}

#euclid .eu-track.is-muted{ opacity:.5; }

#euclid .eu-track-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:9px;
}

#euclid .eu-track-name{
  font-family:'GameBoy',ui-monospace,monospace;
  font-size:var(--fs-base);
  letter-spacing:.04em;
  color:var(--eu-ink);
}

#euclid .eu-pattern{
  font-family:var(--mono);
  font-size:var(--fs-md);
  letter-spacing:.14em;
  color:var(--eu-hue);
  word-break:break-all;
  margin-inline-start:auto;
}

#euclid .eu-notation{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  color:var(--eu-dim);
}

#euclid .eu-sliders{
  display:grid;
  gap:6px 14px;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  align-items:center;
}

#euclid .eu-sliders label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-xs);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--eu-dim);
}

#euclid .eu-sliders input[type="range"]{ flex:1 1 44px; min-width:44px; }

#euclid .eu-sliders .panel-num{ min-width:2ch; }

#euclid .eu-mute{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--fs-xs);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--eu-dim);
  cursor:pointer;
}

/* ---------- footnotes ---------- */

#euclid .eu-note{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--eu-line);
  font-size:var(--fs-md);
  color:var(--eu-dim);
}

#euclid .eu-note a{ color:#8fb6ff; }

#euclid .eu-foot{
  margin-top:var(--space-s);
  font-size:var(--fs-md);
  color:var(--muted);
}

/* Shown only when the script never runs — the controls are inert without
   it, so say so rather than leaving a dead panel. */
#euclid .eu-nojs{
  margin:var(--space-s) 0 0;
  font-size:var(--fs-md);
  color:var(--muted);
}
#euclid.eu-ready .eu-nojs{ display:none; }

@media (prefers-reduced-motion: reduce){
  #euclid .eu-dot,
  #euclid .eu-dot.is-fade{ transition:none; }
  #euclid .eu-play[aria-pressed="true"] .eu-play-dot{ animation:none; }
}