/*
  NowDrum Platform — app.css
  Design system + all component styles for the SPA shell
  © 2026 Chris @ NowDrum.com — All Rights Reserved

  Token prefix: --nd-* (NowDrum Design System)
  Stack: Vanilla CSS, mobile-first, Cloudflare Pages static hosting
  Spec: NowDrum/docs/PLATFORM-DESIGN-SPEC.md
*/

/* =========================================================
   GOOGLE FONTS IMPORT
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Nunito:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =========================================================
   CSS CUSTOM PROPERTIES — NowDrum Design System
   Spec: Section 9 — Design Tokens
   --nd-* prefix on ALL tokens. No raw hex values in rules below.
   ========================================================= */
:root {

  /* ----- Backgrounds (surface hierarchy: deep → elevated) ----- */
  --nd-bg-primary:          #0a0a0a;   /* Page background — deepest layer */
  --nd-bg-secondary:        #111111;   /* Slight lift from page bg */
  --nd-bg-surface-solid:    #1a1a1a;   /* Tab bar, panels — solid, no blur */
  --nd-bg-card:             #2a2a2a;   /* Cards, sheets, elevated surfaces */
  --nd-bg-surface:          rgba(255, 255, 255, 0.04);  /* Translucent glass cards */
  --nd-bg-surface-hover:    rgba(255, 255, 255, 0.07);  /* Hover lift on glass */
  --nd-bg-input:            rgba(255, 255, 255, 0.06);  /* Search bars, inputs */
  --nd-bg-chip:             rgba(255, 255, 255, 0.08);  /* Inactive filter chips */
  --nd-bg-chip-active:      rgba(255, 77, 0, 0.18);     /* Active filter chip fill */

  /* ----- Accents ----- */
  --nd-accent-primary:        #ff4d00;              /* Orange — primary brand */
  --nd-accent-primary-end:    #ff6b35;              /* Orange gradient end / hover */
  --nd-accent-secondary:      #00f3ff;              /* Cyan — GhostClick identity */
  --nd-accent-secondary-end:  #0063ff;              /* Cyan gradient end */
  --nd-accent-primary-dim:    rgba(255, 77, 0, 0.15);   /* Subtle orange fill */

  /* ----- Glow (box-shadow / text-shadow usage) ----- */
  --nd-glow-primary:          rgba(255, 77, 0, 0.45);
  --nd-glow-primary-hover:    rgba(255, 77, 0, 0.65);
  --nd-glow-secondary:        rgba(0, 243, 255, 0.45);
  --nd-glow-secondary-hover:  rgba(0, 243, 255, 0.65);
  --nd-glow-card:             rgba(255, 77, 0, 0.08);   /* Subtle card elevation glow */

  /* ----- Text ----- */
  --nd-text-primary:     #ffffff;
  --nd-text-secondary:   #888888;   /* Muted labels, placeholders — spec: #888888 */
  --nd-text-dim:         #555555;   /* Greyed-out rests in counting layer */
  --nd-text-muted:       rgba(255, 255, 255, 0.60);
  --nd-text-faint:       rgba(255, 255, 255, 0.30);

  /* ----- Borders / Dividers ----- */
  --nd-border-subtle:    rgba(255, 255, 255, 0.10);  /* Glass card borders */
  --nd-border-solid:     #333333;                    /* Tab bar top border, dividers */
  --nd-border-accent:    rgba(255, 77, 0, 0.30);     /* Orange-tinted borders */
  --nd-border-cyan:      rgba(0, 243, 255, 0.25);    /* Cyan-tinted GhostClick borders */

  /* ----- Locked/Overlay ----- */
  --nd-locked-overlay:   rgba(10, 10, 10, 0.70);

  /* ----- Typography ----- */
  --nd-font-display:  'Plus Jakarta Sans', sans-serif;   /* Headings, UI labels, brand */
  --nd-font-body:     'Nunito', sans-serif;               /* Body text, warm & readable */
  --nd-font-mono:     'JetBrains Mono', monospace;        /* BPM display, sticking, counts */

  /* ----- Spacing (multiples of 8px base grid unit) ----- */
  --nd-space-unit:  8px;
  --nd-space-xs:    4px;   /* 0.5u */
  --nd-space-sm:    8px;   /* 1u */
  --nd-space-md:    16px;  /* 2u */
  --nd-space-lg:    24px;  /* 3u */
  --nd-space-xl:    32px;  /* 4u */
  --nd-space-2xl:   48px;  /* 6u */
  --nd-space-3xl:   64px;  /* 8u */

  /* ----- Sizing ----- */
  --nd-touch-target-min:    48px;   /* Min height/width for any tappable element */
  --nd-tab-bar-height:      56px;   /* Bottom tab bar (before safe area) */
  --nd-controls-bar-height: 56px;   /* Practice view controls transport */
  --nd-sidebar-width:       280px;  /* Desktop left sidebar */
  --nd-top-bar-height:      52px;   /* Optional context top bar */

  /* ----- Border Radii ----- */
  --nd-radius-xs:   4px;
  --nd-radius-sm:   8px;   /* Buttons */
  --nd-radius-md:   12px;  /* Cards */
  --nd-radius-lg:   16px;  /* Sheets, large cards */
  --nd-radius-xl:   24px;  /* Bottom sheets (top corners only) */
  --nd-radius-chip: 20px;  /* Filter chips, badges */
  --nd-radius-full: 9999px;

  /* ----- Transitions ----- */
  --nd-ease-out:    ease-out;
  --nd-ease-in:     ease-in;
  --nd-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --nd-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --nd-dur-fast:    150ms;   /* Tab active indicator, chip toggle */
  --nd-dur-normal:  200ms;   /* General hover/focus transitions */
  --nd-dur-medium:  250ms;   /* Panels open/close */
  --nd-dur-slow:    300ms;   /* Karaoke measure advance */
  --nd-dur-shimmer: 2000ms;  /* Locked content shimmer loop */

  /* ----- Z-index scale ----- */
  --nd-z-base:      0;
  --nd-z-raised:    10;
  --nd-z-sticky:    20;
  --nd-z-overlay:   30;
  --nd-z-modal:     40;
  --nd-z-toast:     50;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent layout shift on scrollbar appearance */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--nd-font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--nd-bg-primary);
  color: var(--nd-text-primary);
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile browser chrome */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reserve space at bottom for the fixed tab bar + safe area */
body {
  padding-bottom: calc(var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

input, textarea, select {
  font-family: inherit;
}

/* =========================================================
   FOCUS STYLES — Keyboard navigation accessibility
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--nd-accent-primary);
  outline-offset: 2px;
  border-radius: var(--nd-radius-xs);
}

/* =========================================================
   SCROLLBAR STYLING (webkit)
   ========================================================= */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--nd-border-solid);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--nd-text-dim);
}

/* =========================================================
   APP SHELL — root container
   ========================================================= */
#app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* =========================================================
   MAIN CONTENT AREA — view host
   ========================================================= */
#app-content {
  flex: 1;
  width: 100%;
  position: relative;
  /* Top padding: none by default (views manage their own internal padding) */
}

/* =========================================================
   VIEW SYSTEM — show/hide views via .active class
   ========================================================= */
.view {
  display: none;
  width: 100%;
  min-height: calc(100vh - var(--nd-tab-bar-height) - env(safe-area-inset-bottom));
  min-height: calc(100dvh - var(--nd-tab-bar-height) - env(safe-area-inset-bottom));
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.view.active {
  display: flex;
}

/* =========================================================
   BOTTOM TAB BAR
   Spec: Section 2 — Navigation
   - Fixed bottom, 4 tabs, 56px + safe-area
   - Background: #1a1a1a (solid surface, no blur)
   - Top border: 1px solid #333
   ========================================================= */
#tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--nd-z-sticky);
  height: calc(var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
  background: var(--nd-bg-surface-solid);
  border-top: 1px solid var(--nd-border-solid);
  display: flex;
  align-items: flex-start; /* align to top so padding-bottom handles safe area */
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Each tab button */
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--nd-touch-target-min);
  height: var(--nd-tab-bar-height);
  padding: 6px var(--nd-space-xs) 4px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--nd-text-secondary);
  position: relative;
  transition: color var(--nd-dur-fast) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* Prevents text selection on rapid taps */
  user-select: none;
  -webkit-user-select: none;
}

.tab-item:focus-visible {
  outline: 2px solid var(--nd-accent-primary);
  outline-offset: -2px;
  border-radius: var(--nd-radius-xs);
}

/* Tab icon container */
.tab-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 3px;
  transition: transform var(--nd-dur-fast) var(--nd-ease-out);
  position: relative;
}

.tab-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: stroke var(--nd-dur-fast) var(--nd-ease-out),
              fill var(--nd-dur-fast) var(--nd-ease-out);
}

/* Tab label — phone: only visible on active tab */
.tab-label {
  font-family: var(--nd-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--nd-dur-fast) var(--nd-ease-out),
              opacity var(--nd-dur-fast) var(--nd-ease-out);
}

/* Phone: hide all labels by default, show only on active tab */
@media (max-width: 767px) {
  .tab-label {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 0;
  }

  .tab-item.active .tab-label {
    opacity: 1;
    max-height: 14px;
    font-size: 10px;
  }
}

/* Tablet/Desktop: always show labels */
@media (min-width: 768px) {
  .tab-label {
    opacity: 1;
    font-size: 11px;
  }
}

/* Active tab state — orange accent by default */
.tab-item.active {
  color: var(--nd-accent-primary);
}

.tab-item.active .tab-icon svg {
  stroke: var(--nd-accent-primary);
  filter: drop-shadow(0 0 6px var(--nd-glow-primary));
}

/* Active indicator pip above icon */
.tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--nd-accent-primary);
  box-shadow: 0 0 8px var(--nd-glow-primary);
  transition: background var(--nd-dur-fast) var(--nd-ease-out);
}

/* GhostClick tab — cyan identity */
.tab-item[data-tab="ghostclick"].active {
  color: var(--nd-accent-secondary);
}

.tab-item[data-tab="ghostclick"].active .tab-icon svg {
  stroke: var(--nd-accent-secondary);
  filter: drop-shadow(0 0 6px var(--nd-glow-secondary));
}

.tab-item[data-tab="ghostclick"].active::before {
  background: var(--nd-accent-secondary);
  box-shadow: 0 0 8px var(--nd-glow-secondary);
}

/* Hover state on non-active tabs */
.tab-item:not(.active):hover {
  color: var(--nd-text-muted);
}

.tab-item:not(.active):hover .tab-icon {
  transform: translateY(-1px);
}

/* Change 7: Tab tap feedback — squeeze on active press */
.tab-item:active .tab-icon {
  transform: scale(0.92);
}

/* =========================================================
   PRACTICE VIEW
   Spec: Section 3 — Practice View
   ========================================================= */

/* Fix 1: Removed washed-out radial-gradient experiment. Practice view uses flat bg. */
#view-practice {
  background: var(--nd-bg-primary);
  /* Reserve space for controls bar + tab bar + safe area at the bottom.
     The duplicate rule below (line ~2232) was using an arbitrary 80px — consolidated here. */
  padding-bottom: calc(var(--nd-controls-bar-height) + var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
}

/* Change 9: View crossfade — animate opacity on active instead of instant swap */
.view.active {
  animation: view-fade-in 200ms var(--nd-ease-out) both;
}

@keyframes view-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Practice: outer layout wrapper ---- */
.practice-view-inner {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nd-tab-bar-height) - env(safe-area-inset-bottom));
  overflow: hidden;
}

/* ---- Practice: header — rudiment name (h2) + nav buttons ---- */
.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-space-sm);
  padding: var(--nd-space-sm) var(--nd-space-md);
  min-height: 48px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nd-border-subtle);
}

/* Change 4: Rudiment name — hero display with cyan gradient text */
.practice-rudiment-name {
  font-family: var(--nd-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Cyan gradient text — matches practice.html hero pattern */
  background: linear-gradient(135deg, var(--nd-accent-secondary), var(--nd-accent-secondary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  line-height: 1.3;
}

/* Nav bar inside header (prev / random / next) */
.practice-nav-bar {
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
  flex-shrink: 0;
}

/* Change 8: Nav button feedback — bounce easing, hover glow */
.practice-nav-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: var(--nd-radius-full);
  background: var(--nd-bg-surface);
  color: var(--nd-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              transform var(--nd-dur-normal) var(--nd-ease-bounce);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.practice-nav-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}

.practice-nav-btn:active {
  transform: scale(0.88);
}

.practice-nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Random rudiment button — THE interaction, visually dominant */
#btn-random-rudiment {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 77, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              transform var(--nd-dur-normal) var(--nd-ease-bounce),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out);
}

#btn-random-rudiment:hover {
  background: linear-gradient(135deg, var(--nd-accent-primary-end), var(--nd-accent-primary));
  box-shadow: 0 0 28px rgba(255, 77, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

#btn-random-rudiment:active {
  transform: scale(0.85);
  box-shadow: 0 0 10px rgba(255, 77, 0, 0.30);
}

#btn-random-rudiment svg {
  width: 20px;
  height: 20px;
}

/* ---- Practice: scrollable content area ---- */
.practice-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--nd-space-sm) var(--nd-space-sm) var(--nd-space-md);
  -webkit-overflow-scrolling: touch;
}

/* Change 2: Notation card elevation — glass card with depth and halo */
.practice-notation-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--nd-radius-md);
  padding: var(--nd-space-sm);
  margin-bottom: var(--nd-space-sm);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(0, 243, 255, 0.04);
}

/* Change 14: Card section labels — proper section headers with glow */
.practice-card-label {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.40);
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.15);
  margin-bottom: var(--nd-space-xs);
}

/* Change 3: White box softening — keeps white but adds inner shadow and slight warmth */
/* Music notation MUST have a white surface. Black noteheads are invisible on dark. */
/* Fix 5: min-height reduced from 120px → 80px so the staff fills the box tightly.
   align-items: flex-start pins SVG to the top (no vertical whitespace above staff).
   justify-content: center keeps the staff horizontally centered in the white box. */
.notation-inner {
  background: #fafafa;
  border-radius: var(--nd-radius-sm);
  padding: var(--nd-space-sm);
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* When in exercise mode, rudiment notation box shrinks (reference size).
   No max-height — sticking labels (R L R L) render below the staff and must
   never be clipped. VexFlow controls the natural height. */
.practice-notation-card.reference-mode .notation-inner,
#notation-display.reference-mode .notation-inner {
  min-height: 80px;
}

/* Exercise notation display card */
#exercise-display {
  margin-top: 0;
}

#exercise-display .notation-exercise-title {
  margin-bottom: var(--nd-space-xs);
}

#exercise-display .notation-exercise-meta {
  margin-bottom: var(--nd-space-sm);
}

/* VexFlow SVG fills the white container */
.notation-inner svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Empty / placeholder text inside notation box */
.notation-empty {
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: #888888;
  text-align: center;
  padding: var(--nd-space-md);
  line-height: 1.5;
}

/* Empty state — before any rudiment is selected */
.notation-empty-state {
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: #888888;
  text-align: center;
  padding: var(--nd-space-md);
  line-height: 1.5;
}

/* Error state — when VexFlow render fails or CDN unavailable */
.notation-error {
  font-family: var(--nd-font-body);
  font-size: 0.85rem;
  color: #cc3300;
  text-align: center;
  padding: var(--nd-space-md);
  line-height: 1.5;
}

/* Counting layer row below notation card */
.practice-counting-layer {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: var(--nd-space-xs) 0;
  flex-shrink: 0;
  min-height: 0; /* collapse when empty */
}

/* Change 11: Counting syllables — teaching UI feel with cyan glow on active */
.counting-syllable {
  font-family: var(--nd-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  min-width: 22px;
  text-align: center;
  transition: color var(--nd-dur-fast) var(--nd-ease-out),
              text-shadow var(--nd-dur-fast) var(--nd-ease-out),
              opacity var(--nd-dur-fast) var(--nd-ease-out);
  padding: 2px 4px;
  border-radius: var(--nd-radius-xs);
}

.counting-syllable.active {
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 12px rgba(0, 243, 255, 0.5);
  background: rgba(0, 243, 255, 0.08);
}

.counting-syllable.rest {
  color: rgba(255, 255, 255, 0.18);
  opacity: 0.6;
}

/* Hand-colored counting syllables — right=orange, left=cyan */
.counting-syllable.right {
  color: var(--nd-accent-primary);
}

.counting-syllable.left {
  color: var(--nd-accent-secondary);
}

.counting-syllable.right.highlight,
.counting-syllable.right.active {
  color: var(--nd-accent-primary);
  text-shadow: 0 0 12px rgba(255, 77, 0, 0.5);
  background: rgba(255, 77, 0, 0.10);
}

.counting-syllable.left.highlight,
.counting-syllable.left.active {
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 12px rgba(0, 243, 255, 0.5);
  background: rgba(0, 243, 255, 0.08);
}

/* Sticking row — hidden: sticking is visible in VexFlow notation directly */
.practice-sticking-row {
  display: none;
}

/* Change 12: Sticking labels as pill badges — R/L are color-coded, pill-shaped */
.sticking-label {
  font-family: var(--nd-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 5px;
}

.sticking-label.right {
  color: var(--nd-accent-primary);
  background: rgba(255, 77, 0, 0.15);
}

.sticking-label.left {
  color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.15);
}

/* ---- Practice: exercise area (dual notation) ---- */
.practice-exercise-area {
  margin-top: var(--nd-space-sm);
  padding-top: var(--nd-space-sm);
  border-top: 1px solid var(--nd-border-subtle);
}

.practice-exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--nd-space-sm);
}

.practice-exercise-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-space-xs);
  height: 36px;
  padding: 0 var(--nd-space-sm);
  margin-top: var(--nd-space-sm);
  border-radius: var(--nd-radius-sm);
  background: none;
  border: none;
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--nd-dur-fast) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.practice-exercise-back-btn:hover {
  color: var(--nd-accent-primary);
}

.practice-exercise-back-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Exercise trigger button area */
.practice-exercise-trigger {
  padding: var(--nd-space-xs) 0;
}

/* Change 16: Controls bar refinement — frosted glass with top shadow */
.practice-controls-bar {
  flex-shrink: 0;
  height: var(--nd-controls-bar-height);
  min-height: var(--nd-controls-bar-height);
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  padding: 0 var(--nd-space-md);
}

/* Tempo controls group (minus / display / plus) */
.tempo-controls {
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
}

/* Change 6: BPM display upgrade — larger, more prominent */
.tempo-display {
  font-family: var(--nd-font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--nd-text-primary);
  min-width: 44px;
  text-align: center;
  letter-spacing: 0.5px;
}

.tempo-label {
  font-family: var(--nd-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Volume controls */
.volume-controls {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  margin-left: auto;
}

.volume-icon {
  width: 20px;
  height: 20px;
  color: var(--nd-text-secondary);
  flex-shrink: 0;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--nd-border-solid);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nd-accent-primary);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nd-accent-primary);
  cursor: pointer;
  border: none;
}

/* Change 5: Play button upgrade — 56px hero, always-on glow, bounce easing */
.play-btn {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--nd-radius-full);
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  /* Always-on orange glow at rest */
  box-shadow: 0 0 20px rgba(255, 77, 0, 0.4);
  transition: box-shadow var(--nd-dur-normal) var(--nd-ease-out),
              transform var(--nd-dur-normal) var(--nd-ease-bounce);
  flex-shrink: 0;
}

.play-btn:hover {
  box-shadow:
    0 0 30px rgba(255, 77, 0, 0.5),
    0 0 60px rgba(255, 77, 0, 0.2);
  transform: scale(1.08);
}

.play-btn:active {
  transform: scale(0.95);
}

.play-btn svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
  stroke: none;
}

.play-btn.playing {
  background: linear-gradient(135deg, #e04400, #cc3a00);
  box-shadow: 0 0 20px 4px var(--nd-glow-primary);
}

/* BPM display area */
.bpm-display-group {
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
  flex-shrink: 0;
}

.bpm-value {
  font-family: var(--nd-font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nd-text-primary);
  line-height: 1;
  min-width: 40px;
  text-align: right;
}

.bpm-unit {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 2px;
}

/* Tap tempo button */
.tap-btn {
  height: var(--nd-touch-target-min);
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              color var(--nd-dur-normal) var(--nd-ease-out),
              border-color var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.tap-btn:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
  border-color: var(--nd-border-accent);
}

.tap-btn:active {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
  border-color: var(--nd-border-accent);
}

/* Playback mode toggle */
.mode-toggle-btn {
  height: var(--nd-touch-target-min);
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              color var(--nd-dur-normal) var(--nd-ease-out),
              border-color var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.mode-toggle-btn:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
}

.mode-toggle-btn.mode-play-along {
  border-color: var(--nd-border-accent);
  color: var(--nd-accent-primary);
}

.mode-toggle-btn.mode-click-only {
  border-color: var(--nd-border-cyan);
  color: var(--nd-accent-secondary);
}

.mode-toggle-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Spacer pushes overflow to far right */
.controls-spacer {
  flex: 1;
}

/* Overflow button (three dots) in controls bar */
.controls-overflow-btn {
  min-width: var(--nd-touch-target-min);
  min-height: var(--nd-touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-text-secondary);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  transition: color var(--nd-dur-normal) var(--nd-ease-out),
              background var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.controls-overflow-btn:hover {
  color: var(--nd-text-primary);
  background: var(--nd-bg-surface);
}

.controls-overflow-btn svg {
  width: 20px;
  height: 20px;
}

/* Controls overflow panel — slide-up from controls bar on phone.
   z-index 21: above tab bar (20) and controls bar (19) so the panel
   slides visually above both, not behind them. */
.controls-overflow-panel {
  position: fixed;
  bottom: calc(var(--nd-tab-bar-height) + var(--nd-controls-bar-height) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 21;
  background: rgba(18, 18, 18, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--nd-border-solid);
  padding: var(--nd-space-sm) var(--nd-space-md);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--nd-dur-medium) var(--nd-ease-out),
              opacity var(--nd-dur-medium) var(--nd-ease-out);
}

.controls-overflow-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.controls-overflow-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.controls-volume-overflow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--nd-text-secondary);
  min-width: 120px;
}

.controls-volume-overflow input[type="range"] {
  flex: 1;
  min-width: 60px;
}

/* Random button in the controls bar — always visible */
.controls-random-btn {
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 77, 0, 0.25);
}

.controls-random-btn:hover {
  background: linear-gradient(135deg, var(--nd-accent-primary-end), var(--nd-accent-primary));
  box-shadow: 0 0 20px rgba(255, 77, 0, 0.45);
  color: #ffffff;
}

/* Fix 2: Back and Exercise buttons in the main controls bar — ghost style, compact */
.controls-back-btn,
.controls-exercise-btn {
  background: transparent;
  border-color: var(--nd-border-subtle);
  color: var(--nd-text-secondary);
  min-width: 44px;
  padding: 0 var(--nd-space-sm);
  font-size: 0.75rem;
}

.controls-back-btn:hover,
.controls-exercise-btn:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
  border-color: var(--nd-border-solid);
}

/* On desktop (>= 768px): overflow panel stays hidden until "..." is tapped — same as mobile.
   The "..." button remains visible on all screen sizes. */
@media (min-width: 768px) {
  #view-practice {
    padding-bottom: calc(var(--nd-controls-bar-height) + var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
  }
}

/* Tempo controls: increment/decrement (desktop) */
.tempo-btn {
  width: var(--nd-touch-target-min);
  height: var(--nd-touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-text-secondary);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  transition: color var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.tempo-btn:hover {
  color: var(--nd-accent-primary);
}

.tempo-btn svg {
  width: 16px;
  height: 16px;
}

/* Tablet/Desktop: expand controls bar — play btn stays 56px (already upgraded) */
@media (min-width: 768px) {
  .practice-controls-bar {
    padding: 0 var(--nd-space-xl);
    gap: var(--nd-space-md);
  }

  .volume-slider {
    width: 100px;
  }
}

/* Nav buttons (practice-nav-btn) -- see .practice-nav-btn rule near .practice-nav-bar */

/* "Exercise 3 of 12" counter */
.practice-exercise-counter {
  font-family: var(--nd-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--nd-text-secondary);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* Prev/Next exercise buttons container */
.practice-exercise-nav-btns {
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
}

/* "Exercises (12)" pill button — inviting, accent-tinted */
.practice-exercise-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-space-sm);
  height: 36px;
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-chip);
  background: var(--nd-accent-primary-dim);
  border: 1px solid var(--nd-border-accent);
  color: var(--nd-accent-primary);
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.practice-exercise-btn:hover {
  background: rgba(255, 77, 0, 0.22);
  box-shadow: 0 0 10px var(--nd-glow-primary);
}

.practice-exercise-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.practice-exercise-count {
  opacity: 0.8;
}

/* Disabled state — no exercises for this rudiment */
.practice-exercise-btn--disabled {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-chip);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  color: var(--nd-text-dim);
  font-family: var(--nd-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

/* Change 13: Exercise trigger button — cyan glow and backdrop blur */
.practice-exercise-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 243, 255, 0.3) !important;
  box-shadow: 0 0 12px rgba(0, 243, 255, 0.1);
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out),
              border-color var(--nd-dur-normal) var(--nd-ease-out);
}

.practice-exercise-btn:hover {
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2), 0 0 10px var(--nd-glow-primary) !important;
}

/* Change 15: Notation loading skeleton — shimmer placeholder while VexFlow renders */
.notation-inner.notation-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 40px;
  margin-top: -20px;
  border-radius: var(--nd-radius-sm);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-light 1.5s linear infinite;
}

.notation-inner.notation-loading {
  position: relative;
  min-height: 80px; /* Fix 5: match base .notation-inner min-height */
}

@keyframes shimmer-light {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .practice-nav-btn:active {
    transform: none;
  }
  .tab-item:active .tab-icon {
    transform: none;
  }
  .play-btn:hover,
  .play-btn:active {
    transform: none;
  }
}

/* =========================================================
   PRACTICE VIEW — PORTED FROM PRACTICE.HTML
   Exact CSS from the working standalone practice.html.
   These styles support the sidebar + main two-column layout,
   glass cards, exercise navigator, controls bar, breakdown
   panel, and all toggle/mode buttons.
   ========================================================= */

/* ---- Page Layout — mobile-first, sidebar at 768px+ ---- */
.practice-layout {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--nd-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-md);
}

@media (min-width: 768px) {
  .practice-layout {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--nd-space-lg);
    gap: var(--nd-space-lg);
  }
}

/* ---- Glass Card — reusable surface ---- */
.glass-card {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-lg);
  padding: var(--nd-space-lg);
}

.glass-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--nd-space-md);
  gap: var(--nd-space-sm);
}

.glass-card-title {
  font-family: var(--nd-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.placeholder-text {
  color: var(--nd-text-faint);
  font-family: var(--nd-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  padding: var(--nd-space-xl) var(--nd-space-md);
}

.placeholder-text strong {
  display: block;
  font-family: var(--nd-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--nd-text-muted);
  margin-bottom: var(--nd-space-sm);
}

/* ---- Rudiment Selector — sidebar ---- */
#rudiment-selector {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  #rudiment-selector {
    width: 280px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - var(--nd-tab-bar-height) - 32px);
    overflow-y: auto;
  }

  #rudiment-selector::-webkit-scrollbar { width: 4px; }
  #rudiment-selector::-webkit-scrollbar-track { background: transparent; }
  #rudiment-selector::-webkit-scrollbar-thumb { background: var(--nd-border-subtle); border-radius: 2px; }
}

.selector-collapse-btn {
  background: none;
  border: none;
  color: var(--nd-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: var(--nd-space-xs);
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nd-radius-sm);
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
}

.selector-collapse-btn:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
}

.selector-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-primary);
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  padding: 0 var(--nd-space-md);
  height: 48px;
  outline: none;
  transition: border-color var(--nd-dur-normal) var(--nd-ease-out);
  margin-bottom: var(--nd-space-md);
}

.selector-search::placeholder { color: var(--nd-text-faint); }

.selector-search:focus {
  border-color: var(--nd-accent-secondary);
  box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.15);
}

/* ---- Filter Chips ---- */
.selector-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-space-sm);
  margin-bottom: var(--nd-space-md);
}

#view-practice .filter-chip {
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: 20px;
  color: var(--nd-text-muted);
  font-family: var(--nd-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
}

#view-practice .filter-chip:hover,
#view-practice .filter-chip.active {
  background: linear-gradient(135deg, var(--nd-accent-secondary) 0%, var(--nd-accent-secondary-end) 100%);
  border-color: var(--nd-accent-secondary);
  color: var(--nd-text-primary);
}

/* ---- Rudiment List ---- */
#exercise-list { min-height: 120px; }

.rudiment-list-item {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  padding: var(--nd-space-sm) var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  min-height: 48px;
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: var(--nd-text-secondary);
  border-left: 3px solid transparent;
  line-height: 1.2;
}

.rudiment-list-item:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
}

.rudiment-list-item.active {
  background: rgba(0, 243, 255, 0.1);
  border-left: 3px solid var(--nd-accent-secondary);
  color: var(--nd-accent-secondary);
  font-weight: 600;
}

.rudiment-family-header {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--nd-text-faint);
  padding: var(--nd-space-md) var(--nd-space-md) var(--nd-space-xs);
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
}

.rudiment-family-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nd-border-subtle);
}

.rudiment-family-header:first-child { padding-top: var(--nd-space-xs); }

.rudiment-list-error {
  color: var(--nd-accent-primary);
  font-family: var(--nd-font-body);
  font-size: 0.85rem;
  padding: var(--nd-space-md);
  text-align: center;
  line-height: 1.5;
}

/* ---- Main Content Column ---- */
.practice-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-md);
}

/* ---- Notation Display ---- */
#notation-display { min-height: 220px; position: relative; }

#notation-display svg { max-width: 100%; height: auto; }

.notation-exercise-title {
  font-family: var(--nd-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--nd-text-primary);
  margin-bottom: var(--nd-space-sm);
}

.notation-exercise-meta {
  font-family: var(--nd-font-body);
  font-size: 0.85rem;
  color: var(--nd-text-muted);
  margin-bottom: var(--nd-space-md);
  display: flex;
  gap: var(--nd-space-md);
  flex-wrap: wrap;
}

.notation-meta-tag {
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nd-text-muted);
}

/* ---- Dual Notation / Break It Down ---- */
.btn-breakdown-toggle {
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-accent-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  display: none;
  align-items: center;
  gap: 6px;
}

.btn-breakdown-toggle:hover {
  background: rgba(0, 243, 255, 0.12);
  border-color: var(--nd-accent-secondary);
  box-shadow: 0 0 8px var(--nd-glow-secondary);
}

.btn-breakdown-toggle.active {
  background: rgba(0, 243, 255, 0.18);
  border-color: var(--nd-accent-secondary);
  color: var(--nd-accent-secondary);
  box-shadow: 0 0 12px var(--nd-glow-secondary);
}

.btn-breakdown-toggle .breakdown-arrow {
  display: inline-block;
  transition: transform var(--nd-dur-normal) var(--nd-ease-out);
}

.btn-breakdown-toggle.active .breakdown-arrow {
  transform: rotate(180deg);
}

.notation-view-label {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: none;
}

.notation-view-label.label-written {
  color: var(--nd-text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.notation-view-label.label-played {
  color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.08);
}

.notation-view-label.visible { display: inline-block; }

.notation-breakdown-wrapper {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--nd-dur-normal) var(--nd-ease-out),
              opacity var(--nd-dur-fast) var(--nd-ease-out),
              margin var(--nd-dur-normal) var(--nd-ease-out);
  margin-top: 0;
}

.notation-breakdown-wrapper.revealed {
  max-height: 320px;
  opacity: 1;
  margin-top: var(--nd-space-md);
}

.notation-breakdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nd-accent-secondary), transparent);
  margin-bottom: var(--nd-space-sm);
  opacity: 0.4;
}

.notation-breakdown-inner {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  background: #ffffff;
  border-radius: var(--nd-radius-sm);
  padding: var(--nd-space-sm);
  border: 1px solid rgba(0, 243, 255, 0.2);
}

.notation-breakdown-inner svg { max-width: 100%; height: auto; }

/* ---- Rudiment Header — tappable name above counting + notation ---- */
.practice-rudiment-header {
  padding: var(--nd-space-xs) var(--nd-space-md) 0;
  flex-shrink: 0;
}

.practice-rudiment-name-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-space-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--nd-space-xs) 0;
  min-height: var(--nd-touch-target-min);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--nd-dur-fast) var(--nd-ease-out);
}

.practice-rudiment-name-btn:hover {
  opacity: 0.8;
}

.practice-rudiment-name-btn:active {
  opacity: 0.6;
}

#practice-rudiment-name-text {
  font-family: var(--nd-font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--nd-accent-secondary), var(--nd-accent-secondary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

.practice-rudiment-name-arrow {
  color: var(--nd-text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- Counting Layer — BELOW notation, tightly coupled (matches practice.html) ---- */
/* Minimal container: no glass-card chrome, just the syllable row */
#counting-layer {
  min-height: 36px;
  padding: 0 var(--nd-space-md);
  flex-shrink: 0;
  margin-top: var(--nd-space-xs);
}

.counting-syllables-row {
  display: flex;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: var(--nd-space-xs) 0;
  min-height: 36px;
}

/* ---- Beat Box Layer — HIDDEN (user said no beat boxes) ---- */
#beatbox-layer { display: none !important; }

.beatbox-grid {
  display: flex;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: var(--nd-space-sm) 0;
}

.beatbox-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--nd-border-subtle);
  transition: all var(--nd-dur-fast) var(--nd-ease-bounce);
}

.beatbox-dot.rh.active {
  background: var(--nd-accent-primary);
  box-shadow: 0 0 16px var(--nd-glow-primary);
  transform: scale(1.15);
}

.beatbox-dot.lh.active {
  background: var(--nd-accent-secondary);
  box-shadow: 0 0 16px var(--nd-glow-secondary);
  transform: scale(1.15);
}

.beatbox-labels {
  display: flex;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--nd-space-xs);
}

.beatbox-label {
  width: 28px;
  text-align: center;
  font-family: var(--nd-font-mono);
  font-size: 0.65rem;
  color: var(--nd-text-faint);
}

/* ---- Controls Bar (SPA: above tab bar, position:fixed) ---- */
/* Hidden by default — GhostClick compact bar replaces it in ALL scenarios.
   No JS class toggle needed; the compact bar is always-on. */
.spa-controls-bar {
  display: none;
  position: fixed;
  bottom: calc(var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  /* z-index stacking: tab-bar=20, controls-bar=19, overflow-panel=21 */
  z-index: 19;
  /* Explicit height matches the design token so overflow-panel bottom calc is exact */
  height: var(--nd-controls-bar-height);
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--nd-border-subtle);
  /* No vertical padding — height is fixed, items centered via .controls-inner flexbox */
  padding: 0 var(--nd-space-md);
  /* Allow the 56px Play button to be visible even at exact height boundary */
  overflow: visible;
}

.controls-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--nd-space-md);
}

/* Play/Pause button — big orange CTA */
.btn-play-pause {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nd-accent-primary) 0%, var(--nd-accent-primary-end) 100%);
  border: none;
  color: var(--nd-text-primary);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px var(--nd-glow-primary);
  transition: all var(--nd-dur-normal) var(--nd-ease-bounce);
  flex-shrink: 0;
}

.btn-play-pause:hover {
  box-shadow: 0 0 30px var(--nd-glow-primary-hover), 0 0 60px rgba(255, 77, 0, 0.3);
  transform: scale(1.08);
}

.btn-play-pause:active { transform: scale(0.95); }

/* Tempo section */
.controls-tempo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
}

/* Tempo slider */
.controls-tempo-slider {
  flex: 1;
  min-width: 80px;
  max-width: 160px;
}

.tempo-slider {
  width: 100%;
  height: 4px;
  background: var(--nd-border-subtle);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.tempo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nd-accent-primary) 0%, var(--nd-accent-primary-end) 100%);
  cursor: pointer;
  box-shadow: 0 0 8px var(--nd-glow-primary);
}

.tempo-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nd-accent-primary) 0%, var(--nd-accent-primary-end) 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px var(--nd-glow-primary);
}

/* Toggle group */
.controls-toggles {
  display: flex;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.toggle-btn {
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-faint);
  font-family: var(--nd-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 var(--nd-space-sm);
  min-height: 48px;
  min-width: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  line-height: 1.2;
  text-align: center;
}

.toggle-btn:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-secondary);
}

.toggle-btn.active {
  background: rgba(0, 243, 255, 0.15);
  border-color: var(--nd-accent-secondary);
  color: var(--nd-accent-secondary);
}

/* LH lead button */
.lh-lead-btn {
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-faint);
  font-family: var(--nd-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0 var(--nd-space-sm);
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  text-align: center;
  line-height: 1.2;
}

.lh-lead-btn.active {
  background: rgba(255, 77, 0, 0.15);
  border-color: var(--nd-accent-primary);
  color: var(--nd-accent-primary);
}

/* Sound set selector */
#sound-set-select {
  background: var(--nd-bg-surface);
  color: var(--nd-text-primary);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  padding: 4px 8px;
  font-family: var(--nd-font-body);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  min-width: 80px;
}
#sound-set-select:focus { border-color: var(--nd-accent-secondary); }
#sound-set-select option { background: #1a1a1a; color: #fff; }

/* Volume slider */
.controls-volume input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--nd-bg-surface);
  border-radius: 2px;
  outline: none;
}
.controls-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nd-accent-secondary);
  cursor: pointer;
}
.controls-volume input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nd-accent-secondary);
  border: none;
  cursor: pointer;
}

.controls-label {
  font-family: var(--nd-font-body);
  font-size: 0.65rem;
  color: var(--nd-text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ---- Section Dividers ---- */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  color: var(--nd-text-faint);
  font-size: 0.7rem;
  font-family: var(--nd-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--nd-space-sm);
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nd-border-subtle);
}

/* ---- Exercise Navigator ---- */
.exercise-section-divider {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  margin: var(--nd-space-md) 0 var(--nd-space-sm);
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--nd-text-faint);
}

.exercise-section-divider::before,
.exercise-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nd-border-subtle);
}

.exercise-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-space-sm);
  margin-bottom: var(--nd-space-sm);
}

.exercise-panel-title {
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--nd-text-faint);
}

.exercise-count-badge {
  font-family: var(--nd-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--nd-text-faint);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: 20px;
  padding: 2px 8px;
}

.exercise-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--nd-space-sm) var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  min-height: 48px;
  justify-content: center;
  border-left: 3px solid transparent;
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.exercise-card:hover {
  background: var(--nd-bg-surface-hover);
  border-color: var(--nd-border-subtle);
}

.exercise-card.active {
  background: rgba(0, 243, 255, 0.08);
  border-color: var(--nd-accent-secondary);
  border-left-color: var(--nd-accent-secondary);
  box-shadow: 0 0 12px rgba(0, 243, 255, 0.12);
}

.exercise-card-name {
  font-family: var(--nd-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
  line-height: 1.2;
}

.exercise-card.active .exercise-card-name {
  color: var(--nd-accent-secondary);
}

.exercise-card-meta {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  flex-wrap: wrap;
}

.exercise-type-badge {
  font-family: var(--nd-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(0, 243, 255, 0.15);
  border: 1px solid rgba(0, 243, 255, 0.3);
  color: var(--nd-accent-secondary);
}

.exercise-tier-badge {
  font-family: var(--nd-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid rgba(0, 243, 255, 0.3);
  color: var(--nd-accent-secondary);
}

.exercise-difficulty {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.difficulty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nd-border-subtle);
  transition: background var(--nd-dur-normal) var(--nd-ease-out);
}

.difficulty-dot.filled {
  background: var(--nd-accent-primary);
}

.exercise-empty-state {
  color: var(--nd-text-faint);
  font-family: var(--nd-font-body);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--nd-space-lg) var(--nd-space-md);
  line-height: 1.5;
}

.btn-view-rudiment {
  background: none;
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-faint);
  font-family: var(--nd-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  min-height: 28px;
  transition: all var(--nd-dur-normal) var(--nd-ease-out);
  white-space: nowrap;
}

.btn-view-rudiment:hover {
  background: var(--nd-bg-surface-hover);
  border-color: var(--nd-accent-secondary);
  color: var(--nd-accent-secondary);
}

.btn-view-rudiment.active {
  background: rgba(0, 243, 255, 0.1);
  border-color: var(--nd-accent-secondary);
  color: var(--nd-accent-secondary);
}

/* ---- Responsive: hide toggle labels on narrow screens ---- */
@media (max-width: 480px) {
  .toggle-btn span.label,
  .lh-lead-btn span.label { display: none; }
  .toggle-btn span.icon,
  .lh-lead-btn span.icon { display: block; }
  .controls-tempo-slider { display: none; }
}

@media (min-width: 481px) {
  .toggle-btn span.icon,
  .lh-lead-btn span.icon { display: none; }
}

/* ---- Practice mode-toggle-btn override for practice.html style ---- */
#view-practice .mode-toggle-btn {
  background: linear-gradient(135deg, var(--nd-accent-secondary) 0%, var(--nd-accent-secondary-end) 100%);
  border: none;
  color: var(--nd-text-primary);
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 var(--nd-space-md);
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}

#view-practice .mode-toggle-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ---- Practice body bottom padding: consolidated into the rule at top of Practice View section ---- */
/* (Removed duplicate: was using arbitrary 80px instead of --nd-controls-bar-height token) */

/* Reduced motion for breakdown */
@media (prefers-reduced-motion: reduce) {
  .notation-breakdown-wrapper { transition: none; }
  .btn-breakdown-toggle .breakdown-arrow { transition: none; }
}


/* =========================================================
   LIBRARY VIEW
   Spec: Section 4 — Library View
   ========================================================= */

.library-view-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Search + filter header — sticky within view */
.library-search-header {
  padding: var(--nd-space-md) var(--nd-space-md) 0;
  flex-shrink: 0;
  background: var(--nd-bg-primary);
  /* Slight gradient fade to mask content scrolling underneath */
  background: linear-gradient(to bottom, var(--nd-bg-primary) 80%, transparent);
  position: sticky;
  top: 0;
  z-index: var(--nd-z-raised);
}

/* Search bar wrapper */
.search-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  background: var(--nd-bg-input);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-lg);
  padding: 0 var(--nd-space-md);
  height: 48px;
  transition: border-color var(--nd-dur-normal) var(--nd-ease-out),
              background var(--nd-dur-normal) var(--nd-ease-out);
}

.search-bar-wrapper:focus-within {
  border-color: var(--nd-border-accent);
  background: var(--nd-bg-surface-hover);
}

.search-bar-icon {
  width: 18px;
  height: 18px;
  color: var(--nd-text-secondary);
  flex-shrink: 0;
}

.search-bar-icon svg {
  width: 18px;
  height: 18px;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--nd-text-primary);
  font-family: var(--nd-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  min-height: 44px;
}

.search-input::placeholder {
  color: var(--nd-text-secondary);
  font-weight: 400;
}

.search-clear-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-text-secondary);
  cursor: pointer;
  border-radius: var(--nd-radius-full);
  transition: color var(--nd-dur-fast) var(--nd-ease-out),
              background var(--nd-dur-fast) var(--nd-ease-out);
}

.search-clear-btn:hover {
  color: var(--nd-text-primary);
  background: var(--nd-bg-surface);
}

.search-clear-btn svg {
  width: 14px;
  height: 14px;
}

/* Filter chips row — horizontally scrollable on phone */
.filter-chips-row {
  display: flex;
  gap: var(--nd-space-sm);
  overflow-x: auto;
  padding: var(--nd-space-md) 0 var(--nd-space-sm);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.filter-chips-row::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-chip);
  border: 1px solid var(--nd-border-subtle);
  background: var(--nd-bg-chip);
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              color var(--nd-dur-fast) var(--nd-ease-out),
              border-color var(--nd-dur-fast) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.filter-chip:hover {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
  border-color: var(--nd-border-accent);
}

.filter-chip.active {
  background: var(--nd-bg-chip-active);
  color: var(--nd-accent-primary);
  border-color: var(--nd-border-accent);
}

/* Library content area — scrollable grid */
.library-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--nd-space-sm) var(--nd-space-md) var(--nd-space-lg);
  -webkit-overflow-scrolling: touch;
}

/* Section heading for family groups */
.library-section-heading {
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: var(--nd-space-lg) 0 var(--nd-space-sm);
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
}

.library-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nd-border-subtle);
}

/* Rudiment cards grid — responsive column layout */
.rudiment-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nd-space-sm);
}

@media (min-width: 480px) {
  .rudiment-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .rudiment-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nd-space-md);
  }
}

@media (min-width: 1024px) {
  .rudiment-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .rudiment-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Rudiment Card ---- */
.rudiment-card {
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-md);
  padding: var(--nd-space-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--nd-dur-normal) var(--nd-ease-out),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out),
              background var(--nd-dur-normal) var(--nd-ease-out);
  min-height: 100px;
  -webkit-tap-highlight-color: transparent;
}

.rudiment-card:hover {
  border-color: var(--nd-border-accent);
  box-shadow: 0 4px 20px var(--nd-glow-card),
              0 0 0 1px var(--nd-border-accent);
  background: color-mix(in srgb, var(--nd-bg-card) 95%, var(--nd-accent-primary) 5%);
}

/* Card header row */
.rudiment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nd-space-sm);
  margin-bottom: var(--nd-space-sm);
}

.rudiment-card-name {
  font-family: var(--nd-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nd-text-primary);
  line-height: 1.3;
  flex: 1;
}

/* Category badge */
.category-badge {
  flex-shrink: 0;
  height: 22px;
  padding: 0 var(--nd-space-sm);
  border-radius: var(--nd-radius-chip);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  font-family: var(--nd-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nd-text-secondary);
  display: flex;
  align-items: center;
}

/* Difficulty indicator — dots */
.difficulty-dots {
  display: flex;
  gap: 3px;
  margin-top: var(--nd-space-xs);
}

.difficulty-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--nd-radius-full);
  background: var(--nd-border-solid);
}

.difficulty-dot.filled {
  background: var(--nd-accent-primary);
}

/* Tier lock badge on cards */
.tier-lock-badge {
  position: absolute;
  top: var(--nd-space-sm);
  right: var(--nd-space-sm);
  width: 24px;
  height: 24px;
  border-radius: var(--nd-radius-full);
  background: rgba(10, 10, 10, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-text-secondary);
}

.tier-lock-badge svg {
  width: 12px;
  height: 12px;
}

/* Locked card shimmer animation */
.rudiment-card.locked {
  opacity: 0.7;
  cursor: default;
}

.rudiment-card.locked:hover {
  border-color: var(--nd-border-subtle);
  box-shadow: none;
}

.rudiment-card.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer var(--nd-dur-shimmer) linear infinite;
}

/* =========================================================
   GHOSTCLICK VIEW
   Spec: Section 6 — GhostClick View
   Visual identity leans cyan, not orange
   ========================================================= */

.ghostclick-view-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--nd-space-xl) var(--nd-space-md);
  gap: var(--nd-space-xl);
  position: relative;
}

/* GhostClick brand header */
.ghostclick-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nd-space-sm);
}

.ghostclick-brand-name {
  font-family: var(--nd-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--nd-accent-secondary), var(--nd-accent-secondary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ghostclick-brand-tagline {
  font-family: var(--nd-font-body);
  font-size: 0.85rem;
  color: var(--nd-text-secondary);
  letter-spacing: 0.3px;
}

/* Large BPM display */
.ghostclick-bpm-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nd-space-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ghostclick-bpm-number {
  font-family: var(--nd-font-mono);
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 700;
  color: var(--nd-text-primary);
  line-height: 1;
  letter-spacing: -3px;
  transition: color var(--nd-dur-normal) var(--nd-ease-out),
              text-shadow var(--nd-dur-normal) var(--nd-ease-out);
}

.ghostclick-bpm-display:hover .ghostclick-bpm-number {
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 30px var(--nd-glow-secondary);
}

.ghostclick-bpm-label {
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Beat dots row */
.ghostclick-beat-dots {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.beat-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--nd-radius-full);
  border: 2px solid var(--nd-text-dim);
  background: transparent;
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              border-color var(--nd-dur-fast) var(--nd-ease-out),
              box-shadow var(--nd-dur-fast) var(--nd-ease-out);
}

.beat-dot.accent {
  border-color: var(--nd-accent-secondary);
}

.beat-dot.active {
  background: var(--nd-accent-secondary);
  border-color: var(--nd-accent-secondary);
  box-shadow: 0 0 12px var(--nd-glow-secondary);
}

/* GhostClick play button — cyan instead of orange */
.ghostclick-play-btn {
  width: 80px;
  height: 80px;
  border-radius: var(--nd-radius-full);
  background: linear-gradient(135deg, var(--nd-accent-secondary), var(--nd-accent-secondary-end));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 0 var(--nd-glow-secondary);
  transition: box-shadow var(--nd-dur-normal) var(--nd-ease-out),
              opacity var(--nd-dur-fast) var(--nd-ease-out);
}

.ghostclick-play-btn:hover {
  box-shadow: 0 0 24px 6px var(--nd-glow-secondary);
}

.ghostclick-play-btn:active {
  opacity: 0.85;
}

.ghostclick-play-btn svg {
  width: 28px;
  height: 28px;
  fill: #000000;
  stroke: none;
}

.ghostclick-play-btn.playing {
  box-shadow: 0 0 32px 8px var(--nd-glow-secondary);
}

/* GhostClick controls row */
.ghostclick-controls-row {
  display: flex;
  gap: var(--nd-space-md);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ghostclick-control-btn {
  height: 44px;
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-cyan);
  color: var(--nd-accent-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.ghostclick-control-btn:hover {
  background: rgba(0, 243, 255, 0.10);
  box-shadow: 0 0 12px var(--nd-glow-secondary);
}

/* =========================================================
   MORE VIEW
   Spec: Section 7 — More View
   ========================================================= */

.more-view-inner {
  padding: var(--nd-space-lg) var(--nd-space-md);
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.more-section {
  margin-bottom: var(--nd-space-xl);
}

.more-section-title {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--nd-space-sm);
  padding-left: var(--nd-space-sm);
}

.more-item {
  display: flex;
  align-items: center;
  gap: var(--nd-space-md);
  padding: 0 var(--nd-space-md);
  height: 56px;
  min-height: var(--nd-touch-target-min);
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-md);
  margin-bottom: 2px;
  cursor: pointer;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              border-color var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.more-item:first-of-type {
  border-radius: var(--nd-radius-md) var(--nd-radius-md) var(--nd-radius-sm) var(--nd-radius-sm);
}

.more-item:last-of-type {
  border-radius: var(--nd-radius-sm) var(--nd-radius-sm) var(--nd-radius-md) var(--nd-radius-md);
  margin-bottom: 0;
}

.more-item:only-child {
  border-radius: var(--nd-radius-md);
}

.more-item:hover {
  background: var(--nd-bg-surface-hover);
  border-color: var(--nd-border-accent);
}

.more-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nd-radius-sm);
  flex-shrink: 0;
}

.more-item-icon.orange {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
}

.more-item-icon.cyan {
  background: rgba(0, 243, 255, 0.10);
  color: var(--nd-accent-secondary);
}

.more-item-icon.neutral {
  background: var(--nd-bg-surface);
  color: var(--nd-text-muted);
}

.more-item-icon svg {
  width: 16px;
  height: 16px;
}

.more-item-text {
  flex: 1;
}

.more-item-label {
  font-family: var(--nd-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nd-text-primary);
  line-height: 1.2;
}

.more-item-sublabel {
  font-family: var(--nd-font-body);
  font-size: 0.78rem;
  color: var(--nd-text-secondary);
  margin-top: 1px;
}

.more-item-chevron {
  width: 16px;
  height: 16px;
  color: var(--nd-text-dim);
  flex-shrink: 0;
}

.more-item-chevron svg {
  width: 16px;
  height: 16px;
}

/* Profile / account card at top of More view */
.account-card {
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-lg);
  padding: var(--nd-space-lg);
  margin-bottom: var(--nd-space-xl);
  display: flex;
  align-items: center;
  gap: var(--nd-space-md);
}

.account-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--nd-radius-full);
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--nd-font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

.account-info {
  flex: 1;
}

.account-name {
  font-family: var(--nd-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nd-text-primary);
}

.account-tier {
  font-family: var(--nd-font-body);
  font-size: 0.8rem;
  color: var(--nd-text-secondary);
  margin-top: 2px;
}

.account-upgrade-btn {
  height: 36px;
  padding: 0 var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  color: #ffffff;
  font-family: var(--nd-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 12px var(--nd-glow-primary);
  transition: box-shadow var(--nd-dur-normal) var(--nd-ease-out);
  white-space: nowrap;
}

.account-upgrade-btn:hover {
  box-shadow: 0 0 20px var(--nd-glow-primary-hover);
}

.account-upgrade-teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--nd-space-xs) var(--nd-space-sm);
  border-radius: var(--nd-radius-sm);
  border: 1px solid var(--nd-border);
  opacity: 0.7;
  white-space: nowrap;
}

.account-upgrade-label {
  font-family: var(--nd-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
  text-align: right;
}

.account-upgrade-sublabel {
  font-family: var(--nd-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--nd-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =========================================================
   MORE VIEW — interactive controls
   Rendered by MoreView.init() into #view-more .more-view-inner
   ========================================================= */

/* Settings row variant: icon + label + right-aligned control */
.more-item--control {
  height: auto;
  min-height: 56px;
  padding-top: var(--nd-space-sm);
  padding-bottom: var(--nd-space-sm);
  align-items: center;
  flex-wrap: nowrap;
}

/* Playback mode row needs extra height when buttons wrap */
.more-item--playback {
  flex-wrap: wrap;
  height: auto;
  min-height: 56px;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: var(--nd-space-sm);
}

.more-item--playback .more-item-text {
  flex: 0 0 auto;
  min-width: 120px;
}

/* Items that are <a> tags (links) */
.more-item--link {
  text-decoration: none;
  color: inherit;
}

/* About and version items */
.more-item--about {
  height: auto;
  min-height: 64px;
  padding-top: var(--nd-space-md);
  padding-bottom: var(--nd-space-md);
  align-items: flex-start;
}

.more-item--about .more-item-icon {
  margin-top: 2px;
}

.more-item--version {
  height: 40px;
  min-height: 40px;
  cursor: default;
  background: transparent;
  border-color: transparent;
}

.more-item--version:hover {
  background: transparent;
  border-color: transparent;
}

.more-version-label {
  font-family: var(--nd-font-body);
  font-size: 0.72rem;
  color: var(--nd-text-faint);
  padding-left: var(--nd-space-xs);
}

.more-tagline {
  font-family: var(--nd-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  font-style: italic;
  color: var(--nd-accent-primary);
  margin-top: var(--nd-space-xs);
  letter-spacing: 0.2px;
}

/* --- Right-side control wrapper --- */
.more-item-control {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--nd-space-xs);
}

/* --- Select / dropdown --- */
.more-select {
  height: 36px;
  padding: 0 var(--nd-space-md) 0 var(--nd-space-sm);
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-primary);
  font-family: var(--nd-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Custom chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
  min-width: 120px;
  transition: border-color var(--nd-dur-normal) var(--nd-ease-out);
}

.more-select:hover,
.more-select:focus {
  border-color: var(--nd-border-accent);
  outline: none;
}

.more-select option {
  background: var(--nd-bg-card);
  color: var(--nd-text-primary);
}

/* --- Tempo stepper --- */
.more-tempo-stepper {
  display: flex;
  align-items: center;
  gap: var(--nd-space-xs);
}

.more-stepper-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              border-color var(--nd-dur-fast) var(--nd-ease-out);
  user-select: none;
  -webkit-user-select: none;
}

.more-stepper-btn:hover:not(:disabled) {
  background: var(--nd-bg-surface-hover);
  border-color: var(--nd-border-accent);
  color: var(--nd-accent-primary);
}

.more-stepper-btn:active:not(:disabled) {
  transform: scale(0.93);
}

.more-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.more-tempo-val {
  font-family: var(--nd-font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--nd-text-primary);
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
}

/* --- Toggle switch (CSS-only, smooth slide) --- */
.nd-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hide the native checkbox visually but keep it accessible */
.nd-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.nd-toggle-track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--nd-radius-full);
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-solid);
  transition: background var(--nd-dur-normal) var(--nd-ease-smooth),
              border-color var(--nd-dur-normal) var(--nd-ease-smooth),
              box-shadow var(--nd-dur-normal) var(--nd-ease-smooth);
  display: block;
}

.nd-toggle input[type="checkbox"]:checked + .nd-toggle-track {
  background: var(--nd-accent-primary);
  border-color: var(--nd-accent-primary);
  box-shadow: 0 0 10px var(--nd-glow-primary);
}

.nd-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--nd-radius-full);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform var(--nd-dur-normal) var(--nd-ease-bounce);
  display: block;
}

.nd-toggle input[type="checkbox"]:checked + .nd-toggle-track .nd-toggle-thumb {
  transform: translateX(20px);
}

/* Focus visible ring on toggle */
.nd-toggle input[type="checkbox"]:focus-visible + .nd-toggle-track {
  outline: 2px solid var(--nd-accent-primary);
  outline-offset: 2px;
}

/* --- Playback mode button group --- */
.more-mode-group {
  display: flex;
  gap: var(--nd-space-xs);
  flex-wrap: wrap;
}

.nd-mode-btn {
  height: 32px;
  padding: 0 var(--nd-space-sm);
  border-radius: var(--nd-radius-chip);
  background: var(--nd-bg-chip);
  border: 1px solid var(--nd-border-subtle);
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              color var(--nd-dur-fast) var(--nd-ease-out),
              border-color var(--nd-dur-fast) var(--nd-ease-out),
              box-shadow var(--nd-dur-fast) var(--nd-ease-out);
}

.nd-mode-btn:hover:not(.nd-mode-btn--active) {
  background: var(--nd-bg-surface-hover);
  color: var(--nd-text-primary);
}

.nd-mode-btn--active {
  background: var(--nd-bg-chip-active);
  border-color: var(--nd-border-accent);
  color: var(--nd-accent-primary);
  box-shadow: 0 0 8px var(--nd-glow-primary);
}

/* --- Volume control row (Tone Volume / Click Volume in More settings) --- */
.more-item--volume {
  height: auto;
  min-height: 56px;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: var(--nd-space-sm);
}

.nd-volume-control {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  flex-shrink: 0;
}

.nd-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: var(--nd-border-subtle);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.nd-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nd-accent-primary);
  cursor: pointer;
  box-shadow: 0 0 6px var(--nd-glow-primary);
}

.nd-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nd-accent-primary);
  cursor: pointer;
  box-shadow: 0 0 6px var(--nd-glow-primary);
  border: none;
}

.nd-volume-value {
  font-family: var(--nd-font-mono);
  font-size: 0.78rem;
  color: var(--nd-text-muted);
  min-width: 38px;
  text-align: right;
}

/* Responsive: narrower slider on small phones */
@media (max-width: 380px) {
  .nd-volume-slider { width: 72px; }
}

/* =========================================================
   LIBRARY VIEW — supplemental components
   Elements rendered by LibraryView.init() into the dynamic grid
   ========================================================= */

/* Results count text below filter chips */
.library-results-count {
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
  letter-spacing: 0.2px;
  padding: var(--nd-space-sm) 0 var(--nd-space-xs);
  min-height: 20px;
}

/* Difficulty chips row — compact variant of filter-chips-row */
.difficulty-chips-row {
  padding-top: 0;
  padding-bottom: var(--nd-space-sm);
  gap: var(--nd-space-xs);
}

.difficulty-chip {
  min-width: 36px;
  padding: 0 var(--nd-space-sm);
  text-align: center;
}

/* Stats bar — compact aggregate stats summary */
.library-stats-bar {
  font-family: var(--nd-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2px;
  padding: var(--nd-space-xs) 0 var(--nd-space-sm);
  margin: 0;
  line-height: 1.4;
}

/* Family section wrapper */
.library-family-section {
  margin-bottom: var(--nd-space-sm);
}

/* Collapsible family section heading */
.library-section-heading--collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--nd-dur-fast) var(--nd-ease-out);
}

.library-section-heading--collapsible:hover {
  color: var(--nd-text-primary);
}

.library-section-heading--collapsible:focus-visible {
  outline: 2px solid var(--nd-accent-primary);
  outline-offset: 2px;
  border-radius: var(--nd-radius-xs);
}

/* Chevron icon inside collapsible heading */
.family-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--nd-dur-fast) var(--nd-ease-out);
  color: var(--nd-text-secondary);
}

/* Family rudiment count badge */
.library-section-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--nd-text-faint);
  letter-spacing: 0.2px;
}

/* Collapsed grid state — hide with height: 0, not display: none, for aria support */
.rudiment-cards-grid.collapsed {
  display: none;
}

/* Sticking text on rudiment cards */
.rudiment-card-sticking {
  font-family: var(--nd-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nd-text-secondary);
  letter-spacing: 0.5px;
  margin: var(--nd-space-xs) 0 var(--nd-space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Blurred sticking on locked cards — content visible but inaccessible */
.rudiment-card-sticking--blurred {
  filter: blur(4px);
  user-select: none;
  -webkit-user-select: none;
  color: var(--nd-text-faint);
}

/* ---- Notation preview on Library cards ---- */
.rudiment-card-notation-preview {
  /* Height collapses to auto once VexFlow renders (JS sets height:auto).
     Min-height prevents a jarring 0-height flash before rendering.
     overflow:visible ensures nothing is ever clipped. */
  min-height: 40px;
  overflow: visible;
  margin: 6px 0 4px;
  border-radius: var(--nd-radius-sm, 4px);
  background: var(--nd-bg-primary);
  position: relative;
}

.rudiment-card-notation-preview svg {
  /* Native viewBox scaling: width fills container, height adjusts with aspect ratio.
     VexFlow sets inline pixel dimensions — JS overrides these after render.
     This avoids CSS transform (which scales visually but not layout) causing clipping. */
  display: block;
  width: 100%;
  height: auto;
}

/* Locked cards get a blurred preview — hint at content without revealing it */
.notation-preview--blurred {
  filter: blur(3px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* PAS badge — orange accent to signal free-tier access */
.category-badge--pas {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
  border: 1px solid var(--nd-border-accent);
}

/* Hybrid badge — subtle cyan tint */
.category-badge--hybrid {
  background: rgba(0, 243, 255, 0.08);
  color: var(--nd-accent-secondary);
  border: 1px solid var(--nd-border-cyan);
}

/* Loading state */
.library-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nd-space-md);
  padding: var(--nd-space-3xl) var(--nd-space-md);
  color: var(--nd-text-secondary);
}

.library-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--nd-border-subtle);
  border-top-color: var(--nd-accent-primary);
  border-radius: var(--nd-radius-full);
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.library-loading-text {
  font-family: var(--nd-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nd-text-secondary);
}

/* Empty / error state */
.library-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nd-space-md);
  padding: var(--nd-space-3xl) var(--nd-space-md);
  text-align: center;
}

.library-empty-state-text {
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: var(--nd-text-secondary);
}

.library-empty-clear-btn {
  height: 40px;
  padding: 0 var(--nd-space-lg);
  border-radius: var(--nd-radius-sm);
  background: var(--nd-accent-primary-dim);
  border: 1px solid var(--nd-border-accent);
  color: var(--nd-accent-primary);
  font-family: var(--nd-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nd-dur-normal) var(--nd-ease-out),
              box-shadow var(--nd-dur-normal) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.library-empty-clear-btn:hover {
  background: rgba(255, 77, 0, 0.22);
  box-shadow: 0 0 12px var(--nd-glow-primary);
}

/* Locked tooltip — brief "Upgrade to unlock" message */
.library-locked-tooltip {
  position: fixed;
  bottom: calc(var(--nd-tab-bar-height) + env(safe-area-inset-bottom) + var(--nd-space-lg));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--nd-z-toast);
  background: var(--nd-bg-card);
  border: 1px solid var(--nd-border-accent);
  color: var(--nd-accent-primary);
  font-family: var(--nd-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  padding: var(--nd-space-sm) var(--nd-space-lg);
  border-radius: var(--nd-radius-chip);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: tooltip-fade 2s ease-out forwards;
}

@keyframes tooltip-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .library-locked-tooltip {
    animation: none;
    opacity: 1;
  }
  .library-loading-spinner {
    animation: none;
    border-color: var(--nd-accent-primary);
  }
}

/* =========================================================
   UPGRADE SHEET (bottom sheet for locked content prompts)
   Spec: Section 8 — Funnel UX
   ========================================================= */

.upgrade-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: var(--nd-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nd-dur-medium) var(--nd-ease-out);
}

.upgrade-sheet-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.upgrade-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--nd-z-modal);
  background: var(--nd-bg-card);
  border-radius: var(--nd-radius-xl) var(--nd-radius-xl) 0 0;
  padding: var(--nd-space-lg) var(--nd-space-lg) calc(var(--nd-space-lg) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--nd-dur-medium) var(--nd-ease-out);
  border-top: 1px solid var(--nd-border-subtle);
}

.upgrade-sheet.visible {
  transform: translateY(0);
}

/* Inner content wrapper (flex column for consistent layout) */
.upgrade-sheet-content {
  display: flex;
  flex-direction: column;
}

.upgrade-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--nd-border-solid);
  margin: 0 auto var(--nd-space-lg);
}

.upgrade-sheet-title {
  font-family: var(--nd-font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--nd-text-primary);
  margin-bottom: var(--nd-space-md);
}

.upgrade-sheet-features {
  list-style: none;
  margin-bottom: var(--nd-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-sm);
}

.upgrade-sheet-feature {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: var(--nd-text-muted);
}

.upgrade-sheet-feature::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--nd-radius-full);
  background: var(--nd-accent-primary);
  flex-shrink: 0;
}

.upgrade-cta-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--nd-radius-sm);
  background: linear-gradient(135deg, var(--nd-accent-primary), var(--nd-accent-primary-end));
  color: #ffffff;
  font-family: var(--nd-font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 20px var(--nd-glow-primary);
  margin-bottom: var(--nd-space-md);
  transition: box-shadow var(--nd-dur-normal) var(--nd-ease-out),
              opacity var(--nd-dur-fast) var(--nd-ease-out);
}

.upgrade-cta-btn:hover {
  box-shadow: 0 0 30px var(--nd-glow-primary-hover);
}

.upgrade-maybe-later {
  width: 100%;
  height: 44px;
  border-radius: var(--nd-radius-sm);
  background: none;
  border: none;
  color: var(--nd-text-secondary);
  font-family: var(--nd-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--nd-dur-normal) var(--nd-ease-out);
}

.upgrade-maybe-later:hover {
  color: var(--nd-text-primary);
}

/* =========================================================
   RUDIMENT SELECTOR PANEL (slide-up on phone, sidebar on desktop)
   Spec: Section 3 — Rudiment selector
   ========================================================= */

.selector-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--nd-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nd-dur-medium) var(--nd-ease-out);
}

.selector-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Phone: slide-up panel */
.rudiment-selector-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--nd-z-modal);
  background: var(--nd-bg-surface-solid);
  border-radius: var(--nd-radius-xl) var(--nd-radius-xl) 0 0;
  border-top: 1px solid var(--nd-border-subtle);
  height: 75vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--nd-dur-medium) var(--nd-ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}

.rudiment-selector-panel.visible {
  transform: translateY(0);
}

/* Desktop: overlay panel, wider and centered (no persistent sidebar) */
@media (min-width: 1024px) {
  .rudiment-selector-panel {
    max-width: 500px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }

  .rudiment-selector-panel.visible {
    transform: translateX(-50%) translateY(0);
  }
}

.selector-panel-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--nd-border-solid);
  margin: var(--nd-space-sm) auto var(--nd-space-xs);
  flex-shrink: 0;
}

.selector-panel-header {
  padding: var(--nd-space-sm) var(--nd-space-md);
  flex-shrink: 0;
  border-bottom: 1px solid var(--nd-border-subtle);
}

.selector-panel-title {
  font-family: var(--nd-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--nd-space-sm);
}

.selector-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--nd-space-sm);
}

.selector-list-item {
  display: flex;
  align-items: center;
  gap: var(--nd-space-md);
  padding: var(--nd-space-sm) var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  min-height: var(--nd-touch-target-min);
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              color var(--nd-dur-fast) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.selector-list-item:hover {
  background: var(--nd-bg-surface);
}

.selector-list-item.active {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
}

.selector-list-item-name {
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
  line-height: 1.3;
}

/* Selector search input — inside the selector panel header */
.selector-search {
  width: 100%;
  padding: var(--nd-space-sm) var(--nd-space-md);
  background: var(--nd-bg-input);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-primary);
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  margin-bottom: var(--nd-space-sm);
  outline: none;
  transition: border-color var(--nd-dur-fast) var(--nd-ease-out);
}

.selector-search:focus {
  border-color: var(--nd-border-accent);
}

.selector-search::placeholder {
  color: var(--nd-text-secondary);
}

/* Selector filter chips row */
.selector-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-space-xs);
}

/* Rudiment list items in the selector panel (from practice.html pattern) */
.rudiment-family-header {
  font-family: var(--nd-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nd-text-dim);
  padding: var(--nd-space-sm) var(--nd-space-sm) var(--nd-space-xs);
  margin-top: var(--nd-space-xs);
}

.rudiment-list-item {
  display: flex;
  align-items: center;
  padding: var(--nd-space-sm) var(--nd-space-md);
  border-radius: var(--nd-radius-sm);
  cursor: pointer;
  min-height: 44px;
  font-family: var(--nd-font-body);
  font-size: 0.9rem;
  color: var(--nd-text-muted);
  transition: background var(--nd-dur-fast) var(--nd-ease-out),
              color var(--nd-dur-fast) var(--nd-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.rudiment-list-item:hover {
  background: var(--nd-bg-surface);
  color: var(--nd-text-primary);
}

.rudiment-list-item.active {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
  font-weight: 600;
}

/* =========================================================
   SECTION DIVIDER
   ========================================================= */
.section-divider {
  height: 1px;
  background: var(--nd-border-subtle);
  margin: var(--nd-space-md) 0;
}

/* =========================================================
   PILL / BADGE COMPONENTS
   ========================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--nd-space-sm);
  border-radius: var(--nd-radius-chip);
  font-family: var(--nd-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pill.free {
  background: rgba(100, 220, 120, 0.12);
  color: #64dc78;
  border: 1px solid rgba(100, 220, 120, 0.25);
}

.pill.tier1 {
  background: var(--nd-accent-primary-dim);
  color: var(--nd-accent-primary);
  border: 1px solid var(--nd-border-accent);
}

.pill.learning {
  background: rgba(0, 243, 255, 0.10);
  color: var(--nd-accent-secondary);
  border: 1px solid var(--nd-border-cyan);
}

/* =========================================================
   LOADING / SKELETON STATES
   ========================================================= */
.skeleton {
  background: var(--nd-bg-card);
  border-radius: var(--nd-radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* =========================================================
   ANIMATIONS
   Spec: Section 10 — Transitions and Animations
   ========================================================= */

/* Shimmer — locked card / skeleton */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Notation load crossfade */
@keyframes notation-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.notation-load-enter {
  animation: notation-fade-in var(--nd-dur-fast) var(--nd-ease-out) forwards;
}

/* Play button pulse when playing */
@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 16px 2px var(--nd-glow-primary); }
  50%       { box-shadow: 0 0 28px 6px var(--nd-glow-primary); }
}

.play-btn.playing {
  animation: play-pulse 1.5s ease-in-out infinite;
}

/* GhostClick play pulse — cyan */
@keyframes ghostclick-pulse {
  0%, 100% { box-shadow: 0 0 24px 4px var(--nd-glow-secondary); }
  50%       { box-shadow: 0 0 40px 10px var(--nd-glow-secondary); }
}

.ghostclick-play-btn.playing {
  animation: ghostclick-pulse 1.5s ease-in-out infinite;
}

/* Karaoke measure slide — 300ms ease-in-out per spec */
@keyframes karaoke-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* =========================================================
   RESPONSIVE — Tablet/Desktop layout adjustments
   ========================================================= */

/* Tablet: wider spacing in controls */
@media (min-width: 768px) {
  .practice-rudiment-name {
    font-size: 1.2rem;
  }

  .library-search-header {
    padding: var(--nd-space-lg) var(--nd-space-xl) 0;
  }

  .library-content {
    padding: var(--nd-space-sm) var(--nd-space-xl) var(--nd-space-lg);
  }

  .more-view-inner {
    padding: var(--nd-space-xl);
  }

  .ghostclick-bpm-number {
    font-size: clamp(5rem, 15vw, 8rem);
  }
}

/* Desktop: Practice view — wider content, bigger name */
@media (min-width: 1024px) {
  .practice-scroll-area {
    padding: var(--nd-space-md) var(--nd-space-xl);
  }

  .practice-rudiment-name {
    font-size: 1.3rem;
  }
}

/* =========================================================
   ACCESSIBILITY — prefers-reduced-motion
   MUST disable all animations for users who request it
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep layout transitions at instant but preserve state-based transitions */
  .upgrade-sheet,
  .rudiment-selector-panel,
  .upgrade-sheet-backdrop,
  .selector-backdrop {
    transition: none !important;
  }
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.text-mono {
  font-family: var(--nd-font-mono);
}

.text-display {
  font-family: var(--nd-font-display);
}

.text-orange {
  color: var(--nd-accent-primary);
}

.text-cyan {
  color: var(--nd-accent-secondary);
}

.text-muted {
  color: var(--nd-text-secondary);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   GHOSTCLICK PANEL — Slide-up metronome overlay
   Three states: closed | compact | expanded
   ═══════════════════════════════════════════════════════════════ */

.ghostclick-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--nd-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nd-dur-medium) var(--nd-ease-out);
}

.ghostclick-panel-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.ghostclick-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--nd-z-modal);
  background: var(--nd-bg-surface-solid);
  border-radius: var(--nd-radius-xl) var(--nd-radius-xl) 0 0;
  border-top: 2px solid var(--nd-accent-secondary);
  box-shadow: 0 0 20px var(--nd-glow-secondary), 0 -4px 30px rgba(0, 0, 0, 0.5);
  height: 55vh;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--nd-dur-medium) var(--nd-ease-out);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

.ghostclick-panel.visible {
  transform: translateY(0);
}

.ghostclick-panel-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--nd-border-solid);
  margin: var(--nd-space-sm) auto var(--nd-space-xs);
  flex-shrink: 0;
}

.ghostclick-panel-header {
  display: flex;
  align-items: center;
  padding: 0 var(--nd-space-md) var(--nd-space-sm);
  flex-shrink: 0;
}

.ghostclick-panel-title {
  font-family: var(--nd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 12px var(--nd-glow-secondary);
}

.ghostclick-panel-tagline {
  font-size: 13px;
  color: var(--nd-text-muted);
  margin-left: var(--nd-space-sm);
  font-style: italic;
}

.ghostclick-panel-collapse-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-md);
  color: var(--nd-text-muted);
  padding: var(--nd-space-xs);
  cursor: pointer;
  min-width: var(--nd-touch-target-min);
  min-height: var(--nd-touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--nd-dur-fast), border-color var(--nd-dur-fast);
}

.ghostclick-panel-collapse-btn:hover {
  color: var(--nd-accent-secondary);
  border-color: var(--nd-accent-secondary);
}

#ghostclick-panel-mount {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--nd-space-sm);
}

/* ── Compact Bar ── */
.ghostclick-compact-bar {
  /* Positioning and appearance only — ALL layout is on .compact-bar-scroll-inner */
  position: fixed;
  bottom: calc(var(--nd-tab-bar-height) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: 48px;
  z-index: 25;
  background: var(--nd-bg-surface-solid);
  border-top: 2px solid var(--nd-accent-secondary);
  box-shadow: 0 0 15px var(--nd-glow-secondary), 0 -2px 10px rgba(0, 0, 0, 0.4);
  /* overflow:hidden clips inner content at bar edges, required for mobile scroll */
  overflow: hidden;
  display: none;
}

/* Inner scrollable wrapper — handles horizontal scroll on mobile.
   Wrapping the bar's content in a nested div with overflow-x:auto fixes the
   iOS bug where touch-scrolling is unreliable inside position:fixed elements. */
.compact-bar-scroll-inner {
  /* Flex child of .ghostclick-compact-bar: fills full bar, handles all layout */
  flex: 1;
  min-width: 0; /* Prevent flex child from overflowing parent */
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  padding: 0 var(--nd-space-md);
  width: 100%;
  height: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scroll on iOS */
  touch-action: pan-x; /* Allow horizontal swipe, prevent vertical interference */
  overscroll-behavior-x: contain; /* Don't trigger page navigation on overscroll */
  flex-wrap: nowrap;
  /* Hide scrollbar visually while keeping it functional */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 11 */
}

/* Hide WebKit scrollbar on scroll inner */
.compact-bar-scroll-inner::-webkit-scrollbar {
  display: none;
}

/* Right-edge fade hint — signals more content to scroll (narrow screens only).
   position:absolute on ::after of the fixed-position outer bar overlays the inner
   scroll wrapper without being scrolled with it. */
@media (max-width: 480px) {
  .ghostclick-compact-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--nd-bg-surface-solid));
    pointer-events: none;
    z-index: 2;
  }
}

.ghostclick-compact-bar.visible {
  display: flex;
}

.ghostclick-compact-glow {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--nd-accent-secondary);
  box-shadow: 0 0 8px var(--nd-glow-secondary), 0 0 16px var(--nd-glow-secondary);
  pointer-events: none;
}

.ghostclick-compact-label {
  font-family: var(--nd-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 8px var(--nd-glow-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

.ghostclick-compact-bpm {
  font-family: var(--nd-font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--nd-text-primary);
  min-width: 36px;
  text-align: right;
  cursor: pointer;
  flex-shrink: 0;
}

.ghostclick-compact-bpm:hover {
  color: var(--nd-accent-secondary);
  text-shadow: 0 0 8px var(--nd-glow-secondary);
}

.ghostclick-compact-bpm-unit {
  font-size: 11px;
  color: var(--nd-text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Click-to-edit BPM input — appears in place of .ghostclick-compact-bpm */
.ghostclick-compact-bpm-input {
  width: 48px;
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid var(--nd-accent-secondary);
  border-radius: var(--nd-radius-sm);
  color: var(--nd-text-primary);
  font-family: var(--nd-font-mono);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 2px 4px;
  outline: none;
  box-shadow: 0 0 8px var(--nd-glow-secondary);
  -moz-appearance: textfield;
}

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

/* Compact bar +/- tempo nudge buttons */
.ghostclick-compact-tempo-btn {
  background: none;
  border: none;
  color: var(--nd-text-muted);
  font-size: 18px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.ghostclick-compact-tempo-btn:hover {
  color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.1);
}

.ghostclick-compact-tempo-btn:active {
  background: rgba(0, 243, 255, 0.2);
}

.ghostclick-compact-playstop {
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-accent-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nd-dur-fast), box-shadow var(--nd-dur-fast);
}

.ghostclick-compact-playstop:hover {
  background: rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 12px var(--nd-glow-secondary);
}

.ghostclick-compact-playstop.playing {
  background: rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 10px var(--nd-glow-secondary);
}

.ghostclick-compact-expand {
  background: none;
  border: none;
  color: var(--nd-text-muted);
  cursor: pointer;
  padding: var(--nd-space-xs);
  min-width: var(--nd-touch-target-min);
  min-height: var(--nd-touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--nd-dur-fast);
  flex-shrink: 0;
}

.ghostclick-compact-expand:hover {
  color: var(--nd-accent-secondary);
}

/* Volume control — compact bar right side */
.ghostclick-compact-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.ghostclick-compact-vol-icon {
  color: var(--nd-text-muted);
  flex-shrink: 0;
}

.ghostclick-compact-vol-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nd-border-solid);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  touch-action: none; /* Prevent scroll container from stealing slider drags */
}

.ghostclick-compact-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nd-accent-secondary);
  box-shadow: 0 0 6px var(--nd-glow-secondary);
  cursor: pointer;
}

.ghostclick-compact-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nd-accent-secondary);
  box-shadow: 0 0 6px var(--nd-glow-secondary);
  border: none;
  cursor: pointer;
}

/* Practice-specific compact bar controls */
.ghostclick-compact-practice-btn {
  background: none;
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-md);
  color: var(--nd-text-secondary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ghostclick-compact-practice-btn:hover {
  color: var(--nd-text-primary);
  border-color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.08);
}

.ghostclick-compact-practice-btn:active {
  background: rgba(0, 243, 255, 0.15);
}

.ghostclick-compact-divider {
  width: 1px;
  height: 24px;
  background: var(--nd-border-subtle);
  flex-shrink: 0;
  margin: 0 var(--nd-space-xs);
}

/* Mode toggle button in compact bar */
.ghostclick-compact-mode {
  min-width: 44px;
  padding: 0 6px;
  font-family: var(--nd-font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ghostclick-compact-mode[data-mode="tone"] {
  color: var(--nd-accent-primary);
  border-color: var(--nd-accent-primary);
}

.ghostclick-compact-mode[data-mode="tone-click"] {
  color: var(--nd-accent-secondary);
  border-color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.08);
}

.ghostclick-compact-mode[data-mode="click"] {
  color: var(--nd-accent-secondary);
  border-color: var(--nd-accent-secondary);
}

/* Accent beat 1 toggle button in compact bar */
.ghostclick-compact-accent {
  min-width: 32px;
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--nd-text-secondary);
  border-color: var(--nd-border-subtle);
}

.ghostclick-compact-accent.active {
  color: var(--nd-accent-secondary);
  border-color: var(--nd-accent-secondary);
  background: rgba(0, 243, 255, 0.12);
  text-shadow: 0 0 6px var(--nd-glow-secondary);
}

/* ---- Quick Launch ---- */
.more-quicklaunch-row {
  display: flex;
  justify-content: space-around;
  padding: var(--nd-space-md) 0;
}

.more-quicklaunch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nd-space-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--nd-space-sm);
  min-width: var(--nd-touch-target-min);
  min-height: var(--nd-touch-target-min);
}

.more-quicklaunch-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: background var(--nd-dur-normal) var(--nd-ease-smooth),
              box-shadow var(--nd-dur-normal) var(--nd-ease-smooth);
}

.more-quicklaunch-btn:hover .more-quicklaunch-icon,
.more-quicklaunch-btn:active .more-quicklaunch-icon {
  background: var(--nd-accent-primary-dim);
  box-shadow: 0 0 16px var(--nd-glow-primary);
}

.more-quicklaunch-label {
  font-family: var(--nd-font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nd-text-secondary);
}

/* ---- Your Tools Grid ---- */
.more-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nd-space-md);
}

.more-tool-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 120px;
  padding: var(--nd-space-md);
  background: var(--nd-bg-surface);
  border: 1px solid var(--nd-border-subtle);
  border-radius: var(--nd-radius-md);
  text-decoration: none;
  color: var(--nd-text-primary);
  cursor: pointer;
  transition: background var(--nd-dur-normal) var(--nd-ease-smooth),
              transform var(--nd-dur-normal) var(--nd-ease-smooth);
  position: relative;
}

.more-tool-card:hover {
  background: var(--nd-bg-surface-hover);
  transform: translateY(-2px);
}

.more-tool-card--orange { border-left: 3px solid var(--nd-accent-primary); }
.more-tool-card--cyan   { border-left: 3px solid var(--nd-accent-secondary); }
.more-tool-card--locked { opacity: 0.5; }

.more-tool-stat {
  font-family: var(--nd-font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--nd-space-xs);
}

.more-tool-card--orange .more-tool-stat { color: var(--nd-accent-primary); }
.more-tool-card--cyan   .more-tool-stat { color: var(--nd-accent-secondary); }

.more-tool-name {
  font-family: var(--nd-font-display);
  font-size: 13px;
  font-weight: 700;
}

.more-tool-badge {
  display: inline-block;
  font-family: var(--nd-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: var(--nd-radius-xs);
  background: rgba(0, 243, 255, 0.1);
  color: var(--nd-accent-secondary);
  border: 1px solid rgba(0, 243, 255, 0.2);
  margin-top: var(--nd-space-xs);
}

.more-tool-lock {
  position: absolute;
  top: var(--nd-space-sm);
  right: var(--nd-space-sm);
  font-size: 14px;
  color: var(--nd-accent-primary);
}

/* ── GhostClick tab active glow (when panel is open) ── */
.tab-item[data-tab="ghostclick"].ghostclick-active {
  color: var(--nd-accent-secondary);
}

.tab-item[data-tab="ghostclick"].ghostclick-active .tab-icon svg {
  stroke: var(--nd-accent-secondary);
  filter: drop-shadow(0 0 6px var(--nd-glow-secondary));
}

.tab-item[data-tab="ghostclick"].ghostclick-active .tab-label {
  color: var(--nd-accent-secondary);
}

/* ── Desktop: center the panel ── */
@media (min-width: 1024px) {
  .ghostclick-panel {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .ghostclick-panel.visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ghostclick-panel-backdrop {
    transition: none;
  }
  .ghostclick-panel {
    transition: none;
  }
}
/* Preview build trigger */