/* BREAKPOINT CORRECTED 2026-08-10 16:40 — width alone was WRONG.
   The app ships landscape on iPhone (Info.plist), and every current iPhone in
   landscape is 844-956pt WIDE — all above 820. Adding a height condition excludes
   them: an iPhone in landscape is ~390-440pt tall; the shortest iPad is 744.
   iPad mini landscape 1133x744 passes. iPhone 16 Pro Max landscape 956x440 does not. */
/* THE WHOLE HORN — iPAD STYLESHEET · 2026-08-10
   ONE file, linked from every page. Nothing applies below 820pt.
   Edit here, not in seventeen places. */

/* ═══════════════════════════════════════════════════════════════════
   GENERIC TABLET LAYER — applies to EVERY page in the app, including the
   ones with their own markup (vibrato, longtones, instruments, fingering
   charts). Nothing below 820pt, so every phone rendering is untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:740px) and (min-height:700px){
  body                        { font-size:19px; }
  h1                          { font-size:60px !important; }
  h2                          { font-size:38px !important; }
  h3                          { font-size:30px !important; }
  p, li                       { font-size:19px !important; line-height:1.7; }
  button, select,
  input[type=text], input[type=number]
                              { font-size:21px !important; min-height:64px !important; }
  input[type=range]           { height:38px !important; width:100% !important; }
  select                      { background-size:22px 22px !important;
                                background-position:right 14px center !important; }
  a                           { font-size:19px; }
  small, .fine, .foot         { font-size:16px !important; }

  /* the shared page wrappers used by the standalone pages */
  .wrap, .container, .page, main
                              { max-width:min(100% - 2rem, 66rem) !important;
                                margin-inline:auto !important; }
}


/* ═══ iPAD: MAKE IT BIGGER. 2026-08-10 ═══
   Not architecture. Not stretching containers. The content itself scales up so it
   fills the screen the way a resized window does. Nothing applies below 820pt,
   so the iPhone is untouched. */
@media (min-width:740px) and (min-height:700px){
  .sheet{ max-width:min(100% - 2rem, 66rem) !important;
          display:block !important; }          /* kill the 2-col grid that strands content */
  .sheet > *{ width:100% !important; max-width:100% !important; grid-column:auto !important; }

  /* everything the finger touches gets bigger */
  .sheet .ctl select, .sheet select        { font-size:22px !important; min-height:64px !important; }
  .sheet .ctl label, .sheet label          { font-size:15px !important; letter-spacing:.06em; }
  .sheet h3                                { font-size:30px !important; }

  /* EVERY SHEET HEADER — the word (Sound, Setup, Learn...) and its back arrow */
  .sheet-header, .sheet .sheet-header      { font-size:34px !important; }
  .sheet-header .sheet-title, .sheet-title { font-size:34px !important; line-height:1.15; }
  .sheet-header b, .sheet-header strong,
  .sheet-header .ttl, .sheet-header h2     { font-size:34px !important; }
  .sheet-header .sub, .sheet-header .d     { font-size:15px !important; }
  .sheet-header button, .sheet .close,
  .sheet-header .back                      { width:62px !important; height:62px !important;
                                             font-size:26px !important; }

  /* THE CHECKBOX ROW — Sound / Metronome / Whole & half notes / Drone */
  .sheet label, .sheet .cbrow label,
  .sheet .cbrow                            { font-size:20px !important; }
  .sheet input[type=checkbox]              { width:30px !important; height:30px !important; }

  /* ALL SLIDERS IDENTICAL — same width, same track, same thumb */
  .sheet input[type=range]                 { width:100% !important; display:block;
                                             height:34px !important; }
  .sheet p, .sheet li                      { font-size:19px !important; line-height:1.7; max-width:70ch; }
  .sheet .chip, .sheet button              { font-size:19px !important; }
  .sheet input[type=range]                 { height:34px !important; }
  .sheet .row, .sheet .ctl                 { margin-bottom:18px !important; }

  /* the Learn-style link lists: real rows, not a thin column of small text */
  /* link lists become real rows that fill the height, like a menu on a big screen */
  .sheet a                                 { font-size:20px !important; }
  .sheet .lrow, .sheet .learn-row,
  .sheet a[class*=row], .sheet li a        { display:block; padding:20px 18px !important;
                                             border-radius:14px; }
  .sheet .lnk, .sheet .learnlist a         { display:block; padding:22px 18px !important; }
  /* the Learn / explainer rows: real full-width rows that fill the height */
  /* NOTE VALUES tiles + NOTE NAMES + the session log line */
  .sheet .nv, .sheet .nvbtn, .sheet .noteval,
  .sheet .nameswitch button, .sheet .seg button   { font-size:20px !important;
                                                    min-height:78px !important; }
  .sheet .nameswitch, .sheet .nameswitch label    { font-size:16px !important; }
  .pl-log, .pl-log *, .pl-daylabel, .pl-entry     { font-size:18px !important; }
  .pl-entry .t, .pl-log .t                        { font-size:18px !important; }

  .sheet .subdiv-link{ min-height:96px !important; width:100% !important;
                       padding:0 24px !important; font-size:24px !important;
                       border-radius:14px; background:var(--panel-raised);
                       border:0.5px solid var(--hairline); margin-bottom:12px; }

  /* the studio module rows */
  #sysOverlay .mod                         { padding:22px 26px !important; }
  #sysOverlay .mod b                       { font-size:21px !important; }
  #sysOverlay .mod .d                      { font-size:16px !important; }

  /* ── THE FRONT PAGE — make the furniture big enough to fill the room ── */
  main>.panel .chip                        { min-height:152px !important; }
  main>.panel .chip .cl                    { font-size:14px !important; letter-spacing:.08em }
  main>.panel .chip .cv                    { font-size:32px !important; line-height:1.15 !important; }
  main>.panel .va-studio                   { min-height:150px !important; }
  main>.panel .ctl                         { min-height:152px !important; }
  main>.panel .ctl label                   { font-size:14px !important; }
  main>.panel .ctl select                  { font-size:24px !important; }
  /* the dropdown chevrons — drawn as a background SVG, so scale it up */
  select                                   { background-size:22px 22px !important;
                                             background-position:right 14px center !important; }
  main>.panel .chip > .cx, main>.panel .chip span:last-child { font-size:26px !important; }
  main>.panel .tile                        { min-height:140px !important; font-size:24px !important; }
  main>.panel .foot-tempo                  { min-height:152px !important;
                                             display:flex !important; align-items:center !important;
                                             gap:20px !important; padding:0 22px !important; }
  main>.panel .foot-tempo input[type=range]{ flex:1 1 auto !important; height:38px !important;
                                             margin:0 0 8px 0 !important; align-self:center !important; }
  main>.panel .foot-tempo .bpm,
  main>.panel .foot-tempo b                { font-size:44px !important; }
  main>.panel .foot-tempo .bpmlbl,
  main>.panel .foot-tempo small            { font-size:18px !important; }
  main>.panel .foot-tempo button           { min-width:64px !important; min-height:64px !important;
                                             font-size:28px !important; flex:0 0 auto !important; }
  /* the small identity line under the chips */
  main>.panel .va-identity,
  main>.panel .chordline, main>.panel .idline { font-size:19px !important; }
  /* under the Play button */
  .playbar small, .playbar .hint           { font-size:18px !important; }
  main>.panel h1                           { font-size:76px !important; }
  main>.panel .mast-lift                   { font-size:20px !important; }

  /* ── THE MUSIC: FEWER NOTES, BIGGER (Tom, 2026-08-10) ──
     Squeezing all 36 into the width is what made them tiny. Let the staff be TALL
     and let it scroll sideways exactly as the phone does — big, readable notes. */
  #staffwrap svg{ height:340px !important; width:auto !important; max-width:none !important;
                  margin:0 !important; }
  #staffwrap   { overflow-x:auto; height:auto !important; min-height:0 !important; }
  /* the card and pane must GROW with the taller staff, or they overlap the panel below */
  .staffcard   { height:auto !important; min-height:0 !important; }
  #staffPane   { height:auto !important; }
  /* and give the brand line room to breathe below the music */
  main>.panel  { margin-top:8px !important; }
  /* the panel and the staff card must share one left/right edge */
  #staffPane, main>.panel, .staffcard { box-sizing:border-box; }
  main>.panel  { width:auto !important; margin-inline:10px !important; }
  .staffcard   { margin-inline:10px !important; }

  /* ── THE BRAND LINE AND THE PLAY BUTTON, scaled like everything else ── */
  /* THE BRAND LINE + ICON */
  main>.panel .hrow            { font-size:30px !important; gap:16px !important; }
  main>.panel .hrow img        { width:84px !important; height:84px !important;
                                 border-radius:16px !important; }
  /* THE BRAND LINE STICKS — main scrolls, so pinning it means it can never
     scroll out of view the way Tom saw. */
  main>.panel .hrow            { font-size:34px !important; padding:14px 0 10px !important; }
  /* NOTE: do NOT set overflow:visible on main — it removes scrolling entirely
     and locks the screen. (Broke it once, 2026-08-10.) The brand line scrolling
     with the content is normal and correct. */

  /* THE MAQAM CARD STAFF — taller and centred in its cream card */
  .maqam-card svg              { height:200px !important; width:auto !important;
                                 max-width:100% !important; display:block !important;
                                 margin:0 auto !important; }
  .maqam-card                  { text-align:center; }
  main>.panel                  { padding-top:22px !important; }
  /* close the gap between the brand line and "F major" */
  main>.panel .hrow            { margin-bottom:0 !important; padding-bottom:0 !important; }
  main>.panel .mast-lift       { margin-top:6px !important; margin-bottom:2px !important;
                                 font-size:22px !important; }
  /* the identity block under the key name — all of it up a size */
  main>.panel .mast-lift *,
  main>.panel .va-identity, main>.panel .va-identity * { font-size:20px !important; }
  main>.panel .sub, main>.panel .concert,
  main>.panel .nowp, main>.panel .nowp *              { font-size:19px !important; }
  main>.panel .modename, main>.panel .practicing      { font-size:24px !important; }

  /* EAR TRAINING and every other explainer sheet: body text up across the board */
  .sheet div, .sheet section                          { font-size:19px; }
  .sheet b, .sheet strong                             { font-size:21px !important; }
  .sheet small, .sheet .d, .sheet .sub                { font-size:16px !important; }
  main>.panel h1               { margin-top:4px !important; }
  /* and open up the space above the Play bar */
  main                         { padding-bottom:56px !important; }
  .playbar                     { padding-top:26px !important; }

  /* THE FOUR TILES — the word lives in .tt, matched to "Alto sax" at 26px */
  main>.panel .tile .tt        { font-size:26px !important; }
  main>.panel .tile .ts        { font-size:16px !important; }

  /* HOW MUCH HELP? — the select was 43px wide with text-overflow:clip, so the
     value ran off the edge. Give it the room it needs. */
  .support-front               { display:flex !important; align-items:center; gap:14px; }
  .support-front select        { font-size:24px !important; width:auto !important;
                                 min-width:14ch !important; max-width:100% !important;
                                 text-overflow:ellipsis !important; }
  .support-front label         { font-size:14px !important; white-space:nowrap; }

  /* "CHANGE — WHAT TO PRACTICE" matched to the chips beside it */
  main>.panel .va-studio       { font-size:26px !important; min-height:152px !important; }
  main>.panel .va-studio .vs-sub { font-size:16px !important; }
  .playbar button, #btnPlay{ font-size:30px !important; min-height:92px !important;
                             padding-left:64px !important; padding-right:64px !important; }

  /* ── SESSION / YOUR PRACTICE — taller stats and calendar cells ── */
  .pl-stat, .pl-stats > *                  { min-height:104px !important; }
  .pl-stat b, .pl-stats b                  { font-size:30px !important; }
  .pl-day                                  { min-height:104px !important; font-size:20px !important; }
  .pl-dow div                              { font-size:15px !important; }
}


/* ═══ A FLOOR UNDER EVERY TEXT SIZE — 2026-08-10 ═══
   The audit found 96 elements under 16px on the Setup sheet alone and 184 in the
   studio menu. Rather than chase them one screenshot at a time, set a minimum.
   Still tablet-only. */
@media (min-width:740px) and (min-height:700px){
  .sheet, .sheet div, .sheet span, .sheet label,
  .sheet td, .sheet th, .sheet li, .sheet a, .sheet button,
  #sysOverlay .mod, #sysOverlay .mod *          { font-size:max(19px, 1em) !important; }
  /* deliberate small print stays small, but not tiny */
  .sheet .fine, .sheet small, .sheet .foot,
  .sheet .legal, .sheet .note                   { font-size:16px !important; }
}

/* select values need breathing room inside their box (an earlier rule zeroed the
   left padding, which is why "2 & 4" sat against the border) */
@media (min-width:740px) and (min-height:700px){
  select                       { padding-left:18px !important; padding-right:46px !important;
                                 text-indent:0 !important; }
  .support-front select        { padding-left:18px !important; }
  .ctl select, .sheet select   { padding-left:18px !important; }
  /* ear-training / explainer card text */
  #etOverlay .sheet div,
  #etOverlay .sheet p          { font-size:20px !important; line-height:1.65 !important; }
  #etOverlay .sheet b          { font-size:24px !important; }
}

/* ═══ THE STANDALONE PAGES (vibrato, longtones) — their own markup ═══ */
@media (min-width:740px) and (min-height:700px){
  header .title, .hgroup .title      { font-size:30px !important; letter-spacing:.10em !important; }
  a.home, .home                      { width:66px !important; height:66px !important;
                                       font-size:28px !important; }
  button.gear, .gear                 { min-height:62px !important; font-size:20px !important;
                                       padding:0 22px !important; }
  .hero                              { font-size:20px !important; }
  .noterow, .noterow *               { font-size:22px !important; }
  .app                               { max-width:min(100% - 2rem, 62rem) !important;
                                       margin-inline:auto !important; }
}

/* ═══ ROUND 2 — 2026-08-10 evening ═══ */
@media (min-width:740px) and (min-height:700px){

  /* NOTE VALUES tiles and the note-name chip row (Setup) */
  .chips .chip, .chips button          { font-size:22px !important; min-height:76px !important;
                                         padding:10px 14px !important; }
  .chips .chip small, .chips .sub      { font-size:15px !important; }
  .sheet .seg, .sheet .segrow          { gap:12px !important; }
  .sheet .seg button, .sheet .segrow button,
  .sheet .opt, .sheet .optbtn          { font-size:21px !important; min-height:84px !important; }

  /* MAQAM DEGREE ROWS — line the names up instead of centring each one */
  .mqdeg, .maqam-degree, .mq-row       { display:grid !important;
                                         grid-template-columns:44px 1fr auto !important;
                                         align-items:center !important; gap:14px !important;
                                         text-align:left !important; }
  .mqdeg > *:last-child,
  .maqam-degree > *:last-child         { text-align:right !important; }

  /* THE VIBRATO / LONG TONES HERO — the wave is the exercise, make it big */
  .hero svg, .hero canvas,
  .wave, .wave svg, #wave, #waveCanvas { width:100% !important; height:260px !important;
                                         max-width:none !important; }
  .noterow .note, .noterow b,
  .bignote, #noteName                  { font-size:72px !important; }
  .noterow button, .noterow .arrow     { width:84px !important; height:84px !important;
                                         font-size:32px !important; }
  .sounds, .concertline, .subnote      { font-size:20px !important; }
  .wpb, .wavesperbeat                  { font-size:20px !important; letter-spacing:.14em !important; }

  /* THE SETTINGS MODALS on the standalone pages — they are still phone width */
  dialog, .modal, .modal-card, .settings,
  .settings-panel, .sheet-modal, [role=dialog]
                                       { max-width:min(100% - 3rem, 60rem) !important;
                                         width:min(100% - 3rem, 60rem) !important; }
  dialog h2, .modal h2, .settings h2   { font-size:34px !important; }
  .modal label, .settings label        { font-size:19px !important; }
  .modal p, .settings p                { font-size:18px !important; line-height:1.65 !important; }

  /* centre the standalone exercise pages in the screen */
  .app, .page-wrap                     { margin-inline:auto !important; }
}

/* ═══ THE TEACHER LINK — it is the whole point of that screen ═══
   A director must be able to read the link they just made, at arm's length. */
@media (min-width:740px) and (min-height:700px){
  #teachOverlay code, #teachOverlay pre,
  #teachOverlay .linkbox, #teachOverlay .linkout,
  #teachOverlay input[readonly], #teachOverlay .url,
  #teachOverlay [class*=link]          { font-size:22px !important; line-height:1.6 !important;
                                         word-break:break-all; }
  #teachOverlay .linkbox, #teachOverlay .url,
  #teachOverlay code                   { display:block; padding:18px 20px !important;
                                         border-radius:12px; background:var(--panel-raised);
                                         color:var(--text) !important; }
  #teachOverlay button                 { font-size:22px !important; min-height:76px !important; }
  /* the dev-server note stays quiet */
  #teachOverlay .dev, #teachOverlay .devnote { font-size:15px !important; opacity:.7; }
}

/* ═══ ANYTHING A TEACHER TYPES INTO ═══ */
@media (min-width:740px) and (min-height:700px){
  textarea, .sheet textarea,
  input[type=text], .sheet input[type=text]
                                      { font-size:20px !important; line-height:1.6 !important;
                                        padding:16px 18px !important; }
  textarea                            { min-height:132px !important; }
  textarea::placeholder,
  input::placeholder                  { font-size:20px !important; opacity:.55 !important; }
  /* the label above the box, and the character counter */
  #teachOverlay b, #teachOverlay strong{ font-size:23px !important; }
  #teachOverlay .count, .charcount    { font-size:17px !important; }
  /* the pill row (Quarters / Eighths / Triplets...) */
  #teachOverlay .pill, .pillrow button,
  #teachOverlay .seg button           { font-size:20px !important; min-height:64px !important;
                                        padding:0 22px !important; }
}

/* ═══ ONE PLAY BUTTON — 2026-08-10 ═══
   It is the same action on every screen, so it must look like the same button.
   Matched to the front page: 92px tall, 30px type, fully rounded. */
@media (min-width:740px) and (min-height:700px){
  .roomplay, .sheet .roomplay          { min-height:92px !important; font-size:30px !important;
                                         border-radius:999px !important;
                                         width:min(100%, 420px) !important;
                                         margin-inline:auto !important; display:block !important; }
  /* the secondary "back to the main screen" reads as secondary, but same family */
  .roomback, .sheet .roomback          { min-height:72px !important; font-size:21px !important;
                                         border-radius:999px !important;
                                         width:min(100%, 420px) !important;
                                         margin-inline:auto !important; display:block !important; }
}

/* ═══ LAST WORD ON THE CHIP VALUES ═══
   An earlier rule in this file (.chip span:last-child) was winning by source order
   and holding these at 26px. This is the intended size. */
@media (min-width:740px) and (min-height:700px){
  main>.panel .chip .cv,
  main>.panel .chip span:last-child   { font-size:32px !important; line-height:1.15 !important; }
  main>.panel .chip .cl               { font-size:14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE SCALE — 2026-08-10, from the consistency audit.
   21 font sizes and 13 min-heights had drifted apart. These are the tokens.
   Appended last AND written with enough specificity to win, because the audit
   found the earlier "source order" diagnosis was wrong: the conflict was
   SPECIFICITY (:last-child counts as a class). Do not repeat that mistake.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:740px) and (min-height:700px){
  /* VALUE — the thing you read at a glance. One size everywhere. */
  main>.panel .chip .cv,
  main>.panel .chip span:last-child,
  main>.panel .chip > .cx,
  main>.panel .tile .tt,
  main>.panel .va-studio               { font-size:32px !important; line-height:1.15 !important; }

  /* LABEL — the small caps above a value */
  main>.panel .chip .cl,
  main>.panel .ctl label,
  .sheet .ctl label, .support-front label,
  main>.panel .tile .ts                { font-size:14px !important; letter-spacing:.07em !important; }

  /* MODULE — every box in a row is the same height */
  main>.panel .chip,
  main>.panel .va-studio,
  main>.panel .ctl,
  main>.panel .foot-tempo,
  main>.panel .tile                    { min-height:152px !important; }

  /* CONTROL — every icon button of the same rank */
  .sheet-header button, .sheet .close, .sheet-header .back,
  a.home, .home, button.gear, .gear,
  main>.panel .foot-tempo button       { width:64px !important; height:64px !important;
                                         min-width:64px !important; min-height:64px !important; }

  /* SLIDER — one height, everywhere ("ALL SLIDERS IDENTICAL" was not true before) */
  input[type=range], .sheet input[type=range],
  main>.panel .foot-tempo input[type=range]
                                       { height:38px !important; }

  /* BODY — one prose size, including the explainers and standalone modals */
  .sheet p, .sheet li, .sheet div,
  #etOverlay .sheet div, #etOverlay .sheet p,
  .modal p, .settings p                { font-size:19px !important; }
  .sheet b, .sheet strong,
  #etOverlay .sheet b, #teachOverlay b { font-size:21px !important; }

  /* BUTTON TEXT */
  .sheet .seg button, .sheet .segrow button,
  #teachOverlay .seg button, #teachOverlay .pill,
  .sheet .opt, .sheet .optbtn          { font-size:21px !important; min-height:84px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RECONCILIATION + DEFECT FIXES — 2026-08-10 evening, applied after a
   three-agent audit. Appended LAST on purpose.

   PART A (the paywall firewall) must stay at the very bottom of this file,
   forever. Any rule added ABOVE it is neutralised for #payOverlay there.

   NOT applied from the audit, deliberately:
   - the deletion of L135-140. Reverting the 340px scrolling staff would undo
     "fewer notes, bigger" (Tom, 2026-08-10). The app's 36-notehead viewBox fix
     and this are opposed intents; today's instruction wins.
   - values 32px -> 24px. Tom's note this session: text is too small.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:740px) and (min-height:700px){

  /* ── 1. THE ⓘ BUG — the single highest-value fix in this pass ──
     The generic `button{min-height:64px}` above reaches into the small info
     badges that live INSIDE a .ctl label. A 64px button inside a 21px label
     stretches it to 48px; the label is position:absolute; top:9px inside a
     64px control, so it swallows the select's value. Measured: "Swing ⓘ" and
     "Click pattern ⓘ" labels 48px tall and overlapping; "Sound type" (no
     badge) 21px and clean. Same rule was inflating 40 inline buttons app-wide.
     A 64px minimum is right for a control you tap, wrong for a badge in text. */
  .ctl label button, .sheet .ctl label button,
  label button, .sheet-header .info, button.info, .infobtn
                                       { min-height:0 !important; height:auto !important;
                                         width:auto !important; min-width:0 !important;
                                         padding:0 4px !important; font-size:inherit !important;
                                         line-height:1 !important; display:inline !important;
                                         vertical-align:baseline !important; }

  /* ── 2. #stopAllBar OFF-SCREEN ──
     Its right:calc(min(46vw,600px)/2) anchor assumes a drawer-mode overlay;
     a later rule makes overlays full-bleed and the math breaks. Measured at
     1032 wide: right edge landed at 1310.6px — 278.6px past the viewport. */
  #stopAllBar                          { right:auto !important; left:50% !important;
                                         transform:translateX(-50%) !important; }

  /* ── 3. DEAD SELECTORS, REMAPPED ──
     19 selector groups in this file were aiming at class names that do not
     exist, which is why some screens looked untouched. Real names below. */
  .grid7 > .deg                        { display:grid !important;
                                         grid-template-columns:44px 1fr auto !important;
                                         align-items:center !important; gap:14px !important;
                                         text-align:left !important; }
  .grid7 > .deg > *:last-child         { text-align:right !important; }
  .ratecap                             { font-size:20px !important; letter-spacing:.14em !important; }
  .concert                             { font-size:20px !important; }
  .swellwrap                           { width:100% !important; height:260px !important; }
  #teachOverlay .tch-url               { font-size:22px !important; line-height:1.6 !important;
                                         word-break:break-all; display:block;
                                         padding:18px 20px !important; border-radius:12px; }
  #teachOverlay .tch-chip              { font-size:20px !important; min-height:64px !important;
                                         padding:0 22px !important; }
  #teachOverlay .tch-count             { font-size:17px !important; }
  #teachOverlay .tch-devnote           { font-size:15px !important; opacity:.7; }

  /* ── 4. THE [role=dialog] OVERREACH ──
     The settings-modal block was written for the standalone pages' <dialog>
     elements, but [role=dialog] also catches all 20 of the main app's
     .overlay panels and fights the .sheet width rule on the same panels.
     Restrict it to real <dialog> elements. */
  .modal, .modal-card, .settings, .settings-panel,
  .sheet-modal, [role=dialog]          { max-width:none; width:auto; }
  dialog                               { max-width:min(100% - 3rem, 60rem) !important;
                                         width:min(100% - 3rem, 60rem) !important; }

  /* ── 5. ONE MODULE HEIGHT — Tom: "too much space between modules" ──
     Measured: the gaps were fine (18-24px). The modules themselves were 152px,
     which is what reads as air. 112px, and one gap value everywhere. */
  main>.panel .chip, main>.panel .tile, main>.panel .va-studio,
  main>.panel .ctl, main>.panel .foot-tempo, main>.panel .support-front,
  .chip, .tile                         { min-height:112px !important; }
  main>.panel .foot-tempo              { padding:10px 22px !important; }
  main>.panel > *                      { margin-bottom:18px !important; }
  main>.panel .chiprow, main>.panel .tilegrid { gap:16px !important; }

  /* ── 6. THE SHEETS USE THE WIDTH ──
     A 944px sheet running one control per row is a phone column on a big
     screen. Two columns, with full-width rows for the things that need it. */
  .overlay:not(#payOverlay) .sheet     { max-width:none !important; width:100% !important; }
  /* REVERTED 2026-08-10, Tom: "that page doesn't make a lot of sense — it all
     has to be vertical, because of the order of things, what needs to go
     together with something else."
     He is right. Two columns filled the width but paired controls that have
     nothing to do with each other — Sound type beside Concert pitch, Swing
     beside Sound volume — when the real reading order is Sound type -> Sound
     volume, then Click type -> Click pattern -> Click volume, then Groove ->
     Drum volume. Optimising for width broke the sequence, which is the more
     important thing on a settings screen. One column, in order. */
  .overlay:not(#payOverlay) .sheet .grid2
                                       { display:grid !important;
                                         grid-template-columns:1fr !important;
                                         row-gap:16px !important;
                                         align-items:start !important; }

  /* ── 7. THE 64x76 ELLIPSE ──
     #teachOverlay button{min-height:76px} outranked .sheet-header button's
     64x64 on min-height only, so the round back arrow rendered as an ellipse. */
  #teachOverlay .sheet-back            { width:64px !important; height:64px !important;
                                         min-width:64px !important; min-height:64px !important;
                                         border-radius:50% !important; }

  /* ── 8. PLAY BUTTONS STAY CENTRED ── */
  .roomplay, .sheet .roomplay,
  .roomback, .sheet .roomback          { display:flex !important; align-items:center !important;
                                         justify-content:center !important; gap:10px !important; }
}


/* ═══ ROW EVENNESS — 2026-08-10, after measuring the applied pass ═══
   min-height:112px was already on every module, yet rows measured 152/152/
   112/112. Not a cascade conflict: .va-studio's wrapped two-line title plus
   its subtitle is naturally 152px tall, and a grid row is as tall as its
   tallest cell, so it stretched the chips beside it. The fix is to make that
   one cell fit the module height, not to raise the floor for everything.
   Keep this ABOVE the paywall firewall. */
@media (min-width:740px) and (min-height:700px){
  main>.panel .chip, main>.panel .tile, main>.panel .va-studio,
  main>.panel .foot-tempo, main>.panel .support-front
                                       { min-height:120px !important; }
  /* .va-studio is a WRAPPER; the real control is the <button> inside it.
     Styling the wrapper only added padding around an untouched 149px button
     (measured 173px total). Size the button, and give the wrapper nothing. */
  main>.panel .va-studio               { padding:0 !important; min-height:0 !important;
                                         display:block !important; }
  main>.panel .va-studio button        { min-height:120px !important; height:120px !important;
                                         width:100% !important; font-size:22px !important;
                                         line-height:1.15 !important; padding:10px 16px !important;
                                         display:flex !important; flex-direction:column !important;
                                         align-items:center !important; justify-content:center !important;
                                         gap:2px !important; }
  main>.panel .va-studio button .vs-sub,
  main>.panel .va-studio button small,
  main>.panel .va-studio button div:last-child
                                       { font-size:14px !important; line-height:1.25 !important; }
  main>.panel .foot-tempo .bpm,
  main>.panel .foot-tempo b            { font-size:38px !important; line-height:1.1 !important; }
  main>.panel .foot-tempo input[type=range]
                                       { margin:0 !important; }
}

/* ═══ FINAL EVENNESS PASS — 2026-08-10, all values measured, not estimated ═══
   Three defects remained after the module fix:
   (a) .foot-tempo and .support-front measured 124px against everything else's
       120px — their inner content, not their floor.
   (b) row gaps measured 24 / 20 / 18 / 18. One value: 18.
   (c) the panel's bottom edge measured 1262px against a Play bar whose top is
       1224px — the tile row was running 38px UNDERNEATH it. .mast-lift was
       243px tall on its own; tightening its leading and margins (NOT its font
       size — Tom's note this session is that text is too small) reclaims the
       space without shrinking a single word.
   Keep ABOVE the paywall firewall. */
@media (min-width:740px) and (min-height:700px){
  main>.panel .foot-tempo,
  main>.panel .support-front           { height:120px !important; min-height:120px !important;
                                         padding-top:0 !important; padding-bottom:0 !important; }
  main>.panel .foot-tempo .bpm,
  main>.panel .foot-tempo b            { font-size:36px !important; line-height:1 !important; }

  /* ONE GAP. .panel is already a grid with row-gap:18px — an added
     margin-bottom STACKED on it and measured 36px. Zero the margins and let
     the grid own the rhythm; that is the only place the number lives. */
  main>.panel                          { row-gap:18px !important; }
  main>.panel > *                      { margin-top:0 !important; margin-bottom:0 !important; }
  main>.panel .hrow                    { padding-bottom:0 !important; }

  /* the identity block. NOTE: an earlier rule in this file sets
     `main>.panel .mast-lift{margin-top:6px; margin-bottom:2px}` at higher
     specificity than `main>.panel > *`, which is exactly the 6px and 2px that
     made the first two gaps measure 24 and 20 against everything else's 18.
     Matched specificity here, and tighter leading so the last row clears the
     Play bar. Font sizes are untouched. */
  main>.panel .mast-lift               { margin-top:0 !important; margin-bottom:0 !important;
                                         line-height:1.1 !important; }
  main>.panel .mast-lift > *           { margin-top:0 !important; margin-bottom:4px !important; }
  main>.panel .mast-lift > *:last-child{ margin-bottom:0 !important; }

  /* and guarantee the last row clears the Play bar no matter what */
  main                                 { padding-bottom:24px !important; }
}

/* ═══ PROSE SPANS THE PANEL — 2026-08-10, Tom: "the text could go across the
   whole screen, it doesn't have to be in the left-hand column" ═══
   main>.panel is a 3-column grid (290.7 / 290.7 / 261.6 at 1032pt). The
   structural rows carry grid-column:1/-1, but every prose, status and note
   block was left at `auto` — so each landed in column ONE at 291px and ran
   3621px tall down a narrow strip with two-thirds of the panel empty.
   Measured on #otNote (the Overtones explainer). Same for the maqam notes,
   the timpani note, the chord-scale line and the articulation row.

   ALSO: `button.gear, .gear` was in the 64x64 CONTROL token group, which
   clipped the "⚙ Settings" label at the circle's edge. A round icon button and
   a labelled pill are different things and cannot share one size token.
   Keep ABOVE the paywall firewall. */
@media (min-width:740px) and (min-height:700px){
  main>.panel > #otNote,      main>.panel > #mqApproxNote,
  main>.panel > #mqInstNote,  main>.panel > #mqDirNote,
  main>.panel > #timpNote,    main>.panel > #exLine,
  main>.panel > #chordScale,  main>.panel > #articRow,
  main>.panel > #instPick,    main>.panel > #practiceOptions,
  main>.panel > #vaIdentity,  main>.panel > details,
  main>.panel > .status,      main>.panel > .instnote,
  main>.panel > .mqnote,      main>.panel > .mqapprox,
  main>.panel > .opts         { grid-column:1 / -1 !important;
                                max-width:none !important; width:auto !important; }
  /* the bulleted explainers get room to breathe once they are full width */
  main>.panel > #otNote ul,
  main>.panel > #otNote li    { max-width:none !important; }

  /* the gear is a LABELLED pill, not a 64px icon circle */
  button.gear, .gear          { width:auto !important; min-width:0 !important;
                                height:auto !important; min-height:62px !important;
                                padding:0 22px !important; border-radius:999px !important;
                                white-space:nowrap !important; overflow:visible !important; }
}

/* ═══ THE WAY BACK IS ALWAYS LIT — 2026-08-10, Tom ═══
   The header's ← is dimmed and unclickable whenever Settings is open. That is
   not a styling bug: <dialog>.showModal() makes everything outside the dialog
   INERT by spec. Verified — with Settings open, elementFromPoint on the arrow
   returns the DIALOG; with it closed, it returns A.home and works.

   So CSS cannot make that arrow work while the sheet is open, and making it
   merely LOOK lit would be worse: a control that looks live and does nothing.
   The way back has to live INSIDE the sheet, where it is reachable — that is
   the `.dback` pill added to the dialog header.

   Below: make the page's own ← unmistakably lit whenever it IS live, so the
   affordance reads at arm's length on every page that has one.
   Keep ABOVE the paywall firewall. */
@media (min-width:740px) and (min-height:700px){
  a.home, .home                 { color:var(--gold,#E0A43B) !important;
                                  border:1.5px solid var(--gold,#E0A43B) !important;
                                  opacity:1 !important; }
  a.home:hover, .home:hover,
  a.home:focus-visible          { background:rgba(224,164,59,.14) !important; }
  /* the in-sheet way back, sized to the tablet scale */
  .dback                        { min-height:56px !important; font-size:19px !important;
                                  padding:10px 20px !important; }
  /* the sheet header now carries three items; keep them apart */
  dialog .dh                    { gap:16px !important; }
}

/* ═══ THE TEMPO ROW — 2026-08-10, Tom: "60 BPM should be raised a little above
   that slider, and the slider itself raised a little" ═══
   Measured structure: .foot-tempo > button + .ft-mid + button, and the value
   and the slider both live INSIDE .ft-mid (.ft-bpm > #ftVal + <small>, then
   input[type=range]). A first attempt targeted the range as a direct grid
   child of .foot-tempo — one level too high, and it did nothing. */
@media (min-width:740px) and (min-height:700px){
  main>.panel .foot-tempo      { display:flex !important; align-items:center !important;
                                 gap:18px !important; padding:0 22px !important; }
  main>.panel .foot-tempo .ft-mid
                               { flex:1 1 auto !important; display:flex !important;
                                 flex-direction:column !important; align-items:stretch !important;
                                 justify-content:center !important; gap:10px !important;
                                 transform:translateY(-4px) !important; }
  main>.panel .foot-tempo .ft-bpm
                               { text-align:center !important; line-height:1 !important;
                                 margin:0 !important; }
  main>.panel .foot-tempo .ft-bpm #ftVal
                               { font-size:38px !important; line-height:1 !important; }
  main>.panel .foot-tempo .ft-bpm small
                               { font-size:17px !important; margin-left:6px !important; }
  main>.panel .foot-tempo .ft-mid input[type=range]
                               { width:100% !important; margin:0 !important; height:38px !important; }
  main>.panel .foot-tempo button
                               { flex:0 0 auto !important; align-self:center !important; }
}

/* ═══ "CHANGE — WHAT TO PRACTICE" — 2026-08-10 ═══
   FIRST ATTEMPT WAS WRONG AND OVERFLOWED. I put the ♪ in a 44px badge to the
   LEFT of the text. That card is only ~262px wide, so the badge left ~190px
   for the title, which wrapped to 94px tall and pushed the subtitle to
   bottom:146 inside a 120px box — measured scrollHeight 145 vs clientHeight
   118. The subtitle rendered outside the gold border.

   The card is narrow, so the ♪ cannot sit beside the text. It goes back
   inline, on the title's own line, where it reads as part of the sentence
   instead of a stranded glyph floating above it. Sizes chosen to FIT:
   2 title lines (~46px) + 2 sub lines (~32px) + 6px gap = 84px inside 92px
   of usable height. */
@media (min-width:740px) and (min-height:700px){
  main>.panel .va-studio button
                               { display:flex !important; flex-direction:column !important;
                                 align-items:center !important; justify-content:center !important;
                                 gap:6px !important; text-align:center !important;
                                 padding:12px 14px !important;
                                 height:auto !important; min-height:120px !important;
                                 overflow:hidden !important; }
  main>.panel .va-studio .vs-gear
                               { display:inline !important; width:auto !important;
                                 height:auto !important; border:0 !important;
                                 font-size:1em !important; margin-right:8px !important;
                                 opacity:.85 !important; vertical-align:baseline !important; }
  main>.panel .va-studio .vs-title
                               { display:block !important; font-size:19px !important;
                                 line-height:1.2 !important; text-wrap:balance !important;
                                 margin:0 !important; }
  main>.panel .va-studio .vs-sub
                               { display:block !important; font-size:13px !important;
                                 line-height:1.25 !important; opacity:.8 !important;
                                 margin:0 !important; }
}

/* ═══ THE GROUP HEADINGS BREATHE EVENLY — 2026-08-10, Tom ═══
   "FREE — ALWAYS YOURS" and "IF YOU TEACH": the space ABOVE the gold heading
   was larger than the space BELOW the off-white paragraph that follows it, so
   each block sat closer to the module under it than the one over it.

   Measured: .modgroup carries margin 22px top / 10px bottom, and .mg-note (the
   paragraph) only 12px bottom before the next .mod card. 22 above, 12 below.

   A heading belongs to the text beneath it, so the tight gap between heading
   and paragraph is correct and stays. What changes is the OUTER pair: the space
   above the heading and the space below the paragraph are now the same 22px,
   so the whole heading+paragraph unit sits evenly between the two cards.

   Also here: two chips measured 124 against everything else's 120 after the
   studio-CTA rewrite — the row was being stretched again. Pinned. */
@media (min-width:740px) and (min-height:700px){
  #sysOverlay .modgroup        { margin-top:22px !important; margin-bottom:10px !important; }
  #sysOverlay .mg-note         { margin-top:0 !important; margin-bottom:22px !important; }
  /* a heading with no paragraph under it still clears the card below */
  #sysOverlay .modgroup + .mod { margin-top:22px !important; }

  main>.panel .chip            { height:120px !important; }
  main>.panel .va-studio,
  main>.panel .va-studio button{ height:120px !important; }
}

/* ═══ THE STAVE, OPTICALLY CENTRED — 2026-08-10 ═══
   Asked for five times and missed five times, because the wrong thing was
   being measured. Measuring the TOTAL INK of the notation says the staff is
   already fine — in fact 15px HIGH — because the treble clef's tail hangs far
   below the stave and drags the ink's centre downward.

   But the eye does not read the clef's tail. It reads the five stave lines.
   Measured at 1032x1376: the lines sit at y = 197, 215, 232, 250, 268, so
   their centre is 233 against a cream card whose centre is 222.

   The stave is 11px BELOW centre. That is the number, and that is the lift.
   Use the stave lines as the reference for this, never the bounding box. */
@media (min-width:740px) and (min-height:700px){
  #staffwrap svg               { transform:translateY(-11px) !important; }
}

/* ═══ "START OVER" MATCHES "+ ADD AN EXERCISE" — 2026-08-10, Tom ═══
   Measured: both are .tch-2nd, both 76px tall, both 999px radius, both 22px
   type. The only differences were width (904 vs 150) and border colour. So
   they were already the same component wearing two shapes.

   Now the same shape. But the BORDER stays quieter on Start over: it is a
   destructive action, and giving it the gold border would promote it to equal
   footing with the primary "+ Add an exercise" right above it. Same shape,
   lower voice. Tom said he was not 100% sure this was the right choice — if
   the full width reads as too prominent, the revert is one line: put
   `width:auto` back on .tch-2nd:last-of-type.

   Spacing: the two buttons were 8px apart and Start over sat 9px from the
   note under it. Both are 16px now, so the pair reads as one group. */
@media (min-width:740px) and (min-height:700px){
  #teachOverlay .tch-2nd       { display:block !important; width:100% !important;
                                 margin-top:16px !important; margin-bottom:0 !important;
                                 min-height:76px !important; border-radius:999px !important; }
  /* the note beneath the pair keeps the same 16px, so the rhythm is even */
  #teachOverlay .tch-2nd + *   { margin-top:16px !important; }
}

/* ═══ THE GEAR / AMAZON LIST — 2026-08-10, Tom: "I preferred the way the
   Amazon links were before — small thumbnails with the text straight down
   below doesn't look great and it's hard to navigate" ═══
   Measured: .gear-grid is the app's own `repeat(auto-fill, minmax(140px,1fr))`
   with .gear-card as a flex COLUMN. That is a phone grid. On a 1032pt iPad it
   produces six 140px columns with a caption stacked under each thumbnail —
   tiny pictures and a hard-to-scan wall of text. Nothing in this stylesheet
   caused it; it simply was never told about tablets.

   On tablet the card turns on its side: picture left at a readable size, title
   and price to its right, one product per row-ish. Two columns at this width,
   so it stays a browsable list rather than a contact sheet. */
@media (min-width:740px) and (min-height:700px){
  .gear-grid                   { grid-template-columns:repeat(auto-fill,minmax(420px,1fr)) !important;
                                 gap:16px !important; }
  .gear-card                   { flex-direction:row !important; align-items:center !important;
                                 gap:16px !important; padding:14px !important;
                                 text-align:left !important; border-radius:14px !important; }
  .gear-card img               { width:120px !important; height:120px !important;
                                 flex:0 0 120px !important; object-fit:contain !important;
                                 border-radius:10px !important; background:#fff !important; }
  /* everything that is not the picture becomes the text column */
  .gear-card > *:not(img)      { flex:1 1 auto !important; min-width:0 !important;
                                 text-align:left !important; }
  .gear-card a, .gear-card b,
  .gear-card .gear-name        { font-size:18px !important; line-height:1.3 !important; }
  .gear-card small, .gear-card .gear-note
                               { font-size:15px !important; opacity:.8 !important; }
}

/* ═══ THE STANDALONE EXERCISE PAGES FILL THE SCREEN — 2026-08-10, Tom ═══
   Measured on Long Tones at 1032x1376: the content stopped at y=1148 and left
   228px of dead space under the footer, while the swell graphic — the actual
   exercise, the thing you watch while you play — was only 120px tall in a
   968px-wide box. A flat ribbon in an empty page.

   The wrapper now fills the viewport with the footer pushed to the bottom, and
   the swell grows to 240px so the breath shape is the page's centre of gravity
   instead of a hairline. Applies to Long Tones and Vibrato, both of which use
   .wrap + .swellwrap. */
@media (min-width:740px) and (min-height:700px){
  /* CORRECTION: min-height:100dvh on .wrap OVERSHOT — the footer is a SIBLING
     of .wrap, not a child, so a full-viewport .wrap pushed the footer below the
     fold and the page began to scroll (measured docScrollHeight 1492 against a
     1376 viewport). No forced height; the content is grown to fill instead.
     Original content bottom 1148 with a 120px swell → 300px swell lands it at
     ~1330 inside 1376. */
  .swellwrap                   { height:300px !important; }
  .swellwrap svg, .swellwrap canvas
                               { height:300px !important; width:100% !important; }
  body > footer                { padding-top:28px !important; }
  /* the note letter and its concert reading carry the top of the page */
  .wrap .note, .wrap #noteName { line-height:1.05 !important; }
}

/* ═══ VIBRATO: THE FOOTER WAS UNREACHABLE — 2026-08-10 ═══
   Measured at 1032x1376: footer top 1412, i.e. 36px BELOW the fold, on a page
   whose html and body are both overflow:hidden. Privacy and Terms could not be
   reached at all. (Note: scrollHeight reports 1376 and CLIPPED_BY 0 because
   overflow:hidden clamps it — the clipping is invisible to the obvious
   measurement. The footer's own rect is the honest signal.)

   Cause is in this file's own ROUND 2 block: it sets #wave to 260px but never
   touches .wavewrap, which its page caps at 150px. The canvas overflowed its
   parent by ~110px and pushed everything below it off the screen. Exactly the
   wrapper-vs-control mistake this stylesheet has now made three times: size
   the element that owns the box, not just the one you can see.

   Sized together at 200px, which fits the page and still reads as the large
   graphic it is meant to be. */
@media (min-width:740px) and (min-height:700px){
  .wavewrap                    { height:200px !important; overflow:visible !important; }
  .wave, .wave svg, #wave, #waveCanvas
                               { height:200px !important; }

  /* Vibrato's note letter uses clamp(52px,16vw,96px) and this file was forcing
     a blanket 72px — SHRINKING it below its own 96px ceiling. That was a
     regression dressed as a fix. Let the page's clamp win. */
  .noterow .note, .bignote, #noteName
                               { font-size:clamp(52px,16vw,96px) !important; }
}

/* ═══ THE SMALL TEXT ON BOTH EXERCISE PAGES — 2026-08-10, Tom: "this text is
   too small" ═══
   Measured: Long Tones' instruction paragraph .cap — "Start whisper-quiet,
   grow to full…", the largest block of reading text on the page — was running
   at 12px, seven under this file's own 19px floor, because the floor was
   written for .sheet and never reached these pages. 13 rules under 19px on
   Long Tones, 9 on Vibrato, the worst being 11px slider tick labels on
   controls Tom touches mid-practice.

   Dialog text on both pages was also unbeaten: the sheets go wide on iPad but
   their labels stayed at 12-14px. */
@media (min-width:740px) and (min-height:700px){
  .cap, .ends, .timer          { font-size:19px !important; line-height:1.6 !important; }
  .cap                         { max-width:74ch !important; margin-inline:auto !important; }
  .timer                       { font-size:24px !important; }
  .slider .lab, .slider .ticks,
  .slider .ticks *             { font-size:15px !important; }
  .srow .l, .db p, .db li      { font-size:18px !important; line-height:1.6 !important; }
  .sub                         { max-width:none !important; font-size:19px !important; }
  /* segment buttons and the footnote link */
  .seg button, .segrow button,
  a.why, .whylink              { font-size:19px !important; }
}

/* ═══ THE LAST SMALL TEXT, AND VIBRATO'S UNREACHABLE FOOTER ═══
   Measured leaf-node sweep at 1032x1376 — what was still under 15px:
     .staffcard .staffcap span   11px   "Read along · G major" / "A · straight up"
     .playbar .va-reassure     12.5px   "Press ▶ Play — you can't break anything"
     .sheet details summary      14px   "Tonal-center reference chart"
   The 14px .cl / label / .vs-sub values are the deliberate LABEL token and
   stay — they are small caps above a value, not reading text. */
@media (min-width:740px) and (min-height:700px){
  .staffcard .staffcap,
  .staffcard .staffcap span    { font-size:15px !important; letter-spacing:.06em !important; }
  .playbar .va-reassure        { font-size:16px !important; }
  .sheet details > summary     { font-size:18px !important; }
}

/* ═══ VIBRATO MUST BE ABLE TO REACH ITS OWN FOOTER ═══
   Measured: content runs to 1529px in a 1376 viewport, and BOTH html and body
   are overflow:hidden — so Privacy and Terms simply could not be reached. That
   is a store-listing surface, not a nicety.

   Sizing the wave to its parent removed a 110px overflow but did not move the
   footer, because the page is genuinely taller than the screen once the text
   is legible. The answer is not to shrink the text back down — Tom's note this
   session is that it is already too small. The page is allowed to scroll.

   Scoped to the standalone pages by .wavewrap / .swellwrap, so the trainer's
   own no-scroll shell (which needs overflow:hidden for its pinned staff and
   play bar) is untouched. */
@media (min-width:740px) and (min-height:700px){
  html:has(.wavewrap), body:has(.wavewrap),
  html:has(.swellwrap), body:has(.swellwrap)
                               { overflow-y:auto !important; height:auto !important;
                                 min-height:100% !important;
                                 -webkit-overflow-scrolling:touch !important; }
}

/* ═══ THE ARABIC MAQAM MODULE — 2026-08-10, measured on the real surface ═══
   Asked for six times and missed every time, for one reason: the fixes were
   written against class names that do not exist here. The in-app maqam module
   only builds its 22 cards when it is opened from the studio (forcing .show on
   #maqamOverlay yields zero cards), so nobody had ever measured it. Opening it
   by the real click path finally showed the truth:

     the rows are  .maqam-degs > .maqam-deg-row   display:flex, TEXT-ALIGN:CENTER
     the staff box is  .maqam-staff               208px tall, svg 200px

   Earlier passes aimed at .mqdeg, .maqam-degree, .mq-row, .grid7 > .deg and
   .degs .deg — none of which appear in this module. And one earlier attempt put
   display:flex on .maqam-card itself, which turned the whole card into a
   horizontal row of columns and wrecked the page. .maqam-card's own layout is
   NOT touched here. Only the degree rows and the staff's vertical position.

   1. ALIGNMENT. text-align:center is what made each name float to its own
      centre, so the column jittered down the card. A real three-column grid:
      the number, the name and the interval each get a column and one shared
      left edge.

   2. THE STAFF SITS LOW. Measured: stave lines at 815/831/848/865/881, centre
      848, against a .maqam-staff box whose centre is 831. Seventeen pixels low.
      Same lesson as the trainer's staff — measure the five stave lines, never
      the bounding box, because the treble clef's tail drags the box down. */
@media (min-width:740px) and (min-height:700px){
  .maqam-degs .maqam-deg-row   { display:grid !important;
                                 grid-template-columns:40px minmax(0,1fr) auto !important;
                                 align-items:baseline !important;
                                 column-gap:16px !important;
                                 text-align:left !important; }
  .maqam-degs .maqam-deg-row > *              { text-align:left !important; }
  .maqam-degs .maqam-deg-row > *:last-child   { text-align:right !important;
                                                white-space:nowrap !important; }

  .maqam-staff svg             { transform:translateY(-17px) !important; }
}

/* ═══ AIR UNDER THE SHEET HEADER — 2026-08-10, Tom ═══
   "Below where it says Sound / MAJOR SCALES, create some more space and bring
   the whole thing down."
   Measured: the header ends at 124 and the checkbox row starts at 132 — an
   8px gap under a two-line title. The title needs room to read as a title. */
@media (min-width:740px) and (min-height:700px){
  .overlay:not(#payOverlay) .sheet > .sheet-header
                               { margin-bottom:36px !important;
                                 padding-bottom:4px !important; }

  /* the four-checkbox row (Sound · Metronome · Whole & half notes · Drone)
     drops away from the title, and gets its own air before the controls */
  /* The space goes on the ROW BELOW, not on .sheet-header — a margin-bottom on
     the header measured -1px, i.e. it never applied (the header is sticky and
     something else owns its margin). The following row's margin-top does
     apply, verified, so that is where the air lives. */
  .overlay:not(#payOverlay) .sheet > .sheet-header + div
                               { margin-top:26px !important;
                                 margin-bottom:24px !important; }

  /* STRETCH TO THE BOTTOM. Measured: content ended at 1235 in a 1376 viewport,
     leaving ~140px idle under "Back to the main screen". Rather than pad the
     bottom — which just moves the hole — the control rows breathe: row-gap
     16 -> 28 across eight rows spends the space evenly down the page, which
     is also easier to read than eight tightly stacked bars. */
  /* PULLED BACK 2026-08-10, Tom: "that went a little too far — squeeze it a
     teeny bit so there's breathing space between the bottom module and the
     bottom of the screen, and even up the gaps."
     Measured after the first pass: content ran to 1365 of 1376 — 11px, flush.
     One gap value between every row (24), a slightly larger separation before
     Play because it is a different kind of thing, and the whole block ends
     clear of the bottom edge. */
  /* ONE GAP, OWNED BY THE GRID. Measured control-to-control: 42 and 48px
     against a row-gap of 24 — because .sheet .ctl also carries its own
     margin-bottom:18px from earlier in this file, and a grid gap ADDS to a
     margin, it does not replace it. (Third time this stylesheet has hit that:
     the front panel did exactly the same thing.) Margins zeroed, gap 26. */
  /* FINAL VALUE, 2026-08-10. The uneven original measured 42 and 48 between
     controls; evening it to 26 read as too tight to Tom. Midway: 35. */
  .overlay:not(#payOverlay) .sheet .grid2
                               { row-gap:35px !important; }
  .overlay:not(#payOverlay) .sheet .grid2 > *
                               { margin-top:0 !important; margin-bottom:0 !important; }
  .overlay:not(#payOverlay) .sheet > .roomplay
                               { margin-top:30px !important; }
  .overlay:not(#payOverlay) .sheet > .roomback
                               { margin-top:18px !important; margin-bottom:0 !important; }
  /* BREATHING AROUND THE EDGE. With the control gaps evened to 26 the block
     shrank to 1213 of 1376, but it sat flush against the TOP (content top 0)
     with all 163px pooled at the bottom. A little padding at the top and a
     slightly larger control gap spend that evenly, so the sheet sits inside
     the frame instead of being pinned to one edge of it. */
  .overlay:not(#payOverlay) .sheet
                               { padding-top:28px !important; padding-bottom:16px !important; }

  /* ═══ THE NOTE-VALUE GLYPHS — Tom: "they're kind of small" ═══
     Measured markup: .rgrid > button.rbtn, each holding an inline <svg> of the
     note (quarter / eighth / triplet / 16th) plus a .rl caption. The glyph is
     the thing being chosen — a player reads the picture, not the words — so it
     leads at a size you can identify at arm's length. */
  .rgrid .rbtn                 { min-height:104px !important; gap:8px !important;
                                 padding:12px 10px !important; }
  .rgrid .rbtn svg             { width:auto !important; height:44px !important;
                                 display:block !important; margin:0 auto !important; }
  .rgrid .rbtn .rl             { font-size:17px !important; line-height:1.2 !important; }
}

/* ═══ THE NOTE-NAMES STRIP WAS SLICING A ROW — 2026-08-10 ═══
   Seen on a real iPad screenshot, not in any measurement I had run: the strip
   showed one clean row of chips and a second one cut through the middle.
   Measured: .chips max-height 104px against a 76px chip and a 6px gap — 1.27
   rows — with 326px of content behind it and no visible scrollbar. A sliced
   chip reads as broken; a clean edge reads as "there is more, scroll".
   Two full rows: 76 + 6 + 76 = 158. (An earlier reconciliation rule set 164
   but never won the cascade — this one is scoped to beat it.) */
@media (min-width:740px) and (min-height:700px){
  #roomSetup .chips, .sheet .chips, .overlay .chips
                               { max-height:158px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART A — THE PAYWALL FIREWALL. KEEP THIS LAST IN THE FILE, ALWAYS.

   #payOverlay has a documented 2.1(b) rejection history, and index.html
   L846-849 states the standing rule: never move or restyle it. This file
   was reaching inside it in 21 places. Every declaration below re-asserts
   index.html's OWN value verbatim — this block changes nothing about how
   the paywall renders. It only removes this stylesheet from it.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:740px) and (min-height:700px){
  #payOverlay                          { width:auto !important; max-width:none !important; }
  #payOverlay .sheet                   { display:flex !important; flex-direction:column !important;
                                         max-width:520px !important; width:100% !important;
                                         max-height:92vh !important; overflow:hidden !important;
                                         padding:20px 22px 18px !important;
                                         margin-inline:auto !important; font-size:16px !important; }
  #payOverlay .sheet > *               { width:auto !important; max-width:none !important;
                                         grid-column:auto !important; }
  /* THE GUARD: no font size in this stylesheet can reach the paywall — not now,
     and not from any rule added above this block later. */
  #payOverlay *                        { font-size:inherit !important; }
  #payOverlay h3                       { font-size:21px !important; line-height:1.25 !important;
                                         margin:2px 0 12px !important; flex:0 0 auto !important; }
  #payOverlay .kicker                  { font-size:12px !important; letter-spacing:.14em !important;
                                         margin-bottom:6px !important; flex:0 0 auto !important; }
  #payOverlay #payProse                { flex:1 1 auto !important; min-height:0 !important;
                                         overflow-y:auto !important; }
  #payOverlay #payProse p              { font-size:16px !important; line-height:1.6 !important;
                                         margin:0 0 14px !important; max-width:none !important; }
  #payOverlay #payProse p:last-child   { margin-bottom:0 !important; }
  #payOverlay #payPrices               { flex:0 0 auto !important; margin-top:14px !important; }
  #payOverlay #payPrices p             { font-size:16px !important; line-height:1.5 !important;
                                         max-width:none !important; }
  #payOverlay #payGfLine               { flex:0 0 auto !important; font-size:13px !important;
                                         line-height:1.5 !important; max-width:none !important; }
  #payOverlay .close                   { width:auto !important; height:auto !important;
                                         min-height:44px !important; padding:8px 14px !important;
                                         float:none !important; align-self:flex-end !important;
                                         position:static !important; flex:0 0 auto !important; }
  #payOverlay .pay-buy                 { width:100% !important; height:auto !important;
                                         min-height:44px !important; border-radius:999px !important; }
}

/* ---- Tablet/iPad: let sheet content use the width it has -------------------
   Root cause of the narrow-column look on iPad: `.va-sheet > div` is capped at
   560px for phones. On a 1032pt iPad that leaves the wizard stranded in a
   column with two thirds of the screen empty. Widen it above the tablet
   breakpoint only; phones are untouched. 2026-08-13 */
@media (min-width:740px) and (min-height:700px){
  /* centre the sheet in the tall space instead of stranding it at the top */
  .va-sheet.show          { display:flex !important; align-items:center !important;
                            justify-content:center !important; }
  .va-sheet > div         { max-width: 760px !important; width:100% !important; }
  /* keep tiles from becoming wide letterboxes */
  .va-keygrid             { gap: 16px !important; }
  .va-keygrid > *         { min-height: 96px !important; display:flex !important;
                            flex-direction:column !important; align-items:center !important;
                            justify-content:center !important; }
}