/* ============================================================
   Composer Explorer — styles
   "Concert programme" theme: alabaster paper, near-black sepia
   ink, restrained antique brass, Cormorant Garamond display
   type, and genuine manuscript imagery (Bach's autograph of
   BWV 614 behind the dark stage; the Graduale Aboense chant
   page behind era heroes). Era identity is always paired with
   a text label, never color alone.
     Renaissance — moss    Baroque  — slate blue
     Classical — brass     Romantic — burgundy    Modern — violet
   ============================================================ */

:root {
  --surface: #faf8f0;
  --page: #f3f0e7;
  --card: #fdfcf6;
  --ink: #211c13;
  --ink-2: #5d5546;
  --muted: #8f8672;
  --hairline: #e3ddca;
  --ring: rgba(60, 48, 20, 0.13);
  --gold: #8f7429;
  --gold-soft: #c9b475;
  --stage: #211e17;
  --shadow: 0 2px 6px rgba(60, 48, 20, 0.07), 0 12px 32px rgba(60, 48, 20, 0.11);
  --shadow-lg: 0 8px 24px rgba(45, 36, 15, 0.15), 0 24px 64px rgba(45, 36, 15, 0.19);

  --era-renaissance: #4e6b3c;
  --era-baroque: #3a6480;
  --era-classical: #8a691c;
  --era-romantic: #94465a;
  --era-modern: #57507e;

  --map-sea: #e2e5d6;
  --map-land: #f6efdb;
  --map-border: #ccc0a0;

  --radius: 14px;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* the hidden attribute must always win, even over display:grid/flex rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

::selection { background: var(--gold-soft); color: var(--ink); }

body {
  margin: 0;
  /* alabaster paper with the faintest whisper of staff lines */
  background:
    radial-gradient(1100px 500px at 85% -8%, rgba(143, 116, 41, 0.06), transparent 60%),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 119px,
      rgba(60, 48, 20, 0.028) 119px, rgba(60, 48, 20, 0.028) 120px,
      transparent 120px, transparent 127px,
      rgba(60, 48, 20, 0.028) 127px, rgba(60, 48, 20, 0.028) 128px,
      transparent 128px, transparent 135px,
      rgba(60, 48, 20, 0.028) 135px, rgba(60, 48, 20, 0.028) 136px,
      transparent 136px, transparent 143px,
      rgba(60, 48, 20, 0.028) 143px, rgba(60, 48, 20, 0.028) 144px,
      transparent 144px, transparent 151px,
      rgba(60, 48, 20, 0.028) 151px, rgba(60, 48, 20, 0.028) 152px,
      transparent 152px, transparent 330px),
    var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* small-caps utility look for all chrome controls */
.nav-btn, .chip, .play-btn, .work-kind, .main-nav a, .nav-drop-btn,
.era-label, .badge, .p-cta, .q-count, .s-kind {
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* engraved corner flourishes (used on the panel, quiz card and era hero) */
:root {
  --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M4 44V16Q4 4 16 4h28' fill='none' stroke='%23c9b475' stroke-width='1'/%3E%3Cpath d='M9 44V18Q9 9 18 9h26' fill='none' stroke='%23c9b475' stroke-width='0.6' opacity='0.65'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23c9b475'/%3E%3C/svg%3E");
  --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(90 22 22)'%3E%3Cpath d='M4 44V16Q4 4 16 4h28' fill='none' stroke='%23c9b475' stroke-width='1'/%3E%3Cpath d='M9 44V18Q9 9 18 9h26' fill='none' stroke='%23c9b475' stroke-width='0.6' opacity='0.65'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23c9b475'/%3E%3C/g%3E%3C/svg%3E");
  --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(180 22 22)'%3E%3Cpath d='M4 44V16Q4 4 16 4h28' fill='none' stroke='%23c9b475' stroke-width='1'/%3E%3Cpath d='M9 44V18Q9 9 18 9h26' fill='none' stroke='%23c9b475' stroke-width='0.6' opacity='0.65'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23c9b475'/%3E%3C/g%3E%3C/svg%3E");
  --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(270 22 22)'%3E%3Cpath d='M4 44V16Q4 4 16 4h28' fill='none' stroke='%23c9b475' stroke-width='1'/%3E%3Cpath d='M9 44V18Q9 9 18 9h26' fill='none' stroke='%23c9b475' stroke-width='0.6' opacity='0.65'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23c9b475'/%3E%3C/g%3E%3C/svg%3E");
}
.corner-ornaments { position: relative; }
.corner-ornaments::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--orn-tl), var(--orn-tr), var(--orn-bl), var(--orn-br);
  background-repeat: no-repeat;
  background-position: 9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
}

/* gentle page transitions between routes */
.page-enter { animation: pageEnter .45s ease both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }

/* ---------- header ---------- */
.site-header {
  padding: 18px clamp(16px, 4vw, 48px) 4px;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.brand { display: flex; gap: 18px; align-items: center; text-decoration: none; color: inherit; }
.brand-mark {
  font-family: var(--font-display);
  font-size: 46px; line-height: 1;
  color: var(--gold);
  transform: rotate(-5deg);
  transition: transform .3s ease;
  user-select: none;
}
.brand:hover .brand-mark { transform: rotate(5deg) scale(1.05); }
.brand h1, .brand .brand-name {
  /* .brand-name: the generated composer pages give the page's ONE h1 to
     the composer's own name (the actual subject of the page) and use
     this class for the site-brand text in the header instead, so it
     stays visually identical without contesting the h1. */
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(28px, 4vw, 36px);
  margin: 0; letter-spacing: .02em; line-height: 1.05;
}
.tagline {
  margin: 3px 0 0; color: var(--ink-2); font-size: 15.5px;
  font-family: var(--font-display); font-style: italic;
}

/* masthead menu */
.main-nav {
  max-width: 1200px; margin: 12px auto 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(16px, 4vw, 42px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 8px;
}
.main-nav a, .nav-drop-btn {
  position: relative;
  text-decoration: none;
  font: 600 12px var(--font-body);
  color: var(--ink-2);
  padding: 2px 1px;
  transition: color .15s;
}
.main-nav a:hover, .nav-drop-btn:hover { color: var(--ink); }
.main-nav a.active, .nav-drop-btn.active { color: var(--ink); }
.main-nav a.active::after, .nav-drop-btn.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px;
  border-bottom: 2px solid var(--gold);
}

/* "Eras" dropdown */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-drop-btn {
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body);
}
.nav-caret {
  font-size: 9px; transition: transform .18s ease;
  text-transform: none; letter-spacing: normal;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%);
  z-index: 60;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
}
.nav-dropdown.open .nav-drop-menu { display: flex; }
.nav-drop-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 13px;
  border-radius: 7px;
  text-decoration: none;
  font: 600 14px var(--font-display);
  text-transform: none; letter-spacing: normal;
  color: var(--ink);
  transition: background .15s;
}
.nav-drop-menu a:hover { background: #f2eddd; }
.nav-drop-menu a.active { background: #f2eddd; color: var(--gold); }
.nav-drop-span {
  font: 400 11px var(--font-body); color: var(--muted);
  white-space: nowrap;
}

/* ---------- search ---------- */
.search-wrap { position: relative; flex: 1 1 300px; max-width: 430px; }
#search {
  width: 100%;
  padding: 12px 20px;
  font: 400 15.5px var(--font-body);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}
#search::placeholder { color: var(--muted); font-family: var(--font-display); font-style: italic; font-size: 16px; }
#search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(143, 116, 41, .14); }

.suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 320px; overflow-y: auto;
}
.suggestion {
  display: flex; gap: 10px; align-items: baseline;
  width: 100%; text-align: left;
  padding: 10px 16px;
  border: 0; background: none;
  font: 600 14.5px var(--font-body); color: var(--ink);
  cursor: pointer;
}
.suggestion:hover, .suggestion.focused { background: #f2eddd; }
.suggestion .s-kind { font-size: 10.5px; color: var(--gold); font-weight: 700; }
.suggestion .s-sub { color: var(--ink-2); font-weight: 400; font-size: 13px; }

/* ---------- controls ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 32px; }

.controls {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin: 14px 0 6px;
}
.era-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--hairline);
  background: var(--card); color: var(--ink-2);
  font: 600 11.5px var(--font-body);
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip:hover { border-color: var(--gold); }
.chip.active { color: #fff; border-color: transparent; }
.chip.active[data-era="all"] { background: var(--ink); }
.chip.active[data-era="renaissance"] { background: var(--era-renaissance); }
.chip.active[data-era="baroque"] { background: var(--era-baroque); }
.chip.active[data-era="classical"] { background: var(--era-classical); }
.chip.active[data-era="romantic"] { background: var(--era-romantic); }
.chip.active[data-era="modern"] { background: var(--era-modern); }
.chip.active .dot { background: rgba(255,255,255,.85); }

.hint {
  color: var(--muted); font-size: 16px; margin: 8px 2px 16px; min-height: 1em;
  font-family: var(--font-display); font-style: italic;
}

/* ---------- gallery: compact cards, grouped into era sections ---------- */
.gallery { display: block; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 16px;
}
/* era section headings (shown when browsing all eras) */
.gallery-era + .gallery-era { margin-top: 28px; }
.gallery-era-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 600;
}
.gallery-era-head .ge-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ec); }
.gallery-era-head .ge-name { font-size: 22px; color: var(--ink); }
.gallery-era-head .ge-span { font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ec); }
.gallery-era-head .ge-count {
  font: 700 10.5px var(--font-body); color: var(--muted);
  background: color-mix(in srgb, var(--ec) 12%, var(--card));
  border-radius: 999px; padding: 2px 8px;
}
.gallery-era-head::after { content: ""; flex: 1; border-top: 3px double color-mix(in srgb, var(--ec) 45%, transparent); }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(60, 48, 20, .06);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left; padding: 12px 12px 0;
  display: flex; flex-direction: column;
}
.card:hover, .card:focus-visible { box-shadow: var(--shadow); outline: none; }
.card:nth-child(odd):hover  { transform: translateY(-3px) rotate(-0.3deg); }
.card:nth-child(even):hover { transform: translateY(-3px) rotate(0.3deg); }

/* arched, museum-matted portrait frames; gentle sepia unifies the set */
.card-portrait {
  aspect-ratio: 4 / 4.5;
  width: 100%; object-fit: cover; object-position: top center;
  background: #ece5d0; display: block;
  border-radius: 999px 999px 10px 10px;
  border: 2px solid var(--frame, var(--gold-soft));
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-soft), 0 3px 10px rgba(60, 48, 20, .13);
  filter: sepia(.18) saturate(.94);
  transition: filter .25s ease;
}
.card:hover .card-portrait { filter: none; }
.card-portrait.fallback {
  display: flex; align-items: center; justify-content: center;
  font: 600 42px var(--font-display); color: #fdfbf2;
  filter: none;
}
.card-era-band { display: none; }
.card-body { padding: 10px 2px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.14; }
.card-years { color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.era-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
}
.era-label .dot { width: 6px; height: 6px; border-radius: 50%; }

.empty-state {
  color: var(--ink-2); padding: 40px 8px; font-size: 17px; grid-column: 1 / -1; text-align: center;
  font-family: var(--font-display); font-style: italic;
}

/* ---------- lifespan chart shell (era "at a glance" charts) ---------- */
.timeline-caption {
  color: var(--ink-2); font-size: 16px; margin: 4px 2px 18px;
  font-family: var(--font-display); font-style: italic;
}
.timeline-caption strong { font-style: normal; }
.lifespan-chart {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(60, 48, 20, .06);
  padding: 18px 8px 8px;
  overflow-x: auto;
}
.lifespan-chart svg { display: block; min-width: 760px; width: 100%; height: auto; }

/* ---------- overlay panel ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(6px, 3vh, 32px) clamp(6px, 3vw, 32px); }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(28, 23, 12, .6); backdrop-filter: blur(3px); }
.panel {
  position: relative;
  width: min(880px, 100%);
  max-height: 100%;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--gold-soft);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pop .22s ease-out;
}
@keyframes pop { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

/* corner flourishes on the panel (nav bar is transparent so they show) */
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: var(--orn-tl), var(--orn-tr), var(--orn-bl), var(--orn-br);
  background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
  opacity: .8;
}
.panel-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 52px 12px 52px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.panel-crumbs { flex: 1; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-btn {
  border: 1px solid var(--hairline); background: var(--card);
  font: 600 11.5px var(--font-body); color: var(--ink);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nav-btn:hover { background: #f2eddd; border-color: var(--gold-soft); }
.nav-btn.close { font-size: 13px; padding: 8px 12px; }

.panel-body { overflow-y: auto; padding: 0 0 30px; }

/* hero section of panel */
.hero {
  display: flex; gap: 26px; align-items: flex-start;
  padding: 28px clamp(18px, 4vw, 38px) 8px;
  flex-wrap: wrap;
}
.hero-portrait {
  width: 172px; aspect-ratio: 4/4.6; object-fit: cover; object-position: top center;
  border-radius: 999px 999px 14px 14px;
  background: #ece5d0;
  border: 2px solid var(--accent, var(--gold-soft));
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--gold-soft), var(--shadow);
  filter: sepia(.15) saturate(.95);
  flex: 0 0 auto;
}
.hero-portrait.fallback { display: flex; align-items: center; justify-content: center; font: 600 54px var(--font-display); color: #fdfbf2; filter: none; }
.hero-info { flex: 1 1 300px; min-width: 260px; }
.hero-info h2 {
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 42px);
  margin: 4px 0 0; line-height: 1.05; font-weight: 600;
}
.hero-nickname { font-family: var(--font-display); font-style: italic; color: var(--ink-2); font-size: 19px; margin: 2px 0 10px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.hero-tagline { font-size: 16px; color: var(--ink); margin: 8px 0 0; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font: 700 10.5px var(--font-body);
  padding: 6px 13px; border-radius: 999px;
}

/* panel sections */
.psec { padding: 24px clamp(18px, 4vw, 38px) 0; }
.psec > h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.psec > h3 .h-icon { font-size: 17px; color: var(--gold); }
.psec > h3::after {
  content: ""; flex: 1; margin-left: 8px;
  border-top: 3px double var(--gold-soft);
}

.facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts li {
  background: var(--card); border: 1px solid var(--ring); border-radius: 10px;
  padding: 12px 15px; font-size: 14.5px;
  border-left: 3px solid var(--accent, var(--gold));
}

/* works */
.works { display: grid; gap: 14px; }
.work {
  background: var(--card); border: 1px solid var(--ring); border-radius: 12px;
  overflow: hidden;
}
.work-head {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px;
  font-family: var(--font-body);
}
.work-head:hover { background: #f8f4e6; }
.work-title { font: 600 19px var(--font-display); color: var(--ink); }
.work-year { color: var(--muted); font-size: 13px; font-weight: 600; }
.work-kind { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--accent, var(--gold)); }
.work-caret { color: var(--muted); font-size: 11px; }
.work-detail { padding: 0 16px 16px; }
.work-desc { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }
.score-box {
  background: #fefdf6; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 10px; overflow-x: auto;
}
.score-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.play-btn {
  border: 0; cursor: pointer;
  background: var(--accent, var(--ink)); color: #fff;
  font: 700 11.5px var(--font-body);
  padding: 10px 20px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .15s;
}
.play-btn:hover { filter: brightness(1.12); }
.play-note { color: var(--muted); font-size: 13px; font-family: var(--font-display); font-style: italic; }
.no-score { color: var(--muted); font-size: 14px; font-family: var(--font-display); font-style: italic; }

/* life & times twin timeline */
.tl-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.tl-legend .key { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend .swatch { width: 10px; height: 10px; border-radius: 50%; }
.tl-legend .swatch.world { background: var(--muted); }

.timeline { position: relative; margin: 4px 0 0; padding: 4px 0 4px; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 74px;
  width: 1px; background: var(--hairline);
}
.tl-item { position: relative; display: flex; gap: 18px; padding: 7px 0; }
.tl-year {
  flex: 0 0 56px; text-align: right;
  font: 600 14px var(--font-body); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.tl-item::after {
  content: ""; position: absolute; left: 69.5px; top: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot, var(--muted));
  box-shadow: 0 0 0 3px var(--surface);
}
.tl-text { flex: 1; font-size: 14.5px; padding-left: 14px; }
.tl-item.world .tl-text { color: var(--ink-2); }
.tl-item.world .tl-text::before { content: "🌍 "; }
.tl-item.life { --dot: var(--accent); }
.tl-item.life .tl-text { font-weight: 600; }

/* contemporaries — equal-width grid so chip edges align in tidy
   columns (content-sized flex chips packed unevenly across rows) */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: stretch; }
.person {
  border: 1px solid var(--hairline); background: var(--card);
  border-radius: 12px; padding: 11px 15px; cursor: pointer;
  text-align: left; font-family: var(--font-body);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  max-width: 100%;
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.person .p-name { font: 600 17px var(--font-display); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.person .p-name .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.person .p-years { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.person .p-note { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.person.is-composer { border-color: var(--p-color, var(--hairline)); }
.person .p-cta { font-size: 10px; font-weight: 700; color: var(--p-color, var(--gold)); margin-top: 6px; }

/* figure (non-composer) detail */
.figure-hero { padding: 32px clamp(18px, 4vw, 38px) 4px; }
.figure-hero h2 { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 38px); font-weight: 600; margin: 6px 0 2px; }
.figure-hero .f-meta { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.figure-context { background: #f1ecdb; border-radius: 10px; padding: 12px 16px; font-size: 14.5px; margin-top: 14px; }

/* era intro strip inside panel */
.era-strip {
  margin: 20px clamp(18px, 4vw, 38px) 0;
  border-radius: 10px; padding: 13px 17px;
  color: #fff; font-size: 14px; font-weight: 400;
}

/* ---------- landing page: the era conveyor ---------- */
.home-lede {
  text-align: center;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-2);
  max-width: 620px; margin: 10px auto 10px;
}
.home-lede strong { font-style: normal; font-weight: 600; }

/* home intro + welcome copy */
.home-intro { text-align: center; max-width: 720px; margin: 2px auto 10px; }
.home-headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 3.4vw, 33px); line-height: 1.1; margin: 0 0 5px;
  letter-spacing: .01em; color: var(--ink);
}
.home-sub {
  margin: 0 auto; max-width: 620px;
  font-size: clamp(14px, 1.9vw, 16px); color: var(--ink-2); line-height: 1.55;
}

/* rotating "Did you know?" banner — a prominent feature strip, gold-tinted
   so it stands out directly under the conveyor on the first screen */
.did-you-know {
  max-width: 760px; margin: 14px auto 0;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 13%, var(--card)),
    color-mix(in srgb, var(--gold) 7%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-left: 5px solid var(--gold); border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 3px 12px rgba(120, 95, 30, .12);
  font-size: 16px; color: var(--ink); line-height: 1.5;
}
.dyk-label {
  flex: 0 0 auto;
  font: 800 11px var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  color: #fff; background: var(--gold); border-radius: 999px; padding: 6px 12px;
  box-shadow: 0 1px 3px rgba(120, 95, 30, .3); white-space: nowrap;
}
.dyk-fact { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.dyk-fact.swap { animation: dykFade .4s ease; }
@keyframes dykFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.dyk-composer {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--era-baroque); white-space: nowrap;
  border-bottom: 1px dotted color-mix(in srgb, var(--era-baroque) 45%, transparent);
}
.dyk-composer:hover { color: var(--ink); border-bottom-color: var(--ink); }
.dyk-more {
  flex: 0 0 auto; border: 0; background: var(--gold);
  color: #fff; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  font-size: 17px; line-height: 1; box-shadow: 0 1px 3px rgba(120, 95, 30, .3);
  transition: transform .3s, filter .15s;
}
.dyk-more:hover { filter: brightness(1.08); transform: rotate(120deg); }
@media (max-width: 560px) {
  .did-you-know { flex-wrap: wrap; font-size: 15px; }
  .dyk-more { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .dyk-fact.swap { animation: none; } .dyk-more:hover { transform: none; } }

.conveyor { margin: 0 auto; max-width: 960px; }
/* a dark stage: Bach's own handwriting ghosted behind the turning eras.
   Height tracks the viewport so the whole landing page fits one screen. */
.conveyor .stage {
  position: relative;
  /* tall enough that the front era — enlarged as it pops toward the viewer
     on the 3D cylinder — keeps its arched top clear of the clipped top edge,
     even on short viewports where the min height governs. Kept trim so the
     "Did you know?" banner below still lands on the first screen. */
  height: clamp(276px, 36vh, 348px);
  transition: height .45s ease;
  perspective: 1200px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(201, 180, 117, .4);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(33, 30, 23, .82), rgba(24, 21, 15, .96)),
    url("../assets/textures/bach-autograph.jpg") center 28% / cover;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .45), var(--shadow-lg);
}
.ring {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: opacity .35s, filter .35s;
}
.ring.dimmed { opacity: .1; filter: blur(2px); pointer-events: none; }
/* pausing raises the stage so the medallion and its orbit fit comfortably */
.conveyor .stage.focus-mode { height: clamp(380px, 60vh, 470px); }

.era-card3d {
  position: absolute; left: 50%; top: 50%;
  width: clamp(128px, 16vw, 164px);
  height: clamp(170px, 21vw, 214px);
  transform-style: preserve-3d;
  cursor: pointer;
}
.ec-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 999px 999px 16px 16px;
  border: 1.5px solid var(--gold-soft);
  /* the era's tint over its own period manuscript (set via --era-tex) */
  background-color: var(--ec);
  background-image:
    radial-gradient(120% 95% at 50% 12%, color-mix(in srgb, color-mix(in srgb, var(--ec) 80%, #ffffff 6%), transparent 12%), color-mix(in srgb, color-mix(in srgb, var(--ec) 86%, #14100a), transparent 6%)),
    var(--era-tex, none);
  background-size: auto, cover;
  background-position: center, center 20%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0, 0, 0, .5);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  color: #f7f3e6;
  transition: box-shadow .25s;
}
.ec-face.back { transform: rotateY(180deg); }
.era-card3d.front-now .ec-face.front { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 3px rgba(201,180,117,.35), 0 22px 46px rgba(0,0,0,.55); }
.ec-glyph {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 54px); line-height: 1;
  text-shadow: 0 3px 8px rgba(0,0,0,.4);
  transform: translateZ(30px);
}
.ec-name {
  font-family: var(--font-display); font-size: clamp(19px, 3vw, 25px); font-weight: 600;
  margin: 5px 0 0; transform: translateZ(22px);
  text-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.ec-span { font-weight: 600; font-size: 11.5px; letter-spacing: .12em; opacity: .9; transform: translateZ(16px); }
.ec-count {
  margin-top: 7px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(0,0,0,.28); border-radius: 999px; padding: 4px 12px;
  transform: translateZ(16px);
}

.conveyor-controls { text-align: center; margin: 6px 0 0; }
#belt-toggle { font-size: 11px; padding: 8px 18px; }

/* focus mode: the paused era + its orbiting court */
.focus-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s;
}
.focus-stage.shown { opacity: 1; }
.medallion { position: relative; width: 0; height: 0; }
/* a fine elliptical orbit line behind the satellites */
.medallion::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--orbit-r) * 2); height: calc(var(--orbit-r) * 2 * var(--squash, .6));
  transform: translate(-50%, -50%);
  border: 1px solid rgba(201, 180, 117, .28);
  border-radius: 50%;
}
.med-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(145px, 24vw, 190px); height: clamp(145px, 24vw, 190px);
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  background-color: var(--ec);
  background-image:
    radial-gradient(closest-side at 50% 30%, color-mix(in srgb, color-mix(in srgb, var(--ec) 74%, #ffffff 8%), transparent 10%), color-mix(in srgb, color-mix(in srgb, var(--ec) 88%, #14100a), transparent 5%)),
    var(--era-tex, none);
  background-size: auto, cover;
  background-position: center;
  box-shadow: 0 0 0 6px rgba(201,180,117,.14), 0 20px 50px rgba(0,0,0,.55);
  color: #f7f3e6; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-body);
  transition: transform .2s;
  z-index: 2;
}
.med-core:hover { transform: translate(-50%, -50%) scale(1.04); }
.med-core .ec-glyph { transform: none; font-size: clamp(32px, 5vw, 44px); }
.med-name { font-family: var(--font-display); font-size: clamp(20px, 3.2vw, 27px); font-weight: 600; text-shadow: 0 2px 5px rgba(0,0,0,.35); }
.med-span { font-weight: 600; font-size: 11.5px; letter-spacing: .12em; opacity: .9; }
.med-cta {
  margin-top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(247,243,230,.55); padding-bottom: 2px;
}

/* the orbit is squashed into an ellipse to fit the stage; satellites are
   counter-scaled inside .sat-pop so they keep their true shape */
.orbit-squash { position: absolute; left: 0; top: 0; transform: scaleY(var(--squash, 0.6)); }
.orbit { position: absolute; left: 0; top: 0; animation: orbit-spin 44s linear infinite; }
.sat {
  position: absolute; left: 0; top: 0;
  transform: rotate(var(--a)) translateX(var(--orbit-r)) rotate(calc(-1 * var(--a)));
}
.sat-inner {
  animation: orbit-unspin 44s linear infinite;
  border: 0; background: none; cursor: pointer; padding: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
}
.sat-pop {
  display: flex; flex-direction: column; align-items: center;
  transform: scaleY(calc(1 / var(--squash, 0.6)));
}
.sat-inner img, .sat-inner .sat-emoji {
  width: clamp(54px, 8vw, 72px); height: clamp(54px, 8vw, 72px);
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  border: 2px solid var(--gold-soft);
  background: var(--card);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: transform .15s;
}
.sat-inner:hover img, .sat-inner:hover .sat-emoji { transform: scale(1.08); }
.sat-inner .sat-emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 4vw, 33px);
}
.sat-composer img { border-color: var(--ec); }
.sat-event .sat-emoji { border-style: dashed; }
.sat-year {
  margin-top: -14px; z-index: 1;
  background: var(--gold); color: #fdfbf2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 1px 8px;
}
.sat-label {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: #f0ead7;
  background: rgba(24, 21, 15, .72);
  border: 1px solid rgba(201,180,117,.3);
  border-radius: 999px; padding: 2px 10px;
  max-width: 140px; text-align: center; line-height: 1.3;
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-unspin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit, .sat-inner { animation: none; }
}

/* ---------- era gallery pages ---------- */
#era-view { padding-top: 10px; }
/* era hero: a ghosted page of the Graduale Aboense behind the era's colors */
.era-hero {
  border-radius: var(--radius);
  border: 1px solid var(--gold-soft);
  background:
    radial-gradient(120% 130% at 85% -10%, color-mix(in srgb, var(--ec) 22%, transparent), transparent 55%),
    linear-gradient(rgba(253, 252, 246, .9), rgba(253, 252, 246, .96)),
    url("../assets/textures/chant.jpg") center / cover;
  padding: 18px 22px 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(60,48,20,.07);
}
.era-hero-top { margin-bottom: 10px; }
.era-hero .nav-btn { text-decoration: none; display: inline-block; }
.era-hero-main { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.era-hero-glyph {
  font-family: var(--font-display);
  font-size: clamp(54px, 8vw, 84px); line-height: 1;
  color: var(--ec);
  text-shadow: 0 2px 2px rgba(60,48,20,.14);
}
.era-hero h2 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); font-weight: 600; margin: 0; }
.era-hero-span { margin: 2px 0 8px; font-weight: 700; font-size: 12.5px; color: var(--ec); letter-spacing: .14em; }
.era-hero-blurb { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 580px; }
.era-hero-blurb + .era-hero-blurb { margin-top: 10px; }
.era-crossrefs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.era-sec {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  margin: 28px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.era-sec .h-icon { font-size: 17px; color: var(--gold); }

/* era-page at-a-glance chart */
.era-glance { margin-bottom: 6px; }
.era-glance svg { min-width: 720px; }
.eg-bar { cursor: pointer; }
.eg-bar rect { transition: opacity .15s; }
.eg-bar:hover rect, .eg-bar:focus-visible rect { opacity: .75; }
.eg-bar:focus-visible { outline: none; }
.eg-bar.eg-static { cursor: default; }
.eg-bar.eg-static:hover rect { opacity: 1; }
.eg-bar text { pointer-events: none; }
.glance-note {
  margin: -4px 2px 8px; max-width: 66ch;
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--ink-2);
}
.glance-note strong { font-style: normal; font-weight: 600; }
.glance-legend { margin: 2px 2px 12px; }
.glance-legend .ev-dot { background: var(--gold); width: 9px; height: 9px; }
.glance-band-key { color: var(--muted); font-style: italic; font-weight: 400; font-family: var(--font-display); font-size: 14px; }

/* era-page editorial summaries: the sound of the era / the world at the time */
.era-summaries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 8px clamp(24px, 4vw, 52px);
  margin-bottom: 8px;
}
.era-brief .era-sec { margin-top: 18px; }
.era-prose { margin: 0 0 14px; font-size: 15.5px; color: var(--ink); max-width: 62ch; }
.era-prose.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em; font-weight: 600; line-height: .8;
  float: left; padding: 4px 8px 0 0;
  color: var(--ec, var(--gold));
}
.listen-label {
  margin: 0 0 8px; font: 700 10.5px var(--font-body);
  text-transform: uppercase; letter-spacing: .12em; color: var(--gold);
}
.listen-for { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.listen-for li {
  position: relative; padding-left: 24px;
  font-size: 14.5px; color: var(--ink-2);
}
.listen-for li::before {
  content: "♪"; position: absolute; left: 2px; top: 0;
  color: var(--ec, var(--gold)); font-size: 14px;
}
.era-sec::after { content: ""; flex: 1; margin-left: 8px; border-top: 3px double var(--gold-soft); }
.era-events { max-width: 760px; }

/* ---------- composing tips page ---------- */
#tips-view { --ec: var(--gold); padding-top: 10px; }
.tips-hero .era-hero-glyph { font-family: var(--font-display); }
.tips-stages { display: grid; gap: 20px; margin-bottom: 24px; }
@media (min-width: 900px) {
  .tips-stages { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.tips-stage {
  background: var(--card);
  border: 1px solid var(--ring);
  border-top: 3px solid var(--ec);
  border-radius: var(--radius);
  padding: 18px 22px 22px;
  box-shadow: 0 1px 3px rgba(60, 48, 20, .06);
}
.tips-stage-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tips-num {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ec); color: #fdfbf2;
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
}
.tips-stage-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 0; line-height: 1.1; }
.tips-who { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); font-family: var(--font-display); font-style: italic; }
.tips-list li { font-size: 14px; }
.tips-list li strong { color: var(--ink); }
.tips-golden {
  max-width: 820px; margin: 20px auto 0;
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: 22px clamp(18px, 4vw, 32px) 26px;
}
.tips-golden .tips-list { display: grid; gap: 12px; }
.tips-golden .tips-list li { line-height: 1.55; }
.tip-composer {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); font-weight: 700;
  border-bottom: 1px dotted var(--gold-soft);
  transition: color .15s;
}
.tip-composer:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Learn & Create: "set your restrictions" plan box */
.plan-box {
  margin: 0 0 18px;
  background: color-mix(in srgb, var(--gold) 7%, var(--card));
  border: 1px solid var(--gold-soft); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 16px clamp(16px, 3vw, 26px) 18px;
}
.plan-title { margin: 0 0 6px; font: 600 18px var(--font-display); color: var(--ink); }
.plan-blurb { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); max-width: 74ch; }
.plan-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.plan-chip {
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px;
}
.plan-chip strong { color: var(--ink); font-family: var(--font-display); }
.plan-chip a { color: var(--gold); font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--gold-soft); }
.plan-chip a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Learn & Create: composer's workshop */
.workshop-grid { display: grid; gap: 18px; margin-bottom: 8px; }
@media (min-width: 900px) { .workshop-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.workshop-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ec); color: #fff;
  font: 700 17px var(--font-display);
}

/* Learn & Create: quick guides */
/* 2×2 at desktop — four guides (rhythm/melody/harmony/form) split
   evenly instead of leaving the fourth card orphaned on its own row */
.guide-grid { display: grid; gap: 18px; margin-bottom: 8px; }
@media (min-width: 900px) { .guide-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.guide-card {
  background: var(--card); border: 1px solid var(--ring); border-top: 3px solid var(--ec);
  border-radius: var(--radius); padding: 16px 20px 18px; box-shadow: 0 1px 3px rgba(60,48,20,.06);
}
.guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.guide-icon { font-size: 26px; line-height: 1; }
.guide-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.guide-tagline { margin: 1px 0 0; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--muted); }
.guide-body { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.guide-points li { font-size: 13.5px; }
.guide-points li::before { color: var(--ec); }
.guide-points li strong { color: var(--ink); }
.guide-try {
  margin: 14px 0 0; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ec) 10%, var(--surface));
  border-radius: 8px;
}
.guide-try-label {
  display: inline-block; margin-right: 6px;
  font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ec);
}

/* Musical Terms & Symbols — table (Learn & Create top-15 + full Glossary page) */
.term-table-wrap {
  overflow-x: auto; margin-bottom: 22px;
  border: 1px solid var(--ring); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(60, 48, 20, .06);
}
.term-two-col { display: grid; gap: 20px; align-items: start; }
@media (min-width: 760px) { .term-two-col { grid-template-columns: 1fr 1fr; } }
.term-table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 14px; }
.term-table th {
  background: var(--gold); color: #fff; text-align: left;
  font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 14px;
}
.term-table th:nth-child(2) { text-align: center; width: 80px; }
.term-table td { padding: 10px 14px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.term-table tr:nth-child(even) td { background: var(--surface); }
.term-name { font-weight: 700; color: var(--ink); font-family: var(--font-display); font-size: 16px; white-space: nowrap; }
.term-name-abbr { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--muted); }
.term-sym-cell { text-align: center; }
.term-sym { width: 40px; height: 22px; color: var(--gold); vertical-align: middle; }
.term-abbr { font: 700 13px var(--font-body); color: var(--gold); }
.term-dash { color: var(--hairline); }
.term-meaning { color: var(--ink-2); }

/* Learn & Create → Music Theory cross-links */
.learn-crosslinks { display: grid; gap: 14px; margin: 8px 0 4px; }
@media (min-width: 720px) { .learn-crosslinks { grid-template-columns: 1fr 1fr; } }
.learn-crosslink {
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  background: color-mix(in srgb, var(--gold) 8%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 12px; padding: 15px 18px;
  color: var(--ink-2); font-size: 14px; transition: border-color .15s, transform .15s;
}
.learn-crosslink:hover { border-color: var(--gold); transform: translateY(-2px); }
.learn-crosslink strong { color: var(--ink); font-family: var(--font-display); font-size: 16px; }
.lc-glyph { flex: 0 0 auto; font-family: var(--font-display); font-size: 30px; color: var(--gold); }

/* ---------- Music Theory ---------- */
#theory-view { padding-top: 10px; }
.theory-hero { --ec: var(--gold); }
.theory-badge {
  display: inline-block; margin-bottom: 8px;
  font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em;
  color: #fff; background: var(--bc, var(--gold));
  padding: 4px 11px; border-radius: 999px;
}
/* every tool page shows this badge with --bc:var(--gold) — and in the
   app's dark mode, --gold is a pale accent (meant to read as light text
   on a dark page), so white-on-gold measures ~1.9:1 there. Grade-card
   badges use an era color instead and never render in app mode, so this
   narrow fix only needs to cover the gold case. */
.theme-dark .theory-badge { color: var(--page); }

/* landing cards */
.theory-cards { display: grid; gap: 18px; margin-bottom: 18px; }
@media (min-width: 820px) { .theory-cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.theory-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--ring); border-top: 3px solid var(--tc, var(--gold));
  border-radius: var(--radius); padding: 18px 20px 20px; text-decoration: none;
  box-shadow: 0 1px 3px rgba(60, 48, 20, .06); transition: transform .15s, box-shadow .15s;
}
.theory-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.theory-card-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.theory-card-blurb { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; flex: 1; }
.theory-card-cta { font: 700 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--tc); }
.circle-card { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, var(--card)), var(--card)); }

.theory-progress { display: flex; align-items: center; gap: 10px; }
.tp-bar { flex: 1; height: 7px; background: var(--hairline); border-radius: 999px; overflow: hidden; }
.tp-bar span { display: block; height: 100%; background: var(--tc, var(--gold)); border-radius: 999px; transition: width .3s; }
.tp-count { font: 700 11px var(--font-body); color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.theory-progress-lg { max-width: 340px; margin-top: 12px; }
.theory-progress-lg .tp-bar { background: rgba(255,255,255,.5); }

.theory-footnote { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.theory-footnote a { color: var(--gold); font-style: normal; font-weight: 600; }

/* grade contents */
.grade-subhead { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 22px 0 12px; }
.grade-subhead-note { font-family: var(--font-body); font-style: normal; font-size: 13px; font-weight: 400; color: var(--muted); display: block; margin-top: 2px; }
.chapter-list { display: grid; gap: 10px; margin-bottom: 8px; }
.chapter-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--ring); border-radius: 12px;
  padding: 13px 16px; text-decoration: none; transition: border-color .15s, transform .15s;
}
.chapter-row:hover { border-color: var(--gold); transform: translateX(2px); }
.chapter-tick {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--hairline); color: var(--muted);
  font: 700 13px var(--font-body); background: var(--surface);
}
.chapter-row.is-done .chapter-tick { background: var(--era-renaissance); border-color: var(--era-renaissance); color: #fff; }
.chapter-row-main { flex: 1; min-width: 0; }
.chapter-name { display: block; font: 600 16px var(--font-display); color: var(--ink); }
.chapter-sub { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.chapter-go { flex: 0 0 auto; color: var(--muted); font-size: 16px; }

.theory-inline-callout {
  display: flex; gap: 12px; align-items: center; margin-top: 18px;
  background: color-mix(in srgb, var(--gold) 9%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 12px; padding: 14px 18px;
  text-decoration: none; color: var(--ink-2); font-size: 14.5px;
}
.theory-inline-callout:hover { border-color: var(--gold); }
.theory-inline-callout strong { color: var(--ink); }
.tic-glyph { font-size: 22px; color: var(--gold); flex: 0 0 auto; }

/* contact page: the form */
.contact-form {
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: 22px clamp(18px, 4vw, 32px) 24px; max-width: 720px; margin: 0 auto;
}
.cf-row.cf-two { display: grid; gap: 14px; }
@media (min-width: 640px) { .cf-row.cf-two { grid-template-columns: 1fr 1fr; } }
.cf-field { display: block; margin-bottom: 14px; }
.cf-label { display: block; margin-bottom: 5px; font: 600 13.5px var(--font-display); color: var(--ink); }
.cf-req { color: var(--gold); }
.cf-opt { font: italic 12px var(--font-display); color: var(--muted); }
.cf-input {
  width: 100%; box-sizing: border-box;
  font: 14px var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
.cf-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.cf-textarea { resize: vertical; min-height: 120px; }
.cf-select { appearance: auto; }
.cf-honeypot { position: absolute; left: -9999px; opacity: 0; }
.cf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cf-submit:disabled { opacity: .55; cursor: default; }
.cf-status { font-size: 13px; color: var(--muted); }
.cf-status.cf-error { color: var(--era-romantic); font-weight: 600; }
.cf-note { margin-top: 16px; }
.contact-thanks {
  max-width: 620px; margin: 24px auto; text-align: center;
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: 34px clamp(18px, 4vw, 40px) 30px;
}
.ct-glyph { font-size: 40px; display: block; margin-bottom: 8px; }
.ct-title { margin: 0 0 8px; font: 600 24px var(--font-display); color: var(--ink); }
.ct-body { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); }

/* grade-pack download banner */
.pack-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--era-classical) 10%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 12px;
  padding: 14px 18px; margin: 0 0 18px;
}
.pack-ico { font-size: 24px; flex: 0 0 auto; }
.pack-banner-text { flex: 1; min-width: 220px; font-size: 14px; color: var(--ink-2); }
.pack-banner-text strong { color: var(--ink); }
.pack-banner .pdf-btn { flex: 0 0 auto; background: var(--era-classical); }

/* chapter page */
.chapter-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chapter-topbar .nav-btn { text-decoration: none; }
.chapter-topbar .theory-badge { margin-bottom: 0; }
/* Music Theory chapter pages: compact typography & spacing so a chapter
   fits with much less scrolling. Section headings (.era-sec) are scoped
   under #theory-view here so other pages keep their larger headings. */
#theory-view .era-sec { font-size: 19px; margin: 18px 0 10px; }
#theory-view .era-sec .h-icon { font-size: 14px; }
.chapter-header { margin-bottom: 6px; }
.chapter-eyebrow { font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.chapter-title { font-family: var(--font-display); font-size: clamp(21px, 3vw, 27px); font-weight: 600; margin: 3px 0 5px; }
.chapter-intro { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 66ch; margin: 0; }
.chapter-block { margin-top: 15px; }
.content-placeholder {
  display: flex; gap: 12px; align-items: flex-start;
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, color-mix(in srgb, var(--gold) 5%, var(--surface)) 10px, color-mix(in srgb, var(--gold) 5%, var(--surface)) 20px);
  border: 1px dashed var(--gold-soft); border-radius: 10px; padding: 12px 14px;
  color: var(--ink-2); font-size: 13px; font-style: italic; font-family: var(--font-display);
}
.cp-mark { flex: 0 0 auto; font-size: 18px; color: var(--gold); font-style: normal; }

/* explainer prose + notation graphics */
.explainer-p { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.explainer-p strong { color: var(--ink); }
.mini-staff-wrap {
  background: var(--card); border: 1px solid var(--ring); border-radius: 9px;
  padding: 7px 11px; margin: 5px 0 10px; overflow-x: auto;
}
.mini-staff-svg { display: block; min-width: 180px; max-width: 300px; color: var(--ink); }

/* step-chain (scale formulas / degrees) */
.step-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 7px 0 11px; }
.step-badge {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; flex: 0 0 auto;
  border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-display); color: var(--ink); background: var(--card); white-space: nowrap;
}
.step-conn { font: 700 10.5px var(--font-body); color: var(--gold); padding: 0 5px; white-space: nowrap; }

/* note-value table */
.value-table { display: grid; gap: 5px; margin: 5px 0 11px; }
.value-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--ring); border-radius: 9px; padding: 6px 12px;
}
.note-icon { width: 18px; height: 27px; flex: 0 0 auto; color: var(--ink); }
.value-name { font: 700 13px var(--font-display); flex: 1 1 140px; color: var(--ink); }
.value-beats { font: 700 12px var(--font-body); color: var(--gold); flex: 0 0 auto; min-width: 44px; }
.value-rest { font-size: 12px; color: var(--muted); flex: 1 1 140px; }

/* worked examples */
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; align-items: start; }
.example-card {
  background: var(--card); border: 1px solid var(--ring); border-left: 3px solid var(--gold);
  border-radius: 9px; padding: 10px 13px;
}
.example-num {
  display: inline-block; font: 700 9px var(--font-body); text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold); margin-bottom: 2px;
}
.example-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin: 0 0 3px; }
.example-body { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.example-card .mini-staff-wrap, .example-card .step-chain, .example-card .value-table { margin-top: 7px; margin-bottom: 0; }
/* staff diagrams inside the denser worked-example grid render more
   compact than the explainer's, so example cards stay proportionate
   to their (now smaller) text — consistent across all chapters. */
.example-card .mini-staff-wrap { padding: 5px 8px; }
.example-card .mini-staff-svg { min-width: 160px; max-width: 250px; }

/* chapter practice quiz — reuses the Maestro Quiz's q-* classes, but
   scaled down here so it stays compact (the standalone quiz keeps its size) */
.chapter-quiz-box { box-shadow: none; padding: 16px 18px 18px; }
.chapter-quiz-box .q-text { font-size: clamp(16px, 2.4vw, 20px); margin: 8px 0 12px; }
.chapter-quiz-box .q-options { gap: 8px; margin-top: 10px; }
.chapter-quiz-box .q-option { font-size: 13.5px; padding: 10px 13px; }
.chapter-quiz-box .q-feedback { font-size: 13px; padding: 11px 13px; margin-top: 12px; }
.chapter-quiz-box .q-feedback p { margin: 0 0 10px; }

.pdf-note { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-display); font-style: italic; }

/* Reference sheet — compact download card (replaces the old inline
   PDF iframe, which trapped page scrolling inside the viewer). */
.ref-sheet-card {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--gold-soft); border-radius: 12px;
  background: var(--card); padding: 14px 18px;
  box-shadow: 0 1px 4px rgba(60, 45, 20, .06);
}
.ref-sheet-thumb {
  flex: 0 0 auto; position: relative;
  width: 64px; height: 84px; border-radius: 4px;
  background: #faf7ee; border: 1px solid var(--gold-soft);
  box-shadow: 2px 2px 0 rgba(60, 45, 20, .08);
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 10px 9px 10px 24px;
}
.ref-sheet-thumb .rst-clef {
  position: absolute; left: 5px; top: 50%; transform: translateY(-54%);
  font-size: 26px; color: var(--gold); font-family: var(--font-display);
}
.ref-sheet-thumb .rst-line { display: block; height: 1.5px; background: var(--ink); opacity: .55; border-radius: 1px; }
.ref-sheet-thumb .rst-line.short { width: 70%; }
.ref-sheet-info { min-width: 0; }
.ref-sheet-title { margin: 0 0 4px; font: 600 15px var(--font-display); color: var(--ink); }
.ref-sheet-desc { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pdf-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; }
@media (max-width: 560px) {
  .ref-sheet-card { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.pdf-btn {
  display: inline-block; text-decoration: none;
  font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--gold); padding: 11px 20px; border-radius: 999px;
  transition: filter .15s;
}
.pdf-btn:hover { filter: brightness(1.1); }
.pdf-dl { background: var(--ink); }
.pdf-btn.pdf-pending { background: var(--surface); color: var(--muted); border: 1px dashed var(--gold-soft); cursor: default; }
.pdf-btn.pdf-pending:hover { filter: none; }

/* "Now compose with it" — one-line composing prompt per chapter */
.compose-callout {
  margin: 14px 0 0;
  background: color-mix(in srgb, var(--gold) 8%, var(--card));
  border: 1px solid var(--gold-soft); border-left: 4px solid var(--gold);
  border-radius: 10px; padding: 11px 15px 12px;
}
.compose-callout-label {
  display: block; margin-bottom: 3px;
  font: 700 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold);
}
.compose-callout-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.chapter-complete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.complete-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); background: var(--card); border: 1.5px solid var(--hairline);
  padding: 10px 18px; border-radius: 999px; transition: all .15s;
}
.complete-btn:hover { border-color: var(--era-renaissance); }
.complete-btn .cb-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.complete-btn.is-done { border-color: var(--era-renaissance); color: var(--era-renaissance); }
.complete-btn.is-done .cb-box { background: var(--era-renaissance); border-color: var(--era-renaissance); }
.complete-note { font-size: 12.5px; color: var(--muted); font-family: var(--font-display); font-style: italic; }

.chapter-nav { display: flex; gap: 12px; align-items: stretch; margin-top: 14px; }
.cn-link {
  flex: 1; text-decoration: none; border: 1px solid var(--ring); border-radius: 12px;
  padding: 12px 16px; background: var(--card); transition: border-color .15s;
  display: flex; flex-direction: column; gap: 2px;
}
.cn-link:hover { border-color: var(--gold); }
.cn-link span { font: 700 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cn-link strong { font: 600 14px var(--font-display); color: var(--ink); }
.cn-next { text-align: right; }
.cn-contents { flex: 0 0 auto; align-items: center; justify-content: center; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.cn-empty { flex: 1; visibility: hidden; }

/* Circle of Fifths */
.circle-wrap { display: grid; gap: 22px; align-items: start; margin-bottom: 8px; }
@media (min-width: 820px) { .circle-wrap { grid-template-columns: minmax(0, 460px) 1fr; } }
.circle-stage {
  background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius);
  padding: 14px; box-shadow: 0 1px 3px rgba(60, 48, 20, .06);
}
.circle-stage svg { display: block; width: 100%; height: auto; }
.cof-hub { fill: var(--surface); stroke: var(--gold-soft); stroke-width: 1; }
.cof-hub-label { font-family: var(--font-display); font-style: italic; font-size: 15px; fill: var(--muted); }
.cof-slot { cursor: pointer; }
.cof-wedge { stroke: var(--card); stroke-width: 2; transition: fill .12s; }
.cof-major { fill: color-mix(in srgb, var(--gold) 14%, var(--card)); }
.cof-minor { fill: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.cof-slot:hover .cof-major { fill: color-mix(in srgb, var(--gold) 30%, var(--card)); }
.cof-slot:hover .cof-minor { fill: color-mix(in srgb, var(--gold) 16%, var(--card)); }
.cof-slot.is-sel .cof-major { fill: var(--gold); }
.cof-slot.is-sel .cof-minor { fill: color-mix(in srgb, var(--gold) 40%, var(--card)); }
.cof-slot:focus-visible { outline: none; }
.cof-slot:focus-visible .cof-major { fill: color-mix(in srgb, var(--gold) 30%, var(--card)); }
.cof-label { font-family: var(--font-display); font-weight: 600; fill: var(--ink); pointer-events: none; }
.cof-major-label { font-size: 19px; }
.cof-minor-label { font-size: 13px; fill: var(--ink-2); }
.cof-slot.is-sel .cof-major-label { fill: #fff; }
.circle-stage.quiz-on .cof-label { opacity: 0; }

.circle-info {
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: 18px 20px; min-height: 200px;
}
.ci-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.ci-tips { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.ci-key-head { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--gold-soft); padding-bottom: 8px; margin-bottom: 12px; }
.ci-major { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--gold); line-height: 1; }
.ci-major-tag { font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ci-facts { margin: 0; }
.ci-facts > div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.ci-facts dt { flex: 0 0 118px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.ci-facts dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.ci-prompt { margin-top: 14px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.ci-prompt-label { display: inline-block; margin-right: 6px; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }

.ci-quiz-tag { display: inline-block; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--gold); padding: 3px 10px; border-radius: 999px; }
.ci-quiz-q { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 12px 0; line-height: 1.3; }
.ci-quiz-fb { min-height: 1.2em; font-size: 14px; margin: 8px 0 12px; }
.ci-quiz-fb.ok { color: #3c6331; font-weight: 600; }
.ci-quiz-fb.no { color: #a8453f; }

.circle-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 8px; }
.circle-controls .nav-btn { cursor: pointer; }
.circle-controls-note { font-size: 13px; color: var(--muted); font-family: var(--font-display); font-style: italic; }
.circle-uses li strong { color: var(--ink); }
.circle-uses li::before { color: var(--gold); }

/* ---------- Scale Explorer ---------- */
.scale-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.scale-type-btn {
  cursor: pointer; border: 1px solid var(--gold-soft); background: var(--card);
  color: var(--ink-2); font: 700 12px var(--font-body);
  padding: 8px 14px; border-radius: 999px; transition: background .12s, color .12s, border-color .12s;
}
.scale-type-btn:hover { background: #f2eddd; border-color: var(--gold); }
.scale-type-btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

.scale-wrap { display: grid; gap: 22px; align-items: start; margin-bottom: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .scale-wrap { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.scale-wrap > * { min-width: 0; } /* let both columns shrink instead of overflowing the page */

.scale-keys {
  min-width: 0;
  background: var(--stage); border-radius: 12px; padding: 14px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.28); overflow-x: auto;
}
.piano-svg { display: block; width: 100%; height: auto; } /* scales to fit via viewBox — no page overflow on narrow screens */
.pk { cursor: pointer; }
.pk-face { transition: fill .1s; }
.pk-white .pk-face { fill: #f6f1e4; stroke: #cfc6ad; stroke-width: 1; }
.pk-black .pk-face { fill: #2c281f; stroke: #000; stroke-width: 1; }
.pk-white:hover .pk-face { fill: #fffdf6; }
.pk-black:hover .pk-face { fill: #453f30; }
.pk-white.in-scale .pk-face { fill: color-mix(in srgb, var(--gold-soft) 55%, #fffdf4); }
.pk-black.in-scale .pk-face { fill: color-mix(in srgb, var(--gold) 62%, #2c281f); }
.pk.is-root .pk-face { fill: var(--gold); stroke: #6f5a1f; }
.pk.sounding .pk-face { fill: #fff; stroke: var(--gold); stroke-width: 2; }
.pk-name { font: 700 11px var(--font-body); fill: var(--ink); pointer-events: none; }
.pk-name-b { fill: #f3ecd6; }
.pk.is-root .pk-name { fill: #fff; }
.pk:focus-visible { outline: none; }
.pk:focus-visible .pk-face { stroke: var(--gold); stroke-width: 2.5; }

.scale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.scale-controls .play-btn { cursor: pointer; }
.scale-controls .play-btn.is-playing { filter: brightness(1.12); opacity: .85; }
.scale-hint { font-size: 13px; color: var(--muted); font-family: var(--font-display); font-style: italic; }

.scale-info { background: var(--card); border: 1px solid var(--ring); border-radius: 12px; padding: 18px 20px; }
.si-head { margin-bottom: 12px; }
.si-name { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.si-alt { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.si-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.si-note {
  font: 700 13px var(--font-body); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 4px 9px;
}
.si-note.is-root { background: var(--gold); border-color: var(--gold); color: #fff; }
.si-formula { margin: 6px 0 14px; }
.si-formula-label, .si-pattern-label { display: block; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.si-formula-note { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.si-desc { font-size: 14.5px; color: var(--ink); margin: 0 0 4px; }
.scale-info .mini-staff-wrap { margin: 4px 0 8px; }
.scale-info .mini-staff-svg { min-width: 0; max-width: 100%; }

/* ---------- Key & Chord Wheel ---------- */
.kcw-selectors { margin-bottom: 18px; }
.kcw-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kcw-key-btn {
  cursor: pointer; border: 1px solid var(--gold-soft); background: var(--card);
  color: var(--ink-2); font: 700 12px var(--font-body);
  min-width: 40px; padding: 7px 10px; border-radius: 8px; text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.kcw-key-btn:hover { background: #f2eddd; border-color: var(--gold); }
.kcw-key-btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

.kcw-wrap { align-items: start; }
@media (min-width: 860px) { .kcw-wrap { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.kcw-stage { max-width: 420px; margin: 0 auto; }
.kcw-stage svg { display: block; width: 100%; height: auto; }
.kcw-hub { fill: var(--surface); stroke: var(--gold-soft); stroke-width: 1; }
.kcw-hub-key { font-family: var(--font-display); font-weight: 600; font-size: 26px; fill: var(--ink); }
.kcw-hub-mode { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--muted); }
.kcw-seg { cursor: pointer; }
.kcw-wedge { stroke: var(--card); stroke-width: 2; transition: fill .12s; }
/* function families — subtle tints of the era palette */
.fn-tonic .kcw-outer { fill: color-mix(in srgb, var(--era-renaissance) 22%, var(--card)); }
.fn-tonic .kcw-inner { fill: color-mix(in srgb, var(--era-renaissance) 10%, var(--surface)); }
.fn-subdominant .kcw-outer { fill: color-mix(in srgb, var(--era-baroque) 20%, var(--card)); }
.fn-subdominant .kcw-inner { fill: color-mix(in srgb, var(--era-baroque) 9%, var(--surface)); }
.fn-dominant .kcw-outer { fill: color-mix(in srgb, var(--era-romantic) 20%, var(--card)); }
.fn-dominant .kcw-inner { fill: color-mix(in srgb, var(--era-romantic) 9%, var(--surface)); }
.kcw-seg:hover .kcw-outer { filter: brightness(0.94); }
.kcw-seg.is-sel.fn-tonic .kcw-outer { fill: var(--era-renaissance); }
.kcw-seg.is-sel.fn-subdominant .kcw-outer { fill: var(--era-baroque); }
.kcw-seg.is-sel.fn-dominant .kcw-outer { fill: var(--era-romantic); }
.kcw-seg.is-sel .kcw-inner { fill: color-mix(in srgb, var(--gold) 20%, var(--card)); }
.kcw-seg.sounding .kcw-outer { fill: var(--gold); }
.kcw-seg.sounding .kcw-roman, .kcw-seg.sounding .kcw-chord { fill: #fff; }
.kcw-roman { font-family: var(--font-display); font-weight: 700; font-size: 21px; fill: var(--ink); pointer-events: none; }
.kcw-chord { font: 700 12px var(--font-body); fill: var(--ink-2); pointer-events: none; }
.kcw-seg.is-sel .kcw-roman { fill: #fff; }
.kcw-seg.is-sel .kcw-chord { fill: rgba(255,255,255,.9); }
.kcw-seg:focus-visible { outline: none; }
.kcw-seg:focus-visible .kcw-outer { filter: brightness(0.9); }

.kcw-progs { margin-top: 16px; }
.kcw-progs-label { display: block; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.kcw-prog-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kcw-prog-btn {
  cursor: pointer; border: 1px solid var(--gold-soft); background: var(--card);
  color: var(--ink); font: 700 13px var(--font-body);
  padding: 8px 14px; border-radius: 999px; transition: background .12s, border-color .12s;
}
.kcw-prog-btn:hover { background: #f2eddd; border-color: var(--gold); }

.kcw-info-card .ci-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.kcw-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.kcw-fn-key { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.kcw-fn-key li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.kcw-fn-key strong { color: var(--ink); }
.kcw-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }
.fn-tonic > .kcw-swatch { background: var(--era-renaissance); }
.fn-subdominant > .kcw-swatch { background: var(--era-baroque); }
.fn-dominant > .kcw-swatch { background: var(--era-romantic); }
.kcw-hint-line { font-size: 13px; color: var(--muted); font-style: italic; margin: 0; }

.kcw-chord-head { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }
.kcw-chord-head.fn-tonic { background: color-mix(in srgb, var(--era-renaissance) 14%, var(--surface)); }
.kcw-chord-head.fn-subdominant { background: color-mix(in srgb, var(--era-baroque) 13%, var(--surface)); }
.kcw-chord-head.fn-dominant { background: color-mix(in srgb, var(--era-romantic) 13%, var(--surface)); }
.kcw-chord-roman { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); }
.kcw-chord-name { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.kcw-chord-quality { display: block; font-size: 12.5px; color: var(--muted); }
.kcw-chord-notes { margin-bottom: 12px; }
.kcw-fn-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 11px var(--font-body); color: #fff; }
.kcw-fn-tag.fn-tonic { background: var(--era-renaissance); }
.kcw-fn-tag.fn-subdominant { background: var(--era-baroque); }
.kcw-fn-tag.fn-dominant { background: var(--era-romantic); }
.kcw-blurb { font-size: 14px; color: var(--ink); margin: 12px 0 14px; }
.kcw-hear { cursor: pointer; }
.kcw-stage.quiz-on .kcw-roman, .kcw-stage.quiz-on .kcw-chord { opacity: 0; }

/* ---------- Quiz-mode keyboard reveal (Scale Explorer / Chord Builder) ---------- */
.scq-reveal { margin: 4px 0 14px; max-width: 420px; }
.scq-reveal .scale-keys { padding: 10px; }

/* ---------- Interval Trainer ---------- */
.itv-modes, .itv-pills { margin-bottom: 16px; }
.itv-pill { font-weight: 600; }
.itv-arrow { align-self: center; color: var(--gold); font-weight: 700; }
.itv-play { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.itv-play .play-btn { cursor: pointer; }
.itv-harm { background: var(--card); color: var(--ink); border: 1px solid var(--gold-soft); }
.itv-harm:hover { background: #f2eddd; filter: none; }

.itv-ear { background: var(--card); border: 1px solid var(--ring); border-radius: 12px; padding: 20px; }
.itv-ear-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.itv-score { font-size: 14px; color: var(--ink-2); }
.itv-score strong { color: var(--ink); }
.itv-ear-main { text-align: center; }
.itv-big { cursor: pointer; font-size: 15px; padding: 14px 28px; }
.itv-ear-instr { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-2); margin: 14px 0 16px; }
.itv-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 460px; margin: 0 auto; }
@media (min-width: 620px) { .itv-answers { grid-template-columns: repeat(3, 1fr); } }
.itv-ans {
  cursor: pointer; border: 1px solid var(--gold-soft); background: var(--surface);
  color: var(--ink); font: 700 13px var(--font-body); padding: 11px 8px; border-radius: 9px;
  transition: background .12s, border-color .12s;
}
.itv-ans:hover:not(:disabled) { background: #f2eddd; border-color: var(--gold); }
.itv-ans:disabled { cursor: default; opacity: .85; }
.itv-ans.right { background: #cfe0c1; border-color: #7fa564; color: #2f4a24; opacity: 1; }
.itv-ans.wrong { background: #edc9c5; border-color: #c07a72; color: #7a2f28; opacity: 1; }
.itv-fb { margin-top: 16px; font-size: 14px; }
.itv-fb.ok { color: #3c6331; }
.itv-fb.no { color: #a8453f; }
.itv-fb p { margin: 0 0 12px; }
.itv-fb .itv-next { cursor: pointer; }

/* ---------- Sprint mode (Interval Trainer) ---------- */
.itv-sprint-btn { margin-left: auto; }
.itv-ear-scoreline { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 4px; }
.itv-sprint-time {
  /* a dedicated shade, not var(--gold) directly — the shared token
     measures under 4.5:1 with white text in light mode, and in dark
     mode it's a pale accent never meant to sit under white text at all
     (see the .theory-badge fix alongside this one) */
  font: 800 15px var(--font-body); color: #fff; background: #7a6122;
  border-radius: 999px; padding: 3px 12px; min-width: 42px; text-align: center;
}
.theme-dark .itv-sprint-time { color: var(--page); background: var(--gold); }
.itv-sprint-time.low { color: #a8453f; border-color: #c07a72; background: #f8ece9; }
.itv-sprint-results { padding: 8px 0 4px; }
.itv-sprint-headline { font: 700 20px var(--font-display); margin: 0 0 8px; }
.itv-sprint-tally { font-size: 15px; color: var(--ink-2); margin: 0 0 4px; }
.itv-sprint-tally strong { color: var(--ink); font-size: 17px; }
.itv-sprint-best { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.itv-sprint-again { cursor: pointer; }

/* ---------- Chord Builder ---------- */
.chb-pills { margin-bottom: 16px; }
.chb-formula { display: inline-block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--gold); letter-spacing: .04em; margin: 2px 0; }

/* ---------- Rhythm Bar Builder ---------- */
.rbb-sigs { margin-bottom: 18px; }
.rbb-sig-btn { font-family: var(--font-display); font-size: 17px; font-weight: 700; min-width: 46px; }

.rbb-bar {
  display: flex; align-items: stretch; gap: 6px; min-height: 104px;
  background: var(--card); border: 1px solid var(--gold-soft);
  border-radius: 10px 4px 4px 10px; border-right: 4px solid var(--ink);
  padding: 10px 8px 10px 6px; overflow-x: auto;
}
.rbb-timesig {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: .95;
  color: var(--ink); padding: 0 12px; border-right: 1px solid var(--hairline); flex: 0 0 auto;
}
.rbb-slots { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.rbb-empty { color: var(--muted); font-style: italic; font-family: var(--font-display); font-size: 15px; padding-left: 8px; align-self: center; }
.rbb-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 4px 3px 2px; cursor: pointer; color: var(--ink); transition: background .1s, border-color .1s;
}
.rbb-item:hover { background: color-mix(in srgb, #a8453f 12%, var(--card)); border-color: #d8a9a4; }
.rbb-item.is-rest { color: var(--ink-2); }
.rbb-item.playing { background: var(--gold); color: #fff; border-color: var(--gold); }
.rv-icon { width: 26px; height: 40px; display: block; }
.rbb-item-beats { font: 700 9.5px var(--font-body); color: var(--muted); }
.rbb-item.playing .rbb-item-beats { color: #fff; }

.rbb-status { margin: 16px 0 18px; }
.rbb-meter { height: 12px; background: var(--hairline); border-radius: 999px; overflow: hidden; }
.rbb-meter-fill { display: block; height: 100%; border-radius: 999px; transition: width .2s; }
.rbb-under .rbb-meter-fill { background: var(--gold-soft); }
.rbb-ok .rbb-meter-fill { background: var(--era-renaissance); }
.rbb-over .rbb-meter-fill { background: #a8453f; }
.rbb-meter-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.rbb-msg strong { color: var(--ink); }
.rbb-ok .rbb-msg strong { color: var(--era-renaissance); }
.rbb-over .rbb-msg strong { color: #a8453f; }

.rbb-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.rbb-controls .play-btn, .rbb-controls .nav-btn { cursor: pointer; }

.rbb-pal { display: grid; gap: 12px; }
.rbb-pal-row { display: flex; align-items: flex-start; gap: 12px; }
.rbb-pal-label { flex: 0 0 44px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 18px; }
.rbb-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.rbb-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 78px; padding: 8px 4px 7px; cursor: pointer;
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: 10px;
  color: var(--ink); transition: transform .1s, box-shadow .1s, border-color .1s;
}
.rbb-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); }
.rbb-chip-ico { height: 40px; display: flex; align-items: center; }
.rbb-chip-ico .rv-icon { width: 24px; height: 38px; }
.rbb-chip-name { font: 700 10.5px var(--font-body); color: var(--ink); text-align: center; line-height: 1.15; }
.rbb-chip-beats { font-size: 10px; color: var(--muted); }

/* Complete-the-bar challenge */
.rbb-complete-instr { font-size: 14.5px; color: var(--ink-2); margin: 0 0 14px; max-width: 68ch; }
.rbb-item.is-given { cursor: default; background: color-mix(in srgb, var(--gold) 9%, var(--card)); border-color: var(--hairline); }
.rbb-item.is-given:hover { background: color-mix(in srgb, var(--gold) 9%, var(--card)); border-color: var(--hairline); }
.rbb-item.is-given.is-rest { color: var(--ink-2); }
.rbb-gap {
  display: inline-flex; align-items: center; gap: 4px; align-self: center;
  min-height: 54px; padding: 3px 8px; margin: 0 3px; border-radius: 8px;
  border: 2px dashed var(--gold-soft); background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.rbb-gap-full { border-color: var(--era-renaissance); background: color-mix(in srgb, var(--era-renaissance) 11%, transparent); }
.rbb-gap-over { border-color: #a8453f; background: color-mix(in srgb, #a8453f 9%, transparent); }
.rbb-gap-hint { color: var(--muted); font-style: italic; font-family: var(--font-display); font-size: 13px; padding: 0 8px; white-space: nowrap; }
.rbb-gapstatus { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 14px 0 4px; }
.rbb-gapmsg { font-size: 13.5px; color: var(--ink-2); }
.rbb-gapmsg.over { color: #a8453f; }
.rbb-gapmsg strong { color: var(--ink); }

/* ---------- Metronome ---------- */
/* ---------- The Drone tool ---------- */
.drone-panel {
  max-width: 640px; margin: 0 auto; display: grid; gap: 20px;
  background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow);
}
.drone-display { text-align: center; }
.drone-note { display: block; font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: 1; color: var(--ink); }
.drone-state {
  display: inline-block; margin-top: 8px;
  font: 700 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 3px 12px;
}
.drone-state.on { color: #fff; background: var(--gold); border-color: var(--gold); }
.drone-kb { position: relative; display: flex; height: 172px; user-select: none; margin: 0 auto; max-width: 560px; width: 100%; }
.dk { padding: 0; cursor: pointer; font-family: var(--font-body); }
.dk-white {
  flex: 1 1 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 7px; background: linear-gradient(180deg, #fffdf8, #f3eddf);
  border: 1px solid #c7bc9d; border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.05); transition: background .12s;
}
.dk-white:hover { background: linear-gradient(180deg, #fffef9, #efe7d3); }
.dk-white.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, #fff), color-mix(in srgb, var(--gold) 44%, #fff)); border-color: var(--gold); }
.dk-lbl { font-size: 10px; font-weight: 600; color: var(--muted); pointer-events: none; }
.dk-white.sel .dk-lbl { color: var(--ink); }
.dk-mid { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font: 700 7.5px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--gold); white-space: nowrap; pointer-events: none; }
.dk-black {
  position: absolute; top: 0; transform: translateX(-50%); height: 62%;
  background: linear-gradient(180deg, #403829, #1e1a12); border: 1px solid #141009;
  border-radius: 0 0 6px 6px; z-index: 2; box-shadow: 0 3px 5px rgba(0,0,0,.4); transition: background .12s;
}
.dk-black:hover { background: linear-gradient(180deg, #4d4433, #2a2418); }
.dk-black.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, #000), var(--gold)); border-color: var(--gold); }
.drone-hint { text-align: center; font-size: 13px; color: var(--ink-2); margin: 0; }
.drone-controls { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.play-btn.drone-toggle.is-running { background: var(--ink); }
.drone-vol { display: flex; align-items: center; gap: 8px; }
.drone-vol input { width: 120px; accent-color: var(--gold); cursor: pointer; }
.drone-vol-ico { font-size: 16px; }

/* ---------- Cadence Ear-Trainer tool ---------- */
.cad-panel {
  max-width: 560px; margin: 0 auto; display: grid; gap: 16px;
  background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow);
}
.cad-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cad-score { font: 600 16px var(--font-display); color: var(--ink); }
.cad-key {
  font: 700 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 999px; padding: 4px 12px;
}
.cad-toggles { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.cad-toggle { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cad-toggle input { accent-color: var(--gold); }
.cad-toggle-note { color: var(--muted); font-style: italic; }
.cad-prompt { text-align: center; font-family: var(--font-display); font-size: 17px; color: var(--ink-2); margin: 4px 0; min-height: 1.4em; }
.cad-controls { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.cad-controls .play-btn, .cad-controls .nav-btn { cursor: pointer; }
.cad-phase {
  text-align: center; font: 600 15px var(--font-display); color: var(--ink);
  background: color-mix(in srgb, var(--gold) 14%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 10px; padding: 10px 14px;
}
.cad-phase.show { animation: cadPhaseIn .25s ease; }
.cad-phase-ico { font-size: 18px; margin-right: 4px; }
@keyframes cadPhaseIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.cad-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.cad-ans {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px; background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: 12px; cursor: pointer; transition: background .12s, border-color .12s;
}
.cad-ans:hover:not(:disabled) { background: #f2eddd; border-color: var(--gold); }
.cad-ans:disabled { cursor: default; opacity: .9; }
.cad-ans-name { font: 600 15px var(--font-display); color: var(--ink); }
.cad-ans-sub { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.cad-ans.right { background: #cfe0c1; border-color: #7fa564; opacity: 1; }
.cad-ans.right .cad-ans-name, .cad-ans.right .cad-ans-sub { color: #2f4a24; }
.cad-ans.wrong { background: #edc9c5; border-color: #c07a72; opacity: 1; }
.cad-ans.wrong .cad-ans-name, .cad-ans.wrong .cad-ans-sub { color: #7a2f28; }
.cad-fb { font-size: 14px; line-height: 1.5; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); }
.cad-fb.ok { background: #eff3e4; border-color: #b5cda0; color: #3c6331; }
.cad-fb.no { background: #f8ece8; border-color: #e0b8b2; color: #a8453f; }
.cad-fb p { margin: 0 0 12px; }
.cad-fb strong { color: inherit; }
.cad-fb-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 420px) { .cad-answers { grid-template-columns: 1fr; } }

.met-panel {
  max-width: 560px; margin: 0 auto; display: grid; gap: 26px;
  background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.met-tempo { text-align: center; }
.met-bpm { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.met-bpm #met-bpm { font-size: 58px; line-height: 1; }
.met-bpm-unit { font-size: 18px; color: var(--muted); letter-spacing: .05em; }
.met-term { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--gold); margin: 2px 0 16px; }
.met-slider { width: 100%; max-width: 380px; accent-color: var(--gold); cursor: pointer; }
.met-tempo-btns { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; }
.met-tempo-btns .nav-btn { cursor: pointer; }
.met-step { font-size: 18px; font-weight: 700; min-width: 40px; line-height: 1; }

.met-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.met-dots { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.met-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--gold-soft); transition: transform .05s;
}
.met-dot.strong { width: 24px; height: 24px; border-color: var(--gold); }
.met-dot.med { border-color: var(--gold); }
.met-dot.grouped { margin-left: 16px; }
.met-dot.on { background: var(--gold-soft); border-color: var(--gold); transform: scale(1.35); }
.met-dot.strong.on { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent); }
.met-dot.med.on { background: var(--gold); }
.met-toggle { cursor: pointer; font-size: 15px; padding: 13px 34px; }
.met-toggle.is-running { background: #a8453f; }

.met-sig { text-align: center; border-top: 1px solid var(--hairline); padding-top: 20px; }
.met-sig-label { display: block; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.met-sig-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.met-stepper { display: flex; align-items: center; gap: 8px; }
.met-stepper button, .met-den-btn {
  cursor: pointer; border: 1px solid var(--gold-soft); background: var(--card); color: var(--ink);
  font: 700 16px var(--font-body); width: 38px; height: 38px; border-radius: 8px; transition: background .12s, border-color .12s;
}
.met-stepper button:hover, .met-den-btn:hover { background: #f2eddd; border-color: var(--gold); }
.met-stepper #met-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; min-width: 34px; color: var(--ink); }
.met-sig-slash { font-family: var(--font-display); font-size: 30px; color: var(--muted); margin: 0 2px; }
.met-dens { display: flex; gap: 6px; }
.met-den-btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.met-sig-name { margin-top: 14px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-2); }

/* ---------- Resources page ---------- */
#resources-view { padding-top: 10px; }
.resource-grid { display: grid; gap: 16px; margin-bottom: 8px; }
@media (min-width: 720px) { .resource-grid { grid-template-columns: 1fr 1fr; } }
.resource-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--ring); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 16px 18px;
}
.rc-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  color: var(--gold); font-size: 24px; font-family: var(--font-display);
}
.rc-body { flex: 1; min-width: 0; }
.rc-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.rc-desc { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.rc-actions .pdf-btn { padding: 9px 16px; font-size: 11px; }
.resource-note {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--ink-2); max-width: 66ch; margin: -4px 0 14px;
}
.resource-grid-packs { grid-template-columns: 1fr; }
@media (min-width: 720px) { .resource-grid-packs { grid-template-columns: repeat(3, 1fr); } }
.resource-card-pack { border-left-color: var(--era-classical); flex-direction: column; }
.resource-card-pack .rc-icon { background: color-mix(in srgb, var(--era-classical) 14%, var(--surface)); color: var(--era-classical); }
.rc-badge {
  font: 700 9px var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--era-classical); padding: 2px 8px; border-radius: 999px;
  vertical-align: middle; position: relative; top: -2px;
}

/* ---------- Listening Corner ---------- */
#listening-view { padding-top: 10px; }
.listen-hero { --ec: var(--gold); }
.listen-jump {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
.listen-jump a {
  text-decoration: none; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); border: 1px solid var(--hairline); background: var(--card);
  padding: 7px 14px; border-radius: 999px; transition: all .15s;
}
.listen-jump a:hover { border-color: var(--gold); color: var(--ink); }
.listen-era { margin-bottom: 26px; scroll-margin-top: 16px; }
.listen-era .era-sec .h-icon { color: var(--ec); }
.listen-era-span { font-size: 13px; font-weight: 700; color: var(--ec); letter-spacing: .1em; margin-left: 4px; }
.listen-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; align-items: stretch; }
.listen-piece {
  background: var(--card); border: 1px solid var(--ring); border-left: 3px solid var(--ec);
  border-radius: 12px; padding: 14px 18px;
  display: flex; gap: 16px; align-items: flex-start;
}
/* composer portrait thumbnail — arched, matching the gallery treatment */
.lp-portrait { border: 0; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; }
.lp-portrait img {
  width: 64px; height: 74px; object-fit: cover; object-position: top center;
  border-radius: 999px 999px 9px 9px;
  border: 2px solid var(--ec);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-soft), 0 3px 10px rgba(60, 48, 20, .14);
  filter: sepia(.16) saturate(.94);
  transition: filter .2s, transform .2s;
}
.lp-portrait:hover img, .lp-portrait:focus-visible img { filter: none; transform: translateY(-2px); }
.lp-body { flex: 1 1 auto; min-width: 0; }
.lp-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-title { font: 600 18px var(--font-display); color: var(--ink); }
.lp-composer {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ec); border-bottom: 1px dotted currentColor;
}
.lp-composer:hover { color: var(--ink); }
.lp-notice { margin: 8px 0 10px; font-size: 14.5px; color: var(--ink-2); max-width: 68ch; }
.lp-label {
  display: inline-block; margin-right: 6px;
  font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--gold);
}
.lp-play {
  display: inline-block; text-decoration: none;
  font: 700 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--ec);
  padding: 8px 16px; border-radius: 999px; transition: filter .15s;
}
.lp-play:hover { filter: brightness(1.12); }

/* composer panel: "a few pieces to start with" + listening link */
.work-item {
  background: var(--card); border: 1px solid var(--ring); border-radius: 12px;
  border-left: 3px solid var(--accent, var(--gold));
  padding: 12px 16px;
}
.work-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.listen-link {
  display: inline-block; margin-top: 4px; text-decoration: none;
  font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent, var(--gold));
}
.listen-link:hover { color: var(--ink); }

/* ---------- map view ---------- */
.map-chart {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(60,48,20,.06);
  padding: 10px;
  overflow-x: auto;
}
.map-chart svg { display: block; min-width: 700px; width: 100%; height: auto; border-radius: 10px; }
/* commentary essay beneath the map — a full-width two-column spread */
.map-commentary { margin-top: 12px; }
.map-commentary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 760px) {
  .map-commentary-grid { grid-template-columns: 1fr; }
}
.map-essay .era-prose { max-width: none; }
.map-ingredients-box {
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 16px 22px 18px;
}
.map-ingredients-box .listen-label { margin-top: 2px; }
.map-ingredients { max-width: none; }
.map-ingredients li { font-size: 14px; padding-left: 26px; }
.map-ingredients li::before { content: "✦"; font-size: 12px; top: 2px; }
.map-ingredients li strong { color: var(--ink); }

/* country names: a quiet cartographic watermark layer */
.map-country {
  fill: var(--muted);
  opacity: .48;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .22em;
  pointer-events: none;
  user-select: none;
}
.map-marker { cursor: pointer; }
.map-marker .pin { transition: r .12s ease; }
.map-marker:hover .pin, .map-marker:focus-visible .pin { r: 9; }
.map-marker:focus-visible { outline: none; }

/* ---------- quiz view ---------- */
.quiz-view { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.quiz-intro { width: min(760px, 100%); text-align: center; margin: 0 0 14px; }
.quiz-page-title { margin: 0 0 6px; font: 600 clamp(24px, 3.6vw, 32px) var(--font-display); color: var(--ink); }
.quiz-page-sub { margin: 0 auto; max-width: 58ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.quiz-box {
  width: min(760px, 100%);
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px clamp(16px, 4vw, 34px) 28px;
}
.q-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.q-count { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.q-dots { display: inline-flex; gap: 5px; flex: 1; }
.q-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.q-dot.done { background: var(--gold); }
.q-dot.now { background: var(--ink); }
.q-score { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.q-text { font-family: var(--font-display); font-size: clamp(21px, 3.4vw, 27px); font-weight: 600; margin: 10px 0 16px; line-height: 1.25; }
.q-scorebox { margin-bottom: 10px; }
.q-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.q-option {
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: 10px; padding: 13px 16px; cursor: pointer;
  font: 600 15px var(--font-body); color: var(--ink);
  text-align: left; transition: all .15s;
}
.q-option:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(60,48,20,.11); }
.q-option.right { border-color: #4c7c3f; background: #eff3e4; }
.q-option.right::after { content: "  ✓"; color: #3c6331; font-weight: 700; }
.q-option.wrong { border-color: #a8453f; background: #f8ece8; }
.q-option.wrong::after { content: "  ✗"; color: #a8453f; font-weight: 700; }
.q-option.dim { opacity: .55; }
.q-option:disabled { cursor: default; }
.q-feedback {
  margin-top: 16px; border-radius: 10px; padding: 14px 16px;
  font-size: 14.5px;
}
.q-feedback.ok { background: #eff3e4; border: 1px solid #c3d2ab; }
.q-feedback.no { background: #f8ece8; border: 1px solid #dfc0b8; }
.q-feedback p { margin: 0 0 12px; }
.q-results { text-align: center; padding: 18px 0 8px; }
.q-emoji { font-size: 60px; line-height: 1; margin-bottom: 10px; }
.q-results h3 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0 0 6px; }
.q-rank { font-size: 18px; font-family: var(--font-display); margin: 0 0 6px; }
.q-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* footer */
.site-footer {
  max-width: 1200px; margin: 0 auto;
  padding: 6px clamp(16px, 4vw, 48px) 12px;
  color: var(--muted); font-size: 12.5px;
  text-align: center;
}
.site-footer a { color: var(--era-baroque); }
.site-footer p { margin: 0; }
.site-footer .fine {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--gold);
  margin: 0 0 5px; letter-spacing: .12em;
}

/* abcjs tweaks */
.score-box svg { max-width: 100%; }
.abcjs-highlight { fill: var(--gold) !important; }

@media (max-width: 560px) {
  .hero { gap: 16px; }
  .hero-portrait { width: 124px; }
  .listen-piece { gap: 12px; padding: 12px 14px; }
  .lp-portrait img { width: 52px; height: 60px; }
  .timeline::before { left: 58px; }
  .tl-year { flex-basis: 40px; }
  .tl-item::after { left: 53.5px; }
}

/* ---------- print: "programme notes" ----------
   With a composer panel open, printing produces a clean handout
   of just that composer; otherwise the current page prints without
   its interactive chrome. */
@media print {
  body { background: #fff; font-size: 12pt; }
  .search-wrap, .main-nav, .controls, .hint, .conveyor-controls, .site-footer { display: none !important; }
  #home-view .conveyor { display: none !important; }
  .site-header { padding: 0 0 12px; }

  body.overlay-open .site-header,
  body.overlay-open main { display: none !important; }

  .overlay { position: static !important; padding: 0 !important; display: block !important; }
  .overlay-backdrop { display: none !important; }
  .panel {
    position: static; width: 100%; max-height: none;
    box-shadow: none; border: 0; border-radius: 0; animation: none;
  }
  .panel::after, .panel-nav { display: none !important; }
  .panel-body { overflow: visible !important; padding-bottom: 0; }
  .hero-portrait, .card-portrait { filter: none !important; }
  .play-btn, .play-note, .p-cta, .no-score { display: none !important; }
  .psec, .work, .facts li, .person, .tl-item { break-inside: avoid; }
  .era-strip { color: #000 !important; background: #eee !important; }
  .badge { color: #000 !important; background: #eee !important; }
  a { text-decoration: none; color: inherit; }
}

/* ============================================================
   iOS install hint — a small, dismissible banner shown only to
   iPhone/iPad Safari users who haven't installed the app yet
   (Add to Home Screen lives in the Share menu there, not Chrome).
   ============================================================ */
.ios-install-hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  z-index: 60;
  width: min(92vw, 460px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--stage);
  color: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0;
  animation: iosHintIn 0.4s ease forwards;
}
@keyframes iosHintIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ios-install-hint .iih-share {
  color: var(--gold-soft);
  font-weight: 700;
}
.ios-install-hint .iih-text { flex: 1; }
.ios-install-hint .iih-close {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--surface);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 8px;
  opacity: 0.8;
}
.ios-install-hint .iih-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
@media print { .ios-install-hint { display: none !important; } }

/* ============================================================
   Composing Journal — a private, on-device notebook.
   ============================================================ */
.jr-privacy {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
}
.jr-form {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 26px;
}
.jr-field { display: flex; flex-direction: column; gap: 6px; }
.jr-field-note { grid-column: 1 / -1; }
.jr-field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.jr-form input,
.jr-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
.jr-form textarea { resize: vertical; min-height: 76px; }
.jr-form input:focus,
.jr-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.jr-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.jr-msg {
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0;
}
.jr-msg.show { animation: jrFade 2.4s ease; }
@keyframes jrFade {
  0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}
.jr-list { display: flex; flex-direction: column; gap: 14px; }
.jr-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 32px 16px;
  border: 1px dashed var(--hairline);
  border-radius: 14px;
}
.jr-entry {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
}
.jr-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.jr-entry-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.jr-entry-date {
  flex: none;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.jr-entry-note {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jr-del {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.jr-del:hover { border-color: var(--era-romantic); color: var(--era-romantic); }
.jr-footer { margin-top: 26px; text-align: center; }
.jr-clear:hover { border-color: var(--era-romantic); color: var(--era-romantic); }
@media (max-width: 560px) {
  .jr-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Drum Patterns — pattern grid, beat row and transport.
   ============================================================ */
.drum-panel {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 26px;
}
.drum-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.drum-pat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 104px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.drum-pat-btn:hover { border-color: var(--gold-soft); }
.drum-pat-btn.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold-soft);
}
.drum-pat-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.drum-pat-sig { font-size: 0.78rem; color: var(--muted); }

.drum-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto 14px;
  max-width: 560px;
}
.drum-row { display: flex; align-items: center; gap: 10px; }
.drum-row-label {
  flex: none;
  width: 58px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.drum-cells {
  display: grid;
  grid-template-columns: repeat(var(--steps, 8), 1fr);
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.drum-cell {
  height: 26px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform 0.06s ease, background 0.06s ease;
}
.drum-cell.beat-start { border-left: 2px solid var(--gold-soft); }
.drum-cell.on { background: var(--gold); border-color: var(--gold); }
.drum-cell.playhead { outline: 2px solid var(--ink); outline-offset: 1px; }
.drum-cell.on.playhead { transform: scale(1.08); }

.drum-beats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 20px;
}
.drum-beat {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--hairline);
  transition: transform 0.06s ease, background 0.06s ease;
}
.drum-beat.strong { width: 17px; height: 17px; }
.drum-beat.on { background: var(--gold); transform: scale(1.25); }

.drum-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.drum-tempo { display: flex; align-items: center; gap: 10px; }
.drum-tempo label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.drum-tempo .met-slider { width: 160px; }
.drum-bpm { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 480px) {
  .drum-row-label { width: 46px; font-size: 0.72rem; }
  .drum-cell { height: 22px; }
}

/* Drum tool — volume control + tap button spacing (mirrors .drum-tempo) */
.drum-vol { display: flex; align-items: center; gap: 10px; }
.drum-vol label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.drum-vol .met-slider { width: 120px; }
#drum-tap { white-space: nowrap; }

/* ---------- Rhythm Echo ---------- */
.echo-box { background: var(--card); border: 1px solid var(--ring); border-radius: 12px; padding: 24px 20px; text-align: center; }
.echo-statusline { font-size: 14px; color: var(--ink-2); }
.echo-statusline strong { color: var(--ink); }
.echo-instr { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-2); margin: 10px 0 22px; min-height: 1.4em; }
.echo-pads { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.echo-pad {
  width: 92px; height: 92px; border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--ta, 45) 55% 90%); border: 1px solid hsl(var(--ta, 45) 42% 72%);
  color: hsl(var(--ta, 45) 60% 26%); font: 700 13px var(--font-body);
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
}
.echo-pad:hover:not(:disabled) { border-color: hsl(var(--ta, 45) 50% 55%); }
.echo-pad:disabled { cursor: default; opacity: .55; }
.echo-pad.lit {
  /* one lightness for both themes — 38% clears 4.5:1 with white text
     across all three pad hues, blue (hat) included, which needs a
     darker background than red/pink at the same lightness to get
     there (blue's luminance weight in the contrast formula is lowest) */
  background: hsl(var(--ta, 45) 55% 38%); color: #fff; transform: scale(1.07);
  box-shadow: 0 0 0 4px hsl(var(--ta, 45) 55% 70% / 0.45);
}
.theme-dark .echo-pad { background: hsl(var(--ta, 45) 26% 20%); border-color: hsl(var(--ta, 45) 26% 32%); color: hsl(var(--ta, 45) 60% 76%); }
.echo-start { cursor: pointer; }
.echo-results { padding: 4px 0; }
.echo-results-headline { font: 700 20px var(--font-display); margin: 0 0 8px; }
.echo-results-tally { font-size: 15px; color: var(--ink-2); margin: 0 0 4px; }
.echo-results-tally strong { color: var(--ink); font-size: 17px; }
.echo-results-best { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.echo-again { cursor: pointer; }

/* ============================================================
   App mode — the installed app's toolkit home + slim nav.
   (These only apply when body.app-mode is set.)
   ============================================================ */
.main-nav .nav-fullsite { margin-left: auto; opacity: 0.85; }

.toolkit-home { max-width: 820px; margin: 0 auto; padding: 8px 4px 40px; }
.toolkit-home .app-dyk { margin: 8px auto 26px; }
.toolkit-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px);
  color: var(--ink);
  text-align: center;
  margin: 0 0 6px;
}
.toolkit-sub {
  text-align: center;
  color: var(--ink-2);
  margin: 0 0 26px;
}
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.toolkit-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.toolkit-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(33, 30, 23, 0.1);
}
.toolkit-tile.is-primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--card), var(--surface));
  border-color: var(--gold-soft);
}
.tk-icon { font-size: 1.8rem; line-height: 1; }
.tk-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.tk-desc { color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }

.toolkit-quick { text-align: center; margin-bottom: 30px; }
.toolkit-quick-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 10px;
}
.toolkit-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.toolkit-chip {
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
}
.toolkit-chip:hover { border-color: var(--gold); background: var(--gold-soft); }

.toolkit-fullsite {
  display: block;
  text-align: center;
  padding: 14px;
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.toolkit-fullsite:hover { text-decoration: underline; }

/* ============================================================
   Composing Journal v2 — file attachments + contents index.
   ============================================================ */
.jr-optional { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.jr-field-files { grid-column: 1 / -1; }
.jr-files-hint { font-size: 0.82rem; color: var(--muted); }
.jr-form input[type="file"] {
  font: inherit;
  padding: 8px;
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: 10px;
}
.jr-pending { font-size: 0.85rem; color: var(--ink-2); }
.jr-pending-file { display: inline-block; margin: 4px 8px 0 0; padding: 2px 8px; background: var(--gold-soft); border-radius: 999px; }
.jr-pending-file em { font-style: normal; color: var(--ink-2); opacity: 0.75; }

/* contents index */
.jr-contents {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.jr-contents-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.jr-contents-count { font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.jr-contents-list { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 22px; }
.jr-contents-list li { break-inside: avoid; margin-bottom: 4px; }
.jr-contents-item {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; color: var(--ink);
}
.jr-contents-item:hover { background: var(--surface); }
.jr-ci-title { font-weight: 600; overflow-wrap: anywhere; }
.jr-ci-meta { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 560px) { .jr-contents-list { columns: 1; } }

/* attachments on an entry */
.jr-attachments { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.jr-attach {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  max-width: 100%;
}
.jr-attach-ico { font-size: 1.3rem; }
.jr-thumb { display: inline-flex; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--hairline); flex: none; }
.jr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jr-attach-meta { display: flex; flex-direction: column; min-width: 0; }
.jr-attach-open {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font: inherit; font-weight: 600; text-align: left;
  text-decoration: underline; overflow-wrap: anywhere;
}
.jr-attach-size { font-size: 0.76rem; color: var(--muted); }
.jr-attach-del {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 0.95rem; line-height: 1; padding: 4px; border-radius: 6px; flex: none;
}
.jr-attach-del:hover { color: var(--era-romantic); background: rgba(0,0,0,0.05); }

/* highlight an entry jumped to from the contents list */
.jr-entry.highlight { animation: jrHighlight 1.8s ease; }
@keyframes jrHighlight {
  0% { box-shadow: 0 0 0 3px var(--gold); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* ============================================================
   App refinements — no search in app, washed-manuscript hero on
   the toolkit landing, textured primary tile, toolkit visuals.
   ============================================================ */
.app-mode .search-wrap { display: none; }

.toolkit-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 36px 22px 28px;
  margin: 6px auto 28px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
}
/* washed-out manuscript, matching the theory-pack covers */
.toolkit-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/textures/bach-autograph.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  filter: sepia(0.25) contrast(1.05);
  pointer-events: none;
}
.toolkit-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,252,246,0.35), rgba(253,252,246,0.8));
  pointer-events: none;
}
.toolkit-hero > * { position: relative; z-index: 1; }
.toolkit-hero-mark {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 6px;
}
.toolkit-hero .toolkit-title { margin: 0; }
.toolkit-hero .toolkit-sub { margin: 6px auto 0; max-width: 46ch; }
.toolkit-hero .app-dyk {
  margin: 20px auto 0;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
}

/* a little more life on the primary tile: faint manuscript wash */
.toolkit-tile.is-primary { position: relative; overflow: hidden; }
.toolkit-tile.is-primary::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/textures/chopin-ms.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
}
.toolkit-tile.is-primary > * { position: relative; z-index: 1; }

/* "Back to your Kit" — shown when browsing the full site from the app */
.back-to-kit {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  padding: 10px 16px;
  background: var(--stage);
  color: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.back-to-kit:hover { background: var(--gold); color: var(--stage); }
@media print { .back-to-kit { display: none !important; } }

/* ============================================================
   Native app feel — hide the website masthead/footer in the app
   and navigate via a bottom tab bar (icons + labels), like a
   phone app. Only active under body.app-mode.
   ============================================================ */
body.app-mode { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
.app-mode .site-header { display: none; }
.app-mode .site-footer { display: none; }
.app-mode main {
  padding-top: 14px;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

.app-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none; /* shown only in app mode */
  justify-content: space-around;
  align-items: stretch;
  background: var(--card);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 18px rgba(33, 30, 23, 0.08);
}
.app-mode .app-tabbar { display: flex; }
.app-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 7px;
  text-decoration: none;
  color: var(--muted);
  user-select: none;
  transition: color 0.12s ease, transform 0.06s ease;
}
.app-tabbar a:active { transform: scale(0.94); }
.app-tabbar svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.app-tabbar .tab-label { font-size: 0.7rem; font-weight: 600; }
.app-tabbar a.active { color: var(--gold); }

/* subtle native-style page transition in the app */
.app-mode #toolkit-view.page-enter,
.app-mode #theory-view.page-enter,
.app-mode #tips-view.page-enter,
.app-mode #journal-view.page-enter,
.app-mode #resources-view.page-enter {
  animation: appPageIn 0.22s ease both;
}
@keyframes appPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* on wide screens, keep the app column phone-like and centre the tab bar */
@media (min-width: 720px) {
  .app-mode main { max-width: 720px; margin: 0 auto; }
  .app-tabbar { max-width: 720px; left: 50%; transform: translateX(-50%); border-radius: 18px 18px 0 0; }
}

/* ============================================================
   App: launch dashboard, install banner, and top app bar.
   ============================================================ */
/* Home dashboard */
.tk-greeting {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2px;
}
.tk-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}
.tk-resume-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.tk-resume-card:hover { border-color: var(--gold); }
.tkr-label { font-size: 0.76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.tkr-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.tkr-sub { font-size: 0.8rem; color: var(--muted); }

/* Install banner (Android/Chrome beforeinstallprompt) */
.install-cta {
  position: fixed;
  left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 65;
  width: min(94vw, 500px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--stage); color: var(--surface);
  border: 1px solid var(--gold); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  font-size: 0.9rem;
}
.install-cta .ic-mark { font-size: 1.5rem; color: var(--gold-soft); flex: none; }
.install-cta .ic-text { flex: 1; line-height: 1.35; }
.install-cta .ic-install {
  flex: none; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--gold); color: var(--stage); font: inherit; font-weight: 700;
}
.install-cta .ic-close { flex: none; background: transparent; border: 0; color: var(--surface); font-size: 1.1rem; cursor: pointer; opacity: 0.8; padding: 4px; }
@media print { .install-cta { display: none !important; } }

/* Top app bar (app mode) */
.app-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 75;
  display: none;
  align-items: center; gap: 4px;
  height: 48px;
  padding: 0 6px;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.app-mode .app-topbar { display: flex; }
.app-topbar.scrolled {
  background: rgba(253, 252, 246, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--hairline);
}
.atb-back {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--gold); font-size: 2rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.atb-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--ink);
  opacity: 0; transition: opacity 0.2s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar.scrolled .atb-title { opacity: 1; }

/* app mode: make room for the top bar, and drop the pages' own
   back-link rows (the top bar handles back navigation now) */
.app-mode main { padding-top: calc(52px + env(safe-area-inset-top)); }
.app-mode .chapter-topbar { display: none; }
.app-mode .era-hero-top { display: none; }

@media (min-width: 720px) {
  .app-mode .app-topbar { max-width: 720px; left: 50%; transform: translateX(-50%); }
}

/* ============================================================
   App tool launcher — an icon grid (springboard style), no
   headings or blurbs; each tool explains itself when opened.
   ============================================================ */
.tool-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 18px 10px;
  max-width: 460px;
  margin: 8px auto;
}
.tool-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.ti-badge {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 32%, #ffffff, var(--surface));
  border: 1px solid var(--gold-soft);
  box-shadow: 0 3px 10px rgba(33, 30, 23, 0.08);
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.tool-icon:hover .ti-badge { box-shadow: 0 6px 16px rgba(33, 30, 23, 0.14); }
.tool-icon:active .ti-badge { transform: scale(0.92); }
.ti-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  color: var(--ink-2);
}

/* Home section icons + persistent top-bar title on heading-less pages */
.home-sections { grid-template-columns: repeat(4, 1fr); max-width: 380px; margin: 4px auto 24px; }
.app-topbar.no-large-title {
  background: rgba(253, 252, 246, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--hairline);
}
.app-topbar.no-large-title .atb-title { opacity: 1; }
@media (max-width: 380px) {
  .home-sections { grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
}

/* ============================================================
   Native-style bottom-sheet dialogs (appSheet / appConfirm).
   ============================================================ */
.app-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.42); opacity: 0; transition: opacity 0.25s ease; }
.app-modal.open .app-modal-backdrop { opacity: 1; }
.app-sheet {
  position: relative;
  width: min(520px, 100%);
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 44px rgba(0,0,0,0.32);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.app-modal.open .app-sheet { transform: translateY(0); }
.app-sheet-grab { width: 42px; height: 4px; border-radius: 2px; background: var(--hairline); margin: 2px auto 16px; }
.app-sheet-title { font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 8px; color: var(--ink); }
.app-sheet-body { color: var(--ink-2); margin-bottom: 18px; line-height: 1.5; }
.app-sheet-body p { margin: 0; }
.app-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.app-sheet-btn {
  padding: 14px; border-radius: 13px;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-sheet-btn:active { transform: scale(0.98); }
.app-sheet-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.app-sheet-btn.danger { background: var(--era-romantic); border-color: var(--era-romantic); color: #fff; }
@media (min-width: 620px) { .app-modal { align-items: center; } .app-sheet { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce), (max-width: 1px) {
  .app-sheet { transition: none; }
}
.reduce-motion .app-sheet, .reduce-motion .app-modal-backdrop { transition: none; }

/* ============================================================
   Dark theme (app mode only) + Settings screen.
   ============================================================ */
body.app-mode.theme-dark {
  --surface: #17140f;
  --page: #120f0b;
  --card: #211d16;
  --ink: #f2ecdf;
  --ink-2: #cabfa8;
  --muted: #978d76;
  --hairline: #38322599;
  --gold: #d3b968;
  --gold-soft: #5a4a22;
}
body.app-mode.theme-dark { background: var(--page); color: var(--ink); }
.app-mode.theme-dark .toolkit-hero::after { background: linear-gradient(180deg, rgba(33,30,23,0.35), rgba(33,30,23,0.8)); }
.app-mode.theme-dark .toolkit-hero .app-dyk { background: rgba(33,30,23,0.6); }
.app-mode.theme-dark .ti-badge { background: radial-gradient(circle at 50% 32%, #2c2820, var(--card)); }
.app-mode.theme-dark .app-topbar.scrolled,
.app-mode.theme-dark .app-topbar.no-large-title { background: rgba(23,20,15,0.92); }
.app-mode.theme-dark .app-tabbar { background: var(--card); }

/* Top bar gear + title layout */
.atb-title { flex: 1; }
.atb-gear {
  flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 1.3rem; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Settings */
.settings-page { max-width: 560px; margin: 0 auto; }
.set-group { background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 4px 16px 12px; margin-bottom: 18px; }
.set-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 16px 0 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.set-row:first-of-type { border-top: 0; }
.set-label { font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.seg button { padding: 7px 14px; background: var(--surface); border: 0; border-left: 1px solid var(--hairline); color: var(--ink); font: inherit; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--gold); color: #fff; }
.switch { width: 48px; height: 28px; border-radius: 999px; border: 0; background: var(--hairline); position: relative; cursor: pointer; transition: background 0.2s ease; flex: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.switch.on { background: var(--gold); }
.switch.on .knob { transform: translateX(20px); }
.set-danger { width: 100%; padding: 13px; margin: 12px 0 2px; border-radius: 12px; border: 1px solid var(--era-romantic); background: transparent; color: var(--era-romantic); font: inherit; font-weight: 700; cursor: pointer; }
.set-note { font-size: 0.82rem; color: var(--muted); margin: 4px 0 10px; }
.set-about { color: var(--ink-2); line-height: 1.55; margin: 12px 0; }
.set-link { display: inline-block; color: var(--gold); text-decoration: none; font-weight: 600; margin: 4px 0 10px; }

/* ============================================================
   Motion — directional push/pop slides (app mode); reduce-motion.
   ============================================================ */
.app-mode .page-enter.slide-fwd { animation: appSlideFwd 0.26s cubic-bezier(.2,.8,.2,1) both !important; }
.app-mode .page-enter.slide-back { animation: appSlideBack 0.26s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes appSlideFwd { from { opacity: 0.3; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes appSlideBack { from { opacity: 0.3; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.reduce-motion .page-enter,
.reduce-motion .page-enter.slide-fwd,
.reduce-motion .page-enter.slide-back { animation: none !important; }
.reduce-motion * { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .app-mode .page-enter, .app-mode .page-enter.slide-fwd, .app-mode .page-enter.slide-back { animation: none !important; }
}

/* ============================================================
   Now Playing bar — pinned above the tab bar in app mode.
   ============================================================ */
.now-playing {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 78;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--stage);
  color: var(--surface);
  border-top: 1px solid var(--gold);
}
.now-playing .np-info { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.np-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-stop {
  flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--gold);
  background: transparent; color: var(--gold-soft); font: inherit; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.np-stop:active { transform: scale(0.96); }
/* little equaliser animation */
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.np-eq i { width: 3px; height: 100%; background: var(--gold-soft); border-radius: 1px; transform-origin: bottom; animation: npEq 0.9s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: 0.25s; }
.np-eq i:nth-child(3) { animation-delay: 0.5s; }
@keyframes npEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.reduce-motion .np-eq i { animation: none; transform: scaleY(0.6); }

/* make room so content clears both the Now Playing bar and the tab bar */
.app-mode.has-nowplaying main { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  .now-playing { max-width: 720px; left: 50%; transform: translateX(-50%); }
}

/* ============================================================
   App aesthetic pass — the Kit's own visual language, separate
   from the website. Warm layered light mode, tinted tool tiles,
   floating pill tab bar, softer cards. (app mode only)
   ============================================================ */

/* — canvas: a warm paper gradient instead of the site's flat page — */
body.app-mode.theme-light {
  background:
    radial-gradient(120% 60% at 50% -10%, #fdf9ee 0%, rgba(253,249,238,0) 60%),
    linear-gradient(180deg, #f8f4e7 0%, #efe8d4 100%);
  background-attachment: fixed;
}
body.app-mode.theme-dark {
  background:
    radial-gradient(120% 60% at 50% -10%, #221d14 0%, rgba(34,29,20,0) 60%),
    linear-gradient(180deg, #16130d 0%, #100d09 100%);
  background-attachment: fixed;
}

/* — per-tool tinted icon tiles (hue set inline via --ta) — */
.app-mode.theme-light .ti-badge {
  background: linear-gradient(155deg, #ffffff 15%, hsl(var(--ta, 45) 55% 90%) 100%);
  border: 1px solid hsl(var(--ta, 45) 42% 78%);
  box-shadow:
    0 1px 2px hsl(var(--ta, 45) 45% 40% / 0.10),
    0 6px 14px hsl(var(--ta, 45) 45% 40% / 0.14);
}
.app-mode.theme-light .tool-icon:hover .ti-badge {
  box-shadow: 0 3px 6px hsl(var(--ta,45) 45% 40% / 0.14), 0 10px 22px hsl(var(--ta,45) 45% 40% / 0.20);
}
.app-mode.theme-dark .ti-badge {
  background: linear-gradient(155deg, hsl(var(--ta, 45) 24% 22%) 0%, hsl(var(--ta, 45) 30% 13%) 100%);
  border: 1px solid hsl(var(--ta, 45) 24% 32%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.app-mode .ti-badge { width: 68px; height: 68px; border-radius: 21px; font-size: 32px; }
.app-mode .ti-name { color: var(--ink); }

/* — cards: softer, rounder, gently lifted — */
.app-mode.theme-light :is(.toolkit-hero, .tk-resume-card, .jr-form, .jr-contents, .jr-entry,
  .drum-panel, .met-panel, .set-group, .app-acc, .fullsite-card, .jr-privacy, .pack-banner) {
  border-radius: 20px;
  border-color: #e6dec6;
  box-shadow: 0 1px 2px rgba(92, 74, 30, 0.05), 0 10px 30px rgba(92, 74, 30, 0.08);
}

/* — fun fact: a proper "card of the day", not a strip — */
.app-mode .app-dyk {
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(143, 116, 41, 0.25);
  text-align: center;
}
.app-mode .app-dyk .dyk-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold);
}
.app-mode .app-dyk .dyk-fact {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.45;
}
.app-mode .app-dyk .dyk-more { align-self: center; }

/* — floating pill tab bar — */
.app-mode .app-tabbar {
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 26px;
  border: 1px solid var(--hairline);
  padding-bottom: 0;
  box-shadow: 0 2px 6px rgba(60, 48, 20, 0.08), 0 12px 32px rgba(60, 48, 20, 0.18);
}
.app-mode .app-tabbar a { padding: 8px 4px 8px; border-radius: 20px; margin: 4px 2px; }
.app-mode .app-tabbar a.active {
  color: var(--gold);
  background: hsl(45 55% 92%);
}
.app-mode.theme-dark .app-tabbar a.active { background: hsl(45 30% 18%); }
@media (min-width: 720px) {
  .app-mode .app-tabbar { max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; border-radius: 26px; }
}
/* content + now-playing clear the floating bar */
.app-mode main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.app-mode .now-playing {
  left: 12px; right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  border: 1px solid var(--gold);
  border-radius: 18px;
}
@media (min-width: 720px) {
  .app-mode .now-playing { max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; }
}
.app-mode.has-nowplaying main { padding-bottom: calc(152px + env(safe-area-inset-bottom)); }

/* — top bar: serif title, gold back chevron already; soften scrolled bg — */
.app-topbar .atb-title { font-size: 1.05rem; letter-spacing: 0.01em; }

/* — full-site blurb card on Home — */
.fullsite-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  text-align: left;
  font-style: normal;
  border-top: 1px solid var(--hairline);
}
.fullsite-card .fs-mark { font-size: 1.9rem; flex: none; }
.fullsite-card .fs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fullsite-card .fs-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.fullsite-card .fs-desc { font-size: 0.86rem; color: var(--ink-2); line-height: 1.4; }
.fullsite-card .fs-cta { flex: none; font-size: 1.6rem; color: var(--gold); }
.fullsite-card:hover { border-color: var(--gold); text-decoration: none; }

/* — Learn: tap-to-open sections — */
.learn-app { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
.app-acc {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.app-acc summary {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.app-acc summary::-webkit-details-marker { display: none; }
.app-acc .acc-ico {
  flex: none; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  border-radius: 13px;
  background: linear-gradient(155deg, #fff 15%, hsl(45 50% 90%));
  border: 1px solid hsl(45 40% 80%);
}
.theme-dark .app-acc .acc-ico { background: linear-gradient(155deg, hsl(45 22% 22%), hsl(45 28% 13%)); border-color: hsl(45 22% 32%); }
.app-acc .acc-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-acc .acc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.app-acc .acc-hint { font-size: 0.8rem; color: var(--muted); }
.app-acc .acc-chev { flex: none; font-size: 1.5rem; color: var(--muted); transition: transform 0.2s ease; }
.app-acc[open] .acc-chev { transform: rotate(90deg); color: var(--gold); }
.app-acc .acc-body { padding: 2px 16px 16px; border-top: 1px dashed var(--hairline); }
.app-acc .acc-body > :first-child { margin-top: 14px; }
.app-acc .acc-body .plan-box, .app-acc .acc-body .tips-stage,
.app-acc .acc-body .guide-card { box-shadow: none; }
.reduce-motion .app-acc .acc-chev { transition: none; }

/* quick download / journal row under the Learn sections */
.learn-dl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.learn-dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.learn-dl-btn:hover { border-color: var(--gold); }

/* ============================================================
   Personal home (name + clock), fun-fact label fix, staff
   ornament, name inputs, celebration burst.
   ============================================================ */

/* FIX: the site's .dyk-label is a gold chip with white text; the app
   restyle recoloured the text gold → gold-on-gold. In the app it's a
   plain small-caps label, no chip. */
.app-mode .app-dyk .dyk-label {
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--gold);
}

/* live clock under the home title */
.tk-clock {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tk-clock #tk-time { font-weight: 700; color: var(--ink); }

/* staff ornament — five ruled lines with a clef sitting on them */
.staff-divider {
  position: relative;
  width: min(220px, 60%);
  height: 25px;
  margin: 28px auto 20px;
  background-image: repeating-linear-gradient(180deg,
    var(--hairline) 0 1px, transparent 1px 6px);
  background-size: 100% 25px;
  background-repeat: no-repeat;
}
.staff-divider span {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}

/* text inputs in sheets + settings */
.sheet-input {
  width: 100%;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.sheet-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.set-input {
  width: 160px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: right;
}
.set-input:focus { outline: none; border-color: var(--gold); }

/* celebration burst — note glyphs spraying out on a correct answer */
.celebrate {
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}
.celebrate span {
  position: absolute;
  font-size: 19px;
  color: hsl(var(--ch, 42) 65% 45%);
  animation: celebratePop 0.95s cubic-bezier(.15,.6,.35,1) forwards;
  will-change: transform, opacity;
}
.theme-dark .celebrate span { color: hsl(var(--ch, 42) 70% 65%); }
@keyframes celebratePop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(14deg); opacity: 0; }
}

/* ============================================================
   Journal — edit-in-place for posted entries.
   ============================================================ */
.jr-entry-actions { display: flex; gap: 8px; margin-top: 10px; }
.jr-entry-actions .jr-del { margin-top: 0; }
.jr-edit {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.jr-edit:hover { border-color: var(--gold); color: var(--gold); }
.jr-entry.is-editing { border-color: var(--gold); }
.jr-entry.is-editing .jr-field { margin-bottom: 12px; }
.jr-entry.is-editing input,
.jr-entry.is-editing textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
.jr-entry.is-editing textarea { resize: vertical; min-height: 76px; }
.jr-entry.is-editing input:focus,
.jr-entry.is-editing textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.jr-entry.is-editing input[type="file"] { border-style: dashed; padding: 8px; }
.jr-entry.is-editing .jr-attachments { margin-bottom: 12px; }
.jr-edit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Journal — audio recording + inline clip playback.
   ============================================================ */
.jr-rec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jr-rec-live { display: inline-flex; align-items: center; gap: 8px; }
.rec-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #c0392b;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5); }
  50% { transform: scale(1.15); opacity: 0.75; box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); }
}
.reduce-motion .rec-dot { animation: none; }
.rec-time { font-weight: 700; font-variant-numeric: tabular-nums; color: #c0392b; }
.rec-max { color: var(--muted); font-size: 0.85rem; }
.jr-rec-err { color: var(--era-romantic); font-size: 0.85rem; flex-basis: 100%; }
.jr-rec-err:empty { display: none; }
.jr-pending-clips { font-size: 0.85rem; color: var(--ink-2); margin-top: 6px; }
.jr-clip-rm {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 0.85rem; padding: 0 2px; line-height: 1;
}
.jr-clip-rm:hover { color: var(--era-romantic); }

/* audio attachment: inline player */
.jr-attach.is-audio { gap: 10px; }
.jr-attach-play {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.jr-attach-play:active { transform: scale(0.94); }
.jr-attach-play.playing { background: var(--surface); color: var(--gold); }
.jr-attach-name { font-weight: 600; overflow-wrap: anywhere; }
.jr-attach-dl {
  flex: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.95rem;
  padding: 5px 9px;
  cursor: pointer;
}
.jr-attach-dl:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   Journal — contents-style list: compact rows that open in place,
   so a long journal stays scannable.
   ============================================================ */
.jr-contents { padding: 12px 18px; }
.jr-contents-list { display: none; } /* superseded by the row list itself */
.jr-list { gap: 10px; }

.jr-item { padding: 0; overflow: hidden; }
.jr-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.jr-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-row-title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.jr-row-meta { font-size: 0.8rem; color: var(--muted); }
.jr-row-chev {
  flex: none;
  font-size: 1.5rem;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.jr-item.is-open .jr-row-chev { transform: rotate(90deg); color: var(--gold); }
.jr-item.is-open { border-color: var(--gold); }
.jr-row-body {
  padding: 2px 16px 16px;
  border-top: 1px dashed var(--hairline);
}
.jr-row-body > :first-child { margin-top: 12px; }
.jr-nonote { font-style: italic; color: var(--muted); }
.reduce-motion .jr-row-chev { transition: none; }

/* ============================================================
   Line-icon set (js/icons.js) — one stroke weight everywhere.
   Sized in em so each context's font-size controls the icon.
   ============================================================ */
.app-icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* tool + section tiles: the badge's font-size sets the icon size,
   and the icon takes the tile's accent colour */
.ti-badge { color: hsl(var(--ta, 45) 55% 32%); }
.app-mode.theme-dark .ti-badge { color: hsl(var(--ta, 45) 55% 72%); }
.ti-badge .app-icon { width: .62em; height: .62em; }
/* Learn section headers */
.acc-ico { color: var(--gold); }
.acc-ico .app-icon { width: .82em; height: .82em; }
/* bottom tab bar (its own sizing, unchanged look) */
.app-tabbar .app-icon { width: 25px; height: 25px; }

/* ============================================================
   Journal — export / import (keep a copy).
   ============================================================ */
.jr-backup {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
}
.jr-backup-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.jr-backup-note {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.jr-backup-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.jr-backup .jr-msg { display: inline-block; margin-top: 8px; }

/* ============================================================
   Desktop scrollbar compensation — classic scrollbars make the
   viewport for fixed elements 14px wider than the visible page,
   pushing the app bars' right edges under the scrollbar. --sbw
   (set by app.js) is that width; 0 on phones/overlay scrollbars.
   ============================================================ */
.app-topbar { right: var(--sbw, 0px); }
.app-mode .app-tabbar { right: calc(12px + var(--sbw, 0px)); }
.app-mode .now-playing { right: calc(12px + var(--sbw, 0px)); }
@media (min-width: 720px) {
  /* centred variants: shift half the scrollbar width back */
  .app-mode .app-topbar,
  .app-mode .app-tabbar,
  .app-mode .now-playing { margin-left: calc(var(--sbw, 0px) / -2); }
}
/* and never show a horizontal scrollbar during page transitions */
body.app-mode { overflow-x: hidden; }

/* ============================================================
   Instrument Ranges cheat sheet.
   ============================================================ */
.range-fams { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.range-fam {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.range-fam:hover { border-color: hsl(var(--ta, 45) 45% 60%); }
.range-fam.is-on {
  background: hsl(var(--ta, 45) 55% 90%);
  border-color: hsl(var(--ta, 45) 45% 60%);
  color: hsl(var(--ta, 45) 60% 26%);
}
.theme-dark .range-fam.is-on { background: hsl(var(--ta, 45) 30% 22%); color: hsl(var(--ta, 45) 60% 76%); }

.range-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 20px;
}
.range-pick {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 10px 13px; border-radius: 11px; cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--hairline); color: var(--ink); font: inherit;
}
.range-pick:hover { border-color: var(--gold); }
.range-pick.is-on { border-color: var(--gold); background: var(--gold-soft); }
.rp-name { font-weight: 600; font-size: 0.95rem; }
.rp-span { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.range-detail {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 18px;
}
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.range-name { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.range-span { font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.range-ruler { margin-bottom: 12px; }
.rr-label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px;
}
.range-ruler svg { width: 100%; height: 84px; display: block; }
.rk-white { fill: var(--surface); stroke: var(--hairline); stroke-width: 0.8; }
.rk-black { fill: var(--ink-2); opacity: 0.35; }
.rk-white.in { fill: var(--gold-soft); stroke: var(--gold); }
.rk-black.in { fill: var(--gold); opacity: 0.85; }
.rk-white.comfy { fill: var(--gold); }
.rk-black.comfy { fill: var(--stage); opacity: 1; }
.rk-c { font-size: 15px; fill: var(--muted); text-anchor: middle; font-family: var(--font-body); }
.theme-dark .rk-white { fill: #2a2419; stroke: #3d3527; }
.theme-dark .rk-black { fill: #0d0b07; opacity: 0.8; }

.range-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--ink-2); margin-bottom: 14px; }
.range-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.lg-comfy { background: var(--gold); }
.lg-in { background: var(--gold-soft); border: 1px solid var(--gold); }
.lg-out { background: var(--surface); border: 1px solid var(--hairline); }

.range-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 14px; }
.range-facts > div { background: var(--surface); border: 1px solid var(--hairline); border-radius: 11px; padding: 10px 13px; }
.range-facts dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.range-facts dd { margin: 2px 0 0; font-size: 0.92rem; }
.range-tip {
  background: var(--surface); border-left: 4px solid var(--gold);
  border-radius: 10px; padding: 11px 14px; margin: 0 0 14px;
  font-size: 0.92rem; line-height: 1.5; color: var(--ink-2);
}
.range-tip-label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--gold); margin-bottom: 2px;
}
.range-hear { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.range-hear-note { font-size: 0.78rem; color: var(--muted); }

/* ============================================================
   Prompt Generator.
   ============================================================ */
.pg-panel { background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pg-level { display: inline-flex; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.pg-lvl { padding: 7px 14px; background: var(--surface); border: 0; border-left: 1px solid var(--hairline); color: var(--ink); font: inherit; cursor: pointer; }
.pg-lvl:first-child { border-left: 0; }
.pg-lvl.is-on { background: var(--gold); color: #fff; }

.pg-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pg-row {
  display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 11px;
}
.pg-row.is-locked { border-color: var(--gold); background: var(--gold-soft); }
.pg-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pg-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-value { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; overflow-wrap: anywhere; }
.pg-note { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.pg-rhythm { display: flex; align-items: flex-end; gap: 9px; min-height: 30px; }
.pg-glyph svg { height: 30px; width: auto; display: block; }
.pg-actions { display: flex; gap: 4px; }
.pg-reroll, .pg-lock {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 0.9rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pg-reroll:hover, .pg-lock:hover { border-color: var(--gold); color: var(--gold); }
.pg-foot { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
@media (max-width: 520px) {
  .pg-row { grid-template-columns: 1fr auto; }
  .pg-label { grid-column: 1 / -1; }
}

/* ============================================================
   Fun-fact card readability. The hero sits on a washed manuscript,
   so the card behind the fact must be near-opaque or the texture
   shows through the italic serif and muddies it. Theme is chosen by
   the user in Settings, so these are CLASS-based — never
   prefers-color-scheme, which would override that choice.
   ============================================================ */
.app-mode .app-dyk .dyk-fact { color: var(--ink); font-weight: 500; }
.app-mode.theme-light .toolkit-hero .app-dyk {
  background: rgba(253, 252, 246, 0.95);
  border-color: rgba(143, 116, 41, 0.45);
  box-shadow: 0 2px 10px rgba(92, 74, 30, 0.10);
}
.app-mode.theme-light .app-dyk .dyk-label { color: #7a6222; }
.app-mode.theme-dark .toolkit-hero .app-dyk {
  background: rgba(23, 20, 15, 0.92);
  border-color: rgba(211, 185, 104, 0.35);
}
.app-mode.theme-dark .app-dyk .dyk-fact { color: var(--ink); }
/* the composer credit button inside a fact */
.app-mode .app-dyk .dyk-composer { color: var(--gold); font-weight: 600; }

/* Light mode in the app: the site's --muted (#8f8672) only reaches
   3.5:1 on a cream card, which is under the 4.5:1 needed for small
   text. Darkened here (app only — the website keeps its own value)
   so every hint, caption and meta line is comfortably readable. */
body.app-mode.theme-light { --muted: #7a7260; }
/* one step darker again so meta text clears 4.5:1 on the slightly
   deeper --surface panels too (pg rows, range facts) */
body.app-mode.theme-light { --muted: #736b59; }

/* The selected instrument chip used solid --gold-soft, leaving its
   meta line at 2.3:1. Use a pale gold tint (as the family chips do)
   so the normal ink/muted colours stay readable, with a dark
   equivalent for dark mode. */
.range-pick.is-on { background: hsl(45 55% 90%); border-color: var(--gold); }
.app-mode.theme-dark .range-pick.is-on { background: hsl(45 30% 20%); }
/* greeting: plain --gold reaches only 4.35:1 over the light hero wash */
.app-mode.theme-light .tk-greeting { color: #75601f; }
/* selected instrument chip in dark mode: --muted on the gold tint is
   3.4:1, so use the brighter secondary ink */
.app-mode.theme-dark .range-pick.is-on .rp-span { color: var(--ink-2); }

/* ============================================================
   Keyboard ruler, dark mode. The plain `.theme-dark .rk-white`
   base rule has the same specificity as `.rk-white.in/.comfy` but
   came later, so it won and flattened every key to one colour —
   erasing the range highlight entirely. These three-class selectors
   restore the three-step read, keeping black keys darker than the
   whites beside them so it still looks like a keyboard.
   ============================================================ */
/* Endpoints are pushed apart (near-black → pale gold) so BOTH steps
   of the three-way read clear the 3:1 guideline for graphics — with
   only 3 tones between them, a narrower range can't. */
.theme-dark .rk-white       { fill: #1c1810; stroke: #3d3527; }
.theme-dark .rk-white.in    { fill: #8a7132; stroke: #b0904a; }
.theme-dark .rk-white.comfy { fill: #e8d79a; stroke: #f0e4bd; }
.theme-dark .rk-black       { fill: #0c0a06; opacity: 1; }
.theme-dark .rk-black.in    { fill: #52401a; opacity: 1; }
.theme-dark .rk-black.comfy { fill: #9c7f28; opacity: 1; }
/* the legend decodes the ruler, so its swatches must be the exact
   same fills the keys use in each theme */
.theme-dark .lg-comfy { background: #e8d79a; }
.theme-dark .lg-in    { background: #8a7132; border-color: #b0904a; }
.theme-dark .lg-out   { background: #1c1810; border-color: #3d3527; }

/* ============================================================
   "Get the App" page (#getapp) — a permanent home for ComposerKit
   on the website, since the automatic install prompts can be
   dismissed for good and iPhones never show one.
   ============================================================ */

/* the nav item, given a gentle highlight so it reads as an action */
.nav-getapp {
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 4px 12px !important;
  font-weight: 700;
}
.nav-getapp:hover { background: var(--gold); color: #fff; }
/* inside the installed app it makes no sense — you already have it */
.app-mode .nav-getapp { display: none; }

.ga-installed {
  background: var(--card); border: 1px solid var(--gold);
  border-left: 4px solid var(--gold); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 20px; color: var(--ink-2);
}

.ga-top {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 26px; align-items: start; margin-bottom: 26px;
}
.ga-qr { text-align: center; }
.ga-qr-frame {
  background: #fff; border: 2px solid var(--gold);
  border-radius: 16px; padding: 14px;
}
.ga-qr-frame svg { display: block; width: 100%; height: auto; }
.ga-qr-cap { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; margin: 10px 0 0; }

.ga-why-title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 8px; color: var(--ink); }
.ga-why .listen-for { margin-bottom: 16px; }
.ga-install-note { font-size: 0.86rem; color: var(--muted); margin: 8px 0 0; }

.ga-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.ga-card {
  position: relative;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 16px 18px;
}
.ga-card.is-you { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.ga-badge {
  position: absolute; top: -10px; left: 16px;
  background: var(--gold); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.ga-card-title {
  font-family: var(--font-display); font-size: 1.18rem;
  margin: 2px 0 10px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.ga-steps { margin: 0; padding-left: 20px; }
.ga-steps li { margin-bottom: 7px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.ga-steps strong { color: var(--ink); }

.ga-warn {
  background: #fbf1ea; border-left: 4px solid #b4552f;
  border-radius: 12px; padding: 13px 16px; margin-bottom: 22px;
  font-size: 0.92rem; line-height: 1.5; color: #6a3a22;
}

.ga-faq { margin: 0; }
.ga-faq dt {
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  color: var(--ink); margin-top: 14px;
}
.ga-faq dt:first-child { margin-top: 0; }
.ga-faq dd { margin: 3px 0 0; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 620px) {
  .ga-top { grid-template-columns: 1fr; }
  .ga-qr { max-width: 260px; margin: 0 auto; }
}

/* "Can't find the install option?" troubleshooting block on #getapp */
.ga-help {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 22px;
  font-size: 0.92rem; line-height: 1.55; color: var(--ink-2);
}
.ga-help strong { color: var(--ink); }
.ga-help ul { margin: 8px 0 10px; padding-left: 20px; }
.ga-help li { margin-bottom: 6px; }
.ga-help code {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 5px; padding: 1px 5px;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; color: var(--gold);
}

/* Install action inside the matching platform card on #getapp */
.ga-card-action {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--hairline);
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.ga-card-action-note { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.ga-card-install { width: 100%; text-align: center; }
.ga-card-install:disabled { opacity: 0.65; cursor: default; }

/* the Share-button diagram for iPhone / iPad */
.ga-card-diagram { align-items: center; }
.ga-diagram {
  display: block; width: 100%; max-width: 200px; height: auto;
  margin: 0 auto;
}
.theme-dark .ga-diagram { filter: brightness(0.92); }

/* ============================================================
   Launch flourish on the app's home screen — the clef spins in and
   the greeting settles, once per app open. `anim-ready` pre-hides
   both so there's no flash before the splash clears; `anim-go`
   (added by app.js as the splash fades) runs the animation.
   ============================================================ */
.toolkit-hero.anim-ready .toolkit-hero-mark,
.toolkit-hero.anim-ready .tk-greeting { opacity: 0; }

.toolkit-hero.anim-go .toolkit-hero-mark {
  transform-origin: 50% 55%;
  animation: tkClefSpin 1.15s cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes tkClefSpin {
  0%   { opacity: 0; transform: rotate(-340deg) scale(.4); }
  45%  { opacity: 1; }
  72%  { transform: rotate(10deg) scale(1.14); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* the greeting drifts up and its letters draw together */
.toolkit-hero.anim-go .tk-greeting {
  animation: tkGreetIn .75s cubic-bezier(.2, .8, .25, 1) .38s both;
}
@keyframes tkGreetIn {
  from { opacity: 0; transform: translateY(10px); letter-spacing: .22em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: .04em; }
}

/* never animate for anyone who has asked for less motion */
.reduce-motion .toolkit-hero .toolkit-hero-mark,
.reduce-motion .toolkit-hero .tk-greeting {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .toolkit-hero .toolkit-hero-mark,
  .toolkit-hero .tk-greeting {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Games — Composer Memory Match + Timeline Challenge (js/games.js).
   Website-only (the app stays Tools-only); shares the site's card/
   pill vocabulary rather than inventing a new visual language.
   ============================================================ */

/* ---------- Composer Memory Match ---------- */
.mem-box { text-align: center; }
.mem-statusline { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.mem-statusline strong { color: var(--ink); }
.mem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.mem-card {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  aspect-ratio: 3 / 4; perspective: 700px;
}
.mem-card:disabled { cursor: default; }
.mem-card-inner {
  /* a <span> is inline by default — without display:block its explicit
     width/height are ignored, collapsing the faces positioned inside it */
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s ease;
}
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mem-front {
  /* darkened from the raw var(--gold) stop — that measured 4.24:1 with
     this text color, just under 4.5:1 (the glyph is decorative/
     aria-hidden so this isn't strictly required, but cheap to fix) */
  background: linear-gradient(155deg, #7a6122 0%, #5c481a 100%);
  border: 1px solid var(--gold-soft); color: #fdf9ec; font-size: 28px;
}
.mem-back {
  transform: rotateY(180deg); background: var(--card); border: 1px solid var(--ring);
  flex-direction: column; gap: 3px; padding: 4px;
}
.mem-back img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 6px; }
.mem-name { font-size: 10px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.mem-card.matched .mem-card-inner { box-shadow: 0 0 0 2px var(--gold); border-radius: 10px; }
.mem-results, .tl-results { padding: 4px 0; }
.mem-results-headline, .tl-results-headline { font: 700 20px var(--font-display); margin: 0 0 8px; }
.mem-results-tally, .tl-results-tally { font-size: 15px; color: var(--ink-2); margin: 0 0 4px; }
.mem-results-tally strong, .tl-results-tally strong { color: var(--ink); font-size: 17px; }
.mem-results-best, .tl-results-best { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.mem-again, .tl-again { cursor: pointer; }

/* ---------- Timeline Challenge ---------- */
.tl-box { text-align: center; }
.tl-statusline { font-size: 14px; color: var(--ink-2); }
.tl-statusline strong { color: var(--ink); }
.tl-instr { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-2); margin: 8px 0 20px; }
.tl-slots {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px; min-height: 96px;
}
.tl-slot {
  width: 78px; height: 92px; border-radius: 10px; border: 1.5px dashed var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px; text-align: center;
}
.tl-slot.filled { border-style: solid; border-color: var(--gold-soft); background: var(--card); }
.tl-slot img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.tl-slot-name { font-size: 9px; font-weight: 700; color: var(--ink); line-height: 1.1; }
/* a dedicated darker shade, not var(--gold) directly — that measured
   4.35:1 against this light card background, just under 4.5:1 for
   this small (10px) text; the same recurring light-mode gold-on-light
   pattern flagged elsewhere in this session (see the spawned contrast
   audit task) */
.tl-slot-year { font-size: 10px; font-weight: 800; color: #6a551b; }
.theme-dark .tl-slot-year { color: var(--gold); }
.tl-pool { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tl-chip {
  width: 78px; cursor: pointer; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tl-chip:hover { border-color: var(--gold-soft); }
.tl-chip img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.tl-chip-name { font-size: 10px; font-weight: 700; color: var(--ink); line-height: 1.15; text-align: center; }
.tl-chip.wrong { animation: tlShake .4s ease; border-color: #c07a72; }
@keyframes tlShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.reduce-motion .mem-card-inner { transition: none; }
.reduce-motion .tl-chip.wrong { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mem-card-inner { transition: none; }
  .tl-chip.wrong { animation: none; }
}
@media (max-width: 380px) {
  .mem-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Static era pages (composers/eras/<key>/index.html) — the
   composer-roster mini-cards linking each name to their own
   static composer page. Deliberately simpler than .gallery-grid's
   full .card component (which assumes JS-set era-colour framing) —
   just a compact portrait + name + years link.
   ============================================================ */
.era-composer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin: 4px 0 24px;
}
.era-composer-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 8px; border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .1s;
}
.era-composer-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.era-composer-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 1px solid var(--gold-soft); }
.ecc-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.ecc-years { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.era-people-list { margin-bottom: 24px; }