/* style.css — one dark palette, high contrast, thumb sized controls.
   Deliberately dark only. A half finished second theme is worse than one theme
   that is right, and every color below is checked by the contrast harness. */

:root {
  --bg: #0b0e12;
  --panel: #151a21;
  --panel2: #1c232c;
  --line: #2f3a47;
  --ink: #f1f5f9;
  --ink-dim: #a9b6c4;
  --accent: #7ee787;
  --accent-ink: #06210c;
  --focus: #8fd3ff;
  --warn: #ffb4a2;
  --hat: #8fd3ff;
  --snare: #ffd479;
  --tom: #c9a2ff;
  --kick: #7ee787;
  --tap: 44px;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* A flex or grid rule out-specifies the browser's own [hidden] rule, so a
   panel given `display: flex` sits on screen forever while the JS politely
   pretends it toggled. Settle it once, here. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;      /* belt and braces, nothing should need it */
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 0 3rem;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 14px;
}

h1 {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  margin: 1.4rem 0 0.3rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.01em;
}

.tag {
  color: var(--ink-dim);
  margin: 0 0 1.2rem;
  max-width: 62ch;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 14px;
}

.cardhead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

details.card > summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

details.card > summary::-webkit-details-marker { display: none; }

details.card > summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--accent);
  font-weight: 700;
}

details.card[open] > summary::before { content: "\2212"; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:hover { border-color: var(--ink-dim); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 650;
}

:where(button, input, select, summary, a):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.seg-btn {
  min-height: var(--tap);
  min-width: 68px;
  padding: 0 14px;
  border: 0;
  background: var(--panel2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.seg-btn.on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}

.drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
}

.drop.over { border-color: var(--accent); background: #12211a; }
.drop-msg { margin: 0 0 12px; color: var(--ink-dim); }

.status {
  margin: 12px 0 0;
  font-weight: 600;
}

.status.busy { color: var(--focus); }
.status.bad { color: var(--warn); }

.note {
  color: var(--ink-dim);
  font-size: 0.88rem;
  margin: 8px 0 0;
}

.summary { color: var(--ink-dim); margin: 10px 0; font-size: 0.92rem; }

canvas#chart {
  display: block;
  width: 100%;
  height: 260px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151b;
  touch-action: none;
}

.transport { margin-top: 12px; }

.clock {
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.seekwrap { display: block; margin-top: 10px; }

/* Speed and time signature, sitting in the transport rather than buried in a
   collapsed panel. Vi could not find the speed control at all, and a control
   nobody finds is the same as a control that is not there. */
.transbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (min-width: 560px) {
  .transbar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

.kbd { margin: 0; }

.bars { color: var(--ink); font-weight: 600; }

/* A second row of transport controls, holding the practice tools that used to
   sit three clicks deep inside a collapsed panel. Quieten the center is the
   feature that makes you the drummer, so it belongs where a hand can find it. */
.transbar2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (min-width: 560px) {
  .transbar2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 860px) {
  .transbar2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A narrower button, never a shorter one. The 44px floor on a coarse pointer
   is a standing rule here and a compact row is not a reason to break it. */
.btn.small {
  padding: 0 10px;
  font-size: 0.86rem;
}

/* ------------------------------------------------ the position and loop bar */

.seekstack { margin-top: 12px; }

.looprail {
  position: relative;
  height: 44px;
  margin: 0 0 2px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  touch-action: none;
}

.loopfill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(143, 211, 255, 0.14);
  border-left: 2px solid var(--focus);
  border-right: 2px solid var(--focus);
  pointer-events: none;
}

/* Ghosted until a loop exists, so the handles read as an invitation rather
   than as a region that is already doing something. */
.looprail[data-armed="false"] .loopfill { opacity: 0.35; }

.loophead {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 2px;
  background: var(--ink);
  opacity: 0.75;
  pointer-events: none;
}

.loophandle {
  position: absolute;
  top: 50%;
  width: var(--tap);
  height: var(--tap);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 8px;
}

/* The visible grip is small, the target around it is not. Fingers need 44px
   and the picture does not. */
.loophandle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 30px;
  border-radius: 6px;
  background: var(--focus);
  border: 2px solid var(--bg);
}

.looprail[data-armed="false"] .loophandle::before { background: var(--ink-dim); }

.loophandle:hover::before { background: var(--accent); }

.looprow { margin-top: 4px; }
.looprow .note { margin: 0; flex: 1 1 12ch; min-width: 0; }

/* The offer to reuse a saved chart. It is a question the app is asking, so it
   is styled as a prompt and never as a warning. */
.offer {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--focus);
  border-radius: var(--radius);
  background: var(--panel2);
}

.offer p { margin: 0 0 10px; }

/* -------------------------------------------------------------- the results */

.lead { margin: 10px 0 12px; font-size: 1rem; }

h3.sub {
  font-size: 0.95rem;
  margin: 18px 0 8px;
  color: var(--ink);
}

.hist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.hist li {
  display: grid;
  grid-template-columns: minmax(9ch, 14ch) 1fr minmax(3ch, auto);
  gap: 8px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--ink-dim);
}

.hist .bartrack {
  background: var(--panel2);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
  min-width: 0;
}

.hist .barfill {
  height: 100%;
  background: var(--hat);
  border-radius: 4px;
}

.hist li.mid .barfill { background: var(--accent); }
.hist .count { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

table.lanes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.lanes th,
table.lanes td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.lanes th { color: var(--ink-dim); font-weight: 600; }
table.lanes td { font-variant-numeric: tabular-nums; }
table.lanes tr.weak td { color: var(--warn); }

/* A table is the right shape for this and it is also the one thing that can
   push a narrow screen sideways, so it scrolls inside its own box. */
table.lanes { display: block; overflow-x: auto; }

/* ------------------------------------------------------------- the library */

.library, .runs {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.library li, .runs li {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.library li.note, .runs li.note {
  background: transparent;
  border: 0;
  padding: 0;
}

.library .meta, .runs .meta {
  color: var(--ink-dim);
  font-size: 0.84rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.library .name { font-weight: 650; overflow-wrap: anywhere; }

input[type="text"] {
  min-height: var(--tap);
  flex: 1 1 16ch;
  min-width: 0;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}

input[type="text"]::placeholder { color: var(--ink-dim); }

input[type="range"] {
  width: 100%;
  min-height: var(--tap);
  accent-color: var(--accent);
  background: transparent;
}

.editbar { margin-top: 12px; }

.pads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

@media (min-width: 620px) {
  .pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pad {
  min-height: 66px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.pad[data-lane="hat"] { border-left: 5px solid var(--hat); }
.pad[data-lane="snare"] { border-left: 5px solid var(--snare); }
.pad[data-lane="tom"] { border-left: 5px solid var(--tom); }
.pad[data-lane="kick"] { border-left: 5px solid var(--kick); }

/* The unrecognized-pad prompt. It only ever appears because something the user
   did produced nothing, so it has to read as a question the app is asking,
   not as an error the user caused. */
.learn-row {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  background: var(--panel2);
}
.learn-row p { margin: 0 0 10px; color: var(--ink); }
.learn-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-buttons button {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.learn-buttons button.ghost { background: transparent; color: var(--ink); }

.pad.lit { background: #2b3644; }
.pad-name { font-weight: 650; }
.pad-key { color: var(--ink-dim); font-size: 0.8rem; }

.scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

@media (min-width: 620px) {
  .scoreboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.scoreboard > div {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}

.scoreboard dt { color: var(--ink-dim); font-size: 0.8rem; }
.scoreboard dd {
  margin: 2px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fields { display: grid; gap: 14px; margin-top: 10px; }
.field { display: grid; gap: 4px; }
.field > span:first-child { font-weight: 600; font-size: 0.95rem; }

select {
  min-height: var(--tap);
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  max-width: 100%;
}

output { color: var(--accent); font-weight: 650; }

ul.plain { margin: 10px 0 0; padding-left: 1.1rem; color: var(--ink-dim); }
ul.plain li { margin-bottom: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 14px;
  z-index: 10;
}

.skip:focus { left: 8px; top: 8px; }

footer .note { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}