/* pitch/position — a layer over Pico CSS (vendor/pico.min.css).
   Look: Swiss/Dutch print — Helvetica, black on white, heavy rules, square
   corners, no shadows (after Experimental Jetset), with flat primaries that
   overprint where they overlap (after Karel Martens). Dark mode inverts the
   paper; the primaries stay. Pico supplies forms, buttons, tables and layout. */

:root:root {
  /* palette */
  --paper: #ffffff;
  --ink: #000000;
  --grey: #6b6b6b;
  --hair: #dcdcdc;
  --line: var(--ink);             /* outlines of cards, fields and buttons (1px) */
  --blue: #0a3cff;
  --red: #ff2d1a;
  --yellow: #ffd400;
  --green: #00a14b;
  --pink: #ff7bac;
  --overprint: multiply;          /* how coloured marks mix where they overlap */

  /* roles */
  --ok: var(--green);
  --bad: var(--red);
  --warn: var(--yellow);
  --series-1: var(--blue);        /* score line */
  --rule: 2px solid var(--ink);

  /* Pico: type and spacing (Pico grows the root font with viewport width; keep it fixed) */
  --pico-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pico-font-size: 93.75%;
  --pico-line-height: 1.4;
  --pico-spacing: .75rem;
  --pico-block-spacing-vertical: .9rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: .38rem;
  --pico-form-element-spacing-horizontal: .75rem;
  --pico-typography-spacing-vertical: .875rem;
  --pico-border-radius: 0;
  --pico-border-width: 1px;
  --pico-outline-width: 3px;

  /* Pico: colour */
  --pico-background-color: var(--paper);
  --pico-color: var(--ink);
  --pico-muted-color: var(--grey);
  --pico-muted-border-color: var(--hair);
  --pico-h1-color: var(--ink); --pico-h2-color: var(--ink); --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink); --pico-h5-color: var(--ink); --pico-h6-color: var(--ink);
  --pico-primary: var(--blue);
  --pico-primary-underline: var(--blue);
  --pico-primary-hover: var(--ink);
  --pico-primary-hover-underline: var(--ink);
  --pico-primary-background: var(--ink);
  --pico-primary-border: var(--ink);
  --pico-primary-hover-background: var(--blue);
  --pico-primary-hover-border: var(--blue);
  --pico-primary-inverse: var(--paper);
  --pico-primary-focus: color-mix(in srgb, var(--blue) 35%, transparent);
  --pico-secondary: var(--ink);
  --pico-secondary-underline: var(--ink);
  --pico-secondary-hover: var(--blue);
  --pico-secondary-hover-underline: var(--blue);
  --pico-secondary-background: var(--ink);
  --pico-secondary-border: var(--ink);
  --pico-secondary-hover-background: var(--blue);
  --pico-secondary-hover-border: var(--blue);
  --pico-secondary-inverse: var(--paper);
  --pico-secondary-focus: color-mix(in srgb, var(--blue) 35%, transparent);
  --pico-contrast: var(--ink);
  --pico-contrast-background: var(--yellow);
  --pico-contrast-border: var(--yellow);
  --pico-contrast-hover-background: var(--pink);
  --pico-contrast-hover-border: var(--pink);
  --pico-contrast-inverse: #000;
  --pico-contrast-focus: color-mix(in srgb, var(--yellow) 50%, transparent);
  --pico-box-shadow: none;
  --pico-card-background-color: var(--paper);
  --pico-card-border-color: var(--line);
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--paper);
  --pico-dropdown-box-shadow: none;
  --pico-group-box-shadow: none;
  --pico-form-element-background-color: var(--paper);
  --pico-form-element-selected-background-color: var(--hair);
  --pico-form-element-border-color: var(--line);
  --pico-form-element-color: var(--ink);
  --pico-form-element-active-background-color: var(--paper);
  --pico-form-element-active-border-color: var(--blue);
  --pico-form-element-focus-color: color-mix(in srgb, var(--blue) 35%, transparent);
  --pico-switch-background-color: var(--hair);
  --pico-switch-checked-background-color: var(--blue);
  --pico-switch-color: var(--paper);
  --pico-switch-thumb-box-shadow: none;
  --pico-progress-background-color: var(--hair);
  --pico-progress-color: var(--blue);
  --pico-table-border-color: var(--hair);
  --pico-table-row-stripped-background-color: transparent;
  --pico-code-kbd-background-color: var(--ink);
  --pico-code-kbd-color: var(--paper);
  --pico-accordion-border-color: var(--line);
  --pico-accordion-close-summary-color: var(--ink);
  --pico-accordion-open-summary-color: var(--ink);
  --pico-accordion-active-summary-color: var(--blue);
  --pico-mark-background-color: var(--yellow);
  --pico-mark-color: #000;
  --pico-text-selection-color: color-mix(in srgb, var(--yellow) 70%, transparent);
  --pico-ins-color: var(--green);
  --pico-del-color: var(--red);
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --paper: #0a0a0a; --ink: #f4f4f4; --grey: #9a9a9a; --hair: #2c2c2c;
    --blue: #3d63ff; --overprint: screen;
  }
}
:root:root[data-theme="dark"] {
  --paper: #0a0a0a; --ink: #f4f4f4; --grey: #9a9a9a; --hair: #2c2c2c;
  --blue: #3d63ff; --overprint: screen;
}

/* ---------- type ---------- */
body { -webkit-font-smoothing: antialiased; }
h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h6 {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  margin: 1.1rem 0 .45rem; padding-top: .35rem; border-top: var(--rule);
}
.hint { color: var(--pico-muted-color); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.row select { width: auto; margin: 0; }
.danger { --pico-secondary: var(--red); }
kbd { font-weight: 700; }

/* ---------- header ---------- */
body > header { border-bottom: 4px solid var(--ink); margin-bottom: .9rem; }
body > header nav li { padding-block: .35rem; }
nav strong { font-size: 1.55rem; font-weight: 700; letter-spacing: -.045em; text-transform: lowercase; line-height: 1; }
/* Pico pulls the nav lists outward with negative margins; keep them inside the page gutter. */
nav { flex-wrap: wrap; }
nav ul:first-child { margin-left: 0; }
nav ul:last-child { margin-right: 0; }
nav ul:first-child > li:first-child { padding-left: 0; }
nav ul:last-child > li:last-child { padding-right: 0; }
nav .stats { flex-wrap: wrap; }
nav .stats li { padding-block: .5rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
nav .stats small { color: var(--pico-muted-color); font-weight: 400; }

/* ---------- cards ---------- */
article { border: 1px solid var(--line); }
article > header, article > footer { border-color: var(--line); border-width: 1px; }
.outline { --pico-border-color: var(--line); border-color: var(--line); }
.outline:is(:hover, :focus-visible):not(:disabled) { border-color: var(--ink); }
select:is(:hover, :focus) { --pico-border-color: var(--ink); }
article > header strong { text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }

/* ---------- mode + key ---------- */
.topline { display: flex; gap: 1rem; align-items: start; flex-wrap: wrap; }
.topline .modes { width: auto; flex: 0 0 auto; }
.topline select { flex: 1 1 12rem; width: auto; font-weight: 700; }
.topline select.inst { flex: 0 0 auto; }
.modes button { font-weight: 700; }
.modes button:not([aria-current="true"]) {
  --pico-background-color: var(--paper);
  --pico-color: var(--ink);
  --pico-border-color: var(--line);
}
.modes button:not([aria-current="true"]):hover { --pico-background-color: var(--blue); --pico-color: #fff; }
.topline { margin-bottom: .75rem; }
.topline .settings-btn { margin-left: auto; width: auto; font-weight: 700; }
dialog > article { max-width: 44rem; width: 100%; }
dialog > article > header { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
dialog > article > header strong { text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 560px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topline > * { margin-bottom: 0; }
#octaveHint { display: block; margin: -.5rem 0 .5rem; }

/* ---------- quiz ---------- */
.quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.quiz-head h3 { margin: .1rem 0 0; font-size: 1.25rem; }
.quiz-actions { display: flex; gap: .5rem; }
.quiz-actions button { margin: 0; font-weight: 700; }

.countdown { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; height: 1.3rem; }
.countdown.idle { visibility: hidden; }   /* keeps its space between questions */
.countdown progress { margin: 0; height: .6rem; }
.countdown.low progress { --pico-progress-color: var(--red); }
.countdown small { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .4rem; margin-top: .8rem; }
.answers.dense { grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); }
.answers button {
  margin: 0; display: flex; flex-direction: row; align-items: baseline; gap: .35rem; padding: .35rem .55rem;
  --pico-background-color: var(--paper); --pico-color: var(--ink); --pico-border-color: var(--line);
}
.answers button:not(:disabled):hover { --pico-background-color: var(--blue); --pico-border-color: var(--blue); --pico-color: #fff; }
.answers button:disabled { opacity: .35; }
.answers .main { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.answers .sub { font-size: .7rem; min-height: 1em; opacity: .7; }
.answers button[data-state] { opacity: 1; }
.answers button[data-state="pending"] { --pico-background-color: var(--yellow); --pico-border-color: var(--yellow); --pico-color: #000; }
.answers button[data-state="correct"] { --pico-background-color: var(--green); --pico-border-color: var(--green); --pico-color: #fff; }
.answers button[data-state="wrong"] { --pico-background-color: var(--red); --pico-border-color: var(--red); --pico-color: #fff; }
.octaves { grid-template-columns: repeat(4, minmax(3.5rem, 6rem)); }
.octaves::before { content: attr(data-label); grid-column: 1 / -1; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.mic { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.mic button { margin: 0; }
.mic progress { width: 8rem; margin: 0; --pico-progress-color: var(--green); }
.mic small { color: var(--pico-muted-color); }

/* ---------- fretboard: a grid of equal modules, full width ---------- */
.board { overflow-x: auto; margin-top: .75rem; }
.fretboard { width: 100%; min-width: 520px; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.fb-fret { stroke: var(--ink); stroke-width: 1; }
.fb-nut { stroke: var(--ink); stroke-width: 7; stroke-linecap: butt; }
.fb-string { stroke: var(--ink); }
.fb-marker { fill: var(--blue); mix-blend-mode: var(--overprint); }
.fb-strlabel { fill: var(--ink); font-size: 18px; font-weight: 700; }
.fb-fretnum { fill: var(--grey); font-size: 14px; font-variant-numeric: tabular-nums; }
.fb-fretnum.strong { fill: var(--ink); font-weight: 700; }
.fb-hit { cursor: pointer; }
.fb-cell { fill: var(--blue); opacity: 0; mix-blend-mode: var(--overprint); }
.fb-hit:hover .fb-cell { opacity: .12; }
.board.armed .fb-hit { cursor: crosshair; }
.board.armed .fb-hit:hover .fb-cell { fill: var(--yellow); opacity: .9; }
.board.armed { outline: 4px solid var(--yellow); outline-offset: 6px; }
.fb-dot { pointer-events: none; }                 /* solid: strings and frets don't show through */
.fb-dot text { font-size: 15px; font-weight: 700; fill: #fff; }
.fb-dot-hit circle { fill: var(--blue); }
.fb-dot-echo circle { fill: var(--paper); stroke: var(--blue); stroke-width: 2.5; }
.fb-dot-echo text { fill: var(--blue); }
.fb-dot-miss circle { fill: var(--red); }
.fb-dot-heat circle { fill: color-mix(in srgb, var(--red) calc(var(--heat) * 100%), var(--yellow)); }
.fb-dot-heat text { fill: #000; }
.fb-dot-flash circle { fill: var(--yellow); animation: fade .9s forwards; }
.fb-dot-flash text { fill: #000; animation: fade .9s forwards; }
@keyframes fade { to { opacity: 0; } }

.legend { display: flex; gap: .4rem 1.1rem; flex-wrap: wrap; margin-top: .4rem; }
.board + .legend { margin-top: 1rem; }
.legend-hint { margin-left: auto; color: var(--pico-muted-color); }
.sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.sw-hit { background: var(--blue); }
.sw-echo { border: 2px solid var(--blue); }
.sw-miss { background: var(--red); }
.sw-heat { background: linear-gradient(90deg, var(--yellow), var(--red)); }
/* ---------- progress ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem .75rem; margin: 1rem 0 .25rem; }
.tile { border-top: var(--rule); padding-top: .45rem; position: relative; }
.tile b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile small { color: var(--pico-muted-color); }
.tile::after { content: ""; position: absolute; top: .55rem; right: 0; width: .7rem; height: .7rem; border-radius: 50%; mix-blend-mode: var(--overprint); }
.tile:nth-child(5n+1)::after { background: var(--blue); }
.tile:nth-child(5n+2)::after { background: var(--red); }
.tile:nth-child(5n+3)::after { background: var(--yellow); }
.tile:nth-child(5n+4)::after { background: var(--green); }
.tile:nth-child(5n+5)::after { background: var(--pink); }

table { font-variant-numeric: tabular-nums; font-size: .85rem; margin-bottom: .5rem; }
th, td { padding: .3rem .55rem; }
thead th { border-bottom: var(--rule); font-weight: 700; }
td, th { white-space: nowrap; }

.data-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.data-row button { margin: 0; width: auto; }
/* ---------- neck regions ---------- */
table.regions { width: auto; margin-bottom: .75rem; }
table.regions th, table.regions td { padding: .3rem .7rem; text-align: center; }
table.regions tbody th { text-align: left; font-weight: 700; }
/* ---------- benchmark ---------- */
.bench-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: calc(var(--pico-block-spacing-vertical) * -1) calc(var(--pico-block-spacing-horizontal) * -1) 1rem;
  padding: .5rem var(--pico-block-spacing-horizontal); background: var(--yellow); color: #000; font-weight: 700; }
.bench-bar button { margin: 0; padding: .2rem .7rem; --pico-color: #000; --pico-border-color: #000; border-color: #000; color: #000; }

/* ---------- more ---------- */
details.more { margin-top: 1rem; border-top: var(--rule); padding-top: .6rem; }
details.more > summary { font-weight: 700; }

/* ---------- phrases ---------- */
.slot-row { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.slot-row button { margin: 0; width: auto; padding: .25rem .7rem; }
.slots { display: flex; gap: .35rem; }
.slots i { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 1px solid var(--ink); font-style: normal; font-weight: 700; font-size: .8rem; color: var(--grey); }
.slots i.filled { background: var(--ink); color: var(--paper); }
.fb-dot-tap circle { fill: var(--ink); }
.fb-dot-tap text { fill: var(--paper); }

/* ---------- answer, set as type ---------- */
/* The result row always holds its space, so nothing below moves when the verdict appears. */
.result { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin-top: .75rem; color: var(--ink);
  height: 3.1rem; overflow-x: auto; overflow-y: hidden; }
.res-verdict { display: flex; align-items: center; padding: 0 .65rem; font-size: .95rem; font-weight: 700;
  white-space: nowrap; color: #fff; background: var(--ink); }
.result.ok .res-verdict { background: var(--green); }
.result.bad .res-verdict { background: var(--red); }
.result.warn .res-verdict { background: var(--yellow); color: #000; }
.res-cells { display: flex; flex-wrap: nowrap; margin: 0; }
.res-cells > div { padding: .1rem .7rem; border-left: 1px solid var(--line); white-space: nowrap; line-height: 1.15; }
.res-cells dt { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin: 0; }
.res-cells dd { margin: 0; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-cells dd small { display: block; font-size: .68rem; font-weight: 400; color: var(--grey); }
.res-cells .ok dd { color: var(--green); }
.res-cells .bad dd { color: var(--red); }

/* ---------- language menu: small, just the code ---------- */
nav select.lang-sel { width: auto; height: auto; margin: 0; padding: .05rem 1.1rem .05rem .35rem;
  font-size: .72rem; font-weight: 700; color: var(--grey); border-color: var(--line);
  background-size: .55rem auto; background-position: center right .3rem; }

/* ---------- the search loop ---------- */
.fb-dot-trial circle { fill: none; stroke: var(--yellow); stroke-width: 4; }
.quiz-head { position: relative; }
/* mastery levels: learning (outline grey) < found (outline) < secure (half) < solid (filled) */

/* ---------- quiz: board right under the controls, answer below it ---------- */
.listen-count { white-space: nowrap; }
.quiz .board { margin-top: .6rem; }
.quiz .result { margin-top: .6rem; }
.quiz .slot-row { margin-top: .6rem; }

/* ---------- progress sections ---------- */
.sec { margin-bottom: 1.25rem; }
.sec h6 { margin-top: .4rem; }

/* ---------- progress, after Tufte: numbers with sparklines and comparisons ---------- */
table.summary { width: 100%; margin: .25rem 0 1rem; font-size: .9rem; }
table.summary th, table.summary td { border: 0; border-bottom: 1px solid var(--hair); padding: .45rem .5rem .45rem 0; vertical-align: middle; background: none; }
table.summary th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; width: 11rem; }
table.summary td.num { font-size: 1.15rem; font-weight: 700; width: 7.5rem; white-space: nowrap; }
table.summary td:nth-child(3) { width: 120px; }
table.summary td:last-child { white-space: normal; }
.bench-inline { margin: 0 0 0 .5rem; padding: .1rem .55rem; font-size: .78rem; width: auto; }
.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark-line { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.spark-end { fill: var(--red); }
.spark-dot { fill: var(--ink); }
.spark-bar { fill: var(--line); }
.spark-bar.met { fill: var(--ink); }
.spark-goal { stroke: var(--red); stroke-width: .8; stroke-dasharray: 2 2; }

table.degrees { font-size: .85rem; }
table.degrees th, table.degrees td { padding: .32rem .6rem .32rem 0; background: none; }
table.degrees thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
table.degrees tbody th { font-weight: 700; font-size: 1rem; width: 3rem; }
table.degrees td.num { font-variant-numeric: tabular-nums; }
table.degrees tr.unseen { color: var(--grey); }
.stage-legend { font-size: .75rem; margin: .4rem 0 0; max-width: 60rem; }

.neck-map { overflow-x: auto; }
svg.neck { display: block; width: 100%; max-width: 32rem; min-width: 300px; height: auto; }
.neck-cell { fill: color-mix(in srgb, var(--red) calc(var(--miss) * 90%), var(--paper)); stroke: var(--hair); stroke-width: .5; }
.neck-cell.empty { fill: var(--paper); }
.neck-lbl { fill: var(--grey); font-size: 8px; font-weight: 700; }
.neck-num { fill: #000; font-size: 7.5px; font-weight: 700; }

#neckNote { font-size: .75rem; margin-top: .3rem; }
@media (max-width: 640px) {
  table.summary tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .75rem;
    border-bottom: 1px solid var(--hair); padding: .35rem 0; }
  table.summary th, table.summary td { border: 0; padding: 0; width: auto !important; }
  table.summary td:last-child { grid-column: 1 / -1; padding-top: .2rem; }
}


/* ---------- credits ---------- */
.credits { margin-top: .5rem; font-size: .75rem; }
.credits-title { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--ink); margin: 0 0 .5rem; }
.credits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; }
@media (max-width: 640px) { .credits-grid { grid-template-columns: minmax(0, 1fr); } }
.credits-h { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.credits ul { margin: 0; padding-left: 1rem; }
.credits li { list-style: square; margin: 0 0 .15rem; line-height: 1.4; }
.credits li b { color: var(--ink); font-weight: 700; }
.credits-note { margin: .6rem 0 0; }

/* ---------- how to use it: same structure and type as the credits ---------- */
/* framed like the cards above, so it reads as part of the app and not as more credits */
footer details { border: 1px solid var(--line); padding: .7rem var(--pico-block-spacing-horizontal); margin-bottom: 1.25rem; }
footer details[open] { padding-bottom: 1rem; }
footer details > summary { margin: 0; }
footer details > summary { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 2rem; margin-top: .6rem; font-size: .8rem; line-height: 1.45; }
@media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
.help-grid ol, .help-grid ul { margin: 0; padding-left: 1.1rem; }
.help-grid li { margin: 0 0 .25rem; }
.help-grid ul li { list-style: square; }
.help-note { margin: .4rem 0 0; color: var(--grey); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; margin: 0; align-items: baseline; }
.keys dt, .keys dd { margin: 0; }
footer kbd, .keys kbd { background: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 0 .3rem;
  font-family: var(--pico-font-family); font-size: .7rem; font-weight: 700; box-shadow: none; }