/**
 * Main stylesheet - all styles combined
 */

/* Variables */
:root {
  --bg: #0f1220;
  --panel: #171a2b;
  --muted: #9aa4b2;
  --text: #e8ecf3;
  --accent: #7dd3fc;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
}

/* Music font for proper ♯ ♭ ♮ (SMuFL) */
@font-face {
  font-family: "Bravura";
  src: url("./assets/fonts/Bravura.otf") format("opentype");
  font-display: swap;
}

/* Base styles */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #0e1220, #0c101b 30%, #0b0f19);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  min-height: 100svh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.showHeaderFab {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #1f2336;
  background: rgba(15, 20, 38, 0.95);
  color: var(--text);
  font-weight: 650;
}

.appHeader {
  padding: 14px 18px;
  border-bottom: 1px solid #1f2336;
  background: #0e1220;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Theory sidebar should be above header */
@media (min-width: 1024px) {
  body.theory-sidebar-active .theory-sidebar {
    z-index: 1001;
  }
  
  body.theory-sidebar-active .appHeader {
    z-index: 1000;
  }
}

.appHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.appTitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.appHeaderBadges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.controlRibbon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px 0 2px;
}

.controlGroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #1f2336;
  border-radius: 10px;
  background: #0f1426;
  flex-wrap: wrap;
}

.controlGroup label {
  margin: 0;
  font-size: 12px;
  color: #b7c0ce;
}

.controlGroup input[type="number"],
.controlGroup select {
  width: auto;
  min-width: 80px;
}

.controlInline {
  gap: 4px;
}

.compactChip select {
  background: transparent;
  border: none;
  color: inherit;
  padding-left: 6px;
}

.micChip {
  white-space: nowrap;
}

.appHeaderControls {
  padding-top: 4px;
  border-top: 1px solid #1f2336;
}

.controls-collapsed .controlRibbon {
  display: none;
}

.controls-collapsed .appHeaderControls {
  padding-bottom: 4px;
}

.revealButtonsBlock {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appHeader h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.2px;
}

.appHeader .subtitle {
  color: var(--muted);
}

.wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.main-content-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  height: 100%;
}

.theory-sidebar {
  display: none;
  width: 0;
  min-width: 0;
  max-width: 80%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #1f2336;
  background: var(--panel);
  position: relative;
  flex-shrink: 0;
}

.theory-sidebar-resizer {
  display: none;
  width: 4px;
  background: #1f2336;
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.2s;
}

.theory-sidebar-resizer:hover {
  background: #39406a;
}

.theory-sidebar-resizer::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  cursor: col-resize;
}

/* Sidebar layout for large screens when theory tab is active */
@media (min-width: 1024px) {
  body.theory-sidebar-active .main-content-wrapper {
    /* Layout adjusts to accommodate sidebar */
  }
  
  body.theory-sidebar-active .main-content-left {
    /* Main content shrinks to make room for sidebar */
    width: calc(100% - var(--theory-sidebar-width, 400px) - 4px);
    flex: 0 0 auto;
  }
  
  body.theory-sidebar-active .theory-sidebar {
    display: block;
    width: var(--theory-sidebar-width, 400px);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    background: var(--panel);
  }
  
  body.theory-sidebar-active .theory-sidebar-resizer {
    display: block;
  }
  
  /* Move theory panel to sidebar on large screens when active */
  body.theory-sidebar-active .main-content-left #panel-theory {
    display: none !important;
  }
}

/* On small screens, theory panel should be in main content, not sidebar */
@media (max-width: 1023px) {
  .theory-sidebar {
    display: none !important;
  }
  
  .theory-sidebar-resizer {
    display: none !important;
  }
  
  /* On phones, theory tab works as a regular tab */
  body.theory-sidebar-active .main-content-left {
    width: 100% !important;
    flex: 1 !important;
  }
}

main {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom Scrollbar Styling */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #0f1426;
  border-left: 1px solid #1f2336;
}

::-webkit-scrollbar-thumb {
  background: #2a3051;
  border-radius: 6px;
  border: 2px solid #0f1426;
}

::-webkit-scrollbar-thumb:hover {
  background: #39406a;
}

::-webkit-scrollbar-thumb:active {
  background: #4a5a7a;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a3051 #0f1426;
}

/* Components */
fieldset {
  border: 1px solid #262b44;
  border-radius: 12px;
  padding: 12px 12px 8px;
  margin: 0 0 12px 0;
}

legend {
  padding: 0 6px;
  color: #9aa4b2;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

label {
  display: block;
  margin: 8px 0 4px;
  color: #b7c0ce;
}

input[type="range"] {
  width: 100%;
}

select,
input[type="number"],
input[type="text"],
input[type="checkbox"] {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #273056;
  background: #0f1426;
  color: #e9edf6;
}

select,
input[type="number"],
input[type="text"] {
  width: 100%;
}

button {
  appearance: none;
  border: 1px solid #2a3051;
  background: #1a1f35;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  border-color: #39406a;
}

button.primary {
  background: #e6b968;
  border-color: transparent;
  color: #241a06;
  font-weight: 700;
}
button.primary:hover { background: #eec580; }
button.primary:disabled { background: #2a3350; color: #8890ac; border-color: #2b465f; }

button.good {
  border-color: #1f513f;
  background: #16382d;
}

button.bad {
  border-color: #5b2c2c;
  background: #3a1b1b;
}

.difficulty-btn {
  font-size: 12px;
  padding: 6px 12px;
  flex: 1;
}

.difficulty-btn.active {
  background: #2a3a4a;
  border-color: #4a5a6a;
  color: var(--accent);
}

.chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #2b324f;
  background: #141a2f;
  color: #bcd;
}

.pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #12182a;
  border: 1px solid #273056;
}

canvas {
  width: 100%;
  /* Only the ear-training tabs use this shared canvas (warmup/satb/home/flashcards hide it).
     It engraves a grand staff (treble + bass); at the default 1.5× zoom that needs real
     vertical room or the bass staff / ledger notes clip. Give it enough height to fit. */
  height: clamp(230px, 40vh, 420px);
  border-radius: 14px;
  background: #0b0f1b;
  border: 1px solid #1f2336;
}

.noteBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  background: #12182a;
  border: 1px solid #2a3051;
  font-size: 12px;
}

.shapeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.shapeIconSvg {
  width: 100%;
  height: 100%;
  display: block;
}

.flashcard {
  margin-top: 10px;
  border: 1px solid #273056;
  border-radius: 14px;
  background: #0f1426;
  padding: 12px;
  overflow: hidden;
  max-width: 100%;
}

.flashcardPrompt {
  color: #b7c0ce;
  font-size: 12px;
  margin-bottom: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.flashcardFace {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  border-radius: 12px;
  background: #0b0f1b;
  border: 1px solid #1f2336;
}

.flashcardFace .shapeIcon {
  width: 64px;
  height: 64px;
}

.flashcardAnswer {
  margin-top: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Legacy CSS-only shapes removed; we now use the same SVG geometry everywhere. */

.tabs {
  display: flex;
  gap: 6px;
  padding: 8px 8px 0 8px;
  border-bottom: 1px solid #1f2336;
  background: #0b0f19;
  z-index: 3;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.tab, .part-btn {
  padding: 8px 10px;
  border: 1px solid #273056;
  background: #0f1426;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}

.tab.active, .part-btn.active {
  background: #121a33;
}

.panel {
  padding: 16px;
  overflow: visible;
  max-width: 100%;
}

.staffPanel {
  padding: 12px 16px;
  overflow: visible;
  flex-shrink: 0;
}

/* Hide staff canvas on tabs that don't use it */
body[data-active-tab="home"] .staffPanel,
body[data-active-tab="flashcards"] .staffPanel {
  display: none;
}

.test-ok {
  color: #34d399;
}

.test-fail {
  color: #f87171;
}

/* Utilities */
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Radio button styles removed - now using selectable buttons styled like difficulty buttons */

.row > * {
  flex: 1;
}

.rowCompact > * {
  flex: 0 0 auto;
}

.inlineLabel {
  display: inline-block;
  margin: 0;
  color: #b7c0ce;
}

.flex {
  display: flex;
  gap: 8px;
  align-items: center;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.help {
  color: var(--muted);
  font-size: 12px;
}

.kbd {
  border: 1px solid #2a3051;
  padding: 1px 6px;
  border-radius: 6px;
  background: #11162a;
  color: #c9d3e5;
}

.hz {
  font-variant-numeric: tabular-nums;
}

.sectionTitle {
  margin: 8px 0 4px;
  font-weight: 600;
  color: #cfd7e6;
}

.micChip {
  white-space: nowrap;
}

.tabSelectBlock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tabSelectBlock select {
  flex: 1;
  min-width: 140px;
}

/* Responsive */
@media (max-width: 480px) {
  /* Hide the toggleRibbon button on mobile - we use floating showHeaderFab instead */
  #toggleRibbon {
    display: none !important;
  }

  /* When header is collapsed, hide most content but keep essential controls */
  body.mobile-header-hidden .appHeader {
    padding: 8px 12px;
  }

  body.mobile-header-hidden .appHeaderRow:first-child {
    display: none; /* Hide title/badges row */
  }

  body.mobile-header-hidden .controlRibbon {
    display: none; /* Hide control ribbon */
  }

  body.mobile-header-hidden .appHeaderControls .rowCompact > *:not(#btnGlobalPlay):not(#btnGlobalStop) {
    display: none; /* Hide everything in controls row except play/stop buttons */
  }

  /* Keep tab select visible */
  body.mobile-header-hidden .tabSelectBlock {
    display: flex !important;
  }

  /* Only show reveal buttons block when on cluster or intervals tab */
  body.mobile-header-hidden[data-active-tab="cluster"] .appHeaderControls .revealButtonsBlock,
  body.mobile-header-hidden[data-active-tab="intervals"] .appHeaderControls .revealButtonsBlock {
    display: flex !important;
  }

  /* Hide reveal buttons block on all other tabs */
  body.mobile-header-hidden:not([data-active-tab="cluster"]):not([data-active-tab="intervals"]) .appHeaderControls .revealButtonsBlock {
    display: none !important;
  }

  /* Show cluster reveal button when on cluster tab */
  body.mobile-header-hidden[data-active-tab="cluster"] .revealButtonsBlock #revealHiddenHeader {
    display: inline-flex !important;
  }

  /* Show interval reveal button when on intervals tab */
  body.mobile-header-hidden[data-active-tab="intervals"] .revealButtonsBlock #showIntervalHeader {
    display: inline-flex !important;
  }

  /* Hide the other button when not on its tab */
  body.mobile-header-hidden[data-active-tab="cluster"] .revealButtonsBlock #showIntervalHeader {
    display: none !important;
  }

  body.mobile-header-hidden[data-active-tab="intervals"] .revealButtonsBlock #revealHiddenHeader {
    display: none !important;
  }

  /* On mobile, always show the floating button */
  .showHeaderFab {
    display: inline-flex !important;
  }

  /* When header is hidden, reclaim space */
  body.mobile-header-hidden main {
    padding-top: 0;
  }

  /* Add bottom padding to account for browser/phone controls */
  main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  }

  .appHeader {
    padding: 12px 16px;
  }

  .appHeader .subtitle {
    display: none;
  }

  /* Mobile uses dropdown navigation instead of the tab strip */
  .tabs {
    display: none;
  }

  .tabSelectBlock {
    width: 100%;
    display: flex;
  }

  .tabSelectBlock select {
    width: 100%;
    min-width: 0;
  }

  .controlRibbon {
    overflow-x: auto;
  }

  /* Hide reveal buttons in panels on mobile (they're in header instead) */
  #panel-cluster #revealHidden,
  #panel-intervals #showInterval {
    display: none;
  }

  /* Style header reveal buttons block */
  .revealButtonsBlock {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Keep reveal buttons visible when header is collapsed */
  body.mobile-header-hidden .revealButtonsBlock {
    display: flex !important;
  }

  /* Override inline display:none on reveal buttons when header is collapsed */
  body.mobile-header-hidden #revealHiddenHeader[style*="display: none"],
  body.mobile-header-hidden #revealHiddenHeader[style*="display:none"],
  body.mobile-header-hidden #showIntervalHeader[style*="display: none"],
  body.mobile-header-hidden #showIntervalHeader[style*="display:none"] {
    display: inline-flex !important;
  }

  /* Ensure the reveal button is easily tappable */
  #revealHiddenHeader,
  #showIntervalHeader {
    min-height: 44px; /* iOS recommended touch target */
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  /* Style the show controls button */
  .showHeaderFab {
    white-space: pre-line;
    text-align: center;
    line-height: 1.2;
    padding: 8px 12px;
  }
}

@media (min-width: 481px) {
  /* Desktop uses the tab strip; hide the dropdown to reduce clutter */
  .tabSelectBlock {
    display: none;
  }
}

/* Theory Content Styles */
.theory-content {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.theory-content h1 {
  font-size: 2em;
  margin-bottom: 10px;
  color: var(--accent);
}

.theory-content h2 {
  font-size: 1.6em;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--accent);
  border-bottom: 2px solid #1f2336;
  padding-bottom: 10px;
}

.theory-content h3 {
  font-size: 1.3em;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text);
}

.theory-content h4 {
  font-size: 1.1em;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--accent);
  font-weight: 600;
}

.theory-intro {
  font-size: 1.1em;
  margin-bottom: 30px;
  color: var(--muted);
}

.lesson {
  margin-bottom: 50px;
}

.lesson-goal {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 20px;
}

.sub-lesson {
  margin-bottom: 40px;
  padding: 20px;
  background: rgba(23, 26, 43, 0.5);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.learning-objectives {
  margin-bottom: 20px;
}

.learning-objectives ul {
  margin-left: 20px;
  margin-top: 10px;
}

.learning-objectives li {
  margin-bottom: 8px;
}

.app-instructions {
  margin-bottom: 20px;
}

.app-instructions ol {
  margin-left: 20px;
  margin-top: 10px;
}

.app-instructions li {
  margin-bottom: 15px;
}

.app-instructions ul {
  margin-left: 20px;
  margin-top: 8px;
}

.app-instructions ul ul {
  margin-left: 20px;
  margin-top: 5px;
}

.app-instructions strong {
  color: var(--accent);
  font-weight: 600;
}

.what-to-look-for {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(52, 211, 153, 0.1);
  border-left: 3px solid var(--good);
  border-radius: 4px;
}

.what-to-look-for ul {
  margin-left: 20px;
  margin-top: 10px;
}

.what-to-look-for li {
  margin-bottom: 8px;
}

.troubleshooting {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid var(--warn);
  border-radius: 4px;
}

.troubleshooting ul {
  margin-left: 20px;
  margin-top: 10px;
}

.troubleshooting li {
  margin-bottom: 8px;
}

.benchmark {
  margin-top: 25px;
  padding: 15px;
  background: rgba(125, 211, 252, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-weight: 500;
}

.benchmark p {
  margin: 5px 0;
}

.benchmark-tracking {
  margin-top: 50px;
  padding: 20px;
  background: rgba(23, 26, 43, 0.7);
  border-radius: 8px;
}

.benchmark-tracking h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--accent);
}

.practice-log-template {
  margin: 15px 0;
}

.practice-log-template pre {
  background: rgba(15, 20, 38, 0.8);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.theory-content ul,
.theory-content ol {
  margin: 10px 0;
  padding-left: 30px;
}

.theory-content li {
  margin: 5px 0;
}

/* Mobile adjustments for theory content */
@media (max-width: 480px) {
  .theory-content {
    padding: 15px;
  }

  .theory-content h1 {
    font-size: 1.6em;
  }

  .theory-content h2 {
    font-size: 1.3em;
  }

  .theory-content h3 {
    font-size: 1.1em;
  }

  .sub-lesson {
    padding: 15px;
  }
}

/* Theory sidebar specific styles */
.theory-sidebar {
  display: flex;
  flex-direction: column;
}

.theory-sidebar .panel {
  display: block !important;
  padding: 0;
  border: none;
  background: transparent;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.theory-sidebar .theory-content {
  padding: 20px;
  max-width: 100%;
  min-height: 100%;
}


/* Smooth scrolling for anchor links */
.theory-content {
  scroll-behavior: smooth;
}

/* Style any links in theory content to be readable */
.theory-content a {
  color: var(--accent) !important;
  text-decoration: underline;
}

.theory-content a:hover {
  color: #a5d8ff !important;
}

.theory-content a:visited {
  color: #7dd3fc !important;
}

/* Lesson collapse/expand styles */
.theory-content .lesson {
  margin-bottom: 15px;
  border: 1px solid #1f2336;
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  transition: all 0.2s;
}

.theory-content .lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #1a1f35;
  border-bottom: 1px solid #1f2336;
  user-select: none;
  transition: background 0.2s;
}

.theory-content .lesson-header:hover {
  background: #1f2336;
}

.theory-content .lesson-header h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.5em;
}

.theory-content .lesson-toggle-icon {
  color: var(--muted);
  font-size: 0.8em;
  transition: transform 0.2s;
  margin-left: 10px;
}

.theory-content .lesson-expanded .lesson-header {
  border-bottom: 1px solid #2a304a;
}

.theory-content .lesson-content {
  padding: 20px;
  display: none; /* Start collapsed */
}

.theory-content .lesson-content .lesson-goal {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #2a304a;
  color: var(--muted);
}

/* Sub-lesson collapse/expand styles */
.theory-content .sub-lesson {
  margin-bottom: 12px;
  border: 1px solid #262b44;
  border-radius: 6px;
  background: #0f1426;
  overflow: hidden;
  transition: all 0.2s;
}

.theory-content .sub-lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #141a2f;
  border-bottom: 1px solid #1f2336;
  user-select: none;
  transition: background 0.2s;
}

.theory-content .sub-lesson-header:hover {
  background: #1a1f35;
}

.theory-content .sub-lesson-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.2em;
  font-weight: 600;
}

.theory-content .sub-lesson-toggle-icon {
  color: var(--muted);
  font-size: 0.7em;
  transition: transform 0.2s;
  margin-left: 10px;
}

.theory-content .sub-lesson-expanded .sub-lesson-header {
  border-bottom: 1px solid #2a304a;
}

.theory-content .sub-lesson-content {
  padding: 16px;
  display: none; /* Start collapsed */
}

/* SATB empty state */
.no-hymn {
  color: var(--muted);
  font-style: italic;
}

/* ========== Homepage ========== */

.home-hero {
  text-align: center;
  padding: 32px 16px 24px;
}

.home-hero h2 {
  color: var(--accent);
  font-size: 1.6rem;
  margin: 0 0 8px;
}

.home-tagline {
  color: var(--text);
  font-size: 1rem;
  margin: 0 0 4px;
}

.home-subtitle {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 20px;
}

.btn-start-learning {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-start-learning:hover {
  opacity: 0.85;
}

/* Concept cards */
.home-concepts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 16px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.home-concept-card {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
}

.home-concept-card h3 {
  color: var(--accent);
  font-size: 0.9rem;
  margin: 0 0 6px;
}

.home-concept-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

/* Solfege guide section */
.home-solfege-section {
  padding: 0 16px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.home-solfege-section h3 {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 10px;
}

.home-solfege-section #solfegeGuide {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--panel);
  border-radius: 6px;
  padding: 14px 16px;
}

/* Learning roadmap */
.home-roadmap-section {
  padding: 0 16px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.home-roadmap-section h3 {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.home-roadmap-intro {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 12px;
}

.home-roadmap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
}

.home-roadmap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 10px 10px;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: border-color 0.15s;
  text-align: center;
  color: var(--text);
  font-family: inherit;
}

.home-roadmap-step:hover {
  border-color: var(--accent);
}

.home-roadmap-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.home-roadmap-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.home-roadmap-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.home-roadmap-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 1rem;
  padding: 0 2px;
}

/* Keyboard shortcuts */
/* Global controls guide */
.home-controls-section {
  padding: 0 16px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.home-controls-section h3 {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.home-controls-intro {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 12px;
}

.home-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-control-item {
  background: var(--panel);
  border-radius: 6px;
  padding: 10px 12px;
}

.home-control-name {
  display: block;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.home-control-desc {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .home-controls-grid {
    grid-template-columns: 1fr;
  }
}

.home-shortcuts {
  padding: 0 16px 24px;
  max-width: 960px;
  margin: 0 auto;
}

.home-shortcuts h3 {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.home-shortcut-list {
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.home-shortcut-sep {
  color: var(--muted);
  opacity: 0.4;
}

/* Shared helper for "Learn more" links and "Try it" buttons */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text); }

.theory-link { margin-top: 10px; }

/* Warmup connection callout in Theory lessons 3-6 */
.warmup-connection {
  background: rgba(125, 211, 252, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text);
}

.warmup-connection strong:first-child {
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
}

/* Callout for a key takeaway inside a lesson. */
.key-insight {
  background: rgba(125, 211, 252, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text);
}

.key-insight strong:first-child {
  color: var(--accent);
}

/* Difficulty description text */
.difficulty-desc {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
  min-height: 16px;
}

/* Always-visible difficulty selector (pulled out of the Advanced drawer). */
.difficulty-bar { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.difficulty-bar > .adv-label { font-size: 12px; color: var(--muted); }

/* Homepage mobile */
@media (max-width: 480px) {
  .home-concepts {
    grid-template-columns: 1fr;
  }

  .home-roadmap {
    flex-direction: column;
    align-items: stretch;
  }

  .home-roadmap-step {
    max-width: none;
    flex-direction: row;
    gap: 10px;
    text-align: left;
    padding: 10px 14px;
  }

  .home-roadmap-number {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .home-roadmap-arrow {
    display: none;
  }

  .btn-start-learning {
    width: 100%;
  }
}

.perf-surface .notation-wrap svg {
  display: block;           /* avoid inline-baseline gap under the SVG */
}

/* Muted staff / stems / clefs / signatures / accidentals. Noteheads are intentionally
   NOT matched here so they keep the per-note solfege colour VexFlow sets inline. */
.notation-wrap svg .vf-stave path,
.notation-wrap svg .vf-stavebarline path,
.notation-wrap svg .vf-clef path,
.notation-wrap svg .vf-keysignature path,
.notation-wrap svg .vf-timesignature path,
.notation-wrap svg .vf-stem,
.notation-wrap svg .vf-stem rect,
.notation-wrap svg .vf-modifiers path {
  fill: #9aa4b2;
  stroke: #9aa4b2;
}

/* Lyric / solfege syllables drawn under the melody. */
.notation-wrap svg text {
  fill: #dbe4ff;
  stroke: none;
}

/* Any fieldset hosting a performance surface must not stretch to the (very wide) engraved
   staff's intrinsic width — cap it so the controls stay put and only the staff scrolls. */
#panel-satb > fieldset,
#panel-warmup > fieldset {
  min-width: 0;
  max-width: 100%;
}

/* A "performance surface": the scrollable engraved-notation container any tab can host. */
.perf-surface {
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;         /* one continuous row that scrolls left-to-right */
  overflow-y: hidden;
  background: #0d1122;
  border: 1px solid #273056;
  border-radius: 8px;
  position: relative;       /* anchor for the playhead / crosshair overlay */
}

/* Colours are set at the VexFlow context level (muted staff) + per-notehead
   (solfege colour), so no CSS fill overrides here — CSS would clobber the
   per-notehead presentation attributes. */

/* On the Live Sing + SATB tabs the notation IS the staff — hide the shared shape-note canvas. */
body[data-active-tab="satb"] .staffPanel,
body[data-active-tab="warmup"] .staffPanel {
  display: none;
}

/* Singer's pitch line over the engraving (shown only while performing). */
.perf-micline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #60a5fa;
  opacity: 0.9;
  pointer-events: none;
  display: none;
  z-index: 4;
}

/* Moving playhead over the engraving (shown only while performing). */
.perf-playhead {
  position: absolute;
  top: 0;
  width: 2px;
  background: #f87171;
  opacity: 0.9;
  pointer-events: none;
  display: none;
  z-index: 5;
}

/* A hidden perf-surface must STAY hidden even in performance mode — otherwise a body-level
   surface (e.g. the onboarding calibration staff) gets forced visible by the rule below and
   overlays every other full-screen exercise. */
.perf-surface[hidden] { display: none !important; }

/* Full-screen performance mode: the notation expands over everything and scrolls;
   the setup controls simply scroll off behind it. */
body.perf-performing .perf-surface {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* Dynamic viewport units so the staff fills the ACTUAL visible area on mobile,
     accounting for the address bar (100vh overshoots and clips on phone browsers). */
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-width: 100dvw;
  margin: 0;
  border-radius: 0;
  /* The staff is driven by a transform (not scrolling) in performance mode, so hide overflow. */
  overflow: hidden;
  display: flex;
  align-items: center;                 /* vertically centre the staff */
  background: var(--bg, #0f1220);
}

/* Keep the wide staff at natural size (don't let flex shrink it); promote it to its own
   compositor layer so the per-frame translate is GPU-accelerated and smooth on mobile. */
body.perf-performing .perf-surface .notation-wrap {
  flex: 0 0 auto;
  will-change: transform;
}

/* Full-height playhead line through the centred staff. */
body.perf-performing .perf-playhead {
  display: block;
  height: 100% !important;
  top: 0;
}

.perf-exit-btn {
  position: fixed;
  /* Bottom-centre: the reliable thumb zone, and clear of the top status bar / notch / URL
     bar that made this unreachable in portrait. Respects the home-indicator safe area. */
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3010;                 /* above the notation AND the count-in overlay */
  background: #f87171;
  color: #0b0f19;
  border: none;
  border-radius: 999px;
  padding: 12px 34px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: none;
}

/* Full-screen transport: ◀ back a measure · ⏸ pause/resume · ▶ forward a measure. Sits just
   above the Stop button; hidden during calibration, which has its own controls. */
.perf-transport {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 64px);
  z-index: 3010; display: none; gap: 12px; align-items: center;
}
.perf-tbtn {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: #1e2237; color: #eef1fb; border: 1px solid #3a4266;
  font-size: 17px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.perf-tbtn:hover { background: #262b45; }
.perf-tbtn-main { width: 56px; height: 56px; font-size: 20px; background: #e6b968; color: #241a06; border-color: transparent; font-weight: 800; }
body.cal-active .perf-transport { display: none !important; }

/* Full-screen "3 · 2 · 1 · Sing!" count-in. pointer-events:none so the Stop button
   underneath stays tappable if someone wants to bail during the count. */
.perf-countdown {
  position: fixed;
  inset: 0;
  z-index: 3006;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(84px, 34vw, 260px);
  color: var(--accent, #6ee7ff);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.perf-countdown.pop {
  animation: perf-count-pop 0.42s ease-out;
}

@keyframes perf-count-pop {
  0% { transform: scale(0.5); opacity: 0; }
  35% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}

/* First-run calibration: tune-by-ear controls floating over the full-screen sing-along. */
.cal-controls {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: max(16px, env(safe-area-inset-top));
  z-index: 3010; width: min(440px, calc(100vw - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(23, 26, 43, 0.92); border: 1px solid #2a2f48;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #eef1fb; text-align: center;
}
.cal-controls[hidden] { display: none; }
/* During calibration our own controls own the exit — hide the generic full-screen Stop. */
body.cal-active .perf-exit-btn { display: none !important; }

/* Verse 1 → verse 2 hand-off modal (explains the other voices joining + the range move). */
.cal-modal {
  position: fixed; inset: 0; z-index: 3020; display: flex; align-items: center; justify-content: center;
  background: rgba(9, 11, 20, 0.86); backdrop-filter: blur(2px); padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.cal-modal[hidden] { display: none; }
.cal-modal-card {
  max-width: 440px; background: #171a2b; border: 1px solid #2a2f48; border-radius: 16px;
  padding: 22px 24px; color: #eef1fb; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.cal-modal-card h3 { margin: 0 0 12px; font-size: 20px; }
.cal-modal-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #c1c6dd; }
.cal-modal-card b { color: #eef1fb; }
.cal-modal-btns { display: flex; flex-direction: column; gap: 10px; }

/* Mic health indicator: green = truly live, red = meant-to-be-on but not working. */
#btnMicToggle.mic-live { background: #153426 !important; border-color: #245c40 !important; color: #7fe0a6 !important; }
#btnMicToggle.mic-bad { background: #3a2226 !important; border-color: #5b2f34 !important; color: #f0b4b4 !important; }
.micChip.mic-bad { color: #f0b4b4; }
.micChip.mic-live { color: #cdd5f0; }
.micChip.mic-hearing #micHz { color: #7fe0a6; font-weight: 700; }

/* Per-screen "How to" modal (auto-pops first visit; reopen via the header "?"). */
#btnHowto { min-width: 34px; font-weight: 700; }
.howto-modal {
  position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center;
  background: rgba(9, 11, 20, 0.7); backdrop-filter: blur(2px); padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.howto-modal[hidden] { display: none; }
.howto-card {
  max-width: 460px; width: 100%; max-height: 84vh; overflow-y: auto;
  background: #171a2b; border: 1px solid #2a2f48; border-radius: 16px; padding: 22px 24px;
  color: #eef1fb; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.howto-card h3 { margin: 0 0 6px; font-size: 21px; }
.howto-card .howto-blurb { margin: 0 0 14px; font-size: 14px; color: #c1c6dd; line-height: 1.45; }
.howto-card h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #98a0bd; }
.howto-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #dbe1f4; line-height: 1.4; }
.howto-card b { color: #eef1fb; }
.howto-card .howto-builds { margin: 16px 0 0; font-size: 13.5px; color: #c1c6dd; }
.howto-btns { margin-top: 18px; display: flex; justify-content: flex-end; }
.howto-go { cursor: pointer; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 800; background: #e6b968; color: #241a06; border: none; }
.cal-controls .cal-title { font-size: 15px; font-weight: 700; }
.cal-controls .cal-sub { font-size: 12px; color: #98a0bd; }
.cal-controls .cal-sub b { color: #eef1fb; }
.cal-controls .cal-row { display: flex; gap: 8px; width: 100%; }
.cal-controls .cal-btn {
  flex: 1; cursor: pointer; border-radius: 999px; padding: 11px 12px; min-height: 44px;
  font-size: 14px; font-weight: 600; background: #1e2237; color: #eef1fb; border: 1px solid #2a2f48;
}
.cal-controls .cal-btn:hover { background: #262b45; }
.cal-controls .cal-go {
  width: 100%; background: #e6b968; color: #241a06; border-color: transparent; font-weight: 800;
}
.cal-controls .cal-mic-off { font-size: 11px; color: #eab308; }

/* Minimal profile button + popover (voice/part + Do), next to the settings gear. */
.rowCompact { position: relative; }
#btnProfile { display: inline-flex; align-items: center; gap: 6px; }
#btnProfile .pm-ico { flex: 0 0 auto; opacity: .85; }
.pm-pop {
  position: absolute; right: 8px; top: 100%; margin-top: 6px; z-index: 2100;
  width: min(280px, calc(100vw - 24px));
  background: #171a2b; border: 1px solid #2a2f48; border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #eef1fb;
}
.pm-pop[hidden] { display: none; }
.pm-pop .pm-title { font-size: 12px; color: #98a0bd; font-weight: 600; }
.pm-pop .pm-parts { display: flex; gap: 6px; }
.pm-pop .pm-part {
  flex: 1; cursor: pointer; border-radius: 9px; padding: 8px 4px; font-size: 13px; font-weight: 600;
  background: #1e2237; color: #eef1fb; border: 1px solid #2a2f48;
}
.pm-pop .pm-part.on { background: #e6b968; color: #241a06; border-color: transparent; }
.pm-pop .pm-do { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pm-pop .pm-do b { min-width: 40px; text-align: center; }
.pm-pop .pm-nudge, .pm-pop .pm-hear {
  cursor: pointer; width: 34px; height: 34px; border-radius: 9px;
  background: #1e2237; color: #eef1fb; border: 1px solid #2a2f48; font-size: 15px;
}
.pm-pop .pm-retune {
  cursor: pointer; border-radius: 999px; padding: 10px; font-size: 13px; font-weight: 700;
  background: #e6b968; color: #241a06; border: none;
}

/* Brass accent for the single primary action (global Play), per the design system.
   The one button that should always pop above the rest of the chrome. */
#btnGlobalPlay:not(:disabled) {
  background: #e6b968;
  border-color: transparent;
  color: #241a06;
  font-weight: 800;
}
#btnGlobalPlay:not(:disabled):hover {
  background: #eec580;
}

/* ===================================================================== *
 * Onboarding wizard overlay (mobile-first). Full-screen, one step at a
 * time, tuned to the app's dark palette + brass primary action.
 * ===================================================================== */
.onb {
  position: fixed; inset: 0; z-index: 1000;
  background: #0f1220;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.onb[hidden] { display: none; }
body.onb-open { overflow: hidden; }

/* Fading hymn-scroll B-roll behind the wizard card (see js/session/onboarding.js). */
.onb-broll { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0f1220; }
.onb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.onb-scrim { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(15,18,32,.34) 0%, rgba(15,18,32,.72) 60%, rgba(15,18,32,.92) 100%); }
.onb-stage { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }

.onb-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 16px;
  text-align: center; color: #eef1fb;
}
.onb-shapes { display: flex; gap: 8px; justify-content: center; align-items: flex-end; }
.onb-h { font-family: Georgia, "Iowan Old Style", serif; font-size: 25px; font-weight: 600; margin: 0; line-height: 1.2; }
.onb-sub { color: #98a0bd; font-size: 14px; margin: 0; }
.onb-hint { color: #98a0bd; font-size: 12.5px; margin: 0; }
.onb-step { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #e6b968; font-weight: 700; }
.onb-q { color: #98a0bd; font-size: 13px; margin-top: 4px; }
.onb-primary {
  background: #e6b968; color: #241a06; border: none; border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 800; cursor: pointer; margin-top: 4px;
}
.onb-primary:hover { background: #eec580; }
.onb-secondary {
  background: #1e2237; color: #eef1fb; border: 1px solid #2a2f48; border-radius: 12px;
  padding: 11px; font-size: 14px; cursor: pointer;
}
.onb-voices { display: flex; flex-direction: column; gap: 10px; }
.onb-voice {
  background: #1e2237; color: #eef1fb; border: 1px solid #2a2f48; border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.onb-voice.sel { background: #e6b968; color: #241a06; border-color: transparent; }
.onb-do { display: flex; align-items: center; justify-content: center; gap: 18px; }
.onb-do-note { display: flex; flex-direction: column; }
.onb-do-name { font-family: Georgia, serif; font-size: 40px; line-height: 1; }
.onb-do-note small { color: #98a0bd; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.onb-step-btn {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background: #1e2237; border: 1px solid #2a2f48; color: #eef1fb; font-size: 22px; cursor: pointer;
}
.onb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.onb-chip {
  background: #1e2237; color: #98a0bd; border: 1px solid #2a2f48; border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.onb-chip.sel { background: #e6b968; color: #241a06; border-color: transparent; }
.onb-seg-row { display: flex; gap: 8px; }
.onb-seg {
  flex: 1; background: #1e2237; color: #98a0bd; border: 1px solid #2a2f48; border-radius: 10px;
  padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.onb-seg.sel { border-color: #e6b968; color: #eef1fb; background: #171a2b; }

/* ===================================================================== *
 * Guided-session companion bar — sticky strip above the active tab.
 * ===================================================================== */
.session-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: #1e2237; border-bottom: 1px solid #e6b968;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #eef1fb;
}
.session-bar[hidden] { display: none; }
.session-bar .sb-dots { display: flex; gap: 3px; }
.session-bar .sb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2a2f48; }
.session-bar .sb-dots i.on { background: #e6b968; }
.session-bar .sb-label { font-size: 12px; line-height: 1.2; }
.session-bar .sb-label small { display: block; color: #98a0bd; font-size: 10px; }
.session-bar .sb-done { font-size: 13px; font-weight: 600; }
.session-bar .sb-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.session-bar .sb-btn {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 12px;
  background: #171a2b; color: #eef1fb; border: 1px solid #2a2f48; cursor: pointer;
}
.session-bar .sb-btn.ghost { background: transparent; color: #98a0bd; }
.session-bar .sb-btn.brass { background: #e6b968; color: #241a06; border-color: transparent; font-weight: 800; }
.session-bar .sb-btn.end { color: #98a0bd; background: transparent; border-color: transparent; }
.session-bar .sb-btn.end:hover { color: #eef1fb; }
.session-bar .sb-btn:disabled { opacity: .4; cursor: default; }

/* Focused session mode: hide every room-navigation surface so only the current step (the
   exercise panel) + the session bar remain. Header (mic/settings) stays available. */
body.session-active .mobile-nav,
body.session-active .desktop-rail,
body.session-active .room-subnav,
body.session-active .tabs,
body.session-active .tabSelectBlock { display: none !important; }
body.session-active { padding-left: 0 !important; }

/* ===================================================================== *
 * Mobile App Shell — bottom nav (5 rooms) + per-room sub-nav.
 * Only active on phones; desktop keeps its tab strip until the Studio pass.
 * ===================================================================== */
.mobile-nav { display: none; }
.desktop-rail { display: none; }
/* Wrap rather than scroll: overflow-x:auto would force overflow-y:auto and vertically clip
   the pills. Only 2-3 sub-tabs, so wrapping is clean. */
.room-subnav { display: none; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.room-subnav .rs-it {
  white-space: nowrap; cursor: pointer;
  background: #1e2237; border: 1px solid #2a2f48; color: #98a0bd;
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600;
}
.room-subnav .rs-it.on { background: #e6b968; color: #241a06; border-color: transparent; }

/* Desktop Studio: a slim left icon rail replaces the top tab strip. */
@media (min-width: 769px) {
  .desktop-rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 58px; z-index: 65;
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
    background: #171a2b; border-right: 1px solid #2a2f48;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }
  .desktop-rail .dr-it {
    width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: none; border: none; color: #98a0bd; font-size: 8px; font-weight: 600;
  }
  .desktop-rail .dr-it .d { font-size: 17px; line-height: 1; }
  .desktop-rail .dr-it.on { background: #e6b968; color: #241a06; }
  .desktop-rail .dr-gear { margin-top: auto; }

  body { padding-left: 58px; }
  .tabs, .tabSelectBlock { display: none !important; }
  .room-subnav:not([hidden]) { display: flex; }
}
@media (max-width: 768px) {
  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: stretch;
    background: #171a2b; border-top: 1px solid #2a2f48;
    padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }
  .mobile-nav .mn-it {
    flex: 1; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: #98a0bd; font-size: 10px; font-weight: 600; padding: 4px 0;
  }
  .mobile-nav .mn-it .d { font-size: 19px; line-height: 1; }
  .mobile-nav .mn-it.on { color: #e6b968; }

  /* the desktop tab strip + tab dropdown are replaced by the bottom nav */
  .tabs, .tabSelectBlock { display: none !important; }

  .room-subnav {
    display: flex; gap: 8px; padding: 10px 16px 12px; flex-wrap: wrap;
  }
  .room-subnav[hidden] { display: none; }
  .room-subnav .rs-it {
    white-space: nowrap; cursor: pointer;
    background: #1e2237; border: 1px solid #2a2f48; color: #98a0bd;
    border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  }
  .room-subnav .rs-it.on { background: #e6b968; color: #241a06; border-color: transparent; }

  /* clear the fixed bottom nav */
  body { padding-bottom: 64px; }
}

/* ===================================================================== *
 * Settings sheet — houses the relocated tuning controls behind the gear.
 * Desktop: right-hand panel. Mobile: bottom sheet.
 * ===================================================================== */
/* Above the theory sidebar (1001) and header (1000): Settings is a modal, so it must overlay the
   theory drawer (both dock on the right) instead of being painted over by it. */
.settings-sheet { position: fixed; inset: 0; z-index: 2000; }
.settings-sheet[hidden] { display: none; }
.settings-sheet .ss-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 12, 0.55); }
.settings-sheet .ss-card {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
  background: #171a2b; border-left: 1px solid #2a2f48;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.settings-sheet .ss-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #2a2f48;
}
.settings-sheet .ss-title { font-family: Georgia, serif; font-size: 18px; color: #eef1fb; }
.settings-sheet .ss-close {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: #1e2237; border: 1px solid #2a2f48; color: #eef1fb; font-size: 15px;
}
.settings-sheet .ss-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.settings-sheet .ss-tier h4 {
  margin: 0 0 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #98a0bd; font-weight: 700;
}
.settings-sheet .ss-basic, .settings-sheet .ss-advbody { display: flex; flex-direction: column; gap: 14px; }
.settings-sheet .ss-adv { border-top: 1px solid #2a2f48; padding-top: 12px; }
.settings-sheet .ss-adv > summary {
  cursor: pointer; list-style: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #98a0bd; font-weight: 700; padding-bottom: 10px;
}
.settings-sheet .ss-adv > summary::before { content: "▸ "; }
.settings-sheet .ss-adv[open] > summary::before { content: "▾ "; }
.settings-sheet .controlGroup { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.settings-sheet .controlGroup input[type="range"] { width: 100%; }
#btnSettings { font-size: 16px; }

@media (max-width: 768px) {
  .settings-sheet .ss-card {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 86vh; border-left: none; border-top: 1px solid #2a2f48;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===================================================================== *
 * Home launcher — greeting, resume card, room cards, actions.
 * ===================================================================== */
.home-launch { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.home-launch .hl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-launch .hl-greet { font-family: Georgia, serif; font-size: 22px; color: var(--ink, #eef1fb); }
.home-launch .hl-streak {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #153426; color: #7fe0a6; border: 1px solid #245c40; border-radius: 999px; padding: 5px 11px;
}
.home-launch .hl-resume {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: #1e2237; border: 1px solid #e6b968; border-radius: 14px; padding: 14px 16px; color: #eef1fb;
}
.home-launch .hl-resume-tx b { display: block; font-size: 15px; }
.home-launch .hl-resume-tx small { color: #98a0bd; font-size: 12px; }
.home-launch .hl-resume-go {
  margin-left: auto; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  background: #e6b968; color: #241a06; display: grid; place-items: center; font-size: 16px; font-weight: 800;
}
.home-launch .hl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-launch .hl-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: #171a2b; border: 1px solid #2a2f48; border-radius: 16px; padding: 16px; min-height: 104px;
}
.home-launch .hl-card:hover { border-color: #3a4260; }
.home-launch .hl-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 19px; color: #10121c; margin-bottom: 6px;
}
.home-launch .hl-nm { font-size: 15px; font-weight: 700; color: #eef1fb; }
.home-launch .hl-ds { font-size: 12px; color: #98a0bd; }
.home-launch .hl-actions { display: flex; flex-direction: column; gap: 10px; }
.home-launch .hl-primary {
  background: #e6b968; color: #241a06; border: none; border-radius: 12px;
  padding: 14px; font-size: 15px; font-weight: 800; cursor: pointer;
}
.home-launch .hl-ghost {
  background: transparent; color: #98a0bd; border: 1px solid #2a2f48; border-radius: 12px;
  padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.home-launch .home-solfege-section { margin-top: 8px; }
@media (min-width: 700px) {
  .home-launch .hl-cards { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   Simplified exercise shell — see design/solfege-design-system.html.
   The pattern established by Warm Up: pattern pills · brass transport ·
   read-only status · a single Advanced fold. Reused by other rooms.
   --xl = local line/border colour (no global token exists yet).
   ========================================================================= */
.panel.exercise { --xl: #2a2f48; --brass: #e6b968; --brass-ink: #241a06;
  /* width:100% is load-bearing: without it, margin:0 auto disables the flex stretch and the panel
     sizes to its widest content (the engraved notation) up to max-width, ignoring a narrow phone
     viewport — cutting the right side off. width:100% fills the container (capped at 860, centred). */
  width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* Screen-reader-only (the aria-live badge the sequence player still writes to). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pattern pills: pick what to sing. On = brass. */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-toggle { font: 600 13px/1 inherit; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--xl); background: #1e2237; color: #98a0bd;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pill-toggle:hover { border-color: #3a4160; color: var(--text); }
.pill-toggle.on { background: var(--brass); color: var(--brass-ink); border-color: transparent; font-weight: 800; }
.pill-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Transport: ↺ ▶ ⤢ + read-only "Do A3 · treble · 76 bpm". */
.xport { display: flex; align-items: center; gap: 14px; }
.xport-play { width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--brass); color: var(--brass-ink); font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 18px -8px rgba(230,185,104,.6); transition: transform .1s; }
.xport-play:hover { transform: scale(1.05); }
.xport-play:active { transform: scale(.96); }
.xport-play.is-playing { background: #3a2226; color: #f0b4b4; box-shadow: none; }
.xport-btn { width: 38px; height: 38px; border-radius: 50%; font-size: 16px; line-height: 1;
  border: 1px solid var(--xl); background: #1e2237; color: #98a0bd;
  cursor: pointer; display: grid; place-items: center; }
.xport-btn:hover { color: var(--text); border-color: #3a4160; }
.xport-status { margin-left: 4px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

/* The one disclosure a beginner ignores and a power user opens. */
details.advanced { border: 1px solid var(--xl); border-radius: 12px; background: rgba(30,34,55,.4); }
details.advanced > summary { list-style: none; cursor: pointer; user-select: none;
  padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "▸"; transition: transform .15s; }
details.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.advanced-body .adv-field { display: flex; flex-direction: column; gap: 6px; }
.advanced-body .adv-field > label,
.advanced-body .adv-label { font-size: 12px; color: var(--muted); }
.advanced-body input[type="range"] { width: 100%; max-width: 320px; }
.advanced-body select { max-width: 260px; padding: 7px 10px; border-radius: 8px;
  background: #1e2237; color: var(--text); border: 1px solid var(--xl); }
.advanced-body .adv-check { display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); }
.advanced-body .adv-field:has(.adv-check) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.advanced-body .adv-row { flex-direction: row; flex-wrap: wrap; gap: 18px; }
.advanced-body .adv-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.advanced-body .adv-row input[type="number"] { width: 64px; padding: 6px 8px; border-radius: 8px; background: #1e2237; color: var(--text); border: 1px solid var(--xl); }
.advanced-body .muted-note { font-size: 11.5px; color: var(--muted); }
.advanced-body .difficulty-btn { }  /* keep existing .difficulty-btn styling; the row just wraps them */

/* Interactive Ear-room drills: prompt · brass Play · answer buttons · result */
.exercise .ex-prompt { font-size: 15px; color: var(--text); }

/* Inline "learn this term" link — opens the matching Music Theory lesson. Placed wherever
   a beginner meets a word they might not know (interval, chord quality, arpeggio…). */
.learn-link {
  background: none; border: none; padding: 0; margin-left: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--brass, #e6b968);
  border-bottom: 1px dotted currentColor; line-height: 1.2;
}
.learn-link::before { content: "ⓘ "; opacity: .8; }
.learn-link:hover { filter: brightness(1.15); }
.exercise .ex-result { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.answer-row { display: flex; flex-wrap: wrap; gap: 10px; }
.answer-row .ans {
  font: 700 14px/1.1 inherit; padding: 12px 16px; min-width: 78px; text-align: center;
  border-radius: 12px; border: 1px solid var(--xl); background: #1e2237; color: var(--text);
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
}
.answer-row .ans:hover:not(:disabled) { border-color: #3a4160; transform: translateY(-1px); }
.answer-row .ans:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.answer-row .ans small { display: block; margin-top: 3px; font-weight: 500; font-size: 10.5px; color: var(--muted); }
.answer-row .ans:disabled { cursor: default; opacity: .9; }
.answer-row .ans.good { background: #153426; color: #7fe0a6; border-color: #245c40; }
.answer-row .ans.good small { color: #5fbf88; }
.answer-row .ans.bad { background: #3a2226; color: #f0b4b4; border-color: #5b2f34; }

/* Test me ⇄ Explore segmented toggle (Chord Quality) */
.seg-toggle { display: inline-flex; border: 1px solid var(--xl, #2a2f48); border-radius: 999px; padding: 3px; background: #1e2237; align-self: flex-start; }
.seg-toggle .seg-btn { font: 600 13px/1 inherit; padding: 8px 16px; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.seg-toggle .seg-btn.on { background: var(--brass, #e6b968); color: var(--brass-ink, #241a06); font-weight: 800; }
.chord-mode[hidden] { display: none; }
.chord-mode { display: flex; flex-direction: column; gap: 14px; }

/* Theory sidebar close (×) — pinned top-right while the lesson scrolls */
.theory-close {
  position: sticky; top: 8px; float: right; z-index: 6;
  width: 30px; height: 30px; margin: 8px 8px 0 0; border-radius: 50%;
  border: 1px solid #2a2f48; background: #1e2237; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.theory-close:hover { color: var(--text); border-color: #3a4160; }

/* Sing (SATB) room */
.satb-hymn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.satb-hymn #satbCurrentHymn { font-family: var(--serif, Georgia, serif); font-size: 16px; color: var(--text); }
.satb-hymn #satbCurrentHymn.no-hymn { font-family: inherit; font-size: 13px; color: var(--muted); }
.btn-outline {
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--xl, #2a2f48); background: #1e2237; color: var(--text); cursor: pointer;
}
.btn-outline:hover { border-color: #3a4160; }
.quiet-toggle {
  display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text);
  background: rgba(30,34,55,.5); border: 1px solid var(--xl, #2a2f48); border-radius: 12px; padding: 12px 14px;
}
.quiet-toggle input { width: 17px; height: 17px; accent-color: var(--brass, #e6b968); }
.quiet-toggle small { color: var(--muted); font-weight: 400; }
.part-mix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(30,34,55,.5); border: 1px solid var(--xl, #2a2f48); border-radius: 12px; padding: 10px 14px; }
.part-mix .pm-label { font-size: 14px; font-weight: 600; color: var(--text); }
.part-mix .pm-hint { font-size: 12px; color: var(--muted); }

/* Slim the legacy header: the app title, global Play/Stop, and the old "Hide/Show controls"
   toggles are all redundant now that every room has its own transport and the rail / bottom-nav
   handle navigation. Keep only the Mic toggle + readout + settings gear (Mic always up). */
.appHeader .appHeaderRow:first-child { display: none; }
#btnGlobalPlay, #btnGlobalStop { display: none !important; }
#toggleRibbon, #showHeaderFab { display: none !important; }  /* legacy show/hide-controls — gone */
.appHeader { padding-top: 8px; padding-bottom: 8px; }

/* Arcade launcher chip inside the Ear drills (overlay CSS is injected by js/arcade/*). */
.ex-arcade { display: flex; flex-wrap: wrap; gap: 10px; }
.arcade-launch { background: linear-gradient(90deg,#e6b968,#f0c987); color: #241a06; font-weight: 800;
  border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: 13px; }
.arcade-launch:hover { filter: brightness(1.06); }