/* The page is a music stand: paper in the middle, everything else out of the
   way. Notation inherits `currentColor` from abcjs, so the staff follows the
   theme rather than being stuck on white. */

:root {
  --paper: #fffdf8;
  --ink: #1b1a17;
  --ground: #f2efe7;
  --edge: #ddd7c8;
  --quiet: #6d6759;
  --accent: #9a5b2c;
  --accent-ink: #fffdf8;
  --warn: #8c2f1f;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16161a;
    --ink: #e8e4da;
    --ground: #0f0f12;
    --edge: #2c2c33;
    --quiet: #8b8578;
    --accent: #d08a4e;
    --accent-ink: #16161a;
    --warn: #e08b7a;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.app {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* --- Heading --- */

.banner {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.banner h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.blurb {
  margin: 0;
  color: var(--quiet);
  font-size: 13.5px;
}

/* --- Tabs --- */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 16px;
  overflow-x: auto;
}

.tab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--quiet);
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink);
}

.tab.chosen {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 550;
}

/* --- Controls --- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: end;
  margin-bottom: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field .name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--quiet);
}

select,
input[type="text"] {
  appearance: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 7px 10px;
  min-width: 8ch;
}

select {
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--quiet) 50%),
    linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input.wide {
  min-width: 26ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

input.seed {
  min-width: 11ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A whole tune needs room, so the changes box takes whatever is left. */
.field.grow {
  flex: 1 1 320px;
  min-width: 240px;
}

input.changes {
  width: 100%;
  min-width: 0;
}

select:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.stepper {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.step {
  appearance: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 0 11px;
  cursor: pointer;
}

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

button.primary {
  appearance: none;
  font: inherit;
  font-size: 14px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
}

button.primary:hover {
  filter: brightness(1.08);
}

/* --- The music --- */

.paper {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 18px 20px 16px;
  margin-bottom: 18px;
}

.notation {
  color: var(--ink);
  overflow-x: auto;
}

.notation svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* abcjs labels chord symbols and titles as text; keep them in the palette. */
.notation text {
  fill: var(--ink);
}

/* The playhead is drawn inside the SVG, so it scales with the notation.
   A presentation attribute loses to a rule, which is why this wins over the
   fill abcjs puts on the root element. */
.notation svg .playhead {
  fill: var(--accent);
  opacity: 0.4;
}

/* How it is played, as opposed to what: a row of its own above the music.
   These used to float in the top corner, which worked while there were two
   of them and sat across the title once there were four. They are written
   after the notation so that the page reads music first, which is why the
   order has to be asked for. */
.playback {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.toggle {
  appearance: none;
  font: inherit;
  font-size: 13px;
  color: var(--quiet);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}

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

.toggle.on {
  color: var(--ink);
  border-color: var(--quiet);
}

.keep {
  appearance: none;
  font: inherit;
  font-size: 13px;
  color: var(--quiet);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}

.keep:hover {
  color: var(--ink);
  border-color: var(--edge);
}

.play {
  appearance: none;
  font: inherit;
  font-size: 13px;
  color: var(--quiet);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px 15px;
  cursor: pointer;
}

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

.play.playing {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.readout {
  margin: 0;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}

.problem {
  padding: 14px 16px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  color: var(--warn);
  background: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

@media (max-width: 620px) {
  .app {
    padding: 18px 14px 48px;
  }
  input.wide {
    min-width: 16ch;
  }
  .field.grow {
    flex-basis: 100%;
  }
}