:root {
  color-scheme: light;
  --ink: #171514;
  --muted: #665f58;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --line: #ded7cf;
  --red: #b63f2f;
  --red-dark: #842d24;
  --teal: #176c68;
  --gold: #d99a2b;
  --blue: #263f75;
  --shadow: 0 22px 60px rgba(23, 21, 20, 0.16);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
section, main { scroll-margin-top: 86px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.8vw, 24px);
  padding: 14px clamp(16px, 3vw, 42px);
  background: rgba(251, 250, 247, 0.9);
  border-bottom: 1px solid rgba(222, 215, 207, 0.75);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; font-weight: 800; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.55vw, 24px); color: #312d2a; font-size: 0.94rem; min-width: 0; }
.site-nav a { border-bottom: 2px solid transparent; padding: 8px 0; }
.site-nav a:hover, .site-nav a:focus-visible { border-color: var(--red); }
.nav-tool-selector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #312d2a;
  font: inherit;
  white-space: nowrap;
}
.nav-tool-selector span {
  border-bottom: 2px solid transparent;
  padding: 8px 0;
}
.nav-tool-selector:focus-within span,
.nav-tool-selector:hover span {
  border-color: var(--red);
}
.nav-tool-selector select {
  width: clamp(128px, 13vw, 184px);
  min-height: 34px;
  border: 1px solid rgba(49,45,42,0.24);
  border-radius: 999px;
  background: rgba(251,250,247,0.82);
  color: #312d2a;
  font: inherit;
  font-weight: 750;
  padding: 0 28px 0 12px;
}
.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px;
  padding: 0 18px !important;
  line-height: 1;
  white-space: nowrap;
  background: rgba(251, 250, 247, 0.64);
}
.nav-button { border: 0; background: transparent; color: #312d2a; cursor: pointer; font-weight: 800; padding: 8px 0; }
.menu-toggle { display: none; }

@media (max-width: 1320px) {
  .site-header {
    gap: 12px;
    padding-inline: clamp(14px, 1.8vw, 24px);
  }
  .site-nav {
    gap: clamp(8px, 1vw, 14px);
    font-size: 0.86rem;
  }
  .nav-cta {
    min-height: 36px;
    padding-inline: 14px !important;
  }
}

.hero {
  position: relative;
  min-height: min(660px, 86vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 112px clamp(22px, 6vw, 80px) 84px;
  isolation: isolate;
}

.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -2; }
.hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.68) 42%, rgba(12, 10, 8, 0.14) 100%),
    linear-gradient(0deg, rgba(12, 10, 8, 0.48), rgba(12, 10, 8, 0.04));
}
.hero-content { max-width: 690px; color: white; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; max-width: 12ch; font-size: clamp(3rem, 7vw, 5.65rem); line-height: 0.96; letter-spacing: 0; }
h2 { margin: 0; font-size: clamp(2rem, 4.8vw, 4.6rem); line-height: 1; letter-spacing: 0; }
h3 { margin: 0; font-size: 1.18rem; }
.hero-copy { max-width: 58ch; margin: 24px 0 0; color: rgba(255, 255, 255, 0.88); font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.6; }
.hero-actions, .tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover, .button:focus-visible, .tempo-button:hover, .tool-tab:hover, .tool-tab:focus-visible { transform: translateY(-1px); }
.button.primary { background: var(--red); color: white; }
.button.primary:hover, .button.primary:focus-visible { background: var(--red-dark); }
.button.secondary { border-color: rgba(255, 255, 255, 0.6); color: white; }
.button.quiet { border-color: var(--line); background: var(--panel); }
.text-link { color: var(--red); font-weight: 900; }
.page-main { padding-top: 70px; }
/* Tighten the gap between the fixed header and the first block on every
   subpage so pages start cleanly and consistently (the section/hero defaults
   add too much top padding on top of the 70px header clearance). */
.page-main > :first-child { padding-top: clamp(28px, 4vw, 52px); }
.page-hero {
  display: grid;
  gap: 18px;
  padding: clamp(96px, 14vw, 150px) clamp(18px, 4vw, 52px) clamp(48px, 8vw, 84px);
  background: #ede8e1;
}
.page-hero h1, .auth-copy h1, .portal-loading h1, .about-section h1, .contact-band h1, .tools-page h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: 0.98;
}
.page-hero p:not(.eyebrow), .auth-copy p, .teaser-panel p {
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.65;
}
.lesson-grid-section { padding-top: 28px; }

.quick-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.quick-strip div { min-height: 106px; display: grid; align-content: center; gap: 6px; padding: 22px clamp(18px, 4vw, 52px); background: var(--paper); }
.quick-strip strong { font-size: 1.55rem; }
.quick-strip span, .lesson-panel p, .about-copy, .contact-band p, .reviews-grid blockquote { color: var(--muted); line-height: 1.6; }

.section { padding: clamp(72px, 10vw, 128px) clamp(18px, 4vw, 52px); }
.section-heading { max-width: 920px; margin-bottom: clamp(30px, 5vw, 58px); }
.lesson-grid, .reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lesson-panel, .reviews-grid figure { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 24px; }
.lesson-panel {
  position: relative;
  min-height: 236px;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(222, 215, 207, 0.88);
  background:
    radial-gradient(circle at 88% 8%, rgba(217,154,43,0.14), transparent 32%),
    linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
}
.lesson-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--teal);
}
.lesson-panel:nth-child(2)::after { background: var(--red); }
.lesson-panel:nth-child(3)::after { background: var(--blue); }
.lesson-panel h3 { font-size: 1.28rem; line-height: 1.12; }
.lesson-panel p { margin: 0; }
.lesson-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23,21,20,0.12);
  border-radius: 14px;
  color: #fff9e9;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.25), transparent 30%),
    linear-gradient(145deg, #256f69, #123e3b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 18px rgba(23,21,20,0.16);
}
.lesson-panel:nth-child(2) .lesson-icon { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.25), transparent 30%), linear-gradient(145deg, #c24a3a, #842d24); }
.lesson-panel:nth-child(3) .lesson-icon { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.24), transparent 30%), linear-gradient(145deg, #344e86, #1c2f5a); }
.lesson-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-section { background: #f0ebe4; }
.portal-teaser {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 520px);
  gap: clamp(28px, 6vw, 78px);
  align-items: start;
  background: #f0ebe4;
}
.teaser-panel {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 24px;
}
.portal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.6fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.portal-sidebar, .portal-main, .teacher-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
}
.login-card, .student-card, .teacher-panel, .portal-main { display: grid; gap: 16px; }
.login-card label, .teacher-panel label { display: grid; gap: 8px; }
.login-card span, .teacher-panel label span { color: var(--muted); font-size: 0.88rem; font-weight: 800; }
.is-hidden { display: none !important; }
.student-card p, .portal-toolbar p, .lesson-module p, .teacher-saved { margin: 0; color: var(--muted); line-height: 1.55; }
.progress-ring {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 10px solid #e6ddd2;
  border-top-color: var(--teal);
  border-radius: 50%;
  text-align: center;
}
.progress-ring strong, .progress-ring span { display: block; }
.progress-ring strong { font-size: 2rem; line-height: 1; }
.progress-ring span { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.lesson-module {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-left: 6px solid #d3c8ba;
  border-radius: var(--radius);
  padding: 18px;
  background: #fffdf9;
}
.lesson-module.active { border-left-color: var(--red); }
.module-meta { display: grid; gap: 6px; }
.module-meta span { color: var(--gold); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.module-meta strong { font-size: 1.18rem; }
.module-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.completion-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: #3a332e;
  font-weight: 700;
}
.completion-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); }
.student-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  color: #3a332e;
  font-weight: 900;
}
progress { width: 100%; height: 12px; accent-color: var(--teal); }

.tools-section { background: #11100f; color: white; }
.tools-page {
  min-height: calc(100vh - 70px);
  padding-top: 14px;
  padding-bottom: 18px;
}
.page-main > .tools-page:first-child { padding-top: 14px; }
.tools-page .section-heading {
  max-width: 980px;
  margin-bottom: clamp(26px, 3.2vw, 42px);
}
.tools-page .section-heading h1 {
  max-width: 100%;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.05;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tools-page .section-heading h1 { white-space: normal; }
}
.tools-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight: 750;
}
.tools-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.tool-tabs {
  position: relative;
  z-index: 5;
  display: block;
  width: min(100%, 360px);
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    rgba(17,16,15,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  backdrop-filter: blur(14px);
}
.tool-selector-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: rgba(255,248,224,0.76);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-selector-bar select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: #24180c;
  background: linear-gradient(180deg, #fffaf0, #ead6a9);
  padding: 0 38px 0 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: none;
  letter-spacing: 0;
}
.mobile-toolbar {
  display: none;
}
.mobile-tool-selector {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(17,16,15,0.92);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.mobile-tool-selector span {
  color: rgba(255,248,224,0.72);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-tool-selector select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #24180c;
  background: linear-gradient(180deg, #fffaf0, #ead6a9);
  padding: 0 38px 0 12px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 950;
}
@media (max-width: 860px) {
  .mobile-toolbar {
    position: sticky;
    top: 72px;
    z-index: 16;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
  }
  .mobile-tool-selector,
  .mobile-tool-selector select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
.tools-embed .mobile-toolbar {
  display: none !important;
}
.tool-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tool-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tool-category {
  display: grid;
  grid-template-columns: 92px repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.tool-category span {
  min-width: 0;
  color: rgba(255,248,224,0.66);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-tab {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(180deg, #26231f, #191715);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 0 12px;
  text-align: center;
  font-weight: 900;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.34);
}
.tool-card {
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
}
.tool-card.featured {
  min-height: 86px;
  padding: 12px 14px;
}
.tool-card-kicker {
  color: rgba(255,248,224,0.62);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-card strong {
  color: inherit;
  font-size: clamp(0.98rem, 1.6vw, 1.22rem);
  line-height: 1.05;
}
.tool-card small {
  margin-top: 4px;
  color: rgba(255,255,255,0.58);
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 800;
}
.tool-pill {
  min-height: 38px;
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
  font-size: 0.86rem;
  white-space: nowrap;
}
.tool-category .tool-pill + .tool-pill {
  margin-top: 0;
}
.tool-tab.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #fdf8ed, #e8d3a5);
  border-color: #070809;
  color: #24180c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 0 #070809;
}
.tool-tab.active .tool-card-kicker,
.tool-tab.active small {
  color: rgba(36,24,12,0.72);
}
.tool-surface {
  min-height: calc(100vh - 104px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.08), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 50px rgba(0,0,0,0.22);
  padding: clamp(10px, 1.4vw, 18px);
}
.tools-page .tool-tabs {
  max-height: 680px;
  overflow: hidden;
  transition: transform 180ms ease, opacity 180ms ease, max-height 180ms ease, padding 180ms ease, margin 180ms ease, border-color 180ms ease;
  will-change: transform;
}
.tools-page .tools-layout {
  transition: gap 180ms ease;
}
.tools-page.tools-nav-hidden .tools-layout {
  gap: 0;
}
.tools-page.tools-nav-hidden .tool-tabs {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 18px));
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
}
.tool-pane { display: none; }
.tool-pane.active { display: grid; gap: 0; }
.tool-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tool-badge { min-width: 76px; border-radius: 999px; background: #e7ded2; color: #413832; padding: 7px 12px; text-align: center; font-size: 0.82rem; font-weight: 800; }

.metronome-stage {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
}
.metronome-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 390px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 18px;
  background:
    radial-gradient(circle at 84% 76%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #30343a, #171a1f);
  border: 1px solid #0e1013;
  border-radius: 34px 34px 42px 42px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -18px 34px rgba(0,0,0,0.4), 0 18px 38px rgba(23,21,20,0.24);
  overflow: hidden;
}
.metronome-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.device-top {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.beat-lights {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.beat-lights span {
  height: 12px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.beat-lights span.enabled {
  background: #2a352c;
}
.beat-lights span.active {
  background: #80e186;
  box-shadow: 0 0 14px rgba(128,225,134,0.8);
}
.metronome-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(390px, 1.18fr);
  gap: 16px;
  align-items: stretch;
}
.metronome-display-stack {
  width: 100%;
  max-width: 390px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.lcd-screen {
  width: 100%;
  max-width: 390px;
  min-height: 225px;
  display: grid;
  align-content: center;
  gap: 4px;
  justify-items: center;
  border: 3px solid #0c0e10;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.72) 0%, rgba(255,191,68,0.42) 28%, transparent 58%),
    radial-gradient(ellipse at 18% 100%, rgba(255,88,24,0.34), transparent 46%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%),
    repeating-linear-gradient(0deg, rgba(88,54,18,0.04), rgba(88,54,18,0.04) 1px, transparent 1px, transparent 4px);
  color: #24180c;
  box-shadow: inset 0 0 18px rgba(69,38,7,0.28), inset 0 -20px 34px rgba(255,120,24,0.28), 0 0 18px rgba(255,139,24,0.12);
}
.lcd-screen span {
  color: rgba(36,24,12,0.7);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.lcd-label {
  justify-self: start;
  margin-left: 18px;
}
.speaker-grill {
  position: relative;
  z-index: 1;
  width: min(70%, 390px);
  display: grid;
  gap: 6px;
}
.speaker-grill span {
  height: 4px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}
.bpm-readout { display: grid; place-items: center; color: #24180c; font-family: "Courier New", ui-monospace, monospace; font-size: clamp(4.2rem, 10vw, 6.2rem); font-weight: 900; line-height: 0.9; text-shadow: 0 1px 0 rgba(255,244,205,0.44); }
.metronome-controls {
  width: 100%;
  min-height: 225px;
  height: 225px;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.metronome-settings-stack {
  width: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
}
.tempo-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tempo-presets button {
  min-height: 32px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.metronome-control-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.metronome-control-row input,
.metronome-control-row select {
  min-height: 30px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 48%),
    #b8caa2;
  color: #172016;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.metronome-control-row input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #d14435;
}
.metronome-control-row input[data-bpm-slider] {
  min-height: 36px;
}
.metronome-control-row input[type="range"]::-webkit-slider-runnable-track {
  height: 11px;
  border: 1px solid #070809;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.38), transparent 62%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%);
  box-shadow: inset 0 0 10px rgba(69,38,7,0.26), 0 0 10px rgba(255,139,24,0.12);
}
.metronome-control-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border: 2px solid #070809;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 30%),
    linear-gradient(180deg, #df4b3d, #9f251d);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 10px rgba(209,68,53,0.18);
}
.metronome-control-row input[data-bpm-slider]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border: 2px solid #070809;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 30%),
    linear-gradient(180deg, #df4b3d, #9f251d);
  box-shadow: 0 4px 10px rgba(0,0,0,0.42), 0 0 12px rgba(209,68,53,0.22);
}
.metronome-control-row input[type="range"]::-moz-range-track {
  height: 11px;
  border: 1px solid #070809;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%);
  box-shadow: inset 0 0 10px rgba(69,38,7,0.26), 0 0 10px rgba(255,139,24,0.12);
}
.metronome-control-row input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #070809;
  border-radius: 50%;
  background: #df4b3d;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 10px rgba(209,68,53,0.18);
}
.metronome-control-row input[data-bpm-slider]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #070809;
  background: #df4b3d;
  box-shadow: 0 4px 10px rgba(0,0,0,0.42), 0 0 12px rgba(209,68,53,0.22);
}
.metronome-beats-row {
  align-items: center;
}
.metronome-beat-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.metronome-beat-buttons button {
  min-height: 32px;
  border: 1px solid #060708;
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 3px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.metronome-beat-buttons button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -4px 7px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 13px rgba(209,68,53,0.24);
}
.metronome-actions {
  display: grid;
  grid-template-columns: minmax(130px, 190px);
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.metronome-actions .button {
  min-height: 46px;
  justify-content: center;
  border: 1px solid #060708;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 4px 0 #060708;
}
.metronome-speaker {
  width: min(74%, 300px);
  justify-self: center;
}

.looper-stage {
  display: grid;
  justify-content: center;
  justify-items: center;
}
.looper-device {
  position: relative;
  width: min(100%, 1180px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  padding: 26px 18px 18px;
  border: 1px solid #0e1013;
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 18%, rgba(128,225,134,0.1), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(180deg, #2b3037, #14171c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -18px 34px rgba(0,0,0,0.4), 0 18px 38px rgba(23,21,20,0.24);
  overflow: hidden;
}
.looper-device::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 17px;
  pointer-events: none;
}
.looper-device > * {
  position: relative;
  z-index: 1;
}
.looper-face {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(300px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.looper-transport,
.looper-settings {
  display: grid;
  align-content: start;
  gap: 12px;
}
.looper-screen {
  max-width: none;
  min-height: 150px;
  padding: 15px;
}
.looper-readout {
  display: grid;
  place-items: center;
  color: #24180c;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.92;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,244,205,0.44);
}
.looper-screen span:last-child {
  max-width: 30ch;
  text-align: center;
  line-height: 1.35;
  font-size: 0.78rem;
}
.looper-progress {
  height: 10px;
  border: 1px solid #070809;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.75);
  overflow: hidden;
}
.looper-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #80e186, #e8a53a, #d14435);
  box-shadow: 0 0 16px rgba(128,225,134,0.42);
}
.looper-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.looper-actions .button {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 11px;
  padding-inline: 10px;
  font-size: 0.82rem;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 3px 0 #060708;
}
.looper-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}
.looper-controls {
  min-height: 0;
  height: auto;
  padding: 12px;
  gap: 10px;
}
.looper-controls .metronome-control-row {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.68rem;
}
.metronome-control-row input[data-looper-bpm] {
  min-height: 30px;
}
.metronome-control-row input[data-looper-bpm]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
}
.metronome-control-row input[data-looper-bpm]::-moz-range-thumb {
  width: 22px;
  height: 22px;
}
.looper-measures-row {
  grid-template-columns: 78px 86px;
  justify-content: start;
}
.looper-measures-row select {
  width: 86px;
  min-height: 32px;
  padding: 0 26px 0 10px;
  justify-self: start;
  font-size: 0.9rem;
}
.looper-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.76);
  font-size: 0.78rem;
  font-weight: 800;
}
.looper-check input {
  width: 18px;
  height: 18px;
  accent-color: #d14435;
}
.looper-help {
  margin: 0;
  color: rgba(255,255,255,0.64);
  font-size: 0.78rem;
  line-height: 1.45;
}
.looper-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.looper-track-grid.looper-single-track {
  grid-template-columns: minmax(0, 1fr);
}
.looper-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 15px;
  background: rgba(10,12,15,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.looper-single-track .looper-track {
  min-height: 74px;
}
.looper-track.has-audio {
  border-color: rgba(128,225,134,0.28);
  background: rgba(22,32,25,0.74);
}
.looper-track.is-muted {
  border-color: rgba(255,255,255,0.08);
  background: rgba(13,15,18,0.76);
  opacity: 0.72;
}
.looper-track.is-muted .looper-switch span {
  border-color: #5d160f;
  background: linear-gradient(180deg, #d14435, #7f2017);
  color: #fff7f0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.16), inset 0 -4px 7px rgba(0,0,0,0.35), 0 2px 0 #3f0f0a;
}
.looper-track.is-recording {
  border-color: rgba(209,68,53,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(209,68,53,0.16);
}
.looper-track-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.looper-track-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #060708;
  border-radius: 12px;
  background: linear-gradient(180deg, #343a42, #111318);
  color: white;
  font-weight: 900;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 3px 0 #060708;
}
.looper-track-main strong,
.looper-track-main span:not(.looper-track-number) {
  display: block;
}
.looper-track-main strong {
  color: rgba(255,255,255,0.92);
  font-size: 0.92rem;
}
.looper-track-main div span {
  margin-top: 3px;
  color: rgba(255,255,255,0.58);
  font-size: 0.74rem;
  font-weight: 800;
}
.looper-waveform {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.looper-track-controls {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 8px;
}
.looper-track-controls button,
.looper-track-controls a,
.looper-switch span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #060708;
  border-radius: 10px;
  padding: 0 10px;
  background: linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.88);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 2px 0 #060708;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}
.looper-track-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.44;
}
.looper-switch {
  display: inline-flex;
}
.looper-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.looper-switch input:checked + span {
  background: linear-gradient(180deg, #348f4c, #18582a);
}
.looper-switch input:disabled + span {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 900px) {
  .looper-device {
    padding: 28px 16px 18px;
    border-radius: 24px;
  }
  .looper-face,
  .looper-track-grid {
    grid-template-columns: 1fr;
  }
  .looper-readout {
    font-size: 3.35rem;
  }
}

@media (max-width: 560px) {
  .looper-device {
    padding-inline: 12px;
  }
  .looper-track {
    grid-template-columns: 1fr;
  }
  .looper-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .looper-track-controls {
    justify-content: start;
  }
  .looper-readout {
    font-size: 2.45rem;
  }
}

.backing-stage {
  display: grid;
  justify-content: center;
  justify-items: center;
}
.backing-device {
  position: relative;
  width: min(100%, 1260px);
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 26px 18px 18px;
  border: 1px solid #0e1013;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 16%, rgba(232,165,58,0.12), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(83,148,224,0.1), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(180deg, #2d3036, #14171c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -18px 34px rgba(0,0,0,0.4), 0 18px 38px rgba(23,21,20,0.24);
  overflow: hidden;
}
.backing-device::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 17px;
  pointer-events: none;
}
.backing-device > * {
  position: relative;
  z-index: 1;
}
.backing-face {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 560px) 640px;
  gap: 18px;
  justify-content: center;
  align-items: start;
  overflow: hidden;
}
.backing-player,
.backing-settings {
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
}
.backing-player {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  grid-template-rows: auto;
}
.backing-screen {
  max-width: none;
  min-width: 0;
  min-height: 168px;
  padding: 15px;
  overflow: hidden;
}
.backing-readout {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  place-items: center;
  color: #24180c;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(1.85rem, 4.2vw, 2.8rem);
  font-weight: 900;
  line-height: 0.92;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,244,205,0.44);
}
.backing-screen span:last-child {
  width: 100%;
  max-width: 34ch;
  text-align: center;
  line-height: 1.35;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backing-progress {
  height: 10px;
  border: 1px solid #070809;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.75);
  overflow: hidden;
}
.backing-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e8a53a, #d14435, #5394e0);
  box-shadow: 0 0 16px rgba(232,165,58,0.36);
}
.backing-actions {
  display: grid;
  margin: 0;
}
.backing-actions .button {
  min-height: 42px;
  border: 1px solid #060708;
  border-radius: 11px;
  padding-inline: 10px;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 3px 0 #060708;
}
.backing-youtube-frame {
  position: relative !important;
  width: 640px !important;
  height: 360px !important;
  min-width: 640px !important;
  max-width: 640px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  justify-self: center !important;
  align-self: start !important;
  flex: 0 0 360px !important;
  contain: strict;
  overflow: hidden !important;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #050607;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.28);
}
.backing-player .backing-youtube-frame {
  align-self: start;
}
.backing-youtube-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 640px !important;
  height: 360px !important;
  min-width: 640px !important;
  max-width: 640px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  border: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}
.is-youtube-backing [data-backing-generated-control],
.is-youtube-backing .backing-progress,
.is-youtube-backing .backing-actions {
  display: none;
}
.backing-chords {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.backing-chord {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(9,11,14,0.72);
  color: rgba(255,255,255,0.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.backing-chord.active {
  border-color: rgba(232,165,58,0.8);
  background: linear-gradient(180deg, rgba(232,165,58,0.28), rgba(209,68,53,0.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 3px rgba(232,165,58,0.12);
}
.backing-chord strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.05;
}
.backing-chord small {
  color: rgba(255,255,255,0.56);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.backing-controls {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: auto;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
}
.backing-controls .metronome-control-row {
  min-width: 0;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.68rem;
}
.backing-controls select,
.backing-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
}
.backing-controls input[data-backing-bpm]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
}
.backing-controls input[data-backing-bpm]::-moz-range-thumb {
  width: 22px;
  height: 22px;
}
.backing-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.backing-parts label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.8);
  font-size: 0.76rem;
  font-weight: 900;
}
.backing-parts input {
  width: 17px;
  height: 17px;
  accent-color: #d14435;
}
.backing-help {
  margin: 0;
  max-width: 35ch;
  color: rgba(255,255,255,0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .backing-device {
    padding: 28px 16px 18px;
    border-radius: 24px;
  }
  .backing-face {
    grid-template-columns: 1fr;
  }
  .backing-settings,
  .backing-player {
    justify-self: center;
    width: min(100%, 640px);
  }
  .backing-youtube-frame {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    flex-basis: auto !important;
  }
  .backing-youtube-frame iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 560px) {
  .backing-device {
    padding-inline: 12px;
  }
  .backing-chords,
  .backing-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .backing-controls .metronome-control-row {
    grid-template-columns: 1fr;
  }
  .backing-readout {
    font-size: 2.05rem;
  }
}

.tuner-layout {
  display: grid;
  justify-items: center;
}
.tuner-device {
  position: relative;
  width: min(100%, 1180px);
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  grid-template-areas:
    "top top"
    "screen controls"
    "led speaker";
  gap: 12px 16px;
  justify-items: center;
  align-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.tuner-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.tuner-clip {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 144px;
  height: 68px;
  border: 1px solid #090a0c;
  border-radius: 22px 22px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 36%),
    linear-gradient(135deg, #2d3137, #111318);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,0.42), 0 10px 24px rgba(0,0,0,0.2);
  transform: translateX(-50%);
}
.tuner-top {
  grid-area: top;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,0.74);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.tuner-screen {
  grid-area: screen;
  width: 100%;
  max-width: 390px;
  min-height: 225px;
  align-self: start;
  display: grid;
  align-content: center;
  gap: 6px;
  justify-items: center;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.72) 0%, rgba(255,191,68,0.42) 28%, transparent 58%),
    radial-gradient(ellipse at 18% 100%, rgba(255,88,24,0.34), transparent 46%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%),
    repeating-linear-gradient(0deg, rgba(88,54,18,0.04), rgba(88,54,18,0.04) 1px, transparent 1px, transparent 4px);
  color: #24180c;
  box-shadow: inset 0 0 24px rgba(69,38,7,0.3), inset 0 -22px 38px rgba(255,120,24,0.29), 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(255,139,24,0.12);
}
.tuner-meter {
  position: relative;
  width: min(100%, 270px);
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 4px;
  padding-top: 18px;
  color: rgba(36,24,12,0.7);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}
.tuner-meter::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 10px;
  height: 22px;
  border-top: 2px solid rgba(36,24,12,0.52);
  border-radius: 50% 50% 0 0;
}
.tuner-meter i {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 40px;
  border-radius: 999px;
  background: #24180c;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.24);
  transform: translateX(-50%) rotate(var(--needle-angle, 0deg));
  transform-origin: 50% 100%;
  transition: transform 180ms ease;
}
.tuner-note {
  color: #24180c;
  text-shadow: 0 1px 0 rgba(255,244,205,0.44);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(4.2rem, 10vw, 6.2rem);
  font-weight: 900;
  line-height: 0.8;
}
.tuner-cents {
  min-height: 20px;
  color: rgba(36,24,12,0.82);
  font-weight: 900;
}
.tuner-hz {
  color: rgba(36,24,12,0.7);
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 900;
}
/* GWJ-244: the calibration badge, in the device's top bar rather than on the screen.
   Sits between the model name and "Chromatic Tuner" — the flex row is already
   space-between, so a third child centres itself. Monospace and slightly brighter than
   its neighbours so it reads as a value, not a label. */
.tuner-top-left {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.tuner-calib {
  font-family: "Courier New", ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
}
.tuner-led-row {
  grid-area: led;
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 16px;
}
.tuner-led-row span {
  width: 28px;
  height: 14px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.tuner-device.flat [data-tuner-led="flat"],
.tuner-device.sharp [data-tuner-led="sharp"] {
  background: #f0bd4c;
  box-shadow: 0 0 16px rgba(240,189,76,0.72);
}
.tuner-device.in-tune [data-tuner-led="in"] {
  background: #7ee08b;
  box-shadow: 0 0 18px rgba(126,224,139,0.82);
}
.tuner-controls {
  grid-area: controls;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 390px;
  height: 100%;
  align-self: start;
  align-content: space-between;
  min-height: 225px;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.tuner-select {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.68);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tuner-select select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tuner-wheel {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(130px, 1fr) 44px;
  align-items: center;
  gap: 0;
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 44%),
    linear-gradient(180deg, #050607 0%, #191d21 45%, #050607 100%);
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,0.04),
    inset 0 -14px 20px rgba(0,0,0,0.82),
    0 8px 18px rgba(0,0,0,0.34);
}
.tuner-wheel-step,
.tuner-wheel-face {
  min-height: 44px;
  border: 0;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  box-shadow: none;
}
.tuner-wheel-step {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14px 11px, rgba(255,255,255,0.13) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 11px, rgba(255,255,255,0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 14px 23px, rgba(255,255,255,0.1) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 23px, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 14px 35px, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 35px, rgba(255,255,255,0.07) 0 2px, transparent 3px),
    linear-gradient(90deg, #0b0d10, #20242a 46%, #0b0d10);
  font-size: 0;
}
.tuner-wheel-step:first-child { border-radius: 22px 7px 7px 22px; }
.tuner-wheel-step:last-child { border-radius: 7px 22px 22px 7px; }
.tuner-wheel-face {
  min-height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  padding: 9px 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.44), transparent 18%, transparent 82%, rgba(0,0,0,0.5)),
    radial-gradient(ellipse at 50% -8%, rgba(255,255,255,0.18), transparent 42%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.64), transparent 54%),
    linear-gradient(180deg, #24282d 0%, #121519 45%, #070809 100%);
  color: rgba(238,238,238,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -8px 16px rgba(0,0,0,0.76),
    inset 0 0 24px rgba(255,255,255,0.03);
  font-weight: 900;
}
.tuner-wheel-face::before,
.tuner-wheel-face::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  height: 18%;
  border-radius: 999px;
  background: rgba(242,242,242,0.62);
  transform: translateX(-50%);
}
.tuner-wheel-face::before { top: 4px; }
.tuner-wheel-face::after { bottom: 4px; }
.tuner-wheel-face strong {
  position: relative;
  z-index: 1;
  color: rgba(242,242,242,0.86);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(0.72rem, 1.7vw, 0.98rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 12px rgba(255,255,255,0.08);
}
.tuner-wheel-mark {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(242,242,242,0.28);
  transform: translateX(-50%);
}
.tuner-speaker {
  grid-area: speaker;
  position: relative;
  z-index: 1;
  width: min(72%, 310px);
  display: grid;
  gap: 6px;
}
.tuner-speaker span {
  height: 4px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}
.string-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.string-buttons button {
  min-height: 44px;
  border: 1px solid #060708;
  border-radius: 11px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.string-buttons button span {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,0.5);
  font-size: 0.6rem;
}
.string-buttons button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.string-buttons button.active span { color: rgba(255,255,255,0.72); }
.tuner-device-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tuner-device-actions button {
  position: relative;
  min-height: 44px;
  border: 1px solid #060708;
  border-radius: 11px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #2b3037, #111318);
  color: rgba(255,255,255,0.9);
  padding: 6px 10px 6px 30px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tuner-device-actions button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #161a1d;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(-50%);
}
.tuner-device-actions button.active::before {
  background: #7ee08b;
  box-shadow: 0 0 12px rgba(126,224,139,0.88), 0 0 0 1px rgba(230,255,232,0.36);
}
.tuner-device-actions button:first-child {
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.tuner-readout {
  margin: 0;
  color: rgba(255,255,255,0.54);
  font-weight: 800;
  text-align: center;
}
.tuner-diagnostic {
  min-height: 22px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-weight: 800;
  text-align: center;
}
.tuner-diagnostic:empty {
  display: none;
}
.scale-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 640px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.scale-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.scale-device .device-top,
.scale-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.scale-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(820px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.scale-control-panel,
.scale-screen {
  min-width: 0;
  border-radius: 22px;
}
.scale-control-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.scale-screen {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.scale-device .scale-controls,
.scale-device .scale-fingering-row,
.scale-mode-section {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
.scale-device .scale-controls label {
  gap: 5px;
}
.scale-device .scale-controls span,
.scale-device .scale-fingering-label {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
}
.scale-device .scale-controls select {
  min-height: 40px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.scale-device .scale-chips {
  display: grid;
  gap: 8px;
}
.scale-device .scale-chip {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 3px 0 #060708;
}
.scale-device .scale-chip.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
}
.scale-mode-section {
  display: grid;
}
.scale-device .scale-mode-toggle {
  justify-self: start;
  border-color: #070809;
  background: rgba(255,249,233,0.08);
}
.scale-device .scale-mode-button {
  color: rgba(255,248,224,0.86);
}
.scale-device .scale-mode-button.active {
  background: linear-gradient(180deg, #d95a48, #9f2d23);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.3);
}
.scale-screen .scale-title,
.scale-screen .scale-summary,
.scale-screen .scale-legend,
.scale-screen .scale-info-row dt,
.scale-screen .scale-info-row dd {
  color: #24180c;
}
.scale-screen .scale-info-row.scale-info-cue dd {
  color: #9f251d;
}
.scale-screen .scale-board-scroll {
  max-width: 100%;
  border-color: rgba(36,24,12,0.16);
  background: transparent;
  box-shadow: none;
}

/* Modes tool */
.modes-device-face {
  grid-template-columns: minmax(220px, 300px) minmax(760px, 1fr);
}
.modes-chip-grid {
  display: grid;
  gap: 8px;
}
.modes-chip {
  display: grid;
  gap: 1px;
  align-content: center;
  text-align: left;
}
.modes-chip strong,
.modes-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modes-chip strong {
  font-size: 0.9rem;
  line-height: 1.05;
}
.modes-chip span {
  color: rgba(255,248,224,0.68);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modes-chip.active span {
  color: rgba(255,255,255,0.78);
}
.modes-label-section {
  display: grid;
  gap: 10px;
}
.modes-label-toggle {
  display: inline-flex;
  width: fit-content;
  padding: 4px;
  border: 1px solid #070809;
  border-radius: 999px;
  background: rgba(255,249,233,0.08);
}
.modes-label-toggle button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(255,248,224,0.86);
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}
.modes-label-toggle button.active {
  color: #fff;
  background: linear-gradient(180deg, #d95a48, #9f2d23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.3);
}
.modes-parent-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.modes-parent-card span,
.modes-parent-card small {
  color: rgba(255,248,224,0.72);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modes-parent-card strong {
  color: #fff8e0;
  font-size: 1.05rem;
}
.modes-parent-card small {
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}
.modes-example-section {
  display: grid;
  gap: 10px;
}
.modes-example-grid {
  display: grid;
  gap: 8px;
}
.modes-example-button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    #11151a;
  color: rgba(255,248,224,0.9);
  cursor: pointer;
  text-align: left;
}
.modes-example-button strong,
.modes-example-button span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modes-example-button strong {
  font-size: 0.85rem;
  line-height: 1.05;
}
.modes-example-button span {
  color: rgba(255,248,224,0.62);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.modes-example-button.active {
  border-color: rgba(247,198,84,0.58);
  background:
    radial-gradient(circle at 16% 24%, rgba(247,198,84,0.3), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)),
    #17130c;
}
.modes-screen {
  align-content: start;
}
.modes-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
  gap: 12px;
}
.modes-lab-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.23)),
    rgba(255,250,238,0.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
}
.modes-lab-card h5,
.modes-lab-card p,
.modes-lab-card ol,
.modes-lab-card dl {
  margin: 0;
}
.modes-lab-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #8f3b25;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modes-lab-card h5 {
  color: #24180c;
  font-size: 1rem;
  line-height: 1.18;
}
.modes-lab-card p,
.modes-compare-card dd,
.modes-practice-card li {
  color: #5d554d;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.42;
}
.modes-sound-card {
  display: grid;
  align-content: start;
  gap: 10px;
}
.modes-audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.modes-audio-actions button {
  min-height: 36px;
  border: 1px solid rgba(126,44,28,0.45);
  border-radius: 999px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, #d14435, #9d2c22);
  color: #fff;
  box-shadow: 0 2px 8px rgba(116,35,26,0.14);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}
.modes-audio-actions button:hover {
  filter: brightness(1.04);
}
.modes-color-card {
  display: grid;
  align-content: start;
  gap: 10px;
}
.modes-color-note {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modes-color-note strong {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  border: 2px solid #fff3c6;
  border-radius: 999px;
  background: #c78d1c;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 4px 12px rgba(130,78,12,0.16);
}
.modes-color-note span {
  color: #24180c;
  font-size: 1.5rem;
  font-weight: 950;
}
.modes-compare-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(36,24,12,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.42);
}
.modes-compare-card dt {
  margin: 0 0 4px;
  color: #8f3b25;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modes-practice-card {
  grid-column: 1 / -1;
}
.modes-practice-card ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  counter-reset: mode-step;
  list-style: none;
}
.modes-practice-card li {
  position: relative;
  min-height: 70px;
  padding: 12px 12px 12px 44px;
  border: 1px solid rgba(36,24,12,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.38);
}
.modes-practice-card li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #24180c;
  color: #fff7df;
  content: counter(mode-step);
  counter-increment: mode-step;
  font-size: 0.76rem;
  font-weight: 950;
}
.modes-family-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.modes-family-item {
  min-width: 0;
  min-height: 56px;
  padding: 8px 7px;
  border: 1px solid rgba(36,24,12,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.34);
  color: #5d554d;
  cursor: pointer;
  text-align: center;
}
.modes-family-item strong,
.modes-family-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modes-family-item strong {
  color: #24180c;
  font-size: 1rem;
  line-height: 1.05;
}
.modes-family-item span {
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.modes-family-item.active {
  border-color: rgba(209,68,53,0.7);
  background: linear-gradient(180deg, #d14435, #96251c);
  color: rgba(255,255,255,0.82);
  box-shadow: 0 4px 12px rgba(116,35,26,0.18);
}
.modes-family-item.active strong {
  color: #fff;
}
.modes-info {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .modes-device-face {
    grid-template-columns: 1fr;
  }
  .modes-lab-grid,
  .modes-practice-card ol {
    grid-template-columns: 1fr;
  }
  .modes-family-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .modes-info {
    grid-template-columns: 1fr;
  }
}

/* Finger dexterity lesson widget */
.gps-dexterity {
  margin: 28px 0;
  max-width: 1320px;
}
.dexterity-device {
  position: relative;
  padding: 30px 14px 14px;
  border: 4px solid #0a0b0d;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.14), transparent 22%),
    linear-gradient(145deg, #383d44, #11151a 58%, #080a0d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 -22px 40px rgba(0,0,0,0.42), 0 16px 38px rgba(0,0,0,0.18);
}
.dexterity-device .device-top {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,0.72);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dexterity-device-face {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.dexterity-control-panel {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.dexterity-panel-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dexterity-chips {
  display: grid;
  gap: 8px;
}
.dexterity-field {
  display: grid;
  gap: 0;
}
.dexterity-select {
  width: 100%;
  min-height: 38px;
  border: 3px solid #060708;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fffaf0, #ead9ad);
  color: #26190f;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 8px 34px 8px 12px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.7), 0 2px 0 rgba(0,0,0,0.55);
}
.dexterity-select:focus {
  outline: 3px solid rgba(177,64,50,0.42);
  outline-offset: 2px;
}
.dexterity-direction-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 38px;
  padding: 4px;
  border: 3px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #191c21, #08090b);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.72), 0 2px 0 rgba(0,0,0,0.58);
  overflow: hidden;
}
.dexterity-direction-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #ead9ad);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.7), 0 2px 7px rgba(0,0,0,0.36);
  transition: transform 160ms ease;
}
.dexterity-direction-toggle[data-direction="reverse"]::before {
  transform: translateX(100%);
}
.dexterity-direction-toggle button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.86);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}
.dexterity-direction-toggle button.active {
  color: #26190f;
}
.dexterity-readout {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
}
.dexterity-readout strong {
  color: #fff8e6;
  font-size: 0.9rem;
}
.dexterity-readout span {
  color: rgba(255,248,224,0.7);
  font-size: 0.78rem;
  line-height: 1.35;
}
.dexterity-controls {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.7fr;
  gap: 8px;
}
.dexterity-button {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 3px 0 #060708;
}
.dexterity-play.is-playing {
  background: linear-gradient(180deg, #d95a48, #9f2d23);
}
.dexterity-screen {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16);
}
.dexterity-board {
  min-width: 0;
  overflow-x: auto;
}
.dexterity-svg {
  display: block;
  width: 100%;
  min-width: 680px;
  height: auto;
}
.dexterity-active-dot {
  transform-origin: center;
}
.dexterity-step-copy {
  justify-self: center;
  color: #24180c;
  font-weight: 900;
  font-size: 0.95rem;
  text-align: center;
}
.tools-dexterity {
  margin: 0;
}
.tools-dexterity .dexterity-device {
  max-width: 1220px;
  margin: 0 auto;
}
.tools-dexterity .dexterity-device-face {
  grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
}
.tools-dexterity .dexterity-screen .scale-heading-bar {
  margin-bottom: 0;
}
.tools-dexterity .dexterity-screen .scale-legend {
  margin: 0;
  font-size: 0.82rem;
}

/* ==== GWJ-FD1 pedal reskin (skin.css) — chassis / LCD / footswitches ====
   CSS-only overrides that turn the Finger Dexterity widget into the GWJ pedal
   family. Panel controls are real GWJDevice knobs (.ch-knob*, already themed);
   this styles the chassis, header, faceplate, transport stomps and amber LCD. */
.dexterity-device {
  border: 1px solid #423d34;
  border-radius: 30px;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.10), transparent 24%),
    linear-gradient(180deg, #35312a 0%, #26231d 34%, #201d17 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10), inset 0 -3px 8px rgba(0,0,0,.55),
    0 40px 80px -24px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.5);
}
.dexterity-device::before,
.dexterity-device::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a453b, #1a1712);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.6);
}
.dexterity-device::before { top: 12px; left: 12px; }
.dexterity-device::after  { top: 12px; right: 12px; }
.dexterity-device .device-top { align-items: center; left: 26px; right: 26px; padding-right: 52px; box-sizing: border-box; }
.dexterity-device .device-top > span:first-child {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; letter-spacing: .14em; color: #d3ccbe;
}
.dexterity-device .device-top > span:first-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #39c46a; box-shadow: 0 0 8px 1px #39c46a;
  animation: gwj-led 2.4s ease-in-out infinite;
}
.dexterity-device .device-top > span:last-child {
  font-weight: 800; letter-spacing: .14em; font-size: 0.68rem; color: #6f6a5f;
  white-space: nowrap;
}
.dexterity-control-panel {
  border: 1px solid #2b271f;
  border-radius: 18px;
  background: linear-gradient(180deg, #171510, #121009);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05);
}
.dexterity-dials { display: grid; gap: 16px; }
.dexterity-field { display: grid; gap: 7px; }
.dexterity-panel-label {
  color: #8a8375;
  font-weight: 800; font-size: 11px; letter-spacing: .2em;
  margin: 0;
}
.dexterity-dials .ch-knobcol { gap: 5px; }
.dexterity-dials .dexterity-switch-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
}
.dexterity-dials .ch-knobs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  justify-items: center;
}
.dexterity-dials .ch-knob {
  transform: scale(.82);
  transform-origin: top center;
  margin-bottom: -20px;
}
.dexterity-dials .ch-knob__ring { margin: 0 auto; }
.dexterity-dials .ch-knobcol { min-width: 0; }
.dexterity-dials .ch-switch {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  width: max-content;
  justify-self: start;
  padding: 3px;
  border-radius: 8px;
  background: #0c0a06;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 0 0 1px #26221b;
}
.dexterity-dials .ch-switch__thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  transform: translateX(calc(var(--i, 0) * 100%));
  border-radius: 6px;
  background:
    radial-gradient(circle at 40% 26%, rgba(255,255,255,.35), transparent 46%),
    linear-gradient(180deg, #d7d2c8, #a29d93 52%, #6f6a61);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.4,1.3,.5,1);
  pointer-events: none;
}
.dexterity-dials .ch-switch__pos {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 10px; letter-spacing: .06em;
  color: #7d766a;
  transition: color .16s;
}
.dexterity-dials .ch-switch__pos.is-on { color: #211a12; }
.dexterity-controls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  justify-items: center; align-items: start;
}
.dexterity-switch { display: grid; justify-items: center; gap: 8px; }
.dexterity-switch__lab {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: #b9b2a4;
}
.ch-stomp {
  position: relative;
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid #1b1915;
  cursor: pointer; padding: 0;
  background:
    conic-gradient(from 210deg, #46423b, #6b665c, #322e28, #6b665c, #46423b);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.6),
    0 8px 13px -4px rgba(0,0,0,.72);
  transition: transform .06s ease, box-shadow .06s ease;
}
.ch-stomp:active { transform: translateY(3px); box-shadow: inset 0 2px 3px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.55), 0 3px 6px -3px rgba(0,0,0,.7); }
.ch-stomp__cap {
  position: absolute; inset: 8px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 34% 26%, #fff, transparent 32%),
    linear-gradient(180deg, #fdfdfb, #e8e5de 17%, #a7a299 41%, #6f6a61 51%, #aca79d 62%, #eae7e0 84%, #cbc6bb);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4);
}
.ch-stomp__led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a271f;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
.ch-stomp--accent .ch-stomp__led { background: #7a2318; }
.ch-stomp.is-lit .ch-stomp__led { background: #ff3b30; box-shadow: 0 0 8px 1px rgba(255,59,48,.9); }
.ch-stomp--play.is-lit .ch-stomp__led { background: #39e070; box-shadow: 0 0 9px 1px rgba(57,224,112,.95); }
.ch-stomp--step.is-lit .ch-stomp__led { background: #ffcf3a; box-shadow: 0 0 9px 1px rgba(255,207,58,.95); }
.ch-stomp--reset.is-lit .ch-stomp__led { background: #ff3b30; box-shadow: 0 0 9px 1px rgba(255,59,48,.95); }
.dexterity-readout {
  border: 1px solid #3a251d;
  border-radius: 9px;
  background: linear-gradient(180deg, #221510, #180d09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 2px rgba(0,0,0,.4);
}
.dexterity-readout strong { color: #e9e2d3; font-size: 0.86rem; }
.tools-dexterity .dexterity-screen { grid-template-columns: minmax(0, 1fr); }
.dexterity-board { width: 100%; max-width: 100%; justify-self: stretch; overflow: hidden; }
.dexterity-svg { min-width: 0; width: 100%; height: auto; display: block; }
.dexterity-screen {
  position: relative;
  border: 5px solid #0a0906;
  border-radius: 16px;
  background-color: #efb457;
  background-image: linear-gradient(180deg, #f8efd4 0%, #f4d79a 58%, #efb457 100%);
  background-size: 100% 540px;
  background-position: top center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 2px 10px rgba(0,0,0,.12);
}
.dexterity-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 22%);
}
.dexterity-screen > * { position: relative; z-index: 1; }
.dexterity-screen .scale-title { color: #241705; }
.dexterity-step-copy { color: #241705; }
.tools-dexterity .dexterity-device-face {
  grid-template-columns: minmax(258px, 274px) minmax(0, 1fr);
}
/* ==== end GWJ-FD1 pedal reskin ==== */

@media (max-width: 760px) {
  .dexterity-device {
    padding: 28px 10px 10px;
  }
  .dexterity-device-face,
  .tools-dexterity .dexterity-device-face {
    grid-template-columns: 1fr;
  }
  .dexterity-control-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dexterity-readout,
  .dexterity-controls {
    grid-column: 1 / -1;
  }
  .dexterity-svg {
    min-width: 620px;
  }
}
@media (max-width: 520px) {
  .dexterity-control-panel {
    grid-template-columns: 1fr;
  }
  .dexterity-svg {
    min-width: 560px;
  }
}

/* Standalone Segovia scales review tool. Uses the same hardware language as
   Practice Scales, but keeps the controls narrow and gives the two long
   Segovia fretboards the full width they need. */
.segovia-tool-body {
  min-height: 100vh;
  background: #11100f;
}
.segovia-tool-main {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 28px clamp(12px, 2vw, 28px);
}
.segovia-tool-wrap {
  display: grid;
}
.segovia-device {
  width: 100%;
  min-height: auto;
  gap: 8px;
  padding: 30px 18px 16px;
}
.segovia-device-face {
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.segovia-control-panel {
  align-content: start;
  overflow: hidden;
  gap: 8px;
  padding: 12px;
}
.segovia-control-panel .scale-mode-section,
.segovia-control-panel .segovia-range-card {
  display: none;
}
.segovia-source-controls {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.segovia-control-grid {
  display: grid;
  gap: 10px;
}
.segovia-range-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.segovia-range-card span {
  color: rgba(255,248,224,0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.segovia-range-card strong {
  color: #fff8e0;
  font-size: 1.05rem;
}
.segovia-practice-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.1), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  min-width: 0;
  overflow: hidden;
}
.segovia-practice-kicker {
  color: rgba(255,248,224,0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.segovia-practice-card strong {
  color: #fff8e0;
  font-size: 1.02rem;
  line-height: 1.1;
}
.segovia-practice-card p {
  color: rgba(255,248,224,0.72);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.3;
  margin: 0;
}
.segovia-practice-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
}
.segovia-practice-mode button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  color: rgba(255,248,224,0.76);
  background: transparent;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 950;
}
.segovia-practice-mode button.active {
  color: #fff8e0;
  background: linear-gradient(180deg, #d65443, #8f2119);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 7px rgba(0,0,0,0.28);
}
.segovia-player {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) 34px minmax(94px, 1fr) 34px 34px minmax(92px, 0.9fr);
  gap: 6px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.segovia-play-button,
.segovia-tempo-button,
.segovia-repeat-button {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff8e0;
  background: linear-gradient(180deg, #32363b, #050608);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 rgba(0,0,0,0.55);
  cursor: pointer;
  font-weight: 950;
}
.segovia-metronome-button.gps-metronome-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  justify-self: center;
}
.segovia-metronome-button.gps-metronome-btn svg {
  width: 19px;
  height: 19px;
}
.segovia-play-button.active,
.segovia-play-button:hover,
.segovia-tempo-button:hover,
.segovia-repeat-button:hover {
  background: linear-gradient(180deg, #d65443, #861d16);
}
.segovia-repeat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.segovia-repeat-button span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,248,224,0.7);
  background: #050608;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
}
.segovia-repeat-button.active {
  background: linear-gradient(180deg, #29352d, #08100a);
  border-color: rgba(104, 210, 122, 0.55);
  color: #efffe8;
}
.segovia-repeat-button.active span {
  border-color: #e8ffe6;
  background: #43c95a;
  box-shadow: 0 0 10px rgba(67,201,90,0.72), inset 0 1px 2px rgba(255,255,255,0.35);
}
.segovia-bpm-label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: center;
  min-width: 0;
}
.segovia-bpm-label span {
  color: rgba(255,248,224,0.78);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
}
.segovia-bpm-label input {
  width: 100%;
  min-height: 34px;
  border: 2px solid #050608;
  border-radius: 10px;
  color: #24170e;
  background: radial-gradient(circle at 50% 0%, #fff9df, #edc56f 120%);
  font-weight: 950;
  text-align: center;
}
.segovia-player-status {
  font-size: 0.78rem !important;
  display: none;
}
.segovia-practice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.segovia-practice-actions .scale-chip {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 0.76rem;
}
.segovia-wheel-steps {
  min-height: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: visible;
}
.segovia-pattern-panel {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.segovia-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.segovia-pattern-button {
  min-width: 0;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(255,248,224,0.16);
  border-radius: 14px;
  color: rgba(255,248,224,0.78);
  background: rgba(0,0,0,0.22);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.segovia-pattern-button strong,
.segovia-pattern-button span {
  display: block;
}
.segovia-pattern-button strong {
  color: #fff8e0;
  font-size: 0.78rem;
  font-weight: 950;
}
.segovia-pattern-button span {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255,248,224,0.68);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.segovia-pattern-button.active {
  border-color: rgba(195,65,50,0.74);
  color: #fff8e0;
  background: linear-gradient(180deg, rgba(195,65,50,0.34), rgba(79,23,18,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(195,65,50,0.18);
}
.segovia-pattern-sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: rgba(0,0,0,0.2);
}
.segovia-pattern-step {
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(255,248,224,0.16);
  border-radius: 13px;
  color: rgba(255,248,224,0.76);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-weight: 950;
}
.segovia-pattern-step span,
.segovia-pattern-step small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.segovia-pattern-step small {
  margin-top: 1px;
  color: rgba(255,248,224,0.56);
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}
.segovia-pattern-step.current {
  border-color: rgba(195,65,50,0.86);
  color: #fff8e0;
  background: linear-gradient(180deg, #d65443, #8f2119);
}
.segovia-pattern-step.done:not(.current) {
  border-color: rgba(104,210,122,0.38);
}
.segovia-wheel-dial {
  position: relative;
  width: min(100%, clamp(380px, 28vw, 470px));
  aspect-ratio: 480 / 519.35;
  margin: 0 auto;
  border: 1px solid rgba(255,248,224,0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 76%, rgba(234,160,72,0.22), transparent 42%),
    linear-gradient(180deg, #fffaf0 0%, #f6eddc 58%, #f0d49b 100%);
  box-shadow: inset 0 1px 14px rgba(255,255,255,0.22), 0 10px 26px rgba(0,0,0,0.28);
  overflow: hidden;
}
.segovia-wheel-dial img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.segovia-wheel-svg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.segovia-wheel-highlight {
  fill: rgba(195, 65, 50, 0.2);
  stroke: rgba(195, 65, 50, 0.16);
  stroke-width: 1.4;
}
.segovia-wheel-svg-overlay.playing .segovia-wheel-highlight {
  fill: rgba(195, 65, 50, 0.32);
  stroke: rgba(195, 65, 50, 0.28);
  filter: drop-shadow(0 0 10px rgba(195,65,50,0.24));
}
.segovia-wheel-step {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 15%;
  aspect-ratio: 1.35;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
.segovia-wheel-step:focus-visible {
  outline: 3px solid rgba(195,65,50,0.7);
  outline-offset: 2px;
}
.segovia-wheel-step span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.segovia-wheel-step.current::before {
  display: none;
}
.segovia-wheel-sector {
  position: absolute;
  z-index: 2;
  width: 91.6667%;
  aspect-ratio: 1;
  left: 50%;
  top: 51.03%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background:
    conic-gradient(
      from calc(var(--sector-angle) - 15deg),
      rgba(195,65,50,0.18) 0 30deg,
      transparent 30deg 360deg
    );
  pointer-events: none;
}
.segovia-wheel-sector.is-major {
  -webkit-mask: radial-gradient(circle, transparent 0 63.3%, #000 63.7% 99.4%, transparent 99.8%);
  mask: radial-gradient(circle, transparent 0 63.3%, #000 63.7% 99.4%, transparent 99.8%);
}
.segovia-wheel-sector.is-minor {
  -webkit-mask: radial-gradient(circle, transparent 0 26.9%, #000 27.3% 63.3%, transparent 63.7%);
  mask: radial-gradient(circle, transparent 0 26.9%, #000 27.3% 63.3%, transparent 63.7%);
}
.segovia-wheel-sector.playing {
  background:
    conic-gradient(
      from calc(var(--sector-angle) - 15deg),
      rgba(195,65,50,0.3) 0 30deg,
      transparent 30deg 360deg
    );
  filter: drop-shadow(0 0 12px rgba(195,65,50,0.22));
}
.segovia-control-note {
  color: rgba(255,248,224,0.78);
  margin: 0;
  display: none;
}
.segovia-lesson-link {
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  text-decoration: none;
  display: none;
}
.segovia-screen {
  align-content: start;
  min-width: 0;
  overflow: hidden;
  gap: 6px;
  padding: 12px;
}
.segovia-board-stack {
  gap: 6px;
  min-width: 0;
}
.segovia-board-stack .scale-board-scroll {
  overflow: hidden;
  padding-bottom: 0;
}
.segovia-board-stack .scale-svg-board {
  width: min(100%, 780px);
  min-width: 0;
  max-height: clamp(128px, 20vh, 176px);
  height: auto;
  display: block;
  margin: 0 auto;
}
.segovia-info {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.segovia-info .scale-info-cue {
  display: none;
}
.segovia-screen .scale-heading-bar {
  align-items: baseline;
  gap: 8px;
}
.segovia-screen .scale-legend {
  font-size: 0.78rem;
  line-height: 1.2;
  margin: 0;
}
.segovia-board-stack .scale-board-block {
  gap: 2px;
}
.segovia-board-stack .scale-board-block-label {
  font-size: 0.7rem;
}
.segovia-note-marker {
  transition: filter 120ms ease;
}
.segovia-note-marker circle,
.segovia-note-marker polygon {
  transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease, filter 120ms ease;
}
.segovia-note-marker.is-root circle,
.segovia-note-marker.is-root polygon {
  fill: #d14435;
  stroke: #fff8e0;
  stroke-width: 2.8;
}
.segovia-note-marker.is-active circle,
.segovia-note-marker.is-active polygon {
  fill: #d14435;
  stroke: #fff8e0;
  stroke-width: 5;
  filter:
    drop-shadow(0 0 5px rgba(255,248,224,0.92))
    drop-shadow(0 0 16px rgba(195,65,50,0.74));
}
.segovia-note-marker.is-active text {
  fill: #ffffff;
}
@media (min-width: 981px) {
  .tools-page[data-active-tool="segovia"].tools-nav-hidden .tool-surface {
    position: sticky;
    top: var(--tools-sticky-offset, 112px);
    min-height: calc(100vh - var(--tools-sticky-offset, 112px) - 10px);
    max-height: calc(100vh - var(--tools-sticky-offset, 112px) - 10px);
    display: grid;
    align-items: start;
    overflow: hidden;
    padding: 10px;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active {
    align-content: start;
    min-height: 0;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-device {
    min-height: 0;
    height: calc(100vh - var(--tools-sticky-offset, 112px) - 30px);
    max-height: calc(100vh - var(--tools-sticky-offset, 112px) - 30px);
    padding: 20px 14px 10px;
    gap: 6px;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-device-face {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    height: 100%;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-control-panel {
    gap: 6px;
    min-height: 0;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-practice-card {
    gap: 5px;
    padding: 9px;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-practice-card p {
    display: none;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-practice-actions {
    grid-template-columns: 1fr;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-practice-actions .scale-chip {
    min-height: 28px;
    padding: 5px 8px;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-screen {
    min-height: 0;
    gap: 5px;
    padding: 10px;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-board-stack {
    gap: 4px;
    min-height: 0;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-board-stack .scale-svg-board {
    max-height: min(164px, 21vh);
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-screen .scale-legend {
    font-size: 0.72rem;
  }
  .tools-page.tools-nav-hidden .tool-pane[data-tool-pane="segovia"].active .segovia-info {
    display: none;
  }
}
@media (max-width: 980px) {
  .segovia-device-face {
    grid-template-columns: 1fr;
  }
  .segovia-wheel-dial {
    width: min(300px, 100%);
  }
  .segovia-device {
    padding-inline: 16px;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }
  .tools-page {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    min-height: auto;
    padding: 22px 10px 16px;
  }
  .tools-layout,
  .tool-pane,
  .scale-device,
  .segovia-device,
  .scale-device-face,
  .segovia-device-face,
  .scale-screen,
  .segovia-screen,
  .segovia-board-stack,
  .scale-board-block,
  .scale-board-scroll {
    max-width: 100%;
    min-width: 0;
  }
  .tools-layout,
  .scale-device,
  .segovia-device {
    width: 100%;
  }
  .tool-surface {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    overflow: hidden;
    padding: 8px;
    border-radius: 16px;
  }
  .tool-pane.active {
    align-content: start;
  }
  .scale-device-face,
  .modes-device-face,
  .segovia-device-face,
  .tab-device-face,
  .chord-device-face,
  .inversion-device-face,
  .trainer-device-face {
    grid-template-columns: minmax(0, 1fr);
  }
  .scale-board-scroll {
    overflow-x: hidden;
  }
  .scale-svg-board {
    min-width: 0;
  }
  .segovia-device {
    justify-items: stretch;
    padding: 16px 8px 10px;
    gap: 8px;
  }
  .segovia-device .device-top {
    min-width: 0;
    overflow: hidden;
    font-size: 0.62rem;
  }
  .segovia-device .device-top span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .segovia-device-face {
    gap: 10px;
  }
  .segovia-screen {
    order: 1;
    gap: 8px;
    padding: 10px;
    border-width: 3px;
  }
  .segovia-control-panel {
    order: 2;
    padding: 8px;
    border-radius: 16px;
  }
  .segovia-screen .scale-heading-bar {
    display: grid;
    gap: 2px;
  }
  .segovia-screen .scale-heading-bar .scale-dot {
    display: none;
  }
  .segovia-screen .scale-legend,
  .segovia-info {
    display: none;
  }
  .segovia-board-stack {
    gap: 10px;
  }
  .segovia-board-stack .scale-board-block {
    gap: 4px;
  }
  .segovia-board-stack .scale-board-block-label {
    font-size: 0.72rem;
  }
  .segovia-board-stack .scale-svg-board {
    width: 100%;
    max-height: none;
  }
  .segovia-wheel-dial {
    width: min(260px, 100%);
    border-radius: 14px;
  }
  .segovia-practice-card {
    border-radius: 14px;
  }
  .segovia-practice-card p {
    font-size: 0.72rem;
  }
  .segovia-player {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .segovia-play-button,
  .segovia-repeat-button {
    grid-column: span 2;
  }
  .segovia-bpm-label {
    grid-column: span 2;
  }
  .segovia-metronome-button.gps-metronome-btn {
    width: 100%;
  }
  .segovia-pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .segovia-pattern-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .tool-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tool-category-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .tool-feature-grid {
    grid-template-columns: 1fr;
  }
  .tool-category {
    grid-template-columns: 1fr;
  }
  .tool-category span {
    min-width: 0;
  }
  .tool-pill {
    width: 100%;
    max-width: none;
  }
}

/* Standalone circle of fifths review tool. The static SVG keeps Claude's
   hand-tuned website palette; the overlay supplies clickable keys, animated
   highlights, and progression cues. */
.fifths-tool-body {
  min-height: 100vh;
  background: #11100f;
}
.fifths-tool-main {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 28px clamp(12px, 2vw, 28px);
}
.fifths-tool-wrap {
  display: grid;
}
.fifths-device {
  width: 100%;
  min-height: auto;
}
.fifths-device-face {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(620px, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.fifths-control-panel {
  align-content: start;
}
.fifths-control-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.fifths-step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fifths-step-button {
  min-height: 46px;
  font-size: 0.95rem;
}
.fifths-progression-grid {
  display: grid;
  gap: 10px;
}
.fifths-cycle-button {
  min-height: 54px;
  border: 1px solid #260907;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #d95a48, #8f1f18);
  color: #fff9e9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -4px 7px rgba(0,0,0,0.35), 0 4px 0 #060708;
  font-weight: 900;
}
.fifths-cycle-button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #3b814e, #1d4c2d);
}
.fifths-screen {
  display: grid;
  grid-template-columns: minmax(440px, 0.9fr) minmax(260px, 0.55fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  min-width: 0;
}
.fifths-wheel-card,
.fifths-readout {
  border: 6px solid #08090a;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244,164,73,0.28), transparent 52%),
    linear-gradient(180deg, #fffaf0, #f5dfad);
  box-shadow: inset 0 0 34px rgba(106,70,22,0.18), 0 18px 34px rgba(0,0,0,0.28);
}
.fifths-wheel-card {
  padding: clamp(14px, 2vw, 26px);
}
.fifths-wheel-shell {
  position: relative;
  max-width: 610px;
  margin: 0 auto;
  aspect-ratio: 480 / 519.35;
}
.fifths-wheel-shell img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(63,45,24,0.12));
  user-select: none;
}
.fifths-pointer {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 2px;
  height: 33%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(182,63,47,0.92), rgba(182,63,47,0));
  opacity: 0.34;
  pointer-events: none;
  transition: transform 360ms ease;
}
.fifths-marker {
  position: absolute;
  translate: -50% -50%;
  border: 3px solid #b63f2f;
  border-radius: 999px;
  pointer-events: none;
  transition: left 360ms ease, top 360ms ease, width 240ms ease, height 240ms ease, opacity 240ms ease;
  animation: fifthsPulse 1500ms ease-in-out infinite;
}
.fifths-marker-major {
  width: 58px;
  height: 58px;
  box-shadow: 0 0 0 6px rgba(182,63,47,0.1), 0 0 28px rgba(182,63,47,0.28);
}
.fifths-marker-minor {
  width: 44px;
  height: 34px;
  border-color: rgba(182,63,47,0.72);
}
.fifths-wheel-shell[data-focus="major"] .fifths-marker-minor,
.fifths-wheel-shell[data-focus="minor"] .fifths-marker-major {
  opacity: 0.42;
  animation: none;
}
.fifths-hotspot {
  position: absolute;
  translate: -50% -50%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.fifths-hotspot-outer {
  width: 62px;
  height: 44px;
}
.fifths-hotspot-inner {
  width: 58px;
  height: 34px;
}
.fifths-hotspot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(182,63,47,0);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.fifths-hotspot:hover::after,
.fifths-hotspot:focus-visible::after {
  background: rgba(182,63,47,0.12);
  box-shadow: 0 0 0 2px rgba(182,63,47,0.24);
}
.fifths-hotspot.is-progression::after {
  background: rgba(29,23,18,0.1);
  box-shadow: 0 0 0 2px rgba(29,23,18,0.16);
  animation: fifthsStep 1150ms ease-in-out infinite;
  animation-delay: var(--progression-delay, 0ms);
}
.fifths-hotspot.is-active::after {
  background: rgba(182,63,47,0.18);
  box-shadow: 0 0 0 2px rgba(182,63,47,0.26);
}
.fifths-readout {
  display: grid;
  gap: 18px;
  align-self: stretch;
  padding: clamp(20px, 2.5vw, 34px);
  align-content: center;
}
.fifths-current {
  display: grid;
  gap: 8px;
}
.fifths-current span {
  color: #24180c;
  font-size: clamp(2rem, 4vw, 4.7rem);
  font-weight: 950;
  line-height: 0.92;
}
.fifths-current strong {
  color: #b63f2f;
  font-size: clamp(1.2rem, 2vw, 2rem);
}
.fifths-facts {
  display: grid;
  gap: 8px;
  color: #665f58;
  font-weight: 850;
}
.fifths-chords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fifths-chords span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(36,24,12,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.36);
  color: #24180c;
  font-weight: 900;
}
.fifths-chords b {
  color: #b63f2f;
}
@keyframes fifthsPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}
@keyframes fifthsStep {
  0%, 100% { opacity: 0.44; }
  45% { opacity: 1; }
}

/* ==== GWJ-CF1 pedal reskin (skin.css) — knobs, slide switch, footswitches ====
   Turns the main Circle of Fifths control panel into the GWJ pedal family: real
   GWJDevice knobs (Key, Progression) + a Focus slide switch + a flat/sharp nudge +
   chrome Play/Animate footswitches. The shared .ch-knob/.ch-seg/.ch-stomp kit is
   already themed above (added with FD1); this adds the .fifths-* layout + the CF-only
   cycle LED. The sibling Circle Exercise (CF2) pane uses [data-tool-pane="fifths-exercise"]
   -scoped rules (higher specificity), so it stays untouched; and NO display:none on the
   old control classes, so CF2's Reset (.fifths-cycle-button) is not hidden. */
.fifths-device { position: relative; border: 1px solid #423d34; font-family: 'Archivo','Inter',system-ui,sans-serif; }
.fifths-device::before,
.fifths-device::after { content:''; position:absolute; width:11px; height:11px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #4a453b, #1a1712);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.6); z-index:2; }
.fifths-device::before { top:13px; left:13px; }
.fifths-device::after  { top:13px; right:13px; }
.fifths-device .device-top { align-items:center; }
.fifths-device .device-top > span:first-child { display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:800; letter-spacing:.14em; color:#d3ccbe; }
.fifths-device .device-top > span:first-child::before { content:""; width:8px; height:8px; border-radius:50%;
  background:#39c46a; box-shadow:0 0 8px 1px #39c46a; animation: gwj-led 2.4s ease-in-out infinite; }
.fifths-device .device-top > span:last-child { font-weight:800; letter-spacing:.14em; color:#6f6a5f; white-space:nowrap; }
.fifths-device-face { grid-template-columns: minmax(256px, 300px) minmax(0, 1fr); }
.fifths-control-panel { display:grid; gap:18px; border:1px solid #2b271f; border-radius:18px; padding:18px 16px 16px;
  background: linear-gradient(180deg, #171510, #121009);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05); }
.fifths-dials { display:grid; gap:18px; }
.fifths-field { display:grid; gap:7px; }
.fifths-panel-label { color:#8a8375; font-weight:800; font-size:11px; letter-spacing:.18em; margin:0; }
.fifths-dials .ch-knobs { gap:6px; justify-content:center; }
.fifths-dials .ch-knob { transform: scale(.82); transform-origin: top center; margin-bottom:-18px; }
.fifths-dials .ch-knobcol { gap:5px; min-width:0; }
.fifths-dials .ch-read { font-size:14px; padding:3px 4px; }
.fifths-switch-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.fifths-switch-row .ch-seg { align-self:end; }
.fifths-switch-row .ch-seg__btn { font-size:15px; padding:7px 12px; min-width:34px; }
.fifths-switch-row .ch-seg__btn:active { color:#f2c14e; text-shadow:0 0 8px rgba(242,193,78,.7); }
.fifths-switch-row .ch-switch { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
  padding:3px; border-radius:8px; background:#0c0a06; box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 0 0 1px #26221b; }
.fifths-switch-row .ch-switch__thumb { position:absolute; top:3px; bottom:3px; left:3px; width: calc((100% - 6px) / var(--n, 2));
  transform: translateX(calc(var(--i, 0) * 100%)); border-radius:6px;
  background: radial-gradient(circle at 40% 26%, rgba(255,255,255,.35), transparent 46%), linear-gradient(180deg, #d7d2c8, #a29d93 52%, #6f6a61);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.4,1.3,.5,1); pointer-events:none; }
.fifths-switch-row .ch-switch__pos { position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:7px 14px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:800; font-size:10px; letter-spacing:.06em; color:#7d766a; transition: color .16s; }
.fifths-switch-row .ch-switch__pos.is-on { color:#211a12; }
.fifths-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; justify-items:center; align-items:start; padding-top:4px; }
.fifths-switch { display:grid; justify-items:center; gap:8px; }
.fifths-switch__lab { font-family:'Archivo',sans-serif; font-weight:900; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:#b9b2a4; }
.ch-stomp--cycle.is-lit .ch-stomp__led { background:#ff3b30; box-shadow:0 0 9px 1px rgba(255,59,48,.95); }
/* ==== end GWJ-CF1 pedal reskin ==== */

@media (max-width: 1100px) {
  .fifths-device-face,
  .fifths-screen {
    grid-template-columns: 1fr;
  }
  .fifths-control-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fifths-progression-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .fifths-tool-main {
    padding-inline: 10px;
  }
  .fifths-device {
    padding-inline: 14px;
  }
  .fifths-control-grid,
  .fifths-progression-grid,
  .fifths-step-row {
    grid-template-columns: 1fr;
  }
  .fifths-chords {
    grid-template-columns: 1fr;
  }
}
.fifths-control-panel .scale-controls.fifths-control-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 1101px) {
  .fifths-control-panel .scale-controls.fifths-control-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .fifths-control-panel .scale-controls.fifths-control-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Circle of fifths memory drill. */
html.is-fifths-dragging,
html.is-fifths-dragging body {
  overscroll-behavior: none;
}
[data-tool-pane="fifths-exercise"] .fifths-tool-body {
  min-height: 100vh;
  background: #11100f;
}
[data-tool-pane="fifths-exercise"] .fifths-tool-main {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 28px clamp(12px, 2vw, 28px);
}
[data-tool-pane="fifths-exercise"] .fifths-tool-wrap {
  display: grid;
}
[data-tool-pane="fifths-exercise"] .fifths-device {
  width: fit-content;
  max-width: 100%;
  min-height: auto;
  margin: 0 auto;
  padding: 18px 16px 16px;
  overflow-x: clip;
}
[data-tool-pane="fifths-exercise"] .fifths-device-face {
  display: grid;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(380px, 420px) minmax(420px, 500px);
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}
[data-tool-pane="fifths-exercise"] .fifths-control-panel {
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  contain: layout paint;
}
[data-tool-pane="fifths-exercise"] .fifths-memory-readout,
[data-tool-pane="fifths-exercise"] .fifths-memory-stats {
  display: grid;
  gap: 3px;
  min-height: auto;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-tool-pane="fifths-exercise"] .fifths-memory-readout span,
[data-tool-pane="fifths-exercise"] .fifths-memory-stats span:first-child {
  color: #d7d2c9;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-tool-pane="fifths-exercise"] .fifths-memory-readout strong,
[data-tool-pane="fifths-exercise"] .fifths-memory-stats span:last-child {
  color: #ffd45a;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
[data-tool-pane="fifths-exercise"] .fifths-instructions strong {
  color: #fff6d6;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.05;
}
[data-tool-pane="fifths-exercise"] .fifths-instructions p,
[data-tool-pane="fifths-exercise"] .fifths-feedback-card p {
  margin: 0;
  color: #d7d2c9;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.22;
}
[data-tool-pane="fifths-exercise"] .fifths-note-bank {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
  min-height: 0;
}
[data-tool-pane="fifths-exercise"] .fifths-note-tile {
  min-height: 38px;
  border: 1px solid rgba(255,212,90,0.34);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(180deg, #2a241a, #12100c);
  color: #fff6d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 0 #050504;
  cursor: grab;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(0.84rem, 1vw, 1.05rem);
  font-weight: 900;
  touch-action: none;
  user-select: none;
}
[data-tool-pane="fifths-exercise"] .fifths-note-stack {
  display: grid;
  gap: 0;
  line-height: 0.9;
}
[data-tool-pane="fifths-exercise"] .fifths-note-tile:active {
  cursor: grabbing;
}
[data-tool-pane="fifths-exercise"] .fifths-note-tile.is-minor-note {
  border-color: rgba(128,225,134,0.36);
  color: #dff7d8;
}
[data-tool-pane="fifths-exercise"] .fifths-note-tile.is-used {
  opacity: 0.28;
  cursor: default;
  filter: grayscale(0.8);
}
[data-tool-pane="fifths-exercise"] .fifths-note-tile.is-drag-source {
  opacity: 0.18;
}
.fifths-note-tile.is-dragging-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  max-width: 96px;
  pointer-events: none;
  opacity: 0.96;
  box-shadow: 0 16px 34px rgba(0,0,0,0.34), 0 0 22px rgba(255,212,90,0.24);
  contain: layout paint;
  will-change: transform;
}
[data-tool-pane="fifths-exercise"] .fifths-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
[data-tool-pane="fifths-exercise"] .fifths-cycle-button,
[data-tool-pane="fifths-exercise"] .fifths-check-button {
  min-height: 36px;
  border-radius: 10px;
  font-weight: 900;
}
[data-tool-pane="fifths-exercise"] .fifths-cycle-button {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #2d2b27, #151411);
  color: #fff6d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 4px 0 #050504;
}
[data-tool-pane="fifths-exercise"] .fifths-reveal-button {
  color: #ffd45a;
}
[data-tool-pane="fifths-exercise"] .fifths-screen {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
[data-tool-pane="fifths-exercise"] .fifths-wheel-card,
[data-tool-pane="fifths-exercise"] .fifths-readout {
  border: 4px solid #08090a;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244,164,73,0.28), transparent 52%),
    linear-gradient(180deg, #fffaf0, #f5dfad);
  box-shadow: inset 0 0 34px rgba(106,70,22,0.18), 0 18px 34px rgba(0,0,0,0.28);
}
[data-tool-pane="fifths-exercise"] .fifths-wheel-card {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 10px;
}
[data-tool-pane="fifths-exercise"] .fifths-practice-wheel {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(36,24,12,0.05) 0 21%, transparent 22%),
    repeating-conic-gradient(from -90deg, rgba(36,24,12,0.18) 0deg 1deg, transparent 1deg 30deg),
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(36,24,12,0.12) 45.3% 45.8%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 0 66%, rgba(36,24,12,0.16) 66.3% 66.8%, transparent 67%),
    radial-gradient(circle at 50% 62%, rgba(244,164,73,0.22), transparent 58%);
}
[data-tool-pane="fifths-exercise"] .fifths-ring {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
[data-tool-pane="fifths-exercise"] .fifths-ring-outer {
  inset: 9%;
  border: 3px solid rgba(36,24,12,0.2);
}
[data-tool-pane="fifths-exercise"] .fifths-ring-inner {
  inset: 27%;
  border: 2px dashed rgba(36,24,12,0.22);
}
[data-tool-pane="fifths-exercise"] .fifths-ring-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 30%;
  aspect-ratio: 1;
  translate: -50% -50%;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, rgba(255,250,240,0.62), rgba(245,223,173,0.2) 68%);
  box-shadow: inset 0 2px 10px rgba(255,255,255,0.14), 0 10px 22px rgba(36,24,12,0.08);
  color: #b63f2f;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
  text-align: center;
}
[data-tool-pane="fifths-exercise"] .fifths-ring-center span {
  color: rgba(182,63,47,0.82);
  font-size: clamp(0.58rem, 0.8vw, 0.75rem);
  opacity: 1;
  text-transform: uppercase;
}
[data-tool-pane="fifths-exercise"] .fifths-ring-center strong {
  color: #b63f2f;
  font-size: clamp(1rem, 1.9vw, 1.65rem);
  line-height: 0.9;
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot {
  position: absolute;
  display: grid;
  width: clamp(40px, 4.4vw, 56px);
  min-width: 40px;
  aspect-ratio: 1.55;
  translate: -50% -50%;
  place-items: center;
  border: 2px solid rgba(36,24,12,0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.66), rgba(247,225,180,0.42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 6px 14px rgba(36,24,12,0.12);
  color: #20150d;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  font-weight: 900;
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot.is-minor {
  width: clamp(34px, 3.8vw, 48px);
  min-width: 34px;
  aspect-ratio: 1.45;
  border-style: dashed;
  font-size: clamp(0.62rem, 0.88vw, 0.82rem);
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot:hover,
[data-tool-pane="fifths-exercise"] .fifths-practice-slot:focus-visible {
  border-color: #b63f2f;
  outline: none;
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot.is-drop-target {
  border-color: #57e47b;
  box-shadow: 0 0 0 5px rgba(87,228,123,0.14), 0 0 22px rgba(87,228,123,0.18), inset 0 1px 0 rgba(255,255,255,0.72);
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot.is-filled {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(180deg, #2f2a21, #15130f);
  color: #fff6d6;
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot.is-correct {
  border-color: #48b86b;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(180deg, #3f9c55, #1f5e32);
  color: #f7fff2;
  box-shadow: 0 0 0 4px rgba(72,184,107,0.16), 0 0 18px rgba(72,184,107,0.32), inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 14px rgba(36,24,12,0.12);
}
[data-tool-pane="fifths-exercise"] .fifths-practice-slot.is-wrong {
  border-color: #c94131;
  box-shadow: 0 0 0 4px rgba(201,65,49,0.18), inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 14px rgba(36,24,12,0.12);
}
[data-tool-pane="fifths-exercise"] .fifths-readout {
  display: grid;
  gap: 10px;
  align-self: stretch;
  padding: 16px;
  align-content: center;
}
[data-tool-pane="fifths-exercise"] .fifths-current {
  display: grid;
  gap: 5px;
}
[data-tool-pane="fifths-exercise"] .fifths-current span {
  color: #24180c;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-weight: 950;
  line-height: 0.92;
}
[data-tool-pane="fifths-exercise"] .fifths-current strong {
  color: #b63f2f;
  font-size: clamp(0.92rem, 1.35vw, 1.18rem);
}
[data-tool-pane="fifths-exercise"] .fifths-facts {
  display: grid;
  gap: 6px;
  color: #665f58;
  font-size: 0.82rem;
  font-weight: 850;
}
[data-tool-pane="fifths-exercise"] .fifths-status {
  margin: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d7d2c9;
  font-size: 0.74rem;
  font-weight: 900;
}
@media (max-width: 1100px) {
  [data-tool-pane="fifths-exercise"] .fifths-device-face,
  [data-tool-pane="fifths-exercise"] .fifths-screen {
    grid-template-columns: 1fr;
  }
  [data-tool-pane="fifths-exercise"] .fifths-note-bank {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  [data-tool-pane="fifths-exercise"] .fifths-tool-main {
    padding-inline: 10px;
  }
  [data-tool-pane="fifths-exercise"] .fifths-device {
    padding-inline: 14px;
  }
  [data-tool-pane="fifths-exercise"] .fifths-note-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-tool-pane="fifths-exercise"] .fifths-action-grid {
    grid-template-columns: 1fr;
  }
  [data-tool-pane="fifths-exercise"] .fifths-practice-slot {
    width: clamp(48px, 14vw, 62px);
    min-width: 48px;
    border-radius: 10px;
  }
}

/* Finger switching animation tool. */
.fsw-device {
  position: relative;
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 26px 18px 18px;
  border: 1px solid #0e1013;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 16%, rgba(232,165,58,0.12), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(83,148,224,0.1), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(180deg, #2d3036, #14171c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -18px 34px rgba(0,0,0,0.4), 0 18px 38px rgba(23,21,20,0.24);
  overflow: hidden;
}
.fsw-device::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 17px;
  pointer-events: none;
}
.fsw-device > * {
  position: relative;
  z-index: 1;
}
.fsw-face {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.fsw-control {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}
.fsw-control label {
  display: grid;
  gap: 6px;
  color: #d7d2c9;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fsw-control select {
  width: 100%;
  min-height: 36px;
  border: 2px solid #070809;
  border-radius: 7px;
  padding: 4px 10px;
  background: linear-gradient(180deg, #fffdf2, #eadfba);
  color: #1f1710;
  font-size: 1rem;
  font-weight: 900;
}
.fsw-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fsw-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.78);
  font-size: 0.72rem;
  font-weight: 900;
}
.fsw-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #d14435;
  box-shadow: 0 0 12px currentColor;
}
.fsw-legend .is-stay { background: #2f9d57; color: #2f9d57; }
.fsw-legend .is-move { background: #d14435; color: #d14435; }
.fsw-legend .is-add { background: #b98225; color: #b98225; }
.fsw-legend .is-lift { background: #4b5563; color: #4b5563; }
.fsw-screen {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 4px solid #08090a;
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244,164,73,0.28), transparent 52%),
    linear-gradient(180deg, #fffaf0, #f5dfad);
  box-shadow: inset 0 0 34px rgba(106,70,22,0.18), 0 18px 34px rgba(0,0,0,0.28);
}
.fsw-board {
  width: min(100%, 430px);
  display: grid;
  gap: 6px;
  color: #24180c;
}
.fsw-chord-label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 38px;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}
.fsw-current-name {
  color: #b63f2f;
  transition: color 160ms ease;
}
.fsw-fret-row,
.fsw-string-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: min(100%, 236px);
  margin: 0 auto;
  color: #241705;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.fsw-fret-row {
  min-height: 18px;
  line-height: 1.2;
}
.fsw-fret-row .is-mute {
  opacity: 0.42;
}
.fsw-string-row {
  min-height: 22px;
  font-size: 14px;
  padding-top: 2px;
}
.fsw-grid {
  position: relative;
  width: min(100%, 236px);
  height: min(54vw, 310px);
  max-height: 310px;
  min-height: 250px;
  margin: 2px auto;
  overflow: visible;
}
.fsw-fret-badge {
  position: absolute;
  left: -30px;
  top: 10%;
  transform: translateY(-50%);
  color: rgba(36,24,12,0.58);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.fsw-string,
.fsw-fret {
  position: absolute;
  display: block;
  background: #5a3d18;
  opacity: 0.9;
  pointer-events: none;
}
.fsw-string {
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}
.fsw-fret {
  left: calc((0.5 / 6) * 100%);
  right: calc((0.5 / 6) * 100%);
  height: 2px;
  transform: translateY(-50%);
}
.fsw-fret.is-nut {
  height: 7px;
  background: #241705;
  opacity: 1;
  border-radius: 1px;
}
.fsw-finger {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--finger-color);
  color: #fbf3df;
  border: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.18), 0 0 0 4px color-mix(in srgb, var(--finger-color), transparent 82%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.fsw-dot {
  left: var(--x1);
  top: var(--y1);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  margin: -13.5px 0 0 -13.5px;
  animation: fsw-dot-cycle 4.8s ease-in-out infinite;
}
.fsw-grid.has-three .fsw-dot {
  animation-name: fsw-dot-cycle-three;
  animation-duration: 6s;
}
.fsw-barre {
  left: var(--bar-left1);
  top: var(--y1);
  width: var(--bar-width1);
  min-width: 27px;
  height: 24px;
  border-radius: 12px;
  transform: translateY(-50%);
  animation: fsw-barre-cycle 4.8s ease-in-out infinite;
}
.fsw-grid.has-three .fsw-barre {
  animation-name: fsw-barre-cycle-three;
  animation-duration: 6s;
}
.fsw-finger.is-stay {
  box-shadow: 0 8px 18px rgba(36,24,12,0.22), 0 0 0 5px rgba(47,157,87,0.18), 0 0 20px rgba(47,157,87,0.3);
}
.fsw-finger.is-add {
  animation-name: fsw-dot-add;
}
.fsw-grid.has-three .fsw-finger.is-add {
  animation-name: fsw-dot-cycle-three;
  animation-duration: 6s;
}
.fsw-barre.is-add {
  animation-name: fsw-barre-add;
}
.fsw-grid.has-three .fsw-barre.is-add {
  animation-name: fsw-barre-cycle-three;
  animation-duration: 6s;
}
.fsw-finger.is-lift {
  animation-name: fsw-dot-lift;
}
.fsw-grid.has-three .fsw-finger.is-lift {
  animation-name: fsw-dot-cycle-three;
  animation-duration: 6s;
}
.fsw-barre.is-lift {
  animation-name: fsw-barre-lift;
}
.fsw-grid.has-three .fsw-barre.is-lift {
  animation-name: fsw-barre-cycle-three;
  animation-duration: 6s;
}
.fsw-analysis {
  margin: 0;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(36,24,12,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.38);
  color: #5d5145;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.35;
}
.fsw-embed {
  margin: 18px 0;
}
.fsw-embed .fsw-board {
  width: min(100%, 520px);
}
.fsw-embed .fsw-analysis {
  font-size: 0.82rem;
}
@keyframes fsw-dot-cycle {
  0%, 28% { left: var(--x1); top: var(--y1); opacity: 1; }
  48%, 78% { left: var(--x2); top: var(--y2); opacity: var(--o2); }
  100% { left: var(--x1); top: var(--y1); opacity: 1; }
}
@keyframes fsw-barre-cycle {
  0%, 28% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: 1; }
  48%, 78% { left: var(--bar-left2); top: var(--y2); width: var(--bar-width2); opacity: var(--o2); }
  100% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: 1; }
}
@keyframes fsw-dot-cycle-three {
  0%, 20% { left: var(--x1); top: var(--y1); opacity: var(--o1); }
  34%, 54% { left: var(--x2); top: var(--y2); opacity: var(--o2); }
  68%, 88% { left: var(--x3); top: var(--y3); opacity: var(--o3); }
  100% { left: var(--x1); top: var(--y1); opacity: var(--o1); }
}
@keyframes fsw-barre-cycle-three {
  0%, 20% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: var(--o1); }
  34%, 54% { left: var(--bar-left2); top: var(--y2); width: var(--bar-width2); opacity: var(--o2); }
  68%, 88% { left: var(--bar-left3); top: var(--y3); width: var(--bar-width3); opacity: var(--o3); }
  100% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: var(--o1); }
}
@keyframes fsw-dot-add {
  0%, 28% { left: var(--x2); top: var(--y2); opacity: 0; scale: 0.65; }
  48%, 78% { left: var(--x2); top: var(--y2); opacity: 1; scale: 1; }
  100% { left: var(--x2); top: var(--y2); opacity: 0; scale: 0.65; }
}
@keyframes fsw-barre-add {
  0%, 28% { left: var(--bar-left2); top: var(--y2); width: var(--bar-width2); opacity: 0; scale: 0.92; }
  48%, 78% { left: var(--bar-left2); top: var(--y2); width: var(--bar-width2); opacity: 1; scale: 1; }
  100% { left: var(--bar-left2); top: var(--y2); width: var(--bar-width2); opacity: 0; scale: 0.92; }
}
@keyframes fsw-dot-lift {
  0%, 28% { left: var(--x1); top: var(--y1); opacity: 1; scale: 1; }
  48%, 78% { left: var(--x1); top: var(--y1); opacity: 0.16; scale: 0.72; }
  100% { left: var(--x1); top: var(--y1); opacity: 1; scale: 1; }
}
@keyframes fsw-barre-lift {
  0%, 28% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: 1; scale: 1; }
  48%, 78% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: 0.16; scale: 0.94; }
  100% { left: var(--bar-left1); top: var(--y1); width: var(--bar-width1); opacity: 1; scale: 1; }
}

@media (max-width: 900px) {
  .fsw-face {
    grid-template-columns: 1fr;
  }
  .fsw-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fsw-legend,
  .fsw-control .button {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .fsw-device {
    padding-inline: 12px;
  }
  .fsw-control {
    grid-template-columns: 1fr;
  }
  .fsw-screen {
    padding: 12px;
  }
  .fsw-analysis {
    font-size: 0.78rem;
  }
}
.scale-controls {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 14px;
}
.scale-controls label {
  display: grid;
  gap: 8px;
}
.scale-fingering-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 4px;
}
.scale-fingering-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  padding-top: 8px;
}
.scale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scale-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.scale-chip:hover { border-color: var(--ink); }
.scale-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.scale-chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.scale-legend {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.control-row, .planner-controls, .chord-controls { display: grid; grid-template-columns: minmax(110px, 0.35fr) 1fr; gap: 14px; align-items: center; }
.control-row span, .planner-controls span, .chord-controls span, .scale-controls span, .contact-form span { color: var(--muted); font-size: 0.88rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #cfc5ba; border-radius: var(--radius); background: white; color: var(--ink); padding: 12px; }
input[type="range"] { accent-color: var(--red); }
.planner-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chord-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planner-controls label, .chord-controls label, .contact-form label { display: grid; gap: 8px; }
.practice-plan { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.practice-plan li { padding: 10px 0; color: #3a332e; }

.scale-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}
.scale-heading-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.scale-heading-bar .scale-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.scale-heading-bar .scale-summary {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--muted);
}
.scale-heading-bar .scale-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}
.scale-board-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.scale-board-controls .scale-legend { margin: 0; min-width: 0; }
.scale-board-controls .scale-mode-toggle { justify-self: end; }
.scale-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: white;
  gap: 2px;
}
.scale-mode-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.scale-mode-button:hover { color: var(--ink); }
.scale-mode-button.active {
  background: var(--ink);
  color: white;
}
.scale-mode-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.scale-board-stack {
  display: grid;
  gap: 14px;
}
.chord-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.chord-device {
  position: relative;
  width: min(100%, 1180px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  justify-items: center;
  padding: 30px 22px 18px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.chord-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.chord-device .device-top,
.chord-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.chord-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.chord-screen {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 16px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.chord-screen .scale-title,
.chord-screen .scale-summary {
  color: #24180c;
}
.chord-control-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.chord-control-panel .chord-controls {
  grid-template-columns: 1fr;
  gap: 8px;
}
.chord-control-panel .chord-controls label {
  display: grid;
  gap: 5px;
}
.chord-control-panel .chord-controls span,
.chord-control-panel .scale-info dt {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chord-control-panel select {
  min-height: 34px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.chord-control-panel .scale-legend {
  color: rgba(255,248,224,0.72);
}
.chord-device-info {
  display: grid;
  gap: 7px;
  margin: 0;
}
.chord-device-info .scale-info-row {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #070809;
  border-radius: 10px;
  background: rgba(255,249,233,0.08);
}
.chord-device-info .scale-info-row dd {
  margin: 0;
  color: rgba(255,252,238,0.96);
  font-weight: 800;
}
.chord-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.chord-device .chord-play-button,
.inversion-device .chord-play-button {
  min-height: 40px;
  width: 100%;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  padding: 8px 18px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}
.chord-device .chord-play-button:hover,
.inversion-device .chord-play-button:hover { filter: brightness(1.08); }
.chord-device .chord-play-button:active,
.inversion-device .chord-play-button:active { transform: scale(0.97); }
.chord-play-button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chord-play-icon { font-size: 0.72rem; }
.chord-diagram-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}
.chord-screen .chord-diagram {
  width: min(100%, 390px);
}
.tab-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-download-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  padding: 8px 16px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.tab-download-button:hover { border-color: var(--ink); }
.tab-download-button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chord-device .chord-play-button.is-playing,
.inversion-device .chord-play-button.is-playing { background: var(--red); border-color: var(--red); }
.inversion-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 600px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.inversion-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.inversion-device .device-top,
.inversion-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.inversion-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(760px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.inversion-control-panel,
.inversion-screen {
  min-width: 0;
  border-radius: 22px;
}
.inversion-control-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.inversion-controls {
  grid-template-columns: 1fr;
  gap: 10px;
}
.inversion-control-row {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 10px;
}
.inversion-controls label {
  display: grid;
  gap: 5px;
}
.inversion-controls span,
.inversion-control-panel .scale-info dt {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inversion-controls select {
  min-height: 40px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.inversion-control-panel .scale-legend {
  margin: 0;
  color: rgba(255,248,224,0.72);
}
.inversion-screen {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.inversion-screen .scale-title,
.inversion-screen .scale-summary,
.inversion-screen .scale-legend,
.inversion-screen .scale-info-row dt,
.inversion-screen .scale-info-row dd {
  color: #24180c;
}
.inversion-map .scale-board-scroll {
  max-width: 100%;
  margin-bottom: 10px;
  border-color: rgba(36,24,12,0.16);
  background: transparent;
  box-shadow: none;
}
.inversion-map .scale-svg-board {
  min-width: 760px;
}
.inversion-position-map {
  display: grid;
  gap: 8px;
}
.inversion-active-chord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 12px 12px 0 0;
  background: rgba(255,255,255,0.34);
  color: #24180c;
}
.inversion-active-chord span,
.inversion-active-chord em {
  color: rgba(36,24,12,0.62);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}
.inversion-active-chord strong {
  min-width: 0;
  font-size: 1rem;
  font-weight: 950;
  text-align: center;
}
.inversion-position-map .scale-board-scroll {
  border-radius: 0 0 12px 12px;
}
.inversion-position-map .scale-svg-board {
  display: block;
}
.inversion-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.inversion-position-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.3);
}
.inversion-position-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #24180c;
}
.inversion-position-head strong {
  font-size: 0.9rem;
  font-weight: 900;
}
.inversion-position-head span {
  min-width: 0;
  color: rgba(36,24,12,0.66);
  font-size: 0.82rem;
  font-weight: 900;
}
/* GWJ-200 follow-up: was a hard repeat(3) — right when a row is three inversions or
   three chords, but the across-the-fretboard view has FOUR string sets and the fourth
   card dropped onto a line of its own with two empty columns beside it. auto-fit keeps
   three-card rows looking exactly as before (empty tracks collapse) and gives the
   four-card row four columns, wrapping on its own when the screen is too narrow. */
.inversion-position-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.inversion-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46);
}
.inversion-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  color: #24180c;
}
.inversion-card-head strong {
  font-size: 0.92rem;
  font-weight: 900;
}
.inversion-card-head span {
  color: rgba(36,24,12,0.62);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
}
.inversion-card-diagram {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.inversion-card-diagram .chord-svg {
  width: min(100%, 210px);
  height: auto;
}
.inversion-row-play {
  min-height: 34px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #353a41, #111318);
  color: white;
  padding: 6px 14px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 8px rgba(0,0,0,0.34), 0 3px 0 #060708;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}
.inversion-row-play.is-playing {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.tab-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 640px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.tab-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.tab-device .device-top,
.tab-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.tab-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(820px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.tab-control-panel,
.tab-screen {
  min-width: 0;
  border-radius: 22px;
}
.tab-control-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.tab-screen {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.tab-screen .scale-title,
.tab-screen .scale-summary,
.tab-screen .tab-tempo-label,
.tab-screen .tab-tempo-out,
.tab-screen .scale-legend,
.tab-screen .scale-fingering-label {
  color: #24180c;
}
.tab-screen .scale-heading-bar {
  min-width: 0;
}
.tab-device .chord-play-button {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  padding: 6px 14px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
}
.tab-device .chord-play-button.is-playing { background: var(--red); border-color: var(--red); }
.tab-device .tab-controls {
  grid-template-columns: 1fr;
  gap: 7px;
}
.tab-device .tab-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.tab-device .tab-actions .chord-play-button {
  justify-content: center;
  width: 100%;
}
.tab-device .tab-controls label {
  display: grid;
  gap: 3px;
}
.tab-device .tab-controls span {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tab-control-panel .tab-tempo-label,
.tab-control-panel .scale-fingering-label,
.tab-control-panel .tab-tempo-out,
.tab-control-panel .tab-switch {
  color: rgba(255,248,224,0.88);
}
.tab-device .tab-controls select {
  min-height: 34px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.tab-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--muted);
  user-select: none;
}
.tab-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tab-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cfc5ba;
  transition: background-color 140ms ease;
  flex: 0 0 auto;
}
.tab-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 140ms ease;
}
.tab-switch input:checked + .tab-switch-track { background: var(--red); }
.tab-switch input:checked + .tab-switch-track::after { transform: translateX(16px); }
.tab-switch input:checked ~ .tab-switch-label { color: var(--ink); }
.tab-screen .tab-switch { color: #24180c; }
.tab-switch input:focus-visible + .tab-switch-track { outline: 2px solid var(--red); outline-offset: 2px; }
.tab-tempo-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tab-tempo-label { font-size: 0.82rem; font-weight: 800; color: var(--muted); }
.tab-tempo-row input[type="range"] { flex: 1 1 auto; max-width: 320px; }
.tab-device .tab-tempo-row input[type="range"] {
  max-width: none;
  accent-color: #d14435;
}
.tab-control-panel .tab-tempo-row input[type="range"] {
  height: 18px;
  border-radius: 999px;
  background: transparent;
}
.tab-control-panel .tab-tempo-row input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid rgba(255,248,224,0.36);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,249,229,0.95), rgba(231,199,128,0.88)),
    #f4e4b3;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.44), 0 0 10px rgba(255,226,142,0.18);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid #050607;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(180deg, #d14435, #7f1d16);
  box-shadow: 0 2px 0 #050607, 0 0 0 2px rgba(255,248,224,0.14);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-moz-range-track {
  height: 9px;
  border: 1px solid rgba(255,248,224,0.36);
  border-radius: 999px;
  background: #f4e4b3;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.44), 0 0 10px rgba(255,226,142,0.18);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #050607;
  border-radius: 50%;
  background: #b7392c;
  box-shadow: 0 2px 0 #050607, 0 0 0 2px rgba(255,248,224,0.14);
}
.tab-tempo-out { font-size: 0.86rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tab-tempo-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 2px; }
.tab-device .tab-tempo-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.tab-tempo-presets button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  padding: 5px 6px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tab-device .tab-tempo-presets button {
  border: 1px solid #060708;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.tab-device .tab-tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.tab-tempo-presets button:hover { border-color: var(--ink); color: var(--ink); }
.tab-tempo-presets button.active { background: var(--ink); border-color: var(--ink); color: white; }
.tab-device .tab-tempo-presets button:hover {
  border-color: #060708;
  color: white;
  filter: brightness(1.08);
}
.tab-device .tab-tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
}
.tab-tempo-presets button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tab-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tab-notation-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0; }
.tab-device .tab-notation-row {
  display: grid;
  gap: 5px;
  margin: 0;
}
.tab-device .tab-notation-row .scale-mode-toggle {
  width: 100%;
}
.tab-device .tab-notation-row .scale-mode-button {
  flex: 1 1 0;
}
.tab-device .tab-notation-row .tab-notation-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button {
  min-height: 46px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.14), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 50%;
  background: #15171b;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.76);
  vertical-align: -1px;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.24), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button.active::before {
  border-color: rgba(255,255,255,0.72);
  background: #f5dfb0;
  box-shadow: 0 0 10px rgba(245,223,176,0.52), inset 0 1px 3px rgba(255,255,255,0.35);
}
.tab-notation-row .scale-fingering-label { padding-top: 0; }
.tab-share-row {
  display: grid;
  gap: 6px;
}
.tab-share-button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.94);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tab-share-button:hover {
  filter: brightness(1.08);
}
.tab-share-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.tab-share-status {
  min-height: 1.1em;
  color: rgba(255,248,224,0.82);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}
.tab-staff-wrap {
  min-width: 0;
  max-width: 100%;
  padding: 4px;
}
/* alphaTab play-along visuals: red beat cursor line + active-note color.
   Bar (measure) shading is hidden — just the line. */
.tab-staff-wrap .at-cursor-bar { display: none; }

/* GWJ-169 — the Building Major Scales figures (Jimmy: "There isn't any TAB on the
   original sheets. It's all standard notation.").

   These are theory figures, not exercises: one staff of whole notes carrying two
   rows of captions above it — the note names on the noteheads, and "Whole step" /
   "Half step" between them, exactly as the book prints them. The transport floats
   at top:10 right:10, which is where the upper caption row lands on a short
   notation staff, so the staff is pushed down far enough to give both rows their
   own air. Sized to the caption rows, NOT a round number: two rows at 17px and
   14px plus the 72px gap.

   The rule is more specific than .tab-staff-wrap's own padding on purpose — that
   one wins otherwise and the captions sit under the play button. */
.gps-player .tab-staff-wrap.gps-scale-staff { padding: 62px 4px 0; }

/* Jimmy's step brackets, exactly as the book draws them: a WHOLE step is a rule
   running between the two note names with the words set above it, a HALF step is
   just the words in italic. gps-player.js stretches a "=" label to span the gap
   and tags it .gps-step-rule; everything about how it LOOKS is here.

   The words sit on the line's own box, lifted by the padding, so the text and the
   rule move together at any width — no second element to keep in step. */
.gps-count.gps-step-rule {
  display: block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  text-align: center;
  font-weight: 400;
}
/* A half step has no rule and is italic on the page. It is centred for the same
   reason the ruled form is: once the caption wraps to two lines it is a fixed-width
   BOX, and .gps-count sets no text-align, so its lines fell to the left edge of that
   box and the label read as off-centre between the two notes even though the box
   itself was dead centre (David, 2026-08-21, on exercise 6: "the half step should be
   centered between the notes"). */
.gps-count.gps-step-plain { font-style: italic; font-weight: 400; text-align: center; }

/* GWJ-98 — the book's practice-chunk bracket: |—— Practice chunk ——|
   A caption authored as "=Practice chunk" is stretched by gps-player.js to the
   exact width of the notes it covers and given an inner .gps-bracket-rule; the
   words sit centred above it. A bracket says where a chunk STARTS and STOPS,
   which a centred word on its own does not (David, 2026-08-22).

   translateX(-50%) is inherited from .gps-count and still does the centring — the
   span is positioned by its own midpoint, so setting a width widens it evenly
   either side of the group's centre. */
.gps-count.gps-top-bracket { display: block; text-align: center; white-space: normal; }
/* GWJ-316: one line, centred on the rule, free to overhang it equally both sides. */
.gps-count.gps-top-bracket .gps-bracket-text { display: block; margin: 0 -240px; text-align: center; white-space: pre; }
.gps-count.gps-top-bracket .gps-bracket-rule {
  display: block;
  margin-top: 2px;
  border-top: 1.5px solid currentColor;
  /* The ticks. Turned DOWN toward the staff, as the book draws them. */
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
/* The note names share the interval row's baseline, so they are the only upright
   bold thing on the line — which is how the book reads. */
/* The formula line the book centres on its own, and the two half-width asides it
   prints above the G and D examples. */
.gps-scale-formula { text-align: center; letter-spacing: 0.01em; }

/* GWJ-169 — the major-scale formula as a row of boxes.
   David, 2026-08-21: "can those be colored boxes and half step should be smaller
   boxes so it is more visually descriptive?"

   A whole box is exactly TWICE a half box, and that is the whole idea: the widths
   are the lesson, so they come from flex 2 vs flex 1 (an exact ratio at any column
   width) rather than fixed pixels that would drift apart on a phone. The two
   colours are the studio teal and gold — far enough apart to read at a glance and
   still distinct in the common red-green colour blindness, and the size difference
   carries the same information for anyone who sees no colour at all.

   The row wraps on a narrow screen; min-width keeps a wrapped half box from
   collapsing to its text. See the aria-label the generator puts on the <ol>. */
.gps-step-boxes {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 6px; margin: 16px 0 20px; padding: 0; list-style: none;
}
.gps-step-box {
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box;
  border-radius: 6px; min-height: 44px;
  /* NO horizontal padding on the box itself, and the min-widths below are 2:1 as
     well. Both matter: a flex item's used base size can never go below its own
     padding, so 8px of side padding turns a 2:1 share into (16 + 2u) : (16 + 1u) —
     1.78:1 at lesson width, near enough to look deliberate and wrong. The words are
     inset by the span instead, which is not a flex item and so cannot skew the
     ratio. Same reasoning for the min-widths: if one ever clamps, it clamps in
     proportion. */
  padding: 11px 0;
  font-size: 0.74rem; line-height: 1.15; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gps-step-box > span { padding: 0 8px; }
.gps-step-box.is-whole { flex: 2 1 0; min-width: 96px; background: var(--teal); color: #fff; }
.gps-step-box.is-half  { flex: 1 1 0; min-width: 48px; background: var(--gold); color: #2a1f08; }
@media (max-width: 640px) {
  .gps-step-box { font-size: 0.66rem; padding: 9px 0; min-height: 38px; letter-spacing: 0.03em; }
  .gps-step-box > span { padding: 0 4px; }
  .gps-step-box.is-whole { min-width: 76px; }
  .gps-step-box.is-half { min-width: 38px; }
}
.gps-scale-aside { text-align: center; font-size: 0.92em; opacity: 0.85; margin-bottom: 4px; }

/* Trim the beat cursor to the tab staff. alphaTab scales the cursor to the
   full bar height (which includes ~30% header space above the top line) via an
   inline transform we can't safely override, and the scale factor varies per
   bar. So instead paint only the bottom ~70% of the element red with a
   gradient — proportional, so it tracks the scale, and the cursor's bottom is
   already anchored to the low-E line. */
/* No playback cursor — lesson audio is driven by our own synth, not alphaTab's
   player, so the beat-cursor line is hidden everywhere. */
.tab-staff-wrap .at-cursor-beat { display: none !important; }
.tab-staff-wrap .at-highlight * { fill: var(--red); stroke: var(--red); }
/* Song looper: the drag-selected practice/loop region. alphaTab draws the
   selection as .at-selection > div rectangles (separate from the hidden beat
   cursor above). Tint it with the GWJ red so the chosen bars stand out. */
.tab-staff-wrap .at-selection div { background: rgba(176, 64, 47, 0.15); }
/* On a song (tex) widget the tab is interactive — show a text cursor affordance. */
.gps-player[data-gps-loopable] .tab-staff-wrap { cursor: text; }
.tab-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}
.chord-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  background: transparent;
}
.scale-board-block {
  display: grid;
  gap: 6px;
}
.scale-board-block-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scale-board-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}
.tab-device .scale-board-scroll {
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  background: rgba(255,252,238,0.74);
  box-shadow: inset 0 0 18px rgba(69,38,7,0.18);
}
.tab-device .tab-staff-wrap {
  width: max-content;
  min-width: 100%;
}
.tab-device .tab-staff-wrap svg,
.tab-device .tab-staff-wrap .at-surface,
.tab-device .tab-staff-wrap > div {
  max-width: none;
}
.tab-device .tab-staff-wrap svg {
  display: block;
}
.scale-svg-board {
  display: block;
  width: 100%;
  min-width: 820px;
  height: auto;
}
.scale-info {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.scale-info-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}
.scale-info-row dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.scale-info-row dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.scale-info-row.scale-info-cue dd {
  color: var(--red);
  font-weight: 800;
}

.chord-card { display: grid; grid-template-columns: minmax(140px, 0.42fr) minmax(240px, 1fr); gap: 22px; align-items: center; }
.chord-name { margin: 0; font-size: clamp(2.4rem, 8vw, 5.6rem); font-weight: 900; line-height: 0.95; }
.chord-fingering { margin: 14px 0 0; color: var(--muted); font-weight: 800; }
.chord-diagram { position: relative; width: min(100%, 440px); aspect-ratio: 1.22; border: 1px solid var(--line); border-radius: var(--radius); background: white; overflow: hidden; }
.string-line, .fret-line { position: absolute; background: #2c2927; }
.string-line { top: 14%; bottom: 10%; width: 2px; }
.fret-line { left: 10%; right: 10%; height: 2px; }
.nut-line { height: 6px; }
.finger-dot { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: white; font-size: 0.78rem; font-weight: 900; transform: translate(-50%, -50%); }
.open-marker, .mute-marker { position: absolute; top: 4%; transform: translateX(-50%); color: #2c2927; font-weight: 900; }

.trainer-device {
  position: relative;
  width: min(100%, 900px);
  justify-self: center;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  justify-items: center;
  padding: 36px 26px 14px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.trainer-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.trainer-device .device-top,
.trainer-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.trainer-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}
.trainer-screen {
  min-height: auto;
  display: grid;
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 9px 12px 8px;
  border: 2px solid #0a0b0d;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.trainer-control-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.trainer-panel-label {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trainer-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trainer-mode {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  justify-self: start;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #e7ded2;
  padding: 4px;
}
.trainer-mode button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #413832;
  cursor: pointer;
  font-weight: 900;
}
.trainer-mode button.active { background: white; color: var(--ink); box-shadow: 0 1px 6px rgba(23, 21, 20, 0.12); }
.trainer-top-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.trainer-device .trainer-mode {
  width: auto;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  justify-self: auto;
  padding: 3px;
  border-color: rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 46%),
    #090b0e;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.62);
}
.trainer-device .trainer-mode button {
  min-height: 27px;
  padding: 0 14px;
  color: rgba(255,255,255,0.78);
  font-size: 0.66rem;
  letter-spacing: 0;
}
.trainer-device .trainer-mode button.active {
  background: #fff9e9;
  color: #24180c;
  box-shadow: inset 0 -2px 5px rgba(207,164,73,0.2), 0 1px 6px rgba(0,0,0,0.22);
}
.trainer-visual {
  display: grid;
  gap: 6px;
  border-radius: var(--radius);
}
.trainer-visual p {
  margin: 0;
  color: #3b2a18;
  font-weight: 900;
  text-align: center;
}
.trainer-visual p strong {
  color: #24180c;
}
.fretboard-picture {
  position: relative;
  aspect-ratio: 2172 / 724;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: url("assets/fretboard-approved-white.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
.trainer-device .fretboard-picture {
  background: transparent;
  box-shadow: none;
}
.trainer-device .fretboard-picture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("assets/fretboard-approved-white.png") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fretboard-marker {
  position: absolute;
  left: var(--marker-x, 11%);
  top: var(--marker-y, 20%);
  z-index: 5;
  width: 24px;
  height: 24px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
}
.trainer-find {
  display: grid;
  gap: 8px;
}
.trainer-find-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #3b2a18;
  font-weight: 900;
  text-align: center;
}
.trainer-find-head strong {
  min-width: 58px;
  padding: 5px 12px;
  border: 2px solid rgba(36,24,12,0.14);
  border-radius: 999px;
  background: #fff9e9;
  color: #24180c;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: inset 0 -2px 5px rgba(207,164,73,0.18);
}
.trainer-find-head em {
  color: #66513d;
  font-size: 0.76rem;
  font-style: normal;
  text-transform: uppercase;
}
.trainer-find-board {
  cursor: crosshair;
  user-select: none;
}
.trainer-note-target {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 6;
  display: block;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.trainer-note-target.is-found {
  border: 3px solid white;
  background: #21a889;
  box-shadow: 0 7px 16px rgba(0,0,0,0.3), 0 0 0 2px rgba(33,168,137,0.2);
}
.trainer-note-target.is-wrong::before,
.trainer-note-target.is-wrong::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 5px;
  border-radius: 999px;
  background: #d14435;
  box-shadow: 0 3px 9px rgba(0,0,0,0.28);
  transform-origin: center;
}
.trainer-note-target.is-wrong::before { transform: translate(-50%, -50%) rotate(45deg); }
.trainer-note-target.is-wrong::after { transform: translate(-50%, -50%) rotate(-45deg); }
.trainer-note-target.is-wrong {
  animation: trainerWrongFlash 0.62s ease both;
}
.trainer-star-burst {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}
.trainer-star-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--burst-size, 14px);
  height: var(--burst-size, 14px);
  background: #ffd34f;
  clip-path: polygon(50% 0%, 61% 34%, 96% 34%, 68% 55%, 79% 90%, 50% 69%, 21% 90%, 32% 55%, 4% 34%, 39% 34%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.32));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25) rotate(0deg);
  animation: trainerStarBurst 1.12s cubic-bezier(0.14, 0.72, 0.22, 1) var(--burst-delay, 0s) both;
}
.trainer-star-burst span:nth-child(3n) { background: #ff5a45; }
.trainer-star-burst span:nth-child(3n + 1) { background: #28b99c; }
.trainer-star-burst span:nth-child(4n) { background: #ffffff; }
.trainer-find p {
  margin: 0;
  color: #4a3725;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}
.trainer-find.is-complete p {
  animation: trainerSuccessFlash 0.72s ease both;
}
@keyframes trainerWrongFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  18%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
}
@keyframes trainerSuccessFlash {
  0%, 100% { color: #4a3725; transform: scale(1); }
  42% { color: #13725f; transform: scale(1.04); }
}
@keyframes trainerStarBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(30deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.72) rotate(var(--burst-rotate));
  }
}
.triad-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 5;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}
.triad-marker.root { background: var(--red); }
.triad-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.triad-notes span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
  color: #3a332e;
  text-align: center;
  font-weight: 900;
}
.finder-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 5;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}
.finder-marker.root { background: var(--red); }
.finder-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf9;
  padding: 14px;
}
.finder-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}
.finder-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
}
.finder-results {
  display: grid;
  gap: 10px;
}
.finder-results p {
  margin: 0;
  color: var(--muted);
}
.finder-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
}
.finder-result strong { font-size: 1.15rem; }
.finder-result span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}
.trainer-prompt { min-height: 154px; display: grid; place-items: center; border-radius: var(--radius); background: var(--ink); color: white; text-align: center; }
.trainer-device .trainer-prompt {
  min-height: 300px;
  border: 2px solid rgba(36,24,12,0.16);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.3), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,247,217,0.28));
  color: #24180c;
  box-shadow: inset 0 0 18px rgba(69,38,7,0.2);
}
.trainer-prompt span, .trainer-prompt strong { display: block; }
/* David, 2026-08-24: the string line was body-sized next to a 5.4rem fret, so it
   read as a caption rather than half of the prompt. Both halves now share one
   size — the Fretboard mode already shows them at matching size, and the two
   modes should look like the same prompt. Weight still separates them. */
.trainer-prompt span,
.trainer-prompt strong { font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1.05; }
.trainer-prompt span { font-weight: 500; }

/* David, 2026-08-24: switching Fretboard -> Text prompt -> Find all resized the
   screen, so the whole pedal jumped — 41px at desktop, 86px at 720px wide. A
   fixed height cannot fix it: both fretboards are aspect-ratio driven so they
   shrink with the viewport, and below roughly 800px the TEXT panel is the
   tallest of the three rather than the find panel. So instead of pinning a
   number, all three panels are stacked into one grid cell and the inactive two
   are hidden with `visibility` instead of `display` — they keep contributing
   their height, so the screen always measures the tallest panel at whatever
   the current width happens to be. */
.trainer-screen {
  grid-template-areas: "trainer-panel";
  grid-template-rows: auto;
}
.trainer-screen > * { grid-area: trainer-panel; }
.trainer-screen > .is-hidden {
  /* .is-hidden is `display: none !important`, so this has to shout back. */
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}
/* Every panel now fills the shared box, so the shorter ones centre in it
   instead of riding the top edge. */
.trainer-visual,
.trainer-find,
.trainer-prompt { align-content: center; }
.note-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.note-choices button { min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: white; cursor: pointer; font-weight: 900; }
/* David, 2026-08-24: the screen was only half the jump. The control panel holds
   6 answer buttons in the two quiz modes and the 12-note picker in find-all, so
   it grew by exactly one button row (56px) on the switch. Reserve the taller
   layout's height in every mode and centre a short row inside it — the buttons
   keep one size across modes, which matters more here than filling the space,
   since a control that resizes by mode is the same complaint in miniature. The
   row count is a variable because the narrow breakpoint drops to 3 columns,
   where the picker needs 4 rows rather than 2. */
.trainer-control-panel .note-choices {
  grid-template-columns: repeat(6, 1fr);
  --trainer-choice-rows: 2;
  min-height: calc(var(--trainer-choice-rows) * 48px + (var(--trainer-choice-rows) - 1) * 8px);
  align-content: center;
}
.trainer-control-panel .note-choices button {
  min-height: 48px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.trainer-control-panel .note-choices button:hover {
  filter: brightness(1.08);
}
.note-choices button.correct { background: var(--teal); color: white; }
.note-choices button.incorrect { background: var(--red); color: white; }
.trainer-control-panel .note-choices button.correct {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #32b195, #136d5e);
}
.trainer-control-panel .note-choices button.incorrect {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.trainer-control-panel [data-next-note] {
  width: auto;
  min-height: 30px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  padding: 6px 12px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.reviews-section { background: #ede8e1; }
.reviews-grid figure { margin: 0; }
.reviews-grid blockquote { margin: 0 0 20px; }
.reviews-grid figcaption { font-weight: 900; }
/* Reviews page: masonry-style columns so cards of varying length pack tightly */
.reviews-masonry { columns: 3 300px; column-gap: 16px; }
.reviews-masonry figure {
  break-inside: avoid;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 24px;
}
.reviews-masonry blockquote { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.reviews-masonry figcaption { font-weight: 900; }
.reviews-cta { margin-top: clamp(28px, 5vw, 48px); }
@media (max-width: 720px) { .reviews-masonry { columns: 1; } }
/* Reviews page: tighten the gap between the heading and the cards. */
.reviews-page .page-hero { padding-bottom: clamp(20px, 3vw, 36px); }
.reviews-page .reviews-section { padding-top: clamp(24px, 4vw, 44px); }
/* Reviews page polish: warmer cards, a quote accent, avatar initials, and a
   Read more / Show less toggle (wired up in reviews.js). */
.reviews-masonry figure {
  position: relative;
  padding: 26px 24px 22px;
  border-color: rgba(222, 215, 207, 0.9);
  background: linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.reviews-masonry figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.review-stars {
  display: flex;
  gap: 2px;
  margin: 0 0 12px;
  color: #e0a52a;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 1px;
}
/* Featured lead review: full-width, larger, always shows the whole review */
.reviews-featured { margin: 0 0 22px; }
.review-featured {
  position: relative;
  margin: 0;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px);
  border: 1px solid rgba(222, 215, 207, 0.9);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.review-featured .review-stars { font-size: 1.15rem; margin-bottom: 16px; }
.review-featured .review-quote {
  display: block;
  max-width: 64ch;
  margin: 0 0 20px;
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.review-featured .review-avatar { width: 52px; height: 52px; font-size: 1rem; }
.review-featured .review-name { font-size: 1.05rem; }
.review-quote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card.is-open .review-quote { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}
.review-more:hover, .review-more:focus-visible { text-decoration: underline; }
.review-cap { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff9e9;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(23, 21, 20, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px rgba(23, 21, 20, 0.16);
}
.review-avatar--teal { background: linear-gradient(145deg, #256f69, #123e3b); }
.review-avatar--red { background: linear-gradient(145deg, #c24a3a, #842d24); }
.review-avatar--blue { background: linear-gradient(145deg, #344e86, #1c2f5a); }
.review-avatar--amber { background: linear-gradient(145deg, #cf922f, #8a5a12); }
.review-name { font-weight: 900; line-height: 1.2; }

/* Lessons page */
/* Denser vertical rhythm on the content-heavy lessons page (the default
   section padding leaves too much air between many stacked sections). */
.lessons-page .section:not(.contact-band) { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 6vw, 76px); }
.lessons-page .page-hero { padding-bottom: clamp(36px, 5vw, 60px); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; background: var(--panel); font-weight: 700; font-size: 0.95rem; }
.lessons-cta { margin-top: clamp(22px, 4vw, 38px); }
.lessons-final-cta { align-items: center; }
.lessons-final-cta h2 { margin: 8px 0 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.04; }
.lessons-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-section { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1fr); gap: clamp(30px, 6vw, 88px); align-items: start; }
.about-portrait-section { grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.1fr); align-items: start; }
.about-photo { margin: 0; }
.about-photo img {
  width: 100%;
  aspect-ratio: 1617 / 973;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-portrait-section .about-copy { grid-column: 1 / -1; max-width: 850px; }
.about-copy { font-size: 1.08rem; }
.contact-band { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 520px); gap: clamp(28px, 6vw, 74px); padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 52px); background: #203d3a; color: white; }
.contact-band.standalone { min-height: calc(100vh - 148px); align-items: center; }
.contact-band p { color: rgba(255,255,255,0.78); }
.contact-form { display: grid; gap: 14px; }
.contact-form span { color: rgba(255,255,255,0.76); }
.site-footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px clamp(18px, 4vw, 52px); background: var(--ink); color: white; }

.auth-page {
  min-height: calc(100vh - 78px);
  display: grid;
  align-items: center;
  padding: clamp(96px, 12vw, 140px) clamp(18px, 4vw, 52px) clamp(42px, 7vw, 74px);
  background: #f0ebe4;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 440px);
  gap: clamp(28px, 6vw, 82px);
  align-items: center;
}
.auth-stack {
  display: grid;
  gap: 14px;
}
.auth-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.auth-card-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-weight: 700;
}
.admin-login-card {
  background: #f8f4eb;
  box-shadow: none;
}
.auth-card label {
  display: grid;
  gap: 8px;
}
.auth-card label span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}
.form-status {
  min-height: 24px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.portal-app {
  min-height: calc(100vh - 78px);
  padding: clamp(96px, 12vw, 130px) clamp(18px, 4vw, 52px) clamp(42px, 7vw, 74px);
  background: #f0ebe4;
}
.portal-loading {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}
.portal-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.7fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.portal-lessons {
  display: grid;
  gap: 16px;
}

/* --- Portal: smaller greeting, tools buttons, lesson-plan editor + search --- */
.student-card .portal-greeting { font-size: 1.45rem; line-height: 1.15; margin: 2px 0 0; font-weight: 800; }
.portal-tools { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; display: grid; gap: 10px; }
.portal-tools .eyebrow { margin: 0; }
.portal-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.portal-tool-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fbfaf7);
  color: var(--ink); font-weight: 700; font-size: 0.86rem; text-decoration: none; transition: all .15s;
}
.portal-tool-btn:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); transform: translateY(-1px); }
.portal-tool-btn.wide { grid-column: 1 / -1; background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }

.portal-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portal-toolbar h2 { margin: 2px 0; font-size: 1.5rem; line-height: 1.15; }
.gps-search-item .drag-grip { color: var(--muted); font-size: 1rem; line-height: 1; flex: none; }
.gps-search-hint { color: var(--muted); font-style: italic; font-size: 0.85rem; }

.lesson-plan { display: grid; gap: 12px; margin-top: 4px; }
.plan-empty { color: var(--muted); font-style: italic; }
.plan-entry { border: 1px solid var(--line); border-radius: 16px; background: var(--panel, #fff); padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: border-color .12s, box-shadow .12s; }
.plan-entry.drag-over { border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.plan-entry.is-editing { border-color: var(--teal, #176c68); box-shadow: 0 0 0 2px rgba(23,108,104,.12); }
.plan-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-date { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.plan-date svg { width: 17px; height: 17px; color: var(--red, #b63f2f); flex: none; }
.plan-edit { border: 1px solid var(--line); background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.82rem; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.plan-edit:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.plan-entry-head-actions { display: inline-flex; gap: 8px; align-items: center; }
.plan-save-btn { background: var(--red, #b63f2f); border-color: var(--red, #b63f2f); color: #fff; }
.plan-save-btn:hover { background: #9a3527; border-color: #9a3527; color: #fff; }
.plan-entry-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.plan-items { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-note-view { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; white-space: normal; }
.plan-note-view p, .plan-note-view div { margin: 0 0 0.45em; }
.plan-note-view ul, .plan-note-view ol { margin: 0.35em 0 0.35em 1.3em; padding: 0; }
.plan-note-view li { margin: 0.16em 0; }
.plan-entry-actions { display: flex; justify-content: flex-end; gap: 8px; }
.plan-delete { border: 1px solid var(--line); background: none; color: #b63f2f; font-weight: 800; font-size: 0.84rem; padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.plan-delete:hover { background: #b63f2f; border-color: #b63f2f; color: #fff; }
.plan-entry-head input[type="date"] { font-weight: 800; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--paper, #fbfaf7); color: var(--ink); }
.plan-del { border: none; background: none; color: var(--muted); font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.plan-del:hover { color: var(--red, #b63f2f); }
.plan-dropzone { min-height: 46px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: all .12s; }
.plan-dropzone.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); }
.plan-hint { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.plan-item { display: inline-flex; align-items: center; gap: 6px; background: var(--paper, #fbfaf7); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem; font-weight: 700; }
.plan-item a { color: var(--ink); text-decoration: none; }
.plan-item a:hover { color: var(--red, #b63f2f); text-decoration: underline; }
.plan-item button { border: none; background: var(--line); color: var(--ink); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 0.85rem; }
.plan-item button:hover { background: var(--red, #b63f2f); color: #fff; }
.plan-item-editable {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  padding: 6px;
  align-items: center;
}
.plan-item-editable svg {
  flex: 0 0 auto;
}
.plan-item-editable input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}
.plan-item-title-input {
  flex: 0 1 14rem;
}
.plan-item-url-input {
  flex: 1 1 18rem;
}
.plan-note-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper, #fbfaf7); }
.plan-note-toolbar {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap; /* keep all 7 tools on one row, even in the narrow Songs tab */
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fbf8f1;
}
.plan-note-toolbar button {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(39, 31, 24, .04);
}
.plan-note-toolbar button:hover,
.plan-note-toolbar button:focus-visible {
  border-color: rgba(182, 63, 47, .55);
  color: var(--red, #b63f2f);
  background: #fff7f4;
}
.plan-note-icon { display: inline-grid; place-items: center; padding: 0; }
.plan-note-icon svg { display: block; width: 20px; height: 20px; }
.plan-note-tb-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--line); margin: 0 4px; }
/* GWJ-51: "H" heading button renders the line in ALL CAPS, in both the editor and the student-facing view. */
.plan-note-rich h1, .plan-note-rich h2, .plan-note-rich h3, .plan-note-rich h4,
.plan-item-note-rich h1, .plan-item-note-rich h2, .plan-item-note-rich h3, .plan-item-note-rich h4,
.plan-note-view h1, .plan-note-view h2, .plan-note-view h3, .plan-note-view h4,
.plan-attach-note h1, .plan-attach-note h2, .plan-attach-note h3, .plan-attach-note h4 {
  margin: 0.3em 0 0.35em; font-size: 0.95rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.3;
}
.plan-note { width: 100%; min-height: 304px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 0.92rem; line-height: 1.45; color: var(--ink); background: var(--paper, #fbfaf7); }
.plan-note-rich { min-height: 360px; border: 0; border-radius: 0; outline: none; overflow: auto; }
.plan-note-rich:focus { box-shadow: inset 0 0 0 2px rgba(182, 63, 47, .22); }
.plan-note-rich:empty::before { content: attr(data-placeholder); color: var(--muted); }
.plan-note-rich p, .plan-note-rich div { margin: 0 0 0.45em; }
.plan-note-rich ul, .plan-note-rich ol { margin: 0.35em 0 0.35em 1.4em; padding: 0; }
.plan-note-rich li { margin: 0.18em 0; }
.plan-editor-grid { display: grid; grid-template-columns: minmax(360px, 0.96fr) minmax(360px, 0.84fr); gap: 12px; align-items: start; }
.plan-editor-panel { border: 1px solid var(--line); border-radius: 14px; background: #fffaf1; padding: 10px; display: grid; gap: 8px; }
.plan-content-panel { background: var(--panel, #fff); gap: 8px; }
.plan-add-tool { border: 1px solid var(--line); border-radius: 14px; background: #fffaf1; padding: 8px; display: grid; gap: 8px; }
.plan-add-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.plan-add-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}
.plan-add-tabs button.is-active {
  background: var(--red, #b63f2f);
  border-color: var(--red, #b63f2f);
  color: #fff;
}
.plan-add-pane { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 8px; }
.plan-add-pane[hidden] { display: none; }
.plan-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
summary.plan-section-head { cursor: pointer; list-style: none; }
summary.plan-section-head::-webkit-details-marker { display: none; }
.plan-section-head h3 { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.plan-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.25; }
.plan-section-head > span {
  flex: none;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.plan-content-section { border: 1px solid var(--line); border-radius: 12px; background: #fdfbf7; padding: 8px 9px; display: grid; gap: 6px; }
.plan-content-section[hidden] { display: none; }
details.plan-content-section:not([open]) { gap: 0; }
details.plan-content-section:not([open]) .plan-section-chips { display: none; }
.plan-content-section.drag-over,
.plan-gps-slot.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); box-shadow: 0 0 0 2px rgba(182,63,47,.12); }
.plan-section-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; align-items: center; }
.plan-section-empty { color: var(--muted); font-size: 0.78rem; font-style: italic; }
.plan-attach-add.compact { display: grid; grid-template-columns: minmax(96px, 0.5fr) minmax(140px, 1fr) auto; gap: 6px; align-items: center; }
.plan-attach-add.compact .plan-attach-title,
.plan-attach-add.compact .plan-attach-url { width: 100%; flex: unset; font-size: 0.84rem; padding: 7px 9px; }
.plan-attach-add.compact .button { min-height: 34px; padding: 6px 12px; }
.plan-gps-slot:empty { display: none; }
.lt-edit .plan-gps-slot .gps-search { margin-top: 0; padding: 8px; border-radius: 12px; box-shadow: none; background: #fff; gap: 7px; }
.plan-gps-slot .gps-search h3 { display: none; }
.plan-gps-slot .gps-search-input { border-radius: 8px; padding: 5px 9px; font-size: 0.84rem; }
.plan-gps-slot .gps-search-list { max-height: 122px; }
.plan-gps-slot .gps-search-item { padding: 6px 8px; font-size: 0.78rem; border-radius: 9px; }
.plan-gps-slot .gps-search-item .gps-toc-num { width: 22px; height: 22px; font-size: 0.68rem; }
.plan-gps-slot .gps-search-hint { font-size: 0.78rem; }
.lt-edit .plan-entry.is-editing { padding: 10px; }
.lt-edit .plan-entry-actions { margin-top: 0; }
.lt-edit .plan-note-toolbar { padding: 6px; }
.lt-edit .plan-note-toolbar button { padding: 0; font-size: 1rem; }
.lt-edit .plan-note-rich { min-height: 390px; }
.lt-edit .plan-entry-head { margin-bottom: 8px; }
.lt-edit .plan-entry-head input[type="date"] { font-size: 0.88rem; padding: 5px 9px; }

/* Integrated lesson editor: one workspace with connected content tabs. */
.plan-entry.is-editing {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border-color: #d8cfc2;
  box-shadow: 0 14px 32px rgba(39, 31, 24, .08);
}
.plan-entry.is-editing > .plan-entry-head {
  margin: 0;
  padding: 12px 14px;
  background: #fbf8f1;
  border-bottom: 1px solid var(--line);
}
.plan-entry.is-editing > .plan-entry-actions {
  padding: 10px 14px 14px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.plan-entry.is-editing .plan-editor-grid {
  --lesson-editor-tab-height: 48px;
  gap: 0;
  align-items: stretch;
  background: #fff;
}
.plan-entry.is-editing .plan-editor-panel {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  gap: 0;
}
.plan-entry.is-editing .plan-notes-panel {
  border-right: 1px solid var(--line);
}
.plan-entry.is-editing .plan-section-head {
  align-items: center;
  min-height: 30px;
}
.plan-entry.is-editing .plan-section-head h3 {
  font-size: 0.82rem;
  letter-spacing: 0.09em;
}
.plan-entry.is-editing .plan-notes-panel > .plan-section-head {
  position: relative;
  min-height: var(--lesson-editor-tab-height);
  height: var(--lesson-editor-tab-height);
  padding: 0 16px;
  background: #fbf8f1;
  border-bottom: 1px solid var(--line);
}
.plan-entry.is-editing .plan-notes-panel > .plan-section-head::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 112px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-notes-panel > .plan-section-head h3 {
  color: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-note-wrap {
  margin: 14px;
  border-radius: 12px;
  background: #fff;
}
.plan-entry.is-editing .plan-add-tool {
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.plan-entry.is-editing .plan-add-tabs {
  display: flex;
  gap: 0;
  padding: 0 10px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--line);
  background: #fbf8f1;
}
.plan-entry.is-editing .plan-add-tabs button {
  position: relative;
  min-height: var(--lesson-editor-tab-height);
  height: var(--lesson-editor-tab-height);
  flex: 1 1 0;
  max-width: 156px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
}
.plan-entry.is-editing .plan-add-tabs button::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}
.plan-entry.is-editing .plan-add-tabs button:hover {
  color: var(--ink);
}
.plan-entry.is-editing .plan-add-tabs button.is-active {
  background: #fff;
  color: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-add-tabs button.is-active::after {
  background: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-add-pane {
  border: 0;
  border-radius: 0;
  padding: 14px 16px 12px;
  background: #fff;
}
.plan-entry.is-editing .plan-active-content {
  background: #fdfbf7;
  padding: 12px 16px 16px;
}
.plan-entry.is-editing .plan-content-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.plan-entry.is-editing .plan-content-section .plan-section-head {
  margin-bottom: 9px;
}
.plan-entry.is-editing .plan-section-head > span {
  background: #fff;
}
.plan-entry.is-editing .plan-section-chips {
  min-height: 34px;
  padding: 0;
}
.plan-entry.is-editing .plan-attach-add.compact {
  grid-template-columns: minmax(136px, .72fr) minmax(180px, 1fr) auto;
  gap: 10px;
}
.plan-entry.is-editing .plan-attach-add.compact .plan-attach-title,
.plan-entry.is-editing .plan-attach-add.compact .plan-attach-url {
  min-height: 40px;
  border-radius: 10px;
}
.plan-entry.is-editing .plan-attach-add.compact .button {
  min-height: 40px;
  border-radius: 10px;
}
.plan-entry.is-editing .plan-drop-combined {
  margin: 0;
  border-radius: 12px;
}
.plan-entry.is-editing .plan-gps-slot .gps-search {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.plan-entry.is-editing .plan-gps-slot .gps-search-input {
  width: 100%;
  min-height: 34px;
}
.plan-entry.is-editing .plan-gps-slot .gps-search-list {
  max-height: 170px;
}
.lt-edit .plan-entry.is-editing {
  padding: 0;
}
@media (max-width: 820px) {
  .plan-entry.is-editing .plan-notes-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .plan-entry.is-editing .plan-add-tabs {
    overflow-x: auto;
  }
  .plan-entry.is-editing .plan-add-tabs button {
    flex: 0 0 118px;
  }
  .plan-entry.is-editing .plan-attach-add.compact {
    grid-template-columns: 1fr;
  }
}

/* Polished lesson editor: every editable area now belongs to the same tab set. */
.plan-entry.is-editing .plan-editor-workspace {
  --lesson-editor-tab-height: 56px;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr);
  min-height: clamp(560px, 68vh, 760px);
  background: #fff;
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 0;
  overflow-x: auto;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #fbf8f1;
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs button {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: var(--lesson-editor-tab-height);
  min-height: var(--lesson-editor-tab-height);
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs button::after {
  left: 18%;
  right: 18%;
  height: 3px;
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .46);
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs button.is-active {
  background: #fff;
  color: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs button.is-active::after {
  background: var(--red, #b63f2f);
}
.plan-entry.is-editing .plan-editor-panel-stack {
  min-width: 0;
  min-height: 0;
  background: #fff;
}
.plan-entry.is-editing .plan-editor-panel-stack > .plan-add-pane {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  padding: 18px;
  background: #fff;
}
.plan-entry.is-editing .plan-editor-panel-stack > .plan-add-pane[hidden] {
  display: none;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-note-wrap {
  margin: 0;
  border-radius: 12px;
  background: #fff;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-note-rich {
  min-height: clamp(420px, 56vh, 640px);
  resize: vertical;
  overflow: auto;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-active-content {
  margin-top: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
}
.plan-entry.is-editing .plan-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: start;
}
.plan-entry.is-editing .plan-tab-main {
  min-width: 0;
}
.plan-entry.is-editing .plan-tab-layout .plan-active-content {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.plan-entry.is-editing .plan-section-body {
  min-width: 0;
}
.plan-entry.is-editing .plan-section-body.has-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: start;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf8f1;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel .plan-attach-add.compact {
  grid-template-columns: 1fr;
  max-width: none;
  gap: 10px;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel .plan-attach-add.compact .button {
  width: 100%;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel .plan-drop-combined {
  max-width: none;
  margin: 0;
  min-height: 132px;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-add-side-panel .plan-gps-slot .gps-search {
  max-width: none;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-content-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-section-head {
  margin-bottom: 10px;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-attach-add.compact {
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr) auto;
  max-width: 1120px;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-gps-slot .gps-search {
  max-width: 1120px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-drop-combined {
  max-width: 1120px;
}
@media (max-width: 760px) {
  .plan-entry.is-editing .plan-editor-workspace {
    min-height: 0;
  }
  .plan-entry.is-editing .plan-editor-workspace > .plan-add-tabs {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
  }
  .plan-entry.is-editing .plan-editor-panel-stack > .plan-add-pane {
    padding: 14px;
  }
  .plan-entry.is-editing .plan-tab-layout {
    grid-template-columns: 1fr;
  }
  .plan-entry.is-editing .plan-section-body.has-side {
    grid-template-columns: 1fr;
  }
  .plan-entry.is-editing .plan-editor-panel-stack .plan-attach-add.compact {
    grid-template-columns: 1fr;
  }
}

/* Admin right-pane tool overlay (admin-shell.js). Sidebar items tagged
   data-admin-iframe="/path" open inside the content area instead of navigating
   away, so the admin chrome stays put. */
/* Embedded view — when a page (Guitar GPS / lesson / tools / etc.) is loaded
   inside the admin shell's right-pane iframe, app.js stamps `.is-embedded` on
   <html>. Hide the duplicate site header (brand + Portal/Guitar GPS/Tools/Log
   out nav) because the admin sidebar already provides navigation. Also strip
   the top padding that page-main reserves for the (now-hidden) fixed header,
   and tighten the lesson-reader top padding so the content starts close to
   the iframe's title bar. */
.is-embedded .site-header { display: none; }
.is-embedded .page-main { padding-top: 0; }
.is-embedded .lesson-reader { padding-top: clamp(12px, 1.5vw, 20px); }
.is-embedded .site-footer { display: none; }
html.is-embedded body.portal-lessons-embed { background: var(--paper); }
html.is-embedded body.portal-lessons-embed .portal-shell { display: block; min-height: 0; }
html.is-embedded body.portal-lessons-embed .portal-sidebar,
html.is-embedded body.portal-lessons-embed .portal-menu-toggle,
html.is-embedded body.portal-lessons-embed .portal-loading,
html.is-embedded body.portal-lessons-embed .admin-portal-banner { display: none !important; }
html.is-embedded body.portal-lessons-embed .portal-content { padding: 10px; }
html.is-embedded body.portal-lessons-embed .portal-view { max-width: none; }
html.is-embedded body.portal-lessons-embed .portal-card { box-shadow: none; }

/* /next live bridges embed the existing production screens inside the new
   shell. Hide the embedded screen's own sidebar so we don't get menu-in-menu. */
html.is-embedded body.next-embed { background: var(--paper, #fbfaf7); }
html.is-embedded body.next-embed .portal-shell { display: block; min-height: 0; }
html.is-embedded body.next-embed .portal-sidebar,
html.is-embedded body.next-embed .portal-menu-toggle,
html.is-embedded body.next-embed .portal-loading,
html.is-embedded body.next-embed .admin-portal-banner,
html.is-embedded body.next-embed .portal-mobile-tools { display: none !important; }
html.is-embedded body.next-embed .portal-content {
  padding: clamp(18px, 2vw, 28px);
  min-height: 0;
}
html.is-embedded body.next-embed .portal-view.is-active,
html.is-embedded body.next-embed .portal-payments-view.is-active,
html.is-embedded body.next-embed .portal-recordings-view.is-active,
html.is-embedded body.next-embed .portal-content .portal-dashboard {
  max-width: none;
  margin: 0;
}
html.is-embedded body.next-embed .portal-card { box-shadow: none; }

/* Pinned to the viewport (not absolute inside .portal-content) so that on tall
   admin pages the iframe is always exactly one viewport high — otherwise the
   iframe stretches with the page below it and the body's overflow:hidden lock
   leaves the lower half unreachable (you'd scroll inside a lesson and just hit
   the bottom of the visible window). The sidebar gets a higher z-index below
   so it sits ON TOP of the overlay and stays usable. */
.admin-tool-overlay { position: fixed; inset: 0; background: var(--paper, #fbfaf7); display: flex; flex-direction: column; z-index: 30; }
.admin-tool-overlay[hidden] { display: none; }
.admin-tool-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.admin-tool-overlay-title { font-size: 0.95rem; color: var(--ink); }
.admin-tool-overlay-open { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.admin-tool-overlay-open:hover { color: var(--red, #b63f2f); }
.admin-tool-overlay-close { font-size: 1.6rem; line-height: 1; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 6px; }
.admin-tool-overlay-close:hover { color: var(--red, #b63f2f); }
.admin-tool-overlay-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--paper, #fbfaf7); }
.portal-content { position: relative; }
body.admin-tool-overlay-open { overflow: hidden; }
/* Keep the admin sidebar visible above the fixed overlay so the user can
   switch tabs (Students, Schedule, Billing) without closing the iframe.
   We also push the overlay's LEFT edge in by the sidebar width — otherwise
   the iframe content (which starts at left:0) is hidden behind the sidebar
   that sits on top at z-index 40, cutting off the first ~256px of every
   iframed page. When the sidebar is collapsed (.portal-shell.is-collapsed)
   the overlay snaps back to full width. */
body.admin-tool-overlay-open .portal-sidebar { z-index: 40; }
body.admin-tool-overlay-open .admin-tool-overlay { left: 256px; }
body.admin-tool-overlay-open .portal-shell.is-collapsed .admin-tool-overlay { left: 0; }
/* The hamburger toggle has to sit ABOVE the sidebar so the user can collapse
   the sidebar even while a tool overlay is open. Without this bump the toggle
   is hidden behind the overlay (same z-index, but the overlay paints last). */
.portal-menu-toggle { z-index: 50; }

/* Free Tab pane (tools.html?tool=tab&tex=…) — same alphaTab player as the old
   standalone /tab.html, but embedded inside the practice-tools surface. */
.freetab-stage { display: grid; gap: 12px; padding: 16px; background: var(--paper, #fbfaf7); border: 1px solid var(--line); border-radius: 16px; }
.freetab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.freetab-head h2 { font-size: 1.2rem; margin: 0; color: var(--ink); }
.freetab-tempo { color: var(--muted); font-weight: 700; font-size: 0.9rem; white-space: nowrap; margin-left: auto; }
.freetab-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.freetab-loop { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.freetab-loop input[type="checkbox"] { margin: 0; }
.freetab-paper { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; overflow-x: auto; }
.freetab-empty { color: var(--muted); padding: 24px; text-align: center; margin: 0; }
.freetab-note { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Lesson attachments & links (GWJ-59). */
.plan-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plan-attach { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: #eef4f5; border: 1px solid #d7e3e6; border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; font-weight: 700; color: #2a6b78; text-decoration: none; }
.plan-attach:hover { background: #e3eef0; text-decoration: underline; }
.plan-attach svg { flex: 0 0 auto; }
.plan-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* GWJ-37: download button beside an uploaded lesson file. */
.plan-attach-wrap { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.plan-attach-dl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #eef4f5; border: 1px solid #d7e3e6; color: #2a6b78; text-decoration: none; flex: 0 0 auto; }
.plan-attach-dl:hover { background: #2a6b78; color: #fff; border-color: #2a6b78; }
/* GWJ-52: item notes — every content item edits like lesson notes, with details on the right. */
.plan-item-detail-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
  gap: 14px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  padding: 10px;
  background: #eef4f5;
}
.plan-entry.is-editing .plan-editor-panel-stack .plan-section-chips {
  align-items: stretch;
  gap: 12px;
}
.plan-section-chips .plan-item-detail-card {
  flex: 1 1 100%;
}
.plan-item-detail-card.plan-item-gps {
  background: #fff3f0;
  border-color: #f0d2ca;
  color: var(--red, #b63f2f);
}
.plan-item-detail-card.plan-item-attachment {
  background: #f4f1ea;
  border-color: #ded7ca;
  color: #5f5a52;
}
.plan-item-note-editor {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
}
.plan-item-note-input { width: 100%; min-width: 0; min-height: 260px; border: 0; border-radius: 0; padding: 12px 14px; font: inherit; font-size: 0.9rem; line-height: 1.5; color: var(--ink); background: var(--paper, #fbfaf7); outline: none; overflow: auto; }
.plan-item-note-rich:focus { box-shadow: inset 0 0 0 2px rgba(182, 63, 47, .22); }
.plan-item-note-rich:empty::before { content: attr(data-placeholder); color: var(--muted); }
.plan-item-detail-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.plan-item-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plan-item-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-item-kind svg,
.plan-item-kind-icon {
  flex: 0 0 auto;
}
.plan-item-detail-head button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.plan-item-detail-head button:hover {
  background: var(--red, #b63f2f);
  color: #fff;
}
.plan-item-detail-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.plan-item-detail-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--paper, #fbfaf7);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.plan-item-detail-field input:focus {
  outline: none;
  border-color: rgba(182, 63, 47, .55);
  box-shadow: 0 0 0 2px rgba(182, 63, 47, .14);
}
@media (max-width: 860px) {
  .plan-item-detail-card {
    grid-template-columns: 1fr;
  }
  .plan-item-note-input {
    min-height: 220px;
  }
}
.plan-attach-wrap.has-note { flex-direction: column; align-items: flex-start; gap: 2px; }
.plan-attach-row { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.plan-attach-note { display: block; max-width: min(520px, 100%); font-size: 0.8rem; color: var(--muted); padding-left: 4px; font-style: normal; line-height: 1.42; }
.plan-attach-note p, .plan-attach-note div { margin: 0 0 0.35em; }
.plan-attach-note ul, .plan-attach-note ol { margin: 0.25em 0 0.25em 1.25em; padding: 0; }
.tempo-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--red-dark, #8f3327);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  box-shadow: none;
  white-space: nowrap;
}
.tempo-link::before {
  content: none;
}
.tempo-link:hover,
.tempo-link:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--red, #b63f2f);
  text-decoration: underline;
  transform: none;
}
/* GWJ-49: student folder — a flat list of every uploaded lesson file. */
.student-folder-card { margin-top: 14px; }
.folder-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.folder-search { flex: 1 1 260px; min-width: 220px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.folder-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--ink); }
.folder-search svg { color: var(--muted); flex: 0 0 auto; }
.folder-filter { display: grid; gap: 4px; flex: 0 0 auto; }
.folder-filter span { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.folder-filter select { height: 39px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 750; padding: 0 34px 0 11px; }
.student-folder-list { display: flex; flex-direction: column; gap: 6px; }
.folder-item { display: grid; grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) auto auto minmax(116px, auto); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper, #fbfaf7); }
.folder-link { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; color: #2a6b78; text-decoration: none; font-weight: 700; }
.folder-link:hover { text-decoration: underline; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-date { font-size: 0.8rem; color: var(--muted); font-weight: 800; white-space: nowrap; }
.folder-type { flex: 0 0 auto; font-size: 0.72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.folder-dl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: #eef4f5; border: 1px solid #d7e3e6; color: #2a6b78; text-decoration: none; }
.folder-dl:hover { background: #2a6b78; color: #fff; border-color: #2a6b78; }
.folder-drop { margin: 0 0 12px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; background: var(--paper, #fbfaf7); transition: border-color .12s, background .12s; }
.folder-drop:hover, .folder-drop.is-drag { border-color: var(--red, #b63f2f); background: #fdf3f0; }
.folder-drop.is-uploading { opacity: 0.6; pointer-events: none; }
.folder-drop-hint { color: var(--muted); font-size: 0.9rem; }
.folder-tag { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.05); border-radius: 999px; padding: 2px 8px; }
.folder-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.folder-lesson-link { color: var(--red, #b63f2f); font-size: 0.82rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.folder-lesson-link:hover { text-decoration: underline; }
.folder-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.folder-del:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.folder-empty { margin: 4px 0 0; }
/* GWJ-43: "Annotate for this student" link on GPS lessons (admin preview only). */
.plan-annotate { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--red, #b63f2f); text-decoration: none; flex: 0 0 auto; }
.plan-annotate:hover { background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }
.plan-item-detail-actions { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .folder-filter { flex: 1 1 130px; }
  .folder-filter select { width: 100%; }
  .folder-item { grid-template-columns: 1fr auto; align-items: start; }
  .folder-date { grid-column: 1 / -1; }
  .folder-link { grid-column: 1 / -1; }
  .folder-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.plan-item-link { background: #eef4f5; border-color: #d7e3e6; color: #2a6b78; }
.plan-item-link a { color: #2a6b78; }
.plan-item-link svg { flex: 0 0 auto; }
.plan-attach-edit { display: grid; gap: 6px; }
.plan-attach-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.plan-attach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-attach-add { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-attach-url { flex: 1 1 200px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper, #fbfaf7); }
.plan-attach-title { flex: 0 1 150px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper, #fbfaf7); }
.plan-attach-add .button { flex: 0 0 auto; }
.plan-attach-tip { margin: 4px 0 0; font-size: 0.8rem; }
.plan-file-drop { display: block; margin-top: 8px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; font-size: 0.85rem; color: var(--muted); cursor: pointer; transition: all .12s; }
.plan-file-drop:hover { border-color: var(--red, #b63f2f); color: var(--ink); }
.plan-file-drop.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); color: var(--ink); }
.plan-file-drop.is-uploading { opacity: 0.6; pointer-events: none; }
/* GWJ-78: one combined zone for "drag a GPS lesson" + "drop / click to upload
   a file" + chip display. Chips sit at the top; the dashed hint sits below. */
.plan-drop-combined { display: grid; gap: 10px; min-height: 86px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper, #fbfaf7); cursor: pointer; transition: all .12s; }
.plan-drop-combined:hover { border-color: var(--red, #b63f2f); }
.plan-drop-combined.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); box-shadow: 0 0 0 2px rgba(182,63,47,.12); }
.plan-drop-combined.is-uploading { opacity: 0.65; pointer-events: none; }
.plan-drop-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.plan-drop-chips:empty { display: none; }
.plan-drop-hint { text-align: center; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.plan-drop-hint strong { color: var(--ink); }
.plan-file-drop.is-uploading span::after { content: ' — uploading…'; }
.plan-content-section .plan-drop-combined { min-height: auto; padding: 8px; gap: 6px; background: #fff; }
.plan-content-section .plan-drop-hint { font-size: 0.78rem; line-height: 1.28; }
.plan-content-section .plan-drop-chips { gap: 6px; }

@media (max-width: 980px) {
  .plan-editor-grid { grid-template-columns: 1fr; }
  .plan-attach-add.compact { grid-template-columns: 1fr; }
}

/* Portal Settings → AI connector instructions (GWJ-66). */
.ai-connect-steps { margin: 4px 0 10px; padding-left: 22px; display: grid; gap: 10px; color: var(--ink); line-height: 1.5; }
.ai-connect-steps li { padding-left: 4px; }
.ai-connect-url { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ai-connect-url code { background: #f3efe8; border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 0.9rem; }
.ai-connect-examples { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }

.gps-search { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel, #fff); padding: 16px; display: grid; gap: 10px; }
.gps-search-input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper, #fbfaf7); color: var(--ink); }
.gps-search-input:focus { outline: none; border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.gps-search-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.gps-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: grab; font-size: 0.85rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.04); transition: border-color .12s, box-shadow .12s, transform .08s; }
.gps-search-item:hover { border-color: var(--red, #b63f2f); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.gps-search-item:active { cursor: grabbing; transform: scale(.99); }
.gps-search-item .gps-toc-num { width: 26px; height: 26px; font-size: 0.78rem; }
.gps-search-item .gps-search-title { flex: 1 1 auto; }
.gps-search-item .gps-toc-live { margin-left: auto; }
.gps-search-empty { color: var(--muted); font-style: italic; font-size: 0.85rem; }
.portal-history { margin-top: 22px; }
.portal-history h3 { margin: 0 0 10px; }

/* === Friendly student portal: light, centered, clearly-labeled cards === */
.portal-page .portal-app { max-width: 1080px; margin: 0 auto; padding: 30px 22px 84px; background: transparent; }
.portal-page .portal-dashboard { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
.portal-page .portal-loading { text-align: left; padding: 12px 0; }
.portal-loading-line { margin: 0; color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.portal-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.portal-card-title { margin: 0; font-size: 1.25rem; line-height: 1.2; }
/* First-login "book your free lesson" nudge — accented card, text + CTA inline. */
.portal-free-prompt { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-color: var(--red, #b63f2f); background: #fdf3f0; }
.portal-free-prompt .portal-free-prompt-main { flex: 1 1 260px; }
.portal-free-prompt p { margin: 4px 0 0; color: var(--muted); }
.portal-free-prompt .button { flex: 0 0 auto; }
/* GWJ-35: first-lesson walk-through — when active, hide everything in the
   dashboard except the booking prompt so it's the only thing on screen. */
.portal-dashboard.is-walkthrough > :not(.portal-free-prompt) { display: none !important; }
.portal-dashboard.is-walkthrough .portal-free-prompt { margin-top: 8px; }
.portal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* GWJ-29: completed-lessons search box (Practice → Completed card head) */
.plan-search {
  min-height: 34px; padding: 0 10px; min-width: min(240px, 100%);
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-size: 0.92rem;
}
.plan-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.portal-card-sub { margin: 6px 0 16px; color: var(--muted); font-size: 0.92rem; }
.portal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.portal-welcome-main { display: grid; gap: 2px; }
.portal-welcome .portal-greeting { font-size: 1.85rem; margin: 8px 0 0; line-height: 1.1; }
.portal-welcome .portal-track { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.portal-welcome .portal-credits { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.portal-welcome-side { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.portal-tools-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.plan-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.plan-layout .gps-search { position: sticky; top: 86px; }
.past-search { max-width: 260px; width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper, #fbfaf7); color: var(--ink); }
.past-search:focus { outline: none; border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.portal-page .portal-lessons { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 4px; }
.portal-lessons-empty { color: var(--muted); font-style: italic; }
.portal-note-card p { color: var(--muted); }
@media (max-width: 820px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-layout .gps-search { position: static; }
}

/* === App shell: left icon sidebar + content === */
.portal-page { background: var(--paper); }
.portal-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; align-items: stretch; }
.portal-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto; }
.portal-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; text-decoration: none; color: var(--ink); font-weight: 900; }
.portal-brand img { width: 34px; height: 34px; }
.portal-brand span { font-size: 1rem; line-height: 1.05; }
.portal-nav { display: flex; flex-direction: column; gap: 2px; }
.portal-nav-label { margin: 14px 10px 4px; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.portal-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem; background: none; border: none; cursor: pointer; width: 100%; text-align: left; transition: background .12s, color .12s; }
.portal-nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.portal-nav-item:hover { background: var(--paper); color: var(--red, #b63f2f); }
.portal-nav-item:hover svg { color: var(--red, #b63f2f); }
.portal-logout { margin-top: auto; color: var(--muted); }
.portal-logout:hover { color: var(--red, #b63f2f); }
.portal-content { padding: 28px clamp(16px, 3vw, 40px) 80px; }
.portal-page .portal-content .portal-dashboard { max-width: 1000px; margin: 0 auto; }
.portal-page .portal-loading { text-align: left; padding: 12px 0; }
.portal-zoom { padding: 11px 22px; font-size: 0.95rem; }

/* Lessons & payments */
.credits-pill { background: rgba(23,108,104,.12); color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 0.82rem; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.package-opt { position: relative; display: grid; gap: 3px; align-content: start; text-align: center; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px 12px; background: var(--paper, #fbfaf7); transition: border-color .12s, box-shadow .12s, transform .08s; }
.package-opt:hover { border-color: var(--red, #b63f2f); box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.package-opt.is-popular { border-color: var(--red, #b63f2f); box-shadow: 0 0 0 2px rgba(182,63,47,.14); }
.pkg-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--red, #b63f2f); color: #fff; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pkg-name { font-weight: 800; font-size: 0.9rem; }
.pkg-price { font-size: 1.4rem; font-weight: 900; color: var(--red, #b63f2f); }
.pkg-per { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.pkg-buy { margin-top: 8px; display: block; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 0; font-weight: 800; font-size: 0.85rem; }
.package-opt:hover .pkg-buy { background: var(--red, #b63f2f); }
.pkg-history-title { margin: 4px 0 10px; font-size: 1rem; }
.payment-history { display: grid; gap: 8px; }
.payment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--paper, #fbfaf7); }
.payment-row-main { display: grid; gap: 1px; }
.payment-row-main strong { font-size: 0.9rem; }
.payment-row-main span { color: var(--muted); font-size: 0.8rem; }
.payment-row-side { text-align: right; display: grid; gap: 1px; }
.payment-amount { font-weight: 900; }
.payment-status { color: #136b54; font-size: 0.78rem; font-weight: 800; }
.payment-empty { color: var(--muted); font-style: italic; }

@media (max-width: 900px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; border-right: none; border-bottom: 1px solid var(--line); padding: 12px 14px; }
  .portal-brand { padding: 0 12px 0 4px; }
  .portal-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .portal-nav-label { display: none; }
  .portal-nav-item { width: auto; padding: 8px 10px; }
  .portal-nav-item span { display: none; }
  .portal-logout { margin: 0 0 0 auto; }
  .portal-logout span { display: inline; }
}

/* === Embedded tool (portal right pane): show only the tool, no page chrome === */
.tools-embed .site-header,
.tools-embed .section-heading,
.tools-embed .tool-tabs,
.tools-embed .site-footer { display: none !important; }
.tools-embed .page-main { padding-top: 0; }
.tools-embed .tools-section { padding: 6px; min-height: 0; background: transparent; color: var(--ink); }
.tools-embed body, .tools-embed { background: var(--paper, #fbfaf7); color: var(--ink); }
.tools-embed .tool-surface { min-height: 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 14px rgba(0,0,0,.05); }
/* Keep the wide tools in their horizontal layout inside the pane (the page's
   1240px breakpoint would otherwise stack them); the board column flexes/scrolls. */
.tools-embed .scale-device-face { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.tools-embed .tab-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .chord-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .inversion-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .backing-face { grid-template-columns: minmax(220px, 0.88fr) minmax(0, 1fr); }
.tools-embed .backing-player,
.tools-embed .backing-settings { min-width: 0; }
.tools-embed .backing-face { grid-template-columns: minmax(260px, 560px) 640px; }
.tools-embed .backing-youtube-frame {
  width: 640px !important;
  height: 360px !important;
  min-width: 640px !important;
  max-width: 640px !important;
  min-height: 360px !important;
  max-height: 360px !important;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-device {
  width: min(100%, 1160px);
  min-height: 0;
  padding: 22px 18px 18px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-device-face {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-control-panel {
  min-width: 0;
  gap: 10px;
  padding: 14px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-control-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-control-panel select {
  min-height: 36px;
  font-size: 0.94rem;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-step-row,
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-progression-grid {
  gap: 8px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-step-button,
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-progression-grid .scale-chip {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .scale-mode-section {
  gap: 8px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-play-button,
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-cycle-button {
  min-height: 42px;
  border-radius: 14px;
  font-size: 0.9rem;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-screen {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(170px, 220px);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-wheel-card,
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-readout {
  border-width: 4px;
  border-radius: 22px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-wheel-card {
  display: grid;
  place-items: center;
  padding: 12px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-wheel-shell {
  width: min(100%, 500px);
  max-width: none;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-readout {
  gap: 12px;
  padding: 16px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-current span {
  font-size: clamp(1.6rem, 3vw, 2.65rem);
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-current strong {
  font-size: 1rem;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-facts {
  gap: 6px;
  font-size: 0.85rem;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-chords {
  grid-template-columns: 1fr;
  gap: 6px;
}
.tools-embed .tool-pane[data-tool-pane="fifths"] .fifths-chords span {
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 0.8rem;
}
.tools-embed .scale-board-controls { grid-template-columns: minmax(0, 1fr) auto; }
/* Let the fretboard SVGs scale down to the pane width instead of forcing the
   page's 760/820px floor (which clips/scrolls in a narrow embed like the portal
   right pane). The boards are SVGs with viewBoxes, so they shrink cleanly. */
.tools-embed .scale-svg-board { min-width: 0; width: 100%; }
.tools-embed .inversion-map .scale-svg-board { min-width: 0; width: 100%; }
.tools-embed .inversion-card-diagram svg { width: 100%; height: auto; }
/* Segovia is embedded inside the next/admin tools page at a fixed logical
   faceplate width. Keep the left practice rail compact so the circle of fifths
   never spills under the right screen column. */
.tools-embed .segovia-device {
  padding: 20px 12px 12px;
}
.tools-embed .segovia-device-face {
  grid-template-columns: minmax(268px, 304px) minmax(0, 1fr);
  gap: 12px;
}
.tools-embed .segovia-control-panel {
  gap: 6px;
  padding: 8px;
}
.tools-embed .segovia-practice-card {
  gap: 5px;
  padding: 8px;
}
.tools-embed .segovia-practice-card p {
  display: none;
}
.tools-embed .segovia-practice-mode {
  gap: 4px;
  padding: 3px;
}
.tools-embed .segovia-practice-mode button {
  min-height: 26px;
  font-size: 0.7rem;
}
.tools-embed .segovia-wheel-steps {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.tools-embed .segovia-wheel-dial {
  width: min(100%, 254px);
  max-width: 100%;
  border-radius: 12px;
}
.tools-embed .segovia-player {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 14px;
}
.tools-embed .segovia-play-button,
.tools-embed .segovia-repeat-button,
.tools-embed .segovia-bpm-label {
  grid-column: span 2;
}
.tools-embed .segovia-metronome-button.gps-metronome-btn {
  width: 100%;
  min-width: 0;
}
.tools-embed .segovia-practice-actions {
  grid-template-columns: 1fr;
  gap: 5px;
}
.tools-embed .segovia-practice-actions .scale-chip {
  min-height: 28px;
  padding: 5px 8px;
}
.tools-embed .segovia-screen {
  padding: 10px;
}
.tools-embed .segovia-board-stack .scale-svg-board {
  width: 100%;
  max-height: min(226px, 29vh);
}
/* Drop the chord-screen min-height so the tool packs into a shorter pane. */
.tools-embed .chord-screen { min-height: 0; }
/* On very narrow embeds (phones), stack the control panel above the screen. */
@media (max-width: 1180px) {
  .tools-embed .scale-device-face,
  .tools-embed .modes-device-face,
  .tools-embed .segovia-device-face,
  .tools-embed .tab-device-face,
  .tools-embed .chord-device-face,
  .tools-embed .inversion-device-face,
  .tools-embed .trainer-device-face { grid-template-columns: 1fr; }
  .tools-embed .tools-section { padding: 0; }
  .tools-embed .tool-surface { border-radius: 12px; padding: 8px; }
}

/* === Dark sidebar === */
.portal-sidebar { background: #211c19; border-right: 1px solid rgba(255,255,255,.08); }
.portal-brand { color: #fff; }
.portal-brand img { background: #fff; border-radius: 50%; padding: 2px; box-sizing: border-box; }

/* === Collapsible sidebar — hamburger as a tab on the menu's upper-right === */
.portal-menu-toggle { position: fixed; top: 12px; left: 256px; z-index: 30; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-left: none; border-radius: 0 9px 9px 0; background: #fff; cursor: pointer; box-shadow: 2px 2px 8px rgba(0,0,0,.18); }
.portal-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: background .12s; }
.portal-menu-toggle:hover { border-color: var(--red, #b63f2f); }
.portal-menu-toggle:hover span { background: var(--red, #b63f2f); }
.portal-shell.is-collapsed { grid-template-columns: 1fr; }
.portal-shell.is-collapsed .portal-sidebar { display: none; }
.portal-shell.is-collapsed .portal-menu-toggle { top: 12px; left: 0; border-radius: 0 9px 9px 0; }
.portal-shell.is-collapsed .portal-content { padding-left: 70px; }
@media (max-width: 900px) {
  .portal-menu-toggle, .portal-shell.is-collapsed .portal-menu-toggle { position: sticky; top: 12px; left: auto; transform: none; align-self: flex-start; }
  .portal-shell.is-collapsed .portal-content { padding-left: clamp(16px, 3vw, 40px); }
}
.portal-nav-label { color: rgba(255,255,255,.42); }
.portal-nav-item { color: rgba(255,255,255,.82); }
.portal-nav-item svg { color: rgba(255,255,255,.55); }
.portal-nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.portal-nav-item:hover svg { color: #fff; }
.portal-nav-item.is-active { background: var(--red, #b63f2f); color: #fff; }
.portal-nav-item.is-active svg { color: #fff; }
.portal-logout { color: rgba(255,255,255,.6); }
.portal-logout:hover { background: rgba(255,255,255,.09); color: #fff; }
@media (max-width: 900px) {
  .portal-sidebar { border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* === Right-pane views (payments page + tool iframe) === */
.portal-view { display: none; }
.portal-view.is-active { display: block; }
.portal-payments-view.is-active { max-width: 1000px; margin: 0 auto; }
.portal-recordings-view.is-active { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; }

/* === Practice recordings (audio + video, stored in IndexedDB) === */
.rec-recorder .portal-card-head { flex-wrap: wrap; gap: 12px; }
.rec-mode { display: inline-flex; gap: 4px; padding: 4px; background: #f1ece2; border-radius: 999px; }
.rec-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 800; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.rec-mode-btn svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-mode-btn:hover { color: var(--ink); }
.rec-mode-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.rec-stage { position: relative; min-height: 220px; border-radius: 14px; background: linear-gradient(180deg, #fbfaf7, #f3eee2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 14px 0 12px; padding: 18px; }
.rec-stage.is-hidden { display: none; }
.rec-preview { width: 100%; max-width: 720px; max-height: 420px; aspect-ratio: 16 / 9; background: #1a1a1a; border-radius: 10px; object-fit: cover; transform: scaleX(-1); /* mirror selfie camera */ }
.rec-preview.is-hidden { display: none; }
.rec-meter { display: block; width: 100%; max-width: 720px; height: 80px; }
.rec-meter.is-hidden { display: none; }
.rec-stage-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.9rem; text-align: center; max-width: 80%; }
.rec-stage[data-phase="recording"] .rec-stage-hint { display: none; }

.rec-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rec-go {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--red, #b63f2f); color: #fff; font: inherit; font-weight: 900; font-size: 1rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.rec-go:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.rec-go:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.rec-go-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.rec-go.is-recording { background: #1a1a1a; animation: rec-pulse 1.4s ease-in-out infinite; }
.rec-go.is-recording .rec-go-dot { background: var(--red, #b63f2f); animation: rec-blink 0.9s ease-in-out infinite; border-radius: 3px; width: 14px; height: 14px; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(214, 68, 53, 0.5); } 50% { box-shadow: 0 3px 0 rgba(0,0,0,.15), 0 0 0 14px rgba(214, 68, 53, 0); } }
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 1.4rem; color: var(--ink); min-width: 60px; }
.rec-status { font-size: 0.92rem; color: var(--muted); }
.rec-status[data-kind="error"] { color: var(--red, #b63f2f); font-weight: 700; }
.rec-status[data-kind="ok"] { color: #2f8c4a; font-weight: 700; }

/* Review state (after a clip is captured but before save) */
.rec-review { margin-top: 14px; padding: 18px; border-radius: 14px; background: #fbf6ec; border: 1px dashed var(--line); }
.rec-review.is-hidden { display: none; }
.rec-review-title { margin: 0 0 10px; font-size: 1.05rem; }
.rec-review-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 720px) { .rec-review-body { grid-template-columns: 1fr; } }
.rec-review-player { background: #1a1a1a; border-radius: 10px; overflow: hidden; min-height: 120px; }
.rec-review-media { width: 100%; height: auto; display: block; max-height: 360px; }
.rec-review-media[src$=".mp4"], .rec-review-player video { aspect-ratio: 16 / 9; object-fit: contain; }
.rec-review-meta { display: grid; gap: 12px; align-content: start; }
.rec-review-label { display: grid; gap: 4px; }
.rec-review-label > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rec-review-label input, .rec-review-label textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font: inherit; }
.rec-review-label textarea { min-height: 70px; resize: vertical; }
.rec-review-actions { display: flex; gap: 10px; align-items: center; }

/* GWJ-90: Tabs splitting the recordings list into recent ("New", ≤7 days)
   and archival ("Saved", older). Search bar shows only on the Saved tab. */
.rec-tabs {
  display: flex; gap: 4px; margin: 10px 0 0;
  border-bottom: 1px solid var(--line);
}
.rec-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px 10px; margin-bottom: -1px;
  font-weight: 800; font-size: 0.94rem; color: var(--muted);
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.rec-tab:hover { color: var(--ink); }
.rec-tab.is-active { color: var(--red, #b63f2f); border-bottom-color: var(--red, #b63f2f); }
.rec-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: rgba(0,0,0,0.07); color: var(--ink);
  font-size: 0.75rem; font-weight: 900;
}
.rec-tab.is-active .rec-tab-count { background: var(--red, #b63f2f); color: #fff; }
.rec-tab-search { margin: 12px 0 4px; }
.rec-tab-search[hidden] { display: none; }
.rec-search-input {
  width: 100%; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600;
}
.rec-search-input::placeholder { color: var(--muted); }
.rec-search-input:focus { outline: 2px solid var(--red, #b63f2f); outline-offset: 1px; border-color: var(--red, #b63f2f); }
.rec-tab-blurb { margin: 8px 0 12px; }

/* Saved list */
.rec-list { display: grid; gap: 12px; margin-top: 6px; }
.rec-card {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px;
  padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
.rec-card.is-open { border-color: rgba(214, 68, 53, 0.45); box-shadow: 0 4px 16px rgba(214,68,53,0.08); }
.rec-card-icon { width: 54px; height: 54px; border-radius: 12px; border: 0; background: #faf3e6; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--red, #b63f2f); }
.rec-card-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-card-icon:hover { background: #f2e6cb; }
.rec-card[data-kind="video"] .rec-card-icon { background: #eef3fb; color: #1f5db4; }
.rec-card-body { min-width: 0; display: grid; gap: 8px; }
.rec-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rec-card-title { flex: 1 1 280px; min-width: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-weight: 800; font-size: 1rem; color: var(--ink); }
.rec-card-title:hover { border-color: var(--line); }
.rec-card-title:focus { background: #fff; border-color: var(--red, #b63f2f); outline: 0; }
.rec-card-meta { font-size: 0.85rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.rec-card-notes { margin: 0; color: var(--muted); font-size: 0.92rem; }
.rec-card-player { display: none; }
.rec-card.is-open .rec-card-player { display: block; }
.rec-card-media { width: 100%; max-height: 360px; display: block; border-radius: 8px; background: #1a1a1a; }
.rec-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-card-actions .button.tiny { font-size: 0.8rem; padding: 5px 10px; }
.rec-card-status { font-size: 0.85rem; color: var(--muted); }
.rec-card-status[data-kind="ok"] { color: #2f8c4a; font-weight: 700; }
.rec-card-status[data-kind="error"] { color: var(--red, #b63f2f); font-weight: 700; }
.rec-card-shared { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #e7f4ec; color: #2f8c4a; font-weight: 800; font-size: 0.78rem; }
.rec-card.is-shared { border-color: #b7dec6; }

/* === Admin: practice clips inbox on a student page === */
.admin-clips-section { margin-top: 18px; }
.admin-clips-section h2 { font-size: 1.05rem; }
.admin-clips-list { display: grid; gap: 12px; margin-top: 8px; }
.admin-clip-card { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.admin-clip-card.is-open { border-color: rgba(214, 68, 53, 0.45); box-shadow: 0 4px 16px rgba(214,68,53,0.08); }
.admin-clip-icon { width: 54px; height: 54px; border-radius: 12px; border: 0; background: #faf3e6; color: var(--red, #b63f2f); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.admin-clip-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-clip-card[data-kind="video"] .admin-clip-icon { background: #eef3fb; color: #1f5db4; }
.admin-clip-body { min-width: 0; display: grid; gap: 6px; }
.admin-clip-title { margin: 0; font-weight: 800; font-size: 1rem; color: var(--ink); }
.admin-clip-meta { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.admin-clip-notes { margin: 0; color: var(--muted); font-size: 0.92rem; }
.admin-clip-player { display: none; margin-top: 4px; }
.admin-clip-card.is-open .admin-clip-player { display: block; }
.admin-clip-media { width: 100%; max-height: 360px; display: block; border-radius: 8px; background: #1a1a1a; }
.admin-clip-actions { display: flex; gap: 8px; align-items: center; }
.admin-clip-card.is-unread { border-color: rgba(214, 68, 53, 0.45); background: linear-gradient(180deg, #fff, #fff7ef); }
.admin-clip-card.is-unread .admin-clip-title::after {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  background: var(--red, #b63f2f); border-radius: 50%; vertical-align: middle;
}

/* === Unread practice clip notifications === */
/* Sidebar pill next to Students */
.portal-nav-item .nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.72rem; line-height: 1;
}
.portal-nav-item .nav-badge[hidden] { display: none; }
/* Roster dot — small red marker by a student's name when unread clips exist */
.roster-row .roster-clip-dot {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.7rem; line-height: 1;
}
/* Today page "new clips" card */
.home-clips-card { border-left: 4px solid var(--red, #b63f2f); }
.home-clips-card .tool-header h2 { display: flex; align-items: baseline; gap: 8px; }
.home-clips-card .clips-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.78rem; line-height: 1;
}
.home-clips-list { display: grid; gap: 10px; margin-top: 4px; }
.home-clip-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.home-clip-icon { width: 36px; height: 36px; border-radius: 8px; background: #faf3e6; color: var(--red, #b63f2f); display: flex; align-items: center; justify-content: center; }
.home-clip-row[data-kind="video"] .home-clip-icon { background: #eef3fb; color: #1f5db4; }
.home-clip-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-clip-meta { min-width: 0; display: grid; gap: 2px; }
.home-clip-title { margin: 0; font-weight: 800; font-size: 0.95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-clip-sub { margin: 0; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.home-clip-actions { display: flex; gap: 6px; }
.home-clip-actions .button.tiny { font-size: 0.78rem; padding: 4px 9px; }
.home-clips-empty { color: var(--muted); margin: 0; }
.home-clip-player { grid-column: 1 / -1; margin-top: 8px; }
.home-clip-player video, .home-clip-player audio { width: 100%; max-height: 280px; border-radius: 8px; background: #1a1a1a; display: block; }
/* GWJ-87: Admin-viewing-portal banner. Sticky strip across the very top of
   the page that warns Jimmy he's inside a student's portal and offers a
   one-click "Back to admin" out. Inserted as document.body's first child by
   portal-shell.js, so it sits above the portal sidebar + main content
   without needing any HTML markup changes.
   v3: cream-on-dark-ink for readability, slimmer row, white-on-red button. */
.admin-portal-banner {
  position: sticky; top: 0; z-index: 1000;
  background: #faf3e6;
  color: #1d1712;
  border-bottom: 1px solid #e6dcc8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.admin-portal-banner .apb-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  max-width: 1320px; margin: 0 auto; padding: 4px 18px;
  font-size: 0.86rem; font-weight: 700; line-height: 1.2;
}
.admin-portal-banner .apb-eye { font-size: 0.95rem; line-height: 1; color: var(--red, #b63f2f); }
.admin-portal-banner .apb-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-portal-banner .apb-name { font-weight: 900; color: var(--red, #b63f2f); }
.admin-portal-banner .apb-back {
  flex: none;
  background: var(--red, #b63f2f); color: #fff !important; border: none;
  text-decoration: none; padding: 3px 11px; font-weight: 800; font-size: 0.82rem;
  border-radius: 6px; line-height: 1.4;
}
.admin-portal-banner .apb-back:hover { background: #d4513f; color: #fff !important; }
@media (max-width: 560px) {
  .admin-portal-banner .apb-inner { font-size: 0.78rem; padding: 3px 12px; gap: 8px; }
}

.portal-toolview { display: none; }
.portal-toolview.is-active { display: flex; flex-direction: column; min-height: calc(100vh - 56px); }
.toolview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; }
.toolview-bar strong { font-size: 1.2rem; }
.toolview-bar a { font-weight: 700; color: var(--red, #b63f2f); text-decoration: none; font-size: 0.9rem; }
.portal-toolview iframe { flex: 1 1 auto; width: 100%; min-height: 78vh; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.portal-mobile-tools { display: none; }
.portal-mobile-tools label {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.portal-mobile-tools span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portal-mobile-tools select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper, #fbfaf7);
  color: var(--ink);
  padding: 0 34px 0 10px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 850;
}

@media (max-width: 900px) {
  .portal-mobile-tools {
    position: sticky;
    top: 0;
    z-index: 24;
    display: block;
    margin: 0 0 12px;
  }
}

/* === Practice-this-week tracker === */
.practice-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.practice-count { background: rgba(23,108,104,.12); color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 0.82rem; }
.practice-toggle { border: 1px solid var(--line); background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.practice-toggle:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.practice-body.is-hidden { display: none; }
.practice-cal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 10px; }
.practice-cal-nav button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper, #fbfaf7); cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink); }
.practice-cal-nav button:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.practice-cal-nav strong { min-width: 170px; text-align: center; font-size: 1rem; }
/* GWJ-46: in the Practice calendar, sit the < Month > nav directly above the
   254px grid (7*32 + 6*5) with prev/next at its edges, rather than centered in
   the wider page column. (The lessons mini-calendar nav keeps its own sizing.) */
.practice-cal-wrap .practice-cal-nav { justify-content: space-between; gap: 8px; width: 254px; max-width: 100%; }
.practice-cal-wrap .practice-cal-nav strong { flex: 1; min-width: 0; font-size: 0.98rem; }
.practice-cal-dow { display: grid; grid-template-columns: repeat(7, 32px); gap: 5px; margin-bottom: 4px; }
.practice-cal-dow span { text-align: center; font-size: 0.6rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.practice-cal { display: grid; grid-template-columns: repeat(7, 32px); gap: 5px; }
.cal-cell { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: all .12s; }
.cal-cell.cal-empty { border: none; background: none; cursor: default; }
.cal-cell:not(.cal-empty):hover { border-color: #2f9e44; }
.cal-cell.is-today { border-color: var(--ink); font-weight: 900; }
.cal-cell.is-done { background: #2f9e44; border-color: #2f9e44; color: #fff; }

@media (max-width: 1240px) {
  .menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 50%; background: white; }
  .menu-toggle span { width: 18px; height: 2px; display: block; background: var(--ink); }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; grid-template-columns: 1fr; gap: 0; padding: 14px 22px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-nav.open { display: grid; }
  .nav-cta { width: max-content; margin-top: 8px; }
  section, main { scroll-margin-top: 74px; }
  html { scroll-padding-top: 74px; }
  .tools-page { padding-top: 34px; }
  .hero { min-height: min(700px, 84vh); align-items: center; padding: 116px 22px 82px; }
  .hero-bg { object-position: 62% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(12,10,8,0.9) 0%, rgba(12,10,8,0.66) 48%, rgba(12,10,8,0.14) 100%), linear-gradient(90deg, rgba(12,10,8,0.38), rgba(12,10,8,0)); }
  .quick-strip, .lesson-grid, .reviews-grid, .about-section, .contact-band, .tools-layout, .chord-card, .tuner-layout, .scale-controls, .scale-fingering-row, .portal-layout, .portal-teaser, .auth-layout, .portal-dashboard { grid-template-columns: 1fr; }
  .scale-device-face { grid-template-columns: 1fr; }
  .tab-device-face { grid-template-columns: 1fr; }
  .chord-device-face { grid-template-columns: 1fr; }
  .inversion-device-face { grid-template-columns: 1fr; }
  .trainer-device-face { grid-template-columns: 1fr; }
  .scale-fingering-label { padding-top: 0; }
  .scale-board-controls { grid-template-columns: 1fr; }
  .scale-board-controls .scale-mode-toggle { justify-self: end; }
  .about-portrait-section .about-copy { grid-column: auto; }
  .tool-tabs { grid-template-columns: repeat(2, 1fr); }
  .portal-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 860px) and (max-width: 1240px) {
  .chord-device {
    padding: 28px 18px 18px;
  }
  .chord-device-face {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .brand span { max-width: 136px; line-height: 1.05; }
  h1 { font-size: clamp(3.1rem, 17vw, 4.7rem); }
  .site-header { padding-block: 10px; }
  .hero { min-height: auto; padding: 108px 18px 78px; }
  .section { padding-block: 58px; }
  .tools-page { padding-top: 30px; }
  .tool-tabs, .planner-controls, .chord-controls, .scale-controls, .control-row { grid-template-columns: 1fr; }
  .metronome-stage { grid-template-columns: 1fr; }
  .metronome-device { min-height: 560px; padding-inline: 16px; }
  .metronome-face { grid-template-columns: 1fr; }
  .lcd-screen { max-width: none; min-height: 168px; }
  .scale-device { min-height: auto; padding: 34px 16px 18px; }
  .scale-screen { padding: 14px; }
  .scale-device .scale-mode-toggle { width: 100%; }
  .scale-device .scale-mode-button { flex: 1 1 auto; }
  .chord-device { min-height: auto; padding: 34px 16px 18px; }
  .chord-screen { min-height: 320px; padding: 14px; }
  .chord-control-panel .chord-controls label { grid-template-columns: 1fr; gap: 5px; }
  .inversion-device { min-height: auto; padding: 34px 16px 18px; }
  .inversion-screen { padding: 14px; }
  .inversion-card-grid { grid-template-columns: 1fr; }
  .inversion-control-row { grid-template-columns: 1fr; }
  .tab-device { min-height: auto; padding: 34px 16px 18px; }
  .tab-screen { padding: 14px; }
  .tab-tempo-row { align-items: stretch; flex-direction: column; }
  .tab-tempo-presets { display: grid; grid-template-columns: repeat(3, 1fr); }
  .trainer-device { min-height: auto; padding: 34px 16px 18px; }
  .trainer-screen { min-height: 320px; padding: 14px; }
  /* 3 columns means the 12-note find-all picker needs 4 rows, not 2. */
  .trainer-control-panel .note-choices { grid-template-columns: repeat(3, 1fr); --trainer-choice-rows: 4; }
  .metronome-control-row { grid-template-columns: 1fr; gap: 6px; }
  .metronome-actions { grid-template-columns: 1fr; }
  .tuner-device {
    min-height: 540px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "screen"
      "led"
      "controls"
      "speaker";
    padding-inline: 16px;
  }
  .tuner-screen { min-height: 168px; }
  .tuner-select { grid-template-columns: 1fr; gap: 6px; }
  .string-buttons { grid-template-columns: repeat(3, 1fr); }
  .tuner-device-actions { grid-template-columns: 1fr; }
  .tempo-stepper { grid-template-columns: repeat(2, 1fr); }
  .tempo-button { width: 100%; border-radius: var(--radius); }
  .tempo-presets { grid-template-columns: repeat(3, 1fr); }
  .trainer-mode { width: 100%; grid-template-columns: 1fr; border-radius: var(--radius); }
  .trainer-mode button { border-radius: calc(var(--radius) - 2px); }
  .fretboard-marker { width: 20px; height: 20px; border-width: 2px; }
  .triad-marker { width: 19px; height: 19px; border-width: 2px; }
  .scale-svg-board { min-width: 0; }
  .triad-notes { grid-template-columns: 1fr; }
  .finder-marker { width: 19px; height: 19px; border-width: 2px; }
  .finder-summary, .finder-result { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .note-choices { grid-template-columns: repeat(3, 1fr); }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Site-wide dark theme — matches the tools page background.
   The page background is dark with light text directly on it,
   while light "cards/panels" keep their dark text for contrast.
   The sticky header stays light, exactly like the tools page.
   ============================================================ */
body { background: #11100f; color: #f3efe9; }

/* Header stays light, so force its text dark (it would otherwise
   inherit the new light body color and vanish). */
.site-header { color: var(--ink); }

/* Light section bands blend into the dark background */
.page-hero { background: transparent; }
.reviews-section { background: transparent; }
.portal-section { background: transparent; }
.portal-teaser { background: transparent; }
.portal-app { background: transparent; }
.auth-page { background: transparent; }

/* Secondary text that sits directly on the dark background */
.page-hero p:not(.eyebrow),
.about-copy,
.auth-copy p { color: rgba(243, 239, 233, 0.74); }

/* Light cards/panels keep dark text for readability on white */
.lesson-panel,
.reviews-grid figure,
.reviews-masonry figure,
.tag-list span,
.teaser-panel,
.auth-card,
.login-card,
.student-card,
.lesson-module,
.portal-sidebar,
.portal-main,
.teacher-panel { color: var(--ink); }

/* Light (quiet) button keeps dark text on its white face */
.button.quiet { color: var(--ink); }

/* Stat strip → dark band with light text */
.quick-strip { background: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); }
.quick-strip div { background: #1b1916; }
.quick-strip strong { color: #f3efe9; }
.quick-strip span { color: rgba(243, 239, 233, 0.66); }

/* ============================================================
   Studio admin page
   ============================================================ */
.admin-page { padding: clamp(12px, 1.6vw, 18px) clamp(18px, 4vw, 52px) clamp(48px, 8vw, 80px); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.admin-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; }

/* Compact replacement for .admin-head — page identity comes from the
   sidebar, so the per-page banner is gone. .admin-page-actions pins a
   primary button to the top-right of the content area. .admin-page-date
   carries Today's date subhead. Both stay tight so content sits high. */
.admin-page-actions { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 10px; }
.admin-page-date { margin: 0 0 12px; }
/* When the lone action button is immediately followed by the tab row, lift the
   tabs up onto the same band instead of wasting a full line on the button.
   The button is right-aligned and the tabs left-aligned, so they share the row
   without colliding. Adjacency selector means this only fires where the pattern
   actually exists (payments, schedule). Disabled on narrow screens where the
   sticky menu toggle and wrapping make the overlap unsafe. */
@media (min-width: 760px) {
  .admin-page-actions + .admin-tabs { margin-top: -46px; }
}
.admin-demo-tag { align-self: flex-start; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }

.admin-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: start; }

.admin-roster { position: sticky; top: 86px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 16px; display: grid; gap: 12px; }
.admin-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-roster-head h2 { font-size: 1.1rem; }
.admin-add-btn { min-height: 38px; padding: 0 12px; font-size: 0.86rem; }
.roster-list { display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.roster-item { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; cursor: pointer; }
.roster-item:hover { border-color: var(--ink); }
.roster-item.active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.roster-name { font-weight: 900; }
.roster-sub { color: var(--muted); font-size: 0.84rem; }
.roster-meta { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.roster-item.is-inactive { opacity: 0.6; }
.roster-tag { font-style: normal; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.roster-inactive-row { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.roster-inactive-row input { width: 15px; height: 15px; }

/* Students Sort & Filter dropdown menu (GWJ-55/56). */
.roster-sortfilter { position: relative; flex: 0 0 auto; }
.roster-sortfilter-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.roster-sortfilter-caret { font-size: 0.7rem; color: var(--muted); }
.roster-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 280px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; }
.roster-menu.is-hidden { display: none; }
.roster-menu-label { margin: 8px 10px 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.roster-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 0.98rem; color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.roster-menu-item:hover { background: #f5f1ea; }
.roster-menu-item.is-sort.is-selected { background: rgba(182,64,48,0.12); color: var(--red-dark, #8f2f23); font-weight: 700; }
.roster-menu-check { color: var(--red); font-weight: 800; opacity: 0; }
.roster-menu-item.is-sort.is-selected .roster-menu-check { opacity: 1; }
.roster-menu-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.roster-menu-box { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; position: relative; }
.roster-menu-item.is-checked .roster-menu-box { background: var(--red); border-color: var(--red); }
.roster-menu-item.is-checked .roster-menu-box::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 0.8rem; font-weight: 800; }
/* ---- Shared schedule/reschedule picker ---- */
.gsp-modal { position: fixed; inset: 0; background: rgba(20,17,15,.55); display: grid; place-items: center; z-index: 90; padding: 16px; }
.gsp-modal.is-hidden { display: none; }
.gsp-card { background: #fff; color: var(--ink); border-radius: 14px; width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.gsp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.gsp-head h3 { margin: 0; font-size: 1.05rem; }
.gsp-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); }
.gsp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px; overflow: auto; }
@media (max-width: 520px) { .gsp-body { grid-template-columns: 1fr; } }
.gsp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 800; }
.gsp-cal-nav button { border: 0; background: none; font-size: 1.2rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.gsp-cal-nav button:hover { background: #f0ece3; }
.gsp-dow, .gsp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gsp-dow span { text-align: center; font-size: 0.68rem; font-weight: 800; color: var(--muted); }
.gsp-day { border: 0; background: none; font: inherit; font-weight: 700; padding: 7px 0; border-radius: 8px; cursor: pointer; position: relative; }
.gsp-day.gsp-empty { visibility: hidden; }
.gsp-day[data-gsp-day]:hover { background: #f0ece3; }
.gsp-day.gsp-today { box-shadow: inset 0 0 0 2px var(--ink); }
.gsp-day.gsp-sel { background: var(--red); color: #fff; }
.gsp-day.gsp-unavail { color: #c9bfb2; cursor: not-allowed; }
.gsp-day.gsp-unavail::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 2px solid rgba(182,64,48,0.55); transform: rotate(-45deg); transform-origin: center; }
.gsp-times-date { font-weight: 800; margin: 0 0 8px; }
.gsp-time-list { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.gsp-time { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 11px; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.gsp-time.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.gsp-hint { color: var(--muted); font-size: 0.88rem; }
.gsp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
/* Calendar "Add a lesson" modal: wider card + inline date/time picker.
   Cap the height and let the body scroll, with the action buttons pinned in a
   sticky footer so Save/Cancel are always visible. */
.ca-modal-card { max-width: 600px; width: min(600px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.ca-modal-card .admin-form { overflow-y: auto; flex: 1 1 auto; min-height: 0; gap: 10px; }
.ca-modal-card .admin-form-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; margin-top: 2px; border-top: 1px solid var(--line); }
.ca-pick-label { font-weight: 800; font-size: 0.84rem; color: var(--muted); }
.ca-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ca-pick .gsp-times { max-height: 260px; overflow-y: auto; }
.ca-modal-card .sched-add-row { grid-template-columns: 1fr 1fr; }
.ca-modal-card .admin-form select { width: 100%; }
@media (max-width: 520px) { .ca-pick { grid-template-columns: 1fr; } }
/* Trigger button that opens the shared date+time picker — styled to read like a form field. */
.sched-datepick-field { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 9px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sched-datepick-field:hover { border-color: var(--ink); }
/* Account/settings form feedback message */
.portal-account-form { max-width: 420px; }
.form-msg { margin: 4px 0 0; font-weight: 700; font-size: 0.88rem; }
.form-msg.is-hidden { display: none; }
.form-msg.is-error { color: var(--red); }
.form-msg.is-ok { color: #2e7d32; }
.zh-table { margin: 4px 0 18px; }
.zh-table td { vertical-align: top; }
.zh-attach { display: flex; flex-direction: column; gap: 2px; }
.zh-attach a { font-size: 0.84rem; word-break: break-all; }
.pay-apply-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.pay-apply-row input { width: auto; }
/* Checkbox + label inline. Higher specificity than ".admin-form label{display:grid}"
   which otherwise stacks the box above the text. */
.admin-form label.sched-noend-field,
.sched-noend-field { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.sched-noend-field input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.admin-form label.sched-noend-field span { font-weight: 700; font-size: 0.9rem; color: var(--ink); text-transform: none; }
/* Free-first-lesson checkbox in the create-student modal — inline box + text. */
.admin-form label.add-free-lesson { display: flex; align-items: flex-start; gap: 8px; }
.admin-form label.add-free-lesson input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
.admin-form label.add-free-lesson span { font-weight: 700; font-size: 0.85rem; color: var(--muted); text-transform: none; }
.pay-owed { color: var(--red); font-weight: 800; }
.pay-applied { display: block; font-size: 0.84rem; }
.tool-badge.is-owed { background: var(--red); color: #fff; }

/* ---- Admin students: search-first page + tabbed student view ---- */
.admin-search-view .students-search { display: grid; gap: 14px; }
.students-search-row { display: flex; gap: 10px; align-items: center; }
.students-search-row .roster-search { flex: 1; margin: 0; }
.students-search-row .button { flex: 0 0 auto; }
.admin-search-view .roster-list { display: grid; gap: 8px; max-height: none; overflow: visible; }
.admin-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
}
.admin-back-btn:hover { border-color: var(--ink); }
.admin-back-btn span { font-size: 1.2em; line-height: 1; }
.admin-student-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-student-head h2 { font-size: 1.7rem; }
.admin-student-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-weight: 800; font-size: 0.95rem;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { color: var(--red-dark); border-bottom-color: var(--red); }
.admin-tab-panel { display: none; }
.admin-tab-panel.is-active { display: grid; gap: clamp(14px, 2vw, 20px); }
/* Contextual action button on the tab row (GWJ-51/52). */
.admin-tabs-spacer { margin-left: auto; }
.admin-tab-action { align-self: center; margin: 0 0 6px; padding: 7px 14px; font-size: 0.85rem; }
.admin-tab-action[hidden] { display: none; }
.admin-lessons-card { padding: 14px; }
.admin-lessons-card .tool-header { align-items: flex-start; }
.admin-lessons-card .tool-header .muted-line { margin: 3px 0 0; }
.admin-lessons-frame-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.admin-lessons-frame { display: block; width: 100%; min-height: 78vh; border: 0; background: var(--paper); }
.sched-add { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sched-add-label { margin: 0 0 10px; font-weight: 900; }
.sched-add-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.sched-row-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .sched-add-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .sched-add-row { grid-template-columns: 1fr; } }

.admin-detail { display: grid; gap: clamp(14px, 2vw, 20px); }
.admin-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: clamp(16px, 2.2vw, 24px); }
.admin-card h2 { font-size: 1.5rem; }
.admin-card h3 { font-size: 1.12rem; }
.muted-line { color: var(--muted); margin: 6px 0 0; line-height: 1.5; font-size: 0.92rem; }
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-actions .button { min-height: 36px; padding: 0 14px; font-size: 0.85rem; }

/* ============================================================
   Guitar GPS lesson reader (book pages converted to web)
   ============================================================ */
.lesson-reader { max-width: 920px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 40px) clamp(60px, 9vw, 96px); }
.lesson-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Let the eyebrow+title column grow to fill the row up to the Students-only
   badge. Without this the column shrinks to its content's preferred width
   and h1 wraps early (e.g. "12 Bar Blues -" / "Part One") even on wide
   screens. min-width:0 lets the h1 wrap normally when truly out of space. */
.lesson-bar > div:first-child { flex: 1 1 0; min-width: min(100%, 28rem); max-width: 100%; }
.lesson-bar h1 { max-width: none; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.12; margin-top: 4px; white-space: normal; overflow-wrap: break-word; hyphens: none; }
.lesson-lock { flex: none; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 7px 13px; font-size: 0.78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.lesson-intro { color: rgba(243,239,233,0.78); font-size: 1.08rem; line-height: 1.6; max-width: 64ch; margin: 14px 0 0; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.lesson-sheets { display: grid; gap: 20px; margin-top: 22px; }
.lesson-sheet { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.lesson-sheet img { display: block; width: 100%; height: auto; }
.lesson-video { background: #000; }
.lesson-sheet.lesson-video video, .lesson-video video { display: block; width: 100%; height: auto; max-height: 70vh; background: #000; }
.lesson-nav { display: flex; align-items: stretch; gap: 12px; margin-top: 30px; }
.lesson-nav-link { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 14px 16px; color: var(--paper); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.lesson-nav-link[hidden] { display: none; }
.lesson-nav-index { text-align: center; }
.lesson-nav-link.next { text-align: right; }
.lesson-nav-link span { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.lesson-nav-link strong { font-size: 1.05rem; }
.lesson-nav-link:hover { border-color: var(--red); }
@media (max-width: 480px) { .lesson-nav { gap: 8px; } .lesson-nav-link { padding: 11px 10px; } .lesson-nav-link strong { font-size: 0.92rem; } }

/* Lesson prose + embedded interactive tab players */
.lesson-body { margin-top: 18px; }
/* David, 2026-08-21: "the text margin doesn't go all the way to the end of the
   right side of the page."

   The prose carried a 70ch cap INSIDE .lesson-reader, which is already capped at
   920px. Two caps meant the paragraphs stopped ~200px short of the column while the
   tab and notation widgets ran to its full width, so every lesson had a ragged right
   edge wherever prose sat next to a widget. The reader column is the measure; the
   second cap only fought it. */
.lesson-body p { color: rgba(243,239,233,0.82); font-size: 1.06rem; line-height: 1.65; margin: 0 0 16px; }
.lesson-body em { color: var(--paper); font-style: italic; }
.lesson-body strong { color: var(--paper); }
.lesson-body h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 30px 0 10px; }
.lesson-body h3 { margin: 28px 0 10px; }
.lesson-body .photo-figure,
.lesson-body .parts-figure {
  margin: 18px 0 8px;
}
/* GWJ-76: the source image is portrait (1676×2133), so any width-based
   constraint forces vertical scrolling on a typical laptop viewport.
   Constrain by viewport HEIGHT instead so it fits on screen without
   scrolling, and let the aspect ratio pick the width. Allow more height
   on tall screens; ease back on phones where every vh counts. */
.lesson-body .parts-figure {
  display: flex; justify-content: center;
  width: 100%;
  margin: 22px 0 8px;
}
.lesson-body .parts-figure img {
  /* These !important overrides defeat the earlier `.lesson-body .photo-figure img,
     .lesson-body .parts-figure img { width: 100% }` rule a few lines below. */
  width: auto !important;
  max-width: 100%;
  /* GWJ-229: the floor matters more than the ceiling. Inside an iframe `100vh` is the
     IFRAME's height, not the window's, and the Lesson Index shows this lesson in a pane
     that is a fraction of the screen. Measured at width 1100: a 400px pane rendered the
     diagram at 95x120 (labels unreadable) and a 280px pane at 0 — the expression hits
     exactly zero there, so the image vanished and read as "the picture is missing".
     max() keeps GWJ-76's intent — on a real lesson page 100vh-280px is 520-720px, far
     above the floor, so nothing changes where that fix was aimed — while guaranteeing a
     readable diagram in a short pane. A picture you have to scroll to see beats one you
     cannot see at all. */
  max-height: max(360px, calc(100vh - 280px));
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  /* Phones: the same floor, a little lower, since every vh counts on a small screen. */
  .lesson-body .parts-figure img { max-height: max(280px, calc(100vh - 200px)); }
}
.lesson-body .photo-figure img,
.lesson-body .parts-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
}
.lesson-body .photo-figure.narrow img {
  max-width: 420px;
  margin: 0 auto;
}
.lesson-body .fretboard-figure {
  max-width: 300px;
}
.lesson-body .fw-photo {
  float: right;
  width: min(320px, 44%);
  margin: 4px 0 18px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
}
.lesson-body .fw-photo img,
.lesson-body .fw-sign img {
  display: block;
  width: 100%;
  height: auto;
}
.lesson-body .fw-photo figcaption {
  padding: 7px 10px;
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.lesson-body .fw-sign {
  clear: both;
  margin: 30px 0 0;
}
.lesson-body .fw-sign img {
  width: min(330px, 72%);
}
.lesson-body .fw-byline {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lesson-body .pick-step {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 22px 0;
}
.lesson-body .pick-step img {
  flex: none;
  width: min(280px, 44%);
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.lesson-body .pick-step .step-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.lesson-body .pick-step .step-body p {
  flex: 1;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.22rem, 2.7vw, 1.7rem);
  line-height: 1.45;
}
.lesson-body .pick-step .step-num {
  flex: none;
  display: inline-grid;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}
@media (max-width: 560px) {
  .lesson-body .fw-photo {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
  .lesson-body .pick-step {
    flex-direction: column;
    align-items: flex-start;
  }
  .lesson-body .pick-step img {
    width: 100%;
  }
}
.gps-player {
  position: relative;
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
.lesson-body .gps-fretboard {
  width: min(100%, 760px);
  margin: 14px 0 26px;
}
.lesson-body .gps-fretboard .scale-board-scroll {
  overflow: hidden;
}
.lesson-body .gps-fretboard .scale-svg-board {
  width: 100%;
  min-width: 0;
  height: auto;
}
.lesson-body .gps-player[data-gps-size="xxsmall"],
.lesson-body .gps-fretboard[data-gps-size="xxsmall"],
.lesson-body .gps-chord-song[data-gps-size="xxsmall"],
.lesson-body .gps-dexterity[data-gps-size="xxsmall"],
.lesson-body .lesson-video[data-gps-size="xxsmall"],
.lesson-body .gps-inversions[data-gps-size="xxsmall"] {
  width: min(100%, 300px);
}
.lesson-body .gps-player[data-gps-size="xsmall"],
.lesson-body .gps-fretboard[data-gps-size="xsmall"],
.lesson-body .gps-chord-song[data-gps-size="xsmall"],
.lesson-body .gps-dexterity[data-gps-size="xsmall"],
.lesson-body .lesson-video[data-gps-size="xsmall"],
.lesson-body .gps-inversions[data-gps-size="xsmall"] {
  width: min(100%, 450px);
}
.lesson-body .gps-player[data-gps-size="small"],
.lesson-body .gps-fretboard[data-gps-size="small"],
.lesson-body .gps-chord-song[data-gps-size="small"],
.lesson-body .gps-dexterity[data-gps-size="small"],
.lesson-body .lesson-video[data-gps-size="small"],
.lesson-body .gps-inversions[data-gps-size="small"] {
  width: min(100%, 620px);
}
.lesson-body .gps-player[data-gps-size="medium"],
.lesson-body .gps-fretboard[data-gps-size="medium"],
.lesson-body .gps-chord-song[data-gps-size="medium"],
.lesson-body .gps-dexterity[data-gps-size="medium"],
.lesson-body .lesson-video[data-gps-size="medium"],
.lesson-body .gps-inversions[data-gps-size="medium"] {
  width: min(100%, 760px);
}
.lesson-body .gps-player[data-gps-size="large"],
.lesson-body .gps-fretboard[data-gps-size="large"],
.lesson-body .gps-chord-song[data-gps-size="large"],
.lesson-body .gps-dexterity[data-gps-size="large"],
.lesson-body .lesson-video[data-gps-size="large"],
.lesson-body .gps-inversions[data-gps-size="large"] {
  width: min(100%, 1040px);
}
.lesson-body [data-gps-align="left"] {
  margin-left: 0;
  margin-right: auto;
}
.lesson-body [data-gps-align="center"] {
  margin-left: auto;
  margin-right: auto;
}
.lesson-body [data-gps-align="right"] {
  margin-left: auto;
  margin-right: 0;
}
.gps-player:focus-visible {
  outline: 3px solid rgba(209,68,53,0.72);
  outline-offset: 4px;
}
.gps-exercise-label {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin: 2px 2px 6px;
}

/* Guitar GPS contents index */
.gps-toc-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 64ch; margin: 6px 0 clamp(20px, 3vw, 32px); }
.gps-toc-section { margin-bottom: clamp(24px, 4vw, 40px); }
.gps-toc-section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.gps-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.gps-toc-list a { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 12px 14px; font-weight: 700; }
.gps-toc-list a:hover { border-color: var(--red); }
.gps-toc-num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; font-weight: 900; }
.gps-toc-live { margin-left: auto; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 2px 8px; }
.gps-source-pages {
  display: grid;
  gap: 18px;
  margin: 18px 0 26px;
}
.gps-source-pages figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gps-source-pages img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.gps-player .tab-staff-wrap {
  padding: 14px 0 0;
  overflow-x: auto;
}
.gps-counted .tab-staff-wrap svg {
  display: block;
}
.gps-custom-counts .tab-staff-wrap svg {
  width: 100%;
  height: auto;
}
.gps-counted .tab-staff-wrap svg:not(:first-child):not(:last-child) {
  margin-bottom: 58px;
}
/* Chord diagrams in lessons (rendered by gps-chords.js).
   `column-reverse` puts the chord name ABOVE the SVG so this matches the
   gps-player overlay (which also labels its diagrams on top). The JS appends
   the name after the SVG; the reverse keeps that DOM order while flipping
   the visual stacking.
   The SVG already has built-in top padding for the X / O markers above the
   nut, so we don't need flex gap on top of that — `gap: 0` and a small
   negative margin under the name keeps the label snug against the diagram. */
.chord-fig { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 0; }
/* Pull the SVG up under the name, but only enough to close part of the
   gap — not enough to overlap the open-string circles drawn near the top
   of the SVG (cy = topPad - 20 = y ~38 in the SVG's viewBox). -8px keeps
   the label snug-ish while leaving ~14px of clearance above the X / O
   markers for chords like E7 that have open strings. */
.chord-fig-name { margin-bottom: -8px; }
/* Hover-to-play chord-fig diagrams (wired up in gps-chords.js): give a soft
   pointer + lift so users discover the interaction. */
.chord-fig-playable { cursor: pointer; transition: transform 120ms ease, filter 120ms ease; }
.chord-fig-playable:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)); }
.chord-fig .chord-svg { width: 150px; max-width: 100%; height: auto; }
.chord-fig[data-gps-size="small"] .chord-svg { width: 118px; }
.chord-fig[data-gps-size="medium"] .chord-svg { width: 170px; }
.chord-fig[data-gps-size="large"] .chord-svg { width: 220px; }
.chord-fig-name { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.chord-figs-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 18px 0; }
body[data-lesson-slug="gps-strumming-lesson"] .chord-fig-row,
body[data-lesson-slug="gps-strumming-lesson"] .chord-figs-row {
  display: none !important;
}
.chord-fig-row .chord-fig-has-fret-label .chord-svg,
.chord-figs-row .chord-fig-has-fret-label .chord-svg {
  width: 180px;
}
.chord-tab-svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 4px auto 8px; }
.chord-tab-row { margin: 6px 0 26px; }
.gps-book-exercise-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: 10px 0 28px;
}
.gps-book-exercise-row .chord-tab-row {
  min-width: 0;
  margin: 0;
}
.gps-book-exercise-row .gps-player {
  width: 100%;
  margin: 0;
  padding: 12px 10px 10px;
}
.gps-book-exercise-row .gps-player .tab-staff-wrap {
  padding-top: 8px;
}
.gps-book-exercise-row .gps-controls {
  transform: scale(0.72);
  transform-origin: top right;
}
.gps-stretch-caption-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: min(100% - 96px, 900px);
  margin: -112px 0 56px 48px;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 1vw, 0.94rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  position: relative;
  z-index: 1;
}
.gps-stretch-caption-row span::before {
  content: "";
  display: block;
  width: min(82%, 260px);
  height: 18px;
  margin: 0 auto 4px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-bottom: 2px dashed currentColor;
}
@media (max-width: 900px) {
  .gps-book-exercise-row {
    grid-template-columns: 1fr;
  }
  .gps-book-exercise-row .gps-controls {
    transform: none;
  }
  .gps-stretch-caption-row {
    grid-template-columns: 1fr;
    gap: 10px;
    width: auto;
    margin: 0 12px 28px;
  }
}

.barre-anchor-grid {
  display: grid;
  gap: 14px;
  margin: 16px 0 22px;
}
.barre-anchor-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.2fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(35, 31, 27, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf7 0%, #f4ead8 100%);
  padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(35, 31, 27, 0.08);
}
.barre-anchor-copy {
  display: grid;
  gap: 6px;
}
.barre-anchor-copy strong {
  color: var(--red);
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}
.barre-anchor-copy span {
  color: #61594f;
  font-weight: 700;
  line-height: 1.35;
}
.barre-anchor-diagrams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.barre-anchor-diagrams .chord-fig .chord-svg {
  width: 118px;
}
.barre-anchor-diagrams .chord-fig-name {
  font-size: 0.95rem;
}
.barre-anchor-arrow {
  color: var(--red);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.barre-switch-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
.barre-switch-map.is-single {
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
}
.barre-switch-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.barre-switch-copy {
  display: block;
  padding: 14px 16px 4px;
  color: var(--ink);
}
.barre-switch-copy strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}
.barre-switch-copy span {
  display: block;
  color: #665c52;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}
.barre-animated-chart {
  --gap-x: 15.6%;
  --gap-y: 18.5%;
  --x0: 7%;
  --y0: 7%;
  width: min(100%, 340px);
}
.barre-fret-row {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  min-height: 20px;
  margin-bottom: 4px;
  color: #6a6158;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
}
.barre-shift-bar {
  --sf1: 1;
  --sf2: 3;
  position: absolute;
  left: calc(var(--x0) - 12px);
  top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  width: calc(var(--gap-x) * 5 + 24px);
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #286c56;
  color: #fff;
  box-shadow: 0 0 0 3px #fffaf0, 0 8px 14px rgba(0,0,0,0.2);
  transform: translateY(-50%);
  animation: barre-slide-cycle 4s ease-in-out infinite;
  z-index: 1;
}
/* GWJ-306 (Jimmy, 2026-11-13): "there need to be fret numbers for the G and A min
   chords that are shown sliding from the G to the A min." The animated board is a
   five-fret window; when it does not start at the nut, .is-up-the-neck drops the
   nut line and .barre-fret-label names the fret beside the barre's row, the way
   the chord diagrams print "3rd fret". (The labels also carry inline position so a
   lesson shows them correctly before this stylesheet is deployed.) */
.barre-animated-chart.is-up-the-neck .animated-board::after { display: none; }
.barre-fret-label {
  position: absolute;
  right: calc(100% - var(--x0) + 12px);
  transform: translateY(-50%);
  color: #6a6158;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}
/* On a phone the board fills the panel and the label would be cut off at the
   left edge; give it a gutter. */
@media (max-width: 560px) {
  .barre-animated-chart.has-fret-labels { padding-left: 62px; padding-right: 8px; }
}
.barre-shift-bar b {
  font-size: 0.86rem;
  line-height: 1;
}
.barre-slide-fg .finger-1 { --sf1: 1; --sf2: 3; }
.barre-slide-fg .finger-2 { --sx1: 3; --sf1: 2; --sx2: 3; --sf2: 4; background: #286c56; }
.barre-slide-fg .finger-3 { --sx1: 1; --sf1: 3; --sx2: 1; --sf2: 5; background: #286c56; }
.barre-slide-fg .finger-4 { --sx1: 2; --sf1: 3; --sx2: 2; --sf2: 5; background: #286c56; }
.barre-shift-g-am .finger-1 { --sf1: 1; --sf2: 3; }
.barre-shift-g-am .finger-2 { --sx1: 3; --sf1: 2; --sx2: 3; --sf2: 2; background: #b98225; animation-name: shift-dot-cycle-fade-out; }
.barre-shift-g-am .finger-3 { --sx1: 1; --sf1: 3; --sx2: 1; --sf2: 5; background: #286c56; }
.barre-shift-g-am .finger-4 { --sx1: 2; --sf1: 3; --sx2: 2; --sf2: 5; background: #286c56; }
@keyframes barre-slide-cycle {
  0%, 26% {
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
  45%, 76% {
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
  }
  100% {
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
}
@keyframes shift-dot-cycle-fade-out {
  0%, 26% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  45%, 76% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  100% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.finger-shift-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
.finger-shift-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.finger-shift-copy {
  display: block;
  padding: 14px 16px 4px;
  color: var(--ink);
}
.finger-shift-copy strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}
.finger-shift-copy span {
  display: block;
  color: #665c52;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}
.shift-chord-a,
.shift-chord-b {
  color: var(--ink);
}
.animated-chord-chart {
  --gap-x: 15.6%;
  --gap-y: 18.5%;
  --x0: 7%;
  --y0: 7%;
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto 12px;
  padding: 4px 18px 12px;
}
.animated-chord-label {
  position: relative;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 2px 4px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
}
.animated-chord-label span {
  grid-area: 1 / 1;
  animation: chord-label-a 4s ease-in-out infinite;
}
.animated-chord-label span:last-child {
  color: var(--red);
  animation-name: chord-label-b;
}
@keyframes chord-label-a {
  0%, 30% { opacity: 1; transform: translateY(0); }
  42%, 78% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes chord-label-b {
  0%, 30% { opacity: 0; transform: translateY(4px); }
  42%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}
.open-row,
.string-row {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  min-height: 20px;
  text-align: center;
  color: #4f4841;
  font-size: 0.72rem;
  font-weight: 900;
}
.open-row span,
.string-row span,
.barre-fret-row span {
  position: absolute;
  top: 50%;
  min-width: 2.2ch;
  text-align: center;
  transform: translate(-50%, -50%);
}
.open-row span:nth-child(1),
.string-row span:nth-child(1),
.barre-fret-row span:nth-child(1) { left: var(--x0); }
.open-row span:nth-child(2),
.string-row span:nth-child(2),
.barre-fret-row span:nth-child(2) { left: calc(var(--x0) + var(--gap-x)); }
.open-row span:nth-child(3),
.string-row span:nth-child(3),
.barre-fret-row span:nth-child(3) { left: calc(var(--x0) + var(--gap-x) * 2); }
.open-row span:nth-child(4),
.string-row span:nth-child(4),
.barre-fret-row span:nth-child(4) { left: calc(var(--x0) + var(--gap-x) * 3); }
.open-row span:nth-child(5),
.string-row span:nth-child(5),
.barre-fret-row span:nth-child(5) { left: calc(var(--x0) + var(--gap-x) * 4); }
.open-row span:nth-child(6),
.string-row span:nth-child(6),
.barre-fret-row span:nth-child(6) { left: calc(var(--x0) + var(--gap-x) * 5); }
.open-row {
  margin-bottom: 4px;
}
.string-row {
  margin-top: 8px;
  color: #6a6158;
}
.animated-board {
  position: relative;
  aspect-ratio: 1 / 0.9;
}
.animated-board::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x0);
  right: calc(100% - (var(--x0) + var(--gap-x) * 5));
  border-radius: 8px;
  background:
    linear-gradient(90deg, #171717 0 2px, transparent 2px),
    linear-gradient(90deg, transparent calc(20% - 1px), #171717 calc(20% - 1px) calc(20% + 1px), transparent calc(20% + 1px)),
    linear-gradient(90deg, transparent calc(40% - 1px), #171717 calc(40% - 1px) calc(40% + 1px), transparent calc(40% + 1px)),
    linear-gradient(90deg, transparent calc(60% - 1px), #171717 calc(60% - 1px) calc(60% + 1px), transparent calc(60% + 1px)),
    linear-gradient(90deg, transparent calc(80% - 1px), #171717 calc(80% - 1px) calc(80% + 1px), transparent calc(80% + 1px)),
    linear-gradient(90deg, transparent calc(100% - 2px), #171717 calc(100% - 2px) 100%),
    repeating-linear-gradient(180deg, #171717 0 3px, transparent 3px calc(18.5%));
}
.animated-board::after {
  content: "";
  position: absolute;
  left: calc(var(--x0) - 0.7%);
  right: calc(100% - (var(--x0) + var(--gap-x) * 5) - 0.8%);
  top: -1px;
  height: 7px;
  background: #171717;
  border-radius: 2px;
}
.shift-dot-dot {
  --sx1: 1;
  --sf1: 1;
  --sx2: 1;
  --sf2: 1;
  position: absolute;
  left: calc(var(--x0) + var(--gap-x) * var(--sx1));
  top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  box-shadow: 0 0 0 3px #fffaf0, 0 8px 14px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  animation: shift-dot-cycle 4s ease-in-out infinite;
}
.shift-dot-dot b {
  font-size: 0.86rem;
  line-height: 1;
}
.shift-dot-dot.finger-1 {
  background: #b98225;
  animation-name: shift-dot-cycle-fade;
}
.shift-dot-dot.finger-2 {
  background: #d14435;
}
.shift-dot-dot.finger-3 {
  background: #171717;
}
.shift-c-am .shift-dot-dot.finger-1,
.shift-c-am .shift-dot-dot.finger-2 {
  background: #286c56;
}
.shift-c-am .shift-dot-dot.finger-3 {
  background: #d14435;
}
.shift-em-am .finger-2 { --sx1: 1; --sf1: 2; --sx2: 2; --sf2: 2; }
.shift-em-am .finger-3 { --sx1: 2; --sf1: 2; --sx2: 3; --sf2: 2; }
.shift-em-am .finger-1 { --sx1: 4; --sf1: 1; --sx2: 4; --sf2: 1; }
.shift-c-am .finger-1 { --sx1: 4; --sf1: 1; --sx2: 4; --sf2: 1; animation-name: shift-dot-cycle; }
.shift-c-am .finger-2 { --sx1: 2; --sf1: 2; --sx2: 2; --sf2: 2; }
.shift-c-am .finger-3 { --sx1: 1; --sf1: 3; --sx2: 3; --sf2: 2; }
@keyframes shift-dot-cycle {
  0%, 26% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
  45%, 76% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
  }
  100% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
}
@keyframes shift-dot-cycle-fade {
  0%, 26% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  45%, 76% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shift-dot-dot {
    animation: none;
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
  }
  .shift-em-am .finger-1 {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .animated-chord-label span:first-child {
    opacity: 0;
  }
  .animated-chord-label span:last-child {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 680px) {
  .barre-anchor-card {
    grid-template-columns: 1fr;
  }
  .barre-anchor-diagrams {
    gap: 4px;
  }
  .barre-anchor-diagrams .chord-fig .chord-svg {
    width: 104px;
  }
  .barre-anchor-copy span {
    font-size: 0.95rem;
  }
  .finger-shift-map {
    grid-template-columns: 1fr;
  }
  .barre-switch-map {
    grid-template-columns: 1fr;
  }
  .finger-shift-copy {
    display: block;
  }
  .finger-shift-copy span {
    display: block;
    margin-top: 4px;
  }
  .animated-chord-chart {
    width: min(100%, 340px);
    padding-inline: 16px;
  }
  .shift-dot-dot {
    width: 30px;
    height: 30px;
  }
}

/* Chord-song widget: diagram row + bar-by-bar progression + strum playback. */
.gps-chord-song { position: relative; margin: 24px 0; }
.chord-song-diagrams { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 18px; }
.chord-song-diagrams .chord-fig .chord-svg { width: 132px; }
.gps-chord-song .chord-song-controls { position: static; inset: auto; display: flex; align-items: center; gap: 14px; justify-content: flex-start; margin: 6px 0 18px; }
.chord-song-section { margin: 14px 0; }
.chord-song-section-label { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.chord-song-bars { display: flex; flex-wrap: wrap; gap: 8px; }
.chord-song-bar {
  flex: 0 0 128px; min-width: 104px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 10px 12px 9px; display: grid; grid-template-rows: auto 1fr; gap: 8px;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.chord-song-chords {
  display: grid;
  align-items: center;
  min-height: 1.35em;
  column-gap: 4px;
}
.chord-song-bar .chord-song-chord {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(0.88rem, 2vw, 1.05rem);
  line-height: 1.1;
}
.chord-song-bar .chord-song-slashes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}
.chord-song-bar.is-playing { background: #fbeae6; border-color: var(--red); }
.chord-song-notation { display: grid; gap: 10px; }
.chord-song-alpha {
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
}
.chord-song-alpha .gps-controls {
  position: relative;
  inset: auto;
  margin: 0 0 4px auto;
}
.chord-song-alpha .tab-staff-wrap {
  padding-top: 0;
}
.chord-song-notation-section {
  margin: 0;
}
.chord-notation-row {
  position: relative;
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow-x: auto;
}
.chord-notation-svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.notation-section-name {
  fill: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 900;
}
.notation-chord-name {
  fill: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
}
.notation-staff-line,
.notation-barline {
  stroke: #34312d;
  stroke-width: 1.1;
}
.notation-final-bar {
  stroke: #171514;
  stroke-width: 1.2;
}
.notation-final-bar.thick {
  stroke-width: 3.3;
}
.notation-clef {
  fill: #050505;
  font-family: "Bravura", "Noto Music", "Times New Roman", serif;
  font-size: 50px;
}
.notation-time {
  fill: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 900;
  text-anchor: middle;
}
.notation-slash {
  stroke: #050505;
  stroke-width: 3.4;
  stroke-linecap: square;
}
.chord-notation-hit {
  position: absolute;
  z-index: 1;
  border-radius: 4px;
  pointer-events: none;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.chord-notation-hit.is-playing {
  background: rgba(209, 68, 53, 0.12);
  box-shadow: inset 0 0 0 2px rgba(209, 68, 53, 0.42);
}

/* Chord diagrams pinned above each chord in a tab (Open Chords lesson). */
.gps-chord-diagrams-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gps-chord-diagram {
  position: absolute; transform: translateX(-50%);
  width: 128px; text-align: center;
}
.gps-chord-diagram svg { width: 100%; height: auto; display: block; }
.gps-chord-diagram-name {
  font-weight: 800; font-size: 0.95rem;
  color: var(--ink, #1a1a1a); line-height: 1.1;
  /* Sit the name cleanly ABOVE the SVG with a small breathing gap. The old
     negative `margin-bottom: -14px` pulled the SVG up under the name and made
     the label overlap the open-string "O" markers (looked like the name was
     blocking the open strings on E7, G7, etc.). Now the name floats just
     above the diagram, matching the chord-vocab row higher up the page. */
  margin-bottom: 4px;
}

/* AlphaTab Song View tool */
.song-view-device {
  border: 7px solid #070808;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.16), transparent 22%),
    linear-gradient(145deg, #363b3f 0%, #16191c 46%, #0b0d0f 100%);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255,255,255,0.08);
  padding: 20px;
}
.song-view-face {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.song-view-controls {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(180deg, #1b1e21, #090b0d);
  box-shadow: inset 0 2px 18px rgba(255,255,255,0.07), inset 0 -20px 28px rgba(0,0,0,0.28);
  padding: 18px;
}
.song-view-field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.song-view-field span,
.song-view-controls .scale-legend {
  color: #efe7d1;
}
.song-view-field select {
  width: 100%;
  border: 2px solid #080909;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf0, #f3e5bd);
  color: #21160f;
  font: inherit;
  font-weight: 900;
  padding: 9px 10px;
}
.song-view-toggle-grid {
  display: block;
}
.song-feature-menu {
  position: relative;
  width: 100%;
  max-width: 320px;
  color: #23180f;
  z-index: 9;
}
.song-feature-menu summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid #070809;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 8%, rgba(255,255,255,0.88), transparent 30%),
    linear-gradient(180deg, #fffaf0, #e8d4a7);
  color: #251a11;
  cursor: pointer;
  list-style: none;
  padding: 8px 12px 8px 16px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 4px 0 rgba(0,0,0,0.42);
}
.song-feature-menu summary::-webkit-details-marker {
  display: none;
}
.song-feature-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}
.song-feature-caret {
  flex: none;
  color: var(--red);
  transition: transform 140ms ease;
}
.song-feature-menu[open] .song-feature-caret {
  transform: rotate(180deg);
}
.song-feature-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, calc(100vw - 36px));
  display: grid;
  gap: 8px;
  border: 2px solid #080909;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 6%, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(180deg, #202429, #090b0d);
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.song-feature-choice {
  min-height: 38px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  color: #f8f2e6;
  cursor: pointer;
  padding: 7px 9px;
  font-weight: 900;
}
.song-feature-choice:hover {
  background: rgba(255,255,255,0.06);
}
.song-feature-choice input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,248,224,0.72);
  border-radius: 50%;
  background: #070809;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
}
.song-feature-choice input:checked {
  border-color: #f8dfad;
  background:
    radial-gradient(circle at 50% 50%, #fffaf0 0 23%, transparent 24%),
    linear-gradient(180deg, #c95545, #8f211a);
}
.song-feature-choice span {
  font-size: 0.9rem;
}
.song-view-screen {
  min-width: 0;
  border-radius: 22px;
  border: 5px solid #050606;
  background:
    radial-gradient(circle at 68% 18%, rgba(255,255,255,0.95), transparent 26%),
    linear-gradient(180deg, #fffaf0 0%, #f7ebcb 48%, #f2c778 100%);
  color: #201610;
  padding: 24px;
  overflow: hidden;
}
.song-view-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.song-view-title-row h4 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  letter-spacing: 0;
}
.song-view-title-row span {
  color: #6f655c;
  font-weight: 900;
  text-align: right;
}
.song-view-render {
  overflow-x: auto;
  border-radius: 12px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(32, 22, 16, 0.14);
  padding: 10px 8px 4px;
}
.song-view-render .at-surface {
  min-width: 100%;
}
.song-view-error {
  color: var(--red);
  font-weight: 900;
}
.song-view-inline {
  display: grid;
  gap: 12px;
}
.song-view-inline-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.song-view-inline-render {
  min-width: 0;
  overflow-x: auto;
  border-radius: 14px;
}
.song-view-inline-render .at-surface {
  min-width: 100%;
}
.song-view-alpha-player {
  margin: 0;
  padding: 14px;
  overflow: hidden;
}
.song-view-alpha-player .song-view-staff {
  padding-top: 68px;
}
.song-view-alpha-player .gps-controls {
  top: 12px;
  right: 12px;
}
.song-view-screen .song-view-alpha-player {
  background:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,0.74), transparent 30%),
    linear-gradient(180deg, #fffaf0 0%, #f7ebcb 50%, #f1cf8b 100%);
  border: 0;
  box-shadow: none;
}

@media (max-width: 980px) {
  .song-view-face {
    grid-template-columns: 1fr;
  }
}

/* Beginning Rhythm: a book rhythm image + a Play button that taps it out. */
.gps-rhythm { margin: 18px 0 8px; }
.gps-rhythm img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #ded7cf); background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.gps-rhythm .gps-rhythm-controls { position: static; margin-top: 12px; }

/* Counting numbers (1 2 & 3) drawn below the rhythm beams on metered pieces. */
.gps-count-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gps-count {
  position: absolute; transform: translateX(-50%);
  font-size: 0.86rem; font-weight: 900; color: #111;
  white-space: nowrap;
}
.gps-custom-counts .gps-count {
  font-size: clamp(0.62rem, 0.92vw, 0.92rem);
}
.gps-count-tick {
  position: absolute;
  width: 2px;
  height: 22px;
  background: #111;
  transform: translateX(-50%);
}
.gps-count-beam {
  position: absolute;
  height: 9px;
  border-left: 3px solid #111;
  border-right: 3px solid #111;
  border-bottom: 4px solid #111;
  transform: translateX(0);
}
/* data-gps-wide exercises keep the normal column width but force their bars
   onto a single line (handled in gps-player.js via barsPerRow + stretchForce),
   so a short exercise spreads across the full column like the printed book. */
/* Click any lesson image to view it larger (lightbox). */
.lesson-reader img { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 14, 13, 0.88); padding: 24px; cursor: zoom-out;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: zoom-out;
}
/* Multi-line widgets reserve a top strip (via staff.style.marginTop in JS) so
   the top-right floating controls AND the row of chord diagrams above the
   first tab line both have room without overlapping. The default top-right
   controls layout is used for both wide and multi-line widgets. */
.gps-player.gps-multiline { padding-bottom: 8px; }

.gps-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 2.2in;
  max-width: 100%;
  min-height: 0.48in;
  display: grid;
  grid-template-columns: 28px auto 26px 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid #111318;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.18), transparent 22%),
    linear-gradient(145deg, #30353c 0%, #12151a 56%, #090b0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -8px 18px rgba(0,0,0,0.46), 0 8px 18px rgba(23,21,20,0.18);
}
.gps-tempo-control {
  display: inline-grid;
  grid-template-columns: 19px 56px 19px;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: rgba(255,248,224,0.92);
}
.gps-tempo-control label {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.gps-tempo-control span,
.gps-bpm-label {
  color: rgba(255,248,224,0.92);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gps-tempo-control input[type="number"] {
  width: 56px;
  height: 24px;
  border: 2px solid #070809;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,166,40,0.24), transparent 60%),
    linear-gradient(180deg, #fffaf0 0%, #f5dfad 100%);
  color: #24180c;
  font-weight: 900;
  font-size: 0.74rem;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(69,38,7,0.22);
}
.gps-tempo-control input[type="number"]::-webkit-outer-spin-button,
.gps-tempo-control input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.gps-tempo-control button,
.gps-repeat-btn,
.gps-metronome-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  border: 1px solid #060708;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 3px 0 #060708;
}
.gps-tempo-control button {
  width: 21px;
  min-width: 21px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 0.86rem;
}
.gps-tempo-control button:hover,
.gps-repeat-btn:hover,
.gps-metronome-btn:hover {
  color: #fff;
  filter: brightness(1.08);
}
.gps-repeat-btn.active,
.gps-metronome-btn.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.2), transparent 26%),
    linear-gradient(180deg, #1f9e7e, #136b54);
  border-color: #0a3a2c;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #0a3a2c;
}
.gps-metronome-btn.silent {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 12px rgba(209,68,53,0.22);
}
.gps-metronome-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}
.gps-metro-case {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.gps-metro-arm,
.gps-metro-base {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gps-metro-weight {
  fill: currentColor;
}
.lesson-tip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 12px; padding: 16px 18px; color: rgba(243,239,233,0.82); line-height: 1.6; margin-top: 24px; margin-bottom: 24px; }
.lesson-tip strong { color: var(--gold); }
/* Book-style example caption: the GPS pages centre a short line of prose
   directly above the staff it describes ("Quarter notes - each note gets one
   beat"). Sits tight to the widget below it. */
.ex-caption { text-align: center; margin: 20px 0 -4px; font-size: 0.95rem; line-height: 1.45; color: rgba(243,239,233,0.72); }
.paper-page .ex-caption, .gps-editor-preview-page .ex-caption { color: var(--muted); }

.gps-player[data-gps-player="br1-h"] .tab-staff-wrap {
  padding-top: 58px !important;
}
.gps-player[data-gps-player^="br1-"] .tab-staff-wrap {
  margin-bottom: -64px;
}
.gps-player[data-gps-player="br2-c"] .gps-controls {
  top: -8px;
}
.gps-player[data-gps-player="br2-f"] .gps-controls {
  top: -8px;
}

/* Guitar GPS lessons read on warm "book paper" rather than the dark theme */
.paper-page { background: var(--paper); color: var(--ink); }
.paper-page .lesson-body p { color: var(--muted); }
.paper-page .lesson-body em, .paper-page .lesson-body strong { color: var(--ink); }
.paper-page .lesson-lock { border-color: var(--line); color: var(--red-dark); }
.paper-page .lesson-nav-link { border-color: var(--line); color: var(--ink); }
.paper-page .lesson-nav-link span { color: var(--red); }
.paper-page .lesson-tip { background: #fff; border-color: var(--line); color: var(--muted); }
.paper-page .lesson-tip strong { color: var(--red-dark); }
.paper-page .gps-player { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* Red Play button (matches the tools page) */
.gps-play-btn { width: 28px; min-width: 28px; height: 28px; min-height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); color: #fff; padding: 0; font-weight: 900; font-size: 0.74rem; box-shadow: 0 2px 0 var(--red-dark); transition: background 140ms ease, transform 120ms ease; white-space: nowrap; }
.gps-play-btn:hover { background: var(--red-dark); }
.gps-play-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--red-dark); }
@media (max-width: 780px) {
  .gps-controls {
    grid-template-columns: 28px auto 26px 26px;
  }
}
@media (max-width: 520px) {
  .gps-tempo-control { justify-content: center; }
}
.admin-empty { color: var(--muted); padding: 14px 0; }

.zoom-field { display: grid; gap: 8px; margin-top: 16px; }
.zoom-field > span { font-weight: 800; font-size: 0.86rem; color: var(--muted); }
.zoom-row { display: flex; gap: 8px; flex-wrap: wrap; }
.zoom-row input { flex: 1 1 240px; }
.admin-card input, .admin-card textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); width: 100%; }
.admin-card input:focus, .admin-card textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.button.is-disabled { opacity: 0.45; pointer-events: none; }

.lesson-editor-list { display: grid; gap: 14px; margin-top: 14px; }
.lesson-editor { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fbfaf7; display: grid; gap: 12px; }
.lesson-editor-head { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.lesson-title-input { font-weight: 800; }
.lesson-notes-label { display: grid; gap: 6px; }
.lesson-notes-label span { font-weight: 800; font-size: 0.82rem; color: var(--muted); }
.lesson-notes { resize: vertical; line-height: 1.5; }
.lesson-editor-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Guitar GPS admin editor */
.gps-editor-shell { min-height: 100vh; }
.gps-book-editor {
  padding-top: 4px;
}
.gps-editor-index-reader { max-width: 1100px; }
.gps-editor-index-reader .lesson-bar {
  align-items: center;
}
.gps-editor-index-reader [data-add-section] {
  align-self: flex-start;
  margin-top: 8px;
  white-space: nowrap;
}
.gps-editor-toc {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}
.gps-editor-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(16px, 2vw, 24px);
}
.gps-editor-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.gps-editor-section-head h2 {
  min-width: 160px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
}
.gps-editor-section-head h2:focus {
  outline: 2px solid var(--red);
  background: #fff8e0;
}
.gps-editor-section-head div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.gps-editor-section-head button,
.gps-wysiwyg-toolbar button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffaf0;
  color: var(--ink);
  min-height: 34px;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}
.gps-editor-section-head button:hover,
.gps-wysiwyg-toolbar button:hover {
  border-color: var(--red);
  color: var(--red-dark);
}
.gps-editor-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.gps-editor-lesson-list li { margin: 0; }
.gps-editor-lesson-list button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
  color: var(--ink);
  padding: 11px 13px;
  cursor: pointer;
}
.gps-editor-lesson-list button:hover {
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}
.gps-editor-lesson-list .gps-toc-num {
  grid-row: 1 / span 2;
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 999px;
}
.gps-editor-lesson-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gps-editor-lesson-list small {
  color: var(--muted);
  font-weight: 800;
}
.gps-editor-page-view { padding-bottom: 80px; }
.gps-wysiwyg-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 28px);
  border-bottom: 1px solid rgba(37,31,24,0.14);
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(145deg, #30353c 0%, #12151a 58%, #090b0e 100%);
  box-shadow: 0 12px 28px rgba(23,21,20,0.22);
}
.gps-wysiwyg-toolbar button {
  min-height: 32px;
  background: linear-gradient(180deg, #fffaf0, #eddca9);
}
.gps-wysiwyg-toolbar button.is-primary {
  background: linear-gradient(180deg, #d55749, #9f2f24);
  color: #fff;
  border-color: #6d1d16;
}
.gps-toolbar-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.22);
  margin: 0 4px;
}
.gps-wysiwyg-lesson {
  max-width: 920px;
  min-height: calc(100vh - 170px);
}
.gps-wysiwyg-lesson [contenteditable="true"] {
  border-radius: 8px;
  outline: 0;
}
.gps-wysiwyg-lesson [contenteditable="true"]:focus {
  box-shadow: 0 0 0 3px rgba(209,68,53,0.24);
  background: rgba(255,255,255,0.42);
}
.gps-wysiwyg-body {
  min-height: 48vh;
  border: 1px dashed rgba(37,31,24,0.18);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.28);
}
.gps-wysiwyg-body:empty::before {
  content: "Start typing the lesson here.";
  color: var(--muted);
}
.gps-wysiwyg-body .gps-player {
  user-select: text;
}
.gps-wysiwyg-body .gps-player,
.gps-wysiwyg-body [data-chord-frets],
.gps-wysiwyg-body [data-gps-fretboard],
.gps-wysiwyg-body [data-gps-chord-song],
.gps-wysiwyg-body [data-gps-dexterity],
.gps-wysiwyg-body [data-gps-inversions] {
  position: relative;
}
.gps-widget-controls {
  position: absolute;
  top: 8px;
  /* Centered along the top so the edit toolbar clears BOTH the exercise number
     (top-left) and the player's play/tempo controls (.gps-controls, top-right). */
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(37, 31, 24, 0.86);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 120ms ease;
}
.gps-wysiwyg-body .gps-player:hover > .gps-widget-controls,
.gps-wysiwyg-body [data-chord-frets]:hover > .gps-widget-controls,
.gps-wysiwyg-body [data-gps-fretboard]:hover > .gps-widget-controls,
.gps-wysiwyg-body [data-gps-chord-song]:hover > .gps-widget-controls,
.gps-wysiwyg-body [data-gps-dexterity]:hover > .gps-widget-controls,
.gps-wysiwyg-body [data-gps-inversions]:hover > .gps-widget-controls,
.gps-wysiwyg-body figure.lesson-video:hover > .gps-widget-controls,
.gps-widget-controls:focus-within {
  opacity: 1;
}
/* Video figures anchor their resize/move/center controls just like other widgets. */
.gps-wysiwyg-body figure.lesson-video { position: relative; }
.gps-widget-controls button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fffaf4;
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.gps-widget-controls button:hover,
.gps-widget-controls button:focus {
  background: var(--red, #b63f2f);
  color: #fff;
}
.gps-widget-controls .gps-widget-del { color: var(--red, #b63f2f); font-size: 0.95rem; }
.gps-widget-controls .gps-widget-del:hover,
.gps-widget-controls .gps-widget-del:focus { background: var(--red, #b63f2f); color: #fff; }
/* GWJ-18: image figures uploaded via the toolbar "+ Image" button get a
   small × button injected by gps-editor.js the first time the admin
   hovers over them. The button removes the parent figure when clicked.
   The button is stripped from the saved HTML by cleanEditableHtml() — it
   only exists for editor chrome. */
.gps-wysiwyg-body figure.lesson-sheet {
  position: relative;
}
.gps-wysiwyg-body .gps-figure-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
  z-index: 2;
}
.gps-wysiwyg-body figure.lesson-sheet:hover .gps-figure-remove,
.gps-wysiwyg-body .gps-figure-remove:focus {
  opacity: 1;
}
.gps-wysiwyg-body .gps-figure-remove:hover {
  background: var(--red, #b63f2f);
  transform: scale(1.05);
}
/* The editor preview pane uses the same renderer as the published lesson
   (GWJ_RENDER_GPS_PLAYERS) — back when chord diagrams were placeholders,
   this rule put a dashed 160×190 box around each one to advertise "drop a
   real diagram here". Now that real SVGs render, that box clipped the
   actual diagram, hid chord-name labels under the playback controls, and
   diverged the editor preview from /lesson.html. Leave .chord-svg
   un-overridden in the editor scope so the editor matches the live page. */

.gps-editor-page { --editor-rail: minmax(250px, 310px); }
.gps-editor-head { align-items: flex-end; }
.gps-editor-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-grid {
  display: grid;
  grid-template-columns: var(--editor-rail) minmax(460px, 1.05fr) minmax(360px, 0.9fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.gps-editor-library,
.gps-editor-preview { position: sticky; top: 24px; }
.gps-editor-library { display: grid; gap: 14px; }
.gps-editor-library input,
.gps-editor-library select,
.gps-editor-workbench input,
.gps-editor-workbench select,
.gps-editor-workbench textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffaf4;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  width: 100%;
}
.gps-editor-library input:focus,
.gps-editor-library select:focus,
.gps-editor-workbench input:focus,
.gps-editor-workbench select:focus,
.gps-editor-workbench textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.gps-editor-list,
.gps-editor-list-group,
.gps-existing-loader,
.gps-editor-workbench,
.gps-editor-blocks { display: grid; gap: 12px; }
.gps-editor-list-group h3,
.gps-existing-loader h3 {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gps-draft-item {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
}
.gps-draft-item strong { font-size: 0.94rem; }
.gps-draft-item span { color: var(--muted); font-size: 0.78rem; font-weight: 800; line-height: 1.3; }
.gps-draft-item:hover,
.gps-draft-item.is-active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.gps-editor-status {
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.gps-editor-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gps-editor-meta label,
.gps-editor-block label {
  display: grid;
  gap: 6px;
}
.gps-editor-meta span,
.gps-editor-block label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gps-editor-wide { grid-column: 1 / -1; }
.gps-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf7;
  padding: 10px;
}
.gps-editor-toolbar button,
.gps-editor-block-head button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  min-height: 34px;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}
.gps-editor-toolbar button:hover,
.gps-editor-block-head button:hover { border-color: var(--red); color: var(--red-dark); }
.gps-editor-block {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf7;
  padding: 14px;
}
.gps-editor-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gps-editor-block-head strong { font-size: 1rem; }
.gps-editor-block-head div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-block-head button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
}
.gps-editor-block-head button:disabled { opacity: 0.42; cursor: default; }
.gps-editor-mini-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}
.gps-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.button.danger {
  border-color: rgba(209, 68, 53, 0.42);
  color: var(--red-dark);
  background: #fff;
}
.gps-editor-preview { max-height: calc(100vh - 48px); overflow: auto; }
.gps-editor-preview-page {
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244, 164, 73, 0.32), transparent 48%),
    linear-gradient(180deg, #fffaf0 0%, #f8edcf 100%);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: inset 0 0 40px rgba(83, 54, 20, 0.08);
}
.gps-editor-preview-page h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1;
  margin: 4px 0 10px;
}
.gps-editor-preview-summary {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}
.gps-editor-preview-page .lesson-body p {
  color: var(--ink);
  margin-bottom: 14px;
}
.gps-editor-preview-page .lesson-tip {
  background: rgba(255,255,255,0.68);
  border-color: rgba(37, 31, 24, 0.14);
  color: var(--muted);
}
.gps-editor-preview-page .lesson-tip strong { color: var(--red-dark); }
.gps-editor-preview-figure {
  margin: 18px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.gps-editor-preview-figure img { display: block; width: 100%; height: auto; }
.gps-editor-preview-figure figcaption,
.gps-editor-video figcaption {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 8px 10px 10px;
}
.gps-editor-video {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.gps-editor-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.gps-editor-video-empty,
.gps-editor-tab-preview {
  border: 1px dashed rgba(37, 31, 24, 0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.56);
  padding: 14px;
  color: var(--muted);
  font-weight: 800;
}
.gps-editor-tab-preview {
  display: grid;
  gap: 8px;
  color: var(--ink);
}
.gps-editor-tab-preview pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: #171514;
  color: #fff8e0;
  padding: 12px;
  font-size: 0.86rem;
}
.gps-editor-tab-preview span { color: var(--muted); font-weight: 900; }
.gps-editor-html-preview {
  border: 1px solid rgba(37, 31, 24, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.42);
}

@media (max-width: 1320px) {
  .gps-editor-grid { grid-template-columns: var(--editor-rail) minmax(0, 1fr); }
  .gps-editor-preview {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}
@media (max-width: 860px) {
  .gps-editor-grid,
  .gps-editor-meta { grid-template-columns: 1fr; }
  .gps-editor-library { position: static; }
  .gps-editor-head { align-items: flex-start; }
  .gps-editor-head-actions { justify-content: flex-start; }
}

.media-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.media-thumb { width: 104px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; display: grid; }
.media-thumb img, .media-thumb video { width: 104px; height: 78px; object-fit: cover; display: block; }
.media-name { font-size: 0.7rem; padding: 4px 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-video { position: relative; }
.media-video::after { content: '\25B6'; position: absolute; top: 26px; left: 0; right: 0; text-align: center; color: white; font-size: 1.2rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); pointer-events: none; }
.upload-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px dashed var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; }
.upload-btn:hover { border-color: var(--ink); }

.pay-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.92rem; }
.pay-table th, .pay-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.pay-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* Add-student modal */
.admin-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10,9,8,0.6); backdrop-filter: blur(3px); }
.admin-modal.is-hidden { display: none; }
.admin-modal-card { width: min(440px, 100%); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 22px; box-shadow: var(--shadow); }
.admin-modal-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.admin-form { display: grid; gap: 14px; margin-top: 8px; }
.admin-form label { display: grid; gap: 6px; }
.admin-form label span { font-weight: 800; font-size: 0.84rem; color: var(--muted); }
.admin-form input { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* toast */
/* GWJ-26: "+ Add block" opens a compact dropdown popover anchored to the
   button instead of expanding a full-width inline form. */
.block-add-wrap { position: relative; }
.sched-block-form.block-popover {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  width: min(380px, 88vw);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: var(--shadow);
  display: grid; gap: 10px; text-align: left;
}
.sched-block-form.block-popover.is-hidden { display: none; }
.block-popover .sched-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.block-popover .sched-add-row label:last-child { grid-column: 1 / -1; }
.block-popover .admin-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
@media (max-width: 560px) { .block-popover .sched-add-row { grid-template-columns: 1fr; } }
.admin-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1b1916; color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 70; box-shadow: var(--shadow); }
.admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* GWJ-36: locked Guitar GPS nav (non-paying student). */
.portal-nav-item.is-locked { opacity: 0.6; }
.portal-nav-item .portal-nav-lock { margin-left: auto; display: inline-flex; align-items: center; color: var(--muted); }
.portal-nav-item .portal-nav-lock svg { display: block; }
.portal-nav-item .portal-nav-lock.is-hidden { display: none; }

@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-roster { position: static; }
  .lesson-editor-head { grid-template-columns: 1fr; }
}

/* Student portal — Zoom link + lesson media gallery */
/* Make the left summary column a light card like the other two panels */
.student-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px; align-content: start; }
.portal-credits { margin: 0; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.portal-zoom { width: 100%; }
.portal-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.portal-media-thumb { width: 96px; height: 70px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); display: block; }
.portal-media-thumb img, .portal-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-media-video { position: relative; }
.portal-media-video::after { content: '\25B6'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

/* ============================================================
   Packages / pricing page
   ============================================================ */
.packages-page .page-hero .admin-demo-tag { margin-top: 6px; }
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.price-card.popular { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.price-flag { position: absolute; top: -12px; left: 24px; background: var(--red); color: #fff; font-size: 0.74rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.price-card h2 { font-size: 1.25rem; }
.price-amount { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.price-amount span { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.price-sub { margin: -4px 0 0; color: var(--red); font-weight: 800; font-size: 0.9rem; }
.price-features { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 0.94rem; }
.price-features li { padding-left: 22px; position: relative; }
.price-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--teal); font-weight: 900; }
.price-buy { margin-top: auto; }
.packages-note { color: rgba(243,239,233,0.74); margin-top: clamp(20px, 3vw, 32px); }

/* ============================================================
   Booking page
   ============================================================ */
.book-head, .admin-head { /* shared head spacing handled by .admin-head */ }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.book-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1; }
.book-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
.book-side { display: grid; gap: clamp(14px, 2vw, 20px); }
.day-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.day-chip { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; color: var(--ink); padding: 10px 14px; cursor: pointer; }
.day-chip:hover { border-color: var(--ink); }
.day-chip.active { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.day-chip-label { font-weight: 800; }
.day-chip-meta { font-size: 0.76rem; color: var(--muted); font-weight: 700; }
.slot-heading { font-size: 1rem; color: var(--muted); margin-top: 6px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.slot-btn { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); padding: 10px 18px; font-weight: 800; cursor: pointer; }
.slot-btn:hover { border-color: var(--ink); }
.slot-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.slot-btn.taken { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.book-confirm [data-confirm-text] .warn { color: var(--red); font-weight: 800; }
.book-confirm .button { width: 100%; margin-top: 12px; }
.upcoming-list, .sched-upcoming { display: grid; gap: 10px; margin-top: 12px; }
.upcoming-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; padding: 12px 14px; }
.upcoming-item strong { display: block; }
.upcoming-item .muted-line { margin: 2px 0 0; font-size: 0.84rem; }
.upcoming-cancel { min-height: 34px; padding: 0 12px; font-size: 0.84rem; }

/* ============================================================
   Admin schedule / availability
   ============================================================ */
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
.avail-grid { display: grid; gap: 10px; margin-top: 14px; }
.avail-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.avail-day { font-weight: 900; color: var(--ink); }
.avail-hours { display: flex; flex-wrap: wrap; gap: 6px; }
.avail-chip { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); padding: 7px 10px; font-weight: 800; font-size: 0.82rem; cursor: pointer; min-width: 40px; }
.avail-chip:hover { border-color: var(--ink); }
.avail-chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- Admin lesson calendar + scheduling ---- */
.admin-card select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); width: 100%; font: inherit; }
.admin-card select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.button.tiny { padding: 6px 11px; font-size: 0.8rem; border-radius: 8px; }
.sched-side { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }
.sched-cal-head { align-items: center; flex-wrap: wrap; }
.sched-cal-add-btn { margin-right: auto; }
.sched-cal-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sched-cal-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sched-cal-modes button { border: none; background: #fff; color: var(--ink); padding: 7px 14px; font-weight: 800; font-size: 0.85rem; cursor: pointer; border-left: 1px solid var(--line); }
.sched-cal-modes button:first-child { border-left: none; }
.sched-cal-modes button:hover { color: var(--red, #b63f2f); }
.sched-cal-modes button.is-active { background: var(--red, #b63f2f); color: #fff; }
.sched-cal-dow.is-hidden { display: none; }
.sched-cal-nav { display: inline-flex; align-items: center; gap: 12px; }
.sched-cal-nav button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.sched-cal-nav button:hover { border-color: var(--red); color: var(--red); }
.sched-cal-nav strong { min-width: 150px; text-align: center; }
.sched-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 6px; }
.sched-cal-dow span { text-align: center; font-size: 0.66rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.sched-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.schedcell { position: relative; min-height: 78px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 6px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.schedcell.is-blocked { background: rgba(182,64,48,0.07); }
/* Closed / fully-blocked day: a large red diagonal slash across the cell. */
.schedcell-closed { position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), rgba(182,64,48,0.6) calc(50% - 1.5px), rgba(182,64,48,0.6) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.schedcell-blocked-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.schedcell-empty { border: none; background: none; cursor: default; }
.schedcell:not(.schedcell-empty):hover { border-color: var(--red); }
.schedcell.is-today { border-color: var(--ink); }
.schedcell.is-selected { box-shadow: 0 0 0 2px var(--red); border-color: var(--red); }
.schedcell-num { font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.schedcell.has-lessons .schedcell-num { color: var(--ink); }
.sched-chip { font-size: 0.66rem; font-weight: 700; line-height: 1.25; background: rgba(182,63,47,.12); color: var(--red-dark, #8f2f22); border-radius: 5px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Week view: a single row of 7 taller day cells */
.sched-cal.is-week .schedcell-tall { min-height: 150px; }
/* Day view: hour-by-hour agenda */
.sched-cal.is-day { display: block; }
.day-agenda { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.day-slot { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 46px; }
.day-slot:last-child { border-bottom: none; }
.day-slot.has-lesson { background: rgba(182,63,47,.06); }
.day-slot-hr { flex: 0 0 70px; font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.day-slot-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day-slot-free { color: var(--muted); font-size: 0.82rem; }
.sched-more { font-size: 0.62rem; font-weight: 800; color: var(--muted); }
.sched-day-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.sched-lesson { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.sched-lesson-main { display: flex; flex-direction: column; }
.sched-lesson-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sched-add-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.sched-add-form h3 { margin: 0 0 8px; }
.sched-slot-hint { font-size: 0.8rem; color: var(--muted); margin: 2px 0 4px; }

/* ---- Admin home / Today ---- */
.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 18px); margin-bottom: clamp(16px, 2.4vw, 22px); }
.home-stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
/* Stat cards link through to their detail view (GWJ-5). Keep the card look,
   add a clickable affordance. */
a.home-stat, button.home-stat { text-decoration: none; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.home-stat:hover, button.home-stat:hover { border-color: var(--red, #b63f2f); box-shadow: var(--shadow); transform: translateY(-1px); }
button.home-stat { font: inherit; text-align: left; align-items: flex-start; }
button.home-stat[aria-expanded="true"] { border-color: var(--red, #b63f2f); }
.home-stat-num { font-size: 2rem; font-weight: 900; line-height: 1; color: var(--red); }
.home-stat-label { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
/* GWJ-27: expandable list of today's exact open times under the stats row */
.home-open-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(16px, 2.4vw, 22px); }
.home-open-slots.is-hidden { display: none; }
.home-open-slot {
  display: inline-block; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font-weight: 800; font-size: 0.9rem; text-decoration: none;
}
.home-open-slot:hover { border-color: var(--red, #b63f2f); }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
@media (max-width: 860px) { .home-stats { grid-template-columns: 1fr; } .home-layout { grid-template-columns: 1fr; } }

/* ---- Settings page ---- */
.settings-layout { display: grid; gap: 10px; max-width: 560px; }
.settings-layout .admin-card { padding: 12px 14px; }
.settings-layout .admin-card h2 { font-size: 1.02rem; margin: 0 0 2px; }
.settings-layout .admin-card h3 { font-size: 0.9rem; margin: 10px 0 3px; }
.settings-layout .muted-line { font-size: 0.84rem; margin: 2px 0 6px; }
.settings-layout .admin-form { gap: 8px; }
.settings-layout .admin-form label { gap: 3px; font-size: 0.9rem; }
.settings-layout .admin-form input, .settings-layout .admin-form select { max-width: 320px; padding: 7px 9px; }
.settings-layout .admin-form-actions { margin-top: 2px; }
.settings-layout .settings-steps { margin: 4px 0; padding-left: 16px; font-size: 0.84rem; }
.settings-layout .settings-steps li { margin: 1px 0; }
.settings-layout .lesson-bar { margin: 6px 0 !important; }
.settings-layout .gps-mcp-token { font-size: 0.78rem; word-break: break-all; }
/* Last field row shares a line with its Save button (button hugs bottom-right). */
.settings-row { display: flex; align-items: flex-end; gap: 10px; }
.settings-row .settings-grow { flex: 1 1 auto; min-width: 0; }
.settings-row > .button { flex: 0 0 auto; }
.settings-msg { font-weight: 700; font-size: 0.9rem; margin: 4px 0 0; }
.settings-msg:empty { display: none; }
.settings-msg.is-ok { color: #2f9e44; }
.settings-msg.is-error { color: var(--red, #b63f2f); }
.settings-steps { margin: 6px 0 16px; padding-left: 20px; color: var(--ink); line-height: 1.7; }
.settings-steps code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; }

/* ---- GPS editor: draft badge in the table of contents ---- */
.gps-toc-draft { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--red, #b63f2f); color: #fff; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.04em; vertical-align: middle; }
.lesson-lock.is-draft { background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }

/* ---- GPS WYSIWYG editor: compact admin widget polish ---- */
.gps-book-editor { padding: 4px clamp(8px, 2vw, 20px) 48px; }
.gps-editor-index-reader {
  max-width: 1180px;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(145deg, #30353c 0%, #15181d 58%, #090b0e 100%);
  color: #f8f3e8;
  box-shadow: 0 24px 55px rgba(23,21,20,0.22);
}
.gps-editor-index-reader .lesson-bar {
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gps-editor-index-reader h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); }
.gps-editor-index-reader .gps-toc-intro { max-width: 680px; color: rgba(248,243,232,0.76); }
.gps-editor-index-reader [data-add-section] {
  min-height: 42px;
  border-radius: 999px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.45);
}
.gps-editor-toc { gap: 12px; margin-top: 16px; }
.gps-editor-section {
  padding: 12px;
  border-color: rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.gps-editor-section-head {
  align-items: center;
  margin-bottom: 10px;
  padding: 2px;
}
.gps-editor-section-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}
.gps-editor-section-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff7db, #e9cc77);
  color: #1d1712;
  font-weight: 950;
  flex: none;
}
.gps-editor-section-head h2 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.02rem, 2vw, 1.35rem);
  color: #fff;
}
.gps-editor-section-count {
  color: rgba(248,243,232,0.56);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.gps-editor-section-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-section-head button,
.gps-editor-delete-lesson {
  min-height: 30px;
  padding: 0 11px;
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(180deg, #2d333a, #0d1014);
  color: #f8f3e8;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
}
.gps-editor-section-head button:hover,
.gps-editor-delete-lesson:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-1px);
}
.gps-editor-section-head button.is-danger,
.gps-editor-delete-lesson {
  background: linear-gradient(180deg, #b94a3a, #81251d);
  border-color: #641a14;
}
.gps-editor-lesson-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 7px;
}
.gps-editor-lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}
.gps-editor-lesson-list button[data-open-lesson] {
  min-height: 48px;
  border-color: rgba(255,255,255,0.13);
  border-radius: 10px;
  background: rgba(255,250,240,0.94);
  padding: 8px 10px;
}
.gps-editor-delete-lesson {
  align-self: stretch;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}
.gps-wysiwyg-toolbar {
  justify-content: flex-start;
  gap: 6px;
  padding: 8px clamp(10px, 2vw, 20px);
}
.gps-wysiwyg-toolbar button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.82rem;
}
.gps-wysiwyg-lesson {
  max-width: 1080px;
  margin-top: 18px;
  min-height: calc(100vh - 150px);
}
.gps-wysiwyg-body {
  min-height: 56vh;
  background: rgba(255,255,255,0.48);
}
.gps-wysiwyg-body .gps-player { margin: 16px 0; }

/* ---- GPS editor: refined index (searchable TOC), top controls, toolbar ---- */
.gps-editor-index-head { margin-bottom: 4px; }
.gps-editor-index-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 2px 0; }
.gps-editor-index-head .gps-toc-intro { max-width: 680px; color: rgba(248,243,232,0.76); }

.gps-editor-controls {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
}
.gps-control-group { display: grid; gap: 7px; align-content: start; }
.gps-control-lesson { flex: 1 1 380px; }
.gps-control-section { flex: 1 1 240px; }
.gps-control-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(248,243,232,0.6); }
.gps-control-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gps-control-row input, .gps-control-row select {
  min-height: 40px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: rgba(255,250,240,0.96); color: #1d1712;
  font: inherit; font-weight: 700;
}
.gps-control-row input[type="text"] { flex: 1 1 150px; min-width: 120px; }
.gps-control-row select { flex: 0 1 210px; max-width: 100%; }
.gps-control-row input:focus, .gps-control-row select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.gps-control-btn {
  min-height: 40px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: linear-gradient(180deg, #2d333a, #0d1014); color: #f8f3e8;
  font-weight: 900; cursor: pointer; white-space: nowrap;
}
.gps-control-btn:hover { border-color: rgba(255,255,255,0.34); }
.gps-control-btn.is-primary { background: linear-gradient(180deg, #d55749, #9f2f24); border-color: #6d1d16; color: #fff; }
.gps-control-btn.is-primary:hover { filter: brightness(1.06); }

/* GWJ-88: Sort + filter row, modeled on the Guitar GPS TOC controls. The
   search input takes the remaining width and the two dropdowns sit at its
   right. On narrow screens everything wraps to its own line. */
.gps-editor-search-row {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.gps-editor-search {
  flex: 1 1 280px; min-width: 0;
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07); color: #f8f3e8;
  font: inherit; font-weight: 600;
}
.gps-editor-control { display: inline-flex; align-items: center; gap: 8px; }
/* Drafts-only checkbox sits in the same flex row as the sort/filter selects.
   Sized to match the 44px control height so the row stays tidy. */
.gps-editor-checkbox {
  cursor: pointer; user-select: none;
  padding: 0 12px; min-height: 44px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07); color: #f8f3e8;
  font: inherit; font-weight: 700; font-size: 0.9rem;
}
.gps-editor-checkbox input { accent-color: var(--red, #b63f2f); width: 16px; height: 16px; }
.gps-editor-control-label {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(248,243,232,0.7);
}
.gps-editor-select {
  min-height: 44px; padding: 0 32px 0 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23f8f3e8' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 12px center;
  background-size: 10px 6px;
  color: #f8f3e8; font: inherit; font-weight: 700; -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.gps-editor-select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* Flat-list view: each row shows a "section tag" pill before the title */
.gps-editor-toc-flat .gps-editor-toc-section-tag {
  display: inline-block; padding: 2px 8px; margin-right: 8px;
  border-radius: 999px; background: rgba(255,255,255,0.10);
  color: rgba(248,243,232,0.85); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gps-editor-search::placeholder { color: rgba(248,243,232,0.5); }
.gps-editor-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.gps-editor-toc-empty { color: rgba(248,243,232,0.6); font-weight: 700; padding: 10px 2px; }

/* Section header: number + inline-editable title + count, with hover-only delete */
.gpsx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gpsx-sec-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gpsx-sec-num {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(180deg, #fff7db, #e9cc77);
  color: #1d1712; font-weight: 950;
}
.gpsx-sec-h {
  margin: 0; min-width: 0; padding: 3px 8px; border-radius: 8px;
  font-size: clamp(1.05rem, 2vw, 1.4rem); color: #fff;
}
.gpsx-sec-h:hover { background: rgba(255,255,255,0.06); }
.gpsx-sec-h:focus { outline: 2px solid var(--red); background: rgba(255,248,224,0.14); }
.gpsx-sec-count { color: rgba(248,243,232,0.56); font-size: 0.78rem; font-weight: 900; white-space: nowrap; }
.gps-editor-section-del {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: rgba(248,243,232,0.5);
  cursor: pointer; opacity: 0; box-shadow: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gps-editor-section:hover .gps-editor-section-del,
.gps-editor-section-del:focus-visible { opacity: 1; }
.gps-editor-section-del:hover { background: rgba(182,63,47,0.26); color: #ffd9d2; }
.gps-editor-section-del svg { width: 18px; height: 18px; }

/* Searchable TOC list: full titles, no truncation, no per-row buttons.
   Two columns, matching the Guitar GPS book page; collapses to one on
   narrow screens. */
.gps-editor-toc-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* Flat list (Name/Recent sort) uses the same 2-column card grid as the
   Section view. Inside each card the section-tag pill sits on its own line
   above the title so cells read cleanly (revises the old GWJ-88
   single-column fix). */
.gps-editor-toc-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 760px) {
  .gps-editor-toc-list, .gps-editor-toc-flat { grid-template-columns: 1fr; }
}
.gps-editor-toc-flat .gps-editor-toc-link { flex-wrap: wrap; align-content: flex-start; padding: 8px 12px; gap: 6px 10px; }
.gps-editor-toc-flat .gps-editor-toc-title { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
.gps-editor-toc-list li { margin: 0; }
.gps-editor-toc-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  text-align: left; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; background: rgba(255,250,240,0.96); color: #1d1712;
  padding: 6px 11px; cursor: pointer; font: inherit;
}
.gps-editor-toc-link:hover { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.gps-editor-toc-link .gps-toc-num {
  flex: none; min-width: 38px; height: 21px; padding: 0 7px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #efe7d6; color: #4a4034; font-weight: 900; font-size: 0.74rem;
}
.gps-editor-toc-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.gps-editor-toc-link .gps-toc-draft { flex: none; }

/* Polished lesson-editor toolbar widget (overrides the older dark bar) */
.gps-wysiwyg-toolbar {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1080px; margin: 0 auto 16px;
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,253,248,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(23,21,20,0.16);
}
.gps-wysiwyg-toolbar .gps-tb-group { display: flex; align-items: center; gap: 4px; }
.gps-wysiwyg-toolbar .gps-tb-group + .gps-tb-group { margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--line); }
.gps-wysiwyg-toolbar .gps-tb-spacer { flex: 1 1 auto; }
.gps-wysiwyg-toolbar .gps-tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink);
  font-weight: 800; font-size: 0.88rem; line-height: 1; cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gps-wysiwyg-toolbar .gps-tb-btn svg { width: 17px; height: 17px; }
.gps-wysiwyg-toolbar .gps-tb-btn:hover { background: #f1ebe0; color: var(--ink); transform: none; }
.gps-wysiwyg-toolbar .gps-tb-actions .gps-tb-btn { border-color: var(--line); background: #fffaf0; }
.gps-wysiwyg-toolbar .gps-tb-actions .gps-tb-btn:hover { border-color: var(--red); color: var(--red-dark); background: #fff; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-primary { background: var(--red); color: #fff; border-color: #6d1d16; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-primary:hover { background: var(--red-dark); color: #fff; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-danger { color: var(--red); background: #fff; border-color: rgba(182,63,47,0.4); }
.gps-wysiwyg-toolbar .gps-tb-btn.is-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* GPS editor index: original white / paper look (matches the book) */
.gps-editor-index-reader {
  background: var(--panel, #fff);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
}
.gps-editor-index-head h1 { color: var(--ink); }
.gps-editor-index-head .gps-toc-intro { color: var(--muted); }
.gps-editor-controls { background: #fbfaf7; border-color: var(--line); }
.gps-control-label { color: var(--muted); }
.gps-control-row input, .gps-control-row select { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-control-btn { background: #fffaf0; color: var(--ink); border-color: var(--line); }
.gps-control-btn:hover { border-color: var(--red); color: var(--red-dark); }
.gps-control-btn.is-primary { background: var(--red); color: #fff; border-color: #6d1d16; }
.gps-control-btn.is-primary:hover { background: var(--red-dark); color: #fff; }
.gps-editor-search { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-editor-search::placeholder { color: var(--muted); }
/* GWJ-88: light-theme overrides for the sort/filter selects when the editor
   chrome is on a paper background. */
.gps-editor-control-label { color: var(--muted); }
.gps-editor-select {
  background-color: #fff; color: var(--ink); border-color: var(--line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231d1712' d='M0 0l5 6 5-6z'/></svg>");
}
.gps-editor-toc-flat .gps-editor-toc-section-tag {
  background: rgba(0,0,0,0.06); color: var(--muted);
}
/* Light-theme override for the drafts-only checkbox (matches the search input). */
.gps-editor-checkbox { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-editor-toc-empty { color: var(--muted); }
.gps-editor-section {
  background: var(--panel, #fff);
  border-color: var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
.gpsx-sec-h { color: var(--ink); }
.gpsx-sec-h:hover { background: rgba(23, 21, 20, 0.05); }
.gpsx-sec-count { color: var(--muted); }
.gps-editor-section-del { color: var(--muted); }
.gps-editor-section-del:hover { background: #fbe9e6; color: var(--red-dark); }
.gps-editor-toc-link { background: #fbfaf7; color: var(--ink); border-color: var(--line); }
.gps-editor-toc-list { gap: 5px; }
/* Delete lesson sits bottom-right of the editor, not in the toolbar. */
.gps-editor-delete-row { display: flex; justify-content: flex-end; max-width: 1080px; margin: 28px auto 0; }

/* ---- GPS editor: sub-tab strip (Lessons / Authoring guide) ---- */
.gps-editor-tabs { margin: 8px 0 16px; }
.gps-editor-tab-panel { display: none; }
.gps-editor-tab-panel.is-active { display: block; }
.gps-editor-tab-panel[hidden] { display: none; }

/* ---- Authoring guide ---- */
.gps-authoring-guide { display: none; }
.gps-authoring-guide.is-active { display: flex; flex-direction: column; gap: 18px; }
.gps-guide-intro h2 { color: var(--ink); margin: 0 0 8px; }
.gps-guide-intro p { color: var(--muted); line-height: 1.6; margin: 0 0 8px; max-width: 72ch; }
.gps-guide-tip { background: #fff9e6; border: 1px solid #f0d97b; border-radius: 10px; padding: 12px 14px; color: var(--ink) !important; }
.gps-guide-tip code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }

.gps-guide-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.gps-guide-card-head h3 {
  color: var(--ink);
  font-size: 1.15rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gps-guide-card-head p { color: var(--muted); margin: 0 0 14px; line-height: 1.55; max-width: 72ch; }
.gps-guide-card-head p code,
.gps-guide-ask code,
.gps-guide-bullets code,
.gps-guide-note code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }
.gps-guide-pill {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--red-dark); background: #fbe9e6; border: 1px solid #f0c7c1;
  padding: 3px 8px; border-radius: 999px;
}
.gps-guide-demo {
  background: #fbfaf7;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 14px;
  overflow-x: auto;
}
.gps-guide-demo .chord-figs-row { justify-content: flex-start; }
.gps-guide-demo .gps-player { margin: 0; }
.gps-guide-ask {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 14px;
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.55;
}
.gps-guide-ask strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red-dark); margin-bottom: 6px; }
.gps-guide-ask ul { margin: 0; padding-left: 18px; }
.gps-guide-ask li { margin: 4px 0; }
.gps-guide-ask em { color: var(--ink); font-style: normal; font-weight: 700; }

.gps-guide-code { margin-top: 6px; }
.gps-guide-code summary {
  cursor: pointer; font-weight: 800; color: var(--muted);
  padding: 6px 8px; border-radius: 6px;
  list-style: none;
}
.gps-guide-code summary::-webkit-details-marker { display: none; }
.gps-guide-code summary::before {
  content: '\25B8'; display: inline-block; margin-right: 6px;
  transition: transform 120ms ease;
}
.gps-guide-code[open] > summary::before { transform: rotate(90deg); }
.gps-guide-code summary:hover { color: var(--ink); background: #fbfaf7; }
.gps-guide-code pre {
  background: #1b1916; color: #f5efe2;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.gps-guide-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.gps-guide-note { color: var(--muted); font-size: 0.92rem; margin: 8px 0 0; line-height: 1.55; }

.gps-guide-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.gps-guide-table th,
.gps-guide-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.gps-guide-table th { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gps-guide-table tbody tr:last-child td { border-bottom: 0; }

.gps-guide-bullets { margin: 0; padding-left: 18px; color: var(--ink); line-height: 1.6; }
.gps-guide-bullets li { margin: 6px 0; }

/* ---- GPS editor: MCP / AI access panel ---- */
.gps-mcp-access { margin-top: clamp(18px, 3vw, 30px); }
.gps-mcp-access code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }
.gps-mcp-new { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #fff; }
.gps-mcp-new.is-hidden { display: none; }
.gps-mcp-token { display: block; word-break: break-all; background: #1b1916; color: #f5efe2; padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 0.9rem; }
.gps-mcp-tokens { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.gps-mcp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.gps-mcp-row strong { display: block; }

/* ---- Admin students CRM ---- */
.students-bar { margin-bottom: clamp(14px, 2vw, 20px); }
.students-bar-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.students-bar-row .roster-search { flex: 1; margin: 0; }
.students-bar-row .button { flex: 0 0 auto; }
.students-bar .roster-list { display: flex; gap: 10px; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.students-bar .roster-item { flex: 0 0 auto; min-width: 210px; }
.admin-detail { max-width: 960px; }
.roster-search { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff; color: var(--ink); font: inherit; margin-bottom: 4px; }
.roster-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.roster-empty { color: var(--muted); font-size: 0.9rem; padding: 6px 2px; }
.prof-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.prof-head h2 { font-size: 1.6rem; }
.prof-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.prof-grid-actions { grid-column: 1 / -1; justify-content: flex-start; }
.prof-adminnote { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; resize: vertical; }
.prof-adminnote:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* GWJ-50: show ~4 upcoming lessons, scroll for the rest (teacher student page). */
.prof-sched { display: flex; flex-direction: column; gap: 8px; max-height: 264px; overflow-y: auto; padding-right: 2px; }
.prof-sched-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.prof-sched-row strong { display: block; }
.prof-sched-series { border-left: 3px solid var(--red, #b63f2f); background: #faf8f4; }
.prof-series { display: flex; flex-direction: column; gap: 8px; }
.prof-danger { border-color: rgba(182,63,47,.35); }
.button.danger { background: #fff; color: var(--red, #b63f2f); border-color: rgba(182,63,47,.5); }
.button.danger:hover { background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }
@media (max-width: 560px) { .prof-grid { grid-template-columns: 1fr; } }

/* ---- Admin payments ---- */
.pay-layout { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(14px, 2vw, 20px); align-items: start; margin-bottom: clamp(14px, 2vw, 20px); }
.pay-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Package/plan name is long; the credit count is just a number — give the
   package the room and keep credits narrow. */
.pay-row-pkg { grid-template-columns: 1fr 88px; }
/* "Add a payment" opens as a compact popover anchored under the top-right
   button, instead of taking over the tab area. */
.pay-record-panel.is-active {
  display: block;
  position: absolute;
  top: 60px;
  right: clamp(18px, 4vw, 52px);
  width: min(420px, calc(100vw - 32px));
  z-index: 45;
}
.pay-record-card { max-width: 560px; }
.pay-record-panel .pay-record-card { max-width: none; margin: 0; box-shadow: 0 16px 46px rgba(0,0,0,.22); }
.pay-record-card .admin-form { gap: 11px; margin-top: 4px; }
.pay-record-card .admin-form label { gap: 4px; }
.pay-record-card .admin-form label span { font-size: 0.78rem; }
.pay-record-card .admin-form input,
.pay-record-card .admin-form select { padding: 8px 11px; }
.pay-record-card .muted-line { margin: 0 0 4px; }
.pay-record-card .admin-form-actions { margin-top: 6px; }
.pay-student-picker { position: relative; }
.pay-student-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 12;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23,21,20,0.18);
}
.pay-student-results.is-open { display: grid; }
.pay-student-results button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.pay-student-results button:last-child { border-bottom: 0; }
.pay-student-results button:hover,
.pay-student-results button:focus-visible { background: rgba(182,63,47,0.08); outline: none; }
.pay-student-results strong { font-size: 0.92rem; }
.pay-student-results span { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.pay-student-results .muted-line { padding: 10px 12px; }
.pay-table { display: flex; flex-direction: column; }
.pay-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: none; }
.pay-row-main { display: flex; flex-direction: column; }
.pay-row-side { display: flex; flex-direction: column; align-items: flex-end; }
.pay-amount { font-weight: 900; }
.pay-record-inline { display: flex; gap: 8px; align-items: center; }
.pay-record-inline select { width: auto; max-width: 230px; }
@media (max-width: 860px) { .pay-layout { grid-template-columns: 1fr; } }

/* ---- Student portal: lessons & scheduling ---- */
.next-lesson { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(182,63,47,.10), rgba(182,63,47,.03)); border: 1px solid rgba(182,63,47,.25); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.next-lesson-main { display: flex; flex-direction: column; gap: 2px; }
.next-lesson-eyebrow { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red-dark, #8f2f22); }
.next-lesson-main strong { font-size: 1.15rem; }
.next-lesson-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.next-lesson-empty { display: flex; flex-direction: column; gap: 2px; }
.sl-layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.sl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sl-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; }
.sl-cell.cal-empty { border: none; background: none; }
.sl-cell.is-today { border-color: var(--ink); font-weight: 900; }
.sl-cell.has-lesson { background: var(--red); border-color: var(--red); color: #fff; }
.sl-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.sl-list-title { margin: 0; font-size: 1.05rem; }
.sl-pager { display: flex; align-items: center; gap: 6px; }
.sl-pager.is-hidden { display: none; }
.sl-pg { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; font-size: 0.95rem; line-height: 1; display: grid; place-items: center; }
.sl-pg:hover:not(:disabled) { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.sl-pg:disabled { opacity: 0.4; cursor: default; }
.sl-pg-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.sl-head-right { display: flex; align-items: center; gap: 10px; }

/* Past lessons page controls (search + filter) */
.past-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.past-controls .past-search { flex: 1 1 220px; min-width: 0; margin: 0; }
.past-filter { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; }
.past-filter:focus { outline: 2px solid var(--red, #b63f2f); outline-offset: 1px; }
.portal-past-view.is-active { max-width: 1000px; margin: 0 auto; }
.sl-upcoming { display: flex; flex-direction: column; gap: 10px; }
/* GWJ-50: show ~4 upcoming lessons, scroll for the rest (student portal). */
.sl-upcoming[data-sl-upcoming] { max-height: 296px; overflow-y: auto; padding-right: 2px; }
.sl-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.sl-item-main { display: flex; flex-direction: column; }
.sl-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-cancel { color: var(--muted); }
.sl-past-wrap { margin-top: 16px; }
.sl-past-head { margin-top: 0; }
.sl-item-past { background: #faf8f4; border-style: dashed; }
.sl-item-past .sl-item-main strong { font-weight: 700; }
.sl-zoom-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e7eef0; color: #2a6b78; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.sl-cancel:hover { border-color: var(--red); color: var(--red); }
.sl-modal { position: fixed; inset: 0; background: rgba(20,17,15,.55); display: grid; place-items: center; z-index: 80; padding: 20px; }
.sl-modal.is-hidden { display: none; }
.sl-modal-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 22px; width: min(520px, 100%); max-height: 84vh; overflow: auto; box-shadow: var(--shadow); }
.sl-modal-head { display: flex; justify-content: space-between; align-items: center; }
.sl-modal-head h3 { margin: 0; }
.sl-modal-close { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.sl-modal-sub { margin: 6px 0 14px; }
.sl-cancel-when { font-weight: 800; margin: 8px 0 4px; }
.sl-cancel-msg { color: var(--muted); margin: 4px 0 18px; }
.sl-cancel-warn { margin: 4px 0 12px; }
.sl-cancel-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; font-weight: 600; margin: 0 0 18px; cursor: pointer; }
.sl-cancel-ack input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.sl-cancel-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sl-slots { display: flex; flex-direction: column; gap: 12px; }
.sl-slot-group { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
.sl-slot-date { font-weight: 800; font-size: 0.82rem; color: var(--ink); }
.sl-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-slot { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 7px 11px; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.sl-slot:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 720px) { .sl-layout { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .book-layout, .schedule-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Guitar GPS technique animation cards
   ============================================================ */
.gps-motion-card {
  --motion-red: #c54232;
  --motion-amber: #f0c879;
  margin: 24px 0 30px;
  border: 3px solid #10100f;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.15), transparent 24%),
    linear-gradient(135deg, #363b40, #0b0d0f 68%);
  color: #f5efe2;
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(280px, 1.35fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
}
.gps-motion-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}
.gps-motion-copy span {
  color: #f5dfb0;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gps-motion-copy strong {
  color: #f5efe2;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1;
}
.gps-motion-copy p {
  margin: 0;
  color: rgba(245,239,226,0.82);
  line-height: 1.45;
}
.paper-page .lesson-body .gps-motion-copy strong { color: #f5efe2; }
.paper-page .lesson-body .gps-motion-copy p { color: rgba(245,239,226,0.82); }
.motion-fretboard {
  position: relative;
  min-height: 220px;
  border: 2px solid rgba(16,16,15,0.9);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 12%, transparent 88%, rgba(0,0,0,0.18)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #332118, #1d120e 54%, #2d1b13);
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0,0,0,0.38);
}
.motion-fretboard::before,
.motion-fretboard::after {
  content: "";
  position: absolute;
  inset: 17% 8% 18%;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(235,225,202,0.85) 12.4% 13.2%, transparent 13.6% 28%, rgba(235,225,202,0.85) 28.4% 29.2%, transparent 29.6% 44%, rgba(235,225,202,0.85) 44.4% 45.2%, transparent 45.6% 60%, rgba(235,225,202,0.85) 60.4% 61.2%, transparent 61.6% 76%, rgba(235,225,202,0.85) 76.4% 77.2%, transparent 77.6% 100%);
  pointer-events: none;
}
.motion-fretboard::after {
  background:
    linear-gradient(0deg, rgba(246,226,192,0.95) 0 1.5%, transparent 1.7% 18%, rgba(235,235,229,0.82) 18.3% 19.4%, transparent 19.7% 38%, rgba(235,235,229,0.82) 38.3% 39.4%, transparent 39.7% 58%, rgba(235,235,229,0.82) 58.3% 59.4%, transparent 59.7% 78%, rgba(235,235,229,0.82) 78.3% 79.4%, transparent 79.7% 97.5%, rgba(235,235,229,0.82) 97.8% 99%);
  inset: 24% 5% 22%;
}
.motion-dot,
.motion-pick,
.motion-palm,
.motion-tap-finger {
  position: absolute;
  z-index: 3;
}
.motion-dot {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #151515;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  font-weight: 900;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
.motion-dot.red { background: var(--motion-red); }
.motion-note {
  position: absolute;
  z-index: 4;
  color: #f5efe2;
  font-weight: 900;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px #000;
}
.motion-arrow {
  position: absolute;
  z-index: 2;
  height: 4px;
  border-radius: 999px;
  background: var(--motion-amber);
  box-shadow: 0 0 16px rgba(240,200,121,0.6);
  transform-origin: left center;
}
.motion-bend .bend-main { left: 55%; top: 59%; animation: bendDot 2.6s ease-in-out infinite; }
.motion-bend .bend-helper-1 { left: 35%; top: 59%; }
.motion-bend .bend-helper-2 { left: 45%; top: 59%; }
.motion-bend .bend-target { left: 56%; top: 35%; color: #f4d392; }
.motion-bend .motion-arrow { left: 55%; top: 58%; width: 120px; transform: rotate(-45deg); animation: bendArrow 2.6s ease-in-out infinite; }
.motion-legato .hammer { left: 42%; top: 59%; animation: hammerMove 2.7s cubic-bezier(.2,.75,.15,1) infinite; }
.motion-legato .pull { left: 66%; top: 59%; animation: pullMove 2.7s cubic-bezier(.2,.75,.15,1) infinite; }
.motion-legato .anchor { left: 28%; top: 59%; }
.motion-legato .motion-arrow { left: 32%; top: 38%; width: 130px; transform: rotate(0deg); }
.motion-slide .slide-dot { left: 30%; top: 58%; animation: slideDot 2.8s ease-in-out infinite; }
.motion-slide .slide-start { left: 28%; top: 70%; }
.motion-slide .slide-end { left: 69%; top: 70%; }
.motion-slide .motion-arrow { left: 32%; top: 58%; width: 210px; animation: slideGlow 2.8s ease-in-out infinite; }
.motion-tapping .tap-note { left: 73%; top: 58%; animation: tapPulse 2.2s ease-in-out infinite; }
.motion-tapping .left-note { left: 34%; top: 58%; }
.motion-tapping .motion-tap-finger {
  left: 74%;
  top: 3%;
  width: 42px;
  height: 90px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f1d3b4, #b87955);
  transform: translate(-50%, 0);
  animation: tapFinger 2.2s ease-in-out infinite;
  box-shadow: inset 0 -8px 12px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.32);
}
.motion-picking .motion-pick,
.motion-tremolo .motion-pick {
  width: 42px;
  height: 50px;
  background: var(--motion-red);
  clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,0.38));
}
.motion-picking .motion-pick { left: 50%; top: 35%; animation: pickDownUp 1.2s ease-in-out infinite; }
.motion-tremolo .motion-pick { left: 54%; top: 30%; animation: tremoloPick .34s ease-in-out infinite; }
.motion-tremolo .motion-burst {
  position: absolute;
  z-index: 2;
  left: 47%;
  top: 57%;
  width: 110px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(90deg, rgba(240,200,121,0.85) 0 6px, transparent 6px 14px);
  opacity: 0.7;
  animation: tremoloBurst .34s linear infinite;
}
.motion-muting .motion-palm {
  left: 58%;
  top: 23%;
  width: 140px;
  height: 86px;
  border-radius: 40px 40px 34px 34px;
  background: linear-gradient(180deg, #efcaa9, #ad704e);
  transform: translate(-50%, 0);
  animation: palmMute 2.4s ease-in-out infinite;
  box-shadow: inset 0 -10px 12px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.32);
}
.motion-muting .mute-mark {
  left: 48%;
  top: 58%;
  font-size: 2rem;
  color: var(--motion-red);
  animation: muteX 2.4s ease-in-out infinite;
}
@keyframes bendDot {
  0%, 20%, 100% { transform: translate(-50%, -50%); }
  48%, 72% { transform: translate(-50%, calc(-50% - 42px)); }
}
@keyframes bendArrow {
  0%, 20%, 100% { opacity: .35; transform: rotate(-45deg) scaleX(.65); }
  48%, 72% { opacity: 1; transform: rotate(-45deg) scaleX(1); }
}
@keyframes hammerMove {
  0%, 24%, 100% { left: 42%; top: 28%; transform: translate(-50%, -50%) scale(.82); opacity: .75; }
  42%, 78% { left: 42%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes pullMove {
  0%, 38% { left: 66%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  56%, 76% { left: 58%; top: 75%; transform: translate(-50%, -50%) scale(.9); opacity: .45; }
  100% { left: 66%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes slideDot {
  0%, 18%, 100% { left: 30%; }
  48%, 74% { left: 70%; }
}
@keyframes slideGlow {
  0%, 18%, 100% { opacity: .35; transform: scaleX(.35); }
  48%, 74% { opacity: 1; transform: scaleX(1); }
}
@keyframes tapFinger {
  0%, 30%, 100% { top: 4%; }
  45%, 68% { top: 25%; }
}
@keyframes tapPulse {
  0%, 33%, 100% { transform: translate(-50%, -50%) scale(.95); }
  48%, 70% { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 10px rgba(197,66,50,0.18); }
}
@keyframes pickDownUp {
  0%, 100% { top: 27%; transform: translate(-50%, -50%) rotate(12deg); }
  50% { top: 71%; transform: translate(-50%, -50%) rotate(-10deg); }
}
@keyframes tremoloPick {
  0%, 100% { transform: translate(-50%, -50%) rotate(15deg); top: 31%; }
  50% { transform: translate(-50%, -50%) rotate(-15deg); top: 65%; }
}
@keyframes tremoloBurst {
  from { background-position: 0 0; opacity: .42; }
  to { background-position: 28px 0; opacity: .9; }
}
@keyframes palmMute {
  0%, 100% { top: 16%; opacity: .88; }
  40%, 72% { top: 40%; opacity: 1; }
}
@keyframes muteX {
  0%, 30%, 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  45%, 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@media (max-width: 760px) {
  .gps-motion-card { grid-template-columns: 1fr; }
  .motion-fretboard { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .gps-motion-card *, .gps-motion-card *::before, .gps-motion-card *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Close-voiced triad inversions (gps-inversions.js): lesson reference + tool ---- */
.inv-reference { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1rem 0; }
.inv-set { border: 1px solid #e5e0d5; border-radius: 12px; padding: 12px 14px 6px; background: #fffdf8; }
.inv-set-title { margin: 0 0 10px; font-size: 1rem; color: #117a65; }
.inv-set-title span { color: #9a9384; font-weight: 600; }
.inv-row { margin-bottom: 12px; }
.inv-row-label { font-weight: 700; font-size: 0.88rem; color: #2c3e50; margin-bottom: 4px; }
.inv-row-boxes { display: flex; gap: 8px; }
.inv-box { flex: 1 1 0; min-width: 0; text-align: center; }
.inv-box-cap { display: block; font-size: 0.72rem; color: #5d554d; margin-bottom: 2px; font-weight: 600; }
.inv-chordbox { width: 100%; height: auto; max-width: 130px; }
@media (max-width: 720px) { .inv-reference { grid-template-columns: 1fr; } }

/* Inversions tool (tools.html) */
.inv-tool-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.inv-tool-controls label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 700; color: #5d554d; gap: 4px; }
.inv-tool-controls select, .inv-tool-controls input { padding: 6px 8px; border: 1px solid #cfc8ba; border-radius: 8px; font-size: 0.95rem; }
.inv-tool-modes { display: inline-flex; border: 1px solid #cfc8ba; border-radius: 8px; overflow: hidden; }
.inv-tool-modes button { padding: 7px 14px; border: 0; background: #fff; cursor: pointer; font-weight: 700; color: #5d554d; }
.inv-tool-modes button.is-active { background: #117a65; color: #fff; }
.inv-explorer-boxes { display: flex; gap: 14px; flex-wrap: wrap; }
.inv-explorer-boxes .inv-box { flex: 0 0 150px; }

/* ---- Schedule: searchable student picker (schedule.js) ---- */
.sched-student-search { position: relative; }
.sched-student-search input[type="text"] { width: 100%; }
.sched-student-results { position: absolute; z-index: 40; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #cfc8ba; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); max-height: 260px; overflow-y: auto; }
.sched-student-results li { margin: 0; }
.sched-student-results button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: 0.95rem; text-align: left; color: #2c3e50; }
.sched-student-results button:hover, .sched-student-results button:focus { background: #f1ede4; }
.sched-student-cr { color: #117a65; font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.sched-student-empty { padding: 8px 10px; color: #9a9384; font-size: 0.9rem; }
.sched-student-results button.is-inactive span:first-child { color: #9a9384; }
.sched-student-tag { font-style: normal; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #b04a3a; background: #f6e7e3; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.sched-student-toggle { border-top: 1px solid #ece7dc; margin-top: 4px; }
.sched-student-toggle button { width: 100%; padding: 8px 10px; border: 0; background: none; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #117a65; text-align: left; border-radius: 8px; }
.sched-student-toggle button:hover { background: #eef5f2; }

/* === Billing view (student portal) === */
.portal-billing-view .billing-policy h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.portal-billing-view .billing-policy h2:first-child { margin-top: 0; }
.portal-billing-view .billing-policy p { margin: 0 0 10px; line-height: 1.5; }
.portal-billing-view .billing-policy ul { margin: 0 0 12px 20px; padding: 0; }
.portal-billing-view .billing-policy li { margin: 4px 0; }
.billing-status { display: inline-block; font-weight: 800; padding: 4px 10px; border-radius: 999px; font-size: 0.84rem; background: #e8f4ec; color: #186a3b; margin: 0 0 12px; }
.billing-status-cancelled_pending { background: #fdeaea; color: #8e2820; }
.billing-status-paused_vacation, .billing-status-paused_payment_failure { background: #fff3df; color: #8a5a18; }
.billing-grid { display: grid; gap: 8px; margin: 0 0 12px; }
.billing-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; margin: 0; align-items: baseline; }
.billing-label { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.plan-list { display: grid; gap: 12px; margin: 12px 0 18px; }
.plan-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.plan-card:hover { border-color: #c5b9a1; }
.plan-card.is-selected { border-color: var(--red); background: #fff8f5; box-shadow: 0 0 0 2px rgba(182,63,47,0.12); }
.plan-card input[type="radio"] { margin-top: 4px; }
.plan-card-body { display: grid; gap: 4px; }
.plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-card-head strong { font-size: 1.05rem; }
.plan-price-amt { font-size: 1.4rem; font-weight: 950; color: var(--ink); }
.plan-price-per { color: var(--muted); font-weight: 700; margin-left: 2px; }
.billing-code-row { margin: 16px 0; }
.billing-code-label { display: grid; gap: 6px; }
.billing-code-label > span { color: var(--muted); font-size: 0.86rem; font-weight: 800; }
.billing-code-input-row { display: flex; gap: 8px; align-items: center; }
.billing-code-input-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; text-transform: uppercase; }
.billing-code-preview { background: #f7f1e6; border: 1px solid #e0d3b8; border-radius: 10px; padding: 10px 12px; margin: 6px 0 14px; }
.form-msg.is-error { color: var(--red-dark); }

/* === Admin Billing → Discount codes === */
.codes-form { background: #fbfaf7; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.codes-form-row { display: grid; grid-template-columns: minmax(160px, 1fr) 100px minmax(160px, 1fr) minmax(160px, 1fr); gap: 12px; margin-bottom: 10px; }
@media (max-width: 720px) { .codes-form-row { grid-template-columns: 1fr 1fr; } }
.codes-form input[type="text"], .codes-form input[type="number"], .codes-form input[type="date"], .codes-form select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%; }
.codes-form input:disabled { background: #efece4; color: var(--muted); }
.codes-table { display: grid; gap: 10px; }
.codes-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.codes-row-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codes-row-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: 0.02em; }
.codes-row-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 0.86rem; }
.codes-row-meta strong { color: var(--ink); }
.codes-row-notes { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; font-style: italic; }
.codes-row-actions { display: flex; gap: 6px; margin-top: 4px; }
.code-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.code-chip-on { background: #e8f4ec; color: #186a3b; }
.code-chip-off { background: #ece9e1; color: #6a635a; }
.code-chip-expired { background: #fdeaea; color: #8e2820; }

/* === Admin Students → Payments tab: subscription summary === */
.sub-summary { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 8px 0 0; }
.sub-summary dt { color: var(--muted); font-size: 0.86rem; font-weight: 700; margin: 0; }
.sub-summary dd { margin: 0; }
.sub-status-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: #ece9e1; color: #6a635a; }
.sub-status-chip.is-ok { background: #e8f4ec; color: #186a3b; }
.sub-status-chip.is-warn { background: #fff3df; color: #8a5a18; }

/* === Admin Students Info tab: legacy packages toggle === */
/* Scoped under .admin-form to override the generic `.admin-form label { display: grid; }`
   that was forcing the checkbox + label text to stack vertically. */
.admin-form .legacy-packages-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; cursor: pointer; }
.legacy-packages-toggle input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.legacy-packages-toggle span { font-size: 0.9rem; line-height: 1.3; color: var(--ink); font-weight: 700; }

/* === Billing → Packages tab: compact pack grid + phase-out notice === */
.billing-phaseout { background: #fff3df; border: 1px solid #f0c79a; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 0.88rem; line-height: 1.45; color: #6a4a18; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 14px; }
.pack-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; align-content: start; }
.pack-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pack-card-name { font-size: 0.98rem; font-weight: 800; color: var(--ink); }
.pack-card-price { font-size: 1.15rem; font-weight: 950; color: var(--ink); }
.pack-card-meta { color: var(--muted); font-size: 0.82rem; }
.pack-card-buy { margin-top: 6px; align-self: flex-start; padding: 6px 14px; font-size: 0.86rem; }

/* === Admin Students → Info tab: tighter, side-by-side layout === */
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 960px) { .info-grid { grid-template-columns: 1fr; } }
.info-card { padding: 14px 16px; }
.info-card h3 { margin: 0 0 10px; font-size: 1rem; }
.info-card .tool-header { margin-bottom: 10px; }
.info-card .tool-header h3 { margin: 0; }
.info-card .prof-grid { gap: 8px 12px; }
.info-card .prof-grid label > span { font-size: 0.78rem; margin-bottom: 2px; }
.info-card .prof-grid input, .info-card .prof-grid select { padding: 6px 9px; font-size: 0.9rem; }
.prof-grid-full { grid-column: 1 / -1; }
.admin-form .info-card .legacy-packages-toggle { margin-top: 10px; padding: 8px 12px; }
.info-zoom-card { padding: 12px 16px; }
.info-zoom-card .zoom-row { display: flex; gap: 8px; align-items: center; }
.info-zoom-card .zoom-row input { flex: 1; padding: 6px 9px; font-size: 0.9rem; }

/* === Legacy tab styling (Packages + Package policy) — visually distinct
   from the always-on monthly subscription tabs. === */
/* Cancel-lesson + Pause-subscription modals share a stacked-reasons
   pattern. .cancel-reason-list is a vertical list of radio choices; each
   .cancel-reason wraps an input + label text block with consistent spacing. */
/* Student avatar on the portal Today greeting. The circle holds either an
   <img> photo or initials; the pencil overlay invites the click-to-upload
   action. "Remove photo" appears beneath the circle when a photo is set. */
.portal-welcome { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.portal-avatar { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.portal-avatar-btn {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  position: relative; display: block;
}
.portal-avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em;
  background: #ede9fe; color: #4c1d95;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
  transition: transform .12s ease;
}
.portal-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-avatar-btn:hover .portal-avatar-circle { transform: scale(1.03); }
.portal-avatar-pencil {
  position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #20211f; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; line-height: 1;
  border: 2px solid #fff;
}
.portal-avatar-remove {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.78rem; padding: 2px 4px;
}
.portal-avatar-remove:hover { color: var(--red); text-decoration: underline; }

/* Upcoming-lessons list header — title left, "Delete all" right. */
.asched-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.asched-list-head h3 { margin: 0; }

/* Quiet button that flips to a red destructive style on hover. Used for
   one-off destructive actions (bulk delete) that we don't want screaming
   red at rest but should clearly indicate danger when hovered. */
.is-danger-hover:hover { color: var(--red); border-color: var(--red); background: #fff7f5; }

/* Reschedule credits card on the admin Student detail Schedule tab.
   Foregrounds "make-ups Jimmy owes" so they don't get lost. Teacher-cancel
   credits get a louder accent because Jimmy is on the hook to offer
   make-up times for those. */
.resched-credits-card { border-color: #f1d6a8; background: linear-gradient(180deg, #fff8eb 0%, #fff 60%); }
.resched-credits-count { font-size: 0.8rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #f3e9d8; color: #7a5618; letter-spacing: 0.04em; text-transform: uppercase; }
.resched-credits-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.resched-credit-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid #e5d6b2; border-radius: 10px;
  background: #fff;
}
.resched-credit-main { display: grid; gap: 2px; }
.resched-credit-source { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; width: max-content; }
.resched-credit-source.is-teacher { background: #fde2dc; color: #7a1a0e; }
.resched-credit-source.is-student { background: #e6efe6; color: #2d6a2d; }
.resched-credit-origin { color: var(--muted); font-size: 0.88rem; }
.resched-credit-deadline { text-align: right; }
.resched-credit-deadline strong { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.resched-credit-deadline span { font-weight: 700; }

/* Revenue dashboard on /payments.html (admin Billing → Revenue tab).
   Pure-SVG bar chart so we don't ship a chart-lib dependency.

   Summary cards at the top show the next-30-days forecast + this month's
   actual received. The chart below combines history (filled) and forecast
   (faded), with the current month getting a special accent + overlay for
   "still expected this month". The forecast table breaks down each
   upcoming month into its line items (per-student per-charge). */
.revenue-card { display: grid; gap: 20px; }
.revenue-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.revenue-summary-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; gap: 4px; }
.revenue-summary-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.revenue-summary-value { font-size: 1.6rem; font-weight: 800; }
.revenue-summary-meta { color: var(--muted); font-size: 0.86rem; }

.revenue-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.revenue-range-toggle { display: inline-flex; gap: 4px; padding: 3px; background: #f4efe6; border-radius: 999px; }
.revenue-range-btn { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 0.84rem; color: var(--muted); border-radius: 999px; }
.revenue-range-btn.is-active { background: #fff; color: #20211f; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.revenue-chart { overflow-x: auto; padding-top: 4px; }
.rv-svg { display: block; width: 100%; min-width: 360px; height: 260px; }
.rv-axis-line { stroke: #ece8df; stroke-width: 1; }
.rv-axis-label { font-size: 11px; fill: var(--muted); text-anchor: end; font-weight: 700; }
.rv-x-label { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.rv-bar { fill: #6a8d57; transition: fill .12s ease; }
.rv-bar:hover { fill: #4f6f3f; }
.rv-bar-current { fill: #d27a35; }
.rv-bar-current:hover { fill: #b06425; }
.rv-bar-overlay { fill: #ecc89b; }
.rv-bar-future { fill: #d8d3c5; }
.rv-bar-future:hover { fill: #b9b3a2; }

.rv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
.rv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rv-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #6a8d57; }
.rv-swatch-current { background: #d27a35; }
.rv-swatch-future { background: #d8d3c5; }

.revenue-section-title { margin: 8px 0 4px; font-size: 1.05rem; }
.revenue-forecast-table { display: grid; gap: 10px; }
.rv-fc-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rv-fc-row.rv-fc-empty { display: flex; align-items: baseline; justify-content: space-between; }
.rv-fc-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rv-fc-row-total { font-weight: 800; }
.rv-fc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rv-fc-items li { display: grid; grid-template-columns: 110px 1fr 130px 80px; gap: 10px; align-items: baseline; font-size: 0.9rem; }
.rv-fc-date { color: var(--muted); }
.rv-fc-name { font-weight: 700; }
.rv-fc-type { color: var(--muted); font-size: 0.8rem; }
.rv-fc-amt { text-align: right; font-weight: 700; }

/* Pack status card on the Packages tab — sits at the top when the student
   already has an active pack, showing the expiry + auto-renew state with a
   one-click toggle. Same warm-cream palette as the Legacy group header. */
.pack-status-card {
  border: 1px solid #e0d3b8;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #fdf6e9 0%, #fff 100%);
}
.pack-status-card .portal-card-head { align-items: flex-start; }
.pack-status-detail { margin: 4px 0 0; }

/* Auto-renew opt-in checkbox under the pack picker. Sits as its own row,
   uses the same .cancel-reason styling so it feels like part of the
   purchase form rather than an afterthought. */
.pack-autorenew-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fafaf7;
  margin: 10px 0;
}
.pack-autorenew-row input[type="checkbox"] { margin-top: 3px; }
/* Buy button sits bottom-left, below the auto-renew checkbox. */
.pack-buy-row { display: flex; justify-content: flex-start; margin: 4px 0 2px; }

.cancel-lesson-card, .pause-sub-card { max-width: 540px; }

/* Plan-card "Discard" button — escape hatch for a misclicked "+ Log a
   lesson". Quieter than Save (no fill) and tinted to read as a soft
   revert action, not a destructive one. */
.plan-discard-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  margin-right: 8px;
}
.plan-discard-btn:hover {
  color: var(--red);
  border-color: var(--red);
  background: #fff7f5;
}
.cancel-reason-list { display: grid; gap: 10px; margin: 8px 0 14px; }
.cancel-reason {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.cancel-reason:hover { border-color: #c5b9a1; background: #fafaf7; }
.cancel-reason input[type="radio"], .cancel-reason input[type="checkbox"] { margin-top: 3px; }
.cancel-reason em { color: var(--muted); font-style: normal; font-weight: 500; font-size: 0.88em; }

/* Subscription card pause history container (filled async if needed). */
.sub-pauses:empty { display: none; }

/* Auto-save affordances on the admin Info tab.
   .saved-pill lives in each card's .tool-header and is hidden by default.
   We add .is-on to fade it in for ~1.4s after a successful save; it can
   also flip to .is-saving (mid-flight) or .is-error (rejected). */
.saved-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6f1e6; color: #2d6a2d;
  border: 1px solid #c7dfc7;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  pointer-events: none; user-select: none;
}
.saved-pill.is-on { opacity: 1; transform: translateY(0); }
.saved-pill.is-saving { background: #f3eedb; color: #735a18; border-color: #e0d3b8; }
.saved-pill.is-error { background: #fbe2dc; color: #962b1a; border-color: #f1b7a9; }

/* Bottom-right Undo toast that lets you reverse the last auto-save for 5s. */
.gwj-undo-toast {
  position: fixed; bottom: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: #20211f; color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  font-size: 0.92rem; font-weight: 600;
  z-index: 1200;
  animation: gwj-undo-pop 160ms ease;
}
.gwj-undo-toast.is-hidden { display: none; }
.gwj-undo-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: #f7c97a;
  font: inherit; font-weight: 800; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 6px;
}
.gwj-undo-btn:hover { background: rgba(247,201,122,0.12); }
@keyframes gwj-undo-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-tab-legacy { display: inline-flex; align-items: center; gap: 8px; }
.legacy-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f3e9d8; color: #7a5618; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.admin-tab-legacy.is-active .legacy-pill { background: #ffd9a5; color: #5a3d0a; }
.billing-policy-legacy { border-color: #e0d3b8; background: linear-gradient(180deg, #fdf6e9 0%, #fff 28%); }
.legacy-eyebrow { color: #8a5a18; }

/* Bordered group wrapping the two Legacy tabs (Packages + Package policy)
   so they visually read as a set distinct from the monthly subscription
   tabs. The "Legacy" header sits in the top edge of the box like a
   fieldset legend; the box lifts off the .admin-tabs baseline so the
   underline doesn't chop through. */
.admin-tab-group {
  position: relative;
  display: inline-flex;
  margin: 0 6px -1px;
  padding: 12px 6px 0;
  border: 1px solid #e0d3b8;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #fdf6e9 0%, #fbf1dd 100%);
}
.admin-tab-group.is-hidden { display: none; }
.admin-tab-group-label {
  position: absolute; top: -9px; left: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f3e9d8;
  color: #7a5618;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.4;
  border: 1px solid #e0d3b8;
}
.admin-tab-group-tabs { display: inline-flex; gap: 2px; }
/* Tabs inside the group lose the per-tab pill (the group header carries
   the "Legacy" label) and pick up a warmer active state so the box reads
   as one continuous surface. */
.admin-tab-group .admin-tab-legacy {
  margin-bottom: -1px;
  padding: 8px 14px 9px;
  color: #7a5618;
}
.admin-tab-group .admin-tab-legacy.is-active {
  color: #5a3d0a;
  border-bottom-color: #b1894d;
  background: #fff7e6;
}

/* === Practice calendar: dim + disable future days === */
.cal-cell.is-future { color: #c4bdac; background: transparent; cursor: not-allowed; opacity: 0.5; }
.cal-cell.is-future:hover { background: transparent; }

/* === Billing Plans picker compact === */
/* Plan-picker tiles: cap the card width so they read as compact tiles
   instead of stretching to fill the row. justify-content: start packs
   them on the left rather than spreading; the auto-fit fallback still
   wraps to a single column on narrow screens. */
.portal-billing-view .plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: start;
  gap: 12px; margin: 10px 0 14px;
}
.portal-billing-view .plan-card { padding: 14px 16px; gap: 10px; }
.portal-billing-view .plan-card-head strong { font-size: 0.98rem; }
.portal-billing-view .plan-price-amt { font-size: 1.2rem; }
.portal-billing-view .plan-card-body .muted-line { font-size: 0.8rem; margin: 2px 0 0; }
.portal-billing-view .billing-sub { margin: 4px 0 8px; font-size: 0.86rem; }
.portal-billing-view .billing-code-row { margin: 6px 0 10px; }
.portal-billing-view .billing-code-label > span { font-size: 0.78rem; margin-bottom: 4px; }
.portal-billing-view .billing-code-input-row input { padding: 6px 10px; font-size: 0.88rem; }
.portal-billing-view .billing-note { font-size: 0.78rem; margin: 8px 0 0; }

/* === Student avatars (initials + hashed color) === */
.student-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; flex: 0 0 auto; line-height: 1; }
.student-avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }

/* Roster row: avatar to the left of the stacked name/sub/meta. */
.roster-item.roster-row { grid-template-columns: auto 1fr; grid-template-areas: "avatar name" "avatar sub" "avatar meta"; column-gap: 12px; align-items: center; }
.roster-item.roster-row > .student-avatar { grid-area: avatar; align-self: center; }
.roster-item.roster-row > .roster-name { grid-area: name; }
.roster-item.roster-row > .roster-sub { grid-area: sub; }
.roster-item.roster-row > .roster-meta { grid-area: meta; }
.roster-item.is-inactive .student-avatar { opacity: 0.6; }

/* Student detail header: avatar + name/meta stacked alongside. */
.admin-student-head-id { display: flex; align-items: center; gap: 14px; }
.admin-student-head-id > div { display: grid; gap: 4px; }

/* === Admin-preview disabled buttons + banner on the billing card === */
.button.is-preview-disabled, .button.is-preview-disabled:hover { background: #d8d2c4 !important; color: #5a5448 !important; border-color: #d8d2c4 !important; cursor: not-allowed; box-shadow: none; opacity: 0.85; }
.billing-preview-banner { background: #fff3df; border: 1px solid #f0c79a; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: 0.86rem; color: #6a4a18; }

/* ============================================================
   Claude Design Home page
   Scoped to index.html so portal/admin/tool pages keep their current shell.
   ============================================================ */
.gwj-home-redesign {
  --gwj-home-bg: #14120f;
  --gwj-home-ink: #f4edde;
  --gwj-home-muted: rgba(244, 237, 222, 0.68);
  --gwj-home-soft: rgba(244, 237, 222, 0.1);
  --gwj-home-line: rgba(244, 237, 222, 0.16);
  --gwj-home-red: #c04434;
  --gwj-home-red-dark: #8f2f26;
  --gwj-home-gold: #e8a53a;
  --gwj-home-teal: #4aa5a0;
  --gwj-home-brown: #241f1a;
  --gwj-home-green: #63c072;
  --gwj-home-display: "Anton", "Work Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --gwj-home-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Courier New", monospace;
  background: var(--gwj-home-bg);
  color: var(--gwj-home-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.gwj-home-redesign h1,
.gwj-home-redesign h2,
.gwj-home-redesign h3,
.gwj-home-redesign p,
.gwj-home-redesign figure,
.gwj-home-redesign blockquote {
  margin: 0;
}

.gwj-home-redesign h1,
.gwj-home-redesign h2,
.gwj-home-redesign h3 {
  color: var(--gwj-home-ink);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.gwj-main-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 54px);
  color: var(--gwj-home-ink);
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.72), rgba(20, 18, 15, 0));
  transition: background 180ms ease, border-color 180ms ease, padding 180ms ease;
}

.gwj-main-nav.is-scrolled {
  padding-block: 12px;
  border-bottom: 1px solid var(--gwj-home-line);
  background: rgba(20, 18, 15, 0.92);
  backdrop-filter: blur(16px);
}

.gwj-home-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff9ea;
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.gwj-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #14120f;
  background: #fff8e7;
  font-size: 0.9rem;
  font-weight: 950;
}

.gwj-home-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2.1vw, 28px);
  min-width: 0;
  color: rgba(255, 249, 235, 0.88);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gwj-navlink {
  position: relative;
  white-space: nowrap;
}

.gwj-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  background: var(--gwj-home-gold);
  transition: right 0.28s ease;
}

.gwj-navlink:hover::after,
.gwj-navlink:focus-visible::after {
  right: 0;
}

.gwj-nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 249, 235, 0.42);
  border-radius: 8px;
  padding: 0 16px;
  color: #fff9ea;
  background: rgba(255, 249, 235, 0.08);
}

.gwj-home-menu {
  display: none;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(255, 249, 235, 0.24);
  border-radius: 8px;
  background: rgba(20, 18, 15, 0.64);
  color: #fff9ea;
  cursor: pointer;
}

.gwj-home-menu span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: currentColor;
}

.gwj-home-main {
  background:
    radial-gradient(circle at 16% 8%, rgba(192, 68, 52, 0.18), transparent 28%),
    radial-gradient(circle at 84% 2%, rgba(232, 165, 58, 0.12), transparent 30%),
    var(--gwj-home-bg);
}

.gwj-hero {
  position: relative;
  min-height: min(700px, 82svh);
  display: grid;
  align-items: center;
  padding: clamp(96px, 10vw, 126px) clamp(18px, 6vw, 86px) clamp(46px, 5vw, 68px);
  overflow: hidden;
  isolation: isolate;
}

.gwj-hero-image,
.gwj-hero-scrim {
  position: absolute;
  inset: 0;
}

.gwj-hero-image {
  z-index: -3;
  left: auto;
  right: 0;
  width: 78%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}

.gwj-hero-scrim {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.8) 0%, rgba(12, 10, 8, 0.46) 44%, rgba(12, 10, 8, 0.04) 100%),
    linear-gradient(0deg, rgba(20, 18, 15, 0.66) 0%, rgba(20, 18, 15, 0.08) 46%, rgba(20, 18, 15, 0.06) 100%);
}

.gwj-hero-content {
  width: 45%;
}

.gwj-kicker {
  color: var(--gwj-home-gold);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-hero h1 {
  max-width: 14ch;
  margin-top: 18px;
  font-size: clamp(3rem, 6.2vw, 6.35rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.gwj-hero-copy {
  max-width: 58ch;
  /* David, 2026-10-22: "add a small line of space under the 'Learn the guitar you
     actually want to play', right above the small text". The headline sets
     line-height .9 and runs to three lines, so its descenders were nearly touching
     this paragraph. */
  margin-top: 40px;
  color: rgba(255, 249, 235, 0.84);
  font-size: clamp(1rem, 1.45vw, 1.26rem);
  line-height: 1.62;
}

.gwj-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.gwj-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 20px;
  color: var(--gwj-home-ink);
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-button-primary {
  color: #fff9ea;
  background: var(--gwj-home-red);
}

.gwj-button-primary:hover,
.gwj-button-primary:focus-visible {
  background: var(--gwj-home-red-dark);
}

.gwj-button-secondary {
  color: #fff9ea;
  border-color: rgba(255, 249, 235, 0.44);
  background: rgba(255, 249, 235, 0.08);
}

.gwj-cta {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.gwj-cta:hover,
.gwj-cta:focus-visible {
  transform: translateY(-2px);
}

.gwj-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 249, 235, 0.82);
  font-weight: 850;
}

.gwj-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* `> span:first-child` is the LED dot specifically, not "any span in this list item".
   The teaching figure now carries its own span so the year count can be written into
   it, and a bare `span` rule turned that number into a second 9px gold square. The
   same applies to the duplicate LED block further down this file. */
.gwj-hero-points li > span:first-child {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 2px;
  background: var(--gwj-home-gold);
  color: var(--gwj-home-gold);
  animation: gwj-led 2.4s ease-in-out infinite;
}

.gwj-hero-points li:nth-child(2) > span:first-child {
  background: var(--gwj-home-teal);
  color: var(--gwj-home-teal);
  animation-delay: 0.3s;
}

.gwj-hero-points li:nth-child(3) > span:first-child {
  background: var(--gwj-home-red);
  color: var(--gwj-home-red);
  animation-delay: 0.6s;
}

.gwj-marquee-band {
  overflow: hidden;
  border-block: 1px solid var(--gwj-home-line);
  background: #0f0e0c;
  color: rgba(255, 249, 235, 0.84);
}

.gwj-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 16px 0;
  font-size: clamp(0.86rem, 1.35vw, 1.08rem);
  font-weight: 950;
  text-transform: uppercase;
  animation: gwj-marquee 28s linear infinite;
}

.gwj-marquee-track span {
  position: relative;
  padding-left: 20px;
}

.gwj-marquee-track span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gwj-home-red);
  transform: translateY(-50%);
}

.gwj-home-section {
  padding: clamp(48px, 6vw, 88px) clamp(18px, 5vw, 72px);
}

.gwj-section-head {
  max-width: 980px;
  margin-bottom: clamp(28px, 4.5vw, 58px);
}

.gwj-section-head h2,
.gwj-portal-copy h2,
.gwj-home-cta h2 {
  max-width: 15ch;
  margin-top: 14px;
  font-size: clamp(2.3rem, 5.4vw, 5.4rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.gwj-chapter-grid,
.gwj-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gwj-card {
  border: 1px solid var(--gwj-home-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 235, 0.08), rgba(255, 249, 235, 0.035)),
    #191713;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease, background 0.3s ease;
}

.gwj-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 165, 58, 0.48);
}

.gwj-chapter-card {
  min-height: 296px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(20px, 2.8vw, 32px);
}

.gwj-chapter-label {
  color: var(--gwj-home-gold);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-chapter-card h3 {
  font-size: clamp(1.42rem, 2.1vw, 2.1rem);
  line-height: 1.04;
  text-transform: uppercase;
}

.gwj-chapter-card p:not(.gwj-chapter-label),
.gwj-portal-panel p:not(.gwj-chapter-label),
.gwj-review-card blockquote,
.gwj-home-cta p {
  color: var(--gwj-home-muted);
  line-height: 1.65;
}

.gwj-textlink {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: var(--gwj-home-gold);
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-textlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.gwj-textlink:hover::after,
.gwj-textlink:focus-visible::after {
  transform: scaleX(1);
}

.gwj-portal-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: clamp(24px, 6vw, 86px);
  align-items: start;
  border-block: 1px solid var(--gwj-home-line);
  background:
    linear-gradient(90deg, rgba(74, 165, 160, 0.12), transparent 52%),
    #100f0d;
}

.gwj-portal-panel {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px);
}

.gwj-portal-panel .gwj-button {
  justify-self: start;
}

.gwj-review-card {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 30px);
}

.gwj-review-card div {
  color: var(--gwj-home-gold);
  font-size: 0.92rem;
}

.gwj-review-card blockquote {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.gwj-review-card figcaption {
  color: #fff6e3;
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-review-link {
  display: inline-flex;
  margin-top: 28px;
}

.gwj-home-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: clamp(68px, 9vw, 112px) clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--gwj-home-line);
  background:
    linear-gradient(135deg, rgba(192, 68, 52, 0.28), rgba(232, 165, 58, 0.12) 44%, rgba(74, 165, 160, 0.14)),
    #181510;
}

.gwj-home-cta p {
  max-width: 52ch;
  margin-top: 18px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.gwj-home-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--gwj-home-line);
  background: #0e0d0b;
  color: rgba(255, 249, 235, 0.76);
}

.gwj-home-footer > a {
  color: #fff9ea;
  font-weight: 950;
  text-transform: uppercase;
}

.gwj-home-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gwj-home-footer p {
  color: var(--gwj-home-gold);
  font-weight: 850;
}

@keyframes gwj-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes gwj-led {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px currentColor;
  }
  50% {
    opacity: 0.4;
    box-shadow: 0 0 2px currentColor;
  }
}

.gwj-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gwj-in {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gwj-home-redesign *,
  .gwj-home-redesign *::before,
  .gwj-home-redesign *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1020px) {
  .gwj-main-nav {
    padding-inline: 18px;
  }

  .gwj-home-menu {
    position: fixed;
    top: 12px;
    right: 18px;
    z-index: 120;
    display: flex;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .gwj-home-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 18px;
    left: 18px;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--gwj-home-line);
    border-radius: 8px;
    background: rgba(20, 18, 15, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  }

  .gwj-home-links.is-open {
    display: grid;
  }

  .gwj-home-links a {
    padding: 14px 12px;
  }

  .gwj-nav-cta {
    margin-top: 4px;
  }

  .gwj-hero {
    min-height: 82svh;
  }

  .gwj-chapter-grid,
  .gwj-review-grid,
  .gwj-portal-section,
  .gwj-home-cta {
    grid-template-columns: 1fr;
  }

  .gwj-home-cta .gwj-button {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .gwj-main-nav {
    min-height: 64px;
    padding-block: 12px;
    background: rgba(20, 18, 15, 0.84);
    backdrop-filter: blur(14px);
  }

  .gwj-home-brand {
    max-width: calc(100% - 66px);
    font-size: 0.9rem;
  }

  .gwj-brand-mark {
    width: 30px;
    height: 30px;
  }

  .gwj-hero {
    min-height: 82svh;
    padding: calc(64px + 60vw) 18px 56px;
  }

  .gwj-hero-image {
    top: 64px;
    width: 100%;
    height: 60vw;
    object-position: center top;
    transform: none !important;
  }

  .gwj-hero-content {
    width: 100%;
  }

  .gwj-hero-scrim {
    background:
      linear-gradient(0deg, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.78) 52%, rgba(12, 10, 8, 0.22) 100%),
      linear-gradient(90deg, rgba(12, 10, 8, 0.62), rgba(12, 10, 8, 0.12));
  }

  .gwj-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(2.55rem, 12.8vw, 3.75rem);
    line-height: 0.93;
  }

  .gwj-hero-copy {
    font-size: 1rem;
  }

  .gwj-button {
    width: 100%;
  }

  .gwj-hero-points {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gwj-marquee-track {
    gap: 22px;
    animation-duration: 20s;
  }

  .gwj-home-section {
    padding: 62px 18px;
  }

  .gwj-section-head h2,
  .gwj-portal-copy h2,
  .gwj-home-cta h2 {
    max-width: 12ch;
    font-size: clamp(2.1rem, 12vw, 3.3rem);
  }

  .gwj-chapter-card {
    min-height: 0;
  }

  .gwj-home-cta {
    padding: 58px 18px;
  }

  .gwj-home-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 18px;
  }

  .gwj-home-footer nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* === Home.dc.html fidelity pass: fonts, colors, accents === */

/* Condensed display face for all headlines + display UI */
.gwj-home-redesign h1,
.gwj-home-redesign h2,
.gwj-home-redesign h3,
.gwj-home-brand,
.gwj-home-links,
.gwj-nav-cta,
.gwj-button,
.gwj-marquee-track,
.gwj-textlink,
.gwj-home-footer > a,
.gwj-home-footer nav {
  font-family: var(--gwj-home-display);
  font-weight: 400;
}

.gwj-home-links,
.gwj-home-footer nav {
  letter-spacing: 0.05em;
}

.gwj-home-brand {
  letter-spacing: 0.03em;
}

/* Anton is already heavy; keep headline tracking tight like the design */
.gwj-hero h1,
.gwj-section-head h2,
.gwj-portal-copy h2,
.gwj-home-cta h2,
.gwj-chapter-card h3 {
  letter-spacing: 0.005em;
}

/* Monospace for kickers, meta labels, and names */
.gwj-kicker,
.gwj-chapter-card .gwj-chapter-label,
.gwj-review-card figcaption,
.gwj-home-footer p {
  font-family: var(--gwj-home-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* Hero kicker: muted cream text + green LED dot */
.gwj-hero .gwj-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 237, 222, 0.82);
}

.gwj-hero .gwj-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gwj-home-green);
  box-shadow: 0 0 10px var(--gwj-home-green);
}

/* Section kickers ("// Lessons", "// Reviews"...) in teal */
.gwj-lessons-section .gwj-kicker,
.gwj-portal-copy .gwj-kicker,
.gwj-reviews-section .gwj-kicker {
  color: var(--gwj-home-teal);
}

/* Hero headline gold accent word */
.gwj-hero h1 .gwj-hl {
  color: var(--gwj-home-gold);
}

/* Brand badge is now the logo image */
.gwj-brand-mark {
  padding: 3px;
  object-fit: contain;
  background: #fff8e7;
}

/* Nav "Free Lesson" pill: amber text + amber dot */
.gwj-nav-cta {
  gap: 8px;
  color: var(--gwj-home-gold);
  border-color: rgba(232, 165, 58, 0.5);
}

.gwj-nav-cta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gwj-home-gold);
  box-shadow: 0 0 8px var(--gwj-home-gold);
}

/* Hero highlight dots: round + pulsing LEDs, green / amber / teal */
.gwj-hero-points li > span:first-child {
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  background: var(--gwj-home-green);
  color: var(--gwj-home-green);
  animation: gwj-led 2.4s ease-in-out infinite;
}

.gwj-hero-points li:nth-child(2) > span:first-child {
  background: var(--gwj-home-gold);
  color: var(--gwj-home-gold);
}

.gwj-hero-points li:nth-child(3) > span:first-child {
  background: var(--gwj-home-teal);
  color: var(--gwj-home-teal);
}

/* Chapter cards: amber titles, mono label w/ colored dot, teal link */
.gwj-chapter-card h3 {
  color: var(--gwj-home-gold);
}

.gwj-chapter-card .gwj-chapter-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(244, 237, 222, 0.62);
}

.gwj-chapter-card .gwj-chapter-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gwj-home-green);
  box-shadow: 0 0 8px currentColor;
}

.gwj-chapter-grid .gwj-chapter-card:nth-child(1) .gwj-chapter-label::before {
  background: var(--gwj-home-green);
  color: var(--gwj-home-green);
}

.gwj-chapter-grid .gwj-chapter-card:nth-child(2) .gwj-chapter-label::before {
  background: var(--gwj-home-gold);
  color: var(--gwj-home-gold);
}

.gwj-chapter-grid .gwj-chapter-card:nth-child(3) .gwj-chapter-label::before {
  background: var(--gwj-home-red);
  color: var(--gwj-home-red);
}

.gwj-chapter-card .gwj-textlink {
  color: var(--gwj-home-teal);
}

/* Portal panel label uses the display face, gold */
.gwj-portal-panel .gwj-chapter-label {
  font-family: var(--gwj-home-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gwj-home-gold);
  font-size: 1.28rem;
}

/* Review meta: teal mono names, spaced stars */
.gwj-review-card figcaption {
  color: var(--gwj-home-teal);
}

.gwj-review-card div {
  letter-spacing: 0.2em;
}

/* Final CTA button: glowing gold */
.gwj-home-cta .gwj-button-primary {
  color: #1b1206;
  background: var(--gwj-home-gold);
  box-shadow: 0 0 44px rgba(232, 165, 58, 0.42);
}

.gwj-home-cta .gwj-button-primary:hover,
.gwj-home-cta .gwj-button-primary:focus-visible {
  background: #f3b551;
}

/* Footer tagline: muted mono */
.gwj-home-footer p {
  color: rgba(244, 237, 222, 0.5);
}

/* ============ Interior pages (Lessons, About, Reviews, Contact, Book) ============ */
.gwj-navlink.is-active {
  color: var(--gwj-home-gold);
}

/* All interior-page kickers are teal */
.gwj-interior-page .gwj-kicker {
  color: var(--gwj-home-teal);
}

/* Photo-free hero */
.gwj-lessons-hero,
.gwj-interior-hero {
  padding: clamp(90px, 8vw, 116px) clamp(18px, 6vw, 86px) clamp(34px, 4vw, 52px);
}

.gwj-lessons-hero-inner,
.gwj-interior-hero-inner {
  width: min(100%, 900px);
}

.gwj-lessons-hero h1,
.gwj-interior-hero h1 {
  margin-top: 16px;
  /* No tight ch-cap: the wide Anton face made 18ch wrap short taglines
     ("…STUDENTS / SAY.") with room to spare. The hero-inner (max 900px)
     already governs line length, so let the heading fill it. */
  max-width: none;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 0.9;
  text-transform: uppercase;
}

/* Stats band */
.gwj-stats-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--gwj-home-line);
  background:
    radial-gradient(rgba(244, 237, 222, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    #100f0d;
}

.gwj-stat {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
  border-left: 1px solid var(--gwj-home-line);
}

.gwj-stat:first-child {
  border-left: 0;
}

.gwj-stat-num {
  display: block;
  font-family: var(--gwj-home-display);
  color: var(--gwj-home-gold);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1;
}

.gwj-stat-label {
  display: block;
  margin-top: 10px;
  font-family: var(--gwj-home-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

/* GWJ: free practice tools band (homepage, under the hero).
   Borrows the stats band's rules and ground so it reads as part of the same page
   rather than a bolt-on, but lays out as copy + action instead of three columns. */
.gwj-tools-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 72px);
  border-block: 1px solid var(--gwj-home-line);
  background:
    radial-gradient(rgba(244, 237, 222, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    #100f0d;
}

.gwj-tools-band-copy {
  max-width: 62ch;
}

.gwj-tools-band h2 {
  margin: 10px 0 0;
  font-family: var(--gwj-home-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.12;
}

.gwj-tools-band p {
  margin: 10px 0 0;
  color: var(--gwj-home-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.06rem);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .gwj-tools-band { flex-direction: column; align-items: flex-start; }
}

/* Icon feature cards */
.gwj-feature-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(20px, 2.8vw, 32px);
}

.gwj-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--gwj-home-line);
  background: rgba(255, 249, 235, 0.05);
  color: var(--gwj-home-gold);
}

.gwj-feature-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gwj-chapter-grid .gwj-feature-card:nth-child(2) .gwj-feature-icon {
  color: var(--gwj-home-teal);
}

.gwj-chapter-grid .gwj-feature-card:nth-child(3) .gwj-feature-icon {
  color: var(--gwj-home-red);
}

.gwj-feature-card h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  text-transform: uppercase;
}

/* Section lead paragraph */
.gwj-section-lead {
  margin-top: 20px;
  max-width: 66ch;
  color: var(--gwj-home-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
}

/* Style pills */
.gwj-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gwj-pills li {
  padding: 12px 22px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 999px;
  font-family: var(--gwj-home-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 237, 222, 0.86);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.gwj-pills li:hover {
  border-color: rgba(232, 165, 58, 0.5);
  color: #fff9ea;
}

/* Method cards (amber titles) */
.gwj-method-card {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 30px);
}

.gwj-method-card h3 {
  color: var(--gwj-home-gold);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
}

.gwj-method-section .gwj-textlink {
  margin-top: 28px;
  display: inline-flex;
}

/* Numbered step cards */
.gwj-step-card {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 34px);
}

.gwj-step-num {
  font-family: var(--gwj-home-display);
  font-size: clamp(2.4rem, 3.4vw, 3rem);
  line-height: 1;
  color: rgba(232, 165, 58, 0.55);
}

.gwj-step-card h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  text-transform: uppercase;
}

/* Centered CTA */
.gwj-cta-center {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(74px, 10vw, 122px) clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--gwj-home-line);
  background:
    radial-gradient(circle at 50% 128%, rgba(232, 165, 58, 0.16), transparent 60%),
    #141210;
}

.gwj-cta-center h2 {
  max-width: 18ch;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.gwj-cta-center p {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--gwj-home-muted);
}

/* David, 2026-11-15: the line under "Your first lesson is on me" sat left of centre —
   it is narrower than the headline's block, and only its TEXT was centred, not the
   paragraph. Centre the block itself (and the h2) on every page that uses this band. */
.gwj-home-redesign .gwj-cta-center p,
.gwj-home-redesign .gwj-cta-center h2 {
  margin-left: auto;
  margin-right: auto;
}

.gwj-cta-center .gwj-button-primary {
  color: #1b1206;
  background: var(--gwj-home-gold);
  box-shadow: 0 0 44px rgba(232, 165, 58, 0.42);
}

.gwj-cta-center .gwj-button-primary:hover,
.gwj-cta-center .gwj-button-primary:focus-visible {
  background: #f3b551;
}

@media (max-width: 1020px) {
  .gwj-stats-band {
    grid-template-columns: 1fr;
  }

  .gwj-stat {
    border-left: 0;
    border-top: 1px solid var(--gwj-home-line);
  }

  .gwj-stat:first-child {
    border-top: 0;
  }
}

/* ============ About page ============ */
/* The SAME padding as .gwj-lessons-hero / .gwj-interior-hero, not .gwj-home-section's.
   About is an interior page and has to line up with Lessons, Reviews and Tools: that is
   an 86px gutter at full size, not 72px, and this page was also centred for a while,
   which put its left edge 230px in from everyone else's. */
.gwj-about-section {
  padding: clamp(90px, 8vw, 116px) clamp(18px, 6vw, 86px) clamp(34px, 4vw, 52px);
}

/* David, 2026-10-23: "can you better wrap the text around the image?"

   This was a two-column grid, which meant the left column stopped at the bottom of the
   photo and left a tall empty gutter beside the rest of the prose — and the About text
   just grew from four paragraphs to seven, so the gap got a lot worse.

   A FLOAT rather than a grid, because wrapping is the one thing grid cannot do: grid
   items sit in their tracks, they do not flow around anything. The headline and photo
   float together as one block, the prose runs alongside them and then continues at full
   width once it clears the bottom of the picture. */
.gwj-about-grid {
  display: block;
  /* flow-root CONTAINS the float, so the next section can never ride up beside the
     photo if this bio is ever shortened. Declared after `block` on purpose: a browser
     too old to know it (pre-Safari 13) keeps the block and merely loses the containment,
     rather than losing the layout. */
  display: flow-root;
  /* The old grid gave the prose its own ~620px track, which is why it was readable. A
     float has no track: once the text clears the photo it runs the full width of the
     section, and this section is full-bleed — a 150-character line, so most of this bio
     would read WORSE than before the wrap. The cap is the same min(100%, 900px) the
     Lessons and Reviews heroes use, so the text block ends where theirs does instead of
     being a width invented for this one page. */
  width: min(100%, 900px);
  margin-top: 14px;
}

/* Out of the float and across the band. At clamp()'s top end this headline is 74px —
   inside a 300px float it would break as "HI, / I'M / JIMMY." The 0-2-0 selector is
   deliberate: `.gwj-home-redesign h1 { margin: 0 }` is 0-1-1 and would otherwise eat
   the space under the headline. */
.gwj-about-grid .gwj-about-h1 {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

.gwj-about-left {
  float: left;
  /* 340px against a 900px band leaves ~520px of wrapped line — around 60 characters.
     Wider than this and the lines beside the photo get too short to read comfortably. */
  width: min(40%, 340px);
  margin: 4px clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 24px) 0;
}

.gwj-about-media {
  position: relative;
  margin: 0;
  border: 1px solid var(--gwj-home-line);
  border-radius: 12px;
  overflow: hidden;
}

.gwj-about-media img {
  display: block;
  width: 100%;
  height: auto;
}

.gwj-about-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  font-family: var(--gwj-home-mono);
  /* The photo is 300px now, not 530px. At the old size this caption broke onto two
     lines across Jimmy's hands. */
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 237, 222, 0.88);
  background: linear-gradient(0deg, rgba(12, 10, 8, 0.9), transparent);
}

/* Block, NOT grid. A grid container establishes its own formatting context and would
   sit beside the float instead of flowing around it — the paragraphs would keep their
   old narrow column and nothing would have changed. The gap the grid used to provide is
   now a margin between siblings.

   1.75em, matching line-height, because the seven paragraphs of this bio reach the page
   by TWO different routes: some are separate <p> elements, and some are blank lines
   inside one element rendered with white-space:pre-line. A blank line is exactly one
   line box tall, so the old 22px gap made the breaks between sections visibly tighter
   than the breaks within them — the same prose spaced two different ways depending on
   an editing detail no reader can see. */
/* 0-2-0, because `.gwj-home-redesign h1, ... p, ...  { margin: 0 }` further up this
   file is 0-1-1 and a bare `.gwj-about-prose > * + *` loses to it — the paragraphs come
   out flush against each other with no gap at all. */
.gwj-home-redesign .gwj-about-prose > * + * {
  margin-top: 1.75em;
}

.gwj-about-prose p {
  color: var(--gwj-home-muted);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.75;
}

.gwj-about-prose strong {
  color: var(--gwj-home-ink);
  font-weight: 700;
}

/* These two have a box of their own — a flex row of pills and a card with a background
   — and a box does not wrap around a float, it slides under it. Only line boxes wrap. So
   they clear instead: by this point in the page the photo is long finished, and clearing
   costs nothing while overlapping would look broken. */
.gwj-cred-pills,
.gwj-contact-card {
  clear: left;
}

.gwj-home-redesign .gwj-about-prose > .gwj-cred-pills {
  margin-top: clamp(26px, 3.4vw, 38px);
}

.gwj-home-redesign .gwj-about-prose > .gwj-contact-card {
  margin-top: clamp(18px, 2.4vw, 26px);
}

.gwj-cred-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.gwj-cred-pills li {
  padding: 10px 18px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 999px;
  font-family: var(--gwj-home-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gwj-home-teal);
}

.gwj-contact-card {
  margin-top: 8px;
  padding: clamp(22px, 3vw, 30px);
  display: grid;
  gap: 10px;
}

.gwj-contact-q {
  color: var(--gwj-home-ink);
  font-size: 1.1rem;
}

.gwj-contact-a {
  color: var(--gwj-home-muted);
  line-height: 1.6;
}

.gwj-contact-a a {
  color: var(--gwj-home-gold);
}

@media (max-width: 900px) {
  /* Narrow enough that a 42% float leaves a column of two or three words. The photo
     goes back to full width above the text. */
  .gwj-about-left {
    float: none;
    width: auto;
    margin: 0 0 clamp(20px, 5vw, 30px);
  }
}

/* ============ Reviews page ============ */
.gwj-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 12px 22px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 999px;
  font-family: var(--gwj-home-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

.gwj-stars {
  color: var(--gwj-home-gold);
  letter-spacing: 0.18em;
}

.gwj-reviews-wall {
  padding-top: 0;
}

.gwj-reviews-masonry {
  column-count: 3;
  column-gap: 16px;
}

.gwj-reviews-masonry .gwj-review-card {
  display: block;
  break-inside: avoid;
  width: 100%;
  margin: 0 0 16px;
  padding: clamp(20px, 2.4vw, 28px);
}

.gwj-reviews-masonry .gwj-stars {
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.gwj-reviews-masonry blockquote {
  color: var(--gwj-home-muted);
  font-size: 1rem;
  line-height: 1.62;
}

.gwj-reviews-masonry figcaption {
  margin-top: 16px;
  font-family: var(--gwj-home-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gwj-home-teal);
}

@media (max-width: 1020px) {
  .gwj-reviews-masonry {
    column-count: 2;
  }
}

@media (max-width: 680px) {
  .gwj-reviews-masonry {
    column-count: 1;
  }
}

/* ============ Contact page ============ */
.gwj-contact-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 82vh;
}

.gwj-contact-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 9vw, 124px) clamp(24px, 5vw, 72px) clamp(48px, 6vw, 72px);
  background:
    radial-gradient(circle at 12% 30%, rgba(192, 68, 52, 0.14), transparent 46%),
    radial-gradient(circle at 4% 8%, rgba(232, 165, 58, 0.1), transparent 40%),
    transparent;
}

.gwj-contact-left h1 {
  margin-top: 14px;
  max-width: 12ch;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.gwj-contact-rows {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.gwj-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gwj-contact-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
}

.gwj-contact-icon svg {
  width: 20px;
  height: 20px;
}

.gwj-contact-row [data-accent="teal"] {
  color: var(--gwj-home-teal);
}

.gwj-contact-meta {
  display: grid;
  gap: 3px;
}

.gwj-contact-label {
  font-family: var(--gwj-home-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

.gwj-contact-value {
  color: var(--gwj-home-ink);
  font-size: 1.05rem;
}

a.gwj-contact-value:hover {
  color: var(--gwj-home-gold);
}

.gwj-contact-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(90px, 10vw, 130px) clamp(24px, 5vw, 72px);
  border-left: 1px solid var(--gwj-home-line);
  background: #100f0d;
}

.gwj-form {
  display: grid;
  gap: 18px;
  width: min(100%, 520px);
}

.gwj-field {
  display: grid;
  gap: 8px;
}

.gwj-field > span {
  font-family: var(--gwj-home-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

.gwj-field input,
.gwj-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 10px;
  background: rgba(255, 249, 235, 0.04);
  color: var(--gwj-home-ink);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.gwj-field input::placeholder,
.gwj-field textarea::placeholder {
  color: rgba(244, 237, 222, 0.4);
}

.gwj-field input:focus,
.gwj-field textarea:focus {
  outline: none;
  border-color: var(--gwj-home-gold);
  box-shadow: 0 0 0 3px rgba(232, 165, 58, 0.18);
}

.gwj-form-submit {
  margin-top: 6px;
  width: 100%;
  color: #1b1206;
  background: var(--gwj-home-gold);
  box-shadow: 0 0 40px rgba(232, 165, 58, 0.36);
}

.gwj-form-submit:hover,
.gwj-form-submit:focus-visible {
  background: #f3b551;
}

.gwj-form-note {
  margin-top: 2px;
  font-family: var(--gwj-home-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--gwj-home-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .gwj-contact-2col {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .gwj-contact-right {
    border-left: 0;
    border-top: 1px solid var(--gwj-home-line);
  }
}

/* ============ Book page ============ */
.gwj-book-hero {
  padding-bottom: clamp(28px, 4vw, 44px);
}

.gwj-book-credits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 18px;
  border: 1px solid rgba(232, 165, 58, 0.4);
  border-radius: 999px;
  font-family: var(--gwj-home-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gwj-home-gold);
}

.gwj-book-credits::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gwj-home-gold);
  box-shadow: 0 0 8px var(--gwj-home-gold);
}

.gwj-book-wrap {
  padding-top: clamp(18px, 3vw, 30px);
}

.gwj-book-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.gwj-book-picker {
  padding: clamp(24px, 3vw, 34px);
}

.gwj-book-picker h2 {
  font-family: var(--gwj-home-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.gwj-book-sub {
  margin-top: 8px;
  color: var(--gwj-home-muted);
  line-height: 1.6;
}

.gwj-day-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.gwj-day-picker .day-chip {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 16px 8px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 12px;
  background: rgba(255, 249, 235, 0.03);
  color: var(--gwj-home-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.gwj-day-picker .day-chip:hover {
  border-color: rgba(232, 165, 58, 0.5);
  transform: translateY(-2px);
}

.gwj-day-picker .day-chip.active {
  border-color: var(--gwj-home-gold);
  background: rgba(232, 165, 58, 0.12);
}

.day-chip-label {
  font-weight: 600;
  font-size: 0.98rem;
}

.day-chip-meta {
  font-family: var(--gwj-home-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gwj-home-teal);
}

.gwj-slot-heading {
  margin-top: 26px;
  font-family: var(--gwj-home-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

.gwj-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.gwj-slot-grid .slot-btn {
  padding: 10px 16px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 8px;
  background: rgba(255, 249, 235, 0.03);
  color: var(--gwj-home-ink);
  font-family: var(--gwj-home-mono);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gwj-slot-grid .slot-btn:hover {
  border-color: rgba(232, 165, 58, 0.5);
}

.gwj-slot-grid .slot-btn.active {
  border-color: var(--gwj-home-gold);
  background: var(--gwj-home-gold);
  color: #1b1206;
}

.gwj-slot-grid .slot-btn.taken {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

.gwj-book-side {
  display: grid;
  gap: 16px;
}

.gwj-book-confirm {
  padding: clamp(22px, 2.6vw, 30px);
  border-color: rgba(232, 165, 58, 0.45);
}

.gwj-book-confirm h3,
.gwj-book-upcoming h3 {
  font-family: var(--gwj-home-display);
  text-transform: uppercase;
  font-size: 1.3rem;
}

.gwj-book-confirm h3 {
  color: var(--gwj-home-gold);
}

.gwj-book-upcoming {
  padding: clamp(22px, 2.6vw, 30px);
}

.gwj-book-confirm-btn {
  margin-top: 16px;
  width: 100%;
  color: #1b1206;
  background: var(--gwj-home-gold);
}

.gwj-book-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gwj-book-page .muted-line {
  color: var(--gwj-home-muted);
}

.gwj-book-page .warn {
  color: var(--gwj-home-red);
}

.gwj-upcoming .upcoming-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--gwj-home-line);
}

.gwj-upcoming .upcoming-item:first-child {
  border-top: 0;
}

@media (max-width: 1020px) {
  .gwj-book-layout {
    grid-template-columns: 1fr;
  }

  .gwj-day-picker {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .gwj-day-picker {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Tools page (shell reskin only; embed mode untouched) ============ */
.tools-embed .gwj-main-nav,
.tools-embed .gwj-tools-hero,
.tools-embed .gwj-home-footer {
  display: none !important;
}

html:not(.tools-embed) .gwj-tools-skin {
  background: var(--gwj-home-bg);
}

html:not(.tools-embed) .gwj-tools-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  /* GWJ-136 (David, 2026-08-16): the hero pushed the tool itself below the fold. Top
     padding was clamp(90px,8vw,116px) — nearly a third of a laptop screen spent before
     the page had said anything. Halved, and the bottom trimmed, so the selector and the
     tool are both visible without scrolling. */
  padding: clamp(40px, 4vw, 56px) clamp(18px, 6vw, 86px) clamp(16px, 2vw, 26px);
  background:
    radial-gradient(circle at 12% 24%, rgba(192, 68, 52, 0.14), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(232, 165, 58, 0.1), transparent 40%),
    var(--gwj-home-bg);
}

html:not(.tools-embed) .gwj-tools-hero-text {
  /* Was 760px — just short of "THE PRACTICE RACK." at full size, so "RACK."
     wrapped. The copy keeps its own 58ch cap, so let this column size to the
     heading; the flex row (space-between + wrap) still parks the selector at
     right and drops it below on narrow screens. */
  max-width: none;
}

/* Tool selector, upper-right across from the heading */
html:not(.tools-embed) .gwj-tools-hero-select {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding: 16px 18px;
  border: 1px solid var(--gwj-home-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 249, 235, 0.05), rgba(255, 249, 235, 0.02)), #191713;
}

html:not(.tools-embed) .gwj-tools-hero-select .gwj-tool-selabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gwj-home-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

html:not(.tools-embed) .gwj-tools-hero-select .gwj-tool-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gwj-home-green);
  box-shadow: 0 0 8px var(--gwj-home-green);
  animation: gwj-led 2.4s ease-in-out infinite;
}

html:not(.tools-embed) .gwj-tools-hero-select select {
  min-width: 230px;
  padding: 12px 16px;
  border: 1px solid rgba(232, 165, 58, 0.4);
  border-radius: 10px;
  background: rgba(20, 18, 15, 0.9);
  color: var(--gwj-home-ink);
  font-family: var(--gwj-home-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 760px) {
  html:not(.tools-embed) .gwj-tools-hero-select {
    width: 100%;
  }

  html:not(.tools-embed) .gwj-tools-hero-select select {
    width: 100%;
  }
}

html:not(.tools-embed) .gwj-tools-hero .gwj-kicker {
  color: var(--gwj-home-teal);
}

/* GWJ-136: "make RACK on the same line as The Practice". The previous fix widened the
   text column, but the type was still large enough to wrap beside the selector. Smaller
   ceiling plus a viewport-tracking middle term, so the line scales with the space it has
   rather than overflowing it — and nowrap makes the single line a guarantee instead of a
   coincidence of font metrics. Below 520px the selector has already wrapped underneath
   and the heading has the full width, so wrapping is allowed again there. */
html:not(.tools-embed) .gwj-tools-hero h1 {
  margin-top: 8px;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 0.94;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 520px) {
  html:not(.tools-embed) .gwj-tools-hero h1 { white-space: normal; }
}

html:not(.tools-embed) .gwj-tools-hero .gwj-hero-copy {
  margin-top: 12px;
  /* Three lines of intro above the fold was two too many. 52ch, NOT wider than the
     58ch it inherits — measured at 62ch it made the text column broad enough to push
     the selector onto its own row at ~1024px, which ADDED height instead of removing
     it. The whole point is a shorter hero. */
  max-width: 52ch;
}

html:not(.tools-embed) .gwj-tools-skin .page-main {
  background: transparent;
}

html:not(.tools-embed) .gwj-tools-skin .tools-section {
  background: transparent;
  color: var(--gwj-home-ink);
  /* GWJ-136: and close the gap between the hero and the tool below it. */
  padding: clamp(8px, 1.5vw, 16px) clamp(18px, 5vw, 72px) clamp(60px, 8vw, 110px);
  min-height: 0;
}

html:not(.tools-embed) .gwj-tools-skin .tool-surface {
  background: linear-gradient(180deg, rgba(255, 249, 235, 0.04), rgba(255, 249, 235, 0.015)), #14120f;
  border: 1px solid var(--gwj-home-line);
  border-radius: 16px;
}

/* Old on-page selector bar is replaced by the hero selector (kept hidden) */
html:not(.tools-embed) .gwj-tools-skin .mobile-toolbar {
  display: none;
}

html:not(.tools-embed) .gwj-tools-skin .gwj-tool-current {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gwj-home-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.1rem;
  color: var(--gwj-home-ink);
}

html:not(.tools-embed) .gwj-tools-skin .gwj-tool-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gwj-home-green);
  box-shadow: 0 0 10px var(--gwj-home-green);
  animation: gwj-led 2.4s ease-in-out infinite;
}

html:not(.tools-embed) .gwj-tools-skin .mobile-tool-selector {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

html:not(.tools-embed) .gwj-tools-skin .mobile-tool-selector > span {
  font-family: var(--gwj-home-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gwj-home-muted);
}

html:not(.tools-embed) .gwj-tools-skin .mobile-tool-selector select {
  min-width: 210px;
  padding: 12px 16px;
  border: 1px solid rgba(232, 165, 58, 0.4);
  border-radius: 10px;
  background: rgba(20, 18, 15, 0.9);
  color: var(--gwj-home-ink);
  font-family: var(--gwj-home-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
  cursor: pointer;
}

/* ============ Login / auth page ============ */
.gwj-auth-2col {
  min-height: 86vh;
}

.gwj-auth-right {
  align-items: center;
}

.gwj-auth-stack {
  display: grid;
  gap: 16px;
  width: min(100%, 460px);
}

.gwj-auth-card {
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 16px;
}

.gwj-auth-card h2 {
  font-family: var(--gwj-home-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 0.92;
}

.gwj-auth-note {
  margin-top: -6px;
  color: var(--gwj-home-muted);
  line-height: 1.55;
}

.gwj-form-status {
  min-height: 1em;
  font-family: var(--gwj-home-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gwj-home-muted);
}

/* GWJ-149: the link between the student and admin sign-in cards. It sits under the
   button rather than beside it — this is the way out when the expected path did not
   work, not a second call to action competing with the first. */
.gwj-auth-switch {
  margin-top: 2px;
  font-size: 0.9rem;
}

.gwj-auth-switch a {
  color: var(--gwj-home-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwj-auth-switch a:hover,
.gwj-auth-switch a:focus-visible {
  color: var(--gwj-home-ink, inherit);
}

.gwj-login-page .is-hidden {
  display: none !important;
}
/* GWJ-120 (David, 2026-08-14): a stray top-level `}` sat here. Browsers silently
   ignore one, so it looked harmless — but it made the brace count balance, which
   hid the genuinely unclosed @media further down. Removed so the file's structure
   tells the truth. */

/* Final chord-library embed override. The portal iframe has several broad
   responsive tool rules; keep this tool in the same left-controls/right-action
   layout as the other device-style tools at normal workspace widths. */
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device {
  width: min(100%, 840px) !important;
  min-height: 0 !important;
  padding: 18px 16px 14px !important;
  gap: 8px !important;
  border-radius: 22px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-face {
  display: grid !important;
  grid-template-columns: 280px minmax(340px, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel {
  width: 100% !important;
  max-width: 280px !important;
  gap: 7px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  justify-self: stretch !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel .chord-controls {
  display: grid !important;
  grid-template-columns: minmax(72px, 0.62fr) minmax(0, 1fr) !important;
  gap: 6px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel .chord-controls label {
  gap: 3px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel .chord-controls label:has([data-chord-position]) {
  grid-column: 1 / -1 !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel select {
  min-height: 30px !important;
  border-radius: 7px !important;
  font-size: 0.86rem !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel .scale-legend {
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-info {
  gap: 5px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-info .scale-info-row {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-info .scale-info-row dd {
  font-size: 0.86rem !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-info .scale-info-cue dd {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-play-button {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 8px rgba(0,0,0,0.28), 0 2px 0 #260907 !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-screen {
  min-height: 0 !important;
  height: 300px !important;
  max-height: 300px !important;
  padding: 10px 12px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-screen .scale-heading-bar {
  margin: 0 !important;
  min-height: 34px !important;
  font-size: 0.9rem !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-screen .chord-diagram {
  width: min(100%, 210px) !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .chord-diagram-wrap {
  align-items: start !important;
  padding-top: 0 !important;
}
.tools-embed .tool-pane[data-tool-pane="chords"] .speaker-grill {
  display: none !important;
}

@media (max-width: 860px) {
  .tools-embed .tool-pane[data-tool-pane="chords"] .chord-device-face {
    grid-template-columns: 1fr !important;
  }
  .tools-embed .tool-pane[data-tool-pane="chords"] .chord-control-panel {
    max-width: none !important;
  }
  .tools-embed .tool-pane[data-tool-pane="chords"] .chord-screen {
    height: auto !important;
    max-height: none !important;
  }
}

/* ============================================================
   GWJ·CH1 — Chords device (chord-tool.js)
   Per the design handoff. Fixed-size chassis: the body row is locked to 635px and
   the NOTES/FRETS values never wrap, so changing the selection never resizes it.
   ============================================================ */
.ch-mount { display: flex; justify-content: center; padding: 8px 0; }
.ch-dev {
  width: 908px; max-width: 100%; border-radius: 30px; padding: 20px; position: relative;
  background: linear-gradient(180deg, #35312a 0%, #26231d 34%, #201d17 100%);
  border: 1px solid #423d34;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -3px 8px rgba(0,0,0,.55),
              0 40px 80px -24px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.5);
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}
/* corner screws */
.ch-dev::before, .ch-dev::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a453b, #1a1712);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.6); }
.ch-dev::before { top: 12px; left: 12px; }
.ch-dev::after  { top: 12px; right: 12px; }

.ch-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 14px 14px; }
.ch-head__l { display: flex; align-items: center; gap: 8px; }
.ch-mark { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 13px; letter-spacing: .14em; color: #d3ccbe; }
.ch-head__r { font-weight: 800; font-size: 12px; letter-spacing: .24em; color: #6f6a5f; }

.ch-led { width: 8px; height: 8px; border-radius: 50%; background: #39c46a; box-shadow: 0 0 8px 1px #39c46a; flex-shrink: 0; }
.ch-led--pulse { animation: chPulse 2.4s ease-in-out infinite; }
@keyframes chPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.ch-led--sm { width: 9px; height: 9px; background: #2f2c22; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.ch-led--sm.is-on { background: #3ad06e; box-shadow: 0 0 8px 1px #3ad06e; }

.ch-body { display: flex; gap: 18px; align-items: stretch; height: 635px; }

/* ---- left faceplate ---- */
.ch-face { width: 286px; flex-shrink: 0; display: flex; flex-direction: column; gap: 13px;
  background: linear-gradient(180deg, #171510, #121009); border-radius: 18px; padding: 16px 16px 15px;
  border: 1px solid #2b271f; box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05); }
.ch-lab { font-weight: 800; font-size: 11px; letter-spacing: .2em; color: #8a8375; }
.ch-labrow { display: flex; align-items: center; justify-content: space-between; }
.ch-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 10px; color: #5f5a51; }

.ch-knobs { display: flex; gap: 12px; }
.ch-knobcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* The whole ring is the hit area: press anywhere on it and the knob turns to that
   position (gwj-device.js reads the angle under the cursor), so you don't have to
   grab the little cap to change a value. */
.ch-knob__ring { position: relative; width: 118px; height: 118px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.ch-knob__tick { position: absolute; left: 50%; top: 50%; width: 2px; height: 7px; background: #4a453b; }
.ch-knob__tick.is-on { height: 10px; background: #f2c14e; box-shadow: 0 0 6px rgba(242,193,78,.8); }
.ch-knob__lab { position: absolute; left: 50%; top: 50%; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 11px; color: #8a8375; white-space: nowrap; }
.ch-knob__lab.is-on { color: #4fe07f; text-shadow: 0 0 7px rgba(79,224,127,.85); }
.ch-knob__cap { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #46413a, #26221c 46%, #15120d); border: 1px solid #0c0a07; cursor: grab;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.14), inset 0 -4px 8px rgba(0,0,0,.7), 0 3px 6px rgba(0,0,0,.5); touch-action: none; }
.ch-knob__cap:active { cursor: grabbing; }
/* Pivot MUST be the knob's centre. Bar runs from centre outward; transform-origin
   50% 100% is its bottom edge, and `top: calc(50% - height)` puts that edge exactly on
   the centre. Previously it pivoted 11px above centre and never lined up with a tick. */
.ch-knob__ptr { position: absolute; left: 50%; top: calc(50% - 27px); width: 4px; height: 27px;
  border-radius: 2px; background: #f2c14e; box-shadow: 0 0 6px rgba(242,193,78,.6);
  transform-origin: 50% 100%; }
.ch-knob__dot { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #524c43, #1c1913); }
.ch-read { width: 100%; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 17px;
  color: #f2c14e; background: #0c0a06; border: 1px solid #2a251c; border-radius: 6px; padding: 3px 0;
  text-shadow: 0 0 8px rgba(242,193,78,.4); }

/* segmented buttons */
.ch-seg { display: flex; gap: 4px; background: #0c0a06; border-radius: 10px; padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.ch-seg__btn { flex: 1; border: 0; padding: 8px 4px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: .03em; transition: all .12s;
  color: #9a9284; background: linear-gradient(180deg, #2a2620, #201d17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4); }
.ch-seg__btn.is-on { color: #4fe07f; text-shadow: 0 0 8px rgba(79,224,127,.8);
  background: linear-gradient(180deg, #16140f, #0d0b07);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 0 0 1px rgba(79,224,127,.28); }

/* PLAY */
.ch-play { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-radius: 13px; border: 1px solid #3d382e; cursor: pointer;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
              repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
              linear-gradient(180deg, #2b2720 0%, #1a1710 60%, #14110b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.4),
              0 7px 16px -3px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.45); }
.ch-play__collar { width: 72px; height: 72px; border-radius: 50%; padding: 8px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 34%, #2c2820, #0c0a07); box-shadow: inset 0 3px 7px rgba(0,0,0,.75); }
.ch-play__cap { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: #fbf3df; margin-left: 0; transition: transform .06s;
  background: radial-gradient(circle at 50% 30%, #d9573c, #c1381f 52%, #8e250f 100%);
  box-shadow: 0 5px 9px -1px rgba(0,0,0,.6), inset 0 3px 3px rgba(255,255,255,.4), inset 0 -6px 9px rgba(0,0,0,.42);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ch-play:active .ch-play__cap { transform: translateY(4px); box-shadow: inset 0 3px 7px rgba(0,0,0,.5); }
.ch-play__meta { display: flex; flex-direction: column; gap: 6px; }
.ch-play__t { font-weight: 900; font-size: 15px; letter-spacing: .2em; color: #cdc6b8; }
.ch-play__st { display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 10px; letter-spacing: .16em; color: #7c766a; }

/* Slide switch (GWJDevice.slideSwitch). This lived only as .dexterity-dials .ch-switch
   and .fifths-switch-row .ch-switch — two callers that each scoped their own copy — so
   a third caller (GWJ-INV1) got the markup with no styling at all and rendered three
   bare buttons. It belongs with the kit: the base is here, and both scoped blocks are
   more specific so they still win where they differ. */
.ch-switch { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  padding: 3px; border-radius: 9px; background: #0c0a06; border: 1px solid #2a251c;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.85); }
.ch-switch__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2));
  transform: translateX(calc(var(--i, 0) * 100%)); border-radius: 6px; pointer-events: none;
  background: radial-gradient(circle at 40% 26%, rgba(255,255,255,.35), transparent 46%),
              linear-gradient(180deg, #d7d2c8, #a29d93 52%, #6f6a61);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.5);
  transition: transform .18s cubic-bezier(.4,1.3,.5,1); }
.ch-switch__pos { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 7px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 10px;
  letter-spacing: .06em; color: #7d766a; transition: color .16s; }
.ch-switch__pos.is-on { color: #211a12; }

.ch-rule { height: 1px; background: linear-gradient(90deg, transparent, #33302a, transparent); }

/* info plates */
.ch-plate { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; border: 1px solid #2b271f;
  background: linear-gradient(180deg, #1c1a13, #141109);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 2px rgba(0,0,0,.4); }
.ch-plate__l { width: 64px; flex-shrink: 0; font-weight: 800; font-size: 10px; letter-spacing: .18em; color: #7c766a; }
.ch-plate__v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 15px; color: #e9e2d3;
  white-space: nowrap; overflow: hidden; }
.ch-plate--warm { background: linear-gradient(180deg, #221510, #180d09); border-color: #3a251d; }
.ch-plate__tip { font-weight: 700; font-size: 13px; line-height: 1.35; color: #c1381f; }

/* ---- right LCD ---- */
.ch-bezel { flex: 1; min-width: 0; border-radius: 16px; padding: 9px; background: #0a0906; border: 1px solid #33302a;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85); }
.ch-lcd { position: relative; height: 100%; min-height: 470px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(180deg, #f8efd4 0%, #f4d79a 52%, #efb457 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 2px 10px rgba(0,0,0,.12); }
.ch-lcd__sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 22%); }
.ch-lcd__in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 18px 20px 12px; }
/* .tools-section sets `color: white` on everything inside it, and the LCD is nearly
   white — so the chord name was invisible. Scoped + !important so no ancestor colour
   can win it back. */
.ch-lcd .ch-title { margin: 0 0 6px; padding-top: 2px; text-align: center; font-weight: 900;
  font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: #241705 !important; }

/* fretboard diagram */
/* Fixed diagram size, centred in the LCD. Previously the grid was flex:1 and grew to
   fill a 635px-tall panel, which is why the fret boxes looked enormous. */
.ch-fb { display: flex; flex-direction: column; flex: 1; min-height: 0;
  justify-content: center; width: 100%; max-width: 236px; margin: 0 auto; }
.ch-fb__top, .ch-fb__bot { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; }
.ch-fb__mark { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; color: #241705; line-height: 1.2; }
.ch-fb__mark.is-mute { opacity: .42; }
.ch-fb__note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 14px; color: #241705; padding-top: 5px; }
.ch-fb__grid { position: relative; flex: 0 0 310px; height: 310px; margin: 6px 0; }
.ch-fb__string { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #5a3d18; opacity: .9; }
.ch-fb__fret { position: absolute; height: 2px; background: #5a3d18; opacity: .9; }
.ch-fb__fret.is-nut { height: 7px; background: #241705; opacity: 1; border-radius: 1px; }
.ch-fb__fretno { position: absolute; left: -30px; transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 12px; color: rgba(36,23,5,.62); }
.ch-fb__barre { position: absolute; height: 24px; border-radius: 12px; background: #17120c; transform: translateY(-50%); z-index: 2; }
.ch-fb__dot { position: absolute; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; background: #17120c; color: #fbf3df;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.18); }
.ch-fb__dot.is-root { background: #c1381f; }

@media (max-width: 940px) {
  .ch-body { height: auto; flex-direction: column; }
  .ch-face { width: 100%; }
  .ch-lcd { min-height: 400px; }
}

/* ============================================================
   GWJ·BT — Backing Track device (backing-tool.js)
   Chassis / knobs / segmented buttons are the shared .ch-* components. Only the
   right column (video panel, chord cards, scales plate) and the track stepper
   are specific to this device.
   ============================================================ */
.bt-face { justify-content: space-between; }

/* track stepper */
.bt-step { display: flex; gap: 6px; align-items: stretch; }
.bt-step__b { width: 34px; flex-shrink: 0; border: 0; border-radius: 8px; cursor: pointer;
  color: #cdc6b8; font-size: 12px; font-family: inherit;
  background: linear-gradient(180deg, #2a2620, #201d17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4); }
.bt-step__b:hover { color: #fff; }
.bt-step__b:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
.bt-step__t { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; border-radius: 8px; background: #0c0a06; border: 1px solid #2a251c;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 11px; color: #e9e2d3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* right column */
.bt-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }

/* video panel — fixed 16:9; the empty state must not resize it */
.bt-vid { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  cursor: pointer; border: 1px solid #000;
  background: linear-gradient(155deg, #241d16, #12100b 58%, #0a0906);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 8px rgba(0,0,0,.55), 0 12px 26px -6px rgba(0,0,0,.7); }
.bt-vid__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 42%, rgba(224,145,43,.18), transparent 70%); }
/* Idle panel = the track's own poster frame. The scrim keeps the strips and the play
   cap legible over whatever the thumbnail happens to be (some are near-white). */
.bt-vid__poster { position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.bt-vid.has-poster .bt-vid__glow {
  background: radial-gradient(62% 62% at 50% 46%, rgba(10,8,5,.42), rgba(10,8,5,.72) 78%),
              linear-gradient(180deg, rgba(10,8,5,.6), rgba(10,8,5,.15) 40%, rgba(10,8,5,.72)); }
.bt-vid.has-poster:hover .bt-vid__glow { background:
  radial-gradient(62% 62% at 50% 46%, rgba(10,8,5,.3), rgba(10,8,5,.62) 78%),
  linear-gradient(180deg, rgba(10,8,5,.55), rgba(10,8,5,.08) 40%, rgba(10,8,5,.68)); }
.bt-vid__top, .bt-vid__bot { position: absolute; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; }
.bt-vid__top { top: 12px; }
.bt-vid__bot { bottom: 12px; }
.bt-vid__tl { font-weight: 800; font-size: 11px; letter-spacing: .2em; color: rgba(242,236,224,.6); }
.bt-vid__tr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 11px; color: rgba(242,236,224,.55); }
.bt-vid__key { font-weight: 800; font-size: 15px; color: rgba(244,237,225,.82); }
.bt-vid__bpm { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 12px; color: rgba(244,237,225,.55); }
.bt-vid__mid { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; }
.bt-prog { font-weight: 900; font-size: 34px; color: #f4ede1; text-align: center; line-height: 1.1; }
.bt-prog--empty { font-size: 20px; letter-spacing: .06em; color: rgba(244,237,225,.6); }

.bt-play__collar { width: 80px; height: 80px; border-radius: 50%; padding: 8px; flex-shrink: 0;
  background: rgba(0,0,0,.35); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.bt-play__cap { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fbf3df; transition: transform .06s;
  background: radial-gradient(circle at 50% 30%, #d9573c, #c1381f 52%, #8e250f 100%);
  box-shadow: 0 5px 9px -1px rgba(0,0,0,.6), inset 0 3px 3px rgba(255,255,255,.4), inset 0 -6px 9px rgba(0,0,0,.42); }
.bt-vid:active .bt-play__cap { transform: translateY(4px); box-shadow: inset 0 3px 7px rgba(0,0,0,.5); }

.bt-beats { display: flex; gap: 7px; height: 9px; opacity: 0; transition: opacity .15s; }
.bt-beats.is-live { opacity: 1; }
.bt-beat { width: 9px; height: 9px; border-radius: 50%; background: #2f2c22; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bt-beat.is-on { background: #3ad06e; box-shadow: 0 0 8px 1px #3ad06e; }

/* chord cards — always exactly 4, so the row never reflows */
.bt-cards { display: flex; gap: 8px; }
.bt-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 8px; border-radius: 12px; transition: background .12s, box-shadow .12s;
  background: linear-gradient(180deg, #1c1a13, #141109);
  /* inset ring, not a border — a border would shift the card size between states */
  box-shadow: inset 0 0 0 1px #2b271f, inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.4); }
.bt-card__c { font-weight: 800; font-size: 22px; color: #e9e2d3; }
.bt-card__r { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #7c766a; }
.bt-card.is-on { background: linear-gradient(180deg, #c1381f, #932a17);
  box-shadow: 0 0 16px -3px #c1381f, inset 0 0 0 1px #c1381f; }
.bt-card.is-on .bt-card__c { color: #fbf3df; }
.bt-card.is-on .bt-card__r { color: rgba(251,243,223,.8); }

/* scales plate */
.bt-scales { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #221510, #180d09); border: 1px solid #3a251d; }
.bt-scales__l { flex-shrink: 0; font-weight: 800; font-size: 10px; letter-spacing: .18em; color: #7c766a; }
.bt-scales__v { font-weight: 700; font-size: 13px; color: #c1381f; }

@media (max-width: 940px) {
  .bt-right { width: 100%; }
}
/* The real YouTube player fills the 16:9 slot while playing (the handoff's panel was
   always intended as a slot for a real embed). */
.bt-vid__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bt-stop { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border: 0;
  border-radius: 50%; cursor: pointer; color: #fbf3df; font-size: 11px; line-height: 1;
  background: rgba(12,10,7,.72); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.bt-stop:hover { background: #c1381f; }
/* GWJ-BT sizes to its content: the right column (16:9 video + chord cards + scales)
   sets the height, and the faceplate stretches to match it. The Chords device keeps
   its fixed 635px body — its LCD depends on it. */
.ch-body.bt-body { height: auto; align-items: stretch; }
.bt-body .ch-face { justify-content: space-between; gap: 12px; }

/* ============================================================
   GWJ·BND — Bend Trainer device (bend-tool.js)
   Chassis, knobs and segmented buttons are the shared .ch-* components. Only the
   footswitches, the LCD contents (FROM / curve / BEND TO), and the cents meter are
   specific to this pedal. The old flat .bend-* UI is gone — this replaces it.
   ============================================================ */
/* The body is shorter than the Chords device's fixed 635px LCD panel. */
.ch-body.bnd-body { height: 452px; }
.bnd-body .ch-face { gap: 10px; }
.bnd-body .ch-lcd { min-height: 0; }
/* The mic's red jewel doubles as the power LED: green idle, red while listening. */
.bnd-led--rec { background: #e5484d !important; box-shadow: 0 0 8px 1px #e5484d !important;
  animation: chPulse 1.1s ease-in-out infinite; }

/* FRET knob: 18 values, so the ring labels would be a smear — the number sits in the
   cap instead, which is how the handoff draws it. */
.bnd-fretcol .ch-knob__lab { display: none; }
.bnd-fretdot { width: 34px !important; height: 34px !important; margin: -17px 0 0 -17px !important;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 16px;
  color: #f2c14e; text-shadow: 0 0 7px rgba(242,193,78,.5);
  background: radial-gradient(circle at 40% 35%, #2a251e, #120f0a) !important; }

.bnd-tip { padding: 10px 12px; border-radius: 10px; border: 1px solid #2b271f;
  background: linear-gradient(180deg, #1c1a13, #141109);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 3px rgba(0,0,0,.5);
  font-weight: 700; font-size: 12.5px; line-height: 1.4; color: #a49c8d; }

/* ---- footswitches ---- */
.bnd-switches { display: flex; gap: 8px; padding-top: 2px; }
.bnd-fs { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bnd-fs__b { position: relative; width: 70px; height: 70px; border: 0; padding: 0; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .07s; }
.bnd-fs__b:active { transform: translateY(3px); }
/* bushing: faceted gunmetal */
.bnd-fs__bush { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #1b1915;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), transparent 58%),
    conic-gradient(from 22deg, #46423b, #6b665c 12%, #322e28 25%, #6b665c 38%, #38342e 50%, #6b665c 62%, #322e28 75%, #6b665c 88%, #46423b 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.66), 0 8px 13px -4px rgba(0,0,0,.72); }
/* cap: polished chrome */
.bnd-fs__cap { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #fdfdfb 0%, #e8e5de 17%, #a7a299 41%, #6f6a61 51%, #aca79d 62%, #eae7e0 84%, #cbc6bb 100%);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.95), inset 0 -6px 10px rgba(0,0,0,.28); }
.bnd-fs__lip { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 0 5px rgba(0,0,0,.32); }
.bnd-fs__led { position: relative; z-index: 2; width: 8px; height: 8px; border-radius: 50%; }
.bnd-fs__led.bnd-led--amber { background: #2a271f;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05); animation: none; }
.bnd-fs__led.bnd-led--amber.is-on { background: #ffcf5a !important;
  box-shadow: 0 0 9px 2px rgba(255,207,90,.85), inset 0 1px 1px rgba(255,255,255,.6) !important;
  animation: chPulse 1.1s ease-in-out infinite; }
/* the mic jewel reads as a record light — dim red even when off */
.bnd-fs__led.bnd-led--rec { background: #5a1712 !important; animation: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7), inset 0 0 3px rgba(255,59,48,.35) !important; }
.bnd-fs__led.bnd-led--rec.is-on { background: #ff3b30 !important;
  box-shadow: 0 0 10px 2px rgba(255,59,48,.9), inset 0 1px 1px rgba(255,255,255,.5) !important;
  animation: chPulse 1.1s ease-in-out infinite; }
.bnd-fs__lab { font-weight: 900; font-size: 11px; letter-spacing: .17em; color: #b9b2a4; }
.bnd-fs__st { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 9px;
  letter-spacing: .12em; color: #6b665c; }

/* ---- LCD ---- */
/* .tools-section paints everything white; the LCD is nearly white, so every ink colour
   in here is stated explicitly (same reason .ch-title needs !important). */
.bnd-screen { justify-content: space-between; padding: 24px 30px 20px; }
.bnd-row { display: flex; align-items: center; justify-content: space-between; }
.bnd-note { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bnd-note__l { font-weight: 800; font-size: 12px; letter-spacing: .2em; color: rgba(36,23,5,.55) !important; }
.bnd-note__n { font-weight: 900; font-size: 50px; line-height: 1.05; letter-spacing: -.01em; color: #241705 !important; }
.bnd-note--to .bnd-note__n { color: #c1381f !important; }
.bnd-note__hz { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 13px;
  color: rgba(36,23,5,.62) !important; }
.bnd-curvewrap { flex: none; width: 134px; display: flex; align-items: center; justify-content: center; }
.bnd-curve { width: 134px; height: 94px; overflow: visible; }
.bnd-curve__g { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 12px; fill: #c1381f; }

/* ---- cents meter ---- */
.bnd-meter { padding: 0 4px; }
.bnd-meter__labs { position: relative; height: 15px; margin-bottom: 6px; }
.bnd-meter__lab { position: absolute; transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 11px;
  color: rgba(36,23,5,.5) !important; }
.bnd-ruler { position: relative; height: 66px; }
.bnd-wash { position: absolute; left: 4px; right: 4px; bottom: 16px; height: 24px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(193,56,31,.14) 0%, rgba(193,56,31,.03) 26%,
    rgba(31,122,46,.16) 50%, rgba(193,56,31,.03) 74%, rgba(193,56,31,.14) 100%); }
/* the in-tune band: ±TOL cents, lit when the needle is inside it */
.bnd-zone { position: absolute; bottom: 9px; height: 40px; border-radius: 6px;
  background: rgba(31,122,46,.07); border: 1px solid rgba(36,23,5,.14); transition: background .12s, box-shadow .12s; }
.bnd-zone.is-good { background: rgba(31,122,46,.2); border-color: rgba(31,122,46,.55);
  box-shadow: 0 0 16px rgba(31,122,46,.5), inset 0 0 8px rgba(31,122,46,.25); }
.bnd-tick { position: absolute; bottom: 16px; width: 2px; height: 8px; transform: translateX(-50%);
  border-radius: 1px; background: rgba(36,23,5,.24); }
.bnd-tick.is-major { height: 15px; background: rgba(36,23,5,.42); }
.bnd-tick.is-zero { height: 24px; background: rgba(36,23,5,.6); }
.bnd-base { position: absolute; left: 4px; right: 4px; bottom: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(36,23,5,.4) 12%, rgba(36,23,5,.4) 88%, transparent); }
/* needle: tapered stem + diamond head, parked centre and dim until the mic hears a pitch */
.bnd-needle { position: absolute; bottom: 10px; width: 2.5px; height: 46px; transform: translateX(-50%);
  border-radius: 2px; background: linear-gradient(180deg, #c1381f, rgba(193,56,31,.35)); opacity: .55;
  transition: left .09s linear, background .12s, opacity .12s; }
.bnd-needle__h { position: absolute; bottom: 52px; width: 13px; height: 13px; border-radius: 2px;
  transform: translate(-50%, 0) rotate(45deg); background: #c1381f; opacity: .55;
  box-shadow: 0 0 9px rgba(193,56,31,.2), inset 0 1px 1px rgba(255,255,255,.5);
  transition: left .09s linear, background .12s, opacity .12s; }
.bnd-needle.is-live { opacity: 1; box-shadow: 0 0 8px rgba(193,56,31,.7); }
.bnd-needle__h.is-live { opacity: 1; box-shadow: 0 0 9px rgba(193,56,31,.65), inset 0 1px 1px rgba(255,255,255,.5); }
.bnd-needle.is-good { background: linear-gradient(180deg, #1f7a2e, rgba(31,122,46,.35)); box-shadow: 0 0 8px rgba(31,122,46,.7); }
.bnd-needle__h.is-good { background: #1f7a2e; box-shadow: 0 0 9px rgba(31,122,46,.65), inset 0 1px 1px rgba(255,255,255,.5); }

.bnd-status { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bnd-status__t { font-weight: 800; font-size: 25px; line-height: 1; text-align: center; color: #241705 !important; }
.bnd-status__t.is-good { color: #1f7a2e !important; }
.bnd-status__s { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; color: rgba(36,23,5,.55) !important; }

@media (max-width: 940px) {
  .ch-body.bnd-body { height: auto; }
  .bnd-screen { padding: 20px 18px 16px; }
  .bnd-note__n { font-size: 38px; }
}
/* ^ GWJ-120 (David, 2026-08-14): this closing brace was MISSING. The file simply
   ended inside `@media (max-width: 940px)` and the browser forgave it at EOF, so
   nothing looked wrong. The moment anything was appended, the new rules became
   silently mobile-only — which is exactly what happened to the notation block
   below (it computed `display: block` at 1280px instead of `grid`). Anything
   added past this point is top level. */

/* ============================================================================
   GWJ·INV1 — Triad Inversions pedal (2026-08-23 design handoff).
   Chassis, knobs, segmented banks, switch and LCD shell all come from the shared
   .ch-* kit above; only what is unique to this pedal lives here — the wider body,
   the PLAY block, and everything drawn on the screen (fretboard map, chord cards).

   NOTE on colour: .tools-section sets `color: white` on its whole subtree and this
   screen is near-white, so every ink colour below is stated explicitly. Inheriting
   here means invisible text — the same trap .ch-lcd .ch-title already documents.
   ============================================================================ */
/* The mount is a grid item, so its default min-width:auto lets it grow to the pedal's
   1280px inside a 666px pane — and .tool-surface clips rather than scrolls, so the
   right half of the device simply disappeared on a narrow screen. min-width:0 lets it
   take the track's width, and max-width:100% then does its job. Scoped to this mount:
   the other pedals are 908px and their behaviour is not this ticket's to change. */
.ch-mount[data-inversions-tool] { min-width: 0; }
.inv-dev { width: 1280px; max-width: 100%; }
.inv-body { height: 656px; }
.inv-face { width: 300px; gap: 10px; }
.ch-lab.is-off { color: #4d4941; }
/* The shared plate reserves 64px for its key and sets the tip at 13px. At this
   faceplate width that wrapped the longest TIP (the ONE view's) onto five lines and
   pushed the plate past the bottom of the 656px body. The handoff's own numbers —
   56px key, 12px tip — fit. */
.inv-face .ch-plate__l { width: 56px; }
.inv-face .ch-plate__tip { font-size: 12px; }
.inv-lcd { min-height: 0; }
.inv-scr { padding: 15px 20px 14px; gap: 12px; }

/* PLAY block — crosshatched plate, bezel, domed cap, status LED. */
.inv-play { display: flex; align-items: center; gap: 15px; padding: 12px 16px; border-radius: 13px;
  border: 1px solid #3d382e;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2b2720, #1a1710 60%, #14110b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.4),
              0 7px 16px -3px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.45); }
.inv-play__btn { width: 66px; height: 66px; flex: none; border: 0; border-radius: 50%; padding: 7px; cursor: pointer;
  background: radial-gradient(circle at 50% 34%, #2c2820, #0c0a07);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.07); }
.inv-play__cap { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  font-style: normal; font-size: 21px; color: #fbf3df; padding-left: 3px;
  background: radial-gradient(circle at 50% 30%, #e05a3f, #c1381f 52%, #78230f);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  box-shadow: 0 5px 9px -1px rgba(0,0,0,.6), inset 0 3px 3px rgba(255,255,255,.4), inset 0 -6px 9px rgba(0,0,0,.42); }
.inv-play__btn:active .inv-play__cap { transform: translateY(4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 3px 7px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.15); }
.inv-play__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inv-play__lab { font-weight: 900; font-size: 14px; letter-spacing: .19em; color: #cdc6b8; }
.inv-play__st { display: flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 10px;
  letter-spacing: .16em; color: #7c766a; }
.inv-play__led { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #2f2c22; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.inv-play__led.is-on { background: #3ad06e; box-shadow: 0 0 9px 2px rgba(58,208,110,.85), inset 0 1px 1px rgba(255,255,255,.4); }

/* ---- screen: heading + active-chord strip ---- */
.inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.inv-head__t { margin: 0; font-weight: 900; font-size: 25px; letter-spacing: -.01em; color: #241705; }
.inv-head__m { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 12px;
  letter-spacing: .06em; color: rgba(36,23,5,.6); white-space: nowrap; }
.inv-strip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.inv-strip__where { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 11px;
  letter-spacing: .06em; color: rgba(36,23,5,.6); }
.inv-strip__name { font-weight: 900; font-size: 19px; color: #241705; text-align: center; }
.inv-strip__inv { font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #c1381f; }

/* ---- screen: horizontal fretboard map ----
   The 182px height is load-bearing: strings occupy the middle 80%, which gives ~29px
   of pitch against 26px markers. Shrink the board and the markers collide. */
.inv-map { position: relative; height: 182px; }
.inv-map__nut { position: absolute; left: 8%; top: 10%; bottom: 10%; width: 5px; margin-left: -5px;
  background: rgba(36,23,5,.9); border-radius: 1px; }
.inv-map__fret { position: absolute; top: 10%; bottom: 10%; width: 1.5px; margin-left: -.75px;
  background: rgba(90,61,24,.55); }
/* Strings start AT THE NUT. Running them to x:0 drew board to the left of the first
   fret, which is the headstock — there is no fretboard there. The open-string markers
   still sit out in that column at 4%, which is how an open string is marked. */
.inv-map__string { position: absolute; left: 8%; right: 0; height: 1.2px; margin-top: -.6px;
  background: rgba(90,61,24,.7); }
.inv-map__string.is-thick { height: 2px; margin-top: -1px; }
.inv-map__inlay { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%,-50%); background: rgba(36,23,5,.09); }
.inv-map__inlay--sm { width: 12px; height: 12px; }
.inv-map__dot { position: absolute; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%,-50%);
  display: grid; place-items: center; font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 11px; color: #fbf3df;
  background: #17120c;
  box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.2); }
.inv-map__dot.is-root { background: #c1381f; }
.inv-map__nums { position: relative; height: 14px; margin-top: 4px; }
.inv-map__nums span { position: absolute; transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 11px; color: rgba(36,23,5,.5); }

/* ---- screen: chord cards ---- */
.inv-cards { display: grid; gap: 12px; }
.inv-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 9px; border-radius: 12px;
  min-width: 0; cursor: pointer; background: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: box-shadow .18s, background .18s; }
.inv-card.is-active { background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 2px #c1381f, 0 4px 10px -3px rgba(0,0,0,.3); }
.inv-card__cap { font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  text-align: center; color: rgba(36,23,5,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A chord box is PORTRAIT — taller than it is wide, like the printed ones. Left to
   fill the card it came out landscape, which reads as a grid rather than a fretboard.
   The 30px gutter + the box are capped at 200px and centred, and the x/o and note rows
   are capped and padded to exactly the same 200/30, so all three stay column-aligned
   with the strings however wide the card gets. */
.inv-card__marks, .inv-card__notes { display: grid; grid-template-columns: repeat(6, 1fr);
  width: 100%; max-width: 200px; margin: 0 auto; padding-left: 30px;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; }
.inv-card__marks { font-size: 15px; line-height: 18px; color: #c1381f; }
.inv-card__marks .is-mute { color: rgba(36,23,5,.35); }
.inv-card__notes { font-size: 13px; height: 17px; color: rgba(36,23,5,.72); }
.inv-card__notes .is-root { color: #c1381f; }
.inv-card__diagram { display: flex; width: 100%; max-width: 200px; margin: 0 auto; }
.inv-card__gutter { position: relative; width: 30px; flex: none; }
/* GWJ-258: this styled ONE label ("9fr") at the top of the card, so it was set heavy
   and dark. Now every fret row is numbered, and a stack of six numbers at 800/14px
   shouts louder than the diagram it is annotating. Lighter and smaller: it is a
   reference the eye goes to, not a headline. */
.inv-card__fret { position: absolute; right: 6px; transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 11.5px; color: rgba(36,23,5,.5); }
.inv-box { position: relative; flex: 1; min-width: 0; height: 190px; }
.inv-box__v { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(90,61,24,.75); }
/* The fret lines stop ON the outer strings. The string lines sit at (c+0.5)/6, so the
   first is at 8.333% and the last at 91.667% — a full-width rule overhangs both ends
   and the box reads as a grid with two stray whiskers instead of a fretboard. */
.inv-box__h { position: absolute; left: 8.3333%; right: 8.3333%; height: 2px; margin-top: -1px;
  background: rgba(90,61,24,.75); }
.inv-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; transform: translate(-50%,-50%);
  display: grid; place-items: center; font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 14px; color: #fbf3df;
  background: #17120c; box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.18); }
.inv-dot.is-root { background: #c1381f; }
.inv-dot.is-sm { width: 22px; height: 22px; font-size: 12px; }

@media (max-width: 900px) {
  .inv-body { height: auto; }
  .inv-face { width: 100%; }
  .inv-lcd { min-height: 520px; }
}

/* ============================================================================
   GWJ·SX1 — Scale Exercises pedal (2026-08-24 design handoff).
   Chassis, knobs, segmented banks and LCD shell come from the shared .ch-* kit;
   only what is unique to this pedal lives here. Screen theme is PAPER, not amber —
   engraved notation has to read like paper.

   As in the other pedals, every ink colour on the screen is stated explicitly:
   .tools-section sets `color: white` on its whole subtree.
   ============================================================================ */
.ch-mount[data-scale-exercises-tool] { min-width: 0; }
.sx-dev { width: 1320px; max-width: 100%; }
.sx-body { height: 684px; }
.sx-face { width: 364px; gap: 9px; }
.sx-bezel { min-width: 0; }
.sx-lcd { min-height: 0; background: linear-gradient(180deg, #fdfaf1 0%, #f7f1e0 52%, #eee5cd 100%); }
.sx-scr { padding: 15px 20px 14px; gap: 11px; }

/* The five <select>s and friends are the tool's state, not its UI (see tools.html).
   Off-canvas rather than display:none — a hidden <select> still has to be a real,
   measurable control for its change events and value round-trip to behave. */
.sx-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* PATTERN's readout is a long name; TEMPO's ring is 81 values with the labels thinned
   down to five, so its printed labels sit where the kept ticks are. */
.sx-patcol .ch-read { font-size: 11px; }
/* Fourteen scales: ticks yes, printed labels no — they overlap at this radius. The
   readout names the selection, as on the Bend pedal's FRET knob. */
.sx-scalecol .ch-knob__lab { display: none; }
.sx-scalecol .ch-read { font-size: 13px; }
.sx-tempocol .ch-knob__lab { font-size: 8.5px; }

.sx-pair { display: flex; gap: 12px; }
.sx-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-boxbank.is-tight .ch-seg__btn { font-size: 10px; padding-left: 1px; padding-right: 1px; }

/* transport */
.sx-transport { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid #3d382e;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2b2720, #1a1710 60%, #14110b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.4),
              0 7px 16px -3px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.45); }
.sx-play { width: 66px; height: 66px; flex: none; border: 0; border-radius: 50%; padding: 7px; cursor: pointer;
  background: radial-gradient(circle at 50% 34%, #2c2820, #0c0a07);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.07); }
.sx-play__cap { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  font-style: normal; font-size: 21px; color: #fbf3df; padding-left: 3px;
  background: radial-gradient(circle at 50% 30%, #e05a3f, #c1381f 52%, #78230f);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  box-shadow: 0 5px 9px -1px rgba(0,0,0,.6), inset 0 3px 3px rgba(255,255,255,.4), inset 0 -6px 9px rgba(0,0,0,.42); }
.sx-play__cap.is-stop { font-size: 17px; padding-left: 0; }
.sx-play:active .sx-play__cap { transform: translateY(4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 3px 7px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.15); }
.sx-transport__col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.sx-transport__st { display: flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 13px; letter-spacing: .17em; color: #cdc6b8; }
.sx-led { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #2f2c22; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.sx-led.is-on { background: #3ad06e; box-shadow: 0 0 9px 2px rgba(58,208,110,.85), inset 0 1px 1px rgba(255,255,255,.4); }
.sx-repeat { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 7px;
  border: 0; cursor: pointer; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 10px; letter-spacing: .14em; color: #9a9284;
  background: linear-gradient(180deg, #2a2620, #201d17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4); transition: all .12s; }
.sx-repeat__dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #2f2c22; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.sx-repeat.is-on { color: #4fe07f; text-shadow: 0 0 8px rgba(79,224,127,.8);
  background: linear-gradient(180deg, #16140f, #0d0b07);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 0 0 1px rgba(79,224,127,.28); }
.sx-repeat.is-on .sx-repeat__dot { background: #4fe07f; box-shadow: 0 0 7px 1px rgba(79,224,127,.8); }

.sx-tip .ch-plate__l { width: 34px; }
.sx-tip .ch-plate__tip { font-size: 12px; }
/* The share button sits on the paper screen, so it is inked for paper, not for the
   faceplate's metal. */
.sx-strip__r { display: flex; align-items: center; gap: 10px; flex: none; }
.sx-share { flex: none; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(33,26,16,.18); background: rgba(255,255,255,.55);
  font-weight: 800; font-size: 11px; letter-spacing: .04em; color: rgba(33,26,16,.72); }
.sx-share:hover { color: #c1381f; border-color: rgba(193,56,31,.4); }
.sx-share__st { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 10px;
  letter-spacing: .08em; color: #c1381f; white-space: nowrap; }

/* ---- screen ---- */
.sx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sx-head__t { margin: 0; flex: none; white-space: nowrap; font-weight: 900; font-size: 23px;
  letter-spacing: -.01em; color: #211a10; }
.sx-head__m { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 12px;
  letter-spacing: .06em; color: rgba(33,26,16,.6); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-strip { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.sx-strip__lab { font-weight: 900; font-size: 16px; color: #211a10; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-strip__count { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 11px; letter-spacing: .06em; color: #c1381f; }
/* The staff scrolls inside the screen; alphaTab lays out as many systems as it needs. */
.sx-staff { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.sx-staff::-webkit-scrollbar { width: 8px; }
.sx-staff::-webkit-scrollbar-track { background: transparent; }
.sx-staff::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 4px; }

@media (max-width: 900px) {
  .sx-body { height: auto; }
  .sx-face { width: 100%; }
  .sx-staff { min-height: 420px; }
}

/* ============================================================
   GWJ-222 — the verified mark on a lesson (gps-editor)
   David: "a verified green checkmark that I can put on a lesson once I have
   verified it, and that means not to touch it unless I ask you to." The badge
   is the visible half; the lock lives server-side in mcp.js and the pages API,
   because a mark that only warns is a mark that gets edited through.
   ============================================================ */
.gps-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gps-title-row h1 { margin: 0; }
.gps-verify {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #ded7cf); background: #fff;
  color: #6b7280; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .01em; line-height: 1; white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s;
}
.gps-verify:hover { border-color: #9aa3ad; color: #3f4650; }
.gps-verify__tick {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .35;
}
.gps-verify[aria-pressed="true"] {
  border-color: #1f7a52; background: #e7f5ee; color: #14603e;
}
.gps-verify[aria-pressed="true"] .gps-verify__tick { opacity: 1; }
.gps-verify[aria-pressed="true"]:hover { background: #d9efe4; border-color: #14603e; }
.gps-verify:focus-visible { outline: 2px solid #1f7a52; outline-offset: 2px; }
.gps-verify[disabled] { opacity: .5; cursor: default; }
/* A verified lesson reads as settled: the body gets a quiet green edge so the
   state is legible while scrolling, not only at the title. */
[data-editing-lesson].is-verified { box-shadow: inset 3px 0 0 #1f7a52; }
@media (max-width: 560px) { .gps-verify { font-size: 11px; padding: 4px 9px 4px 7px; } }

/* GWJ-222 — the verified tick in the GPS editor index.
   Placed BEFORE the title so the ticks form a scannable column; a badge
   trailing a ragged-length title cannot be run down with the eye. Glyph only —
   92 rows of the word "Verified" is noise, so the date lives in the tooltip. */
/* Every row carries the box. Empty outline = not yet checked, filled green =
   verified. Drawing nothing on an unverified row made the whole column
   invisible until the first lesson was signed off, which read as "the feature
   did not ship". */
.gps-toc-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-2, #c9d1d7); background: transparent;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.gps-toc-verified:hover { border-color: #1f7a52; color: #9bc7b1; }
.gps-toc-verified.is-on {
  border-color: #1f7a52; background: #1f7a52; color: #fff;
}
.gps-toc-verified.is-on:hover { background: #14603e; border-color: #14603e; }
.gps-toc-verified:focus-visible { outline: 2px solid #1f7a52; outline-offset: 2px; }
.gps-toc-verified[disabled] { opacity: .45; cursor: default; }
.gps-toc-tick {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* "0/17 verified" is worth showing — it says there is work here. Nothing at all
   just looks broken. */
.gpsx-sec-verified.is-none { background: transparent; color: #9aa3ad; }
/* Reserve the slot on every row so titles stay left-aligned whether or not the
   row is ticked — otherwise the list jitters as lessons get verified. */
.gps-editor-toc-link { display: flex; align-items: center; gap: 8px; cursor: pointer; width: 100%; }
.gps-editor-toc-link > .gps-toc-num + .gps-editor-toc-title,
.gps-editor-toc-link > .gps-toc-num + .gps-editor-toc-section-tag { margin-left: 25px; }
.gps-editor-toc-link > .gps-toc-verified + .gps-editor-toc-title,
.gps-editor-toc-link > .gps-toc-verified + .gps-editor-toc-section-tag { margin-left: 0; }
/* Section progress — the number that says where the evening should go. */
.gpsx-sec-verified {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  background: #eef1f3; color: #5c656e;
}
.gpsx-sec-verified.is-complete { background: #e7f5ee; color: #14603e; }

/* GWJ-295: Leave a review (students) / approve reviews (admin) on the Reviews page. */
.gwj-review-box {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 32px);
}
.gwj-review-box[hidden] { display: none; }
.gwj-review-box__title { margin: 0; color: #fff6e3; font-size: clamp(1.3rem, 2vw, 1.7rem); text-transform: uppercase; line-height: 1.1; }
.gwj-review-box__note, .gwj-review-box__status { margin: 0; color: var(--gwj-home-muted); line-height: 1.6; }
.gwj-review-box__status:empty { display: none; }
.gwj-review-box__status { color: var(--gwj-home-gold); }
.gwj-review-box form { display: grid; gap: 12px; }
.gwj-review-box form .gwj-button, .gwj-review-box > .gwj-button { justify-self: start; }
.gwj-review-box__text {
  width: 100%; box-sizing: border-box; min-height: 140px; padding: 12px 14px;
  border: 1px solid var(--gwj-home-line); border-radius: 10px;
  background: rgba(255, 246, 227, 0.04); color: #fff6e3; font: inherit; line-height: 1.6; resize: vertical;
}
.gwj-review-box__text:focus { outline: 2px solid var(--gwj-home-gold); outline-offset: 1px; }
.gwj-review-queue__item { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--gwj-home-line); }
.gwj-review-queue__item blockquote { margin: 0; color: var(--gwj-home-muted); line-height: 1.6; }
.gwj-review-queue__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #fff6e3; }
.gwj-review-queue__meta strong { margin-right: auto; }
.gwj-review-queue__shown summary { cursor: pointer; color: var(--gwj-home-gold); padding-top: 8px; }

/* ---- Policies, Privacy, Terms and the public Packages page (2026-11-15) --------------
   Long-form reading pages in the home design. Built for going live with Stripe, whose
   checklist asks for clear prices with currency, refund and cancellation policies, a
   privacy policy and contact details on the public site. */
.gwj-legal-section {
  padding: clamp(90px, 8vw, 116px) clamp(18px, 6vw, 86px) clamp(40px, 5vw, 64px);
}
.gwj-legal {
  width: min(100%, 760px);
}
.gwj-legal h1 {
  font-family: var(--gwj-home-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 10px 0 14px;
  text-wrap: balance;
}
.gwj-legal .gwj-legal-lead {
  color: var(--gwj-home-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 8px;
}
.gwj-legal .gwj-legal-updated {
  font-family: var(--gwj-home-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gwj-home-muted);
  margin: 0 0 28px;
}
.gwj-legal h2 {
  font-family: var(--gwj-home-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 34px 0 10px;
  color: var(--gwj-home-ink);
}
.gwj-legal p,
.gwj-legal li {
  line-height: 1.66;
  color: rgba(244, 237, 222, 0.86);
}
.gwj-legal p { margin: 0 0 14px; }
.gwj-legal ul,
.gwj-legal ol { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 6px; }
.gwj-legal strong { color: var(--gwj-home-ink); }
.gwj-legal a { color: var(--gwj-home-gold); text-decoration: underline; text-underline-offset: 3px; }
.gwj-legal-note {
  border: 1px solid var(--gwj-home-line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 24px;
  background: var(--gwj-home-soft);
}
.gwj-legal-note p:last-child { margin-bottom: 0; }

.gwj-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin: 6px 0 10px;
}
.gwj-price-card {
  border: 1px solid var(--gwj-home-line);
  border-radius: 12px;
  padding: 18px 18px 14px;
  background: var(--gwj-home-brown);
}
.gwj-price-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--gwj-home-ink);
}
.gwj-price { margin: 0 0 10px !important; }
.gwj-price-amt {
  font-family: var(--gwj-home-display);
  font-size: 2rem;
  color: var(--gwj-home-gold);
  font-variant-numeric: tabular-nums;
}
.gwj-price-cur {
  font-family: var(--gwj-home-mono);
  font-size: 0.78rem;
  color: var(--gwj-home-muted);
}
.gwj-price-card ul { padding-left: 1.1em; gap: 4px; margin: 0; }
.gwj-price-card li { font-size: 0.93rem; }
.gwj-legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }

.gwj-footer-legal {
  /* David, 2026-11-15: the footer is just the policies and the email now — the page
     links (Lessons, Tools, About…) are in the header already. */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: rgba(255, 249, 235, 0.6);
}
.gwj-footer-legal a { color: rgba(255, 249, 235, 0.72); }
.gwj-footer-legal a:hover,
.gwj-footer-legal a:focus-visible { color: #fff9ea; }

/* GWJ-318 (Jimmy, 2026-11-15): "fix spacing under headline" — a section's lead paragraph
   sat flush against its big display headline (both have margin 0 in the home design).
   0-3-1, which outranks the margin-0 rules on these paragraphs. */
.gwj-home-redesign .gwj-section-head h2 + .gwj-section-lead {
  margin-top: clamp(14px, 1.6vw, 22px);
}

/* /pricing mock-up (2026-11-15): monthly plans only. */
.gwj-draft-banner {
  border: 1px dashed var(--gwj-home-gold);
  color: var(--gwj-home-gold) !important;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 0 0 22px !important;
}
.gwj-draft-banner strong { color: var(--gwj-home-gold); }
.gwj-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 26px 0 14px;
}
.gwj-plan-card {
  border: 1px solid var(--gwj-home-line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  background: var(--gwj-home-brown);
}
.gwj-plan-card.is-featured { border-color: var(--gwj-home-gold); }
.gwj-plan-card__kicker {
  font-family: var(--gwj-home-mono);
  font-size: 0.74rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gwj-home-teal) !important;
  margin: 0 0 8px !important;
}
.gwj-plan-card h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gwj-home-ink);
}
.gwj-plan-card__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px !important; }
.gwj-plan-card__price .gwj-price-amt { font-size: 2.8rem; line-height: 1; }
.gwj-plan-card__per { color: var(--gwj-home-muted) !important; font-size: 0.92rem; margin: 0 0 14px !important; }
.gwj-plan-card ul { padding-left: 1.1em; gap: 6px; margin: 0; }
.gwj-plan-card li { font-size: 0.94rem; }
.gwj-pricing-currency { color: var(--gwj-home-muted) !important; font-size: 0.92rem; }
/* /pricing now uses the Lessons page's own layout (hero, sections, feature cards, CTA),
   so only the plan cards and the draft banner need anything of their own. */
.gwj-pricing-page .gwj-draft-banner { max-width: 760px; }
.gwj-pricing-plans .gwj-plan-grid { margin-top: 0; max-width: 980px; }
.gwj-pricing-plans .gwj-plan-card { padding: 26px 26px 22px; }
.gwj-plan-card ul { list-style: disc; display: grid; padding-left: 1.1em; }
.gwj-plan-card li { line-height: 1.55; color: rgba(244, 237, 222, 0.86); }

/* /pricing: the four "how it works" cards sit two by two, as wide as the plan cards
   above them, instead of three and an orphan. */
.gwj-pricing-page .gwj-chapter-grid.gwj-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 980px;
}
@media (min-width: 720px) {
  .gwj-pricing-page .gwj-chapter-grid.gwj-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Breathing room between a hero headline and the sentence under it (the same fix as
   the section headlines, GWJ-318) — on Lessons and Pricing alike. */
.gwj-home-redesign .gwj-lessons-hero h1 + .gwj-hero-copy { margin-top: clamp(12px, 1.4vw, 18px); }

/* David, 2026-11-15: section headlines on /pricing use the room they have instead of
   the site-wide 15-character stack ("Pick your lesson / length."). */
.gwj-pricing-page .gwj-section-head h2 { max-width: none; }

/* David, 2026-11-15 ("this heading looks bad"): the Pricing headline is two deliberate
   lines, and at the hero's 0.9 line height the two lines touched. A little more leading
   and a slightly smaller size so it reads as two lines, not a block. */
.gwj-home-redesign.gwj-pricing-page .gwj-lessons-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.04;
}
/* …and its section headlines stay a step smaller than the page headline, now that they
   run on one line instead of stacking. */
.gwj-home-redesign.gwj-pricing-page .gwj-section-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.5rem);
}