/* Site stylesheet (DESIGN.md). A working sheet: calm background, white panels,
   color only for scale degrees. Every color is a token; both themes are equal. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-wdth.woff2?v=d50c64e0ef) format("woff2");
  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}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-ext-wdth.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/source-sans-3-latin-400.woff2?v=d50c64e0ef) format("woff2");
  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}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/source-sans-3-latin-ext-400.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:600;
  src:url(../fonts/source-sans-3-latin-600.woff2?v=d50c64e0ef) format("woff2");
  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}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:600;
  src:url(../fonts/source-sans-3-latin-ext-600.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-500.woff2?v=d50c64e0ef) format("woff2");
  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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-ext-500.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* → ← ↔ ≈ Δ ⁷: not in the latin subsets; same families, subset to these characters (Plex Mono has no Δ) */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(../fonts/archivo-symbols-wdth.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0394,U+2077,U+2190,U+2192,U+2194,U+2248}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/source-sans-3-symbols-400.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0394,U+2077,U+2190,U+2192,U+2194,U+2248}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:600;
  src:url(../fonts/source-sans-3-symbols-600.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+0394,U+2077,U+2190,U+2192,U+2194,U+2248}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(../fonts/ibm-plex-mono-symbols-500.woff2?v=d50c64e0ef) format("woff2");
  unicode-range:U+2077,U+2190,U+2192,U+2194,U+2248}
/* ♯ ♭ ♮ 𝄪 𝄫 and other music symbols: none of the three families has them (scripts/check-glyphs.mjs) */
/* Noto Music draws accidentals at staff size: scale them to text size, without growing the line box */
@font-face{font-family:"Noto Music";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/noto-music-music.woff2?v=d50c64e0ef) format("woff2");
  size-adjust:140%;ascent-override:80%;descent-override:20%;line-gap-override:0%;
  unicode-range:U+25CC,U+2669-266F,U+1D000-1D0F5,U+1D100-1D126,U+1D129-1D1EA,U+1D200-1D245}

/* ---------- tokens (§2) ---------- */
:root{
  --bg:#ECEFF3; --panel:#FFFFFF; --ink:#18202C; --muted:#5A6677; --line:#C7CFDA; --board:#F3EEE6; --fret:#A9A39A;
  --root:#0F766E; --third:#B45309; --fifth:#4338CA; --seventh:#9D174D; --other:#64748B; --dot-ink:#FFFFFF;
  --f-display:"Archivo","Noto Music","Arial Narrow",system-ui,sans-serif;
  --f-body:"Source Sans 3","Noto Music","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","Noto Music",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E131A; --panel:#151C26; --ink:#E5E9EF; --muted:#94A1B3; --line:#2A3443; --board:#1B232E; --fret:#4A5566;
  --root:#2DD4BF; --third:#F59E0B; --fifth:#8B93F8; --seventh:#F472B6; --other:#7C8BA0; --dot-ink:#0E131A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E131A; --panel:#151C26; --ink:#E5E9EF; --muted:#94A1B3; --line:#2A3443; --board:#1B232E; --fret:#4A5566;
  --root:#2DD4BF; --third:#F59E0B; --fifth:#8B93F8; --seventh:#F472B6; --other:#7C8BA0; --dot-ink:#0E131A; color-scheme:dark}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--root);outline-offset:2px;border-radius:2px}
img{max-width:100%}
.no-js .needs-js{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- typography (§3) ---------- */
h1,h2,h3{font-family:var(--f-display);font-stretch:112%;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(28px,5vw,44px);letter-spacing:-.01em;line-height:1.05}
h2{font-weight:600;font-size:20px}
h2.big{font-weight:800;font-size:clamp(24px,4vw,34px);line-height:1.05}
h3{font-weight:600;font-size:17px}
.sub{color:var(--muted);margin:6px 0 0;max-width:64ch}
.eyebrow{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.formula{font:500 12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.prose p{max-width:68ch;margin:0}
.prose p + p{margin-top:.75em}
.prose{display:grid;gap:14px}
.prose > *{margin:0}

/* ---------- layout (§5) ---------- */
.wrap{max-width:1100px;margin:0 auto;padding-block:28px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;gap:24px}
.wrap.wide{max-width:1180px}
section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:14px;min-width:0;align-content:start}
.head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between}
.controls{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:10px;
  border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.pair{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px}
@media (max-width:820px){.pair{grid-template-columns:1fr}}
.layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.layout > .side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
@media (max-width:860px){.layout{grid-template-columns:1fr}.layout > .side{position:static}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.card{display:grid;gap:4px;padding:10px;border-top:1px solid var(--line);min-width:0;align-content:start}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .sym{font:800 18px var(--f-display);font-stretch:112%;white-space:nowrap}
.card .type{font-size:13px;color:var(--muted);text-align:right;line-height:1.25}
.card svg{width:100%;max-width:200px;height:auto;display:block}
.scroll{overflow-x:auto;min-width:0}
/* Scroll fade: a scrollable .scroll fades at the edge that hides more content (right at the start, left once scrolled).
   Driven by the scroll position in CSS; app.js sets --fade-l / --fade-r where scroll timelines are missing. */
@property --fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-r{syntax:"<length>";inherits:false;initial-value:0px}
.scroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
@supports (animation-timeline:scroll()){
  .scroll{animation:scroll-fade linear both;animation-timeline:scroll(self inline)}
  @keyframes scroll-fade{0%{--fade-l:0px;--fade-r:40px}8%{--fade-l:40px}92%{--fade-r:40px}100%{--fade-l:40px;--fade-r:0px}}
}
.stack{display:grid;gap:24px;min-width:0}
.rows{display:grid;gap:18px}
.row{display:grid;gap:4px;min-width:0}
.rowhead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.rowhead b{font-weight:600}
.num{font:800 18px var(--f-display);font-stretch:112%;color:var(--root);min-width:34px}

/* ---------- components (§6) ---------- */
button,.btn{font:600 14px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;cursor:pointer;min-width:38px;text-decoration:none;display:inline-block;text-align:center}
button[aria-pressed="true"],.btn[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--root);outline-offset:2px}
button:disabled{opacity:.4;cursor:default}
.group{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.group > .eyebrow{margin-right:4px}
.curkey{font:800 18px var(--f-display);font-stretch:112%;color:var(--root)}

.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.legend i.outline{box-shadow:inset 0 0 0 1px var(--line)}
.legend i.diamond{border-radius:1px;transform:rotate(45deg) scale(.85)}

table{border-collapse:collapse;font-size:14px;width:100%}
td,th{text-align:left;padding:6px 8px;border-top:1px solid var(--line)}
th{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
caption{caption-side:bottom;text-align:left;font-size:14px;color:var(--muted);padding-top:6px}
tbody th{font:600 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink)}
td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* diagrams */
figure{margin:0;display:grid;gap:4px;min-width:0}
figcaption:empty{display:none}
svg text{font-family:var(--f-mono)}
svg .circ-key{font-family:var(--f-display)}
.neck{width:100%;min-width:600px;height:auto;display:block}
.circ{width:100%;max-width:340px;margin:0 auto;display:block}
.seg{cursor:pointer}
.seg path{transition:fill .15s}
.seg:focus-visible{outline:none}
.seg:focus-visible path{stroke:var(--root);stroke-width:2.5}
.keyinfo{font-size:15px}
.keyinfo b{font-family:var(--f-display);font-stretch:112%}

/* lesson pages */
.lesson-head{display:grid;gap:6px}
.breadcrumb{font-size:14px;color:var(--muted)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.breadcrumb li + li::before{content:"/";margin-right:8px;color:var(--line)}
.callout,.tryit{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--root);border-radius:10px;padding:16px 20px;display:grid;gap:8px}
.tryit{border-left-color:var(--line)}
.callout > *,.tryit > *{margin:0}
.prevnext{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.prevnext a{display:grid;gap:2px;text-align:left;padding:8px 12px;max-width:100%}
.prevnext a[rel="next"]{text-align:right;margin-left:auto}
.prevnext .eyebrow{font-weight:500}
.course-map{display:grid;gap:16px}
.course-map ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:lesson}
.course-map li{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline}
.ln{font:800 16px var(--f-display);font-stretch:112%;color:var(--root);font-variant-numeric:tabular-nums}
.course-map.cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.lessons{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lessons li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:baseline}
.lessons li > div{display:grid;gap:2px}
.lessons a{font-weight:600}
.lessons p{margin:0;color:var(--muted);max-width:68ch}
.meta{font-size:14px;color:var(--muted);margin:0}
.plain{margin:0;padding-left:1.2em;display:grid;gap:4px}
.terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.cta{display:grid;gap:2px;text-align:left;padding:8px 12px;justify-self:start;max-width:100%}
.cta .eyebrow{font-weight:500}

.lesson-body figure.card{max-width:300px}
.lesson-body .card svg{max-width:280px}
.lesson-body h2{margin-top:10px}

/* glossary */
.letters{display:flex;flex-wrap:wrap;gap:4px}
.glossary{margin:0;display:grid;gap:10px}
.glossary dt{font-weight:600;scroll-margin-top:12px}
.glossary dd{margin:0;display:grid;gap:2px}
.glossary dd p{margin:0;max-width:68ch}
.glossary dt:target{color:var(--root)}

/* root language choice */
.wrap.narrow{max-width:720px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.choice{display:grid;gap:4px;text-align:left;padding:14px 16px}
.choice b{font:800 22px var(--f-display);font-stretch:112%}
.choice span{font-weight:400;color:var(--muted)}

/* ---------- site header and footer ---------- */
.site-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  padding-block:12px;border-bottom:1px solid var(--line)}
.site-name{font:800 20px var(--f-display);font-stretch:112%;text-decoration:none}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:600}
.site-nav a{text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline}
.site-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.site-foot{border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- tools ---------- */
.muted{color:var(--muted)}
.chords{display:grid;grid-template-columns:auto repeat(5,176px);gap:6px 10px;align-items:center;min-width:max-content}
.chords .ch{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.chords .rt{font:800 26px var(--f-display);font-stretch:112%;min-width:44px}
.chords .rt.cur{color:var(--root)}
.chords svg{width:176px;height:auto;display:block}
/* tools on phones: diagrams wide enough for 10–11 px text (diagrams.js minTextWidth), necks at most 720 px */
@media (max-width:699px){
  body[data-tool] svg[style*="--minw"]{min-width:var(--minw)}
  body[data-tool] svg.neck[style*="--minw"]{min-width:min(var(--minw),720px)}
  body[data-tool] .chords{grid-template-columns:auto repeat(5,auto)}
  body[data-tool] .chords svg{width:100%}
  body[data-tool] .cards .card svg{max-width:none}
}
.opts{display:grid;gap:8px}
.opts .group > .eyebrow{min-width:64px}
.keyline{font-size:15px}
.scale{font:500 14px var(--f-mono);letter-spacing:.02em}
.card .rn{font:800 16px var(--f-display);font-stretch:112%;color:var(--root)}
.card .fn{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cards.roomy{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cards.roomy .card .sym{font-size:20px}
.cards.roomy .card svg{max-width:210px}
.prog{display:grid;gap:6px}
.prog div{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.prog b{font:800 16px var(--f-display);font-stretch:112%}
.prog span{font:500 12px var(--f-mono);color:var(--muted)}

/* notation, grid, pulse (DESIGN.md §7d) */
.notation{width:100%;height:auto;display:block}
.symbol{display:block}
.pulse{display:grid;gap:14px;padding:12px 0}
.pulse-dots{display:flex;gap:8px;flex-wrap:wrap}
.pulse-dots i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--panel)}
.pulse-dots i.on{background:var(--root);border-color:var(--root)}
.pulse-controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.pulse-bpm{display:inline-flex;align-items:center;gap:8px}
.pulse-bpm input{accent-color:var(--root)}
.pulse-bpm output{min-width:3ch}

.quiz{display:grid;gap:12px;padding:12px 0;justify-items:start}
.quiz > *{margin:0}
.quiz-choices{display:flex;flex-wrap:wrap;gap:8px}
.quiz-choices .btn{min-width:56px}
.quiz-choices .btn[data-state=right]{background:var(--root);color:var(--dot-ink);border-color:var(--root)}
.quiz-choices .btn[data-state=wrong]{opacity:.5}

.layers{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:8px}
.layers label{display:inline-flex;gap:6px;align-items:center;font-size:14px}
.layers input{accent-color:var(--root)}
.layers-table [hidden]{display:none}
.layers-table td,.layers-table th{white-space:nowrap}
th.nocase{text-transform:none}
.prose > *,.layers-wrap{min-width:0}