:root {
  color-scheme: light dark;
  /* Palette ported from sigep-transcribe (public/index.html): purple, gold,
     cream, in both modes, following the OS with no toggle. Sigep token names
     map as --ink:--text, --muted:--text-muted, --line:--divider,
     --panel:--bg-alt; --bg and --accent share names. Tokens with no sigep
     counterpart are derived from the same palette below. */
  --bg: #F7F4EE;
  --card: #FDFBF6;
  --panel: #EDE8DF;
  --ink: #2D2328;
  --muted: #6B5E64;
  --line: rgba(74, 32, 116, 0.15);
  --line-soft: rgba(74, 32, 116, 0.08);
  --accent: #4A2074;
  --root-dot: #8A6D1E; /* sigep gold, darkened so the card-colored note text stays legible */
  --ok: #47692F;
  --ok-bg: #EDF0E3;
  --text-soft: #4A3D44;
  --faint: rgba(45, 35, 40, 0.35);
  --string: #8F8188;
  --inverse-muted: rgba(247, 244, 238, 0.7);
  --accent-soft: rgba(74, 32, 116, 0.35);
  /* Paper group: surfaces alphaTab draws on. The library renders black
     notation with no theme awareness, so these stay light in every mode
     and are not redefined in the dark block. */
  --paper: #fffdf9;
  --sel-bar: rgba(37, 99, 235, 0.12);
  --sel-beat: rgba(37, 99, 235, 0.75);
  --sel-range: rgba(37, 99, 235, 0.1);
  --highlight: #4A2074;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16111C;
    --card: #221A2C;
    --panel: #1E1726;
    --ink: #E2D9DE;
    --muted: #9A8C92;
    --line: rgba(180, 140, 224, 0.18);
    --line-soft: rgba(180, 140, 224, 0.10);
    --accent: #B48CE0;
    --root-dot: #D4AF5A;
    --ok: #93C273;
    --ok-bg: rgba(147, 194, 115, 0.12);
    --text-soft: #C6B9BF;
    --faint: rgba(226, 217, 222, 0.35);
    --string: #6F6168;
    --inverse-muted: rgba(30, 23, 38, 0.65);
    --accent-soft: rgba(180, 140, 224, 0.4);
  }
}
h1, h2, h3, .brand { font-family: "Source Serif 4", Georgia, serif; }
* { box-sizing: border-box; }
input[type=range], input[type=checkbox] { accent-color: var(--accent); }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
.top { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.brand { font-weight: 700; color: inherit; text-decoration: none; }
.top nav { display: flex; gap: .9rem; flex-wrap: wrap; }
/* Padded hit areas, not bare text: the links measured 26px tall with 14px
   gaps, a mis-tap machine on a phone. The padding does the sizing on every
   pointer; the header's reduced own padding keeps its height the same. */
.top nav a { color: var(--muted); text-decoration: none; font-size: .9rem; padding: .6rem .4rem; display: inline-block; }
.top nav a:hover { color: var(--accent); }
.top nav a[aria-current=page] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: calc(.6rem - 2px); }
main { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }
footer { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .85rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--card); padding: .55rem 1rem; color: var(--ink); }
button:disabled { cursor: default; opacity: .6; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--card); }
select, input[type=number], input[type=range] { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--card); }
label { font-size: .9rem; color: var(--muted); }
.controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.controls .group { display: flex; gap: .4rem; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: .45rem .8rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed=true] { background: var(--accent); color: var(--card); }

/* The controls key: an inline legend the i button toggles, pushing content
   down instead of floating over the board. */
.help-toggle { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: italic 600 .85rem/1 Georgia, serif; cursor: pointer; }
.help-toggle[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
.help-panel { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--accent); background: var(--bg); color: var(--muted); max-width: 46rem; }
.help-panel dt { font-weight: 600; }
.help-panel dd { margin: 0; }

/* The Key and scale chip rows: every option visible, hover previews onto
   the board, nothing ever floats over it. Labels share one column width so
   the chips line up down the panel. */
.picker { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .5rem; }
.picker > span { min-width: 5rem; }
.picker + .controls { margin-top: 1rem; }
/* Pentatonic and Modes are one control on two lines; the tighter gap says so. */
.scale-group .picker { margin-bottom: .25rem; }
.scale-group { margin-bottom: .5rem; }
/* Set-once preferences (handedness, string order) sit right and speak
   quietly; localStorage remembers them, so they rarely need touching. */
.seg.setup button { font-size: .8rem; color: var(--muted); }
.seg.setup button[aria-pressed=true] { background: var(--panel); color: var(--ink); }
/* The caption is the board's heading: what you are looking at, in one line. */
#caption { font-size: 1rem; font-weight: 600; margin: .6rem 0 .3rem; }

/* Home */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.tile { display: block; text-decoration: none; color: inherit; }
.tile .card { height: 100%; margin: 0; }
.tile h2 { margin-top: 0; }
.tile:hover .card { border-color: var(--accent); }
.session ol { margin: .5rem 0 0; padding-left: 1.25rem; }

/* Chords page: the working-set chart, and the folded root-by-flavor grid. */
.chord-set h2 { margin-bottom: .1rem; }
.chord-set .formula { margin: 0; font-weight: 600; letter-spacing: .05em; }
.chord-grid { display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; margin: .6rem 0 0; }
.chord-grid svg.cd { width: 111px; height: auto; }
.grid-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; border-top: 1px solid var(--line); padding: .6rem 0; }
/* The id outranks .guide h3's accent below: the root labels test gold. */
#all-chords .grid-row h3 { width: 2.2rem; margin: 0; color: var(--root-dot); }
.grid-row svg.cd { width: 96px; height: auto; }
.grid-row .cd-box figcaption { font-size: .7rem; }

/* Glossary terms in the UI: gold dotted underline, note card on
   hover/focus, pinned by click. glossary.js owns the behavior. */
dfn[data-term] { font-style: inherit; cursor: help; text-decoration: underline dotted var(--root-dot); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.term-note { position: absolute; z-index: 50; max-width: 24rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--root-dot); border-radius: 8px; padding: .5rem .8rem; font-size: .85rem; line-height: 1.45; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.term-note b { color: var(--accent); }
.term-note .term-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted var(--root-dot); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.term-note .term-trail { font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.term-note .term-crumb { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 2px; }
.term-note .term-crumb:hover { color: var(--accent); }

/* Glossary page */
.glossary-group h2 { margin-top: 1.6rem; }
.entry { margin: .9rem 0; }
.entry h3 { margin: 0; font-size: 1rem; }
.entry .aliases { font-weight: 400; }
.entry p { margin: .15rem 0 0; max-width: 46rem; }

/* Fretboard */
/* The explorer card pins to the top of the page so the board stays in
   sight while the guides scroll beneath it; folding the settings away
   shrinks the pinned area to caption, board, and insight line. The
   ::before backdrop is page background painted over the gutters around
   the card, so guide text does not slide through the gaps. */
.explorer { position: sticky; top: 0; z-index: 20; }
.explorer::before { content: ""; position: absolute; inset: -1.5rem -1rem 0; background: var(--bg); z-index: -1; }
/* The toggle is anchored to the card's top corner, beside the page title,
   so it sits in the same place whether the settings are open or folded. */
#settings-toggle { position: absolute; top: 1.5rem; right: 1.5rem; padding: .25rem .7rem; color: var(--muted); }
#settings-toggle:hover { color: var(--accent); border-color: var(--accent); }
.board { overflow-x: auto; }
.fb { min-width: 900px; width: 100%; height: auto; display: block; }
.fb-string { stroke: var(--string); stroke-width: 1.4; }
.fb-fret { stroke: var(--line); stroke-width: 2; }
.fb-nut { stroke: var(--ink); stroke-width: 6; }
.fb-inlay { fill: var(--line-soft); }
.fb-num { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.fb-dot circle { fill: var(--accent); }
.fb-dot text { fill: var(--card); font-size: 11px; font-weight: 700; text-anchor: middle; }
.fb-root circle { fill: var(--root-dot); }
.fb-shared circle { stroke: var(--ink); stroke-width: 2.5; }
/* A mode's color tones render hollow so the solid pentatonic skeleton stays
   recognizable underneath. They sit on --paper, which stays light in dark
   mode (see the palette note), so the label keeps paper's own dark ink. */
.fb-color circle { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.fb-color text { fill: #2D2328; }
/* A color tone on the edge two positions share keeps the shared marker. */
.fb-color.fb-shared circle { stroke: var(--ink); stroke-width: 2.5; }
/* The insight line's skeleton name acts as a link into the pentatonic view. */
button.linkish { border: 0; background: none; padding: .2rem .1rem; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; border-radius: 4px; }

/* Study plan: today's session leads, the arc is context underneath it. */
.today-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.today-head h1 { margin: 0; }
.slots { display: grid; gap: .75rem; margin-top: 1rem; }
.slot { border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; background: var(--bg); }
/* The focus is the only slot long enough to make progress in, so it is the
   only one that carries any weight on the page. */
.slot[data-slot="Focus"] { border-color: var(--accent); background: var(--card); }
.slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.slot-head h3 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.slot p { margin: .35rem 0; }
.slot-title { font-weight: 600; font-size: 1.05rem; }
.criterion { color: var(--muted); border-left: 2px solid var(--line); padding-left: .6rem; }
.slot-choices { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
/* The honest answer most days, so it sits beside the pass rather than
   hiding: quieter, but not so quiet it reads as discouraged. */
.slot .later { color: var(--muted); }
.resisting { border-left: 2px solid var(--root-dot); padding-left: .6rem; color: var(--ink); }
/* Closing the day sits apart from the slots: it is the one control here that
   is about attendance rather than about a skill. */
.session-close { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.done-line { margin: 0; color: var(--ink); }
.done-line b { font-weight: 600; }
.slot .fretboard-link { display: inline-block; margin-top: .25rem; }
/* No markers: a flex list item drops its own anyway, and the passed and
   today marks already carry where you are. */
.skill-list { list-style: none; padding-left: 0; display: grid; gap: .3rem; margin: .75rem 0 1rem; }
.skill { font-size: .95rem; display: flex; gap: .6rem; align-items: baseline; }
.skill.passed .skill-title { color: var(--muted); text-decoration: line-through; }
.skill.focus .skill-title { font-weight: 600; }
.skill-mark { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.road-stage { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.road-stage h3 { margin: 0 0 .2rem; font-size: 1rem; display: inline; margin-right: .6rem; }
.road-stage p { margin: .3rem 0 0; }
.bar-row { display: flex; align-items: center; gap: .75rem; margin: .5rem 0 .25rem; }
.bar-track { flex: 1; height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.fretboard-link { white-space: nowrap; }

/* Course */
input[type=search] { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.lesson h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.lesson .artist { font-weight: 400; font-size: .9rem; }
.variant { border-top: 1px solid var(--line); padding: .6rem 0; }
.variant:first-of-type { border-top: 0; margin-top: .5rem; }
.variant-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.variant-name { font-size: .95rem; }
.variant-actions { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.button-link { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .75rem; font-size: .85rem; color: var(--ink); text-decoration: none; background: var(--card); }
.button-link:hover, .variant .watch:hover { border-color: var(--accent); }
.variant .watch, .variant .listen { font-size: .85rem; padding: .35rem .75rem; }
.variant .listen { color: var(--accent); border-color: var(--accent); }
.embed { margin-top: .75rem; }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
code { background: var(--bg); padding: 0 .3rem; border-radius: 4px; font-size: .85em; }

/* Player */
main.wide { max-width: 1100px; }
.file-pick { cursor: pointer; }
.controls .spacer { flex: 1; }
.toggle { display: inline-flex; gap: .4rem; align-items: center; color: var(--ink); font-size: .9rem; }
#score-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); max-height: 62vh; max-height: 62dvh; overflow: auto; }
#score { min-height: 200px; }

/* Tutorial notes and tags */
.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 .6rem; font-size: .75rem; color: var(--muted); }
.notes { margin-top: .5rem; }
.notes summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.notes summary:hover { color: var(--accent); }
.notes-body { white-space: pre-line; font-size: .9rem; margin: .5rem 0 0; color: var(--ink); }

.variant .audio { color: var(--ok); border-color: var(--ok); }

/* alphaTab playback cursors: the library positions them but deliberately
   ships no colors; transparent means invisible. */
.at-cursor-bar { background: var(--sel-bar); }
.at-cursor-beat { background: var(--sel-beat); width: 3px; }
.at-selection div { background: var(--sel-range); }
.at-highlight * { fill: var(--highlight); stroke: var(--highlight); }

button.linkish { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }

/* Player dialog: full-viewport backdrop, wide panel (cam-quiz statute-dialog pattern). */
/* vh then dvh: iOS Safari's vh is the largest viewport, so the toolbar covers
   the panel's bottom edge and a modal blocks the scroll that would hide it.
   dvh tracks the visible viewport; the vh line is the older-browser fallback. */
#player-dialog { border: 0; padding: 0; background: rgba(0,0,0,.35); width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; }
#player-dialog::backdrop { background: transparent; }
/* Top-aligned, not centred, and the 3vh margin is what centring computed for a
   full-height panel: (100 - 94) / 2. So a rendered score sits exactly where it
   always did. What changes is the growing phase. Centred, the panel grew from
   both edges, so its top rose as the score arrived and took the header with it:
   the close button jumped and a click already aimed at it landed on a slider
   (bug 27). Pinning the top means late content only ever pushes downward. */
#player-dialog[open] { display: flex; align-items: flex-start; justify-content: center; }
#player-dialog .panel { width: min(1150px, 96vw); margin-top: 3vh; max-height: 94vh; max-height: 94dvh; overflow: auto; background: var(--card); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.player-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.player-head h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.player-close { border: 0; background: none; font-size: 1.1rem; color: var(--muted); padding: .25rem .5rem; }
.player-close:hover { color: var(--ink); }
.controls.transport button.big { font-size: 1.05rem; padding: .8rem 1.9rem; }
input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
#tempo { width: 180px; }
#volume { width: 120px; }
@media (max-width: 480px) {
  /* The transport wrapped to three rows and the controls owned 72% of the
     dialog. Smaller paddings and full-width sliders put Restart, Play and
     Stop on one line and give the viewport back to the score. */
  #player-dialog .panel { padding: .8rem .8rem 1rem; }
  .controls.transport button.big { font-size: 1rem; padding: .55rem 1.1rem; }
  #tempo, #volume { width: 100%; }
  .player-close { padding: .6rem .9rem; font-size: 1.3rem; }
  /* alphaTab lays the score out to its container and SVG-clips what does not
     fit, unreachable by any scroll. A floor makes #score-wrap's own
     overflow-x the way to the clipped part instead. */
  #score { min-width: 420px; }
}
@media (max-height: 520px) {
  /* Landscape phone: without this the controls fill the height and the score
     never shares the screen with Play. */
  .controls.transport button.big { font-size: 1rem; padding: .45rem 1rem; }
  #score-wrap { max-height: 45vh; max-height: 45dvh; }
}

/* File rows inside a variant */
.file-row { display: flex; align-items: center; gap: 1rem; padding: .3rem 0 .3rem 1rem; }
.file-label { font-size: .88rem; color: var(--ink); }
.file-row .variant-actions { margin-left: auto; }
button.tag-filter { cursor: pointer; }
button.tag-filter:hover { border-color: var(--accent); color: var(--accent); }

/* Course: warm library layout */
.course-shell { display: flex; gap: 0; max-width: 1240px; align-items: flex-start; }
/* The filters fold away. The toggle is the one control that must survive the
   fold, so it lives on the shell, not in the sidebar it hides. */
.side-toggle { align-self: stretch; position: sticky; top: 1rem; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; color: var(--muted); padding: .2rem .3rem; margin-right: .5rem; font-size: 1.1rem; line-height: 1; align-self: flex-start; }
.side-toggle:hover { color: var(--accent); border-color: var(--accent); }
#course-side { width: 250px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 1rem; }
.side-search input { width: 100%; border-radius: 999px; padding: .5rem .9rem; }
.side-title { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: .9rem; margin: 0 0 .5rem; }
.side-list { display: flex; flex-direction: column; gap: 2px; }
.side-list button { display: flex; border: 0; background: none; border-radius: 8px; padding: .45rem .7rem; font-size: .87rem; color: var(--text-soft); text-align: left; }
.side-list button .count { margin-left: auto; color: var(--muted); }
.side-list button[aria-pressed=true] { background: var(--ink); color: var(--card); }
.side-list button[aria-pressed=true] .count { color: var(--inverse-muted); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-row button { border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; color: var(--text-soft); background: var(--card); }
/* Pressed chips fill solid, the same selected language the segs speak. */
.chip-row button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--card); }
.continue-card { border: 1px solid var(--accent-soft); border-radius: 12px; padding: .8rem .9rem; background: var(--card); }
.continue-card a { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; }
.continue-card a:hover { color: var(--accent); }
.course-main { flex: 1; margin-left: 1.5rem; min-width: 0; }
.row-head { display: flex; align-items: center; gap: 14px; padding: .45rem 1.2rem; border-bottom: 1px solid var(--line); font-size: .68rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.col-preview { width: 28px; flex-shrink: 0; }
.col-title { flex: 1; min-width: 0; }
.col-artist { width: 180px; flex-shrink: 0; }
.col-level { width: 100px; flex-shrink: 0; }
.col-files { width: 120px; flex-shrink: 0; }
.col-chevron { width: 14px; flex-shrink: 0; }
.song-row { border-bottom: 1px solid var(--line-soft); }
/* The pinned Pentatonic fretboard row: dressed like a song row, but its own
   class so nothing that counts or filters songs picks it up. */
/* The guides list on the Fretboard page. */
/* Guides live inside fretboard.html as collapsible sections, generated
   between the GUIDES markers by tools/make-mode-guides.mjs. The .guide
   content rules also dress the print copies in build/guides-print, which
   wrap the same bodies in <main class="guide">. */
details.guide { margin: .9rem 0; }
details.guide > summary { cursor: pointer; }
details.guide > summary b { color: var(--accent); }
details.guide > summary span { display: block; color: var(--muted); margin-left: 1.1rem; }
details.guide[open] > summary { margin-bottom: .4rem; }
.guide .downloads { color: var(--muted); font-size: .85rem; }
.guide a { color: var(--accent); }
.guide h3 { font-size: 1.05rem; margin: 1.8rem 0 .5rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.guide p { margin: .5rem 0; max-width: 46rem; }
.guide .lede { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; }
.guide table { border-collapse: collapse; margin: .6rem 0; }
.guide td, .guide th { border: 1px solid var(--line); padding: .3rem .8rem; text-align: center; }
.guide th { background: var(--panel); font-weight: 600; }
.guide .char td { color: var(--accent); font-weight: 700; }
.guide .fb { min-width: 0; margin: .4rem 0 1rem; }
.guide .fb-num { font-size: 11px; }
.guide .legend { color: var(--muted); font-size: .85rem; margin: -0.6rem 0 1rem; }
.guide .legend b { color: var(--accent); }
.guide .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.guide .pair figure { margin: 0; }
.guide .pair figcaption { font-size: .85rem; color: var(--muted); text-align: center; }
.guide pre.tab { background: var(--panel); border: 1px solid var(--line); padding: .8rem 1rem; overflow-x: auto; font: 12px/1.45 ui-monospace, Menlo, monospace; }
.guide ol.plan { padding-left: 1.2rem; max-width: 46rem; }
.guide ol.plan li { margin: .6rem 0; }
.guide ol.plan b { display: block; }
.guide .note { background: var(--panel); border-left: 3px solid var(--accent); padding: .6rem .9rem; max-width: 46rem; }
.guide footer { margin: 2.4rem 0 0; padding: .6rem 0 0; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); text-align: left; }
.tool-detail .board { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.row-line { display: flex; align-items: center; gap: 14px; padding: .38rem 1.2rem; cursor: pointer; }
.row-line:hover { background: var(--panel); }
.song-row .row-title { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: .98rem; color: var(--ink); }
.song-row .row-artist { font-size: .85rem; color: var(--muted); font-style: italic; }
.song-row .row-level, .song-row .row-files { font-size: .8rem; color: var(--text-soft); }
.song-row .row-files { color: var(--muted); }
.row-line .chevron { color: var(--muted); transition: transform .15s; }
.song-row[data-open=true] { background: var(--card); }
.song-row[data-open=true] .chevron { transform: rotate(180deg); }
button.preview { color: var(--accent); width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
button.preview:hover:not(:disabled) { border-color: var(--accent); }
button.preview:disabled { opacity: .35; cursor: default; }
button.preview svg { display: block; }
button.preview[data-playing=true] { background: var(--accent); border-color: var(--accent); color: var(--card); }
.row-progress { height: 3px; background: var(--line-soft); margin: 0 1.2rem; border-radius: 999px; overflow: hidden; }
.row-progress .fill { height: 100%; width: 0; background: var(--accent); }
.row-detail { padding: .3rem 1.2rem .9rem 3.4rem; }
@media (max-width: 900px) {
  /* stretch, not flex-start: a max-content child (an open lyrics chart) would
     otherwise inflate the column past the viewport and pan the whole page. */
  .course-shell { flex-direction: column; align-items: stretch; }
  #course-side { width: auto; position: static; }
  .course-main { margin-left: 0; }
  .col-artist, .row-artist, .col-files, .row-files { display: none; }
  /* The stacked sidebar was a full phone screen of library buttons before the
     first song appeared. One scrollable row each keeps every control and puts
     song one on screen one. */
  .side-toggle { position: static; width: 100%; margin: 0 0 .5rem; text-align: left; padding: .45rem .7rem; }
  .side-list { flex-direction: row; overflow-x: auto; padding-bottom: .25rem; }
  .side-list button { flex-shrink: 0; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .chip-row button { flex-shrink: 0; }
}
@media (max-width: 480px) {
  /* The desktop indent aligns the detail under the title column; on a phone
     it was 54px of a 343px column. */
  .row-detail { padding-left: 1.2rem; }
  /* Artist and Files already folded away above; at phone width the Level
     column's fixed 100px is the last thing crowding the title, so drop it
     too and let .col-title's flex: 1 take the row. */
  .col-level, .row-level { display: none; }
}

#neck-wrap { margin: 0 0 .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: .4rem .5rem; }

/* Chords in this song: the diagrams Guitar Pro already stores in the file */
.chord-section { margin: 0 0 .9rem; }
.chord-title { font-size: .68rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem; }
.chord-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; }
.cd-box { margin: 0; flex: 0 0 auto; text-align: center; }
.cd { display: block; width: 81px; height: auto; }
.cd-box figcaption { font-size: .74rem; color: var(--ink); margin-top: .15rem; }
.cd-string, .cd-fret { stroke: var(--string); stroke-width: 1; }
.cd-nut { stroke: var(--ink); stroke-width: 3; }
.cd-dot, .cd-barre { fill: var(--accent); }
.cd-open { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.cd-mute { fill: var(--muted); font-size: 9px; text-anchor: middle; }
.cd-fret-num { fill: var(--ink); font-size: 11px; text-anchor: end; }
.position-hint { color: var(--accent); margin: .25rem 0 0; }

/* Lyrics: the chart text pulled out of the course PDFs and docx */
.player-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; }
.player-body[data-lyrics=open] { grid-template-columns: 330px minmax(0, 1fr); }
.lyrics-pane { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: .75rem .85rem; max-height: 62vh; max-height: 62dvh; overflow: auto; }
.lyrics-head { font-size: .68rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.lyrics-source { display: block; letter-spacing: 0; text-transform: none; font-size: .75rem; margin-top: .15rem; }
.lyrics-pane pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; line-height: 1.55; white-space: pre; margin: 0; color: var(--ink); }
@media (max-width: 900px) {
  .player-body[data-lyrics=open] { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the score comes first; the chart is one swipe below instead of
     pushing the score entirely off a phone screen. */
  .lyrics-pane { max-height: 40vh; max-height: 40dvh; order: 2; }
}

/* Lyrics inside an expanded song row */
.lyrics { margin-top: .7rem; }
.lyrics > summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.lyrics > summary:hover { color: var(--accent); }
.lyrics-body { max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55; white-space: pre; overflow-x: auto; margin: .55rem 0 0; padding: .85rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); max-height: 26rem; }

/* A to Z jump bar */
.jump-bar { display: flex; flex-wrap: wrap; gap: 1px; padding: 0 1.2rem .5rem; }
.jump-bar button { border: 0; background: none; padding: .15rem .34rem; border-radius: 5px; font-size: .74rem; color: var(--text-soft); line-height: 1.2; }
.jump-bar button:hover:not(:disabled) { background: var(--ink); color: var(--card); }
.jump-bar button:disabled { color: var(--faint); cursor: default; }
.song-row { scroll-margin-top: .5rem; }

/* Reduced motion: damp the two transitions in this sheet rather than cut
   them, so a state change still reads as having happened, just without the
   glide. The chevron still ends up rotated and the bar still ends up at its
   new width, both snap there instead of animating. Everything else that
   responds to hover or click (button.preview, .side-list, .tile, .jump-bar,
   the button.tag-filter/watch/listen hover colors) already swaps state with
   no transition of its own, so there is no motion there to damp. */
@media (prefers-reduced-motion: reduce) {
  .bar-fill, .row-line .chevron { transition-duration: .01ms; }
}

/* Touch tap targets. Coarse pointers get the 44px floor; a mouse keeps the
   tighter desktop look. Sizes below come from the mobile audit's
   measurements, all of them under the bar. */
@media (pointer: coarse) {
  .seg button, button.small, .chip-row button, .side-list button, .side-toggle { min-height: 44px; }
  .help-toggle { width: 44px; height: 44px; }
  #positions button { min-width: 44px; }
  .jump-bar button { min-width: 32px; min-height: 40px; }
  button.preview { width: 40px; height: 40px; }
  .row-line { padding-top: .62rem; padding-bottom: .62rem; }
  .plan-item { padding: .45rem 0; }
  .plan-item input { width: 1.15rem; height: 1.15rem; }
  .player-close { padding: .6rem .9rem; font-size: 1.3rem; }
}

/* The Reading page. Bravura is alphaTab's music font, vendored with it; the
   staff renderer (staff.js) and the note value table set their glyphs in it.
   alphaTab loads the same file itself when the player starts, so a page
   with both does not fetch it twice. A SMuFL font draws one em as the height
   of the staff, which is why the SVG sets font-size to four staff spaces. */
@font-face {
  font-family: "Bravura";
  src: url("vendor/alphatab/font/Bravura.woff2") format("woff2"), url("vendor/alphatab/font/Bravura.woff") format("woff");
  font-display: block;
}
.staff { display: block; height: 150px; width: auto; max-width: 100%; }
.staff-wrap, .board-wrap { overflow-x: auto; }
.reading .staff-wrap .staff { width: 100%; height: auto; min-width: 640px; }
.staff-line, .staff-ledger { stroke: var(--ink); stroke-width: 1.1; }
.staff-stem { stroke: var(--ink); stroke-width: 1.3; }
.staff-glyph { font-family: "Bravura"; fill: var(--ink); }
.staff-label { fill: var(--accent); font: 700 13px "Source Sans 3", system-ui, sans-serif; text-anchor: middle; }
.staff-label-2 { fill: var(--muted); font-weight: 400; font-size: 12px; }
.reading figure { margin: .6rem 0 1.2rem; }
.reading figcaption { font-size: .85rem; color: var(--muted); }
.reading .pair figcaption { text-align: left; }
.reading .board-wrap .fb { min-width: 420px; max-width: 520px; }
.reading table.values td { text-align: center; }
/* A stemmed note reaches about seven eighths of an em above the baseline
   and a rest hangs below it, so the glyph gets a two-em line box with the
   baseline near its middle: with a one-em line box the stems used to run
   up through the row above. */
.reading .smufl { font-family: "Bravura"; font-size: 1.9rem; line-height: 2; padding: .1rem .6rem; vertical-align: middle; }
.reading .smufl.inline { font-size: 1.15rem; padding: 0; vertical-align: -0.1em; }
@media (max-width: 600px) {
  .reading .pair { grid-template-columns: 1fr; }
  .reading table.values td, .reading table.values th { padding: .3rem .4rem; }
  .reading .smufl { font-size: 1.6rem; padding: .1rem .3rem; }
}

/* The note drill on the Reading page. The find drill's neck is the site's
   fretboard with no dots and an invisible target on every place; a target
   only shows itself under the pointer or keyboard focus. */
.drill-setup { display: flex; gap: .6rem; flex-wrap: wrap; }
.drill-board .fb { min-width: 420px; max-width: 560px; margin: .2rem 0; }
.fb-hit { fill: transparent; cursor: pointer; }
.fb-hit { outline: none; }
.fb-hit:hover, .fb-hit:focus-visible { fill: var(--accent-soft); }
.drill-board.done .fb-hit { cursor: default; fill: transparent; }
.drill-stage { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 .4rem; }
.drill-stage .staff { height: 170px; }
.drill-count { font-family: "Source Serif 4", Georgia, serif; font-size: 1.3rem; color: var(--muted); }
.drill-side #drill-start { margin: .3rem 0; }
.drill-feedback { min-height: 1.5em; margin: .2rem 0 0; font-weight: 600; }
.drill-answers { display: flex; gap: .5rem; flex-wrap: wrap; }
.drill-answers button { min-width: 3rem; font-weight: 600; font-size: 1.1rem; }
.drill-summary { margin-top: .8rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.drill-summary.passed { color: var(--ok); }
.drill #drill-record { margin-bottom: 0; }
.reading .sheet-title { margin-top: 0; }

/* The phrase drill. alphaTab draws black notation on --paper like the
   player's score; the wrap scrolls sideways on a phone so four bars never
   widen the page. */
#phrase-score-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow-x: auto; margin: .8rem 0 .6rem; min-height: 140px; }
#phrase-score { min-width: 480px; }
/* Four bars on one row need the room, or eighths squeeze on a phone. */
#phrase-drill[data-bars="4"] #phrase-score { min-width: 760px; }
.phrase-controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.phrase-controls input[type=range] { width: 140px; }
.phrase-controls .tempo-label { margin-left: .4rem; }
.slot .reading-link { display: inline-block; margin-top: .25rem; }