/* Folio redesign layer. Every rule is scoped to :root[data-ui="next"], so the classic interface is unchanged.
   Phase 2: shared engraved-page shell over the existing controllers. IDs, data hooks and controllers are untouched. */
:root[data-ui="next"]{
  --folio-paper:#f3f3ee;--folio-sheet:#fbfbf8;--folio-ink:#1d2433;--folio-ink-2:#4d5466;--folio-rule:#c9cbc4;--folio-red:#9c2a2a;--folio-blue:#2b3f7a;--folio-wash:#e8e6da;
  --folio-display:'EB Garamond',Georgia,'Times New Roman',serif;--folio-body:'Spectral',Georgia,'Times New Roman',serif;--folio-sc:'Spectral SC','Spectral',Georgia,serif;
  /* Remap the classic tokens so every component that uses them follows the engraved palette. */
  --paper:var(--folio-paper);--ink:var(--folio-ink);--muted:var(--folio-ink-2);--line:var(--folio-rule);--green:var(--folio-ink);--lime:var(--folio-wash);
  --serif:var(--folio-display);--sans:var(--folio-body);
}
:root[data-ui="next"] body{background:var(--folio-paper);color:var(--folio-ink);font-family:var(--folio-body);font-variant-numeric:lining-nums}
:root[data-ui="next"] h1,:root[data-ui="next"] h2,:root[data-ui="next"] h3{font-variant-numeric:lining-nums}
:root[data-ui="next"] .ui-preview-badge{display:block;width:max-content;margin-left:auto;background:transparent;color:var(--folio-ink);font:italic 400 14px/1.2 var(--folio-body);padding:6px max(16px,env(safe-area-inset-right,0px)) 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;opacity:.75}
:root[data-ui="next"] .ui-preview-badge:hover{opacity:1}
:root[data-ui="next"] .ui-preview-badge:focus-visible{outline:3px solid var(--folio-red);outline-offset:-3px}

/* Running head: brand, then the course as one line of small-capital links. */
:root[data-ui="next"] .topbar{background:var(--folio-paper);border-bottom:1px solid var(--folio-rule);padding-block:10px;min-height:0}
:root[data-ui="next"] .edition{font-family:var(--folio-display);font-style:italic;color:var(--folio-ink-2)}
:root[data-ui="next"] .site-actions a{background:transparent;border-color:var(--folio-rule);color:var(--folio-ink)}
:root[data-ui="next"] .course-nav{display:flex;flex-wrap:wrap;gap:4px 28px;align-items:baseline;padding:8px 42px;background:var(--folio-paper);border-bottom:1px solid var(--folio-rule)}
:root[data-ui="next"] .course-nav a{display:inline-flex;gap:8px;align-items:baseline;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--folio-ink);box-shadow:none}
:root[data-ui="next"] .course-nav strong{font:500 16px/1.3 var(--folio-sc);font-variant-numeric:lining-nums;letter-spacing:.08em}
:root[data-ui="next"] .course-nav small{display:inline;margin:0;font:italic 15px/1.3 var(--folio-body);font-variant-numeric:lining-nums;color:var(--folio-ink-2)}
:root[data-ui="next"] .course-nav a[aria-current]{background:transparent;box-shadow:inset 0 -2px var(--folio-red)}
:root[data-ui="next"] .course-nav a:hover strong{color:var(--folio-blue)}
:root[data-ui="next"] .course-nav a:focus-visible{outline:2px solid var(--folio-red);outline-offset:4px}

/* First-visit tour invitation: one quiet line instead of a banner. */
:root[data-ui="next"] .welcome-tour{max-width:none;margin:0;padding:8px 42px;border:0;border-bottom:1px solid var(--folio-rule);border-radius:0;background:var(--folio-wash);gap:14px}
:root[data-ui="next"] .welcome-tour p{font-size:15px}
:root[data-ui="next"] .welcome-tour strong{display:inline;margin-right:6px}
:root[data-ui="next"] .welcome-tour button{padding:6px 12px;font-size:15px}

/* The rail becomes a narrow left margin: exercise number and the source link stay, ornament goes. */
:root[data-ui="next"] .rail{width:72px;padding-top:28px;border-right:1px solid var(--folio-rule)}
:root[data-ui="next"] .rail-top,:root[data-ui="next"] .rail-label,:root[data-ui="next"] .rail-line,:root[data-ui="next"] .rail .vertical{display:none}
:root[data-ui="next"] .rail-number{font:44px/1 var(--folio-display);font-variant-numeric:lining-nums;margin-top:0}
:root[data-ui="next"] .source-link{margin:24px 0 0;font-size:20px;color:var(--folio-blue)}
:root[data-ui="next"] main{padding-top:24px}

/* Title block: engraved title, key and meter as an italic line. */
:root[data-ui="next"] .intro{align-items:flex-end;border-bottom:1px solid var(--folio-rule);padding-bottom:12px}
:root[data-ui="next"] .intro h1{font:400 clamp(40px,5vw,60px)/1 var(--folio-display);font-variant-numeric:lining-nums;margin:2px 0 4px}
:root[data-ui="next"] .intro .eyebrow{font:500 13px/1.4 var(--folio-sc);font-variant-numeric:lining-nums;letter-spacing:.12em;color:var(--folio-ink-2)}
:root[data-ui="next"] .intro .dek{font-style:italic;color:var(--folio-ink-2);margin:0}
:root[data-ui="next"] .study-meta{display:flex;flex-wrap:wrap;gap:0 14px;justify-content:flex-end}
:root[data-ui="next"] .study-meta span{border:0;background:transparent;padding:0;font:italic 16px/1.5 var(--folio-body);font-variant-numeric:lining-nums;color:var(--folio-ink-2)}

/* Lesson / Practice / Listening: a compact stepper, not a row of cards. */
:root[data-ui="next"] .approaches{display:flex;flex-wrap:wrap;gap:0;border:0;margin:14px 0 10px;background:transparent}
:root[data-ui="next"] .approaches button{flex:0 1 auto;min-height:0;padding:6px 18px 6px 0;margin-right:18px;border:0;border-radius:0;background:transparent;color:var(--folio-ink);box-shadow:none}
:root[data-ui="next"] .approaches button .tab-number{font:400 20px/1 var(--folio-display);font-variant-numeric:lining-nums;color:var(--folio-ink-2)}
:root[data-ui="next"] .approaches button strong{font:500 16px/1.2 var(--folio-sc);font-variant-numeric:lining-nums;letter-spacing:.08em}
:root[data-ui="next"] .approaches button small,:root[data-ui="next"] .approaches .tab-arrow{display:none}
:root[data-ui="next"] .approaches button.active,:root[data-ui="next"] .approaches button[aria-current]{background:transparent;color:var(--folio-ink);box-shadow:inset 0 -2px var(--folio-red)}
:root[data-ui="next"] .approaches button.active *{color:var(--folio-ink)}

/* Unit milestones: one line under the stepper. */
:root[data-ui="next"] .unit-progress{margin:0 0 18px;padding:6px 0;border:0;border-bottom:1px solid var(--folio-rule);border-radius:0;background:transparent;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
:root[data-ui="next"] .unit-progress .unit-heading{display:flex;gap:12px;align-items:baseline}
:root[data-ui="next"] .unit-progress .eyebrow{font:500 12px/1.4 var(--folio-sc);font-variant-numeric:lining-nums;letter-spacing:.1em}
:root[data-ui="next"] .unit-track{margin:0;gap:2px 14px}
:root[data-ui="next"] .unit-track button{padding:2px 0;font-size:15px}
:root[data-ui="next"] .unit-track button span{font-size:16px}

/* Foundations entry on Bass 1: a single line, not a card. */
:root[data-ui="next"] .foundation-entry{padding:8px 0;margin:0 0 12px;border:0;border-bottom:1px solid var(--folio-rule);border-radius:0;background:transparent;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
:root[data-ui="next"] .foundation-entry *{margin:0;font-size:15px}
:root[data-ui="next"] .foundation-entry h2,:root[data-ui="next"] .foundation-entry strong{font:500 15px/1.4 var(--folio-sc);font-variant-numeric:lining-nums;letter-spacing:.08em}

/* Practice stages and lesson sections: a numbered stepper in the running head style. */
:root[data-ui="next"] .practice-path,:root[data-ui="next"] .lesson-path{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 0 14px;border-bottom:1px solid var(--folio-rule)}
:root[data-ui="next"] .practice-path button,:root[data-ui="next"] .lesson-path .path-step{flex:0 1 auto;padding:6px 14px 8px 0;margin-right:10px;border:0;border-radius:0;background:transparent;box-shadow:none;font:500 16px/1.3 var(--folio-body);font-variant-numeric:lining-nums;color:var(--folio-ink)}
:root[data-ui="next"] .practice-path button>span,:root[data-ui="next"] .lesson-path .path-step>span{display:inline;margin:0 6px 0 0;font:400 15px/1 var(--folio-display);font-variant-numeric:lining-nums;color:var(--folio-ink-2)}
:root[data-ui="next"] .practice-path button small,:root[data-ui="next"] .lesson-path .path-step small{display:block;margin:2px 0 0;font:italic 13px/1.3 var(--folio-body);font-variant-numeric:lining-nums;color:var(--folio-ink-2)}
:root[data-ui="next"] .practice-path .active,:root[data-ui="next"] .lesson-path .path-step.active{background:transparent;box-shadow:inset 0 -2px var(--folio-red)}
:root[data-ui="next"] .lesson-path .path-step.completed>span::after{content:" ✓";color:var(--folio-ink)}

/* Workspace: the score sits on a flat sheet; the note editor is an ink slip beside it; the dock is paper with a rule. */
:root[data-ui="next"] .score-card,:root[data-ui="next"] .study-score-panel{background:var(--folio-sheet);border:1px solid var(--folio-rule);border-radius:2px;box-shadow:0 1px 0 var(--folio-rule)}
:root[data-ui="next"] .score-card h2,:root[data-ui="next"] .study-score-panel h2,:root[data-ui="next"] .score-card h3,:root[data-ui="next"] .study-score-panel h3{font-family:var(--folio-display);font-weight:400;font-variant-numeric:lining-nums}
:root[data-ui="next"] .editor,:root[data-ui="next"] #study-editor{background:var(--folio-ink);color:var(--folio-paper);border-radius:2px}
:root[data-ui="next"] .note-entry{background:#262f45;border-color:#59627a;border-radius:2px}
:root[data-ui="next"] .audio-dock,:root[data-ui="next"] .study-player,:root[data-ui="next"] .keyboard-dock{background:var(--folio-paper);border-top:1px solid var(--folio-rule);box-shadow:none}
:root[data-ui="next"] .foundation-player,:root[data-ui="next"] .foundation-player p,:root[data-ui="next"] .foundation-player label{color:var(--folio-ink)}
:root[data-ui="next"] .foundation-player input{accent-color:var(--folio-ink)}
:root[data-ui="next"] .foundation-player .secondary{background:var(--folio-wash);color:var(--folio-ink)}

/* Primary buttons and dark panels take ink instead of green. */
:root[data-ui="next"] button.primary,:root[data-ui="next"] .primary{background:var(--folio-ink);border-color:var(--folio-ink);color:var(--folio-paper)}
:root[data-ui="next"] a{color:var(--folio-blue)}
:root[data-ui="next"] :focus-visible{outline-color:var(--folio-red)}
@media (max-width:760px){
  :root[data-ui="next"] .course-nav,:root[data-ui="next"] .welcome-tour{padding-inline:max(16px,env(safe-area-inset-left,0px))}
  :root[data-ui="next"] .rail{display:none}
  :root[data-ui="next"] .course-nav{gap:2px 16px}
  :root[data-ui="next"] .course-nav small{display:none}
}
/* Connections (preview only): one chord pair per screen, with the question set large and everything else quiet. */
:root[data-ui="next"] .connect{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:14px}
:root[data-ui="next"] .connect-romans{font:400 clamp(56px,9vw,96px)/1 var(--folio-display);text-align:center;margin:4px 0 0;letter-spacing:.03em;color:var(--folio-ink)}
:root[data-ui="next"] .connect-romans i{font-size:.45em;color:var(--folio-ink-2);margin:0 .5em;vertical-align:.35em}
:root[data-ui="next"] .connect .score-card{box-shadow:none}
:root[data-ui="next"] .connect .score-top,:root[data-ui="next"] .connect [data-score-voices],:root[data-ui="next"] .connect .figure-caption{display:none}
:root[data-ui="next"] .connect-question{font:italic 400 clamp(22px,3vw,30px)/1.3 var(--folio-display);text-align:center;margin:8px auto 0;max-width:26ch}
:root[data-ui="next"] .connect-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
:root[data-ui="next"] .connect-actions button{min-width:11rem}
:root[data-ui="next"] .connect-actions kbd{font:500 12px var(--folio-body);border:1px solid currentColor;border-radius:2px;padding:0 5px;margin-left:8px;opacity:.75}
:root[data-ui="next"] .connect-result{text-align:center;font:17px/1.5 var(--folio-body);padding:10px 14px;border-top:1px solid var(--folio-rule);border-bottom:1px solid var(--folio-rule)}
:root[data-ui="next"] .connect-result.incorrect strong{color:var(--folio-red)}
:root[data-ui="next"] .connect-keys{text-align:center;font:italic 13.5px var(--folio-body);color:var(--folio-ink-2);margin:0}
:root[data-ui="next"] .connect-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 0 12px}
:root[data-ui="next"] .connect-dots i{width:6px;height:6px;border-radius:50%;background:var(--folio-rule);display:block}
:root[data-ui="next"] .connect-dots i.done{background:var(--folio-ink)}
:root[data-ui="next"] .connect-dots i.missed{background:var(--folio-red)}
:root[data-ui="next"] .connect-dots i.now{width:22px;border-radius:3px;background:var(--folio-blue)}