/* jazzmusics theme: dark (default) + light, chosen by the user; stored in localStorage */
html[data-theme="light"]{
  /* pure white, clean; soft charcoal ink so type never reads heavy */
  --bg:#ffffff; --bg2:#fbfbfc; --surface:#ffffff; --surface2:#f5f5f7;
  --ink:#33323d; --muted:#6a6976; --faint:#9c9ba6; --line:#e7e7ec;
  --amber:#b07a1c; --amber-soft:#9c6a14; --teal:#1f8a90; --coral:#d4553a; --root:#e3a53a;
  --btn:#c58a24; --btn2:#b07a1c;
}
html[data-theme="light"] body{background:#fff}
html[data-theme="light"] body::before{display:none}
/* romantic but clean typography */
html[data-theme="light"] h1{font-weight:600;color:#2c2b36;letter-spacing:-.012em;line-height:1.02}
html[data-theme="light"] h1 .it{font-weight:400;font-style:italic}
html[data-theme="light"] h2{font-weight:500;color:#33323d}
html[data-theme="light"] h3{font-weight:600;color:#33323d}
html[data-theme="light"] .brand{color:#2c2b36}
html[data-theme="light"] .intro,html[data-theme="light"] .prose,html[data-theme="light"] .sec-lede{color:#5f5e6b;line-height:1.65}
html[data-theme="light"] .kicker,html[data-theme="light"] .eyebrow{font-weight:500}
/* cards: flat white, hairline border, whisper of shadow */
html[data-theme="light"] .btn2,html[data-theme="light"] .card,html[data-theme="light"] .faq details,html[data-theme="light"] .hub,html[data-theme="light"] .kcell,html[data-theme="light"] .ksel,html[data-theme="light"] .lcard,html[data-theme="light"] .noteb,html[data-theme="light"] .rcard,html[data-theme="light"] .sib a,html[data-theme="light"] .soonband,html[data-theme="light"] .tag.soon,html[data-theme="light"] .why > div,html[data-theme="light"] .tcard,html[data-theme="light"] .panel,html[data-theme="light"] .tablewrap{background:#fff;box-shadow:0 1px 2px rgba(20,18,26,.04),0 8px 24px -18px rgba(20,18,26,.18)}
html[data-theme="light"] .hub:hover,html[data-theme="light"] .rcard:hover,html[data-theme="light"] .why > div:hover{box-shadow:0 2px 4px rgba(20,18,26,.05),0 16px 32px -18px rgba(20,18,26,.22)}
html[data-theme="light"] .insts{background:#fbfbfc}
html[data-theme="light"] th{color:#8a8994}
html[data-theme="light"] tr:hover td{background:rgba(176,122,28,.05)}
html[data-theme="light"] .gn.n-chord circle,html[data-theme="light"] .pk.n-chord{fill:#fff}
html[data-theme="light"] .noteb.lit{color:#fff}
html[data-theme="light"] .toggle button.on{background:var(--teal);color:#fff}
html[data-theme="light"] .tag.live{background:rgba(31,138,144,.08)}
html[data-theme="light"] nav{border-bottom-color:#eeeef2}
/* ---- amber buttons: white type, both themes ---- */
:root{--btn:#d6942b;--btn2:#c07f1f}
.play,.btn-primary,.ksel.on,.kcell:hover,.sib a.cur,.soonband .btn{background:var(--btn)!important;border-color:var(--btn)!important;color:#fff!important;box-shadow:0 6px 18px -8px rgba(214,148,43,.55)}
.play:hover,.btn-primary:hover,.kcell:hover{background:var(--btn2)!important;border-color:var(--btn2)!important}
.play.playing{background:var(--coral)!important;border-color:var(--coral)!important;color:#fff!important;box-shadow:0 6px 18px -8px rgba(239,111,83,.55)}
.kcell:hover small{color:rgba(255,255,255,.8)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:.15s;padding:0;flex-shrink:0}
.theme-btn:hover{border-color:var(--amber);color:var(--amber)}
.theme-btn .sun,html[data-theme="light"] .theme-btn .moon{display:none}
html[data-theme="light"] .theme-btn .sun{display:block}
.theme-btn svg{display:block}

/* ---- mobile-first nav polish (every page) ---- */
nav{gap:10px}
.nav-links{gap:14px}
.nav-cta{white-space:nowrap}
@media(max-width:820px){
  nav{padding:16px 0 4px}
  .brand{font-size:20px}
  .nav-cta{padding:7px 12px;font-size:12px}
  .crumb{padding-top:18px;font-size:11px}
  .phead{padding-top:22px}
  h1{font-size:clamp(32px,9vw,44px)}
  .intro{font-size:15.5px}
  section{padding:30px 0}
  .trainer{padding:14px 12px 16px}
  .insts{padding:12px 10px 14px}
  .ctl-row{gap:10px 12px}
  .play{padding:9px 16px;font-size:15px}
  .tempo input{width:90px}
  th,td{padding:10px 10px;font-size:12.5px}
  .footgrid{gap:20px}
}
@media(max-width:480px){
  .nav-links{gap:10px}
  .nav-cta{padding:6px 10px;font-size:11px}
  .brand{font-size:19px}
  .sib a,.kcell{font-size:13px}
}

/* ================= MOBILE APP LAYOUT (≤820px). Desktop is untouched. ================= */
@media(max-width:820px){
  html{scroll-padding-top:64px}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .wrap{padding:0 16px}
  /* app bar */
  nav{position:sticky;top:0;z-index:50;margin:0 -16px;padding:10px 16px calc(10px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  nav .nav-cta{display:none}
  .theme-btn{width:38px;height:38px}
  .crumb{display:none}
  .kicker{margin-bottom:10px;font-size:11px;letter-spacing:.24em}
  h1{font-size:clamp(30px,8.4vw,40px);line-height:1.02}
  h2{font-size:clamp(23px,6.4vw,30px)}
  .phead{padding:18px 0 4px}
  .intro{margin-top:14px}
  /* cards & panels edge-to-edge feel */
  .panel,.tablewrap,.hub,.rcard,.faq details,.lcard{border-radius:18px}
  .trainer{padding:14px 12px 16px;margin-top:18px}
  .insts{padding:12px 10px 14px;margin-top:14px}
  .tchords{grid-template-columns:1fr!important;gap:10px}
  .tcard{padding:14px 14px}
  /* controls: horizontal chip rails, full-width play */
  .ctl-row{gap:10px}
  .ctl-label{font-size:10px}
  /* play button docks just above the tab bar so it is always one thumb away */
  .play{position:fixed;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:55;width:auto;justify-content:center;margin-left:0!important;padding:15px 18px;font-size:17px;border-radius:16px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)!important}
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .tempo{width:100%;order:11;justify-content:space-between}
  .tempo input{flex:1;width:auto;margin:0 10px}
  .keysel,.sib,.notesrow{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 2px 8px;margin-left:-4px;margin-right:-4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .keysel::-webkit-scrollbar,.sib::-webkit-scrollbar,.notesrow::-webkit-scrollbar{display:none}
  .keysel>*,.sib>a,.notesrow>*{flex:0 0 auto;scroll-snap-align:start}
  .sib a{padding:10px 14px;font-size:14px;border-radius:12px}
  .ksel{padding:10px 12px;font-size:15px;min-width:48px;border-radius:12px}
  .noteb{min-width:60px;padding:12px 10px;font-size:16px;border-radius:13px}
  .btn2{padding:12px 16px;font-size:14px;border-radius:12px;flex:1 1 auto;text-align:center}
  .playrow{gap:8px}
  .playrow .ctl-label{width:100%}
  .keygrid{grid-template-columns:repeat(4,1fr);gap:8px}
  .kcell{padding:14px 6px;font-size:16px;border-radius:13px}
  /* instrument diagrams: let the fretboard breathe with a horizontal scroll */
  .inst-block{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -10px;padding:0 10px 6px}
  .insts svg.guitar,#viz svg.guitar{min-width:640px}
  .insts svg.piano,#viz svg.piano{min-width:420px}
  #viz{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .legend{gap:10px 14px;font-size:10.5px}
  /* tables scroll instead of squeezing */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tablewrap table{min-width:520px}
  /* content blocks */
  .hubs,.rel{grid-template-columns:1fr;gap:12px}
  .hub,.rcard{padding:18px 16px}
  .why{gap:12px}
  .faq summary{font-size:16px;padding:12px 0}
  .prose{font-size:15px}
  footer{padding:30px 0 24px}
  .footgrid{grid-template-columns:1fr 1fr;gap:18px}
  .footcol a{padding:8px 0;font-size:14px}
  /* bottom tab bar (injected by theme.js) */
  .tabbar{position:fixed;top:auto;left:0;right:0;bottom:0;height:auto;margin:0;border-bottom:0;z-index:60;display:flex;justify-content:space-around;align-items:stretch;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border-radius:12px;color:var(--muted);font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.04em;text-decoration:none;transition:.15s}
  .tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.cur{color:var(--amber)}
  .tabbar a.cur svg{fill:rgba(232,167,62,.14)}
  html[data-theme="light"] .tabbar{background:rgba(255,255,255,.92)}
  html[data-theme="light"] nav{background:rgba(255,255,255,.88)}
  .tabbar a:active{transform:scale(.94)}
}
@media(min-width:821px){.tabbar{display:none}}

/* diagram labels must not swallow taps */
.piano text,.guitar text{pointer-events:none}
.pk,.gn{cursor:pointer}