/* =====================================================================
   DUETTO — Prototype app styles (built on the design-system tokens).
   Layout chrome for the interactive iPad-first prototype: device stage,
   sidebar, per-profile theming, sheet-music viewer, stats charts,
   transitions, splash & screen-map. Components reuse DS classes.
   ===================================================================== */

/* ---------- THEMING ---------- */
/* Default (Evelyn) theme vars. Eleanor overrides the brand tokens so every
   DS component (.btn-primary, avatar rings, tabs, timer…) re-themes purple. */
.app-shell { --t-primary: var(--color-primary); --t-primary-shadow: var(--color-primary-shadow);
  --t-accent: var(--color-evelyn); --t-accent-deep: var(--color-evelyn-deep); --t-accent-soft: var(--color-evelyn-soft);
  --t-cover-a: #E0D6F2; --t-cover-b: #CFC0E8;
  /* ---- global spacing scale (tune here → cascades everywhere) ---- */
  --app-gutter: 44px;       /* outer screen-edge padding (sides) */
  --app-card-gap: 26px;     /* gap between sibling cards */
  --app-section-gap: 38px;  /* vertical rhythm between sections */
  --app-card-pad: 24px;     /* standard inner card padding */
}
.app-shell.dev-phone {
  --app-gutter: 20px;
  --app-card-gap: 18px;
  --app-section-gap: 28px;
  --app-card-pad: 20px;
}

.app-shell[data-theme="eleanor"] {
  --color-primary:        #8E6FD0;
  --color-primary-shadow: #6B51A8;
  --color-evelyn:         var(--color-eleanor);
  --color-evelyn-deep:    var(--color-eleanor-deep);
  --color-evelyn-soft:    var(--color-eleanor-soft);
  --t-primary: #8E6FD0; --t-primary-shadow: #6B51A8;
  --t-accent: var(--color-eleanor); --t-accent-deep: var(--color-eleanor-deep); --t-accent-soft: var(--color-eleanor-soft);
}

/* ---------- PAGE / STAGE ---------- */
html, body { height: 100%; }
body {
  background:
    radial-gradient(1100px 600px at 12% -10%, var(--color-surface-tint), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, var(--color-eleanor-soft), transparent 55%),
    var(--color-cream);
  overflow: hidden;
}
#root { height: 100vh; }

.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
}
/* No size transition in production: a re-fit (rotate, resume, iOS settling its
   viewport) would ANIMATE the canvas to its new size, which reads as the app
   sliding/snapping around. Resizes should be instant. */
.stage-scaler { position: relative; transition: width var(--dur) var(--ease-calm), height var(--dur) var(--ease-calm); }
.stage.fullbleed .stage-scaler { transition: none; }
.stage-scale-inner { position: absolute; top: 0; left: 0; }

/* tiny floating brand tag + screen-map button, top-left of the page */
/* tiny floating brand tag + screen-map button, top-left of the page.
   Stacked vertically — the script font's glyph overhang made a row layout
   prone to visual overlap with the button. */
.stage-chrome {
  position: fixed; top: 14px; left: 22px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.stage-chrome .pg-brand { font-family: var(--font-script); font-size: 30px; color: var(--color-primary); line-height: 1; }
.stage-chrome .pg-brand b { color: var(--color-eleanor-deep); font-weight: 400; }
.map-btn {
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; white-space: nowrap;
  border: 2px solid var(--color-ink); background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer;
  box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--dur-fast) var(--ease-calm);
}
.map-btn:hover { transform: translate(-1px,-1px); }

/* ---------- DEVICE FRAMES ---------- */
.device { position: relative; }

/* iPad landscape */
.device.ipad .bezel {
  width: 1180px; height: 820px;
  background: #2E2230; border-radius: 44px; padding: 16px;
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm),
              0 30px 70px rgba(74,51,68,0.28),
              inset 0 0 0 2px rgba(255,255,255,0.06);
}
.device.ipad .bezel::before { content:""; position:absolute; left:24px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.35); }
.device.ipad .glass { width: 100%; height: 100%; background: var(--color-cream); border-radius: 30px; overflow: hidden; position: relative; }

/* iPhone portrait */
.device.phone .bezel {
  width: 392px; height: 812px;
  background: #2E2230; border-radius: 52px; padding: 13px;
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm),
              0 26px 60px rgba(74,51,68,0.30);
}
.device.phone .glass { width: 100%; height: 100%; background: var(--color-cream); border-radius: 40px; overflow: hidden; position: relative; }
.device.phone .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 28px; background: #2E2230; border-radius: 99px; z-index: 40; }

/* iPad portrait — the phone's single-column layout at the iPad's own aspect */
.device.tablet .bezel {
  width: 820px; height: 1180px;
  background: #2E2230; border-radius: 44px; padding: 16px;
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm),
              0 30px 70px rgba(74,51,68,0.28),
              inset 0 0 0 2px rgba(255,255,255,0.06);
}
.device.tablet .bezel::before { content:""; position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.35); }
.device.tablet .glass { width: 100%; height: 100%; background: var(--color-cream); border-radius: 30px; overflow: hidden; position: relative; }

/* ---------- APP SHELL ---------- */
.app-shell { width: 100%; height: 100%; display: flex; color: var(--color-ink); position: relative; }
.app-shell.dev-phone { flex-direction: column;
  /* Safe-area insets — real env() on device (PWA standalone), with a simulated
     fallback that clears this prototype's notch / home-indicator bands. */
  --safe-top: max(env(safe-area-inset-top), 48px);
  --safe-bottom: max(env(safe-area-inset-bottom), 26px);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

/* screen swap container */
.screen-host { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ===== FLOATING ISLANDS (nav + status) ===== */
.app-shell { position: relative; }

/* bottom nav island — centred, detached, offset shadow.
   Compact height across BOTH devices; iPad gets length + item spacing, not height. */
.nav-island {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 45;
  display: flex; gap: 4px; padding: 6px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.86); backdrop-filter: blur(12px);
  border: 2px solid var(--color-ink); box-shadow: var(--shadow-offset) var(--color-hairline-warm);
}
.dev-phone .nav-island { bottom: calc(var(--safe-bottom) + 8px); }
.ni-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 60px; min-height: 44px; padding: 5px 14px; border-radius: var(--radius-pill);
  border: none; background: transparent; cursor: pointer; color: var(--color-ink-muted);
  font-family: var(--font-ui); font-weight: 800; font-size: 11.5px;
  transition: background var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.ni-item .ni-ico { width: 22px; height: 22px; display: grid; place-items: center; }
.ni-item:hover { color: var(--color-ink); transform: translateY(-1px); }
.ni-item.on { background: var(--t-primary); color: #fff; box-shadow: var(--shadow-offset-sm) var(--t-primary-shadow); }
.dev-phone .ni-item { min-width: 58px; padding: 5px 9px; }

/* iPad/landscape — more presence: breathing room, not span.
   Capped at the middle ~half of the screen, centred with cream gutters.
   (5 nav items → a touch wider cap and tighter per-item padding.) */
.dev-ipad .nav-island { gap: 14px; padding: 7px 22px; max-width: 74%; }
.dev-ipad .ni-item { min-width: 76px; min-height: 46px; padding: 6px 18px; gap: 3px; font-size: 12.5px; }
.dev-ipad .ni-item .ni-ico { width: 23px; height: 23px; }

/* ---------- TOP-RIGHT FLOATING CONTROLS (no bar) ----------
   Two small floating controls — a compact flame+count (→ streak) and the
   profile cat. Each has a subtle backing for legibility over any content,
   and a comfortable ~44px hidden tap zone behind the smaller visual. */
.status-controls {
  position: absolute; top: 14px; right: 18px; z-index: 45;
  display: flex; align-items: center; gap: 10px;
}
.dev-phone .status-controls { top: calc(var(--safe-top) + 8px); right: calc(14px + var(--safe-right)); gap: 9px; }

/* compact flame + count — tappable entry to the Streak screen */
.fc-streak {
  min-width: 44px; min-height: 44px; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-streak);
  background: #FFF1E9; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-calm);
}
.fc-streak:hover { transform: translateY(-1px); box-shadow: var(--shadow-offset) var(--color-streak); }
.fc-streak:active { transform: scale(0.95); }
.fc-flame { font-size: 19px; line-height: 1; }
.fc-n { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-streak-deep); line-height: 1; }

/* profile cat — tappable to open the profile menu */
.fc-ava {
  width: 44px; height: 44px; border: none; padding: 0; cursor: pointer; background: #fff;
  border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--t-accent), var(--shadow-offset-sm) var(--color-hairline-warm);
  transition: transform var(--dur-fast) var(--ease-calm);
}
.fc-ava img { width: 34px; height: 34px; }
.fc-ava:hover { transform: translateY(-1px); }
.dev-phone .fc-streak { min-height: 40px; padding: 0 11px 0 9px; }
.dev-phone .fc-flame { font-size: 17px; }
.dev-phone .fc-n { font-size: 16px; }
.dev-phone .fc-ava { width: 40px; height: 40px; }
.dev-phone .fc-ava img { width: 31px; height: 31px; }

/* spacers so scrolling content clears the floating islands */
.has-islands .scroll { padding-bottom: 82px; padding-top: 8px; }
.dev-phone.has-islands .scroll { padding-bottom: calc(72px + var(--safe-bottom)); padding-top: calc(var(--safe-top) + 6px); }

/* reserve top-right space on island screens so header action buttons
   (Add piece / New lesson) clear the floating controls */
.has-islands .pad > .greet2:first-child { padding-right: 128px; }
.dev-phone.has-islands .pad > .greet2:first-child { padding-right: 104px; }

/* ---------- stacked headers (Library / Lessons): row on iPad, re-stacked on phone ---------- */
.head-stack { display: flex; align-items: center; gap: 18px; }
.head-stack .head-row { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.head-stack .head-text { flex: 1; min-width: 0; }
.head-stack .head-text p { text-wrap: pretty; }
.dev-phone .greet2.head-stack { flex-direction: column; align-items: stretch; gap: 14px; }
/* the full-width button drops below — drop the right reserve on the block, keep it on the text so it clears the floating controls */
.dev-phone.has-islands .pad > .greet2.head-stack:first-child { padding-right: 0; }
.dev-phone .head-stack > :first-child { padding-right: 88px; }
.dev-phone .head-stack .add-btn { width: 100%; justify-content: center; padding: 14px 16px; font-size: 15px; }

/* ---------- content rhythm ---------- */
.pad { padding: 18px var(--app-gutter) 40px; }
.dev-phone .pad { padding: 12px var(--app-gutter) 26px; }
.sec-title { display: flex; align-items: center; justify-content: space-between; margin: var(--app-section-gap) 0 16px; }
.sec-title:first-child { margin-top: 8px; }
.sec-title h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; white-space: nowrap; }
.sec-title .more { font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--t-accent-deep); cursor: pointer; background: none; border: none; }
.dev-phone .sec-title h3 { font-size: 18px; }

/* ---------- greeting block ---------- */
.greet2 { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.greet2 .gimg { width: 64px; height: 76px; flex-shrink: 0; object-fit: contain; object-position: center bottom; }
.greet2 h1 { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.05; white-space: nowrap; }
.greet2 p { color: var(--color-ink-muted); font-size: 16px; margin-top: 4px; }
.dev-phone .greet2 .gimg { width: 54px; height: 54px; }
.dev-phone .greet2 h1 { font-size: 24px; }

/* ---------- shared page header (mascot → title → intro → action) ---------- */
.pagehead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-bottom: 20px; }
.pagehead .ph-cat { height: 78px; width: auto; object-fit: contain; object-position: center bottom; margin-bottom: 4px;
  filter: drop-shadow(2px 3px 0 rgba(74,51,68,0.10)); }
.pagehead .ph-cat-wrap { margin-bottom: 4px; }
.pagehead .ph-title { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.04; }
.pagehead .ph-intro { font-family: var(--font-ui); font-size: 15.5px; color: var(--color-ink-muted); margin-top: 5px;
  max-width: 460px; text-wrap: pretty; }
.pagehead .ph-action { margin-top: 16px; }
/* compact variant — used on every screen so content stays above the fold */
.pagehead.ph-compact { margin-bottom: 16px; gap: 0; }
.pagehead.ph-compact .ph-cat { height: 64px; margin-bottom: 2px; }
.pagehead.ph-compact .ph-title { font-size: 28px; }
.pagehead.ph-compact .ph-intro { font-size: 14.5px; margin-top: 4px; }
.pagehead.ph-compact .ph-action { margin-top: 12px; }
/* phone: same centered stack, a touch tighter; action goes full-width */
.dev-phone .pagehead .ph-cat { height: 58px; }
.dev-phone .pagehead .ph-title { font-size: 25px; }
.dev-phone .pagehead .ph-intro { font-size: 14px; }
.dev-phone .pagehead .ph-action { width: 100%; }
.dev-phone .pagehead .ph-action .btn { width: 100%; justify-content: center; padding: 14px 16px; font-size: 15px; }

/* ---------- dashboard hero (goal + CTA) ---------- */
.hero-row { display: grid; grid-template-columns: 1fr 200px; gap: var(--app-card-gap); margin: var(--app-card-gap) 0 6px; align-items: stretch; }
.dev-phone .hero-row { grid-template-columns: 1fr; }
.cta-card { background: var(--t-primary); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--t-primary-shadow); padding: 26px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.cta-card .cta-k { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.cta-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; margin: 8px 0 4px; line-height: 1.1; }
.cta-card p { font-size: 14.5px; opacity: 0.92; line-height: 1.45; }
.cta-card .cta-go { margin-top: 20px; align-self: flex-start; background: #fff; color: var(--t-primary-shadow);
  font-family: var(--font-display); font-weight: 700; font-size: 21px; border: none; border-radius: 99px; padding: 16px 34px;
  cursor: pointer; box-shadow: var(--shadow-offset) rgba(74,51,68,0.22); display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring); }
.cta-card .cta-go:hover { transform: translateY(-2px) scale(1.02); }

.goal-card { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient); padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.goal-card.goal-tap { cursor: pointer; font: inherit; color: inherit; width: 100%; transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm); }
.goal-card.goal-tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); border-color: var(--t-accent); }
.goal-card .g-edit { color: var(--t-accent-deep); margin-left: 4px; font-size: 11px; opacity: 0.8; }
.dev-phone .goal-card { flex-direction: row; gap: 22px; text-align: left; padding: 20px 22px; justify-content: flex-start; }
.goal-card .lbl { display: flex; flex-direction: column; align-items: center; }
.dev-phone .goal-card .lbl { align-items: flex-start; }
.goal-card .lbl .g-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.goal-card .lbl .g-n { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-ink); margin-top: 3px; white-space: nowrap; }
.goal-card .lbl .g-n small { font-size: 14px; color: var(--color-ink-muted); font-weight: 600; }
.goal-card .lbl .g-s { font-family: var(--font-ui); font-size: 12px; color: var(--t-accent-deep); font-weight: 700; margin-top: 3px; }
.goal-card .gr-compact { position: relative; }

/* favourites */
.fav-heart { font-size: 15px; color: var(--t-accent-deep); line-height: 1; }
.fav-btn.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dev-phone .tiles { grid-template-columns: repeat(2, 1fr); }
.tile { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient); padding: 18px; }
.tile .t-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); display: flex; align-items: center; gap: 7px; }
.tile .t-v { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; margin-top: 10px; color: var(--color-ink); }
.tile .t-v small { font-size: 17px; }
.tile .t-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 6px; }

/* ---------- duo strip ---------- */
.duostrip { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, var(--color-evelyn-soft), var(--color-eleanor-soft));
  border-radius: var(--radius-lg); padding: 14px 18px; border: 1.5px solid #F0DCE6; margin-top: 22px; }
.duostrip img { width: 50px; height: 50px; }
.duostrip .ds-x { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink); font-weight: 600; line-height: 1.45; }
.duostrip .ds-x b { font-weight: 800; }

/* ---------- piece rail + cards ---------- */
.rail2 { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
/* phone: size cards to the viewport so the next card peeks intentionally (no sliced half-card) */
.dev-phone .rail2 { gap: 14px; }
.dev-phone .rail2 .pcard { width: 80%; min-width: 244px; max-width: 290px; }
.rail2::-webkit-scrollbar { height: 8px; }
.rail2::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 99px; }
.pcard { flex: 0 0 auto; width: 210px; background: var(--color-surface); border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient); overflow: hidden; cursor: pointer; scroll-snap-align: start;
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.pcard .pcover { height: 104px; display: flex; align-items: flex-start; justify-content: space-between; padding: 12px; }
.pcover.piano  { background: linear-gradient(135deg, #E0D6F2, #CFC0E8); }
.pcover.violin { background: linear-gradient(135deg, #F6D9E2, #E9C2D2); }
.pcover .inst { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(74,51,68,0.18)); }
.pcard .pbody { padding: 13px 15px 16px; }
.pcard .pbody .pt { font-family: var(--font-display); font-weight: 600; font-size: 17.5px; line-height: 1.2; }
.pcard .pbody .pc { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 2px; }
.pcard .pbody .pm { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

/* ---------- milestones row ---------- */
.mrow { display: flex; gap: 22px; flex-wrap: wrap; }
.dev-phone .mrow { gap: 16px; }

/* ---------- library ---------- */
.lib-search { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 2px solid var(--color-hairline);
  border-radius: 99px; padding: 13px 20px; margin: 8px 0 18px; }
.lib-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 16px; color: var(--color-ink); }
.lib-search input::placeholder { color: var(--color-ink-muted); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.fchip { font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; padding: 9px 16px; border-radius: 99px; white-space: nowrap;
  border: 2px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all var(--dur-fast) var(--ease-calm); }
.fchip.on { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent-deep); }
.fchip .fdiv { width: 1.5px; height: 16px; background: var(--color-hairline); margin: 0 2px; }
/* mobile mastery dropdown (replaces the chips on phone) */
.mfilter-select { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 16px;
  border: 2px solid var(--color-hairline); background: var(--color-surface); border-radius: 99px; }
.mfilter-select.active { border-color: var(--t-accent); background: var(--t-accent-soft); }
.mfilter-select .mfs-ico { color: var(--color-xp, #E9B949); font-size: 15px; }
.mfilter-select.active .mfs-ico { color: var(--t-accent-deep); }
.mfilter-select select { appearance: none; -webkit-appearance: none; border: none; background: transparent; outline: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; color: var(--color-ink); padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7680' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; }
.mfilter-select.active select { color: var(--t-accent-deep); }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dev-phone .lib-grid { grid-template-columns: repeat(2, 1fr); }
.lib-grid .pcard { width: auto; }
.lib-grid .pcover { height: 120px; }

/* ---------- piece detail ---------- */
.pd-head { display: flex; gap: 24px; align-items: stretch; }
.dev-phone .pd-head { flex-direction: column; gap: 16px; }
.pd-cover { width: 220px; height: 220px; flex-shrink: 0; border-radius: var(--radius-xl); border: 2.5px solid var(--color-ink);
  box-shadow: var(--shadow-offset) var(--color-hairline-warm); display: grid; place-items: center; font-size: 76px; }
.dev-phone .pd-cover { width: 100%; height: 150px; }
.pd-info { flex: 1; display: flex; flex-direction: column; }
.pd-info h1 { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; }
.pd-info .pd-comp { font-family: var(--font-ui); font-size: 17px; color: var(--color-ink-muted); margin-top: 4px; }
.pd-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.pd-blurb { font-family: var(--font-ui); font-size: 15.5px; color: var(--color-ink); line-height: 1.55; max-width: 520px; }
.pd-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 20px; }

/* back button */
.backbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--color-ink); background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: 99px;
  padding: 8px 16px 8px 12px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-calm); }
.backbtn:hover { transform: translateX(-2px); }

/* play history */
.histrow { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--color-surface);
  border: 1.5px solid var(--color-hairline); border-radius: var(--radius-md); }
.histrow .h-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.histrow .h-date { font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; flex: 1; }
.histrow .h-min { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--t-accent-deep); }

/* ---------- SHEET MUSIC VIEWER (Soundslice stand-in) ---------- */
.score { background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset) var(--color-hairline-warm); overflow: hidden; }
.score-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1.5px solid var(--color-hairline); background: var(--color-surface-tint); }
.app-shell[data-theme="eleanor"] .score-head { background: var(--color-eleanor-soft); }
.score-head .sh-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; flex: 1; }
.score-head .sh-tag { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-ink-muted); background: var(--color-surface); border: 1.5px solid var(--color-hairline); padding: 4px 10px; border-radius: 99px; }
.score-paper { position: relative; padding: 26px 24px; background:
  repeating-linear-gradient(transparent, transparent 23px, transparent 23px),
  var(--color-surface); overflow: hidden; }
.staff { position: relative; height: 92px; margin-bottom: 26px; }
.staff .lines { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 48px; }
.staff .lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: #C9BBC4; }
.staff .clef { position: absolute; left: 6px; top: 50%; transform: translateY(-58%); font-size: 56px; color: var(--color-ink); font-family: var(--font-ui); line-height: 1; }
.staff .tsig { position: absolute; left: 58px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-ink); text-align: center; line-height: 0.9; }
.staff .barline { position: absolute; top: 50%; transform: translateY(-50%); width: 1.5px; height: 48px; background: #C9BBC4; }
.snote { position: absolute; width: 15px; height: 11px; border-radius: 50%; background: var(--color-ink); transform: translate(-50%, -50%) rotate(-18deg); }
.snote::after { content: ""; position: absolute; right: -1px; top: -22px; width: 1.6px; height: 24px; background: var(--color-ink); }
.snote.up::after { right: 0; top: -22px; }
.playhead { position: absolute; top: 8px; bottom: 8px; width: 3px; background: var(--t-primary); border-radius: 2px;
  box-shadow: 0 0 10px var(--t-primary); transition: left 0.1s linear; z-index: 3; }
.playhead::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--t-primary); }
.score-ctrls { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1.5px solid var(--color-hairline); }
.score-ctrls .play-big { width: 52px; height: 52px; border-radius: 50%; background: var(--t-primary); color: #fff; border: 2.5px solid var(--color-ink);
  box-shadow: var(--shadow-offset-sm) var(--t-primary-shadow); display: grid; place-items: center; font-size: 20px; cursor: pointer; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-calm); }
.score-ctrls .play-big:hover { transform: translate(-1px,-1px); }
.tempo { display: flex; align-items: center; gap: 10px; flex: 1; }
.tempo .seg { display: inline-flex; background: var(--color-cream-deep); border-radius: 99px; padding: 4px; gap: 2px; }
.tempo .seg button { font-family: var(--font-ui); font-weight: 800; font-size: 13px; border: none; background: transparent; color: var(--color-ink-muted);
  padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.tempo .seg button.on { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-ambient); }
.loopbtn { font-family: var(--font-ui); font-weight: 800; font-size: 13px; border: 2px solid var(--color-hairline); background: var(--color-surface);
  color: var(--color-ink-muted); border-radius: 99px; padding: 8px 16px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.loopbtn.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep); }

/* ---------- PRACTICE SESSION ---------- */
.practice { display: flex; flex-direction: column; height: 100%; background:
  radial-gradient(700px 400px at 50% -10%, var(--t-accent-soft), transparent 60%), var(--color-cream); }
.prac-head { display: flex; align-items: center; gap: 14px; padding: 22px 30px 6px; }
.prac-head .ph-grow { flex: 1; }
.dev-phone .prac-head { padding: calc(18px + var(--safe-top, 0px)) 16px 6px; gap: 8px; }
.dev-phone .prac-head .badge { display: none; }
.dev-phone .prac-head > .btn-primary { display: none; }
.prac-body { flex: 1; display: grid; grid-template-columns: 360px 1fr; gap: 24px; padding: 12px 30px 24px; min-height: 0; }
.dev-phone .prac-body { grid-template-columns: 1fr; gap: 16px; overflow-y: auto; padding: 12px 16px 24px; }
.prac-left { display: flex; flex-direction: column; gap: 18px; }
.timer-card { background: var(--color-surface); border: 2.5px solid var(--t-primary); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--t-accent-soft); padding: 24px; text-align: center; }
.timer-card .tc-cat { width: 96px; height: 96px; margin: 0 auto 6px; display: block; }
.dev-phone .timer-card .tc-cat { width: 70px; height: 70px; }
.timer-card .tc-time { font-family: var(--font-display); font-weight: 700; font-size: 66px; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.dev-phone .timer-card .tc-time { font-size: 52px; }
.timer-card .tc-piece { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--color-ink-muted); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.timer-card .tc-ctrls { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.runningdot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); animation: pulse 1.2s ease-in-out infinite; }
.prfx-still .runningdot { animation: none; background: var(--color-ink-muted); }

/* recorder */
.rec-card { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-ambient); padding: 20px; }
/* lesson media items centre their content when the grid stretches them */
.rec-card.media-item { display: flex; flex-direction: column; justify-content: center; }
.rec-card.live { border: 2px solid var(--t-primary); }
.rec-top { display: flex; align-items: center; gap: 14px; }
.rec-btn { width: 56px; height: 56px; border-radius: 50%; border: 2.5px solid var(--color-ink); background: var(--color-primary); color: #fff;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-offset) var(--color-primary-shadow); font-size: 22px; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-calm); }
.rec-btn:hover { transform: translate(-1px,-1px); }
.rec-btn.recording { background: #fff; color: var(--color-primary); }
.rec-btn.recording .rb-sq { width: 18px; height: 18px; border-radius: 4px; background: var(--color-primary); }
.wave2 { flex: 1; display: flex; align-items: center; gap: 3px; height: 48px; }
.wave2 b { flex: 1; background: var(--color-eleanor); border-radius: 99px; min-height: 5px; transition: height 0.18s ease; }
.rec-card.live .wave2 b { background: var(--t-primary); }
.rec-time2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.rec-hint { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 12px; text-align: center; }
.take2 { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-cream); border: 1.5px solid var(--color-hairline); margin-top: 12px; }
.take2 .tk-play { width: 38px; height: 38px; border-radius: 50%; background: var(--t-accent); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.take2 .tk-t { font-family: var(--font-ui); font-weight: 800; font-size: 14px; }
.take2 .tk-s { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); }
.prac-right { display: flex; flex-direction: column; min-height: 0; }

/* iPad: the header owns Finish/Next — the timer card keeps only Pause
   (on phone the header button is hidden, so the card keeps it there) */
.dev-ipad .tc-ctrls .btn-primary { display: none; }

/* ---------- REWARD ---------- */
.reward { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  text-align: center; padding: 40px; overflow-x: hidden; overflow-y: auto; background:
  radial-gradient(800px 500px at 50% 16%, var(--color-surface-tint), transparent 62%),
  radial-gradient(700px 500px at 50% 100%, var(--color-eleanor-soft), transparent 60%),
  var(--color-cream); }
.reward .rw-cats { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 4px; position: relative; z-index: 3; }
.reward .rw-cats img { width: 100px; height: 100px; }
.reward .rw-cats .c1 { animation: bounceCat 1.1s var(--ease-spring) infinite alternate; }
.reward .rw-cats .c2 { animation: bounceCat 1.1s var(--ease-spring) 0.18s infinite alternate; }
@keyframes bounceCat { from { transform: translateY(6px) rotate(-4deg); } to { transform: translateY(-12px) rotate(4deg); } }
.reward h1 { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--color-ink); margin-top: 4px; line-height: 1.05; white-space: nowrap; position: relative; z-index: 3; }
.reward .rw-sub { font-family: var(--font-ui); font-size: 17px; color: var(--color-ink-muted); margin-top: 8px; max-width: 480px; position: relative; z-index: 3; }
.reward .rw-feel { margin-top: 16px; }
.reward .rw-stats { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; justify-content: center; z-index: 3; }
.rw-pill { background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-offset) var(--color-hairline-warm);
  padding: 16px 22px; min-width: 138px; }
.rw-pill .rp-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.rw-pill .rp-v { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-top: 6px; white-space: nowrap; }
.rw-pill.xp .rp-v { color: var(--color-xp-deep); }
.rw-pill.streak .rp-v { color: var(--color-streak-deep); }
.rw-pill.goal .rp-v { color: var(--t-accent-deep); }
.rw-badge { margin-top: 16px; display: inline-flex; align-items: center; gap: 14px; background: var(--color-surface); border: 2.5px solid var(--color-ink);
  border-radius: var(--radius-pill); padding: 12px 24px 12px 12px; box-shadow: var(--shadow-offset) var(--color-xp-deep); z-index: 3;
  animation: badgePop 0.6s var(--ease-spring) both; }
.rw-badge .rb-medal { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE08A, var(--color-xp-gold));
  display: grid; place-items: center; font-size: 26px; border: 2px solid #fff; }
.rw-badge .rb-x .rb-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-xp-deep); }
.rw-badge .rb-x .rb-l { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
@keyframes badgePop { 0% { transform: scale(0.82); } 100% { transform: scale(1); } }
@keyframes scrEnter { from { transform: translateY(10px); } to { transform: none; } }
.reward .rw-done { margin-top: 18px; z-index: 3; }

/* confetti */
.confetti2 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti2 i { position: absolute; top: -24px; font-size: 20px; animation: fall linear forwards; }
@keyframes fall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(900px) rotate(540deg); opacity: 0.9; }
}

/* ---------- LEVEL-UP CELEBRATION ---------- */
.levelup .lu-eyebrow { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-muted); z-index: 3; position: relative; transition: color var(--dur) var(--ease-calm); margin-bottom: 2px; }
.levelup .lu-eyebrow.on { color: var(--color-xp-deep); }
.levelup .lu-eyebrow.milestone { color: var(--color-xp-deep); animation: luEyebrowPop 0.5s var(--ease-spring) both; }
@keyframes luEyebrowPop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* hero badge + sunburst */
.levelup .lu-hero { position: relative; display: grid; place-items: center; margin: 18px 0 6px; z-index: 3; }
.levelup .lu-rays { position: absolute; width: 300px; height: 300px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--color-xp-gold) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 56px, #000 60px, #000 132px, transparent 140px);
          mask: radial-gradient(circle, transparent 56px, #000 60px, #000 132px, transparent 140px); }
.levelup .lu-rays.go { animation: luRaysIn 0.6s var(--ease-spring) forwards, luRaysSpin 14s linear infinite; }
@keyframes luRaysIn { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 0.5; transform: scale(1); } }
@keyframes luRaysSpin { to { transform: rotate(360deg); } }
.levelup .lu-badge { position: relative; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; gap: 0;
  background: radial-gradient(circle at 36% 30%, #FFE9A8, var(--color-xp-gold)); border: 5px solid #fff;
  box-shadow: var(--shadow-offset) var(--color-xp-deep), 0 0 0 2.5px var(--color-xp-deep); }
.levelup .lu-badge.milestone { box-shadow: var(--shadow-offset) var(--color-xp-deep), 0 0 0 2.5px var(--color-xp-deep), 0 0 26px rgba(233,185,73,0.6); }
.levelup .lu-badge.flip { animation: luBadgePop 0.6s var(--ease-spring) both; }
@keyframes luBadgePop { 0% { transform: scale(0.7) rotate(-8deg); } 55% { transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.levelup .lu-badge .lu-k { font-family: var(--font-ui); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-gold); opacity: 0.85; line-height: 1; margin-top: 4px; }
.levelup .lu-badge .lu-num { font-family: var(--font-display); font-weight: 800; font-size: 56px; color: var(--on-gold); line-height: 0.9;
  display: block; opacity: 1; animation: luNumIn 0.5s var(--ease-spring); }
@keyframes luNumIn { 0% { transform: translateY(0.35em) scale(0.55); } 60% { transform: translateY(0) scale(1.1); } 100% { transform: none; } }

/* the XP bar that slides up to the next level */
.levelup .lu-track { display: flex; align-items: center; gap: 14px; width: min(540px, 84%); margin-top: 8px; z-index: 3; }
.levelup .lu-end { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-ink-muted); white-space: nowrap; }
.levelup .lu-end.next { color: var(--color-ink-muted); transition: color var(--dur) var(--ease-calm), transform var(--dur) var(--ease-spring); }
.levelup .lu-end.next.on { color: var(--color-xp-deep); transform: scale(1.12); }
.levelup .lu-bar { position: relative; flex: 1; height: 30px; border-radius: 99px; background: var(--color-cream-deep);
  border: 2.5px solid var(--color-ink); overflow: hidden; box-shadow: inset 0 2px 4px rgba(74,51,68,0.12); }
.levelup .lu-bar .lu-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--color-xp-gold), #FFD36A); transition: width 1.3s cubic-bezier(0.22,0.61,0.36,1); overflow: hidden; }
.levelup .lu-bar .lu-fill.full { box-shadow: 0 0 16px var(--color-xp-gold); }
.levelup .lu-bar .lu-fill .lu-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }
.levelup .lu-bar .lu-fill.full .lu-shine { animation: luShine 0.9s ease-out 0.1s; }
@keyframes luShine { from { left: -40%; } to { left: 140%; } }
.levelup .lu-bar .lu-cap { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 14px; color: var(--color-xp-deep); text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.levelup .lu-medal { box-shadow: var(--shadow-offset) var(--color-xp-deep); }
.levelup .lu-medal .rb-l { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .levelup .lu-rays.go { animation: luRaysIn 0.3s ease both; }
  .levelup .lu-num, .levelup .lu-badge.flip { animation: none; }
}

/* ---------- LESSONS ---------- */
.lesson-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--color-surface);
  border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient); cursor: pointer; margin-bottom: 14px;
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm); }
.lesson-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.lesson-card .lc-date { width: 64px; flex-shrink: 0; text-align: center; }
.lesson-card .lc-date .d { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--t-accent-deep); }
.lesson-card .lc-date .m { font-family: var(--font-ui); font-weight: 800; font-size: 12px; text-transform: uppercase; color: var(--color-ink-muted); letter-spacing: 0.06em; }
.lesson-card .lc-main { flex: 1; min-width: 0; }
.lesson-card .lc-main .lt { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.lesson-card .lc-main .ls { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); margin-top: 3px; }
.lesson-card .lc-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lesson-card .lc-arrow { color: var(--color-ink-muted); font-size: 22px; }
/* phone: tighter date column + smaller chips so the meta row wraps 2-up, never clips */
.dev-phone .lesson-card { gap: 14px; padding: 16px; align-items: flex-start; }
.dev-phone .lesson-card .lc-date { width: 46px; }
.dev-phone .lesson-card .lc-date .d { font-size: 22px; }
.dev-phone .lesson-card .lc-main .lt { font-size: 17px; }
.dev-phone .lesson-card .lc-meta .badge { font-size: 11.5px; padding: 5px 10px; }
.dev-phone .lesson-card .lc-arrow { align-self: center; }

/* ---------- LESSON DETAIL + JOURNAL ---------- */
.lh2 { background: linear-gradient(135deg, var(--t-accent-soft), color-mix(in srgb, var(--t-accent-soft) 70%, #fff)); padding: 24px 30px; }
.dev-phone .lh2 { padding: calc(var(--safe-top) + 10px) var(--app-gutter) 20px; }
/* identity row: avatar + title + edit, sits BELOW the back bar (and below the floating controls on phone) */
.lh2 .lh-id { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.lh2 .lh-idtext { flex: 1; min-width: 0; }
.lh2 .lh-ava { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--t-accent); flex-shrink: 0; }
.lh2 .lh-ava img { width: 44px; height: 44px; }
.lh2 h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; white-space: nowrap; }
.dev-phone .lh2 h1 { white-space: normal; font-size: 22px; line-height: 1.12; }
.lh2 .lh-when { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--t-accent-deep); margin-top: 2px; }
.lh2 .lh-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dev-phone .lh2 .lh-ava { width: 46px; height: 46px; }
.dev-phone .lh2 .lh-ava img { width: 38px; height: 38px; }
.media2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dev-phone .media2 { grid-template-columns: 1fr; }
.vthumb { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.vthumb .vimg { height: 132px; background: linear-gradient(135deg, #D9CBEF, #C2B0E2); display: grid; place-items: center; }
.app-shell[data-theme="evelyn"] .vthumb .vimg { background: linear-gradient(135deg, #F6D9E2, #E9C2D2); }
.vthumb .vplay { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; font-size: 20px; color: var(--t-primary); }
.vthumb .vbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--color-surface); }
.vthumb .vtime { font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.notepill { font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--t-accent-deep); display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }

/* ---------- lesson media: playback + removal ---------- */
.media-item { position: relative; }
/* remove ✕ — small visual, comfortable ~44px hit area via padding */
.media-remove { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-hairline); background: var(--color-surface);
  color: var(--color-ink-muted); font-size: 12px; font-weight: 800; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  position: relative; transition: all var(--dur-fast) var(--ease-calm); }
.media-remove::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.media-remove:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-evelyn-soft); }
.vm-remove { position: absolute; top: 10px; right: 10px; z-index: 3; box-shadow: var(--shadow-ambient); }
/* audio progress */
.tk-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tk-progress .tkp-time { font-family: var(--font-ui); font-weight: 800; font-size: 11px; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.tk-progress .tkp-track { flex: 1; height: 8px; border-radius: 99px; background: var(--color-cream-deep); overflow: hidden; }
.tk-progress .tkp-track i { display: block; height: 100%; border-radius: 99px; background: var(--t-primary); transition: width 0.25s linear; }
.media-item.playing .tk-play { background: var(--t-primary); }
/* video playing state */
.vthumb .vimg { cursor: pointer; position: relative; }
.v-playingnote { font-size: 34px; color: rgba(255,255,255,0.95); animation: vNote 0.9s ease-in-out infinite alternate; }
@keyframes vNote { from { transform: translateY(3px) rotate(-6deg); } to { transform: translateY(-6px) rotate(6deg); } }
.no-motion .v-playingnote { animation: none; }
.vprogress { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: rgba(255,255,255,0.45); }
.vprogress i { display: block; height: 100%; background: var(--t-primary); transition: width 0.25s linear; }
.vbar-toggle { font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--t-accent-deep); background: none; border: none;
  cursor: pointer; padding: 6px 10px; border-radius: 99px; position: relative; }
.vbar-toggle::after { content: ""; position: absolute; inset: -6px; }
.vbar-toggle:hover { background: var(--t-accent-soft); }

/* journal note (themed wrapper around DS .j-note look) */
.jnote { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1.5px solid; margin-bottom: 12px; }
@keyframes noteIn { from { transform: translateY(10px); } to { transform: none; } }
.jnote .jav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; color: #fff; font-family: var(--font-display); font-weight: 700; }
.jnote .jrow { display: flex; align-items: center; gap: 10px; }
.jnote .jauthor { font-family: var(--font-ui); font-weight: 800; font-size: 14.5px; color: var(--color-ink); white-space: nowrap; }
.jnote .jrole { font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.jnote .jbody { font-family: var(--font-ui); font-size: 15px; color: var(--color-ink); line-height: 1.55; margin-top: 6px; }
.jnote .jtime { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); margin-top: 8px; }
.jnote.student { background: #FFF7FA; border-color: #F4D9E3; }
.jnote.student .jav { background: var(--color-primary); }
.jnote.student .jrole { background: var(--color-evelyn-soft); color: var(--color-evelyn-deep); }
.jnote.parent { background: #FFFBF0; border-color: #F0E4C4; }
.jnote.parent .jav { background: var(--color-xp-gold); color: var(--on-gold); }
.jnote.parent .jrole { background: #FBEFCF; color: var(--color-xp-deep); }
.jnote.teacher { background: #F8F6FE; border-color: #E0D8F3; }
.jnote.teacher .jav { background: var(--color-eleanor-deep); }
.jnote.teacher .jrole { background: var(--color-eleanor-soft); color: var(--color-eleanor-deep); }

.addnote-bar { display: flex; gap: 12px; align-items: center; background: var(--color-surface); border: 2px solid var(--color-hairline);
  border-radius: 99px; padding: 8px 8px 8px 20px; margin-top: 8px; cursor: text; }
.addnote-bar .anb-txt { flex: 1; color: var(--color-ink-muted); font-family: var(--font-ui); font-size: 15px; }
.addnote-bar .anb-send { width: 44px; height: 44px; border-radius: 50%; background: var(--t-primary); color: #fff; border: none; display: grid; place-items: center;
  font-size: 17px; cursor: pointer; box-shadow: var(--shadow-offset-sm) var(--t-primary-shadow); flex-shrink: 0; }

/* ---------- ADD NOTE SHEET (modal) ---------- */
.sheet-scrim { position: absolute; inset: 0; background: transparent; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center; }
.dev-ipad .sheet-scrim { align-items: center; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.sheet { background: var(--color-surface); border: 2.5px solid var(--color-ink); width: 100%; max-width: 560px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); padding: 26px 26px 30px;
  max-height: 92%; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--color-hairline) transparent; }
/* native-feeling scrollbar that sits INSIDE the sheet, in the design-system palette */
.sheet::-webkit-scrollbar { width: 10px; }
.sheet::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.sheet::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box; }
.sheet::-webkit-scrollbar-thumb:hover { background: var(--color-hairline-warm); background-clip: content-box; }
.dev-ipad .sheet { border-radius: var(--radius-xl); margin: 0 24px; }
@keyframes sheetUp { from { transform: translateY(40px); } to { transform: none; } }
.sheet .sh-grip { width: 44px; height: 5px; border-radius: 99px; background: var(--color-hairline); margin: 0 auto 18px; }

/* ---------- split sheet: pinned header + scrolling body + pinned footer ---------- */
.sheet.sheet-split { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sheet-split .sh-head { flex: 0 0 auto; padding: 26px 26px 14px; }
.sheet-split .sh-head .sh-grip { margin-bottom: 16px; }
.sheet-split .sh-head .sh-d { margin-bottom: 0; }
.sheet-split .sh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 26px 18px;
  scrollbar-width: thin; scrollbar-color: var(--color-hairline) transparent; }
.sheet-split .sh-body::-webkit-scrollbar { width: 8px; }
.sheet-split .sh-body::-webkit-scrollbar-track { background: transparent; }
.sheet-split .sh-body::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box; }
.sheet-split .sh-body::-webkit-scrollbar-thumb:hover { background: var(--color-hairline-warm); background-clip: content-box; }
.sheet-split .sh-body > .fld-l:first-child { margin-top: 0; }
.sheet-split .sh-actions { flex: 0 0 auto; margin-top: 0; padding: 16px 26px 26px; border-top: 1.5px solid var(--color-hairline); }
/* hairline separators appear only when the body is actually scrolled away from an edge */
.sheet-split .sh-head { border-bottom: 1.5px solid transparent; transition: border-color var(--dur-fast) var(--ease-calm); }
.sheet-split[data-scrolled] .sh-head { border-bottom-color: var(--color-hairline); }
.sheet h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 4px; }
.sheet .sh-d { font-family: var(--font-ui); font-size: 14px; color: var(--color-ink-muted); margin-bottom: 18px; }
.role-pick { display: flex; gap: 10px; margin-bottom: 18px; }
.role-pick .rp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--radius-md);
  border: 2px solid var(--color-hairline); background: var(--color-surface); cursor: pointer; font-family: var(--font-ui); font-weight: 800; font-size: 13.5px;
  color: var(--color-ink-muted); transition: all var(--dur-fast) var(--ease-calm); }
.role-pick .rp .rp-emo { font-size: 24px; }
.role-pick .rp.student.on { border-color: var(--color-primary); background: var(--color-evelyn-soft); color: var(--color-evelyn-deep); }
.role-pick .rp.parent.on { border-color: var(--color-xp-gold); background: #FBEFCF; color: var(--color-xp-deep); }
.role-pick .rp.teacher.on { border-color: var(--color-eleanor-deep); background: var(--color-eleanor-soft); color: var(--color-eleanor-deep); }
.sheet textarea { width: 100%; font-family: var(--font-ui); font-size: 16px; color: var(--color-ink); background: var(--color-surface);
  border: 2px solid var(--color-hairline); border-radius: var(--radius-md); padding: 14px 16px; resize: none; outline: none; line-height: 1.5; }
.sheet textarea:focus { border-color: var(--t-accent); box-shadow: 0 0 0 4px var(--t-accent-soft); }
.sheet .attach-row { display: flex; gap: 10px; margin-top: 14px; }
.attach-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 800; font-size: 13.5px;
  border: 2px dashed var(--color-hairline); background: var(--color-cream); color: var(--color-ink-muted); border-radius: var(--radius-md); padding: 12px; cursor: pointer; }
.attach-btn:hover { border-color: var(--t-accent); color: var(--t-accent-deep); }
.sheet .sh-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }

/* ---------- PROGRESS / STATS ---------- */
.prg-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dev-phone .prg-big { grid-template-columns: 1fr; }
.prg-stat { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient); padding: 20px; }
.prg-stat .ps-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.prg-stat .ps-v { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; margin-top: 10px; }
.prg-stat .ps-v small { font-size: 20px; }
.prg-stat .ps-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 6px; }

.chart-card { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-ambient); padding: 24px; }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 10px; }
.bars .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars .bcol .bar { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--t-accent), var(--t-accent-deep));
  min-height: 4px; position: relative; transition: height 0.6s var(--ease-spring); }
.bars .bcol.zero .bar { background: var(--color-cream-deep); }
.bars .bcol .bv { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--color-ink); }
.bars .bcol .bd { font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--color-ink-muted); }

/* ---------- PROGRESS v2: coherent stat-card grid ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dev-phone .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient); padding: 16px 18px; display: flex; flex-direction: column; }
.stat-card .sc-k { display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 800; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-muted); }
.stat-card .sc-ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center;
  background: var(--t-accent-soft); color: var(--t-accent-deep); }
.stat-card .sc-v { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; margin-top: 12px; color: var(--color-ink); }
.stat-card .sc-v small { font-size: 17px; color: var(--color-ink-muted); font-weight: 700; }
.stat-card .sc-s { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); margin-top: 6px; }
.stat-card.sc-xp { background: var(--color-xp-soft, #FFF7E2); border-color: var(--color-xp, #E9B949); }
.stat-card.sc-xp .sc-ic { background: var(--color-xp, #E9B949); color: #fff; }

/* "View all" arrow link (replaces the bare count) */
.more-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--t-accent-deep); padding: 4px 2px; }
.more-link:hover { text-decoration: underline; }
.more-link .ml-count { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--t-accent-deep);
  background: var(--t-accent-soft); border-radius: 99px; padding: 2px 9px; }

/* ---------- this-week chart v2 (goal line, today, goal-hit) ---------- */
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.chart-legend .cl-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--color-ink-muted); }
.chart-legend .cl-swatch { width: 14px; height: 14px; border-radius: 5px; }
.chart-legend .cl-swatch.hit { background: linear-gradient(180deg, var(--t-accent), var(--t-accent-deep)); }
.chart-legend .cl-swatch.miss { background: var(--t-accent-soft); border: 1.5px solid var(--color-hairline); }
.chart-legend .cl-goal { width: 16px; height: 0; border-top: 2.5px dashed var(--color-ink-muted); }
.chart-plot { position: relative; display: flex; align-items: flex-end; gap: 14px; height: 168px; }
.dev-phone .chart-plot { gap: 8px; height: 150px; }
.goal-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2.5px dashed var(--color-ink-muted); opacity: 0.7; z-index: 2; pointer-events: none; }
.goal-line .goal-tag { position: absolute; right: 0; top: -9px; font-family: var(--font-ui); font-weight: 800; font-size: 10px;
  color: var(--color-ink); background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: 99px; padding: 1px 8px; }
.bcol2 { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bcol2 .bv2 { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--color-ink); margin-bottom: 5px; }
.bcol2 .b-star { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -2px; font-size: 17px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(233,185,73,0.6)); z-index: 3; }
.bar2 { width: 100%; max-width: 46px; min-height: 4px; border-radius: 10px 10px 4px 4px; position: relative;
  transition: height 0.6s var(--ease-spring); }
.bar2.hit { background: linear-gradient(180deg, var(--t-accent), var(--t-accent-deep)); box-shadow: var(--shadow-offset-sm) var(--t-accent-deep); }
.bar2.miss { background: var(--t-accent-soft); border: 1.5px solid var(--color-hairline); }
.bar2.zero { background: var(--color-cream-deep); }
.bcol2.today .bar2 { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.chart-days { display: flex; gap: 14px; margin-top: 10px; }
.dev-phone .chart-days { gap: 8px; }
.chart-days .cd { flex: 1; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--color-ink-muted); }
.chart-days .cd.today { color: var(--t-accent-deep); }

/* ---------- achievements teaser (icon row, no card bg) ---------- */
.ach-teaser { margin-top: 2px; }
.ach-row { display: flex; flex-wrap: wrap; gap: 14px; }
.dev-phone .ach-row { gap: 11px; }
.ach-coin { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font-size: 28px; border: 2.5px solid var(--color-ink); position: relative; padding: 0;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-calm); }
.dev-phone .ach-coin { width: 52px; height: 52px; font-size: 24px; }
.ach-coin.earned { background: radial-gradient(circle at 35% 30%, #FFE08A, var(--color-xp-gold)); box-shadow: var(--shadow-offset-sm) var(--color-xp-deep); }
.ach-coin.locked { background: var(--color-cream-deep); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.ach-coin.locked .ach-coin-ic { opacity: 0.55; }
.ach-coin:hover { transform: translateY(-3px) scale(1.04); }
.ach-coin:active { transform: translateY(0) scale(0.97); }
.ach-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; padding: 6px 12px; border-radius: 99px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--t-accent-deep);
  background: var(--t-accent-soft); }

/* ---------- achievement detail popover ---------- */
.ach-pop { background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); width: min(380px, 90%); padding: 28px 26px; text-align: center;
  animation: sheetUp var(--dur) var(--ease-spring) both; }
.ach-pop-medal { width: 86px; height: 86px; margin: 0 auto 14px; border-radius: 28px; display: grid; place-items: center; font-size: 42px; border: 3px solid #fff; }
.ach-pop-medal.earned { background: radial-gradient(circle at 35% 30%, #FFE08A, var(--color-xp-gold)); box-shadow: var(--shadow-offset) var(--color-xp-deep); }
.ach-pop-medal.locked { background: var(--color-cream-deep); box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.ach-pop h2 { font-family: var(--font-display); font-weight: 700; font-size: 23px; }
.ach-pop-desc { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted); line-height: 1.5; margin-top: 6px; text-wrap: pretty; }
.ach-pop-status { font-family: var(--font-ui); font-weight: 800; font-size: 13px; margin-top: 14px; }
.ach-pop-status.earned { color: var(--color-success-deep, #3E8E5A); }
.ach-pop-status.locked { color: var(--color-ink-muted); }
.ach-prog { margin-top: 16px; }
.ach-prog-track { height: 12px; border-radius: 99px; background: var(--color-cream-deep); overflow: hidden; }
.ach-prog-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-xp-gold), #FFD36A); transition: width 0.6s var(--ease-spring); }
.ach-prog-n { font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--color-xp-deep); margin-top: 7px; }

/* ---------- achievements page (full collection) ---------- */
.ach-list { display: flex; flex-direction: column; gap: 12px; }
.ach-item { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient); padding: 16px 18px; }
.ach-item.locked { background: var(--color-cream); }
.ach-item-medal { width: 58px; height: 58px; flex-shrink: 0; border-radius: 20px; display: grid; place-items: center; font-size: 30px; border: 3px solid #fff; }
.ach-item-medal.earned { background: radial-gradient(circle at 35% 30%, #FFE08A, var(--color-xp-gold)); box-shadow: var(--shadow-offset-sm) var(--color-xp-deep); }
.ach-item-medal.locked { background: var(--color-cream-deep); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.ach-item-medal.locked { opacity: 0.85; }
.ach-item-x { flex: 1; min-width: 0; }
.ach-item-t { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-ink); }
.ach-item.locked .ach-item-t { color: var(--color-ink-muted); }
.ach-item-d { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 2px; line-height: 1.4; text-wrap: pretty; }
.ach-item-when { font-family: var(--font-ui); font-weight: 800; font-size: 12px; margin-top: 8px; }
.ach-item-when.earned { color: var(--color-success-deep, #3E8E5A); }
.ach-item-when.locked { color: var(--color-ink-muted); }
.ach-item-prog { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ach-item-prog .ach-prog-track { flex: 1; margin: 0; }
.ach-item-prog .ach-prog-n { margin-top: 0; white-space: nowrap; }

/* streak calendar — month view */
.mcal-card { padding: 22px 24px; }
.mcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mcal-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-ink); white-space: nowrap; }
.dev-phone .mcal-title { font-size: 19px; }
.mcal-nav { display: flex; align-items: center; gap: 8px; }
.mcal-arrow { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-hairline); background: var(--color-surface);
  display: grid; place-items: center; cursor: pointer; color: var(--color-ink); transition: all var(--dur-fast) var(--ease-calm); }
.mcal-arrow:hover { border-color: var(--t-accent); color: var(--t-accent-deep); transform: translateY(-1px); }
.mcal-today { font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--t-accent-deep);
  background: var(--t-accent-soft); border: 1.5px solid var(--t-accent); border-radius: 99px; padding: 8px 14px; cursor: pointer; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.dev-phone .mcal-grid { gap: 5px; }
.mcal-dow { margin-bottom: 8px; }
.mcal-wd { text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-ink-muted); padding-bottom: 2px; }
.dev-phone .mcal-wd { font-size: 10px; }
.mcal-cell { position: relative; aspect-ratio: 1; min-height: 54px; max-height: 96px; border-radius: 13px; border: none; padding: 0;
  background: var(--color-cream-deep); cursor: default; font-family: inherit; overflow: visible;
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm); }
.dev-phone .mcal-cell { min-height: 40px; border-radius: 9px; }
.mcal-cell.blank { background: transparent; }
.mcal-num { position: relative; z-index: 2; display: block; padding: 6px 0 0 8px; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--color-ink-muted); }
.dev-phone .mcal-num { padding: 4px 0 0 5px; font-size: 10.5px; }
.mcal-mark { position: absolute; z-index: 2; }
.mcal-mark { position: absolute; bottom: 5px; right: 6px; font-size: 13px; line-height: 1; }
.mcal-cell.today .mcal-mark { font-size: 16px; bottom: 6px; right: 7px; filter: drop-shadow(0 1px 2px rgba(168,80,40,0.5)); }
.dev-phone .mcal-mark { font-size: 10px; bottom: 3px; right: 4px; }
.dev-phone .mcal-cell.today .mcal-mark { font-size: 12px; bottom: 4px; right: 4px; }
/* status fills */
.mcal-cell.on { background: var(--color-streak); --ribbon: var(--color-streak); }
.mcal-cell.on .mcal-num { color: var(--color-streak-deep); }
.mcal-cell.rest { background: var(--color-eleanor-soft); --ribbon: var(--color-eleanor-soft); }
.mcal-cell.rest .mcal-num { color: var(--color-eleanor-deep); }
.mcal-cell.off { background: var(--color-cream-deep); }
.mcal-cell.today { background: var(--color-streak); --ribbon: var(--color-streak); box-shadow: inset 0 0 0 3px var(--color-streak-deep); }
.mcal-cell.today .mcal-num { color: var(--color-streak-deep); font-weight: 800; }
.mcal-cell.future { background: var(--color-surface); border: 1.5px dashed var(--color-hairline); }
.mcal-cell.future .mcal-num { color: var(--color-hairline-warm); }
.mcal-cell.clickable { cursor: pointer; }
.mcal-cell.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }

/* ---- connected streak ribbon: consecutive streak-safe days link up ---- */
.mcal-cell.link-r::after, .mcal-cell.link-l::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  height: 42%; background: var(--ribbon); z-index: 0; pointer-events: none; }
.mcal-cell.link-r::after { right: -9px; width: 12px; }
.mcal-cell.link-l::before { left: -9px; width: 12px; }
.dev-phone .mcal-cell.link-r::after { right: -6px; width: 9px; }
.dev-phone .mcal-cell.link-l::before { left: -6px; width: 9px; }
.mcal-cell.link-r { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.mcal-cell.link-l { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cal-legend { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); font-weight: 700; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; }
.cal-legend i.lg-future { background: var(--color-surface); border: 1.5px dashed var(--color-hairline); }

/* ===== PROFILE MENU (avatar popover) ===== */
.pm-scrim { position: absolute; inset: 0; z-index: 60; }
.profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 61; width: 248px;
  background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); padding: 10px; overflow: hidden;
  animation: pmIn var(--dur-fast) var(--ease-spring) both;
}
@keyframes pmIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1.5px solid var(--color-hairline); margin-bottom: 6px; }
.pm-ava { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--t-accent); flex-shrink: 0; }
.pm-ava img { width: 40px; height: 40px; }
.pm-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.pm-meta { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); }
.pm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border: none; background: transparent;
  border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--color-ink); text-align: left; }
.pm-item:hover { background: var(--t-accent-soft); color: var(--t-accent-deep); }
.pm-item svg { color: var(--color-ink-muted); }
.pm-item:hover svg { color: var(--t-accent-deep); }

/* ===== EDIT PROFILE SCREEN ===== */
.editprofile { background:
  radial-gradient(700px 360px at 50% -8%, var(--color-surface-tint), transparent 60%), var(--color-cream); }
.ep-head { position: relative; padding: 30px 30px 6px; display: flex; align-items: center; gap: 16px; }
.ep-head .streak-back { position: static; flex-shrink: 0; }
.ep-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; white-space: nowrap; flex: 1; }
.dev-phone .ep-head { padding: 30px 16px 6px; }
.dev-phone .ep-head h1 { font-size: 24px; }
.ep-body { max-width: none; }
.ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; align-items: start; }
.dev-phone .ep-grid { grid-template-columns: 1fr; gap: 0; }
.ep-col { min-width: 0; }
.ep-identity { grid-column: 1 / -1; }
.ep-identity { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-xl);
  border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset) var(--color-hairline-warm); margin-bottom: 18px; }
.ep-identity .ep-lock { margin-left: auto; font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--color-ink-muted);
  background: rgba(255,255,255,0.7); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-pill); padding: 6px 12px; white-space: nowrap; }
.dev-phone .ep-identity .ep-lock { display: none; }
.ep-identity.evelyn { background: linear-gradient(120deg, #FFF, var(--color-evelyn-soft)); }
.ep-identity.eleanor { background: linear-gradient(120deg, #FFF, var(--color-eleanor-soft)); }
.ep-ava { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ep-identity.evelyn .ep-ava { box-shadow: 0 0 0 4px var(--color-evelyn); }
.ep-identity.eleanor .ep-ava { box-shadow: 0 0 0 4px var(--color-eleanor); }
.ep-ava img { width: 54px; height: 54px; }
.ep-cat { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ep-cat-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 2px; }
.inst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dev-phone .inst-grid { grid-template-columns: repeat(2, 1fr); }
.inst-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-radius: var(--radius-md);
  border: 2px solid var(--color-hairline); background: var(--color-surface); cursor: pointer; font-family: var(--font-ui); font-weight: 800;
  font-size: 15px; color: var(--color-ink-muted); transition: all var(--dur-fast) var(--ease-calm); }
.inst-chip .ic-emo { font-size: 22px; }
.inst-chip:hover { border-color: var(--t-accent); }
.inst-chip.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep); }
.inst-chip .ic-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--t-primary); color: #fff; display: grid; place-items: center; }
.ep-note { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 10px; line-height: 1.5;
  background: var(--color-surface-tint); border-radius: var(--radius-md); padding: 11px 14px; }
.app-shell[data-theme="eleanor"] .ep-note { background: var(--color-eleanor-soft); }
.ep-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 26px; }
.goal-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.goal-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; min-height: 60px;
  padding: 10px 8px; border-radius: var(--radius-md); border: 2px solid var(--color-hairline); background: var(--color-surface);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-calm); }
.goal-opt .go-n { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-ink); line-height: 1; }
.goal-opt .go-u { font-family: var(--font-ui); font-weight: 700; font-size: 11px; color: var(--color-ink-muted); }
.goal-opt:hover { border-color: var(--t-accent); }
.goal-opt.on { border-color: var(--t-accent); background: var(--t-accent-soft); }
.goal-opt.on .go-n { color: var(--t-accent-deep); }
.goal-opt.on .go-u { color: var(--t-accent-deep); }
.seg2.seg-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== DEDICATED STREAK SCREEN ===== */
.streak-screen { background:
  radial-gradient(800px 420px at 50% -8%, #FFE6D6, transparent 60%),
  radial-gradient(700px 460px at 50% 100%, var(--color-eleanor-soft), transparent 58%),
  var(--color-cream); }
.streak-screen { background:
  radial-gradient(700px 460px at 50% 100%, var(--color-eleanor-soft), transparent 58%),
  var(--color-cream); }
.streak-screen .streak-body { padding-top: calc(20px + var(--safe-top, 0px)); }
.streak-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-ink); background: var(--color-surface);
  border: 2px solid var(--color-ink); border-radius: 99px; padding: 9px 18px 9px 14px; cursor: pointer; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.streak-back:hover { transform: translateX(-2px); }

/* streak banner header (Duetto-flavoured 'streak society' energy) */
.streak-banner { position: relative; overflow: hidden; text-align: center; border-radius: var(--radius-xl);
  border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm);
  padding: 26px 30px 28px; margin-bottom: 8px;
  background: linear-gradient(160deg, #FFF, var(--color-evelyn-soft) 120%); }
.streak-banner.eleanor { background: linear-gradient(160deg, #FFF, var(--color-eleanor-soft) 120%); }
.streak-banner .sb-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 50% -20%, rgba(255,255,255,0.7), transparent 70%); }
.streak-flamewrap { display: inline-flex; align-items: flex-end; gap: 6px; position: relative; z-index: 1; }
.streak-flame { position: relative; display: grid; place-items: center; width: 118px; height: 118px; }
.streak-flame .sf-glyph { font-size: 100px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(232,123,74,0.4)); }
.streak-flame .sf-count { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: 40px; color: #fff; text-shadow: 0 2px 6px rgba(168,80,40,0.55); }
.streak-cat { width: 72px; height: 72px; margin-bottom: 8px; transform: rotate(6deg); filter: drop-shadow(2px 4px 0 rgba(74,51,68,0.1)); }
.streak-big { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--color-ink); margin-top: 4px; line-height: 1.05; position: relative; z-index: 1; }
.dev-phone .streak-big { font-size: 28px; }
.streak-sub { font-family: var(--font-ui); font-size: 15.5px; color: var(--color-ink-muted); margin-top: 8px; max-width: 440px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }

.rest-line { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--color-ink-muted);
  margin-top: 12px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .streak-flame .sf-glyph { animation: flameFlick 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes flameFlick { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } }

/* badges grid */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dev-phone .badge-grid { grid-template-columns: repeat(2, 1fr); }
.bcard { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient);
  padding: 20px 16px; text-align: center; }
.bcard .bm { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; margin: 0 auto 12px; border: 3px solid #fff; }
.bcard.earned .bm { background: radial-gradient(circle at 35% 30%, #FFE08A, var(--color-xp-gold)); box-shadow: var(--shadow-offset-sm) var(--color-xp-deep); }
.bcard.locked .bm { background: var(--color-cream-deep); filter: grayscale(1); opacity: 0.6; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.bcard .bt { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.bcard .bs { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); margin-top: 4px; }
.bcard.locked .bt { color: var(--color-ink-muted); }

/* per-girl breakdown */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dev-phone .split { grid-template-columns: 1fr; }
.gcard { border-radius: var(--radius-xl); padding: 22px; border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.gcard.evelyn { background: linear-gradient(160deg, #FFF, var(--color-evelyn-soft)); }
.gcard.eleanor { background: linear-gradient(160deg, #FFF, var(--color-eleanor-soft)); }
.gcard .gc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gcard .gc-ava { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.gcard.evelyn .gc-ava { box-shadow: 0 0 0 3px var(--color-evelyn); }
.gcard.eleanor .gc-ava { box-shadow: 0 0 0 3px var(--color-eleanor); }
.gcard .gc-ava img { width: 44px; height: 44px; }
.gcard .gc-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.gcard .gc-sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); }
.gcard .gc-stats { display: flex; gap: 20px; }
.gcard .gc-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.gcard.evelyn .gc-stat .v { color: var(--color-evelyn-deep); }
.gcard.eleanor .gc-stat .v { color: var(--color-eleanor-deep); }
.gcard .gc-stat .k { font-family: var(--font-ui); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); margin-top: 2px; }

/* ---------- MASTERY STARS ---------- */
.mastery { display: inline-flex; gap: 2px; align-items: center; }
.mastery .mstar { color: var(--color-cream-deep); font-size: 16px; line-height: 1; }
.mastery .mstar.on { color: var(--color-xp-gold); }
.mastery.m-sm .mstar { font-size: 12px; }
.mastery.m-lg .mstar { font-size: 24px; }

/* soft grade chip — keeps the AMEB value but reads less jargony */
.grade-chip { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-muted);
  border: 1.5px solid var(--color-hairline); white-space: nowrap; }
.grade-chip.soft { background: rgba(255,255,255,0.82); color: var(--t-accent-deep); border-color: transparent; box-shadow: var(--shadow-ambient); }

/* ---------- JOURNEY PATH (Home) ---------- */
.sec-title .jt-sub { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--color-ink-muted); white-space: nowrap; }
.journey { position: relative; margin-top: 6px; }
.jchapter { display: flex; gap: 16px; }
@keyframes jIn { from { transform: translateY(12px); } to { transform: none; } }
.jc-rail { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
.jc-flag { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
  background: var(--color-surface); border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); z-index: 2; }
.jchapter.current .jc-flag { background: var(--t-accent-soft); box-shadow: var(--shadow-offset-sm) var(--t-accent); }
.jc-line { flex: 1; width: 4px; min-height: 28px; background: repeating-linear-gradient(var(--color-hairline) 0 7px, transparent 7px 14px); margin: 4px 0; border-radius: 4px; }
/* between-LESSON gap (large) — makes each lesson read as its own group */
.jc-body { flex: 1; min-width: 0; padding-bottom: var(--app-section-gap); }
.jchapter:last-child .jc-body { padding-bottom: 12px; }
.jc-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-ambient);
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm); }
.jc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.jchapter.current .jc-card { border-color: var(--t-accent); background: var(--t-accent-soft); }
.jc-card-main { flex: 1; min-width: 0; }
.jc-here { display: inline-block; font-family: var(--font-ui); font-weight: 800; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--t-primary); padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 6px; }
.jc-date { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-ink); }
.jc-focus { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); margin-top: 3px; }
.jc-chev { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-cream); color: var(--color-ink-muted); }
.jchapter.current .jc-chev { background: rgba(255,255,255,0.65); color: var(--t-accent-deep); }
/* within-LESSON gap (small) + left indent — pieces are children of the lesson */
.jc-nodes { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; position: relative; }
.dev-phone .jc-nodes { padding-left: 16px; }
/* little elbow connector tying the indented pieces back to their lesson */
.jc-nodes::before { content: ""; position: absolute; left: 10px; top: -4px; bottom: 14px; width: 2px;
  background: var(--color-hairline); border-radius: 2px; }
.dev-phone .jc-nodes::before { left: 7px; }
.jnode-pill { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1.5px solid var(--color-hairline); cursor: pointer; text-align: left; width: 100%;
  box-shadow: var(--shadow-ambient); transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm); }
.jnode-pill:hover { transform: translateX(3px); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.jnode-pill.done { border-color: var(--color-success); }
.jnode-pill.active { border-color: var(--t-primary); background: var(--t-accent-soft); }
.jnode-pill .jn-emo { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
.jnode-pill .jn-t { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jnode-pill .jn-check, .jnode-pill .jn-go { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.jnode-pill .jn-check { background: var(--color-success); }
.jnode-pill .jn-go { background: var(--t-primary); }
.journey-start { display: flex; align-items: center; gap: 10px; padding: 8px 0 0 4px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--color-ink-muted); }
.journey-start .js-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--color-surface); border: 2px dashed var(--color-hairline); }

/* ============================================================
   PATH HOME (experimental Duolingo-style winding path)
   ============================================================ */
.path-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.path-greet { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* the greeting mascot is a tall portrait illustration (cat at the instrument),
   so give it a portrait box — a square one shrinks it to nothing */
.path-greet .path-cat { width: 72px; height: 90px; object-fit: contain; object-position: center bottom; flex-shrink: 0; }
.path-greet h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.04; }
.path-greet p { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted); margin-top: 3px; text-wrap: pretty; }
.dev-phone .path-greet h1 { font-size: 24px; }
.dev-phone .path-greet .path-cat { width: 58px; height: 72px; }
.app-shell.dev-tablet .path-greet .path-cat { width: 78px; height: 96px; }

.path-stats { display: flex; gap: 10px; flex-shrink: 0; }
.has-islands .path-top { padding-right: 120px; }
.dev-phone.has-islands .path-top { padding-right: 0; }
.pstat { display: flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; cursor: pointer;
  background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-ambient); transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm); }
.pstat:hover { transform: translateY(-2px); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); border-color: var(--t-accent); }
.pstat .pstat-ic { font-size: 22px; line-height: 1; }
.pstat .pstat-ring { width: 44px; height: 44px; flex-shrink: 0; }
.pstat .pstat-v { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-ink); line-height: 1; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; }
.pstat .pstat-v small { font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--color-ink-muted); margin-top: 2px; }

/* left card repurposed as the "practise something else" CTA */
.pstat.cta { background: var(--t-accent-soft); border-color: var(--t-accent); }
.pstat.cta:hover { background: var(--t-accent-soft); border-color: var(--t-accent-deep); }
.pstat.cta .pstat-cta-x { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.pstat.cta .pstat-cta-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--t-accent-deep); }
.pstat.cta .pstat-cta-s { font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; color: var(--color-ink-muted); margin-top: 2px; }
.dev-phone .pstat.cta .pstat-cta-t { font-size: 14px; }

/* the path itself — extra top room so the hero "Start" bubble clears the sticky banner */
/* the journey is ONE centred column: lesson bars + node lane share a centred
   max-width with balanced margins. The column is narrower than the page so it
   clears the floating top-right controls on the right while staying centred. */
.duo-path { position: relative; margin: 18px auto 0; width: 100%; max-width: var(--journey-col, 720px); }
.duo-unit { position: relative; }
.duo-unit-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  margin: 0 auto; padding: 11px 16px; border-radius: var(--radius-lg);
  background: var(--color-surface); border: 2px solid var(--color-hairline); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm);
  transition: box-shadow var(--dur-fast) var(--ease-calm); }
/* phone: no room for bar + controls side by side — keep the bar full-width but,
   when it pins, drop it below the stacked controls instead of beside them. */
.dev-phone .duo-unit-head { top: calc(var(--safe-top) + 50px); }
.duo-unit.current .duo-unit-head { border-color: var(--t-accent); background: var(--t-accent-soft); }
.duo-unit-head .duh-flag { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--color-cream); border: 2px solid var(--color-ink); transition: width var(--dur-fast) var(--ease-calm), height var(--dur-fast) var(--ease-calm), font-size var(--dur-fast) var(--ease-calm); }
.duo-unit.current .duo-unit-head .duh-flag { background: #fff; }
.duo-unit-head .duh-text { flex: 1; min-width: 0; }
.duo-unit-head .duh-date { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-ink); line-height: 1.1; }
.duo-unit-head .duh-focus { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: 20px; opacity: 1; transition: opacity var(--dur-fast) var(--ease-calm); }
/* condensed state once pinned: drop the focus subline + shrink the flag/padding to a slim bar */
.duo-unit-head[data-stuck] { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 6px 16px -8px rgba(74,51,68,0.32); }
.duo-unit-head[data-stuck] .duh-focus { max-height: 0; opacity: 0; margin-top: 0; }
.duo-unit-head[data-stuck] .duh-flag { width: 28px; height: 28px; font-size: 15px; }
.duo-unit-head[data-stuck] .duh-date { font-size: 15px; }
.duo-unit-head .duh-open { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--t-accent-deep);
  background: rgba(255,255,255,0.6); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-pill);
  padding: 7px 10px 7px 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-calm); }
.duo-unit-head .duh-open:hover { border-color: var(--t-accent); transform: translateY(-1px); }

/* node field */
.duo-nodes { position: relative; width: var(--lane); max-width: 100%; margin: 10px auto 22px; }
.duo-unit.current .duo-nodes { margin-top: 74px; }
.dev-phone .duo-unit.current .duo-nodes { margin-top: 66px; }
.duo-trail { position: absolute; left: 50%; top: 0; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.duo-seg { fill: none; stroke: var(--color-hairline); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 2 16; }
.duo-seg.done { stroke: var(--color-success); stroke-dasharray: none; opacity: 0.55; }

/* lane is centered and exactly --lane wide; node x positions (set inline) are in lane coordinates */
.duo-node-wrap { position: absolute; transform: translateX(-50%); display: block; }
.duo-node { position: relative; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--color-surface); border: 3px solid var(--color-ink); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-calm); }
.duo-node:hover { transform: translateY(-3px); }
.duo-node:active { transform: translateY(1px); box-shadow: var(--shadow-ambient); }
.duo-node .duo-node-ic { font-size: 34px; line-height: 1; filter: saturate(0.9); }
.dev-phone .duo-node .duo-node-ic { font-size: 28px; }

/* decorative-only note accents — one consistent family, meaning-free */
.duo-deco { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.duo-deco .dd { position: absolute; font-family: var(--font-ui); color: var(--t-accent-deep); opacity: 0.78;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7); line-height: 1; }
.duo-deco .dd.n1 { top: -7px; right: -4px; font-size: 17px; transform: rotate(12deg); }
.duo-deco .dd.n2 { top: 8px; right: -13px; font-size: 14px; transform: rotate(-8deg); opacity: 0.62; }
.duo-deco .dd.sp { top: -8px; right: -6px; font-size: 15px; color: var(--color-xp-gold, #E9B949); opacity: 0.92; }
.dev-phone .duo-deco .dd.n1 { font-size: 14px; }
.dev-phone .duo-deco .dd.n2 { font-size: 12px; }
.duo-node.hero .duo-deco .dd.n1 { top: -9px; right: 2px; font-size: 20px; }
.duo-node.hero .duo-deco .dd.sp { top: -10px; right: 0; font-size: 18px; }
.duo-node.done { background: var(--color-success-soft, #E4F3E8); border-color: var(--color-success-deep, #3E8E5A); box-shadow: var(--shadow-offset-sm) var(--color-success-deep, #3E8E5A); }
.duo-node.hero .duo-node-ic { font-size: 50px; }
.dev-phone .duo-node.hero .duo-node-ic { font-size: 42px; }
.duo-node.hero { background: var(--t-primary); border-color: var(--color-ink); box-shadow: var(--shadow-offset) var(--t-primary-shadow); }

/* status badges on a node corner */
.duo-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: 2.5px solid var(--color-surface); }
.dev-phone .duo-badge { width: 24px; height: 24px; }
.duo-badge.check { background: var(--color-success-deep, #3E8E5A); }
.duo-badge.go { background: var(--color-ink); }
.duo-node.hero .duo-badge.go { right: 2px; bottom: 2px; width: 34px; height: 34px; background: #fff; color: var(--t-primary-shadow); border-color: var(--color-ink); }

/* node title — kept on every node (icon is decoration, not identity) */
.duo-node-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px;
  width: max-content; max-width: 150px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--color-ink); line-height: 1.15; text-wrap: pretty; }
.dev-phone .duo-node-label { font-size: 12.5px; max-width: 116px; }
.duo-node-wrap:has(.duo-node.hero) .duo-node-label { font-size: 16px; font-weight: 700; margin-top: 9px; max-width: 200px; white-space: nowrap; }

/* "Start" bubble above the dominant daily node */
.duo-start-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--t-primary-shadow); white-space: nowrap;
  background: #fff; border: 2.5px solid var(--color-ink); border-radius: var(--radius-pill); padding: 7px 18px;
  box-shadow: var(--shadow-offset-sm) var(--t-primary-shadow); z-index: 3; }
.duo-start-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-3px) rotate(45deg);
  width: 12px; height: 12px; background: #fff; border-right: 2.5px solid var(--color-ink); border-bottom: 2.5px solid var(--color-ink); }

/* daily-goal sheet: parent-gated chip + roomy goal options */
.dgs-lock { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-ink-muted); background: var(--color-cream-deep); border-radius: var(--radius-pill); padding: 4px 11px; margin-bottom: 10px; }
.dgs-pick { margin-top: 6px; }

/* gentle pulse ring on the dominant node (the daily action) */
.duo-node.hero::before { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid var(--t-primary); opacity: 0; animation: duoPulse 2.4s var(--ease-calm) infinite; }
@keyframes duoPulse { 0% { transform: scale(0.92); opacity: 0.55; } 70% { transform: scale(1.18); opacity: 0; } 100% { opacity: 0; } }
.no-motion .duo-node.hero::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .duo-node.hero::before { animation: none; } }

/* sparse, decorative, NON-tappable mascots */
.duo-mascot { position: absolute; top: -6px; width: 66px; height: 66px; object-fit: contain; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 3px 5px rgba(74,51,68,0.14)); }
.dev-phone .duo-mascot { width: 50px; height: 50px; }
.duo-mascot.left { right: 100%; margin-right: 6px; }
.duo-mascot.right { left: 100%; margin-left: 6px; }

.path-end { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 4px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--color-ink-muted); }
.path-end .pe-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  background: var(--color-surface); border: 2px dashed var(--color-hairline); }

/* try-next block in Library */
.trynext-block .rail2 { margin-bottom: 10px; }

/* star (mastery) filter chips */
.fchip-star { gap: 8px; }
.fchip-star .mastery { gap: 1px; }
.fchip-star.on .mastery .mstar { color: var(--t-accent-deep); }
.fchip-star.on .mastery .mstar.on { color: var(--color-xp-gold); }

/* piece-detail mastery row */
.pd-mastery { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.pd-mastery .pdm-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-xp-deep); white-space: nowrap; }
.pd-mastery .pdm-hint { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); }
.pd-mastery .pdm-mood { font-size: 18px; line-height: 1; margin-left: 2px; opacity: 0.9; }

/* quiet "ready to move up?" cue — small, beside the stars, gated update */
.pdm-ready { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 2px; padding: 6px 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--color-ink-muted);
  background: transparent; border: 1.5px solid var(--color-hairline); border-radius: var(--radius-pill); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-calm); }
.pdm-ready:hover { border-color: var(--color-xp, #E9B949); color: var(--color-xp-deep); background: var(--color-xp-soft, #FFF4D6); }
.pdm-ready .pmr-dot { color: var(--color-xp, #E9B949); font-size: 9px; }
.pdm-ready .pmr-act { color: var(--t-accent-deep); font-weight: 800; }

/* reward-moment mood reflection */
.rw-feel { background: rgba(255,255,255,0.6); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-lg);
  padding: 16px 20px; margin: 4px auto 6px; max-width: 460px; }
.rw-feel .rwf-q { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-ink); margin-bottom: 12px; }
.rw-feel .rwf-faces { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rw-feel .rwf-face { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 58px; min-height: 62px; justify-content: center;
  background: var(--color-surface); border: 2px solid transparent; border-radius: var(--radius-md); padding: 8px 6px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring); }
.rw-feel .rwf-face:hover { transform: translateY(-2px) scale(1.05); }
.rw-feel .rwf-emo { font-size: 26px; line-height: 1; }
.rw-feel .rwf-lbl { font-family: var(--font-ui); font-weight: 700; font-size: 11px; color: var(--color-ink-muted); }
.rw-feel .rwf-face.on { border-color: var(--t-accent); background: var(--t-accent-soft); }
.rw-feel .rwf-face.on .rwf-lbl { color: var(--t-accent-deep); }
.rw-feel .rwf-note { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--t-accent-deep); margin-top: 12px; }

/* mastery sheet (grown-up gate + star picker) */
.mastery-sheet .mg-gate { text-align: center; }
.mastery-sheet .mg-lock { font-size: 40px; }
.mastery-sheet .mg-gate h2 { margin-top: 6px; }
.mastery-sheet .mg-gate-p { font-family: var(--font-ui); font-size: 15px; color: var(--color-ink-muted); line-height: 1.55; margin: 8px auto 0; max-width: 380px; }
.mastery-sheet .mg-pinnote { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); font-style: italic; margin-top: 14px;
  background: var(--color-surface-tint); border-radius: var(--radius-md); padding: 10px 14px; display: inline-block; }
.mastery-sheet .mg-sub { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted); margin: 2px 0 16px; }
.mastery-sheet .mg-stars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dev-phone .mastery-sheet .mg-stars { grid-template-columns: 1fr; }
.mastery-sheet .mg-star-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  border: 2px solid var(--color-hairline); background: var(--color-surface); cursor: pointer; transition: all var(--dur-fast) var(--ease-calm); }
.mastery-sheet .mg-star-opt:hover { border-color: var(--t-accent); }
.mastery-sheet .mg-star-opt.on { border-color: var(--color-xp); background: var(--color-xp-soft, #FFF4D6); }
.mastery-sheet .mgs-stars { font-size: 18px; letter-spacing: 1px; color: var(--color-xp-deep); white-space: nowrap; }
.mastery-sheet .mgs-stars .mstar { color: var(--color-hairline); }
.mastery-sheet .mgs-stars .mstar.on { color: var(--color-xp, #E9B949); }
.mastery-sheet .mgs-lbl { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--color-ink); }
.mastery-sheet .mg-hint { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); text-align: center; margin-top: 14px; min-height: 20px; }

/* ---------- DUET PAGE ---------- */
.duet-teaser { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 16px 18px; cursor: pointer;
  background: linear-gradient(120deg, var(--color-evelyn-soft), var(--color-eleanor-soft)); border: 1.5px solid #F0DCE6;
  border-radius: var(--radius-lg); transition: transform var(--dur-fast) var(--ease-calm); }
.duet-teaser:hover { transform: translateY(-2px); }
.duet-teaser img { width: 46px; height: 46px; }
.duet-teaser img:nth-child(2) { margin-left: -14px; }
.duet-teaser .dt-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.duet-teaser .dt-s { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 2px; }

.duet-hero { text-align: center; padding: 14px 0 6px; }
.dh-cats { display: inline-flex; align-items: center; gap: 6px; }
.dh-cats .dh-cat { width: 84px; height: 84px; filter: drop-shadow(2px 3px 0 rgba(74,51,68,0.1)); }
.dh-cats .dh-cat.l { transform: rotate(-7deg); } .dh-cats .dh-cat.r { transform: rotate(7deg); }
.dh-cats .dh-amp { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--color-eleanor-deep); }
.duet-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-top: 8px; }
.duet-hero .dh-sub { font-family: var(--font-ui); font-size: 15px; color: var(--color-ink-muted); margin-top: 6px; max-width: 460px; margin-left: auto; margin-right: auto; }
.duet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.dev-phone .duet-stats { grid-template-columns: 1fr; }
.duet-stat { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient); padding: 20px 22px; }
.dstat-k { font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-muted); }
.dstat-v { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; margin-top: 8px; }
.dstat-v small { font-size: 18px; color: var(--color-ink-muted); }
.dstat-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 6px; }

.shared-goal { background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-ambient); padding: 22px; }
.sg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-label { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.dev-ipad .sg-label { white-space: nowrap; }
.sg-count { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--t-accent-deep); white-space: nowrap; }
.sg-track { height: 16px; border-radius: 99px; background: var(--color-cream-deep); overflow: hidden; margin: 14px 0; }
.sg-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-evelyn), var(--color-eleanor)); transition: width 0.7s var(--ease-spring); }
.sg-contrib { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- promoted reward quest (Duet) ---------- */
.reward-quest { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  margin-top: var(--app-card-gap); padding: 22px 24px; border-radius: var(--radius-xl);
  border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm);
  background: linear-gradient(120deg, var(--color-evelyn-soft) 0%, var(--color-surface) 45%, var(--color-eleanor-soft) 100%); }
.reward-quest .rq-badge { flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface); border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.reward-quest .rq-badge span { font-size: 36px; filter: drop-shadow(0 2px 3px rgba(74,51,68,0.18)); }
.reward-quest .rq-body { flex: 1; min-width: 0; }
.reward-quest .rq-k { font-family: var(--font-ui); font-weight: 800; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-accent-deep); }
.reward-quest .rq-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; margin-top: 4px; }
.reward-quest .rq-track { height: 12px; border-radius: 99px; background: rgba(255,255,255,0.6); overflow: hidden; margin: 12px 0 9px; box-shadow: inset 0 1px 2px rgba(74,51,68,0.12); }
.reward-quest .rq-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-evelyn), var(--color-eleanor)); transition: width 0.7s var(--ease-spring); }
.reward-quest .rq-meta { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink); }
.reward-quest .rq-meta b { color: var(--t-accent-deep); }
.reward-quest .rq-meta .rq-dot { margin: 0 7px; color: var(--color-ink-muted); }
.reward-quest .rq-spark { position: absolute; font-size: 16px; opacity: 0.85; animation: rqTwinkle 2.4s ease-in-out infinite; }
.reward-quest .rq-spark.s1 { top: 12px; right: 18px; }
.reward-quest .rq-spark.s2 { bottom: 14px; right: 38px; animation-delay: 0.8s; font-size: 13px; }
.reward-quest .rq-spark.s3 { top: 16px; right: 54px; animation-delay: 1.5s; font-size: 12px; }
@keyframes rqTwinkle { 0%, 100% { transform: scale(0.8); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 1; } }
.no-motion .reward-quest .rq-spark { animation: none; }
.dev-phone .reward-quest { gap: 14px; padding: 18px; }
.dev-phone .reward-quest .rq-badge { width: 56px; height: 56px; }
.dev-phone .reward-quest .rq-badge span { font-size: 28px; }
.dev-phone .reward-quest .rq-title { font-size: 19px; }
.sgc-row { display: flex; align-items: center; gap: 12px; }
.sgc-face { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-ambient); flex-shrink: 0; }
.sgc-face img { width: 30px; height: 30px; }
.sgc-bar { flex: 1; height: 12px; border-radius: 99px; background: var(--color-cream-deep); overflow: hidden; }
.sgc-bar i { display: block; height: 100%; border-radius: 99px; }
.sgc-bar.evelyn i { background: var(--color-evelyn); } .sgc-bar.eleanor i { background: var(--color-eleanor); }
.sgc-min { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--color-ink-muted); width: 44px; text-align: right; }
.sgc-note { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); text-align: center; margin-top: 4px; }
.champ-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { text-align: center; border-radius: var(--radius-xl); padding: 20px 16px; border: 2.5px solid var(--color-ink); box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.champ.evelyn { background: linear-gradient(160deg, #FFF, var(--color-evelyn-soft)); }
.champ.eleanor { background: linear-gradient(160deg, #FFF, var(--color-eleanor-soft)); }
.champ-face { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; }
.champ.evelyn .champ-face { box-shadow: 0 0 0 3px var(--color-evelyn); } .champ.eleanor .champ-face { box-shadow: 0 0 0 3px var(--color-eleanor); }
.champ-face img { width: 46px; height: 46px; }
.champ-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-top: 8px; }
.champ-v { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-top: 4px; }
.champ.evelyn .champ-v { color: var(--color-evelyn-deep); } .champ.eleanor .champ-v { color: var(--color-eleanor-deep); }
.champ-v small { font-size: 16px; color: var(--color-ink-muted); }
.champ-k { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); }
.champ-bar { height: 10px; border-radius: 99px; background: var(--color-cream-deep); overflow: hidden; margin-top: 12px; }
.champ-bar i { display: block; height: 100%; border-radius: 99px; }
.champ-bar.evelyn i { background: var(--color-evelyn); } .champ-bar.eleanor i { background: var(--color-eleanor); }
.champ-note { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); text-align: center; margin-top: 14px; line-height: 1.5; }

/* ---------- STARTUP / LOADING SCREEN ----------
   Fixed to the VIEWPORT, not to the scaled app canvas: it must not move or
   crop while the canvas works out its size on launch. */
.startup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 40px; text-align: center; overflow: hidden;
  background:
    radial-gradient(720px 460px at 50% 22%, var(--color-surface-tint), transparent 62%),
    radial-gradient(640px 460px at 50% 100%, var(--color-eleanor-soft), transparent 58%),
    var(--color-cream);
  transition: opacity 0.5s var(--ease-calm);
}
/* exit: a circular iris closing into the centre, revealing the app around it.
   (reduced motion keeps the plain cross-fade) */
.startup.su-iris { clip-path: circle(140% at 50% 50%);
  transition: clip-path 0.62s var(--ease-calm), opacity 0.5s var(--ease-calm) 0.16s; }
.startup.su-iris.fade { clip-path: circle(0% at 50% 50%); opacity: 0; }
.startup.su-plain.fade { opacity: 0; }
.su-phone { padding-top: calc(40px + var(--safe-top, 0px)); }
.su-cats { display: flex; align-items: flex-end; gap: 8px; position: relative; z-index: 2; }
.su-cat { width: 92px; height: 92px; filter: drop-shadow(3px 4px 0 rgba(74,51,68,0.1)); }
.su-cat.l { transform: rotate(-7deg); }
.su-cat.r { transform: rotate(7deg); }
.su-phone .su-cat { width: 64px; height: 64px; }
/* padding + generous line box: the script face has a long swash on the final
   "o" that was getting clipped */
.su-word { font-family: var(--font-script); font-size: 96px; line-height: 1.12; color: var(--color-primary);
  text-shadow: 5px 5px 0 #FBD9E4; margin-top: 6px; position: relative; z-index: 2;
  padding: 0 20px 6px; overflow: visible; }
.su-word b { color: var(--color-eleanor-deep); font-weight: 400; text-shadow: 5px 5px 0 #E3DAF3; }
.su-phone .su-word { font-size: 62px; }
/* (the shimmer/progress bar was removed — the launch shouldn't advertise a wait) */
.su-tag { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--color-ink-muted); margin-top: 16px; position: relative; z-index: 2; }
/* shown only while the launch theme is waiting for the gesture that lets it play */
.su-tapin { margin-top: 22px; position: relative; z-index: 2;
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: var(--t-accent-deep, #B23A6A);
  background: var(--color-surface, #fff); border: 2.5px solid var(--color-ink); border-radius: var(--radius-pill, 99px);
  padding: 10px 20px; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm);
  animation: suTapPulse 1.5s var(--ease-spring) infinite; }
@keyframes suTapPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-5px) scale(1.04); }
}
.no-motion .su-tapin { animation: none; }
@media (prefers-reduced-motion: reduce) { .su-tapin { animation: none; } }
.su-phone .su-tag { font-size: 15px; }
.su-cat.bob { animation: suBob 1.05s var(--ease-spring) infinite alternate; }
.su-cat.r.bob2 { animation: suBobR 1.05s var(--ease-spring) 0.16s infinite alternate; }
@keyframes suBob { from { transform: translateY(5px) rotate(-7deg); } to { transform: translateY(-9px) rotate(-3deg); } }
@keyframes suBobR { from { transform: translateY(5px) rotate(7deg); } to { transform: translateY(-9px) rotate(3deg); } }
.su-notes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.su-notes span { position: absolute; bottom: 24%; color: var(--color-eleanor); opacity: 0; font-weight: 700;
  animation: suNote 2.1s ease-in infinite; }
.su-notes span:nth-child(odd) { color: var(--color-evelyn); }
@keyframes suNote {
  0% { transform: translateY(20px) rotate(0deg); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateY(-180px) rotate(24deg); opacity: 0; }
}

/* ---------- SPLASH / PROFILE SELECT ---------- */
.splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px;
  text-align: center; background:
  radial-gradient(700px 460px at 24% 6%, var(--color-surface-tint), transparent 60%),
  radial-gradient(700px 480px at 80% 100%, var(--color-eleanor-soft), transparent 58%),
  var(--color-cream); overflow: hidden; }
.splash .sp-garland { display: flex; gap: 14px; color: var(--color-eleanor); font-size: 22px; margin-bottom: 4px; }
.splash .sp-garland .a { color: var(--color-evelyn); } .splash .sp-garland .b { color: var(--color-xp-gold); }
.splash .sp-mark { display: flex; align-items: center; gap: 20px; }
.splash .sp-mark img { width: 96px; height: 96px; filter: drop-shadow(3px 4px 0 rgba(74,51,68,0.1)); }
.splash .sp-mark img.l { transform: rotate(-8deg); } .splash .sp-mark img.r { transform: rotate(8deg); }
.splash .sp-word { font-family: var(--font-script); font-size: 110px; line-height: 0.9; color: var(--color-primary); text-shadow: 5px 5px 0 #FBD9E4; }
.splash .sp-word b { color: var(--color-eleanor-deep); font-weight: 400; text-shadow: 5px 5px 0 #E3DAF3; }
.splash .sp-tag { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--color-ink); margin-top: 16px; }
.splash .sp-pick { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-muted); margin: 34px 0 16px; }
.splash .sp-cards { display: flex; gap: 24px; }
.dev-phone .splash .sp-cards { flex-direction: column; gap: 16px; }
.dev-phone .splash .sp-word { font-size: 68px; }
.dev-phone .splash .sp-mark img { width: 60px; height: 60px; }
.profile-card { width: 230px; padding: 26px; background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); cursor: pointer; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-calm); }
.dev-phone .profile-card { width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; padding: 18px 22px; }
.profile-card:hover { transform: translateY(-8px) rotate(-1deg); }
.profile-card.evelyn:hover { box-shadow: var(--shadow-offset-lg) var(--color-evelyn); }
.profile-card.eleanor:hover { box-shadow: var(--shadow-offset-lg) var(--color-eleanor); }
.profile-card .pf-ava { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: #fff; }
.dev-phone .profile-card .pf-ava { width: 70px; height: 70px; margin: 0; flex-shrink: 0; }
.profile-card.evelyn .pf-ava { box-shadow: 0 0 0 5px var(--color-evelyn); }
.profile-card.eleanor .pf-ava { box-shadow: 0 0 0 5px var(--color-eleanor); }
.profile-card .pf-ava img { width: 92px; height: 92px; }
.dev-phone .profile-card .pf-ava img { width: 58px; height: 58px; }
.profile-card .pf-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.profile-card .pf-role { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; display: inline-block; margin: 10px 0; white-space: nowrap; }
.profile-card.evelyn .pf-role { background: var(--color-evelyn-soft); color: var(--color-evelyn-deep); }
.profile-card.eleanor .pf-role { background: var(--color-eleanor-soft); color: var(--color-eleanor-deep); }
.profile-card .pf-meta { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); }

/* ---------- SCREEN MAP OVERLAY ---------- */
.map-scrim { position: fixed; inset: 0; background: rgba(46,34,48,0.62); z-index: 200;
  display: grid; place-items: center; padding: 32px; }
.map-modal { background: var(--color-cream); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); width: min(1040px, 96vw); max-height: 90vh; overflow: auto; padding: 30px 34px; }
.map-modal h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.map-modal .map-d { font-family: var(--font-ui); font-size: 15px; color: var(--color-ink-muted); margin-top: 6px; max-width: 620px; }
.map-close { float: right; width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--color-ink); background: var(--color-surface);
  font-size: 18px; cursor: pointer; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.flow { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
.flow-group { display: flex; flex-direction: column; gap: 10px; }
.flow-group .fl-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-accent-deep); }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mnode { display: inline-flex; align-items: center; flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 2px solid var(--color-ink); box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-calm); white-space: nowrap; }
.mnode:hover { transform: translateY(-2px); }
.mnode.m-reward { background: var(--color-xp-gold); }
.mnode.accent { background: var(--t-accent-soft); }
.flow-row .arr { color: var(--color-ink-muted); font-size: 18px; font-weight: 800; flex: 0 0 auto; }

/* ---------- motion off ---------- */
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }

/* keep DS pill buttons on one line */
.btn { white-space: nowrap; }
.badge { white-space: nowrap; }

/* ---------- add button (header CTAs on Library / Lessons) ---------- */
.add-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.dev-phone .add-btn { padding: 10px 16px; font-size: 14px; }

/* ---------- form fields (add piece / lesson sheets) ---------- */
.fld-l { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-ink-muted); margin: 14px 0 6px; }
.fld-hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-ink-muted); opacity: 0.8; }
/* grade picker — widened range, low grades visually prominent */
.grade-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.gp-chip { font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; border: 2px solid var(--color-hairline);
  background: var(--color-surface); color: var(--color-ink-muted); border-radius: var(--radius-md); padding: 9px 13px; cursor: pointer;
  white-space: nowrap; transition: all var(--dur-fast) var(--ease-calm); }
.gp-chip.lead { border-color: var(--color-hairline-warm); color: var(--color-ink); }
.gp-chip:hover { border-color: var(--t-accent); }
.gp-chip.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep); box-shadow: var(--shadow-offset-sm) var(--t-accent-soft); }
.fld { width: 100%; font-family: var(--font-ui); font-size: 16px; color: var(--color-ink); background: var(--color-surface);
  border: 2px solid var(--color-hairline); border-radius: var(--radius-md); padding: 12px 14px; outline: none; }
.fld:focus { border-color: var(--t-accent); box-shadow: 0 0 0 4px var(--t-accent-soft); }
select.fld { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A7680' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.fld-row { display: flex; gap: 14px; align-items: flex-end; }
.fld-row > div { min-width: 0; }
.seg2 { display: inline-flex; gap: 6px; }
.seg2 button { font-family: var(--font-ui); font-weight: 800; font-size: 14px; border: 2px solid var(--color-hairline);
  background: var(--color-surface); color: var(--color-ink-muted); border-radius: var(--radius-md); padding: 11px 14px; cursor: pointer;
  white-space: nowrap; transition: all var(--dur-fast) var(--ease-calm); }
.seg2 button.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep); }

/* ---------- day-detail popover (streak calendar) ---------- */
.day-modal { background: var(--color-surface); border: 2.5px solid var(--color-ink); width: 100%; max-width: 360px;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); padding: 24px 24px 26px; margin: 0 24px; }
.day-modal .dm-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-accent-deep); }
.day-modal .dm-date { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-top: 4px; }
.day-modal .dm-total { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--color-streak-deep); margin-top: 12px; line-height: 1; }
.day-modal .dm-total small { font-size: 17px; color: var(--color-ink-muted); font-weight: 600; }
.day-modal .dm-total.none { font-size: 26px; color: var(--color-ink-muted); }
.day-modal .dm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.day-modal .dm-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--color-cream);
  border: 1.5px solid var(--color-hairline); border-radius: var(--radius-md); }
.day-modal .dm-ico { font-size: 18px; }
.day-modal .dm-t { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; }
.day-modal .dm-m { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--t-accent-deep); white-space: nowrap; flex-shrink: 0; }
.day-modal .dm-note { font-family: var(--font-ui); font-size: 14px; color: var(--color-ink-muted); margin-top: 16px; line-height: 1.5;
  background: var(--color-surface-tint); border-radius: var(--radius-md); padding: 12px 14px; }
.app-shell[data-theme="eleanor"] .day-modal .dm-note { background: var(--color-eleanor-soft); }

/* ---------- entrance animations: base state is VISIBLE; only animate when
   the environment allows motion (prevents stuck opacity:0 under reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .enter-host { animation: scrEnter var(--dur) var(--ease-calm) both; }
  .practice { animation: scrEnter var(--dur) var(--ease-calm) both; }
  .jnote { animation: noteIn 0.4s var(--ease-spring) both; }
  .rw-badge { animation: badgePop 0.6s var(--ease-spring) both; }
  .sheet { animation: sheetUp var(--dur-slow) var(--ease-spring) both; }
  .jchapter { animation: jIn 0.5s var(--ease-spring) both; }
}

/* callout (ported from DS canvas chrome, since we don't load canvas.css) */
.callout { display: flex; gap: 14px; align-items: flex-start; background: var(--color-surface-tint); border: 1.5px solid #F4DCE3; border-radius: var(--radius-lg); padding: 16px 18px; }
.callout.info { background: #EAF3FB; border-color: #D2E6F5; }
.callout .ico { font-size: 22px; line-height: 1.2; }
.callout .note { font-family: var(--font-ui); font-size: 14px; color: var(--color-ink-muted); line-height: 1.5; }
.callout .note strong { color: var(--color-ink); }

/* =====================================================================
   ROUND 2 additions
   ===================================================================== */

/* ---------- dashboard: today's session (latest lesson + custom) ---------- */
.cta-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* merged piece+practice: big resting Practise CTA */
.btn-practise { font-size: 18px; padding: 14px 30px; gap: 9px; }
.btn-practise svg { margin-left: -2px; }

/* resting-state session banner (multi-piece) */
.sess-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 4px; padding: 14px 18px;
  background: var(--t-accent-soft); border: 1.5px solid var(--t-accent); border-radius: var(--radius-lg); }
.sess-banner .sb-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--t-accent-deep); }
.sess-banner .sb-prog { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-ink); }
.sess-banner .sb-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.sess-banner .sb-chip { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--color-ink-muted);
  background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: 99px; padding: 6px 13px; }
.sess-banner .sb-chip.on { color: var(--t-accent-deep); border-color: var(--t-accent); background: #fff; }
.sess-banner .sb-chip.done { color: var(--color-success-deep); border-color: var(--color-success); }

/* confirm guard dialog (finish / leave) */
.confirm-card { background: var(--color-surface); border: 2.5px solid var(--color-ink); width: 100%; max-width: 380px;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); padding: 28px 26px 24px; margin: 0 24px; text-align: center; }
.confirm-card .cf-emo { font-size: 44px; line-height: 1; }
.confirm-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 23px; margin-top: 10px; }
.confirm-card p { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted); margin-top: 8px; line-height: 1.5; }
.confirm-card .cf-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }

/* library: quiet 'build a session' secondary link */
.lib-session-link { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 9px 16px; white-space: nowrap;
  background: var(--color-surface); border: 1.5px dashed var(--color-hairline); border-radius: 99px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--color-ink-muted);
  transition: border-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm); }
.lib-session-link:hover { border-color: var(--t-accent); color: var(--t-accent-deep); }
.lib-session-link svg { color: var(--t-accent-deep); }
.cta-pchip { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: #fff;
  background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.35); border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
.cta-foot { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.cta-card .cta-go { margin-top: 0; }
.cta-quiet { background: none; border: none; color: #fff; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; opacity: 0.85; padding: 2px 0; }
.cta-quiet:hover { opacity: 0.95; }
.cta-alt { background: none; border: none; color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0.92; padding: 6px 0; }
.cta-alt:hover { opacity: 1; }

/* ---------- practice: session bar + ready/idle timer ---------- */
.sess-bar { display: flex; align-items: center; gap: 14px; padding: 6px 30px 0; flex-wrap: wrap; }
.dev-phone .sess-bar { padding: 6px 16px 0; }
.sess-k { font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-muted); flex-shrink: 0; }
.sess-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sess-chip { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; border: 2px solid var(--color-hairline);
  background: var(--color-surface); color: var(--color-ink-muted); border-radius: 99px; padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-calm); }
.sess-chip.on { border-color: var(--t-primary); background: var(--t-accent-soft); color: var(--t-accent-deep); }
.timer-card.prfx-ready { border-style: dashed; }
.timer-card.prfx-ready .runningdot { animation: none; background: var(--color-ink-muted); }
.timer-card.prfx-ready .tc-time { color: var(--color-ink-muted); }
.tc-prompt { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--t-accent-deep); margin-top: 12px; }
.play-start { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--color-ink); background: var(--t-primary); color: #fff;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-offset) var(--t-primary-shadow);
  transition: transform var(--dur-fast) var(--ease-spring); }
.play-start:hover { transform: translate(-1px,-2px); }
.play-start.pulse { animation: startPulse 1.5s ease-in-out infinite; }
@keyframes startPulse { 0%,100% { box-shadow: var(--shadow-offset) var(--t-primary-shadow), 0 0 0 0 var(--t-accent-soft); } 50% { box-shadow: var(--shadow-offset) var(--t-primary-shadow), 0 0 0 12px transparent; } }

/* ---------- piece detail: title row + edit ---------- */
.pd-info { position: relative; }
.pd-info h1 { padding-right: 56px; }
.pd-edit { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-hairline); background: var(--color-surface);
  display: grid; place-items: center; cursor: pointer; color: var(--color-ink-muted); flex-shrink: 0; }
.pd-edit:hover { color: var(--t-accent-deep); border-color: var(--t-accent); }
.lh-edit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }

/* ---------- lesson detail: pieces worked on ---------- */
.worked-list { display: flex; flex-direction: column; gap: 10px; }
.worked-item { display: flex; align-items: stretch; gap: 10px; }
.worked-item .wi-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: var(--radius-md); padding: 12px 16px; cursor: pointer;
  box-shadow: var(--shadow-ambient); color: var(--color-ink); text-align: left; transition: transform var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm); }
.worked-item .wi-main:hover { transform: translateY(-2px); border-color: var(--t-accent); }
.worked-item .wi-main .wc-ic { font-size: 20px; flex-shrink: 0; }
.worked-item .wi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.worked-item .wc-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worked-item .wi-mastery { display: flex; align-items: center; gap: 7px; }
.worked-item .wi-mlbl { font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--color-xp-deep); }
.worked-item .wi-set { flex-shrink: 0; font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: var(--color-ink-muted);
  background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: var(--radius-md); padding: 0 16px; cursor: pointer; min-width: 56px;
  transition: all var(--dur-fast) var(--ease-calm); }
.worked-item .wi-set:hover { border-color: var(--color-xp); color: var(--color-xp-deep); background: var(--color-xp-soft, #FFF4D6); }
.worked-hint { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 4px; }
.worked-empty { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted); background: var(--color-surface);
  border: 1.5px dashed var(--color-hairline); border-radius: var(--radius-md); padding: 16px 18px; line-height: 1.5; }

/* ---------- score block variants ---------- */
.score.tappable { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-calm); }
.score.tappable:hover { box-shadow: var(--shadow-offset) var(--t-accent); }
.sh-expand { margin-left: auto; color: var(--color-ink-muted); display: inline-flex; }
.score.tappable:hover .sh-expand { color: var(--t-accent-deep); }
.sh-tag.photo { background: var(--color-eleanor-soft); color: var(--color-eleanor-deep); border-color: var(--color-eleanor); }
.alt-source { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  color: var(--color-eleanor-deep); background: var(--color-eleanor-soft); border: 1.5px solid #E0D8F3; border-radius: 99px; padding: 8px 16px; cursor: pointer; }
.alt-source:hover { filter: brightness(0.97); }

/* photo-only in-page card */
.photo-card { background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-offset) var(--color-hairline-warm); overflow: hidden; }
.photo-thumb { position: relative; max-height: 280px; overflow: hidden; background: var(--color-cream-deep); }
.photo-thumb img { width: 100%; display: block; }
.photo-tap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: #fff; background: rgba(46,34,48,0.0);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-calm); }
.photo-card:hover .photo-tap { opacity: 1; background: rgba(46,34,48,0.32); }

/* empty score state */
.score-empty { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1.5px dashed var(--color-hairline);
  border-radius: var(--radius-xl); padding: 20px 22px; }
.score-empty img { width: 64px; height: 64px; flex-shrink: 0; }
.score-empty .se-t { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.score-empty .se-s { font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); margin-top: 3px; }
.score-empty .btn { margin-left: auto; flex-shrink: 0; }

/* ---------- faux scanned sheet ---------- */
.fauxscan { background: repeating-linear-gradient(180deg, #FBF8F2, #FBF8F2 2px, #F6F1E8 3px); padding: 18px; }
.fauxscan.big { padding: 30px; width: min(640px, 96%); margin: 0 auto; }
.fs-paper { background: #FCFAF5; border: 1px solid #E7DECB; border-radius: 4px; padding: 22px 26px;
  box-shadow: inset 0 0 40px rgba(180,160,120,0.12), 0 1px 0 rgba(0,0,0,0.04); }
.fs-paper .fs-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; text-align: center; color: #3A332E; line-height: 1.15; }
.fs-paper .fs-sub { font-family: var(--font-ui); font-size: 12.5px; font-style: italic; text-align: center; color: #8A7E6B; margin-top: 2px; margin-bottom: 18px; }
.fauxscan.big .fs-paper .fs-title { font-size: 30px; }
.fs-system { position: relative; height: 46px; margin-bottom: 18px; }
.fauxscan.big .fs-system { height: 58px; margin-bottom: 22px; }
.fs-lines { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 32px; }
.fs-lines i { position: absolute; left: 0; right: 0; height: 1px; background: #5A4F40; opacity: 0.55; }
.fs-lines i:nth-child(1) { top: 0; } .fs-lines i:nth-child(2) { top: 25%; } .fs-lines i:nth-child(3) { top: 50%; }
.fs-lines i:nth-child(4) { top: 75%; } .fs-lines i:nth-child(5) { top: 100%; }
.fs-clef { position: absolute; left: 2px; top: 50%; transform: translateY(-62%); font-size: 40px; color: #3A332E; line-height: 1; }
.fauxscan.big .fs-clef { font-size: 52px; }
.fs-note { position: absolute; width: 9px; height: 7px; border-radius: 50%; background: #2C2620; transform: rotate(-20deg); }
.fs-note::after { content: ""; position: absolute; right: 0; top: -16px; width: 1px; height: 16px; background: #2C2620; }
.fsx-bar { position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 32px; background: #5A4F40; opacity: 0.5; }

/* ---------- fullscreen score overlay ---------- */
.fs-scrim { position: absolute; inset: 0; z-index: 120; background:
  radial-gradient(700px 460px at 50% 0%, var(--t-accent-soft), transparent 60%), var(--color-cream);
  display: flex; flex-direction: column; }
.fs-bar { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1.5px solid var(--color-hairline); background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); }
.fs-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-ink); white-space: nowrap;
  background: var(--color-surface); border: 2px solid var(--color-ink); border-radius: 99px; padding: 9px 18px 9px 14px; cursor: pointer;
  box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.fs-back:hover { transform: translateX(-2px); }
.fs-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-phone .fs-name { font-size: 16px; }

/* portrait-phone rotate prompt */
.fs-rotate { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 28px; gap: 6px; }
.fs-rotate .fsr-phone { width: 64px; height: 96px; border: 3px solid var(--color-ink); border-radius: 14px; position: relative; margin-bottom: 18px;
  background: var(--color-surface); box-shadow: var(--shadow-offset) var(--color-hairline-warm); animation: fsrTilt 2.4s var(--ease-spring) infinite; }
.fs-rotate .fsr-phone::after { content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 3px; background: var(--color-hairline); }
.fs-rotate .fsr-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: var(--t-accent-deep); }
.fs-rotate .fsr-t { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--color-ink); }
.fs-rotate .fsr-s { font-family: var(--font-ui); font-size: 14px; color: var(--color-ink-muted); max-width: 300px; line-height: 1.5; }
.fs-rotate .fsr-anyway { margin-top: 16px; font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; color: var(--t-accent-deep); white-space: nowrap;
  background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: 99px; padding: 11px 20px; cursor: pointer; min-height: 44px; }
.fs-rotate .fsr-anyway:hover { border-color: var(--t-accent); }
@keyframes fsrTilt { 0%, 55%, 100% { transform: rotate(0deg); } 75%, 90% { transform: rotate(-90deg); } }
.no-motion .fs-rotate .fsr-phone { animation: none; transform: rotate(-90deg); }
/* "preview anyway" simulates the wide landscape view inside the portrait frame */
.fs-body-rotated { overflow-x: auto; }
.fs-toggle { display: inline-flex; background: var(--color-cream-deep); border-radius: 99px; padding: 4px; gap: 2px; }
.fs-toggle button { font-family: var(--font-ui); font-weight: 800; font-size: 13px; border: none; background: transparent; color: var(--color-ink-muted);
  padding: 8px 16px; border-radius: 99px; cursor: pointer; }
.fs-toggle button.on { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-ambient); }
.fs-body { flex: 1; min-height: 0; padding: 26px; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
.fs-body .score-full { width: 100%; max-width: 980px; display: flex; flex-direction: column; }
.fs-body .score-full .score-paper { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.score-full .staff.big { height: 120px; }
.score-close { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--color-ink-muted); cursor: pointer; display: grid; place-items: center; margin-left: auto; }
.score-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  border: 2px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink-muted); border-radius: 99px; padding: 8px 16px; cursor: pointer; }

/* photo viewer */
.photoview { position: relative; flex: 1; width: 100%; overflow: hidden; border-radius: var(--radius-xl); border: 2.5px solid var(--color-ink);
  background: #EDE6D8; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.pv-stage { transform-origin: center center; width: min(640px, 90%); max-height: 100%; transition: transform 0.08s linear; user-select: none; }
.pv-stage img { max-width: 100%; max-height: 78vh; display: block; border-radius: 4px; box-shadow: 0 6px 24px rgba(74,51,68,0.2); margin: 0 auto; }
.pv-stage .fauxscan { max-height: 80vh; overflow: auto; }
.pv-zoom { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 2px solid var(--color-ink); border-radius: 99px; padding: 6px; box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); }
.pv-zoom button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--color-cream-deep); color: var(--color-ink); cursor: pointer; display: grid; place-items: center; }
.pv-zoom button.pv-reset { width: auto; padding: 0 14px; font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; border-radius: 99px; }
.pv-pct { font-family: var(--font-display); font-weight: 700; font-size: 13px; min-width: 44px; text-align: center; }
.pv-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--color-ink-muted); background: rgba(255,255,255,0.8); border-radius: 99px; padding: 5px 14px; }

/* ---------- piece search combobox ---------- */
.pss { position: relative; }
.pss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pss-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; white-space: nowrap;
  background: var(--t-accent-soft); color: var(--t-accent-deep); border: 1.5px solid var(--t-accent); border-radius: 99px; padding: 6px 8px 6px 12px; }
.pss-chip .pcc-ic { font-size: 14px; }
.pss-chip .pcc-g { font-family: var(--font-ui); font-weight: 800; font-size: 10px; background: rgba(255,255,255,0.6); border-radius: 99px; padding: 2px 6px; }
.pss-chip button { width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,0.55); color: var(--t-accent-deep); cursor: pointer; display: grid; place-items: center; }
.pss-chip button:hover { background: #fff; }
.pss-field { display: flex; align-items: center; gap: 10px; background: var(--color-surface); border: 2px solid var(--color-hairline); border-radius: var(--radius-md); padding: 11px 14px; }
.pss-field input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 15.5px; color: var(--color-ink); }
.pss-pop { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 30; background: var(--color-surface);
  border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-offset) var(--color-hairline-warm); overflow: hidden; max-height: 280px; overflow-y: auto; }
.pss-opt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--color-hairline); }
.pss-opt:hover { background: var(--t-accent-soft); }
.pss-opt .po-ic { font-size: 16px; }
.pss-opt .po-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.pss-opt .po-c { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); flex: 1; }
.pss-none { padding: 12px 14px; font-family: var(--font-ui); font-size: 13.5px; color: var(--color-ink-muted); }
.pss-add { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; font-family: var(--font-ui); font-weight: 800; font-size: 13.5px;
  color: var(--t-accent-deep); background: var(--color-surface-tint); }
.app-shell[data-theme="eleanor"] .pss-add { background: var(--color-eleanor-soft); }
.pss-add:hover { filter: brightness(0.97); }

/* ---------- photo upload field ---------- */
.puf-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px; cursor: pointer;
  border: 2px dashed var(--color-hairline); border-radius: var(--radius-md); background: var(--color-cream); color: var(--color-ink-muted); }
.puf-drop:hover { border-color: var(--t-accent); color: var(--t-accent-deep); }
.puf-dt { font-family: var(--font-ui); font-weight: 800; font-size: 14.5px; margin-top: 8px; white-space: nowrap; }
.puf-ds { font-family: var(--font-ui); font-size: 12.5px; }
.puf-have { display: flex; gap: 14px; align-items: center; }
.puf-thumb { width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-ink); flex-shrink: 0; background: var(--color-cream-deep); }
.puf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.puf-thumb .fauxscan { padding: 4px; transform: scale(1); height: 100%; overflow: hidden; }
.puf-thumb .fauxscan .fs-paper { padding: 6px; }
.puf-thumb .fauxscan .fs-title { font-size: 8px; }
.puf-thumb .fauxscan .fs-sub { display: none; }
.puf-thumb .fauxscan .fs-system { height: 12px; margin-bottom: 4px; }
.puf-meta .puf-t { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-success-deep); }
.puf-meta .puf-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 3px; }
.puf-acts { display: flex; gap: 8px; margin-top: 10px; }
.puf-acts .btn { padding: 7px 14px; font-size: 13px; }
.src-note { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted); margin-top: 12px; background: var(--color-surface-tint);
  border-radius: var(--radius-md); padding: 11px 14px; line-height: 1.45; }
.app-shell[data-theme="eleanor"] .src-note { background: var(--color-eleanor-soft); }

/* ---------- score-source picker (add / edit piece) ---------- */
.ssf-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ssf-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  min-height: 84px; justify-content: center; padding: 12px 6px; cursor: pointer; border: 2px solid var(--color-hairline); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink-muted); }
.ssf-tile:hover { border-color: var(--t-accent); color: var(--t-accent-deep); }
.ssf-tile.on { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent-deep);
  box-shadow: 0 0 0 1px var(--t-accent) inset; }
.ssf-tile .ssf-t { font-family: var(--font-ui); font-weight: 800; font-size: 13px; margin-top: 5px; line-height: 1.1; white-space: nowrap; }
.ssf-tile .ssf-s { font-family: var(--font-ui); font-weight: 600; font-size: 11px; opacity: 0.8; line-height: 1.1; white-space: nowrap; }
.ssf-tile.soon { border-style: dashed; }
.ssf-soon { position: absolute; top: -8px; right: 6px; font-family: var(--font-ui); font-weight: 800; font-size: 9px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-surface); background: var(--color-ink-muted);
  border-radius: 99px; padding: 2px 7px; }
.ssf-tile.soon.on .ssf-soon, .ssf-tile.soon:hover .ssf-soon { background: var(--t-accent-deep); }

.ssf-body { margin-top: 12px; }
.ssf-pane { display: flex; flex-direction: column; gap: 8px; }
.ssf-url { display: flex; align-items: center; gap: 10px; border: 2px solid var(--color-hairline);
  background: var(--color-surface); border-radius: var(--radius-md); padding: 0 14px; }
.ssf-url:focus-within { border-color: var(--t-accent); }
.ssf-url.ssf-disabled { background: var(--color-cream); opacity: 0.85; }
.ssf-url-in { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 13px 0;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink); }
.ssf-hint { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); line-height: 1.45; }

.ssf-have { display: flex; gap: 14px; align-items: center; border: 2px solid var(--color-hairline);
  border-radius: var(--radius-md); padding: 14px; background: var(--color-cream); }
.ssf-have-ic { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 2px solid var(--color-ink); background: var(--color-surface); color: var(--color-success-deep); }
.ssf-have-t { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-ink); word-break: break-all; }
.ssf-have-s { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-muted); margin-top: 3px; }
.ssf-have-acts { display: flex; gap: 8px; margin-top: 10px; }
.ssf-have-acts .btn { padding: 7px 14px; font-size: 13px; }

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

/* =====================================================================
   PRODUCTIONIZATION TWEAKS (post-prototype) — appended, later rules win.
   ===================================================================== */

/* #3 profile menu: scrim must cover the whole device so any outside tap closes it.
   (was position:absolute inside the tiny .status-controls box) */
.pm-scrim { position: fixed; inset: 0; z-index: 60; }

/* #2 goal ring: celebratory star in the centre when the daily goal is reached */
.gr-done-star { font-weight: 700; transform-origin: 42px 42px; }
@media (prefers-reduced-motion: no-preference) {
  .gr-done-star { animation: grStarPop 0.5s var(--ease-spring) both; }
}
@keyframes grStarPop {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* #5 cleaner, bigger streak hero (no banner box) */
.streak-hero { text-align: center; padding: 8px 10px 4px; position: relative; }
.streak-hero .streak-flame { position: relative; display: grid; place-items: center;
  width: 168px; height: 168px; margin: 0 auto; }
.streak-hero .sf-glyph { font-size: 142px; line-height: 1;
  filter: drop-shadow(0 10px 22px rgba(232,123,74,0.45)); }
.streak-hero .sf-count { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: 58px; color: #fff;
  text-shadow: 0 3px 10px rgba(168,80,40,0.6); }
@media (prefers-reduced-motion: no-preference) {
  .streak-hero .sf-glyph { animation: flameFlick 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
}
.streak-hero .streak-big { font-family: var(--font-display); font-weight: 700; font-size: 34px;
  color: var(--color-ink); margin-top: 2px; line-height: 1.05; }
.streak-hero .streak-sub { font-family: var(--font-ui); font-size: 15px; color: var(--color-ink-muted);
  margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }
.dev-phone .streak-hero .sf-glyph { font-size: 112px; }
.dev-phone .streak-hero .sf-count { font-size: 46px; }
.dev-phone .streak-hero .streak-big { font-size: 26px; }

/* #4 streak slide-down drawer over a blurred view of the current screen */
.streak-drawer-scrim { position: fixed; inset: 0; z-index: 80; display: flex;
  justify-content: center; align-items: flex-start;
  background: transparent;
  animation: sdFade 0.22s ease both; }
@keyframes sdFade { from { opacity: 0; } to { opacity: 1; } }
.streak-drawer { position: relative; width: min(640px, 92%); margin-top: 26px; max-height: 84%;
  overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(170deg, #FFF, var(--color-evelyn-soft) 130%);
  border: 2.5px solid var(--color-ink); border-radius: 28px;
  box-shadow: 0 26px 64px rgba(80,50,40,0.34);
  padding: 18px 22px 24px; animation: sdDrop 0.42s var(--ease-spring) both; }
.streak-drawer::-webkit-scrollbar { display: none; }
.streak-drawer.eleanor { background: linear-gradient(170deg, #FFF, var(--color-eleanor-soft) 130%); }
@keyframes sdDrop { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: translateY(0); } }
.sd-grip { width: 46px; height: 5px; border-radius: 3px; background: rgba(74,51,68,0.18);
  margin: 2px auto 6px; }
.sd-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; cursor: pointer;
  border-radius: 50%; border: 1.5px solid var(--color-hairline-warm); background: rgba(255,255,255,0.8);
  font-size: 16px; line-height: 1; color: var(--color-ink-muted); }
.sd-close:hover { background: #fff; color: var(--color-ink); }
.sd-body { padding-top: 4px; }

/* on-brand login (reuses the splash shell + design-system form classes) */
.login-splash { background: #FBF3E4; }
.login-splash .sp-word { font-size: 96px; }
.login-splash .sp-mark img { width: 84px; height: 84px; }
.login-card { width: 100%; max-width: 360px; margin-top: 30px; display: flex; flex-direction: column; gap: 12px;
  background: var(--color-surface, #fff); border: 2.5px solid var(--color-ink);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-offset-lg, 8px 8px 0) var(--color-hairline-warm, rgba(74,51,68,0.14));
  padding: 24px 22px; text-align: center; }
.login-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px;
  color: var(--color-ink); margin: 0 0 2px; }
.login-card .fld { margin: 0; text-align: left; }
.login-card .btn { width: 100%; justify-content: center; }
.login-card .lc-emoji { font-size: 44px; }
.login-card .lc-sub { font-family: var(--font-ui); font-size: 14.5px; color: var(--color-ink-muted);
  line-height: 1.5; margin: 0 0 4px; }
.login-card .lc-or { display: flex; align-items: center; gap: 10px; color: var(--color-ink-muted); font-size: 13px; }
.login-card .lc-or span { flex: 1; height: 1px; background: var(--color-hairline-warm, #e7dcc9); }
.login-card .lc-err { color: #c0392b; font-size: 14px; }
.pm-signout { color: var(--color-streak-deep, #c0392b); }

/* score playhead spans the whole system (all staves), not just the top line */
.staff-stack { position: relative; display: flex; flex-direction: column; gap: 8px; }
.score-full .staff-stack { flex: 1; justify-content: center; }
.playhead-full { top: 0; bottom: 0; }

/* =====================================================================
   SOUND + CELEBRATION (see src/lib/sfx.js)
   ===================================================================== */

/* ---------- global sound toggle (profile menu) ---------- */
.pm-item.pm-sound { cursor: pointer; }
.pm-sound .pm-sound-t { flex: 1; text-align: left; }
.pm-switch { width: 38px; height: 22px; border-radius: 99px; background: var(--color-cream-deep);
  border: 2px solid var(--color-ink); flex-shrink: 0; position: relative;
  transition: background var(--dur-fast) var(--ease-calm); }
.pm-switch i { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-surface); border: 1.5px solid var(--color-ink);
  transition: transform var(--dur-mid, 260ms) var(--ease-spring); }
.pm-switch.on { background: var(--t-primary); }
.pm-switch.on i { transform: translateX(16px); }

/* ---------- (B) current journey node: gentle continuous bounce ----------
   Only the ONE node to tap next (.next) breathes; done/past nodes stay still,
   which is what makes it read as "you are here". Mostly at rest inside the
   cycle so it stays calm rather than frantic. A press still wins: :active
   drops the animation so the button's own push-down transform applies. */
@keyframes duoNextBounce {
  0%   { transform: translateY(0) scale(1); }
  26%  { transform: translateY(-9px) scale(1.04); }
  44%  { transform: translateY(0) scale(0.975); }
  58%  { transform: translateY(-3px) scale(1.008); }
  70%, 100% { transform: translateY(0) scale(1); }
}
.duo-node.next { animation: duoNextBounce 2.4s var(--ease-spring) infinite; }
.duo-node.next:active { animation: none; }

@keyframes jnodeNextBounce {
  0%   { transform: translateY(0) scale(1); }
  26%  { transform: translateY(-4px) scale(1.015); }
  44%  { transform: translateY(0) scale(0.99); }
  58%  { transform: translateY(-1.5px); }
  70%, 100% { transform: translateY(0) scale(1); }
}
.jnode-pill.next { animation: jnodeNextBounce 2.4s var(--ease-spring) infinite; }
.jnode-pill.next:hover, .jnode-pill.next:active { animation: none; }

.no-motion .duo-node.next, .no-motion .jnode-pill.next { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .duo-node.next, .jnode-pill.next { animation: none; }
}

/* ---------- (C, D) practice enter + piece-to-piece advance ----------
   Entering focus mode lifts in; finishing a piece slides the old one out and
   springs the next one in (fill-mode backwards, so the finished animation
   stops overriding the swap-out transition below). */
@keyframes pracEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.practice.prac-enter { animation: pracEnter 340ms var(--ease-spring) backwards; }

@keyframes pracSwapIn {
  from { opacity: 0; transform: translateX(28px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.prac-body { transition: opacity 200ms var(--ease-calm), transform 200ms var(--ease-calm); }
.prac-body.prac-swap-in { animation: pracSwapIn 320ms var(--ease-spring) backwards; }
.practice.swapping .prac-body { opacity: 0; transform: translateX(-22px); }

.no-motion .practice.prac-enter, .no-motion .prac-body.prac-swap-in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .practice.prac-enter, .prac-body.prac-swap-in { animation: none; }
  .prac-body { transition: none; }
}

/* ---------- (E) sequenced completion celebration ---------- */
/* the active profile's cat, cheering (per-profile: Evelyn pink / Eleanor purple) */
.reward .rw-cats .rw-hero-cat { width: auto; height: 132px; filter: drop-shadow(3px 5px 0 rgba(74,51,68,0.10)); }
.dev-phone .reward .rw-cats .rw-hero-cat { height: 104px; }
@keyframes rwCheer {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  30%      { transform: translateY(-14px) rotate(2deg); }
  60%      { transform: translateY(0) rotate(-1deg); }
  78%      { transform: translateY(-6px) rotate(1deg); }
}
.rw-hero-cat.cheer { animation: rwCheer 1.6s var(--ease-spring) infinite; transform-origin: 50% 100%; }

/* each element springs in as it is revealed */
@keyframes rwPop {
  0%   { opacity: 0; transform: scale(0.7) translateY(14px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.rw-pop { animation: rwPop 480ms var(--ease-spring) backwards; }
@keyframes rwFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rw-fade-in { animation: rwFadeIn 380ms var(--ease-calm) backwards; }

.rw-pill .rp-u { font-size: 16px; color: var(--color-ink-muted); }
.rw-pill .rp-delta { display: inline-block; margin-left: 7px; font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  color: #fff; background: var(--color-streak); border: 2px solid var(--color-ink); border-radius: var(--radius-pill);
  padding: 1px 8px; vertical-align: middle; }
.rw-pill .rp-goal { display: flex; align-items: center; gap: 10px; font-size: 26px; }
.rw-pill.badge .rp-v { display: flex; align-items: center; gap: 10px; }
.rw-pill.badge { border-color: var(--color-xp-gold); box-shadow: var(--shadow-offset) var(--color-xp-gold); }
.rp-badge-ic { font-size: 34px; line-height: 1; }
.rp-badge-l { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-ink); }

/* (F) ordinary level-up: a small inline pop, not a whole screen */
.rw-levelpop { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; z-index: 3;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-ink);
  background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-pill);
  padding: 8px 20px; box-shadow: var(--shadow-offset) var(--color-xp-gold); }
.rw-levelpop .rlp-star { color: var(--color-xp-gold); font-size: 24px; }
.rw-levelpop .rlp-sub { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--color-ink-muted); }
.rw-tally { font-family: var(--font-ui); font-size: 14px; color: var(--color-ink-muted); padding: 12px 0; }

/* the cat powering up beside the level badge on the milestone screen */
.levelup .lu-cat { position: absolute; top: 50%; left: 50%; height: 112px; width: auto; z-index: 2;
  transform: translate(-196px, -50%); filter: drop-shadow(3px 5px 0 rgba(74,51,68,0.10)); }
.dev-phone .levelup .lu-cat { height: 78px; transform: translate(-136px, -50%); }
@keyframes luCharge {
  0%, 100% { transform: translate(-196px, -50%) scale(1); }
  40%      { transform: translate(-196px, calc(-50% - 12px)) scale(1.07); }
  70%      { transform: translate(-196px, calc(-50% - 4px)) scale(1.02); }
}
@keyframes luChargePhone {
  0%, 100% { transform: translate(-136px, -50%) scale(1); }
  40%      { transform: translate(-136px, calc(-50% - 10px)) scale(1.07); }
  70%      { transform: translate(-136px, calc(-50% - 3px)) scale(1.02); }
}
.levelup .lu-cat.charged { animation: luCharge 1.4s var(--ease-spring) infinite; }
.dev-phone .levelup .lu-cat.charged { animation: luChargePhone 1.4s var(--ease-spring) infinite; }

/* ---------- (G) streak celebration ---------- */
.reward.streakup { gap: 2px; }
.sc-flame { position: relative; display: grid; place-items: center; z-index: 3; }
.sc-flame .scf-glyph { font-size: 118px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(233,106,58,0.30)); }
.dev-phone .sc-flame .scf-glyph { font-size: 92px; }
.sc-flame .scf-n { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: 46px; color: #fff;
  text-shadow: 0 2px 6px rgba(180,60,20,0.55); }
.dev-phone .sc-flame .scf-n { font-size: 36px; }
@keyframes scFlicker {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  35%      { transform: scale(1.07) rotate(1.5deg); }
  65%      { transform: scale(0.98) rotate(-0.5deg); }
}
.sc-flame.lit .scf-glyph { animation: scFlicker 1.7s var(--ease-spring) infinite; transform-origin: 50% 85%; }
.reward.streakup .sc-cat { height: 118px; width: auto; margin-top: 10px; z-index: 3;
  filter: drop-shadow(3px 5px 0 rgba(74,51,68,0.10)); }
.dev-phone .reward.streakup .sc-cat { height: 92px; }
.sc-cat.happy { animation: rwCheer 1.9s var(--ease-spring) infinite; transform-origin: 50% 100%; }

.sc-week { margin-top: 16px; z-index: 3; background: var(--color-surface); border: 2.5px solid var(--color-ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-offset) var(--color-hairline-warm); padding: 14px 18px; }
.scw-k { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-ink-muted); text-align: center; }
.scw-dots { display: flex; gap: 10px; margin-top: 10px; }
.scw-day { display: flex; flex-direction: column; align-items: center; gap: 5px; animation: rwPop 420ms var(--ease-spring) backwards; }
.scw-day .scw-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--color-cream-deep); border: 2.5px solid var(--color-hairline-warm); }
.dev-phone .scw-day .scw-dot { width: 32px; height: 32px; font-size: 15px; }
.scw-day.on .scw-dot { background: var(--color-streak); border-color: var(--color-ink); }
.scw-day.today .scw-dot { box-shadow: 0 0 0 3px var(--t-primary); }
.scw-day .scw-lbl { font-family: var(--font-ui); font-weight: 800; font-size: 11px; color: var(--color-ink-muted); }
.scw-day.on .scw-lbl { color: var(--color-streak-deep); }

/* =====================================================================
   iPad PORTRAIT (.dev-tablet — always alongside .dev-phone)
   The phone layout is the right SHAPE for portrait (single column, bottom
   nav), but at 820px wide its 392px-tuned sizes read as a stretched phone.
   These overrides give the extra width back to the content: roomier gutters,
   a comfortable measure, bigger type, and grids that use the second column
   instead of running everything down one narrow strip.
   ===================================================================== */
/* .app-shell.dev-phone already sets these, so match its specificity */
.app-shell.dev-tablet {
  --app-gutter: 48px;
  --safe-top: max(env(safe-area-inset-top), 24px);
  --safe-bottom: max(env(safe-area-inset-bottom), 24px);
}
.dev-tablet .pad { padding: 22px var(--app-gutter) 120px; }

/* keep a readable measure — text blocks don't want to be 720px wide */
.dev-tablet .ph-title { font-size: 34px; }
.dev-tablet .ph-intro { font-size: 17px; max-width: 560px; margin-left: auto; margin-right: auto; }
.dev-tablet .sec-title h3 { font-size: 21px; }

/* two-up grids where the phone stacks */
.dev-tablet .lib-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dev-tablet .lib-grid .pcover { height: 150px; }
.dev-tablet .rail2 { gap: 16px; }
.dev-tablet .worked-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dev-tablet .lesson-grid { grid-template-columns: repeat(2, 1fr); }

/* home: the winding path gets the wider lane, hero cards get room.
   dev-phone zeroes the clearance for the floating streak/avatar islands (they
   sit above the greeting on a phone); at tablet width they're side by side, so
   the clearance has to come back or the goal ring lands under them. */
.app-shell.dev-tablet .path-top { flex-direction: column; align-items: stretch; gap: 14px; padding-right: 0; }
.app-shell.dev-tablet.has-islands .path-greet { padding-right: 132px; }   /* clear the floating islands */
.app-shell.dev-tablet.has-islands .pad > .greet2:first-child { padding-right: 132px; }
.app-shell.dev-tablet .path-stats { width: 100%; display: flex; gap: 12px; }
.app-shell.dev-tablet .path-stats .pstat { flex: 1; justify-content: center; }
.dev-tablet .path-greet h1 { font-size: 30px; }
.dev-tablet .hero-row { flex-direction: column; }
.dev-tablet .cta-card, .dev-tablet .goal-card { width: 100%; }

/* practice: portrait stacks the timer above the score, both full width */
.dev-tablet .prac-body { flex-direction: column; gap: 18px; }
.dev-tablet .prac-left, .dev-tablet .prac-right { width: 100%; max-width: none; }
.dev-tablet .timer-card { padding: 22px; }
.dev-tablet .tc-time { font-size: 64px; }

/* the floating islands can breathe at this width */
.dev-tablet .nav-island { bottom: calc(var(--safe-bottom) + 14px); }
.dev-tablet .ni-lbl { font-size: 12px; }

/* sheets: centre them like the iPad rather than pinning to the bottom edge */
.dev-tablet .sheet-scrim { align-items: center; }
.dev-tablet .sheet { max-width: 620px; border-radius: var(--radius-xl); }

/* ---------- piece screen: tappable mastery row + grown-up gate ---------- */
/* the mastery row is the ONE edit affordance left on the piece screen; it
   opens the mastery sheet, which sits behind the grown-up gate below */
.pd-mastery.pdm-open { background: transparent; border: 2.5px solid transparent; border-radius: var(--radius-md);
  padding: 8px 12px; margin-left: -12px; cursor: pointer; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-calm), background var(--dur-fast) var(--ease-calm); }
.pd-mastery.pdm-open:hover { border-color: var(--color-hairline-warm); background: var(--color-surface); }
.pd-mastery.pdm-open .pdm-edit { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--color-ink-muted); background: var(--color-cream-deep); }

.mg-gate { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px; }
.mg-gate .mgg-emo { font-size: 40px; }
.mg-gate h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-ink); }
.mg-gate .mgg-input { width: 140px; text-align: center; font-size: 22px; font-family: var(--font-display); }
.mg-gate .mgg-err { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--color-streak-deep); }

/* ---------- lesson view: the music as score cards ----------
   The lesson is about the music, so the pieces get the visual weight: the
   score photo itself (or a drawn staff when there's no photo), title,
   composer, stars. Whole card opens the piece. */
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.score-card { display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 2.5px solid var(--color-ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-offset-sm) var(--color-hairline-warm); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-calm); }
.score-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-offset) var(--t-primary-shadow); }
.score-card:active { transform: translateY(1px); }
.score-card.done { border-color: var(--color-success-deep, #3E8E5A); box-shadow: var(--shadow-offset-sm) var(--color-success-deep, #3E8E5A); }

.score-card .sc-art { position: relative; display: block; height: 116px; background: var(--color-cream-deep);
  border-bottom: 2.5px solid var(--color-ink); overflow: hidden; }
.score-card .sc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* drawn staff stand-in when a piece has no score photo */
.score-card .sc-staff { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 9px; padding: 0 18px; background: linear-gradient(180deg, #FFFDF7, var(--color-cream-deep)); }
.score-card .sc-staff i { display: block; height: 2px; background: var(--color-hairline-warm); border-radius: 2px; }
.score-card .sc-clef { position: absolute; left: 14px; top: 50%; transform: translateY(-54%);
  font-size: 54px; line-height: 1; color: var(--t-primary-shadow); opacity: 0.8; }
.score-card .sc-done { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--color-success-deep, #3E8E5A);
  border: 2px solid var(--color-surface); }

.score-card .sc-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.score-card .sc-t { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-card .sc-c { font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-card .sc-m { margin-top: 4px; }

/* small "+ Add note" action in a section header */
.sec-add { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--t-accent-deep);
  background: var(--t-accent-soft); border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-calm); }
.sec-add:hover { border-color: var(--t-accent); }

/* delete affordances on recordings */
.takes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.take-chip { display: inline-flex; align-items: stretch; border: 2px solid var(--color-hairline-warm);
  border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface); }
.take-chip .tc-play { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px;
  background: transparent; border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  color: var(--color-ink); }
.take-chip .tc-play:hover { background: var(--t-accent-soft); color: var(--t-accent-deep); }
.take-chip .tc-del { display: grid; place-items: center; width: 40px; min-height: 40px; cursor: pointer;
  background: transparent; border: none; border-left: 2px solid var(--color-hairline-warm); color: var(--color-ink-muted); }
.take-chip .tc-del:hover { background: #FBE4E0; color: var(--color-streak-deep); }
.take2 .tk-del { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 2px solid var(--color-hairline-warm); color: var(--color-ink-muted); cursor: pointer; }
.take2 .tk-del:hover { background: #FBE4E0; border-color: var(--color-streak); color: var(--color-streak-deep); }

.no-motion .rw-hero-cat.cheer, .no-motion .sc-cat.happy, .no-motion .sc-flame.lit .scf-glyph,
.no-motion .rw-pop, .no-motion .rw-fade-in, .no-motion .scw-day { animation: none; }
.no-motion .levelup .lu-cat.charged, .no-motion.dev-phone .levelup .lu-cat.charged { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rw-hero-cat.cheer, .sc-cat.happy, .sc-flame.lit .scf-glyph { animation: none; }
  .levelup .lu-cat.charged, .dev-phone .levelup .lu-cat.charged { animation: none; }
  .rw-pop, .rw-fade-in, .scw-day { animation: none; }
}

/* custom-session sheet: roomier so the search results aren't cramped/clipped */
.sheet.cs-sheet { height: min(82vh, 660px); }
.cs-sheet .sh-body { min-height: 360px; }
.pss-pop { max-height: 300px; overflow-y: auto; }

/* fullscreen photo / uploaded score: use the landscape space better */
.fs-body .photoview .pv-stage { width: min(900px, 96%); }
.pv-stage img { max-height: 86vh; }
.pv-stage .fauxscan { max-height: 86vh; }
.fauxscan.big { width: min(820px, 96%); }

/* welcome / onboarding carousel (shown before login) */
.welcome-splash { justify-content: flex-start; padding-top: 40px; }
.welcome-splash .wc-mark { transform: scale(0.6); margin-bottom: -8px; }
.wc-track { display: flex; width: 100%; max-width: 460px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wc-track::-webkit-scrollbar { display: none; }
.wc-slide { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: 8px 24px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.wc-skeleton { height: 232px; display: flex; align-items: center; justify-content: center; }
.wc-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--color-ink); margin: 10px 0 6px; }
.wc-body { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--color-ink-muted);
  max-width: 360px; margin: 0; }
.wc-dots { display: flex; gap: 8px; margin: 22px 0 14px; }
.wc-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: var(--color-hairline-warm, #e0d4c2); transition: all 0.2s var(--ease-spring); }
.wc-dot.on { width: 22px; border-radius: 4px; background: var(--color-primary); }
.wc-cta { width: min(360px, 86%); justify-content: center; }
.wc-skip { margin-top: 10px; background: none; border: none; cursor: pointer;
  color: var(--color-ink-muted); font-family: var(--font-ui); font-size: 14px; }

/* welcome skeleton mockups */
.wc-card { width: 234px; background: #fff; border: 2px solid var(--color-ink); border-radius: 20px;
  box-shadow: 6px 6px 0 var(--color-hairline-warm, rgba(74,51,68,0.12)); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; }
.skb { display: block; height: 9px; border-radius: 5px; background: #ece3d4; }
.skb.w90 { width: 90%; } .skb.w80 { width: 80%; } .skb.w70 { width: 70%; } .skb.w60 { width: 60%; }
.skb.w50 { width: 50%; } .skb.w40 { width: 40%; } .skb.w30 { width: 30%; }
.wc-row { display: flex; align-items: center; gap: 14px; }
.wc-ring { width: 56px; height: 56px; border-radius: 50%; border: 8px solid #f0e7d8;
  border-top-color: var(--color-primary); flex: 0 0 auto; }
.wc-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wc-bars { display: flex; align-items: flex-end; gap: 8px; height: 80px; }
.wc-bars span { flex: 1; background: linear-gradient(180deg, var(--color-evelyn, #E891B4), #f3c2d6);
  border-radius: 4px 4px 0 0; }
.wc-pill { width: 60%; height: 22px; border-radius: 11px; background: var(--color-evelyn-soft, #fbe4ee);
  display: flex; align-items: center; padding: 0 10px; }
.wc-note { display: flex; flex-direction: column; gap: 8px; }
.wc-take { display: flex; align-items: center; gap: 10px; background: #faf4ec; border-radius: 12px; padding: 10px; }
.wc-play { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; }
.wc-flamewrap { display: flex; align-items: center; gap: 12px; }
.wc-flame { font-size: 40px; }
.wc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wc-cell { aspect-ratio: 1; border-radius: 5px; background: #efe6d6; }
.wc-cell.on { background: var(--color-streak, #F6A04D); }

/* completed lesson — soft green tint + accent (Lessons list + lesson page) */
.lesson-card.complete { background: var(--color-success-soft, #EAF7EF); border: 1.5px solid #C2E8D2; }
.lesson-card.complete .lc-date .d { color: var(--color-success-deep, #3E8E5A); }
.lh2.complete { background: linear-gradient(135deg, #E4F6EC, #F2FBF6); }

/* achievements teaser: 4-per-row (two lines for 8 badges), spread full width */
.ach-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px;
  justify-items: center; width: 100%; }
.ach-coin { width: 72px; height: 72px; font-size: 30px; }
.dev-phone .ach-row { gap: 16px 10px; }
.dev-phone .ach-coin { width: 60px; height: 60px; font-size: 26px; }

/* edit-profile: name now lives inline in the identity banner */
.ep-identity .ep-id-field { flex: 1; max-width: 460px; }
.ep-identity .ep-id-field .fld-l { margin-top: 0; margin-bottom: 6px; }
.ep-identity .ep-id-field .fld { background: var(--color-surface); }
.dev-phone .ep-identity .ep-id-field { max-width: none; }

/* edit-profile: actions pinned bottom-right; body centred to fill the space */
.editprofile .ep-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 12px;
  padding: 16px 30px 22px; border-top: 1.5px solid var(--color-hairline); background: var(--color-cream); }
.dev-phone .editprofile .ep-foot { padding: 14px 16px 18px; }
.editprofile .scroll { display: flex; flex-direction: column; justify-content: safe center; }
.editprofile .ep-identity { padding: 22px 24px; margin-bottom: 26px; }
.editprofile .ep-grid { gap: 26px 40px; margin-bottom: 26px; }
.editprofile .inst-chip { padding: 16px 16px; }
.editprofile .goal-pick .goal-opt { flex: 1; min-width: 72px; }

/* ===== PRODUCTION FULL-BLEED (no dev mockup; app fills the screen) ===== */
.stage.fullbleed { padding: 0; background: var(--color-cream); place-items: center; }
.stage.fullbleed .device { width: 100%; height: 100%; }
/* every canvas, not just ipad/phone — a device missing from this list keeps the
   dev mockup bezel in production and the app sits squished inside a fake frame */
.stage.fullbleed .bezel {
  width: 100%; height: 100%; padding: 0; background: none;
  box-shadow: none; border-radius: 0;
}
.stage.fullbleed .bezel::before { display: none; }
.stage.fullbleed .glass { border-radius: 0; }
.stage.fullbleed .notch { display: none; }

/* hide scrollbars everywhere (iPad app — visible bars shrink the viewport;
   scrolling still works) */
* { scrollbar-width: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ===== MODAL SCROLL-LOCK (iPad) =====
   The sheet backdrops are transparent, so any movement of the screen behind a
   modal is fully visible — momentum-scrolling or drag-through made the content
   "float" while a sheet was open. Freeze the screen behind an open overlay so
   it stays put, and stop the sheet's own scroll from chaining out to it. */
.app-shell.modal-open .scroll,
.screen:has(> .sheet-scrim) .scroll,
.streak-drawer:has(.sheet-scrim) .sd-body {
  overflow: hidden !important;
  touch-action: none;
}
.sheet, .sheet .sh-body, .day-modal, .ach-pop, .confirm-card {
  overscroll-behavior: contain;
}

/* ===== KEYBOARD-AWARE MODALS (iPad) =====
   When the on-screen keyboard is open, top-anchor and shrink split sheets so
   their fields + search results sit in the upper half of the screen, above the
   keyboard, instead of being covered by it (centre sheet) or fully hidden
   behind it (bottom sheet). The sheet body still scrolls internally. */
body.kb-open .sheet-scrim { align-items: flex-start; }
body.kb-open .sheet.sheet-split { margin-top: 8px; max-height: 60%; }

/* The whole app is a CSS-scaled canvas (transform: scale). On iOS, an overlay
   that lives inside a transformed ancestor drifts/jitters against it — the
   layer is rasterised at the parent's scale and re-composited on every touch,
   so the modal's contents visibly float around. Giving the sheet its own
   compositing layer (and pinning the scrim) makes it move as one solid piece.
   NB: an earlier attempt to counter-translate the stage by
   visualViewport.offsetTop is deliberately gone — it fought the browser and
   didn't fix the drift. */
.sheet-scrim { transform: translateZ(0); }
.sheet {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* no rubber-band bounce inside the sheet, and none chaining out of it */
.sheet, .sheet-split .sh-body { overscroll-behavior: none; }

/* iOS zooms the page in when a focused field's text is under 16px, which pans
   the whole canvas around — another way the sheet "floats". Keep every control
   in a sheet at the no-zoom floor. */
.sheet input, .sheet select, .sheet textarea { font-size: 16px; }

/* A native date input sizes itself to its own content and ignores the width
   the other fields obey, so it ends up longer than everything around it. */
input[type="date"].fld {
  width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
  appearance: none; -webkit-appearance: none;
  height: 48px;   /* match the other .fld controls rather than the native height */
}

/* Piece-search results render IN FLOW inside a sheet (not an absolute overlay
   pinned below the field, which gets clipped off the sheet's bottom edge and
   hidden behind the keyboard when the search is the last field). In flow they
   push the sheet body, which scrolls to reveal them. */
.sheet .pss-pop {
  position: static; margin-top: 8px; max-height: 260px; overflow-y: auto;
}

/* Lesson header "Start lesson" CTA */
/* Still the one hero action, but sized like a button rather than a banner —
   full-bleed across the header it read as overwhelming. */
.lh-cta { margin-top: 14px; }
.lh-cta .btn { width: auto; justify-content: center; padding: 12px 26px; font-size: 16px; }
.lh-cta-sub { opacity: 0.85; font-weight: 600; }
.dev-phone .lh-cta .btn { width: 100%; }   /* narrow screens: full width is right */

/* danger button variant (destructive actions — delete a lesson) */
.btn-tertiary.btn-danger { color: #C0392B; }
.btn-primary.btn-danger {
  background: #C0392B; color: #fff;
  box-shadow: var(--shadow-offset) #8F2A1E;
}
.btn-primary.btn-danger:hover  { box-shadow: var(--shadow-offset-lg) #8F2A1E; }
.btn-primary.btn-danger:active { box-shadow: 0 0 0 #8F2A1E; }