/* TrackGuide v3.6 — Groovert-inspired, large-screen touch interface */
:root {
  color-scheme: dark;
  --bg: #223432;
  --tile: #304241;
  --tile-soft: #2b3d3b;
  --text: #e0e9e9;
  --muted: #afc3c5;
  --green: #265140;
  --green-bright: #8bff91;
  --red: #453936;
  --radius: 9px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: Arial, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { display: flex; justify-content: center; }
button { font: inherit; font-weight: 600; color: var(--text); border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .song-item:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
.screen { display: none; flex-direction: column; gap: 7px; padding: 8px; background: var(--bg); width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
.screen.active { display: flex; }
@media (min-width: 601px) { .screen { width: min(100%, 600px); padding: 10px 0; } }
.song-header { background: var(--tile); border-radius: var(--radius); padding: 13px 12px; text-align: center; flex-shrink: 0; }
#song-title { font-size: clamp(27px, 7vw, 40px); font-weight: 700; line-height: 1.16; text-transform: uppercase; overflow-wrap: anywhere; }
.section-card { background: var(--tile); border: 0; border-radius: var(--radius); padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.current-card { flex: 1.25 1 0; }
.next-card { background: var(--tile-soft); }
.section-title-display { text-shadow: 0 0 16px var(--theme-glow, transparent); font-size: clamp(29px, 7.5vw, 42px); font-weight: 700; line-height: 1.12; color: var(--theme-text, var(--text)); overflow-wrap: anywhere; }
#countdown-bars { text-shadow: 0 0 20px var(--theme-glow, transparent); font-size: clamp(76px, 23vw, 124px); line-height: 1.02; font-weight: 800; color: var(--theme-text, var(--green-bright)); margin-top: 7px; font-variant-numeric: tabular-nums; }
#next-cue { opacity: .92; font-size: clamp(23px, 6.5vw, 33px); line-height: 1.23; font-weight: 450; color: var(--theme-text, var(--muted)); margin-top: 12px; overflow-wrap: anywhere; }
.metronome-btn { width: 100%; min-height: 78px; padding: 13px 10px; flex-shrink: 0; border-radius: var(--radius); background: var(--tile); color: #b8cbd1; font-size: clamp(29px, 7vw, 37px); letter-spacing: .02em; }
.metronome-btn.active { background: #385751; color: #b7ffc0; }
.bpm-control-box { display: grid; grid-template-columns: 1fr 1fr 2.2fr 1fr 1fr; gap: 6px; min-height: 80px; flex-shrink: 0; }
.bpm-adj-btn { min-width: 0; padding: 0; border-radius: var(--radius); background: var(--tile); font-size: clamp(21px, 5vw, 28px); }
.control-btn { min-width: 0; border-radius: var(--radius); font-size: clamp(32px, 8vw, 42px); }
.play-btn { background: var(--green); color: #dcffe1; }
.play-btn.active { background: var(--red); color: #ffe2e1; }
.nav-bottom-box { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }
.sub-nav-btn, .back-btn { background: var(--tile); border-radius: var(--radius); padding: 13px 10px; font-size: clamp(20px, 5.4vw, 28px); min-height: 72px; }
.sub-nav-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 550; }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0 7px; flex-shrink: 0; }
.list-header h2 { margin: 0; font-size: clamp(29px, 7vw, 40px); line-height: 1.14; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
.back-btn { flex-shrink: 0; min-height: 65px; padding-inline: 17px; }
#song-list-container, #sections-overview-container { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; padding: 2px 0 12px; }
.song-item, .overview-item { background: var(--tile); border: 0; border-radius: var(--radius); padding: 19px 17px; flex-shrink: 0; }
.song-item { cursor: pointer; }
.song-item:active { filter: brightness(1.16); }
.song-item-title, .overview-item-title { font-size: clamp(27px, 7vw, 36px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.song-item-details, .overview-item-details { font-weight: 400; font-size: clamp(22px, 5.8vw, 29px); line-height: 1.3; color: var(--muted); margin-top: 9px; }
.overview-item-cue { opacity: .94; font-size: clamp(23px, 6.1vw, 31px); line-height: 1.28; color: var(--theme-text, #f6d78a); font-weight: 500; margin-top: 12px; overflow-wrap: anywhere; }
/* Existing section associations; rendered as subdued tiles with vivid readable lettering. */
.sec-type-aftellen { background: #3b3b2c !important; --theme-text: #ffe082; --theme-soft: #fff0b3; --theme-glow: #ffe08233; }
.sec-type-intro { background: #29434d !important; --theme-text: #81d4fa; --theme-soft: #bdeaff; --theme-glow: #81d4fa33; }
.sec-type-couplet, .sec-type-verse { background: #2b493a !important; --theme-text: #a5d6a7; --theme-soft: #d1efd3; --theme-glow: #a5d6a733; }
.sec-type-refrein, .sec-type-chorus { background: #4a3839 !important; --theme-text: #ef9a9a; --theme-soft: #ffd1d1; --theme-glow: #ef9a9a33; }
.sec-type-brug, .sec-type-bridge { background: #3e3549 !important; --theme-text: #d5a5ec; --theme-soft: #ead5f5; --theme-glow: #d5a5ec33; }
.sec-type-solo { background: #483b30 !important; --theme-text: #ffcc80; --theme-soft: #ffe4ba; --theme-glow: #ffcc8033; }
.sec-type-outro { background: #29484b !important; --theme-text: #80deea; --theme-soft: #b6f0f5; --theme-glow: #80deea33; }
.sec-type-eind, .sec-type-end { background: #414443 !important; --theme-text: #e0e0e0; --theme-soft: #f4f4f4; --theme-glow: #e0e0e033; }
@media (max-height: 730px) {
  .screen { gap: 5px; padding-block: 6px; }
  .song-header { padding: 8px; }
  .section-card { padding: 7px; }
  #countdown-bars { font-size: clamp(50px, 14vh, 85px); margin-top: 1px; }
  .metronome-btn { min-height: 59px; }
  .bpm-control-box { min-height: 60px; }
  .sub-nav-btn { min-height: 56px; padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Subtle, within-palette contrast: section title/count highlighted; notes softer. */
#next-cue, .overview-item-cue { color: var(--theme-soft, var(--theme-text, var(--muted))); }
.overview-item-title { color: var(--theme-text, var(--text)); }
.overview-item-details { color: var(--theme-soft, var(--muted)); opacity: .82; }
.song-item-title { font-weight: 650; }
.song-item-details { font-weight: 400; }

/* Extra information for band members: displayed, never spoken. */
#next-note {
  font-size: clamp(22px, 5.8vw, 31px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--theme-soft, var(--muted));
  margin-top: 8px;
  overflow-wrap: anywhere;
}
#next-cue:empty, #next-note:empty { display: none; }
.overview-item-note {
  font-size: clamp(22px, 5.8vw, 29px);
  font-weight: 400;
  line-height: 1.32;
  margin-top: 8px;
  color: var(--theme-soft, var(--muted));
}
/* Desktop: landscape composition, large song panels and a usable structure overview. */
@media (min-width: 900px) {
  body { align-items: center; min-height: 100vh; }
  .screen { width: min(1320px, calc(100vw - 56px)); height: min(860px, calc(100dvh - 36px));
    padding: 22px; gap: 14px; border-radius: 20px; }
  #player-screen.active { display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 14px; }
  #player-screen .song-header { grid-column: 1 / -1; padding: 20px; }
  #song-title { font-size: clamp(36px, 3.7vw, 56px); }
  #player-screen .current-card { grid-column: 1; grid-row: 2; }
  #player-screen .next-card { grid-column: 2; grid-row: 2; }
  .section-card { padding: 24px; min-height: 0; }
  .section-title-display { font-size: clamp(30px, 3.2vw, 52px); }
  #countdown-bars { font-size: clamp(90px, 13vw, 180px); }
  #next-cue, #next-note { font-size: clamp(24px, 2.3vw, 36px); }
  .metronome-btn { grid-column: 1 / -1; grid-row: 3; min-height: 78px; font-size: 36px; }
  .bpm-control-box { grid-column: 1 / -1; grid-row: 4; min-height: 84px; }
  .nav-bottom-box { grid-column: 1 / -1; grid-row: 5; }
  .bpm-adj-btn { font-size: 30px; }
  .sub-nav-btn { min-height: 70px; }
  #overview-screen, #list-screen { padding: 26px 30px; }
  #sections-overview-container { display: flex; flex-direction: column; gap: 14px; }
  #song-list-container { display: flex; flex-direction: column; gap: 14px; }
  .overview-item, .song-item { padding: 24px; }
  .overview-item-title, .song-item-title { font-size: clamp(29px, 2.8vw, 40px); }
  .overview-item-details, .song-item-details, .overview-item-note, .overview-item-note { font-size: clamp(22px, 2vw, 30px); }
}
@media (min-width: 900px) and (max-height: 650px) {
  .screen { padding: 10px 20px; gap: 7px; }
  #player-screen.active { gap: 7px; }
  #player-screen .song-header { padding: 8px; }
  .section-card { padding: 10px; }
  #countdown-bars { font-size: clamp(65px, 10vh, 110px); }
  .metronome-btn, .bpm-control-box { min-height: 56px; }
  .sub-nav-btn { min-height: 50px; }
}

/* v3.8: spoken cues remain within the section's brighter tint; silent notes use a quieter contrasting tint. */
#next-cue, .overview-item-cue { color: var(--theme-text, var(--text)); font-weight: 600; }
#next-note, .overview-item-note { color: var(--muted); font-weight: 400; opacity: 1; }
#next-note { font-size: clamp(21px, 5.5vw, 29px); line-height: 1.3; margin-top: 9px; }
.overview-item-note { font-size: clamp(21px, 5.4vw, 28px); }
.voice-control { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: var(--radius); background: var(--tile); min-height: 54px; flex-shrink: 0; }
.voice-control label { color: var(--muted); font-size: clamp(18px, 4.4vw, 23px); white-space: nowrap; }
.voice-control input { accent-color: var(--green-bright); flex: 1; min-width: 0; height: 28px; cursor: pointer; }
.voice-control output { min-width: 49px; font-size: clamp(18px, 4.2vw, 22px); text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  #player-screen.active { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
  .voice-control { grid-column: 1 / -1; grid-row: 4; }
  .bpm-control-box { grid-row: 5; }
  .nav-bottom-box { grid-row: 6; }
  #next-cue, #next-note { font-size: clamp(24px, 2.2vw, 35px); }
}
@media (max-height: 730px) {
  .voice-control { min-height: 44px; padding-block: 6px; }
}

/* v4.1: sectie-notes zijn onderdeel van de gesproken aankondiging. */
#next-cue, .overview-item-notes { color: var(--theme-text, var(--text)); font-weight: 600; }
#next-note { color: var(--muted); font-weight: 400; }
.overview-item-notes { font-size: clamp(23px, 6.1vw, 31px); line-height: 1.28; margin-top: 12px; overflow-wrap: anywhere; }
@media (min-width: 900px) { .overview-item-notes { font-size: clamp(24px, 2.2vw, 34px); } }