:root{
  --bg:#0b1220;
  --card:#111a2e;
  --text:#e7ecff;
  --muffled:#b7c0e6;
  --line:rgba(255,255,255,0.12);

  --accent:#22d3ee;   /* cyan */
  --success:#34d399;  /* green */
  --danger:#ef4444;   /* red */
  --warning:#f59e0b;  /* amber */
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(83,120,255,0.25), transparent 60%),
              radial-gradient(900px 600px at 100% 20%, rgba(255,157,56,0.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

.wrap{max-width:900px;margin:0 auto;padding:24px}
.header{margin-bottom:18px}
.header h1{margin:0 0 6px 0;font-size:28px}
.sub{margin:0;color:var(--muffled)}

.card{
  background:rgba(17,26,46,0.86);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin:14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.card h2{margin:0 0 10px 0;font-size:18px}
.label{display:block;font-weight:700;margin:10px 0 6px 0}
.hint{margin:8px 0 0 0;color:var(--muffled);line-height:1.35}

.select,.file{
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  padding:10px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:10px;
}

@media (min-width: 720px){
  .grid{grid-template-columns: 1fr 1fr 1fr;}
}

.btn{
  margin-top:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:800;
}
.btn:hover{background: rgba(255,255,255,0.16);}


/* Buttons — prominence + clear action colors */
.btn[disabled]{
  opacity:0.45;
  cursor:not-allowed;
  filter:saturate(0.6);
}

.btn-lg{
  padding: 12px 18px;
  font-size: 16px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.btn-primary{
  background: linear-gradient(180deg, rgba(34,211,238,0.26), rgba(34,211,238,0.14));
  border-color: rgba(34,211,238,0.35);
}
.btn-primary:hover{ background: linear-gradient(180deg, rgba(34,211,238,0.34), rgba(34,211,238,0.18)); }

.btn-danger{
  background: linear-gradient(180deg, rgba(239,68,68,0.26), rgba(239,68,68,0.14));
  border-color: rgba(34,211,238,0.35);
}
.btn-danger:hover{ background: linear-gradient(180deg, rgba(239,68,68,0.34), rgba(239,68,68,0.18)); }

/* Recording state */
@keyframes bcwPulse {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 10px 22px rgba(0,0,0,0.22); }
  50%  { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 28px rgba(0,0,0,0.28); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 10px 22px rgba(0,0,0,0.22); }
}

.btn.is-recording{
  background: linear-gradient(180deg, rgba(52,211,153,0.30), rgba(52,211,153,0.16));
  border-color: rgba(52,211,153,0.45);
  animation: bcwPulse 1.0s ease-in-out infinite;
}

.btn-danger.is-armed{
  background: linear-gradient(180deg, rgba(239,68,68,0.36), rgba(239,68,68,0.18));
  border-color: rgba(239,68,68,0.55);
}

@keyframes bcwClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); filter: brightness(1.25); }
  100% { transform: scale(1); }
}
.btn.is-clicked{ animation: bcwClick 220ms ease-out 1; }

/* Subtle status line for mic/analysis messages */
.status-subtle{
  font-weight:700;
  opacity:0.95;
}

.review{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,0.22);
  color:var(--muffled);
  min-height:42px;
}

.footer{margin-top:18px}
.link{color:var(--muffled);text-decoration:none}
.link:hover{text-decoration:underline}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-secondary{opacity:0.9}
.btn-tertiary{background:transparent}
.status{color:var(--muffled);font-weight:700}

.hr{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0;
}

.h3{margin:0 0 8px 0;font-size:16px}

.promptBox{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,0.04);
  margin:10px 0 12px;
}
.promptLabel{color:var(--muffled);font-weight:800;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.promptText{font-size:22px;font-weight:900;margin-top:6px}

.stringTable{
  margin-top:10px;
  display:grid;
  gap:10px;
}

.stringRow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
}

.stringName{font-weight:900}
.stringChoices{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  user-select:none;
}

.pill input{accent-color:auto}


.small{color:var(--muffled);font-size:13px;line-height:1.35}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Prompt color states */
#pluckPrompt.prompt-pluck{
  color: #22d3ee; /* cyan-400 */
  text-shadow: 0 0 14px rgba(34,211,238,0.35);
}

#pluckPrompt.prompt-mute{
  color: #f59e0b; /* amber-500 */
  text-shadow: 0 0 14px rgba(245,158,11,0.35);
}

#pluckPrompt.prompt-ready{
  color: #cbd5e1; /* slate-300 */
  text-shadow: none;
}

#pluckPrompt.prompt-done{
  color: #34d399; /* emerald-400 */
  text-shadow: 0 0 14px rgba(52,211,153,0.30);
}

/* ======================================================================
   BCW Test page warm redesign (SCOPED) — only applies when body has
   class="page-test". Any future pages without that class keep the dark theme.
   ====================================================================== */

body.page-test{
  /* Design tokens (inspired by Claude mockup) */
  --cream:        #faf6f0;
  --parchment:    #f0e8d8;
  --parchment-dk: #e2d5c0;

  --burgundy:     #7b1e36;
  --burgundy-dk:  #5c1428;
  --burgundy-lt:  #9e2d4a;

  --gold:         #c8923a;
  --gold-lt:      #e6b06a;
  --gold-pale:    #f7e8d0;

  --forest:       #2d5a45;
  --forest-lt:    #3d7a5f;

  --ink:          #2a1f18;
  --ink-mid:      #5a4a3e;
  --ink-light:    #8a7468;

  --step1:        #3a5a8c; /* blue */
  --step2:        #2d5a45; /* green */
  --step3:        #7b4a1e; /* amber-brown */
  --step4:        #5a2a7b; /* purple */

  --radius:       12px;
  --shadow:       0 10px 26px rgba(43, 27, 18, 0.14);

  background: var(--cream);
  color: var(--ink);

  /* Override the global dark theme font for this page */
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Layout */
body.page-test .wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px 56px;
}

body.page-test .header{
  background: linear-gradient(120deg, var(--burgundy), var(--burgundy-dk));
  border-radius: var(--radius);
  padding: 34px 18px 30px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}


/* --- Fix: ensure header title/subtitle center (override any global .header rules) --- */
body.page-test .header{
  display: block; /* defeats any global flex layouts */
}
body.page-test .header .brand{
  text-align: center;
}
body.page-test .header .brand h1,
body.page-test .header .brand .sub{
  text-align: center;
}

body.page-test .header h1{
  margin: 0 0 4px 0;
  color: #fff;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 30px;
}

body.page-test .sub{
  margin: 0;
  color: rgba(255,255,255,0.85);
}

body.page-test .flow{
  justify-content: center;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: .95rem;
}

body.page-test .sep{opacity:.7}
body.page-test .dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: .85rem;
}
body.page-test .dot.d1{background: rgba(58,90,140,0.45)}
body.page-test .dot.d2{background: rgba(45,90,69,0.45)}
body.page-test .dot.d3{background: rgba(123,74,30,0.45)}

/* Cards / step framing */
body.page-test .card{
  background: #fff;
  border: 1px solid rgba(90,74,62,0.18);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  box-shadow: 0 6px 16px rgba(43, 27, 18, 0.10);
  margin: 14px 0;
}

body.page-test .step{position:relative}
body.page-test .step-1{border-top: 6px solid var(--step1)}
body.page-test .step-2{border-top: 6px solid var(--step2)}
body.page-test .step-3{border-top: 6px solid var(--step3)}

body.page-test .card h2{
  margin: 0 0 10px 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 22px;
  color: var(--ink);
  display:flex;
  align-items:center;
  gap: 10px;
}

body.page-test .card h2::before{
  content: attr(data-step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-family: inherit;
  background: var(--step1);
}

body.page-test .step-2 h2::before{background: var(--step2)}
body.page-test .step-3 h2::before{background: var(--step3)}

/* ---------- Optional audio card (non-numbered side path) ----------
   Used for the "Optional: let AI listen instead" card. It sits in the
   page flow but is intentionally NOT a numbered step — manual entry
   above is the primary path. Visual treatment:
   - Muted warm-gray top border (no step-N color)
   - Slightly muted background and softer shadow vs primary cards
   - Slightly smaller, calmer h2
   - No ::before number badge on the heading
*/
body.page-test .optional-audio{
  border-top: 6px solid #cfc4ba; /* muted warm gray, harmonizes with --step palette */
  background: #faf8f3;
  box-shadow: 0 4px 12px rgba(43, 27, 18, 0.07);
}
body.page-test .optional-audio h2{
  font-size: 19px;
  color: var(--ink-mid);
}
body.page-test .optional-audio h2::before{
  content: none;
  display: none;
}

/* ---------- Microphone picker + live input level meter ----------
   Lives on the optional audio card. The meter runs while testing input
   and while recording, so a silent capture device (wrong mic, sample-rate
   mismatch, dead routing) is visible BEFORE a take is wasted. */
body.page-test .micLabel{
  font-weight: 700;
  color: var(--ink-mid);
}
body.page-test .micSelect{
  flex: 1;
  min-width: 180px;
  max-width: 340px;
  border-radius: 10px;
  border: 1px solid rgba(90,74,62,0.30);
  padding: 8px 10px;
  background: var(--parchment);
  color: var(--ink);
  outline: none;
}
body.page-test .micMeterTrack{
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid rgba(90,74,62,0.30);
  background: var(--parchment);
  overflow: hidden;
}
body.page-test .micMeterFill{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2d5a45 0%, #2d5a45 60%, #e0a10b 80%, #a02020 100%);
  /* Revealed via clip-path from JS so the gradient stays anchored to the track */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 60ms linear;
}
body.page-test .micMeterDb{
  font-variant-numeric: tabular-nums;
  color: var(--ink-mid);
  font-size: 13px;
  min-width: 64px;
}
body.page-test .micTestHint{
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.35;
  margin: 6px 0 0;
}
body.page-test .micSilenceWarning{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid #d23b2f;
  color: #a01212;
  font-weight: 800;
  line-height: 1.4;
}
body.page-test .micSilenceWarning strong{
  color: inherit;
}
body.page-test .micSilenceWarning.shake{
  animation: bcwShake 0.55s ease-in-out;
}

body.page-test .h3{
  margin: 10px 0 6px 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .01em;
}

body.page-test .hint{
  color: var(--ink-mid);
  line-height: 1.35;
  margin: 6px 0 10px;
}

body.page-test .label{
  display:block;
  font-weight: 700;
  color: var(--ink);
  margin: 10px 0 6px;
}

body.page-test .select,
body.page-test .file{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(90,74,62,0.30);
  padding: 10px 12px;
  background: var(--parchment);
  color: var(--ink);
  outline: none;
}

body.page-test .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Substeps (Step #1 / Step #2 labels left of button rows) */
body.page-test .substep{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}
body.page-test .substepLabel{
  font-weight: 900;
  color: var(--ink);
  background: var(--gold-pale);
  border: 1px solid rgba(200,146,58,0.35);
  border-radius: 999px;
  padding: 6px 10px;
  text-align:center;
  line-height: 1;
  height: fit-content;
}
body.page-test .substepBody{min-width:0}

body.page-test .row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
body.page-test .row-tight{gap: 10px}
body.page-test .actions{margin-top: 10px}

/* Analyzing spinner — shown below Diagnose button while CNN analysis runs */
body.page-test .analyzeSpinner{
  display:none;
}
body.page-test .analyzeSpinner.is-visible{
  display:inline-flex; align-items:center; gap:9px;
  margin-left:12px;
  padding:4px 12px 4px 9px;
  background:var(--burgundy);
  border-radius:999px;
  font-size:14px; font-weight:700;
  color:#fff; letter-spacing:0.04em;
}
body.page-test .analyzeSpinnerRing{
  display:inline-block; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.35); border-top-color:#fff;
  animation:bcwSpin 0.65s linear infinite; flex-shrink:0;
}
@keyframes bcwSpin{ to{ transform:rotate(360deg); } }

/* Buttons */
body.page-test .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--parchment-dk);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 27, 18, 0.10);
  transition: transform .06s ease, box-shadow .18s ease, filter .18s ease;
}
body.page-test .btn:hover{filter: brightness(1.02); box-shadow: 0 6px 16px rgba(43, 27, 18, 0.14);}
body.page-test .btn:active{transform: translateY(1px);}

body.page-test .btn-lg{
  padding: 12px 18px;
  min-width: 210px; /* makes Start Recording and Begin Prompts match size */
  height: 46px;
  font-size: 1rem;
}

body.page-test .btn-primary{background: var(--burgundy); color: #fff;}
body.page-test .btn-secondary{background: rgba(58,90,140,0.14); color: var(--ink); border: 1px solid rgba(58,90,140,0.25);}
body.page-test .btn-tertiary{background: rgba(90,74,62,0.12); color: var(--ink); border: 1px solid rgba(90,74,62,0.18);}
body.page-test .btn-danger{background: #ff0000; color: #fff;}
body.page-test .btn-warning{background: var(--gold); color: #231a12;}
body.page-test .btn-primary-soft{background: rgba(45,90,69,0.14); color: var(--ink); border: 1px solid rgba(45,90,69,0.25);}

/* Disabled buttons (but keep recording button vivid) */
body.page-test .btn:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
body.page-test #btnStartAudio.is-recording:disabled{
  opacity: 1; /* keep it obviously "recording" even though it's disabled */
}

/* Recording state visuals (driven by test.js toggling classes) */
@keyframes bcwPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.40); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 255, 0, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.00); }
}
body.page-test #btnStartAudio.is-recording{
  background: #00ff00 !important;
  color: #000 !important;
  animation: bcwPulse 1.2s ease-out infinite;
}
body.page-test #btnStartAudio.is-recording:disabled{
  background: #00ff00 !important;
  color: #000 !important;
  opacity: 1 !important;
}

body.page-test #btnStopAudio.is-armed{
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25), 0 10px 22px rgba(43, 27, 18, 0.12);
}

/* Status */
body.page-test .status{
  font-weight: 800;
  color: var(--ink-mid);
}
body.page-test .status-subtle{
  color: var(--ink-light);
}

/* Prompt box */
body.page-test .promptBox{
  background: var(--step1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 18px 14px;
  margin: 10px 0 8px;
  min-height: 110px;
}

body.page-test .promptLabel{
  font-weight: 900;
  color: rgba(255,255,255,0.88);
  font-size: 1.30rem;
  margin-bottom: 6px;
  letter-spacing: .08em;
  line-height: 1.25;
}

body.page-test .promptText{
  font-weight: 900;
  font-size: 1.15rem;
  color: #fff;
}


/* test.js may toggle these classes on #pluckPrompt */
body.page-test #pluckPrompt.prompt-ready{color: var(--ink);}
body.page-test #pluckPrompt.prompt-pluck{color: var(--forest);}
body.page-test #pluckPrompt.prompt-mute{color: var(--burgundy);}
body.page-test #pluckPrompt.prompt-done{color: var(--step1);}

/* Rule separators */
body.page-test .hr{
  border: 0;
  height: 1px;
  background: rgba(90,74,62,0.18);
  margin: 14px 0;
}

/* Review / diagnosis boxes */
body.page-test .review{
  background: var(--parchment);
  border: 1px solid rgba(90,74,62,0.18);
  border-radius: 12px;
  padding: 12px 12px;
  margin-top: 10px;
  color: var(--ink-mid);
  white-space: pre-wrap;
}

/* String table (rendered by test.js) */
body.page-test .stringTable{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
body.page-test .stringRow{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(90,74,62,0.18);
}
body.page-test .stringName{
  font-weight: 900;
  color: var(--ink);
}
body.page-test .stringBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: #6b2436; /* burgundy-brown (Claude-ish) */
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 900;
  color: #fff;
  margin-left: 10px;
  font-size: .82rem;
  letter-spacing: .01em;
  line-height: 1.2;
}

body.page-test .stringChoices{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
body.page-test .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--parchment);
  border: 1px solid rgba(90,74,62,0.18);
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
}
body.page-test .pill input{accent-color: var(--step1);}
body.page-test .pill:hover{filter: brightness(1.02);}

/* "Not played" pill — visually distinct: italic, slightly dimmed */
body.page-test .pill--notPlayed{
  font-style: italic;
  opacity: 0.6;
  border-style: dashed;
}
body.page-test .pill--notPlayed:has(input:checked){
  opacity: 1;
  background: rgba(90,74,62,0.10);
  border-style: solid;
  border-color: rgba(90,74,62,0.40);
}

body.page-test .autoNote{
  margin-top: -6px;
  padding: 0 2px 0 2px;
  color: var(--ink-light);
}
body.page-test .small{font-size: .88rem}

/* ── "Identify problem strings" MATRIX layout ─────────────────────────────
   Strings as columns (low E left → high E right, mirroring the chord diagram);
   status choices (Clear / Buzz / Muffled / Not played) as rows. Radio
   name/value semantics are shared with the legacy vertical list. Desktop-first;
   the table scrolls horizontally on narrow screens until a proper mobile layout
   is built. */
/* Option B — the container IS the full-width parchment box (like the chord
   diagram's .chordBoard), with the grid left-aligned inside it and beige fill
   to the right. */
body.page-test .stringTable{
  overflow-x: auto;
  background: #fffdf8;
  border: 1px solid #d8cbb4;
  border-radius: 16px;
  padding: 12px 14px 14px;
}
body.page-test .stringMatrix{
  /* Compact grid left-aligned inside the full-width parchment box. String
     columns share the diagram's 56px pitch; the label column auto-sizes to
     "Not played". justify-self:start keeps it from stretching (the parent
     #stringTable is display:grid). */
  display: inline-grid;
  justify-self: start;
  grid-template-columns: auto repeat(6, 56px);
  /* Buttons breathe more horizontally than vertically. */
  column-gap: 16px;
  row-gap: 10px;
  align-items: stretch;
  margin: 0;
}
body.page-test .smCorner{ border: 0; }
body.page-test .smColHead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 8px;
  border-bottom: 2px solid rgba(90,74,62,0.18);
}
body.page-test .smColNum{ font-weight: 900; color: var(--ink); font-size: 1.05rem; line-height: 1; }
/* The global .stringBadge rule (below) forces margin-left:10px !important, which
   was designed for the old inline "6  [Low E]" layout. In the centered matrix
   header that asymmetric margin shifts each badge ~5px right of the number/radio
   column center, so zero it out with matching !important. */
body.page-test .smColHead .stringBadge{ margin: 0 !important; font-size: .82rem !important; padding: 3px 9px !important; white-space: nowrap; letter-spacing: 0 !important; }
body.page-test .stringMatrix .autoNote{
  margin: 0;
  padding: 0 2px;
  text-align: center;
  font-size: .72rem;
  line-height: 1.2;
  min-height: 0;
}
body.page-test .smRowLabel{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 800;
  color: var(--ink);
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}
body.page-test .smRowLabel--clear{ color: #2d5a45; }
body.page-test .smRowLabel--buzz{ color: #7b1e36; }
body.page-test .smRowLabel--muffled{ color: #3a5a8c; }
body.page-test .smRowLabel--not-played{ font-style: italic; font-weight: 700; color: #8a7468; }
body.page-test .smCell{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 4px;
  border-radius: 10px;
  /* Transparent so radios sit directly on the parchment box (like the diagram's
     buttons on the fretboard); selection tints below provide the fill. */
  background: transparent;
  border: 1px solid rgba(90,74,62,0.14);
  cursor: pointer;
}
body.page-test .smCell input{ width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* Per-status colors — always visible so the four rows are instantly
   distinguishable, using the app's canonical status palette (also used on the
   results page): clear=green, buzz=burgundy, muffled=blue, not-played=taupe.
   The checked cell gets a saturated fill + bold border + matching radio dot. */
body.page-test .smCell--clear      { background: rgba(45,90,69,0.13);    border-color: rgba(45,90,69,0.38); }
body.page-test .smCell--buzz       { background: rgba(123,30,54,0.13);   border-color: rgba(123,30,54,0.40); }
body.page-test .smCell--muffled    { background: rgba(58,90,140,0.13);   border-color: rgba(58,90,140,0.40); }
body.page-test .smCell--not-played { background: rgba(138,116,104,0.13); border-color: rgba(138,116,104,0.40); border-style: dashed; }

body.page-test .smCell--clear      input{ accent-color: #2d5a45; }
body.page-test .smCell--buzz       input{ accent-color: #7b1e36; }
body.page-test .smCell--muffled    input{ accent-color: #3a5a8c; }
body.page-test .smCell--not-played input{ accent-color: #8a7468; }

body.page-test .smCell--clear:has(input:checked)      { background: rgba(45,90,69,0.28);    border-color: rgba(45,90,69,0.85); }
body.page-test .smCell--buzz:has(input:checked)       { background: rgba(123,30,54,0.28);   border-color: rgba(123,30,54,0.85); }
body.page-test .smCell--muffled:has(input:checked)    { background: rgba(58,90,140,0.28);   border-color: rgba(58,90,140,0.85); }
body.page-test .smCell--not-played:has(input:checked) { background: rgba(138,116,104,0.32); border-color: rgba(138,116,104,0.9); }

body.page-test .smCell:hover{ filter: brightness(0.96) saturate(1.2); }

/* Footer */
body.page-test .footer{
  text-align:center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 2px solid rgba(90,74,62,0.18);
}
body.page-test .link{
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 900;
}
body.page-test .link:hover{text-decoration: underline; color: var(--burgundy-lt);}

/* Responsive */
@media (max-width: 760px){
  body.page-test .grid{grid-template-columns: 1fr;}
  body.page-test .substep{grid-template-columns: 1fr; }
  body.page-test .substepLabel{justify-self:start}
}
@media (max-width: 560px){
  body.page-test .row{flex-direction: column; align-items: stretch;}
  body.page-test .btn{width: 100%;}
  body.page-test .btn-lg{min-width: 0;}
  body.page-test .stringRow{grid-template-columns: 1fr;}
  body.page-test .stringChoices{justify-content:flex-start;}
}

body.page-test #pluckPrompt.prompt-pluck{ text-decoration: underline; }

body.page-test #btnStopAudio:enabled{ background:#ff0000; color:#fff; opacity:1; }

body.page-test .btn-burgundy{ background: var(--burgundy); color:#fff; }
body.page-test .btn-burgundy:hover{ filter: brightness(1.02); }

body.page-test .btn-green{ background: var(--forest); color:#fff; }
body.page-test .btn-green:hover{ filter: brightness(1.02); }

body.page-test .btn-save{
  background: var(--parchment-dk);
  color: var(--ink);
}
body.page-test .btnIcon{font-size: 1rem; line-height:1;}

body.page-test .btn-outline-parchment{
  background: transparent;
  border: 2px solid var(--parchment-dk);
  color: var(--ink);
}


/* --- Fix: keep prompt text readable on blue background in all states --- */
body.page-test #pluckPrompt.prompt-ready,
body.page-test #pluckPrompt.prompt-pluck,
body.page-test #pluckPrompt.prompt-mute,
body.page-test #pluckPrompt.prompt-done{
  color: #fff !important;
}



body.page-test #pluckPrompt.prompt-pluck{ text-decoration: underline; text-decoration-thickness: 3px; }
body.page-test #pluckPrompt.prompt-mute{ text-decoration: underline; text-decoration-thickness: 3px; }



/* --- Prompt behavior tweak: highlight MUTE cue with a readable color on blue --- */
body.page-test #pluckPrompt.prompt-pluck{ color: #ffffff !important; text-shadow: 0 0 10px rgba(255,255,255,0.22); }
body.page-test #pluckPrompt.prompt-mute{ color: #ffd166 !important; text-shadow: 0 0 14px rgba(255,209,102,0.35); }

/* ======================================================================
   FINAL OVERRIDES (2026-02-22)
   Fixes:
   1) Header title/subtitle centered
   2) Step-number circle digits perfectly centered
   3) Step #1/#2 substep labels vertically centered against btn-lg rows
   4) Prompt box readability (blue + white; mute amber highlight)
   5) Recent tests empty state readability
   6) String badges Claude-style pill
   ====================================================================== */

/* 1) Header title/subtitle centered */
body.page-test .header{ display:block !important; text-align:center !important; }
body.page-test .header .brand,
body.page-test .header .brand h1,
body.page-test .header .brand .sub{ text-align:center !important; }
body.page-test .flow{ justify-content:center !important; }

/* 2) Step-number circles: center digits cleanly */
body.page-test .card h2::before{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height: 28px !important;
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums;
}

/* 3) Substep labels align to center of button rows */
body.page-test .substep { 
  align-items: start !important; 
} 

body.page-test .substepLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important; 
  padding: 0 10px !important;
  transform: translateY(6px) !important; 
  margin: 0 !important; 
}

body.page-test .substepBody > .row:first-child {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-test .substepLabel {
    position: relative;
    top: 0; 
}

/* 4) Prompt readability */
body.page-test #pluckPrompt.prompt-ready,
body.page-test #pluckPrompt.prompt-pluck,
body.page-test #pluckPrompt.prompt-done{ color:#fff !important; }
body.page-test #pluckPrompt.prompt-mute{
  color:#ffd166 !important;
  text-shadow: 0 0 14px rgba(255,209,102,0.35) !important;
}


/* 6) String badges */
body.page-test .stringBadge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: #6b2436 !important; 
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-left: 10px !important;
  font-size: .82rem !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
}

/* ======================================================================
   SUBSTEP LAYOUT FIX (2026-02-22)
   Move Step #1/#2 pill into the same flex row as the buttons to guarantee
   perfect vertical centering (matches the Reset button alignment).
   ====================================================================== */
body.page-test .substep{
  display:block !important;
  margin-top: 10px;
}
body.page-test .substepBody{ width:100% !important; }

/* Ensure the button row centers everything vertically */
body.page-test .row.row-tight{ align-items:center !important; }

/* Step pill */
body.page-test .substepLabel{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height: 46px !important;              
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--gold-pale) !important;
  border: 1px solid rgba(200,146,58,0.35) !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

/* --- Fix: vertically center "hint" text next to Continue to Results button --- */
body.page-test .row.row-tight {
  display: flex !important;
  align-items: center !important;
}

body.page-test .row.row-tight .hint {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 46px; /* Matches button height */
  line-height: 1; 
  
  /* Nudge it down specifically to match the button text baseline */
  transform: translateY(9px) !important; 
  
  align-self: center;
}

/* Prompt: DONE (make it red so user stops recording) */
body.page-test #pluckPrompt.prompt-done{
  color: #ff0000 !important;
  text-shadow: 0 0 10px rgba(255,0,0,0.35) !important;
  font-weight: 900 !important;
}

/* Diagnosis box contains HTML, so don't preserve template whitespace */
body.page-test #diagnosis{
  white-space: normal !important;
  line-height: 1.35;
}

/* Tighten default margins for generated diagnosis HTML */
body.page-test #diagnosis p,
body.page-test #diagnosis ul,
body.page-test #diagnosis ol{
  margin: 0.35em 0 !important;
}

body.page-test #diagnosis li{
  margin: 0.15em 0 !important;
}

body.page-test #diagnosis h3{
  font-size: 1.5em;   /* ← adjust to taste */
}

body.page-test #diagnosis h4{
  margin: 1em 0 0.35em !important;
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--burgundy, #6f1d2f);
}

body.page-test #diagnosis h5{
  margin: 0.45em 0 0.2em !important;
  font-size: 1.1em;
  font-weight: 800;
}

/* Space between consecutive solution blocks in the fixes list */
body.page-test #diagnosis .fixItem{
  margin-bottom: 1.2em;
}

/* Section headers inside the diagnosis output (TRY THESE FIXES / IN GENERAL…) */
body.page-test #diagnosis .diagSectionHeader{
  margin: 1.1em 0 0.35em !important;
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy, #6f1d2f);
  border-top: 2px solid rgba(111,29,47,0.18);
  border-bottom: 1px solid rgba(111,29,47,0.18);
  padding: 4px 0 3px;
}

/* ======================================================================
   CHORD GRID — scoped to body.page-test
   (moved from test.html <style> block)
   ====================================================================== */

body.page-test .chordEntryWrap{margin-top:10px}

body.page-test .baseFretMini{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:4px 2px;gap:2px;
  justify-content:flex-end;min-height:88px;
}
body.page-test .baseFretMini label{
  display:block;font-size:12px;font-weight:600;
  color:#6b5d4a;line-height:1.1;margin-bottom:2px;
}

body.page-test .barreSpanWrap{
  position:absolute;left:420px;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
body.page-test .barreSpanWrap label{
  display:block;font-size:12px;font-weight:600;
  color:#6b5d4a;line-height:1.1;margin-bottom:2px;
}
body.page-test .barreSpanSelect{
  width:155px;padding:4px 6px;border:1px solid #b9a487;
  border-radius:8px;background:#fff;color:#5a4630;
  font:inherit;font-size:13px;line-height:1.1;
}
body.page-test .barreSpanHint{
  margin:5px 0 0;width:155px;
  font-size:11px;line-height:1.4;color:#8a7560;
}

body.page-test .baseFretSelect{
  width:52px;padding:4px 6px;border:1px solid #b9a487;
  border-radius:8px;background:#fff;color:#5a4630;
  font:inherit;font-size:13px;line-height:1.1;
}

body.page-test .chordEntryHint{margin:0 0 12px;color:#5f564a}

body.page-test .chordBoard{
  border:1px solid #d8cbb4;border-radius:16px;
  padding:14px;background:#fffdf8;overflow-x:auto;
  position:relative;
}

/* Hinge barre checkbox — floats to the right of the chord grid, vertically
   aligned with the fret row where finger 1 appears on string 1.
   Top offset is set dynamically by updateHingeCheckbox() in test.js.
   Left = chordBoard padding (14px) + grid width (392px) + gap (14px) = 420px */
body.page-test .hingeBarreBox{
  position:absolute;
  left:420px;
  background:#fffdf8;
  border:1.5px solid #b9a487;
  border-radius:10px;
  padding:5px 10px;
  white-space:nowrap;
  z-index:10;
  transition:background 0.15s, border-color 0.15s;
}
body.page-test .hingeLbl{
  display:flex;align-items:center;gap:7px;
  cursor:pointer;
  font-size:13px;font-weight:600;color:#5a4630;
  user-select:none;
}
body.page-test .hingeBarreBox input[type="checkbox"]{
  width:15px;height:15px;cursor:pointer;
  accent-color:#6f1d2f;flex-shrink:0;
}
body.page-test .hingeBarreBox.isChecked{
  background:#6f1d2f;border-color:#6f1d2f;
}
body.page-test .hingeBarreBox.isChecked .hingeLbl{
  color:#fff;
}

body.page-test .chordGrid{
  display:grid;
  grid-template-columns:56px repeat(6,56px);
  grid-template-rows:auto 16px repeat(7,56px);
  gap:0;min-width:392px;align-items:center;justify-items:center;
}

/* Ghost barre indicator: shown on extra strings when span is manually extended */
body.page-test .fingerBtn.isBarreGhost{
  background:#e8d8e8;border-color:#9b6b9b;color:#7a3d7a;
  font-size:12px;font-style:italic;cursor:default;
}

body.page-test .chordGrid .stringStateBtn{align-self:end}
body.page-test .chordCorner{width:100%;height:100%}

body.page-test .fretLabelLeft{font-size:13px;font-weight:600;color:#6b5d4a}

/* Fret label update animation — slow, large, unmissable */
@keyframes fretLabelUpdate{
  0%  {transform:translateY(16px) scale(0.6); opacity:0;   color:#00cc00}
  20% {transform:translateY(0)    scale(1.9); opacity:1;   color:#00ff00}
  50% {transform:translateY(0)    scale(1.7); opacity:1;   color:#00ff00}
  75% {transform:translateY(0)    scale(1.2); opacity:1;   color:#00ff00}
  100%{transform:translateY(0)    scale(1.0); opacity:1;   color:#1a7a3c}
}
body.page-test .fretLabelLeft.fretLabelUpdating{
  animation:fretLabelUpdate 1.8s cubic-bezier(0.22,1,0.36,1) forwards;
  display:inline-block;
}
/* Persistent green — stays until the next sync or manual reset */
body.page-test .fretLabelLeft.fretLabelChanged{
  color:#1a7a3c;
  display:inline-block;
}

body.page-test .stringStateBtn{
  width:42px;height:42px;border-radius:12px;border:1px solid #b9a487;
  background:#fff;color:#5a4630;font-weight:700;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1;
}
body.page-test .stringStateBtn .stringNum{font-size:12px}
body.page-test .stringStateBtn .stringState{font-size:15px;margin-top:2px;min-height:15px}
body.page-test .stringStateBtn.isOpen{background:#eef7f1;border-color:#8db49a}
body.page-test .stringStateBtn.isMuted{background:#f9eeee;border-color:#c99898}

body.page-test .stringStateBtn:focus-visible,
body.page-test .fingerBtn:focus-visible{outline:2px solid #1c6b57;outline-offset:2px}

body.page-test .nutCell{width:100%;height:10px;background:#2c241a}
body.page-test .nutCell.isFretWire{height:2px;background:#d8cbb4}

body.page-test .fretCell{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  background:#f0e8d8; /* slightly deeper parchment for the playable interior */
}
body.page-test .fretCell::before{
  content:'';position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:2px;height:100%;background:#a89374;
}
body.page-test .fretCell::after{
  content:'';position:absolute;left:0;right:0;top:0;
  height:2px;background:#d8cbb4;
}
body.page-test .fretCell.firstRow::after{display:none}

body.page-test .fingerBtn{
  position:relative;z-index:1;width:32px;height:32px;
  border-radius:999px;border:1px solid #b9a487;background:#fff;
  color:#5a4630;font-weight:700;font-size:15px;cursor:pointer;
}
body.page-test .fingerBtn.isSet{background:#6f1d2f;color:#fff;border-color:#6f1d2f}

body.page-test .chordActions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* Chord completeness warning banner (fixed at top of viewport) */
body.page-test .chordWarning{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:14px 20px;
  background:#b91c1c;
  color:#fff;
  font-size:1em;font-weight:700;
  text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,0.35);
  cursor:pointer;
}
body.page-test .chordWarning::after{
  content:' ✕';
  opacity:0.7;
  font-weight:400;
  font-size:0.9em;
}

@keyframes bcwShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}
body.page-test .chordWarning.shake{animation:bcwShake 0.55s ease-in-out;}

/* Begin-prompts attention: shake once on recording start, then pulse until stopped */
@keyframes beginPromptsShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-7px) rotate(-1.5deg); }
  30% { transform: translateX(7px) rotate(1.5deg); }
  45% { transform: translateX(-5px) rotate(-0.5deg); }
  60% { transform: translateX(5px) rotate(0.5deg); }
  80% { transform: translateX(-2px); }
}
@keyframes beginPromptsPulse {
  0%,100% { box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(245,158,11,0); }
  50%      { box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 0 0 10px rgba(245,158,11,0.55); }
}
body.page-test .btn.begins-shake {
  animation: beginPromptsShake 0.55s ease-in-out 1;
}
body.page-test .btn.begins-pulse {
  animation: beginPromptsPulse 1.1s ease-in-out infinite;
}

/* De-emphasize the Step #1 Stop button while guided prompts are running */
body.page-test .btn-danger.is-dimmed-by-prompts {
  opacity: 0.30;
  filter: saturate(0.3);
  transition: opacity 0.3s, filter 0.3s;
}

/* In-prompt Stop recording button (shown in promptBox when prompts finish) */
body.page-test .promptStopBtn[hidden] { display: none !important; }
body.page-test .promptStopBtn {
  display: inline-block;
  width: auto;
  min-width: 180px;
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(239,68,68,0.42), rgba(239,68,68,0.22));
  border-color: rgba(239,68,68,0.65);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
body.page-test .promptStopBtn:hover {
  background: linear-gradient(180deg, rgba(239,68,68,0.56), rgba(239,68,68,0.34));
}

/* Lit state: fires when all prompts are done — hard red with pulsing glow */
@keyframes stopBtnBlaze {
  0%,100% { box-shadow: 0 0 10px 2px rgba(255,0,0,0.45); }
  50%      { box-shadow: 0 0 22px 7px rgba(255,0,0,0.75); }
}
body.page-test .promptStopBtn.is-lit {
  background: #ff0000;
  border-color: #ff0000;
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(255,0,0,0.45);
  animation: stopBtnBlaze 0.9s ease-in-out infinite;
}
body.page-test .promptStopBtn.is-lit:hover {
  background: #cc0000;
  border-color: #cc0000;
}

/* Fix-group subheadings inside the diagnosis fixes list */
body.page-test .fixGroupHeader{
  margin: 14px 0 4px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ink-mid);
  font-style: italic;
}

body.page-test .prereqBlock {
  background: #fff8e1;
  border-left: 4px solid #e6a817;
  padding: 0.75em 1em;
  margin-bottom: 1em;
  border-radius: 4px;
}
body.page-test .prereqItem {
  font-size: 0.95em;
}

/* ======================================================================
   OPTION A / OPTION B blocks in Step 2
   ====================================================================== */

/* Shared block shell */
body.page-test .optionBlock{
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 10px 0 6px;
}

/* Option A — record audio (cool blue tint, matches the recording flow) */
body.page-test .optionBlock--record{
  background: rgba(58,90,140,0.06);
  border: 1px solid rgba(58,90,140,0.18);
}

/* Option B — manual entry (warm amber tint, distinct from recording) */
body.page-test .optionBlock--manual{
  background: rgba(200,146,58,0.08);
  border: 1px solid rgba(200,146,58,0.28);
}

/* "Option A —" / "Option B —" label inside each block */
body.page-test .optionLabel{
  font-weight: 900;
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}



/* "or" divider between Option A and Option B */
body.page-test .manualOrDivider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}
body.page-test .manualOrLine{
  flex: 1;
  height: 1px;
  background: rgba(90,74,62,0.22);
}
body.page-test .manualOrText{
  font-weight: 900;
  font-size: .9rem;
  color: var(--ink-light);
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Skip to manual entry button — warm amber, secondary weight */
body.page-test .btn-skip-to-manual{
  margin-top: 10px;
  background: linear-gradient(180deg, #f7e0b0, #f0cd86);
  color: var(--ink);
  border: 1px solid rgba(200,146,58,0.50);
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(200,146,58,0.20);
  letter-spacing: .01em;
}
body.page-test .btn-skip-to-manual:hover{
  filter: brightness(1.04);
  box-shadow: 0 5px 14px rgba(200,146,58,0.28);
}

/* ======================================================================
   STRING TABLE — manual entry highlight
   Triggered by JS adding .is-manual-active to #stringTable
   ====================================================================== */

/* Outer table: amber outline that pulses 3 times then fades */
@keyframes manualTablePulse{
  0%   { outline: 3px solid rgba(200,146,58,0.00); outline-offset: 4px; }
  12%  { outline: 3px solid rgba(200,146,58,0.90); outline-offset: 4px; }
  28%  { outline: 3px solid rgba(200,146,58,0.20); outline-offset: 4px; }
  42%  { outline: 3px solid rgba(200,146,58,0.80); outline-offset: 4px; }
  58%  { outline: 3px solid rgba(200,146,58,0.15); outline-offset: 4px; }
  72%  { outline: 3px solid rgba(200,146,58,0.60); outline-offset: 4px; }
  100% { outline: 3px solid rgba(200,146,58,0.00); outline-offset: 4px; }
}

body.page-test .stringTable.is-manual-active{
  border-radius: 12px;
  animation: manualTablePulse 2.6s ease-in-out forwards;
}

/* Each row: background flashes from white → warm amber → white, 3 pulses */
@keyframes manualRowHighlight{
  0%   { background: #ffffff; border-color: rgba(90,74,62,0.18); }
  12%  { background: #fde8b0; border-color: rgba(200,146,58,0.80); }
  28%  { background: #ffffff; border-color: rgba(90,74,62,0.18); }
  42%  { background: #fde8b0; border-color: rgba(200,146,58,0.80); }
  58%  { background: #ffffff; border-color: rgba(90,74,62,0.18); }
  72%  { background: #fde8b0; border-color: rgba(200,146,58,0.80); }
  100% { background: #ffffff; border-color: rgba(90,74,62,0.18); }
}

body.page-test .stringTable.is-manual-active .stringRow{
  animation: manualRowHighlight 2.6s ease-in-out forwards;
}

/* ======================================================================
   COMPOUND BARRE HINT CARD — scoped to body.page-test
   Appears to the right of the chord grid when a non-index-finger barre
   covers strings 4-5-6 or 3-4-5, suggesting the user declare an extra
   1st-finger barre to create a compound barre formation.
   Positioned at left:420px (same column as .barreSpanWrap and
   .hingeBarreBox) just below the Barre span dropdown.
   ====================================================================== */

body.page-test .compoundBarreCard{
  position:absolute;
  left:420px;
  top:92px;                  /* sits just below the barreSpanWrap (~80-85px tall) */
  width:155px;
  background:#fffdf8;
  border:1.5px solid #b9a487;
  border-radius:10px;
  padding:8px 10px 10px;
  z-index:10;
  box-shadow:0 3px 10px rgba(43,27,18,0.08);
}

body.page-test .compoundBarreCardMsg{
  margin:0 0 7px;
  font-size:11px;
  line-height:1.4;
  color:#5f4a36;
  font-weight:600;
}

body.page-test .compoundBarreCardRow{
  display:flex;
  flex-direction:column;
  gap:5px;
}

body.page-test .compoundBarreCardRow label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#6b5d4a;
  line-height:1.2;
  margin:0;
}

body.page-test .compoundBarreSelect{
  width:135px;
  padding:4px 6px;
  border:1px solid #b9a487;
  border-radius:8px;
  background:#fff;
  color:#5a4630;
  font:inherit;
  font-size:12px;
  line-height:1.1;
  cursor:pointer;
}

body.page-test .compoundBarreBtn{
  width:100%;
  padding:5px 8px;
  border-radius:7px;
  border:1px solid rgba(45,90,69,0.50);
  background:var(--forest);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  transition:filter 0.15s, box-shadow 0.15s;
  box-shadow:0 2px 6px rgba(45,90,69,0.18);
}
body.page-test .compoundBarreBtn:hover{
  filter:brightness(1.08);
  box-shadow:0 3px 9px rgba(45,90,69,0.28);
}
body.page-test .compoundBarreBtn:active{
  transform:translateY(1px);
}

/* Remove variant — burgundy to signal destructive/undo action */
body.page-test .compoundBarreBtnRemove{
  background:var(--burgundy);
  border-color:var(--burgundy-dk);
  box-shadow:0 2px 6px rgba(111,29,47,0.18);
}
body.page-test .compoundBarreBtnRemove:hover{
  box-shadow:0 3px 9px rgba(111,29,47,0.28);
}

/* ======================================================================
   PRINT / SAVE AS PDF BUTTON
   ====================================================================== */

body.page-test .btn-print-report{
  background: var(--forest);
  color: #fff;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(45,90,69,0.18);
}
body.page-test .btn-print-report:hover{
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(45,90,69,0.26);
}

/* Dead-style the button when disabled (no diagnosis yet) */
body.page-test .btn-print-report:disabled{
  background: var(--parchment-dk);
  color: var(--ink-mid);
  box-shadow: none;
}

/* @media print removed — report is PDF-only via Save as PDF dialog */