/* Theory Trainer — scale sheets, pianomk.com
 * The download page for the thirty printable scale sheets: the same PianoMK
 * soft neo-brutalism as the trainer — even 2.5px borders, no offset shadows,
 * a press-scale on :active and a quiet tint on hover — in a file of its own,
 * because a page of download links has no reason to carry the quiz's weight.
 *
 * The colours are fixed here rather than taken from the trainer's admin
 * settings. The sheets are printed in these four pastels, and each key's card
 * warms to the colour of the sheet it hands over, so the page should match the
 * paper rather than whatever the trainer has been recoloured to. Three escape
 * hatches, all settable from the plugin's Custom CSS box:
 *   .scale-sheets{--ss-max:720px}   cap the width
 *   .scale-sheets{--ss-bleed:0px}   stop the edge-to-edge break-out on phones
 *   .scale-sheets{--ss-bg:#EFEFEF}  and the rest of the palette below
 */
/* The same Bravura subset the trainer engraves with: the key signature down the
   side of each row is drawn, not written out, so the font has to be here too. */
@font-face{
  font-family:'Bravura';
  src:url('bravura-music.woff') format('woff');
  font-display:block;
}

.scale-sheets{
  --ss-bg:#E8E4D8; --ss-paper:#FFFDF8; --ss-ink:#1A1A1A;
  --ss-muted:rgba(26,26,26,.62);
  --ss-hair:rgba(26,26,26,.25);
  --ss-radius:14px; --ss-bw:2.5px;
  --ss-display:'Cormorant Garamond',Georgia,serif;
  --ss-body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --ss-ease:cubic-bezier(.16,1,.3,1);

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

/* The theme styles links; reset hard so the cards land as designed. */
.scale-sheets a{
  color:var(--ss-ink); text-decoration:none; box-shadow:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.scale-sheets :focus-visible{outline:3px dashed var(--ss-ink);outline-offset:3px}

/* Cormorant ships oldstyle figures by default — force lining numerals so any
   number in a scale name reads as a number. */
.scale-sheets .ss-name{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". */
.scale-sheets .ss-acc{font-family:var(--ss-body);font-weight:500;font-size:.84em;letter-spacing:0;margin:0 .04em 0 -.02em}

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

/* =================================================================== rows */
.scale-sheets .ss-row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,1fr);
  gap:12px;align-items:stretch;margin-top:12px;
}
/* The list turns around here: after seven sharps it goes back to C and out
   through the flats. One hairline shows the jump; the captions say the rest. */
.scale-sheets .ss-row.ss-turn{border-top:1px solid var(--ss-hair);margin-top:22px;padding-top:22px}

/* The signature is the row's label, and it is the grid cell itself — there is no
   text in it to need a paragraph around it. It is built like the cards beside it,
   and stands as tall as they do, so a row reads as three tiles rather than as a
   drawing with two buttons after it. */
.scale-sheets .ss-key{
  width:112px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 6px 6px;
  background:var(--ss-paper);
  border:var(--ss-bw) solid var(--ss-ink);border-radius:12px;
}
.scale-sheets .ss-keysig{width:100%;height:auto}
/* The count under the staff. The engraving is the thing to learn to read; this
   is what tells a student whether they have read it right. */
.scale-sheets .ss-count{
  font:600 .53rem var(--ss-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ss-muted);line-height:1;white-space:nowrap;
}

/* =================================================================== cards */
.scale-sheets .ss-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:66px;padding:12px 15px;
  background:var(--ss-paper);
  border:var(--ss-bw) solid var(--ss-ink);border-radius:12px;
  transition:transform .15s var(--ss-ease),background-color .15s var(--ss-ease);
}
.scale-sheets .ss-card:active{transform:scale(.96)}
/* Each key warms to its own sheet's accent — the colour it is actually printed in. */
@media (hover:hover){
  .scale-sheets .ss-card:hover{background:var(--ss-accent,var(--ss-bg))}
}
.scale-sheets .ss-name{
  display:block;font-family:var(--ss-display);font-weight:600;
  font-size:25px;line-height:1.1;letter-spacing:-.01em;
}
.scale-sheets .ss-forms{
  display:block;margin-top:3px;
  font:600 .58rem var(--ss-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ss-muted);
}
.scale-sheets .ss-dl{width:19px;height:19px;flex:none}

/* ============================================================= chord rows */
/* Chords have no key signature — a chord turns up in any key — so these rows
   are labelled with the root instead, and the qualities run across. The cards
   sit in a grid of their own inside the row so three qualities and five both
   fill the width without either being told a column count. */
.scale-sheets .ss-row-chords{grid-template-columns:112px minmax(0,1fr)}
.scale-sheets .ss-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px}
.scale-sheets .ss-root{
  display:grid;place-items:center;text-align:center;padding:10px 8px;
  background:var(--ss-paper);
  border:var(--ss-bw) solid var(--ss-ink);border-radius:12px;
  font-family:var(--ss-display);font-weight:600;font-size:20px;line-height:1.15;letter-spacing:-.01em;
}
/* Five across is narrower than two, and a seventh's name is longer than a key's. */
.scale-sheets .ss-row-chords .ss-card{padding:11px 13px;gap:8px}
.scale-sheets .ss-row-chords .ss-name{font-size:21px}
/* The other spelling of the same three or four keys, under the name it leads with. */
.scale-sheets .ss-alt{
  display:block;margin-top:1px;color:var(--ss-muted);
  font-size:13px;line-height:1.3;
}

/* ================================================================= bundles */
/* One card a root, so there are no rows to label — twelve cards that lay
   themselves out. Wider than the chord cards, because the line under the name
   has to fit five chord names on it. */
.scale-sheets .ss-bundles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:12px;margin-top:12px;
}
.scale-sheets .ss-bundle .ss-name{font-size:26px}
.scale-sheets .ss-in{
  display:block;margin-top:3px;color:var(--ss-muted);
  font-size:13px;line-height:1.4;
}

/* ==================================================================== foot */
.scale-sheets .ss-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--ss-hair);
  color:var(--ss-muted);font-size:14.5px;
}

/* ============================================================== responsive */
/* One row a signature at every width: the staff, then the two keys that share
   it. Stacking the staff above them was tidier to build and twice as long to
   scroll, and the pair is the thing being shown. Everything shrinks together
   rather than anything being dropped. */
@media (max-width:760px){
  .scale-sheets .ss-row:not(.ss-row-chords){grid-template-columns:84px minmax(0,1fr) minmax(0,1fr)}
  .scale-sheets .ss-row{gap:9px;margin-top:9px}
  .scale-sheets .ss-key{width:84px;padding:5px 4px 4px;gap:2px}
  .scale-sheets .ss-count{font-size:.46rem;letter-spacing:.06em}
  .scale-sheets .ss-card{padding:10px 11px;gap:6px;min-height:0}
  .scale-sheets .ss-name{font-size:19px}
  .scale-sheets .ss-forms{font-size:.5rem;letter-spacing:.05em;margin-top:2px}
  .scale-sheets .ss-alt{font-size:12px}
  .scale-sheets .ss-dl{width:16px;height:16px}
  /* Five sevenths will not sit beside a label, so those rows keep it above. */
  .scale-sheets .ss-row-chords{grid-template-columns:minmax(0,1fr)}
  .scale-sheets .ss-root{grid-column:1/-1;justify-self:start;min-width:104px;padding:8px 12px;margin-bottom:-2px;font-size:18px}
  .scale-sheets .ss-row.ss-turn{margin-top:18px;padding-top:16px}
}
/* Phones get the whole screen: the panel steps outside the theme's page padding
   rather than sitting in a column inside it. Set --ss-bleed:0px to stop that. */
@media (max-width:640px){
  .scale-sheets{
    width:auto;
    max-width:var(--ss-max,none);
    margin-left:var(--ss-bleed,calc(50% - 50vw));
    margin-right:var(--ss-bleed,calc(50% - 50vw));
    border-radius:0;
  }
}
@media (max-width:560px){
  .scale-sheets{padding:16px 11px}
  .scale-sheets .ss-row:not(.ss-row-chords){grid-template-columns:74px minmax(0,1fr) minmax(0,1fr)}
  .scale-sheets .ss-row{gap:7px}
  .scale-sheets .ss-key{width:74px}
  .scale-sheets .ss-card{padding:9px 10px}
  .scale-sheets .ss-name{font-size:17.5px}
}
@media (max-width:400px){
  .scale-sheets .ss-row:not(.ss-row-chords){grid-template-columns:64px minmax(0,1fr) minmax(0,1fr)}
  .scale-sheets .ss-row{gap:6px}
  .scale-sheets .ss-key{width:64px;padding:4px 3px 3px}
  .scale-sheets .ss-count{font-size:.42rem;letter-spacing:.04em}
  .scale-sheets .ss-card{padding:8px 9px;gap:4px}
  .scale-sheets .ss-name{font-size:16px}
  .scale-sheets .ss-forms{font-size:.46rem;letter-spacing:.03em}
  .scale-sheets .ss-dl{width:14px;height:14px}
}