/* ============================================================
   Study Music Theory - shared trainer design system
   Purple + beige (light), matching the main app identity.
   Brand purple #6B46C1, 3D shadow #553099, cream bg #f4ede1.
   Premium pass: depth, light, motion - all within the locked
   cream+purple identity. Every class/variable preserved.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900;1000&display=swap');

:root{
  /* surfaces */
  --bg:#f4ede1; --bg2:#ece1cf; --card:#ffffff; --card2:#faf4ea;
  /* muted/faint darkened to meet WCAG AA (4.5:1) on card + bg - the old
     values (#8A7468/#b3a392) were 2.1-4.4:1, failing on every page */
  --ink:#2c1810; --muted:#75604f; --faint:#786858; --line:rgba(44,24,16,.085);
  /* brand purple - matched to the main app (#6B46C1 lead · #553099 3D-shadow · #9F7AEA lavender) */
  --pp:#6B46C1; --pp-lt:#9F7AEA; --pp-dk:#553099; --pp-tint:rgba(107,70,193,.10); --pp-tint2:rgba(107,70,193,.20);
  --pp-glow:rgba(107,70,193,.34);
  --pp-grad:linear-gradient(135deg,#6B46C1 0%,#553099 100%); /* the app's signature purple band */
  --gold:#e8a72c; --gold-lt:#ffd36b; --gold-tint:rgba(232,167,44,.14);
  /* feedback */
  --good:#4FA52E; --good-dk:#3c7e22; --good-tint:rgba(79,165,46,.13);
  --bad:#D9484B; --bad-dk:#a83638; --bad-tint:rgba(217,72,75,.12);
  --warn:#E8954A; --teal:#2BA8B0;
  /* radii / elevation */
  --r:18px; --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(44,24,16,.05);
  --shadow:0 1px 2px rgba(44,24,16,.04), 0 6px 18px rgba(44,24,16,.06);
  --shadow-lg:0 2px 4px rgba(44,24,16,.05), 0 18px 40px rgba(44,24,16,.10);
  --lit:inset 0 1px 0 rgba(255,255,255,.85);   /* top highlight = lit from above */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ Night theme (the observatory) ============
   Follows the system setting. The constellation sky map is the anchor: at
   night the whole app lives inside its deep-plum space. Same tokens, flipped -
   note --good-dk/--bad-dk double as TEXT colors on tinted verdicts, so in the
   dark they must be the LIGHT variants (3D button bases are overridden below). */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#140f20; --bg2:#1e1732; --card:#251c3e; --card2:#1f1834;
    --ink:#efe9fb; --muted:#a99cc4; --faint:#9184b0; --line:rgba(233,221,255,.10); /* faint lightened: #6f6390 was 2.9:1 on the night card */
    --pp:#9F7AEA; --pp-lt:#b79df5; --pp-dk:#6B46C1; --pp-tint:rgba(159,122,234,.14); --pp-tint2:rgba(159,122,234,.32);
    --pp-glow:rgba(139,109,240,.42);
    --gold:#f0b445; --gold-lt:#ffd97e; --gold-tint:rgba(240,180,69,.16);
    --good:#6cc746; --good-dk:#9be47c; --good-tint:rgba(108,199,70,.15);
    --bad:#e56568; --bad-dk:#f5a3a5; --bad-tint:rgba(229,101,104,.14);
    --warn:#f0a662; --teal:#46c2ca;
    --shadow-sm:0 1px 2px rgba(0,0,0,.32);
    --shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.34);
    --shadow-lg:0 2px 4px rgba(0,0,0,.32), 0 18px 40px rgba(0,0,0,.48);
    --lit:inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* html body: outranks the base `body` rule that appears later in the file */
  html body{background:var(--bg);background-image:
    radial-gradient(1100px 560px at 50% -8%, rgba(139,109,240,.22), transparent 62%),
    radial-gradient(820px 520px at 108% 2%, rgba(70,194,202,.07), transparent 58%),
    linear-gradient(180deg,#1a1430 0%, #140f20 48%, #120d1d 100%)}
  .btn.good{box-shadow:0 5px 0 #2f6a1a,0 11px 20px rgba(79,165,46,.22)}
  .btn.good:active{box-shadow:0 2px 0 #2f6a1a}
  .btn.gold{color:#3a2600}
  .combochip,.smt-stat.smt-combo{color:#ffb37e;background:rgba(232,115,74,.15);border-color:rgba(232,115,74,.35)}
  .verdict.win{border-color:rgba(108,199,70,.4)} .verdict.miss{border-color:rgba(229,101,104,.4)}
  .kbdhint kbd{border-bottom-color:rgba(233,221,255,.2)}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--ink);
  min-height:100vh;
  min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.4;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 560px at 50% -8%, rgba(139,109,240,.13), transparent 62%),
    radial-gradient(820px 520px at 108% 2%, rgba(107,70,193,.07), transparent 58%),
    linear-gradient(180deg,#f8f2e8 0%, #f2e9d9 48%, #efe5d3 100%);
  background-attachment:fixed;}
/* safe-area insets: the packaged app runs edge-to-edge (viewport-fit=cover) -
   without these the header sits under the status bar on notched phones and
   the footer under the gesture bar */
.wrap{max-width:540px;margin:0 auto;
  min-height:100vh;
  min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 16px calc(30px + env(safe-area-inset-bottom,0px))}
::selection{background:var(--pp-tint2);color:var(--pp-dk)}
a{color:var(--pp)}
:focus-visible{outline:2.5px solid var(--pp);outline-offset:3px;border-radius:6px}

/* ---- header ---- */
.t-header{padding:24px 4px 12px;display:flex;align-items:center;gap:12px}
.t-eq{display:flex;align-items:flex-end;gap:3px;height:26px;flex:none;filter:drop-shadow(0 2px 5px var(--pp-glow))}
.t-eq i{width:4px;background:linear-gradient(180deg,var(--pp-lt),var(--pp));border-radius:3px;animation:t-eq 1s ease-in-out infinite}
.t-eq i:nth-child(1){height:40%;animation-delay:-.2s}.t-eq i:nth-child(2){height:90%;animation-delay:-.5s}.t-eq i:nth-child(3){height:60%}.t-eq i:nth-child(4){height:100%;animation-delay:-.35s}
@keyframes t-eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.t-header h1{font-size:1.34rem;font-weight:1000;letter-spacing:-.4px;line-height:1.04}
.t-header h1 b{color:var(--pp)}
.t-header .sub{font-size:.64rem;color:var(--faint);letter-spacing:1.6px;text-transform:uppercase;font-weight:900;margin-top:4px}
.t-back{margin-left:auto;font-size:.78rem;color:var(--pp);background:var(--pp-tint);border:1px solid var(--pp-tint2);
  border-radius:12px;padding:10px 13px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;font-weight:800;cursor:pointer;transition:transform .12s var(--ease),background .12s}
.t-back:active{transform:translateY(1px)}
@media(hover:hover){.t-back:hover{background:var(--pp-tint2)}}

/* ---- cards / canvas ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lit),var(--shadow)}
.canvas{margin:14px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 17px;box-shadow:var(--lit),var(--shadow);animation:rise .42s var(--ease) both}
.lead{font-size:.92rem;color:var(--muted);line-height:1.6;margin:10px 2px 18px;font-weight:600}

/* ---- buttons (Duolingo-style 3D) ---- */
.btn{position:relative;appearance:none;font-family:inherit;cursor:pointer;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-weight:800;font-size:.95rem;overflow:hidden;
  padding:13px 14px;border-radius:14px;box-shadow:var(--lit),0 3px 0 rgba(44,24,16,.10);
  transition:transform .08s var(--ease),box-shadow .08s var(--ease),filter .12s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(44,24,16,.10)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.btn.primary{background:linear-gradient(180deg,#9c82f4,var(--pp));color:#fff;border:none;
  box-shadow:0 5px 0 var(--pp-dk),0 11px 22px var(--pp-glow)}
.btn.primary::before{content:'';position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),transparent)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pp-dk),0 4px 10px var(--pp-glow)}
.btn.good{background:linear-gradient(180deg,#73cf4d,var(--good));color:#fff;border:none;box-shadow:0 5px 0 var(--good-dk),0 11px 20px rgba(79,165,46,.26)}
.btn.good::before{content:'';position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.30),transparent)}
.btn.good:active{transform:translateY(3px);box-shadow:0 2px 0 var(--good-dk)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);font-weight:800}
.btn.ghost:active{transform:translateY(1px);box-shadow:none}
@media(hover:hover){.btn:hover{filter:brightness(1.03)}.btn.ghost:hover{color:var(--ink);filter:none}}
.btn-row{display:flex;gap:9px;margin-top:12px}
.btn-row .btn{flex:1}
.btn-row .btn.shrink{flex:none}
/* Answer feedback's action row sticks to the bottom of the viewport so "Next"
   is always reachable without scrolling past the display + "why" panel - the
   Duolingo continue-bar pattern, and the fix for small phones (e.g. Qin F22). */
#fb .btn-row{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:6;
  margin-top:14px;padding:8px 0 4px;background:linear-gradient(to top,var(--bg) 62%,transparent)}

/* ---- segmented control ---- */
.seg{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:4px;margin:8px 0}
.seg button{flex:1;padding:9px 6px;border-radius:11px;background:transparent;border:none;color:var(--muted);
  font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:color .15s,background .2s var(--ease)}
.seg button.on{background:var(--card);color:var(--pp);box-shadow:var(--lit),0 1px 5px rgba(44,24,16,.13)}

/* ---- tags / pills ---- */
.tagrow{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{font-size:.62rem;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.tag.live{color:var(--pp);background:var(--pp-tint);border-color:var(--pp-tint2)}
.tag.good{color:var(--good-dk);background:var(--good-tint);border-color:transparent}
.tag.wip{color:var(--warn)}

/* ---- option buttons (multiple choice) ---- */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.opt{position:relative;text-align:left;font-family:inherit;cursor:pointer;padding:14px 15px 14px 54px;border-radius:14px;background:var(--card);
  border:2px solid var(--line);color:var(--ink);font-size:.95rem;font-weight:700;box-shadow:var(--lit),0 2px 0 rgba(44,24,16,.06);
  transition:transform .1s var(--ease),border-color .15s,background .15s,box-shadow .1s;animation:rise .3s var(--ease) both}
/* numbered chip: a clean visual anchor on mobile, and it surfaces the 1-9 key
   shortcuts on desktop (pairs with the "1-4 answer" hint) */
.opts{counter-reset:opt}
.opt{counter-increment:opt}
.opt::before{content:counter(opt);position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:27px;height:27px;border-radius:8px;background:var(--pp-tint);color:var(--pp);
  font-size:.82rem;font-weight:900;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.opt:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(44,24,16,.06)}
@media(hover:hover){.opt:hover{border-color:var(--pp-tint2);transform:translateY(-1px);box-shadow:var(--lit),0 4px 10px rgba(44,24,16,.08)}}
.opt.correct{border-color:var(--good);background:var(--good-tint);animation:pop .32s var(--ease)}
.opt.correct::before{background:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-tint);animation:shake .34s var(--ease)}
.opt.wrong::before{background:var(--bad);color:#fff}
.opt.dim{opacity:.45;transform:scale(.99)}
/* staggered entrance: options deal onto the screen like cards */
.opts .opt:nth-child(1){animation-delay:0ms}.opts .opt:nth-child(2){animation-delay:45ms}
.opts .opt:nth-child(3){animation-delay:90ms}.opts .opt:nth-child(4){animation-delay:135ms}
.opts .opt:nth-child(5){animation-delay:180ms}.opts .opt:nth-child(6){animation-delay:225ms}

/* ---- verdict / feedback ---- */
.verdict{text-align:center;font-size:.96rem;font-weight:900;padding:13px;border-radius:14px;margin-top:14px;animation:rise .3s var(--ease) both}
.verdict.win{background:var(--good-tint);color:var(--good-dk);border:1px solid rgba(79,165,46,.32)}
.verdict.miss{background:var(--bad-tint);color:var(--bad-dk);border:1px solid rgba(217,72,75,.3)}
.expl{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:13px 15px;
  font-size:.85rem;line-height:1.6;margin-top:10px;color:var(--ink)}
.expl b{color:var(--pp)}

/* ---- progress dots ---- */
.qprog{display:flex;gap:4px;margin:10px 0 14px}
.qprog i{height:6px;flex:1;border-radius:3px;background:var(--bg2);transition:background .3s}
.qprog i.done{background:linear-gradient(90deg,#73cf4d,var(--good))} .qprog i.cur{background:var(--pp)}
.qhead{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--muted);font-weight:800;margin:4px 0}
.qhead b{color:var(--ink)}

/* ---- misc ---- */
.label{font-size:.64rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:900;margin:16px 0 8px}
.readout{text-align:center;font-size:.86rem;color:var(--muted);min-height:20px;margin-bottom:14px;line-height:1.45;font-weight:700}
.readout .big{font-size:1.9rem;font-weight:1000;color:var(--pp)}
.q{font-size:1.14rem;font-weight:1000;text-align:center;margin:6px 0 12px;letter-spacing:-.2px}
.foot{margin-top:auto;padding-top:24px;text-align:center;font-size:.7rem;color:var(--faint);font-weight:600;line-height:1.6}
.hide{display:none!important}

/* ---- desktop fit: tighten the vertical so a drill fits without scrolling, and
   keep the column comfortably wide. Keyboard shortcuts (1-9 answer, Space replay,
   Enter continue) mean you never need the mouse. Mobile/app layout is untouched. ---- */
@media(min-width:640px){
  .wrap{max-width:600px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .t-header{padding:18px 4px 8px}
  .opt{padding:12px 15px 12px 54px}/* keep the numbered-chip gutter (a bare "12px 15px" reset the left padding and the .opt::before counter chip then overlapped the option text on desktop) */
  .canvas{padding:17px 16px;margin:11px 0}
  .context{padding:13px}
  .opts{gap:8px;margin-top:10px}
  .btn{padding:12px 14px}
  .q{margin:4px 0 10px}
}
.kbdhint{text-align:center;font-size:.64rem;color:var(--faint);font-weight:700;margin:10px 2px 0;letter-spacing:.2px}
.kbdhint kbd{background:var(--card);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-family:inherit;font-weight:800;color:var(--muted);font-size:.92em}
@media(max-width:639px){.kbdhint{display:none}} /* shortcuts hint is desktop-only */

/* ---- motion ---- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.rise{animation:rise .42s var(--ease) both}

/* ============================================================
   Shared trainer components (single source - pages must NOT
   re-declare these; they used to be copy-pasted and drifted)
   ============================================================ */

/* ---- stats bar (markup from SMTJuice.statsHTML) ---- */
.smt-stats{display:flex;align-items:center;gap:9px;margin:2px 0 14px}
.smt-stats .smt-lvl{display:flex;align-items:center;gap:8px;flex:1}
.smt-lvlnum{font-weight:900;color:var(--pp);font-size:.8rem;white-space:nowrap}
.smt-xpbar{flex:1;height:10px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.smt-xpbar span{display:block;height:100%;background:linear-gradient(90deg,#8B6DF0,#6B46C1);transition:width .45s ease;position:relative;overflow:hidden}
/* finite shimmer: 3 passes on render, then the compositor goes idle (an
   infinite animation on every screen of every trainer drains WebView battery) */
.smt-xpbar span::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.4) 50%,transparent 75%);animation:smtShimmer 2.8s var(--ease) 3}
@keyframes smtShimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.smt-stat{font-weight:900;font-size:.82rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4px 10px;box-shadow:var(--lit),var(--shadow-sm);display:inline-flex;align-items:center;gap:4px}
.smt-ic{display:inline-flex;font-size:1.05em}
.smt-ic-flame{color:#e8734a}.smt-ic-coin{color:var(--gold)}.smt-ic-bolt{color:#c25a17}
.smt-stat.smt-combo{color:#c25a17;background:#fbe6d4;border-color:#f3c79c;animation:pop .32s var(--ease)}

/* ---- question context + controls ---- */
.context{text-align:center;font-size:1.5rem;font-weight:900;letter-spacing:2px;color:var(--pp);background:var(--pp-tint);border:1px solid var(--pp-tint2);border-radius:14px;padding:16px;margin:10px 0}
.context.audio{font-size:.95rem;letter-spacing:0;color:var(--muted);font-weight:700;background:var(--card2);border-style:dashed}
.ctrlbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.toggle{font-size:.7rem;font-weight:800;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;transition:color .15s,background .15s,border-color .15s}
.toggle.on{color:var(--pp);border-color:var(--pp-tint2);background:var(--pp-tint)}
.combochip{font-weight:900;font-size:.78rem;color:#c25a17;background:#fbe6d4;border:1px solid #f3c79c;border-radius:20px;padding:4px 10px}
.xptag{display:inline-block;margin-left:8px;color:var(--good);font-weight:900}

/* ---- why / teaching panel ---- */
.whybox{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pp);border-radius:12px;padding:12px 14px;margin-top:10px;font-size:.86rem;line-height:1.55}
.whybox .wl{font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--pp);font-weight:900;margin-bottom:4px}

/* ---- auto-advance: the verdict drains, tap it to hold ---- */
.verdict{position:relative;overflow:hidden;cursor:pointer}
.verdict .adv{position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;opacity:.4;transform-origin:left;animation:smtAdv 1.4s linear forwards}
@keyframes smtAdv{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.verdict.held .adv{animation-play-state:paused;opacity:.15}

/* ---- dictation slots + pad ---- */
.slots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.slot{width:40px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:900;color:var(--faint);background:var(--card2);border:1px solid var(--line);position:relative}
.slot.filled{color:var(--pp);border-color:var(--pp-tint2);background:var(--pp-tint)}
.slot.good{color:#fff;background:linear-gradient(180deg,#6cc746,var(--good));border-color:var(--good)}
.slot.bad{color:#fff;background:linear-gradient(180deg,#ef8d99,var(--bad));border-color:var(--bad)}
.slot .corr{position:absolute;bottom:-15px;font-size:.58rem;color:var(--good);font-weight:800}
.pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:7px;margin-top:8px}
.pad .key{padding:12px 4px;border-radius:12px;text-align:center;background:var(--card);border:1px solid var(--line);font-size:1rem;font-weight:900;color:var(--ink);cursor:pointer;box-shadow:var(--lit),0 2px 0 rgba(44,24,16,.07);font-family:inherit;transition:transform .08s var(--ease)}
.pad .key:active{transform:translateY(1px)}

/* ---- session summary ---- */
.summary{text-align:center;padding:10px}
.summary .big{font-size:3rem}
.summary .score{font-size:2.4rem;font-weight:900;color:var(--pp)}
.summary .lab{color:var(--muted);font-weight:700;margin-top:2px}
.xpgain{font-size:1.3rem;font-weight:900;color:var(--good);margin-top:6px}

/* ---- gold (encore / stars / trophies) ---- */
.btn.gold{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#5a3a00;border:none;
  box-shadow:0 5px 0 #b77f1a,0 11px 20px rgba(232,167,44,.3)}
.btn.gold::before{content:'';position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.38),transparent)}
.btn.gold:active{transform:translateY(3px);box-shadow:0 2px 0 #b77f1a}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .verdict .adv{display:none}
}