/* After Hours skin. Loaded last: it restyles the classic layout without moving anything.
   Colours come from palette.css; this file sets type, surfaces, buttons and the wooden fretboards. */
:root {
  --ah-display: Fraunces, Georgia, serif;
  --ah-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Cards declare elevation once, with their border; no soft shadow underneath. */
  --experience-shadow: none;
  --ah-glow: 0 12px 30px -14px color-mix(in srgb, var(--jgg-accent) 75%, transparent);
  font-family: var(--ah-sans);
  font-feature-settings: 'cv11', 'ss01';
}

/* ── Page ─────────────────────────────────────────────── */
body.course-app {
  background:
    radial-gradient(1100px 600px at 82% -8%, color-mix(in oklab, var(--jgg-accent) 13%, transparent), transparent 70%),
    radial-gradient(900px 520px at -12% 22%, color-mix(in oklab, var(--jgg-pick) 8%, transparent), transparent 70%),
    var(--jgg-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--jgg-accent) 35%, transparent); }
.course-app .site-header { border-bottom-color: var(--jgg-border); }

/* ── Type: Fraunces for display, Inter for everything else ── */
.course-app .course-view :is(h1, h2),
.course-app dialog :is(h1, h2),
.course-app .round-dialog-inner h2 {
  font-family: var(--ah-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.025em;
}
.course-app .course-view h1 { font-weight: 560; letter-spacing: -.035em; }
.course-app .course-view :is(h1, h2) em,
.course-app .studio-heading h1 em {
  font-style: italic;
  font-weight: 460;
  color: var(--jgg-accent);
}
.course-app .course-view h3 { letter-spacing: -.01em; }
.course-app :is(.studio-kicker, .eyebrow, .exercise-tag) { letter-spacing: .14em; }
.course-app #challenge-display { font-family: var(--ah-display); font-weight: 600; letter-spacing: -.03em; }

/* ── Brand and header controls ────────────────────────── */
.course-app .brand { font-family: var(--ah-display); font-weight: 600; letter-spacing: -.03em; }
.course-app .brand .brand-light { font-style: italic; font-weight: 460; color: var(--jgg-accent); }
.course-app .brand small { font-family: var(--ah-sans); letter-spacing: .22em; font-weight: 650; }
.course-app .brand-mark { color: var(--jgg-accent); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--jgg-accent) 35%, transparent)); }
.course-app .header-actions { gap: 12px; }
.course-app .header-actions :is(.sound-button, .account-button),
.course-app .app-menu > summary {
  border: 1px solid var(--jgg-border);
  background: var(--jgg-surface);
  border-radius: 999px;
  font-weight: 650;
  transition: border-color .2s, background .2s, color .2s;
}
.course-app .header-actions :is(.sound-button, .account-button):hover,
.course-app .app-menu > summary:hover { border-color: var(--jgg-control-border); background: var(--jgg-surface-hover); }
.theme-button {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--jgg-border); background: var(--jgg-surface); color: var(--jgg-text-muted);
}
.theme-button:hover { color: var(--jgg-text); border-color: var(--jgg-control-border); }

/* ── Main navigation: a quiet row of pills ───────────── */
.course-app .app-navigation { border-bottom-color: var(--jgg-border); }
.course-app .app-navigation > a { border-radius: 999px; font-weight: 650; transition: background .2s, color .2s; }
.course-app .app-navigation > a.selected {
  background: var(--jgg-text);
  color: var(--jgg-bg);
  box-shadow: none;
}

/* ── Buttons ─────────────────────────────────────────── */
.course-app :is(.primary-button, .studio-btn:not(.quiet, .light), .advanced-action.advanced-primary, .audition-play, .leaderboard-button, .feedback-submit) {
  border-radius: 999px;
  box-shadow: var(--ah-glow);
  font-weight: 700;
}
.course-app :is(.primary-button, .studio-btn:not(.quiet, .light)):hover { box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--jgg-accent) 90%, transparent); }
.course-app :is(.primary-button, .studio-btn):active:not(:disabled) { transform: translateY(1px); }
.course-app .studio-heading > .studio-btn.daily-top-cta { border-radius: 999px; box-shadow: var(--ah-glow); }
.course-app .studio-heading > .studio-btn.daily-top-cta:active { box-shadow: var(--ah-glow); }
.course-app :is(.secondary-button, .studio-btn.quiet, .studio-btn.light) { border-radius: 999px; font-weight: 650; }
.course-app .practice-hero-actions .studio-btn { border-radius: 999px; }

/* ── Cards and panels ────────────────────────────────── */
.course-app :is(.exercise-card, .module-card, .concept-card, .lesson-plan, .studio-today, .streak-banner, .daily-exercise-card, .studio-path-card, .tuning-string) {
  border-color: var(--jgg-border);
  box-shadow: none;
}
/* Cards and panels share one 16px radius; pills stay for small controls. */
.course-app :is(.module-card, .concept-card, .lesson-plan, .exercise-card, .tuning-string, .studio-feature, .studio-today, .studio-panel, .studio-ear-card, .studio-example, .studio-timer-card, .studio-challenge, .studio-lesson-list a, .studio-jam-chord, .studio-ear-play, .daily-exercise-card, .daily-success, .daily-focus-tools, .daily-tap, .daily-feature .feature-diagram, .ear-completion, .learning-explore, .interval-reference-card, .interval-listen-card, .skill-coverage, .streak-banner, .home-board .leaderboard-panel) {
  border-radius: 16px;
}
.course-app .learning-explore[open] > summary { border-radius: 16px 16px 0 0; }
.course-app .studio-feature {
  background:
    radial-gradient(520px 260px at 100% 0%, color-mix(in oklab, var(--jgg-accent) 22%, transparent), transparent 70%),
    var(--jgg-hero);
  border: 1px solid color-mix(in srgb, var(--jgg-on-hero) 10%, transparent);
  box-shadow: none;
}
.course-app dialog { border-radius: 24px; background: var(--jgg-surface); box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--jgg-shadow) 70%, transparent); }

/* ── Wooden fretboards ───────────────────────────────── */
/* Strings are cream, frets are nickel, the nut is bone. Brass still marks a known root;
   notes the player picks turn sky so they never look like a supplied root. */
.course-app :is(.daily-board-wrap, .studio-board-scroll, .interval-ear-board-scroll) {
  --jgg-border: color-mix(in srgb, var(--jgg-fret-wire) 55%, transparent);
  --jgg-control-border: color-mix(in srgb, var(--jgg-fret-wire) 55%, transparent);
  --jgg-text-muted: var(--jgg-inlay);
  --jgg-surface-raised: color-mix(in srgb, var(--jgg-board-2) 70%, transparent);
  --jgg-surface-hover: color-mix(in srgb, var(--jgg-string) 22%, transparent);
  --jgg-link: var(--jgg-string);
  --jgg-focus: var(--jgg-focus-on-dark);
  background: linear-gradient(180deg, var(--jgg-board-1), var(--jgg-board-2));
  border: 1px solid color-mix(in srgb, var(--jgg-board-2) 80%, var(--jgg-text));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--jgg-string) 12%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--jgg-shadow) 80%, transparent);
  color: var(--jgg-string);
  scrollbar-color: var(--jgg-fret-wire) transparent;
}
.course-app .daily-board-wrap .studio-footnote { color: var(--jgg-inlay) !important; }
.course-app :is(.daily-fret, .studio-fret):before { border-top-color: color-mix(in srgb, var(--jgg-string) 70%, transparent); }
.course-app :is(.daily-fret[data-fret="0"], .studio-fret.open) { border-right-color: var(--jgg-inlay); }
.course-app :is(.daily-fret.chosen:not(.root) > span, .studio-fret.marked:not(.root) > span, .interval-ear-fret.chosen:not(.root) > span) {
  background: var(--jgg-pick);
  color: var(--jgg-on-pick);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jgg-pick) 25%, transparent);
}
.course-app :is(.daily-fret.root > span, .studio-fret.root > span, .interval-ear-fret.root > span) {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jgg-reference) 30%, transparent);
}
/* Lab notes are coloured by their job in the chord or scale. */
.course-app .studio-fret.marked:not(.root)[data-role="third"] > span { --role: var(--jgg-third); }
.course-app .studio-fret.marked:not(.root)[data-role="fifth"] > span { --role: var(--jgg-fifth); }
.course-app .studio-fret.marked:not(.root)[data-role="seventh"] > span { --role: var(--jgg-seventh); }
.course-app .studio-fret.marked:not(.root)[data-role]:not([data-role="color"], [data-role="root"]) > span {
  background: var(--role, var(--jgg-pick));
  color: var(--jgg-on-role);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--role, var(--jgg-pick)) 25%, transparent);
}
.course-app .studio-board-caption i.green { background: var(--jgg-pick); }
.course-app .studio-board-caption i.third { background: var(--jgg-third); }
.course-app .studio-board-caption i.fifth { background: var(--jgg-fifth); }
.course-app .studio-board-caption i.seventh { background: var(--jgg-seventh); }

/* The classic grid board used in lessons and skill drills. */
.course-app .fretboard {
  --jgg-surface-raised: var(--jgg-board-1);
  --jgg-control-border: color-mix(in srgb, var(--jgg-fret-wire) 70%, transparent);
  --jgg-surface-hover: color-mix(in srgb, var(--jgg-string) 22%, transparent);
  --jgg-link: var(--jgg-string);
  --jgg-focus: var(--jgg-focus-on-dark);
  border-radius: 10px;
  /* Keep the wood off the padding below the fret numbers. */
  box-shadow: inset 0 -12px 0 var(--jgg-surface);
}
.course-app .fretboard:before { background: var(--jgg-inlay); box-shadow: 1px 0 2px color-mix(in srgb, var(--jgg-shadow) 50%, transparent); }
.course-app .fret:before {
  background: linear-gradient(var(--jgg-string), color-mix(in srgb, var(--jgg-string) 55%, var(--jgg-board-2)));
  box-shadow: 0 1px 1px color-mix(in srgb, var(--jgg-shadow) 55%, transparent);
}
.course-app :is(.fret-marker:after, .fret-marker.double:before) { background: color-mix(in srgb, var(--jgg-inlay) 55%, transparent); }
.course-app .fret.hint-range { background: color-mix(in srgb, var(--jgg-string) 10%, transparent); }
.course-app .fret.playable-string { background: color-mix(in srgb, var(--jgg-string) 9%, transparent); }
.course-app .fret.labels:not(.open, .selected, .answer, .wrong, .anchor) .note-dot {
  color: var(--jgg-inlay);
  background: color-mix(in srgb, var(--jgg-board-2) 85%, transparent);
}
.course-app :is(.fret.selected, .fret.answer, .fret.labels.selected, .fret.labels.answer) .note-dot {
  color: var(--jgg-on-pick);
  background: var(--jgg-pick);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jgg-pick) 25%, transparent);
}
.course-app .fret.anchor .note-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--jgg-reference) 30%, transparent); }

/* Recognition diagrams (SVG). */
.recognition-diagram .recognition-board-surface { fill: var(--jgg-board-1); }
.recognition-diagram :is(.recognition-fret, .recognition-string) { stroke: var(--jgg-fret-wire); }
.recognition-diagram .recognition-inlay { fill: color-mix(in srgb, var(--jgg-inlay) 55%, transparent); }
.recognition-diagram .recognition-position { fill: var(--jgg-pick); stroke: var(--jgg-pick); }

/* Phones: four header controls share one row. */
@media (max-width: 520px) {
  .course-app .header-actions { gap: 6px; }
  .course-app .header-actions :is(.sound-button, .account-button),
  .course-app .app-menu > summary { padding-inline: 11px; }
  .theme-button { width: 40px; height: 40px; }
}
/* Narrow phones: the sound button keeps its icon and aria-label but drops the visible words. */
@media (max-width: 420px) {
  .course-app #sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .course-app * { transition-duration: .01ms !important; }
}