/* Theory Trainer — pianomk.com
 * PianoMK soft neo-brutalism, flat edition: even 2.5px borders, no offset
 * shadows. The only motion is a press-scale on :active and a quiet background
 * tint on hover (pointer devices only).
 *
 * Every rule is scoped under .theory-trainer so the site theme can't bleed in
 * and the trainer can't leak out. Colors come from CSS variables the JS sets
 * per instance from the admin settings.
 *
 * Layout: the trainer fills whatever column it is dropped into, and on phones
 * it breaks out to the full screen width. Only one border ever surrounds a
 * thing — the stone panel is the ground, and the cards and controls sit on it
 * directly rather than inside further boxes. Two escape hatches, both settable
 * from the plugin's Custom CSS box:
 *   .theory-trainer{--tt-max:720px}   cap the width again
 *   .theory-trainer{--tt-bleed:0px}   stop the edge-to-edge break-out on phones
 */
@font-face{
  font-family:'Bravura';
  src:url('bravura-music.woff') format('woff');
  font-display:block;
}

.theory-trainer{
  --tt-bg:#E8E4D8; --tt-paper:#FFFDF8; --tt-ink:#1A1A1A;
  --tt-pink:#FFD6E0; --tt-blue:#CDEAFE; --tt-green:#D6F5D6; --tt-yellow:#FFE8B3;
  --tt-muted:rgba(26,26,26,.62);
  --tt-hair:rgba(26,26,26,.25);
  --tt-radius:14px; --tt-bw:2.5px;
  --tt-display:'Cormorant Garamond',Georgia,serif;
  --tt-body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --tt-ease:cubic-bezier(.16,1,.3,1);

  box-sizing:border-box; width:100%; max-width:var(--tt-max,100%); margin:0 auto;
  background:var(--tt-bg); color:var(--tt-ink);
  border-radius:var(--tt-radius);
  padding:clamp(16px,2.2vw,24px);
  font-family:var(--tt-body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.theory-trainer *,.theory-trainer *::before,.theory-trainer *::after{box-sizing:border-box}

/* The theme styles buttons; reset hard so ours land as designed. */
.theory-trainer button{
  font-family:inherit; font-size:inherit; line-height:inherit; color:var(--tt-ink);
  margin:0; text-transform:none; letter-spacing:normal; text-shadow:none; box-shadow:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-appearance:none; appearance:none;
}
.theory-trainer p,.theory-trainer h2,.theory-trainer h3{margin:0}
.theory-trainer svg{display:block}

/* Cormorant ships oldstyle figures by default — force lining numerals so scores read as numbers. */
.theory-trainer .tt-sc b,.theory-trainer .tt-hud b,.theory-trainer .tt-ring,
.theory-trainer .tt-qnum{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* Accidentals set in the sans face — Cormorant has no ♯ ♭ ♮ and the substitute face
   carries wide sidebearings, which reads as "E ♭  major". */
.theory-trainer .tt-acc{font-family:var(--tt-body);font-weight:500;font-size:.84em;letter-spacing:0;margin:0 .04em 0 -.02em}

.theory-trainer :focus-visible{outline:3px dashed var(--tt-ink);outline-offset:3px}

/* =========================================================== hero + chrome */
.theory-trainer .tt-hero{text-align:center;margin-bottom:clamp(14px,2.6vw,20px)}
.theory-trainer .tt-kicker{
  display:inline-block;font:600 .68rem var(--tt-body);letter-spacing:.22em;text-transform:uppercase;
  padding:7px 16px;background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;
}
.theory-trainer .tt-h1{
  font-family:var(--tt-display);font-weight:600;
  font-size:clamp(30px,4.6vw,44px);line-height:1.05;letter-spacing:-.01em;margin:14px 0 7px;
}
.theory-trainer .tt-lede{color:var(--tt-muted);max-width:44ch;margin:0 auto;font-size:15px}

.theory-trainer .tt-modebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.theory-trainer .tt-seg{
  display:inline-flex;border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;
  overflow:hidden;background:var(--tt-paper);
}
.theory-trainer .tt-seg button{
  font:600 .7rem var(--tt-body);letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:0;padding:11px 20px;min-height:44px;cursor:pointer;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-seg button+button{border-left:var(--tt-bw) solid var(--tt-ink)}
.theory-trainer .tt-seg button:active{transform:scale(.95)}
.theory-trainer .tt-seg button[aria-pressed="true"]{background:var(--tt-blue)}
.theory-trainer .tt-seg-lang{margin-left:auto}
.theory-trainer .tt-seg-lang button{padding:11px 14px;letter-spacing:.1em}

/* ================================================================== setup */
/* No panel of its own — the chooser sits straight on the stone, so the topic
   rows are the only framed things in it. */
.theory-trainer .tt-setup{
  display:flex;flex-direction:column;
  padding:0;margin-bottom:16px;
}
.theory-trainer .tt-setup-row{display:flex;flex-direction:column}
.theory-trainer .tt-setup-row+.tt-setup-row{
  margin-top:12px;padding-top:12px;border-top:var(--tt-bw) dashed var(--tt-hair);
}
.theory-trainer .tt-lab{
  font:600 .62rem var(--tt-body);letter-spacing:.2em;text-transform:uppercase;color:var(--tt-muted);
  display:block;margin-bottom:8px;
}
/* Every setting that is not the topic sits in one wrapping strip. Stacked as
   separate rows they read as a form to fill in; side by side they read as the small
   adjustments they are, and most students never touch any of them. */
.theory-trainer .tt-ctls{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:flex-start}
.theory-trainer .tt-ctl{display:flex;flex-direction:column}
.theory-trainer .tt-ctl .tt-lab{margin-bottom:6px}
.theory-trainer .tt-setup .tt-hint{
  color:var(--tt-muted);font-size:13.5px;line-height:1.4;margin:-3px 0 9px;
}
.theory-trainer .tt-setup .tt-btn{margin-top:14px}
/* leave a little air above the task when it is scrolled to; a site with a sticky
   header can raise this from the plugin's Custom CSS box */
.theory-trainer .tt-card,.theory-trainer .tt-result{scroll-margin-top:16px}

/* ------------------------------------------------------------ topic list */
.theory-trainer .tt-labrow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.theory-trainer .tt-labrow .tt-lab{margin-bottom:0}
/* the switch that turns the list from one-choice into several */
.theory-trainer .tt-chip{
  margin-left:auto;cursor:pointer;
  font:600 .58rem var(--tt-body);letter-spacing:.14em;text-transform:uppercase;
  background:var(--tt-paper);border:2px solid var(--tt-ink);border-radius:999px;
  padding:7px 13px;min-height:34px;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-chip:active{transform:scale(.94)}
.theory-trainer .tt-chip.on{background:var(--tt-blue)}
/* the range chip sits in the control strip, not on a label row, so it keeps its own size */
.theory-trainer .tt-chip-wide{margin-left:0;min-height:44px;padding:9px 18px}
@media (hover:hover){
  .theory-trainer .tt-chip:hover{background:var(--tt-bg)}
  .theory-trainer .tt-chip.on:hover{background:var(--tt-blue)}
}

/* one column on a phone, and as many as the column can hold on a wide screen —
   at full width a single stack would leave the examples marooned on the right */
.theory-trainer .tt-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px}
.theory-trainer .tt-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:12px;
  padding:9px 11px;cursor:pointer;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-row:active{transform:scale(.985)}
.theory-trainer .tt-row.on{background:var(--tt-blue)}
/* the flat system has no hover lift — a background tint only, and never on touch */
@media (hover:hover){
  .theory-trainer .tt-row:hover{background:var(--tt-bg)}
  .theory-trainer .tt-row.on:hover{background:var(--tt-blue)}
}
/* the tick belongs to multi-select only; in the default list the blue fill says it */
.theory-trainer .tt-row-mark{display:none}
.theory-trainer .tt-list.multi .tt-row-mark{
  flex:none;width:22px;height:22px;border:2px solid var(--tt-ink);border-radius:6px;
  background:var(--tt-paper);display:grid;place-items:center;
}
.theory-trainer .tt-row-mark svg{
  width:12px;height:12px;stroke:var(--tt-ink);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;
}
.theory-trainer .tt-list.multi .tt-row.on .tt-row-mark{background:var(--tt-green)}
.theory-trainer .tt-list.multi .tt-row.on .tt-row-mark svg{opacity:1}
.theory-trainer .tt-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.theory-trainer .tt-row-name{font-family:var(--tt-display);font-weight:600;font-size:19px;line-height:1.15}
.theory-trainer .tt-row-ex{
  font:600 .56rem var(--tt-body);letter-spacing:.15em;text-transform:uppercase;color:var(--tt-muted);
}
/* the notation keeps its paper tile so it stays legible once the row fills blue —
   but no border of its own: inside a paper row it should read as part of the row */
.theory-trainer .tt-row-stage{
  flex:none;width:118px;height:52px;padding:4px 6px;
  background:var(--tt-paper);border:0;border-radius:8px;
}
.theory-trainer .tt-row-stage svg{width:100%;height:100%}

/* ------------------------------------------------------------------ pills */
.theory-trainer .tt-pills{display:flex;flex-wrap:wrap;gap:7px}
.theory-trainer .tt-pill{
  font:600 13.5px var(--tt-body);background:var(--tt-paper);color:var(--tt-ink);
  border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;
  min-height:44px;padding:6px 17px;cursor:pointer;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-pill:active{transform:scale(.95)}
.theory-trainer .tt-pill.on{background:var(--tt-blue)}
@media (hover:hover){
  .theory-trainer .tt-pill:hover{background:var(--tt-bg)}
  .theory-trainer .tt-pill.on:hover{background:var(--tt-blue)}
}

/* ------------------------------------------------------------ note range */
/* Shut by default and opened from the chip beside the label. Inside, the two
   bound notes are engraved on a staff with an arrow column either side — a
   student setting a range should be looking at notes, not at "C4 – B5". */
.theory-trainer .tt-range{display:none;margin-top:12px}
.theory-trainer .tt-range-row{
  display:flex;align-items:center;gap:10px;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:12px;padding:8px 10px;
}
.theory-trainer .tt-range-staff{flex:1;min-width:0;height:104px;display:flex;align-items:center;justify-content:center}
.theory-trainer .tt-range-staff svg{width:100%;height:100%}
.theory-trainer .tt-arrows{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.theory-trainer .tt-arrow{
  width:42px;min-height:34px;cursor:pointer;line-height:1;
  background:var(--tt-bg);border:2px solid var(--tt-ink);border-radius:9px;font-size:13px;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-arrow:active{transform:scale(.92)}
@media (hover:hover){ .theory-trainer .tt-arrow:hover{background:var(--tt-blue)} }
.theory-trainer .tt-arrowlbl{
  font:600 .54rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;color:var(--tt-muted);
}
.theory-trainer .tt-range-info{
  margin-top:6px;text-align:center;font:600 .68rem var(--tt-body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tt-muted);
}

/* ======================================================= stats / hud / timer */
.theory-trainer .tt-score{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:var(--tt-radius);
  overflow:hidden;margin-bottom:14px;
}
.theory-trainer .tt-sc{padding:11px 8px;text-align:center}
.theory-trainer .tt-sc+.tt-sc{border-left:var(--tt-bw) solid var(--tt-ink)}
.theory-trainer .tt-sc b{display:block;font-family:var(--tt-display);font-weight:600;font-size:28px;line-height:1}
.theory-trainer .tt-sc span{font:600 .6rem var(--tt-body);letter-spacing:.18em;text-transform:uppercase;color:var(--tt-muted)}
.theory-trainer .tt-sc.flame{background:var(--tt-yellow)}

.theory-trainer .tt-hud{
  display:none;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:var(--tt-radius);
  padding:11px 16px;margin-bottom:10px;
}
.theory-trainer .tt-stat{display:flex;flex-direction:column;gap:1px}
.theory-trainer .tt-hk{font:600 .58rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;color:var(--tt-muted)}
.theory-trainer .tt-hud b{font-family:var(--tt-display);font-weight:600;font-size:24px;line-height:1}
/* hearts are set in the sans face — the serif has no ♥ and substitutes badly */
.theory-trainer .tt-hearts{font-family:var(--tt-body);font-size:19px;letter-spacing:.08em}
.theory-trainer .tt-endrun{
  margin-left:auto;cursor:pointer;
  font:600 .58rem var(--tt-body);letter-spacing:.14em;text-transform:uppercase;
  background:var(--tt-bg);border:2px solid var(--tt-ink);border-radius:999px;
  padding:7px 14px;min-height:34px;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-endrun:active{transform:scale(.94)}
@media (hover:hover){ .theory-trainer .tt-endrun:hover{background:var(--tt-pink)} }

.theory-trainer .tt-timer{
  display:none;height:10px;margin-bottom:14px;
  background:var(--tt-bg);border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;overflow:hidden;
}
.theory-trainer .tt-timerbar{height:100%;width:100%;background:var(--tt-ink)}

/* =============================================================== question */
.theory-trainer .tt-card{
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:var(--tt-radius);
  padding:20px 22px 22px;
}
.theory-trainer .tt-qtop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.theory-trainer .tt-tag{
  font:600 .6rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;background:var(--tt-yellow);
}
.theory-trainer .tt-qnum{
  margin-left:auto;font:600 .62rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;color:var(--tt-muted);
}
.theory-trainer .tt-prompt{
  font-family:var(--tt-display);font-weight:600;font-size:clamp(23px,3.4vw,29px);line-height:1.18;margin:0 0 4px;
}
.theory-trainer .tt-stage{margin:14px 0 4px;display:flex;align-items:center;justify-content:center}
.theory-trainer .tt-stage.staff{height:150px}
.theory-trainer .tt-stage.rhythm{height:132px}
.theory-trainer .tt-stage svg{max-width:100%;max-height:100%;height:100%}

.theory-trainer .tt-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px;margin-top:16px}
.theory-trainer .tt-opt{
  font:500 16px var(--tt-body);background:var(--tt-bg);color:var(--tt-ink);
  border:var(--tt-bw) solid var(--tt-ink);border-radius:12px;
  min-height:56px;padding:10px 14px;cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-opt:active{transform:scale(.96)}
@media (hover:hover){
  .theory-trainer .tt-opts:not(.locked) .tt-opt:hover{background:var(--tt-paper)}
}
.theory-trainer .tt-opt.right{background:var(--tt-green);font-weight:600}
.theory-trainer .tt-opt.wrong{background:var(--tt-pink)}
.theory-trainer .tt-opt.dim{opacity:.4}
.theory-trainer .tt-opts.locked .tt-opt{cursor:default}

.theory-trainer .tt-fb{margin-top:16px;display:none}
.theory-trainer .tt-fb.show{display:block}
.theory-trainer .tt-fb-head{font-family:var(--tt-display);font-weight:600;font-size:22px;margin:0 0 3px}
.theory-trainer .tt-fb-head em{font-weight:500}
.theory-trainer .tt-fb-why{color:var(--tt-muted);font-size:15px}

.theory-trainer .tt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:52px;margin-top:14px;padding:12px 24px;cursor:pointer;
  border:var(--tt-bw) solid var(--tt-ink);border-radius:13px;background:var(--tt-green);
  font:600 .76rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;
  transition:transform .15s var(--tt-ease);
}
.theory-trainer .tt-btn:active{transform:scale(.96)}
.theory-trainer .tt-btn.ghost{background:var(--tt-bg)}
.theory-trainer .tt-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}

/* ============================================================= score card */
.theory-trainer .tt-result{
  display:none;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:var(--tt-radius);
  padding:26px 24px;text-align:center;
}
.theory-trainer .tt-ring{
  width:104px;height:104px;margin:0 auto 16px;border:var(--tt-bw) solid var(--tt-ink);border-radius:26px;
  display:grid;place-items:center;background:var(--tt-yellow);
  font-family:var(--tt-display);font-weight:600;font-size:32px;line-height:1;
}
.theory-trainer .tt-rtitle{font-family:var(--tt-display);font-weight:600;font-size:clamp(28px,4.4vw,38px);line-height:1.1;margin:0 0 8px}
.theory-trainer .tt-rtitle em{font-weight:500}
.theory-trainer .tt-rbody{color:var(--tt-muted);margin:0 auto 16px;max-width:40ch;font-size:15.5px}
.theory-trainer .tt-sumpills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:6px}
.theory-trainer .tt-sp{
  font:600 .64rem var(--tt-body);letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;
  border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;background:var(--tt-yellow);
}
.theory-trainer .tt-sp.blue{background:var(--tt-blue)}
.theory-trainer .tt-sp.green{background:var(--tt-green)}
.theory-trainer .tt-sp.pink{background:var(--tt-pink)}
.theory-trainer .tt-rowbtns{display:grid;gap:8px;margin-top:10px}
.theory-trainer .tt-rowbtns .tt-btn{margin-top:0}

/* ============================================================ responsive */
/* A wide column has room to breathe: bigger staves and roomier cards, so the
   full width buys legibility rather than just longer lines. */
@media (min-width:900px){
  .theory-trainer .tt-card{padding:26px 28px 28px}
  .theory-trainer .tt-result{padding:30px 28px}
  .theory-trainer .tt-stage.staff{height:172px}
  .theory-trainer .tt-stage.rhythm{height:150px}
  /* the running totals spread across the bar instead of huddling on the left */
  .theory-trainer .tt-stat{flex:1}
  /* a button stretched across a wide column stops reading as a button */
  .theory-trainer .tt-setup .tt-btn,
  .theory-trainer .tt-fb .tt-btn{width:auto;min-width:260px;align-self:flex-start}
  .theory-trainer .tt-rowbtns{max-width:420px;margin-left:auto;margin-right:auto}
}
/* Phones get the whole screen: the panel steps outside the theme's page padding
   rather than sitting in a column inside it. Set --tt-bleed:0px to stop that. */
@media (max-width:640px){
  .theory-trainer{
    width:auto;
    /* the panel is as wide as the screen, not as wide as the column it sits in */
    max-width:var(--tt-max,none);
    margin-left:var(--tt-bleed,calc(50% - 50vw));
    margin-right:var(--tt-bleed,calc(50% - 50vw));
    border-radius:0;
  }
}
@media (max-width:560px){
  .theory-trainer{padding:16px 13px}
  .theory-trainer .tt-card{padding:16px 14px 18px}
  .theory-trainer .tt-opts{grid-template-columns:1fr}
  .theory-trainer .tt-stage.staff{height:124px}
  .theory-trainer .tt-sc b{font-size:24px}
  .theory-trainer .tt-hud{gap:18px;padding:10px 13px}
  .theory-trainer .tt-seg-lang{margin-left:0}
  .theory-trainer .tt-seg button{padding:11px 15px;font-size:.66rem;letter-spacing:.1em}
  .theory-trainer .tt-row{gap:9px;padding:8px 9px}
  .theory-trainer .tt-row-name{font-size:17px}
  .theory-trainer .tt-row-stage{width:96px;height:46px}
  .theory-trainer .tt-range-staff{height:88px}
  .theory-trainer .tt-arrow{width:38px}
  .theory-trainer .tt-endrun{margin-left:0;order:9}
  /* the picker takes the full width of the phone rather than sitting in a column */
  .theory-trainer .tt-sigpick{width:100%}
  .theory-trainer .tt-sig-staff{height:66px}
}
@media (max-width:380px){
  /* the example is the first thing to go when the row can't hold everything */
  .theory-trainer .tt-row-stage{width:78px;height:42px}
  .theory-trainer .tt-row-ex{font-size:.5rem;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .theory-trainer *{transition:none !important}
}

/* ============================================================ hear it */
/* Sits with the topic tag so it is always in the same place, and only appears
   on questions that actually have pitches to sound. The spin says a sample is
   still on its way; after the first press the note is cached and it is instant. */
.theory-trainer .tt-hear{
  display:none;align-items:center;gap:7px;cursor:pointer;
  font:600 .6rem var(--tt-body);letter-spacing:.14em;text-transform:uppercase;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:999px;
  padding:5px 13px 5px 10px;min-height:34px;
  transition:transform .15s var(--tt-ease),background-color .15s var(--tt-ease);
}
.theory-trainer .tt-hear svg{
  width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;fill:none;
}
.theory-trainer .tt-hear svg path:first-child{fill:currentColor}
.theory-trainer .tt-hear:active{transform:scale(.94)}
.theory-trainer .tt-hear.busy{opacity:.55;cursor:progress}
@media (hover:hover){ .theory-trainer .tt-hear:hover{background:var(--tt-blue)} }
@media (max-width:560px){
  /* on a phone the icon carries it — the word would push the question number off */
  .theory-trainer .tt-hear span{display:none}
  .theory-trainer .tt-hear{padding:5px 10px}
}

/* ======================================================== answer pads */
/* Note names come as three rows of seven, laid out the way the keyboard is
   written: sharps above, naturals in the middle, flats below. Seven columns
   hold at any width — the labels are two characters at most. */
.theory-trainer .tt-pad{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.theory-trainer .tt-pad-row{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.theory-trainer .tt-pad .tt-opt{min-height:52px;padding:8px 2px;font-size:15.5px}
/* the naturals are the row a student reaches for first, so give them the paper */
.theory-trainer .tt-pad-row:nth-child(2) .tt-opt{background:var(--tt-paper)}
/* The circle-of-fifths picker: one engraved staff with a slider under it, so a
   student reads the signature they are choosing instead of counting a number.
   The staff redraws on every step of the drag; the question waits for the release. */
.theory-trainer .tt-sigpick{display:flex;flex-direction:column;gap:4px;width:210px;max-width:100%}
.theory-trainer .tt-sig-staff{
  display:block;height:74px;padding:5px 8px;
  background:var(--tt-paper);border:var(--tt-bw) solid var(--tt-ink);border-radius:12px;
}
.theory-trainer .tt-sig-staff svg{width:100%;height:100%}
.theory-trainer .tt-sig-lab{
  font:600 .58rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tt-ink);text-align:center;
}
.theory-trainer .tt-slider-ticks{
  display:flex;justify-content:space-between;padding:0 2px;
  font:600 .5rem var(--tt-body);color:var(--tt-muted);
}

/* the slider itself, drawn flat like everything else — both engines need their own
   track and thumb rules, and neither inherits from the other */
.theory-trainer .tt-slider{
  -webkit-appearance:none;appearance:none;width:100%;margin:6px 0 0;
  background:transparent;cursor:pointer;
}
.theory-trainer .tt-slider:focus{outline:none}
.theory-trainer .tt-slider:focus-visible{outline:3px dashed var(--tt-ink);outline-offset:4px}
.theory-trainer .tt-slider::-webkit-slider-runnable-track{
  height:12px;background:var(--tt-bg);border:2.5px solid var(--tt-ink);border-radius:999px;
}
.theory-trainer .tt-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;margin-top:-9.5px;
  background:var(--tt-blue);border:2.5px solid var(--tt-ink);border-radius:50%;
}
.theory-trainer .tt-slider::-moz-range-track{
  height:12px;background:var(--tt-bg);border:2.5px solid var(--tt-ink);border-radius:999px;
}
.theory-trainer .tt-slider::-moz-range-thumb{
  width:22px;height:22px;background:var(--tt-blue);
  border:2.5px solid var(--tt-ink);border-radius:50%;
}

/* thirteen intervals: as many columns as fit, never a single stretched column */
.theory-trainer .tt-opts-many{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.theory-trainer .tt-opts-many .tt-opt{min-height:48px;font-size:15px}
@media (max-width:560px){
  .theory-trainer .tt-pad{gap:5px}
  .theory-trainer .tt-pad-row{gap:5px}
  .theory-trainer .tt-pad .tt-opt{min-height:46px;font-size:14px;border-width:2px;border-radius:9px}
  /* two across rather than one, or thirteen intervals is a very long scroll */
  .theory-trainer .tt-opts-many{grid-template-columns:1fr 1fr}
  .theory-trainer .tt-opts-many .tt-opt{min-height:46px;font-size:13.5px;padding:8px 6px}
}

/* ============================================================== records */
/* The end of a Timed run, under the summary pills: what this student's best is,
   and their last few runs. Signed in it comes from their account; a guest's best
   is kept in their own browser and marked as such. */
.theory-trainer .tt-records{margin-top:14px;text-align:left}
.theory-trainer .tt-records:empty{margin-top:0}
.theory-trainer .tt-rec-k{
  font:600 .56rem var(--tt-body);letter-spacing:.18em;text-transform:uppercase;color:var(--tt-muted);
}
.theory-trainer .tt-rec-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 12px;background:var(--tt-paper);
  border:var(--tt-bw) solid var(--tt-ink);border-radius:12px;
}
.theory-trainer .tt-rec-line b{font-family:var(--tt-display);font-weight:600;font-size:20px;line-height:1}
.theory-trainer .tt-rec-new{
  margin:7px 0 0;text-align:center;
  font:600 .6rem var(--tt-body);letter-spacing:.16em;text-transform:uppercase;
}
.theory-trainer .tt-rec-list{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.theory-trainer .tt-rec-row{
  display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:var(--tt-muted);
  padding:5px 12px;border-bottom:2px dashed var(--tt-hair);
}
.theory-trainer .tt-rec-row:last-child{border-bottom:0}
.theory-trainer .tt-rec-row b{
  flex:none;font-family:var(--tt-display);font-weight:600;font-size:16px;color:var(--tt-ink);
  font-variant-numeric:lining-nums;
}
.theory-trainer .tt-rec-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theory-trainer .tt-rec-row i{flex:none;font-style:normal;font-size:12px}
.theory-trainer .tt-rec-note{
  margin:10px 0 0;text-align:center;color:var(--tt-muted);font-size:13px;
}
@media (max-width:560px){
  .theory-trainer .tt-rec-row i{display:none}
}