/* ─────────────────────────────────────────────────────────────
   BrightNote · bn-shell.css — site-wide design system (UI Redesign 1).
   Dark navy nav, mint accent, card language. Loaded AFTER page styles,
   so its :root tokens re-theme legacy pages that use var(--green) etc.
   ───────────────────────────────────────────────────────────── */
:root{
  --bn-navy:#0e1c2e; --bn-navy2:#16283f; --bn-mint:#2fbf9b; --bn-mint-dark:#23a283;
  --bn-bg:#f6f8fa; --bn-card:#ffffff; --bn-line:#e3e9f0; --bn-ink:#17263a; --bn-soft:#5c6f85;
  --bn-r:14px; --bn-shadow:0 1px 2px rgba(15,30,50,.05),0 8px 24px rgba(15,30,50,.06);
  /* re-theme legacy pages */
  --green:var(--bn-mint); --navy:var(--bn-navy); --ink:var(--bn-ink);
  --soft:var(--bn-soft); --mut:var(--bn-soft); --line:var(--bn-line); --bg:var(--bn-bg);
}
body{background:var(--bn-bg)}

/* ---------- top nav ---------- */
.bnsh-nav{background:var(--bn-navy);color:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  display:flex;align-items:center;gap:6px;padding:0 18px;height:56px;position:sticky;top:0;z-index:60}
.bnsh-logo{font-weight:800;font-size:17px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;margin-right:14px;white-space:nowrap}
.bnsh-logo .dot{background:var(--bn-mint);width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.bnsh-links{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.bnsh-links::-webkit-scrollbar{display:none}
.bnsh-links a{color:#c7d3e2;text-decoration:none;font-size:14px;font-weight:600;padding:17px 12px 14px;border-bottom:3px solid transparent;white-space:nowrap}
.bnsh-links a:hover{color:#fff}
.bnsh-links a.on{color:#fff;border-bottom-color:var(--bn-mint)}
.bnsh-right{display:flex;align-items:center;gap:10px;color:#c7d3e2;font-size:16px}
.bnsh-right a{color:#c7d3e2;text-decoration:none}
.bnsh-teach{font-size:12.5px;font-weight:700;background:rgba(47,163,107,.18);color:#7ee0ae !important;
  border:1px solid rgba(47,163,107,.45);border-radius:99px;padding:5px 12px;white-space:nowrap;transition:background .15s}
.bnsh-teach:hover{background:rgba(47,163,107,.3)}
.bnsh-burger{display:none;flex:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;padding:0}
.bnsh-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#e6edf6;
  transition:transform .2s ease,opacity .2s ease}
.bnsh-open .bnsh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bnsh-open .bnsh-burger span:nth-child(2){opacity:0}
.bnsh-open .bnsh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:840px){
  .bnsh-burger{display:flex}
  .bnsh-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--bn-navy);
    flex-direction:column;gap:0;padding:6px 0 10px;box-shadow:0 18px 34px rgba(8,18,32,.4);z-index:59}
  .bnsh-nav.bnsh-open .bnsh-links{display:flex}
  .bnsh-links a{padding:13px 22px;border-bottom:0;border-left:3px solid transparent;font-size:15px}
  .bnsh-links a.on{border-left-color:var(--bn-mint);border-bottom-color:transparent;background:rgba(255,255,255,.05)}
}
.bnsh-ava{width:30px;height:30px;border-radius:50%;background:var(--bn-mint);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}

/* ---------- breadcrumbs ---------- */
.bnsh-crumbs{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--bn-soft);padding:12px 22px 0;max-width:1100px;margin:0 auto}
.bnsh-crumbs a{color:var(--bn-soft);text-decoration:none}
.bnsh-crumbs a:hover{color:var(--bn-mint-dark)}
.bnsh-crumbs .sep{margin:0 6px;opacity:.6}

/* ---------- shared components (opt-in classes) ---------- */
.bnsh-card{background:var(--bn-card);border:1px solid var(--bn-line);border-radius:var(--bn-r);box-shadow:var(--bn-shadow)}
.bnsh-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--bn-line);
  background:#fff;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--bn-ink);cursor:pointer}
.bnsh-pill.on{background:#e7f7f2;border-color:var(--bn-mint);color:var(--bn-mint-dark)}
.bnsh-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--bn-mint);color:#fff;font-size:20px;cursor:pointer;
  box-shadow:0 6px 16px rgba(47,191,155,.35)}
.bnsh-play:hover{background:var(--bn-mint-dark)}

/* ---------- dark feature band + light footer strip ---------- */
.bnsh-band{background:var(--bn-navy2);color:#fff;border-radius:var(--bn-r);margin:26px auto;max-width:1100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;padding:20px 22px;font-family:system-ui,sans-serif}
.bnsh-band .it{display:flex;gap:12px;align-items:flex-start}
.bnsh-band .ic{font-size:22px;background:rgba(47,191,155,.18);border-radius:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none}
.bnsh-band b{display:block;font-size:14.5px;margin-bottom:2px}
.bnsh-band span{font-size:12.5px;color:#b9c6d6;line-height:1.4}
.bnsh-band a{color:inherit;text-decoration:none}
.bnsh-strip{max-width:1100px;margin:0 auto 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
  padding:0 22px;font-family:system-ui,sans-serif;text-align:center}
.bnsh-strip .ic{font-size:22px;color:var(--bn-mint-dark)}
.bnsh-strip b{display:block;font-size:13.5px;color:var(--bn-ink);margin:4px 0 2px}
.bnsh-strip span{font-size:12px;color:var(--bn-soft);line-height:1.4}

/* ---------- legacy component restyle (existing pages adopt the new look) ---------- */
/* the shell replaces in-page brand headers */
body.bnsh[data-bn-area="scales"] .top:has(.bn){display:none}
body.bnsh[data-bn-area="scales"] .top .bn{display:none}
body.bnsh[data-bn-area="scales"] .top h1{font-size:26px;letter-spacing:-.01em}
/* hub & friends: hide legacy nav chips the shell already provides
   (keep the profile chip and the Back-to-POMA escape hatch) */
body.bnsh header a.back:not([href="/brightnote"]){display:none}
/* legacy page heroes: the shell nav + breadcrumb replace them everywhere…
   …except the Hub's, which carries the profile chip + Back-to-POMA */
body.bnsh header{display:none}
body.bnsh header:has(.profchip){display:flex}
/* ---------- lesson pages (data-bn-area="learn") ---------- */
body.bnsh[data-bn-area="learn"] .wordmark{display:none}     /* shell nav carries the brand */
/* lesson top bar: a light, integrated control row — not a second dark stripe under the nav */
body.bnsh[data-bn-area="learn"] .topbar{background:var(--bn-card)!important;color:var(--bn-ink)!important;
  border-bottom:1px solid var(--bn-line)!important;box-shadow:none!important}
body.bnsh[data-bn-area="learn"] .mode{background:#eef2f7!important}
body.bnsh[data-bn-area="learn"] .mode button{color:var(--bn-soft)!important}
body.bnsh[data-bn-area="learn"] .mode button.on{background:var(--bn-mint)!important;color:#fff!important}
body.bnsh[data-bn-area="learn"] .bnp-switch{background:#eef2f7!important;border-color:var(--bn-line)!important}
body.bnsh[data-bn-area="learn"] .bnp-switch button.on{background:var(--bn-mint)!important;color:#fff!important}
body.bnsh[data-bn-area="learn"] .progresswrap{background:var(--bn-line)!important}
body.bnsh[data-bn-area="learn"] .goals{background:#e7f7f2!important;border:1.5px solid rgba(47,191,155,.5);color:var(--bn-ink)!important}
body.bnsh[data-bn-area="learn"] .goals h3{color:var(--bn-mint-dark)!important}
body.bnsh[data-bn-area="learn"] .donebtn{border-radius:999px!important;border:1.5px solid var(--bn-mint)!important;
  color:var(--bn-mint-dark)!important;font-weight:700;background:#fff!important;padding:9px 18px!important}
body.bnsh[data-bn-area="learn"] .donebtn:hover{background:#e7f7f2!important}
body.bnsh[data-bn-area="learn"] .done .donebtn,body.bnsh[data-bn-area="learn"] .donebtn.on{background:var(--bn-mint)!important;color:#fff!important}
body.bnsh[data-bn-area="learn"] .hero{border:1px solid var(--bn-line);box-shadow:var(--bn-shadow)}
body.bnsh[data-bn-area="learn"] .bne-play{background:var(--bn-mint)!important;border-color:var(--bn-mint)!important;
  color:#fff!important;border-radius:12px!important;box-shadow:0 6px 16px rgba(47,191,155,.35)!important}
body.bnsh input[type=checkbox],body.bnsh input[type=range]{accent-color:var(--bn-mint)}
/* chords page: shell replaces its hero header; badges move clear of the chord names */
body.bnsh[data-bn-title="Chords"] > header,body.bnsh[data-bn-title="Chords"] header .brand{display:none}
body.bnsh[data-bn-title="Chords"] .lvbadge{left:auto!important;right:12px!important}
body.bnsh[data-bn-title="Chords"] .nm{padding-right:80px}
/* scale cards: badge in the corner, title gets room to breathe */
.scard{position:relative;padding:16px 14px 12px!important}
.scard .mstate{position:absolute;top:10px;right:10px;font-size:9.5px!important;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;background:#fff7e6;color:#a97a12;border:1px solid #ecd9a8}
.scard .mstate.mnew{background:#eef4fb;color:#38618f;border-color:#cdddee}
.scard .nm{padding-right:74px;font-weight:800;font-size:15.5px}
.scard .alt{min-height:16px}
.tog{border-radius:999px!important;border:1.5px solid var(--bn-line)!important;background:#fff!important;
  padding:8px 15px!important;font-weight:600!important;font-size:13.5px!important;color:var(--bn-ink)!important;cursor:pointer}
.tog.on{background:#e7f7f2!important;border-color:var(--bn-mint)!important;color:var(--bn-mint-dark)!important}
.seg{border:1.5px solid var(--bn-line);border-radius:999px;overflow:hidden;background:#fff}
.seg button{border:0!important;background:#fff!important;padding:9px 16px!important;font-weight:600!important;cursor:pointer}
.seg button.on{background:var(--bn-mint)!important;color:#fff!important}
.card,.svgbox{background:var(--bn-card);border:1px solid var(--bn-line)!important;border-radius:var(--bn-r)!important;box-shadow:var(--bn-shadow)}
button.go,button.play,.play{background:var(--bn-mint)!important;border-color:var(--bn-mint)!important;
  box-shadow:0 6px 16px rgba(47,191,155,.35)!important;border-radius:12px!important}
.play:hover{background:var(--bn-mint-dark)!important}
.tempo .bpmlab{font-family:system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--bn-ink);white-space:nowrap}
.tempo input[type=range]{accent-color:var(--bn-mint)}
h1{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.01em}
.wrap{max-width:1100px!important}
.tabs button.on{border-bottom-color:var(--bn-mint)!important;color:var(--bn-ink)!important}
input,select{border-radius:10px!important;border:1.5px solid var(--bn-line)!important;font-family:inherit}
table{border-radius:12px;overflow:hidden;box-shadow:var(--bn-shadow)}
th{background:#eef6f3!important}

@media (max-width:480px){
  .bnsh-nav{padding:0 10px;height:50px}
  .bnsh-links a{padding:14px 8px 11px;font-size:13px}
  .bnsh-logo span.txt{display:none}
}
.bnsh-foot{max-width:1100px;margin:8px auto 28px;padding:0 22px;font-family:system-ui,sans-serif;
  font-size:11.5px;color:#9aa7b2;text-align:center}
.bnsh-foot a{color:#7d93a8;text-decoration:none}
.bnsh-foot a:hover{color:var(--bn-mint-dark)}
@media print{.bnsh-nav,.bnsh-crumbs,.bnsh-band,.bnsh-strip,.bnsh-foot{display:none!important}}

/* ─────────────────────────────────────────────────────────────
   Lesson-player momentum layer (injected by bn-shell.js)
   ───────────────────────────────────────────────────────────── */
/* section-complete pulse */
@keyframes bnl-pop{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
.bnl-pop{animation:bnl-pop .34s ease}
@keyframes bnl-flash{0%{box-shadow:0 0 0 0 rgba(47,191,155,.0)}30%{box-shadow:0 0 0 4px rgba(47,191,155,.35)}100%{box-shadow:0 0 0 0 rgba(47,191,155,0)}}
.bnl-flash{animation:bnl-flash 1.1s ease}

/* momentum toast */
.bnl-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:8000;
  background:#12251c;color:#eafff5;font-family:system-ui,sans-serif;font-weight:800;font-size:14px;
  padding:11px 20px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.28);
  border:1px solid rgba(63,208,143,.5);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.bnl-toast.show{opacity:1;transform:translate(-50%,0)}

/* resume banner (prepended into .wrap) */
.bnl-resume{--bnl-acc:#2fbf9b;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:#f0faf6;border:1.5px solid var(--bnl-acc);border-radius:12px;
  padding:11px 15px;margin:14px 0 2px;font-family:system-ui,sans-serif;font-size:13.5px;color:#1f3a30}
.bnl-resume b{color:var(--bnl-acc)}
.bnl-resume a{color:var(--bnl-acc);font-weight:800;text-decoration:none}
.bnl-resume a:hover{text-decoration:underline}
.bnl-rz-dot{width:9px;height:9px;border-radius:50%;background:var(--bnl-acc);box-shadow:0 0 0 4px rgba(47,191,155,.18)}
.bnl-rz-x{margin-left:auto;border:0;background:transparent;color:#8aa79b;font-size:14px;cursor:pointer;font-weight:800}

/* persistent next-lesson bar */
.bnl-nextbar{--bnl-acc:#2fbf9b;position:fixed;left:0;right:0;bottom:0;z-index:7000;
  display:flex;align-items:center;gap:12px;padding:11px 18px;
  background:linear-gradient(90deg,#12251c,#173a2c);color:#eafff5;
  font-family:system-ui,sans-serif;box-shadow:0 -6px 22px rgba(0,0,0,.22);
  transform:translateY(0);animation:bnl-slideup .4s ease}
@keyframes bnl-slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.bnl-nb-tick{width:26px;height:26px;flex:none;border-radius:50%;background:var(--bnl-acc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.bnl-nb-msg{font-weight:800;font-size:14px}
.bnl-next-btn{margin-left:auto;background:var(--bnl-acc);color:#08211a;font-weight:900;font-size:14.5px;
  text-decoration:none;padding:10px 20px;border-radius:11px;box-shadow:0 6px 16px rgba(47,191,155,.35);white-space:nowrap}
.bnl-next-btn:hover{filter:brightness(1.06)}
.bnl-nb-x{border:0;background:transparent;color:#9fc6b7;font-size:15px;cursor:pointer;font-weight:800;padding:4px}
body.bnl-has-nextbar{padding-bottom:64px}
@media(max-width:520px){.bnl-nextbar{gap:8px;padding:9px 12px}.bnl-nb-msg{display:none}.bnl-next-btn{padding:9px 14px;font-size:13.5px}}

/* completion celebration overlay */
.bnl-cele{--bnl-acc:#2fbf9b;position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;
  background:rgba(10,22,17,.62);opacity:0;transition:opacity .26s ease}
.bnl-cele.show{opacity:1}
.bnl-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bnl-cele-card{position:relative;background:#fff;border-radius:22px;max-width:440px;width:100%;
  padding:30px 26px 24px;text-align:center;box-shadow:0 26px 60px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.96);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.bnl-cele.show .bnl-cele-card{transform:translateY(0) scale(1)}
.bnl-cele-em{font-size:52px;line-height:1}
.bnl-stars{display:flex;gap:8px;justify-content:center;margin:8px 0 2px}
.bnl-stars span{font-size:30px;opacity:0;transform:scale(.4);animation:bnl-star .5s ease forwards}
.bnl-stars span.on{color:#E0B020;text-shadow:0 2px 8px rgba(224,176,32,.45)}
.bnl-stars span.off{color:#d7dde6}
.bnl-stars span:nth-child(1){animation-delay:.15s}
.bnl-stars span:nth-child(2){animation-delay:.32s}
.bnl-stars span:nth-child(3){animation-delay:.49s}
@keyframes bnl-star{to{opacity:1;transform:scale(1)}}
.bnl-starcap{font-family:system-ui,sans-serif;font-size:12.5px;font-weight:700;color:#8a6a1f;margin:2px 0 2px}
.bnl-cele-card h2{margin:8px 0 3px;font-family:system-ui,sans-serif;font-size:24px;color:#16293f}
.bnl-cele-card p{margin:0 0 18px;color:#5c6f85;font-size:15px;font-weight:600}
.bnl-cele-actions{display:flex;flex-direction:column;gap:10px}
.bnl-go{background:var(--bnl-acc);color:#08211a;font-weight:900;font-size:15.5px;text-decoration:none;
  padding:14px 20px;border-radius:13px;box-shadow:0 10px 24px rgba(47,191,155,.4)}
.bnl-go:hover{filter:brightness(1.06)}
.bnl-ghost{border:0;background:transparent;color:#7d8fa3;font-weight:800;font-size:13.5px;cursor:pointer;padding:4px}
@media print{.bnl-toast,.bnl-nextbar,.bnl-cele,.bnl-resume{display:none!important}}

/* ───── accessibility: focus, motion, contrast ───── */
.bnl-next-btn:focus-visible,.bnl-go:focus-visible,.bnl-ghost:focus-visible,
.bnl-nb-x:focus-visible,.bnl-rz-x:focus-visible,.bnl-resume a:focus-visible{
  outline:3px solid #2fbf9b;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  .bnl-pop,.bnl-flash,.bnl-nextbar,.bnl-toast{animation:none!important;transition:none!important}
  .bnl-cele,.bnl-cele-card{animation:none!important;transition:none!important}
  .bnl-cele-card{transform:none!important}
  .bnl-stars span{opacity:1!important;transform:none!important;animation:none!important}
}

/* ── streak flame + XP chip (reward layer) ── */
.bnsh-streak{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  background:rgba(255,209,102,.14);border:1px solid rgba(255,209,102,.25);
  font-weight:800;font-size:13px;text-decoration:none;color:#ffd166;line-height:1}
.bnsh-streak:hover{background:rgba(255,209,102,.22)}
.bnsh-streak .xp{color:#8fe3c9;font-weight:800}
.bnsh-streak.bump{animation:bnshBump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bnshBump{35%{transform:scale(1.22)}}
@media (max-width:560px){.bnsh-streak .xp{display:none}}
@media (prefers-reduced-motion:reduce){.bnsh-streak.bump{animation:none}}

/* XP line on the lesson-complete celebration card */
.bnl-xp{margin:8px 0 2px;font-weight:900;color:#0f9d6e;font-size:15px;letter-spacing:.01em}