/* Base + desktop layout. Phone overrides live in mobile.css.

   The whole page is built to fit a window without scrolling: a short laptop
   window (roughly 1280x650) should show the settings, the question and the
   revealed answer at once. That's why the reveal splits into two columns and
   why the height media queries below tighten rather than reflow — the player
   is looking between the answer and the chord box, and scrolling between
   them breaks the loop. */
:root {
  --bg: #14161c;
  --panel: #1d212a;
  --panel-2: #252a35;
  --border: #323949;
  --text: #e9ebf2;
  --text-dim: #949daf;
  --accent: #a78bfa;
  --accent-soft: #2f2a4a;
  --ok: #4ade80;
  --bad: #f87171;
  --chordbox: 180px;
  --gap: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  background: radial-gradient(1100px 560px at 50% -12%, #232739, var(--bg));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 24px;
  gap: var(--gap);
  -webkit-text-size-adjust: 100%;
}
header { text-align: center; }
h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.06em; }
h1 .dot { color: var(--accent); }
.subtitle { color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }

button, select, input { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: 0.35; cursor: default; }

.panel {
  width: 100%;
  max-width: 860px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 16px;
}

/* ---------- settings ---------- */
/* On a wide screen the panel is always open and the toggle doesn't exist;
   mobile.css turns it on, where the 150px this panel costs is worth more to
   the question than to the settings. */
.panel-toggle { display: none; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.controls-body { display: contents; }
.group { display: flex; align-items: center; gap: 7px; }
.group > label, .group .label { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.g-gain, .g-vol { flex: 1 1 130px; min-width: 110px; }
.g-gain input, .g-vol input { flex: 1; min-width: 60px; accent-color: var(--accent); }

select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  max-width: 100%;
}

.seg { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg-btn {
  background: none; border: 0; padding: 5px 12px; font-size: 13px;
  border-right: 1px solid var(--border); color: var(--text-dim);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: #17141f; font-weight: 600; }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.check em { display: block; font-style: normal; color: var(--text-dim); font-size: 10.5px; }
.check.dimmed { opacity: 0.4; cursor: default; }

/* ---------- question ---------- */
.question { display: flex; flex-direction: column; align-items: center; gap: 11px; }

.transport { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.transport button, .actions button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 17px;
  font-size: 13.5px;
}
.transport button:hover:not(:disabled), .actions button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #17141f; border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }

.prompt { font-size: 14.5px; text-align: center; }

.slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.slot {
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 9px;
  padding: 5px 13px 7px;
  min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.slot-label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.03em; }
.slot-value { font-size: 16px; font-weight: 600; }
.slot.filled { border-style: solid; }
.slot.active { border-color: var(--accent); background: var(--accent-soft); }

.palette { display: grid; gap: 5px; width: 100%; }
.palette.notes { grid-template-columns: repeat(12, 1fr); }
/* 13 so that the 25 intervals — unison through two octaves — come out as two
   even rows rather than two and a stub. */
.palette.intervals { grid-template-columns: repeat(13, 1fr); }
.pal {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 2px;
  font-size: 12.5px;
}
.pal:hover { border-color: var(--accent); background: var(--accent-soft); }

.actions { display: flex; gap: 9px; }
.hint { color: var(--text-dim); font-size: 11px; text-align: center; }

/* ---------- reveal ---------- */
/* Marking on the left, the shape on the right — half the height of stacking
   them, which is the difference between fitting a laptop window and not. */
.reveal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.reveal-main { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.reveal-shape { display: flex; justify-content: center; }

.verdict { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.verdict.skip { color: var(--text-dim); }

.answer-list { list-style: none; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 3px; }
.answer-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: baseline;
  background: var(--panel-2); border-radius: 7px; padding: 5px 11px; font-size: 12.5px;
  border-left: 3px solid transparent;
}
.answer-list li.ok { border-left-color: var(--ok); }
.answer-list li.bad { border-left-color: var(--bad); }
.a-label { color: var(--text-dim); font-size: 10.5px; }
.a-correct { font-weight: 600; }
.a-yours { color: var(--bad); font-size: 10.5px; }

.voicing-title { font-size: 15px; font-weight: 600; margin-top: 2px; text-align: center; }
.voicing-notes { color: var(--text-dim); font-size: 12.5px; text-align: center; }
.credit { font-size: 11.5px; color: var(--text-dim); text-align: center; max-width: 460px; }
.credit strong { color: var(--accent); }

/* ---------- chord box ---------- */
.chordbox { display: block; width: var(--chordbox); height: auto; }
.fb-string, .fb-fret { stroke: var(--border); stroke-width: 1.5; }
.fb-nut { stroke: var(--text-dim); stroke-width: 5; }
.fb-dot { fill: var(--accent); }
.fb-name { fill: #17141f; font-size: 12px; font-weight: 700; text-anchor: middle; }
.fb-open { fill: none; stroke: var(--text-dim); stroke-width: 1.8; }
.fb-openname, .fb-mute, .fb-pos { fill: var(--text-dim); font-size: 11px; text-anchor: middle; }
.fb-mute { font-size: 14px; }

/* ---------- score ---------- */
.score {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: center;
  color: var(--text-dim); font-size: 11.5px;
}
.stat { display: flex; align-items: baseline; gap: 4px; }
.stat b { color: var(--text); font-size: 13.5px; font-weight: 600; }
.stat i { font-style: normal; }
.weak { color: var(--accent); }
.link { background: none; border: 0; color: var(--text-dim); text-decoration: underline; font-size: 11.5px; }

/* ---------- short windows ---------- */
/* Give back vertical space in the order it costs least: the tagline, then
   the keyboard hint, then padding, then the chord box. */
@media (max-height: 780px) {
  :root { --gap: 9px; --chordbox: 158px; }
  body { padding: 12px 16px 16px; }
  .subtitle { display: none; }
  .panel { padding: 10px 14px; }
  .question { gap: 9px; }
  .transport button, .actions button { padding: 7px 15px; }
  .pal { padding: 7px 2px; }
}
@media (max-height: 760px) {
  /* The player's name carries the attribution; the sentence about their
     playing is the first thing that can go. */
  .credit span { display: none; }
}
@media (max-height: 700px) {
  :root { --chordbox: 140px; }
  header { display: none; }
  .hint { display: none; }
  /* The neck is for hunting the note *before* answering; once the answer is
     out the reveal shows the same shape, so on a short window it gives its
     space back — the same trade the phone layout makes. */
  body.revealed .neck-wrap { display: none; }
  /* A chord names every note, so the reveal lists one row per note rather
     than per gap — worth a few pixels back from each of them. */
  .answer-list li { padding: 3px 9px; font-size: 12px; }
  .reveal-main { gap: 5px; }
  .voicing-notes { font-size: 12px; }
  .slot { padding: 4px 11px 5px; min-width: 84px; }
  .pal { padding: 5px 2px; font-size: 12px; }
  .answer-list li { padding: 4px 9px; }
}
@media (max-height: 600px) {
  :root { --gap: 7px; --chordbox: 118px; }
  body { padding: 8px 10px 10px; }
  .panel { padding: 8px 11px; }
  .question { gap: 7px; }
  .transport button, .actions button { padding: 6px 12px; font-size: 12.5px; }
  .fb-name { display: none; }      /* the names are in the note list anyway */
  .answer-list li { font-size: 11.5px; padding: 3px 8px; }
  .voicing-title { font-size: 13.5px; }
  .voicing-notes { font-size: 11.5px; }
  .controls { gap: 7px 12px; }
}

/* Only the very narrowest windows stack the reveal; everything else keeps
   the marking and the shape side by side, which is what makes it fit. */
@media (max-width: 300px) {
  .reveal { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

/* ---------- the play-along neck ---------- */
/* A neck diagram, not a chord box: high E on top, low E at the bottom, the
   way tab is written. Nothing is marked until the answer is out, or it would
   just show you what you were meant to work out. */
.neck-wrap { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.neck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.neck-label { color: var(--text-dim); font-size: 10.5px; }

.neck {
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  /* The whole neck is laid out at a fixed fret width and scrolls sideways,
     so the frets stay finger-sized instead of shrinking to fit the screen. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.neck::-webkit-scrollbar { height: 6px; }
.neck::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* max-content so the neck can run past the edge and scroll; min-width 100%
   with growable cells so that when the whole neck does fit, the frets spread
   to fill the panel instead of leaving the strings hanging in mid-air. */
.nk-row { display: flex; width: max-content; min-width: 100%; }
.nk-cell { flex: 1 0 var(--nkw, 42px); text-align: center; }
/* The open string sits behind the nut, and stays pinned to the left edge so
   you keep your bearings while the rest of the neck scrolls past. */
.nk-cell.nk-open {
  flex: 0 0 30px;
  border-right: 3px solid var(--text-dim);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel-2);
}

.nk-nums { font-size: 9.5px; color: var(--text-dim); padding: 3px 0 1px; }
.nk-nums .nk-cell { border-right: 0; }
.nk-nums .nk-cell.nk-open { border-right: 3px solid transparent; }
.nk-nums .marked { color: var(--accent); font-weight: 600; }

.nk-string { height: 23px; }
.nk-fret {
  background: none;
  border: 0;
  border-right: 1px solid var(--border);
  position: relative;
  padding: 0;
}
.nk-fret:last-child { border-right: 0; }
/* The string itself, drawn through the middle of the row. */
.nk-fret::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--sw, 1px);
  transform: translateY(-50%);
  background: #6b7488;
}
/* The fingertip. A rounded marker narrower than the fret, so it reads as a
   finger on the string rather than a filled-in cell. */
.nk-fret::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(74%, 21px);
  height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 90ms linear;
}
.nk-fret:hover::after { opacity: 0.4; }
.nk-fret.lit::after { opacity: 0.9; transition: none; }
/* Where the chord actually was — only after the reveal. */
.nk-fret.hit::after { opacity: 1; }
.nk-name {
  position: relative;      /* above the marker, so the name stays readable */
  z-index: 1;
  font-size: 10.5px;
  font-weight: 700;
  color: #17141f;
}

/* Required by the sample licence, so it is always on the page — never hidden
   to make a small screen fit. It is the one thing allowed to sit below the
   fold: the quiz above it has to fit, the credit only has to be there. */
.attribution { color: var(--text-dim); font-size: 10px; text-align: center; opacity: 0.75; }
.attribution a { color: inherit; }

/* ---------- runs ---------- */
.group.dimmed { opacity: 0.4; }
/* Which way a run's step goes. Sits between the slots and the palette so it
   reads as part of the answer, not as a setting. */
.ask { display: flex; align-items: center; justify-content: center; gap: 6px 14px; flex-wrap: wrap; }
.dir-toggle .seg-btn { padding: 5px 14px; font-size: 13px; }

.tab { display: block; width: calc(var(--chordbox) * 1.2); height: auto; }
.tab-line { stroke: var(--border); stroke-width: 1.3; }
.tab-name { fill: var(--text-dim); font-size: 10px; text-anchor: middle; }
.tab-bg { fill: var(--panel); }
.tab-num { fill: var(--accent); font-size: 13px; font-weight: 700; text-anchor: middle; }

/* Show starting note: a ring, not a fill, so it never reads as the reveal. */
.nk-fret.start::after {
  opacity: 1;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  box-sizing: border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nk-fret.start .nk-name { color: var(--text); }

.checks { display: flex; flex-direction: column; gap: 4px; }