/* Chord and scale explorer. Mobile-first: laid out for 360 px, touch targets >= 44 px.
   Colours come from the brand tokens in app.css. */
:root {
  --surface: color-mix(in srgb, var(--fg) 6%, transparent);
  --surface-strong: color-mix(in srgb, var(--fg) 12%, transparent);
}

/* Five staff lines running behind the header, in the logo's line colour. */
.topbar {
  --staff: color-mix(in srgb, var(--fg) 22%, transparent);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background-image: repeating-linear-gradient(to bottom, var(--staff) 0 2px, transparent 2px 8px);
  background-size: 100% 34px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}
.brand { width: auto; height: 32px; }
.lang select { min-height: 44px; }

/* Narrow phones: logo, version badge and three 44 px controls need 405 px at full spacing.
   Tighter spacing and a slightly smaller logo fit them in 360 px, French name included. */
@media (max-width: 419px) {
  .topbar { padding: 12px; gap: 6px; }
  .brandmark { gap: 4px; }
  .brand { height: 28px; }
  .version { padding: 1px 5px; font-size: 0.7rem; }
  .controls { gap: 4px; }
  .lang select { padding: 0 4px; }
}

.explorer {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Screens: one shown at a time (js/router.js), each with a heading row. */
.view { display: flex; flex-direction: column; gap: 16px; }
.view[hidden] { display: none; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.view-head h1 { margin: 0; min-width: 0; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.action {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.action[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.action[hidden] { display: none; }
.action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel h2, .panel-head h2 { margin: 0; font-size: 1rem; color: var(--muted); font-weight: 600; }
.panel > h2 { margin-bottom: 8px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* Buttons: pickers and segmented control */
.pick, .seg, .hint {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.pick { padding: 0 6px; font-weight: 600; }
.pick[aria-pressed="true"], .seg[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.pick:focus-visible, .seg:focus-visible, .hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pick-row { display: grid; gap: 6px; }
.letters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.accidentals { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; font-size: 1.15rem; }
.qualities { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

/* Chord result */
.result {
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.chord-symbol { margin: 0; font-size: 2rem; line-height: 1.1; color: var(--accent); }
.chord-name { margin: 2px 0 12px; color: var(--muted); }

/* Notes with their degree underneath */
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.note {
  flex: 1 0 36px;
  max-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  border: 1px solid var(--rule);
}
.note-name { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.note-degree { font-size: 0.8rem; color: var(--muted); }
.note.is-chord-tone { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.note.is-chord-tone .note-degree { color: inherit; opacity: 0.8; }

.chord-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hint { padding: 0 12px; color: var(--accent); background: transparent; border-color: var(--accent); }

/* Floating drone panel: a pill above the bottom bar that expands upwards (Play only). */
.dock {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  max-width: 400px;
  margin-left: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drone-panel, .metronome-panel {
  border: 1px solid var(--rule);
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 88%, var(--fg));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.drone-panel[hidden], .metronome-panel[hidden] { display: none; }
.drone-panel.is-playing, .metronome-panel.is-playing { border-color: var(--accent); }
.drone-bar { display: flex; align-items: center; gap: 4px; padding: 4px; }

.drone-play {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  touch-action: manipulation;
}
.drone-play:focus-visible, .drone-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drone-play[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

.drone-head {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.drone-title { font-weight: 600; }
.drone-chord { flex: 1; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drone-chevron { color: var(--muted); }

.drone-body { padding: 4px 16px 16px; }
.drone-body[hidden] { display: none; }
.drone-label { margin: 12px 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.drone-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.drone-choices .seg { padding: 0 12px; }
.drone-choices.octaves .seg, .drone-choices.instruments .seg { flex: 1; }
.drone-choices.inversions .seg { flex: 1 0 64px; }
.drone-choices.voicings { align-items: flex-end; }
.drone-choices.voicings .seg { padding: 4px 6px; display: flex; align-items: center; justify-content: center; }

/* Staff icons: lines and heads follow the button's text colour; the number is cut out of the head. */
.staff { display: block; }
.staff-line { stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.staff-head { fill: currentColor; }
.staff-num { fill: var(--bg); font-size: 7.5px; font-weight: 700; }
.seg[aria-pressed="true"] .staff-num { fill: var(--accent); }

/* Metronome: a second pill above the drone. */
.metronome-panel { display: flex; align-items: center; gap: 4px; padding: 4px; }
.metronome-panel .step { flex: none; padding: 0; border-radius: 22px; font-weight: 600; }
.metronome-tempo { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 56px; }
.metronome-bpm { font-size: 1.25rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.metronome-unit { font-size: 0.7rem; color: var(--muted); }
.seg:disabled { opacity: 0.4; cursor: default; }

/* Keep the end of Play clear of the floating panels. */
#play { padding-bottom: 140px; }

/* Scales */
.legend { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.scales { display: flex; flex-direction: column; gap: 12px; }
.scale { padding: 12px; border-radius: 12px; border: 1px solid var(--rule); }
.scale h3 { margin: 0 0 8px; font-size: 1rem; }
.scale .notes .note { flex-basis: 34px; }
.scale-note { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; }

/* Chord symbol input and parsed chips */
:root { --error: #FF7A7A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --error: #C0272D; } }
:root[data-theme="light"] { --error: #C0272D; }

.chords-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  resize: none;
  max-height: 14rem; /* about 8 lines; the script sizes it to the text below that */
  overflow-y: auto;
  line-height: 1.5;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1.1rem;
}
.chords-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
}
button.chip { cursor: pointer; touch-action: manipulation; }
button.chip:hover { border-color: var(--accent); }
button.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-symbol { font-weight: 700; font-size: 1.1rem; }
.chip-name { color: var(--muted); font-size: 0.8rem; }
.chip.is-error { border-style: dashed; border-color: var(--error); flex-basis: 100%; }
.chip.is-error .chip-name { color: var(--error); }
.chip mark, .grid-errors mark { background: transparent; color: var(--error); text-decoration: underline wavy; text-underline-offset: 3px; }

/* Grid analysis: key picker, bars of chords coloured by harmonic function, ii-V list.
   Function colours: tonic blue, subdominant green, dominant brass. */
:root { --fn-tonic: #6FB8FF; --fn-subdominant: #7FD18B; --fn-dominant: var(--brass); --fn-other: var(--muted); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --fn-tonic: #1F64B0; --fn-subdominant: #2C7A39; --fn-dominant: var(--brass-dark); }
}
:root[data-theme="light"] { --fn-tonic: #1F64B0; --fn-subdominant: #2C7A39; --fn-dominant: var(--brass-dark); }

/* Heading and key picker share a row; the picker wraps under the heading when narrow. */
.grid-key-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.key-badges { display: contents; }
/* Key badges and the "Other key" select share the pill look; the pressed badge is the key in use. */
.key-badge, .key-other select {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.key-badge[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.key-other select { max-width: 11rem; padding: 0 10px; color: var(--muted); background: transparent; border-style: dashed; }
.key-badge:focus-visible, .key-other select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Bars read like a lead sheet: bar lines between cells, flat chords with a function stripe.
   The row gap leaves room for the local-key label, which floats over the top of its chord
   so a key change adds no height. */
.bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 12px;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
}
@media (min-width: 560px) { .bars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bar {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 0 3px;
  border-left: 2px solid var(--rule);
}
.bar:nth-child(2n) { border-right: 2px solid var(--rule); }
@media (min-width: 560px) {
  .bar:nth-child(2n) { border-right: 0; }
  .bar:nth-child(4n), .bar:last-child { border-right: 2px solid var(--rule); }
}
.bar:last-child { border-right: 2px solid var(--rule); }
.bar .chip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 4px 2px 6px;
  border: 0;
  border-left: 3px solid var(--fn-other);
  border-radius: 0 6px 6px 0;
  background: transparent;
}
.bar button.chip:hover { background: var(--surface); }
.bar .chip.is-error { border: 1px dashed var(--error); border-radius: 6px; justify-content: center; }
.chip.fn-tonic { border-left-color: var(--fn-tonic); }
.chip.fn-subdominant { border-left-color: var(--fn-subdominant); }
.chip.fn-dominant { border-left-color: var(--fn-dominant); }
.bar .chip-symbol { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.chip-roman { font-size: 0.8rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.fn-tonic .chip-roman { color: var(--fn-tonic); }
.fn-subdominant .chip-roman { color: var(--fn-subdominant); }
.fn-dominant .chip-roman { color: var(--fn-dominant); }
.fn-other .chip-roman { color: var(--fn-other); }
.chip-key {
  position: absolute;
  top: -0.75rem;
  left: 2px;
  z-index: 1;
  max-width: calc(100% - 2px);
  padding: 0 3px;
  overflow: hidden;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.grid-errors { margin: 8px 0 0; padding-left: 20px; color: var(--error); font-size: 0.9rem; }
.grid-errors strong { color: var(--fg); }
.grid-subtitle { margin: 12px 0 4px; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.patterns { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.patterns li { margin: 2px 0; }
.fn-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
.fn-legend span { padding-left: 8px; border-left: 4px solid; }
.fn-legend .fn-tonic { border-color: var(--fn-tonic); }
.fn-legend .fn-subdominant { border-color: var(--fn-subdominant); }
.fn-legend .fn-dominant { border-color: var(--fn-dominant); }
.fn-legend .fn-other { border-color: var(--fn-other); }

/* Logo and version badge, side by side. The badge is opaque so the staff lines pass behind it. */
.brandmark { display: flex; align-items: center; gap: 8px; }
.version {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Grid tools: bar line, repeat, new line, backspace, then the chords of the key. */
.grid-tools { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool-label { flex: 1 0 100%; color: var(--muted); font-size: 0.8rem; }
.tool {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.tool:hover { border-color: var(--accent); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-chord { font-weight: 500; }

/* Selected chord and its sheet: a panel over the bottom of the screen, above the bottom bar,
   its top edge in the colour of the chord's function. */
.bar button.chip[aria-pressed="true"] { background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.sheet {
  position: fixed;
  right: 0;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  left: 0;
  z-index: 15;
  max-width: 720px;
  max-height: 55dvh;
  margin: 0 auto;
  padding: 4px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--fn-other);
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--bg) 92%, var(--fg));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.sheet[hidden] { display: none; }
.sheet.fn-tonic { border-top-color: var(--fn-tonic); }
.sheet.fn-subdominant { border-top-color: var(--fn-subdominant); }
.sheet.fn-dominant { border-top-color: var(--fn-dominant); }
/* The chart can scroll above the open sheet. */
#study.has-sheet { padding-bottom: 55dvh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-close { flex: none; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scales.compact { gap: 8px; }
.scales.compact .scale { padding: 8px 10px; }
.scales.compact .scale h3 { margin-bottom: 4px; font-size: 0.95rem; }
.scales.compact .scale-reason { margin-bottom: 6px; }
.scales.compact .note { padding: 3px 2px; }
.scales.compact .note-name { font-size: 1rem; }
.detail-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 4px; }
.detail-symbol { font-size: 1.4rem; font-weight: 700; }
.detail-roman { font-size: 1rem; font-weight: 600; }
.sheet.fn-tonic .detail-roman { color: var(--fn-tonic); }
.sheet.fn-subdominant .detail-roman { color: var(--fn-subdominant); }
.sheet.fn-dominant .detail-roman { color: var(--fn-dominant); }
.detail-lines { margin: 0 0 8px; padding-left: 18px; font-size: 0.9rem; }

/* Scales ranked for a grid chord */
.scales-context { margin: 0 0 8px; font-weight: 600; }
.scale.is-best { border-color: var(--accent); }
.scale h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.badge {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}
.scale-reason { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }

/* Folding panels: my grids, settings, reference */
.fold { border-top: 1px solid var(--rule); padding-top: 4px; }
.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; color: var(--muted); width: 1em; }
.fold[open] > summary::before { content: "▾"; }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold-count { padding: 0 8px; border-radius: 999px; background: var(--surface-strong); color: var(--muted); font-size: 0.8rem; }
.fold-body { padding-bottom: 8px; }
.fold-label { margin: 12px 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choices .seg { padding: 0 14px; }

.library-save { display: flex; flex-wrap: wrap; gap: 6px; }
.text-input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}
.text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.library-save .seg, .library-files .seg { padding: 0 14px; }
.library-dirty { margin: 8px 0 0; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
#library-status { min-height: 1.4em; margin: 8px 0; }
.songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.song { display: flex; gap: 6px; }
.song-open {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.song-open[aria-current="true"] { border-color: var(--accent); }
.song-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.song-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.library-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.file-pick { display: inline-flex; align-items: center; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reference */
.reference h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.reference h3:first-child { margin-top: 4px; }
.reference ul { margin: 0; padding-left: 20px; }
.reference li { margin: 4px 0; }
.reference li[class^="fn-"] { list-style: none; margin-left: -20px; padding-left: 8px; border-left: 4px solid; }
.reference .fn-tonic { border-color: var(--fn-tonic); }
.reference .fn-subdominant { border-color: var(--fn-subdominant); }
.reference .fn-dominant { border-color: var(--fn-dominant); }
.reference .fn-other { border-color: var(--fn-other); }
.reference p { margin: 0 0 8px; }
.table-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ref-table th, .ref-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ref-table th { color: var(--muted); font-weight: 600; }
.ref-table td:first-child { font-weight: 700; white-space: nowrap; }
.ref-table td:last-child { color: var(--muted); }

/* Study: edit mode (text box, tool row, save controls) above the chart. */
.study-edit { display: flex; flex-direction: column; gap: 8px; }
.study-edit[hidden] { display: none; }
.study-edit .library-dirty, .study-edit .library-status { margin: 0; }
.study-edit .library-status:empty { display: none; }

/* The chart: sections in form order, a rehearsal mark and key above the bars of each. The
   row gap leaves room above a bar for its ending bracket and, under it, the local-key label. */
.chart { display: flex; flex-direction: column; gap: 14px; }
.chart .bars { row-gap: 30px; padding-top: 30px; }
.section-head + .bars { padding-top: 26px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mark {
  min-width: 32px;
  padding: 1px 8px;
  border: 2px solid var(--fg);
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.key-mark { color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.key-offer {
  min-height: 44px;
  padding: 0 14px;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.key-offer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.section.is-replay { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.replay-text { font-size: 0.9rem; }

/* Repeat signs: a thick bar line with two dots inside the repeated passage. */
.chart .bar { position: relative; }
.chart .bar.is-repeat-start { border-left: 4px solid var(--fg); padding-left: 11px; }
.chart .bar.is-repeat-end { border-right: 4px solid var(--fg); padding-right: 11px; }
.chart .bar.is-double { border-right: 4px double var(--fg); }
.chart .bar.is-repeat-start::before, .chart .bar.is-repeat-end::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 10px 0 var(--fg);
}
.chart .bar.is-repeat-start::before { left: 3px; }
.chart .bar.is-repeat-end::after { right: 3px; }
.repeat-count {
  position: absolute;
  top: -1.2rem;
  right: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
/* Endings: a bracket over their bars, above the local-key labels, numbered on the first one. */
.ending {
  position: absolute;
  top: -1.75rem;
  right: 0;
  left: -2px;
  height: 0.9rem;
  padding-left: 4px;
  border-top: 1px solid var(--fg);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 0.9rem;
}
.ending.is-first { border-left: 1px solid var(--fg); }
/* A passage analysed differently on another pass: a dot after the numeral. */
.chip.is-differs .chip-roman::after { content: " •"; color: var(--muted); }
/* A key the user declared on a bar, in the place of the local-key label. */
.chip-key.is-declared { color: var(--accent); font-weight: 700; }

/* Bottom bar: the three screens. */
:root { --tabbar-height: 60px; }
body { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
.tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 94%, var(--fg));
}
.tab {
  flex: 1;
  min-height: var(--tabbar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
}
.tab[aria-current="page"] { color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Header menu: settings, reference, Instagram, in a panel from the right. */
.menu-open { display: inline-flex; align-items: center; justify-content: center; }
.menu {
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px 24px;
  border: 0;
  border-left: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
}
.menu::backdrop { background: rgba(0, 0, 0, 0.5); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-head h2 { margin: 0; font-size: 1.2rem; }
.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--fg);
}
.menu-link:hover { color: var(--accent); }
.menu-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pickers { display: flex; flex-direction: column; gap: 12px; }