/* tokens.css */
@font-face {
  font-family: "Urbanist"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/fonts/urbanist-latin.woff2") format("woff2"); /* SIL Open Font License, self-hosted: no third-party request */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens. The whole identity lives here ("Piano Moon"): moon-white background, navy for text and buttons,
   lilac brand field, periwinkle for the main action and XP, mint for right answers, and one colour per pitch class
   (C to B) used on keys, note chips and charts.
   Every component reads these variables; no component hard-codes a colour. */
:root {
  /* Direction B "Piano Moon" (chosen 2026-11-09): navy, lilac, periwinkle, mint for right answers. */
  --bg: #F6F3FF;
  --surface: #FFFFFF;
  --surface-2: #FAF8FF;
  --ink: #1F1D4D;
  --muted: #55508A;
  --line: #E2DBFA;
  --brand: #1F1D4D;       /* navy: primary buttons, play buttons, marks */
  --brand-press: #0F0E2E;
  --brand-ink: #FFFFFF;
  --brand-soft: #ECE6FF;  /* lilac tint: answer blocks, selected states */
  --hero: #D9CCFF;        /* lilac brand field (home hero) */
  --hero-ink: #1F1D4D;
  --accent: #5B5BE6;      /* periwinkle: main call to action, progress, XP */
  --accent-press: #3B3BB0;
  --xp: #4F4FD9;
  --right: #0B7A57;       /* mint family, dark enough for text */
  --right-soft: #DDF7EE;
  --mint: #2FCB9A;        /* decorative mint (streaks, check dots) */
  --wrong: #C2334A;
  --wrong-soft: #FBE7EA;
  --focus: #5B5BE6;
  --accent-ink: #FFFFFF; /* text on accent buttons */
  --note-ink: #FFFFFF;   /* text on pitch-class chips */
  --key-black: #1F1D4D;  /* piano black keys, same in both themes */
  --key-white: #FFFFFF;  /* piano white keys stay light in dark mode too */
  --key-white-ink: #55508A;
  --key-white-soft: #ECE6FF;
  --key-black-ink: #FFFFFF;
  --key-edge: #0F0E2E;

  /* Pitch-class colours: C C# D D# E F F# G G# A A# B */
  --pc-0: #E5484D; --pc-1: #E8663A; --pc-2: #F0902B; --pc-3: #E9B124; --pc-4: #A5BE2A; --pc-5: #3FA45B;
  --pc-6: #1FA39A; --pc-7: #2A8CCB; --pc-8: #3D6BD6; --pc-9: #6A55D3; --pc-10: #9A4FC9; --pc-11: #C64C99;

  --display: "Urbanist", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --press: 4px; /* depth of the "physical" buttons */
  --shadow: 0 1px 2px rgb(31 29 77 / 6%), 0 4px 16px rgb(31 29 77 / 8%);
  --shadow-lg: 0 12px 40px rgb(31 29 77 / 18%);
  --wrap: 1120px;
  --wrap-narrow: 720px;
  --app: 480px; /* lesson column, phone width */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141331; --surface: #1E1B48; --surface-2: #19173F; --ink: #F1EEFF; --muted: #B8AEEA; --line: #2E2A63;
    --brand: #D9CCFF; --brand-press: #A897F0; --brand-ink: #141331; --brand-soft: #2A2766; --hero: #221F52; --hero-ink: #F1EEFF;
    --accent: #8C8CFF; --accent-press: #5B5BE6; --accent-ink: #0E0D2A; --xp: #A9A9FF; --focus: #A9A9FF;
    --right: #5FE0B5; --right-soft: #143A30; --mint: #5FE0B5; --wrong: #FF7088; --wrong-soft: #3D1C2A;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%); --shadow-lg: 0 12px 40px rgb(0 0 0 / 40%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141331; --surface: #1E1B48; --surface-2: #19173F; --ink: #F1EEFF; --muted: #B8AEEA; --line: #2E2A63;
  --brand: #D9CCFF; --brand-press: #A897F0; --brand-ink: #141331; --brand-soft: #2A2766; --hero: #221F52; --hero-ink: #F1EEFF;
  --accent: #8C8CFF; --accent-press: #5B5BE6; --accent-ink: #0E0D2A; --xp: #A9A9FF; --focus: #A9A9FF;
  --right: #5FE0B5; --right-soft: #143A30; --mint: #5FE0B5; --wrong: #FF7088; --wrong-soft: #3D1C2A;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%); --shadow-lg: 0 12px 40px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* base.css */
/* Base: reset, typography, page frame (header, footer, wraps). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 500; font-size: 17px; line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-press); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 12px; }
h2 { font-size: clamp(23px, 3vw, 30px); margin: 40px 0 12px; }
h3 { font-size: 20px; margin: 28px 0 8px; }
p { margin: 0 0 14px; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.site-header__row { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.site-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 10px; border-radius: 10px; }
.site-nav a:hover, .site-nav a[aria-current] { background: var(--brand-soft); color: var(--brand-press); }
.site-header .btn { margin-left: 4px; }
@media (max-width: 820px) {
  /* Phones: the menu becomes a scrollable second row (no script needed). */
  .site-header__row { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .site-nav { order: 3; flex: 1 0 100%; margin: 0 -10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; padding: 6px 10px; font-size: 14px; }
  .site-header .btn { margin-left: auto; }
}

/* Footer */
.site-footer { margin-top: 64px; background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 28px; font-size: 15px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
.site-footer nav { display: flex; flex-direction: column; gap: 6px; }
.site-footer nav strong { font-family: var(--display); margin-bottom: 4px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.site-footer__fine { color: var(--muted); font-size: 13px; margin-top: 28px; }

/* Page blocks */
.page { padding: 28px 0 0; }
.dek { font-size: 19px; color: var(--muted); max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.prose { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 4px 0; }
.table-wrap { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--surface); border-radius: var(--radius-s); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--display); background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* components.css */
/* Components shared by every part of the site (SEO pages, quiz, tools). Quiz- or tool-only styles live in
   their own folders (quiz/app/*.css, tools/www/*.css), never here. */

/* Physical buttons: a darker bottom edge that the button sinks into when pressed. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 14px;
  padding: 12px 20px; font-weight: 800; font-family: var(--display); font-size: 17px; text-decoration: none;
  box-shadow: 0 var(--press) 0 var(--brand-press); transform: translateY(0); transition: transform .06s, box-shadow .06s;
}
.btn:hover { color: var(--brand-ink); filter: brightness(1.05); }
.btn:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--brand-press); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: default; }
.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 var(--press) 0 var(--accent-press); }
.btn--accent:hover { color: var(--accent-ink); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 var(--press) 0 var(--line); }
.btn--ghost:hover { color: var(--ink); }
.btn--small { padding: 8px 14px; font-size: 15px; border-radius: 12px; }
.btn--block { width: 100%; }

/* Play button: the most important control of the site. */
.play {
  display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 8px 18px 8px 8px; font-weight: 700; box-shadow: 0 3px 0 var(--line);
}
.play__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; flex: none; }
.play__icon svg { width: 16px; height: 16px; fill: var(--brand-ink); margin-left: 2px; }
.play:active { transform: translateY(3px); box-shadow: none; }
.play.is-playing .play__icon { background: var(--accent); animation: pulse 0.9s ease-in-out infinite; }
.play-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* Cards and grids */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.card-link:hover { border-color: var(--brand); color: var(--ink); }
.card-link strong { font-family: var(--display); font-size: 19px; }
.card-link span { color: var(--muted); font-size: 15px; }
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* GEO answer block: the one-paragraph answer search engines and assistants quote. */
.answer { background: var(--brand-soft); border-left: 5px solid var(--brand); border-radius: var(--radius-s); padding: 14px 18px; margin: 18px 0; font-size: 18px; }
.answer p:last-child { margin: 0; }

/* Exercise box embedded in SEO pages */
.exercise { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-l); padding: 20px; margin: 22px 0; }
.exercise h2 { margin-top: 0; }

/* Call to action toward a lesson or a test */
.cta { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--ink); color: var(--bg); border-radius: var(--radius-l); padding: 22px; margin: 32px 0; }
.cta h2 { margin: 0 0 4px; color: var(--bg); font-size: 24px; }
.cta p { margin: 0; opacity: .85; }

/* FAQ */
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 16px; margin: 8px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 10px 0 0; }

/* Note chips coloured by pitch class */
.note { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; padding: 2px 8px; border-radius: 8px; color: var(--note-ink); font-weight: 800; font-family: var(--display); background: var(--pc, var(--brand)); }
.note[data-pc="0"] { --pc: var(--pc-0); } .note[data-pc="1"] { --pc: var(--pc-1); } .note[data-pc="2"] { --pc: var(--pc-2); }
.note[data-pc="3"] { --pc: var(--pc-3); } .note[data-pc="4"] { --pc: var(--pc-4); } .note[data-pc="5"] { --pc: var(--pc-5); }
.note[data-pc="6"] { --pc: var(--pc-6); } .note[data-pc="7"] { --pc: var(--pc-7); } .note[data-pc="8"] { --pc: var(--pc-8); }
.note[data-pc="9"] { --pc: var(--pc-9); } .note[data-pc="10"] { --pc: var(--pc-10); } .note[data-pc="11"] { --pc: var(--pc-11); }

/* Lesson ladder (from the validated prototype) */
.ladder { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ladder li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.ladder .n { font-family: var(--mono); font-size: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--muted); flex: none; }
.ladder li.done .n { background: var(--right); color: var(--surface); }
.ladder li.now { border: 2px solid var(--brand); }
.ladder li.now .n { background: var(--brand); color: var(--brand-ink); }
.ladder li.locked { opacity: .6; }
.ladder small { display: block; color: var(--muted); font-size: 14px; }
.ladder a { color: inherit; text-decoration: none; }

/* Hero */
.hero { padding: 48px 0 24px; display: grid; gap: 28px; grid-template-columns: 1.2fr 1fr; align-items: center; }
.hero p { font-size: 19px; color: var(--muted); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 28px; } }

/* Mini keyboard illustration */
.keys { display: flex; height: 140px; position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--key-black); background: var(--key-black); gap: 2px; }
.keys button { flex: 1; border: 0; background: var(--key-white); border-radius: 0 0 8px 8px; position: relative; }
.keys button:active, .keys button.is-on { background: var(--key-white-soft); }
.keys button span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-weight: 800; font-family: var(--display); font-size: 13px; color: var(--key-white-ink); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--key-white-ink); }

.notice { font-size: 14px; color: var(--muted); }