/* ─────────────────────────────────────────────────────────────
   BrightNote · Presentation Profile layer  (drop-in, additive)
   Same curriculum, swappable "clothes": accent, reward metaphor,
   encouragement tone. Notation stays clean & readable in BOTH.
   Explorer = warm/playful (5–8).  Studio = sleek/mature (9–13).
   ───────────────────────────────────────────────────────────── */

/* SAFE theming: only swap the accent + a few chrome touches.
   We deliberately do NOT darken the notation surfaces (keeps notes readable). */
body[data-bn-profile="studio"]{ --gold:#12c2c2; --sunt:#12c2c2; }
body[data-bn-profile="studio"] .wordmark b{ color:#12c2c2; }
body[data-bn-profile="explorer"]{ --gold:#E0A21B; }

/* ── profile switch (sits in the topbar) ── */
.bnp-switch{display:inline-flex;background:rgba(0,0,0,.06);border:1px solid var(--line,#e3e6f0);border-radius:999px;overflow:hidden;margin-right:10px}
.bnp-switch button{font:inherit;font-weight:800;font-size:12px;border:none;background:transparent;color:var(--mut,#6b7188);padding:6px 11px;cursor:pointer;white-space:nowrap}
.bnp-switch button.on{background:var(--gold,#E0A21B);color:#22160a}
body[data-bn-profile="studio"] .bnp-switch button.on{color:#04201f}

/* ── living corner (ambient reward) ── */
.bnp-corner{position:fixed;right:14px;bottom:14px;z-index:60;width:210px;
  background:var(--card,#fff);border:1px solid var(--line,#e3e6f0);border-radius:16px;
  box-shadow:0 10px 30px rgba(20,30,50,.18);padding:10px 12px;font-family:inherit;transition:transform .2s}
.bnp-corner.min{transform:translateY(calc(100% - 34px))}
.bnp-corner .bnp-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut,#6b7188);cursor:pointer}
.bnp-corner .bnp-head .bnp-pct{margin-left:auto;font-size:15px;color:var(--gold,#E0A21B)}
.bnp-corner .bnp-body{margin-top:8px}
/* explorer forest */
.bnp-forest{display:flex;align-items:flex-end;gap:5px;height:38px;font-size:26px;line-height:1}
.bnp-forest span{opacity:0;transform:translateY(6px) scale(.5);transition:all .5s cubic-bezier(.2,.9,.2,1)}
.bnp-forest span.on{opacity:1;transform:none}
.bnp-note{font-size:11.5px;font-weight:700;color:var(--mut,#6b7188);margin-top:4px;min-height:15px}
/* studio meter */
.bnp-meter{display:flex;align-items:flex-end;gap:4px;height:38px}
.bnp-meter i{flex:1;background:linear-gradient(180deg,#12c2c2,#0a6f6f);border-radius:3px;height:6%;transition:height .5s cubic-bezier(.2,.9,.2,1)}
.bnp-rank{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#7c5cff;border:1px solid var(--line,#e3e6f0);border-radius:999px;padding:2px 8px}
.bnp-hide{display:none!important}

/* ── end-of-lesson card ── */
.bnp-end{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:rgba(15,22,32,.6);padding:18px}
.bnp-end.show{display:grid;animation:bnpf .3s ease}
@keyframes bnpf{from{opacity:0}to{opacity:1}}
.bnp-end .sheet{background:var(--card,#fff);border-radius:20px;max-width:420px;width:100%;padding:22px;text-align:center;
  border:2px solid var(--gold,#E0A21B);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.bnp-end .big{font-size:46px}
.bnp-end h2{margin:6px 0 2px;color:var(--navy,#1f3a5f)}
body[data-bn-profile="studio"] .bnp-end h2{color:#12c2c2}
.bnp-end p{margin:2px 0;color:var(--mut,#6b7188);font-weight:600}
.bnp-end .reward{display:inline-block;margin:10px 0;padding:8px 14px;border-radius:12px;font-weight:800;font-size:13.5px;
  background:rgba(0,0,0,.04);border:1px dashed var(--gold,#E0A21B);color:var(--ink,#22263a)}
.bnp-end .teaser{font-style:italic;font-size:13.5px}
body[data-bn-profile="studio"] .bnp-end .teaser{font-style:normal;letter-spacing:.02em}
.bnp-end button{font:inherit;font-weight:800;font-size:15px;border:none;border-radius:12px;padding:10px 20px;cursor:pointer;
  margin-top:10px;background:var(--gold,#E0A21B);color:#22160a}
body[data-bn-profile="studio"] .bnp-end button{color:#04201f}

/* ── mobile: shrink the living corner so it doesn't crowd the lesson ── */
@media(max-width:560px){
  .bnp-corner{width:132px;right:8px;bottom:8px;padding:7px 9px;border-radius:13px}
  .bnp-corner.min{transform:translateY(calc(100% - 28px))}
  .bnp-corner .bnp-head{font-size:9.5px;letter-spacing:.05em}
  .bnp-corner .bnp-head .bnp-pct{font-size:12px}
  .bnp-forest{height:24px;gap:3px;font-size:16px}
  .bnp-meter{height:24px;gap:3px}
  .bnp-note{font-size:9.5px;margin-top:2px;min-height:12px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bnp-rank{font-size:9px;padding:1px 6px;margin-top:3px}
}
@media(max-width:380px){
  .bnp-corner{width:112px}
  .bnp-forest,.bnp-meter{height:20px;font-size:14px}
}