/* ---------- Design tokens ---------- */
:root {
  --bg: #F2E4C6;
  --surface: #E9D6AC;
  --surface-raised: #EFDDB6;
  --line: #C9A96E;
  --ink: #3B2A18;
  --ink-soft: #6B563A;
  --amber: #C8791E;
  --amber-deep: #A2540F;
  --ember: #B4432A;
  --good: #5C7A45;
  --shadow: rgba(59, 42, 24, 0.18);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
}

[data-theme="dark"] {
  --bg: #221609;
  --surface: #32220F;
  --surface-raised: #3C2A14;
  --line: #5B4426;
  --ink: #F3E4C6;
  --ink-soft: #C4AC82;
  --amber: #E0972F;
  --amber-deep: #F2AC4C;
  --ember: #E06B45;
  --good: #8FB56E;
  --shadow: rgba(0, 0, 0, 0.45);
}

/* ---------- Piano palette ----------
   Same layout, cooler skin: ivory-and-slate instead of campfire amber. The
   attribute selector on `body` outranks the plain `[data-theme]` rules, and
   the combined `body[data-instrument][data-theme="dark"]` rule outranks
   this one, so the four combinations resolve cleanly. */
body[data-instrument="piano"] {
  --bg: #ECEEF2;
  --surface: #E1E4EB;
  --surface-raised: #F5F6F9;
  --line: #B6BCC9;
  --ink: #23262D;
  --ink-soft: #59606F;
  --amber: #45618F;
  --amber-deep: #2E4568;
  --ember: #7A4E8C;
  --good: #4E7A5C;
  --shadow: rgba(28, 33, 43, 0.16);
}

body[data-instrument="piano"][data-theme="dark"] {
  --bg: #14171C;
  --surface: #1E222A;
  --surface-raised: #272C36;
  --line: #3C424E;
  --ink: #EDEFF3;
  --ink-soft: #A7AEBC;
  --amber: #7098CE;
  --amber-deep: #95AFDD;
  --ember: #BC93CD;
  --good: #85B393;
  --shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  /* Nav-coloured, not page-coloured: if iOS ever leaves a sliver below the
     shell (safe-area rounding), it matches the bottom bar instead of
     flashing the lighter page background. #page-container paints the real
     page colour over the top. */
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
  /* Only #page-container scrolls -- stops iOS standalone from rubber-banding
     the whole page. */
  overflow: hidden;
  overscroll-behavior: none;
}

.app {
  /* Percentage height chained from html -> body (both height:100%) tracks
     the real screen in iOS standalone, where 100vh/100dvh and even
     position:fixed;inset:0 came up short and left the nav floating above
     the edge. */
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* anchor for the floating Settings button */
}

/* ---------- Floating Settings button ---------- */
/* Sits top-left on every page (hidden on the Settings page, which has its
   own back arrow). Below the library overlays (z-index 20) so they cover it. */
.settings-fab {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 0.5rem);
  left: 0.65rem;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-fab:active { transform: translateY(1px); }
.settings-fab[hidden] { display: none; }

/* ---------- Page header (Settings, Chords) ---------- */
.page-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.page-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
}
/* A standalone title (no back arrow beside it) has to clear the gear. */
.page-head .page-title { margin-left: 0; }
#page-chords .page-title { margin-left: 2.6rem; }

/* ---------- Pages ---------- */
#page-container {
  flex: 1;
  min-height: 0; /* let the flex child actually shrink so it, not the body, scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg);
  /* top inset keeps the header clear of the status bar / notch */
  padding: calc(1.4rem + env(safe-area-inset-top)) 1.25rem 1.6rem;
}

.page[hidden] { display: none; }

.placeholder {
  margin-top: 3rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Bottom nav ---------- */
/* A non-scrolling flex child at the bottom of the shell -- not position:
   fixed, so iOS overscroll can't peel it away from the edge. */
.bottom-nav {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 0.5rem 0.4rem calc(0.6rem + env(safe-area-inset-bottom));
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
}

.nav-btn svg { stroke: currentColor; }

.nav-btn.is-active { color: var(--amber-deep); }

/* Piano mode has no tuner -- drop the button and the remaining three space
   themselves evenly (each is still flex: 1). */
body[data-instrument="piano"] .nav-btn--tuner { display: none; }

/* The Chords tab icon follows the instrument: chord grid for guitar, a small
   keyboard for piano. */
.nav-chords-ic--piano { display: none; }
body[data-instrument="piano"] .nav-chords-ic--guitar { display: none; }
body[data-instrument="piano"] .nav-chords-ic--piano { display: block; }

/* ---------- Tuner ---------- */
.tuner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.25rem;
}

.tuner__mic-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.mic-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--amber);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--amber-deep);
}

.mic-button:active { box-shadow: none; transform: translateY(3px); }

.mic-button.is-listening {
  background: var(--ember);
  box-shadow: 0 3px 0 var(--amber-deep);
}

.tuner__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  min-height: 1.1em;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.tuner__hint.is-fading { opacity: 0; }

.meter { width: 100%; max-width: 320px; }

#meter-track { stroke: var(--line); }
#meter-needle { stroke: var(--amber-deep); transition: transform 0.12s ease-out; transform-origin: 150px 160px; }
#meter-hub { fill: var(--amber-deep); }

.meter-tick { stroke: var(--ink-soft); stroke-width: 1.5; }
.meter-tick.center { stroke: var(--ink); stroke-width: 2.5; }

.tuner__readout {
  text-align: center;
  margin-top: -0.4rem;
}

.tuner__note {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

#confirm-check {
  color: var(--good);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tuner__note.confirmed #confirm-check {
  opacity: 1;
  transform: scale(1);
}

.tuner__note.confirmed {
  animation: note-pop 0.35s ease;
}

@keyframes note-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.tuner__cents {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

.tuner__cents span { font-size: 0.85rem; }

.tuner__freq {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.tuner__note.in-tune { color: var(--good); }

.tuner__strings {
  display: flex;
  gap: 0.5rem;
  margin: 1.4rem 0 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.string-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--surface);
}

.string-chip {
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.string-chip.active {
  border-color: var(--amber-deep);
  color: var(--amber-deep);
  background: var(--surface-raised);
}

.string-chip.done {
  color: var(--good);
  border-color: var(--good);
}

.field-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.field-row label { font-size: 0.9rem; color: var(--ink-soft); }

select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: none;
  text-align: right;
}

/* ---------- Metronome ---------- */
.metronome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}

.metro-meter { width: 100%; max-width: 230px; }

#metro-meter-track { stroke: var(--line); }
#metro-needle {
  stroke: var(--amber-deep);
  transform-origin: 100px 138px;
  transition-property: transform;
  transition-timing-function: linear;
}
#metro-hub { fill: var(--amber-deep); }

.metronome__beats {
  display: flex;
  gap: 0.55rem;
  margin: 0.4rem 0 1.3rem;
}

.beat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}

.beat-dot.accent { width: 12px; height: 12px; }

.beat-dot.active {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  transform: scale(1.15);
}

.metronome__bpm-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}

.metro-step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.metro-step:active { transform: translateY(1px); }

.metronome__bpm {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 112px;
}

.metronome__bpm-input {
  width: 112px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
}

.metronome__bpm-input::-webkit-outer-spin-button,
.metronome__bpm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.metronome__bpm-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.tap-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
  cursor: pointer;
}

.tap-button:active { transform: translateY(1px); }

.metronome .field-row { margin-bottom: 1.1rem; }

.metronome__toggle { min-width: 140px; justify-content: center; }

/* ---------- Library ---------- */
.library {
  display: flex;
  flex-direction: column;
  padding-top: 0.25rem;
}

.library__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.library__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 0 2.6rem; /* clear the floating Settings gear top-left */
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--amber);
  color: var(--bg);
  box-shadow: 0 3px 0 var(--amber-deep);
  cursor: pointer;
  flex-shrink: 0;
}

.add-button:active { box-shadow: none; transform: translateY(3px); }

.library__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Segmented slider: guitar on the left, piano on the right, with a round
   thumb that slides between them on tap (click only -- it never drags). */
.instrument-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 66px;
  height: 34px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
}

.instrument-switch__icon {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-soft);
  transition: color 0.2s ease;
  z-index: 1;
}

.instrument-switch__icon--guitar { left: 9px; }
.instrument-switch__icon--piano { right: 9px; }

.instrument-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform 0.2s ease;
  z-index: 0;
}

body[data-instrument="piano"] .instrument-switch__thumb { transform: translateX(33px); }

/* Whichever icon the thumb sits under flips to the thumb's contrast colour;
   the other stays muted. */
body[data-instrument="guitar"] .instrument-switch__icon--guitar,
body[data-instrument="piano"] .instrument-switch__icon--piano {
  color: var(--bg);
}

.library__empty {
  margin-top: 3rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.library__empty p { margin: 0.2rem 0; }

/* Shared song list, used by the library, search results and (later) other
   song pickers -- one row template for all of them. */
.song-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.song-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
}

.song-item:active { transform: translateY(1px); }

.song-item__art {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-raised);
  flex-shrink: 0;
}

.song-item__info {
  flex: 1;
  min-width: 0;
}

.song-item__title {
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item__artist {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.song-item__fav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--line);
  cursor: pointer;
}

.song-item__fav[aria-pressed="true"] {
  color: var(--amber-deep);
}

.song-item__fav[aria-pressed="true"] svg path {
  fill: currentColor;
}

/* Small "still learning" flag shown in the library list -- mirrors the state
   set from the detail page's own learning button. */
.song-item__learning {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ember);
  margin-right: -0.35rem;
}
.song-item__learning svg path:last-child { fill: currentColor; }

.search-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-height: 1.2em;
  margin: 0 0 0.7rem;
}

/* ---------- Custom song (add one that isn't in the catalogue) ---------- */
.custom-song { margin-bottom: 0.9rem; }

.custom-song__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0.2rem;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.custom-song__toggle[hidden] { display: none; }
.custom-song__toggle svg { color: var(--ink-soft); flex-shrink: 0; }

.custom-song__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.custom-song__form[hidden] { display: none; }

.custom-song__input {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}

.custom-song__input::placeholder { color: var(--ink-soft); }

.custom-song__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.1rem;
}

.custom-song__cancel {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}

.custom-song__save {
  border: none;
  background: var(--amber);
  color: var(--bg);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 3px 0 var(--amber-deep);
  cursor: pointer;
}

.custom-song__save:active { box-shadow: none; transform: translateY(3px); }

/* ---------- Overlays (search / song detail) ---------- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Stops above the bottom nav (kept in-flow, not fixed -- see .bottom-nav)
     instead of covering the full viewport, so the nav bar -- and its
     "Library" button -- stays visible and tappable while a song's detail
     page (or search) is open. --bottom-nav-h is measured in js/app.js;
     the fallback only matters for the first paint before that JS runs. */
  bottom: var(--bottom-nav-h, 4.75rem);
  z-index: 20;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay[hidden] { display: none; }

.overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Sticky, not just top-of-flow -- stays reachable (and visible) no matter
     how far the page/song content below it has been scrolled. The negative
     margin + matching padding lets its background span edge-to-edge so
     scrolled content doesn't show through beside it. */
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -1.25rem 1rem;
  padding: 0 1.25rem 0.6rem;
  background: var(--bg);
}

.overlay__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.overlay__back:active { transform: translateY(1px); }

.overlay__search-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
}

.overlay__search-input::placeholder { color: var(--ink-soft); }

.overlay__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Spotify green is a brand colour -- it stays put in both themes. */
.header-spotify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1db954;
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
}

.header-spotify-btn:active { transform: translateY(1px); }

.overlay__fav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--line);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.overlay__fav[aria-pressed="true"] { color: var(--amber-deep); }
.overlay__fav[aria-pressed="true"] svg path { fill: currentColor; }

/* ---------- Song detail ---------- */
.song-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1rem;
}

.song-detail__art {
  width: 168px;
  height: 168px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--surface-raised);
  box-shadow: 0 6px 16px var(--shadow);
  margin-bottom: 1.2rem;
}

.song-detail__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.2rem;
}

.song-detail__artist {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
}

.song-detail__meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 1.4rem;
}

.song-detail__save-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.save-button {
  border: 1px solid var(--amber-deep);
  background: transparent;
  color: var(--amber-deep);
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.save-button.is-saved {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
}

.save-button:active { transform: translateY(1px); }

/* "Still learning" marker -- sits beside the save button, only shown once a
   song is actually saved (matches detail-favorite-btn's own hidden rule). */
.detail-learning-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.detail-learning-btn[hidden] { display: none; }
.detail-learning-btn:active { transform: translateY(1px); }

.detail-learning-btn[aria-pressed="true"] {
  border-color: var(--ember);
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 14%, var(--surface));
}
.detail-learning-btn[aria-pressed="true"] svg path:last-child { fill: currentColor; }

/* "Open in metronome" -- only shown once a tempo has been found. */
.detail-metro-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
}

.detail-metro-btn[hidden] { display: none; }
.detail-metro-btn:active { transform: translateY(1px); }
.detail-metro-btn svg { color: var(--ink-soft); flex-shrink: 0; }
.detail-metro-btn b { font-weight: 600; }

.song-detail__note {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  max-width: 30ch;
}

/* ---------- Song detail: external chord / tab links ---------- */
.song-links {
  width: 100%;
  margin-top: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  text-align: left;
}

/* Author `display` beats the UA [hidden] rule -- spell out the hidden case
   (custom songs have no links section at all). */
.song-links[hidden] { display: none; }

.song-links__group {
  display: flex;
  flex-direction: column;
}

/* Author `display` beats the UA [hidden] rule, so hiding the Tabs group in
   piano mode needs to be spelled out. */
.song-links__group[hidden] { display: none; }

.song-links__heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
}

.song-links__sub {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}

.song-links__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.source-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
}

.source-link:active { transform: translateY(1px); }

.source-link svg {
  color: var(--ink-soft);
  flex-shrink: 0;
}

/* ---------- Song sheet (lyrics with chords above them) ---------- */
.songsheet {
  width: 100%;
  margin-top: 1.6rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.songsheet[hidden] { display: none; }

/* Disclosure header -- always visible; the panel below it is what collapses. */
.songsheet__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.15rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.songsheet__toggle-label { flex: 1; }
.songsheet__toggle-note {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.songsheet__chev {
  display: flex;
  color: var(--ink-soft);
  transition: transform 0.18s ease;
}
.songsheet__toggle[aria-expanded="true"] .songsheet__chev { transform: rotate(180deg); }

.songsheet__panel { margin-top: 1rem; }
.songsheet__sub {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.3rem 0 0.8rem;
}
.songsheet__meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}
.songsheet__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

.songsheet__btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.songsheet__btn:active { transform: translateY(1px); }
.songsheet__btn--primary {
  border-color: var(--amber-deep);
  background: var(--amber);
  color: var(--bg);
  font-weight: 600;
}
.songsheet__btn--sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }

.songsheet__editor {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.songsheet__textarea {
  width: 100%;
  resize: vertical;
  min-height: 9rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  tab-size: 4;
}
.songsheet__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.songsheet__actions--start { justify-content: flex-start; margin-bottom: 0.7rem; }

.songsheet__btn[disabled] { opacity: 0.5; cursor: default; }

.songsheet__status {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
}
.songsheet__status--error { color: var(--ember); }

/* Two stacked rows -- primary actions (autoscroll, edit) on top, the
   quieter/rarer ones (transpose, remove) tucked underneath so the toolbar
   doesn't read as a wall of equally-weighted buttons. */
.songsheet__bar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.songsheet__bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 32px;
}
.songsheet__bar-row--secondary { opacity: 0.82; }
.songsheet__transpose {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.songsheet__step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.songsheet__step:active { transform: translateY(1px); }
.songsheet__transpose-val {
  min-width: 2.4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.songsheet__btn--danger {
  border-color: var(--ember);
  color: var(--ember);
}
.songsheet__confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.songsheet__confirm-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.songsheet__scroll-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
}
.songsheet__scroll-toggle {
  width: 18px;
  height: 18px;
  accent-color: var(--amber);
  cursor: pointer;
}
.songsheet__scroll-speed {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.songsheet__scroll-speed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.songsheet__scroll-speed-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.songsheet__scroll-speed input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
}

/* Floating autoscroll control -- fixed to the viewport (a body-level node,
   see js/songsheet.js) so it stays put and reachable no matter how far the
   sheet has scrolled. Shown any time the sheet panel is expanded and has
   lyrics to scroll through (not just while autoscroll is actually running),
   since it's now the only place to turn autoscroll on. */
.songsheet__fab {
  position: fixed;
  right: calc(1.1rem + env(safe-area-inset-right));
  /* Sits just above the bottom nav -- which stays visible/reachable while a
     song's detail page is open, see .overlay -- rather than a guessed
     offset, so it never sits on top of it regardless of device/safe-area. */
  bottom: calc(var(--bottom-nav-h, 4.75rem) + 0.85rem);
  z-index: 25;
}
.songsheet__fab-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.songsheet__fab-btn:active { transform: translateY(1px); }
/* Filled amber once autoscroll is actually running -- neutral/outline the
   rest of the time, since the FAB is now shown whenever there's a sheet to
   scroll through, not just while it's moving. */
.songsheet__fab-btn.is-active {
  border-color: var(--amber-deep);
  background: var(--amber);
  color: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.songsheet__fab-menu {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  right: 0;
  z-index: 5;
  width: 12rem;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.songsheet__fab-stop { width: 100%; }

.songsheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.songsheet__chip {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.songsheet__chip:active { transform: translateY(1px); }
.songsheet__chip.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg);
  font-weight: 600;
}

.songsheet__chipcard {
  margin-top: 0.7rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.songsheet__chipcard[hidden] { display: none; }
.mini-chord__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.mini-chord__diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}
.mini-chord__diagram .fretboard { width: 140px; }
.mini-chord__diagram .keyboard { max-width: 260px; }
.mini-chord__notes {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.songsheet__body {
  margin-top: 1.4rem;
  overflow-x: auto;
}
.ss-section { margin-bottom: 1.3rem; }
.ss-section:last-child { margin-bottom: 0; }
.ss-section__label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--amber-deep);
  margin-bottom: 0.4rem;
}
.ss-break { height: 0.8rem; }

.ss-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  line-height: 1.35;
  margin: 0.15rem 0;
}
.ss-seg {
  display: inline-flex;
  flex-direction: column;
  white-space: pre;
}
.ss-seg__chord {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber-deep);
  min-height: 1.15em;
}
/* Added by renderLine() only when the chord is wider than its syllable, so
   adjacent chords don't collide -- without punching gaps into dense lines. */
.ss-seg__chord--pad { padding-right: 0.6em; }
.ss-seg__lyric {
  font-size: 0.95rem;
  color: var(--ink);
}

/* Tappable inline chords -- opens the same small diagram as the chip row,
   right next to the word (see .ss-chord-popover). */
.ss-seg__chord--tap {
  cursor: pointer;
  border-radius: 3px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--amber-deep) 55%, transparent);
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}
.ss-seg__chord--tap.is-active {
  background: var(--amber);
  color: var(--bg);
  text-decoration: none;
}

/* The floating chord diagram opened by tapping an inline chord -- a
   body-level fixed node (like the FAB) positioned in JS next to the tapped
   chord, so it isn't clipped by the overlay's own overflow-y:auto. Content
   (name/diagram/notes) comes from the same GuitarChords.renderInto() used
   by the chip row and the chord book, via the shared .mini-chord__* rules. */
.ss-chord-popover {
  position: fixed;
  z-index: 26;
  width: 11rem;
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* ---------- Settings ---------- */
.settings-list {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-row__title { font-size: 0.95rem; }
.settings-row__desc { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }

/* Rows that hold inputs/buttons stack their contents instead of sitting them
   side by side. */
.settings-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.settings-row--stack[hidden] { display: none; }

.stack-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.stack-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.settings-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.55rem;
  min-height: 1em;
}
.settings-note.is-error { color: var(--ember); }
#account-signed-out,
#account-signed-in { width: 100%; }

.settings-version {
  margin: 1.1rem 1rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.75;
  text-align: center;
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  width: 44px;
  height: 26px;
  margin: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font: inherit;
  line-height: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle__thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber-deep);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

/* Flexbox (align-items: center + equal padding) centers the thumb on both
   axes automatically -- no hand-tuned top/left offsets to drift out of
   sync with the track size again. */
.theme-toggle[aria-pressed="true"] .theme-toggle__thumb { transform: translateX(18px); }

/* ---------- Chord book ---------- */
.chords { display: block; }

.chords__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chords__sub {
  margin: 0.15rem 0 1.1rem 2.6rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.chord-roots,
.chord-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.chord-types { margin-bottom: 1.2rem; }

.chord-chip {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chord-chip--type { min-width: 3rem; }
.chord-chip:active { transform: translateY(1px); }
.chord-chip.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg);
  font-weight: 600;
}

.chord-card {
  margin-top: 0.3rem;
  padding: 1.3rem 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.chord-card__name {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1rem;
}
.chord-card__diagram {
  display: flex;
  justify-content: center;
  min-height: 120px;
  align-items: center;
}
.fretboard { width: 172px; height: auto; overflow: visible; }
.keyboard { width: 100%; max-width: 320px; height: auto; }

.chord-card__notes {
  margin-top: 1rem;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.chord-card__hint {
  margin: 0.4rem 0 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
  min-height: 1em;
}