/* GENERATED by scripts/build-tokens.cjs — do not edit by hand */
/* ============================================================
   Raouf Family Music App — semantic colour & shape tokens
   Single source of truth for app-wide theming.
   ------------------------------------------------------------
   SECTION A — Core accessibility tokens
     Never override per-profile. These guarantee readable text,
     consistent focus rings, and recognisable success/danger states
     regardless of personalisation.

   SECTION B — Personalisation tokens
     Safe to override per [data-profile-id] later. These drive
     accent colour, avatar tint, reward highlights, and decorative
     trainer accents.
   ============================================================ */

:root {
  /* -------- SECTION A — Core accessibility tokens -------- */

  /* App shell */
  --app-bg: #e8edf5;            /* clearly blue-grey page bg (was #f0f2f5) */
  --app-surface: #ffffff;
  --app-surface-raised: #f4f6fa;
  --app-surface-sunken: #eef1f6;       /* slightly cooler than -raised, for striped rows / sub-areas */
  --app-surface-overlay: rgba(0, 0, 0, 0.45);

  /* Soft accent surface — used for highlighted info panels, hover backgrounds,
     and any "tinted" surface that should still feel part of the light theme. */
  --app-surface-accent-soft: #eff4ff;

  /* Text */
  --app-text: #1f2937;
  --app-text-emphasis: #1e3a8a;        /* deep navy — section headings + emphasised labels */
  --app-text-secondary: #4b5563;    /* darker muted — passes 4.5:1 on tinted page bg */
  --app-text-muted: #6b7280;
  --app-text-subtle: #9ca3af;
  --app-text-on-primary: #ffffff;
  --app-text-on-danger: #ffffff;
  --app-text-disabled: #9ca3af;

  /* Border */
  --app-border: #e5e7eb;
  --app-border-strong: #d1d5db;

  /* Semantic states */
  --app-success: #16a34a;
  --app-success-surface: #dcfce7;
  --app-success-border: #86efac;
  --app-success-text: #14532d;              /* dark green for body text on success surface */
  --app-warning: #d97706;
  --app-warning-surface: #fef3c7;
  --app-warning-border: #fcd34d;
  --app-warning-text: #7a4900;              /* dark amber for body text on warning surface */
  --app-danger: #dc2626;
  --app-danger-surface: #fee2e2;
  --app-danger-border: #fca5a5;
  --app-danger-text: #7f1d1d;               /* dark red for body text on danger surface */

  /* Info — secondary informational accent (indigo). Distinct from --app-primary
     (deep blue, used for primary actions) and from --profile-accent (which can be
     personalised per child). Use --app-info-* for neutral informational panels,
     "what's next" cards, navigation pills and other secondary call-outs. */
  --app-info: #4f46e5;
  --app-info-hover: #4338ca;
  --app-info-surface: #eef2ff;
  --app-info-border: #c7d2fe;
  --app-info-text: #312e81;
  --app-info-foreground: #ffffff;

  /* Disabled */
  --app-disabled-bg: #f3f4f6;
  --app-disabled-text: #9ca3af;
  --app-disabled-border: #e5e7eb;

  /* Focus */
  --app-focus-ring: #2563eb;
  --app-focus-ring-width: 3px;
  --app-focus-ring-offset: 2px;

  /* Primary action */
  --app-primary: #1e40af;            /* deeper blue (was #2563eb) */
  --app-primary-hover: #1e3a8a;
  --app-primary-active: #172554;
  --app-primary-foreground: #ffffff;

  /* Secondary action */
  --app-secondary: #f3f4f6;
  --app-secondary-hover: #e5e7eb;
  --app-secondary-foreground: #1f2937;

  /* Non-colour */
  --app-radius-sm: 6px;
  --app-radius-md: 10px;
  --app-radius-lg: 14px;
  --app-shadow-card: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --app-shadow-modal: 0 16px 40px rgba(30, 64, 175, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);

  /* -------- SECTION B — Personalisation tokens -------- */

  /* Profile accent — base is app primary blue */
  --profile-accent: #1e40af;
  --profile-accent-hover: #1e3a8a;
  --profile-accent-soft: #dbeafe;
  --profile-accent-border: #93c5fd;
  --profile-accent-foreground: #ffffff;

  /* Avatar */
  --profile-avatar-accent: #1e40af;

  /* Rewards */
  --profile-reward-highlight: #f59e0b;
  --profile-reward-surface: #fef3c7;

  /* Selection */
  --profile-selected-bg: #dbeafe;
  --profile-selected-border: #2563eb;

  /* Decorative trainer accents — base hue per trainer, plus -hover / -soft
     surface / -border / -text tints. These are decorative; they may be
     overridden per profile via Section B. Do NOT use them for warning, danger,
     disabled or focus states — those live in Section A. */
  --trainer-scale-accent: #7c3aed;
  --trainer-scale-accent-hover: #6d28d9;
  --trainer-scale-accent-soft: #f5f3ff;
  --trainer-scale-accent-border: #c4b5fd;
  --trainer-scale-accent-text: #5b21b6;
  --trainer-arpeggio-accent: #0891b2;
  --trainer-arpeggio-accent-hover: #0e7490;
  --trainer-arpeggio-accent-soft: #cffafe;
  --trainer-arpeggio-accent-border: #67e8f9;
  --trainer-arpeggio-accent-text: #155e75;
  --trainer-notation-accent: #0369a1;
  --trainer-notation-accent-hover: #075985;
  --trainer-notation-accent-soft: #f0f9ff;
  --trainer-notation-accent-border: #bae6fd;
  --trainer-notation-accent-text: #0c4a6e;
  --trainer-ostinato-accent: #2563eb;
  --trainer-ostinato-accent-hover: #1d4ed8;
  --trainer-ostinato-accent-soft: #eff6ff;
  --trainer-ostinato-accent-border: #93c5fd;
  --trainer-ostinato-accent-text: #1e3a8a;
  --trainer-ear-accent: #059669;
  --trainer-ear-accent-hover: #047857;
  --trainer-ear-accent-soft: #ecfdf5;
  --trainer-ear-accent-border: #6ee7b7;
  --trainer-ear-accent-text: #065f46;
  --trainer-chord-accent: #9333ea;
  --trainer-chord-accent-hover: #7e22ce;
  --trainer-chord-accent-soft: #f3e8ff;
  --trainer-chord-accent-border: #e9d5ff;
  --trainer-chord-accent-text: #6b21a8;

  /* ── Child immersive overlay (full-screen curriculum runner etc.) ──────
     Dark indigo "focus mode" surfaces used when a child enters an
     immersive exercise. Section A — never overridden per profile. */
  --child-immersive-bg:            #1e1b4b;
  --child-immersive-surface:       #312e81;
  --child-immersive-surface-raised: #3730a3;
  --child-immersive-border:        #4338ca;
  --child-immersive-border-strong: #4f46e5;
  --child-immersive-text:          #e0e7ff;
  --child-immersive-text-strong:   #ffffff;
  --child-immersive-text-muted:    #c7d2fe;
  --child-immersive-accent:        #6366f1;
  --child-immersive-accent-soft:   #818cf8;

  /* ── Admin overlay (parent-only diagnostic UI) ──────────────────
     The AdminDashboard / AdminTools surfaces deliberately use a
     darker palette to visually separate them from the child-facing
     app. Tokens live here so we have one place to tune that look. */
  --admin-bg:            #0f1117;
  --admin-surface:       #161b27;
  --admin-surface-raised: #1e2433;
  --admin-border:        #2a3142;
  --admin-border-strong: #3b4a63;
  --admin-text:          #e2e8f0;
  --admin-text-strong:   #f1f5f9;
  --admin-text-muted:    #94a3b8;
  --admin-text-subtle:   #64748b;
  --admin-accent:        #818cf8;
  --admin-accent-soft:   rgba(99, 102, 241, 0.18);
  --admin-accent-border: rgba(99, 102, 241, 0.45);
}

/* ============================================================
   Component tokens (Phase 3A)
     Layer 3 — small, named slots consumed by primitives in
     src/ui/. References to Layer 2 semantic tokens are emitted
     as `var(--app-*)` aliases so per-profile overrides cascade.
   ============================================================ */
:root {
  /* -------- badge.json -------- */
  --badge-success-bg: var(--app-success-surface);
  --badge-success-fg: var(--app-success);
  --badge-success-text: var(--app-success-text);
  --badge-warning-bg: var(--app-warning-surface);
  --badge-warning-fg: var(--app-warning);
  --badge-warning-text: var(--app-warning-text);
  --badge-danger-bg: var(--app-danger-surface);
  --badge-danger-fg: var(--app-danger);
  --badge-danger-text: var(--app-danger-text);
  --badge-info-bg: var(--app-info-surface);
  --badge-info-fg: var(--app-info);
  --badge-info-text: var(--app-info-text);
  --badge-neutral-bg: var(--app-surface-raised);
  --badge-neutral-fg: var(--app-text-muted);
  --badge-neutral-text: var(--app-text);
  --badge-reward-bg: var(--profile-reward-surface);
  --badge-reward-fg: var(--profile-reward-highlight);
  --badge-reward-text: var(--app-warning-text);

  /* -------- button.json -------- */
  --btn-primary-bg: var(--app-primary);
  --btn-primary-bg-hover: var(--app-primary-hover);
  --btn-primary-bg-active: var(--app-primary-active);
  --btn-primary-fg: var(--app-primary-foreground);
  --btn-primary-border: var(--app-primary);
  --btn-secondary-bg: var(--app-secondary);
  --btn-secondary-bg-hover: var(--app-secondary-hover);
  --btn-secondary-fg: var(--app-secondary-foreground);
  --btn-secondary-border: var(--app-border);
  --btn-danger-bg: var(--app-danger);
  --btn-danger-fg: var(--app-text-on-danger);
  --btn-danger-border: var(--app-danger);
  --btn-danger-hover-brightness: 0.92;
  --btn-disabled-bg: var(--app-disabled-bg);
  --btn-disabled-fg: var(--app-disabled-text);
  --btn-disabled-border: var(--app-disabled-border);
  --btn-radius: 6px;
  --btn-min-height: 44px;

  /* -------- card.json -------- */
  --card-bg: var(--app-surface);
  --card-border: var(--app-border);
  --card-shadow: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --card-radius: 10px;
  --card-padding: 16px;

  /* -------- celebration-banner.json -------- */
  --celebration-banner-radius: 14px;
  --celebration-banner-shadow: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --celebration-banner-padding: 16px;
  --celebration-banner-gap: 12px;
  --celebration-banner-title-fg: var(--app-text-emphasis);
  --celebration-banner-dismiss-fg: var(--app-text-muted);
  --celebration-banner-dismiss-fg-hover: var(--app-text-emphasis);
  --celebration-banner-success-bg: var(--app-success-surface);
  --celebration-banner-success-border: var(--app-success-border);
  --celebration-banner-success-fg: var(--app-success-text);
  --celebration-banner-success-accent: var(--app-success);
  --celebration-banner-milestone-bg: var(--profile-reward-surface);
  --celebration-banner-milestone-border: var(--app-warning-border);
  --celebration-banner-milestone-fg: var(--app-warning-text);
  --celebration-banner-milestone-accent: var(--profile-reward-highlight);
  --celebration-banner-encouragement-bg: var(--app-info-surface);
  --celebration-banner-encouragement-border: var(--app-info-border);
  --celebration-banner-encouragement-fg: var(--app-info-text);
  --celebration-banner-encouragement-accent: var(--app-info);
  --celebration-banner-reward-bg: var(--profile-accent-soft);
  --celebration-banner-reward-border: var(--profile-accent-border);
  --celebration-banner-reward-fg: var(--app-text-emphasis);
  --celebration-banner-reward-accent: var(--profile-accent);

  /* -------- field.json -------- */
  --field-bg: var(--app-surface);
  --field-border: var(--app-border);
  --field-border-focus: var(--app-focus-ring);
  --field-fg: var(--app-text);
  --field-placeholder-fg: var(--app-text-muted);
  --field-radius: 6px;

  /* -------- level-bar.json -------- */
  --level-bar-track-bg: var(--app-surface-sunken);
  --level-bar-track-border: var(--app-border);
  --level-bar-fill-bg: var(--profile-accent);
  --level-bar-fill-fg: var(--profile-accent-foreground);
  --level-bar-label-fg: var(--app-text-emphasis);
  --level-bar-value-fg: var(--app-text-secondary);
  --level-bar-helper-fg: var(--app-text-secondary);
  --level-bar-radius: 999px;
  --level-bar-track-height: 12px;
  --level-bar-header-gap: 12px;

  /* -------- modal.json -------- */
  --modal-bg: var(--app-surface);
  --modal-overlay: var(--app-surface-overlay);
  --modal-shadow: 0 16px 40px rgba(30, 64, 175, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);
  --modal-radius: 14px;

  /* -------- mood-chip.json -------- */
  --mood-chip-bg: var(--app-surface);
  --mood-chip-fg: var(--app-text);
  --mood-chip-border: var(--app-border);
  --mood-chip-radius: 999px;
  --mood-chip-padding-x: 16px;
  --mood-chip-padding-y: 8px;
  --mood-chip-gap: 8px;
  --mood-chip-min-height: 44px;
  --mood-chip-selected-bg: var(--profile-selected-bg);
  --mood-chip-selected-border: var(--profile-selected-border);
  --mood-chip-selected-fg: var(--app-text-emphasis);
  --mood-chip-happy-bg: var(--app-success-surface);
  --mood-chip-happy-fg: var(--app-success-text);
  --mood-chip-happy-border: var(--app-success-border);
  --mood-chip-okay-bg: var(--app-info-surface);
  --mood-chip-okay-fg: var(--app-info-text);
  --mood-chip-okay-border: var(--app-info-border);
  --mood-chip-unsure-bg: var(--app-warning-surface);
  --mood-chip-unsure-fg: var(--app-warning-text);
  --mood-chip-unsure-border: var(--app-warning-border);
  --mood-chip-proud-bg: var(--profile-reward-surface);
  --mood-chip-proud-fg: var(--app-warning-text);
  --mood-chip-proud-border: var(--app-warning-border);
  --mood-chip-effort-bg: var(--app-surface-accent-soft);
  --mood-chip-effort-fg: var(--app-text-emphasis);
  --mood-chip-effort-border: var(--app-border-strong);

  /* -------- panel.json -------- */
  --panel-bg: var(--app-surface-raised);
  --panel-border: var(--app-border);
  --panel-shadow: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --panel-radius: 10px;
  --panel-padding: 16px;

  /* -------- piano-keyboard.json -------- */
  --piano-keyboard-bg: var(--app-surface-raised);
  --piano-keyboard-border: var(--app-border);
  --piano-white-key-bg: var(--app-surface);
  --piano-white-key-border: var(--app-text-subtle);
  --piano-black-key-bg: var(--app-text);
  --piano-key-label-fg: var(--app-text);
  --piano-key-label-muted-fg: var(--app-text-subtle);
  --piano-key-target-fill: var(--app-success-border);
  --piano-key-target-dark-fill: var(--app-success);
  --piano-key-target-stroke: var(--app-success);
  --piano-key-current-stroke: var(--app-warning);
  --piano-key-current-fill: var(--app-warning-border);
  --piano-key-current-dark-fill: var(--app-warning);
  --piano-key-pressed-fill: var(--app-info-surface);
  --piano-key-pressed-dark-fill: var(--app-primary-hover);
  --piano-key-correct-fill: var(--app-success-border);
  --piano-key-correct-dark-fill: var(--app-success);
  --piano-key-early-fill: var(--app-warning-surface);
  --piano-key-early-dark-fill: var(--app-warning-border);
  --piano-key-late-fill: var(--app-warning-surface);
  --piano-key-late-dark-fill: var(--app-warning-border);
  --piano-key-wrong-fill: var(--app-danger-surface);
  --piano-key-wrong-dark-fill: var(--app-danger);
  --piano-key-missed-fill: var(--app-surface-sunken);
  --piano-key-disabled-fill: var(--app-disabled-bg);
  --piano-key-focus-ring: var(--app-focus-ring);

  /* -------- profile-hero.json -------- */
  --profile-hero-bg: var(--app-surface);
  --profile-hero-fg: var(--app-text);
  --profile-hero-border: var(--profile-accent-border);
  --profile-hero-radius: 14px;
  --profile-hero-shadow: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --profile-hero-padding: 24px;
  --profile-hero-gap: 16px;
  --profile-hero-avatar-bg: var(--profile-avatar-accent);
  --profile-hero-avatar-fg: var(--profile-accent-foreground);
  --profile-hero-avatar-border: var(--profile-accent-border);
  --profile-hero-name-fg: var(--app-text-emphasis);
  --profile-hero-subtitle-fg: var(--app-text-muted);
  --profile-hero-level-fg: var(--profile-accent);
  --profile-hero-helper-fg: var(--app-text-muted);

  /* -------- reward-card.json -------- */
  --reward-card-bg: var(--app-surface);
  --reward-card-fg: var(--app-text);
  --reward-card-border: var(--app-border);
  --reward-card-radius: 14px;
  --reward-card-shadow: 0 2px 8px rgba(30, 64, 175, 0.10), 0 1px 3px rgba(0, 0, 0, 0.07);
  --reward-card-padding: 16px;
  --reward-card-gap: 12px;
  --reward-card-title-fg: var(--app-text-emphasis);
  --reward-card-subtitle-fg: var(--app-text-muted);
  --reward-card-icon-fg: var(--profile-accent);
  --reward-card-earned-bg: var(--profile-reward-surface);
  --reward-card-earned-border: var(--app-warning-border);
  --reward-card-earned-fg: var(--app-warning-text);
  --reward-card-earned-accent: var(--profile-reward-highlight);
  --reward-card-locked-bg: var(--app-disabled-bg);
  --reward-card-locked-border: var(--app-disabled-border);
  --reward-card-locked-fg: var(--app-disabled-text);
  --reward-card-locked-icon-fg: var(--app-text-subtle);
  --reward-card-highlighted-bg: var(--app-info-surface);
  --reward-card-highlighted-border: var(--app-info-border);
  --reward-card-highlighted-fg: var(--app-info-text);
  --reward-card-highlighted-accent: var(--app-info);

  /* -------- status.json -------- */
  --status-success-bg: var(--app-success-surface);
  --status-success-fg: var(--app-success);
  --status-success-border: var(--app-success-border);
  --status-success-text: var(--app-success-text);
  --status-warning-bg: var(--app-warning-surface);
  --status-warning-fg: var(--app-warning);
  --status-warning-border: var(--app-warning-border);
  --status-warning-text: var(--app-warning-text);
  --status-danger-bg: var(--app-danger-surface);
  --status-danger-fg: var(--app-danger);
  --status-danger-border: var(--app-danger-border);
  --status-danger-text: var(--app-danger-text);
  --status-info-bg: var(--app-info-surface);
  --status-info-fg: var(--app-info);
  --status-info-border: var(--app-info-border);
  --status-info-text: var(--app-info-text);

  /* -------- tab.json -------- */
  --tab-bg: var(--app-surface);
  --tab-fg: var(--app-text-muted);
  --tab-active-bg: var(--app-surface-raised);
  --tab-active-border: var(--app-primary);
  --tab-active-fg: var(--app-primary);
}

/* ============================================================
   Domain role tokens (Phase 3A)
     Layer 3.5 — shared domain role vocabulary (roles.json)
     plus per-app-domain aliases (registry.json) mapping each
     trainer / surface to a shared role. The role layer is
     emitted first so the registry can alias `var(--domain-*)`.
   ============================================================ */
:root {
  /* -------- roles.json — shared domain role vocabulary -------- */
  --domain-surface: var(--app-surface);
  --domain-surface-raised: var(--app-surface-raised);
  --domain-accent: var(--profile-accent);
  --domain-accent-soft: var(--profile-accent-soft);
  --domain-active: var(--profile-selected-bg);
  --domain-selected: var(--profile-selected-border);
  --domain-muted: var(--app-text-muted);
  --domain-correct: var(--app-success);
  --domain-warning: var(--app-warning);
  --domain-danger: var(--app-danger);
  --domain-review: var(--app-warning-surface);
  --domain-practice: var(--app-success-surface);
  --domain-focus: var(--app-focus-ring);

  /* -------- registry.json — per-domain alias map -------- */
  --domain-scale-accent: var(--domain-accent);
  --domain-scale-surface: var(--domain-surface);
  --domain-scale-accent-soft: var(--domain-accent-soft);
  --domain-notation-accent: var(--domain-accent);
  --domain-notation-surface: var(--domain-surface);
  --domain-notation-accent-soft: var(--domain-accent-soft);
  --domain-ostinato-accent: var(--domain-accent);
  --domain-ostinato-surface: var(--domain-surface);
  --domain-ostinato-accent-soft: var(--domain-accent-soft);
  --domain-arpeggio-accent: var(--domain-accent);
  --domain-arpeggio-surface: var(--domain-surface);
  --domain-arpeggio-accent-soft: var(--domain-accent-soft);
  --domain-chord-accent: var(--domain-accent);
  --domain-chord-surface: var(--domain-surface);
  --domain-chord-accent-soft: var(--domain-accent-soft);
  --domain-ear-accent: var(--domain-accent);
  --domain-ear-surface: var(--domain-surface);
  --domain-ear-accent-soft: var(--domain-accent-soft);
  --domain-library-accent: var(--domain-accent);
  --domain-library-surface: var(--domain-surface);
  --domain-library-accent-soft: var(--domain-accent-soft);
  --domain-assignments-accent: var(--domain-accent);
  --domain-assignments-surface: var(--domain-surface);
  --domain-assignments-accent-soft: var(--domain-accent-soft);
  --domain-admin-accent: var(--app-primary);
  --domain-admin-surface: var(--app-surface-raised);
}

/* ============================================================
   Future per-profile overrides (template only — uncomment and
   tune when ready to roll out personalised palettes). Only
   Section B tokens should be overridden. Do not redefine
   Section A here.
   ------------------------------------------------------------

   [data-profile-id="giselle"] {
     --profile-accent: #db2777;
     --profile-accent-hover: #be185d;
     --profile-accent-soft: #fce7f3;
     --profile-accent-border: #f9a8d4;
     --profile-accent-foreground: #ffffff;
     --profile-avatar-accent: #db2777;
     --profile-selected-bg: #fce7f3;
     --profile-selected-border: #db2777;
   }

   [data-profile-id="joelle"] {
     --profile-accent: #7c3aed;
     --profile-accent-hover: #6d28d9;
     --profile-accent-soft: #ede9fe;
     --profile-accent-border: #c4b5fd;
     --profile-accent-foreground: #ffffff;
     --profile-avatar-accent: #7c3aed;
     --profile-selected-bg: #ede9fe;
     --profile-selected-border: #7c3aed;
   }

   [data-profile-id="anthony"] {
     --profile-accent: #0891b2;
     --profile-accent-hover: #0e7490;
     --profile-accent-soft: #cffafe;
     --profile-accent-border: #67e8f9;
     --profile-accent-foreground: #ffffff;
     --profile-avatar-accent: #0891b2;
     --profile-selected-bg: #cffafe;
     --profile-selected-border: #0891b2;
   }

   [data-profile-id="atef"] {
     --profile-accent: #047857;
     --profile-accent-hover: #065f46;
     --profile-accent-soft: #d1fae5;
     --profile-accent-border: #6ee7b7;
     --profile-accent-foreground: #ffffff;
     --profile-avatar-accent: #047857;
     --profile-selected-bg: #d1fae5;
     --profile-selected-border: #047857;
   }
   ============================================================ */
/* ============================================================
   Phase 3B — shared UI primitive styles.

   Token rule: every colour value here MUST be expressed as
   var(--btn-*), var(--card-*), var(--panel-*), var(--field-*),
   var(--tab-*), var(--badge-*), var(--modal-*), var(--status-*),
   or the core --app-* focus / disabled / text aliases the
   primitives need (--app-focus-ring*, --app-text*). No
   hex / rgb / rgba / hsl literals are allowed in this file.
   ============================================================ */

/* -------- AppButton ----------------------------------------- */

.app-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  min-height: var(--btn-min-height);
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}

.app-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* Disabled controls are exempt from WCAG 2.1 SC 1.4.3 contrast requirements
   (https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). The
   muted disabled palette signals the inactive state at the cost of contrast. */
.app-btn:disabled,
.app-btn[aria-disabled='true'] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-border);
  cursor: not-allowed;
}

.app-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}
.app-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--btn-primary-bg-hover);
}
.app-btn--primary:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--btn-primary-bg-active);
}

.app-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.app-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--btn-secondary-bg-hover);
}

.app-btn--danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border-color: var(--btn-danger-border);
}
.app-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--btn-danger-bg);
  filter: brightness(var(--btn-danger-hover-brightness));
}

.app-btn--sm {
  min-height: var(--btn-min-height);
  padding: 0 12px;
  font-size: 0.875rem;
}
.app-btn--md {
  min-height: var(--btn-min-height);
  padding: 0 16px;
  font-size: 1rem;
}
.app-btn--lg {
  min-height: calc(var(--btn-min-height) + 8px);
  padding: 0 20px;
  font-size: 1.0625rem;
}

/* -------- AppIconButton ------------------------------------- */

.app-btn--icon {
  padding: 0;
  width: var(--btn-min-height);
  min-width: var(--btn-min-height);
}
.app-btn--icon.app-btn--lg {
  width: calc(var(--btn-min-height) + 8px);
  min-width: calc(var(--btn-min-height) + 8px);
}
.app-btn--icon.app-btn--sm {
  width: var(--btn-min-height);
  min-width: var(--btn-min-height);
}

/* -------- AppCard ------------------------------------------- */

.app-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
}
.app-card[role='button'] {
  cursor: pointer;
}
.app-card[role='button']:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* -------- AppPanel ------------------------------------------ */

.app-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-padding);
  box-shadow: var(--panel-shadow);
  box-sizing: border-box;
}
.app-panel__title {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
}

/* -------- AppField / AppSelect ------------------------------ */

.app-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}
.app-field__label {
  display: block;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-text);
}
.app-field__required {
  color: var(--status-danger-fg);
  margin-left: 2px;
}
.app-field__input,
.app-field__select {
  appearance: none;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  color: var(--field-fg);
  font: inherit;
  padding: 10px 12px;
  min-height: var(--btn-min-height);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.app-field__input::placeholder {
  color: var(--field-placeholder-fg);
}
.app-field__input:focus,
.app-field__select:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 var(--app-focus-ring-width) var(--app-focus-ring);
}
.app-field__input:focus-visible,
.app-field__select:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
.app-field__input:disabled,
.app-field__select:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  cursor: not-allowed;
}
.app-field__input[aria-invalid='true'],
.app-field__select[aria-invalid='true'] {
  border-color: var(--status-danger-border);
}
.app-field__error {
  font-size: 0.8125rem;
  color: var(--status-danger-fg);
}

/* -------- AppCheckbox --------------------------------------- */

/* Token-only ordinary-checkbox chrome. Renders a native
   <input type="checkbox"> inside a <label>; the label itself
   carries the 44px iPad touch target so the row is the hit
   surface, not just the box. */
.app-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--btn-min-height);
  padding: 0 4px;
  font: inherit;
  color: var(--app-text);
  cursor: pointer;
  box-sizing: border-box;
}
.app-checkbox--disabled {
  cursor: not-allowed;
  color: var(--btn-disabled-fg);
}
.app-checkbox__input {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: inherit;
  accent-color: var(--app-focus-ring);
}
.app-checkbox__input:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
.app-checkbox__input:disabled {
  cursor: not-allowed;
}
.app-checkbox__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* -------- AppStepper (CSS wrapper around NumberStepper) ----- */

.app-stepper {
  display: inline-flex;
}
.app-stepper button {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border: 1px solid var(--btn-secondary-border);
  min-height: var(--btn-min-height);
  border-radius: var(--btn-radius);
}
.app-stepper button:hover:not(:disabled) {
  background: var(--btn-secondary-bg-hover);
}
.app-stepper button:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-border);
}
.app-stepper button:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* -------- AppTabs ------------------------------------------- */

.app-tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-tabs__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--panel-border);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.app-tabs__tab {
  appearance: none;
  background: var(--tab-bg);
  color: var(--tab-fg);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-top-left-radius: var(--btn-radius);
  border-top-right-radius: var(--btn-radius);
  padding: 10px 16px;
  min-height: var(--btn-min-height);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 120ms ease, color 120ms ease,
    border-color 120ms ease;
}
.app-tabs__tab:hover:not(:disabled) {
  color: var(--tab-active-fg);
}
.app-tabs__tab:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
.app-tabs__tab[aria-selected='true'] {
  background: var(--tab-active-bg);
  color: var(--tab-active-fg);
  border-bottom-color: var(--tab-active-border);
}
.app-tabs__panel {
  padding: 12px 0;
}

/* -------- AppBadge ------------------------------------------ */

.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
  white-space: nowrap;
}
.app-badge--success {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}
.app-badge--warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}
.app-badge--danger {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}
.app-badge--info {
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
}
.app-badge--neutral {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

/* -------- AppStatusBanner ----------------------------------- */

.app-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  box-sizing: border-box;
}
.app-status-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.app-status-banner__dismiss {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--btn-radius);
}
.app-status-banner__dismiss:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
.app-status-banner--success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border-color: var(--status-success-border);
}
.app-status-banner--warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border-color: var(--status-warning-border);
}
.app-status-banner--danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border-color: var(--status-danger-border);
}
.app-status-banner--info {
  background: var(--status-info-bg);
  color: var(--status-info-text);
  border-color: var(--status-info-border);
}

/* -------- AppModal ------------------------------------------ */

.app-modal__overlay {
  /* Keep the modal palette in the light theme regardless of OS dark mode. */
  color-scheme: light;
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 1000;
  box-sizing: border-box;
}
.app-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--modal-bg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  width: min(90vw, 480px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  min-width: 0;
  box-sizing: border-box;
  color: var(--app-text);
  z-index: 1001;
}
.app-modal__title {
  margin: 0 0 12px 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
}
.app-modal__dialog:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
.app-modal__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Phase 4K — Warm child / reward primitive styles.

   Every colour, radius, spacing, shadow, border and focus state
   resolves through a contract variable from
   src/styles/generated/tokens.css. No raw colour literals.
   ============================================================ */

/* ── Shared focus ring ─────────────────────────────────────── */

.app-reward-card:focus-visible,
.app-mood-chip:focus-visible,
.app-celebration-banner__dismiss:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* ============================================================
   AppRewardCard
   ============================================================ */

.app-reward-card {
  display: flex;
  align-items: flex-start;
  gap: var(--reward-card-gap);
  padding: var(--reward-card-padding);
  background: var(--reward-card-bg);
  color: var(--reward-card-fg);
  border: 1px solid var(--reward-card-border);
  border-radius: var(--reward-card-radius);
  box-shadow: var(--reward-card-shadow);
  min-height: 44px;
  text-align: left;
  font: inherit;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

button.app-reward-card {
  cursor: pointer;
  appearance: none;
  width: 100%;
}

.app-reward-card--interactive:hover {
  transform: translateY(-1px);
  border-color: var(--reward-card-highlighted-border);
}

.app-reward-card--interactive:active {
  transform: translateY(0);
}

.app-reward-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--reward-card-icon-fg);
  font-size: 1.5rem;
  line-height: 1;
}

.app-reward-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-reward-card__title {
  font-weight: 600;
  color: var(--reward-card-title-fg);
  line-height: 1.25;
}

.app-reward-card__subtitle {
  font-size: 0.9rem;
  color: var(--reward-card-subtitle-fg);
  line-height: 1.3;
}

.app-reward-card__content {
  font-size: 0.95rem;
}

.app-reward-card__state-label {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Variants */
.app-reward-card--earned {
  background: var(--reward-card-earned-bg);
  border-color: var(--reward-card-earned-border);
  color: var(--reward-card-earned-fg);
}
.app-reward-card--earned .app-reward-card__title { color: var(--reward-card-earned-fg); }
.app-reward-card--earned .app-reward-card__subtitle { color: var(--reward-card-earned-fg); }
.app-reward-card--earned .app-reward-card__icon { color: var(--reward-card-earned-accent); }
.app-reward-card--earned .app-reward-card__state-label { color: var(--reward-card-earned-accent); }

.app-reward-card--locked {
  background: var(--reward-card-locked-bg);
  border-color: var(--reward-card-locked-border);
  color: var(--reward-card-locked-fg);
}
.app-reward-card--locked .app-reward-card__title { color: var(--reward-card-locked-fg); }
.app-reward-card--locked .app-reward-card__subtitle { color: var(--reward-card-locked-fg); }
.app-reward-card--locked .app-reward-card__icon { color: var(--reward-card-locked-icon-fg); }
.app-reward-card--locked .app-reward-card__state-label { color: var(--reward-card-locked-fg); }

.app-reward-card--highlighted {
  background: var(--reward-card-highlighted-bg);
  border-color: var(--reward-card-highlighted-border);
  color: var(--reward-card-highlighted-fg);
}
.app-reward-card--highlighted .app-reward-card__title { color: var(--reward-card-highlighted-fg); }
.app-reward-card--highlighted .app-reward-card__subtitle { color: var(--reward-card-highlighted-fg); }
.app-reward-card--highlighted .app-reward-card__icon { color: var(--reward-card-highlighted-accent); }

.app-reward-card--inactive {
  cursor: not-allowed;
  box-shadow: none;
}

.app-reward-card--inactive:hover {
  transform: none;
}

/* ============================================================
   AppLevelBar
   ============================================================ */

.app-level-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-level-bar__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--level-bar-header-gap);
  min-width: 0;
}

.app-level-bar__label {
  font-weight: 600;
  color: var(--level-bar-label-fg);
  min-width: 0;
}

.app-level-bar__value {
  font-size: 0.85rem;
  color: var(--level-bar-value-fg);
  font-variant-numeric: tabular-nums;
}

.app-level-bar__track {
  position: relative;
  width: 100%;
  height: var(--level-bar-track-height);
  background: var(--level-bar-track-bg);
  border: 1px solid var(--level-bar-track-border);
  border-radius: var(--level-bar-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.app-level-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--level-bar-fill-bg);
  border-radius: var(--level-bar-radius);
  transition: width 200ms ease;
}

.app-level-bar__helper {
  font-size: 0.85rem;
  color: var(--level-bar-helper-fg);
  line-height: 1.3;
}

/* ============================================================
   AppMoodChip
   ============================================================ */

.app-mood-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mood-chip-gap);
  padding: var(--mood-chip-padding-y) var(--mood-chip-padding-x);
  min-height: var(--mood-chip-min-height);
  min-width: 44px;
  background: var(--mood-chip-bg);
  color: var(--mood-chip-fg);
  border: 1px solid var(--mood-chip-border);
  border-radius: var(--mood-chip-radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

button.app-mood-chip {
  cursor: pointer;
  appearance: none;
}

.app-mood-chip--interactive:hover {
  transform: translateY(-1px);
}

.app-mood-chip--interactive:active {
  transform: translateY(0);
}

.app-mood-chip--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-mood-chip__label {
  display: inline-block;
}

.app-mood-chip--happy {
  background: var(--mood-chip-happy-bg);
  color: var(--mood-chip-happy-fg);
  border-color: var(--mood-chip-happy-border);
}
.app-mood-chip--okay {
  background: var(--mood-chip-okay-bg);
  color: var(--mood-chip-okay-fg);
  border-color: var(--mood-chip-okay-border);
}
.app-mood-chip--unsure {
  background: var(--mood-chip-unsure-bg);
  color: var(--mood-chip-unsure-fg);
  border-color: var(--mood-chip-unsure-border);
}
.app-mood-chip--proud {
  background: var(--mood-chip-proud-bg);
  color: var(--mood-chip-proud-fg);
  border-color: var(--mood-chip-proud-border);
}
.app-mood-chip--effort {
  background: var(--mood-chip-effort-bg);
  color: var(--mood-chip-effort-fg);
  border-color: var(--mood-chip-effort-border);
}

.app-mood-chip--selected {
  background: var(--mood-chip-selected-bg);
  color: var(--mood-chip-selected-fg);
  border-color: var(--mood-chip-selected-border);
  border-width: 2px;
  padding: calc(var(--mood-chip-padding-y) - 1px) calc(var(--mood-chip-padding-x) - 1px);
}

/* ============================================================
   AppProfileHero
   ============================================================ */

.app-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--profile-hero-gap);
  padding: var(--profile-hero-padding);
  background: var(--profile-hero-bg);
  color: var(--profile-hero-fg);
  border: 1px solid var(--profile-hero-border);
  border-radius: var(--profile-hero-radius);
  box-shadow: var(--profile-hero-shadow);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.app-profile-hero__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--profile-hero-avatar-bg);
  color: var(--profile-hero-avatar-fg);
  border: 2px solid var(--profile-hero-avatar-border);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  overflow: hidden;
}

.app-profile-hero__initials {
  display: inline-block;
}

.app-profile-hero__body {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-profile-hero__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--profile-hero-name-fg);
  line-height: 1.25;
  word-break: break-word;
}

.app-profile-hero__subtitle {
  color: var(--profile-hero-subtitle-fg);
}

.app-profile-hero__level {
  font-weight: 600;
  color: var(--profile-hero-level-fg);
}

.app-profile-hero__helper {
  font-size: 0.9rem;
  color: var(--profile-hero-helper-fg);
  line-height: 1.3;
}

.app-profile-hero__content {
  margin-top: 8px;
}

/* ============================================================
   AppCelebrationBanner
   ============================================================ */

.app-celebration-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--celebration-banner-gap);
  padding: var(--celebration-banner-padding);
  border-radius: var(--celebration-banner-radius);
  box-shadow: var(--celebration-banner-shadow);
  border: 1px solid transparent;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-celebration-banner__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-celebration-banner__title {
  font-weight: 700;
  color: var(--celebration-banner-title-fg);
  line-height: 1.25;
}

.app-celebration-banner__content {
  line-height: 1.4;
}

.app-celebration-banner__dismiss {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--celebration-banner-dismiss-fg);
  border-radius: var(--app-radius-sm);
  cursor: pointer;
  font: inherit;
  padding: 4px 10px;
  transition: color 120ms ease, background 120ms ease;
}

.app-celebration-banner__dismiss:hover {
  color: var(--celebration-banner-dismiss-fg-hover);
  background: var(--app-surface-raised);
}

/* Variants */
.app-celebration-banner--success {
  background: var(--celebration-banner-success-bg);
  border-color: var(--celebration-banner-success-border);
  color: var(--celebration-banner-success-fg);
}
.app-celebration-banner--success .app-celebration-banner__title {
  color: var(--celebration-banner-success-accent);
}

.app-celebration-banner--milestone {
  background: var(--celebration-banner-milestone-bg);
  border-color: var(--celebration-banner-milestone-border);
  color: var(--celebration-banner-milestone-fg);
}
.app-celebration-banner--milestone .app-celebration-banner__title {
  color: var(--celebration-banner-milestone-accent);
}

.app-celebration-banner--encouragement {
  background: var(--celebration-banner-encouragement-bg);
  border-color: var(--celebration-banner-encouragement-border);
  color: var(--celebration-banner-encouragement-fg);
}
.app-celebration-banner--encouragement .app-celebration-banner__title {
  color: var(--celebration-banner-encouragement-accent);
}

.app-celebration-banner--reward {
  background: var(--celebration-banner-reward-bg);
  border-color: var(--celebration-banner-reward-border);
  color: var(--celebration-banner-reward-fg);
}
.app-celebration-banner--reward .app-celebration-banner__title {
  color: var(--celebration-banner-reward-accent);
}
/* ============================================================
   PianoKeyboard — DOM/CSS renderer.

   Visual tokens are defined here at :root (instrument colours
   that have no equivalent app-level token).  Functional tokens
   (keyboard-bg, focus-ring, etc.) continue to come from
   src/design-tokens/components/piano-keyboard.json.

   Architecture:
     .pianoKeyboard            outer wrapper (padding + variant border)
     .pianoKeyboard__frame     fixed-height stage (overflow: hidden)
     .pianoKeyboard__whiteLayer  white keys, z-index 1
     .pianoKeyboard__blackLayer  black keys, z-index 2
     .pianoKeyboard__key       shared key base (position: absolute)
     .pianoKeyboard__whiteKey  white visual styles
     .pianoKeyboard__blackKey  black visual styles
     .pianoKeyboard__key--*    state modifier classes
     .pianoKeyboard__label     optional note-name label
   ============================================================ */

/* ── Piano instrument colour tokens ─────────────────────────
   allow-hardcoded-colour: piano instrument appearance — these
   map to no existing app-level token.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Frame */
  --piano-frame-top:           #1b2236;
  --piano-frame-bottom:        #0d1220;
  --piano-frame-border:        #060810;
  --piano-frame-highlight:     rgba(255, 255, 255, 0.07);
  --piano-frame-shadow:        0 4px 18px rgba(0, 0, 0, 0.60),
                               0 1px 4px  rgba(0, 0, 0, 0.40);

  /* White keys */
  --piano-white-key-top:           #ffffff;
  --piano-white-key-mid:           #f8fafc;
  --piano-white-key-bottom:        #e2e8f0;
  --piano-white-key-border:        #cbd5e1;
  --piano-white-key-edge-light:    rgba(255, 255, 255, 0.90);
  --piano-white-key-edge-dark:     rgba(148, 163, 184, 0.30);
  --piano-white-key-bottom-shadow: rgba(100, 116, 139, 0.20);

  /* Black keys */
  --piano-black-key-top:       #263142;
  --piano-black-key-mid:       #101827;
  --piano-black-key-bottom:    #050814;
  --piano-black-key-border:    #020617;
  --piano-black-key-highlight: rgba(255, 255, 255, 0.13);

  /* State overlays — semitransparent so key material shows through */
  --piano-overlay-target:   rgba(79,  70,  229, 0.34);
  --piano-overlay-current:  rgba(245, 158,  11, 0.55);
  --piano-overlay-pressed:  rgba(37,  99,  235, 0.42);
  --piano-overlay-correct:  rgba(34,  197,  94, 0.38);
  --piano-overlay-wrong:    rgba(239,  68,  68, 0.40);
  --piano-overlay-extra:    rgba(239,  68,  68, 0.40);
  --piano-overlay-missed:   rgba(100, 116, 139, 0.35);
  --piano-overlay-early:    rgba(245, 158,  11, 0.35);
  --piano-overlay-late:     rgba(245, 158,  11, 0.35);
  --piano-overlay-disabled: rgba(100, 116, 139, 0.48);
  --piano-overlay-glow:     rgba(99,  102, 241, 0.60);
}

/* ── Outer wrapper ─────────────────────────────────────────── */

.pianoKeyboard {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.pianoKeyboard--trainerDark {
  background: var(--piano-keyboard-bg);
  border: 1px solid var(--piano-keyboard-border);
  border-radius: 12px;
  padding: 6px;
}

.pianoKeyboard--trainerLight {
  background: var(--app-surface);
  border: 1px solid var(--piano-keyboard-border);
  border-radius: 12px;
  padding: 6px;
}

/* ── Size variants — set --piano-keyboard-height per size ───── */

.pianoKeyboard--mini    { --piano-keyboard-height: 52px;  }
.pianoKeyboard--compact { --piano-keyboard-height: 72px;  }
.pianoKeyboard--trainer { --piano-keyboard-height: 96px;  }
.pianoKeyboard--large   { --piano-keyboard-height: 124px; }
.pianoKeyboard--full    { --piano-keyboard-height: 150px; }

/* ── Frame (the visible instrument stage) ──────────────────── */

.pianoKeyboard__frame {
  position: relative;
  width: 100%;
  height: var(--piano-keyboard-height, 96px);
  border-radius: 10px;
  border: 1px solid var(--piano-frame-border);
  background: linear-gradient(180deg,
    var(--piano-frame-top)    0%,
    var(--piano-frame-bottom) 100%
  );
  box-shadow:
    var(--piano-frame-shadow),
    inset 0 1px 0 var(--piano-frame-highlight);
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Key layers ────────────────────────────────────────────── */

.pianoKeyboard__whiteLayer,
.pianoKeyboard__blackLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pianoKeyboard__whiteLayer { z-index: 1; }
.pianoKeyboard__blackLayer { z-index: 2; background: transparent; }

/* ── Shared key base ───────────────────────────────────────── */

.pianoKeyboard__key {
  position: absolute;
  box-sizing: border-box;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: all;
}

/* State overlay via ::after — sits on top of key surface without replacing it */
.pianoKeyboard__key::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease;
}

/* ── White keys ────────────────────────────────────────────── */

.pianoKeyboard__whiteKey {
  background: linear-gradient(180deg,
    var(--piano-white-key-top)    0%,
    var(--piano-white-key-mid)    72%,
    var(--piano-white-key-bottom) 100%
  );
  border: 1px solid var(--piano-white-key-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow:
    inset  1px 0 0 var(--piano-white-key-edge-light),
    inset -1px 0 0 var(--piano-white-key-edge-dark),
    inset 0 -6px 10px var(--piano-white-key-bottom-shadow);
}

/* ── Black keys ────────────────────────────────────────────── */

.pianoKeyboard__blackKey {
  z-index: 2;
  background: linear-gradient(180deg,
    var(--piano-black-key-top)    0%,
    var(--piano-black-key-mid)    45%,
    var(--piano-black-key-bottom) 100%
  );
  border: 1px solid var(--piano-black-key-border);
  border-top: none;
  border-radius: 0 0 5px 5px;
  box-shadow:
    0 5px 9px   rgba(15, 23, 42, 0.45),
    inset 0  1px 0 var(--piano-black-key-highlight),
    inset 0 -5px 8px rgba(0, 0, 0, 0.40),
    inset  2px 0 3px rgba(255, 255, 255, 0.06),
    inset -2px 0 3px rgba(0, 0, 0, 0.28);
}

/* ── Interactive cursor ────────────────────────────────────── */

.pianoKeyboard--playable   .pianoKeyboard__key,
.pianoKeyboard--selectNote .pianoKeyboard__key { cursor: pointer; }

.pianoKeyboard__key:focus-visible {
  outline: 2px solid var(--piano-key-focus-ring);
  outline-offset: -2px;
  z-index: 10;
}

/* ── State overlay colours ─────────────────────────────────── */

.pianoKeyboard__key--target::after   { background: var(--piano-overlay-target);   opacity: 1; }
.pianoKeyboard__key--current::after  { background: var(--piano-overlay-current);  opacity: 1; animation: pk-pulse 1.2s ease-in-out infinite; }
.pianoKeyboard__key--pressed::after  { background: var(--piano-overlay-pressed);  opacity: 1; }
.pianoKeyboard__key--correct::after  { background: var(--piano-overlay-correct);  opacity: 1; }
.pianoKeyboard__key--wrong::after    { background: var(--piano-overlay-wrong);    opacity: 1; }
.pianoKeyboard__key--extra::after    { background: var(--piano-overlay-extra);    opacity: 1; }
.pianoKeyboard__key--missed::after   { background: var(--piano-overlay-missed);   opacity: 1; }
.pianoKeyboard__key--early::after    { background: var(--piano-overlay-early);    opacity: 1; }
.pianoKeyboard__key--late::after     { background: var(--piano-overlay-late);     opacity: 1; }
.pianoKeyboard__key--disabled::after { background: var(--piano-overlay-disabled); opacity: 1; }

/* ── Labels ────────────────────────────────────────────────── */

.pianoKeyboard__label {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: inherit;
  font-weight: 600;
  color: var(--piano-key-label-fg);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  /* z-index above ::after overlay */
  z-index: 1;
}

.pianoKeyboard--mini    .pianoKeyboard__label { font-size: 7px;  }
.pianoKeyboard--compact .pianoKeyboard__label { font-size: 8px;  }
.pianoKeyboard--trainer .pianoKeyboard__label { font-size: 9px;  }
.pianoKeyboard--large   .pianoKeyboard__label { font-size: 10px; }
.pianoKeyboard--full    .pianoKeyboard__label { font-size: 12px; }

.pianoKeyboard__label--target,
.pianoKeyboard__label--correct { color: var(--app-success-text); }
.pianoKeyboard__label--pressed { color: var(--app-info-text); }
.pianoKeyboard__label--current { color: var(--app-warning-text); font-weight: 700; }

/* ── Pulse animation ───────────────────────────────────────── */

@keyframes pk-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .pianoKeyboard__key--current::after { animation: none; }
}
/* ============================================================
   Raouf Family Music App — utility classes
   Small reusable styling primitives built on the semantic tokens
   in tokens.css. Compose these on top of component styles rather
   than re-declaring colours.
   ============================================================ */

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-card);
}

.app-panel {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.app-button-primary {
  background: var(--app-primary);
  color: var(--app-primary-foreground);
  border-color: var(--app-primary);
}

.app-button-primary:hover:not(:disabled) {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

.app-button-secondary {
  background: var(--app-secondary);
  color: var(--app-secondary-foreground);
  border-color: var(--app-border);
}

.app-button-secondary:hover:not(:disabled) {
  background: var(--app-secondary-hover);
}

.app-button-danger {
  background: var(--app-danger);
  color: var(--app-text-on-danger);
  border-color: var(--app-danger);
}

.app-button:disabled,
.app-button:disabled:hover {
  background: var(--app-disabled-bg);
  color: var(--app-disabled-text);
  border-color: var(--app-disabled-border);
  cursor: not-allowed;
}

.app-field {
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
}

.app-field:focus {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.app-tab {
  color: var(--app-text-muted);
  border-bottom: 2px solid transparent;
}

.app-tab--active {
  color: var(--profile-accent);
  border-bottom-color: var(--profile-accent);
}

.app-status-success {
  background: var(--app-success-surface);
  color: var(--app-success);
  border: 1px solid var(--app-success-border);
  border-radius: var(--app-radius-sm);
}

.app-status-warning {
  background: var(--app-warning-surface);
  color: var(--app-warning);
  border: 1px solid var(--app-warning-border);
  border-radius: var(--app-radius-sm);
}

.app-status-danger {
  background: var(--app-danger-surface);
  color: var(--app-danger);
  border: 1px solid var(--app-danger-border);
  border-radius: var(--app-radius-sm);
}

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

.app-text-subtle {
  color: var(--app-text-subtle);
}

.app-focus-ring:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}
:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light;
  color: var(--app-text);
  background: var(--app-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
}

#root {
  /* Full-viewport container — no width cap here.
     The child-facing .app shell centres itself via margin: 0 auto + max-width.
     PCC renders as a sibling and must fill the whole viewport. */
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--app-bg);
  color: var(--app-text);
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}
.app {
  width: 100%;
  max-width: min(1100px, calc(100vw - 1.5rem));
  margin: 0 auto;
  padding: 0.65rem clamp(0.65rem, 2vw, 1.25rem);
  display: grid;
  gap: 0.65rem;
  /* Pack rows at the top — CRITICAL: without this, the grid distributes
     leftover viewport height (from flex: 1 1 auto) among all rows,
     causing the welcome panel to balloon on sparse pages. */
  align-content: start;
  background: var(--app-bg);
  color: var(--app-text);
  box-sizing: border-box;
  /* Decorative side borders on wide screens (was on #root, now scoped here
     so PCC can render without the border). */
  border-inline: 1px solid var(--app-border);
  /* Grow inside the #root flex column so the bg fills the viewport. */
  flex: 1 1 auto;
}

.child-practice-sync-status {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.app-footer-sync-status {
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.app-footer-sync-status .child-practice-sync-status {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
}

.app-footer-sync-status .child-practice-sync-status--synced {
  color: var(--app-success);
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
}

.app-footer-sync-status .child-practice-sync-status--warning,
.app-footer-sync-status .child-practice-sync-status--waiting {
  color: var(--app-warning);
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
}

.app-footer-sync-status .child-practice-sync-status--syncing,
.app-footer-sync-status .child-practice-sync-status--saved {
  color: var(--app-text-muted);
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
}

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  box-sizing: border-box;
}

.auth-card {
  width: 100%;
  max-width: 28rem;
  display: grid;
  gap: 0.7rem;
}

/* Login card is always light; global `h1` uses `--text-h` which is light in dark mode. */
.auth-card h1 {
  margin: 0 0 0.35rem;
  color: var(--app-text);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 4.2vw, 1.85rem);
  line-height: 1.2;
}

.auth-subtitle {
  margin: 0;
  color: var(--app-text-muted);
}

.auth-setup-message {
  margin: 0;
  padding: 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--app-warning-border);
  background: var(--app-warning-surface);
  color: var(--app-warning);
  font-size: 0.95rem;
  line-height: 1.4;
}

.auth-form {
  display: grid;
  gap: 0.45rem;
}

.auth-form label {
  font-weight: 400;
  color: var(--app-text);
}

.auth-form input {
  min-height: 44px;
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  padding: 0 0.6rem;
  font-size: 1rem;
  color: var(--app-text);
  background: var(--app-surface);
}

.auth-submit-button {
  margin-top: 0.2rem;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  font-weight: 600;
  cursor: pointer;
}

.auth-submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-error {
  margin: 0;
  color: var(--app-danger);
  background: var(--app-danger-surface);
  border: 1px solid var(--app-danger-border);
  border-radius: 8px;
  padding: 0.5rem;
  line-height: 1.35;
}

.auth-status {
  width: 100%;
  max-width: min(1440px, calc(100vw - 1.5rem));
  margin: 0.5rem auto 0;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.auth-status-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.auth-status-email {
  margin: 0;
  color: var(--app-text);
  font-size: 0.9rem;
}

.auth-status-warning {
  margin: 0;
  color: var(--app-warning);
  font-size: 0.84rem;
  line-height: 1.35;
}

.auth-status-ok {
  margin: 0;
  color: var(--app-success);
  font-size: 0.84rem;
  line-height: 1.35;
}

.auth-status-actions {
  display: inline-flex;
}

.auth-status-button {
  min-height: 36px;
  border: none;
  border-radius: 8px;
  padding: 0 0.75rem;
  background: var(--app-text);
  color: var(--app-text-on-primary);
  font-weight: 600;
  cursor: pointer;
}

.auth-status-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sync-status-panel {
  width: 100%;
  max-width: min(1440px, calc(100vw - 1.5rem));
  margin: 0.35rem auto 0;
  padding: 0.65rem 0.75rem;
}

.sync-status-panel h2 {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
}

.sync-status-grid {
  display: grid;
  gap: 0.2rem;
}

.sync-status-grid p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--app-text);
}

.sync-status-actions {
  margin-top: 0.45rem;
  display: grid;
  gap: 0.35rem;
}

.sync-status-actions button {
  min-height: 38px;
  width: fit-content;
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-weight: 600;
  padding: 0 0.7rem;
  cursor: pointer;
}

.sync-status-actions button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sync-status-muted {
  margin: 0;
  font-size: 0.83rem;
  color: var(--app-text-muted);
}

.sync-status-error {
  margin: 0;
  font-size: 0.83rem;
  color: var(--app-danger);
}

.sync-status-ok {
  color: var(--app-success-text);
  font-weight: 500;
}

.sync-status-warn {
  color: var(--app-warning-text);
  font-weight: 500;
}

/* ── Curriculum queue section inside SyncStatusPanel ─────────────────────── */
.sync-status-curriculum {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-border);
}

.sync-status-curriculum__heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.sync-status-error-list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.83rem;
  color: var(--app-danger);
}

.sync-prep-panel {
  width: 100%;
  max-width: min(1440px, calc(100vw - 1.5rem));
  margin: 0.35rem auto 0;
  padding: 0.65rem 0.75rem;
}

.admin-tools-dashboard {
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.admin-tool-section {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-raised);
  text-align: left;
}

.admin-tool-section-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.75rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--app-text);
  text-align: left;
}

.admin-tool-section-summary::-webkit-details-marker {
  display: none;
}

.admin-tool-section-body {
  border-top: 1px solid var(--app-border);
  padding: 0.6rem 0.7rem 0.65rem;
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.admin-health-grid {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  text-align: left;
}

.admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}

/* ---- Manage Scales / admin-style action button (used by ScaleTrainerPage)
   Previously lived in AdminDashboard.css; retained here as a light-theme
   action button alongside the .admin-tool-* family. */
.admin-access-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-secondary);
  color: var(--app-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.admin-access-btn:hover {
  background: var(--app-secondary-hover);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.admin-access-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.admin-tools-dashboard > h2 {
  margin: 0 0 0.35rem;
  font-size: 1.24rem;
  font-weight: 700;
  text-align: left;
}

.admin-tools-dashboard .sync-prep-list-block,
.admin-tools-dashboard .sync-prep-status-list,
.admin-tools-dashboard .sync-prep-user-grid,
.admin-tools-dashboard .sync-prep-user-card,
.admin-tools-dashboard .sync-prep-seed-results,
.admin-tools-dashboard .sync-status-panel,
.admin-tools-dashboard .sync-status-grid,
.admin-tools-dashboard .sync-status-actions,
.admin-tools-dashboard .progress-backup-panel,
.admin-tools-dashboard .progress-backup-summary,
.admin-tools-dashboard .progress-backup-actions,
.admin-tools-dashboard .progress-backup-import-options,
.admin-tools-dashboard .progress-backup-preview,
.admin-tools-dashboard .music-data-check-card,
.admin-tools-dashboard .music-data-check,
.admin-tools-dashboard .music-data-grid,
.admin-tools-dashboard .music-data-row,
.admin-tools-dashboard .user-profile-debug-card,
.admin-tools-dashboard .user-profile-debug-body,
.admin-tools-dashboard .user-profile-debug-dl,
.admin-tools-dashboard .user-profile-debug-row {
  text-align: left;
}

.admin-tools-dashboard .sync-prep-list-block h3,
.admin-tools-dashboard .sync-status-panel h2,
.admin-tools-dashboard .progress-backup-panel > h2,
.admin-tools-dashboard .music-data-check-toggle,
.admin-tools-dashboard .user-profile-debug-toggle {
  font-weight: 700;
}

.admin-tools-dashboard .sync-prep-list-block h3 {
  font-size: 1.02rem;
}

.two-hand-test-lab-wrap {
  padding-top: 0.55rem;
}

.two-hand-test-lab {
  margin: 0;
  padding: 0.75rem;
}

.two-hand-test-lab > h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.two-hand-test-lab-note {
  margin: 0 0 0.65rem;
  color: var(--app-text);
  font-size: 0.88rem;
}

.two-hand-test-lab-grid {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.two-hand-test-lab-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 0.5rem;
  align-items: start;
}

.two-hand-test-lab-row dt {
  font-weight: 700;
  color: var(--app-text);
}

.two-hand-test-lab-row dd {
  margin: 0;
  color: var(--app-text);
}

.two-hand-test-lab-actions {
  margin-top: 0.7rem;
}

.number-stepper {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.number-stepper-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--app-text);
}

.number-stepper-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.number-stepper-button {
  height: 2.6rem;
  width: 2.6rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 9px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
}

.number-stepper-button:disabled {
  opacity: 0.55;
}

.number-stepper-value {
  height: 2.6rem;
  width: clamp(4.5rem, 18vw, 5.2rem);
  padding: 0 0.35rem;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.86rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.number-stepper__controls {
  display: inline-grid;
  grid-template-columns: 42px minmax(64px, 82px) 42px;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
}

.number-stepper__button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
}

.number-stepper__value {
  min-width: 64px;
  max-width: 82px;
  width: auto;
  height: 42px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-prep-panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.sync-prep-status-list {
  display: grid;
  gap: 0.2rem;
  margin: 0 0 0.55rem;
}

.sync-prep-status-list p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
}

.sync-prep-list-block {
  margin: 0.55rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--app-border);
}

.sync-prep-list-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--app-text);
}

.sync-prep-list-block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sync-prep-list-block li {
  margin: 0.15rem 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--app-text);
}

.sync-prep-note {
  margin: 0;
  font-size: 0.83rem;
  color: var(--app-text-muted);
  line-height: 1.35;
}

.sync-prep-warning {
  color: var(--app-warning);
}

.sync-prep-ok {
  color: var(--app-success);
}

.sync-prep-user-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sync-prep-user-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-raised);
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.18rem;
}

.sync-prep-user-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--app-text);
}

.sync-prep-actions {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.35rem;
}

.sync-prep-actions button {
  min-height: 38px;
  width: fit-content;
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-weight: 600;
  padding: 0 0.7rem;
  cursor: pointer;
}

.sync-prep-actions button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sync-prep-file-label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  width: fit-content;
  font-size: 0.84rem;
  color: var(--app-text);
}

.sync-prep-file-label input[type='file'] {
  font-size: 0.82rem;
}

.sync-prep-checkbox-row {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--app-text);
}

.sync-prep-checkbox-row input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
}

.sync-prep-seed-results {
  margin-top: 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-raised);
  display: grid;
  gap: 0.2rem;
}

.sync-prep-seed-results p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.35;
}

.sync-prep-seed-results h4 {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  color: var(--app-text);
}

.sync-prep-seed-results button {
  margin-top: 0.25rem;
  min-height: 36px;
  width: fit-content;
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-weight: 600;
  padding: 0 0.65rem;
  cursor: pointer;
}

.sync-prep-seed-results ul {
  margin: 0.2rem 0 0;
  padding-left: 1rem;
}

.account-profile-gate {
  min-height: calc(100vh - 5rem);
  display: grid;
  place-items: center;
  padding: 0.75rem;
  box-sizing: border-box;
}

.account-profile-card {
  width: 100%;
  max-width: 34rem;
  display: grid;
  gap: 0.6rem;
}

.account-profile-card h2,
.account-profile-card p {
  margin: 0;
}

.account-profile-gate-button {
  min-height: 42px;
  width: fit-content;
  border: none;
  border-radius: 8px;
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  font-weight: 600;
  padding: 0 0.8rem;
  cursor: pointer;
}

.account-profile-gate-error {
  margin: 0;
  color: var(--app-danger);
  font-size: 0.84rem;
}

.user-profile-locked-note {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

/* Welcome card occupies the full app-top-row (MF-04 removed the title card). */
.app-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  /* Prevent this row from stretching to fill any remaining grid height. */
  align-self: start;
  min-width: 0;
}

.app-top-row .welcome-panel {
  min-width: 0;
}

@media (min-width: 768px) {
  .app-top-row .welcome-panel {
    margin: 0;
    max-width: none;
  }
}

.welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

.welcome-panel__message-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.welcome-panel-title,
.welcome-panel__title {
  margin: 0;
  line-height: 1;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.welcome-panel-message,
.welcome-panel__phrase {
  margin: 0;
  line-height: 1;
  font-size: 0.95rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.welcome-panel__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-self: end;
  flex-shrink: 0;
  min-width: 0;
}

/* Phase 5G + 5G-Repair: shell action buttons inverted onto AppButton — the
   bespoke .welcome-panel-signout / .welcome-panel__signout chrome was
   removed. AppButton positions itself naturally inside
   .welcome-panel__actions. Layout-only positional adjustments live here
   (whitespace handling, the flex row that lays the action buttons out
   across the compact welcome panel header). The button chrome itself
   (background, border, focus, disabled) is owned by AppButton in
   primitives.css.
   MF-07 removed Admin and Customise Profiles. MF-09 removed Assignments
   and Library; Sign out is now the only surviving action in this row. */
.welcome-panel__actions > .app-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .welcome-panel__message-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .welcome-panel-message,
  .welcome-panel__phrase {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 1rem;
  box-shadow: var(--app-shadow-card);
  color: var(--app-text);
}

/* Top welcome panel — compact, fixed-height strip.
   Background, border and title tint derive entirely from the active
   profile's CSS vars, which are set on the .app ancestor via
   style={activeProfileStyleVars} in App.jsx (resolveProfileCssVars).
   No random class variant: the panel automatically reflects the
   signed-in user's saved theme colour and changes when they switch
   profiles. Height is anchored at min-height 44px (matches --btn-min-height
   touch floor) so the shell header never changes height between pages. */
.app-top-row > .welcome-panel.card {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  /* allow-hardcoded-colour: subtle dark shadow tint */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  background: linear-gradient(
    180deg,
    var(--app-surface) 0%,
    var(--profile-bg, #f4f8ff) 100%
  );
  border: 1px solid var(--profile-accent-border, var(--app-border-strong));
}

/* Title uses the profile primary action colour so it is visibly on-theme. */
.app-top-row > .welcome-panel .welcome-panel__title,
.app-top-row > .welcome-panel .welcome-panel-title {
  color: var(--app-primary);
}

/* Phrase stays muted so it does not compete with the title. */
.app-top-row > .welcome-panel .welcome-panel__phrase,
.app-top-row > .welcome-panel .welcome-panel-message {
  color: var(--app-text-muted);
}

.stage-label {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
  color: var(--app-text-muted);
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.card h2 {
  color: var(--app-text);
}

.status-text {
  margin: 0;
}

.status-ok {
  margin: 0.5rem 0 0;
  color: var(--app-success);
  font-weight: 600;
}

.status-muted {
  margin: 0.5rem 0 0;
  color: var(--app-text-muted);
}

/* Phase 5G: .status-error removed — shell-level MIDI error message
   is now an <AppStatusBanner variant="danger">. .status-warn / .status-ok /
   .status-muted are retained because PianoSoundStatus still uses them. */

.status-warn {
  margin: 0.5rem 0 0;
  color: var(--app-warning);
  font-weight: 600;
}

/* MF-06: retired Midi&Audio panel (.midi-panel-card and friends) — replaced
   by the global MidiAudioStatusChip rendered next to AppNav and the new
   MidiAudioSetupModal. Underlying MIDI/audio logic in useMidiInput,
   useAudio and handleEnableMidiAndAudio is unchanged. */

.music-data-check-card {
  padding: 0.5rem 0.65rem;
}

/* Phase 14 — Progress backup panel polish */
.progress-backup-panel {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.progress-backup-panel > h2 {
  margin: 0;
  font-size: 1.05rem;
}

.progress-backup-panel > p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--app-text);
}

.progress-backup-summary {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-raised);
  min-width: 0;
}

.progress-backup-summary p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.3;
  word-break: break-word;
}

.progress-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
}

.progress-backup-actions button {
  flex: 1 1 11rem;
  min-width: min(100%, 10.5rem);
  min-height: 46px;
  padding: 0.28rem 0.65rem;
  font-size: 0.93rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--app-text-subtle);
  color: var(--app-text-on-primary);
  background: var(--app-primary-hover);
  cursor: pointer;
}

.progress-backup-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.progress-backup-import-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  min-width: 0;
}

.progress-backup-import-options p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--app-text);
}

.progress-backup-import-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  font-size: 0.86rem;
  color: var(--app-text);
  min-width: 0;
}

.progress-backup-import-options input[type='radio'] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.progress-backup-message {
  margin: 0.25rem 0 0;
  padding: 0.36rem 0.45rem;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.32;
}

.progress-backup-warning {
  margin: 0;
  padding: 0.45rem 0.52rem;
  border-radius: 8px;
  border: 1px solid var(--app-warning-border);
  background: var(--app-warning-surface);
  color: var(--app-warning);
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.progress-backup-warning p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.progress-backup-warning label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 40px;
  font-size: 0.84rem;
  line-height: 1.3;
}

.progress-backup-preview {
  margin: 0;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--profile-accent-soft);
  background: var(--app-info-surface);
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.progress-backup-preview h3 {
  margin: 0 0 0.1rem;
  font-size: 0.92rem;
  color: var(--app-text-emphasis);
}

.progress-backup-preview p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
  word-break: break-word;
}

.progress-backup-preview button {
  margin-top: 0.2rem;
  min-height: 46px;
  width: 100%;
  padding: 0.28rem 0.65rem;
  font-size: 0.93rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  color: var(--app-text-on-primary);
  background: var(--app-primary-hover);
  cursor: pointer;
}

.progress-backup-preview button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .progress-backup-actions button {
    flex: 0 1 auto;
    min-width: 12.5rem;
  }

  .progress-backup-preview button {
    width: fit-content;
    min-width: 12rem;
  }
}

.music-data-check-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  color: var(--app-text);
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  cursor: pointer;
}

.music-data-check-toggle:focus-visible {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.music-data-check-chevron {
  color: var(--app-text-muted);
  font-weight: 400;
}

.music-data-check-body {
  margin-top: 0.45rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
}

.controls {
  display: grid;
  gap: 0.75rem;
  align-items: center;
}

.connect-button,
select {
  min-height: 48px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid var(--app-text-subtle);
  padding: 0 0.75rem;
}

.connect-button {
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.connect-button:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.empty-state {
  margin: 0.75rem 0 0;
}

/* Phase 5G: .key-indicator (up / down) removed — the previous shell
   "Key Down / No keys down" status pill is no longer rendered.
   MF-06 retired the surrounding Midi&Audio panel altogether — the
   recent-MIDI list below is now consumed only by the Temp Parent
   "Recent MIDI Messages" collapsible. */

.message-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.message-list li {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--app-surface-raised);
}

.midi-messages-card .message-list--compact {
  gap: 0;
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-raised);
}

.midi-messages-card .message-list--compact li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.28rem 0.45rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--app-border);
  background: transparent;
  font-size: 0.82rem;
  line-height: 1.25;
}

.midi-messages-card .message-list--compact li:last-child {
  border-bottom: none;
}

.midi-messages-card .midi-msg-type {
  font-weight: 700;
  min-width: 4.25rem;
}

.midi-messages-card .midi-msg-note {
  font-weight: 600;
  color: var(--app-primary-hover);
}

.midi-messages-card .midi-msg-meta {
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto;
  min-width: 0;
}

.midi-messages-card .empty-state--compact {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.music-data-check .music-data-grid {
  display: grid;
  gap: 0.5rem;
}

.music-data-check .music-data-row {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--app-border);
}

.music-data-check .music-data-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.music-data-check .music-data-row-full {
  grid-template-columns: 1fr;
}

.music-data-check .music-data-label {
  font-weight: 600;
  color: var(--app-text);
  font-size: 0.95rem;
}

.music-data-check .music-data-value {
  color: var(--app-text);
  font-size: 0.95rem;
  word-break: break-word;
}

@media (min-width: 700px) {
  .app {
    padding: 1rem;
    gap: 0.5rem;
  }
}

@media (min-width: 820px) and (orientation: landscape) {
  /* Halve the horizontal gutter on iPad landscape so all shell rows
     (app-top-row, app-chrome-row, trainer screen) use more viewport width. */
  .app {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (min-width: 700px) {

  .controls {
    grid-template-columns: 220px 1fr;
  }

  .controls label {
    grid-column: 1 / -1;
  }

  .music-data-check .music-data-row:not(.music-data-row-full) {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
  }

  .music-data-check .music-data-row-full .music-data-value {
    padding-left: 0;
  }
}

/* Stage 6 — User profile panel (readable on dark page background) */
.user-profile-panel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.user-profile-panel--compact {
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

.user-profile-panel-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: var(--app-text);
}

.user-profile-panel-title--inline {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.92rem;
  line-height: 1.2;
}

.user-profile-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.user-profile-toolbar--single-row {
  flex: 1 1 14rem;
  min-width: 0;
}

.user-profile-active-select--compact {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--app-text-subtle);
  padding: 0.35rem 0.5rem;
  color: var(--app-text);
  background: var(--app-surface);
  box-sizing: border-box;
}

.user-profile-add-bottom {
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  border-style: dashed;
  border-color: var(--app-border-strong);
  background: var(--app-surface-raised);
}

.user-profile-add-bottom-toggle {
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.user-profile-add-bottom-toggle:focus-visible {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.user-profile-add-bottom .user-profile-inline-add {
  margin-top: 0.4rem;
}

.user-profile-inline-add {
  margin-top: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  display: grid;
  gap: 0.4rem;
}

.user-profile-new-name-input--compact {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--app-text-subtle);
  padding: 0.35rem 0.5rem;
}

.user-profile-inline-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.user-profile-save-user-button {
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text-on-primary);
  background: var(--app-primary-hover);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.user-profile-cancel-button {
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text);
  background: var(--app-border);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

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

.user-profile-debug-card {
  padding: 0.5rem 0.65rem;
}

.user-profile-debug-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  color: var(--app-text);
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  cursor: pointer;
}

.user-profile-debug-toggle:focus-visible {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.user-profile-debug-chevron {
  color: var(--app-text-muted);
  font-weight: 400;
}

.user-profile-debug-body {
  margin-top: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
}

.user-profile-debug-dl {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.user-profile-debug-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}

.user-profile-debug-row dt {
  margin: 0;
  font-weight: 600;
  color: var(--app-text-muted);
}

.user-profile-debug-row dd {
  margin: 0;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}

/* Stage 7 Chord Trainer — compact layout for iPad landscape + desktop */
.chord-trainer-panel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  padding: 0.4rem 0.5rem 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.chord-trainer-panel h2 {
  color: var(--app-text);
  margin: 0 0 0.16rem;
  font-size: 1.08rem;
  line-height: 1.15;
}

/* Stage 9 — MIDI target radio in panel title (compact, shared name with Scale Trainer) */
.trainer-panel-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 0;
  font-size: 1.08rem;
  line-height: 1.15;
}

.trainer-panel-title-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  color: var(--app-text);
}

.trainer-panel-title-label input[type='radio'] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--app-info);
  vertical-align: middle;
}

.trainer-panel-title-label:focus-within {
  outline: none;
}

.trainer-panel-title-label:focus-within input[type='radio'] {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.trainer-panel-title-text {
  display: inline;
  font-weight: inherit;
}

.chord-trainer-panel h3 {
  color: var(--app-text);
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.chord-trainer-controls {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin: 0.16rem 0 0.2rem;
}

.chord-trainer-controls-primary,
.chord-trainer-controls-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.28rem 0.4rem;
  min-width: 0;
}

.chord-trainer-field {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.chord-trainer-field > label:first-child,
.chord-trainer-panel .chord-trainer-field > label[for] {
  font-weight: 600;
  color: var(--app-text);
  font-size: 0.8rem;
  line-height: 1.2;
}

.chord-trainer-panel fieldset.chord-trainer-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.18rem 0.35rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 0.22rem 0.32rem 0.28rem;
  margin: 0;
  min-width: 0;
}

.chord-trainer-panel fieldset.chord-trainer-field legend {
  font-weight: 600;
  color: var(--app-text);
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0 0.15rem;
  flex: 1 0 100%;
  width: 100%;
}

.chord-trainer-panel fieldset.chord-trainer-field label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--app-text);
  margin: 0;
  min-height: 40px;
  padding: 0.1rem 0.22rem;
  flex: 1 1 auto;
  min-width: min(7.5rem, 100%);
  cursor: pointer;
  box-sizing: border-box;
}

.chord-trainer-panel fieldset.chord-trainer-field input[type='checkbox'],
.chord-trainer-panel fieldset.chord-trainer-field input[type='radio'] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.chord-trainer-field--hand-radios label,
.chord-trainer-field--display-mode label {
  min-height: 40px;
}

.chord-display-options.chord-trainer-field--display-mode {
  gap: 0.15rem 0.3rem;
}

.chord-display-option {
  min-width: min(7rem, 100%);
}

/* ---------- Chord type multi-select dropdown ---------- */
.chord-type-dropdown {
  position: relative;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.chord-type-dropdown-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, var(--app-text-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chord-type-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 38px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-strong, var(--app-text-subtle));
  background: var(--app-surface);
  color: var(--text-main, var(--app-text));
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.chord-type-dropdown-trigger:focus-visible {
  outline: 2px solid var(--blue, var(--app-primary));
  outline-offset: 1px;
}

.chord-type-dropdown-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.chord-type-dropdown-caret {
  font-size: 0.7rem;
  color: var(--text-muted, var(--app-text-muted));
  flex: 0 0 auto;
}

.chord-type-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  z-index: 30;
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  background: var(--app-surface);
  border: 1px solid var(--border-strong, var(--app-text-subtle));
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  /* Keep the popup readable but contained when many long labels are listed.
     The trigger anchors the menu; it may exceed the trigger width slightly
     but is clamped to the viewport, and long lists scroll instead of pushing
     the page off-screen. */
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 1rem));
  max-height: min(60vh, 360px);
  overflow-y: auto;
  box-sizing: border-box;
}

.chord-type-dropdown-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  font-size: 0.85rem;
  color: var(--text-main, var(--app-text));
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  /* Allow long labels (Jazz, 11th descriptors) to wrap inside the contained
     popup instead of forcing horizontal overflow. */
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

.chord-type-dropdown-row:hover {
  background: var(--blue-soft, var(--app-info-surface));
}

.chord-type-dropdown-row > input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--blue, var(--app-primary));
  flex: 0 0 auto;
}

.chord-trainer-panel select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  padding: 0.3rem 0.45rem;
}

.chord-trainer-message {
  margin: 0.2rem 0;
  padding: 0.32rem 0.42rem;
  border-radius: 8px;
  /* Neutral trainer workspace surface — profile accent visible on controls, not message cards */
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  color: var(--app-text-emphasis);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Chord Trainer inactive (MIDI routed to Scale) — matches Scale Trainer paused banner look */
.chord-trainer-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  margin: 0.16rem 0 0.2rem;
  min-width: 0;
  align-items: start;
}

.chord-trainer-question-main {
  min-width: 0;
}

.chord-trainer-question-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.chord-trainer-question-row .chord-trainer-question,
.chord-trainer-question-row .chord-question-card {
  margin: 0;
}

.chord-trainer-question,
.chord-question-card {
  margin: 0.18rem 0;
  padding: 0.45rem 0.55rem 0.5rem;
  border-radius: 10px;
  border: 2px solid var(--app-info-border);
  background: var(--app-info-surface);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.chord-trainer-question-row .chord-trainer-question {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.chord-trainer-question-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.28rem 0.65rem;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

.chord-trainer-question-content .chord-trainer-question-main-text {
  margin: 0;
  flex: 0 1 auto;
  justify-content: center;
  min-width: 0;
}

.chord-trainer-question-subtext {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  text-align: center;
  font-size: clamp(0.92rem, 2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.22;
  color: var(--app-info-hover);
}

.chord-question-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem 0.65rem;
  margin: 0;
}

.chord-question-main--name,
.chord-question-main--roman {
  justify-content: center;
}

.chord-question-main--both {
  gap: 0.45rem 0.85rem;
  /* Roman size in "Both"; chord name uses calc(var * 1.5) so name is 1.5x roman. */
  --chord-roman-fs: clamp(1.85rem, 4.8vw, 2.85rem);
}

/* Chord-question card: 3 stacked rows — title, notation, footer.
   Each row is a normal flex-column child, no fixed heights, no absolute
   positioning. The card hugs its content. */
.chord-trainer-question,
.chord-question-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.chord-question-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  width: 100%;
  min-width: 0;
  text-align: center;
  margin: 0;
}

.chord-question-notation-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: visible;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.chord-question-notation-row .staff-display {
  background: transparent;
  /* Clear the inline minHeight the renderer sets so the wrapper hugs the SVG
     instead of holding open a fixed gap. */
  min-height: 0 !important;
  overflow: visible !important;
}

.chord-question-notation-row .staff-display svg {
  display: block;
  background: transparent;
  overflow: visible;
}

/* Footer row: subtitle right-aligned, normal flow (NOT absolute over staff). */
.chord-question-footer-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.chord-question-footer-row > .chord-question-subtitle {
  margin: 0;
  text-align: right;
  font-size: 0.78rem;
  line-height: 1.2;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .chord-question-footer-row {
    justify-content: center;
  }
  .chord-question-footer-row > .chord-question-subtitle {
    text-align: center;
  }
}

.chord-name-large {
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--child-immersive-bg);
  letter-spacing: -0.02em;
}

.chord-question-main--both .chord-name-large.chord-roman {
  font-size: var(--chord-roman-fs);
}

.chord-question-main--both .chord-name-large:not(.chord-roman) {
  font-size: calc(var(--chord-roman-fs) * 1.5);
}

.chord-roman.chord-name-large {
  font-weight: 800;
}

.chord-question-subtitle {
  margin: 0;
  font-weight: 600;
  color: var(--app-info-hover);
  line-height: 1.28;
  text-align: center;
}

.chord-question-subtitle.chord-trainer-question-subtext {
  font-weight: 500;
  line-height: 1.22;
}

.chord-trainer-feedback-inline {
  margin: 0.2rem 0 0;
  text-align: center;
  font-size: clamp(0.8rem, 1.9vw, 0.95rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--app-info-text);
}

.chord-question-placeholder {
  margin: 0.15rem 0 0;
  text-align: center;
}

.chord-trainer-question.chord-trainer-question--wrong {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
}

.chord-trainer-question.chord-trainer-question--wrong .chord-name-large,
.chord-trainer-question.chord-trainer-question--wrong .chord-question-subtitle,
.chord-trainer-question.chord-trainer-question--wrong .chord-trainer-question-subtext,
.chord-trainer-question.chord-trainer-question--wrong .chord-trainer-feedback-inline {
  color: var(--app-danger);
}

.chord-trainer-question.correct {
  background: var(--app-success-surface);
  border-color: var(--app-success);
}

.chord-trainer-question.correct .chord-name-large,
.chord-trainer-question.correct .chord-question-subtitle,
.chord-trainer-question.correct .chord-trainer-question-subtext,
.chord-trainer-question.correct .chord-trainer-feedback-inline {
  color: var(--app-success-text);
}

.chord-trainer-answer-controls {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: stretch;
  width: 100%;
}

.chord-trainer-answer-controls button {
  min-height: 52px;
  min-width: 0;
  width: 100%;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--app-text-on-primary);
  background: var(--app-primary-hover);
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chord-trainer-answer-controls button:focus-visible {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.chord-trainer-next-button {
  background: var(--app-surface);
  color: var(--app-primary-hover);
  border: 2px solid var(--app-primary-hover);
}

.chord-trainer-next-button:focus-visible {
  outline: 2px solid var(--app-primary-hover);
  outline-offset: 2px;
}

.chord-trainer-answer {
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-raised);
}

.chord-trainer-inline-answer {
  margin: 0;
  padding: 0.32rem 0.42rem;
  max-height: min(52vh, 20rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chord-trainer-inline-answer h3 {
  margin: 0 0 0.18rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.2;
}

.chord-trainer-answer p {
  margin: 0.14rem 0;
  font-size: 0.85rem;
  color: var(--app-text);
  line-height: 1.3;
}

.chord-trainer-inline-answer p {
  margin: 0.08rem 0;
  font-size: 0.78rem;
  line-height: 1.28;
  color: var(--app-text);
}

.chord-trainer-answer strong {
  color: var(--app-text);
}

.chord-trainer-inline-answer strong {
  color: var(--app-text);
  font-weight: 600;
}

.chord-trainer-answer-beside-diagram.chord-trainer-inline-answer {
  max-height: min(42vh, 18rem);
}

/* Tablet+: Root / Scale / Mode on one row */
@media (min-width: 600px) {
  .chord-trainer-controls-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 0.45rem;
  }

  .chord-trainer-panel fieldset.chord-trainer-field label {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* iPad landscape + desktop: second row = positions | hand | display in three columns */
@media (min-width: 768px) {
  .chord-trainer-question-row {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
    column-gap: 0.65rem;
    row-gap: 0.45rem;
    margin: 0.12rem 0 0.18rem;
    align-items: start;
  }

  .chord-trainer-question-row .chord-trainer-question {
    min-height: 0;
    padding: clamp(0.5rem, 1.2vw, 0.75rem) clamp(0.65rem, 1.6vw, 0.9rem);
  }

  .chord-trainer-question-content {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.75rem, 2.2vw, 1.2rem);
  }

  .chord-trainer-question-content .chord-trainer-question-main-text {
    align-items: baseline;
  }

  .chord-trainer-question-content .chord-trainer-question-subtext {
    width: auto;
    max-width: min(38%, 14rem);
    text-align: left;
    align-self: flex-end;
    line-height: 1.18;
    margin-bottom: 0.2rem;
  }

  .chord-trainer-panel {
    padding: 0.45rem 0.55rem 0.5rem;
  }

  .chord-trainer-controls-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem 0.4rem;
    align-items: stretch;
  }

  .chord-trainer-controls-secondary .chord-trainer-field {
    min-height: 100%;
  }

  .chord-trainer-panel fieldset.chord-trainer-field {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0.2rem 0.28rem 0.26rem;
  }

  .chord-trainer-panel fieldset.chord-trainer-field legend {
    flex: 1 0 100%;
  }

  .chord-trainer-panel fieldset.chord-trainer-field label {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .chord-display-options.chord-trainer-field--display-mode {
    gap: 0.12rem 0.25rem;
  }

  .chord-display-option {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (min-width: 900px) {
  .chord-trainer-panel {
    padding: 0.48rem 0.6rem 0.52rem;
  }
}

@media (max-width: 599px) {
  .chord-trainer-panel fieldset.chord-trainer-field label {
    flex: 1 1 100%;
  }
}

/* Tighter gap before embedded Chord Progress inside trainer panel */
.chord-trainer-panel .chord-progress-section {
  margin: 0.35rem 0 0.2rem;
}

/* Chord progress bars (Stage 8) — reusable; not tied to ChordTrainer layout */
.chord-progress-section {
  margin: 0.65rem 0;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  max-width: 100%;
  box-sizing: border-box;
}

.chord-progress-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
}

.chord-progress-header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.25;
}

.progress-panel-title,
.chord-progress-header h2.progress-panel-title,
.chord-progress-header h3.progress-panel-title,
.scale-progress-header h2.progress-panel-title,
.scale-progress-header h3.progress-panel-title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.2;
}

.progress-panel-top-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: min(100%, 17rem);
}

.progress-panel-stats {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
  min-width: min(100%, 18.5rem);
}

.progress-panel-stat-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  border-radius: 8px;
  padding: 0.38rem 0.72rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.progress-panel-stat-label {
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--app-text);
}

.progress-panel-stat-value {
  font-size: clamp(0.9rem, 1.55vw, 0.98rem);
  line-height: 1.2;
  color: var(--app-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.progress-panel-stat-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.14rem;
}

.chord-progress-header--trainer {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

.chord-progress-header--trainer h2 {
  flex: 0 1 auto;
  min-width: 0;
}

.chord-progress-session-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: clamp(0.92rem, 2vw, 1.08rem);
  line-height: 1.3;
  color: var(--app-text);
  flex: 1 1 auto;
  justify-content: center;
  min-width: min(100%, 12rem);
}

.chord-progress-session-stat {
  white-space: nowrap;
}

.chord-progress-session-stat strong {
  color: var(--app-text);
  font-weight: 700;
}

.chord-progress-session-stat-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--app-text);
}

.chord-progress-header--trainer .chord-progress-toggle-row {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: min(100%, 10.5rem);
}

@media (min-width: 720px) {
  .chord-progress-header--trainer {
    flex-wrap: nowrap;
  }

  .chord-progress-session-stats {
    flex: 0 1 auto;
    justify-content: flex-start;
    min-width: 0;
  }

  .chord-progress-header--trainer .chord-progress-toggle-row {
    flex: 0 0 auto;
    min-width: 0;
  }
}

.chord-progress-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.chord-progress-toggle {
  min-width: 5rem;
  min-height: 32px;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.chord-progress-toggle:hover {
  background: var(--app-surface-raised);
  border-color: var(--app-text-subtle);
}

.chord-progress-toggle:active {
  transform: scale(0.98);
}

.chord-progress-toggle-active,
.chord-progress-toggle-active:hover {
  border-color: var(--app-primary-active);
  background: var(--app-text-emphasis);
  color: var(--app-text-on-primary);
  /* allow-hardcoded-colour: primary-active deep navy shadow tint matching button */
  box-shadow: 0 1px 2px rgba(23, 37, 84, 0.45);
}

/* Compact horizontal bar chart — all chords visible in one band */
.chord-progress-chart {
  margin-top: 0.5rem;
  padding: 0.45rem 0.3rem 0.35rem;
  background: var(--app-surface);
  border-radius: 10px;
  border: 1px solid var(--app-border);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.chord-progress-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.3rem 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.chord-progress-y-axis {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 0.15rem;
}

.chord-progress-y-axis-spacer {
  flex-shrink: 0;
  height: calc(1.15rem + 0.12rem);
}

.chord-progress-y-axis-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 6.75rem;
  padding-right: 0.35rem;
  border-right: 1px solid var(--app-border);
  box-sizing: border-box;
}

.chord-progress-y-tick {
  font-size: 0.65rem;
  line-height: 1;
  color: var(--app-text-subtle);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.chord-progress-columns-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: visible;
}

.chord-progress-bars.chord-progress-columns {
  list-style: none;
  margin: 0;
  padding: 0 0.05rem 0.1rem 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 0.28rem;
  row-gap: 0.35rem;
  width: 100%;
  min-width: 0;
  align-items: end;
  box-sizing: border-box;
}

.chord-progress-column {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.chord-progress-column-pct {
  font-size: 0.72rem;
  line-height: 1.15;
  min-height: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--app-text-muted);
}

.chord-progress-column-bar,
.chord-progress-bar-track {
  width: 100%;
  max-width: 100%;
  height: 6.75rem;
  margin: 0.12rem 0 0.28rem;
  position: relative;
  background-color: var(--app-border);
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(50% - 0.5px),
    rgba(255, 255, 255, 0.65) calc(50% - 0.5px),
    rgba(255, 255, 255, 0.65) calc(50% + 0.5px),
    transparent calc(50% + 0.5px),
    transparent 100%
  );
  border-radius: 7px;
  overflow: hidden;
  box-sizing: border-box;
}

.chord-progress-column-fill,
.chord-progress-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, var(--app-info), var(--child-immersive-text-muted));
  border-radius: 0 0 5px 5px;
  min-height: 0;
  transition: height 0.25s ease;
}

.chord-progress-column-label {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--app-text);
  word-break: break-word;
  max-width: 100%;
  hyphens: auto;
}

.chord-progress-column-meta {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}

.chord-progress-empty {
  margin: 0.65rem 0 0.15rem;
  padding: 0.55rem 0.5rem;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--app-text-muted);
  background: var(--app-surface);
  border-radius: 8px;
  border: 1px dashed var(--app-border-strong);
}

@media (min-width: 600px) {
  .chord-progress-bars.chord-progress-columns {
    column-gap: 0.38rem;
    row-gap: 0.4rem;
  }

  .chord-progress-column-bar,
  .chord-progress-bar-track {
    height: 7.25rem;
  }

  .chord-progress-y-axis-labels {
    height: 7.25rem;
  }
}

/* Last-resort horizontal scroll only on very narrow widths */
@media (max-width: 319px) {
  .chord-progress-columns-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .chord-progress-bars.chord-progress-columns {
    min-width: 16.5rem;
  }

  .chord-progress-column-pct {
    font-size: 0.65rem;
  }

  .chord-progress-column-label {
    font-size: 0.74rem;
  }

  .chord-progress-column-meta {
    font-size: 0.62rem;
  }
}

/* Stage 9 — Scale Trainer panel (Chord Trainer–like, touch-friendly) */
.scale-trainer-panel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  color: var(--app-text);
  text-align: left;
}

.scale-trainer-panel.card {
  padding: 0.4rem 0.5rem 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.scale-trainer-panel h2 {
  margin: 0 0 0.14rem;
  font-size: 1.06rem;
  line-height: 1.15;
  color: var(--app-text);
}

/* Stage 11 — Scale Trainer metronome + timing feedback */
.metronome-controls {
  margin: 0.12rem 0 0.22rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  display: grid;
  gap: 0.45rem;
}

.metronome-controls-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.22rem;
}

.metronome-controls-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--app-text);
}

.metronome-use-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
  cursor: pointer;
  user-select: none;
}

.metronome-use-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--app-info);
}

.metronome-status-msg {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.32;
  color: var(--app-text-muted);
}

.metronome-status-msg--warn {
  color: var(--app-warning);
  font-weight: 600;
}

/* Compact single-row layout for all metronome controls */
.metronome-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.metronome-controls-section {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 0.38rem 0.45rem;
}

.metronome-controls-section--final-feedback {
  background: var(--app-surface);
}

.metronome-section-title {
  margin: 0 0 0.32rem;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--app-text);
}

.metronome-settings-grid {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: auto auto auto auto auto auto;
  align-items: end;
  justify-content: flex-start;
}

.metronome-setting-field {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-text);
}

.metronome-setting-field input {
  width: auto;
  min-height: 30px;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--app-text-subtle);
  padding: 0.1rem 0.3rem;
  background: var(--app-surface);
  color: var(--app-text);
  box-sizing: border-box;
}

.metronome-setting-field select {
  width: auto;
  min-height: 30px;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--app-text-subtle);
  padding: 0.1rem 0.3rem;
  background: var(--app-surface);
  color: var(--app-text);
  box-sizing: border-box;
}

.metronome-setting-field input:disabled,
.metronome-setting-field select:disabled {
  background: var(--app-secondary);
  color: var(--app-text-muted);
  border-color: var(--app-border-strong);
  opacity: 1;
  cursor: not-allowed;
}

.metronome-controls-section--exercise {
  background: var(--app-info-surface);
}

.metronome-exercise-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: flex-end;
}

.metronome-setting-field--exercise-picker {
  width: min(11rem, 100%);
}

.metronome-setting-field--start .metronome-toggle-button {
  width: auto;
}

.metronome-setting-field--bpm input,
.metronome-setting-field--accuracy input,
.metronome-setting-field--tolerance input {
  width: 84px;
}

.metronome-setting-field--signature select {
  width: 104px;
}

.metronome-setting-field--sound select {
  width: 176px;
}

.metronome-exercise-grid .metronome-setting-field input {
  width: 102px;
}

.metronome-exercise-grid .metronome-setting-field--exercise-picker select {
  width: 150px;
}

.metronome-setting-field--wide {
  grid-column: span 2;
}

.metronome-exercise-timer-status {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--app-text);
  font-weight: 600;
}

.metronome-exercise-ladder-status {
  color: var(--app-text-emphasis);
}

.metronome-exercise-lock-msg {
  margin: 0.28rem 0 0;
  font-size: 0.74rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--app-text-muted);
}

.metronome-setting-field small {
  font-size: 0.68rem;
  color: var(--app-text-muted);
  line-height: 1.2;
}

.metronome-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}

/* Inline label + narrow number input pairs */
.metronome-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
}

.metronome-inline-field input {
  width: 3.5rem;
  min-height: 32px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid var(--app-text-subtle);
  padding: 0.12rem 0.3rem;
  background: var(--app-surface);
  color: var(--app-text);
  caret-color: var(--app-text);
  box-sizing: border-box;
}

.metronome-inline-field input::placeholder {
  color: var(--app-text-muted);
}

.metronome-controls-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.metronome-toggle-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.15rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.metronome-toggle-button--start {
  background: var(--app-primary-hover);
}

.metronome-toggle-button--stop {
  background: var(--app-danger);
}

.metronome-toggle-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.exercise-mode-free {
  background: var(--profile-accent-soft);
  border-color: var(--profile-accent-soft);
}

.exercise-mode-timed {
  background: var(--app-success-surface);
  border-color: var(--app-success-surface);
}

.exercise-mode-beat-ladder {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-surface);
}

.exercise-mode-time-ladder {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent-soft);
}

.exercise-mode-streak-goal {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-surface);
}

.metronome-beat-indicator {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--app-info-hover);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metronome-beat-indicator--exercise {
  align-self: end;
  padding-bottom: 0.2rem;
}

/* Session average accuracy — compact inline pill */
.metronome-avg-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  /* Neutral trainer metric — remains readable across all profiles */
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  color: var(--app-text-emphasis);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Average accuracy pill colour modifiers — same pass/near/fail palette as timing feedback */
.metronome-avg-pill--neutral {
  background: var(--app-info-surface);
  border-color: var(--app-info-border);
  color: var(--app-text-emphasis);
}

.metronome-avg-pill--pass {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.metronome-avg-pill--near {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  color: var(--app-warning);
}

.metronome-avg-pill--fail {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

/* Stage 12 — auto BPM progression info pills */
.metronome-stage12-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.22rem 0.32rem;
  border-radius: 8px;
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  color: var(--app-info-text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.metronome-stage12-pill--neutral {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.metronome-stage12-pill.metronome-avg-pill--pass {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.metronome-stage12-pill.metronome-avg-pill--near {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  color: var(--app-warning);
}

.metronome-stage12-pill.metronome-avg-pill--fail {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

/* Per-scale timing feedback — slim coloured message below the row */
.metronome-timing-feedback {
  margin: 0;
  padding: 0.22rem 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.metronome-final-feedback-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.metronome-final-feedback-row .metronome-section-title {
  margin: 0;
  flex: 0 0 auto;
}

.metronome-final-feedback-row .metronome-timing-feedback,
.metronome-final-feedback-row .metronome-status-msg {
  flex: 0 1 auto;
  max-width: min(100%, 52rem);
}

@media (max-width: 680px) {
  .metronome-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metronome-settings-grid .metronome-setting-field input,
  .metronome-settings-grid .metronome-setting-field select,
  .metronome-exercise-grid .metronome-setting-field input,
  .metronome-exercise-grid .metronome-setting-field select {
    width: 100%;
  }

  .metronome-exercise-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metronome-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stage 13 — iPad landscape touch polish for metronome controls */
@media (min-width: 768px) and (orientation: landscape) {
  .metronome-controls {
    gap: 0.55rem;
    padding: 0.5rem 0.55rem 0.55rem;
  }

  .metronome-settings-grid {
    grid-template-columns: repeat(6, minmax(max-content, 1fr));
  }

  .metronome-controls-section {
    padding: 0.45rem 0.5rem;
  }

  .metronome-settings-grid,
  .metronome-exercise-grid {
    gap: 0.38rem;
    min-width: 0;
  }

  .metronome-setting-field {
    gap: 0.18rem;
    font-size: 0.76rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .metronome-setting-field input,
  .metronome-setting-field select {
    min-height: 36px;
    font-size: 0.84rem;
    padding: 0.14rem 0.35rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metronome-toggle-button {
    min-height: 38px;
    font-size: 0.86rem;
    padding: 0.2rem 0.8rem;
  }

  .scale-trainer-controls .chord-trainer-field,
  .scale-trainer-controls .scale-trainer-select,
  .scale-trainer-panel .chord-trainer-controls-primary,
  .scale-trainer-panel .chord-trainer-controls-secondary {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .scale-trainer-controls .scale-trainer-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep adjacent piano keys visually separated on iPad Safari/MidiWeb. */
  .piano-white-key {
    position: relative;
  }

  /* allow-hardcoded-colour: piano-key teaching surface — dark separator/shadow tint between keys */
  .piano-white-key::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: var(--piano-white-h);
    background: rgba(15, 23, 42, 0.2);
    pointer-events: none;
    z-index: 3;
  }

  .piano-white-key:last-child::after {
    display: none;
  }

  /* allow-hardcoded-colour: piano-key teaching surface — inner edge highlight */
  .piano-white-key-surface {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  }

  /* allow-hardcoded-colour: piano-key teaching surface — black key inner highlight + outer shadow */
  .piano-black-key-surface {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(15, 23, 42, 0.22);
  }
}

/* Green: score met or exceeded threshold */
.metronome-timing-feedback--pass {
  border-color: var(--app-success-border);
  background: var(--app-success-surface);
  color: var(--app-success);
}

/* Amber: within 75 % of threshold */
.metronome-timing-feedback--near {
  border-color: var(--app-warning-border);
  background: var(--app-warning-surface);
  color: var(--app-warning);
}

/* Red: below 75 % of threshold */
.metronome-timing-feedback--fail {
  border-color: var(--app-danger-border);
  background: var(--app-danger-surface);
  color: var(--app-danger);
}

.scale-trainer-panel .chord-trainer-controls {
  gap: 0.14rem;
  margin: 0.08rem 0 0.12rem;
}

.scale-trainer-controls .chord-trainer-controls-primary,
.scale-trainer-controls .chord-trainer-controls-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.22rem 0.32rem;
  min-width: 0;
}

.scale-trainer-panel .chord-trainer-field {
  gap: 0.1rem;
}

.scale-trainer-panel .chord-trainer-field > label:first-child,
.scale-trainer-panel .chord-trainer-field > label[for] {
  font-size: 0.76rem;
}

.scale-trainer-panel fieldset.chord-trainer-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.08rem 0.28rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 0.12rem 0.26rem 0.16rem;
  margin: 0;
  min-width: 0;
}

.scale-trainer-panel fieldset.chord-trainer-field legend {
  font-weight: 600;
  color: var(--app-text);
  font-size: 0.72rem;
  line-height: 1.15;
  padding: 0 0.1rem;
  flex: 1 0 100%;
  width: 100%;
}

.scale-trainer-panel fieldset.chord-trainer-field label {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.82rem;
  color: var(--app-text);
  margin: 0;
  min-height: 34px;
  padding: 0.04rem 0.12rem;
  flex: 1 1 auto;
  min-width: min(4.5rem, 100%);
  cursor: pointer;
  box-sizing: border-box;
}

.scale-trainer-panel fieldset.chord-trainer-field input[type='radio'] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.scale-trainer-select,
.scale-trainer-panel select.scale-trainer-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-text-subtle);
  border-radius: 8px;
  padding: 0.22rem 0.42rem;
}

.scale-trainer-hand-radios {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.scale-trainer-hand-radios label {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

.scale-trainer-question {
  margin: 0.22rem 0 0.15rem;
}

@media (min-width: 600px) {
  .scale-trainer-controls .chord-trainer-controls-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .scale-trainer-controls .chord-trainer-controls-secondary {
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .scale-trainer-hand-radios {
    flex-wrap: nowrap;
  }

  .scale-trainer-hand-radios label {
    flex: 0 1 auto;
    min-width: 0;
  }
}

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

/* Stage 9+ — compact theory diagrams */
.diagram-block-title {
  margin: 0 0 0.18rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--app-text-muted);
  line-height: 1.2;
}

.chord-trainer-diagram-answer-row {
  display: grid;
  gap: 0.45rem;
  margin: 0.12rem 0 0.2rem;
  min-width: 0;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.chord-trainer-diagram-col {
  min-width: 0;
}

.chord-trainer-diagram-col--piano {
  min-width: min(100%, 280px);
}

.chord-trainer-piano-both {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.chord-trainer-piano-both-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
}

.chord-trainer-piano-both-item {
  flex: 1 1 150px;
  min-width: 0;
}

.chord-trainer-answer-beside-diagram {
  margin: 0;
}

.chord-trainer-answer-slot {
  min-width: 0;
}

.chord-trainer-answer-slot--hidden {
  display: none;
}

@media (min-width: 700px) {
  .chord-trainer-diagram-answer-row {
    grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 0.9fr);
    align-items: start;
  }

  .chord-trainer-answer-slot--hidden {
    display: block;
    visibility: hidden;
    min-height: 1px;
  }
}

.scale-trainer-diagrams {
  display: grid;
  gap: 0.4rem;
  margin: 0.12rem 0 0.18rem;
  min-width: 0;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.scale-trainer-diagram-piano-col {
  min-width: 0;
}

.scale-progress-card {
  margin-top: 0.3rem;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-raised);
  padding: 0.48rem 0.56rem;
}

.scale-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.scale-progress-title {
  margin: 0;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: var(--app-text);
  font-weight: 700;
}

.scale-progress-toggle-row {
  display: inline-flex;
  gap: 0.16rem;
  background: var(--app-surface-sunken);
  border-radius: 999px;
  padding: 0.12rem;
}

.scale-progress-toggle {
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-text);
  border-radius: 999px;
  padding: 0.1rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
}

.scale-progress-toggle-active {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-active);
  color: var(--app-text-on-primary);
}

.scale-progress-chart {
  margin-top: 0.2rem;
}

.scale-progress-section .chord-progress-bars.chord-progress-columns {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0.2rem;
}

.scale-progress-section .chord-progress-column-label {
  font-size: 0.7rem;
}

.scale-progress-section .chord-progress-column-meta {
  font-size: 0.62rem;
}

@media (max-width: 760px) {
  .progress-panel-top-controls {
    justify-content: flex-start;
    min-width: 0;
  }

  .progress-panel-stats {
    min-width: 0;
    width: 100%;
  }

  .scale-progress-section .chord-progress-bars.chord-progress-columns {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.scale-trainer-diagram-piano-col--hand {
  min-width: 0;
}

.scale-trainer-diagrams--both {
  grid-template-columns: minmax(0, 1fr);
}

.scale-trainer-diagrams--both .piano-keyboard-scroll {
  overflow-x: hidden;
}

.scale-trainer-diagrams--both .piano-keyboard {
  width: 100%;
  min-width: 0;
  display: block;
}

.scale-trainer-diagrams--both .piano-note-diagram--large .piano-keyboard-inner {
  --piano-white-w: clamp(0.88rem, 1.6vw, 1.28rem);
  --piano-white-h: clamp(2.55rem, 4.1vw, 3.05rem);
  --piano-black-w: clamp(0.52rem, 0.95vw, 0.74rem);
  margin-inline: auto;
}

.scale-trainer-diagrams--both-two-octaves {
  gap: 0.3rem;
}

.scale-trainer-diagrams--both-two-octaves .piano-note-diagram {
  padding: 0.24rem 0.28rem;
}

.scale-trainer-diagrams--both-two-octaves .piano-note-diagram--compact .piano-keyboard-inner {
  --piano-white-w: 0.94rem;
  --piano-white-h: 2.48rem;
  --piano-black-w: 0.54rem;
}

.scale-trainer-diagrams--both-two-octaves .piano-key-label-text,
.scale-trainer-diagrams--both-two-octaves .piano-black-key-label {
  font-size: 0.54rem;
}

@media (min-width: 700px) {
  .scale-trainer-diagrams--both {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scale-trainer-diagrams--both-two-octaves .piano-keyboard-scroll {
    overflow-x: hidden;
  }
}

.scale-trainer-diagram-path-col {
  min-width: 0;
}

@media (min-width: 640px) {
  .scale-trainer-diagram-path-col .scale-path-diagram {
    overflow-x: auto;
  }

  .scale-trainer-diagram-path-col .scale-path-steps {
    flex-wrap: nowrap;
  }
}

.scale-path-diagram {
  padding: 0.28rem 0.38rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  min-width: 0;
}

.scale-path-diagram--empty {
  background: var(--app-surface-raised);
}

.scale-path-empty-msg {
  margin: 0;
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

.scale-path-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12rem 0.08rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scale-path-step {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  font-size: 0.78rem;
  line-height: 1.2;
}

.scale-path-step-label {
  display: inline-flex;
  min-width: 1.65rem;
  justify-content: center;
  padding: 0.14rem 0.28rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scale-path-step--done .scale-path-step-label {
  background: var(--trainer-ear-accent-soft);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.scale-path-step--current .scale-path-step-label {
  background: var(--app-info-surface);
  border-color: var(--child-immersive-accent-soft);
  color: var(--app-info-text);
  box-shadow: 0 0 0 1px var(--app-info-border) inset;
}

.scale-path-step--future .scale-path-step-label {
  background: var(--app-secondary);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.scale-path-arrow {
  color: var(--app-text-subtle);
  font-size: 0.72rem;
  padding: 0 0.04rem;
  user-select: none;
}

.scale-path-steps--revealed .scale-path-step-label {
  font-size: 0.8rem;
  padding: 0.16rem 0.32rem;
}

/* --- Piano: whites in a row, blacks overlaid on upper part of whites --- */
.piano-note-diagram {
  padding: 0.32rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.piano-note-diagram-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

.piano-keyboard-scroll {
  display: flex;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.piano-keyboard {
  display: inline-block;
  flex: 0 0 auto;
  min-width: min-content;
}

.piano-keyboard-inner {
  --piano-white-w: 1.38rem;
  --piano-white-h: 3.05rem;
  --piano-black-w: 0.78rem;
  --piano-black-body-pct: 0.62;
  --piano-white-count: 7;
  position: relative;
  width: calc(var(--piano-white-count) * var(--piano-white-w));
  max-width: 100%;
}

.piano-note-diagram--large .piano-keyboard-inner {
  --piano-white-w: 1.62rem;
  --piano-white-h: 3.4rem;
  --piano-black-w: 0.92rem;
}

.piano-note-diagram--compact .piano-keyboard-inner {
  --piano-white-w: 1.12rem;
  --piano-white-h: 2.72rem;
  --piano-black-w: 0.64rem;
}

.piano-black-label-layer {
  position: relative;
  width: 100%;
  height: 1rem;
  margin-bottom: 0.06rem;
  overflow: visible;
  pointer-events: none;
}

.piano-keys-block {
  position: relative;
  width: 100%;
  overflow: visible;
}

.piano-white-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.piano-black-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--piano-white-h);
  z-index: 2;
  pointer-events: none;
}

.piano-black-key-slot {
  position: absolute;
  left: calc(
    (var(--piano-after-white-index, 0) + 1) * var(--piano-white-w) - var(--piano-black-w) / 2
  );
  top: 0;
  width: var(--piano-black-w);
  height: var(--piano-white-h);
  overflow: visible;
}

.piano-black-key-label-wrap {
  position: absolute;
  left: calc(
    (var(--piano-after-white-index, 0) + 1) * var(--piano-white-w) - var(--piano-black-w) / 2 +
      var(--piano-black-w) / 2
  );
  top: 0;
  transform: translateX(-50%);
  max-width: min(5.5rem, calc(var(--piano-white-w) * 2.7));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.piano-black-key-label-wrap:empty {
  display: none;
}

.piano-black-key-surface {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--piano-white-h) * var(--piano-black-body-pct));
  width: 100%;
  border-radius: 3px 3px 5px 5px;
  border: 1px solid var(--app-text);
  background: linear-gradient(180deg, var(--app-text) 0%, var(--app-text) 100%);
  box-sizing: border-box;
  flex-shrink: 0;
}

.piano-white-key {
  width: var(--piano-white-w);
  flex: 0 0 var(--piano-white-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.piano-white-key-surface {
  height: var(--piano-white-h);
  border-radius: 3px 3px 5px 5px;
  border: 1px solid var(--app-text-subtle);
  border-right-width: 0.5px;
  background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-raised) 100%);
  box-sizing: border-box;
}

.piano-white-key:first-child .piano-white-key-surface {
  border-left-width: 1px;
}

.piano-white-key:last-child .piano-white-key-surface {
  border-right-width: 1px;
}

.piano-key-surface--expected {
  border-color: var(--app-success) !important;
  box-shadow: inset 0 0 0 2px var(--app-success);
  background: linear-gradient(180deg, var(--app-success-border) 0%, var(--app-success-border) 100%) !important;
}

.piano-black-key-surface.piano-key-surface--expected {
  background: linear-gradient(180deg, var(--app-success) 0%, var(--app-success) 100%) !important;
  border-color: var(--app-success-border) !important;
  box-shadow:
    inset 0 0 0 1px var(--app-success-surface),
    0 0 0 1px var(--app-success);
}

.piano-key-surface--played {
  /* Neutral "note played" indicator — keyboard area must stay readable across all profiles */
  box-shadow: inset 0 0 0 1px var(--app-info-border), 0 0 0 1px var(--app-border-strong);
}

.piano-white-key-surface.piano-key-surface--played {
  background: linear-gradient(180deg, var(--app-info-surface) 0%, var(--app-info-border) 100%) !important;
}

.piano-black-key-surface.piano-key-surface--played {
  background: linear-gradient(180deg, var(--app-primary-hover) 0%, var(--app-primary-active) 100%) !important;
  border-color: var(--app-primary-active) !important;
}

@keyframes piano-key-next-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.piano-key-surface--current {
  outline: 3px solid var(--app-warning);
  outline-offset: 0;
  position: relative;
  z-index: 2;
  animation: piano-key-next-pulse 1.2s ease-in-out infinite;
}

.piano-white-key-surface.piano-key-surface--current {
  background: linear-gradient(180deg, var(--app-warning-border) 0%, var(--app-warning-border) 100%) !important;
  border-color: var(--app-warning) !important;
}

.piano-black-key-surface.piano-key-surface--current {
  background: linear-gradient(180deg, var(--app-warning) 0%, var(--app-warning) 100%) !important;
  border-color: var(--app-warning-border) !important;
}

.piano-black-key-slot--current {
  z-index: 3;
}

.piano-key-surface--expected.piano-key-surface--played.piano-white-key-surface {
  /* Correct note = pure success signal; no profile tint on keyboard confirmation state */
  background: linear-gradient(180deg, var(--app-success-border) 0%, var(--app-success-border) 100%) !important;
  border-color: var(--app-success-text) !important;
}

.piano-white-label-row {
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}

.piano-white-label-cell {
  width: var(--piano-white-w);
  flex: 0 0 var(--piano-white-w);
  min-height: 1.15rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.piano-key-label-line {
  display: block;
  max-width: 100%;
}

.piano-key-label-text {
  display: block;
  font-size: clamp(0.58rem, 1.1vw, 0.72rem);
  line-height: 1.12;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
  max-width: min(4.5rem, calc(var(--piano-white-w) * 2.2));
}

.piano-note-diagram--large .piano-key-label-text {
  font-size: clamp(0.62rem, 1.15vw, 0.78rem);
  max-width: min(5rem, calc(var(--piano-white-w) * 2.4));
}

.piano-black-key-label {
  display: block;
  padding: 0.02rem 0.26rem;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: clamp(0.56rem, 1.02vw, 0.72rem);
  line-height: 1.08;
  font-weight: 700;
  white-space: nowrap;
}

/* Next-note label emphasis: bold blue text (white key) */
.piano-key-label-text--next {
  font-weight: 700;
  color: var(--app-primary-hover);
}

/* Next-note label emphasis: bold blue pill (black key) */
.piano-black-key-label--next {
  font-weight: 700;
  color: var(--app-primary-hover);
  /* Neutral label background — keyboard labels use info surface, not profile secondary */
  border-color: var(--app-info-border);
  background: var(--app-info-surface);
}

/* =====================================================================
   Stage 18 — Practice UI redesign
   Replaces all Stage 16/16b/17 trainer styling.
   Goal: flat compact practice card, large hero, real 2-col stage on iPad.
   ===================================================================== */

/* Local aliases left in place so existing selectors below continue to compile.
   These all point back to the canonical app tokens — do not introduce new
   hardcoded values here. */
:root {
  --surface: var(--app-surface);
  --surface-soft: var(--app-info-surface);
  --surface-mute: var(--app-surface-raised);
  --border-soft: var(--app-border);
  --border-strong: var(--app-border-strong);
  --text-main: var(--app-text);
  --text-muted: var(--app-text-muted);
  --blue: var(--app-primary);
  --blue-deep: var(--app-primary-hover);
  --blue-soft: var(--app-info-surface);
  --purple: var(--trainer-scale-accent);
  --peach: var(--app-warning-surface);
  --peach-deep: var(--app-warning-border);
  --mint: var(--app-success-surface);
  --sky: var(--app-info-surface);
  --warm-text: var(--app-warning-text);
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Phase 5J — .practice-card rules (Scale + Chord trainer shell + visuals)
   moved to src/components/PracticeCardShell.css. ScaleTrainer.jsx and
   ChordTrainer.jsx import that file directly so App.css no longer owns
   trainer-specific shell chrome. */

.trainer-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap;
}

.trainer-section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--app-info-border);
  border-radius: 999px;
  background: var(--app-surface);
  padding: 8px 16px;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--app-text-emphasis);
}

.trainer-section-toggle--active {
  background: var(--app-primary);
  border-color: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(1px);
}

.trainer-section-toggle--inactive:hover {
  background: var(--app-info-surface);
  border-color: var(--app-info-border);
}

.trainer-section-title {
  line-height: 1;
}

.trainer-midi-pill {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--app-info-surface);
  color: var(--app-text);
}

.trainer-midi-pill--ready {
  background: var(--app-success-surface);
  color: var(--app-success-text);
}

.trainer-midi-pill--warning {
  background: var(--app-info-surface);
  color: var(--app-primary);
}

.trainer-route-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--app-warning-border);
  background: var(--app-warning-surface);
  color: var(--app-warning-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .trainer-section-header {
    margin-bottom: 6px !important;
  }
}

@media (max-width: 640px) {
  .trainer-route-pill {
    white-space: normal;
  }
}

/* Phase 5J — .practice-card compact-notice / control-dock / option chips /
   practice-stage / hero-panel / keyboard-panel / trainer-button rules
   moved to src/components/PracticeCardShell.css. */

/* ---------- Reading settings toggle ---------- */
.reading-settings-card {
  padding: 0.55rem 0.85rem;
}

.reading-settings-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-main);
  user-select: none;
}

.reading-settings-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Parent Practice Monitor dashboard ─────────────────────────────────── */
.pdash {
  padding: 0.85rem 1rem;
}

.pdash-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pdash-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.pdash-online {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
}

.pdash-online--online {
  background: var(--app-success-surface);
  color: var(--app-success-text);
}

.pdash-online--offline {
  background: var(--app-warning-surface);
  color: var(--app-warning-text);
}

/* Single scrollable row — never wraps regardless of profile count */
.pdash-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 260px);
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.pdash-card {
  background: var(--surface-mute);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm, 8px);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  text-align: left;
}

.pdash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}

.pdash-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  text-align: left;
}

/* Sync status badges */
.pdash-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdash-badge--synced   { background: var(--app-success-surface); color: var(--app-success-text); }
.pdash-badge--syncing  { background: var(--app-info-surface); color: var(--app-primary); }
.pdash-badge--pending  { background: var(--app-info-surface); color: var(--app-primary); }
.pdash-badge--waiting  { background: var(--app-warning-surface); color: var(--app-warning-text); }
.pdash-badge--failed   { background: var(--app-danger-surface); color: var(--app-danger); }
.pdash-badge--idle     { background: var(--surface-mute); color: var(--text-muted, var(--app-text-muted)); }

/* Stats list */
.pdash-stats {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.pdash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.pdash-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--app-primary-hover);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  margin: 0;
}

.pdash-stat-value {
  font-size: 0.82rem;
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  text-align: left;
  margin: 0;
}

.pdash-stat-value--muted {
  color: var(--text-muted, var(--app-text-muted));
}

.pdash-stat--warning .pdash-stat-label,
.pdash-stat--warning .pdash-stat-value {
  color: var(--app-danger);
}

/* ── Weekly email toggle ────────────────────────────────────────────────── */

.pdash-email-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-mute);
  border-radius: 10px;
  border: 1px solid var(--app-border);
}

.pdash-email-toggle-label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.pdash-email-toggle-title {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text, var(--app-text));
}

.pdash-email-toggle-desc {
  display: block;
  font-size: 12px;
  color: var(--text-muted, var(--app-text-muted));
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toggle pill button */
.pdash-toggle-btn {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: var(--surface-stroke, var(--app-border-strong));
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.pdash-toggle-btn--on {
  background: var(--app-info);
}

.pdash-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pdash-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 0.2s;
  display: block;
}

.pdash-toggle-btn--on .pdash-toggle-thumb {
  transform: translateX(20px);
}

/* Status feedback */
.pdash-email-status {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.pdash-email-status--sending { background: var(--app-info-surface); color: var(--app-primary); }
.pdash-email-status--sent    { background: var(--app-success-surface); color: var(--app-success-text); }
.pdash-email-status--error   { background: var(--app-danger-surface); color: var(--app-danger); }

/* Phase 5J — .practice-card action-stack / trainer-answer-card / rhythm-strip
   / progress-panel / chord & scale option-chip overrides moved to
   src/components/PracticeCardShell.css. */

/* ── ChildAssignmentPanel ─────────────────────────────────────────────────── */

.child-assignment-panel {
  border-left: 3px solid var(--accent);
}

.child-assignment-panel__heading {
  margin-bottom: 0.5rem;
}

.child-assignment-panel__spec-title {
  font-weight: 600;
  color: var(--text-h);
  margin: 0.25rem 0;
}

.child-assignment-panel__spec-summary,
.child-assignment-panel__spec-goal {
  margin: 0.15rem 0;
  font-size: 0.9em;
}

.child-assignment-panel__active-label,
.child-assignment-panel__idle-label {
  margin: 0 0 0.25rem;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.child-assignment-panel__btn {
  margin-top: 0.75rem;
 padding: 0.5rem 1.1rem;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.child-assignment-panel__btn:hover {
  opacity: 0.85;
}

.child-assignment-panel__btn--start {
  background: var(--blue, var(--app-primary-hover));
  color: var(--app-text-on-primary);
}

.child-assignment-panel__btn--end {
  background: var(--border-soft, var(--app-border));
  color: var(--text, var(--app-text));
}

.child-assignment-panel__note {
  margin-top: 0.75rem;
  font-size: 0.78em;
  color: var(--text-muted, var(--app-text-muted));
}

/* ChildAssignmentLaunchPanel - child-facing assignment card */

.child-assignment-launch-panel {
  border-left: 4px solid var(--green, var(--app-success));
}

.child-assignment-launch-panel__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green, var(--app-success));
  margin-bottom: 0.4rem;
}

.child-assignment-launch-panel__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-h, var(--app-text));
  margin: 0 0 0.2rem;
}

.child-assignment-launch-panel__summary,
.child-assignment-launch-panel__goal {
  margin: 0.15rem 0;
  font-size: 0.88em;
  color: var(--text, var(--app-text));
}

.child-assignment-launch-panel__btn {
  margin-top: 0.9rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 10px;
  background: var(--green, var(--app-success));
  color: var(--app-text-on-primary);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s;
  touch-action: manipulation;
}

.child-assignment-launch-panel__btn:hover {
  opacity: 0.88;
}

.child-assignment-launch-panel__active-note {
  margin-top: 0.55rem;
  font-size: 0.78em;
  color: var(--text-muted, var(--app-text-muted));
}

.child-assignment-launch-panel__btn:active {
  transform: scale(0.96);
  opacity: 0.75;
}

.child-assignment-launch-panel__btn--launched {
  background: var(--text-muted, var(--app-text-muted));
  cursor: default;
}

.child-assignment-launch-panel__badge--passed {
  background: var(--app-success-surface);
  color: var(--app-success);
  border: 1px solid var(--app-success-border);
  font-size: 0.88rem;
  padding: 0.25rem 0.75rem;
}

/* Progress bar */
.child-assignment-launch-panel__progress {
  margin: 0.35rem 0 0;
}

.child-assignment-launch-panel__progress-bar {
  width: 100%;
  height: 8px;
  background: var(--app-border);
  border-radius: 999px;
  overflow: hidden;
}

.child-assignment-launch-panel__progress-fill {
  height: 100%;
  background: var(--profile-selected-border);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.child-assignment-launch-panel__progress-text {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

/* Passed state */
.child-assignment-launch-panel__passed-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--app-success);
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* ── Task 17: motivation loop additions ─────────────────────────────────── */

/* "Today's challenge" badge */
.child-assignment-launch-panel__badge {
  font-size: 0.78rem;
}

/* Why it matters */
.child-assignment-launch-panel__why {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  font-style: italic;
}

/* Progress fill moods */
.child-assignment-launch-panel__progress-fill--nearly {
  background: var(--app-success);
}
.child-assignment-launch-panel__progress-fill--streak {
  background: var(--trainer-scale-accent);
}
.child-assignment-launch-panel__progress-fill--improving {
  background: var(--app-primary);
}
.child-assignment-launch-panel__progress-fill--going,
.child-assignment-launch-panel__progress-fill--start {
  background: var(--profile-selected-border);
}

/* Encouragement phrase */
.child-assignment-launch-panel__encouragement {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}
.child-assignment-launch-panel__encouragement--nearly   { color: var(--app-success); }
.child-assignment-launch-panel__encouragement--streak   { color: var(--trainer-scale-accent); }
.child-assignment-launch-panel__encouragement--improving { color: var(--app-primary-hover); }
.child-assignment-launch-panel__encouragement--going,
.child-assignment-launch-panel__encouragement--start    { color: var(--app-text-muted); }

/* Stuck encouragement (gentle, shown below progress bar) */
.child-assignment-launch-panel__stuck-encouragement {
  font-size: 0.85rem;
  color: var(--app-warning);
  background: var(--app-warning-surface);
  border-left: 3px solid var(--app-warning);
  border-radius: 0 6px 6px 0;
  padding: 0.45rem 0.7rem;
  margin: 0.4rem 0 0;
}

/* Celebration block */
.child-assignment-launch-panel__celebration {
  margin-top: 0.75rem;
}
.child-assignment-launch-panel__celebration-headline {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--app-success);
  margin: 0 0 0.2rem;
}
.child-assignment-launch-panel__celebration-sub {
  font-size: 0.88rem;
  color: var(--app-success);
  margin: 0 0 0.75rem;
}
.child-assignment-launch-panel__btn--replay {
  background: var(--app-success);
  opacity: 0.85;
}
.child-assignment-launch-panel__btn--replay:hover {
  opacity: 1;
}

/* ── "What's next" banner (ChildHomeScreen) ─────────────────────────────── */
.chs__whats-next {
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chs__whats-next-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.chs__whats-next-body {
  min-width: 0;
}
.chs__whats-next-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-success);
  margin: 0 0 0.15rem;
}
.chs__whats-next-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-success-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* EGP: passed badge variant + progress line */
.egp__active-badge--passed {
  background: var(--app-success-surface);
  color: var(--app-success);
  border-color: var(--app-success-border);
}

.egp__progress-line {
  margin: 0.15rem 0;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  font-style: italic;
}

/* ── ExerciseGeneratorPanel ─────────────────────────────────────────────────── */

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

.egp__heading {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text);
}

/* ─ Form ─ */
.egp__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.egp__row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.egp__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.egp__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.egp__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.egp__select,
.egp__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-text);
  -webkit-appearance: none;
  appearance: none;
}

.egp__select:focus,
.egp__input:focus {
  outline: 2px solid var(--profile-selected-border);
  outline-offset: 1px;
  border-color: transparent;
}

.egp__warning {
  margin: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: var(--app-warning);
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  border-radius: 6px;
}

.egp__preview {
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  color: var(--app-text);
  background: var(--app-surface-raised);
  border-radius: 6px;
  border: 1px solid var(--app-border);
}

.egp__preview-label {
  font-weight: 600;
  color: var(--app-text-muted);
  margin-right: 0.2rem;
}

.egp__error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-danger);
}

.egp__reset-title-btn {
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  background: none;
  border: 1px solid var(--app-border-strong);
  border-radius: 4px;
  cursor: pointer;
}

.egp__reset-title-btn:hover {
  background: var(--app-surface-raised);
}

/* ─ Buttons ─ */
.egp__btn {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-sizing: border-box;
}

.egp__btn:active {
  transform: scale(0.97);
}

.egp__btn--assign {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  margin-top: 0.25rem;
}

.egp__btn--assign:hover:not(:disabled) {
  background: var(--app-primary-hover);
}

.egp__btn--assign:disabled {
  background: var(--app-text-subtle);
  cursor: not-allowed;
}

.egp__btn--end {
  background: var(--app-danger);
  color: var(--app-text-on-primary);
}

.egp__btn--end:hover {
  background: var(--app-danger);
}

/* ─ Active assignment view ─ */
.egp__active {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.egp__active-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--app-success);
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

.egp__active-child {
  margin: 0;
  font-size: 0.9rem;
  color: var(--app-text-muted);
}

.egp__spec-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
}

.egp__spec-summary,
.egp__spec-goal {
  margin: 0;
  font-size: 0.85rem;
  color: var(--app-text-muted);
}

.egp__spec-message {
  margin: 0;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  font-style: italic;
}

/* ─ Footer note ─ */
.egp__note {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--app-text-subtle);
  line-height: 1.4;
}

/* ── ChildAssignmentLaunchPanel — completion/progress additions ──────────── */

.child-assignment-launch-panel__badge--passed {
  background: var(--green, var(--app-success));
  color: var(--app-text-on-primary);
  font-weight: 700;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.8em;
  display: inline-block;
  margin-bottom: 0.6rem;
}

.child-assignment-launch-panel__progress {
  margin: 0.6rem 0;
}

.child-assignment-launch-panel__progress-bar {
  background: var(--border, var(--app-border));
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.child-assignment-launch-panel__progress-fill {
  height: 100%;
  background: var(--accent, var(--profile-selected-border));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.child-assignment-launch-panel__progress-text {
  font-size: 0.8em;
  color: var(--text-muted, var(--app-text-muted));
  margin-top: 0.3rem;
}

.child-assignment-launch-panel__passed-note {
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--app-success-surface);
  color: var(--app-success);
  border-radius: 8px;
  font-size: 0.88em;
}

/* ── ChildAssignmentsSummaryPanel (casp) ─────────────────────────────────── */

.casp__heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--app-text);
}

.casp__loading,
.casp__empty {
  font-size: 0.88rem;
  color: var(--app-text-muted);
  margin: 0;
}

.casp__child {
  margin-bottom: 1rem;
}

.casp__child:last-child {
  margin-bottom: 0;
}

.casp__child-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  margin: 0 0 0.4rem;
}

.casp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.casp__row {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-sizing: border-box;
}

.casp__row--passed {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  opacity: 0.85;
}

.casp__row--archived {
  opacity: 0.55;
}

.casp__row-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.casp__badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.67rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.casp__badge--active {
  color: var(--app-primary-hover);
  background: var(--profile-accent-soft);
  border: 1px solid var(--profile-accent-border);
}

.casp__badge--passed {
  color: var(--app-success);
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
}

.casp__badge--archived {
  color: var(--app-text-muted);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
}

.casp__title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--app-text);
  flex: 1;
  min-width: 0;
}

.casp__date {
  font-size: 0.74rem;
  color: var(--app-text-subtle);
  flex-shrink: 0;
}

.casp__summary,
.casp__goal,
.casp__acc {
  font-size: 0.79rem;
  color: var(--app-text-muted);
  margin: 0;
}

.casp__goal {
  font-style: italic;
  color: var(--app-text-muted);
}

@media (max-width: 600px) {
  .casp__row-header {
    flex-wrap: wrap;
  }
}

/* ── CASP actions & buttons ──────────────────────────────────────────────── */

.casp__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.casp__btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.casp__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.casp__btn--skip {
  background: var(--app-warning-surface);
  color: var(--app-warning);
  border-color: var(--app-warning-border);
}

.casp__btn--skip:hover:not(:disabled) {
  background: var(--app-warning-surface);
}

.casp__btn--archive {
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  border-color: var(--app-border-strong);
}

.casp__btn--archive:hover:not(:disabled) {
  background: var(--app-border);
}

.casp__btn--reset {
  background: var(--profile-accent-soft);
  color: var(--app-primary-hover);
  border-color: var(--profile-accent-border);
}

.casp__btn--reset:hover:not(:disabled) {
  background: var(--profile-accent-soft);
}

.casp__btn--confirm {
  background: var(--app-danger);
  color: var(--app-text-on-primary);
  border-color: var(--app-danger);
}

.casp__btn--confirm:hover:not(:disabled) {
  background: var(--app-danger);
}

.casp__btn--cancel {
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  border-color: var(--app-border-strong);
}

.casp__btn--cancel:hover:not(:disabled) {
  background: var(--app-border);
}

.casp__confirm-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.casp__confirm-label {
  font-size: 0.82rem;
  color: var(--app-danger);
  font-weight: 600;
}

.casp__error {
  color: var(--app-danger);
  font-size: 0.85rem;
  margin: 0.25rem 0;
  padding: 0.4rem 0.7rem;
  background: var(--app-danger-surface);
  border-radius: 6px;
  border: 1px solid var(--app-danger-border);
}

/* ── CASP stuck-child indicators ─────────────────────────────────────────── */

.casp__row--stuck {
  border-left: 3px solid var(--app-warning);
}

.casp__row--stuck.casp__row--stuck .casp__stuck-badge--severe {
  /* override border colour for severe */
  border-left-color: var(--app-danger);
}

.casp__stuck-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
}

.casp__stuck-badge--mild {
  background: var(--app-warning-surface);
  color: var(--app-warning);
}

.casp__stuck-badge--moderate {
  background: var(--app-warning-surface);
  color: var(--app-warning);
}

.casp__stuck-badge--severe {
  background: var(--app-danger-surface);
  color: var(--app-danger);
}

.casp__stuck-reasons {
  font-size: 0.78rem;
  color: var(--app-warning);
  margin: 0.1rem 0 0;
  padding: 0.25rem 0.5rem;
  background: var(--app-warning-surface);
  border-radius: 4px;
}

/* ── EGP trainer-type toggle ─────────────────────────────────────────────── */

.egp__toggle-group {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  width: fit-content;
}

.egp__toggle-btn {
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  cursor: pointer;
  min-height: 36px;
  min-width: 60px;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}

.egp__toggle-btn + .egp__toggle-btn {
  border-left: 1px solid var(--app-border-strong);
}

.egp__toggle-btn--active {
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
}

.egp__toggle-btn--active:hover {
  background: var(--app-primary-active);
}

/* ── EGP passed-banner (compact summary above form after assignment passes) ─ */

.egp__passed-banner {
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* ── EGP active-trainer label (shown in in-progress active view) ─────────── */

.egp__active-trainer {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--app-text-muted);
  font-style: italic;
}

/* ── EGP MusicXML file upload ────────────────────────────────────────────── */

.egp__file-input {
  width: 100%;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  cursor: pointer;
  padding: 0.3rem 0;
}

.egp__musicxml-ready {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--app-success);
  font-weight: 600;
}

/* ─── ChildAssignmentsSummaryPanel — action buttons ─────────────────────── */

.casp__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.casp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.85rem;
  min-height: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.casp__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Archive — muted / secondary style */
.casp__btn--archive {
  background: transparent;
  border-color: var(--app-text-muted);
  color: var(--app-text-muted);
}

.casp__btn--archive:hover:not(:disabled) {
  background: var(--app-secondary);
  border-color: var(--app-text);
  color: var(--app-text);
}

/* Reset — amber/warning style */
.casp__btn--reset {
  background: transparent;
  border-color: var(--app-warning);
  color: var(--app-warning);
}

.casp__btn--reset:hover:not(:disabled) {
  background: var(--app-warning-surface);
  border-color: var(--app-warning);
  color: var(--app-warning);
}

/* Confirm — red/danger style */
.casp__btn--confirm {
  background: var(--app-danger);
  border-color: var(--app-danger);
  color: var(--app-text-on-primary);
}

.casp__btn--confirm:hover:not(:disabled) {
  background: var(--app-danger);
  border-color: var(--app-danger);
}

/* Cancel — neutral ghost */
.casp__btn--cancel {
  background: transparent;
  border-color: var(--app-text-subtle);
  color: var(--app-text-muted);
}

.casp__btn--cancel:hover:not(:disabled) {
  background: var(--app-secondary);
  border-color: var(--app-text-muted);
  color: var(--app-text);
}

/* Confirmation group (label + two buttons) */
.casp__confirm-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.casp__confirm-label {
  font-size: 0.8rem;
  color: var(--app-warning);
  font-weight: 600;
}

/* Error message inside the panel */
.casp__error {
  margin: 0.4rem 0 0.6rem;
  padding: 0.4rem 0.7rem;
  background: var(--app-danger-surface);
  border: 1px solid var(--app-danger-border);
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--app-danger);
}

/* ── Offline UI ──────────────────────────────────────────────────────────── */

/* Banner shown above the child's cached assignment when offline */
.offline-banner {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  border-radius: 7px;
  font-size: 0.82rem;
  color: var(--app-warning);
  text-align: center;
}

/* Card shown when child is offline with no cached assignment or enrolments */
.offline-no-data-panel {
  padding: 1rem 1.2rem;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
}

.offline-no-data-panel__message {
  margin: 0;
  font-size: 0.92rem;
  color: var(--app-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ── ParentDashboardSummary ──────────────────────────────────────────────── */

.pds {
  margin-bottom: 0;
}

.pds__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 0 0 0.75rem;
}

.pds__stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.pds__stat {
  flex: 1 1 90px;
  min-width: 80px;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}

.pds__stat--highlight {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
}

.pds__stat-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.pds__stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--app-text);
  line-height: 1;
}

.pds__stat--highlight .pds__stat-value {
  color: var(--app-warning);
}

.pds__stat-label {
  font-size: 0.72rem;
  color: var(--app-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pds__stat-sublabel {
  font-size: 0.68rem;
  color: var(--app-text-subtle);
  font-style: italic;
}

/* Needs attention list */

.pds__attention {
  margin-bottom: 0.65rem;
}

.pds__attention-heading,
.pds__wins-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.35rem;
}

.pds__attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pds__attention-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: baseline;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.82rem;
  border-left: 3px solid var(--app-warning);
  background: var(--app-warning-surface);
}

.pds__attention-item--severe {
  border-left-color: var(--app-danger);
  background: var(--app-danger-surface);
}

.pds__attention-child {
  font-weight: 700;
  color: var(--app-text);
}

.pds__attention-title {
  color: var(--app-text-muted);
}

.pds__attention-reason {
  color: var(--app-warning);
  font-style: italic;
  font-size: 0.78rem;
}

.pds__attention-item--severe .pds__attention-reason {
  color: var(--app-danger);
}

/* Wins list */

.pds__wins-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pds__wins-item {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--app-success-surface);
  border-left: 3px solid var(--app-success-border);
  font-size: 0.82rem;
}

.pds__wins-child {
  font-weight: 700;
  color: var(--app-success);
}

.pds__wins-title {
  color: var(--app-success);
}

/* ── ChildCelebration (Task 26 / 27) ─────────────────────────────────────── */
/* Outer chrome (background, border, radius, padding) is now owned by the
   AppCelebrationBanner primitive (Phase 4L). The rules below style only the
   inner layout that ChildCelebration still renders as children. */

.child-celebration__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.child-celebration__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.child-celebration--compact .child-celebration__emoji {
  font-size: 1.4rem;
}

.child-celebration__text {
  flex: 1;
  min-width: 0;
}

.child-celebration__headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-success);
  margin: 0;
}

.child-celebration--compact .child-celebration__headline {
  font-size: 0.9rem;
}

.child-celebration__sub {
  font-size: 0.82rem;
  color: var(--app-success);
  margin: 0.15rem 0 0;
}

.child-celebration__badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.child-celebration__badge--passed  { background: var(--app-success-surface); color: var(--app-success); }
.child-celebration__badge--module  { background: var(--profile-accent-soft); color: var(--app-primary-active); }
.child-celebration__badge--course  { background: var(--app-warning-surface); color: var(--app-warning); }
.child-celebration__badge--review  { background: var(--trainer-chord-accent-soft); color: var(--trainer-chord-accent-hover); }

.child-celebration__action-btn {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem 1rem;
  background: var(--app-success);
  color: var(--app-text-on-primary);
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s;
}

.child-celebration__action-btn:hover {
  background: var(--app-success);
}

/* ── ParentActionCards (Task 44) ─────────────────────────────────────────── */
.pac { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.5rem; }
.pac__heading { font-size:0.8rem; font-weight:700; color:var(--app-text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 0.25rem; }
.pac__card { background:var(--app-surface); border:1px solid var(--app-border); border-radius:10px; padding:0.65rem 0.85rem; }
.pac__card-header { display:flex; gap:0.6rem; align-items:flex-start; margin-bottom:0.4rem; }
.pac__card-icon { font-size:1.3rem; flex-shrink:0; line-height:1; }
.pac__card-headline { font-size:0.88rem; font-weight:700; color:var(--app-text); margin:0; }
.pac__card-sub { font-size:0.78rem; color:var(--app-text-muted); margin:0.1rem 0 0; }
.pac__card-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }
.pac__action-btn { padding:0.35rem 0.7rem; font-size:0.78rem; font-weight:600; border-radius:6px; border:1px solid var(--app-border-strong); background:var(--app-surface-raised); color:var(--app-text-muted); cursor:pointer; min-height:36px; }
.pac__action-btn:hover:not(:disabled) { background:var(--app-surface-raised); }

/* ── ConfidenceCheckIn (Task 57) ─────────────────────────────────────────── */
.cci { background:var(--app-surface-raised); border-radius:10px; padding:0.75rem 1rem; margin:0.5rem 0; text-align:center; }
.cci__question { font-size:0.95rem; font-weight:700; color:var(--app-text); margin:0 0 0.6rem; }
.cci__options { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }
.cci__option-btn { display:flex; flex-direction:column; align-items:center; gap:0.2rem; padding:0.5rem 0.7rem; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface); cursor:pointer; min-width:56px; min-height:60px; transition:background 0.15s; }
.cci__option-btn:hover { background:var(--profile-accent-soft); border-color:var(--profile-accent-border); }
.cci__emoji { font-size:1.5rem; line-height:1; }
.cci__label { font-size:0.72rem; color:var(--app-text-muted); font-weight:600; }
.cci__skip-btn { margin-top:0.5rem; background:none; border:none; color:var(--app-text-subtle); font-size:0.8rem; cursor:pointer; }

/* ── PreviewAsChild (Task 49) ────────────────────────────────────────────── */
.preview-as-child { border:2px dashed var(--app-warning); border-radius:10px; padding:0.5rem; }
.preview-as-child__banner { display:flex; align-items:center; gap:0.5rem; background:var(--app-warning-surface); border-radius:6px; padding:0.35rem 0.6rem; margin-bottom:0.5rem; }
.preview-as-child__badge { font-size:0.68rem; font-weight:800; background:var(--app-warning); color:var(--app-text-on-primary); padding:0.15rem 0.45rem; border-radius:4px; letter-spacing:0.05em; }
.preview-as-child__name { font-size:0.78rem; color:var(--app-warning-text); }
.preview-as-child__warning { font-size:0.78rem; color:var(--app-danger); background:var(--app-danger-surface); border-radius:5px; padding:0.3rem 0.6rem; margin:0.2rem 0; }

/* ── DataHealthDashboard (Task 67) ───────────────────────────────────────── */
.dhd__header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.dhd__heading { font-size:1rem; font-weight:700; color:var(--app-text); margin:0; }
.dhd__toggle { color:var(--app-text-subtle); font-size:1rem; }
.dhd__list { list-style:none; margin:0.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
.dhd__row { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; padding:0.35rem 0.5rem; border-radius:6px; background:var(--app-surface-raised); }
.dhd__row-icon { font-size:1rem; flex-shrink:0; }
.dhd__row-text { flex:1; display:flex; flex-direction:column; }
.dhd__row-label { font-weight:600; color:var(--app-text); }
.dhd__row-detail { font-size:0.74rem; color:var(--app-text-muted); }
.dhd__row-status { font-size:0.72rem; font-weight:700; padding:0.15rem 0.4rem; border-radius:4px; white-space:nowrap; }
.dhd__row-status--ok   { background:var(--app-success-surface); color:var(--app-success); }
.dhd__row-status--warn { background:var(--app-warning-surface); color:var(--app-warning); }
.dhd__row-status--error{ background:var(--app-danger-surface); color:var(--app-danger); }
.dhd__fix-btn { font-size:0.75rem; padding:0.2rem 0.5rem; border:1px solid var(--app-border-strong); border-radius:5px; background:var(--app-surface); cursor:pointer; min-height:30px; }
.dhd__refresh-btn { margin-top:0.5rem; padding:0.4rem 0.8rem; border:1px solid var(--app-border-strong); border-radius:6px; background:var(--app-surface-raised); cursor:pointer; font-size:0.82rem; min-height:36px; }

/* ── ChildAssignmentLaunchPanel hear button (Task 61) ───────────────────── */

.child-assignment-launch-panel__hear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  margin: 0.35rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--profile-accent-border);
  border-radius: 8px;
  background: var(--profile-accent-soft);
  color: var(--app-primary-hover);
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s;
}

.child-assignment-launch-panel__hear-btn:hover:not(:disabled) {
  background: var(--profile-accent-soft);
}

.child-assignment-launch-panel__hear-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── WeeklyPracticePlan (Task 60) ────────────────────────────────────────── */

.wpp {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
}

.wpp__controls { margin-bottom: 1rem; }
.wpp__screen-title { font-size: 1.2rem; font-weight: 700; color: var(--app-text); margin: 0 0 0.5rem; }
.wpp__btn-row { display: flex; gap: 0.5rem; }
.wpp__btn { padding: 0.5rem 1rem; border-radius: 7px; border: 1px solid var(--app-border-strong); cursor: pointer; font-weight: 600; min-height: 44px; }
.wpp__btn--print { background: var(--app-primary-hover); color: var(--app-text-on-primary); border-color: var(--app-primary-hover); }
.wpp__btn--print:hover { background: var(--app-primary-active); }
.wpp__btn--close { background: var(--app-surface-raised); color: var(--app-text-muted); }

.wpp__page { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; padding: 1.5rem; }

.wpp__header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--app-text); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.wpp__title { font-size: 1.3rem; font-weight: 800; color: var(--app-text); margin: 0; }
.wpp__subtitle { font-size: 0.85rem; color: var(--app-text-muted); margin: 0.1rem 0 0; }
.wpp__est-time { font-size: 0.82rem; color: var(--app-text-muted); font-weight: 600; white-space: nowrap; }

.wpp__section { margin-bottom: 1.25rem; }
.wpp__section-heading { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-muted); border-bottom: 1px solid var(--app-border); padding-bottom: 0.2rem; margin: 0 0 0.5rem; }

.wpp__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.wpp__table th, .wpp__table td { border: 1px solid var(--app-border); padding: 0.35rem 0.5rem; text-align: center; }
.wpp__table th { background: var(--app-surface-raised); font-weight: 700; color: var(--app-text); }
.wpp__day { text-align: left !important; font-weight: 600; color: var(--app-text); }
.wpp__checkbox { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--app-text-subtle); border-radius: 4px; }
.wpp__checkbox--done { border-color: var(--app-success); }

.wpp__exercise-list { margin: 0; padding-left: 1.2rem; }
.wpp__exercise-item { margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--app-text); }
.wpp__exercise-detail { color: var(--app-text-muted); }
.wpp__exercise-goal { display: block; font-size: 0.78rem; color: var(--trainer-scale-accent); font-style: italic; }
.wpp__notes { font-size: 0.85rem; color: var(--app-text); background: var(--app-surface-raised); border-radius: 6px; padding: 0.5rem 0.75rem; white-space: pre-wrap; }
.wpp__passed { font-size: 0.82rem; color: var(--app-success); }
.wpp__footer { font-size: 0.72rem; color: var(--app-text-subtle); text-align: center; border-top: 1px solid var(--app-border); padding-top: 0.5rem; margin-top: 1rem; }

@media print {
  .wpp__screen-only { display: none !important; }
  .wpp { padding: 0; }
  .wpp__page { border: none; padding: 0; }
}

/* ── Curriculum Pack Preview Panel (parent-only) ─────────────────────────── */

.cpp-panel {
  border: 1.5px solid var(--trainer-scale-accent);
  border-radius: 10px;
  background: var(--trainer-scale-accent-soft);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.cpp-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cpp-panel__header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cpp-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--trainer-scale-accent-text);
  margin: 0;
}

.cpp-panel__toggle {
  font-size: 0.78rem;
  background: none;
  border: 1px solid var(--trainer-scale-accent);
  border-radius: 5px;
  color: var(--trainer-scale-accent);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

.cpp-panel__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.cpp-panel__pack-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text);
}

.cpp-panel__meta {
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

.cpp-panel__body {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cpp-panel__issue-list { margin: 0; }
.cpp-panel__issue-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
  color: var(--app-text-muted);
}
.cpp-panel__issue-list ul { margin: 0; padding-left: 1.2rem; }
.cpp-panel__issue { font-size: 0.78rem; margin-bottom: 0.15rem; }
.cpp-panel__issue--error   { color: var(--app-danger); }
.cpp-panel__issue--warning { color: var(--app-warning); }

.cpp-panel__ex-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  margin: 0 0 0.35rem;
}
.cpp-panel__ex-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--trainer-chord-accent-border);
}
.cpp-panel__ex-row:last-child { border-bottom: none; }
.cpp-panel__ex-id    { color: var(--trainer-chord-accent-text); font-family: monospace; min-width: 8rem; }
.cpp-panel__ex-title { flex: 1; color: var(--app-text); font-weight: 600; }
.cpp-panel__ex-kind  { color: var(--trainer-scale-accent); font-size: 0.7rem; }
.cpp-panel__ex-hand  { color: var(--app-text-muted); font-size: 0.7rem; }
.cpp-panel__ex-root  { color: var(--app-text-muted); font-size: 0.7rem; font-weight: 700; min-width: 2rem; text-align: right; }

.cpp-panel__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Curriculum Exercise Runner (Phase 17B) ────────────────────────────────── */
.curriculum-runner { border: 2px solid var(--app-primary-hover); border-radius: 12px; padding: 16px; margin-top: 16px; background: var(--app-surface); }
.curriculum-runner-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.curriculum-runner-title { font-size: 1rem; font-weight: 700; color: var(--app-primary-active); }
.curriculum-runner-exit { background: var(--app-border); border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; }
.curriculum-runner-stats { font-size: 0.82rem; color: var(--app-text); margin-bottom: 10px; }
.curriculum-runner-complete { background: var(--app-success-surface); color: var(--app-success); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.curriculum-runner-exit-btn { background: var(--app-success); color: var(--app-text-on-primary); border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; }
.cpp-preview-btn { background: var(--profile-accent-soft); color: var(--app-primary-hover); border: none; border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; margin-left: 8px; }
/* Locked exercise notice in curriculum mode */
.curriculum-locked-notice { font-size: 0.78rem; color: var(--app-text-muted); background: var(--app-secondary); border-radius: 6px; padding: 4px 10px; margin-bottom: 8px; }

/* ── Child Course Home (Phase 17C) ─────────────────────────────────────────── */
/* Course home panel uses the preset's lightest bg tint (tailwind-50) for personality
   without flooding. Profile accent still visible on the border and action elements. */
.child-course-home { background: var(--profile-bg, var(--app-surface)); border: 2px solid var(--profile-accent-border); border-radius: 14px; padding: 20px; margin: 16px 0; }
.child-course-loading { color: var(--app-text-muted); font-style: italic; padding: 16px; background: var(--app-surface-raised); border-radius: 10px; margin: 16px 0; }
.cch-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cch-badge { background: var(--app-primary-hover); color: var(--app-text-on-primary); border-radius: 20px; padding: 3px 12px; font-size: 0.82rem; font-weight: 600; }
.cch-course-title { font-size: 1rem; font-weight: 700; color: var(--app-text-emphasis); }
.cch-module-row, .cch-exercise-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cch-module-label, .cch-exercise-label { font-size: 0.78rem; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 68px; }
.cch-module-title, .cch-exercise-title { font-size: 0.9rem; color: var(--app-text-emphasis); }
.cch-continue-btn { background: var(--app-primary-hover); color: var(--app-text-on-primary); border: none; border-radius: 10px; padding: 12px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 14px; display: block; width: 100%; min-height: 48px; }
.cch-continue-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Enrolment section inside CurriculumPackPreviewPanel */
.cpp-section-label { font-size: 0.78rem; font-weight: 700; color: var(--app-text); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.cpp-enrol-row { margin-top: 20px; border-top: 1px solid var(--app-border); padding-top: 16px; }
.cpp-enrol-note { font-size: 0.82rem; color: var(--app-text-muted); margin-bottom: 10px; }
.cpp-enrol-btn { background: var(--trainer-ear-accent); color: var(--app-text-on-primary); border: none; border-radius: 8px; padding: 10px 20px; font-size: 0.9rem; cursor: pointer; font-weight: 600; }
.cpp-enrol-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cpp-enrol-result { margin-top: 10px; padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; }
.cpp-result--success { background: var(--app-success-surface); color: var(--app-success); }
.cpp-result--fail { background: var(--app-danger-surface); color: var(--app-danger); }

/* ── Phase 17D — completion persistence ──────────────────────────────────── */
.curriculum-runner-saving { font-size: 0.82rem; color: var(--app-primary-hover); margin-top: 6px; animation: pulse 1s ease-in-out infinite; }
.curriculum-runner-save-error { font-size: 0.82rem; color: var(--app-danger); margin-top: 6px; }
.curriculum-runner-saved-ok { font-size: 0.82rem; color: var(--app-success); margin-top: 6px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Course complete banner */
.cch-course-complete { background: linear-gradient(135deg, var(--app-success-surface), var(--app-success-border)); border: 2px solid var(--app-success-border); border-radius: 14px; padding: 24px; text-align: center; }
.cch-course-complete-emoji { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.cch-course-complete-title { font-size: 1.2rem; font-weight: 800; color: var(--app-success); }
/* Fetch error in ChildCourseHome */
.cch-fetch-error { font-size: 0.82rem; color: var(--app-danger); background: var(--app-danger-surface); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }

/* ── Phase 17F: Pack selector in preview panel ───────────────────────────── */
.cpp-pack-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cpp-pack-selector-label { font-size: 0.78rem; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cpp-pack-select-btn { background: var(--app-border); color: var(--app-text); border: none; border-radius: 6px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; }
.cpp-pack-select-btn--active { background: var(--app-primary-hover); color: var(--app-text-on-primary); }

/* ── Phase 18A: ChildCourseHome progress display ─────────────────────────── */
.cch-position-meta { font-size: 0.75rem; color: var(--app-text-subtle); margin-left: 4px; }
.cch-progress-row { margin: 10px 0 4px; }
.cch-progress-bar-wrap { height: 8px; background: var(--app-border); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.cch-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--app-primary-hover), var(--profile-selected-border)); border-radius: 4px; transition: width 0.4s ease; }
.cch-progress-meta { font-size: 0.78rem; color: var(--app-text-muted); }

/* ── Phase 18A: ChildCourseHome paused state ─────────────────────────────── */
.cch-paused { background: var(--app-secondary); border: 2px solid var(--app-border-strong); border-radius: 14px; padding: 20px; text-align: center; }
.cch-paused-icon { font-size: 1.8rem; color: var(--app-text-muted); margin-bottom: 6px; font-weight: 700; letter-spacing: 4px; }
.cch-paused-title { font-size: 1.1rem; font-weight: 700; color: var(--app-text); margin-bottom: 6px; }
.cch-paused-message { font-size: 0.9rem; color: var(--app-text-muted); margin-bottom: 10px; }
.cch-course-complete-meta { font-size: 0.85rem; color: var(--app-success); margin-top: 6px; }

/* ── Phase 18A: ParentCourseProgressPanel ────────────────────────────────── */
.cpp-progress-section { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--app-border); }
.cpp-section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-muted); margin-bottom: 8px; display: block; }
.pcpp-panel { background: var(--app-surface-raised); border: 1px solid var(--app-border); border-radius: 10px; padding: 14px 16px; font-size: 0.88rem; }
.pcpp-loading, .pcpp-empty { color: var(--app-text-subtle); font-size: 0.85rem; padding: 8px 0; }
.pcpp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pcpp-name { font-weight: 700; color: var(--app-text); font-size: 1rem; }
.pcpp-status { font-size: 0.75rem; font-weight: 600; border-radius: 12px; padding: 2px 10px; }
.pcpp-status--active { background: var(--app-success-surface); color: var(--app-success); }
.pcpp-status--paused { background: var(--app-warning-surface); color: var(--app-warning-text); }
.pcpp-status--completed { background: var(--child-immersive-text-muted); color: var(--app-info-text); }
.pcpp-status--other { background: var(--app-secondary); color: var(--app-text-muted); }
.pcpp-progress-bar-wrap { height: 8px; background: var(--app-border); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.pcpp-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--trainer-ear-accent), var(--app-success-border)); border-radius: 4px; transition: width 0.4s ease; }
.pcpp-progress-meta { font-size: 0.78rem; color: var(--app-text-muted); margin-bottom: 10px; }
.pcpp-position-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pcpp-position-item { display: flex; gap: 8px; align-items: baseline; }
.pcpp-pos-label { font-size: 0.72rem; font-weight: 700; color: var(--app-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; min-width: 80px; }
.pcpp-pos-value { font-size: 0.85rem; color: var(--app-text); }
.pcpp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcpp-btn { border: none; border-radius: 7px; padding: 7px 16px; font-size: 0.83rem; font-weight: 600; cursor: pointer; }
.pcpp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pcpp-btn--pause { background: var(--app-warning-surface); color: var(--app-warning); border: 1px solid var(--app-warning-border); }
.pcpp-btn--resume { background: var(--app-success-surface); color: var(--app-success); border: 1px solid var(--app-success-border); }
.pcpp-action-msg { font-size: 0.8rem; color: var(--app-text); }

/* -- Phase 18B: ParentCourseProgressPanel reset accordion ------------------- */
.pcpp-reset-section { margin-top: 14px; border-top: 1px solid var(--app-border); padding-top: 10px; }
.pcpp-reset-toggle { background: none; border: none; color: var(--app-text-muted); font-size: 0.78rem; cursor: pointer; padding: 0; text-decoration: underline; }
.pcpp-reset-toggle:hover { color: var(--app-text); }
.pcpp-reset-body { margin-top: 10px; background: var(--app-warning-surface); border: 1px solid var(--app-warning-border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pcpp-reset-warning { font-size: 0.82rem; color: var(--app-warning); margin: 0; line-height: 1.5; }
.pcpp-reset-check-label { font-size: 0.82rem; color: var(--app-text); display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.5; }
.pcpp-reset-confirm-row { display: flex; flex-direction: column; gap: 4px; }
.pcpp-reset-type-label { font-size: 0.78rem; color: var(--app-text); }
.pcpp-reset-type-input { border: 1px solid var(--app-border-strong); border-radius: 6px; padding: 6px 10px; font-size: 0.88rem; width: 120px; font-family: monospace; letter-spacing: 0.1em; }
.pcpp-btn--reset { background: var(--app-danger-surface); color: var(--app-danger); border: 1px solid var(--app-danger-border); }
.pcpp-btn--reset:not(:disabled):hover { background: var(--app-danger-border); }
.pcpp-btn--reset:disabled { opacity: 0.4; cursor: not-allowed; }
.pcpp-reset-msg { font-size: 0.82rem; margin: 0; padding: 6px 10px; border-radius: 6px; }
.pcpp-reset-msg--ok { background: var(--app-success-surface); color: var(--app-success); }
.pcpp-reset-msg--error { background: var(--app-danger-surface); color: var(--app-danger); }
.pcpp-reset-msg--error { background: var(--app-danger-surface); color: var(--app-danger); }

/* ── Phase 18C: ParentCourseProgressPanel — lifecycle additions ───────────── */
.pcpp-panel--no-enrolment { background: var(--trainer-notation-accent-soft); border: 1px solid var(--trainer-notation-accent-border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 0.88rem; }
.pcpp-no-enrolment-text { color: var(--trainer-notation-accent-text); margin: 0; font-weight: 500; }
.pcpp-btn--assign { background: var(--trainer-notation-accent); color: var(--app-text-on-primary); border: none; }
.pcpp-btn--assign:hover:not(:disabled) { background: var(--trainer-notation-accent-hover); }
.pcpp-action-msg--ok    { color: var(--app-success); }
.pcpp-action-msg--error { color: var(--app-danger); }
.pcpp-destructive-section { margin-top: 14px; border-top: 1px solid var(--app-border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pcpp-accordion { border-radius: 8px; overflow: hidden; border: 1px solid var(--app-border); }
.pcpp-accordion--reset   { border-color: var(--app-warning-border); }
.pcpp-accordion--unassign { border-color: var(--app-danger-border); }
.pcpp-accordion-toggle { width: 100%; text-align: left; background: none; border: none; padding: 9px 14px; font-size: 0.78rem; color: var(--app-text-muted); cursor: pointer; text-decoration: underline; }
.pcpp-accordion--reset   .pcpp-accordion-toggle { color: var(--app-warning); background: var(--app-warning-surface); }
.pcpp-accordion--unassign .pcpp-accordion-toggle { color: var(--app-danger); background: var(--app-danger-surface); }
.pcpp-accordion-toggle:hover { opacity: 0.8; }
.pcpp-accordion-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pcpp-accordion--reset   .pcpp-accordion-body { background: var(--app-warning-surface); }
.pcpp-accordion--unassign .pcpp-accordion-body { background: var(--app-danger-surface); }
.pcpp-accordion-warning { font-size: 0.82rem; color: var(--app-text); margin: 0; line-height: 1.55; }
.pcpp-accordion--reset   .pcpp-accordion-warning { color: var(--app-warning); }
.pcpp-accordion--unassign .pcpp-accordion-warning { color: var(--app-danger); }
.pcpp-check-label { font-size: 0.82rem; color: var(--app-text); display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.5; }
.pcpp-confirm-row { display: flex; flex-direction: column; gap: 4px; }
.pcpp-confirm-type-label { font-size: 0.78rem; color: var(--app-text); }
.pcpp-confirm-type-input { border: 1px solid var(--app-border-strong); border-radius: 6px; padding: 6px 10px; font-size: 0.88rem; width: 140px; font-family: monospace; letter-spacing: 0.1em; background: var(--app-surface); color: var(--app-text); }
.pcpp-accordion-msg { font-size: 0.82rem; margin: 0; padding: 6px 10px; border-radius: 6px; }
.pcpp-accordion-msg--ok    { background: var(--app-success-surface); color: var(--app-success); }
.pcpp-accordion-msg--error { background: var(--app-danger-surface); color: var(--app-danger); }
.pcpp-btn--unassign { background: var(--app-danger-surface); color: var(--app-danger); border: 1px solid var(--app-danger-border); }
.pcpp-btn--unassign:not(:disabled):hover { background: var(--app-danger-border); }
.pcpp-btn--unassign:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── CurriculumPackPreviewPanel — Preview Only badge ─────────────────────── */
.cpp-preview-only-badge { display: inline-block; margin-left: 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--app-warning-surface); color: var(--app-warning); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }

/* ── CourseExerciseRunner (cer-*) ────────────────────────────────────────── */
.course-exercise-runner {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--child-immersive-bg);          /* deep indigo — matches child theme dark */
  color: var(--app-surface-raised);
  padding: 0;
  box-sizing: border-box;
}

/* Header */
.cer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--app-info-text);
  border-bottom: 2px solid var(--app-info-hover);
  gap: 12px;
}
.cer-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--child-immersive-text-muted);
  flex: 1;
  letter-spacing: 0.01em;
}
.cer-exit-btn {
  background: var(--app-info);
  color: var(--app-text-on-primary);
  border: 2px solid var(--child-immersive-accent-soft);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.cer-exit-btn:hover { background: var(--app-info-hover); }

/* Preview banner */
.cer-preview-banner {
  background: var(--app-warning-surface);
  color: var(--app-warning-text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--app-warning-border);
}

/* Progress bar */
.cer-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 0;
}
.cer-progress-bar-wrap {
  flex: 1;
  height: 12px;
  background: var(--app-info-text);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--app-info-hover);
}
.cer-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--child-immersive-accent), var(--child-immersive-text-muted));
  border-radius: 6px;
  transition: width 0.35s ease;
}
.cer-progress-text {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--child-immersive-text-muted);
  min-width: 50px;
  text-align: right;
  letter-spacing: 0.03em;
}

/* Feedback panel (cfp-*) */
.cfp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px 12px;
  text-align: center;
  min-height: 80px;
}
.cfp-hint {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--app-info-border);
  line-height: 1.5;
}
.cfp-hint strong {
  color: var(--app-text-on-primary);
  font-size: 1.15rem;
  background: var(--app-info);
  padding: 2px 10px;
  border-radius: 6px;
  display: inline-block;
}
.cfp-message {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
}
.cfp-correct .cfp-message { color: var(--app-success-border); }
.cfp-wrong   .cfp-message { color: var(--app-danger-border); }
.cfp-next-hint {
  font-size: 0.9rem;
  color: var(--child-immersive-text-muted);
  font-weight: 600;
}
.cfp-next-hint strong { color: var(--app-text-on-primary); }

/* Keyboard view container */
.course-keyboard-view,
.ckv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px 24px;
  gap: 8px;
}

/* Completion banner */
.cer-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
}
.cer-complete-message {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--app-success-border);
  letter-spacing: 0.01em;
}
.cer-saving   { font-size: 0.9rem; color: var(--child-immersive-text-muted); }
.cer-save-error { font-size: 0.9rem; color: var(--app-danger-border); font-weight: 600; }
.cer-saved-ok { font-size: 0.9rem; color: var(--app-success-border); font-weight: 600; }
.cer-continue-btn {
  background: var(--child-immersive-accent);
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 10px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 52px;
  letter-spacing: 0.02em;
}
.cer-continue-btn:hover { background: var(--app-info); }

/* Unsupported exercise type */
.cer-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}
.cer-unsupported-message {
  font-size: 1.1rem;
  color: var(--app-warning-border);
  font-weight: 600;
  max-width: 400px;
  line-height: 1.5;
}
.cer-dev-detail {
  font-size: 0.78rem;
  color: var(--app-text-subtle);
  font-family: monospace;
  background: var(--app-text);
  padding: 8px 14px;
  border-radius: 6px;
  max-width: 480px;
  word-break: break-all;
}

/* ── CourseKeyboardView — stable wide keyboard (Phase 18E) ───────────────── */
/* Override the compact default so the full G2–F5 baseline range is visible.  */
/* Keys are sized to be readable by children on iPad landscape.                */

.ckv-wrap {
  width: 100%;
  padding: 16px 12px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Piano card — dark-theme-aware, light interior so keys read clearly */
.ckv-wrap .piano-note-diagram {
  background: var(--app-surface-raised);
  border: 2px solid var(--app-info-hover);
  border-radius: 10px;
  padding: 10px 14px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Key sizing: large enough for children, scales with viewport */
.ckv-wrap .piano-keyboard-inner {
  --piano-white-w: clamp(1.4rem, 3.2vw, 2rem);
  --piano-white-h: clamp(3.8rem, 8vh, 5.2rem);
  --piano-black-w: clamp(0.85rem, 1.9vw, 1.2rem);
}

/* Keyboard scroll: left-align so tapping/scrolling starts at the low end */
.ckv-wrap .piano-keyboard-scroll {
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* Scroll indicator so the child knows they can scroll */
  scroll-behavior: smooth;
}

/* Highlighted (expected) key: strong green so it stands out against many keys */
.ckv-wrap .piano-key-surface--expected {
  background: var(--app-success-border) !important;
}

.ckv-wrap .piano-key-surface--expected.piano-white-key-surface {
  background: var(--app-success-border) !important;
}

.ckv-wrap .piano-key-surface--expected.piano-black-key-surface {
  background: var(--app-success) !important;
}

/* Label under/on expected key */
.ckv-wrap .piano-key-label-text {
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 700;
  color: var(--app-success);
}

/* ============================================================
   Phase 18C: Joelle Pack Cleanup — Pack selector type badges
   and multi-enrolment course list
   ============================================================ */

/* Pack type badges in CurriculumPackPreviewPanel selector */
.cpp-pack-type-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  margin-right: 5px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cpp-pack-type-badge--full { background: var(--app-primary-hover); color: var(--app-text-on-primary); }
.cpp-pack-type-badge--sample { background: var(--app-warning); color: var(--app-text-on-primary); }

/* Sample pack select button — amber tint */
.cpp-pack-select-btn--sample { border-color: var(--app-warning-border) !important; }
.cpp-pack-select-btn--sample.cpp-pack-select-btn--active { background: var(--app-warning-surface) !important; color: var(--app-warning) !important; }

/* Sample pack warning in pack summary */
.cpp-pack-sample-warning {
  font-size: 0.75rem;
  color: var(--app-warning);
  background: var(--app-warning-surface);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-weight: 600;
}

/* Show/hide test packs toggle */
.cpp-test-packs-toggle {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-text-muted);
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  margin-left: auto;
}
.cpp-test-packs-toggle:hover { background: var(--app-border); }
.cpp-test-packs-toggle--active { color: var(--app-warning); background: var(--app-warning-surface); border-color: var(--app-warning-border); }

/* ---- Multi-enrolment course list (ChildCourseHome) ---- */
.cch-multi-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.cch-list-item {
  background: var(--app-surface);
  border: 1.5px solid var(--profile-accent-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.cch-list-item--paused {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
}

.cch-list-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cch-list-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  flex: 1;
}
.cch-list-paused-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--app-text-muted);
  color: var(--app-text-on-primary);
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
}
.cch-list-complete-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--app-success);
  color: var(--app-text-on-primary);
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
}

.cch-list-module {
  font-size: 0.82rem;
  color: var(--app-text);
  margin-bottom: 6px;
}
.cch-list-ex-pos {
  color: var(--app-text-muted);
}

.cch-list-progress-row {
  margin-bottom: 6px;
}
.cch-list-progress-bar-wrap {
  height: 6px;
  background: var(--app-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.cch-list-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--app-primary-hover), var(--profile-selected-border));
  border-radius: 3px;
  transition: width 0.4s ease;
}
.cch-list-progress-meta { font-size: 0.75rem; color: var(--app-text-muted); }

.cch-list-continue-btn {
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  min-height: 40px;
  cursor: pointer;
  margin-top: 4px;
  touch-action: manipulation;
}
.cch-list-continue-btn:hover { background: var(--app-primary-active); }

.cch-list-paused-msg, .cch-list-complete-msg {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  margin: 4px 0 0;
  font-style: italic;
}
.cch-list-complete-msg { color: var(--app-success); }

/* ── Profile Style Dimensions ────────────────────────────────────────────────
   Applied via data-* attributes set on <main class="app"> in App.jsx.
   Each attribute reflects the saved value from activeProfileStyle.
   All colours use existing profile / app tokens.
   These rules never affect .pcc (PCC uses an early return).

   ── Curated profile theme vocabulary ─────────────────────────────────────
   Use these tokens INTENTIONALLY, not everywhere:

   --profile-accent           STRONG accent — active nav, primary buttons,
                               selected tabs, progress fills, avatar bg.
                               (= child's chosen accent colour)

   --profile-accent-soft      SOFT selected state — small chips, toggles,
                               mode badges, reward/assignment mini-badges.
                               NEVER use as background for panels or large areas.
                               (= secondary colour, medium saturation)

   --profile-bg               LARGE AREA TINT — course home panel backgrounds,
                               preview panel bg, welcome panel gradient stop.
                               Already the lightest tailwind-50-level tint;
                               safe to apply directly on surfaces.
                               (= preset.bg — very pale rose, blue, green, etc.)

   --profile-selected-bg /
   --profile-selected-border  Selected state bg/border for chips and toggles.
                               Aliases of secondary / accent.

   --profile-reward-highlight  Reward card and celebration accent.

   --app-info-surface / -border  NEUTRAL TRAINER ELEMENTS — played piano keys,
                               metronome pills, message cards. Use these instead
                               of --profile-accent-soft in trainer workspaces.

   ── Design layering ───────────────────────────────────────────────────────
     Profile ACCENT surfaces  — active nav, primary buttons, selected chips,
                                 selected tabs, progress controls, profile hero.
                                 Driven by --app-primary / --btn-primary-bg /
                                 --blue tokens set in resolveProfileCssVars.
     Subtle BACKGROUND tints  — .app outer gutter only. colour-mix() keeps
                                 tints at ≤20% saturation so they read as
                                 "atmosphere", not as colour flooding.
     Neutral LEARNING surfaces — .app-trainer-screen has an explicit
                                 background: var(--app-bg) in trainer.css.
                                 Piano keyboards, exercise answer panels, chord
                                 message cards and metronome pills use
                                 var(--app-info-surface) so they stay readable
                                 across all profiles.
     Intentionally GLOBAL surfaces — .app-warning/danger/success/info-*,
                                 admin PCC tokens, reward-surface gold, and
                                 trainer-identity accent overrides remain
                                 unchanged; they are semantic signals.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Background style ─────────────────────────────────────────────────────
   --profile-bg is the tailwind-50-level preset background (very light tint).
   It is already very light; colour-mix() is used here to blend it
   with the app background to keep tints subtle. .app-trainer-screen has its
   own background so the tint only shows in the page gutter between components,
   not on trainer content panels. */
.app[data-bg-style="soft"]    {
  background: color-mix(in srgb, var(--profile-bg) 55%, var(--app-bg));
}
.app[data-bg-style="vivid"]   {
  /* slightly stronger tint using preset bg, still well under 100% saturation */
  background: color-mix(in srgb, var(--profile-bg) 85%, var(--app-bg));
}
.app[data-bg-style="gradient"] {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--profile-bg) 75%, var(--app-bg)) 0%,
    var(--app-bg) 80%
  );
}
/* allow-hardcoded-colour: profile-clean-white is an explicit user choice */
.app[data-bg-style="clean"]   { background: #ffffff; }
.app[data-bg-style="neutral"] { background: var(--app-bg); }

/* ── Selected option chips (profile accent surface) ─────────────────────────
   PracticeCardShell.css uses var(--blue-soft) for the selected chip background.
   --blue-soft is intentionally NOT overridden in resolveProfileCssVars (so trainer
   secondary buttons and beat displays stay neutral). This rule targets the chip
   specifically with a higher-specificity selector and uses --profile-accent-soft
   directly so selected hand/mode chips reflect the profile secondary colour. */
.app .practice-card .option-chip-group > label:has(input:checked) {
  background: var(--profile-accent-soft, var(--app-info-surface)) !important;
}

/* ── Layout density ──────────────────────────────────────────────────────── */
/* Top-level app chrome */
.app[data-density="compact"]  { gap: 0.45rem; }
.app[data-density="spacious"] { gap: 1rem; }

.app[data-density="compact"]  .app-top-row,
.app[data-density="compact"]  .app-chrome-row { gap: 6px; }

.app[data-density="spacious"] .app-top-row,
.app[data-density="spacious"] .app-chrome-row { gap: 1rem; }

/* Trainer panels — compact tightens; spacious opens up breathing room. */
.app[data-density="compact"] .app-trainer-screen  { gap: 12px; }
.app[data-density="compact"] .app-trainer-control-panel { gap: 8px;  padding: 12px; }
.app[data-density="compact"] .app-trainer-workspace     { gap: 8px;  padding: 14px; }

.app[data-density="spacious"] .app-trainer-screen  { gap: 28px; }
.app[data-density="spacious"] .app-trainer-control-panel { gap: 16px; padding: 20px; }
.app[data-density="spacious"] .app-trainer-workspace     { gap: 18px; padding: 26px; }

/* ── Animation level ─────────────────────────────────────────────────────── */
/* 'reduced': halve all transition / animation durations */
.app[data-anim="reduced"] *,
.app[data-anim="reduced"] *::before,
.app[data-anim="reduced"] *::after {
  transition-duration: 60ms !important;
  animation-duration:  60ms !important;
}
/* 'none': remove all transitions and animations (respects reducedMotion flag) */
.app[data-anim="none"] *,
.app[data-anim="none"] *::before,
.app[data-anim="none"] *::after {
  transition: none !important;
  animation:  none !important;
}

/* ── Celebration style ───────────────────────────────────────────────────── */
/* 'none': suppress all AppCelebrationBanner instances for this profile */
.app[data-celebration="none"] .app-celebration-banner {
  display: none !important;
}
/* 'gentle': soften the banner — lower opacity, no shadow */
.app[data-celebration="gentle"] .app-celebration-banner {
  opacity: 0.82;
  box-shadow: none;
}
/* 'burst': emphasise with a stronger ring — uses existing accent tokens */
.app[data-celebration="burst"] .app-celebration-banner {
  box-shadow: 0 0 0 3px var(--profile-accent-border, var(--app-border-strong)),
              var(--app-shadow-card);
}

/* ── Reward style visual treatments ─────────────────────────────────────── */
/* Tints the earned reward-card icon using a style-appropriate signal colour.
   'stars' uses the default --profile-reward-highlight (profile secondary).
   'trophies', 'gems', 'badges' use fixed semantic tones so children can always
   recognise the reward type regardless of their profile's accent colour.       */
/* allow-hardcoded-colour: trophy-gold and gem-violet are fixed reward-type signals */
.app[data-reward-style="trophies"] .app-reward-card--earned {
  --reward-card-icon-fg: #d97706;
  --profile-reward-highlight: #fcd34d;
}
.app[data-reward-style="gems"] .app-reward-card--earned {
  --reward-card-icon-fg: #7c3aed; /* allow-hardcoded-colour: gem-violet is a fixed reward-type signal */
  --profile-reward-highlight: #c4b5fd; /* allow-hardcoded-colour: gem-violet-soft is a fixed reward-type signal */
}
.app[data-reward-style="badges"] .app-reward-card--earned {
  --reward-card-icon-fg: var(--app-success-text);
  --profile-reward-highlight: var(--app-success-surface);
}
/* ── Circle of Fifths collapsible toggle ───────────────────────────────────── */

.cof-collapsible {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 0;
}

.cof-toggle-btn {
  appearance: none;
  background: var(--blue-soft, #eef2ff);
  border: 1px solid var(--blue, #6c8eff);
  border-radius: 6px;
  color: var(--blue-deep, #3a5bd9);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 14px;
  transition: filter 0.12s ease, transform 0.06s ease;
  white-space: nowrap;
}

.cof-toggle-btn:hover {
  filter: brightness(0.95);
}

.cof-toggle-btn:active {
  transform: translateY(1px);
}

/* ── Circle of Fifths ─────────────────────────────────────────────────────── */

.cof-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
}

.cof-svg {
  width: 340px;
  height: 340px;
  display: block;
  overflow: visible;
  /* Light, single shadow — much less heavy than before */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.18));
}

/* All interactive segments */
.cof-seg {
  cursor: pointer;
}

.cof-seg path {
  transition: fill 0.18s ease;
}

/* Typography for SVG text elements */
.cof-label-major {
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  user-select: none;
}

.cof-label-sig {
  font-family: system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

.cof-label-minor {
  font-family: system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

.cof-center-key {
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  user-select: none;
}

.cof-center-relative {
  font-family: system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}
/* ============================================================
   Phase 5A — trainer layout primitives.

   Token rule: every colour and surface value MUST be expressed
   as a var(--app-*), var(--card-*), var(--panel-*),
   var(--trainer-*), or var(--domain-*) reference. No hex / rgb /
   rgba / hsl literals are allowed here.

   The trainer-specific tint comes from the data-trainer attribute
   on AppTrainerScreen, which maps onto the existing
   --trainer-{name}-accent family.
   ============================================================ */

/* -------- AppTrainerScreen ---------------------------------- */

.app-trainer-screen {
  --trainer-screen-accent:        var(--profile-accent);
  --trainer-screen-accent-soft:   var(--profile-accent-soft);
  --trainer-screen-accent-border: var(--profile-accent-border);
  --trainer-screen-accent-text:   var(--app-text-emphasis);

  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
  color: var(--app-text);
  /* Intentional neutral learning surface: explicit background prevents the
     profile background tint (set on .app) from bleeding into trainer content.
     Profile accent still reaches borders, headings and selected controls via
     --trainer-screen-accent-* tokens. */
  background: var(--app-bg);
}

.app-trainer-screen--layout-standard  { max-width: 1200px; }
.app-trainer-screen--layout-workspace { max-width: 1360px; }
.app-trainer-screen--layout-wide      { max-width: 1360px; }

@media (min-width: 820px) and (orientation: landscape) {
  /* Fill the .app content column — removes the layout-standard 1200px cap
     so trainers align with .app-top-row and .app-chrome-row above them. */
  .app-trainer-screen,
  .app-trainer-screen--layout-standard,
  .app-trainer-screen--layout-workspace,
  .app-trainer-screen--layout-wide {
    max-width: 100%;
    padding: 0;
    gap: 14px;
  }
}

.app-trainer-screen--density-compact {
  gap: 12px;
  padding: 0;
}

/* Trainer-specific accents — override the local CSS custom
   properties so descendant primitives (control panel, workspace,
   header) inherit the right tint without needing their own
   data-trainer attributes. */
.app-trainer-screen[data-trainer='scale'] {
  --trainer-screen-accent:        var(--trainer-scale-accent);
  --trainer-screen-accent-soft:   var(--trainer-scale-accent-soft);
  --trainer-screen-accent-border: var(--trainer-scale-accent-border);
  --trainer-screen-accent-text:   var(--trainer-scale-accent-text);
}
.app-trainer-screen[data-trainer='chord'] {
  --trainer-screen-accent:        var(--trainer-chord-accent);
  --trainer-screen-accent-soft:   var(--trainer-chord-accent-soft);
  --trainer-screen-accent-border: var(--trainer-chord-accent-border);
  --trainer-screen-accent-text:   var(--trainer-chord-accent-text);
}
.app-trainer-screen[data-trainer='arpeggio'] {
  --trainer-screen-accent:        var(--trainer-arpeggio-accent);
  --trainer-screen-accent-soft:   var(--trainer-arpeggio-accent-soft);
  --trainer-screen-accent-border: var(--trainer-arpeggio-accent-border);
  --trainer-screen-accent-text:   var(--trainer-arpeggio-accent-text);
}
.app-trainer-screen[data-trainer='ostinato'] {
  --trainer-screen-accent:        var(--trainer-ostinato-accent);
  --trainer-screen-accent-soft:   var(--trainer-ostinato-accent-soft);
  --trainer-screen-accent-border: var(--trainer-ostinato-accent-border);
  --trainer-screen-accent-text:   var(--trainer-ostinato-accent-text);
}
.app-trainer-screen[data-trainer='ear'] {
  --trainer-screen-accent:        var(--trainer-ear-accent);
  --trainer-screen-accent-soft:   var(--trainer-ear-accent-soft);
  --trainer-screen-accent-border: var(--trainer-ear-accent-border);
  --trainer-screen-accent-text:   var(--trainer-ear-accent-text);
}
.app-trainer-screen[data-trainer='notation'] {
  --trainer-screen-accent:        var(--trainer-notation-accent);
  --trainer-screen-accent-soft:   var(--trainer-notation-accent-soft);
  --trainer-screen-accent-border: var(--trainer-notation-accent-border);
  --trainer-screen-accent-text:   var(--trainer-notation-accent-text);
}
.app-trainer-screen[data-trainer='musicPiece'] {
  --trainer-screen-accent:        var(--trainer-notation-accent);
  --trainer-screen-accent-soft:   var(--trainer-notation-accent-soft);
  --trainer-screen-accent-border: var(--trainer-notation-accent-border);
  --trainer-screen-accent-text:   var(--trainer-notation-accent-text);
}

.app-trainer-screen__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-border);
}

.app-trainer-screen__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trainer-screen-accent-text);
}

.app-trainer-screen__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
}

.app-trainer-screen__subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--app-text-secondary);
}

.app-trainer-screen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.app-trainer-screen__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.app-trainer-screen--density-compact .app-trainer-screen__body {
  gap: 12px;
}

/* -------- AppTrainerHeader ---------------------------------- */

.app-trainer-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-card);
  box-sizing: border-box;
  min-width: 0;
}

.app-trainer-header__lede {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 320px;
}

.app-trainer-header__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.app-trainer-header__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Child profile avatar glyph — shown before the title when `avatar` prop is set. */
.app-trainer-header__avatar {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-trainer-header__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
}

.app-trainer-header__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
  background: var(--app-surface-accent-soft);
  border: 1px solid var(--app-border);
  border-radius: 999px;
}

.app-trainer-header__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

.app-trainer-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* -------- AppTrainerControlPanel ---------------------------- */

.app-trainer-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--panel-padding);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  box-sizing: border-box;
  min-width: 0;
}

.app-trainer-control-panel--compact {
  gap: 8px;
  padding: 12px;
}

.app-trainer-control-panel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
}

.app-trainer-control-panel__description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--app-text-secondary);
}

.app-trainer-control-panel__grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.app-trainer-control-panel[data-columns='1'] .app-trainer-control-panel__grid {
  grid-template-columns: 1fr;
}
.app-trainer-control-panel[data-columns='2'] .app-trainer-control-panel__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app-trainer-control-panel[data-columns='3'] .app-trainer-control-panel__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-trainer-control-panel[data-columns='auto'] .app-trainer-control-panel__grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* -------- AppTrainerWorkspace ------------------------------- */

.app-trainer-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--app-radius-lg);
  border: 1px solid transparent;
  min-height: 280px;
  box-sizing: border-box;
  min-width: 0;
}

.app-trainer-workspace--plain {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.app-trainer-workspace--surface {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.app-trainer-workspace--keyboard {
  background: var(--app-surface-sunken);
  border-color: var(--app-border);
}

.app-trainer-workspace--notation {
  background: var(--app-surface);
  border-color: var(--trainer-notation-accent-border);
  color: var(--trainer-notation-accent-text);
}

.app-trainer-workspace--listening {
  background: var(--trainer-ear-accent-soft);
  border-color: var(--trainer-ear-accent-border);
  color: var(--trainer-ear-accent-text);
}

/* -------- AppTrainerActionRow ------------------------------- */

.app-trainer-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.app-trainer-action-row--align-start    { justify-content: flex-start; }
.app-trainer-action-row--align-centre   { justify-content: center; }
.app-trainer-action-row--align-end      { justify-content: flex-end; }
.app-trainer-action-row--align-between  { justify-content: space-between; }

/* -------- AppTrainerFeedback -------------------------------- */

.app-trainer-feedback {
  display: block;
  margin: 0;
  min-width: 0;
}

.app-trainer-feedback__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.app-trainer-feedback__icon {
  font-size: 1.125rem;
  line-height: 1;
}

.app-trainer-feedback__title {
  font-size: 1rem;
  font-weight: 700;
}

.app-trainer-feedback__body {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* -------- AppTrainerQuestionCard ---------------------------- */

.app-trainer-question-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--card-padding);
  min-width: 0;
}

.app-trainer-question-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.app-trainer-question-card__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.app-trainer-question-card__status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text-secondary);
}

.app-trainer-question-card__prompt {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
  line-height: 1.3;
}

.app-trainer-question-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* -------- AppTrainerKeyboardPanel --------------------------- */

.app-trainer-keyboard-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-sizing: border-box;
  min-width: 0;
}

.app-trainer-keyboard-panel__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-trainer-keyboard-panel__stage {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* -------- iPad landscape ------------------------------------ */
@media (max-width: 1024px) {
  .app-trainer-screen {
    padding: 0;
    gap: 16px;
  }

  .app-trainer-screen__title {
    font-size: 1.5rem;
  }

  .app-trainer-workspace {
    padding: 16px;
    min-height: 240px;
  }

  .app-trainer-control-panel[data-columns='3'] .app-trainer-control-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-trainer-header {
    padding: 12px 16px;
  }
}

/* -------- Mobile -------------------------------------------- */
@media (max-width: 640px) {
  .app-trainer-screen {
    padding: 0;
    gap: 12px;
  }

  .app-trainer-screen__title {
    font-size: 1.25rem;
  }

  .app-trainer-screen__subtitle {
    font-size: 0.9375rem;
  }

  .app-trainer-workspace {
    padding: 12px;
    min-height: 200px;
  }

  .app-trainer-control-panel[data-columns='2'] .app-trainer-control-panel__grid,
  .app-trainer-control-panel[data-columns='3'] .app-trainer-control-panel__grid {
    grid-template-columns: 1fr;
  }

  .app-trainer-action-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .app-trainer-question-card__prompt {
    font-size: 1.0625rem;
  }
}
/* =====================================================================
   Phase 5J — Scale + Chord trainer local visual styling.

   This file owns every CSS rule scoped to `.practice-card` /
   `.practice-card--scale` / `.practice-card--chord`. Phase 5J moved
   those rules out of src/App.css so the global stylesheet no longer
   carries Scale-Trainer / Chord-Trainer shell chrome. AppTrainerScreen,
   AppTrainerHeader, AppTrainerControlPanel and the design-system
   primitives now own the shared shell; what remains here is trainer-
   specific visual styling (hero panels, keyboard panels, metronome
   rhythm strip, progress bars, option chips, action stack, control
   dock internals).

   The local :root aliases this file relies on (--surface, --blue,
   --purple, --mint, --warm-text, --radius-*) are still defined in
   src/App.css and inherit globally via the CSS cascade, so this file
   does not need to redeclare them.

   Token rule: every colour SHOULD be a `var(--app-*)` /
   `var(--trainer-*)` reference. The handful of hex / rgba literals
   below carry `/* allow-hardcoded-colour: <reason> */` annotations
   because they were decorative gradient washes inherited from the
   pre-phase-5J trainer chrome and have no semantic-token equivalent.
   No NEW hardcoded colours may be added.
   ===================================================================== */

/* ---------- Outer trainer card: flatten the old nested boxes ---------- */
.practice-card.trainer-shell,
.practice-card.scale-trainer-panel,
.practice-card.chord-trainer-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  /* allow-hardcoded-colour: deep navy card shadow tint */
  box-shadow: 0 2px 8px rgba(20, 30, 70, 0.05) !important;
  padding: 0.55rem 0.6rem 0.6rem !important;
  display: grid !important;
  gap: 0.45rem !important;
}

/* Defeat the inner nested .card / .trainer-section-card / .trainer-shell look */
.practice-card .trainer-section-card,
.practice-card .trainer-header-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.practice-card .trainer-section-title,
.practice-card .metronome-section-title {
  display: none !important;
}

/* ---------- Compact header ---------- */
.practice-card .practice-header,
.practice-card .trainer-header-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.05rem 0.15rem !important;
  margin: 0 !important;
}

.practice-card h2.trainer-panel-title-row {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
  color: var(--text-main) !important;
}

.practice-card .practice-header-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.practice-card .practice-header-title input[type='radio'] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--blue);
}

/* ---------- Compact notices ---------- */
.practice-card .compact-notice {
  margin: 0 !important;
  padding: 0.32rem 0.5rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
  background: var(--app-info-surface) !important;
  border: 1px solid var(--app-info-border) !important;
  color: var(--app-info-text) !important;
}

/* ---------- Control dock: flat horizontal grid (NOT a white box) ---------- */
.practice-card .control-dock {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  padding: 0.45rem 0.5rem 0.5rem !important;
  box-shadow: none !important;
}

.practice-card .control-dock .chord-trainer-controls,
.practice-card .control-dock .scale-trainer-controls {
  display: grid !important;
  gap: 0.4rem !important;
  margin: 0 !important;
}

/* Primary row: Root, Scale Family, Mode, Chord Types (4 items, auto-fit wraps on narrow). */
.practice-card .control-dock .chord-trainer-controls-primary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 0.35rem 0.5rem !important;
}

/* Secondary row: Chord Positions, Hand Focus, Show Chord In (3 items). */
.practice-card .control-dock .chord-trainer-controls-secondary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.35rem 0.5rem !important;
}

/* MF-21c: Scale Trainer control dock — AppTrainerControlPanel defaults to
   columns="2" which puts the single scale-trainer-controls child in a half-
   width grid cell. Force 1 column so the selection row gets the full width. */
.practice-card--scale .control-dock.app-trainer-control-panel .app-trainer-control-panel__grid {
  grid-template-columns: 1fr !important;
}

/* Same fix for Chord Trainer — its chord-trainer-controls is also the sole
   child of a 2-column AppTrainerControlPanel grid, leaving half the dock
   empty. Force 1 column so the primary (4-col) and secondary (3-col) rows
   can use the full dock width. */
.practice-card--chord .control-dock.app-trainer-control-panel .app-trainer-control-panel__grid {
  grid-template-columns: 1fr !important;
}

/* Chord Trainer: inner row wrapper — all 8 controls in one flex-wrap line.
   Outer chord-trainer-controls stays as a grid (1fr from the 1-column override)
   so it gets full width; this inner div mirrors scale-trainer-row-all. */
.practice-card--chord .control-dock .chord-trainer-row-all {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.45rem !important;
  align-items: end !important;
  margin: 0 !important;
}

.practice-card--chord .control-dock .chord-trainer-row-all > .chord-trainer-field {
  flex: 1 1 95px !important;
  min-width: 0 !important;
}

/* Disabled chord-type rows visually convey that selecting them will
   switch the scale family. The label is still clickable (the click
   handler auto-corrects the family) so this is a HINT, not a hard
   block — keep pointer-events on. */
.chord-type-dropdown-row--disabled {
  opacity: 0.55;
}
.chord-type-dropdown-row--disabled input[type='checkbox'] {
  filter: grayscale(0.5);
}

/* Chord Trainer: Chord Types now sits in the rightmost column of the
   primary row. Anchor the popup to the RIGHT edge so it does not push
   past the card border on iPad landscape. */
@media (min-width: 700px) {
  .practice-card--chord .chord-trainer-controls-primary .chord-type-dropdown .chord-type-dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* MF-21 follow-up: Scale Trainer scale-selection row — all 7 controls
   (CoF toggle + Root + Family + Mode + Hand Focus + Direction + Octave
   Range) share ONE flex-wrap row on iPad landscape and wider. Each
   control gets a small flex-basis (95px) so the row only wraps when the
   viewport really is too narrow (phones / portrait phones). */
.practice-card--scale .control-dock .scale-trainer-controls-primary.scale-selection-row,
.practice-card--scale .control-dock .scale-trainer-row-all {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 0.45rem !important;
  align-items: flex-end !important;
}

.practice-card--scale .control-dock .scale-trainer-row-all > .control-field,
.practice-card--scale .control-dock .scale-trainer-row-all > .chord-trainer-field,
.practice-card--scale .control-dock .scale-trainer-controls-primary.scale-selection-row > .control-field,
.practice-card--scale .control-dock .scale-trainer-controls-primary.scale-selection-row > .chord-trainer-field {
  flex: 1 1 95px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* CoF toggle holds just a short button — let it stay compact so the
   other selection controls share one line at iPad landscape width. */
.practice-card--scale .control-dock .scale-trainer-row-all > .scale-trainer-cof-toggle-field,
.practice-card--scale .control-dock .scale-trainer-controls-primary.scale-selection-row > .scale-trainer-cof-toggle-field {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* Hand focus chips use single-letter labels (L/R/B) — keep the group
   compact so it sits naturally in the one-row layout. */
.practice-card--scale .control-dock .scale-trainer-row-all > .scale-trainer-hand-radios {
  flex: 1 1 130px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* On iPad landscape and wider, force the row to NOT wrap so all 7
   controls really do share one line. The flex-basis above is small
   enough that this is always physically possible at >=820px. */
@media (min-width: 820px) {
  .practice-card--scale .control-dock .scale-trainer-row-all {
    flex-wrap: nowrap !important;
  }
  .practice-card--scale .control-dock .scale-trainer-row-all > .control-field,
  .practice-card--scale .control-dock .scale-trainer-row-all > .chord-trainer-field {
    flex: 1 1 0 !important;
  }
  .practice-card--scale .control-dock .scale-trainer-row-all > .scale-trainer-cof-toggle-field {
    flex: 0 0 auto !important;
  }
  .practice-card--scale .control-dock .scale-trainer-row-all > .scale-trainer-hand-radios {
    flex: 1 1 0 !important;
  }
  /* Shrink selects so seven controls really fit; the longest text in any
     dropdown still ellipsises with `text-overflow: ellipsis` on the
     `.scale-trainer-select` rule in App.css. */
  .practice-card--scale .control-dock .scale-trainer-row-all .scale-trainer-select {
    min-width: 0 !important;
    width: 100% !important;
  }
}

.practice-card--scale .control-dock .scale-trainer-cof-toggle {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
  white-space: nowrap !important;
}

.practice-card--scale .control-dock .scale-trainer-cof-panel {
  margin: 0.25rem 0 0 !important;
  width: 100% !important;
}

.practice-card--chord .control-dock .chord-trainer-field--cof {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
.practice-card--chord .control-dock .chord-trainer-field--cof .scale-trainer-cof-toggle {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
  white-space: nowrap !important;
}
.practice-card--chord .control-dock .scale-trainer-cof-panel {
  flex: 0 0 100% !important;
  margin: 0.25rem 0 0 !important;
  width: 100% !important;
}

.practice-card .control-field,
.practice-card .control-dock .chord-trainer-field {
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.practice-card .control-field > label,
.practice-card .control-dock .chord-trainer-field > label[for],
.practice-card .control-dock fieldset.chord-trainer-field legend,
.practice-card .control-dock .chord-type-dropdown-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  width: auto !important;
  flex: none !important;
  margin: 0 !important;
}

.practice-card .control-field select,
.practice-card .control-field input,
.practice-card .scale-trainer-select,
.practice-card .control-dock select,
.practice-card .control-dock input[type='number'],
.practice-card .control-dock input[type='text'] {
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--app-surface) !important;
  color: var(--text-main) !important;
  font-size: 0.88rem !important;
  padding: 0.25rem 0.5rem !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Match native-select height on custom dropdown trigger buttons */
.practice-card .control-dock .chord-type-dropdown-trigger {
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}

/* ---------- Option chips: replace ugly raw radio fieldsets ---------- */
.practice-card .option-chip-group {
  display: grid !important;
  gap: 0.18rem !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.practice-card .option-chip-group legend {
  display: block !important;
  margin-bottom: 0.18rem !important;
}

.practice-card .option-chip-group > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.32rem !important;
  min-height: 34px !important;
  padding: 0.15rem 0.55rem !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background: var(--app-surface) !important;
  color: var(--text-main) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap;
}

.practice-card .option-chip-group > label:has(input:checked) {
  background: var(--blue-soft) !important;
  border-color: var(--blue) !important;
  color: var(--blue-deep) !important;
  font-weight: 600 !important;
}

.practice-card .option-chip-group > label > input[type='radio'],
.practice-card .option-chip-group > label > input[type='checkbox'] {
  width: 0.95rem !important;
  height: 0.95rem !important;
  accent-color: var(--blue) !important;
}

.practice-card .option-chip-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  align-items: center !important;
  align-content: flex-start !important;
}

@media (min-width: 700px) {
  /* Scale Trainer secondary row keeps the historical 3-col grid (2 fields). */
  .practice-card .control-dock .scale-trainer-controls-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  /* Chord Trainer secondary row: 3 equal columns at ≥700px.
     The container is now full-width (grid fixed above), so 3 × 1fr
     gives each of Positions / Hand Focus / Show Chord In equal space. */
  .practice-card--chord .control-dock .chord-trainer-controls-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  .practice-card .option-chip-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.22rem !important;
  }

  .practice-card .option-chip-group > legend {
    flex: 0 0 100% !important;
  }

  .practice-card .option-chip-group > label {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding-left: 0.32rem !important;
    padding-right: 0.32rem !important;
  }
}

/* ---------- Chord Trainer staff: trainer-scoped sizing & headroom ----------
   Targets `.chord-trainer-staff` (set only on the StaffDisplay wrapper inside
   ChordTrainer). Does NOT affect Scale, Notation, or MusicPiece trainers. */
.practice-card--chord .chord-trainer-staff {
  width: 100% !important;
  min-width: 0 !important;
  /* Constrain the staff to a compact width and centre it so it sits directly
     under the chord name rather than spanning the full hero-panel width.
     autoFitHeight crops the SVG height to actual content; keep a small floor
     so the container does not collapse before VexFlow has finished measuring. */
  max-width: 420px !important;
  margin: 0 auto !important;
  min-height: 60px !important;
  padding: 0.1rem 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.practice-card--chord .chord-trainer-staff .staff-display {
  width: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.practice-card--chord .chord-trainer-staff .staff-display svg {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* ---------- Practice stage: real 2-column on iPad landscape ---------- */
.practice-card .practice-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.practice-card .practice-stage-main {
  display: grid !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
}

.practice-card .practice-stage-aside {
  display: grid !important;
  gap: 0.4rem !important;
  align-content: start !important;
  min-width: 0 !important;
}

@media (min-width: 820px) {
  .practice-card .practice-stage {
    grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 13rem) !important;
  }
}

/* ---------- Scale + Chord Trainer: tighter vertical spacing -----------
   AppTrainerScreen renders as `app-trainer-screen` (not `trainer-shell`),
   so we must target the `app-trainer-screen__body` flex container.
   The default gap: 20px creates large visible bands between sections.
   Reducing to 0.4rem collapses the wasted space without removing structure. */
.practice-card--scale.app-trainer-screen .app-trainer-screen__body,
.practice-card--chord.app-trainer-screen .app-trainer-screen__body {
  gap: 0.4rem !important;
}
.practice-card--scale .control-dock {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

/* ---------- Hero panel: huge chord/scale display with warm/cool wash --- */
.practice-card .hero-panel {
  position: relative !important;
  display: grid !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-soft) !important;
  padding: clamp(0.55rem, 1.6vw, 1rem) 0.7rem !important;
  /* Reserve space at the bottom for the absolute-positioned subtitle label */
  padding-bottom: clamp(1.6rem, 3vw, 2rem) !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Pull the chord subtitle out of the grid flow so it doesn't create a
   full-width row that adds wasted height. Float it to the bottom-right
   corner of the hero panel instead. */
.practice-card .chord-question-footer-row {
  position: absolute !important;
  bottom: 0.4rem !important;
  right: 0.6rem !important;
  width: auto !important;
  margin: 0 !important;
}

/* allow-hardcoded-colour: chord hero — decorative peach→lavender wash */
.practice-card .hero-panel--chord {
  background: linear-gradient(135deg, #f6efe4 0%, #e9dcff 100%) !important;
  border-color: #d3c2f5 !important;
}

.practice-card .hero-panel--scale {
  background: linear-gradient(135deg, var(--sky) 0%, var(--mint) 100%) !important;
  border-color: var(--app-info-border) !important;
}

/* allow-hardcoded-colour: correct-hero — decorative mint wash */
.practice-card .hero-panel.correct {
  background: linear-gradient(135deg, #d2f7df 0%, #b6f0ce 100%) !important;
  border-color: var(--app-success-border) !important;
}

/* allow-hardcoded-colour: wrong-hero — decorative rose wash */
.practice-card .hero-panel.chord-trainer-question--wrong {
  background: linear-gradient(135deg, #ffe0e0 0%, #ffc8c8 100%) !important;
  border-color: var(--app-danger-border) !important;
}

/* Defeat the legacy challenge-card boxed/padded look when used as hero */
.practice-card .hero-panel.challenge-card {
  border-width: 1px !important;
  padding: clamp(0.28rem, 0.9vw, 0.55rem) 0.45rem !important;
}

.practice-card .hero-main {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.4rem 0.8rem !important;
}

.practice-card .hero-panel .chord-name-large {
  font-size: clamp(3.5rem, 9vw, 6.5rem) !important;
  line-height: 0.92 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-main) !important;
}

.practice-card .hero-panel .chord-roman.chord-name-large {
  font-size: clamp(2rem, 5vw, 3.4rem) !important;
  /* Phase 5I: use chord accent token (not scale) — was a leftover scale leak. */
  color: var(--trainer-chord-accent-text) !important;
}

.practice-card .hero-detail {
  margin: 0.25rem 0 0 !important;
  font-size: clamp(0.82rem, 1.6vw, 1rem) !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  line-height: 1.25 !important;
}

.practice-card .hero-feedback {
  margin: 0.35rem 0 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--app-info-text) !important;
}

.practice-card .hero-panel.correct .hero-feedback {
  color: var(--app-success-text) !important;
}

.practice-card .hero-panel.chord-trainer-question--wrong .hero-feedback {
  color: var(--app-danger-text) !important;
}

.practice-card .hero-panel.chord-trainer-question--wrong .chord-name-large,
.practice-card .hero-panel.chord-trainer-question--wrong .hero-detail {
  color: var(--app-danger-text) !important;
}

/* Hide the now-redundant "Chord challenge"/"Your scale quest" kickers if any remain */
.practice-card .challenge-kicker {
  display: none !important;
}

/* ---------- Keyboard panel: integrated, no big white empty box --------- */
.practice-card .keyboard-panel {
  margin: 0 !important;
  padding: 0.25rem 0.3rem 0.35rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  display: grid !important;
  gap: 0.25rem !important;
}

.practice-card .keyboard-panel .piano-note-diagram {
  background: var(--app-info-surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  /* allow-hardcoded-colour: deep navy card shadow tint */
  box-shadow: 0 1px 2px rgba(20, 30, 70, 0.04) !important;
  padding: 0.32rem 0.45rem !important;
}

.practice-card .chord-trainer-piano-both,
.practice-card .chord-trainer-piano-both-row {
  margin: 0 !important;
}

.practice-card .chord-trainer-piano-both-row {
  gap: 0.35rem !important;
}

/* ---------- Trainer buttons: one consistent family ---------- */
.practice-card .trainer-button,
.practice-card .practice-stage-aside button,
.practice-card .chord-trainer-answer-controls button {
  appearance: none !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.06s ease;
}

.practice-card .trainer-button:active,
.practice-card .practice-stage-aside button:active {
  transform: translateY(1px);
}

.practice-card .trainer-button:hover {
  filter: brightness(0.97);
}

.practice-card .trainer-button--primary {
  background: var(--blue) !important;
  border-color: var(--blue-deep) !important;
  color: var(--app-text-on-primary) !important;
}

.practice-card .trainer-button--secondary {
  background: var(--blue-soft) !important;
  border-color: var(--app-info-border) !important;
  color: var(--blue-deep) !important;
}

.practice-card .trainer-button--restart {
  background: var(--app-warning-surface) !important;
  border-color: var(--peach-deep) !important;
  color: var(--warm-text) !important;
}

.practice-card .trainer-button--speech {
  background: var(--app-success-surface) !important;
  border-color: var(--app-success-border) !important;
  color: var(--app-success-text) !important;
}

/* ---------- Action stack & answer card ---------- */
.practice-card .action-stack {
  display: grid !important;
  gap: 0.4rem !important;
}

.practice-card .trainer-answer-card {
  margin-top: 0.3rem !important;
  padding: 0.45rem 0.55rem !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-soft) !important;
  background: var(--surface-mute) !important;
  font-size: 0.82rem !important;
  color: var(--text-main) !important;
}

.practice-card .trainer-answer-card h3 {
  margin: 0 0 0.25rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.practice-card .trainer-answer-card p {
  margin: 0.12rem 0 !important;
  line-height: 1.3 !important;
}

/* Hide the legacy answer slot used inside the previous keyboard row */
.practice-card .chord-trainer-diagram-answer-row .chord-trainer-answer-slot {
  display: none !important;
}

/* ---------- Rhythm strip: compact horizontal metronome bar ---------- */
.practice-card .rhythm-strip {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  padding: 0.4rem 0.5rem !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 0.32rem !important;
}

.practice-card .rhythm-strip > * {
  margin: 0 !important;
}

.practice-card .rhythm-strip .metronome-controls-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Scale Trainer polish: cleaner wrappers and consistent select focus */
.practice-card--scale .rhythm-strip {
  background: var(--app-info-surface) !important;
  border: 1px solid var(--app-info-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 8px 0 8px 8px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.practice-card--scale .rhythm-strip-row--main {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  min-height: 0 !important;
  align-items: center !important;
}

.practice-card--scale .rhythm-strip .metronome-controls-section--settings,
.practice-card--scale .rhythm-strip .metronome-controls-section--exercise {
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.practice-card--scale .rhythm-strip .metronome-controls-section--exercise {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 6px !important;
}

.practice-card .rhythm-strip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem 0.45rem !important;
}

.practice-card .rhythm-strip-row--fields {
  display: block !important;
  width: 100% !important;
}

.practice-card .rhythm-strip-row--main {
  background: var(--app-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.42rem;
}

.practice-card .rhythm-strip-start {
  width: auto !important;
  min-width: 6rem !important;
  flex: 0 0 auto !important;
  padding: 0.45rem 0.95rem !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
}

.practice-card .rhythm-strip-beat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-width: 3rem;
  justify-content: center;
}

.practice-card .rhythm-strip-beat-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.practice-card .rhythm-strip-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-mute);
  border: 1px solid var(--border-soft);
  font-size: 0.74rem;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.practice-card .rhythm-strip-pill strong {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.practice-card .rhythm-strip-pill.metronome-avg-pill--pass,
.practice-card .rhythm-strip-pill.metronome-avg-pill--neutral.metronome-avg-pill--pass {
  background: var(--app-success-surface) !important;
  border-color: var(--app-success-border) !important;
  color: var(--app-success-text) !important;
}

.practice-card .rhythm-strip-pill.metronome-avg-pill--near {
  background: var(--app-warning-surface) !important;
  border-color: var(--app-warning-border) !important;
  color: var(--app-warning-text) !important;
}

.practice-card .rhythm-strip-pill.metronome-avg-pill--fail {
  background: var(--app-danger-surface) !important;
  border-color: var(--app-danger-border) !important;
  color: var(--app-danger-text) !important;
}

.practice-card .rhythm-strip-row--fields .metronome-settings-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 10px 0 0 !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-setting-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-setting-field span {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.practice-card .rhythm-strip .metronome-setting-field input,
.practice-card .rhythm-strip .metronome-setting-field select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  max-width: 100% !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--app-surface) !important;
  color: var(--text-main) !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  padding: 0 36px 0 12px !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.practice-card--scale .rhythm-strip .metronome-setting-field select,
.practice-card--scale .scale-trainer-controls select,
.practice-card--scale .scale-trainer-select {
  border: 1px solid var(--app-info-border) !important;
  border-radius: 10px !important;
  background-color: var(--app-surface) !important;
  min-height: 42px !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.practice-card--scale .rhythm-strip .metronome-setting-field select:focus,
.practice-card--scale .rhythm-strip .metronome-setting-field select:focus-visible,
.practice-card--scale .scale-trainer-controls select:focus,
.practice-card--scale .scale-trainer-controls select:focus-visible,
.practice-card--scale .scale-trainer-select:focus,
.practice-card--scale .scale-trainer-select:focus-visible {
  border-color: var(--app-primary) !important;
  /* allow-hardcoded-colour: primary-blue focus halo tint */
  box-shadow: 0 0 0 2px rgba(59, 91, 219, 0.15) !important;
  outline: none !important;
}

.practice-card--scale .rhythm-strip .metronome-setting-field--sound select {
  padding-right: 36px !important;
}

.practice-card--scale .rhythm-strip .metronome-setting-field--sound {
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-exercise-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  align-items: end !important;
  /* allow-hardcoded-colour: translucent white overlay tint on parent gradient */
  background: rgba(255, 255, 255, 0.72) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 !important;
  margin-top: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* MF-21: explicit grid-column placement keeps each exercise field
   in the same visual column across modes, aligned with the settings
   row above (Speed | Accuracy | Tolerance | Time Sig | Sound). */
.practice-card .rhythm-strip .metronome-setting-field--exercise-picker {
  grid-column: 1 !important;
}
.practice-card .rhythm-strip .metronome-setting-field--ex-col2 {
  grid-column: 2 !important;
}
.practice-card .rhythm-strip .metronome-setting-field--ex-col3 {
  grid-column: 3 !important;
}
.practice-card .rhythm-strip .metronome-setting-field--ex-col4 {
  grid-column: 4 !important;
}
.practice-card .rhythm-strip .metronome-setting-field--ex-col5 {
  grid-column: 5 !important;
}

.practice-card--scale .rhythm-strip .metronome-exercise-grid {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

/* Keep only one metronome container border in Scale Trainer */
.practice-card--scale .rhythm-strip .rhythm-strip-row--main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.practice-card .rhythm-strip .metronome-exercise-grid > *,
.practice-card .rhythm-strip .metronome-settings-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* MF-19: keep Choose Exercise and the Optional Duration stepper visually
   paired inside a single grid cell. Wraps on narrow screens. */
.practice-card .rhythm-strip .metronome-exercise-picker-pair {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-setting-field .number-stepper {
  margin: 0 !important;
  align-self: start !important;
  width: max-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-setting-field .number-stepper-controls,
.practice-card .rhythm-strip .metronome-setting-field .number-stepper__controls {
  justify-self: start !important;
  display: inline-grid !important;
  grid-template-columns: 40px 72px 40px !important;
  gap: 8px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.practice-card .rhythm-strip .metronome-setting-field .number-stepper-button,
.practice-card .rhythm-strip .metronome-setting-field .number-stepper__button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

.practice-card .rhythm-strip .metronome-setting-field .number-stepper-value,
.practice-card .rhythm-strip .metronome-setting-field .number-stepper__value {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 40px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tints — five
   decorative washes used to differentiate practice modes at a glance.
   Each is a translucent tint, not a semantic state colour. */
.practice-card--scale .rhythm-strip:has(.metronome-controls-section--exercise.exercise-mode-free) {
  background: rgba(237, 245, 255, 0.62) !important;
  border-color: #cfe0ff !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card--scale .rhythm-strip:has(.metronome-controls-section--exercise.exercise-mode-timed) {
  background: rgba(236, 255, 244, 0.62) !important;
  border-color: #c4efd6 !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card--scale .rhythm-strip:has(.metronome-controls-section--exercise.exercise-mode-beat-ladder) {
  background: rgba(244, 239, 255, 0.62) !important;
  border-color: #ddd0ff !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card--scale .rhythm-strip:has(.metronome-controls-section--exercise.exercise-mode-time-ladder) {
  background: rgba(255, 241, 232, 0.62) !important;
  border-color: #ffd2b7 !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card--scale .rhythm-strip:has(.metronome-controls-section--exercise.exercise-mode-streak-goal) {
  background: rgba(255, 248, 216, 0.62) !important;
  border-color: #f4e39b !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card .rhythm-strip .metronome-controls-section--exercise.exercise-mode-free .metronome-exercise-grid {
  background: rgba(237, 245, 255, 0.74) !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card .rhythm-strip .metronome-controls-section--exercise.exercise-mode-timed .metronome-exercise-grid {
  background: rgba(236, 255, 244, 0.74) !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card .rhythm-strip .metronome-controls-section--exercise.exercise-mode-beat-ladder .metronome-exercise-grid {
  background: rgba(244, 239, 255, 0.74) !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card .rhythm-strip .metronome-controls-section--exercise.exercise-mode-time-ladder .metronome-exercise-grid {
  background: rgba(255, 241, 232, 0.74) !important;
}

/* allow-hardcoded-colour: per-exercise-mode metronome strip tint */
.practice-card .rhythm-strip .metronome-controls-section--exercise.exercise-mode-streak-goal .metronome-exercise-grid {
  background: rgba(255, 248, 216, 0.74) !important;
}

@media (max-width: 900px) {
  .practice-card .rhythm-strip-row--fields .metronome-settings-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .practice-card .rhythm-strip .metronome-exercise-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .practice-card .rhythm-strip-row--fields .metronome-settings-grid,
  .practice-card .rhythm-strip .metronome-exercise-grid {
    grid-template-columns: 1fr !important;
  }
  .practice-card .rhythm-strip .metronome-setting-field--exercise-picker,
  .practice-card .rhythm-strip .metronome-setting-field--ex-col2,
  .practice-card .rhythm-strip .metronome-setting-field--ex-col3,
  .practice-card .rhythm-strip .metronome-setting-field--ex-col4,
  .practice-card .rhythm-strip .metronome-setting-field--ex-col5 {
    grid-column: auto !important;
  }
}

.practice-card .rhythm-strip .metronome-exercise-grid .metronome-beat-indicator {
  display: none !important;
}

.practice-card .rhythm-strip .metronome-exercise-timer-status,
.practice-card .rhythm-strip .metronome-exercise-ladder-status {
  margin: 0.18rem 0 0 !important;
  font-size: 0.74rem !important;
  color: var(--blue-deep) !important;
  font-weight: 600 !important;
}

.practice-card .rhythm-strip .rhythm-strip-msg {
  margin: 0 !important;
  padding: 0.22rem 0.5rem !important;
  border-radius: var(--radius-sm) !important;
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  color: var(--app-warning-text);
  font-size: 0.78rem;
}

.practice-card .rhythm-strip .rhythm-strip-feedback {
  margin: 0 !important;
  padding: 0.28rem 0.5rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

/* ---------- Progress panel ---------- */
.practice-card .progress-panel,
.practice-card .progress-reward-panel {
  margin: 0.2rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.practice-card .progress-panel .trainer-pill {
  display: none !important;
}

.practice-card .progress-panel .chord-progress-section,
.practice-card .progress-panel .scale-progress-card {
  background: var(--surface-mute) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.6rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.practice-card .progress-panel .chord-progress-header,
.practice-card .progress-panel .scale-progress-header {
  align-items: center !important;
  gap: 0.35rem 0.6rem !important;
}

.practice-card .progress-panel .progress-panel-title,
.practice-card .progress-panel .scale-progress-title {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
}

.practice-card .progress-panel .progress-panel-stat-pill {
  border-radius: 999px !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--border-soft) !important;
  padding: 0.18rem 0.5rem !important;
  min-height: 28px !important;
  box-shadow: none !important;
}

.practice-card .progress-panel .progress-panel-stat-label {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.practice-card .progress-panel .progress-panel-stat-value {
  font-size: 0.82rem !important;
  color: var(--text-main) !important;
  font-weight: 700 !important;
}

.practice-card .progress-panel .chord-progress-toggle,
.practice-card .progress-panel .scale-progress-toggle {
  min-height: 28px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  padding: 0.1rem 0.6rem !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--app-surface) !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.practice-card .progress-panel .chord-progress-toggle-active,
.practice-card .progress-panel .scale-progress-toggle-active {
  background: var(--blue) !important;
  border-color: var(--blue-deep) !important;
  color: var(--app-text-on-primary) !important;
}

/* allow-hardcoded-colour: decorative chord-progress bar gradient — top stop is a soft pink that has no semantic token */
.practice-card .chord-progress-column-fill,
.practice-card .chord-progress-bar-fill {
  background: linear-gradient(to top, var(--blue) 0%, var(--purple) 60%, #f0a3d6 100%) !important;
}

/* ---------- Defeat the legacy `.card`/`.trainer-shell` outer styles ---- */
.practice-card.card,
.practice-card.trainer-shell {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
}


/* Keep Scale Trainer hand focus options inline on one row. */
.practice-card--scale .control-dock .scale-trainer-hand-radios.option-chip-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.22rem !important;
  align-items: center !important;
}

.practice-card--scale .control-dock .scale-trainer-hand-radios.option-chip-group > legend {
  flex: 0 0 100% !important;
  margin: 0 0 0.18rem !important;
}

.practice-card--scale .control-dock .scale-trainer-hand-radios.option-chip-group > label {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  justify-content: center !important;
}
/* ArpeggioTrainer.css — trainer-specific visual rules layered on top of
   the Phase 5A trainer layout primitives (src/ui/trainer/trainer.css)
   and the legacy --nt-* tokens from notation-trainer-design.css. The
   outer page shell, control panel, action row, workspace, and feedback
   block are owned by the trainer primitives; everything below is
   arpeggio-specific content: the sequence pills, the mini piano
   keyboard, the custom-pattern editor chip row, and the saved-list. */

.arp-trainer__subheading {
  margin: 0;
  color: var(--nt-text-muted);
  font-size: var(--nt-font-sm);
}

/* ── Field group inside AppTrainerControlPanel ────────────────────────── */
.arp-controls__group {
  display: inline-flex;
  flex-direction: column;
  gap: var(--nt-space-1);
  min-width: 0;
}

.arp-controls__label {
  font-size: var(--nt-font-xs);
  font-weight: 600;
  color: var(--nt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.arp-controls__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-2);
  min-height: var(--nt-touch-min);
  padding: 0 var(--nt-space-3);
  border-radius: var(--nt-radius-sm);
  background: var(--nt-surface-soft);
  border: 1.5px solid var(--nt-border);
  cursor: pointer;
  font-size: var(--nt-font-sm);
  color: var(--nt-text);
  box-sizing: border-box;
}

.arp-controls__toggle input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--nt-accent);
}

/* ── Parent-only custom pattern editor wrapper ────────────────────────── */
.arp-custom-panel__header-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--nt-space-2));
}

/* ── Sequence display ──────────────────────────────────────────────────── */
/* Lives inside an AppTrainerWorkspace, so it brings only its own layout
   rules — no extra surface / border / padding. */
.arp-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  min-width: 0;
}

.arp-sequence__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 2.4rem;
  padding: 0 var(--nt-space-3);
  border-radius: var(--nt-radius-pill);
  background: var(--nt-surface);
  border: 1.5px solid var(--nt-border-soft);
  color: var(--nt-text);
  font-size: var(--nt-font-sm);
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.arp-sequence__pill--hand-left {
  font-style: italic;
}

.arp-sequence__pill--pending {
  background: var(--nt-surface);
}

.arp-sequence__pill--current {
  background: var(--nt-accent-soft);
  border-color: var(--nt-accent);
  color: var(--nt-accent-hover);
  /* Outer ring uses the same accent-soft surface as the fill, giving a
     gentle halo without introducing a new colour literal. */
  box-shadow: 0 0 0 3px var(--nt-accent-soft);
}

.arp-sequence__pill--correct {
  background: var(--nt-success-soft);
  border-color: var(--nt-success-border);
  color: var(--nt-success);
}

.arp-sequence__pill--wrong {
  background: var(--nt-error-soft);
  border-color: var(--nt-error-border);
  color: var(--nt-error);
}

.arp-sequence__pill--missed {
  background: var(--nt-warn-soft);
  border-color: var(--nt-warn-border);
  color: var(--nt-warn);
}

/* ── Mini piano keyboard ───────────────────────────────────────────────── */
.arp-keyboard {
  position: relative;
  display: block;
  width: 100%;
  height: 130px;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--nt-radius-md);
  background: linear-gradient(180deg, var(--nt-surface-sunken), var(--nt-surface));
  border: 1px solid var(--nt-border);
  box-sizing: border-box;
  user-select: none;
  touch-action: manipulation;
}

.arp-keyboard__white-row {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.arp-keyboard__white {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--nt-border);
  background: var(--app-surface);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  font-size: 0.65rem;
  color: var(--nt-text-soft);
  box-sizing: border-box;
}

.arp-keyboard__white:last-child {
  border-right: none;
}

.arp-keyboard__black-row {
  position: absolute;
  inset: 0 0 38% 0;
  pointer-events: none;
}

.arp-keyboard__black {
  position: absolute;
  width: 1.2%;
  height: 100%;
  background: var(--app-text);
  border-radius: 0 0 var(--nt-radius-sm) var(--nt-radius-sm);
  transform: translateX(-50%);
}

.arp-keyboard__white--current,
.arp-keyboard__black--current {
  background: var(--nt-accent);
  color: var(--app-text-on-primary);
}

.arp-keyboard__white--correct,
.arp-keyboard__black--correct {
  background: var(--nt-success);
  color: var(--app-text-on-primary);
}

.arp-keyboard__white--wrong,
.arp-keyboard__black--wrong {
  background: var(--nt-error);
  color: var(--app-text-on-primary);
}

/* ── Summary detail row (lives inside an AppTrainerFeedback) ────────────── */
.arp-summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2) var(--nt-space-4);
  font-size: var(--nt-font-sm);
}

.arp-summary__row strong {
  font-weight: 700;
}

/* ── Custom pattern editor (parent only) ───────────────────────────────── */
.arp-custom {
  display: grid;
  gap: var(--nt-space-3);
}

.arp-custom__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  align-items: center;
  min-height: var(--nt-touch-min);
  padding: var(--nt-space-2);
  background: var(--nt-surface-soft);
  border: 1px dashed var(--nt-border);
  border-radius: var(--nt-radius-md);
  min-width: 0;
}

.arp-custom__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-1);
  padding: 4px var(--nt-space-2);
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-pill);
  font-size: var(--nt-font-sm);
  font-weight: 600;
  color: var(--nt-text);
}

.arp-custom__chip-remove {
  min-height: 1.6rem;
  padding: 0 var(--nt-space-1);
}

.arp-custom__saved-list {
  display: grid;
  gap: var(--nt-space-2);
  min-width: 0;
}

.arp-custom__saved-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-2);
  padding: var(--nt-space-2) var(--nt-space-3);
  border-radius: var(--nt-radius-md);
  background: var(--nt-surface);
  border: 1px solid var(--nt-border-soft);
  min-width: 0;
}

.arp-custom__saved-item__name {
  font-weight: 600;
  color: var(--nt-text-strong);
  margin: 0;
}

.arp-custom__saved-item__notes {
  font-size: var(--nt-font-sm);
  color: var(--nt-text-muted);
  margin: 0;
}

.arp-custom__saved-item__actions {
  display: flex;
  gap: var(--nt-space-2);
  margin-left: auto;
}

@media (max-width: 720px) {
  .arp-keyboard { height: 110px; }
}
/* OstinatoTrainer.css — Ostinato Trainer teaching-visual styles.

   Phase 5E note: shared UI chrome (buttons, badges, status banners, the
   primary card / panel / control surfaces) now lives in the design-system
   primitives (AppButton, AppBadge, AppStatusBanner, AppTrainerScreen,
   AppTrainerHeader, AppTrainerControlPanel, AppTrainerWorkspace,
   AppTrainerActionRow, AppTrainerFeedback). Only Ostinato-specific
   teaching visuals (the lesson selector, the rhythm TAP target, the
   review accuracy bar, per-repeat lesson cards, and the live count-in
   display) remain in this file. */

.ost-trainer {
  --ost-accent:       var(--profile-accent);
  --ost-accent-soft:  var(--profile-accent-soft);
  /* --ost-tap-bg: lightest profile tint so the large TAP touch-target
     does not read as a saturated colour block on vibrant presets.
     Callers may override per-preset by setting --ost-tap-bg directly. */
  --ost-tap-bg:       var(--profile-bg, var(--app-bg));
  --ost-card:         var(--app-surface);
  --ost-border:       var(--app-border);
  --ost-text:         var(--app-text);
  --ost-text-muted:   var(--app-text-muted);
  --ost-success:      var(--app-success);
  --ost-warning:      var(--app-warning);
  --ost-danger:       var(--app-danger);
  color-scheme: light;
  box-sizing: border-box;
}

.ost-trainer *,
.ost-trainer *::before,
.ost-trainer *::after {
  box-sizing: border-box;
}

/* ── Two-column layout (lesson selector + main column) ─────────────── */
.ost-trainer__layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .ost-trainer__layout {
    grid-template-columns: 1fr;
  }
}

/* ── Lesson selector panel (domain teaching surface) ──────────────── */
.ost-selector {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: 10px;
  padding: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
  min-width: 0;
}

.ost-selector__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ost-text);
}

.ost-selector__group-heading {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ost-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ost-lesson-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  min-height: 44px;
  color: var(--ost-text);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.ost-lesson-row:hover {
  border-color: var(--ost-accent);
}

.ost-lesson-row--selected {
  border-color: var(--ost-accent);
  background: var(--ost-accent-soft);
}

.ost-lesson-row__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.ost-lesson-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ost-text-muted);
}

/* ── Main column ──────────────────────────────────────────────────── */
.ost-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.ost-info-card__goal {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ost-text-muted);
}

/* ── Control extras (tempo stepper + AppCheckbox rows) ─────────────
   Phase 5K removed the .ost-checkbox-row chrome (Count-in /
   Metronome toggles) because AppCheckbox now owns the row layout.
   The wrapper retains only the flex group that arranges the
   AppStepper and the AppCheckbox children side-by-side. */
.ost-controls__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

/* ── Live attempt status (count-in display + status text) ─────────── */
.ost-live__status {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ost-text);
}

.ost-live__count-in {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ost-accent);
  text-align: center;
}

.ost-live__counts {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--ost-text-muted);
  flex-wrap: wrap;
}

/* ── Rhythm TAP button (domain-specific large touch target) ───────── */
.ost-tap-button {
  display: block;
  width: 100%;
  min-height: 80px;
  margin-top: 0.5rem;
  border: 2px dashed var(--ost-accent);
  background: var(--ost-tap-bg);
  color: var(--ost-accent);
  font-size: 1.6rem;
  font-weight: 800;
  border-radius: 12px;
  cursor: pointer;
}

.ost-tap-button:active {
  background: var(--ost-accent);
  color: var(--app-surface);
}

/* ── Review panel (post-attempt teaching surface) ─────────────────── */
.ost-review {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ost-review__headline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.ost-review__detail {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ost-text);
  line-height: 1.4;
}

.ost-review__accuracy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ost-review__accuracy-bar {
  flex: 1;
  height: 14px;
  background: var(--app-border);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}

.ost-review__accuracy-fill {
  height: 100%;
  background: var(--ost-success);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.ost-review__accuracy-fill--low    { background: var(--ost-danger);  }
.ost-review__accuracy-fill--medium { background: var(--ost-warning); }

.ost-review__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.ost-review__metric {
  background: var(--app-secondary);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}

.ost-review__metric--correct { color: var(--ost-success); font-weight: 700; }
.ost-review__metric--wrong   { color: var(--ost-danger);  font-weight: 700; }

.ost-review__repeats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ost-review__repeat-card {
  background: var(--app-surface-raised);
  border: 1px solid var(--ost-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  min-width: 110px;
}

.ost-review__repeat-card--strong { border-color: var(--ost-success); background: var(--app-success-surface); }
.ost-review__repeat-card--weak   { border-color: var(--ost-danger);  background: var(--app-danger-surface); }

.ost-review__repeat-label {
  font-weight: 700;
  font-size: 0.85rem;
}

.ost-review__hand-summary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.ost-review__next-step {
  margin: 0;
  font-size: 0.95rem;
  background: var(--ost-accent-soft);
  color: var(--app-text-emphasis);
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
}

.ost-review__actions {
  margin-top: 0.3rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
   NOTATION TRAINER STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.notation-trainer {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.notation-trainer-header {
  display: grid;
  gap: 0.5rem;
}

.notation-trainer-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--app-text);
}

/* Stage tab bar */
.notation-stage-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.notation-tab {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 6px;
  background: var(--app-surface-raised);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--app-text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  min-height: 44px;
}

.notation-tab:hover {
  background: var(--app-border);
  border-color: var(--app-text-subtle);
  color: var(--app-text);
}

.notation-tab--active {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-text-on-primary);
}

.notation-tab-number {
  font-size: 0.72rem;
  font-weight: 700;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.notation-tab--active .notation-tab-number {
  background: rgba(255,255,255,0.25);
}

/* Shared settings row */
.notation-shared-settings {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.notation-setting-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--app-text);
  white-space: nowrap;
}

.notation-setting-select {
  font-size: 0.82rem;
  padding: 0.25rem 0.5rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 5px;
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  min-width: 12rem;
  max-width: 22rem;
}

/* MIDI activation row */
.notation-midi-row {
  margin-top: 0.25rem;
}

.notation-activate-btn {
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--app-primary);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-primary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.notation-activate-btn:hover {
  background: var(--profile-accent-soft);
}

.notation-midi-active {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-success);
  margin: 0;
}

/* Sub-panel (shared by all trainer stages) */
.notation-panel {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.notation-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.notation-panel-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--app-text);
}

.notation-score-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.notation-score-text {
  font-size: 0.8rem;
  color: var(--app-text);
}

/* Instruction + hear button row */
.notation-instruction-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.notation-instruction-row .notation-instruction {
  margin: 0;
  flex: 1;
}

.notation-hear-btn {
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--trainer-scale-accent);
  border-radius: 6px;
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-hover);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}

.notation-hear-btn:hover {
  background: var(--trainer-scale-accent-soft);
}


/* Staff area */
.notation-staff-area {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 0.5rem;
  min-height: 70px;
}

.staff-display svg {
  display: block;
}

/* Instructions */
.notation-instruction {
  font-size: 0.9rem;
  color: var(--app-text);
  margin: 0;
}

/* Answer buttons */
.notation-answer-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.notation-answer-btn {
  min-width: 2.8rem;
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 6px;
  background: var(--app-surface-raised);
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.notation-answer-btn:hover:not(.disabled) {
  background: var(--app-border);
  border-color: var(--app-text-subtle);
}

.notation-answer-btn.disabled,
.notation-answer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Feedback */
.notation-feedback {
  padding: 0.5rem 0.75rem;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 500;
  min-width: 0;
}

.notation-feedback--correct {
  background: var(--app-success-surface);
  color: var(--app-success);
  border: 1px solid var(--app-success-border);
}

.notation-feedback--wrong {
  background: var(--app-danger-surface);
  color: var(--app-danger);
  border: 1px solid var(--app-danger-border);
}

/* Buttons */
.notation-next-btn,
.notation-start-btn,
.notation-stop-btn {
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  border: none;
  touch-action: manipulation;
  letter-spacing: 0.01em;
}

.notation-next-btn {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
}

.notation-next-btn:hover {
  background: var(--app-primary-hover);
}

.notation-start-btn {
  background: var(--app-success);
  color: var(--app-text-on-primary);
}

.notation-start-btn:hover {
  background: var(--app-success);
}

.notation-stop-btn {
  background: var(--app-danger);
  color: var(--app-text-on-primary);
}

.notation-stop-btn:hover {
  background: var(--app-danger);
}

.notation-reset-btn,
.notation-show-btn {
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 6px;
  background: var(--app-surface-raised);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--app-text);
  cursor: pointer;
  min-height: 44px;
}

.notation-reset-btn:hover,
.notation-show-btn:hover {
  background: var(--app-border);
}

/* Speak / read-aloud button — matches hear-btn palette but distinct colour */
.notation-speak-btn {
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--trainer-notation-accent);
  border-radius: 6px;
  background: var(--trainer-notation-accent-soft);
  color: var(--trainer-notation-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}

.notation-speak-btn:hover {
  background: var(--trainer-notation-accent-soft);
}

/* Feedback row — allows speak button to sit inline with feedback text */
.notation-feedback-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Keyboard hint */
.notation-keyboard-hint {
  font-size: 0.72rem;
  color: var(--app-text-subtle);
  font-weight: 400;
}

/* Hints */
.notation-hint {
  font-size: 0.8rem;
  margin: 0;
  color: var(--app-text-muted);
}

.notation-hint--muted {
  color: var(--app-text-subtle);
}

.notation-hint--ok {
  color: var(--app-success);
}

/* ─── Note Card — stage selector (replaces inline styles for 44 px touch targets) ─── */
.notation-stage-selector {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.notation-card-stage-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1.5px solid var(--app-border-strong);
  background: transparent;
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}

.notation-card-stage-btn--active {
  border-color: var(--app-primary);
  background: var(--profile-accent-soft);
  color: var(--app-primary);
  font-weight: 600;
}

.notation-card-stage-btn:hover:not(.notation-card-stage-btn--active) {
  background: var(--app-surface-raised);
  border-color: var(--app-text-subtle);
}

/* ─── Assignment mode banner (replaces inline style) ──────────────────────── */
.notation-assignment-banner {
  margin: 0.3rem 0 0;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  color: var(--app-info-text);
  font-size: 0.78rem;
  font-style: italic;
}

/* ─── Stage error boundary — free-play error state ─────────────────────────── */
.notation-loading--error {
  color: var(--app-danger);
  background: var(--app-danger-surface);
  border: 1px solid var(--app-danger-border);
  border-radius: 7px;
  padding: 0.5rem 0.75rem;
  font-style: normal;
}

/* Note Card Trainer */
.note-card-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  border: 2px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface-raised);
  min-height: 100px;
  justify-content: center;
}

.note-card-name {
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  font-weight: 800;
  color: var(--app-primary-hover);
  letter-spacing: -0.02em;
  line-height: 1;
}

.notation-staff-reveal {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 0.5rem;
}

/* Progress row */

.notation-expected-hint {
  font-size: 0.8rem;
}

.notation-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Music Piece Trainer */
.notation-file-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.notation-file-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--app-text);
}

.notation-file-input {
  font-size: 0.82rem;
  color: var(--app-text);
  max-width: 340px;
}

.notation-file-hint {
  font-size: 0.76rem;
}

.notation-loading {
  font-size: 0.84rem;
  color: var(--app-text-muted);
  font-style: italic;
  margin: 0;
}

.notation-piece-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--app-text);
}

.notation-piece-composer {
  font-size: 0.84rem;
  color: var(--app-text-muted);
}

.notation-osmd-area {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;  /* smooth scroll on iPad */
  min-height: 200px;
  transition: border-color 0.08s, box-shadow 0.08s;
}

/* Red flash when a wrong note is played */
.notation-osmd-area--wrong {
  border-color: var(--app-danger);
  /* allow-hardcoded-colour: danger flash glow tint matching --app-danger */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Green flash when a correct note is hit during Practice Accuracy */
.notation-osmd-area--correct {
  border-color: var(--app-success);
  /* allow-hardcoded-colour: success flash glow tint matching --app-success */
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

/* Practice Accuracy v1 — running summary row.
   Compact horizontal pill row shown live during practice and after the
   session ends. Pills are sized for iPad landscape; counters stay
   readable at glance without dominating the viewport. */
.practice-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  margin: 0.5rem 0;
  border-radius: 7px;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
}

.practice-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.practice-summary-pill--correct {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  color: var(--trainer-ear-accent-hover);
}

.practice-summary-pill--wrong {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

.practice-summary-pill--missed {
  background: var(--app-secondary);
  border-color: var(--app-border-strong);
  color: var(--app-text-muted);
}

.practice-summary-pill--score {
  background: var(--app-info-surface);
  border-color: var(--app-info-border);
  color: var(--app-text-emphasis);
  font-size: 0.95rem;
  padding: 0.25rem 0.65rem;
}

.practice-summary-pill--score.is-warn {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  color: var(--app-warning);
}

/* Practice Accuracy v1 — end-of-session summary block.
   Larger, calmer panel that lingers after Stop / natural finish so the
   child can read the result without scrolling. */
.practice-session-summary {
  margin: 0.7rem 0 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--app-success-surface);
  border: 1.5px solid var(--app-success-border);
  color: var(--app-success);
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  box-sizing: border-box;
}

.practice-session-summary-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.practice-session-summary-title strong {
  font-size: 1.15rem;
}

.practice-session-summary-body {
  font-size: 0.88rem;
  display: grid;
  gap: 0.15rem;
}

.practice-session-summary-context {
  font-size: 0.82rem;
  color: var(--trainer-ear-accent-hover);
  opacity: 0.85;
}

.practice-session-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.45rem;
  margin: 0.45rem 0 0.3rem;
}

.practice-session-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: var(--app-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 7px;
  min-width: 0;
  gap: 0.15rem;
}

.practice-session-summary-stat-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.practice-session-summary-stat-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.practice-session-summary-stat-value.is-ok    { color: var(--trainer-ear-accent-hover); }
.practice-session-summary-stat-value.is-warn  { color: var(--app-danger); }
.practice-session-summary-stat-value.is-muted { color: var(--app-text-muted); }

.practice-session-summary-message {
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--app-success);
  line-height: 1.35;
}

/* Bar review (Task 2). Compact chip row inside the end-of-session
   panel. The icon column (✓/⚠) is the at-a-glance signal; the
   percentage is for parents reviewing alongside the child. */

/* Tempo / next-step recommendation banner (Task 4). Sits between
   the encouragement message and the Practise-problem-bars button.
   Colour band reflects the result band (excellent / good / practise
   / tooHard) so the child has a quick at-a-glance read. */
.practice-session-recommendation {
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-size: 0.88rem;
  line-height: 1.35;
}

.practice-session-recommendation-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  margin-right: 0.15rem;
}

.practice-session-recommendation--excellent {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.practice-session-recommendation--good {
  background: var(--profile-accent-soft);
  border-color: var(--trainer-ostinato-accent-border);
  color: var(--app-text-emphasis);
}

.practice-session-recommendation--practise {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  color: var(--app-warning-text);
}

.practice-session-recommendation--tooHard {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger-text);
}

/* "Practise problem bars" action row (Task 3). Single conspicuous
   button at the bottom of the session summary; only rendered when
   problem bars exist. Styled to feel like a positive call-to-action,
   not a warning — so the child isn't discouraged by the framing. */
.practice-session-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.practice-session-summary-action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--app-primary-active);
  border-radius: 999px;
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  min-height: 44px;
  touch-action: manipulation;
}

.practice-session-summary-action-btn:hover {
  background: var(--app-text-emphasis);
  border-color: var(--app-text-emphasis);
}

.practice-session-summary-action-btn:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* Active practice status bar (Task 6).
   Single compact line that surfaces hand mode, measure range, BPM,
   current bar, and running counts. Sits between the OSMD area and
   the per-bar feedback strip so the child sees context + score
   feedback together. Wraps gracefully on narrow viewports. */
.practice-active-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.9rem;
  padding: 0.55rem 0.85rem;
  margin: 0.5rem 0;
  border-radius: 8px;
  background: var(--app-info-surface);
  border: 1.5px solid var(--app-info-border);
  color: var(--app-text-emphasis);
  font-size: 0.92rem;
  min-width: 0;
  box-sizing: border-box;
}

.practice-active-status-context {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  font-weight: 500;
  line-height: 1.35;
}

.practice-active-status-context strong {
  color: var(--child-immersive-bg);
  font-weight: 700;
}

/* Count-in badge — appears in the active-status strip during the
   practice pre-roll so the child can see how many bars remain before
   the practice clock starts. */
.practice-active-status-countin {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  color: var(--app-warning-text);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.practice-active-status-counts {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.practice-active-status-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 700;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
  min-height: 28px;
  font-size: 0.92rem;
}

.practice-active-status-count.is-ok    { color: var(--trainer-ear-accent-hover); border-color: var(--app-success-border); background: var(--app-success-surface); }
.practice-active-status-count.is-warn  { color: var(--app-warning); border-color: var(--app-warning-border); background: var(--app-warning-surface); }
.practice-active-status-count.is-muted { color: var(--app-text-muted); border-color: var(--app-border-strong); background: var(--app-surface-raised); }
.practice-active-status-count.is-score { font-size: 1rem; padding: 0.25rem 0.75rem; }

/* Practice Accuracy v1 — per-bar score-level feedback strip (Task 1).
   Sits directly under the OSMD area so each bar's status reads at the
   same eye-line as the notation. One labelled cell per measure; the
   colour bands match the in-summary "strong / practise / problem" copy
   so the live cue is consistent with what the child sees at the end
   of the session. Wraps on narrow viewports without scrolling. */
.practice-bar-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  margin: 0.4rem 0;
  border-radius: 7px;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  align-items: stretch;
}

.practice-bar-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  min-height: 38px;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--app-border);            /* pending */
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
}

.practice-bar-cell-num {
  font-weight: 700;
  font-size: 0.85rem;
}

.practice-bar-cell-pct {
  font-size: 0.7rem;
  opacity: 0.95;
}

.practice-bar-cell--pending {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.practice-bar-cell--strong {
  background: var(--app-success-surface);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.practice-bar-cell--practise {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  color: var(--app-warning);
}

.practice-bar-cell--missed {
  background: var(--app-border);
  border-color: var(--app-border-strong);
  color: var(--app-text-muted);
}

.practice-bar-cell--wrong {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

.practice-bar-cell.is-current {
  outline: 2px solid var(--app-text-emphasis);
  outline-offset: 1px;
  /* allow-hardcoded-colour: emphasis-text deep navy glow tint matching outline */
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
}

/* Current expected event hint — keeps the active chord visible even
   when the OSMD cursor sits on a dense passage. */
.practice-current-expected {
  margin: 0.3rem 0;
  padding: 0.35rem 0.6rem;
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  border-radius: 6px;
  color: var(--app-text-emphasis);
  font-size: 0.88rem;
}

.practice-current-expected-label {
  font-weight: 600;
}

.practice-current-expected-bar {
  color: var(--app-info-hover);
}

.osmd-container {
  min-height: 200px;
}

.osmd-error {
  padding: 1rem;
}

/* ── MF-59: Compact unified control strip ──────────────────────────────
   One flex row on desktop, at most two rows on iPad (≤900 px breakpoint).
   Toggle pills replace checkboxes. Primary action visually prominent. */
.mpt-control-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  background: var(--app-surface);
  border: 1.5px solid var(--app-border-strong);
  border-radius: 10px;
  min-width: 0;
  box-sizing: border-box;
}

/* Invisible row-break: hidden on wide, forces 2nd row on narrow (≤900 px) */
.mpt-strip-row-break {
  display: none;
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .mpt-strip-row-break { display: block; }
}

/* Stepper cells inside the strip */
.mpt-strip-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mpt-strip-stepper .number-stepper-label { font-size: 0.72rem; }
.mpt-strip-stepper .number-stepper-button {
  height: 2.1rem;
  width: 2.1rem;
  font-size: 0.95rem;
}
.mpt-strip-stepper .number-stepper-value {
  height: 2.1rem;
  width: clamp(3rem, 12vw, 4rem);
  font-size: 0.88rem;
}
.mpt-strip-stepper--tempo { gap: 4px; }
.mpt-strip-stepper--xs .number-stepper-value { width: 2.6rem; }

/* Suggested-tempo reset button inside the tempo stepper */
.mpt-strip-tempo-reset {
  appearance: none;
  padding: 0 8px;
  height: 1.9rem;
  border-radius: 6px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.mpt-strip-tempo-reset:hover { background: var(--app-border); }

/* Compact select label + select inside the strip */
.mpt-strip-select-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
}
.mpt-strip-select {
  font-size: 0.82rem;
  padding: 0.15rem 0.4rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  min-height: 34px;
}

/* Toggle pills — replaces checkboxes for Loop, Count-in, Metronome */
.mpt-toggle-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  height: 34px;
  min-height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--app-border-strong);
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  touch-action: manipulation;
}
.mpt-toggle-pill.is-on {
  background: var(--profile-accent-soft, rgba(160,80,240,0.12));
  border-color: var(--profile-accent, #a050f0);
  color: var(--profile-accent-text, var(--app-text-emphasis));
}
.mpt-toggle-pill:active { opacity: 0.8; }

/* Wrapper that groups a toggle pill with its TheoryHelpButton sibling.
   Prevents nesting a <button> inside a <button> (invalid HTML). */
.mpt-toggle-with-help {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Primary action button — Start Practice */
.mpt-strip-primary {
  appearance: none;
  padding: 0 18px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.mpt-strip-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.mpt-strip-primary:active:not(:disabled) { opacity: 0.88; }

/* Stop button */
.mpt-strip-stop {
  appearance: none;
  padding: 0 15px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--app-danger);
  background: var(--app-danger-surface);
  color: var(--app-danger);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.mpt-strip-stop:active { opacity: 0.82; }

/* Secondary buttons — Restart, Listen, Hear Section */
.mpt-strip-secondary {
  appearance: none;
  padding: 0 13px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--app-border-strong);
  background: var(--app-surface-raised);
  color: var(--app-text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s;
}
.mpt-strip-secondary:hover:not(:disabled) {
  background: var(--app-border);
}
.mpt-strip-secondary.is-active {
  border-color: var(--trainer-scale-accent);
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-hover);
}
.mpt-strip-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

/* iPad compact overrides */
@media (max-width: 768px) {
  .mpt-control-strip {
    gap: 5px 7px;
    padding: 7px 9px;
  }
  .mpt-strip-stepper .number-stepper-button { height: 2rem; width: 2rem; }
  .mpt-strip-stepper .number-stepper-value  { height: 2rem; }
}

/* Legacy two-row container kept for other trainer uses */
.notation-section-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.notation-section-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.notation-section-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
}

.notation-section-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--app-text);
  white-space: nowrap;
  min-height: 36px;
}

.notation-number-input {
  width: 4.2rem;
  padding: 0.3rem 0.45rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
  min-height: 36px;
  box-sizing: border-box;
  /* Disable iOS spinner styling jitter when the number input has focus. */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.notation-section-hint {
  font-size: 0.76rem;
}

/* Import warnings */
.notation-warnings {
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  border-radius: 7px;
  padding: 0.5rem 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.notation-piece-deleted-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  color: var(--app-text);
  font-size: 0.88rem;
}

.notation-warnings-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.15rem;
}

.notation-warning {
  font-size: 0.8rem;
}

.notation-warning--info  { color: var(--app-primary-active); }
.notation-warning--warn  { color: var(--app-warning); }
.notation-warning--error { color: var(--app-danger); }

/* Compact / softer warning panel — used when warnings are grouped. */
.notation-warnings--compact {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
  padding: 0.4rem 0.6rem;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.notation-warnings--compact .notation-warnings-list {
  padding-left: 1rem;
}

.notation-warnings--compact .notation-warning {
  font-size: 0.78rem;
  line-height: 1.3;
}

.notation-warnings-details {
  max-height: 8rem;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  border-radius: 5px;
  font-size: 0.76rem;
  color: var(--app-warning-text);
  display: grid;
  gap: 0.3rem;
}

.notation-warning-detail-block {
  display: grid;
  gap: 0.1rem;
}

.notation-warning-detail-summary {
  font-weight: 500;
}

.notation-warning-detail-range {
  color: var(--app-warning);
}

.notation-warnings-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.notation-warnings-toggle {
  background: var(--app-warning-surface);
}

.notation-answer-reveal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--app-text);
  padding: 0.4rem 0.75rem;
  background: var(--trainer-notation-accent-soft);
  border: 1px solid var(--trainer-notation-accent-border);
  border-radius: 6px;
}

/* ─── Music Piece Practice page shell (MF-43) ──────────────────────────── */
/* .page--music-piece wrapper sits outside .music-piece-trainer. It clips
   any internal overflow that could scroll the whole app horizontally on
   narrow screens (iPad portrait). All layout belongs to MusicPieceTrainer;
   the page wrapper stays passive. */
.page--music-piece {
  overflow-x: hidden;
}

/* ─── Music Piece empty state (MF-43) ──────────────────────────────────── */
/* Shown when phase === 'idle' and no score is loaded yet. Gives the child
   context about how to open a piece without breaking the layout. */
.mpt-empty-state {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--nt-surface-soft, #f7f6fa);
  border: 1px solid var(--nt-border-soft, #e5e4e7);
  margin: 0.5rem 0;
}

.mpt-empty-state__message {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--nt-text, #1f1530);
  font-weight: 500;
}

.mpt-empty-state__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--nt-text-muted, #6b7280);
}

/* MF-44: heading inside the empty state */
.mpt-empty-state__heading {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nt-text, #1f1530);
}

/* MF-44: when the Sheet Library picker is embedded the card chrome is removed
   so the library renders flush and full-width inside the page rather than
   looking boxed inside a small card. */
.mpt-empty-state--with-library {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* MF-44: wrapper for the embedded MusicLibrary inline picker */
.mpt-library-picker {
  margin-top: 0.5rem;
  min-width: 0;
  overflow-x: hidden;
}

/* ── MF-45: session status indicator ──────────────────────────────────── */
.mpt-session-status {
  display: flex;
  align-items: center;
  margin: 0.5rem 0 0.25rem;
  min-width: 0;
}
.mpt-session-status__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.mpt-session-status__badge--ready {
  background: rgba(31, 21, 48, 0.07);
  color: var(--nt-text-muted, #6b5f7a);
}
.mpt-session-status__badge--playing {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
}
.mpt-session-status__badge--countin {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
}
.mpt-session-status__badge--listening {
  background: rgba(59, 130, 246, 0.14);
  color: #1e3a5f;
}
.mpt-session-status__badge--ended {
  background: rgba(170, 59, 255, 0.12);
  color: #5b21b6;
}

/* ── MF-45: source badge and tempo inline ─────────────────────────────── */
.mpt-piece-info__source-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(170, 59, 255, 0.1);
  color: #6b21a8;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.mpt-piece-info__source-badge--sample {
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.mpt-piece-info__tempo-inline {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nt-text-muted, #6b5f7a);
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* ── MF-45: layout containers ─────────────────────────────────────────── */
.mpt-mastery-area {
  min-width: 0;
  margin-top: 0.25rem;
}
.mpt-feedback-area {
  min-width: 0;
  margin-top: 0.25rem;
}

/* ── MF-46: review next-step area ─────────────────────────────────────── */
/* Wraps buildPracticeChildMessage + generateRecommendation into a labelled
   surface. Layout-only: no new scoring logic. */
.mpt-review-next-step {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.4rem;
  min-width: 0;
}
.mpt-review-next-step__label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.05rem;
}


/* ── MF-47: timing chart ────────────────────────────────────────────────── */
/* Per-note timing offset scatter strip shown in the post-session review.
   Each tick mark is one correctly-played note. Position on the strip maps
   the note's offsetSeconds (played − expected) to the 3-zone background:
     amber (left)  = early  (dt < −onTimeWindow)
     green (centre)= on-time (|dt| ≤ onTimeWindow)
     amber (right) = late   (dt >  onTimeWindow)
   The 35%/65% zone boundaries are exact for BPM-scaled in-tempo sessions
   because matchWindowSec = 0.5 beat and onTimeWindowSec = 0.15 beat →
   earlyEnd = (0.5−0.15)/1.0 = 35%, lateStart = (0.5+0.15)/1.0 = 65%.
   (The chart only renders for in-tempo sessions, so this is always correct.) */
.mpt-timing-chart {
  margin: 0.5rem 0 0.4rem;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  box-sizing: border-box;
}
.mpt-timing-chart__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mpt-timing-chart__title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mpt-timing-chart__subtitle {
  font-size: 0.78rem;
  color: var(--app-text-muted);
}
.mpt-timing-chart__track {
  position: relative;
  height: 44px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(
    to right,
    var(--app-warning-surface)  0%,
    var(--app-warning-surface) 35%,
    var(--app-success-surface) 35%,
    var(--app-success-surface) 65%,
    var(--app-warning-surface) 65%,
    var(--app-warning-surface) 100%
  );
  border: 1px solid var(--app-border);
  min-width: 0;
  box-sizing: border-box;
}
/* Tick mark for each correctly-played note. Semi-transparent so overlapping
   ticks show density: a cluster in the green zone means good timing. */
.mpt-timing-chart__dot {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 22px;
  margin-top: -11px;
  border-radius: 1.5px;
  /* allow-hardcoded-colour: neutral timing dot tint */
  background: rgba(31, 21, 48, 0.32);
  transform: translateX(-50%);
  pointer-events: none;
}
.mpt-timing-chart__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--app-text-muted);
  padding: 0 0.1rem;
}
.mpt-timing-chart__axis-label {
  /* axis labels share the muted text style; no individual colouring */
}
/* Timing drift hint — shown when ≥ 30% of correct notes are clearly
   early or late. Styled like the warning recommendation banner. */
.mpt-timing-chart__next {
  margin: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  color: var(--app-warning-text);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* ── MF-51: Post-session feedback action row ─────────────────────────── */
.mpt-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.25rem 0 0.35rem; }
.mpt-feedback-actions__heading { font-size: 0.76rem; font-weight: 600; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.1rem; flex-shrink: 0; }
/* "Try full piece again" gets a neutral surface treatment to distinguish it
   from the primary "Practise bar N" CTA. Two-class selector for specificity. */
.mpt-feedback-actions__full-piece-btn.practice-session-summary-action-btn { background: var(--app-surface-raised); color: var(--app-text); border-color: var(--app-border-strong); }
.mpt-feedback-actions__full-piece-btn.practice-session-summary-action-btn:hover { background: var(--app-border); color: var(--app-text); border-color: var(--app-text-muted); }

/* ── MF-52: Practice chunk review card ──────────────────────────────── */
.mpt-review-chunk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.55rem 0.7rem; margin: 0.1rem 0 0.25rem; background: var(--app-surface-raised); border: 1px solid var(--app-border); border-radius: 8px; box-sizing: border-box; min-width: 0; }
.mpt-review-chunk__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.mpt-review-chunk__heading { font-size: 0.72rem; font-weight: 600; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mpt-review-chunk__text { font-size: 0.88rem; color: var(--app-text); line-height: 1.3; }

/* iPad portrait (768 px) — reduce setting-select min-width so 3 selects
   can share the row without causing horizontal overflow */
@media (max-width: 768px) {
  .notation-setting-select {
    min-width: 8rem;
  }

  /* Note Card stage selector wraps cleanly to single-column on narrow iPad */
  .notation-stage-selector {
    gap: 0.3rem;
  }

  /* Music Piece Practice — score area scrolls horizontally on narrow iPad
     rather than forcing the entire page to overflow. */
  .music-piece-trainer .notation-osmd-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* MF-46: session summary — reduce side padding and tighten stat cell
     min-width so all 7 stat cells (Correct + Wrong + Missed + Extra +
     Early + On-time + Late) can share one row on a 768 px iPad. */
  .practice-session-summary {
    padding: 0.7rem 0.8rem;
  }
  .practice-session-summary-grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  }

  /* MF-46: review next-step label hides on narrow iPad to save vertical
     space — the child message and recommendation are self-explanatory. */
  .mpt-review-next-step__label {
    display: none;
  }
}

/* iPad responsive (≤600 px — phones and narrow iPad portrait) */
@media (max-width: 600px) {
  .notation-stage-tabs {
    gap: 0.2rem;
  }

  .notation-tab {
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  .notation-tab-label {
    display: none;
  }

  .notation-tab-number {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
  }

  .note-card-name {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .notation-staff-area,
  .notation-osmd-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .notation-answer-buttons {
    gap: 0.3rem;
  }

  .notation-answer-btn {
    min-width: 2.4rem;
    font-size: 0.9rem;
  }


  .notation-number-input {
    width: 3.6rem;
    font-size: 0.85rem;
  }

  .practice-active-status {
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
  }

  .practice-active-status-count {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
  }
}

/* ─── Music Piece — Practice Review v1 + drill (Tasks 1, 2, 3) ─────────── */
/* The existing .practice-session-* surfaces are kept untouched; the
   classes below add the v1 Practice Review panel + drill-mode status
   banner + drill-encouragement string. Memory-only — none of this state
   reaches Firestore or localStorage. */

.mpt-drill-status,
.mpt-preview-notice {
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}

.mpt-drill-status {
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  color: var(--app-success);
}

.mpt-preview-notice {
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  color: var(--app-warning);
}

.mpt-drill-encouragement {
  margin: 0.45rem 0 0;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  color: var(--app-success);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}


/* ─── Music Piece — Sheet Library v1 ────────────────────────────────────
   Local Piece info panel + Recent pieces list. Memory + localStorage
   metadata only — no Firestore, no XML payload persistence. */

.mpt-piece-info {
  display: grid;
  gap: 0.4rem;
  margin: 0.4rem 0 0.2rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  min-width: 0;
  box-sizing: border-box;
}

.mpt-piece-info__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mpt-piece-info__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mpt-piece-info__title strong {
  font-size: 0.98rem;
  color: var(--app-text);
  font-weight: 700;
}

.mpt-piece-info__composer {
  font-size: 0.84rem;
  color: var(--app-text-muted);
}

.mpt-piece-info__toggle {
  font-size: 0.78rem;
  min-height: 32px;
}

.mpt-piece-info__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.4rem 0.7rem;
  font-size: 0.84rem;
  color: var(--app-text);
}

.mpt-piece-info__pair {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mpt-piece-info__pair--wide {
  grid-column: 1 / -1;
}

.mpt-piece-info__pair dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  margin: 0;
}

.mpt-piece-info__pair dd {
  margin: 0;
  font-weight: 600;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.mpt-piece-info__filename {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--app-text);
  word-break: break-all;
}

/* Recent pieces list — pill row near the file picker. Clicking a pill
   prompts for re-upload (XML payload is intentionally not cached). */
.mpt-recent-pieces {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.82rem;
  min-width: 0;
}

.mpt-recent-pieces__label {
  font-weight: 600;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.mpt-recent-pieces__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.mpt-recent-pieces__item {
  display: inline-flex;
}

.mpt-recent-pieces__btn {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  max-width: 320px;
  touch-action: manipulation;
}

.mpt-recent-pieces__btn:hover,
.mpt-recent-pieces__btn:focus-visible {
  background: var(--app-surface-raised);
  border-color: var(--app-text-subtle);
  outline: none;
}

.mpt-recent-pieces__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.mpt-recent-pieces__loading {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--app-text-muted);
  font-style: italic;
}

.mpt-recent-pieces__filename {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--app-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.mpt-reupload-prompt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid var(--trainer-ostinato-accent-border);
  background: var(--profile-accent-soft);
  color: var(--app-text-emphasis);
  font-size: 0.9rem;
  min-width: 0;
  box-sizing: border-box;
}

.mpt-reupload-prompt__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.mpt-reupload-prompt__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--app-text-emphasis);
  word-break: break-word;
}

.mpt-reupload-prompt__message {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--app-text);
}

.mpt-reupload-prompt__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.mpt-reupload-prompt__choose {
  min-height: 40px;
}

/* Legacy mpt-tempo-cell kept only for any remaining tempo hint reference. */
.mpt-tempo-cell .number-stepper-value {
  height: 2.3rem;
  width: clamp(3.5rem, 14vw, 4.4rem);
  font-size: 0.92rem;
}

.mpt-tempo-hint {
  font-size: 0.78rem;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.mpt-tempo-suggested {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--trainer-scale-accent-border);
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 28px;
  touch-action: manipulation;
}

.mpt-tempo-suggested:hover,
.mpt-tempo-suggested:focus-visible {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent-border);
  outline: none;
}

/* OSMD error recovery card (Issue 2). */
.mpt-osmd-error {
  margin: 0.5rem 0 0.3rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1.5px solid var(--app-danger-border);
  background: var(--app-danger-surface);
  color: var(--app-danger);
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.mpt-osmd-error__message {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-danger-text);
}

.mpt-osmd-error__detail {
  margin: 0;
  font-size: 0.78rem;
  color: var(--app-danger);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

@media (max-width: 600px) {
  .mpt-recent-pieces__title  { max-width: 9rem; }
  .mpt-recent-pieces__filename { display: none; }
  .mpt-piece-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Music Piece — Built-in samples + Testing checklist ─────────────── */

.mpt-samples {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.82rem;
  min-width: 0;
}

.mpt-samples__label {
  font-weight: 600;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.mpt-samples__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.mpt-samples__item {
  display: inline-flex;
}

.mpt-samples__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid var(--trainer-scale-accent-border);
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  touch-action: manipulation;
}

.mpt-samples__btn:hover:not(:disabled),
.mpt-samples__btn:focus-visible {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent-border);
  outline: none;
}

.mpt-samples__btn--active {
  background: var(--trainer-scale-accent-hover);
  border-color: var(--trainer-scale-accent-text);
  color: var(--app-text-on-primary);
}

.mpt-samples__btn--active:hover {
  background: var(--trainer-scale-accent-text);
}

.mpt-samples__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sample description line — sits inside the Piece info panel between the
   title and the optional expanded grid. */
.mpt-piece-info__sample-desc {
  margin: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--trainer-scale-accent-soft);
  border: 1px solid var(--trainer-scale-accent-border);
  color: var(--trainer-scale-accent-text);
  font-size: 0.86rem;
  line-height: 1.4;
}

.mpt-piece-info__sample-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--trainer-scale-accent-hover);
  color: var(--app-text-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 0.05rem;
}

.mpt-piece-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mpt-piece-info__tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--app-info-surface);
  border: 1px solid var(--app-info-border);
  color: var(--app-info-text);
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mpt-samples { font-size: 0.78rem; }
  .mpt-samples__btn { padding: 0.35rem 0.65rem; font-size: 0.78rem; }
}

/* ─── Phase 14A — Notation QA Harness manual-status pills ──────────────── */
.qa-status--pending      { color: var(--app-text-muted); }
.qa-status--pass         { color: var(--app-success); }
.qa-status--fail         { color: var(--app-danger); }
.qa-status--skip         { color: var(--app-warning); }

.notation-qa-harness {
  display: block;
  font-size: 0.9rem;
}
.notation-qa-harness ul ol,
.notation-qa-harness ul ul {
  font-size: 0.82rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
   NOTATION TRAINER — DESIGN SYSTEM v1
   ───────────────────────────────────────────────────────────────────────────
   Shared CSS tokens + base classes for the Notation Trainer family of
   panels: Note Names, Note Cards, Sight Reading, Music Piece, Intervals,
   Chords, Rhythm, Ear Training, Composer, Sheet Library.

   All tokens use the --nt- prefix so they cannot collide with the global
   variables in src/index.css (--text, --accent, --bg, …). Existing class
   names in notation.css and MusicLibrary.css are NOT renamed; this file
   adds new tokens + new classes that components opt into.

   Goals (per the design-system task list):
     • Consistent spacing, radius, button heights (44 px touch targets)
     • Calm, child-friendly colours (no harsh reds; muted feedback states)
     • Predictable feedback location and styling
     • Cards with intentional empty/loading/error states
     • Parent-facing panels visually distinct from child exercise panels
     • iPad-first responsiveness (no horizontal overflow on portrait)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale ──────────────────────────────────────────────────── */
  --nt-space-1: 0.25rem;
  --nt-space-2: 0.5rem;
  --nt-space-3: 0.75rem;
  --nt-space-4: 1rem;
  --nt-space-5: 1.25rem;
  --nt-space-6: 1.5rem;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --nt-radius-sm: 6px;
  --nt-radius-md: 8px;
  --nt-radius-lg: 12px;
  --nt-radius-pill: 999px;

  /* ── Touch targets ─────────────────────────────────────────────────── */
  --nt-touch-min: 44px;
  --nt-touch-comfortable: 48px;

  /* ── Surface colours ───────────────────────────────────────────────── */
  --nt-surface:        #ffffff;
  --nt-surface-soft:   #f8fafc;
  --nt-surface-sunken: #f1f5f9;
  --nt-surface-parent: #fbfaff;   /* tinted lavender for parent panels */
  --nt-overlay-tint:   rgba(15, 23, 42, 0.04);

  /* ── Border colours ────────────────────────────────────────────────── */
  --nt-border-soft:   #e5e7eb;
  --nt-border:        #cbd5e1;
  --nt-border-strong: #94a3b8;
  --nt-border-parent: #d9d4e6;

  /* ── Text colours ──────────────────────────────────────────────────── */
  --nt-text:        #1f2937;
  --nt-text-strong: #111827;
  --nt-text-muted:  #64748b;
  --nt-text-soft:   #94a3b8;

  /* ── Accent / brand (matches existing trainer blue) ────────────────── */
  --nt-accent:        #2563eb;
  --nt-accent-hover:  #1d4ed8;
  --nt-accent-soft:   #eff6ff;
  --nt-accent-border: #93c5fd;

  /* ── Calm feedback palette ─────────────────────────────────────────── */
  --nt-success:        #047857;
  --nt-success-soft:   #ecfdf5;
  --nt-success-border: #6ee7b7;

  /* Wrong = warm amber, not harsh red — child-friendly. */
  --nt-warn:        #b45309;
  --nt-warn-soft:   #fffbeb;
  --nt-warn-border: #fcd34d;

  /* Error reserved for hard failures (load/save/render errors), not for
     a wrong answer in a child trainer. */
  --nt-error:        #b91c1c;
  --nt-error-soft:   #fef2f2;
  --nt-error-border: #fca5a5;

  /* Parent / admin accent (gentler purple). */
  --nt-parent:        #6d28d9;
  --nt-parent-soft:   #f5f3ff;
  --nt-parent-border: #c4b5fd;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --nt-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --nt-shadow-lift: 0 2px 10px rgba(15, 23, 42, 0.08);

  /* ── Focus ring (single shared style, AA contrast on light bg) ─────── */
  --nt-focus-ring: 3px solid rgba(37, 99, 235, 0.55);

  /* ── Typography ────────────────────────────────────────────────────── */
  --nt-font-xs: 0.78rem;
  --nt-font-sm: 0.85rem;
  --nt-font-md: 0.95rem;
  --nt-font-lg: 1.05rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shared building blocks — opt-in via class name. Use ALONGSIDE the
   existing .notation-* classes; do not rename existing classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Exercise card — neutral, calm container for a trainer's main display
   (staff + answer area). Renders consistently across all trainers.
   The card sits inside .notation-panel and groups notation + answers
   visually. */
.nt-exercise-card {
  display: grid;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4);
  border: 1px solid var(--nt-border-soft);
  border-radius: var(--nt-radius-lg);
  background: var(--nt-surface);
  box-shadow: var(--nt-shadow-card);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Notation slot — centre the staff inside the card with a calm sunken
   background. Works for the VexFlow SVG and OSMD container alike. */
.nt-exercise-card__notation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--nt-space-3);
  border-radius: var(--nt-radius-md);
  background: var(--nt-surface-soft);
  border: 1px solid var(--nt-border-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 140px;
  min-width: 0;
}

/* Answer slot — sits beneath the notation; reserves comfortable
   vertical space so layout doesn't jump when answer buttons appear. */
.nt-exercise-card__answer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  align-items: center;
  min-height: var(--nt-touch-min);
}

/* Feedback slot — fixed location at the bottom of the card. Reserves
   a min-height so the layout doesn't shift when feedback appears or
   disappears between attempts. */
.nt-exercise-card__feedback {
  min-height: var(--nt-touch-min);
}

/* ── Section header — used at the top of every trainer panel for a
   consistent typographic rhythm. Optional, opt-in. ───────────────────── */
.nt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nt-space-2) var(--nt-space-3);
  min-width: 0;
}

.nt-section-header__title {
  margin: 0;
  font-size: var(--nt-font-lg);
  font-weight: 700;
  color: var(--nt-text-strong);
  letter-spacing: -0.01em;
}

/* ── Control row — one consistent row for label + select + button
   groups across all trainers. ─────────────────────────────────────────── */
.nt-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-2) var(--nt-space-3);
  padding: var(--nt-space-2) var(--nt-space-3);
  background: var(--nt-surface-soft);
  border: 1px solid var(--nt-border-soft);
  border-radius: var(--nt-radius-md);
  min-width: 0;
  box-sizing: border-box;
}

.nt-control-row + .nt-control-row {
  margin-top: var(--nt-space-2);
}

/* Control group — label + input pair. Stacks the label above the
   control so dropdown text never clips. */
.nt-control-group {
  display: inline-flex;
  flex-direction: column;
  gap: var(--nt-space-1);
  min-width: 0;
  max-width: 100%;
}

.nt-control-group--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--nt-space-2);
}

.nt-control-label {
  font-size: var(--nt-font-xs);
  font-weight: 600;
  color: var(--nt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Buttons — primary / secondary / ghost / parent. All at least 44px
   tall to satisfy iPad touch target sizing. ─────────────────────────── */
.nt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nt-space-2);
  padding: 0 var(--nt-space-4);
  min-height: var(--nt-touch-min);
  border-radius: var(--nt-radius-sm);
  border: 1.5px solid transparent;
  background: var(--nt-surface);
  color: var(--nt-text);
  font-size: var(--nt-font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  touch-action: manipulation;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}

.nt-btn:focus-visible {
  outline: var(--nt-focus-ring);
  outline-offset: 2px;
}

.nt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nt-btn--primary {
  background: var(--nt-accent);
  border-color: var(--nt-accent);
  color: #fff;
}
.nt-btn--primary:hover:not(:disabled) {
  background: var(--nt-accent-hover);
  border-color: var(--nt-accent-hover);
}

.nt-btn--secondary {
  background: var(--nt-surface);
  border-color: var(--nt-border);
  color: var(--nt-text);
}
.nt-btn--secondary:hover:not(:disabled) {
  background: var(--nt-surface-sunken);
  border-color: var(--nt-border-strong);
}

.nt-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--nt-text-muted);
}
.nt-btn--ghost:hover:not(:disabled) {
  background: var(--nt-surface-sunken);
  color: var(--nt-text);
}

.nt-btn--parent {
  background: var(--nt-parent-soft);
  border-color: var(--nt-parent-border);
  color: var(--nt-parent);
}
.nt-btn--parent:hover:not(:disabled) {
  background: var(--nt-parent);
  border-color: var(--nt-parent);
  color: #fff;
}

/* ── Selects + number inputs — consistent height to match buttons. ──── */
.nt-select,
.nt-number-input {
  min-height: var(--nt-touch-min);
  padding: 0 var(--nt-space-3);
  border: 1.5px solid var(--nt-border);
  border-radius: var(--nt-radius-sm);
  background: var(--nt-surface);
  color: var(--nt-text);
  font-size: var(--nt-font-sm);
  font-family: inherit;
  cursor: pointer;
  /* dropdown text fits without clipping at common widths */
  min-width: 10rem;
  max-width: 100%;
  box-sizing: border-box;
}

.nt-select:focus-visible,
.nt-number-input:focus-visible {
  outline: var(--nt-focus-ring);
  outline-offset: 1px;
  border-color: var(--nt-accent);
}

.nt-number-input {
  min-width: 4rem;
  max-width: 6rem;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedback — shared styles for the AttemptFeedback component AND any
   inline .notation-feedback usages. Calmer than the legacy harsh
   green/red so child trainers feel encouraging rather than punitive.
   ═══════════════════════════════════════════════════════════════════════════ */

.nt-feedback {
  display: flex;
  align-items: center;
  gap: var(--nt-space-2);
  padding: var(--nt-space-2) var(--nt-space-3);
  border-radius: var(--nt-radius-md);
  border: 1px solid var(--nt-border-soft);
  background: var(--nt-surface-soft);
  color: var(--nt-text);
  font-size: var(--nt-font-sm);
  font-weight: 500;
  line-height: 1.4;
  min-height: var(--nt-touch-min);
  box-sizing: border-box;
  max-width: 100%;
}

.nt-feedback__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.nt-feedback__body {
  flex: 1;
  min-width: 0;
}

.nt-feedback--success {
  background: var(--nt-success-soft);
  border-color: var(--nt-success-border);
  color: var(--nt-success);
}

.nt-feedback--warning {
  background: var(--nt-warn-soft);
  border-color: var(--nt-warn-border);
  color: var(--nt-warn);
}

.nt-feedback--error {
  background: var(--nt-error-soft);
  border-color: var(--nt-error-border);
  color: var(--nt-error);
}

.nt-feedback--info {
  background: var(--nt-accent-soft);
  border-color: var(--nt-accent-border);
  color: var(--nt-accent-hover);
}

.nt-feedback--loading {
  background: var(--nt-surface-soft);
  border-color: var(--nt-border-soft);
  color: var(--nt-text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Empty / loading / error state cards — used inside .nt-exercise-card
   or as standalone messages. All three share the same shape so layouts
   don't jump when content swaps.
   ═══════════════════════════════════════════════════════════════════════════ */

.nt-state {
  display: grid;
  gap: var(--nt-space-2);
  padding: var(--nt-space-4);
  border-radius: var(--nt-radius-md);
  border: 1px dashed var(--nt-border);
  background: var(--nt-surface-soft);
  color: var(--nt-text-muted);
  text-align: center;
  font-size: var(--nt-font-sm);
  min-height: 100px;
  align-items: center;
}

.nt-state--loading {
  border-style: solid;
  border-color: var(--nt-border-soft);
  font-style: italic;
}

.nt-state--error {
  border-style: solid;
  border-color: var(--nt-error-border);
  background: var(--nt-error-soft);
  color: var(--nt-error);
  text-align: left;
}

.nt-state__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--nt-font-md);
  color: inherit;
}

.nt-state__body {
  margin: 0;
  font-size: var(--nt-font-sm);
  color: inherit;
  opacity: 0.95;
}

.nt-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Parent surface — wrapping panel for parent-only sections so they read
   as visually distinct from child exercise panels (different tint, more
   structured corner radius).
   ═══════════════════════════════════════════════════════════════════════════ */

.nt-parent-surface {
  display: grid;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4);
  border-radius: var(--nt-radius-lg);
  background: var(--nt-surface-parent);
  border: 1px solid var(--nt-border-parent);
  box-shadow: var(--nt-shadow-card);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.nt-parent-surface__header {
  display: flex;
  align-items: center;
  gap: var(--nt-space-2);
  flex-wrap: wrap;
}

.nt-parent-surface__title {
  margin: 0;
  font-size: var(--nt-font-md);
  font-weight: 700;
  color: var(--nt-text-strong);
}

.nt-parent-surface__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--nt-space-2);
  border-radius: var(--nt-radius-pill);
  background: var(--nt-parent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Card grid inside a parent surface — used for recent attempts, weekly
   progress, weak areas, achievements, etc. Wraps cleanly on iPad
   portrait. */
.nt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--nt-space-3);
  min-width: 0;
}

.nt-card {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-2);
  padding: var(--nt-space-3);
  border-radius: var(--nt-radius-md);
  background: var(--nt-surface);
  border: 1px solid var(--nt-border-soft);
  box-shadow: var(--nt-shadow-card);
  min-width: 0;
  box-sizing: border-box;
}

.nt-card__title {
  margin: 0;
  font-size: var(--nt-font-sm);
  font-weight: 700;
  color: var(--nt-text-strong);
}

.nt-card__body {
  margin: 0;
  font-size: var(--nt-font-sm);
  color: var(--nt-text);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stage tab nav — responsive override for the existing
   .notation-stage-tabs row. Adds horizontal-scroll fallback on narrow
   widths so important sections never disappear off the right edge.
   ═══════════════════════════════════════════════════════════════════════════ */

.notation-stage-tabs {
  /* Allow horizontal scrolling when the wrap above can't fit everything
     comfortably — keeps every section reachable instead of pushing tabs
     off-screen. The flex-wrap from notation.css still applies first; the
     overflow only kicks in when wrapping would push past one container
     width (e.g. iPad portrait with the Sheet Library tab + 9 trainer
     tabs). */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nt-border-strong) transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;            /* room for the active-tab underline */
}

.notation-stage-tabs::-webkit-scrollbar {
  height: 6px;
}
.notation-stage-tabs::-webkit-scrollbar-thumb {
  background: var(--nt-border);
  border-radius: var(--nt-radius-pill);
}

.notation-tab {
  scroll-snap-align: start;
}

/* Active tab — keep the existing blue background, add a clear top
   bar so it remains visible even at the edge of a horizontal scroll. */
.notation-tab--active {
  position: relative;
  box-shadow: 0 0 0 1.5px var(--nt-accent-hover) inset;
}

.notation-tab:focus-visible {
  outline: var(--nt-focus-ring);
  outline-offset: 2px;
}

/* ── Profile-aware tweak: when there are 8+ tabs, switch from wrap to
   single-row horizontal scroll so the active tab is always the same
   distance from the top of the panel. ──────────────────────────────── */
@media (min-width: 480px) and (max-width: 900px) {
  .notation-stage-tabs {
    flex-wrap: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility — focus visibility for legacy .notation-* buttons that
   relied on the browser default. Keeps the existing colours; just adds
   a consistent focus ring.
   ═══════════════════════════════════════════════════════════════════════════ */

.notation-tab:focus-visible,
.notation-answer-btn:focus-visible,
.notation-next-btn:focus-visible,
.notation-start-btn:focus-visible,
.notation-stop-btn:focus-visible,
.notation-show-btn:focus-visible,
.notation-reset-btn:focus-visible,
.notation-hear-btn:focus-visible,
.notation-speak-btn:focus-visible,
.notation-activate-btn:focus-visible,
.notation-setting-select:focus-visible {
  outline: var(--nt-focus-ring);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iPad responsive pass — portrait widths.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
  .nt-exercise-card {
    padding: var(--nt-space-3);
  }
  .nt-control-row {
    padding: var(--nt-space-2);
    gap: var(--nt-space-2);
  }
  .nt-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 600px) {
  .nt-control-row {
    /* Stack control groups so dropdowns get the full width. */
    flex-direction: column;
    align-items: stretch;
  }
  .nt-control-group--inline {
    justify-content: space-between;
  }
  .nt-select {
    min-width: 0;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Music Piece controls — additive iPad polish.
   The existing .notation-section-controls layout is preserved; these
   rules just tighten alignment + give each logical group (measures,
   count-in, metronome, loop, tempo) a subtle visual separator that
   helps the child + parent parse the row quickly.
   ═══════════════════════════════════════════════════════════════════════════ */

.notation-section-controls {
  /* Match the design system card radius/border so the MusicPiece
     control panel feels like the same family as new .nt-* surfaces. */
  border-radius: var(--nt-radius-md);
  border-color: var(--nt-border-soft);
  background: var(--nt-surface-soft);
}

/* Logical group cells (existing .mpt-stepper-cell + .mpt-tempo-cell)
   gain a subtle vertical separator so the eye groups related fields. */
@media (min-width: 720px) {
  .notation-section-controls .mpt-stepper-cell + .mpt-stepper-cell::before,
  .notation-section-controls .mpt-tempo-cell::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1.6rem;
    background: var(--nt-border-soft);
    margin-right: var(--nt-space-3);
    align-self: center;
  }
}

/* On iPad portrait, group cells wrap full-width so taps stay
   comfortable and labels read cleanly. */
@media (max-width: 720px) {
  .notation-section-controls .mpt-stepper-cell,
  .notation-section-controls .mpt-tempo-cell {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sticky tab nav — keep the stage tabs visible at the top of the
   trainer on long scrolling pages (Music Piece especially). The nav
   only sticks when nested inside a positioned trainer card.
   ═══════════════════════════════════════════════════════════════════════════ */

.notation-trainer .notation-stage-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--nt-surface);
  /* small fade beneath so cards scrolling underneath don't bleed through */
  box-shadow: 0 6px 8px -6px rgba(15, 23, 42, 0.12);
}

/* Reduced-motion users — drop hover lifts and transitions. */
@media (prefers-reduced-motion: reduce) {
  .nt-btn,
  .nt-select,
  .nt-number-input,
  .nt-feedback,
  .nt-card,
  .nt-exercise-card,
  .notation-tab {
    transition: none;
  }
}
/* ============================================================
   Profile Customiser — full-page overlay using the shared
   token system (src/styles/tokens.css). Light theme that
   visually belongs to the rest of the app, not a dark
   mini-app like the AdminDashboard.
   ============================================================ */

.profile-customizer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-text);
  overflow: hidden;
  font-family: inherit;
}

/* Inline variant — rendered inside a Temp Parent section, not as a full-page
   overlay. Drops the fixed positioning and overlay chrome so the table flows
   naturally within the section's collapsible body. */
.profile-customizer--inline {
  position: static;
  inset: auto;
  z-index: auto;
  background: transparent;
  overflow: visible;
  display: block;
}

.profile-customizer--inline .profile-customizer__body {
  padding: 0;
  overflow: visible;
}

.profile-customizer__inline-denied {
  color: var(--app-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Access denied ---- */
.profile-customizer--denied {
  align-items: center;
  justify-content: center;
}

.profile-customizer__denied-box {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 360px;
  box-shadow: var(--app-shadow-card);
}

.profile-customizer__denied-box p {
  color: var(--app-text-muted);
  margin: 0 0 1.25rem;
}

/* ---- Header ---- */
.profile-customizer__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  flex-shrink: 0;
  min-height: 56px;
}

.profile-customizer__title {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--app-text);
  letter-spacing: -0.2px;
}

.profile-customizer__header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-customizer__back-btn {
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  border-radius: var(--app-radius-sm);
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.profile-customizer__back-btn:hover {
  background: var(--app-secondary-hover);
  color: var(--app-text);
  border-color: var(--app-border-strong);
}

.profile-customizer__back-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.profile-customizer__save-btn {
  background: var(--app-primary);
  border: none;
  color: var(--app-primary-foreground);
  border-radius: var(--app-radius-sm);
  padding: 0.4rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.profile-customizer__save-btn:hover {
  background: var(--app-primary-hover);
}

.profile-customizer__save-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.profile-customizer__save-btn:active {
  background: var(--app-primary-active);
}

.profile-customizer__saved-badge {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-success);
  background: var(--app-success-surface);
  border: 1px solid var(--app-success-border);
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
  animation: pc-fade-in 0.2s ease;
}

@keyframes pc-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Body ---- */
.profile-customizer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
}

.profile-customizer__hint {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  margin: 0 0 1.25rem;
}

/* ---- Table wrapper ---- */
.profile-customizer__table-wrapper {
  overflow-x: auto;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

/* ---- Table ---- */
.profile-customizer__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
  min-width: 420px;
}

/* ---- Header row ---- */
.profile-customizer__th {
  background: var(--app-surface-raised);
  padding: 0;
  border-bottom: 2px solid var(--app-border);
  font-weight: 600;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

.profile-customizer__th--component {
  text-align: left;
  padding: 0.85rem 1.1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-text-muted);
  width: 200px;
  min-width: 160px;
}

.profile-customizer__th--profile {
  min-width: 120px;
  padding: 0.6rem 0.75rem 0.5rem;
  border-left: 1px solid var(--app-border);
}

/* ---- Profile column header ---- */
.profile-customizer__profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.profile-customizer__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--profile-avatar-accent);
  color: var(--profile-accent-foreground);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.profile-customizer__profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
}

.profile-customizer__col-actions {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  padding-bottom: 0.25rem;
}

.profile-customizer__col-action-btn {
  background: var(--profile-accent-soft);
  border: 1px solid var(--profile-accent-border);
  color: var(--profile-accent);
  border-radius: 10px;
  padding: 0.12rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.6;
}

.profile-customizer__col-action-btn:hover {
  background: var(--profile-accent);
  color: var(--profile-accent-foreground);
  border-color: var(--profile-accent);
}

.profile-customizer__col-action-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.profile-customizer__col-action-btn--none {
  background: var(--app-secondary);
  border-color: var(--app-border-strong);
  color: var(--app-text-muted);
}

.profile-customizer__col-action-btn--none:hover {
  background: var(--app-secondary-hover);
  color: var(--app-text);
  border-color: var(--app-border-strong);
}

/* ---- Data rows ---- */
.profile-customizer__row {
  background: var(--app-surface);
  transition: background 0.1s;
}

.profile-customizer__row:hover {
  background: var(--app-surface-raised);
}

.profile-customizer__row--alt {
  background: var(--app-surface-sunken);
}

.profile-customizer__row--alt:hover {
  background: var(--app-surface-raised);
}

.profile-customizer__td {
  padding: 0;
  border-top: 1px solid var(--app-border);
}

.profile-customizer__td--label {
  padding: 0.7rem 1.1rem;
  text-align: left;
  color: var(--app-text);
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
}

.profile-customizer__td--toggle {
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--app-border);
  padding: 0.5rem 0.75rem;
}

/* ---- Toggle switch (pill-style) ---- */
.profile-customizer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  padding: 0.2rem 0.5rem 0.2rem 0.3rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  min-width: 64px;
  justify-content: flex-start;
}

.profile-customizer__toggle:hover {
  background: var(--app-secondary-hover);
  border-color: var(--app-border-strong);
}

.profile-customizer__toggle:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.profile-customizer__toggle--on {
  background: var(--profile-accent-soft);
  border-color: var(--profile-accent-border);
}

.profile-customizer__toggle--on:hover {
  background: var(--profile-accent-soft);
  border-color: var(--profile-accent);
}

.profile-customizer__toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-text-subtle);
  flex-shrink: 0;
  transition: background 0.18s, transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.profile-customizer__toggle--on .profile-customizer__toggle-thumb {
  background: var(--profile-accent);
  transform: none;
}

.profile-customizer__toggle-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  text-transform: uppercase;
  transition: color 0.18s;
  min-width: 22px;
  text-align: left;
}

.profile-customizer__toggle--on .profile-customizer__toggle-label {
  color: var(--profile-accent);
}
/* ============================================================
   CourseBuilderPanel (.cbp__*)
   Parent-facing course / module builder on the Assignments page.
   ============================================================ */

.cbp {
  max-width: 100%;
}

.cbp__heading {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.35rem;
}

.cbp__intro {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 1rem;
}

/* ---- Collapsible section ---- */
.cbp__section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.cbp__section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: #1e293b;
  text-align: left;
  min-height: 44px;
}

.cbp__section-toggle:hover {
  background: #f1f5f9;
}

.cbp__section-arrow {
  color: #94a3b8;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.cbp__section-body {
  padding: 1rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

/* ---- Form elements ---- */
.cbp__builder {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cbp__field-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cbp__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.cbp__input,
.cbp__select {
  padding: 0.45rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
}

.cbp__input:focus,
.cbp__select:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

/* ---- Assignment / module picker ---- */
.cbp__hint {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.cbp__hint--muted {
  color: #94a3b8;
  font-style: italic;
}

.cbp__assignment-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cbp__assignment-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1e293b;
  text-align: left;
  min-height: 40px;
}

.cbp__assignment-item:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #93c5fd;
}

.cbp__assignment-item--added {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
  cursor: default;
}

.cbp__check {
  color: #16a34a;
  font-weight: 700;
}

.cbp__tag {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
  text-transform: capitalize;
}

/* ---- Selected refs list ---- */
.cbp__selected-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cbp__ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cbp__ref-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  background: #eff6ff;
  font-size: 0.85rem;
  min-height: 38px;
}

.cbp__ref-label {
  flex: 1;
  color: #1d4ed8;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cbp__ref-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.cbp__ref-btn {
  background: none;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: #3b82f6;
  min-width: 26px;
  min-height: 26px;
}

.cbp__ref-btn:hover:not(:disabled) {
  background: #dbeafe;
}

.cbp__ref-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.cbp__ref-btn--remove {
  border-color: #fca5a5;
  color: #ef4444;
}

.cbp__ref-btn--remove:hover:not(:disabled) {
  background: #fee2e2;
}

/* ---- Existing items display ---- */
.cbp__existing-list {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cbp__existing-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 0.85rem;
}

/* ---- Save button ---- */
.cbp__save-btn {
  padding: 0.55rem 1.25rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  align-self: flex-start;
}

.cbp__save-btn:hover:not(:disabled) {
  background: #1d4ed8;
}

.cbp__save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Feedback ---- */
.cbp__error {
  font-size: 0.8rem;
  color: #dc2626;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 5px;
}

.cbp__success {
  font-size: 0.8rem;
  color: #15803d;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 5px;
}

/* ── Search row ──────────────────────────────────────────────────────────── */

.cbp__search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.cbp__input--search {
  flex: 1;
}

.cbp__search-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #94a3b8;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  min-height: 36px;
}

.cbp__search-clear:hover {
  color: #475569;
  background: #f1f5f9;
}

/* ── Versioning warning ──────────────────────────────────────────────────── */

.cbp__versioning-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: #92400e;
}

.cbp__versioning-warning strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #78350f;
}

.cbp__versioning-list {
  margin: 0;
  padding-left: 1.2rem;
}

.cbp__versioning-list li {
  margin-bottom: 0.15rem;
}

/* ── Child progress preview ──────────────────────────────────────────────── */

.cbp__progress-preview {
  font-size: 0.82rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
}

/* ── Tag variants ────────────────────────────────────────────────────────── */

.cbp__tag--version {
  background: #eff6ff;
  color: #1d4ed8;
}

.cbp__tag--warn {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
/* ============================================================
   Assignments Page — full-page overlay using shared token system
   (src/styles/tokens.css). Light theme matches ProfileCustomizer
   and the rest of the app surfaces.
   ============================================================ */

.assignments-page {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-text);
  overflow: hidden;
  font-family: inherit;
}

/* ---- Header ---- */
.assignments-page__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  flex-shrink: 0;
  min-height: 56px;
}

.assignments-page__back-btn {
  background: var(--app-secondary);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  border-radius: var(--app-radius-sm);
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.assignments-page__back-btn:hover {
  background: var(--app-secondary-hover);
  color: var(--app-text);
}

.assignments-page__back-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.assignments-page__header-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.assignments-page__header-badge {
  background: var(--app-primary);
  color: var(--app-primary-foreground);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  flex-shrink: 0;
}

.assignments-page__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--app-text);
}

.assignments-page__header-spacer {
  width: 80px;
  flex-shrink: 0;
}

/* ---- Scrollable body ---- */
.assignments-page__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Weekly plan button in header */
.assignments-page__weekly-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid var(--app-primary);
  background: var(--app-primary);
  color: var(--app-primary-foreground);
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
  transition: background 0.15s;
}
.assignments-page__weekly-btn:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

.assignments-page__weekly-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* Child picker in weekly plan header */
.assignments-page__child-picker {
  display: flex;
  gap: 0.3rem;
}
.assignments-page__child-btn {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text-muted);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.assignments-page__child-btn--active {
  background: var(--profile-accent-soft);
  color: var(--profile-accent);
  border-color: var(--profile-accent-border);
}
.assignments-page__child-btn:hover {
  color: var(--app-text);
  border-color: var(--app-border-strong);
}

.assignments-page__child-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

/* ---- Inline variant (MF-09) ----
   Used when AssignmentsPage is embedded inside the Temp Parent →
   Assignments section. Drops the fixed-position overlay chrome so the
   panels flow inline with the rest of the page; the surrounding
   collapsible already provides the heading. */
.assignments-page--inline {
  position: static;
  inset: auto;
  z-index: auto;
  background: transparent;
  overflow: visible;
  display: block;
  min-width: 0;
}

.assignments-page--inline .assignments-page__body {
  flex: none;
  overflow-y: visible;
  padding: 0;
  gap: 1rem;
}

.assignments-page__inline-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0.75rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
   MusicLibrary.css — styles for MusicLibrary and MusicLibraryUpload
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay / modal shell ─────────────────────────────────────────────────── */

.ml-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Inline variant — when MusicLibrary is rendered inside a Notation Trainer
   tab instead of as a full-screen overlay. */
.ml-inline {
  display: block;
  width: 100%;
}

.ml-panel--inline {
  max-width: none;
  min-height: 0;
  box-shadow: none;
  border: 1px solid var(--app-border);
}

.ml-panel {
  background: var(--app-surface);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-width: 900px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.ml-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  flex-shrink: 0;
}

.ml-heading {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--app-text);
}

.ml-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--app-text-muted);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.ml-close-btn:hover {
  background: var(--app-danger-surface);
  color: var(--app-danger);
}

/* ── Section tabs (sheet music ↔ compositions) ──────────────────────────── */

.ml-section-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem 0;
  background: var(--app-surface-raised);
  flex-shrink: 0;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */

.ml-toolbar {
  padding: 0.75rem 1.25rem;
  background: var(--app-surface-raised);
  border-bottom: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}

.ml-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.ml-toolbar-row--actions {
  justify-content: space-between;
  gap: 0.75rem;
}

/* Profile tabs */
.ml-profile-tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.ml-tab {
  padding: 0.3rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--app-text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ml-tab:hover {
  background: var(--trainer-chord-accent-soft);
  border-color: var(--trainer-scale-accent);
  color: var(--trainer-scale-accent-hover);
}
.ml-tab--active {
  background: var(--trainer-scale-accent);
  border-color: var(--trainer-scale-accent);
  color: var(--app-text-on-primary);
}


/* Filter dropdowns */
.ml-toolbar-row--dropdowns {
  align-items: flex-end;
  gap: 0.75rem;
}

.ml-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ml-filter-select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  background: var(--app-surface);
  font-size: 0.85rem;
  color: var(--app-text);
  cursor: pointer;
  min-width: 130px;
  transition: border-color 0.15s;
}
.ml-filter-select:focus {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
  border-color: var(--app-primary);
}

/* Alphabetical filter */
.ml-alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.ml-alpha-btn {
  min-width: 1.6rem;
  height: 1.85rem;
  padding: 0 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}
.ml-alpha-btn:hover {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent);
  color: var(--trainer-scale-accent-hover);
}
.ml-alpha-btn--active {
  background: var(--trainer-scale-accent);
  border-color: var(--trainer-scale-accent);
  color: var(--app-text-on-primary);
}

/* Action cluster — favourites toggle | view toggle | page size */
.ml-action-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ml-fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ml-fav-toggle:hover:not(:disabled) {
  border-color: var(--app-warning);
  background: var(--app-warning-surface);
  color: var(--app-warning);
}
.ml-fav-toggle--active {
  background: var(--app-warning-surface);
  border-color: var(--app-warning);
  color: var(--app-warning);
}
.ml-fav-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ml-fav-toggle-star {
  color: var(--app-warning);
  font-size: 0.95rem;
  line-height: 1;
}

.ml-view-toggle {
  display: inline-flex;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
}

.ml-view-btn {
  padding: 0.32rem 0.7rem;
  background: var(--app-surface);
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ml-view-btn + .ml-view-btn {
  border-left: 1px solid var(--app-border-strong);
}
.ml-view-btn:hover {
  background: var(--app-secondary);
}
.ml-view-btn--active {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
}
.ml-view-btn--active:hover {
  background: var(--app-primary-hover);
}

.ml-pagesize-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ml-pagesize-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  background: var(--app-surface);
  font-size: 0.82rem;
  color: var(--app-text);
  cursor: pointer;
  min-width: 70px;
}
.ml-pagesize-select:focus {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
  border-color: var(--app-primary);
}

/* Result count line */
.ml-result-count {
  padding: 0.5rem 1.25rem 0;
  font-size: 0.8rem;
  color: var(--app-text-muted);
  flex-shrink: 0;
}

/* Inline error (favourites write failures) */
.ml-inline-error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-danger);
  background: var(--app-danger-surface);
  border-radius: 0.35rem;
  padding: 0.4rem 0.6rem;
}

/* Pagination */
.ml-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  flex-wrap: wrap;
}

.ml-page-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 0.4rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ml-page-btn:hover:not(:disabled) {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent);
  color: var(--trainer-scale-accent-hover);
}
.ml-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ml-page-status {
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

.ml-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

.ml-empty-state {
  color: var(--app-text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 0;
  margin: 0;
}

.ml-error-state {
  color: var(--app-danger);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
  margin: 0;
}

/* ── Piece grid ────────────────────────────────────────────────────────────── */

.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
}

/* Piece card */
.ml-piece-card {
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
  padding: 1rem 2.4rem 1rem 1rem;
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-sizing: border-box;
  min-width: 0;
}
.ml-piece-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--app-border-strong);
}

/* Clickable card (Issue 9) — whole card opens the piece on click; the
   inner action buttons (favourite, badges, Open, Edit, Delete) stop
   propagation so they never trigger the open. Focus ring on the card
   itself for keyboard accessibility. */
.ml-piece-card--clickable {
  cursor: pointer;
}

.ml-piece-card--clickable:focus-visible,
.ml-piece-row--clickable:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
  border-color: var(--trainer-scale-accent);
}

.ml-piece-card--clickable[aria-disabled='true'],
.ml-piece-row--clickable[aria-disabled='true'] {
  cursor: progress;
}

.ml-piece-row--clickable {
  cursor: pointer;
}

.ml-piece-row--clickable:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Assigned highlight */
.ml-piece-card--assigned {
  border-color: var(--trainer-scale-accent);
  border-width: 2px;
  background: var(--trainer-scale-accent-soft);
}

.ml-assigned-badge {
  display: inline-block;
  background: var(--trainer-scale-accent);
  color: var(--app-text-on-primary);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  align-self: flex-start;
  letter-spacing: 0.02em;
}

.ml-piece-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text);
  word-break: break-word;
}

.ml-piece-composer {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.ml-piece-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

/* Shared base for all clickable badge buttons */
.ml-badge-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s, border-color 0.15s;
}
.ml-badge-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.ml-badge-btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
}

/* Difficulty badge colours — joyful palette (no amber, no red) */
.ml-difficulty-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* BEG — mint / soft green */
.ml-difficulty-badge--beginner {
  background: var(--app-success-surface);
  color: var(--app-success);
  border-color: var(--app-success-border);
}
/* INT — soft lavender (distinct from key badge cyan) */
.ml-difficulty-badge--intermediate {
  background: var(--trainer-chord-accent-soft);
  color: var(--trainer-chord-accent-hover);
  border-color: var(--trainer-chord-accent-border);
}
/* ADV — soft violet (no red) */
.ml-difficulty-badge--advanced {
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-text);
  border-color: var(--trainer-scale-accent-border);
}

/* Hands badge — short label (RH / LH / BH) */
.ml-hands-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 9999px;
  background: var(--app-secondary);
  color: var(--app-text);
  border-color: var(--app-border);
  letter-spacing: 0.05em;
}
.ml-hands-badge--right {
  background: var(--app-warning-surface);
  color: var(--app-warning);
  border-color: var(--app-warning-border);
}
.ml-hands-badge--left {
  /* allow-hardcoded-colour: rose data badge — distinct hue for LH classification chip */
  background: #fce7f3;
  color: #9d174d;
  border-color: #fbcfe8;
}
.ml-hands-badge--both {
  background: var(--app-info-surface);
  color: var(--app-info-text);
  border-color: var(--app-info-border);
}

.ml-key-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 9999px;
  background: var(--trainer-arpeggio-accent-soft);
  color: var(--trainer-arpeggio-accent-text);
  border-color: var(--trainer-arpeggio-accent-border);
  letter-spacing: 0.04em;
}

.ml-genre-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 9999px;
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  border-color: var(--app-border);
  letter-spacing: 0.02em;
}

/* Assigned-to tags (parent view) */
.ml-assigned-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

.ml-assigned-tag {
  font-size: 0.7rem;
  background: var(--trainer-scale-accent-soft);
  color: var(--trainer-scale-accent-text);
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-weight: 500;
}
.ml-assigned-tag--all {
  background: var(--app-secondary);
  color: var(--app-text-muted);
}

/* Open button */
.ml-open-btn {
  margin-top: auto;
  padding: 0.45rem 0;
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
}
.ml-open-btn:hover:not(:disabled) {
  background: var(--app-primary-hover);
}
.ml-open-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ml-open-btn--row {
  width: auto;
  padding: 0.4rem 0.9rem;
  margin-top: 0;
  flex-shrink: 0;
}

/* Favourite star button */
.ml-fav-star {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  background: none;
  border: none;
  padding: 0.1rem 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--app-border-strong);
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
  border-radius: 0.3rem;
}
.ml-fav-star:hover:not(:disabled) {
  color: var(--app-warning);
  transform: scale(1.08);
}
.ml-fav-star--active {
  color: var(--app-warning);
  /* allow-hardcoded-colour: warm amber glow tint matching favourite-star colour */
  text-shadow: 0 1px 2px rgba(245, 158, 11, 0.25);
}
.ml-fav-star--busy {
  opacity: 0.6;
}
.ml-fav-star:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ml-fav-star:focus {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
}

/* ── Rows view ──────────────────────────────────────────────────────────────── */

.ml-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ml-piece-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem 0.55rem 0.45rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  flex-wrap: wrap;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.ml-piece-row:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.ml-piece-row--assigned {
  border-color: var(--trainer-scale-accent);
  background: var(--trainer-scale-accent-soft);
}
.ml-piece-row .ml-fav-star {
  position: static;
  top: auto;
  right: auto;
  flex-shrink: 0;
}

.ml-row-main {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ml-row-title-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.ml-row-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text);
  word-break: break-word;
}

.ml-row-composer {
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.ml-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ml-row-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ml-row-actions .ml-piece-admin-row {
  margin-top: 0;
}

/* ── Parent-only edit / delete row on piece card ─────────────────────────── */

.ml-piece-admin-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.ml-edit-btn,
.ml-delete-btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 0;
  box-sizing: border-box;
}
.ml-edit-btn:hover:not(:disabled) {
  background: var(--trainer-scale-accent-soft);
  border-color: var(--trainer-scale-accent);
  color: var(--trainer-scale-accent-hover);
}
.ml-delete-btn {
  color: var(--app-danger);
  border-color: var(--app-danger-border);
}
.ml-delete-btn:hover:not(:disabled) {
  background: var(--app-danger-surface);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}
.ml-edit-btn:disabled,
.ml-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Edit modal ────────────────────────────────────────────────────────────── */

.ml-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.ml-edit-panel {
  background: var(--app-surface);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-width: 880px;
  padding: 1rem 1.25rem 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── Edit modal — body layout (rows, action buttons, footer) ──────────── */

.ml-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ml-edit-row {
  display: grid;
  gap: 0.85rem;
  align-items: end;
}
.ml-edit-row--meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ml-edit-row--actions {
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  align-items: end;
}

.ml-edit-genre-label {
  min-width: 0;
}

.ml-edit-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.ml-edit-action {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: none;
  border-radius: 0.4rem;
  color: var(--app-text-on-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s, transform 0.05s;
  white-space: normal;
  line-height: 1.15;
}
.ml-edit-action:hover:not(:disabled) {
  filter: brightness(1.06);
}
.ml-edit-action:active:not(:disabled) {
  transform: translateY(1px);
}
.ml-edit-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ml-edit-action:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.ml-edit-action--arrangement { background: var(--trainer-arpeggio-accent); }   /* teal     */
.ml-edit-action--revision    { background: var(--app-info); }                  /* indigo   */
.ml-edit-action--replace     { background: var(--app-warning); }   /* amber    */
.ml-edit-action--restore     { background: var(--app-success); }   /* green    */

/* Pressed / open state — slightly darker to signal the sub-form is expanded */
.ml-edit-action--active {
  filter: brightness(0.82);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

/* ── Inline sub-form ─────────────────────────────────────────────────────── */

.ml-edit-subform-wrapper {
  border: 1px solid var(--app-border-strong);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  overflow: hidden;
}

.ml-edit-subform-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: var(--app-surface-sunken);
  border-bottom: 1px solid var(--app-border-strong);
}

.ml-edit-subform-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--app-text);
}

.ml-edit-subform-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--app-text-muted);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  line-height: 1;
}
.ml-edit-subform-close:hover {
  background: var(--app-border);
  color: var(--app-text);
}

.ml-edit-subform {
  padding: 0.75rem 1rem;
}

.ml-edit-subform-note {
  margin: 0 0 0.65rem;
  font-size: 0.83rem;
  color: var(--app-text-muted);
}

.ml-edit-subform-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.65rem;
}

.ml-edit-readonly-note {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--app-text-muted);
  background: var(--app-secondary);
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
}

.ml-edit-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ml-edit-footer-left {
  display: flex;
  align-items: center;
}
.ml-edit-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.ml-edit-delete-btn {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--app-danger);
  color: var(--app-text-on-primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
}
.ml-edit-delete-btn:hover:not(:disabled) {
  background: var(--app-danger);
}
.ml-edit-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ml-edit-delete-btn:focus-visible {
  /* allow-hardcoded-colour: destructive-button danger focus ring tint */
  outline: 3px solid rgba(220, 38, 38, 0.55);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .ml-edit-row--meta {
    grid-template-columns: 1fr;
  }
  .ml-edit-row--actions {
    grid-template-columns: 1fr;
  }
}

.ml-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ml-edit-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text);
}

.ml-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ml-edit-cancel {
  padding: 0.55rem 1rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ml-edit-cancel:hover:not(:disabled) {
  background: var(--app-secondary);
}
.ml-edit-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Delete confirmation ─────────────────────────────────────────────────── */

.ml-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.ml-confirm-panel {
  background: var(--app-surface);
  border-radius: 0.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 420px;
  padding: 1.1rem 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ml-confirm-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
}

.ml-confirm-body {
  margin: 0;
  color: var(--app-text);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ml-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ml-confirm-delete-btn {
  padding: 0.55rem 1rem;
  background: var(--app-danger);
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ml-confirm-delete-btn:hover:not(:disabled) {
  background: var(--app-danger);
}
.ml-confirm-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Upload section toggle ──────────────────────────────────────────────────── */

.ml-upload-section {
  border-top: 1px solid var(--app-border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.ml-toggle-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--trainer-scale-accent) 0%, var(--trainer-scale-accent-hover) 100%);
  border: 1px solid var(--trainer-scale-accent-hover);
  border-radius: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--app-text-on-primary);
  cursor: pointer;
  width: auto;
  min-width: 220px;
  letter-spacing: 0.02em;
  /* allow-hardcoded-colour: scale-accent purple shadow tints — match button hue */
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s, filter 0.15s;
}
.ml-toggle-upload-btn:hover {
  filter: brightness(1.05);
  /* allow-hardcoded-colour: scale-accent purple shadow tints — match button hue */
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}
.ml-toggle-upload-btn:active {
  transform: translateY(0);
  /* allow-hardcoded-colour: scale-accent purple shadow tints — match button hue */
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3);
}
.ml-toggle-upload-btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.ml-toggle-upload-btn--open {
  background: var(--app-secondary);
  border-color: var(--app-border-strong);
  color: var(--app-text);
  box-shadow: none;
}
.ml-toggle-upload-btn--open:hover {
  background: var(--app-border);
  filter: none;
}

.ml-toggle-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.ml-toggle-upload-btn--open .ml-toggle-upload-icon {
  background: var(--app-border-strong);
  color: var(--app-text);
}

.ml-toggle-upload-text {
  white-space: nowrap;
}

/* Alpha bar empty placeholder */
.ml-alpha-empty {
  font-size: 0.75rem;
  color: var(--app-text-subtle);
  font-style: italic;
  padding: 0 0.25rem;
}

/* Clear-filters row — centred below pagination */
.ml-clear-filters-row {
  display: flex;
  justify-content: center;
}

/* Clear filters / reset button */
.ml-show-all-btn {
  padding: 0.4rem 0.95rem;
  border-radius: 0.4rem;
  border: 1px solid var(--trainer-scale-accent);
  background: var(--app-surface);
  color: var(--trainer-scale-accent-hover);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ml-show-all-btn:hover {
  background: var(--trainer-scale-accent);
  color: var(--app-text-on-primary);
  transform: translateY(-1px);
}
.ml-show-all-btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Upload form (MusicLibraryUpload)
   ══════════════════════════════════════════════════════════════════════════════ */

.ml-upload-panel {
  padding: 1rem 0 0;
}

.ml-upload-title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text);
}

.ml-upload-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ml-upload-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.65rem;
}

.ml-upload-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
}

.ml-upload-input,
.ml-upload-select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.35rem;
  font-size: 0.85rem;
  color: var(--app-text);
  background: var(--app-surface);
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
.ml-upload-input:focus,
.ml-upload-select:focus {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
  border-color: var(--app-primary);
}
.ml-upload-input:disabled,
.ml-upload-select:disabled {
  background: var(--app-surface-raised);
  color: var(--app-text-subtle);
}

.ml-upload-fieldset {
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  margin: 0;
}

.ml-upload-legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-text);
  padding: 0 0.25rem;
}

.ml-upload-assigned-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.ml-upload-check-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--app-text);
  cursor: pointer;
}
.ml-upload-check-label input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--trainer-scale-accent);
}

/* Drag-and-drop zone */
.ml-dropzone {
  border: 2px dashed var(--app-border-strong);
  border-radius: 0.5rem;
  padding: 1.2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--app-surface-raised);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-dropzone:hover,
.ml-dropzone:focus {
  border-color: var(--app-primary);
  background: var(--profile-accent-soft);
  outline: none;
}
.ml-dropzone--over {
  border-color: var(--app-primary);
  background: var(--profile-accent-soft);
}
.ml-dropzone--has-file {
  border-color: var(--app-success);
  background: var(--app-success-surface);
}

.ml-dropzone-hint {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  line-height: 1.4;
}
.ml-dropzone-hint strong {
  color: var(--app-text);
}

.ml-dropzone-filename {
  font-size: 0.85rem;
  color: var(--app-success);
  font-weight: 500;
  word-break: break-all;
}

/* Progress bar */
.ml-progress-wrap {
  position: relative;
  height: 1.3rem;
  background: var(--app-border);
  border-radius: 9999px;
  overflow: hidden;
}
.ml-progress-bar {
  height: 100%;
  background: var(--app-primary);
  border-radius: 9999px;
  transition: width 0.2s;
}
.ml-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--app-text-on-primary);
  mix-blend-mode: difference;
}

.ml-upload-error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-danger);
  background: var(--app-danger-surface);
  border-radius: 0.35rem;
  padding: 0.4rem 0.6rem;
}

.ml-upload-success {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-success);
  background: var(--app-success-surface);
  border-radius: 0.35rem;
  padding: 0.4rem 0.6rem;
}

.ml-upload-submit {
  padding: 0.6rem 1.2rem;
  background: var(--trainer-scale-accent);
  color: var(--app-text-on-primary);
  border: none;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}
.ml-upload-submit:hover:not(:disabled) {
  background: var(--trainer-scale-accent-hover);
}
.ml-upload-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Responsive — iPad landscape (min-width: 768px) ───────────────────────── */
@media (min-width: 768px) {
  .ml-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 600px) {
  .ml-alpha-btn {
    min-width: 1.4rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    font-size: 0.72rem;
  }

  /* Sheet Library card grid — single column on iPad portrait so cards
     never clip and metadata stays readable. */
  .ml-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  /* Filter row stacks vertically so dropdowns get full width. */
  .ml-toolbar-row--dropdowns {
    align-items: stretch;
  }
  .ml-filter-select {
    width: 100%;
    min-height: 44px;
  }
}

/* ── Sheet Library polish v1 (additive) ──────────────────────────────────
   Calmer card hover, consistent focus rings on every clickable element,
   and a tighter alignment between filters and cards. None of these rules
   change behaviour — pure visual polish that pairs with the notation
   trainer design tokens. */

.ml-piece-card,
.ml-piece-row {
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.08s;
}

.ml-piece-card:focus-visible,
.ml-piece-row:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* Admin row buttons need their own focus ring (the inline event-stop
   wrapper was already in place — this just makes keyboard navigation
   visible). */
.ml-edit-btn:focus-visible,
.ml-delete-btn:focus-visible,
.ml-open-btn:focus-visible,
.ml-fav-star:focus-visible,
.ml-badge-btn:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* Touch targets — every Sheet Library button bumps to 44 px on iPad
   widths so admin/favourite/Open are easy to hit without
   accidentally tapping the card itself. */
@media (max-width: 900px) {
  .ml-edit-btn,
  .ml-delete-btn,
  .ml-open-btn,
  .ml-page-btn,
  .ml-show-all-btn {
    min-height: 44px;
  }
  .ml-fav-star {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Filters align neatly on a single baseline. Existing labels stack
   their text above the select; this rule makes sure every label row
   in the same toolbar sits at the same height. */
.ml-toolbar-row--dropdowns .ml-filter-label {
  flex: 0 0 auto;
}

/* Upload form polish — bring the submit button to the same touch
   target as the rest of the design system. */
.ml-upload-submit {
  min-height: 44px;
}
.ml-upload-submit:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* ─── Render-error banner + Replace / Versions UI (tasks 495 / 496 / 497) ─── */

.ml-piece-card--error,
.ml-piece-row--error {
  border-color: var(--app-danger-border);
  background: var(--app-danger-surface);
  cursor: default;
}

.ml-render-error {
  margin-top: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: var(--app-danger-surface);
  border: 1px solid var(--app-danger-border);
  border-radius: 0.5rem;
  color: var(--app-danger-text);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ml-render-error-headline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.ml-render-error-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.ml-render-error-title {
  color: var(--app-danger);
}

.ml-render-error-body {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--app-danger-text);
}

.ml-render-error-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ml-render-error-btn {
  background: var(--app-surface);
  color: var(--app-danger);
  border: 1px solid var(--app-danger-border);
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s, color 0.15s;
}

.ml-render-error-btn:hover:not(:disabled) {
  background: var(--app-danger);
  color: var(--app-text-on-primary);
}

.ml-render-error-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Replace dialog summary line */
.ml-replace-summary {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--app-text);
  line-height: 1.4;
}

/* Versions list */
.ml-versions-body {
  padding: 1rem 1.25rem 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ml-versions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ml-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface);
}

.ml-version-row--active {
  border-color: var(--profile-selected-border);
  background: var(--profile-accent-soft);
}

.ml-version-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ml-version-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--app-text);
}

.ml-version-active-tag {
  font-weight: 500;
  color: var(--app-primary-hover);
  font-size: 0.85rem;
}

.ml-version-sub {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  overflow-wrap: anywhere;
}

.ml-version-restore-btn {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  border: 1px solid var(--app-primary-hover);
  padding: 0.45rem 0.85rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
  transition: background 0.15s;
}

.ml-version-restore-btn:hover:not(:disabled) {
  background: var(--app-primary-hover);
}

.ml-version-restore-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── SheetWorkCard ────────────────────────────────────────────────────── */
.swc-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: 0.7rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.swc-card--legacy {
  border-style: dashed;
  background: var(--app-surface-sunken);
}

.swc-card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.swc-card-titles {
  min-width: 0;
  flex: 1 1 auto;
}

.swc-card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--app-text);
  word-break: break-word;
}

.swc-card-composer {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--app-text-muted);
  word-break: break-word;
}

.swc-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.swc-difficulty-badge,
.swc-hand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  text-transform: uppercase;
}

.swc-difficulty-badge--beginner     { background: var(--trainer-arpeggio-accent-soft); color: var(--trainer-arpeggio-accent-text); border-color: var(--trainer-arpeggio-accent-border); }
.swc-difficulty-badge--intermediate { background: var(--app-warning-surface); color: var(--app-warning); border-color: var(--app-warning-border); }
.swc-difficulty-badge--advanced     { background: var(--app-danger-surface); color: var(--app-danger); border-color: var(--app-danger-border); }

.swc-hand-badge--both  { background: var(--app-info-surface); color: var(--app-info-text); border-color: var(--app-info-border); }
.swc-hand-badge--right { background: var(--app-success-surface); color: var(--app-success); border-color: var(--app-success-border); }
/* allow-hardcoded-colour: rose data badge — distinct hue for LH classification chip */
.swc-hand-badge--left  { background: #fdf2f8; color: #831843; border-color: #f9a8d4; }

.swc-card-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  flex-wrap: wrap;
}

.swc-card-count {
  font-weight: 600;
  color: var(--app-text);
}

.swc-card-latest {
  color: var(--app-text-subtle);
}

.swc-expand-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--app-text);
}

.swc-expand-btn:hover {
  background: var(--app-surface-raised);
}

.swc-arrangements-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--app-border);
  padding: 0.55rem 0 0 0.6rem;
  margin-left: 0.5rem;
  border-left: 3px solid var(--app-info-border);
  background: linear-gradient(to right, var(--app-info-surface) 0%, transparent 30%);
}

.swc-add-arrangement-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
  background: transparent;
  color: var(--app-primary);
  border: 1px dashed var(--profile-accent-border);
  border-radius: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.swc-add-arrangement-btn:hover {
  background: var(--profile-accent-soft);
}

.swc-arrangement-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  flex-wrap: wrap;
}

.swc-arrangement-row--highlight {
  background: var(--app-warning-surface);
  border-color: var(--app-warning-border);
}

.swc-arrangement-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.swc-difficulty-pip,
.swc-hand-pip {
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.swc-difficulty-pip--beginner     { background: var(--trainer-arpeggio-accent-soft); color: var(--trainer-arpeggio-accent-text); border-color: var(--trainer-arpeggio-accent-border); }
.swc-difficulty-pip--intermediate { background: var(--app-warning-surface); color: var(--app-warning); border-color: var(--app-warning-border); }
.swc-difficulty-pip--advanced     { background: var(--app-danger-surface); color: var(--app-danger); border-color: var(--app-danger-border); }

.swc-hand-pip--both  { background: var(--app-info-surface); color: var(--app-info-text); border-color: var(--app-info-border); }
.swc-hand-pip--right { background: var(--app-success-surface); color: var(--app-success); border-color: var(--app-success-border); }
/* allow-hardcoded-colour: rose data badge — distinct hue for LH classification chip */
.swc-hand-pip--left  { background: #fdf2f8; color: #831843; border-color: #f9a8d4; }

.swc-level-label {
  font-size: 0.9rem;
  color: var(--app-text);
}

.swc-arrangement-meta {
  font-size: 0.78rem;
  color: var(--app-text-subtle);
}

.swc-arrangement-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.swc-open-btn {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  border: 1px solid var(--app-primary-hover);
  padding: 0.35rem 0.85rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
  min-height: 34px;
}

.swc-open-btn:hover:not(:disabled) {
  background: var(--app-primary-hover);
}

.swc-open-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.swc-secondary-btn {
  background: transparent;
  color: var(--app-primary);
  border: 1px solid var(--profile-accent-border);
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.swc-secondary-btn:hover {
  background: var(--profile-accent-soft);
}

/* ── Upload mode selector ──────────────────────────────────────────────── */
.ml-upload-mode-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.ml-upload-mode-btn {
  background: var(--app-border);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  border-radius: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ml-upload-mode-btn:hover:not(:disabled) {
  background: var(--app-border-strong);
  border-color: var(--app-text-subtle);
  color: var(--app-text);
}

.ml-upload-mode-btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
}

.ml-upload-mode-btn--active,
.ml-upload-mode-btn[aria-selected="true"] {
  background: var(--app-primary);
  color: var(--app-text-on-primary);
  border-color: var(--app-primary-hover);
}

.ml-upload-mode-btn--active:hover:not(:disabled),
.ml-upload-mode-btn[aria-selected="true"]:hover:not(:disabled) {
  background: var(--app-primary-hover);
  color: var(--app-text-on-primary);
  border-color: var(--app-primary-active);
}

.ml-upload-mode-btn:disabled {
  background: var(--app-surface-raised);
  color: var(--app-text-muted);
  border-color: var(--app-border-strong);
  cursor: not-allowed;
}

.ml-upload-context {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--app-info-border);
  background: var(--app-info-surface);
  border-radius: 0.5rem;
}

.ml-upload-context-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--app-info-hover);
}

.ml-upload-breadcrumb {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-info-border);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
}

/* ── Work grid card (post Works-view cleanup) ──────────────────────────── */
.ml-work-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ml-work-arrangement-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--app-text);
}

.ml-work-arrangement-caption {
  font-weight: 600;
  color: var(--app-text);
}

.ml-work-arrangement-select {
  font-size: 0.95rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.4rem;
  background: var(--app-surface);
  color: var(--app-text);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.ml-work-arrangement-select:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
}

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

.ml-work-edit-btn {
  background: var(--app-surface-raised);
}
/* ── AppNav ─────────────────────────────────────────────────────────────────
   Horizontal scrollable nav bar. Designed for iPad landscape (1024 px) and
   desktop Chrome. Phase 5G: nav buttons now route through AppButton, so the
   pill/active/hover/focus visuals come from primitives.css. AppNav.css only
   owns LAYOUT: the scroll container surface, the <ul> list reset and the
   horizontal flex row that lays out items. No button chrome, no AppBadge /
   AppStatusBanner colours, no focus rings.
   ─────────────────────────────────────────────────────────────────────────── */

.app-nav {
  display: block;
  box-sizing: border-box;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 0 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

/* Explicit <ul> reset — overrides browser defaults (padding-inline-start: 40px,
   list-style: disc, margin-block) that would otherwise let bullets and an
   indent leak through if any rule loads out of order. */
.app-nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.3rem 0;
  padding-inline-start: 0;
  list-style: none;
  list-style-type: none;
  min-width: 0;
}

.app-nav__item {
  display: flex;
  flex-shrink: 0;
  list-style: none;
}

/* ── Page content shared styles ──────────────────────────────────────────── */

.page {
  /* pages naturally flow below the nav; no special positioning needed */
}

.page__heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--app-text);
}

.page__placeholder {
  color: var(--app-text-muted);
  font-size: 0.9375rem;
  max-width: 40rem;
  line-height: 1.6;
}

.page__not-enabled {
  color: var(--app-text-subtle);
  font-size: 0.9rem;
  padding: 1rem;
}

/* ── Temp Parent — Diagnostic tools (MF-05) ──────────────────────────────
   Container for the diagnostic cards moved out of the app shell and the
   small collapsible toggle each card lives behind. Tokens only — no raw
   colour literals. */

.temp-parent__moved-notice {
  margin-top: 0.75rem;
}

.temp-parent__moved-notice-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.temp-parent__moved-notice-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  flex: 1;
  min-width: 180px;
}

.temp-parent__diagnostic-tools {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.temp-parent__collapsible {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
}

.temp-parent__collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--app-text);
  text-align: left;
  cursor: pointer;
}

.temp-parent__collapsible-toggle:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.temp-parent__collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text-muted);
  line-height: 1;
  transition: transform 120ms ease;
}

.temp-parent__collapsible-chevron.is-open {
  transform: rotate(90deg);
}

.temp-parent__collapsible-body {
  padding: 0.5rem 0.875rem 0.875rem;
  border-top: 1px solid var(--card-border);
}

/* MF-15 — short explanatory line under temporary section headings. */
.temp-parent__helper-text {
  margin: -0.25rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  font-style: italic;
}

/* ── App chrome row (MF-06) ──────────────────────────────────────────────
   Row that holds AppNav and the global MidiAudioStatusChip side by side.
   On narrow viewports the chip wraps below the nav. */

.app-chrome-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
  /* Prevent this nav row from stretching to fill remaining grid height. */
  align-self: start;
}

.app-chrome-row > .app-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.app-chrome-row > .midi-chip {
  flex: 0 0 auto;
}

@media (min-width: 820px) {
  .app-chrome-row {
    flex-wrap: nowrap;
  }
}

/* ── Temp Parent → Advanced MIDI (MF-06) ────────────────────────────── */

.temp-parent__midi-advanced {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.temp-parent__field {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--app-text);
}

.temp-parent__field-label {
  font-weight: 600;
  color: var(--app-text);
}

.temp-parent__field-value {
  color: var(--app-text-muted);
  word-break: break-word;
}

.temp-parent__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.temp-parent__subblock {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--card-border);
}

.temp-parent__subheading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text);
}

.temp-parent__port-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.temp-parent__port-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--card-border);
}

.temp-parent__port-list li:last-child {
  border-bottom: none;
}

.temp-parent__port-name {
  font-weight: 600;
  color: var(--app-text);
  word-break: break-word;
}

.temp-parent__port-meta {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

/* ── Temp Parent — System check definition lists (MF-07) ──────────────── */

.temp-parent__definition-list {
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

.temp-parent__definition-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.85rem;
}

.temp-parent__definition-row:last-child {
  border-bottom: none;
}

.temp-parent__definition-row dt {
  color: var(--app-text-muted);
  flex-shrink: 0;
  margin: 0;
}

.temp-parent__definition-row dd {
  margin: 0;
  color: var(--app-text);
  text-align: right;
  word-break: break-word;
}

.temp-parent__definition-row--full {
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.temp-parent__definition-row--full dd {
  text-align: left;
}

.temp-parent__mono {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: 0.82rem;
  color: var(--app-text);
}
/* ── MidiAudioStatusChip ─────────────────────────────────────────────────
   MF-06 — compact global keyboard/audio status chip rendered next to
   AppNav.  Replaces the large midi-panel-card from pre-MF-06.
   MF-06b — chip becomes a tight icon-only control: a piano glyph with a
   single status dot in the bottom-right corner.  No long text label, no
   device name.  Tokens-only — no raw colour literals.  Touch-friendly
   minimum height for iPad landscape.
   ────────────────────────────────────────────────────────────────────── */

.midi-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* MF-06b — stable width: the control occupies the same footprint in
     every state (not-ready / ready / disconnected). */
  width: 40px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text);
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.midi-chip:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-ring-offset);
}

.midi-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text);
  line-height: 1;
}

.midi-chip__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--app-text-subtle);
  border: 1.5px solid var(--app-surface-raised);
  box-sizing: content-box;
  flex: 0 0 auto;
}

.midi-chip__dot--ready {
  background: var(--app-success);
}

.midi-chip__dot--not-ready {
  background: var(--app-warning);
}

.midi-chip__dot--disconnected {
  background: var(--app-danger);
  animation: midi-chip-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes midi-chip-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .midi-chip__dot--disconnected {
    animation: none;
  }
}

.midi-chip--ready {
  border-color: var(--app-success);
}

.midi-chip--disconnected {
  border-color: var(--app-danger);
}

/* ── Setup modal (MF-06 / MF-06b) ─────────────────────────────────────── */

.midi-setup-modal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: min(420px, 90vw);
}

.midi-setup-modal__heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-text);
}

.midi-setup-modal__helper {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-muted);
  line-height: 1.45;
}

.midi-setup-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--app-text);
}

.midi-setup-modal__status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
}

.midi-setup-modal__status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.midi-setup-modal__device {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  padding: 0 0.25rem;
}

.midi-setup-modal__device-name {
  font-weight: 600;
  color: var(--app-text);
}

.midi-setup-modal__main-button {
  min-height: 48px;
  font-size: 1rem;
}

.midi-setup-modal__selector {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.midi-setup-modal__selector label {
  font-size: 0.875rem;
  font-weight: 600;
}

.midi-setup-modal__selector select {
  min-height: 44px;
  box-sizing: border-box;
  width: 100%;
}

.midi-setup-modal__error {
  margin: 0;
  font-size: 0.875rem;
}

.midi-setup-modal__close-row {
  display: flex;
  justify-content: flex-end;
}
/* ============================================================
   childExperience.css — child experience theme layer.

   Token rule: --xp-* custom properties are set on
   .child-xp-shell and cascade to all child components.
   Profile accent tokens (--profile-accent, --profile-bg,
   --profile-accent-soft) cascade in from .app ancestor and
   are referenced here — no re-declaration needed.

   Hex tints annotated with allow-hardcoded-colour are used
   only for per-theme identity pigments in color-mix().
   All structural colours defer to --app-* and --profile-*.
   ============================================================ */

/* ---- Default shell tokens ---------------------------------- */

.child-xp-shell {
  /* Surface */
  --xp-hero-bg:       var(--profile-bg, var(--app-bg));
  --xp-hero-border:   var(--profile-accent-border, var(--app-border));
  --xp-section-gap:   20px;

  /* Text */
  --xp-hero-title-color:    var(--profile-accent, var(--app-text-emphasis));
  --xp-eyebrow-color:       var(--app-text-muted);
  --xp-eyebrow-motif-color: var(--profile-accent, var(--app-text-muted));

  /* Practice zone cards */
  --xp-card-bg:          var(--app-surface);
  --xp-card-border:      var(--app-border);
  --xp-card-hover-bg:    var(--profile-selected-bg, var(--app-surface));
  --xp-card-action-color: var(--profile-accent, var(--app-text-emphasis));

  /* Reward panel */
  --xp-reward-bg:     var(--profile-bg, var(--app-surface));
  --xp-reward-border: var(--profile-accent-border, var(--app-border));

  display: flex;
  flex-direction: column;
  gap: var(--xp-section-gap);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---- Royal Music Quest ------------------------------------- */

.child-xp-shell[data-theme='royal'] {
  --xp-hero-bg: color-mix(in srgb, #fffef5 60%, var(--app-bg)); /* allow-hardcoded-colour: royal theme warm cream */
  --xp-card-bg: color-mix(in srgb, #fffef5 40%, var(--app-surface)); /* allow-hardcoded-colour: royal theme warm cream */
  --xp-reward-bg: color-mix(in srgb, #fffef5 50%, var(--app-surface)); /* allow-hardcoded-colour: royal theme warm cream */
}

/* ---- Magical Studio --------------------------------------- */

.child-xp-shell[data-theme='magical'] {
  --xp-hero-bg: color-mix(in srgb, #f5f3ff 60%, var(--app-bg)); /* allow-hardcoded-colour: magical theme lavender */
  --xp-card-bg: color-mix(in srgb, #f5f3ff 40%, var(--app-surface)); /* allow-hardcoded-colour: magical theme lavender */
  --xp-reward-bg: color-mix(in srgb, #f5f3ff 50%, var(--app-surface)); /* allow-hardcoded-colour: magical theme lavender */
}

/* ---- Space Mission ----------------------------------------- */

.child-xp-shell[data-theme='space'] {
  --xp-hero-bg: color-mix(in srgb, #eef2ff 60%, var(--app-bg)); /* allow-hardcoded-colour: space theme cool indigo */
  --xp-card-bg: color-mix(in srgb, #eef2ff 40%, var(--app-surface)); /* allow-hardcoded-colour: space theme cool indigo */
  --xp-reward-bg: color-mix(in srgb, #eef2ff 50%, var(--app-surface)); /* allow-hardcoded-colour: space theme cool indigo */
}

/* ---- Jungle Adventure ------------------------------------- */

.child-xp-shell[data-theme='jungle'] {
  --xp-hero-bg: color-mix(in srgb, #f0fdf4 60%, var(--app-bg)); /* allow-hardcoded-colour: jungle theme leaf green */
  --xp-card-bg: color-mix(in srgb, #f0fdf4 40%, var(--app-surface)); /* allow-hardcoded-colour: jungle theme leaf green */
  --xp-reward-bg: color-mix(in srgb, #f0fdf4 50%, var(--app-surface)); /* allow-hardcoded-colour: jungle theme leaf green */
}

/* ---- Ocean Explorer --------------------------------------- */

.child-xp-shell[data-theme='ocean'] {
  --xp-hero-bg: color-mix(in srgb, #f0fdfa 60%, var(--app-bg)); /* allow-hardcoded-colour: ocean theme teal mist */
  --xp-card-bg: color-mix(in srgb, #f0fdfa 40%, var(--app-surface)); /* allow-hardcoded-colour: ocean theme teal mist */
  --xp-reward-bg: color-mix(in srgb, #f0fdfa 50%, var(--app-surface)); /* allow-hardcoded-colour: ocean theme teal mist */
}

/* ---- Classic Piano Room ----------------------------------- */

.child-xp-shell[data-theme='classic'] {
  --xp-hero-bg: color-mix(in srgb, #fefce8 60%, var(--app-bg)); /* allow-hardcoded-colour: classic theme ivory */
  --xp-card-bg: color-mix(in srgb, #fefce8 40%, var(--app-surface)); /* allow-hardcoded-colour: classic theme ivory */
  --xp-reward-bg: color-mix(in srgb, #fefce8 50%, var(--app-surface)); /* allow-hardcoded-colour: classic theme ivory */
}

/* calm, teen, parent — token-only, no hex tints needed */

/* ---- Hero -------------------------------------------------- */

.child-xp-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--xp-hero-bg);
  border: 1px solid var(--xp-hero-border);
  border-radius: var(--card-radius, 10px);
  box-shadow: var(--app-shadow-card);
  min-width: 0;
  box-sizing: border-box;
}

.child-xp-hero__motif {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
}

.child-xp-hero__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.child-xp-hero__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--xp-hero-title-color);
  line-height: 1.2;
}

.child-xp-hero__subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--app-text-secondary);
  line-height: 1.4;
}

.child-xp-hero__accent-line {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--profile-accent, var(--app-border));
  margin-top: 4px;
}

/* ---- Section (Mission, Progress wrappers) ----------------- */

.child-xp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.child-xp-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xp-eyebrow-color);
}

.child-xp-section__eyebrow-motif {
  font-size: 1rem;
  line-height: 1;
  color: var(--xp-eyebrow-motif-color);
}

.child-xp-section__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---- Practice Zone ---------------------------------------- */

.child-xp-practice-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.child-xp-practice-zone__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
  min-width: 0;
}

/* ---- Trainer Action Card ---------------------------------- */

.child-xp-trainer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--xp-card-bg);
  border: 1px solid var(--xp-card-border);
  border-radius: var(--card-radius, 10px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  box-shadow: var(--app-shadow-card);
}

.child-xp-trainer-card:hover,
.child-xp-trainer-card:focus-visible {
  background: var(--xp-card-hover-bg);
  border-color: var(--profile-accent-border, var(--app-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* allow-hardcoded-colour: standard elevation shadow */
  outline: none;
}

.child-xp-trainer-card:focus-visible {
  outline: 2px solid var(--app-focus-ring, var(--profile-accent));
  outline-offset: 2px;
}

.child-xp-trainer-card__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.child-xp-trainer-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
  line-height: 1.2;
}

.child-xp-trainer-card__action {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--xp-card-action-color);
  letter-spacing: 0.03em;
}

/* ---- Reward Panel ----------------------------------------- */

.child-xp-reward-panel {
  min-width: 0;
}

.child-xp-reward-panel__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--xp-reward-bg);
  border: 1px solid var(--xp-reward-border);
  border-radius: var(--card-radius, 10px);
  box-shadow: var(--app-shadow-card);
  box-sizing: border-box;
  min-width: 0;
}

.child-xp-reward-panel__motif {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.child-xp-reward-panel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.child-xp-reward-panel__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
}

.child-xp-reward-panel__sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
}

/* ---- Celebration Zone ------------------------------------- */

.child-xp-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--xp-reward-bg);
  border: 1px solid var(--xp-reward-border);
  border-radius: var(--card-radius, 10px);
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
}

.child-xp-celebration__motif {
  font-size: 2.5rem;
  line-height: 1;
}

.child-xp-celebration__message {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--profile-accent, var(--app-text-emphasis));
}

.child-xp-celebration__sub {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

/* ---- Responsive ------------------------------------------- */

@media (max-width: 640px) {
  .child-xp-shell {
    --xp-section-gap: 14px;
  }

  .child-xp-hero {
    padding: 14px 16px;
    gap: 12px;
  }

  .child-xp-hero__motif {
    font-size: 2rem;
  }

  .child-xp-hero__title {
    font-size: 1.25rem;
  }

  .child-xp-practice-zone__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .child-xp-trainer-card {
    padding: 12px 8px;
  }

  .child-xp-trainer-card__icon {
    font-size: 1.5rem;
  }
}
/* ============================================================
   CourseProgressPanel (.cpp__*)
   Child-facing course progress map.
   ============================================================ */

/* ---- Section wrapper ---- */
.cpp {
  max-width: 100%;
}

.cpp__heading {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem;
}

.cpp__loading,
.cpp__empty {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

.cpp__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Course card ---- */
.cpp__course {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.cpp__course--complete {
  border-color: #86efac;
  background: #f0fdf4;
}

.cpp__course-header {
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cpp__course--complete .cpp__course-header {
  background: #dcfce7;
  border-bottom-color: #86efac;
}

.cpp__course-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpp__complete-badge {
  background: #16a34a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
}

.cpp__child-message {
  width: 100%;
  font-size: 0.85rem;
  color: #475569;
  margin: 0.25rem 0 0;
  font-style: italic;
}

/* ---- Modules ---- */
.cpp__modules {
  display: flex;
  flex-direction: column;
}

.cpp__module {
  border-bottom: 1px solid #f1f5f9;
}

.cpp__module:last-child {
  border-bottom: none;
}

.cpp__module-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-family: inherit;
  color: #334155;
  min-height: 44px;
}

.cpp__module-header:hover {
  background: #f8fafc;
}

/* Completed module: green tint on header */
.cpp__module--complete > .cpp__module-header {
  background: #f0fdf4;
  color: #15803d;
}

.cpp__module--complete > .cpp__module-header:hover {
  background: #dcfce7;
}

.cpp__module-toggle {
  color: #94a3b8;
  font-size: 0.8rem;
  flex-shrink: 0;
  width: 14px;
}

.cpp__module-name {
  flex: 1;
  font-weight: 600;
  min-width: 0;
}

/* Completed module badge shown in header */
.cpp__module-complete-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: #16a34a;
  color: #fff;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  flex-shrink: 0;
}

.cpp__module-progress {
  font-size: 0.78rem;
  color: #64748b;
  flex-shrink: 0;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
}

.cpp__module--complete .cpp__module-progress {
  background: #dcfce7;
  color: #15803d;
}

/* ---- Exercise list ---- */
.cpp__exercise-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.35rem;
}

.cpp__exercise {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 2.2rem;
  font-size: 0.85rem;
  min-height: 44px;
}

/* ---- Completed ---- */
/* Green background, dark green text — clearly SUCCESS, not locked */
.cpp__exercise--completed {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 600;
  border-left: 3px solid #4ade80;
}

/* ---- Current ---- */
.cpp__exercise--current {
  color: #1d4ed8;
  font-weight: 600;
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

/* ---- Locked ---- */
/* Grey, muted — only future exercises are ever locked */
.cpp__exercise--locked {
  color: #cbd5e1;
  background: transparent;
}

/* ---- Empty placeholder ---- */
.cpp__exercise--empty {
  color: #94a3b8;
  font-style: italic;
  padding-left: 1rem;
}

.cpp__exercise-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.cpp__exercise-label {
  flex: 1;
}

/* ---- Badges ---- */
.cpp__exercise-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
}

.cpp__exercise-badge--completed {
  background: #16a34a;
  color: #fff;
}

.cpp__exercise-badge--current {
  background: #2563eb;
  color: #fff;
}

/* ---- Start Practice button (current exercise) ---- */
.cpp__start-btn {
  font-size: 0.75rem;
  font-weight: 700;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  min-height: 36px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.cpp__start-btn:hover {
  background: #15803d;
}

.cpp__start-btn:active {
  background: #166534;
}

/* ---- Practice Again button (completed exercises) ---- */
.cpp__replay-btn {
  font-size: 0.72rem;
  font-weight: 700;
  background: #fff;
  color: #15803d;
  border: 1.5px solid #4ade80;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  min-height: 34px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}

.cpp__replay-btn:hover {
  background: #dcfce7;
  border-color: #16a34a;
}

.cpp__replay-btn:active {
  background: #bbf7d0;
}
/* ============================================================
   ChildHomeScreen (.chs__*)
   Three-lane child home screen layout.
   Lanes: Assigned | Continue your course | Free practice

   Uses shared semantic tokens from src/styles/tokens.css for
   surfaces / borders / states. The per-child decorative theme
   accents below are an approved exception (documented in
   scripts/validate-colour-tokens.cjs allowlist).
   ============================================================ */

/* ---- Root ---- */
.chs {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ---- Lane wrapper ---- */
.chs__lane {
  width: 100%;
}

/* ---- Lane heading ---- */
.chs__lane-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 1.5rem 0 0.6rem;
  padding: 0;
}

.chs__lane-heading-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- Assigned lane ---- */
.chs__lane--assigned .chs__lane-heading {
  color: var(--chs-accent, var(--profile-accent));
}

/* ---- Course lane ---- */
.chs__lane--course .chs__lane-heading {
  color: var(--app-success);
}

/* ---- Free lane ---- */
.chs__lane--free .chs__lane-heading {
  color: var(--app-text-muted);
}

.chs__free-note {
  font-size: 0.82rem;
  color: var(--app-text-subtle);
  margin: 0 0 0.75rem;
  font-style: italic;
}

/* ---- Empty state (no assignments, no reviews) ---- */
.chs__empty-assigned {
  background: var(--app-surface-raised);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-md);
  padding: 1.25rem 1.5rem;
  color: var(--app-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---- Review items ---- */
.chs__review-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.chs__review-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
}

.chs__review-card--overdue {
  border-color: var(--app-danger-border);
  background: var(--app-danger-surface);
}

.chs__review-card--due {
  border-color: var(--app-warning-border);
  background: var(--app-warning-surface);
}

.chs__review-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.chs__review-body {
  flex: 1;
  min-width: 0;
}

.chs__review-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--app-text);
  margin: 0 0 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chs__review-label {
  font-size: 0.78rem;
  color: var(--app-text-muted);
  margin: 0;
}

.chs__review-label--overdue {
  color: var(--app-danger);
  font-weight: 600;
}

.chs__review-label--due {
  color: var(--app-warning);
  font-weight: 600;
}

/* ---- Per-child theme variables ----------------------------------
   Decorative theme accents (allowed-exception colour palette).
   These tint per-child lanes only — they never carry warning,
   danger, disabled, or focus meaning. The base accessibility
   tokens still come from Section A of tokens.css.
   --------------------------------------------------------------- */

/* allow-hardcoded-colour: child-theme-accent
   Blue (Anthony) */
.chs--theme-blue {
  --chs-accent: #1d4ed8;
  --chs-accent-bg: #eff6ff;
  --chs-accent-border: #bfdbfe;
}

/* allow-hardcoded-colour: child-theme-accent
   Rose (Giselle) */
.chs--theme-rose {
  --chs-accent: #be185d;
  --chs-accent-bg: #fff1f2;
  --chs-accent-border: #fecdd3;
}

/* allow-hardcoded-colour: child-theme-accent
   Green (Joelle) */
.chs--theme-green {
  --chs-accent: #166534;
  --chs-accent-bg: #f0fdf4;
  --chs-accent-border: #bbf7d0;
}

/* allow-hardcoded-colour: child-theme-accent
   Orange (fallback) */
.chs--theme-orange {
  --chs-accent: #c2410c;
  --chs-accent-bg: #fff7ed;
  --chs-accent-border: #fed7aa;
}

/* allow-hardcoded-colour: child-theme-accent
   Indigo (fallback) */
.chs--theme-indigo {
  --chs-accent: #4338ca;
  --chs-accent-bg: #eef2ff;
  --chs-accent-border: #c7d2fe;
}

/* Themed assignment heading badge (decorative — allowed exception). */
.chs--theme-blue   .chs__lane--assigned .chs__lane-heading { color: #1d4ed8; }  /* allow-hardcoded-colour: child-theme-accent */
.chs--theme-rose   .chs__lane--assigned .chs__lane-heading { color: #be185d; }  /* allow-hardcoded-colour: child-theme-accent */
.chs--theme-green  .chs__lane--assigned .chs__lane-heading { color: #166534; }  /* allow-hardcoded-colour: child-theme-accent */
.chs--theme-orange .chs__lane--assigned .chs__lane-heading { color: #c2410c; }  /* allow-hardcoded-colour: child-theme-accent */
.chs--theme-indigo .chs__lane--assigned .chs__lane-heading { color: #4338ca; }  /* allow-hardcoded-colour: child-theme-accent */

/* ---- Offline banner ---- */
.chs__offline-banner {
  background: var(--app-warning-surface);
  border: 1px solid var(--app-warning-border);
  border-radius: var(--app-radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--app-warning);
  margin-bottom: 0.5rem;
}

/* ---- Offline empty state ---- */
.chs__offline-empty {
  background: var(--app-surface-raised);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-md);
  padding: 1.25rem 1.5rem;
  color: var(--app-text-muted);
  font-size: 0.9rem;
  text-align: center;
}
/* ── DojoPage — The Dojo training centre hub (MF-30) ─────────────────────────
   Token rule: all colours via --app-* and --profile-* tokens. No hex literals
   except the standard elevation shadow annotated below.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────── */

.dojo-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.dojo-page__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dojo-page__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--profile-accent, var(--app-text-emphasis));
  line-height: 1.2;
}

.dojo-page__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

/* ── Group list ──────────────────────────────────────────────────────────── */

.dojo-page__groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Group ───────────────────────────────────────────────────────────────── */

.dojo-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.dojo-group__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--app-text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dojo-group__emoji {
  font-size: 1rem;
  line-height: 1;
}

.dojo-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  min-width: 0;
}

/* ── Trainer card ────────────────────────────────────────────────────────── */

.dojo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px 14px 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--card-radius, 10px);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  box-shadow: var(--app-shadow-card);
}

.dojo-card:hover,
.dojo-card:focus-visible {
  background: var(--profile-selected-bg, var(--app-surface-raised));
  border-color: var(--profile-accent-border, var(--app-border-emphasis));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* allow-hardcoded-colour: standard elevation shadow */
}

.dojo-card:focus-visible {
  outline: 2px solid var(--app-focus-ring, var(--profile-accent));
  outline-offset: 2px;
}

.dojo-card__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.dojo-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text-emphasis);
  line-height: 1.2;
}

.dojo-card__desc {
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
  line-height: 1.4;
}

/* "via Reading Music" badge — signals the trainer lives inside the Reading Music page */

.dojo-card__via {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-text-muted);
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.6;
  align-self: flex-start;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .dojo-page {
    gap: 18px;
  }

  .dojo-page__groups {
    gap: 20px;
  }

  .dojo-page__title {
    font-size: 1.25rem;
  }

  .dojo-group__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dojo-card {
    padding: 12px 10px;
  }

  .dojo-card__icon {
    font-size: 1.25rem;
  }
}
/* EarTraining.css — Ear Training teaching-visual styles.

   Phase 5F note: shared UI chrome (level pills, action buttons, status
   badges, feedback banners, container surfaces) now lives in the
   design-system primitives (AppButton, AppBadge, AppStatusBanner,
   AppTrainerScreen, AppTrainerHeader, AppTrainerControlPanel,
   AppTrainerWorkspace, AppTrainerActionRow, AppTrainerFeedback). Only
   ear-specific teaching visuals remain here:
     - the interval / chord answer-choice grid
     - the melody-echo per-note chip strip
     - the rhythm-echo TAP target
     - the rhythm-echo "Listening to the rhythm..." help text
   Every colour is a token reference — no raw hex / rgb. */

.ear-trainer {
  --ear-accent:        var(--trainer-ear-accent);
  --ear-accent-soft:   var(--trainer-ear-accent-soft);
  --ear-accent-border: var(--trainer-ear-accent-border);
  --ear-accent-text:   var(--trainer-ear-accent-text);
  --ear-card:          var(--app-surface);
  --ear-border:        var(--app-border);
  --ear-text:          var(--app-text);
  --ear-text-muted:    var(--app-text-muted);
  --ear-success-bg:    var(--app-success-surface);
  --ear-success-border:var(--app-success-border);
  --ear-success-text:  var(--app-success-text);
  --ear-danger-bg:     var(--app-danger-surface);
  --ear-danger-border: var(--app-danger-border);
  --ear-danger-text:   var(--app-danger-text);
  color-scheme: light;
  box-sizing: border-box;
}

.ear-trainer *,
.ear-trainer *::before,
.ear-trainer *::after { box-sizing: border-box; }

/* ── Hint line shown above the answer grid / chip strip ───────────── */
.ear-trainer__hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--ear-text-muted);
}

/* ── Live status text (melody echo "Play note 2 of 3…") ───────────── */
.ear-trainer__status {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ear-accent-text);
}

/* ── Answer-choice grid (intervals, chord qualities) ──────────────── */
.ear-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ear-answer-btn {
  appearance: none;
  border: 2px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  border-radius: 12px;
  padding: 16px 14px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  min-height: 64px;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ear-answer-btn:hover:not(:disabled) {
  border-color: var(--ear-accent);
}

.ear-answer-btn:disabled {
  cursor: default;
}

.ear-answer-btn[data-state='correct'] {
  border: 3px solid var(--app-success);
  background: var(--ear-success-bg);
  color: var(--ear-success-text);
}

.ear-answer-btn[data-state='wrong'] {
  border: 3px solid var(--app-danger);
  background: var(--ear-danger-bg);
  color: var(--ear-danger-text);
}

/* ── Melody-echo per-note chip strip ──────────────────────────────── */
.ear-note-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ear-note-chip {
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8125rem;
  border: 1px solid var(--ear-border);
  background: var(--ear-card);
  color: var(--ear-text);
  text-align: center;
}

.ear-note-chip[data-state='correct'] {
  border: 2px solid var(--app-success);
  background: var(--ear-success-bg);
  color: var(--ear-success-text);
}

.ear-note-chip[data-state='wrong'] {
  border: 2px solid var(--app-danger);
  background: var(--ear-danger-bg);
  color: var(--ear-danger-text);
}

.ear-note-chip[data-state='awaiting'] {
  border: 2px dashed var(--ear-accent);
  background: var(--ear-accent-soft);
  color: var(--ear-accent-text);
}

/* ── Rhythm-echo TAP target (domain-specific large touch surface) ─── */
.ear-tap-target {
  display: block;
  appearance: none;
  width: 100%;
  min-height: 120px;
  padding: 24px;
  border: 2px solid var(--app-border-strong);
  background: var(--ear-accent-soft);
  color: var(--ear-accent-text);
  border-radius: 14px;
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ear-tap-target[data-active='true'] {
  border: 3px solid var(--ear-accent);
  background: var(--ear-accent);
  color: var(--app-text-on-primary);
}

/* ── Rhythm-echo melody recap (note names below the feedback) ─────── */
.ear-melody-recap {
  margin-top: 6px;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ear-accent-text);
}
/* Composer — MuseScore-style layout: toolbar above full-width staff.
   iPad-landscape friendly: touch targets ≥ 40 px, no fixed widths. */

.composer-shell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.composer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.composer-header-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.composer-header-title h2 {
  margin: 0;
  font-size: 1.1rem;
}
.composer-header-meta {
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ── Status / export success ───────────────────────────────────────────── */
.composer-status {
  margin: 0;
  padding: 0.35rem 0.5rem;
  background: #f3eefa;
  border-radius: 8px;
  font-size: 0.85rem;
}
.composer-status--error  { background: #fde9e9; color: #8a1f1f; }
.composer-status--success { background: #e6f9ed; color: #1a5c32; }
.composer-export-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ── Shared button ─────────────────────────────────────────────────────── */
.composer-btn {
  appearance: none;
  border: 1px solid #c9c5d4;
  background: #fff;
  color: #1f1530;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 40px;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.composer-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-btn--primary { background: #6c2bd9; border-color: #6c2bd9; color: #fff; }
.composer-btn--danger  { background: #cc2b3a; border-color: #cc2b3a; color: #fff; }
.composer-btn--small   { min-height: 32px; padding: 4px 8px; font-size: 0.78rem; }
.composer-btn--active  { background: #ead4ff; border-color: #6c2bd9; color: #2f1064; }

/* ── Edit layout — MuseScore-style: column stack, staff full width ─────── */
.composer-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* ── Toolbar — single horizontal-wrap row above the staff ──────────────── */
.composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  background: #faf7ff;
  border: 1px solid #ddd5ec;
  border-radius: 10px;
  align-items: center;
}
.composer-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.composer-toolbar-group + .composer-toolbar-group {
  padding-left: 0.5rem;
  border-left: 1px solid #ddd5ec;
}
.composer-duration-btn {
  flex-direction: column;
  min-width: 48px;
  padding: 4px 6px;
}
.composer-duration-symbol { font-size: 1.2rem; line-height: 1; }
.composer-duration-label  { font-size: 0.68rem; font-weight: 500; }
.composer-hand-toggle {
  display: flex;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.composer-hand-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* ── Measure bar ───────────────────────────────────────────────────────── */
.composer-measure-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 8px;
}
.composer-measure-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.composer-measure-label-inline select {
  appearance: none;
  border: 1px solid #c9c5d4;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  min-height: 32px;
  background: #fff;
  cursor: pointer;
}
.composer-beat-counter {
  font-size: 0.82rem;
  color: #555;
  font-variant-numeric: tabular-nums;
}
.composer-beat-counter--full { color: #8a1f1f; font-weight: 700; }
.composer-midi-hint { margin-left: auto; font-size: 0.8rem; color: #555; }

/* ── Score area — full width ───────────────────────────────────────────── */
.composer-edit-score {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* ── Score preview rows ─────────────────────────────────────────────────── */
.composer-preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.composer-preview--empty {
  padding: 1rem;
  text-align: center;
  background: #f7f4fd;
  border-radius: 8px;
  color: #555;
}
.composer-preview-row {
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 8px;
  padding: 0.5rem;
  min-width: 0;
}
.composer-preview-row--active {
  border-color: #6c2bd9;
  box-shadow: 0 0 0 1px rgba(108, 43, 217, 0.15);
}
.composer-preview-row-labels {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 0.3rem;
}
.composer-preview-measure-label--active { color: #6c2bd9; font-weight: 700; }
.composer-preview-staff-hit {
  display: block;
  width: 100%;
  user-select: none;
}

/* ── Note list (selection chips) ───────────────────────────────────────── */
.composer-note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: #f9f7fc;
  border: 1px solid #e3deed;
  border-radius: 8px;
}
.composer-note-list-label {
  font-size: 0.78rem;
  color: #666;
  font-weight: 600;
  margin-right: 0.2rem;
}
.composer-note-chip {
  appearance: none;
  border: 1px solid #c9c5d4;
  background: #fff;
  color: #1f1530;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 28px;
  white-space: nowrap;
}
.composer-note-chip:hover { border-color: #6c2bd9; }
.composer-note-chip--selected {
  background: #ead4ff;
  border-color: #6c2bd9;
  color: #2f1064;
  font-weight: 700;
}

/* ── New piece form ─────────────────────────────────────────────────────── */
.composer-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 10px;
  padding: 0.75rem;
  max-width: 480px;
}
.composer-form-heading { margin: 0 0 0.25rem; font-size: 1rem; }
.composer-form-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.composer-form-label input,
.composer-form-label select {
  appearance: none;
  border: 1px solid #c9c5d4;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.composer-form-fieldset {
  border: 1px solid #e3deed;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.composer-form-fieldset legend { padding: 0 0.25rem; font-size: 0.8rem; color: #555; }
.composer-form-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }

/* ── Library ────────────────────────────────────────────────────────────── */
.composer-library { display: flex; flex-direction: column; gap: 0.5rem; }
.composer-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.composer-library-header h3 { margin: 0; font-size: 1rem; }
.composer-library-status { margin: 0.2rem 0; font-size: 0.85rem; color: #555; }
.composer-library-status--error { color: #8a1f1f; }
.composer-library-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.composer-library-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 8px;
  min-width: 0;
}
.composer-library-card-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.composer-library-card-title { font-size: 0.95rem; }
.composer-library-card-meta { font-size: 0.75rem; color: #555; }
.composer-library-card-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* ── Comments ────────────────────────────────────────────────────────────── */
.composer-comments {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #faf7ff;
  border: 1px solid #ddd5ec;
  border-radius: 10px;
  padding: 0.5rem;
}
.composer-comments h4 { margin: 0; font-size: 0.95rem; }
.composer-comments-error { margin: 0; font-size: 0.8rem; color: #8a1f1f; }
.composer-comments-form { display: flex; flex-direction: column; gap: 0.3rem; }
.composer-comments-form textarea {
  border: 1px solid #c9c5d4;
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  resize: vertical;
}
.composer-comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.composer-comments-item {
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.composer-comments-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #555;
}
.composer-comments-empty { margin: 0; font-size: 0.85rem; color: #555; }

/* ── Grand Staff Editor (GrandStaffEditor.jsx) ──────────────────────────── */
.gse-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.gse-empty {
  padding: 1rem;
  text-align: center;
  background: #f7f4fd;
  border-radius: 8px;
  color: #555;
}

.gse-system {
  background: #fff;
  border: 1px solid #e3deed;
  border-radius: 8px;
  padding: 0.5rem 0.5rem 0.25rem;
  min-width: 0;
  overflow: hidden;
}

.gse-system--active {
  border-color: #6c2bd9;
  box-shadow: 0 0 0 1px rgba(108, 43, 217, 0.12);
}

.gse-system-label {
  font-size: 0.72rem;
  color: #888;
  margin-bottom: 0.15rem;
}

.gse-system-canvas {
  display: block;
  width: 100%;
  min-height: 60px;
  overflow: hidden; /* hard-stop: SVG must never expand this container */
  box-sizing: border-box;
}

.gse-system-canvas svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto; /* correct once renderSystem sets viewBox on every SVG */
}

/* ── Home page ───────────────────────────────────────────────────────────── */
.composer-home {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.piano-sound-status__progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #eceff1;
  overflow: hidden;
  margin: 0.25rem 0 0.4rem;
}

.piano-sound-status__bar {
  height: 100%;
  background: linear-gradient(90deg, #6da6ff, #3f7be0);
  transition: width 0.4s ease;
}

.piano-sound-status__detail {
  margin: 0 0 0.5rem;
}

.piano-sound-status__velocity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.piano-sound-status__velocity-label {
  color: #324050;
}

.piano-sound-status__velocity-buttons {
  display: flex;
  gap: 0.25rem;
}

.piano-sound-status__velocity-btn {
  padding: 0.2rem 0.55rem;
  border: 1px solid #cfd8e3;
  border-radius: 5px;
  background: #fff;
  color: #324050;
  font-size: 0.8rem;
  cursor: pointer;
}

.piano-sound-status__velocity-btn:hover {
  background: #f4f7fb;
}

.piano-sound-status__velocity-btn.is-active {
  background: #324050;
  color: #fff;
  border-color: #324050;
}
/* ProfileStylingWorkspace — premium profile styling panel.
   Uses --profile-* CSS vars applied at runtime to .psw__preview
   via resolveProfileCssVars. All colours use design tokens only.  */

/* ── Root ── */
.psw {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  min-width: 0;
  max-width: 100%;
}

/* ── Header ── */
.psw__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.psw__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
}

.psw__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* ── Profile selector ── */
.psw__selector-row {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
}

.psw__child-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  border: 2px solid var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.psw__child-chip:hover {
  border-color: var(--app-border-strong);
  color: var(--app-text);
  background: var(--app-surface-raised);
}

.psw__child-chip--active {
  border-color: var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.psw__child-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--app-surface-accent-soft);
  color: var(--app-text-emphasis);
  font-size: 0.8125rem;
  font-weight: 800;
  flex-shrink: 0;
}

.psw__child-chip--active .psw__child-chip-avatar {
  /* allow-hardcoded-colour: contrast overlay inside active chip */
  background: rgba(255, 255, 255, 0.2);
  color: var(--btn-primary-fg);
}

/* ── Body: controls + preview ── */
.psw__body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-5, 20px);
  align-items: start;
}

@media (max-width: 920px) {
  .psw__body {
    grid-template-columns: 1fr;
  }
}

/* ── Controls (left column) ── */
.psw__controls {
  min-width: 0;
}

.psw__tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
}

/* ── Theme preset grid ── */
.psw__preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2, 8px);
}

.psw__preset-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--space-3, 12px);
  border-radius: var(--app-radius-md);
  border: 2px solid var(--card-border);
  background: var(--swatch-bg, var(--card-bg));
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms;
  min-height: 64px;
  text-align: left;
}

.psw__preset-swatch:hover {
  border-color: var(--swatch-accent, var(--btn-primary-bg));
  box-shadow: 0 0 0 3px var(--app-surface-accent-soft);
}

.psw__preset-swatch--active {
  border-color: var(--swatch-accent, var(--btn-primary-bg));
  box-shadow: 0 0 0 3px var(--app-surface-accent-soft);
  font-weight: 700;
}

.psw__preset-swatch-dot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--swatch-accent, var(--btn-primary-bg));
  flex-shrink: 0;
}

.psw__preset-swatch-label {
  line-height: 1.2;
  color: var(--app-text);
}

/* Experience theme swatch — emoji dot + tagline sub-line */
.psw__preset-swatch .psw__preset-swatch-dot:not(:empty) {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.psw__preset-swatch-sub {
  font-size: 0.6875rem;
  color: var(--app-text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* ── Colour picker rows ── */
.psw__colour-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}

.psw__colour-label {
  min-width: 80px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-text-secondary);
}

.psw__colour-input {
  width: 48px;
  height: 40px;
  border: 2px solid var(--card-border);
  border-radius: var(--app-radius-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
  transition: border-color 120ms;
}

.psw__colour-input:hover {
  border-color: var(--app-border-strong);
}

.psw__colour-hex {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* ── Mini swatch row ── */
.psw__swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding-top: var(--space-1, 4px);
}

.psw__mini-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}

.psw__mini-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px var(--app-shadow-card, rgba(0,0,0,0.15));
}

.psw__mini-swatch--active {
  border-color: var(--app-text);
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-text-emphasis);
}

/* ── Checkbox row ── */
.psw__checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--app-text-secondary);
}

/* ── Hint text ── */
.psw__hint {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  margin: 0 0 var(--space-2, 8px);
  line-height: 1.5;
}

/* Planned / not-yet-implemented hint — shows inline placeholder text */
.psw__planned-hint {
  font-style: italic;
  opacity: 0.65;
  border-left: 2px solid var(--app-border);
  padding-left: var(--space-2, 8px);
}

/* ── Preview panel (right column) ── */
.psw__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border-radius: var(--app-radius-lg);
  border: 2px solid var(--card-border);
  background: var(--profile-bg, var(--app-surface-raised));
  min-width: 0;
  position: sticky;
  top: var(--space-4, 16px);
  box-shadow: var(--app-shadow-card);
}

.psw__preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.psw__preview-profile-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-muted);
  letter-spacing: 0.03em;
}

/* Override accent colours inside the preview using profile tokens */
.psw__preview .app-level-bar__fill {
  background: var(--profile-accent, var(--btn-primary-bg));
}

.psw__preview .app-profile-hero__initials {
  background: var(--profile-accent, var(--btn-primary-bg));
  color: var(--btn-primary-fg);
}

.psw__preview .app-profile-hero__avatar {
  background: var(--profile-accent-soft, var(--profile-secondary, var(--app-focus-ring)));
}

.psw__preview .app-reward-card--earned {
  border-color: var(--profile-reward-highlight, var(--profile-secondary));
}

.psw__preview-buttons {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

/* Token summary card */
.psw__preview-token-card {
  font-size: 0.8125rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
}

.psw__preview-token-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 3px 0;
}

.psw__preview-token-row span:first-child {
  min-width: 68px;
  color: var(--app-text-muted);
  font-size: 0.75rem;
}

.psw__preview-colour-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}

.psw__preview-token-row code {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  font-family: monospace;
}

/* ── Page heading ── */
.psw__page-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 20px;
}

.psw__page-heading-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--btn-primary-bg, #7c3aed); /* allow-hardcoded-colour: token fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-primary-bg, #7c3aed) 35%, transparent); /* allow-hardcoded-colour: token fallback */
}

.psw__page-heading-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  margin: 0;
  line-height: 1.2;
}

.psw__page-heading-sub {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 4px 0 0;
}

/* ── Section description ── */
.psw__section-desc {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  margin: 0 0 12px;
}

/* ── Visual theme cards ── */
.psw__theme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.psw__theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 2px solid var(--card-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  background: var(--tc-bg, #f5f3ff); /* allow-hardcoded-colour: CSS custom property fallback for theme card */
  overflow: hidden;
  cursor: pointer;
  padding: 0 0 8px;
  transition: border-color 140ms, box-shadow 140ms;
  font: inherit;
}

.psw__theme-card:hover {
  border-color: var(--tc-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-accent, #7c3aed) 15%, transparent); /* allow-hardcoded-colour: CSS custom property fallback */
}

.psw__theme-card--active {
  border-color: var(--tc-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-accent, #7c3aed) 15%, transparent); /* allow-hardcoded-colour: CSS custom property fallback */
}

.psw__theme-card-thumb {
  position: relative;
  width: 100%;
  height: 70px;
  background: linear-gradient(135deg, var(--tc-secondary, #c4b5fd) 0%, var(--tc-accent, #7c3aed) 100%); /* allow-hardcoded-colour: CSS custom property fallbacks for theme card thumbnail */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.psw__theme-card-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
}

.psw__theme-card-blob--1 {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.4);
  top: -15px;
  right: -10px;
}

.psw__theme-card-blob--2 {
  width: 35px;
  height: 35px;
  background: rgba(255,255,255,0.25);
  bottom: -10px;
  left: 5px;
}

.psw__theme-card-note {
  font-size: 1.5rem;
  color: rgba(255,255,255,0.9); /* allow-hardcoded-colour: white note on coloured gradient thumb */
  position: relative;
  z-index: 1;
}

.psw__theme-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--tc-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback */
  /* allow-hardcoded-colour: white checkmark on coloured circle */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
}

.psw__theme-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text);
  text-align: center;
  padding: 0 6px;
}

/* ── Large color circles ── */
.psw__color-circle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
}

.psw__color-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cc-color, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback */
  border: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  position: relative;
  flex-shrink: 0;
}

.psw__color-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.psw__color-circle--active {
  border-color: var(--app-text, #1e1e2e); /* allow-hardcoded-colour: token fallback */
  box-shadow: 0 0 0 2px var(--app-bg, #fff), 0 0 0 4px var(--cc-color, #7c3aed); /* allow-hardcoded-colour: token fallbacks */
}

.psw__color-circle-check {
  font-size: 1.125rem;
  font-weight: 900;
  /* allow-hardcoded-colour: white check mark on coloured circle */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.psw__color-circle--custom {
  /* allow-hardcoded-colour: rainbow spectrum swatch — intentional multi-colour design element */
  background: conic-gradient(#e11d48, #ea580c, #d97706, #059669, #2563eb, #7c3aed, #db2777, #e11d48);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.psw__color-circle-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* ── Background style visual cards ── */
.psw__bg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.psw__bg-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 2px solid var(--card-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  overflow: hidden;
  cursor: pointer;
  padding: 0 0 8px;
  transition: border-color 140ms, box-shadow 140ms;
  font: inherit;
  background: transparent;
}

.psw__bg-card:hover {
  border-color: var(--btn-primary-bg, #7c3aed); /* allow-hardcoded-colour: token fallback */
}

.psw__bg-card--active {
  border-color: var(--btn-primary-bg, #7c3aed); /* allow-hardcoded-colour: token fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg, #7c3aed) 15%, transparent); /* allow-hardcoded-colour: token fallback */
}

.psw__bg-card-thumb {
  width: 100%;
  height: 60px;
  margin-bottom: 6px;
}

/* Per background style thumbnails */
.psw__bg-card[data-bg-style="soft"] .psw__bg-card-thumb {
  /* allow-hardcoded-colour: preview-only background style thumbnail — soft purple tones */
  background: linear-gradient(135deg, #f8f4ff 0%, #ede9fe 100%);
}
.psw__bg-card[data-bg-style="vivid"] .psw__bg-card-thumb {
  background: linear-gradient(135deg, var(--profile-bg, #f5f3ff) 0%, var(--profile-accent-soft, #c4b5fd) 100%); /* allow-hardcoded-colour: token fallbacks */
}
.psw__bg-card[data-bg-style="neutral"] .psw__bg-card-thumb {
  /* allow-hardcoded-colour: preview-only background style thumbnail — neutral greys */
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}
.psw__bg-card[data-bg-style="gradient"] .psw__bg-card-thumb {
  background: linear-gradient(135deg, var(--profile-accent, #7c3aed) 0%, var(--profile-accent-soft, #c4b5fd) 60%, var(--profile-bg, #f5f3ff) 100%); /* allow-hardcoded-colour: token fallbacks */
}
.psw__bg-card[data-bg-style="clean"] .psw__bg-card-thumb {
  /* allow-hardcoded-colour: preview-only clean white background swatch */
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.psw__bg-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text);
  text-align: center;
  padding: 0 4px;
}

/* ── Secondary options mini card grid ── */
.psw__opts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 700px) {
  .psw__opts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.psw__opt-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--card-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  border-radius: 10px;
  background: var(--app-surface, #fff); /* allow-hardcoded-colour: token fallback */
  min-width: 0;
}

.psw__opt-card--planned {
  opacity: 0.6;
  background: var(--app-surface-raised, #f9fafb); /* allow-hardcoded-colour: token fallback */
}

.psw__opt-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text-secondary);
}

.psw__opt-planned-tag {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--app-text-muted);
  background: var(--app-info-surface, #eff6ff); /* allow-hardcoded-colour: token fallback */
  border: 1px solid var(--app-info-border, #bfdbfe); /* allow-hardcoded-colour: token fallback */
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* Remove label from AppSelect inside opt-card */
.psw__opt-card .app-select__label {
  display: none;
}

/* ── Preview panel (new structure) ── */
.psw__preview-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 16px;
}

.psw__preview-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.psw__preview-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  margin: 0 0 4px;
  line-height: 1.3;
}

.psw__preview-panel-sub {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  margin: 0;
}

.psw__preview-as-child-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--app-border-strong, #cbd5e1); /* allow-hardcoded-colour: token fallback */
  border-radius: 999px;
  background: transparent;
  color: var(--app-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms, color 120ms;
}

.psw__preview-as-child-btn:hover {
  border-color: var(--btn-primary-bg, #7c3aed); /* allow-hardcoded-colour: token fallback */
  color: var(--btn-primary-bg, #7c3aed); /* allow-hardcoded-colour: token fallback */
}

/* ── Preview frame (mini app) ── */
.psw__preview-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--app-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  display: flex;
  flex-direction: column;
  background: var(--profile-bg, #f5f3ff); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
}

/* Mini top bar */
.psw__pf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--profile-bg, #f5f3ff); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.psw__pf-hamburger {
  font-size: 1rem;
  color: var(--app-text-secondary, #64748b); /* allow-hardcoded-colour: token fallback */
}

.psw__pf-greeting {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--app-text-emphasis, #1e1e2e); /* allow-hardcoded-colour: token fallback */
}

.psw__pf-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* allow-hardcoded-colour: gold star badge */
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #92400e;
}

.psw__pf-star-icon {
  font-size: 0.875rem;
}

/* Today's Practice card */
.psw__pf-practice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 10px 10px 0;
  border-radius: 14px;
  background: var(--app-surface, #fff); /* allow-hardcoded-colour: token fallback */
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.psw__pf-practice-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  margin: 0 0 2px;
}

.psw__pf-practice-sub {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  margin: 0 0 8px;
}

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

.psw__pf-streak-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--profile-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
  display: flex;
  align-items: center;
  justify-content: center;
}

.psw__pf-streak-num {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--profile-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
}

.psw__pf-streak-label {
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.psw__pf-practice-star {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Section titles */
.psw__pf-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  padding: 10px 14px 4px;
  margin: 0;
}

/* Trainers grid */
.psw__pf-trainers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 10px 10px;
}

.psw__pf-trainer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.psw__pf-trainer-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.psw__pf-trainer-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-text-secondary);
  text-align: center;
}

/* Progress section */
.psw__pf-progress-sub {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  padding: 0 14px 6px;
  margin: 0;
}

.psw__pf-progress-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 10px;
}

.psw__pf-progress-row {
  display: grid;
  grid-template-columns: 16px 50px 42px 1fr 30px;
  align-items: center;
  gap: 6px;
}

.psw__pf-progress-icon {
  font-size: 0.75rem;
}

.psw__pf-progress-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text);
}

.psw__pf-progress-level {
  font-size: 0.6875rem;
  color: var(--app-text-muted);
}

.psw__pf-progress-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--app-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  overflow: hidden;
}

.psw__pf-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--profile-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
  transition: width 400ms ease;
}

.psw__pf-progress-pct {
  font-size: 0.6875rem;
  color: var(--app-text-muted);
  text-align: right;
}

/* Bottom nav */
.psw__pf-bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--app-border, #e5e7eb); /* allow-hardcoded-colour: token fallback */
  background: var(--app-surface, #fff); /* allow-hardcoded-colour: token fallback */
  margin-top: auto;
}

.psw__pf-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--app-text-muted);
  padding: 4px 8px;
  border-radius: 8px;
}

.psw__pf-nav-item--active {
  color: var(--profile-accent, #7c3aed); /* allow-hardcoded-colour: CSS custom property fallback — set at runtime */
}

.psw__pf-nav-item span:first-child {
  font-size: 1rem;
}

/* Preview disclaimer */
.psw__preview-disclaimer {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  text-align: center;
  margin: 0;
  padding: 4px 0;
  opacity: 0.8;
}
/* PccOverview — Parent Control Centre Overview dashboard. Tokens only. */

.pcc-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

/* ── Greeting ─────────────────────────────────────────────────────────────── */
.pcc-overview__greeting {
  padding: var(--space-2, 8px) 0 0;
}

.pcc-overview__greeting-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--app-text-emphasis);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.pcc-overview__greeting-sub {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 0;
}

/* ── Status strip — metric tiles ──────────────────────────────────────────── */
.pcc-overview__status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}

.pcc-overview__status-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
}

.pcc-overview__status-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Child profile card grid ──────────────────────────────────────────────── */
.pcc-overview__child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4, 16px);
}

.pcc-overview__child-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pcc-overview__child-accent-bar {
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}

.pcc-overview__child-card-body {
  padding: var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  flex: 1;
}

/* Style summary dl */
.pcc-overview__child-style-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcc-overview__child-style-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.8125rem;
}

.pcc-overview__child-style-row dt {
  color: var(--app-text-muted);
  min-width: 74px;
  font-weight: 500;
}

.pcc-overview__child-style-row dd {
  margin: 0;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pcc-overview__colour-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--app-border);
}

.pcc-overview__capitalize {
  text-transform: capitalize;
}

.pcc-overview__child-card-actions {
  margin-top: auto;
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--app-border);
}

/* ── Planned items list ───────────────────────────────────────────────────── */
.pcc-overview__planned-list {
  display: flex;
  flex-direction: column;
}

.pcc-overview__planned-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--app-border);
}

.pcc-overview__planned-item:last-child {
  border-bottom: none;
}

.pcc-overview__planned-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text);
  flex: 0 0 200px;
}

.pcc-overview__planned-note {
  font-size: 0.875rem;
  color: var(--app-text-secondary);
  flex: 1;
}
/* PccLearners — Learners section. Tokens only. */

.pcc-learners {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.pcc-learners__hint {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.5;
}

/* ── Learner card grid ─────────────────────────────────────────────────────── */
.pcc-learners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4, 16px);
}

.pcc-learners__learner-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pcc-learners__card-accent-bar {
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}

.pcc-learners__card-body {
  padding: var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  flex: 1;
}

/* Definition list */
.pcc-learners__card-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcc-learners__card-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.8125rem;
}

.pcc-learners__card-row dt {
  color: var(--app-text-muted);
  min-width: 74px;
  font-weight: 500;
}

.pcc-learners__card-row dd {
  margin: 0;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pcc-learners__colour-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--app-border);
}

.pcc-learners__mono {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.pcc-learners__card-actions {
  margin-top: auto;
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--app-border);
}
/* PccEducation — Education section. Tokens only. */

.pcc-education {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.pcc-education__intro {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.6;
}

/* ── Child grid ───────────────────────────────────────────────────────────── */
.pcc-education__child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4, 16px);
}

.pcc-education__child-card {
  display: flex;
  flex-direction: column;
}

.pcc-education__child-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

/* Focus areas */
.pcc-education__focus-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.pcc-education__focus-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--app-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pcc-education__focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pcc-education__focus-empty {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  margin: 0;
  font-style: italic;
}

/* Analytics rows */
.pcc-education__analytics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--app-border);
}

.pcc-education__analytics-row:last-of-type {
  border-bottom: none;
}

.pcc-education__analytics-label {
  color: var(--app-text-secondary);
}

/* Card actions */
.pcc-education__card-actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--app-border);
  margin-top: auto;
}

/* ── Focus group table ────────────────────────────────────────────────────── */
.pcc-education__focus-table {
  display: flex;
  flex-direction: column;
}

.pcc-education__focus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--app-border);
}

.pcc-education__focus-row:last-child {
  border-bottom: none;
}

.pcc-education__focus-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pcc-education__focus-row-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text);
}

.pcc-education__focus-row-note {
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
}

.pcc-education__focus-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

/* ── Roadmap ──────────────────────────────────────────────────────────────── */
.pcc-education__roadmap {
  display: flex;
  flex-direction: column;
}

.pcc-education__roadmap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--app-border);
}

.pcc-education__roadmap-row:last-child {
  border-bottom: none;
}

.pcc-education__roadmap-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pcc-education__roadmap-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text);
}

.pcc-education__roadmap-detail {
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
}

.pcc-education__roadmap-right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}
/* PccTrainers — Trainers section. Tokens only. */

.pcc-trainers {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.pcc-trainers__intro {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 0 0 var(--space-4, 16px);
  line-height: 1.6;
}

/* ── Coverage summary strip ───────────────────────────────────────────────── */
.pcc-trainers__summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px) var(--space-6, 24px);
  padding: var(--space-2, 8px) 0;
}

.pcc-trainers__summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pcc-trainers__summary-label {
  font-size: 0.875rem;
  color: var(--app-text-secondary);
  white-space: nowrap;
}

/* ── Trainer card grid ────────────────────────────────────────────────────── */
.pcc-trainers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4, 16px);
}

.pcc-trainers__trainer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

/* Header */
.pcc-trainers__trainer-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcc-trainers__trainer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.pcc-trainers__trainer-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
}

/* Description */
.pcc-trainers__trainer-desc {
  font-size: 0.875rem;
  color: var(--app-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Access block */
.pcc-trainers__trainer-access {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcc-trainers__access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.pcc-trainers__access-label {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  font-weight: 500;
}

/* Child chips */
.pcc-trainers__child-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pcc-trainers__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--app-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.pcc-trainers__chip--on {
  background: var(--app-success-surface);
  color: var(--app-success-text);
}

.pcc-trainers__chip--off {
  background: var(--app-danger-surface);
  color: var(--app-danger-text);
}

/* Actions */
.pcc-trainers__trainer-actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

/* Planned controls in card */
.pcc-trainers__planned-controls {
  border-top: 1px solid var(--app-border);
  padding-top: var(--space-2, 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcc-trainers__planned-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pcc-trainers__planned-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pcc-trainers__planned-note {
  font-size: 0.75rem;
  color: var(--app-text-subtle);
}

/* ── Planned controls table ───────────────────────────────────────────────── */
.pcc-trainers__planned-table {
  display: flex;
  flex-direction: column;
}

.pcc-trainers__planned-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--app-border);
}

.pcc-trainers__planned-row:last-child {
  border-bottom: none;
}

.pcc-trainers__planned-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pcc-trainers__planned-row-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-text);
}

.pcc-trainers__planned-row-note {
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
}
/* ParentControlCentre — desktop-first permanent admin shell. Tokens only.
   Layout: dark admin sidebar + dark header frame + light main content area.
   Uses --admin-* tokens for sidebar/header and --app-* tokens for content. */

/* ── Root container ─────────────────────────────────────────────────────── */
.pcc {
  /* Renders outside .app via early return — fills the full #root flex column.
     width: 100% is explicit so PCC is never constrained by any ancestor
     max-width (e.g. if #root ever gains one). */
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--admin-bg);
}

/* ── Context header ─────────────────────────────────────────────────────── */
.pcc__header {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: 0 var(--space-5, 20px);
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-border);
  flex-shrink: 0;
  min-height: 56px;
}

.pcc__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.pcc__header-section-hint {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcc__header-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

/* ── Active-child switcher ──────────────────────────────────────────────── */
.pcc__child-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  justify-content: center;
}

.pcc__child-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 6px);
  padding: 4px 10px 4px 6px;
  border-radius: 20px;
  border: 1.5px solid var(--admin-border-strong);
  background: transparent;
  color: var(--admin-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.pcc__child-chip:hover {
  border-color: var(--admin-accent);
  color: var(--admin-text);
}

.pcc__child-chip--active {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: #fff;
  font-weight: 600;
}

.pcc__child-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* allow-hardcoded-colour: contrast overlay on dark admin surface */
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.pcc__child-chip--active .pcc__child-chip-avatar {
  background: rgba(255, 255, 255, 0.25);
}

.pcc__add-child-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px dashed var(--admin-border-strong);
  background: transparent;
  color: var(--admin-text-subtle);
  font-size: 0.8125rem;
  cursor: not-allowed;
  opacity: 0.55;
}

.pcc__active-child-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  white-space: nowrap;
  margin-right: 4px;
}

/* ── Help button & identity ─────────────────────────────────────────────── */
.pcc__help-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--admin-border-strong);
  background: transparent;
  color: var(--admin-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms, color 120ms;
}

.pcc__help-btn:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

.pcc__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pcc__identity-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--admin-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcc__identity-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-strong);
  white-space: nowrap;
}

/* ── Body: sidebar + main ───────────────────────────────────────────────── */
.pcc__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 600px;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.pcc__sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--admin-surface);
  border-right: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  gap: 0;
  /* no overflow here — scrolling is inside .pcc__nav-groups-scroll */
}

/* ── Sidebar: app branding ────────────────────────────────────────────── */
.pcc__sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--admin-border);
  flex-shrink: 0;
}

.pcc__sidebar-brand-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--admin-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcc__sidebar-brand-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.pcc__sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pcc__sidebar-brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--admin-text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pcc__sidebar-brand-subtitle {
  font-size: 0.6875rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
}

/* ── Sidebar: scrollable nav groups ──────────────────────────────────── */
.pcc__nav-groups-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-2, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

/* ── Sidebar: footer with collapse button ──────────────────────────── */
.pcc__sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--admin-border);
}

.pcc__collapse-btn {
  width: 100%;
  padding: 6px var(--space-3, 12px);
  border: 1px solid var(--admin-border);
  border-radius: var(--app-radius-sm);
  background: transparent;
  color: var(--admin-text-subtle);
  font-size: 0.8125rem;
  cursor: not-allowed;
  text-align: left;
  opacity: 0.6;
}

/* ── Sidebar section groups ─────────────────────────────────────────────── */
.pcc__nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcc__nav-group + .pcc__nav-group {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--admin-border);
}

.pcc__nav-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--admin-text-subtle);
  padding: 0 var(--space-3, 12px) var(--space-1, 4px);
  margin-bottom: 2px;
}

.pcc__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcc__nav-item {
  /* no extra style — button holds layout */
}

.pcc__nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--admin-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  position: relative;
}

.pcc__nav-btn-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: 0.75;
}

.pcc__nav-btn--active .pcc__nav-btn-icon {
  opacity: 1;
}

.pcc__nav-btn:hover {
  background: var(--admin-surface-raised);
  color: var(--admin-text);
}

.pcc__nav-btn--active {
  background: linear-gradient(90deg, rgba(129,140,248,0.25) 0%, rgba(129,140,248,0.10) 100%);
  color: var(--admin-text-strong);
  font-weight: 600;
}

/* Left accent bar for active item */
.pcc__nav-btn--active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--admin-accent);
}

.pcc__nav-btn:focus-visible {
  outline: var(--app-focus-ring-width) solid var(--admin-accent);
  outline-offset: var(--app-focus-ring-offset);
}

.pcc__nav-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status dots */
.pcc__nav-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
}

.pcc__nav-status-dot--planned {
  background: var(--app-info-border);
}

.pcc__nav-status-dot--later {
  background: var(--admin-border-strong);
}

/* ── Main content area ──────────────────────────────────────────────────── */
.pcc__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--app-bg);
  padding: var(--space-6, 24px);
  gap: var(--space-4, 16px);
}

/* Section header row */
.pcc__section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  flex-shrink: 0;
  padding-bottom: var(--space-2, 8px);
  border-bottom: 2px solid var(--app-border);
  margin-bottom: var(--space-2, 8px);
}

.pcc__section-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--app-text-emphasis);
  margin: 0;
}

/* Section body */
.pcc__section-body {
  flex: 1 1 auto;
}

/* ── Placeholder section ────────────────────────────────────────────────── */
.pcc__placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: var(--space-6, 24px);
}

.pcc__placeholder-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.pcc__placeholder-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 0;
}

.pcc__placeholder-body {
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
  margin: 0;
  max-width: 480px;
  line-height: 1.6;
}

/* ── Responsive: narrow viewport ────────────────────────────────────────── */
@media (max-width: 860px) {
  .pcc__header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    gap: var(--space-2, 8px);
    min-height: auto;
  }

  .pcc__child-switcher {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pcc__body {
    flex-direction: column;
  }

  .pcc__sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--admin-border);
  }

  .pcc__sidebar-brand {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }

  .pcc__nav-groups-scroll {
    overflow-y: visible;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .pcc__nav-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .pcc__nav-group + .pcc__nav-group {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    padding-left: var(--space-3, 12px);
    border-left: 1px solid var(--admin-border);
  }

  .pcc__nav-group-label {
    display: none;
  }

  .pcc__nav-btn {
    white-space: nowrap;
    width: auto;
    padding: 5px 10px;
  }

  .pcc__nav-btn--active::before {
    display: none;
  }

  .pcc__sidebar-footer {
    display: none;
  }

  .pcc__main {
    padding: var(--space-4, 16px);
  }
}
.metrics-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.metrics-loading {
  text-align: center;
  padding: 32px;
  opacity: 0.6;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

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

.metric-card {
  border-left: 4px solid transparent;
  min-width: 0;
}

.metric-card__icon {
  font-size: 1.75rem;
  margin-bottom: 4px;
}

.metric-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.metric-card__title {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-top: 2px;
}

.metric-card__subtitle {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 4px;
}

.practice-section {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  box-sizing: border-box;
  min-width: 0;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.empty-state {
  opacity: 0.5;
  font-size: 0.9rem;
}

.pb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.pb-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.pb-badge {
  background: var(--color-primary-light, #e8f4fd);
  color: var(--color-primary, #2563eb);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.pb-count {
  font-size: 0.8rem;
  opacity: 0.65;
}

.passport-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.passport-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
}

.stamp-emoji {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid transparent;
}

.passport-stamp--earned .stamp-emoji {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-primary-light, #e8f4fd);
}

.passport-stamp--locked .stamp-emoji {
  filter: grayscale(1);
  opacity: 0.3;
}

.stamp-label {
  font-size: 0.65rem;
  text-align: center;
  margin-top: 4px;
  opacity: 0.75;
}

.balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.balance-label {
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 48px;
}

.balance-bar-track {
  flex: 1;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  display: flex;
  min-width: 0;
}

.balance-bar-scales {
  background: var(--color-primary, #2563eb);
  height: 100%;
  transition: width 0.4s ease;
}

.balance-bar-chords {
  background: var(--color-accent, #f59e0b);
  height: 100%;
  transition: width 0.4s ease;
}

.balance-counts {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.65;
}

.practice-calendar {
  overflow-x: auto;
  box-sizing: border-box;
}

.calendar-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.75;
}

.calendar-grid {
  display: flex;
  gap: 3px;
}

.calendar-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendar-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #eee;
}

.calendar-cell--active {
  background: var(--color-primary, #2563eb);
  opacity: 0.8;
}