/* =========================================================================
   OFIR TAL — MUSIC TOOLS V8
   Editorial warm. Reads like a printed music edition.
   ========================================================================= */

/* Load Alef (Hebrew body) + Work Sans (Latin body) from Google Fonts.
   Importing here instead of per-page <link> so the whole site picks them up
   without touching 76 HTML files. The serif headlines (Fraunces / Frank Ruhl
   Libre) still come in via the per-page <link> on each page. */
@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Light theme (default). Readability pass 2026-06-13: lighter paper, darker
     ink, lighter rules, larger body — keep the warm-library identity but get
     the contrast and breathing room of a cleaner site. Variables structured
     so a future dark theme is just a single overriding block. */
  --paper:        #FCF9F0;     /* near-neutral warm white — less yellow */
  --paper-tint:   #F6F1E2;     /* card backgrounds, very subtle now */
  --paper-deep:   #EDE4CD;     /* deepest warm tint, used sparingly */
  --ink:          #1A1612;     /* darker warm near-black */
  --ink-soft:     #4A3920;     /* deeper warm brown */
  --ink-mute:     #8A7456;     /* tertiary — softer so it recedes */
  --gold:         #B8851A;     /* the brand mark — kept for active states only */
  --gold-soft:    #D4A943;     /* lighter gold for accents */
  --rule:         #E8DCC2;     /* MUCH softer rules — was #D9C9A8 */
  --burgundy:     #7A2E2E;     /* secondary accent for AHA — unchanged */
  --teal:         #2E5F5C;     /* secondary accent for theory — unchanged */

  --max:          1180px;
  --read:         720px;       /* readable column width */

  --serif:        'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:         'Work Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif-he:     'Frank Ruhl Libre', 'David Libre', serif;
  --sans-he:      'Alef', 'Heebo', 'Assistant', sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* Base size sets the scale for everything downstream — clamp() on h1/h2 and
   .lead is anchored to rem, so bumping html font-size grows the whole page
   proportionally. 19px reads noticeably bigger on phone + desktop without
   crashing the layout. */
html { font-size: 19px; scroll-behavior: smooth; }      /* 17 → 18 → 19 */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: 'kern', 'liga', 'onum';
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Hebrew gets a hair of positive tracking — Alef's default kerning is tight
   at body weight, and a touch (0.01em) opens it up without breaking word
   shapes. Latin body stays at 0 (Work Sans optical at 19px is fine). */
body[lang="he"] { font-family: var(--sans-he); line-height: 1.8; letter-spacing: 0.01em; }
body[lang="he"] h1, body[lang="he"] h2, body[lang="he"] .display, body[lang="he"] .answer {
  font-family: var(--serif-he);
}

/* ---------- typography ---------- */
h1, h2, h3, .display { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; margin: 0 0 0.4em; font-weight: 500; }
h2 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 0.5em; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 0 0 0.4em; font-weight: 600; letter-spacing: 0.01em; }
p  { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }
.lead { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; color: var(--ink-soft); max-width: var(--read); font-style: italic; font-weight: 400; }
/* Eyebrow no longer shouts in gold caps. Becomes a quiet meta-label in
   ink-mute brown — visible but not competing with the headline below it. */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-mute);
}
body[lang="he"] .eyebrow { letter-spacing: 0.06em; }
.muted { color: var(--ink-mute); font-size: 0.93em; }
.small { font-size: 0.88rem; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }

/* ---------- header / nav ---------- */
header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 30;
}
nav {
  max-width: var(--max); margin: auto;
  padding: 14px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.brand {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.01em;
}
.brand .mark { color: var(--gold); font-style: italic; }
body[lang="he"] .brand { font-family: var(--serif-he); }
/* Brand + current-page crumb sit together in a single flex group so the
   nav's space-between layout keeps pushing the .links row to the far edge.
   The crumb shows the menu label of the current page, pinned in the sticky
   header — at-a-glance "where you are" without opening the mobile nav. */
.title-block { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.page-crumb {
  font-family: var(--serif); font-weight: 500;
  font-size: 1rem;
  color: var(--gold);
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 30ch;
}
body[lang="he"] .page-crumb { font-family: var(--serif-he); }
@media (max-width: 760px) {
  .title-block { gap: 8px; }
  .page-crumb { font-size: 0.92rem; padding-inline-start: 10px; max-width: 18ch; }
}
.links {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.links a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 7px 11px;
  border-radius: 4px;
  font-size: 0.88rem;
  transition: color .15s, background .15s;
}
.links a:hover { color: var(--ink); background: var(--paper-tint); }
.links a.active { color: var(--gold); background: var(--paper-tint); font-weight: 600; }
.links .lang-switch {
  border-inline-start: 1px solid var(--rule);
  margin-inline-start: 6px;
  padding-inline-start: 14px;
  font-style: italic;
}

/* Header language toggle — injected by app.js. Sits pinned at the header's
   inline-end on every page and viewport, so a visitor on the "wrong"
   language always sees the way out (the in-menu .lang-switch stays too). */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: auto;
  padding: 5px 12px;
  border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.85rem; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--gold-soft); background: var(--paper-tint); }
.lang-toggle .lt-short { display: none; }
@media (max-width: 480px) {
  .lang-toggle .lt-full { display: none; }
  .lang-toggle .lt-short { display: inline; }
  .page-crumb { max-width: 10ch; }
}

/* Hamburger toggle — injected by app.js so we don't have to touch every
   page's nav HTML. Hidden on desktop; shown on mobile where the dense
   30+-link nav wraps into too many rows otherwise. */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: inherit; font-size: 0.85rem;
  color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--paper-tint); }
.nav-toggle .nt-bar {
  display: block; width: 16px; height: 2px; background: currentColor;
  margin: 2px 0; transition: transform .2s, opacity .2s;
}

@media (max-width: 760px) {
  nav { padding: 10px 16px; gap: 8px; }
  .nav-toggle { display: inline-flex; flex-direction: column; }
  /* Mobile: collapse the link row behind the hamburger by default */
  .links {
    display: none;
    flex-basis: 100%;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    margin-top: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
  }
  /* When the menu is open on mobile, lift it out of the document flow so it
     can be tall without pushing the page down, and give it its own scroll
     container so touch-dragging scrolls THE MENU, not the page underneath.
     The list itself uses a CSS-grid with auto-fill columns so we get 2-3
     columns on a phone instead of one tall column where each Hebrew word
     eats the whole width. overscroll-behavior contains the rubber-band. */
  body.nav-open { overflow: hidden; touch-action: none; }
  body.nav-open .links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-content: start;
    gap: 4px 6px;
    position: fixed;
    top: 56px;
    left: 0; right: 0;
    bottom: 0;
    max-height: calc(100dvh - 56px);
    margin: 0;
    padding: 12px 14px 32px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 19;
  }
  .links a {
    padding: 9px 10px;
    font-size: 0.88rem;
    border-radius: 4px;
    text-align: center;
    line-height: 1.15;
    background: var(--paper-tint);
  }
  .links a.active { background: var(--paper-deep); color: var(--gold); font-weight: 600; }
  /* The lang-switch needs to break the grid flow so it sits on its own row,
     not as a sibling tile sized like a tool link. */
  body.nav-open .links .lang-switch {
    grid-column: 1 / -1;
    margin-top: 8px;
    text-align: center;
    border-top: 1px solid var(--rule);
    padding-top: 12px;
    background: transparent;
    font-style: italic;
  }
  .links .lang-switch {
    border-inline-start: none;
    border-top: 1px solid var(--rule);
    margin-inline-start: 0;
    margin-top: 6px;
    padding-top: 8px;
    padding-inline-start: 12px;
  }
  main { padding: 28px 18px 80px; }
  .hero { padding: 18px 0 22px; margin-bottom: 24px; }
}

/* ---------- main ---------- */
main { max-width: var(--max); margin: auto; padding: 48px 28px 100px; }
.hero { padding: 32px 0 36px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; }
.hero h1 { max-width: 14ch; }
.section { margin: 32px 0; }
.section + .section { margin-top: 40px; }

/* ---------- cards & panels ---------- */
.card {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 26px 28px;
}
.card.warm    { background: linear-gradient(180deg, #F8E9C0 0%, #F0DFA5 100%); border-color: #D9BD78; }
.card.theory  { background: var(--paper-tint); border-inline-start: 3px solid var(--teal); }
.card.practice{ background: var(--paper-tint); border-inline-start: 3px solid var(--gold); }
.card.aha {
  background: linear-gradient(180deg, #F5E1D5 0%, #EFD2BF 100%);
  border: 1px solid #D9A988;
  border-inline-start: 4px solid var(--burgundy);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--ink);
}
body[lang="he"] .card.aha { font-family: var(--serif-he); }
.card .stage {
  font-family: var(--sans);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 14px;
  display: block;
}
.card.aha .stage { color: var(--burgundy); }
.card.theory .stage { color: var(--teal); }

/* ---------- the flow grid (Quick → See → Theory → Practice → AHA) ---------- */
.flow {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.flow > .quick     { grid-column: 1 / -1; }
.flow > .see       { grid-column: 1 / -1; }
.flow > .theory    { grid-column: 1; }
.flow > .practice  { grid-column: 2; }
.flow > .aha       { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow > * { grid-column: 1 !important; }
}

/* ---------- big answer typography ---------- */
.answer {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.answer .accidental { font-feature-settings: 'sups' 1; }
.scale-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 500;
}

/* ---------- chord choice grid ---------- */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin: 0 0 28px;
}
.choices button {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 10px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink);
  text-align: center;
  transition: all .12s ease;
  line-height: 1.1;
}
.choices button small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
body[lang="he"] .choices button small { font-family: var(--sans-he); }
.choices button:hover { border-color: var(--gold-soft); background: var(--paper-deep); }
.choices button.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.choices button.active small { color: var(--gold-soft); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.control-group { display: flex; flex-direction: column; gap: 6px; margin: 0 18px 14px 0; }
.control-group label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft, #888); text-transform: uppercase; }
.controls { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.lead-block { margin-bottom: 12px; }
.toolbar select, .toolbar input, select, input[type="text"], input[type="search"], input[type="number"] {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  min-height: 40px;
}
body[lang="he"] .toolbar select, body[lang="he"] .toolbar input { font-family: var(--sans-he); }
.toolbar select:focus, .toolbar input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); font-weight: 600; }

/* ---------- buttons / CTA ---------- */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  transition: background .15s;
}
body[lang="he"] .btn { font-family: var(--sans-he); }
.btn:hover { background: var(--ink-soft); }
.btn.gold { background: var(--gold); color: var(--paper); }
.btn.gold:hover { background: var(--ink); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn.ghost:hover { background: var(--paper-tint); border-color: var(--ink); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- notation block ---------- */
.notation {
  background: #FFFCF5;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 12px 6px;
  margin: 0 0 14px;
  text-align: center;
  overflow-x: auto;
}
.notation svg { max-width: 100%; height: auto; }
.notation .caption {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-align: center;
  margin: 4px 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- spelling table ---------- */
.spelling {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 14px 0;
  font-size: 0.95rem;
}
.spelling dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 600;
  padding-top: 3px;
}
.spelling dd { margin: 0; font-family: var(--serif); font-size: 1.1rem; }
.spelling dd .alt { color: var(--ink-mute); font-size: 0.92rem; font-style: italic; margin-inline-start: 8px; }

/* ---------- voicing block ---------- */
.voicing {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px 14px;
  font-size: 0.98rem;
  margin: 8px 0;
}
.voicing .hand {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 700;
  padding-top: 4px;
}
.voicing .notes { font-family: var(--serif); font-size: 1.1rem; }

/* ---------- generic grid layouts ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- hub tool grid ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.tool-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px 26px;
  transition: all .18s ease;
  position: relative;
}
.tool-card:hover {
  background: var(--paper-deep);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
}
.tool-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.tool-card h2 {
  margin: 4px 0 8px;
  color: var(--ink);
}
.tool-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ---------- Today on the Academy — daily rotating picks ---------- */
.today-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px 22px;
  transition: all .18s ease;
}
.today-card:hover {
  border-color: var(--gold-soft);
  background: var(--paper-tint);
  transform: translateY(-2px);
}
.today-card .stage {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.today-card h3 {
  margin: 6px 0 4px;
  font-size: 1.25rem;
  color: var(--ink);
}
.today-card p:last-child {
  margin-top: 12px;
  color: var(--gold);
  font-weight: 500;
  font-size: 0.92rem;
}
/* News variant — quiet left/right accent so it visually says "outside link" */
.today-card--news { border-left: 3px solid var(--gold); }
[dir="rtl"] .today-card--news { border-left: 1px solid var(--rule); border-right: 3px solid var(--gold); }

/* Static (non-link) variant — for On This Day, no hover lift */
.today-card--static { cursor: default; }
.today-card--static:hover {
  border-color: var(--rule);
  background: var(--paper);
  transform: none;
}
.today-card--static p:last-child {
  color: var(--ink-soft);
  font-weight: 400;
  font-style: italic;
}

/* Tip of the day — quiet banner below the daily cards */
.tip-banner {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--paper-tint);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tip-banner:empty { display: none; }
.tip-banner .tip-stage {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
[dir="rtl"] .tip-banner {
  border-left: none;
  border-right: 3px solid var(--gold);
  border-radius: 4px 0 0 4px;
}

/* Path splash — front-door promotion of the numbered learning trail */
.path-splash {
  display: block;
  padding: 26px 28px;
  background: linear-gradient(135deg, var(--paper-tint) 0%, #fff 100%);
  border: 1px solid var(--gold);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
}
.path-splash:hover {
  box-shadow: 0 6px 20px rgba(177,138,58,0.18);
  transform: translateY(-1px);
}
.path-splash-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.path-splash-title {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 4px 0 8px;
  color: var(--ink);
}
.path-splash-lead {
  color: var(--ink-soft);
  margin: 0 0 12px;
  max-width: 62ch;
  line-height: 1.5;
}
.path-splash-cta {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.02em;
}
[dir="rtl"] .path-splash {
  background: linear-gradient(225deg, var(--paper-tint) 0%, #fff 100%);
}

/* Profile-driven dispatch card — the onboarding survey actually shaping the visit */
.profile-dispatch {
  margin: 0 0 20px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  background: var(--paper-tint);
}
[dir="rtl"] .profile-dispatch {
  border-left: 1px solid var(--rule);
  border-right: 4px solid var(--gold);
}
.dispatch-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.dispatch-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 4px 0 8px;
  color: var(--ink);
}
.dispatch-lead {
  color: var(--ink-soft);
  margin: 0 0 12px;
  max-width: 62ch;
  line-height: 1.5;
}
.dispatch-links {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.dispatch-link {
  display: inline-block;
  padding: 6px 12px;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  text-decoration: none;
  background: #fff;
  transition: background 0.12s ease, color 0.12s ease;
}
.dispatch-link:hover {
  background: var(--gold);
  color: #fff;
}

/* ---------- "Book Ofir" CTA — harvest layer, tasteful ---------- */
.booking-cta {
  background: linear-gradient(135deg, var(--paper-tint) 0%, var(--paper) 100%);
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  margin-top: 32px;
}
[lang="he"] .booking-cta,
[dir="rtl"] .booking-cta {
  border-left: 1px solid var(--gold-soft);
  border-right: 3px solid var(--gold);
}
.booking-cta .stage {
  color: var(--gold);
  font-style: italic;
}
.booking-cta h3 {
  margin: 4px 0 8px;
  color: var(--ink);
}

/* ---------- "Read further" — canonical book references per tool ---------- */
.further-reading-block {
  border-top: 2px solid var(--gold-soft);
  background: var(--paper);
}
.further-reading-block .stage {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 0.85rem;
}
.further-reading-block ul {
  list-style: '— ';
  list-style-position: outside;
}
.further-reading-block li {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------- why learn this — pedagogy framing block ---------- */
.why-learn-block {
  background: var(--paper-tint);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  margin: 0 0 28px;
  border-radius: 0 4px 4px 0;
}
[lang="he"] .why-learn-block,
[dir="rtl"] .why-learn-block {
  border-left: 0;
  border-right: 3px solid var(--gold);
  border-radius: 4px 0 0 4px;
}
.why-learn-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.why-learn-block p {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- main keyboard frame (one per tool page) ----------
   Sticky positioning is applied to #main-kb (the wrapper) so that
   sticky bounds = parent <main>, which IS the whole tool page. If
   sticky lived on .main-kb-frame, its parent #main-kb would be only
   as tall as the keyboard itself and sticky would have no room to
   stick within it. */
#main-kb {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  padding-top: 8px;
}
.main-kb-frame {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.main-kb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.main-kb-label {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.main-kb-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.main-kb-voice { display: flex; align-items: center; gap: 6px; }
.main-kb-voice-label { font-size: 0.85rem; color: var(--ink-soft); }
.main-kb-voice select {
  font: inherit; font-size: 0.9rem;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
}
.main-kb-kb { width: 100%; }

/* Instrument tabs in the keyboard header — Piano / Guitar / Bass / Ukulele */
.main-kb-inst-row {
  display: flex;
  gap: 2px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px;
}
.main-kb-inst {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: all .12s ease;
}
.main-kb-inst:hover { color: var(--ink); }
.main-kb-inst.active {
  background: var(--gold);
  color: var(--paper);
}

/* Collapse button */
.main-kb-collapse {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 26px; height: 26px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.main-kb-collapse:hover { color: var(--gold); border-color: var(--gold-soft); }
.main-kb-frame.is-collapsed { padding: 8px 16px; }
.main-kb-frame.is-collapsed .main-kb-kb { display: none; }

/* Fretboard (when user picks guitar/bass/ukulele) */
.main-fb-svg { background: transparent; }
.main-fb-svg .main-fb-string { stroke: var(--ink-soft); stroke-width: 1; }
.main-fb-svg .main-fb-string-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; fill: var(--ink-soft);
}
.main-fb-svg .main-fb-dot { fill: var(--gold); stroke: var(--gold); }
.main-fb-svg .main-fb-fret {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; fill: var(--paper); font-weight: 600;
}
.main-fb-svg .main-fb-notename {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; fill: var(--paper); font-weight: 600;
}
.main-fb-svg .main-fb-nut { stroke: var(--ink); stroke-width: 3; }
.main-fb-svg .main-fb-fret-line { stroke: var(--ink-mute); stroke-width: 0.6; }
.main-fb-svg .main-fb-inlay { fill: var(--ink-mute); opacity: 0.55; }
.main-fb-svg .main-fb-fretnum {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px; fill: var(--ink-mute);
}
.main-fb-svg .main-fb-cell { transition: fill .15s ease; }
.main-fb-svg .main-fb-cell:hover { fill: rgba(177, 138, 58, 0.12); }

@media (max-width: 760px) {
  /* Compact the whole keyboard panel on mobile. The frame's chrome (header,
     instrument tabs, voice selector, collapse) costs as much real estate as
     the keys themselves — shrink padding, font-sizes, and gaps so the panel
     reads as a tool, not as the page hero. */
  .main-kb-frame { position: static; padding: 6px 10px; }
  .main-kb-header { gap: 6px; margin-bottom: 4px; }
  .main-kb-label { font-size: 0.92rem; flex-basis: auto; }
  .main-kb-inst-row { width: 100%; gap: 2px; margin-top: 4px; }
  .main-kb-inst { flex: 1; padding: 4px 6px; font-size: 0.78rem; }
  .main-kb-controls { gap: 6px; }
  .main-kb-voice select { font-size: 0.82rem; padding: 2px 6px; }
  .main-kb-collapse { padding: 2px 8px; font-size: 0.75rem; }
  /* If the keyboard's natural width is wider than the screen (multi-octave
     chord / scale demos), let the user scroll it horizontally instead of
     squashing every key into a sliver. The SVG stays its native size; the
     wrapper handles the overflow. */
  .main-kb-kb { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .main-kb-kb svg { display: block; }
}

/* ---------- hub stats banner ---------- */
.hub-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.hub-stats span { display: inline-flex; align-items: baseline; gap: 6px; }
.hub-stats strong {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* ---------- hub mode toggle (Learn / Tools) ---------- */
.hub-mode-toggle {
  display: inline-flex;
  gap: 0;
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  background: var(--paper-tint);
}
.hub-mode-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.hub-mode-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}
.hub-mode-toggle button:hover:not(.active) { color: var(--ink); }

/* ---------- hub section headers (visible in Learn mode) ---------- */
.tool-grid .section-header {
  grid-column: 1 / -1;
  margin: 8px 0 -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.tool-grid .section-header:first-child { margin-top: 0; }
.tool-grid .section-header h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
}
.tool-grid .section-header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Tools mode: hide headers, reorder cards back to 01..18 */
body.hub-tools .tool-grid .section-header { display: none; }
body.hub-tools .tool-card[data-num="01"] { order: 1; }
body.hub-tools .tool-card[data-num="02"] { order: 2; }
body.hub-tools .tool-card[data-num="03"] { order: 3; }
body.hub-tools .tool-card[data-num="04"] { order: 4; }
body.hub-tools .tool-card[data-num="05"] { order: 5; }
body.hub-tools .tool-card[data-num="06"] { order: 6; }
body.hub-tools .tool-card[data-num="07"] { order: 7; }
body.hub-tools .tool-card[data-num="08"] { order: 8; }
body.hub-tools .tool-card[data-num="09"] { order: 9; }
body.hub-tools .tool-card[data-num="10"] { order: 10; }
body.hub-tools .tool-card[data-num="11"] { order: 11; }
body.hub-tools .tool-card[data-num="12"] { order: 12; }
body.hub-tools .tool-card[data-num="13"] { order: 13; }
body.hub-tools .tool-card[data-num="14"] { order: 14; }
body.hub-tools .tool-card[data-num="15"] { order: 15; }
body.hub-tools .tool-card[data-num="16"] { order: 16; }
body.hub-tools .tool-card[data-num="17"] { order: 17; }
body.hub-tools .tool-card[data-num="18"] { order: 18; }
body.hub-tools .tool-card[data-num="19"] { order: 19; }
body.hub-tools .tool-card[data-num="20"] { order: 20; }
body.hub-tools .tool-card[data-num="21"] { order: 21; }
body.hub-tools .tool-card[data-num="22"] { order: 22; }
body.hub-tools .tool-card[data-num="23"] { order: 23; }
body.hub-tools .tool-card[data-num="24"] { order: 24; }
body.hub-tools .tool-card[data-num="25"] { order: 25; }

/* grid-4 for small chord-progression rendering (4 chords per row) */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }

/* ---------- standards / albums list ---------- */
.list-item {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 22px;
  cursor: pointer;
  transition: all .12s;
}
.list-item:hover { background: var(--paper-deep); border-color: var(--gold-soft); }
.list-item h3 { margin: 0 0 6px; }
.list-item .meta { font-size: 0.85rem; color: var(--ink-mute); }
.list-item .pills { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- footer ---------- */
footer {
  max-width: var(--max);
  margin: 80px auto 0;
  padding: 32px 28px 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-size: 0.88rem;
}
footer a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); }
footer a:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ---------- event-fit CTA ---------- */
.cta-block {
  background: linear-gradient(180deg, #F0E2C9 0%, #E8D6B0 100%);
  border: 1px solid #D9BD78;
  border-radius: 6px;
  padding: 32px 30px;
  margin-top: 32px;
  text-align: center;
}
.cta-block h2 { font-style: italic; max-width: 28ch; margin: 0 auto 12px; }
.cta-block p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 18px; }

/* ---------- metronome ---------- */
.metro {
  text-align: center;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 36px 24px;
}
.metro .bpm-display {
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin: 8px 0;
}
.metro .pulse {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper-deep);
  margin: 18px auto;
  transition: background .06s, transform .06s;
}
.metro .pulse.on { background: var(--gold); transform: scale(1.4); }

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .links a { font-family: var(--sans-he); }
[dir="rtl"] .pill { letter-spacing: 0; }
[dir="rtl"] .eyebrow { letter-spacing: 0.06em; }

/* ---------- Studio page — tuner + dB meter ---------- */
.studio-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.studio-tab {
  background: none; border: none; padding: 10px 18px; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: var(--ink-soft);
  border-bottom: 2px solid transparent; transition: all .15s ease;
}
.studio-tab:hover { color: var(--ink); }
.studio-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Tuner */
.tuner-display { padding: 18px 0; }
.tuner-note {
  font-family: var(--serif);
  font-size: 5rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 8px 0 22px;
}
.tuner-cents-bar { max-width: 360px; margin: 0 auto 18px; }
.tuner-cents-track {
  position: relative;
  height: 8px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.tuner-cents-track::before {
  content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 14px;
  background: var(--ink-mute); transform: translateX(-50%);
}
.tuner-cents-marker {
  position: absolute; top: -4px; width: 14px; height: 16px;
  background: var(--gold); border-radius: 3px;
  transform: translateX(-50%); transition: left .08s linear;
  left: 50%;
}
.tuner-cents-marker.close { background: #d4a64e; }
.tuner-cents-marker.in-tune { background: #6aa84f; }
.tuner-cents-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem; color: var(--ink-mute);
}
.tuner-readout {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px; max-width: 460px; margin: 0 auto;
  text-align: center;
}
.tuner-readout > div > div {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.1rem; color: var(--ink); margin-top: 2px;
}
.tuner-readout select {
  font-family: inherit; font-size: 0.95rem;
  padding: 4px 8px;
  border: 1px solid var(--rule); background: var(--paper); border-radius: 3px;
}

/* dB meter */
.meter-display { padding: 18px 0; display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 480px) { .meter-display { grid-template-columns: 60px 1fr; gap: 18px; } }
.meter-bar {
  position: relative;
  width: 100%;
  height: 280px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.meter-zones {
  position: absolute; inset: 0; display: flex; flex-direction: column-reverse;
  pointer-events: none;
}
.meter-zone { flex: 1; opacity: 0.08; }
.meter-zone.safe    { background: #6aa84f; flex-basis: 62%; }
.meter-zone.caution { background: #d4a64e; flex-basis: 13%; }
.meter-zone.loud    { background: #c0392b; flex-basis: 25%; }
.meter-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--gold);
  transition: height .08s linear;
  height: 0%;
}
.meter-fill.safe    { background: #6aa84f; }
.meter-fill.caution { background: #d4a64e; }
.meter-fill.loud    { background: #c0392b; }
.meter-peak {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--ink);
  bottom: 0%; transition: bottom .15s ease-out;
}
.meter-readout > div { margin: 14px 0; }
.meter-readout > div > div {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.3rem; color: var(--ink); margin-top: 2px;
}

/* ---------- Drum pattern grid — visual "where the hits go" ---------- */
.drum-grid-block { margin: 12px 0; }
.drum-grid-svg { max-width: 460px; width: 100%; height: auto; }
.drum-grid-svg .drum-row-label {
  font-family: var(--serif); font-style: italic;
  font-size: 9px; fill: var(--gold);
}
.drum-grid-svg .drum-row-line { stroke: var(--rule); stroke-width: 0.6; }
.drum-grid-svg .drum-beat-divider { stroke: var(--ink-mute); stroke-width: 0.6; stroke-dasharray: 1 2; }
.drum-grid-svg .drum-beat-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px; fill: var(--ink-mute);
}
.drum-grid-svg .drum-sub-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 6px; fill: var(--ink-mute);
}
.drum-grid-svg .drum-x {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; fill: var(--ink); font-weight: 600;
}
.drum-grid-svg .drum-hit { fill: var(--gold); }
.drum-grid-svg .drum-hit.kick { fill: var(--ink); }

/* ---------- Brass + winds fingering charts ---------- */
.fingering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.fingering-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px;
  text-align: center;
}
.fingering-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 6px;
}
.fingering-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 4px;
}
/* Trumpet — 3D valve appearance */
.fingering-svg .valve-case { fill: var(--paper-tint); stroke: var(--ink-soft); stroke-width: 1; }
.fingering-svg .valve-cap  { fill: var(--ink-soft); stroke: var(--ink); stroke-width: 0.5; }
.fingering-svg .valve-btn  { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.2; transition: cy .12s ease; }
.fingering-svg .valve-btn.pressed { fill: var(--gold); stroke: var(--gold); }
.fingering-svg .valve-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  fill: var(--ink-soft);
  font-weight: 600;
}

/* Trombone — bell + parallel slide tubes + slide stop */
.fingering-svg .trombone-bell { fill: var(--paper-tint); stroke: var(--ink-soft); stroke-width: 1.2; }
.fingering-svg .slide-tube { stroke: var(--ink-soft); stroke-width: 1.5; }
.fingering-svg .slide-tube-thick { stroke: var(--ink-soft); stroke-width: 2.5; }
.fingering-svg .slide-stop { fill: var(--gold); stroke: var(--ink); stroke-width: 1; }
.fingering-svg .slide-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  fill: var(--ink-mute);
}
.fingering-svg .slide-label.active { fill: var(--gold); font-weight: 600; font-size: 12px; }
.fingering-svg .sax-body { stroke: var(--ink-soft); stroke-width: 2; }
.fingering-svg .pearl {
  fill: var(--paper);
  stroke: var(--ink-soft);
  stroke-width: 1;
}
.fingering-svg .pearl.pressed {
  fill: var(--gold);
  stroke: var(--gold);
}
.fingering-svg .pearl-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 7px;
  fill: var(--ink-soft);
}

/* Fingerings — mode toggle + compare view */
.fingering-mode-toggle { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; padding-bottom: 6px; }
.fingering-mode-toggle .btn { border: none; background: transparent; padding: 8px 14px; }
.fingering-mode-toggle .btn.active { border-bottom: 2px solid var(--gold); color: var(--gold); }
.fingering-count-toggle { display: flex; align-items: center; gap: 6px; margin: 6px 0 14px; }
.fingering-count-toggle .btn { padding: 4px 12px; min-width: 32px; }
.fingering-count-toggle .btn.active { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.fingering-compare {
  display: grid;
  gap: 14px;
}
.fingering-compare-1 { grid-template-columns: minmax(280px, 480px); justify-content: center; }
.fingering-compare-2 { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.fingering-compare-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.fingering-compare-4 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
@media (min-width: 1100px) {
  .fingering-compare-4 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}
@media (max-width: 640px) {
  .fingering-compare-2, .fingering-compare-3, .fingering-compare-4 { grid-template-columns: 1fr; }
}
.fingering-compare-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px;
}
.fingering-compare-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fingering-inst-sel {
  flex: 1;
  font-family: inherit; font-size: 0.92rem;
  padding: 5px 8px;
  border: 1px solid var(--rule); background: var(--paper); border-radius: 3px;
}
.note-picker { margin: 10px 0; }
.note-picker-label {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 6px 0 4px;
}
.note-picker-row { display: flex; flex-wrap: wrap; gap: 3px; }
.note-btn {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  min-width: 26px;
  transition: all .12s ease;
}
.note-btn:hover { border-color: var(--gold-soft); color: var(--ink); }
.note-btn.active {
  background: var(--gold); color: var(--paper); border-color: var(--gold);
}
.fingering-result {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.fingering-out {
  text-align: center;
  padding: 30px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Tuner — instrument modes + waveform */
.tuner-mode-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; justify-content: center; }
.tuner-mode-btn {
  font-family: inherit; font-size: 0.88rem;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .12s ease;
}
.tuner-mode-btn:hover { border-color: var(--gold-soft); }
.tuner-mode-btn.active {
  background: var(--gold); color: var(--paper); border-color: var(--gold);
}
.tuner-strings {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 14px 0;
}
.tuner-string-pill {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 4px;
  color: var(--ink-soft);
  min-width: 56px;
  text-align: center;
  transition: all .15s ease;
}
.tuner-string-pill.active {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}
.tuner-string-pill.in-tune {
  background: #6aa84f;
  color: var(--paper);
  border-color: #6aa84f;
}
.tuner-wave {
  width: 100%;
  max-width: 360px;
  height: 60px;
  margin: 12px auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-tint);
  display: block;
}
.tuner-wave-line { stroke: var(--gold); stroke-width: 1.5; fill: none; }
.tuner-wave-axis { stroke: var(--ink-mute); stroke-width: 0.5; stroke-dasharray: 2 3; }

/* ---------- Tabs — guitar / bass / ukulele rendering ---------- */
.tab-block { margin: 8px 0; }
.tab-block .tab-cell { margin: 14px 0; }
.tab-block .tab-cell h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gold);
  margin: 0 0 6px;
}
.tab-svg { width: 100%; height: auto; }
.tab-svg .tab-fret-bg {
  fill: var(--paper);
  stroke: var(--rule);
  stroke-width: 0.5;
}
.tab-svg .tab-fret-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  fill: var(--gold);
  font-weight: 600;
}
.tab-svg .tab-fret-line { stroke: var(--rule); stroke-width: 0.4; opacity: 0.55; }
.tab-svg .tab-beat-line { stroke: var(--rule); stroke-width: 0.9; opacity: 0.9; }
.tab-svg .tab-stem { stroke: var(--ink-soft); stroke-width: 0.9; }
.tab-svg .tab-beam { stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Chord fretboards (horizontal, like main-kb fretboard) ---------- */
.chord-fb-svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 4px;
  display: block;
}
.chord-fb-svg .chord-fb-title {
  font-family: var(--serif);
  font-size: 10px;
  fill: var(--ink);
  font-style: italic;
}
.chord-fb-svg .chord-fb-nut { stroke: var(--ink); stroke-width: 2.5; }
.chord-fb-svg .chord-fb-fret-line { stroke: var(--ink-soft); stroke-width: 1.1; opacity: 0.75; }
.chord-fb-svg .chord-fb-string { stroke: var(--ink-soft); stroke-width: 0.9; }
.chord-fb-svg .chord-fb-string-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; fill: var(--ink-soft);
}
.chord-fb-svg .chord-fb-inlay { fill: var(--ink-mute); opacity: 0.5; }
.chord-fb-svg .chord-fb-fretnum {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 7px; fill: var(--ink-mute);
}
.chord-fb-svg .chord-fb-dot { fill: var(--gold); stroke: var(--gold); }
.chord-fb-svg .chord-fb-dot-open { fill: var(--paper); stroke: var(--gold); stroke-width: 1.5; }
.chord-fb-svg .chord-fb-finger {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px; fill: var(--paper); font-weight: 600;
}
/* Degree labels inside chord-diagram dots (2026-07-20 degrees directive).
   font-size is set inline per label length so ♭♭7 still fits the radius. */
.chord-fb-svg .chord-fb-degree {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  fill: var(--paper); font-weight: 700;
}
.chord-fb-svg .chord-fb-degree-open { fill: var(--ink); }
/* Finger number, relocated beside the dot when a degree occupies it */
.chord-fb-svg .chord-fb-finger-side {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 5.5px; fill: var(--ink-mute);
}
.chord-fb-svg .chord-fb-muted {
  font-family: var(--serif);
  font-size: 11px;
  fill: var(--ink-mute);
}
.chord-fb-svg .chord-fb-bass-tone { fill: var(--paper-tint); stroke: var(--ink-soft); stroke-width: 0.8; }
.chord-fb-svg .chord-fb-bass-tone.is-root { fill: var(--gold); stroke: var(--gold); }
.chord-fb-svg .chord-fb-tone-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 6.5px; fill: var(--ink);
}
.chord-fb-svg .chord-fb-bass-tone.is-root + .chord-fb-tone-label { fill: var(--paper); }
.chord-fb-svg .chord-fb-cell { transition: fill .15s ease; cursor: pointer; }
.chord-fb-svg .chord-fb-cell:hover { fill: rgba(177, 138, 58, 0.12); }

/* ---------- Guitar scale positions — box diagrams (scales page) ---------- */
.fb-pos-widget { margin: 10px 0; }
.fb-pos-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.fb-pos-toggle .btn.active {
  background: var(--gold); color: var(--paper); border-color: var(--gold);
}
.fb-pos-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.fb-pos-chips .toc-chip { cursor: pointer; font-family: var(--sans); }
.fb-pos-caption { margin: 4px 0 6px; }
.fb-pos-svg { display: block; width: 100%; max-width: 210px; height: auto; }
.fb-pos-svg .fb-pos-string { stroke: var(--ink-soft); stroke-width: 1; }
.fb-pos-svg .fb-pos-fret-line { stroke: var(--ink-mute); stroke-width: 0.8; opacity: 0.6; }
.fb-pos-svg .fb-pos-string-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; fill: var(--ink-soft);
}
.fb-pos-svg .fb-pos-fretnum {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; fill: var(--ink-mute);
}
.fb-pos-svg .fb-pos-dot { fill: var(--paper-tint); stroke: var(--ink-soft); stroke-width: 1.2; }
.fb-pos-svg .fb-pos-dot.is-root { fill: var(--gold); stroke: var(--gold); }
.fb-pos-svg .fb-pos-dot.is-stretch { stroke-dasharray: 3 2; }
.fb-pos-svg .fb-pos-finger {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; fill: var(--ink); font-weight: 600;
}
.fb-pos-svg .fb-pos-finger.on-root { fill: var(--paper); }

/* ---------- Instrument diagrams — guitar + bass on chord cards ---------- */
.instrument-grid {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 22px;
  align-items: start;
}
.instrument-grid-3 {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(110px, 150px) 1fr;
  gap: 22px;
  align-items: start;
}
.instrument-cell-wide { grid-column: span 1; }
@media (max-width: 640px) {
  .instrument-grid, .instrument-grid-3 { grid-template-columns: 1fr; }
}
.instrument-cell h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gold);
  margin: 0 0 8px;
}
.instrument-svg {
  width: 100%;
  height: auto;
  max-width: 360px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 4px;
}
.instrument-svg .diagram-title {
  font-family: var(--serif);
  font-size: 12px;
  fill: var(--ink);
  font-style: italic;
}
.instrument-svg .diagram-string { stroke: var(--ink-soft); stroke-width: 1; }
.instrument-svg .diagram-fret-line { stroke: var(--ink-mute); stroke-width: 1; }
.instrument-svg .diagram-nut { stroke: var(--ink); stroke-width: 3; }
.instrument-svg .diagram-fret {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  fill: var(--ink-mute);
}
.instrument-svg .diagram-string-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  fill: var(--ink-soft);
}
.instrument-svg .diagram-dot { fill: var(--gold); }
.instrument-svg .diagram-finger {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  fill: var(--paper);
}
.instrument-svg .diagram-mark {
  font-family: var(--serif);
  font-size: 12px;
  fill: var(--ink-soft);
}
.instrument-svg .diagram-mark.muted { fill: var(--ink-mute); }
.instrument-svg .diagram-open { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.instrument-svg .diagram-bass-note {
  fill: var(--paper-tint);
  stroke: var(--ink-soft);
  stroke-width: 1;
}
.instrument-svg .diagram-bass-note.is-root {
  fill: var(--gold);
  stroke: var(--gold);
}
.instrument-svg .diagram-bass-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px;
  fill: var(--ink);
}
.instrument-svg .diagram-bass-note.is-root + .diagram-bass-label { fill: var(--paper); }
.instrument-svg .diagram-legend {
  font-family: var(--serif);
  font-size: 9px;
  font-style: italic;
  fill: var(--ink-mute);
}
.bass-svg { max-width: 100%; }

/* ---------- Chord-scale reference table (Berklee approach) ---------- */
.chord-scale-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
}
.cs-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(220px, 1.6fr);
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.cs-row:last-child { border-bottom: none; }
.cs-row.cs-header {
  background: var(--paper-tint);
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cs-row > div:first-child { color: var(--ink); }
.cs-row > div:nth-child(2) { color: var(--ink-soft); }
.cs-row > div:last-child { color: var(--ink-mute); font-size: 0.88rem; }
@media (max-width: 720px) {
  .cs-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }
  .cs-row.cs-header { display: none; }
  .cs-row > div:first-child { font-weight: 600; color: var(--gold); }
}

/* ---------- Ear training drill (interval recognition) ---------- */
#ear-drill {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px;
}
.ear-settings { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.ear-setting { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ear-setting > span:first-child { margin-right: 8px; }
[dir="rtl"] .ear-setting > span:first-child { margin-right: 0; margin-left: 8px; }
.ear-toggle {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .12s ease;
}
.ear-toggle:hover { color: var(--ink); border-color: var(--gold-soft); }
.ear-toggle.active { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.ear-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 18px;
}
.ear-question {
  text-align: center;
  padding: 30px 14px;
  background: var(--paper-tint);
  border-radius: 4px;
  margin-bottom: 14px;
  min-height: 120px;
}
.ear-prompt {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.ear-options {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px;
}
.ear-opt {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  transition: all .12s ease;
}
.ear-opt:not([disabled]):hover { border-color: var(--gold); background: var(--paper-tint); }
.ear-opt.correct { background: #6aa84f; color: var(--paper); border-color: #6aa84f; }
.ear-opt.wrong { background: #c0392b; color: var(--paper); border-color: #c0392b; }
.ear-opt[disabled] { cursor: default; opacity: 0.85; }
.ear-feedback {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.feedback-correct { color: #6aa84f; font-weight: 600; }
.feedback-wrong { color: #c0392b; }
.ear-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ear-action {
  font-family: inherit; font-size: 0.85rem;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .12s ease;
}
.ear-action:hover { color: var(--gold); border-color: var(--gold-soft); }
.ear-action.ear-reset { margin-left: auto; color: var(--ink-mute); }
[dir="rtl"] .ear-action.ear-reset { margin-left: 0; margin-right: auto; }

/* ---------- Rhythm audio demos (rhythm-theory) ---------- */
.rh-audio-demo { margin-top: 12px; }
.rh-audio-demo .btn-row { margin-top: 0; }

/* ---------- Bagrut readiness tracker — per-row status + overview bar ---------- */
.readiness-bar {
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.readiness-msg {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.readiness-track {
  height: 6px;
  background: var(--paper);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.readiness-fill {
  height: 100%;
  background: var(--gold);
  transition: width .35s ease-out;
}
.bagrut-tracker { margin-top: 14px; }
.bagrut-tracker-label { margin-bottom: 6px; }
.bagrut-tracker-row { display: flex; gap: 4px; flex-wrap: wrap; }
.bagrut-status {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bagrut-status:hover { color: var(--ink); border-color: var(--gold-soft); }
.bagrut-status.active.not-started { background: var(--ink-mute); color: var(--paper); border-color: var(--ink-mute); }
.bagrut-status.active.learning    { background: #d4a64e; color: var(--paper); border-color: #d4a64e; }
.bagrut-status.active.confident   { background: #6aa84f; color: var(--paper); border-color: #6aa84f; }

/* ---------- Bagrut map — requirements ↔ Academy tools ---------- */
.bagrut-map { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.bagrut-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 22px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
}
[dir="rtl"] .bagrut-row { border-left: 1px solid var(--rule); border-right: 4px solid var(--gold); }
@media (max-width: 720px) {
  .bagrut-row { grid-template-columns: 1fr; gap: 12px; }
}
.bagrut-req h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  margin: 0 0 4px;
}
.bagrut-tools {
  display: flex; flex-direction: column; gap: 6px;
}
.bagrut-tool {
  display: block;
  padding: 8px 12px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  transition: all .12s ease;
}
.bagrut-tool:hover {
  border-color: var(--gold);
  background: var(--paper);
  transform: translateX(2px);
}
[dir="rtl"] .bagrut-tool:hover { transform: translateX(-2px); }

/* ---------- Manifesto + About-page elements ---------- */
.manifesto {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
[lang="he"] .manifesto { font-family: var(--serif-he); }

.about-ladder { padding-left: 24px; }
.about-ladder li { margin: 10px 0; line-height: 1.55; }
[dir="rtl"] .about-ladder { padding-left: 0; padding-right: 24px; }

.he-quote {
  font-family: var(--serif-he, var(--serif));
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  font-style: italic;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .he-quote {
  border-left: none;
  padding-left: 0;
  padding-right: 14px;
  border-right: 3px solid var(--gold);
}

.manifesto-quote {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
  padding: 22px 28px;
  background: var(--paper-tint);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  line-height: 1.45;
}
[dir="rtl"] .manifesto-quote {
  border-left: none;
  border-right: 3px solid var(--gold);
  border-radius: 4px 0 0 4px;
}

/* ---------- Eras strip — chronological lineage on Masters page ---------- */
.eras-strip { display: flex; flex-direction: column; gap: 6px; }
.era {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  transition: border-color .15s ease;
}
.era[open] { border-color: var(--gold-soft); background: var(--paper-tint); }
.era summary {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
}
.era summary::-webkit-details-marker { display: none; }
.era summary::before {
  content: '▸';
  display: inline-block;
  color: var(--gold);
  font-size: 0.8em;
  margin-right: 6px;
  transition: transform .15s ease;
}
.era[open] summary::before { transform: rotate(90deg); }
[dir="rtl"] .era summary::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .era[open] summary::before { transform: rotate(-90deg); }
.era-name { font-size: 1.05rem; color: var(--ink); }
.era-years { font-size: 0.86rem; font-style: italic; }
.era-body { padding: 4px 18px 18px; }
.era-body p { margin: 4px 0 12px; color: var(--ink-soft); }
.era-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.era-label {
  font-family: var(--serif); font-style: italic;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  margin-right: 6px;
}
[dir="rtl"] .era-label { margin-right: 0; margin-left: 6px; }
.era-listen { font-style: italic; color: var(--ink-soft); margin-top: 10px !important; }
.era-listen strong { font-style: normal; color: var(--gold); font-weight: 500; }

/* ---------- Micro-interactions: subtle fade-ins, button press ---------- */
@keyframes ota-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ota-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.notation, .instrument-svg, .today-card, .era, .flow > .card,
.fingering-cell, .fingering-compare-panel, .grid > .card,
.tab-block, .drum-grid-block {
  animation: ota-fade-in .35s ease-out;
}
button:active, .btn:active, .tool-card:active, .today-card:active {
  transform: scale(0.97);
  transition: transform .08s ease;
}

/* Loading skeleton (used while curator JSON loads) */
.today-loading {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.today-loading .skeleton-card {
  height: 140px;
  background: linear-gradient(90deg, var(--paper-tint) 25%, var(--paper) 50%, var(--paper-tint) 75%);
  background-size: 200% 100%;
  animation: ota-shimmer 1.5s ease-in-out infinite;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
@keyframes ota-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty-state cards for null Today entries */
.today-empty-card {
  padding: 22px;
  text-align: center;
  background: var(--paper-tint);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--serif);
}

/* ---------- Day-streak flame badge (next to brand in nav) ---------- */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 3px 8px 3px 4px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--gold);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: default;
  vertical-align: middle;
  animation: streak-pop .4s ease-out;
}
[dir="rtl"] .streak-badge { margin-left: 0; margin-right: 10px; }
.streak-flame {
  width: 12px; height: 14px;
  display: inline-block;
}
.streak-num { color: var(--ink); }
@keyframes streak-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Onboarding overlay (first visit only) ---------- */
.onboarding-overlay {
  position: fixed; inset: 0;
  background: rgba(43, 38, 32, 0.55);
  z-index: 200;
  display: flex; justify-content: center; align-items: center;
  padding: 16px;
  animation: ob-fade-in .35s ease-out;
  /* Allow modal to scroll if it exceeds screen height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.onboarding-overlay.closing { animation: ob-fade-out .22s ease-in forwards; }
@keyframes ob-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-fade-out { from { opacity: 1; } to { opacity: 0; } }
.onboarding-modal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  overflow: hidden;
}
.ob-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 0 12px;
  flex-shrink: 0;
}
.ob-lang {
  font-size: 0.88rem; color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted rgba(177,138,58,0.5);
  margin-inline-start: 12px;
}
.ob-lang:hover { border-bottom-style: solid; }
.ob-close {
  background: none; border: none;
  font-size: 1.6rem; line-height: 1;
  color: var(--ink-mute); cursor: pointer;
  padding: 4px 10px; border-radius: 4px;
}
.ob-close:hover { color: var(--ink); background: var(--paper-tint); }
.onboarding-modal h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0;
  padding: 0 24px 6px;
  color: var(--ink);
}
.onboarding-modal > p {
  padding: 0 24px;
}
.onboarding-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 24px;
  -webkit-overflow-scrolling: touch;
}
.onboarding-modal .ob-q { margin: 16px 0; }
.onboarding-modal .ob-q label {
  display: block;
  font-family: var(--serif); font-style: italic;
  color: var(--gold);
  font-size: 0.88rem;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.ob-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-opt {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .12s ease;
}
.ob-opt:hover { border-color: var(--gold-soft); color: var(--ink); }
.ob-opt.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper);
}
/* Actions ALWAYS visible — sticky at bottom of modal */
.ob-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
}
.ob-skip {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-soft); font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 10px 18px;
}
.ob-skip:hover { color: var(--ink); border-color: var(--gold-soft); background: var(--paper-tint); }
.ob-go.btn-primary { font-size: 1rem; }
.ob-go.btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 480px) {
  .onboarding-modal h2 { font-size: 1.3rem; padding: 0 18px 4px; }
  .onboarding-modal > p { padding: 0 18px; }
  .onboarding-body { padding: 0 18px; }
  .ob-actions { padding: 12px 18px; }
  .ob-opt { padding: 7px 10px; font-size: 0.88rem; }
}

/* ---------- Site-wide search ---------- */
.nav-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-tint, #f3eee0);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 5px 10px 5px 12px;
  color: var(--ink-soft);
  font: inherit; font-size: 0.85rem;
  cursor: pointer;
  transition: all .15s ease;
  margin-left: auto;
}
.nav-search-btn:hover {
  border-color: var(--gold-soft);
  background: var(--paper);
  color: var(--ink);
}
.nav-search-icon { font-size: 1.05em; line-height: 1; }
.nav-search-kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  padding: 2px 5px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-mute);
}
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(43, 38, 32, 0.5);
  z-index: 100;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
}
.search-overlay.open { display: flex; }
.search-modal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: min(640px, 92vw);
  max-height: 70vh;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.search-input {
  width: 100%;
  padding: 18px 22px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  outline: none;
}
.search-input::placeholder { color: var(--ink-mute); font-style: italic; }
.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.search-empty {
  padding: 22px;
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
}
.search-group + .search-group { margin-top: 8px; }
.search-group-label {
  font-family: var(--serif); font-style: italic;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  padding: 6px 22px 4px;
}
.search-result {
  display: block;
  padding: 8px 22px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}
.search-result.is-selected,
.search-result:hover {
  background: var(--paper-tint);
  border-left-color: var(--gold);
}
.search-result-title { font-size: 1rem; color: var(--ink); }
.search-result-title mark {
  background: rgba(177, 138, 58, 0.22);
  color: var(--ink);
  padding: 0 1px;
}
.search-result-subtitle {
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: 2px;
}
.search-hint {
  padding: 10px 22px;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-style: italic;
  background: var(--paper-tint);
}
[dir="rtl"] .search-result {
  border-left: none;
  border-right: 3px solid transparent;
}
[dir="rtl"] .search-result.is-selected,
[dir="rtl"] .search-result:hover {
  border-right-color: var(--gold);
}
[dir="rtl"] .nav-search-btn { margin-left: 0; margin-right: auto; }

/* Touch-first search trigger (2026-07-20) — on a phone the '⌕ ⌘K' pill reads
   as nothing tappable. Touch devices and small screens get a labeled
   '⌕ Search' / '⌕ חיפוש' button with a >=40px tap target and no keyboard
   hint; desktop keeps the icon+⌘K pill exactly as before. */
.nav-search-label { display: none; }
@media (pointer: coarse), (max-width: 640px) {
  .nav-search-btn { min-height: 40px; padding: 8px 14px; font-size: 0.95rem; }
  .nav-search-label { display: inline; }
  .nav-search-kbd { display: none; }
  /* result rows become comfortable touch targets */
  .search-result { padding-block: 10px; min-height: 40px; box-sizing: border-box; }
}
/* On phones the collapsed nav leaves the button wrapping to its own header
   row — let it stretch into a search-bar-like pill there. */
@media (max-width: 640px) {
  .nav-search-btn { flex: 1 1 auto; justify-content: center; }
}
/* The overlay's ↑↓/Enter/ESC footer is keyboard-only advice — meaningless
   (and space-hungry, above a software keyboard) on touch. */
@media (pointer: coarse) {
  .search-hint { display: none; }
}

/* Accessibility — skip-to-main-content link. Visually hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper, #fff);
  color: var(--ink, #1a1a1a);
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--gold);
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
[dir="rtl"] .skip-link {
  right: -9999px;
  left: auto;
  border-radius: 0 0 0 8px;
}
[dir="rtl"] .skip-link:focus {
  right: 0;
  left: auto;
}

/* Accessibility — piano keyboard focus indicator. */
.pk-key:focus {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------
   Tune-chart editor (Phase 1) — iReal-Pro-style inline editor for the
   tune_charts entries shown on the Standards page. The bar grid mirrors
   barsPerSystem; bars are clickable and open a chord-symbol popover.
--------------------------------------------------------------------- */
.tune-chart-edit-btn {
  font-family: Inter, sans-serif; font-size: 13px; padding: 6px 12px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 4px; cursor: pointer;
}
.tune-chart-edit-btn:hover { background: rgba(177,138,58,0.08); }
.tune-chart-editor {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(177,138,58,0.04);
}
.tc-edit-bars {
  display: grid; gap: 6px;
}
.tc-edit-bar {
  position: relative;
  font-family: Inter, sans-serif; font-size: 13.5px;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 6px; cursor: pointer;
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.tc-edit-bar:hover { border-color: var(--gold); background: rgba(177,138,58,0.07); }
.tc-edit-chord { font-weight: 500; }
.tc-edit-remove {
  position: absolute; top: 1px;
  inset-inline-end: 3px;
  font-size: 14px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  padding: 0 4px; border-radius: 3px;
}
.tc-edit-remove:hover { color: #b00; background: rgba(176,0,0,0.08); }
/* Half-bar pair — one grid slot containing two side-by-side half buttons */
.tc-edit-bar-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(177,138,58,0.05);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 2px;
  position: relative;
}
.tc-edit-bar-pair::before {
  content: '½+½';
  position: absolute; top: -8px; left: 6px;
  font-family: Inter, sans-serif; font-size: 9px; letter-spacing: 0.5px;
  color: var(--ink-soft); background: var(--paper);
  padding: 0 4px;
}
.tc-edit-bar-halfslot {
  border-radius: 3px;
  padding: 6px 4px;
  min-height: 32px;
  font-size: 13px;
}
.tc-edit-bar-halfslot .tc-edit-chord { font-size: 12px; }
.tc-edit-add {
  font-family: Inter, sans-serif; font-size: 18px; line-height: 1;
  background: #fff; border: 1px dashed var(--rule); border-radius: 4px;
  color: var(--ink-soft); cursor: pointer; min-height: 38px;
}
.tc-edit-add:hover { color: var(--ink); border-color: var(--gold); }
.tc-edit-actions { margin-top: 10px; }
.tc-edit-save, .tc-edit-reset {
  font-family: Inter, sans-serif; font-size: 13px; padding: 6px 12px;
  border: 1px solid var(--rule); border-radius: 4px; cursor: pointer;
  background: var(--paper); color: var(--ink);
}
.tc-edit-save { background: var(--gold); color: #fff; border-color: var(--gold); }
.tc-edit-save:hover { filter: brightness(1.05); }
.tc-edit-reset:hover { background: rgba(177,138,58,0.08); }
.tc-edit-badge { background: rgba(177,138,58,0.15); border-color: var(--gold); }

/* Chord-symbol popover */
.tc-edit-popover {
  position: absolute; z-index: 1000;
  background: #fff; border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  padding: 10px; max-width: 360px;
  font-family: Inter, sans-serif; font-size: 13px;
}
.tc-pop-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.tc-pop-label { font-size: 11px; color: var(--ink-soft); margin-inline-end: 4px; min-width: 48px; }
.tc-pop-btn {
  font-family: Inter, sans-serif; font-size: 13px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 4px 8px; cursor: pointer; min-width: 32px;
}
.tc-pop-btn:hover { background: rgba(177,138,58,0.1); }
.tc-pop-btn.is-on { background: var(--gold); color: #fff; border-color: var(--gold); }
.tc-pop-foot { margin-top: 6px; margin-bottom: 0; justify-content: flex-end; }
.tc-pop-preview {
  flex: 1; font-family: Fraunces, serif; font-size: 15px;
  color: var(--ink); padding: 2px 6px;
}
.tc-pop-apply {
  background: var(--gold); color: #fff; border: 1px solid var(--gold);
  border-radius: 3px; padding: 4px 10px; cursor: pointer; font-family: Inter, sans-serif;
}
.tc-pop-cancel {
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 3px; padding: 4px 10px; cursor: pointer; font-family: Inter, sans-serif;
}
.tc-pop-split, .tc-pop-merge {
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 3px; padding: 4px 10px; cursor: pointer; font-family: Inter, sans-serif;
  font-size: 13px;
}
.tc-pop-split:hover, .tc-pop-merge:hover { background: #fae0a8; }

/* The editor and popover are interactive — hide them when printing the chart. */
@media print {
  body[data-printing-chart] .tune-chart-editor,
  body[data-printing-chart] .tune-chart-edit-btn,
  body[data-printing-chart] .tc-edit-popover { display: none !important; }
}

/* ============================================================
   Notation controls + per-block print (notation-player.js, Phase 1)
   ============================================================ */
.notation-controls { align-items: center; }
.notation-controls .np-tempo {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Inter, sans-serif; font-size: 0.85rem; color: var(--ink-soft);
}
.notation-controls .np-tempo input[type="range"] { width: 130px; accent-color: var(--gold); }
.notation-controls .np-tempo-out {
  min-width: 2.6em; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Phase 2 — loop selection (NOTATION.attachLoopUI): per-bar hit overlays
   live inside the score SVG and stay inert until the 🔁 button arms the
   mode (svg[data-ns-loop-armed]); selected bars get a gold tint.
   touch-action: pan-y keeps iPad vertical scroll alive while armed —
   horizontal drags select bars. */
.ns-bar-hit { pointer-events: none; touch-action: pan-y; cursor: pointer; }
svg[data-ns-loop-armed] .ns-bar-hit { pointer-events: all; }
.ns-bar-sel { fill: rgba(177,138,58,.14); pointer-events: none; }
.notation-controls .np-loop[aria-pressed="true"] {
  background: rgba(177,138,58,.18); border-color: var(--gold);
}

/* Phase 3 — light-up keyboard strip (NOTATION.attachKeyboardUI): a
   non-interactive piano rendered once under the controls row; keys flash
   via fill-attribute flips as notes sound. [hidden] keeps it collapsed. */
.notation-kb { margin: 8px 0 4px; max-width: 560px; }
.notation-kb[hidden] { display: none; }
.notation-controls .np-kb[aria-pressed="true"] {
  background: rgba(177,138,58,.18); border-color: var(--gold);
}

/* Phase 4 — one-click transpose (NOTATION.attachTransposeUI): the Key
   <select> sits in the controls row, styled like the tempo group. */
.notation-controls .np-key {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Inter, sans-serif; font-size: 0.85rem; color: var(--ink-soft);
}
.notation-controls .np-key select {
  font: inherit; color: var(--ink); background: var(--paper, #fff);
  border: 1px solid var(--line, #d8d2c6); border-radius: 8px;
  padding: 3px 6px;
}

/* NOTATION.printBlock(hostEl): the host gets .np-target, its ancestor chain
   .np-keep, and body gets data-print-notation for the duration of the print.
   Everything off the kept chain is hidden; the chain itself is forced
   visible (doubled classes out-specify page-level print rules such as
   notation-test's section hiding). */
body[data-print-notation] { background: #fff !important; }
body[data-print-notation] > :not(.np-keep) { display: none !important; }
body[data-print-notation] .np-keep > :not(.np-keep):not(.np-target) { display: none !important; }
body[data-print-notation] .np-keep.np-keep,
body[data-print-notation] .np-target.np-target { display: block !important; }
body[data-print-notation] .np-target {
  background: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body[data-print-notation] .np-target svg { max-width: 100%; height: auto; }
body[data-print-notation] .notation-controls,
body[data-print-notation] .notation-kb { display: none !important; }
@media print {
  .notation-controls, .notation-kb { display: none !important; }
}

/* ============================================================
   Hub orientation (UX overhaul Ship 1, 2026-07-17)
   Trust line + three identity doors + how-to-use strip.
   ============================================================ */
.trust-line {
  display: inline-block; margin-top: 10px; padding: 5px 14px;
  border: 1px solid var(--gold-soft); border-radius: 999px;
  background: rgba(177,138,58,0.06); color: var(--ink-soft);
  font-size: 0.9rem;
}
.trust-line strong { color: var(--gold); font-weight: 600; }
.hub-doors { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0 6px; }
/* four doors since 2026-09-03 (Toolkit): 2×2 on tablet, one row on desktop */
@media (min-width: 720px) { .hub-doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hub-doors { grid-template-columns: repeat(4, 1fr); } }
.door {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper-tint); text-decoration: none; color: var(--ink);
  transition: all 0.15s;
}
.door:hover { border-color: var(--gold); background: var(--paper-deep); transform: translateY(-1px); }
.door .door-emoji { font-size: 1.5rem; line-height: 1; }
.door strong { font-family: Fraunces, "Frank Ruhl Libre", serif; font-size: 1.08rem; color: var(--ink); }
.door span { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.door .door-cta { color: var(--gold); font-size: 0.88rem; font-weight: 600; margin-top: 2px; }
.hub-howto { margin: 10px 0 4px; }
/* Open vs covered (2026-09-04) — lock marks driven by NAVDATA.open */
.nav-lock { display: inline-block; margin-inline-start: 5px; vertical-align: -1px; opacity: 0.75; }
.nav-lock svg { width: 11px; height: 11px; }
.card-lock { display: inline-block; margin-inline-end: 6px; vertical-align: -1px; }
.card-lock svg { width: 12px; height: 12px; }
a.covered { background: var(--paper); }
a.covered h2, a.covered h3, a.covered strong { color: var(--ink-soft); }
/* Enter page (2026-09-04) — the door to covered pages */
.enter-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.enter-form label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); font-weight: 600; }
.enter-form input[type="password"] { font: inherit; font-size: 1.1rem; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-tint); color: var(--ink); letter-spacing: 0.08em; }
.enter-form input[type="password"]:focus { outline: none; border-color: var(--gold); }
.enter-form .btn { align-self: flex-start; }
.enter-bad { color: #9a3b2a; margin: 0; font-size: 0.95rem; }
/* Toolkit page (2026-09-03) — cards that are links, styled like the doors */
.toolkit-grid .tool-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: all 0.15s; }
.toolkit-grid .tool-link:hover { border-color: var(--gold); background: var(--paper-deep); transform: translateY(-1px); }
.toolkit-grid .tool-link h3 { margin: 0; }
.toolkit-grid .tool-link p { color: var(--ink-soft); margin: 0; }
.toolkit-grid .tool-link .door-cta { color: var(--gold); font-size: 0.88rem; font-weight: 600; margin-top: auto; }

.hub-howto ol {
  list-style: none; counter-reset: howto; margin: 10px 0 6px; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .hub-howto ol { grid-template-columns: repeat(4, 1fr); } }
.hub-howto li {
  counter-increment: howto; background: var(--paper-tint);
  border-inline-start: 3px solid var(--gold-soft); border-radius: 4px;
  padding: 10px 14px; font-size: 0.92rem; color: var(--ink); line-height: 1.45;
}
.hub-howto li::before {
  content: counter(howto); display: inline-block; margin-inline-end: 8px;
  width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center;
  border-radius: 50%; background: var(--gold); color: white;
  font-size: 0.8em; font-weight: 600;
}
.hub-howto .howto-note { font-size: 0.88rem; color: var(--ink-mute); font-style: italic; }

/* ============================================================
   Grouped nav (UX overhaul Ship 2, 2026-07-17)
   Head links + five group buttons with dropdown panels.
   Mobile (inside the hamburger): groups become accordion rows.
   ============================================================ */
.nav-group { position: relative; display: inline-block; }
.nav-group-btn {
  font: inherit; font-size: 0.92rem; color: var(--ink-soft);
  background: none; border: none; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.nav-group-btn:hover { color: var(--ink); background: var(--paper-tint); }
.nav-group.has-active .nav-group-btn { color: var(--gold); font-weight: 600; }
.ng-caret { font-size: 0.7em; margin-inline-start: 4px; opacity: 0.7; }
.nav-group.open .ng-caret { transform: rotate(180deg); display: inline-block; }
.nav-panel {
  display: none; position: absolute; top: 100%; inset-inline-start: 0;
  z-index: 300; min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.12); padding: 8px;
}
.nav-group.open .nav-panel { display: block; }
.nav-panel a {
  display: block; padding: 6px 10px; border-radius: 4px;
  color: var(--ink-soft); text-decoration: none; font-size: 0.92rem;
}
.nav-panel a:hover { color: var(--ink); background: var(--paper-tint); }
.nav-panel a.active { color: var(--gold); background: var(--paper-tint); font-weight: 600; }
/* one-line plain-language gloss under each panel entry (2026-07-20) */
.nav-gloss {
  display: block; font-size: 0.72rem; line-height: 1.3; font-weight: 400;
  color: var(--ink-soft); opacity: 0.66;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.nav-panel a { max-width: 300px; }
.nav-panel a.active .nav-gloss { color: var(--gold); }
/* the reference panel is long — two columns on desktop */
@media (min-width: 761px) {
  .nav-group[data-nav-group="reference"] .nav-panel {
    min-width: 430px; column-count: 2; column-gap: 4px;
  }
  .nav-group[data-nav-group="reference"] .nav-panel a { break-inside: avoid; }
}
/* Mobile: panels flow inline as accordion sections inside the hamburger.
   Overrides the legacy auto-fill grid — with grouped sections the menu is a
   single accordion column, and the panel grid lives INSIDE each group. */
@media (max-width: 760px) {
  body.nav-open .links { display: block; overflow-y: auto; }
  .links > a { display: block; padding: 9px 10px; font-size: 1rem; }
  .nav-group { display: block; width: 100%; }
  .nav-group-btn {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 9px 10px; font-size: 1rem;
    border-top: 1px solid var(--rule);
  }
  .nav-panel {
    position: static; box-shadow: none; border: none; border-radius: 0;
    min-width: 0; max-height: none; padding: 0 0 6px 0;
    background: transparent;
  }
  .nav-panel { display: none; }
  /* single column since the glosses arrived (2026-07-20): two columns
     truncated most EN glosses; one readable column, the menu scrolls */
  .nav-group.open .nav-panel { display: grid; grid-template-columns: 1fr; gap: 1px; }
  .nav-panel a { padding-block: 6px; padding-inline: 10px; max-width: none; }
  .nav-gloss { font-size: 0.68rem; }
}

/* ============================================================
   In-page TOC (UX overhaul Ship 3, 2026-07-17)
   Sticky chip row under the header on data-toc pages.
   ============================================================ */
[id] { scroll-margin-top: calc(var(--sticky-off, 58px) + 66px); }
/* Desktop: a static jump list at the top of the page (wrapped chips —
   too many rows to justify stickiness). Mobile: ONE sticky scrollable
   chip row under the header, always in reach. */
.page-toc {
  display: flex; gap: 6px; align-items: center; justify-content: flex-start;
  flex-wrap: wrap;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 8px 2px; margin: 0 0 10px;
}
@media (max-width: 760px) {
  .page-toc {
    position: sticky; top: var(--sticky-off, 58px); z-index: 25;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}
.page-toc::-webkit-scrollbar { display: none; }
.toc-chip {
  flex: 0 0 auto; white-space: nowrap;
  padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-tint); color: var(--ink-soft);
  font-size: 0.84rem; text-decoration: none; transition: all 0.15s;
}
.toc-chip:hover { color: var(--ink); border-color: var(--gold-soft); }
.toc-chip.cur { color: var(--gold); border-color: var(--gold); background: rgba(177,138,58,0.08); font-weight: 600; }
.toc-chip.toc-drill { color: white; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.toc-chip.toc-drill:hover { background: var(--gold-soft); }

/* ============================================================
   Mobile section folds (2026-07-20) — phones only. app.js adds
   body.folds-on under matchMedia (max-width: 640px) and wraps each
   h2-section's content in .fold-body; every rule here is gated on
   .folds-on so desktop and print render exactly as before.
   ============================================================ */
body.folds-on .section.foldable > h2,
body.folds-on section.foldable > h2 {
  cursor: pointer; position: relative; padding-inline-end: 30px;
  -webkit-tap-highlight-color: transparent;
}
/* chevron: points down when folded (content below is closed), gold and
   rotated up when open */
body.folds-on .foldable > h2::after {
  content: ''; position: absolute; inset-inline-end: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -8px;
  border-inline-end: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transform-origin: 66% 66%;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
body.folds-on .foldable:not(.folded) > h2::after {
  border-color: var(--gold);
  transform: rotate(225deg);
}
/* cheap toggle: display only — no height animation, no reflow storms */
body.folds-on .foldable.folded .fold-body { display: none; }
body.folds-on .foldable.folded > h2 { margin-bottom: 0; }
@media print {
  /* folds must never reach paper: bodies always visible, chevrons gone */
  .fold-body { display: block !important; }
  body.folds-on .foldable > h2::after { display: none !important; }
}

/* Brand mark + nav-group icons (2026-07-18) */
.brand-mark { flex: 0 0 auto; }
.ng-icon { display: inline-block; vertical-align: -2px; margin-inline-end: 5px; }
.ng-icon svg { display: inline-block; }

/* ============================================================
   The Players (2026-07-19) — gallery + deep sections
   ============================================================ */
.pl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.pl-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .pl-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pl-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-tint);
  text-decoration: none; color: var(--ink); transition: all 0.15s; }
.pl-card:hover { border-color: var(--gold); background: var(--paper-deep); transform: translateY(-1px); }
.pl-name { font-family: Fraunces, "Frank Ruhl Libre", serif; font-size: 1.12rem; font-weight: 600; }
.pl-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; color: var(--gold); }
.pl-line { font-size: 0.86rem; color: var(--ink-soft); font-style: italic; line-height: 1.4; }
.player-sec { border-top: 2px solid var(--rule); padding-top: 18px; }
.player-sec h2 { font-family: Fraunces, "Frank Ruhl Libre", serif; color: var(--ink); font-size: 1.5em; }
.pl-eyebrow { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62em; color: var(--gold); letter-spacing: 0.06em; margin-bottom: 2px; }
.pl-oneline { color: var(--ink-soft); font-size: 1.02em; }
.player-sec h3 { font-family: Fraunces, "Frank Ruhl Libre", serif; color: var(--gold); font-size: 1.12em; margin-top: 22px; }
.pl-device { background: var(--paper-tint); border-inline-start: 3px solid var(--gold-soft);
  border-radius: 4px; padding: 12px 16px; margin: 10px 0; }
.pl-device h4 { font-family: Fraunces, "Frank Ruhl Libre", serif; font-size: 1.02em; margin: 0 0 6px; color: var(--ink); }
.pl-notation { margin: 10px 0; overflow-x: auto; }
.pl-play { padding: 6px 14px; border: 1px solid var(--gold); background: white; border-radius: 4px;
  cursor: pointer; font-size: 0.88rem; font-family: inherit; color: var(--ink); transition: all 0.15s; }
.pl-play:hover { background: var(--paper-deep); }
.pl-ladder li { margin: 6px 0; }
.pl-records li { margin: 6px 0; }
.pl-blind { background: rgba(177,138,58,0.06); border-inline-start: 3px solid var(--gold);
  border-radius: 4px; padding: 10px 14px; margin: 14px 0; }
.pl-connects { font-size: 0.9rem; color: var(--ink-soft); }

/* The weave (2026-07-19): player-name links on Listening/Standards + tunes line */
.pl-weave { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold-soft); }
.pl-weave:hover { border-bottom-style: solid; }
.pl-tunes { font-size: 0.92rem; }

/* ---------- THE MAP — one-page directory of the whole Academy (2026-07-20).
   Phone-first: single column, generous tap targets, no graphics. Rendered by
   app.js renderMapPage() from NAVDATA. ---------- */
.map-directory { max-width: var(--read); }
.map-group { margin: 0 0 34px; }
.map-group h2 { margin: 0 0 12px; }
.map-list { list-style: none; margin: 0; padding: 0; }
.map-item {
  display: block; padding: 12px 16px; margin-bottom: 8px; min-height: 44px;
  background: var(--paper-tint); border: 1px solid var(--rule);
  border-radius: 10px; text-decoration: none; color: var(--ink);
}
.map-item:hover { border-color: var(--gold-soft); }
.map-item-label { display: block; font-weight: 600; }
.map-item-gloss { display: block; font-size: 0.9rem; color: var(--ink-soft); }

/* Definition line — the precise statement of what the page's subject IS.
   The lead sets the page up; this fixes the term. Sits directly under it. */
.definition {
  margin-top: 14px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--gold);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--read);
}

/* The running example — one fixed II-V-I threaded through the foundation pages.
   The rail names it and links sideways; each page teaches it in its own idiom. */
.running-ex {
  margin: 18px 0 6px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: var(--read);
}
.running-ex .running-ex-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.running-ex .running-ex-chords { font-weight: 600; }
.running-ex nav { margin-top: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.running-ex nav a { white-space: nowrap; }

/* ---- Touch targets --------------------------------------------------------
   Measured at 390px: .nav-toggle (the mobile menu button, on every page) was
   32x38, .main-kb-collapse 26x26, .main-kb-inst 28 tall, the ear-drill buttons
   34, and .ear-start only 22. Apple's HIG asks for 44pt.

   Scoped to coarse pointers rather than a width query: this is about fingers,
   not screen size, so a touch laptop gets it and a narrow desktop window does
   not. Desktop density is untouched.

   min-height rather than height, so a label that wraps still grows. The SVG
   piano keys are deliberately excluded — a key is narrow because a key IS
   narrow, and they are played by multi-touch, not tapped as controls. */
@media (pointer: coarse) {
  .nav-toggle,
  .main-kb-collapse,
  .main-kb-inst,
  .ear-toggle,
  .ear-action,
  .ear-start,
  .btn-primary,
  select { min-height: 44px; }

  .nav-toggle,
  .main-kb-collapse { min-width: 44px; }
}