/* ===========================================================================
   Echo — guitar theory
   ---------------------------------------------------------------------------
   Implements the "Echo · Guitar Theory App v2" handoff.

   The idiom, in one line: every raised thing sits on a FLAT offset shadow of
   its own hue (`0 Npx 0 <dark>`), never a blur, and presses down into it.
   Borders are 2.5–3px solid. Nothing here uses an ambient/blurred shadow.

   The design is a single 402x874 phone. On desktop the app renders as that
   same column, centred on the warm `page` ground.
   =========================================================================== */

:root{
  /* violet — primary */
  --violet:#7B5CD6;
  --violet-dark:#5B3EB0;
  --violet-mid:#6A4BC4;
  --violet-tint:#EDE7FB;
  --violet-ink:#6B5BA8;

  /* amber — accent, progress, reward */
  --amber:#FFB100;
  --amber-dark:#D98E00;
  --amber-tint:#FFF3D6;
  --amber-ink:#B37C00;
  --amber-edge:#F2E2BC;

  /* green — correct */
  --green:#2FA84F;
  --green-dark:#1F8038;
  --green-tint:#EAF8EC;
  --green-edge:#CFE9D5;
  --green-ink:#3D7A4D;

  /* red — wrong. Not in the handoff; built to the same five-step recipe as
     green, because "mirror the green treatment" needs a hue to mirror into. */
  --red:#E4564A;
  --red-dark:#BE3A30;
  --red-tint:#FDECEA;
  --red-edge:#F6D6D2;
  --red-ink:#A8392F;

  /* ink + neutrals */
  --ink:#2B2536;
  --ink-2:#4A4356;
  --muted:#7D7689;
  --muted-warm:#8E8779;
  --disabled:#B8B0A6;

  /* grounds */
  --page:#FFF9F0;
  --screen:#FFFFFF;
  --screen-warm:#FFFDF8;
  --surface-warm:#F5F0E7;
  --line:#EFE7DA;
  --line-2:#E3DACA;
  --track:#F0EADF;
  --track-dark:#DFD6C6;

  /* text on violet */
  --on-violet:#F3EEFF;
  --on-violet-2:#EFE8FF;
  --gold-text:#FFD84D;

  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;

  --shell:440px;
}

*{box-sizing:border-box}
html{height:100%}
/* The document itself never scrolls. Only `.flow` does, so the header and the
   bottom nav stay put — the handoff's "fixed header/footer, scrolling middle". */
body{
  margin:0;height:100%;overflow:hidden;background:var(--page);color:var(--ink);
  font-family:var(--body);font-weight:700;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button{font-family:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.1}
p{margin:0}
input{font-family:inherit}

/* ── the phone-shaped shell ─────────────────────────────────────────────── */
#app{
  width:100%;max-width:var(--shell);margin:0 auto;height:100%;overflow:hidden;
  background:var(--screen);position:relative;
  display:flex;flex-direction:column;
}
@media (min-width:520px){
  body{padding:0}
  #app{box-shadow:0 0 0 3px var(--line)}
}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:fadein .22s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Scrolling middles, fixed ends. The shell is the scroll container so the
   header and nav can be flex:none rather than position:fixed. */
.flow{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--screen-warm);
  display:flex;flex-direction:column;
}
.flow.violet{background:var(--violet)}
.pad{padding:22px 22px 28px;display:flex;flex-direction:column;gap:16px;flex:1}
.spacer{flex:1;min-height:8px}

/* ── the lift idiom ─────────────────────────────────────────────────────── */
/* Every raised element carries `0 Npx 0 <dark>`; pressing translates it down
   by exactly N and collapses the shadow, so the element meets the page. */
.lift{transition:transform .08s ease,box-shadow .08s ease}
.lift:active:not(:disabled):not(.dead){transform:translateY(var(--lift,4px));box-shadow:0 0 0 var(--lift-c,transparent)!important}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:block;width:100%;border-radius:18px;padding:18px;
  font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  background:var(--violet);color:#fff;box-shadow:0 6px 0 var(--violet-dark);
  --lift:6px;
}
.btn.green{background:var(--green);box-shadow:0 6px 0 var(--green-dark)}
.btn.red{background:var(--red);box-shadow:0 6px 0 var(--red-dark)}
.btn.amber{background:var(--amber);color:#fff;box-shadow:0 6px 0 var(--amber-dark)}
.btn.outline{background:var(--screen);color:var(--muted);border:3px solid var(--line);box-shadow:0 5px 0 var(--line);--lift:5px}
.btn.flat{background:none;box-shadow:none;color:var(--muted);font-size:15px;padding:12px;--lift:0px}
.btn.flat:active{transform:none;opacity:.6}
.btn:disabled{background:var(--track);color:var(--disabled);box-shadow:0 6px 0 var(--track-dark);cursor:default}

/* ── pills, chips, eyebrows ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--display);font-weight:800;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.eyebrow.gold{color:var(--gold-text)}
.eyebrow.amber{color:var(--amber-ink)}

.pill{
  display:inline-flex;align-items:center;gap:4px;border-radius:100px;
  padding:5px 11px;font-size:14px;font-weight:900;white-space:nowrap;
}
.pill.streak{background:var(--amber-tint);border:2.5px solid var(--amber);color:var(--amber-ink)}
.pill.hearts{background:var(--violet-tint);border:2.5px solid var(--violet);color:var(--violet);gap:1.5px}
.pill.hearts .off{opacity:.28}
.pill.ghost{background:var(--screen);border:3px solid var(--line);box-shadow:0 3px 0 var(--line);color:var(--muted);font-family:var(--display);font-weight:800;font-size:13px;padding:5px 13px;--lift:3px}

.chip{
  display:inline-block;align-self:flex-start;background:var(--violet-tint);border:2.5px solid var(--violet);
  color:var(--violet);font-family:var(--display);font-weight:800;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:100px;padding:4px 13px;
}

/* ── icon tiles ─────────────────────────────────────────────────────────── */
.tile{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  font-size:24px;flex:none;line-height:1;
}
.tile.warm{background:var(--surface-warm);color:var(--ink)}
.tile.violet{background:var(--violet);color:#fff}
.tile.amber{background:var(--amber);color:#fff}
.tile.track{background:var(--track)}
.tile.glyph{font-family:var(--display);font-weight:800;font-size:26px}

.circle-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;font-weight:900;flex:none;line-height:1;
}
.circle-btn.on-violet{background:var(--violet-dark);color:#fff}
.circle-btn.outline{background:var(--screen);border:2.5px solid var(--line);color:var(--muted);width:34px;height:34px;font-size:15px}

/* ── progress ───────────────────────────────────────────────────────────── */
.steps{display:flex;gap:7px;margin-bottom:22px}
.steps i{height:10px;flex:1;border-radius:5px;background:var(--violet-dark)}
.steps i.on{background:var(--amber)}

.track{height:16px;border-radius:8px;background:var(--track);overflow:hidden;flex:1}
.track i{display:block;height:100%;background:var(--amber);border-radius:8px;transition:width .3s ease}

.segs{display:flex;gap:4px;align-items:center}
.segs i{width:8px;height:26px;border-radius:4px;background:var(--violet-dark)}
.segs i.on{background:var(--amber)}
.segs b{font-size:12px;font-weight:900;color:var(--on-violet);margin-left:6px}

/* ═══ 01 · Onboarding ═══════════════════════════════════════════════════ */
.vhead{background:var(--violet);padding:38px 24px 0;border-bottom:6px solid var(--violet-dark);flex:none}
.vhead .bubble-row{display:flex;align-items:flex-end;gap:10px}
.mascot-lg{width:150px;height:158px;flex:none}
.float{animation:floatY 4s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}

.bubble{
  flex:1;background:var(--screen);border:3px solid var(--violet-dark);
  border-radius:22px 22px 22px 6px;padding:14px 16px;margin-bottom:34px;
}
.bubble p{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25;color:var(--ink)}
.bubble .hi{color:var(--violet)}

.title-xl{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.05;margin-bottom:4px}
.sub{color:var(--muted);font-size:15px;line-height:1.45;font-weight:700}

.rows{display:flex;flex-direction:column;gap:12px}
.pick{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--screen);border:3px solid var(--line);box-shadow:0 4px 0 var(--line);
  border-radius:20px;padding:13px 15px;--lift:4px;
}
.pick .txt{flex:1;min-width:0}
.pick .txt b{display:block;font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);line-height:1.2}
.pick .txt span{display:block;color:var(--muted);font-size:13.5px;font-weight:700;margin-top:-1px}
.pick .tick{width:28px;height:28px;border-radius:50%;background:var(--violet);color:#fff;display:none;place-items:center;font-size:14px;font-weight:900;flex:none}
.pick.sel{background:var(--violet-tint);border-color:var(--violet);box-shadow:0 4px 0 var(--violet)}
.pick.sel .txt span{color:var(--violet-ink)}
.pick.sel .tick{display:grid}
.pick.sel .tile.warm{background:var(--violet);color:#fff}

/* ═══ 02 · Home · Journey ═══════════════════════════════════════════════ */
.hdr{
  flex:none;background:var(--screen);border-bottom:3px solid var(--line);
  padding:16px 20px 12px;display:flex;align-items:center;gap:10px;z-index:3;
}
.avatar{
  width:46px;height:46px;border-radius:50%;background:var(--violet-tint);
  border:3px solid var(--violet);flex:none;padding:3px;
}
.avatar svg{display:block;width:100%;height:100%}
.who{flex:1;min-width:0}
.who b{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.1}
.who span{display:block;font-size:12.5px;color:var(--muted);font-weight:800}

.upnext{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--violet);border-radius:24px;box-shadow:0 6px 0 var(--violet-dark);
  padding:16px 16px 16px 20px;--lift:6px;
}
.upnext .txt{flex:1;min-width:0}
.upnext h3{font-size:24px;color:#fff;margin:2px 0 0}
.upnext .segs{margin-top:9px}
.play{
  width:64px;height:64px;border-radius:50%;background:var(--amber);color:#fff;
  display:grid;place-items:center;font-size:24px;flex:none;
  box-shadow:0 5px 0 var(--amber-dark);padding-left:4px;
}

.unit-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.unit-head .n{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.unit-head .rule{flex:1;height:3px;background:var(--line);border-radius:2px}
.unit-head .of{font-size:12.5px;font-weight:900;color:var(--disabled)}
.unit-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.unit-title h2{font-size:27px}

/* the path */
.journey{position:relative;width:100%;max-width:362px;margin:0 auto}
.journey svg{display:block;width:100%;height:auto}
.node{position:absolute;transform:translate(-50%,-50%);z-index:2;line-height:0}
.node .disc{
  border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;line-height:1;
  border:5px solid var(--screen-warm);--lift:6px;
}
.node.done .disc{width:78px;height:78px;background:var(--amber);color:#fff;font-size:30px;box-shadow:0 6px 0 var(--amber-dark)}
.node.active .disc{width:96px;height:96px;background:var(--violet);color:#fff;font-size:44px;border-width:6px;box-shadow:0 8px 0 var(--violet-dark);--lift:8px}
.node.open .disc{width:74px;height:74px;background:var(--screen);color:var(--violet);font-size:30px;box-shadow:0 5px 0 var(--line);--lift:5px}
.node.open .disc::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--violet)}
.node.open .disc{position:relative}
.node.locked .disc{width:74px;height:74px;background:var(--track);color:var(--disabled);font-size:26px;box-shadow:0 5px 0 var(--track-dark);cursor:default}
.cap{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;
  background:var(--screen);border:2.5px solid var(--line);border-radius:100px;
  padding:4px 12px;font-family:var(--display);font-weight:800;font-size:14px;
  line-height:1.2;color:var(--ink);white-space:nowrap;z-index:3;
}
.node.active .cap{border-color:var(--violet);font-size:15px}
.node.locked .cap{color:var(--muted-warm)}
.tip-tag{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:12px;
  background:var(--ink);color:#fff;border-radius:12px;line-height:1.2;white-space:nowrap;
  padding:6px 12px;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;
}
.tip-tag::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;
  background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px;
}
.path-echo{position:absolute;left:2px;width:116px;height:124px;z-index:1;pointer-events:none}

.card-row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border-radius:22px;padding:14px 16px;
}
.card-row .txt{flex:1;min-width:0}
.card-row .txt b{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;margin-top:1px}
.card-row.checkpoint{background:var(--amber-tint);border:3px solid var(--amber);box-shadow:0 5px 0 var(--amber);--lift:5px}
.card-row.checkpoint .txt b{color:var(--ink)}
.card-row.planned{border:3px dashed var(--track-dark);background:none}
.card-row.planned .txt b{color:var(--muted-warm)}
.card-row.planned .eyebrow{color:var(--disabled)}
.card-row.plain{background:var(--screen);border:3px solid var(--line);box-shadow:0 5px 0 var(--line);--lift:5px}

/* ── bottom nav ─────────────────────────────────────────────────────────── */
.nav{
  flex:none;background:var(--screen);border-top:3px solid var(--line);
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  display:flex;gap:8px;
}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.nav .t{
  width:100%;height:48px;border-radius:18px;display:grid;place-items:center;
  font-size:24px;position:relative;--lift:4px;
  background:var(--surface-warm);box-shadow:0 4px 0 var(--line-2);
}
.nav .l{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--disabled)}
.nav .on .t{background:var(--violet);box-shadow:0 5px 0 var(--violet-dark);--lift:5px}
.nav .on .l{color:var(--violet)}
.nav .practice .t{background:var(--amber-tint);box-shadow:0 4px 0 var(--amber-edge)}
.nav .review .t{background:var(--green-tint);box-shadow:0 4px 0 var(--green-edge)}
.nav .t>div{width:34px;height:34px}
.badge{
  position:absolute;top:-6px;right:-4px;min-width:22px;height:22px;padding:0 5px;
  border-radius:100px;background:var(--red);color:#fff;border:2.5px solid var(--screen);
  font-size:11px;font-weight:900;display:grid;place-items:center;
}

/* ═══ 03 · Lesson intro ═════════════════════════════════════════════════ */
.ihead{
  background:var(--violet);padding:20px 22px 44px;border-bottom:6px solid var(--violet-dark);
  flex:none;position:relative;text-align:center;
}
.ihead .back{position:absolute;left:18px;top:20px}
.ihead .badge-tile{
  width:96px;height:96px;border-radius:32px;background:var(--amber);color:#fff;
  font-family:var(--display);font-weight:800;font-size:48px;
  display:grid;place-items:center;margin:8px auto 14px;box-shadow:0 6px 0 var(--amber-dark);
}
.ihead h1{font-size:38px;color:#fff;margin-top:4px}

.echo-line{display:flex;align-items:flex-start;gap:12px}
.echo-line .av{width:66px;height:66px;border-radius:50%;background:var(--violet-tint);border:3px solid var(--violet);flex:none;padding:4px}
.echo-line .av svg{display:block;width:100%;height:100%}
.echo-line .bub{
  flex:1;background:var(--screen);border:3px solid var(--violet);
  border-radius:6px 20px 20px 20px;padding:13px 15px;
  font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3;
}

.explain{background:var(--screen);border:3px solid var(--line);border-radius:24px;padding:20px}
.explain p{font-size:16px;line-height:1.55;color:var(--ink-2);margin-bottom:12px}
.explain p:last-child{margin-bottom:0}
.explain b{color:var(--violet);font-weight:900}
.explain em{font-style:normal;color:var(--ink);font-weight:900}

.meta{display:flex;gap:8px}
.meta span{
  flex:1;text-align:center;border-radius:16px;padding:9px 6px;font-size:13px;font-weight:900;
  background:var(--screen);border:2.5px solid var(--line);color:var(--muted);
}
.meta span.xp{background:var(--amber-tint);border-color:var(--amber);color:var(--amber-ink)}

.src{
  display:block;font-size:11.5px;line-height:1.5;color:var(--disabled);
  font-weight:700;margin-top:10px;
}

/* ═══ 04 · Quiz ═════════════════════════════════════════════════════════ */
.qtop{flex:none;padding:16px 22px 0;display:flex;align-items:center;gap:12px;background:var(--screen)}
.qtop .hearts-plain{color:var(--violet);font-weight:900;font-size:15px;letter-spacing:1px;white-space:nowrap}
.qtop .hearts-plain .off{opacity:.28}
.stage{padding:18px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.ask{font-family:var(--display);font-weight:800;font-size:29px;line-height:1.12;letter-spacing:-.01em;margin-top:8px}
.qbody{display:flex;flex-direction:column;gap:14px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.choice{
  position:relative;border-radius:20px;padding:18px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);
  background:var(--screen);border:3px solid var(--line);box-shadow:0 4px 0 var(--line);--lift:4px;
}
.choice.long{text-align:left;font-size:17px;padding:16px 18px;font-family:var(--body);font-weight:800}
.choice .k{position:absolute;top:6px;right:11px;font-size:11px;font-weight:900;color:var(--disabled)}
.choice.sel{background:var(--violet-tint);border-color:var(--violet);box-shadow:0 4px 0 var(--violet);color:var(--violet)}
.choice.right{background:var(--green-tint);border-color:var(--green);box-shadow:0 4px 0 var(--green);color:var(--green-dark)}
.choice.wrong{background:var(--red-tint);border-color:var(--red);box-shadow:0 4px 0 var(--red);color:var(--red-ink)}
.choice.right::after,.choice.wrong::after{
  position:absolute;top:8px;right:12px;font-size:15px;font-weight:900;
}
.choice.right::after{content:"✓"}
.choice.wrong::after{content:"✕"}
.choice.right .k,.choice.wrong .k{display:none}
.stack{display:flex;flex-direction:column;gap:10px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip.guided{background:var(--amber-tint);border-color:var(--amber);color:var(--amber-ink)}

/* The rule from the teach card, pinned for the guided half of the lesson. */
.pinned{
  display:flex;align-items:center;gap:10px;
  background:var(--violet-tint);border:2.5px solid var(--violet);
  border-radius:18px;padding:10px 14px;
}
.pinned .av{width:34px;height:34px;flex:none}
.pinned .av svg{display:block;width:100%;height:100%}
.pinned p{font-size:14.5px;line-height:1.35;font-weight:800;color:var(--violet-ink)}

.play-row{display:flex;justify-content:center}
.btn-hear{
  display:inline-flex;align-items:center;gap:8px;background:var(--violet);color:#fff;
  border-radius:100px;padding:11px 20px;font-family:var(--display);font-weight:800;
  font-size:15px;box-shadow:0 4px 0 var(--violet-dark);--lift:4px;
}

.tok{
  border-radius:14px;padding:11px 16px;font-family:var(--display);font-weight:800;font-size:16px;
  background:var(--screen);border:3px solid var(--line);box-shadow:0 3px 0 var(--line);--lift:3px;
}
.tok.placed{background:var(--violet-tint);border-color:var(--violet);box-shadow:0 3px 0 var(--violet);color:var(--violet)}
.tok.spent{opacity:.32;box-shadow:none;cursor:default}
.tok.right{background:var(--green-tint);border-color:var(--green);box-shadow:0 3px 0 var(--green);color:var(--green-dark)}
.tok.wrong{background:var(--red-tint);border-color:var(--red);box-shadow:0 3px 0 var(--red);color:var(--red-ink)}
.tok.sel{background:var(--violet);border-color:var(--violet-dark);box-shadow:0 3px 0 var(--violet-dark);color:#fff}
.tok.linked{background:var(--violet-tint);border-color:var(--violet);color:var(--violet-ink)}
.slot-line{
  display:flex;gap:8px;flex-wrap:wrap;min-height:58px;align-items:center;padding:10px;
  border:3px dashed var(--track-dark);border-radius:18px;background:var(--screen);
}
.bank{display:flex;gap:8px;flex-wrap:wrap}
.match{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.match .col{display:flex;flex-direction:column;gap:9px}
.match .tok{width:100%;text-align:left;font-family:var(--body);font-weight:800;font-size:14.5px}
.match .k{font-size:12px;color:var(--violet);font-weight:900}

.type-in{
  width:100%;padding:17px 18px;border-radius:18px;background:var(--screen);
  border:3px solid var(--line);box-shadow:0 4px 0 var(--line);outline:none;
  font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);
}
.type-in:focus{border-color:var(--violet);box-shadow:0 4px 0 var(--violet)}
.type-in.right{border-color:var(--green);box-shadow:0 4px 0 var(--green);color:var(--green-dark)}
.type-in.wrong{border-color:var(--red);box-shadow:0 4px 0 var(--red);color:var(--red-ink)}

.hint{font-size:13px;font-weight:800;color:var(--muted);text-align:center}

/* the feedback bar */
.checkbar{
  flex:none;background:var(--screen);border-top:3px solid var(--line);
  padding:16px 22px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}
.checkbar.right{background:var(--green-tint);border-top-color:var(--green)}
.checkbar.wrong{background:var(--red-tint);border-top-color:var(--red)}
.fb-line{display:flex;align-items:center;gap:12px}
.fb-line .av{width:60px;height:60px;border-radius:50%;background:var(--screen);flex:none;padding:5px;border:3px solid var(--green)}
.checkbar.wrong .fb-line .av{border-color:var(--red)}
.fb-line .av svg{display:block;width:100%;height:100%}
.fb-line .txt{flex:1;min-width:0}
.fb-line b{display:block;font-family:var(--display);font-weight:800;font-size:23px;line-height:1.1}
.fb-line p{font-size:14px;line-height:1.4;margin-top:3px}
.checkbar.right b{color:var(--green-dark)}
.checkbar.right p{color:var(--green-ink)}
.checkbar.wrong b{color:var(--red-dark)}
.checkbar.wrong p{color:var(--red-ink)}

/* ═══ 05 · Summary ══════════════════════════════════════════════════════ */
.hero-violet{background:var(--violet);padding:26px 24px 30px;text-align:center;flex:none}
.mascot-hero{width:184px;height:190px;margin:0 auto 10px}
.badge-pill{
  display:inline-block;background:var(--amber);color:#fff;border-radius:100px;
  padding:6px 18px;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 0 var(--amber-dark);
  margin-bottom:14px;
}
.hero-violet h1{font-size:46px;color:#fff}
.hero-violet .sub{color:var(--on-violet);font-size:16px;margin-top:6px}
.sheet-up{
  background:var(--screen-warm);border-radius:34px 34px 0 0;margin-top:-18px;
  padding:24px 22px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;flex:1;position:relative;z-index:2;
}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trio div{border-radius:20px;padding:14px 8px;text-align:center}
.trio b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.trio u{display:block;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.trio .a{background:var(--amber-tint);border:3px solid var(--amber);color:var(--amber-ink)}
.trio .g{background:var(--green-tint);border:3px solid var(--green);color:var(--green-dark)}
.trio .v{background:var(--violet-tint);border:3px solid var(--violet);color:var(--violet)}

/* ═══ You ═══════════════════════════════════════════════════════════════ */
.stat-card{background:var(--screen);border:3px solid var(--line);border-radius:20px;padding:16px 18px}
.stat-card h4{font-size:17px;margin-bottom:10px}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14.5px;font-weight:800}
.kv+.kv{border-top:2.5px solid var(--line)}
.kv span{color:var(--muted)}
.kv b{font-family:var(--display);font-weight:800;font-size:17px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}
/* Square, not stretched: a .tile has a fixed 48px height, so letting it fill a
   flexible grid column turns every badge into a lozenge. */
.badges .tile{width:auto;height:auto;aspect-ratio:1}
.badges .tile.dim{filter:grayscale(1);opacity:.55}
.dots{letter-spacing:2px;color:var(--amber);font-size:14px}
.dots i{color:var(--track-dark);font-style:normal}

/* ═══ fretboard ═════════════════════════════════════════════════════════ */
/* The handoff's fret strip is a single string; a real neck is six. Same
   idiom scaled up: violet card, tiles for frets, amber for the thing in play. */
.fb-wrap{
  background:var(--violet);border-radius:22px;box-shadow:0 6px 0 var(--violet-dark);
  padding:14px 12px 10px 30px;position:relative;
}
.fb-wrap .eyebrow{color:var(--on-violet);margin-bottom:8px;display:block;font-size:11.5px}
.fb{position:relative}
.fb-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--violet-dark) transparent}
.fb-scroll::-webkit-scrollbar{height:6px}
.fb-scroll::-webkit-scrollbar-thumb{background:var(--violet-dark);border-radius:3px}
.fb-neck{position:relative;background:var(--violet-mid);border-radius:14px}
.fb-nut{position:absolute;top:4px;bottom:4px;background:var(--on-violet);border-radius:2px}
.fb-wire{position:absolute;top:5px;bottom:5px;width:2px;background:var(--violet-dark);opacity:.8;border-radius:1px}
.fb-inlay{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--violet-dark);transform:translate(-50%,-50%);opacity:.75}
/* Strings have to read as strings against the violet neck, so they are pale,
   not dark — the same inversion the mascot's outline uses. */
.fb-string{position:absolute;right:0;background:rgba(243,238,255,.5);transform:translateY(-50%);border-radius:2px}
.fb-strnames{position:absolute;left:4px;top:14px;width:24px;height:100%;pointer-events:none}
.fb-strnames span{position:absolute;transform:translateY(-50%);font-family:var(--display);font-weight:800;font-size:12px;color:var(--on-violet-2);left:4px}
.fb-numwrap{margin-top:6px;overflow:hidden}
.fb-nums{position:relative;height:16px}
.fb-nums span{position:absolute;transform:translateX(-50%);font-size:12px;font-weight:900;color:var(--on-violet-2);opacity:.6}
.fb-nums span.on{opacity:1;color:var(--gold-text)}

.fb-cell{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2}
.fb.locked .fb-cell{cursor:default}
/* Every fret shows a faint ring: the neck is the primary INPUT here, and an
   unmarked cell with no outline gives no hint that it can be tapped at all. */
.dot{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:2.5px solid rgba(243,238,255,.16);
  transition:background .12s,border-color .12s,transform .1s;
}
.fb.locked .dot{border-color:transparent}
.dot i{font-style:normal;font-family:var(--display);font-weight:800;font-size:12px;color:#fff;opacity:0;line-height:1}
.fb.compact .dot{width:22px;height:22px}
.fb.compact .dot i{font-size:10px}
.fb-cell:active .dot{transform:scale(.9)}
.fb-cell.ping .dot{animation:ping .45s ease-out}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(255,177,0,.6);background:rgba(255,177,0,.5)}
  100%{box-shadow:0 0 0 16px rgba(255,177,0,0)}
}
.m-lit .dot{background:var(--amber);border-color:var(--amber-dark)}
.m-lit .dot i{opacity:1}
.m-root .dot{background:var(--amber);border-color:#fff}
.m-root .dot i{opacity:1}
.m-ghost .dot{background:rgba(255,255,255,.12);border-color:var(--on-violet-2)}
.m-ghost .dot i{opacity:.8}
.m-dim .dot{background:rgba(255,177,0,.3);border-color:rgba(255,177,0,.5)}
.m-dim .dot i{opacity:.85}
.m-steel .dot{background:var(--violet-tint);border-color:var(--violet-dark)}
.m-steel .dot i{opacity:1;color:var(--violet)}
.m-target .dot{background:transparent;border-color:var(--gold-text);animation:breathe 1.6s ease-in-out infinite}
.m-target .dot i{opacity:.9;color:var(--gold-text)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,216,77,.35)}50%{box-shadow:0 0 0 7px rgba(255,216,77,0)}}
.m-right .dot{background:var(--green);border-color:var(--green-dark)}
.m-right .dot i{opacity:1}
.m-wrong .dot{background:var(--red);border-color:var(--red-dark)}
.m-wrong .dot i{opacity:1}

/* the flat teaching strip from the handoff — one string, a few frets */
.strip{background:var(--page);border:2.5px solid var(--line);border-radius:18px;padding:14px 12px 10px;position:relative}
.strip .wire{position:absolute;left:12px;right:12px;top:39px;height:3px;background:var(--line-2);border-radius:2px}
.strip .cells{display:flex;gap:8px;position:relative;z-index:1}
.strip .cell{flex:1;text-align:center}
.strip .fret{
  height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--screen);border:2.5px solid var(--line);color:var(--muted);
  font-family:var(--display);font-weight:800;font-size:16px;
}
.strip .cell.on{flex:1.5}
.strip .cell.on .fret{background:var(--violet);border-color:var(--violet);color:#fff;font-size:17px;box-shadow:0 4px 0 var(--violet-dark)}
.strip .cell.q .fret{background:var(--amber);border-color:var(--amber);color:#fff;font-size:24px;box-shadow:0 4px 0 var(--amber-dark)}
.strip .num{font-size:12px;font-weight:900;color:var(--muted);margin-top:8px;display:block}
.strip .cell.q .num{color:var(--amber-ink)}

/* ═══ dialog + toast ════════════════════════════════════════════════════ */
/* Drawn by the app, never window.confirm(): native dialogs are suppressed in
   embedded browsers, which silently broke the only way out of a lesson. */
.sheet-back{
  position:fixed;inset:0;z-index:40;display:grid;place-items:end center;
  background:rgba(43,37,54,.5);padding:0;animation:fade .16s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:var(--shell);background:var(--screen);
  border-radius:28px 28px 0 0;border-top:3px solid var(--line);
  padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);max-height:86vh;overflow-y:auto;
}
@keyframes rise{from{transform:translateY(24px)}to{transform:none}}
.sheet h4{font-size:23px}
.sheet .sub{margin-bottom:6px}

.toast{
  position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:50;
  background:var(--amber);color:#fff;padding:10px 20px;border-radius:100px;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;box-shadow:0 5px 0 var(--amber-dark);
  animation:pop 1.1s ease-out forwards;pointer-events:none;
}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,10px)}
  14%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-20px)}
}

.linkish{color:var(--violet);text-decoration:underline;font-weight:900;font-size:inherit}

/* ── narrow phones ──────────────────────────────────────────────────────── */
@media (max-width:380px){
  .title-xl{font-size:31px}
  .ask{font-size:25px}
  .hero-violet h1{font-size:38px}
  .ihead h1{font-size:31px}
  .mascot-lg{width:120px;height:126px}
  .stage,.pad{padding-left:18px;padding-right:18px}
}

.hr{height:3px;background:var(--line);border-radius:2px;margin:2px 0}

/* can-do statements: what the learner can now do, which is the only progress
   measure that answers "am I getting anywhere" on an instrument. */
.card-row.cando{background:var(--amber-tint);border:3px solid var(--amber);box-shadow:0 5px 0 var(--amber-edge)}
.cando-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.cando-row+.cando-row{border-top:2.5px solid var(--line)}
.cando-row .mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:var(--track);color:var(--disabled)}
.cando-row .mark.on{background:var(--green);color:#fff}
.cando-row p{font-size:14.5px;line-height:1.35;font-weight:800;color:var(--ink)}
.cando-row.next p{color:var(--muted)}

/* ═══ the ear ═══════════════════════════════════════════════════════════ */
/* Bands, never a percentage bar. Hearing has no terminus, so the display has
   to read as a direction of travel — four segments where the last one is open
   ended — rather than a meter the learner is failing to fill. Amber, because
   it is the hue this app uses for progress and reward, and violet would make
   it look like the mastery states that resolve. */
.band-row{padding:9px 0}
.band-row+.band-row{border-top:2.5px solid var(--line)}
.band-txt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.band-txt span{font-size:14px;font-weight:800;color:var(--muted)}
.band-txt b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--amber-ink)}
.band{display:flex;gap:4px}
.band i{flex:1;height:9px;border-radius:99px;background:var(--track);border:2px solid var(--track-dark)}
.band i.on{background:var(--amber);border-color:var(--amber-edge)}
/* the open-ended one: the top band has no ceiling, so it does not close off */
.band i:last-child{border-right-style:dashed}
.band-row .hint{margin-top:5px;font-size:12px}