/* ==========================================================
   Theme: pared-back green blueprint
   Thin outlines, grid paper, monospace technical lettering.
   ========================================================== */
:root {
  --bg: #0c2a20;          /* blueprint paper */
  --bg-raised: #0f3226;   /* slightly lifted surfaces */
  --line: #7fdca6;        /* primary ink */
  --line-soft: rgba(var(--ink-rgb), 0.47);   /* ≥ 3:1 so control outlines are visible */
  --line-faint: rgba(var(--ink-rgb), 0.12);
  --focus-ring: var(--line);
  --text: #d4f5e2;
  --muted: #6fa888;
  --fill: rgba(var(--ink-rgb), 0.18);
  --ink-rgb: 127, 220, 166;             /* --line as r,g,b for tints */
  --amber: #e0c46c;  --amber-rgb: 224, 196, 108;   /* the warm accent */
  --orange: #f0a35e; --orange-rgb: 240, 163, 94;
  --lime: #b9d98a;   --lime-rgb: 185, 217, 138;
  --shadow: rgba(0, 0, 0, 0.45);
  --bg-glass: rgba(12, 42, 32, 0.85);   /* panels over the grid */
  --bg-hover: #12392b;
  --grid-minor: rgba(var(--ink-rgb), 0.05);
  /* Paper pattern behind everything (blueprint: major + minor grid) */
  --bg-pattern:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  --bg-pattern-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  --bg-pattern-pos: 0 0;
  --bg-attach: scroll;
  --header-h: 3.6rem;   /* real value set from the header's height by app.js */
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

/* Dark mode: same green ink on near-black paper, with a quieter grid.
   The standard theme above stays the default. */
:root[data-mode="dark"] {
  --bg: #070b09;
  --bg-raised: #0c1310;
  --line-soft: rgba(var(--ink-rgb), 0.44);
  --line-faint: rgba(var(--ink-rgb), 0.07);
  --text: #c6e8d4;
  --muted: #5e9479;
  --bg-glass: rgba(7, 11, 9, 0.9);
  --bg-hover: #101a15;
  --grid-minor: rgba(var(--ink-rgb), 0.025);
}

/* Light mode: the blueprint inverted, deep green ink on pale drafting
   paper. Accents are darkened so they stay readable on white. */
:root[data-mode="light"] {
  --bg: #eef5f0;
  --bg-raised: #e6f0e9;
  --line: #1f6b47;
  --ink-rgb: 31, 107, 71;
  --line-soft: rgba(var(--ink-rgb), 0.7);
  --line-faint: rgba(var(--ink-rgb), 0.11);
  --text: #143d2b;
  --muted: #4c715e;   /* all text colours ≥ 4.5:1 on --bg and --bg-raised */
  --fill: rgba(var(--ink-rgb), 0.16);
  --amber: #87640b;  --amber-rgb: 135, 100, 11;
  --orange: #a94f18; --orange-rgb: 169, 79, 24;
  --lime: #4d741e;   --lime-rgb: 77, 116, 30;
  --shadow: rgba(20, 61, 43, 0.18);
  --bg-glass: rgba(244, 249, 246, 0.9);
  --bg-hover: #dcebe1;
  --grid-minor: rgba(var(--ink-rgb), 0.045);
  color-scheme: light;
}

/* High contrast: black paper, bright ink, solid outlines, no grid. */
:root[data-mode="contrast"] {
  --bg: #000;
  --bg-raised: #0b0b0b;
  --line: #8dffbf;
  --ink-rgb: 141, 255, 191;
  --line-soft: rgba(var(--ink-rgb), 0.85);
  --line-faint: rgba(var(--ink-rgb), 0.4);
  --text: #fff;
  --muted: #d6f5e3;
  --fill: rgba(var(--ink-rgb), 0.3);
  --amber: #ffd84d;  --amber-rgb: 255, 216, 77;
  --orange: #ffa95e; --orange-rgb: 255, 169, 94;
  --lime: #d2ff8f;   --lime-rgb: 210, 255, 143;
  --shadow: rgba(0, 0, 0, 0.8);
  --bg-glass: rgba(0, 0, 0, 0.96);
  --bg-hover: #10261a;
  --grid-minor: transparent;
  --bg-pattern: none;
  --focus-ring: #ffd84d;
  color-scheme: dark;
}

/* The system's "Increase contrast" setting: stronger outlines and muted text, no grid */
@media (prefers-contrast: more) {
  :root:not([data-mode="contrast"]) {
    --line-soft: rgba(var(--ink-rgb), 0.8);
    --line-faint: rgba(var(--ink-rgb), 0.3);
    --muted: var(--text);
    --bg-pattern: none;
  }
}

/* Text size (header switch): scales everything sized in rem */
:root[data-text="s"] { font-size: 90%; }
:root[data-text="l"] { font-size: 118.75%; }
:root[data-text="xl"] { font-size: 137.5%; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-pattern);
  background-size: var(--bg-pattern-size);
  background-position: var(--bg-pattern-pos);
  background-attachment: var(--bg-attach);
}

::selection { background: var(--line); color: var(--bg); }

/* ---- App shell ---- */
.app-header {
  position: sticky;   /* stays visible while scrolling */
  top: 0;
  z-index: 20;        /* above page content, below pop-ups and tooltips */
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.app-header h1 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--line);
}

.app-header { flex-wrap: wrap; row-gap: 0.6rem; }
.tool-nav { display: flex; flex: 1; flex-wrap: wrap; column-gap: 1.4rem; row-gap: 0.45rem; }
/* Narrower windows: the tabs get their own full-width row under the title and theme switch */
@media (max-width: 1100px) {
  .tool-nav { order: 3; flex-basis: 100%; }
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.clear-workbench, .shortcut-help {
  font: inherit;
  font-size: 0.77rem;       /* the smallest text size used anywhere */
  letter-spacing: 0.12em;
  line-height: 1.2;
  min-height: 24px;         /* still meets the minimum target size */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.clear-workbench:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
.shortcut-help:hover { color: var(--line); border-color: var(--line); }
.clear-workbench:disabled { opacity: 0.35; cursor: default; }
.tool-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.857rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.tool-nav a:hover { color: var(--text); }
.tool-nav a.active { color: var(--line); border-bottom-color: var(--line); }

.tool-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* ---- Chord identifier ---- */
.chord-id .result {
  text-align: center;
  min-height: 11rem;
  margin-bottom: 2rem;
}
.chord-symbol {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--line);
}
.chord-symbol.muted { color: var(--muted); }
.chord-desc {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chord-notes {
  margin-top: 0.6rem;
  font-size: 0.879rem;
  color: var(--muted);
  white-space: pre;
}
.alternatives { margin-top: 1rem; }
.alt-label {
  font-size: 0.836rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0.15rem 0.55rem;
  border: 1px dashed var(--line-soft);
  font-size: 0.879rem;
  color: var(--text);
  cursor: help;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.836rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.controls label { display: flex; align-items: center; gap: 0.5rem; }
.controls button,
.controls select {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.controls select option { background: var(--bg); color: var(--text); }
.controls button:hover,
.controls select:hover { border-color: var(--line); background: var(--fill); }
.controls input[type="checkbox"] { accent-color: var(--line); }

/* ---- Keyboard (drawn as an outline schematic) ---- */
.keyboard {
  position: relative;
  height: 230px;
  user-select: none;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  overflow: hidden;
}
.key {
  position: absolute;
  top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background-color 0.08s;
}
.key.white {
  height: 100%;
  background: transparent;
  border-right: 1px solid var(--line-soft);
  z-index: 1;
}
.key.white:last-child { border-right: none; }
.key.white:hover { background: rgba(var(--ink-rgb), 0.07); }

.key.black {
  height: 62%;
  z-index: 2;
  border: 1px solid var(--line);
  border-top: none;
  /* Hatched fill, like a sectioned part on a drawing */
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    45deg, var(--line-faint) 0 1px, transparent 1px 6px
  );
}
.key.black:hover { background-color: var(--bg-hover); }

.key.white.selected { background: var(--fill); }
.key.black.selected { background: var(--line); }

.key .label {
  margin-bottom: 0.7rem;
  font-size: 0.814rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  pointer-events: none;
}
.key.selected .label { color: var(--line); font-weight: 600; }
.key.labelled .label { font-size: 0.72rem; opacity: 0.85; }   /* Settings → label every key */
.key.black.labelled .label { margin-bottom: 0.4rem; font-size: 0.6rem; }
.key.black.selected .label { color: var(--bg); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Buttons: shared states ---- */
.chord-id button:disabled { opacity: 0.35; cursor: default; }
.chord-id button:disabled:hover { background: transparent; border-color: var(--line-soft); }
.controls button.primary { border-color: var(--line); }

/* ---- Saved chords + keys panels ---- */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 760px) { .panels { grid-template-columns: 1fr; } }

.panel {
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
  min-height: 12rem;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px dashed var(--line-soft);
}
.panel-head h2 {
  margin: 0;
  font-size: 0.857rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--line);
}
.panel-head .count { color: var(--muted); letter-spacing: 0.05em; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.panel-actions button { white-space: nowrap; }   /* a label never breaks mid-word; the row wraps instead */
.panel-actions button {
  font: inherit;
  font-size: 0.814rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}
.panel-actions button:hover { border-color: var(--line); background: var(--fill); }

.panel .empty {
  margin: 0;
  padding: 1rem 0.9rem;
  font-size: 0.857rem;
  color: var(--muted);
  list-style: none;
}

/* Saved list */
.saved-list {
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
}
.saved-item {
  display: flex;
  align-items: stretch;
}
/* Saved row: handle · number · chord · play · remove */
.saved-item { position: relative; transition: background-color 0.15s; }
.saved-item.dragging {
  z-index: 5;
  background: var(--bg);
  outline: 1px solid var(--line);
  opacity: 0.92;
}
.saved-item.drop-before { box-shadow: inset 0 2px 0 var(--line); }
.saved-item.drop-after { box-shadow: inset 0 -2px 0 var(--line); }
.saved-item.playing .saved-load { border-color: var(--line); background: var(--line); }
.saved-item.playing .saved-symbol,
.saved-item.playing .saved-notes { color: var(--bg); }

.saved-handle {
  display: flex;
  align-items: center;
  padding: 0 0.3rem 0 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.saved-handle:hover, .saved-handle:focus-visible { color: var(--line); }
.saved-item.dragging .saved-handle { cursor: grabbing; }
.saved-num {
  align-self: center;
  width: 1.8rem;
  font-size: 0.814rem;
  color: var(--muted);
}
.saved-play {
  width: 2rem;
  font: inherit;
  font-size: 0.836rem;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.saved-play:hover { color: var(--line); }
.panel-actions button.playing { color: var(--bg); background: var(--line); border-color: var(--line); }
.saved-load {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.4rem 0.5rem;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.saved-load:hover { border-color: var(--line-soft); background: rgba(var(--ink-rgb), 0.06); }
.saved-item.current .saved-load { border-color: var(--line); background: var(--fill); }
.saved-symbol { font-size: 1rem; color: var(--line); min-width: 5.5rem; }
.saved-notes { font-size: 0.836rem; color: var(--muted); }
.saved-remove {
  width: 2.2rem;
  margin-right: 0.4rem;
  font: inherit;
  font-size: 1rem;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.saved-remove:hover { color: var(--line); }

/* Keys result */
.keys-result { padding: 0.2rem 0 0.6rem; }
.keys-result .summary {
  margin: 0;
  padding: 0.7rem 0.9rem 0.3rem;
  font-size: 0.857rem;
  color: var(--text);
}
.key-group { padding: 0.3rem 0.9rem; }
.key-group h3 {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.814rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-faint);
  padding-bottom: 0.25rem;
}
.key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.2rem 0;
  font-size: 0.879rem;
}
.key-name { color: var(--line); min-width: 10.5rem; }
.key-numerals { color: var(--text); }
.key-outside { color: var(--muted); font-size: 0.836rem; }

/* Segmented toggle (e.g. Keys / Modes) */
.segmented { display: flex; }
.segmented button {
  font: inherit;
  font-size: 0.836rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.segmented button + button { border-left: none; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { color: var(--bg); background: var(--line); border-color: var(--line); }

/* Analysis shown when no single key/mode fits */
.key-group.analysis { margin-top: 0.6rem; }
.keys-result .note {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.844rem;
  line-height: 1.5;
  color: var(--muted);
}
.keys-result .note.transition { color: var(--text); padding-left: 0.8rem; }
.keys-result .note.sub {
  margin-top: 0.6rem;
  font-size: 0.814rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reading { padding: 0.3rem 0; }
.reading .key-name { font-size: 0.85rem; }
.reading-list {
  margin: 0.2rem 0 0.2rem;
  padding-left: 1.1rem;
  font-size: 0.844rem;
  line-height: 1.55;
  color: var(--text);
}
.reading-list li::marker { content: '– '; color: var(--muted); }

/* Chord references in the Keys box + their hover drop-down */
.chord-ref {
  cursor: pointer;
  border-bottom: 1px dotted var(--line-soft);
  padding: 0 1px;
}
.chord-ref:hover,
.chord-ref.active { color: var(--line); background: var(--fill); border-bottom-color: var(--line); }
.chord-ref:focus-visible { outline-offset: 1px; }

.chord-pop {
  position: fixed;
  z-index: 100;
  min-width: 11rem;
  max-width: 18rem;
  padding: 0.6rem 0.75rem 0.7rem;
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px var(--shadow);
}
.chord-pop[hidden] { display: none; }
.pop-symbol { font-size: 1.15rem; color: var(--line); }
.pop-desc {
  margin-top: 0.15rem;
  font-size: 0.801rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.pop-notes { margin: 0.35rem 0 0.6rem; font-size: 0.836rem; color: var(--muted); }
.pop-actions { display: flex; gap: 0.4rem; }
.pop-play {
  font: inherit;
  font-size: 0.814rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.pop-play:hover { border-color: var(--line); background: var(--fill); }
.pop-save {
  flex: 1;
  font: inherit;
  font-size: 0.814rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.pop-save:hover { filter: brightness(1.1); }
.pop-save:disabled { opacity: 0.7; cursor: default; }

/* MIDI */
.controls .midi-btn.on { color: var(--bg); background: var(--line); border-color: var(--line); opacity: 1; }
.controls .midi-btn:disabled { cursor: default; }
.controls .midi-btn:disabled:hover { background: transparent; }
.controls .midi-btn.on:disabled:hover { background: var(--line); }
.midi-status {
  min-height: 1.2em;
  margin: 0.6rem 0 0;
  font-size: 0.827rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}
.midi-status.notice { color: var(--text); }

/* `hidden` must win over display rules set elsewhere */
[hidden] { display: none !important; }

/* ---- Guitar fretboard ---- */
.fretboard-wrap {
  overflow-x: auto;
  padding: 0.7rem 0.7rem 0.3rem;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.fretboard {
  display: grid;
  grid-template-columns: 3.6rem 2.6rem repeat(24, minmax(1.9rem, 1fr));
  min-width: 820px;
  user-select: none;
}
.fb-label { display: flex; align-items: center; padding-right: 0.35rem; }
/* Per-string tuning menu, styled as a quiet label until hovered */
.fb-tune {
  width: 100%;
  font: inherit;
  font-size: 0.827rem;
  color: var(--line);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.1rem 0.1rem;
  cursor: pointer;
}
.fb-tune:hover, .fb-tune:focus { border-color: var(--line-soft); }
.fb-tune option { background: var(--bg); color: var(--text); }
.fb-label.muted .fb-tune { color: var(--muted); }
.fb-cell {
  position: relative;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line-soft); /* fret wire */
  border-radius: 0;
  cursor: pointer;
}
.fb-cell.inlay-col { background: rgba(var(--ink-rgb), 0.05); }
/* the string itself */
.fb-cell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--string-weight, 1px);
  transform: translateY(-50%);
  background: var(--line);
  opacity: 0.5;
}
.fb-open { border-right: 3px solid var(--line); } /* the nut */
/* Left-handed (Settings): the fretboard mirrored, nut and tuning menus on the right */
:root[data-lefty] .fretboard { direction: rtl; }
:root[data-lefty] .fretboard > * { direction: ltr; }
:root[data-lefty] .fb-open { border-right: none; border-left: 3px solid var(--line); }
:root[data-lefty] .fb-label { padding-right: 0; padding-left: 0.35rem; }
.fb-open::before { opacity: 0.25; }

.fb-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  font-size: 0.784rem;
  color: var(--text);
}
.fb-cell:hover:not(.selected) .fb-dot { border: 1px dashed var(--line-soft); background: var(--bg-raised); }
.fb-cell.selected .fb-dot { background: var(--line); color: var(--bg); font-weight: 600; }
/* open string: hollow ring; muted: × */
.fb-open.selected .fb-dot { background: var(--bg-raised); border: 1.5px solid var(--line); color: var(--line); }
.fb-open.is-muted .fb-dot { font-size: 0.85rem; color: var(--muted); }

.fb-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.3rem;
  font-size: 0.784rem;
  color: var(--muted);
}
.fb-num.inlay { color: var(--line); }
.fb-num.inlay::after { content: '•'; line-height: 1; }
.fb-num.double::after { content: '••'; }

.saved-shape.other-tuning { color: var(--muted); text-decoration: line-through dotted; }
.saved-shape {
  margin-left: auto;
  font-size: 0.827rem;
  letter-spacing: 0.08em;
  color: var(--line);
  white-space: nowrap;
}
.pop-shape { margin: -0.3rem 0 0.6rem; font-size: 0.836rem; color: var(--line); }

/* ==========================================================
   Key Explorer
   ========================================================== */
.key-explorer .controls { margin-bottom: 2rem; }
.key-explorer .controls select,
.key-explorer .controls optgroup { background: var(--bg); color: var(--text); }

.ke-heading { text-align: center; margin-bottom: 1.8rem; }
.ke-title {
  font-size: 2.4rem;
  color: var(--line);
  text-transform: capitalize;
}
.ke-scale-notes {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.ke-scale-notes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.6rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--line-soft);
}
.ke-deg-num { font-size: 0.793rem; color: var(--muted); letter-spacing: 0.1em; }
.ke-deg-name { font-size: 0.95rem; color: var(--text); }

.ke-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--bg-glass); }
.ke-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.ke-table th, .ke-table td { border: 1px solid var(--line-faint); padding: 0; }
.ke-table thead th {
  padding: 0.55rem 0.6rem;
  font-size: 0.827rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--line);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.ke-table thead th:not(.ke-degree-head) { display: table-cell; }
.ke-table thead th span { margin-right: 0.6rem; }
.ke-table .ke-degree-head { width: 5.4rem; color: var(--muted); letter-spacing: 0.1em; }
.ke-col-play {
  font: inherit;
  font-size: 0.814rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
}
.ke-col-play:hover { color: var(--line); border-color: var(--line); }
.ke-col-play.playing { color: var(--bg); background: var(--line); border-color: var(--line); }

.ke-degree {
  text-align: center;
  vertical-align: middle;
}
.ke-degree .ke-deg-num, .ke-degree .ke-deg-name { display: block; }

.ke-cell {
  position: relative;
  padding: 0.55rem 0.6rem 0.6rem;
  min-height: 4.6rem;
  cursor: pointer;
  transition: background-color 0.1s;
}
.ke-cell:hover { background: rgba(var(--ink-rgb), 0.07); }
.ke-cell.playing { background: var(--line); }
.ke-cell.playing * { color: var(--bg) !important; }
.ke-numeral { font-size: 0.827rem; color: var(--muted); letter-spacing: 0.04em; }
.ke-symbol { margin-top: 0.1rem; font-size: 0.98rem; color: var(--line); white-space: nowrap; }
.ke-symbol wbr { white-space: normal; }
.ke-cell.guitar-layout .ke-symbol { font-size: 0.88rem; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.ke-notes { margin-top: 0.25rem; font-size: 0.814rem; color: var(--text); opacity: 0.8; }

.ke-warn, .ke-warn-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.793rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--amber); /* muted amber, the one warm accent */
  border-radius: 50%;
}
.ke-warn { position: absolute; top: 0.45rem; right: 2rem; cursor: pointer; z-index: 1; }
.ke-warn:hover { outline: 1px solid var(--amber); outline-offset: 2px; }
.ke-warn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Avoid-note details drop-down */
.ke-tip {
  position: fixed;
  z-index: 100;
  max-width: 19rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--amber);
  box-shadow: 0 6px 18px var(--shadow);
  pointer-events: none;
}
.ke-tip[hidden] { display: none; }
.ke-tip-title {
  margin-bottom: 0.35rem;
  font-size: 0.814rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.ke-tip-chord { text-transform: none; letter-spacing: 0.02em; font-size: 0.87rem; }
.ke-tip ul { margin: 0; padding-left: 1rem; font-size: 0.844rem; line-height: 1.5; color: var(--text); }

.ke-add {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
}
.ke-cell:hover .ke-add, .ke-cell:focus-within .ke-add, .ke-add:focus-visible { opacity: 1; }
.ke-add:hover { color: var(--bg); background: var(--line); border-color: var(--line); }
.ke-add.added { opacity: 1; color: var(--bg); background: var(--line); border-color: var(--line); }
/* "✓ Saved to Workbench" confirmation on save buttons */
.modplan button.saved,
.mood button.saved { color: var(--bg); background: var(--line); border-color: var(--line); }
.ke-cell.just-added { animation: ke-added-flash 1.2s ease-out; }
@keyframes ke-added-flash {
  0%   { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
  100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
}

/* Confirmation toast (MT.toast), pinned to the bottom of the window */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 50;
  transform: translate(-50%, 0.6rem);
  padding: 0.55rem 1rem;
  font-family: var(--font);
  font-size: 0.844rem;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.app-toast.has-action { display: flex; align-items: center; gap: 0.9rem; }
/* Undo (or another action) offered in a message */
.app-toast-action {
  font: inherit; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 2rem; padding: 0.3rem 0.8rem;
  color: var(--bg); background: var(--line); border: 1px solid var(--line); cursor: pointer;
}
.app-toast-action:hover { background: var(--text); border-color: var(--text); }
/* (Reduced motion is handled app-wide at the end of this file) */

.ke-help {
  margin: 1rem 0 0;
  font-size: 0.827rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
}
.ke-help strong { color: var(--line); font-weight: 500; }
.ke-status { min-height: 1.2em; margin: 0.3rem 0 0; font-size: 0.844rem; color: var(--text); text-align: center; }

/* ---- Chord diagrams (shared) ---- */
.mini-piano { display: block; width: 100%; height: auto; }
.mini-piano .w { fill: transparent; stroke: var(--line-soft); stroke-width: 0.6; }
.mini-piano .b { fill: var(--bg); stroke: var(--line-soft); stroke-width: 0.6; }
.mini-piano .on { fill: var(--line); stroke: var(--line); }
.mini-piano .on.root { fill: var(--text); }
.mini-piano .root-mark { fill: var(--bg); stroke: none; }

.chord-box { display: block; width: 4.6rem; height: auto; overflow: visible; }
.chord-box .fret, .chord-box .string { stroke: var(--line-soft); stroke-width: 0.7; }
.chord-box .nut { stroke: var(--line); stroke-width: 2.4; }
.chord-box .dot { fill: var(--line); }
.chord-box .dot.root { fill: var(--text); stroke: var(--line); stroke-width: 0.8; }
.chord-box .open { fill: none; stroke: var(--line); stroke-width: 0.9; }
.chord-box .open.root { stroke: var(--text); stroke-width: 1.3; }
.chord-box .mute { fill: var(--muted); font-size: 7px; font-family: var(--font); }
.chord-box .fret-label { fill: var(--muted); font-size: 6px; font-family: var(--font); }

/* Key Explorer cell diagrams */
.ke-diagram { margin-top: 0.5rem; }
/* Guitar: chord box to the right of the text (clear of the + / ! buttons above) */
.ke-cell.guitar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.4rem;
  align-items: end;
}
.ke-cell.guitar-layout .ke-text { align-self: start; }
.ke-diagram.guitar { margin-top: 1.5rem; }
.ke-diagram.guitar .chord-box { width: calc(var(--strings, 6) * 0.68rem); }

/* Key Explorer guitar tuning row */
.ke-guitar-controls { margin-top: -1.2rem; }
.ke-strings { display: inline-flex; gap: 0.25rem; }
.ke-strings .ke-string-tune {
  font: inherit;
  font-size: 0.827rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}
.ke-strings .ke-string-tune option { background: var(--bg); color: var(--text); }
.ke-diagram-caption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.35rem;
  font-size: 0.793rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  word-break: normal;
  overflow-wrap: normal; /* long shapes wrap only at their dashes */
}
.ke-omit { color: var(--amber); }
.ke-diagram-none { font-size: 0.793rem; color: var(--muted); }
.ke-cell.playing .mini-piano .w, .ke-cell.playing .mini-piano .b { stroke: var(--bg); }
.ke-cell.playing .chord-box line { stroke: var(--bg); }
.ke-cell.playing .chord-box .dot, .ke-cell.playing .mini-piano .on { fill: var(--bg); }

/* Key Explorer: optionally grey out chords with avoid notes (the ! stays bright) */
.key-explorer .controls .ke-warn-key { width: 1.15rem; height: 1.15rem; font-size: 0.771rem; letter-spacing: 0; }
.key-explorer.dim-warnings .ke-cell.has-warn > :not(.ke-warn):not(.ke-add) {
  opacity: 0.28;
  filter: grayscale(1);
  transition: opacity 0.15s;
}
.key-explorer.dim-warnings .ke-cell.has-warn:hover > :not(.ke-warn):not(.ke-add),
.key-explorer.dim-warnings .ke-cell.has-warn:focus-within > :not(.ke-warn):not(.ke-add) { opacity: 0.75; }

/* ==========================================================
   Mood Progressions
   ========================================================== */
.mood-intro { margin: 0 0 1.6rem; text-align: center; font-size: 0.879rem; color: var(--muted); line-height: 1.7; }
.mood-setup { margin-top: 0; }
.mood-body { padding: 0.9rem; }
.mood-controls { justify-content: flex-start; margin-bottom: 1rem; }
.mood-controls select { background: var(--bg); text-transform: none; letter-spacing: 0.05em; } /* chord names keep their case (m ≠ M) */

.mood-chord, .mood-numeral-box { text-align: center; padding: 0.4rem 0 0.2rem; }
.mood-chord-symbol { font-size: 3.2rem; line-height: 1.1; color: var(--line); }
.mood-chord-name { margin-top: 0.3rem; font-size: 0.844rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mood-chord-notes { margin: 0.45rem 0 0.8rem; font-size: 0.879rem; color: var(--muted); white-space: pre; }
.mood-play {
  font: inherit;
  font-size: 0.836rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.mood-play:hover { border-color: var(--line); background: var(--fill); }

.mood-numeral { font-size: 3.2rem; line-height: 1.1; color: var(--line); }
.mood-numeral.muted { color: var(--muted); }
.mood-numeral-key { margin-top: 0.3rem; font-size: 0.844rem; letter-spacing: 0.1em; color: var(--text); }
.mood-role {
  margin: 0.8rem auto 0;
  padding: 0;
  max-width: 26rem;
  list-style: none;
  font-size: 0.844rem;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}
.mood-role li { padding-left: 1rem; position: relative; }
.mood-role li::before { content: '–'; position: absolute; left: 0; color: var(--muted); }
.mood-role li.in-key { color: var(--line); }
.mood-role li.outside { color: var(--amber); }


/* Mood Progressions: Workbench picker */
.mood-from-wb { margin-bottom: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--line-faint); }
.mood-from-wb select { min-width: 16rem; }
.mood-key-sources { row-gap: 0.6rem; }
.mood-key-sources select { min-width: 12rem; }
.mood-key-source { margin: -0.3rem 0 0.8rem; font-size: 0.801rem; line-height: 1.5; color: var(--line); }
.mood-chord-source { margin: -0.4rem 0 0.8rem; font-size: 0.81rem; color: var(--muted); }

/* Chord names inside uppercase labels keep their real case (m ≠ M) */
.chord-case { text-transform: none; letter-spacing: 0.04em; color: var(--line); }

/* Mood Progressions: follow-on chord */
.mood-next { margin-top: 1.5rem; min-height: 0; }
.mood-blurb { font-size: 0.836rem; color: var(--muted); text-transform: none; letter-spacing: 0.04em; }
.mood-empty { margin: 0.4rem 0; font-size: 0.857rem; color: var(--muted); }
.mood-suggestion { padding: 0.6rem 0 0.4rem; text-align: center; }
.mood-move { display: flex; align-items: baseline; justify-content: center; gap: 1.1rem; }
.mood-move-from { font-size: 2.2rem; color: var(--muted); }
.mood-arrow { font-size: 1.6rem; color: var(--muted); }
.mood-move-to { font-size: 3.4rem; color: var(--line); }
.mood-move-numerals { margin-top: 0.2rem; font-size: 0.85rem; color: var(--text); white-space: pre; }
.mood-move-notes { margin-top: 0.4rem; font-size: 0.827rem; color: var(--muted); }
.mood-note { margin: 0.6rem 0 0; font-size: 0.836rem; color: var(--amber); }
.mood-why-title {
  margin: 1rem 0 0.3rem;
  font-size: 0.801rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.mood-why {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
  font-size: 0.861rem;
  line-height: 1.65;
  color: var(--text);
  text-align: left;
}
.mood-why li { position: relative; padding-left: 1rem; }
.mood-why li::before { content: '–'; position: absolute; left: 0; color: var(--line); }
.mood-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.mood-actions .mood-play { text-transform: none; letter-spacing: 0.06em; } /* chord names keep their case (m ≠ M) */
.mood-play.primary { border-color: var(--line); }
.mood-alts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line-faint);
}
.mood-alts-label { align-self: center; margin-right: 0.4rem; font-size: 0.801rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.mood-alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 5.2rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  cursor: pointer;
}
.mood-alt:hover { border-color: var(--line); background: var(--fill); }
.mood-alt.current { border-color: var(--line); background: var(--line); }
.mood-alt.current * { color: var(--bg) !important; }
.mood-alt-numeral { font-size: 0.801rem; color: var(--muted); }
.mood-alt-symbol { font-size: 0.95rem; color: var(--line); }
.mood-status { min-height: 1.1em; margin: 0.7rem 0 0; font-size: 0.836rem; color: var(--text); text-align: center; }

/* Shared tuning controls */
.tuning-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; }
.tc-strings { display: inline-flex; gap: 0.25rem; }
.tc-string {
  font: inherit;
  font-size: 0.827rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--line);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}
.tuning-controls select { background: var(--bg); }

/* Mood Progressions: diagrams, progression strip, next chord */
.mood-diagram-controls { margin: -0.4rem 0 1.4rem; }
.mood-chord-diagram { display: flex; justify-content: center; margin: 0.2rem 0 0.8rem; }
.mood-diagram { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.mood-diagram .mini-piano { width: 10rem; }
.mood-diagram .chord-box { width: calc(var(--strings, 6) * 0.95rem); }
.mood-diagram.small .mini-piano { width: 6.6rem; }
.mood-diagram.small .chord-box { width: calc(var(--strings, 6) * 0.62rem); }
.mood-shape { font-size: 0.801rem; letter-spacing: 0.06em; color: var(--muted); }
.mood-omit { color: var(--amber); }

.mood-progression { margin-top: 1.5rem; min-height: 0; }
.mood-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mood-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 7.4rem;
  padding: 0.45rem 0.5rem 0.55rem;
  border: 1px solid var(--line-soft);
  cursor: pointer;
}
.mood-step:hover { border-color: var(--line); background: rgba(var(--ink-rgb), 0.06); }
.mood-step.playing { border-color: var(--line); background: var(--fill); }
.mood-step-num { align-self: flex-start; font-size: 0.784rem; color: var(--muted); }
.mood-step-mood { font-size: 0.784rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.mood-step-symbol { font-size: 1.15rem; color: var(--line); }
.mood-step-numeral { font-size: 0.827rem; color: var(--text); min-height: 1em; }
.mood-step .mood-diagram { margin-top: 0.3rem; }
.mood-progression .mood-status { text-align: left; }

.mood-move { align-items: center; gap: 1.6rem; }
.mood-move-side { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.mood-move-side.from .mood-move-symbol { font-size: 1.9rem; color: var(--muted); }
.mood-move-side.to .mood-move-symbol { font-size: 3rem; color: var(--line); }
.mood-move-numeral { font-size: 0.887rem; color: var(--text); margin-bottom: 0.3rem; }
.mood-move-side.from .mood-diagram { opacity: 0.7; }

/* Mood Progressions: looping back */
.mood-loop {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px dashed var(--line-soft);
}
.mood-loop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.mood-loop-icon { font-size: 1.1rem; color: var(--line); }
.mood-loop-title { font-size: 0.827rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--line); }
.mood-loop-move { font-size: 0.85rem; color: var(--text); white-space: pre; }
.mood-loop-seam { margin: 0.55rem 0 0; font-size: 0.853rem; line-height: 1.6; color: var(--text); }
.mood-seam-badge {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.793rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  color: var(--line);
}
.mood-seam-badge.firm { background: var(--line); color: var(--bg); border-color: var(--line); }
.mood-seam-badge.open { color: var(--amber); border-color: var(--amber); }
.mood-seam-badge.none { color: var(--muted); }
.mood-loop-feels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.7rem; }
.mood-loop-label { margin-right: 0.2rem; font-size: 0.801rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.mood-loop-tag {
  padding: 0.15rem 0.6rem;
  font-size: 0.857rem;
  color: var(--bg);
  background: var(--amber);
  cursor: help;
}
.mood-loop-why { display: block; max-width: none; margin-top: 0.5rem; }
.mood-loop-detail { margin: 0.3rem 0 0; font-size: 0.81rem; color: var(--muted); }
.mood-loop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.mood-loop-actions .mood-play { text-transform: none; letter-spacing: 0.06em; }
.mood-step-mood.imported { color: var(--muted); }

/* Mood Progressions: caveat about music and emotion */
.mood-caveat {
  display: block;
  max-width: 52rem;
  margin: -0.6rem auto 1.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.844rem;
  line-height: 1.65;
  color: var(--text);
  border: 1px dashed var(--line-soft);
  border-left: 3px solid var(--amber);
}
.mood-caveat-title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.801rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Mood Progressions: jazz mode */
/* Harmony mode switch: Normal | Jazz | Mega jazz */
.mood-mode button[aria-pressed="true"][data-mode="jazz"] { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.mood-mode button[aria-pressed="true"][data-mode="mega"] { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.rh-ideas.jazz { border-color: rgba(var(--amber-rgb), 0.55); }
.rh-ideas.mega { border-color: rgba(var(--orange-rgb), 0.7); }
.rh-ideas .mood-jazz-note { margin: 0.8rem 0 0; }
.mood-next.jazz { border-color: rgba(var(--amber-rgb), 0.55); }
.mood-next.mega { border-color: rgba(var(--orange-rgb), 0.7); }
.mood-jazz-note.mega { border-left-color: var(--orange); background: rgba(var(--orange-rgb), 0.07); }
.mood-jazz-note {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.836rem;
  line-height: 1.6;
  color: var(--text);
  border-left: 3px solid var(--amber);
  background: rgba(var(--amber-rgb), 0.06);
}

/* ==========================================================
   Modulation Planner
   ========================================================== */
.seq-diagram { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.seq-diagram .mini-piano { width: 10rem; }
.seq-diagram .chord-box { width: calc(var(--strings, 6) * 0.95rem); }
.seq-diagram.small .mini-piano { width: 6.6rem; }
.seq-diagram.small .chord-box { width: calc(var(--strings, 6) * 0.62rem); }
.seq-shape { font-size: 0.801rem; letter-spacing: 0.06em; color: var(--muted); }
.seq-omit { color: var(--amber); }

.modplan-setup { min-height: 0; }
.modplan-hint { margin: 0; font-size: 0.801rem; line-height: 1.5; color: var(--muted); }
/* Starting chord from the Harmony Workbench's saved list */
.modplan-wb { display: flex; flex-direction: column; gap: 0.4rem; }
.modplan-wb-last {
  font: inherit;
  font-size: 0.819rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.modplan-wb-last strong { font-weight: 600; color: var(--text); }
.modplan-wb-action { display: block; font-size: 0.793rem; letter-spacing: 0.14em; text-transform: uppercase; }
.modplan-wb-detail { display: block; margin-top: 0.2rem; font-size: 0.836rem; color: var(--muted); }
.modplan-wb-last:hover:not(:disabled) { border-color: var(--line); background: var(--fill); }
.modplan-wb-last:disabled { color: var(--muted); opacity: 0.6; cursor: default; }
.modplan-wb select {
  font: inherit;
  font-size: 0.819rem;
  letter-spacing: 0.04em;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.modplan-wb select:hover:not(:disabled) { border-color: var(--line); background: var(--fill); }
.modplan-wb select:disabled { color: var(--muted); opacity: 0.6; cursor: default; }
.modplan-wb select option { background: var(--bg); color: var(--text); }
.modplan-wb-source { margin: 0.1rem 0 0.5rem; font-size: 0.801rem; line-height: 1.5; color: var(--line); }
.modplan-link {
  font: inherit;
  font-size: 0.801rem;
  color: var(--line);
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--line-soft);
  padding: 0;
  cursor: pointer;
}
.modplan-relationship { margin: 0; font-size: 0.844rem; line-height: 1.5; color: var(--text); }

/* ---- The key change: three bands (keys · starting chord · length + summary) ---- */
.modplan-setup .ms-band { padding: 0.9rem 1.1rem; }
.modplan-setup .ms-band + .ms-band { border-top: 1px dashed var(--line-faint); }
.modplan-setup h3 {
  margin: 0;
  font-size: 0.801rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}
.modplan-setup .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 1.4rem; margin-bottom: 0.6rem; }
.modplan-setup .ms-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

/* Band 1: starting key → ending key. Band 2 uses the same columns, so the
   chord's menus sit right under the starting key's. */
.modplan-setup .ms-keys,
.modplan-setup .ms-chord-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); align-items: start; }
.modplan-setup .modplan-swap {
  align-self: center;
  justify-self: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  cursor: pointer;
}
.modplan-setup .modplan-swap:hover { color: var(--bg); background: var(--line); border-color: var(--line); }
.modplan-swap-icon { display: inline-block; }
.modplan-swap-icon.spin { animation: modplan-swap-turn 0.35s ease-out; }
@keyframes modplan-swap-turn { from { transform: rotate(-180deg); } to { transform: none; } }

.modplan-setup .ms-or {
  align-self: center;
  text-align: center;
  font-size: 0.784rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Root + Key/Type on one line, labels above */
.modplan-setup .ms-menus {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0;
  font-size: 0.784rem;
}
.modplan-setup .ms-menus label { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.modplan-setup .ms-menus select { width: 100%; min-width: 0; font-size: 0.836rem; padding: 0.45rem 0.6rem; text-transform: none; letter-spacing: 0.05em; } /* chord names keep their case (m ≠ M) */
.modplan-setup .ms-chord .ms-menus { margin-top: 0; }

/* Import menus: same look as the other menus, just quieter */
.modplan-setup .ms-import {
  font: inherit;
  font-size: 0.81rem;
  letter-spacing: 0.04em;
  color: var(--line);
  background: transparent;
  border: 1px dashed var(--line-soft);
  border-radius: 0;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.modplan-setup .ms-import:hover { border-style: solid; border-color: var(--line); background: var(--fill); }
.modplan-setup .ms-import option { background: var(--bg); color: var(--text); }
.modplan-setup .modplan-wb-source { margin: 0; }
/* Band 2's Workbench controls line up with the menus (they have labels above) */
.modplan-setup .ms-chord-row .modplan-wb { padding-top: 0; }
.modplan-setup .modplan-warning { margin-top: 0.8rem; }

/* Band 3: length + the summary of the key change */
.modplan-setup .ms-footer { display: flex; flex-direction: column; gap: 0.5rem; }
.modplan-setup .ms-length { justify-content: flex-start; gap: 0.8rem; margin: 0; font-size: 0.801rem; }
.modplan-setup .ms-length select { padding: 0.3rem 0.6rem; }
.modplan-setup .ms-length .modplan-hint { text-transform: none; letter-spacing: 0.04em; }

@media (max-width: 760px) {
  .modplan-setup .ms-keys,
  .modplan-setup .ms-chord-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.8rem; }
  .modplan-setup .modplan-swap { transform: rotate(90deg); }
}

.modplan-route { margin-top: 1.5rem; min-height: 0; }
.modplan-route .panel-head h2 { color: var(--line); }
.modplan-blurb { margin: 0 0 0.5rem; font-size: 0.844rem; color: var(--muted); }
.modplan-sequence { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--line); white-space: pre-wrap; }
.modplan-step.start { border-style: dashed; }
.modplan-step.arrival { border-color: var(--line); }
.modplan-numerals { display: flex; gap: 0.3rem; font-size: 0.819rem; color: var(--muted); }
.modplan-numerals .fits { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.modplan-numerals .sep { color: var(--line-soft); }
.modplan-legend { margin: 0.6rem 0 0; font-size: 0.793rem; color: var(--muted); }
.modplan-roles { margin: 0.8rem 0 0; padding-left: 1.4rem; font-size: 0.844rem; line-height: 1.7; color: var(--text); }
.modplan-roles li::marker { color: var(--muted); font-size: 0.801rem; }
.modplan-role-chord { color: var(--line); }
.modplan-route .panel-actions button.playing { color: var(--bg); background: var(--line); border-color: var(--line); }

/* Modulation Planner: the journey (circle of fifths + lane chart) */
.modplan-circle svg { display: block; width: 100%; height: auto; }
.modplan-side-title {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.801rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}
.modplan-keyinfo { margin: 0; font-size: 0.853rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.modplan-key-legend { margin: 0.6rem 0 0.5rem; padding: 0; list-style: none; font-size: 0.819rem; line-height: 1.9; color: var(--text); }
.modplan-key-legend .sw { display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1; color: var(--text); width: 1.4rem; height: 1.4rem; margin-right: 0.55rem; vertical-align: -0.3rem; border: 1px solid var(--line-soft); }
.sw.old { background: rgba(var(--ink-rgb), 0.45); }
.sw.new { background: repeating-linear-gradient(45deg, rgba(var(--amber-rgb), 0.55) 0 3px, rgba(var(--amber-rgb), 0.25) 3px 6px); }
.sw.both { background: linear-gradient(135deg, rgba(var(--ink-rgb), 0.6) 50%, rgba(var(--amber-rgb), 0.7) 50%); }
.sw.out { background: rgba(var(--orange-rgb), 0.25); border-style: dashed; }

/* circle */
.cof .cof-cell { fill: transparent; stroke: var(--line-faint); stroke-width: 1; }
.cof .cof-win.old { fill: rgba(var(--ink-rgb), 0.16); }
.cof .cof-win.new { fill: rgba(var(--amber-rgb), 0.2); }
.cof .cof-win-hatch { fill: url(#cof-hatch); pointer-events: none; }
.cof .cof-hatch-line { stroke: rgba(var(--amber-rgb), 0.55); stroke-width: 1.2; }
.cof .cof-home { fill: none; stroke-width: 2.2; }
.cof .cof-home.old { stroke: var(--line); }
.cof .cof-home.new { stroke: var(--amber); }
.cof .cof-label { fill: var(--text); font-family: var(--font); font-size: 14px; }
.cof .cof-label.minor { fill: var(--muted); font-size: 12.5px; }
.cof .cof-step { stroke: var(--text); stroke-width: 1.6; stroke-opacity: 0.75; }
.cof .cof-step.active { stroke: var(--orange); stroke-width: 2.6; stroke-opacity: 1; }
.cof .cof-arrowhead { fill: var(--text); }
.cof .cof-dot .mark { stroke: var(--bg); stroke-width: 1.5; }
.cof .cof-dot text { fill: var(--bg); font-family: var(--font); font-size: 10px; font-weight: 700; pointer-events: none; }
.cof .cof-dot.k-old .mark { fill: var(--line); }
.cof .cof-dot.k-new .mark { fill: var(--amber); }
.cof .cof-dot.k-both .mark { fill: var(--lime); }
.cof .cof-dot.k-out .mark { fill: var(--orange); }
.cof .cof-dot.active .mark { stroke: var(--text); stroke-width: 2.5; }
.cof .cof-dot.first .mark, .cof .cof-dot.last .mark { stroke: var(--text); }
.cof .cof-centre { fill: var(--text); font-family: var(--font); font-size: 15px; }
.cof .cof-centre.small { fill: var(--muted); font-size: 11.5px; letter-spacing: 0.08em; }

/* lane chart */
.lanes { display: block; width: 100%; height: auto; }
.lanes .lane-line { stroke-width: 1; stroke-dasharray: 3 4; }
.lanes .lane-line.k-old { stroke: rgba(var(--ink-rgb), 0.5); }
.lanes .lane-line.k-both { stroke: rgba(var(--lime-rgb), 0.5); }
.lanes .lane-line.k-new { stroke: rgba(var(--amber-rgb), 0.6); }
.lanes .lane-line.k-out { stroke: rgba(var(--orange-rgb), 0.45); }
.lanes .lane-name { font-family: var(--font); font-size: 9px; letter-spacing: 0.06em; }
.lanes .lane-name.k-old { fill: var(--line); }
.lanes .lane-name.k-both { fill: var(--lime); }
.lanes .lane-name.k-new { fill: var(--amber); }
.lanes .lane-name.k-out { fill: var(--orange); }
.lanes .lane-path { fill: none; stroke: var(--text); stroke-opacity: 0.55; stroke-width: 1.4; }
.lanes .lane-dot { stroke: var(--bg); stroke-width: 1.5; }
.lanes .lane-dot.k-old { fill: var(--line); }
.lanes .lane-dot.k-both { fill: var(--lime); }
.lanes .lane-dot.k-new { fill: var(--amber); }
.lanes .lane-dot.k-out { fill: var(--orange); }
.lanes .lane-dot.active { stroke: var(--text); stroke-width: 2.2; }
.lanes .lane-chord { fill: var(--muted); font-family: var(--font); font-size: 10px; }
.lanes .lane-chord.active { fill: var(--text); }

/* tiles: coloured top edge for their key */
.modplan-step { border-top-width: 3px; position: relative; }
/* Shape marker for the chord's key group (matches the circle, lanes and legend) */
.modplan-step::after {
  content: attr(data-mark);
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
}
.modplan-step.k-old::after { color: var(--line); }
.modplan-step.k-both::after { color: var(--lime); }
.modplan-step.k-new::after { color: var(--amber); }
.modplan-step.k-out::after { color: var(--orange); }
.modplan-step.k-old { border-top-color: var(--line); }
.modplan-step.k-both { border-top-color: var(--lime); }
.modplan-step.k-new { border-top-color: var(--amber); }
.modplan-step.k-out { border-top-color: var(--orange); }

/* Modulation Planner: Keys | Modes toggles */
.segmented.small button { font-size: 0.776rem; padding: 0.2rem 0.45rem; letter-spacing: 0.12em; }
.cof .cof-centre.long { font-size: 11.5px; }

/* Modulation Planner: starting chord not in the starting key */
.modplan-warning {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.819rem;
  line-height: 1.55;
  color: var(--text);
  border-left: 3px solid var(--amber);
  background: rgba(var(--amber-rgb), 0.08);
}
.modplan-warning[hidden] { display: none; }
.modplan-warning-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
  font-size: 0.793rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--amber);
  border-radius: 50%;
}

/* Mood Progressions: emotion of each chord change, between the cards */
.mood-strip { align-items: stretch; }
.mood-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 4.4rem;
  padding: 0 0.1rem;
  list-style: none;
  cursor: help;
}
.mood-link-arrow { font-size: 1rem; color: var(--muted); line-height: 1; }
.mood-link-feel {
  padding: 0.08rem 0.4rem;
  font-size: 0.793rem;
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--amber);
  white-space: nowrap;
}
.mood-link-feel.second { color: var(--amber); background: transparent; border: 1px solid rgba(var(--amber-rgb), 0.6); }
.mood-link-feel.weak { color: var(--amber); background: transparent; border: 1px dashed rgba(var(--amber-rgb), 0.6); }
.mood-link-feel.muted { color: var(--muted); background: transparent; border: 1px dashed var(--line-soft); }
.mood-strip-key { margin: 0.6rem 0 0; font-size: 0.801rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================
   Harmony Workbench layout: chord bar, instrument toolbar, workspace
   ========================================================== */
/* Chord bar: readout on the left, actions on the right */
.chord-id .wb-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
}
.chord-id .result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.4rem;
  align-items: center;
  min-height: 6.4rem;
  margin: 0;
  text-align: left;
}
.chord-id .chord-symbol { grid-row: 1 / span 3; min-width: 7.5rem; font-size: 3.1rem; }
.chord-id .chord-desc { margin: 0; font-size: 0.87rem; }
.chord-id .chord-notes { margin-top: 0.3rem; white-space: normal; }
.chord-id .alternatives { grid-column: 2; margin-top: 0.4rem; }
.chord-id .alternatives .chip:first-of-type { margin-left: 0.3rem; }
.chord-id .wb-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
}
.chord-id .wb-actions [data-action="save"] {
  padding: 0.6rem 1.1rem;
  color: var(--bg);
  background: var(--line);
  border-color: var(--line);
}
.chord-id .wb-actions [data-action="save"]:hover { filter: brightness(1.08); }
.chord-id .wb-actions [data-action="save"]:disabled { color: var(--muted); background: transparent; border-color: var(--line-soft); }

/* Instrument toolbar: settings only, grouped */
.chord-id .wb-toolbar {
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
}
.chord-id .wb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.chord-id .wb-group.setup:empty { display: none; }

/* Workspace: narrower saved list, wider analysis; each scrolls within itself */
.chord-id .panels { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: 1.4rem; }
@media (max-width: 760px) { .chord-id .panels { grid-template-columns: 1fr; } }
.chord-id .panel { display: flex; flex-direction: column; max-height: 34rem; }
/* Saved chords: the three actions get their own full-width row (wrapping at large text sizes) */
.chord-id .saved-actions { flex: 1 1 100%; }
.chord-id .saved-actions button { flex: 1 1 auto; letter-spacing: 0.08em; padding-inline: 0.4rem; }
.chord-id .saved-list,
.chord-id .keys-result { flex: 1; overflow-y: auto; }
.chord-id .midi-status { margin-top: 0.4rem; }
/* Keep the optimised toolbar on one line: tighter labels and menus */
.chord-id .wb-toolbar { gap: 0.6rem; font-size: 0.81rem; letter-spacing: 0.1em; }
.chord-id .wb-group { gap: 0.55rem; }
.chord-id .wb-toolbar label { gap: 0.4rem; }
.chord-id .wb-toolbar select,
.chord-id .wb-toolbar button { padding: 0.35rem 0.55rem; }
.chord-id .wb-toolbar [data-control="tuning-preset"] { max-width: 10.5rem; }
.chord-id .wb-toolbar [data-control="spelling"] { max-width: 7.5rem; }

/* ==========================================================
   Key Explorer layout: key bar, display toolbar, table
   ========================================================== */
/* Key bar: key name + scale on the left, the controls that choose the key on the right */
.key-explorer .ke-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
}
.key-explorer .ke-heading { margin: 0; text-align: left; }
.key-explorer .ke-title { font-size: 2.1rem; line-height: 1.1; }
.key-explorer .ke-scale-notes { justify-content: flex-start; margin-top: 0.6rem; }
.key-explorer .ke-key-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
}
.key-explorer .ke-key-controls .segmented { justify-content: stretch; }
.key-explorer .ke-key-controls .segmented button { flex: 1; }
.key-explorer .ke-key-controls label { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.key-explorer .ke-key-controls select { width: 100%; min-width: 9rem; }
.key-explorer .ke-key-controls .ke-from-wb { margin-top: 0.25rem; text-transform: none; letter-spacing: 0.05em; }
.key-explorer .ke-key-controls .ke-from-wb:disabled { opacity: 0.45; cursor: default; }

/* Display toolbar: settings only */
.key-explorer .ke-toolbar {
  margin-bottom: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
}
.key-explorer .ke-toolbar-row { justify-content: space-between; margin: 0; font-size: 0.81rem; letter-spacing: 0.1em; }
.key-explorer .ke-toolbar .ke-guitar-controls { justify-content: flex-start; margin: 0.45rem 0 0; font-size: 0.81rem; letter-spacing: 0.1em; }
.key-explorer .ke-toolbar .ke-guitar-controls[hidden] { display: none; }

/* Help right above the table, and column headings that stay in view */
.key-explorer .ke-help { margin: 0 0 0.5rem; text-align: left; line-height: 1.6; }
@media (min-width: 900px) {
  .key-explorer .ke-table-wrap { overflow: visible; }
  .key-explorer .ke-table thead th {
    position: sticky;
    top: var(--header-h);
    z-index: 3;
    background: var(--bg);
    box-shadow: inset 0 -1px 0 var(--line-soft);
  }
}

/* ==========================================================
   Modulation Planner layout: toolbar, circle + chosen route
   ========================================================== */
/* Display toolbar under the setup */
.modplan .mood-diagram-controls {
  justify-content: space-between;
  margin: 0.8rem 0 0;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.81rem;
  letter-spacing: 0.1em;
}
.modplan .mood-diagram-controls .tuning-controls { gap: 0.6rem; }

/* Two-column workspace: the circle stays in view beside the chosen route */
.modplan-main {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  margin-top: 1.2rem;
}
@media (max-width: 900px) { .modplan-main { grid-template-columns: 1fr; } }
.modplan-left {
  position: sticky;
  top: calc(var(--header-h) + 0.8rem);
  padding: 0.8rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
}
@media (max-width: 900px) { .modplan-left { position: static; } }
.modplan-left svg { display: block; width: 100%; height: auto; }
.modplan-left .modplan-keyinfo { margin-top: 0.6rem; font-size: 0.827rem; }

/* Route tabs drive everything on the right */
.modplan-tabs { margin-bottom: 0.6rem; }
.modplan-tabs .segmented { display: flex; }
.modplan-tabs .segmented button { flex: 1; padding: 0.55rem 0.6rem; font-size: 0.819rem; }
.modplan .modplan-route { display: none; margin-top: 0; }
.modplan .modplan-route.selected { display: block; }
.modplan .modplan-route .panel-head h2 { visibility: hidden; width: 0; }
.modplan .modplan-strip .mood-step { min-width: 6.6rem; }

/* Journey lanes + legend under the route */
.modplan-right .modplan-side {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
}
.modplan-right .modplan-side-title { margin-top: 0; }
.modplan-right .modplan-key-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; line-height: 1.6; }


/* Modulation Planner: compact route card, tiles that share the width, sensible lane chart */
.modplan .modplan-route .panel-head {
  justify-content: flex-end;
  padding: 0.6rem 0.9rem 0;
  border-bottom: none;
}
.modplan .modplan-route .panel-head h2 { display: none; }
.modplan .modplan-route .mood-body { padding-top: 0.4rem; }
.modplan .modplan-strip { flex-wrap: wrap; }
.modplan .modplan-strip .mood-step { flex: 1 1 5.4rem; min-width: 0; }
.modplan .modplan-strip .seq-diagram.small .mini-piano { width: 100%; max-width: 6.6rem; }
.modplan-right .lanes { width: 100%; max-height: 9.5rem; }

/* ==========================================================
   Mood Progressions: page layout
   ========================================================== */

/* The note on music and emotion stays fully visible, just a little tighter */
.mood.layout-optimised .mood-caveat { margin-top: 0; margin-bottom: 1.2rem; }

/* Compact setup readouts */
.mood.layout-optimised .mood-body { padding: 0.8rem 0.9rem; }
.mood.layout-optimised .mood-controls { margin-bottom: 0.6rem; }
.mood.layout-optimised .mood-from-wb { padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.mood.layout-optimised .mood-chord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "sym name dia" "sym notes dia" "sym src dia" "play play play";
  column-gap: 0.9rem;
  align-items: center;
  text-align: left;
  padding: 0.2rem 0 0;
}
.mood.layout-optimised .mood-chord-symbol { grid-area: sym; font-size: 2.3rem; }
.mood.layout-optimised .mood-chord-name { grid-area: name; margin: 0; }
.mood.layout-optimised .mood-chord-notes { grid-area: notes; margin: 0.15rem 0 0; }
.mood.layout-optimised .mood-chord-source { grid-area: src; margin: 0.2rem 0 0; }
.mood.layout-optimised .mood-chord-diagram { grid-area: dia; margin: 0; }
.mood.layout-optimised .mood-chord-diagram .mood-diagram .mini-piano { width: 7.5rem; }
.mood.layout-optimised .mood-chord-diagram .mood-diagram .chord-box { width: calc(var(--strings, 6) * 0.7rem); }
.mood.layout-optimised .mood-chord > .mood-play { grid-area: play; justify-self: start; margin-top: 0.6rem; }
.mood.layout-optimised .mood-numeral-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  text-align: left;
  padding: 0.2rem 0 0;
}
.mood.layout-optimised .mood-numeral { grid-row: 1 / span 2; font-size: 2.3rem; }
.mood.layout-optimised .mood-numeral-key { margin: 0.3rem 0 0; }
.mood.layout-optimised .mood-role { margin: 0.4rem 0 0; max-width: none; }

/* One settings toolbar: diagrams (+ tuning) on the left, harmony mode on the right */
.mood.layout-optimised .mood-diagram-controls {
  justify-content: space-between;
  margin: 0.9rem 0 0;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.81rem;
  letter-spacing: 0.1em;
}
.mood-harmony { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.mood-harmony-label { color: var(--muted); }
.mood.layout-optimised .mood-progression { margin-top: 1.2rem; }

/* Imports together */
.mood.layout-optimised .mood-import-route { gap: 0.8rem; align-items: center; }
.mood.layout-optimised .mood-import-route [data-action="import-workbench"] {
  font: inherit;
  font-size: 0.819rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--line);
  background: transparent;
  border: 1px solid var(--line-soft);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.mood.layout-optimised .mood-import-route [data-action="import-workbench"]:hover { border-color: var(--line); background: var(--fill); }

/* Next chord straight under the strip: the move on the left, why + actions + ideas on the right */
.mood.layout-optimised .mood-next { margin-top: 1rem; }
.mood.layout-optimised .mood-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  text-align: left;
}
@media (max-width: 820px) { .mood.layout-optimised .mood-suggestion { grid-template-columns: 1fr; } }
.mood.layout-optimised .mood-sugg-left,
.mood.layout-optimised .mood-sugg-right { display: block; }
.mood.layout-optimised .mood-sugg-left { text-align: center; }
.mood.layout-optimised .mood-why-title { margin-top: 0; }
.mood.layout-optimised .mood-why { display: block; }
.mood.layout-optimised .mood-actions { justify-content: flex-start; }
.mood.layout-optimised .mood-alts { justify-content: flex-start; margin-top: 1rem; padding-top: 0.8rem; }

/* Loop readout: collapsible panel directly under the progression */
.mood-loop-panel { margin-top: 1rem; min-height: 0; }
.mood-loop-summary {
  padding: 0.6rem 0.9rem;
  font-size: 0.857rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--line);
  cursor: pointer;
  list-style-position: inside;
}
.mood-loop-summary::marker { color: var(--muted); }
.mood-loop-panel[open] .mood-loop-summary { border-bottom: 1px dashed var(--line-soft); }
.mood-loop-panel .mood-loop { border: none; padding: 0.8rem 0.9rem 0.9rem; margin: 0; }
/* The summary already says "Looping back": the readout's own title just shows the move */
.mood-loop-panel .mood-loop-icon, .mood-loop-panel .mood-loop-title { display: none; }


/* ==========================================================
   Shared parts of the newer tools
   ========================================================== */
.rh-body { padding: 0.9rem 1rem 1rem; }
.rh-hint { margin: 0.5rem 0 0; font-size: 0.81rem; line-height: 1.5; color: var(--muted); }
.rh-num { margin-left: 0.35rem; font-size: 0.801rem; color: var(--muted); }
.rh-why { margin: 0.25rem 0 0; font-size: 0.827rem; line-height: 1.55; color: var(--text); }
.panel-actions button:disabled,
.chord-strip button:disabled { opacity: 0.35; cursor: default; }
.panel-actions button.primary,
.rh-idea-actions button.primary { border-color: var(--line); }
.reharm button.saved, .vlab button.saved {
  color: var(--bg); background: var(--line); border-color: var(--line);
}
.reharm .panel + .panel, .vlab .panel + .panel { margin-top: 1.2rem; }
.reharm .panel, .vlab .panel { min-height: 0; }

/* Progression editor (chord-strip.js) */
.cs-controls { justify-content: flex-start; gap: 0.6rem; margin-bottom: 0.8rem; font-size: 0.801rem; }
.cs-controls select, .cs-controls button { font-size: 0.81rem; padding: 0.35rem 0.6rem; text-transform: none; letter-spacing: 0.04em; }
.cs-controls [data-cs="import"] { border-style: dashed; max-width: 22rem; }
.cs-add { display: inline-flex; gap: 0.35rem; }
.cs-add [data-cs="type"] { max-width: 12rem; }
.cs-cards { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 6.2rem;
  padding: 0.45rem 0.55rem 0.4rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-glass);
}
.cs-card[tabindex] { cursor: pointer; }
.cs-card[tabindex]:hover { border-color: var(--line); }
.cs-card.selected { border-color: var(--line); box-shadow: inset 0 0 0 1px var(--line); background: var(--fill); }
.cs-card.playing { border-color: var(--line); background: var(--fill); }
.cs-card.changed .cs-num::after { content: ' ●'; color: var(--amber); }
.cs-num { font-size: 0.776rem; color: var(--muted); }
.cs-symbol { font-size: 1.05rem; color: var(--line); }
.cs-sub { font-size: 0.801rem; color: var(--muted); }
.cs-tools { display: flex; gap: 0.2rem; margin-top: 0.25rem; }
.cs-tools button {
  font: inherit; font-size: 0.771rem; line-height: 1; padding: 0.2rem 0.3rem;
  color: var(--muted); background: transparent; border: 1px solid var(--line-faint); border-radius: 0; cursor: pointer;
}
.cs-tools button:hover:not(:disabled) { color: var(--line); border-color: var(--line-soft); }
.cs-empty { margin: 0.3rem 0 0; font-size: 0.836rem; color: var(--muted); }

/* Key picker (key-picker.js) */
.key-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kp-label { font-size: 0.801rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.key-picker select {
  font: inherit; font-size: 0.819rem; letter-spacing: 0.04em; color: var(--line);
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0; padding: 0.35rem 0.55rem; cursor: pointer;
}
.key-picker select option { background: var(--bg); color: var(--text); }
.key-picker .kp-import { border-style: dashed; max-width: 15rem; }
.kp-source { flex-basis: 100%; margin: 0; font-size: 0.801rem; color: var(--line); }

/* ---- Reharmoniser ---- */
.rh-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--line-faint); }
.rh-changed-key { color: var(--amber); }
.rh-ideas-body { padding: 0.4rem 1rem 1rem; }
.rh-group { margin-top: 0.8rem; }
.rh-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.rh-group-head h3 { margin: 0; font-size: 0.81rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--line); }
.rh-group-blurb { font-size: 0.801rem; color: var(--muted); }
.rh-idea {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  padding: 0.5rem 0;
  border-top: 1px dotted var(--line-faint);
}
.rh-idea-chords { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.rh-chip strong { font-size: 1rem; font-weight: 500; color: var(--line); }
.rh-plus { color: var(--muted); }
.rh-idea-title { font-size: 0.819rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
/* "Outside the key" tag: a small outlined label beside the idea's title, easy to scan down the list */
.rh-outside {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.77rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.05rem;
  color: var(--amber);
  background: rgba(var(--amber-rgb), 0.1);
  border: 1px solid rgba(var(--amber-rgb), 0.7);
}
.rh-idea-actions { display: flex; gap: 0.35rem; }
.rh-idea-actions button {
  font: inherit; font-size: 0.793rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--line);
  background: transparent; border: 1px solid var(--line-soft); border-radius: 0; padding: 0.3rem 0.55rem; cursor: pointer;
}
.rh-idea-actions button:hover { border-color: var(--line); background: var(--fill); }
@media (max-width: 700px) { .rh-idea { grid-template-columns: 1fr; } }

/* ---- Voice Leading Lab ---- */
.vlab-toolbar { margin: 1.2rem 0; }
.vlab-body { padding: 0.8rem 1rem 1rem; }
.vlab-stats { margin: 0 0 0.9rem; font-size: 0.844rem; line-height: 1.6; color: var(--text); }
.vlab-stats strong { font-weight: 500; color: var(--line); }
.vlab-warn { color: var(--amber); }
.vlab-chords { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vlab-chord {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  min-width: 6.5rem; padding: 0.5rem; border: 1px solid var(--line-soft); cursor: pointer;
}
.vlab-chord:hover, .vlab-chord.playing { border-color: var(--line); background: var(--fill); }
.vlab-symbol { font-size: 1.05rem; color: var(--line); }
.vlab-notes { font-size: 0.793rem; color: var(--muted); text-align: center; }
.vlab-omit { font-size: 0.784rem; color: var(--amber); }
.vlab-bass { font-size: 0.776rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.vlab-bass.moved { color: var(--line); }
.vlab-bass.outside { color: var(--amber); }
.vlab-bass-blurb { margin: -0.4rem auto 1.2rem; max-width: 60rem; text-align: center; font-size: 0.836rem; line-height: 1.6; color: var(--muted); }
.vlab-bass-blurb strong { font-weight: 500; color: var(--line); }
.vlab-key-note { color: var(--text); }
.vlab-chord .mini-piano { width: 7rem; }
.vlab-subtitle { margin: 1.2rem 0 0.5rem; font-size: 0.801rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--line); }
.vlab-lanes-hint { margin: -0.2rem 0 0.5rem; font-size: 0.793rem; color: var(--muted); }
.vlab-lanes-wrap[hidden] { display: none; }
.vlab-lanes { border-collapse: collapse; font-size: 0.836rem; }
.vlab-lanes th, .vlab-lanes td { padding: 0.3rem 0.7rem; border-bottom: 1px dotted var(--line-faint); text-align: left; white-space: nowrap; }
.vlab-lanes thead th { font-size: 0.801rem; font-weight: 500; color: var(--line); }
.vlab-lanes thead th, .vlab-lanes td { text-align: right; }
.vlab-lanes tbody th { font-size: 0.784rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vlab-step { display: inline-block; min-width: 1.8rem; margin-right: 0.35rem; font-size: 0.784rem; color: var(--muted); }
.vlab-step.held { color: var(--line); }
.vlab-step.leap { color: var(--amber); font-weight: 700; text-decoration: underline wavy; text-underline-offset: 2px; }
.vlab-note { color: var(--text); }
.vlab-note.held { color: var(--line); }
.vlab-lanes td.parallel { background: rgba(var(--amber-rgb), 0.14); }
.vlab-lanes td.parallel .vlab-note::after { content: ' ∥'; color: var(--amber); font-weight: 700; }
.vlab-lanes td { cursor: pointer; }
.vlab-lanes td:hover { background: rgba(var(--ink-rgb), 0.06); }
.vlab-lanes td.playing { background: var(--line); }
.vlab-lanes td.playing span { color: var(--bg); }
.vlab-voice-play {
  font: inherit; font-size: 0.771rem; color: var(--muted); background: transparent;
  border: 1px solid var(--line-soft); border-radius: 0; padding: 0.05rem 0.35rem; cursor: pointer;
}
.vlab-voice-play:hover { color: var(--line); border-color: var(--line); }
.vlab-voice-play.playing { color: var(--bg); background: var(--line); border-color: var(--line); }

/* ---- Accessibility helpers ---- */
/* Hidden on screen, still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* First Tab stop: appears only when focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 0.9rem;
  font-size: 0.857rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  text-decoration: none;
}
.skip-link:focus { top: 0.6rem; }
.tool-title:focus { outline: none; }

/* Keyboard shortcuts dialog */
.shortcut-dialog {
  max-width: min(36rem, 92vw);
  max-height: 80vh;
  padding: 1rem 1.3rem 1.3rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px var(--shadow);
}
.shortcut-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.shortcut-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shortcut-head h2 { margin: 0; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--line); }
.shortcut-head button {
  font: inherit; font-size: 0.836rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--line-soft); padding: 0.3rem 0.7rem; cursor: pointer;
}
.shortcut-head button:hover { border-color: var(--line); }
.shortcut-dialog h3 {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.844rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-faint);
  padding-bottom: 0.3rem;
}
.shortcut-dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0; font-size: 0.87rem; line-height: 1.45; }
.shortcut-dialog dt { color: var(--muted); white-space: nowrap; }
.shortcut-dialog dd { margin: 0; }
.shortcut-dialog kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.05rem 0.35rem;
  font: inherit; font-size: 0.844rem; text-align: center;
  color: var(--line);
  border: 1px solid var(--line-soft);
  border-bottom-width: 2px;
}

/* Windows High Contrast / forced colours: the system picks the colours, so
   make sure "on" states still show (backgrounds and SVG fills aren't forced). */
@media (forced-colors: active) {
  body { background-image: none; }
  [aria-pressed="true"], .key.selected, .fb-cell.selected .fb-dot, .cs-card.selected,
  .mood-step.playing, .cs-card.playing, .vlab-chord.playing, .saved-item.current {
    forced-color-adjust: none;
    background: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }
  .key.selected .label { color: HighlightText !important; }
  .mini-piano .w, .mini-piano .b, .chord-box line, .lanes .lane-line, .cof .cof-cell { stroke: CanvasText; }
  .mini-piano .b { fill: CanvasText; }
  .mini-piano .on, .chord-box .dot, .lanes .lane-dot, .cof .cof-dot .mark { fill: Highlight; stroke: CanvasText; }
  .mini-piano .root-mark { fill: Canvas; }
  .chord-box .open { stroke: CanvasText; }
  .chord-box text, .cof text, .lanes text { fill: CanvasText; }
  .cof .cof-dot text { fill: HighlightText; }
  .fb-cell::before { background: CanvasText; }
  .app-toast, .shortcut-dialog { border: 2px solid CanvasText; }
}

/* ---- Settings menu (header) ---- */
.settings-btn.open { color: var(--line); border-color: var(--line); }
.settings-panel {
  position: fixed;
  inset: auto;            /* placed under the button by app.js */
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 0.9rem 1rem 1rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px var(--shadow);
}
.settings-title {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--line);
}
.settings-panel { max-height: calc(100vh - var(--header-h) - 1rem); overflow-y: auto; width: min(40rem, calc(100vw - 16px)); }
.settings-section + .settings-section { margin-top: 1rem; }
.settings-heading {
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--line);
  border-bottom: 1px solid var(--line-soft);
}
.settings-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: start; gap: 0.8rem; padding: 0.35rem 0; }
.settings-row + .settings-row { border-top: 1px dotted var(--line-faint); }
.settings-row > .settings-label { padding-top: 0.35rem; }
.settings-control { min-width: 0; }
.settings-choice { flex-wrap: wrap; }
.settings-hint { margin: 0.3rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.settings-toggle { display: flex; gap: 0.5rem; align-items: flex-start; padding-top: 0.3rem; font-size: 0.8rem; line-height: 1.45; cursor: pointer; }
.settings-toggle input { margin: 0.15rem 0 0; accent-color: var(--line); }
.settings-volume { display: flex; align-items: center; gap: 0.6rem; }
.settings-volume input[type=range] { flex: 1; min-width: 8rem; accent-color: var(--line); }
.settings-volume.muted input[type=range] { opacity: 0.45; }
.settings-volume-value { min-width: 3rem; font-size: 0.8rem; text-align: right; }
.settings-panel button:not(.settings-choice button) {
  font: inherit; font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--text); background: transparent; border: 1px solid var(--line-soft); padding: 0.3rem 0.6rem; cursor: pointer;
}
.settings-panel button:not(.settings-choice button):hover { border-color: var(--line); }
.settings-panel button[aria-pressed="true"]:not(.settings-choice button) { color: var(--bg); background: var(--amber); border-color: var(--amber); }
.settings-panel button.danger { color: var(--orange); border-color: var(--orange); }
.settings-midi { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.settings-midi select { font: inherit; font-size: 0.8rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-soft); padding: 0.25rem 0.4rem; max-width: 100%; }
.settings-midi .settings-hint { flex-basis: 100%; }
.settings-data { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.settings-data .settings-hint { flex-basis: 100%; }
.settings-confirm { flex-basis: 100%; padding: 0.5rem 0.6rem; border-left: 3px solid var(--orange); background: rgba(var(--orange-rgb), 0.08); }
.settings-confirm p { margin: 0 0 0.5rem; font-size: 0.8rem; line-height: 1.45; }
.settings-confirm button + button { margin-left: 0.4rem; }
.settings-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.settings-choice button { white-space: nowrap; font-size: 0.78rem; padding: 0.3rem 0.6rem; letter-spacing: 0.12em; }
@media (forced-colors: active) { .settings-panel { border: 2px solid CanvasText; } }

/* ---- Display settings (Settings menu) ---- */
/* Plain lettering: no ALL CAPS, normal letter spacing */
:root[data-plain] *, :root[data-plain] *::before, :root[data-plain] *::after {
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* Font */
:root[data-font="sans"] { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-font="verdana"] { --font: Verdana, Tahoma, "DejaVu Sans", sans-serif; }

/* Reduced motion: the system setting (unless Settings says Full) or Settings → Reduce */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Comfortable spacing: larger targets for small controls, a little more room */
:root[data-spacing="comfortable"] .segmented button,
:root[data-spacing="comfortable"] .panel-actions button,
:root[data-spacing="comfortable"] .controls button,
:root[data-spacing="comfortable"] .chord-id button:not(.key):not(.fb-cell):not(.saved-load),
:root[data-spacing="comfortable"] select { min-height: 2.5rem; }
:root[data-spacing="comfortable"] .segmented button { min-width: 2.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
:root[data-spacing="comfortable"] .cs-tools button { min-width: 2rem; min-height: 2rem; }
:root[data-spacing="comfortable"] .cs-tools { gap: 0.4rem; }
:root[data-spacing="comfortable"] .ke-add { width: 2rem; height: 2rem; opacity: 1; }
:root[data-spacing="comfortable"] .fb-cell { height: 2.75rem; }
:root[data-spacing="comfortable"] .saved-handle,
:root[data-spacing="comfortable"] .saved-play,
:root[data-spacing="comfortable"] .saved-remove { min-width: 2.25rem; min-height: 2.25rem; }
:root[data-spacing="comfortable"] .panel-actions,
:root[data-spacing="comfortable"] .header-actions { gap: 0.7rem; }
:root[data-spacing="comfortable"] .vlab-voice-play { min-width: 2rem; min-height: 2rem; }

/* ---- Now playing (bottom-right): what's sounding, for following playback by eye ---- */
.now-playing {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
  width: 11.5rem;
  padding: 0.5rem 0.65rem 0.6rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px var(--shadow);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.now-playing.show { opacity: 1; transform: none; }
.np-head { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.np-icon { color: var(--line); }
.np-name { margin-top: 0.15rem; font-size: 1.15rem; color: var(--line); min-height: 1.3em; }
.np-notes { font-size: 0.78rem; color: var(--text); }
.np-keys { margin-top: 0.35rem; }
.np-keys .mini-piano { display: block; width: 100%; height: auto; }
@media (forced-colors: active) { .now-playing { border: 2px solid CanvasText; } }

/* ---- Minimum target size: every control at least 24 × 24 px (WCAG 2.5.8) ---- */
.fb-tune { min-height: 1.5rem; }
.ke-col-play { min-width: 1.5rem; min-height: 1.5rem; }
.ke-add { width: 1.5rem; height: 1.5rem; }
/* The "!" marks keep their size but get a 24 px clickable area around them */
.ke-warn {
  right: 2.2rem;
  top: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  /* a 1rem amber badge drawn inside a 24 px target */
  background: radial-gradient(circle closest-side, var(--amber) 66%, transparent 69%);
}
/* Key Explorer: the play button stretched over each chord cell */
.ke-play {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ke-play:focus-visible { outline-offset: -3px; }
.ke-cell > :not(.ke-play) { position: relative; z-index: 1; pointer-events: none; }
.ke-cell > .ke-warn, .ke-cell > .ke-add { position: absolute; z-index: 2; pointer-events: auto; }
.segmented.small button { min-height: 1.5rem; }
.modplan-link { padding-top: 0.25rem; padding-bottom: 0.25rem; min-height: 1.5rem; }
.cs-tools button { min-width: 1.5rem; min-height: 1.5rem; }
.vlab-voice-play { min-width: 1.5rem; min-height: 1.5rem; }
.settings-toggle input, .controls input[type="checkbox"], .chord-id input[type="checkbox"],
.key-explorer input[type="checkbox"], .vlab input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* ---------------------------------------------------------------------------
   Tooltips (js/tooltips.js): one shared tip, placed under (or over) the control
   --------------------------------------------------------------------------- */
.app-tip {
  position: fixed;
  z-index: 60;
  max-width: min(19rem, calc(100vw - 12px));
  padding: 0.4rem 0.6rem;
  font-family: var(--font);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px var(--shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.app-tip.show { opacity: 1; }
.app-tip[hidden] { display: none; }
/* Tick pointing at the control */
.app-tip::before {
  content: '';
  position: absolute;
  left: var(--tick-x, 50%);
  width: 7px; height: 7px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.app-tip[data-side="below"]::before { top: -5px; border-right: 0; border-bottom: 0; }
.app-tip[data-side="above"]::before { bottom: -5px; border-left: 0; border-top: 0; }
:root[data-motion="reduce"] .app-tip { transition: none; }
@media (forced-colors: active) {
  .app-tip, .app-tip::before { border: 2px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
   Guide (js/guide.js): reuses the shortcuts dialog frame
   --------------------------------------------------------------------------- */
.guide-dialog { width: min(46rem, 94vw); max-width: min(46rem, 94vw); max-height: 86vh; display: none; flex-direction: column; }
.guide-dialog[open] { display: flex; }
/* Tabs: one row of five when they fit, otherwise a 3 + 2 grid, never more than
   two rows. A long label wraps inside its own tab rather than adding a row. */
.guide-dialog { container-type: inline-size; }
.guide-tabs { margin: 0.9rem 0 0; display: grid; grid-template-columns: repeat(5, auto); }
.guide-tabs button {
  letter-spacing: 0.12em; white-space: normal; line-height: 1.25; text-align: center;
  border: 1px solid var(--line-soft); margin: 0 -1px -1px 0; /* collapse shared borders */
}
.guide-tabs button + button { border-left: 1px solid var(--line-soft); }
.guide-tabs button[aria-selected="true"] { position: relative; z-index: 1; }
@container (max-width: 38rem) {
  .guide-tabs { grid-template-columns: repeat(6, 1fr); }
  .guide-tabs button { grid-column: span 2; }
  .guide-tabs button:nth-child(n+4) { grid-column: span 3; }
}
@container (max-width: 24rem) {
  .guide-tabs button { padding-inline: 0.2rem; font-size: 0.75rem; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .guide-keys { grid-template-columns: 1fr !important; row-gap: 0.15rem !important; }
  .guide-keys dd { margin-bottom: 0.45rem; }
}
/* Narrow Guide (phones): Start here's headings sit above their text, not in a side column */
@container (max-width: 34rem) {
  .shortcut-dialog .guide-start { display: block; }
  .shortcut-dialog .guide-start dt { white-space: normal; }
}
.guide-body {
  flex: 1; min-height: 0; overflow-y: auto;
  margin-top: 0.8rem; padding: 0.2rem 0.3rem 0.4rem 0;
  font-size: 0.87rem; line-height: 1.55;
}
.guide-body:focus-visible { outline: 2px solid var(--focus-ring, var(--line)); outline-offset: 2px; }
.guide-body p { margin: 0 0 0.6rem; }
.guide-intro, .guide-when { color: var(--muted); }

.guide-start { margin: 0; }
.guide-start dt {
  margin-top: 0.9rem;
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--line);
}
.guide-start dt:first-child { margin-top: 0.2rem; }
.guide-start dd { margin: 0.25rem 0 0; }

.guide-flow { border: 1px solid var(--line-soft); margin: 0 0 0.6rem; background: rgba(var(--ink-rgb), 0.02); }
.guide-flow[open] { border-color: var(--line); }
.guide-flow summary {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.55rem 0.7rem; cursor: pointer; list-style: none;
}
.guide-flow summary::-webkit-details-marker { display: none; }
.guide-flow summary::after { content: '+'; margin-left: auto; color: var(--muted); }
.guide-flow[open] summary::after { content: '−'; }
.guide-flow summary:hover .guide-flow-title { color: var(--line); }
.guide-flow-num { color: var(--muted); font-size: 0.8rem; }
.guide-flow-title { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.guide-flow > .guide-when { margin: 0 0.7rem 0.4rem; }
.guide-steps { margin: 0; padding: 0 0.7rem 0.7rem 2.2rem; }
.guide-steps li { margin: 0.45rem 0 0; padding-left: 0.2rem; }
.guide-steps li::marker { color: var(--line); }
.guide-step-tool {
  display: inline-block; margin-right: 0.45rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber);
}
.guide-step-tool::after { content: ' ·'; color: var(--muted); }

.guide-go, .guide-link {
  font: inherit; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--line); background: transparent;
  border: 1px solid var(--line-soft); border-radius: 0;
  padding: 0.25rem 0.55rem; min-height: 24px; cursor: pointer; white-space: nowrap;
}
.guide-go:hover, .guide-link:hover { border-color: var(--line); background: rgba(var(--ink-rgb), 0.05); }
.guide-steps .guide-go { display: table; margin: 0.35rem 0 0.1rem; }

.guide-tool + .guide-tool { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-faint); }
.guide-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.guide-keys { margin-top: 0.5rem !important; }
.guide-tool-head h3, .guide-sub {
  margin: 0; border: 0; padding: 0;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--line);
}
.guide-sub { margin-top: 1.1rem; }
.guide-lead { margin-top: 0.4rem !important; }
.guide-list { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.guide-list li { margin: 0.25rem 0; }
.guide-list li::marker { color: var(--line); }
.guide-shares { color: var(--muted); }
.guide-shares strong { font-weight: 500; color: var(--text); }
.guide-flow-links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.guide-link { text-align: left; white-space: normal; }
.guide-tabs button[aria-selected="true"] { color: var(--bg); background: var(--line); border-color: var(--line); }

/* --- Easter eggs (js/eggs.js) ----------------------------------------------- */
/* Field notes card: Guide → Start here */
.egg-card { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--line-soft); }
.egg-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.egg-card-head .guide-sub { margin-top: 0; }
.egg-count { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.egg-stamps {
  list-style: none; margin: 0.8rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem;
}
.egg-stamp {
  display: grid; grid-template-columns: 1.3rem 1fr auto; gap: 0.1rem 0.4rem; align-items: baseline;
  padding: 0.45rem 0.6rem; border: 1px dashed var(--line-soft);
}
.egg-stamp.found { border-style: solid; border-color: var(--amber); background: rgba(var(--amber-rgb), 0.08); }
.egg-glyph { color: var(--muted); }
.egg-stamp.found .egg-glyph { color: var(--amber); }
.egg-name { font-weight: 600; letter-spacing: 0.04em; }
.egg-stamp:not(.found) .egg-name { color: var(--muted); }
.egg-prog { color: var(--muted); font-size: 0.8rem; }
.egg-hint { grid-column: 2 / -1; color: var(--muted); font-size: 0.82rem; }
.egg-stamp.found .egg-hint { color: var(--text); }
.egg-reset { margin-top: 0.8rem; }

/* Locrian's line in Key Explorer's help */
.egg-locrian { color: var(--amber); font-style: italic; }

/* Voice Leading Lab: smooth-lines badge above the lanes */
.egg-badge {
  display: inline-block; margin: 0 0 0.5rem; padding: 0.2rem 0.55rem;
  color: var(--amber); border: 1px solid var(--amber); font-size: 0.82rem; letter-spacing: 0.05em;
}

/* Modulation Planner: the circle glows once when every key has been visited */
.modplan-circle.egg-glow { animation: egg-glow 2.4s ease-out; }
@keyframes egg-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0); }
  30% { box-shadow: 0 0 0 3px rgba(var(--amber-rgb), 0.8), 0 0 26px rgba(var(--amber-rgb), 0.45); }
}

/* The cheat code: a five-line staff ruled across the paper, then gone */
.egg-staff {
  position: fixed; left: 0; right: 0; top: 42%; height: 4.6rem; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 1.15rem);
  background-size: 100% calc(1.15rem * 4 + 1px); background-repeat: no-repeat;
  animation: egg-staff 2.6s ease-in-out forwards;
}
@keyframes egg-staff {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.9; }
  35% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  70% { opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}


/* ==========================================================
   Phones and other small screens
   Everything above is the computer layout; these rules only
   reflow it (one column, wrapping rows, sideways-scrolling
   tables) so each tool fits a narrow screen.
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no text inflation when a phone turns sideways */
/* Taps register at once (no double-tap-to-zoom wait) on everything you press */
button, select, a, .key, .fb-cell, .cs-card, .ke-cell, .vlab-lanes td { touch-action: manipulation; }
/* Pressing and holding shows a tip (js/tooltips.js), so no phone link-preview or copy menu on controls */
button, a[href], .cs-card, .key, .fb-cell { -webkit-touch-callout: none; }

/* Messages size to their text, never wider than the window */
.app-toast { width: max-content; max-width: calc(100vw - 1.5rem); }

/* Sideways-scrolling areas; position: relative keeps their hidden screen-reader text inside them */
.vlab-lanes-wrap { overflow-x: auto; }
.vlab-lanes-wrap, .ke-table-wrap, .fretboard-wrap { position: relative; }

@media (max-width: 640px) {
  /* ---- Header: scrolls away with the page instead of covering a third of it ---- */
  .app-header { position: static; gap: 0.6rem; padding: 0.75rem 0.9rem 0.8rem; }
  .app-header h1 { flex-basis: 100%; }
  .header-actions { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 0.4rem; }
  .header-actions > button { flex: 1 1 auto; min-height: 2.25rem; padding-inline: 0.4rem; letter-spacing: 0.04em; }
  .hdr-long { display: none; }   /* "Guide & shortcuts" → "Guide" (no keyboard on a phone) */
  /* Tool tabs: a two-column grid of boxes, all six visible at once */
  .tool-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
  .tool-nav a {
    display: flex; align-items: center; min-height: 2.4rem; padding: 0.3rem 0.55rem;
    font-size: 0.79rem; letter-spacing: 0.06em; line-height: 1.25;
    border: 1px solid var(--line-faint);
  }
  .tool-nav a.active { border-color: var(--line); background: var(--fill); }

  /* ---- Page ---- */
  .tool-container { padding: 1.2rem 0.75rem 2rem; }
  .panels, .chord-id .panels { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .panel { min-width: 0; min-height: 0; }
  .panel-head { padding: 0.55rem 0.7rem; }

  /* Control rows: wrap instead of running off the edge; menus shrink to fit */
  .controls { gap: 0.6rem; }
  .controls label { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .controls select { max-width: 100%; min-width: 0; }
  /* Phones zoom the page into any menu with text under 16px, so menus use 16px here */
  select { font-size: 16px !important; }
  .segmented { flex-wrap: wrap; }

  /* ---- Harmony Workbench ---- */
  .chord-id .wb-bar { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 0.8rem; }
  .chord-id .result { column-gap: 0.9rem; min-height: 4.5rem; }
  .chord-id .chord-symbol { min-width: 0; font-size: 2.4rem; }
  .chord-id .wb-actions { flex-direction: row; flex-wrap: wrap; justify-content: stretch; }
  .chord-id .wb-actions button { flex: 1 1 auto; }
  .chord-id .wb-toolbar { justify-content: flex-start; }
  .chord-id .wb-toolbar [data-control="tuning-preset"] { max-width: 100%; }
  .keyboard { height: 170px; }
  .chord-id .panel { max-height: none; }   /* one column: let the lists run down the page */
  .saved-symbol { min-width: 4.2rem; }
  .key-name { min-width: 0; }
  /* Fretboard scrolls sideways; the string names stay pinned at the side */
  .fb-label { position: sticky; inset-inline-start: 0; z-index: 3; background: var(--bg-raised); }

  /* ---- Key Explorer ---- */
  .key-explorer .ke-bar { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 0.8rem; }
  .key-explorer .ke-title { font-size: 1.7rem; }
  .key-explorer .ke-scale-notes { flex-wrap: wrap; gap: 0.3rem; }
  .key-explorer .ke-scale-notes li { min-width: 2.1rem; padding: 0.3rem 0.25rem; }
  .key-explorer .ke-key-controls select { min-width: 0; }
  .ke-table { min-width: 680px; }
  .ke-table .ke-degree-head { width: 4.3rem; padding-inline: 0.45rem; letter-spacing: 0.04em; }
  .ke-table .ke-degree, .ke-table .ke-degree-head {
    position: sticky; left: 0; z-index: 2; background: var(--bg);
    box-shadow: inset -1px 0 0 var(--line-soft);
  }

  /* ---- Mood Progressions ---- */
  .mood-from-wb select, .mood-key-sources select { min-width: 0; }
  .mood-move { gap: 0.7rem; }
  .mood-move-from { font-size: 1.7rem; }
  .mood-move-to { font-size: 2.6rem; }
  .mood-numeral { font-size: 2.6rem; }
  /* Chord cards three to a row, a short last row keeps the same card width */
  .modplan .modplan-strip .mood-step { flex: 0 1 calc((100% - 1rem) / 3); }

  /* ---- Progression strips (Reharmoniser, Voice Leading Lab) ---- */
  .cs-add { flex-wrap: wrap; max-width: 100%; }
  .cs-add [data-cs="type"] { flex: 1 1 8rem; max-width: none; }
  .cs-controls [data-cs="import"] { max-width: 100%; }
  .cs-card { min-width: 5.4rem; }

  /* ---- Pop-ups ---- */
  /* Settings: each label sits above its choices */
  .settings-row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding: 0.5rem 0; }
  .settings-row > .settings-label { padding-top: 0; }
  .settings-panel { padding-inline: 0.8rem; }
  .shortcut-dialog { max-width: calc(100vw - 1rem); max-height: 88vh; padding: 0.8rem 0.9rem 1rem; }
  /* Settings: full width with a small margin, and never taller than the screen below the button */
  .settings-panel { left: 0.5rem !important; right: 0.5rem !important; width: auto; max-height: calc(100dvh - 5.5rem); }
}

/* Short screens (a phone turned sideways): the page is wide enough for the
   computer layout but only a few hundred pixels tall, so nothing stays pinned */
@media (max-height: 500px) {
  .app-header { position: static; }          /* scrolls away (app.js then sets --header-h to 0) */
  .modplan-left { position: static; }        /* the planner's circle is taller than the screen */
  .settings-panel { max-height: calc(100dvh - 4.5rem); }   /* fits under the Settings button */
}

/* Phones either way up */
@media (max-width: 640px), (max-height: 500px) {
  /* Now playing: a slim strip at the top edge, out of the way of the keyboard and buttons */
  .now-playing {
    top: 0.4rem; bottom: auto; left: 50%; right: auto;
    display: flex; align-items: baseline; gap: 0.5rem;
    width: max-content; max-width: calc(100vw - 1rem);
    padding: 0.25rem 0.7rem;
    transform: translate(-50%, -0.4rem);
    background: var(--bg-raised); box-shadow: 0 3px 10px var(--shadow);
  }
  .now-playing.show { transform: translate(-50%, 0); }
  .now-playing .np-title, .now-playing .np-keys { display: none; }
  .now-playing .np-name { margin: 0; min-height: 0; font-size: 1rem; white-space: nowrap; }
  .now-playing .np-notes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}