/* ============================================================
   JUNO — phone mockup component + 8 hand-built screens.
   Design grid: 390×844. 1em == 10 design-px inside .phone-frame
   (font-size: 100cqw/39 → fluid, pixel-faithful at any width).
   Ground truth: docs/app-screens/*.png (Build 121 screenshots) +
   docs/APP_TRUTH.md. No screenshots embedded — all hand-built,
   except the two real rasters the app itself ships (reef backdrop,
   badge artwork).
   ============================================================ */

.phone { width: min(340px, 100%); margin-inline: auto; }
@media (min-width: 900px) { .phone { width: min(360px, 100%); } }

/* Two-phone feature (Tasks + Goals): copy centred on top, then the two
   phones as ONE professional overlapping DUAL-HERO composition — front phone
   tilted + dropped, back phone lifted + tucked behind with a negative-margin
   overlap, front casting a soft shadow over the back. It NEVER stacks: it
   stays a single overlapping row at every width and scales down on mobile so
   the pair fits with no horizontal overflow (smaller phones by design — a
   hero shot, not two full readable devices). Both screens' content is intact.

   NB main.css ships per-breakpoint duo widths under
   `.feature.two-phone .phone-duo .phone` (which force the old stack). These
   rules use `.feature.two-phone .feature-visual .phone-duo .phone` (one extra
   class) so they out-specify main.css at every viewport with no !important. */
.feature.two-phone .feature-grid { grid-template-columns: 1fr; max-width: 940px; width: 100%; }
.feature.two-phone .feature-copy { text-align: center; max-width: 640px; margin: 0 auto; }
.feature.two-phone .feature-bullets { display: inline-grid; text-align: left; }

.feature.two-phone .feature-visual .phone-duo {
  display: flex; flex-wrap: nowrap;
  justify-content: center; align-items: center;
  gap: 0; width: 100%; max-width: 560px; margin-inline: auto;
  padding: 2.4em 0 3.2em;                 /* clearance for tilt + drop shadow */
}
/* Each phone ~52% of the (capped) duo width; the back phone's -14% overlap
   keeps the pair at ~90% of the container — comfortably clear of the edges at
   every width (body has overflow-x:hidden as a final guard). cqw-based inner
   scaling shrinks each screen's content proportionally, so both stay legible
   as a hero. Overlap-to-phone ratio (14/52 ≈ 27%) is constant at all widths
   because width and margin share the same containing block. */
.feature.two-phone .feature-visual .phone-duo .phone {
  flex: 0 0 auto; min-width: 0; width: 52%; margin: 0;
}
/* Front (Tasks): in front, tilted left, dropped, deeper shadow for depth. */
.feature.two-phone .feature-visual .phone-duo .phone.duo-front {
  position: relative; z-index: 2;
  transform: rotate(-2.6deg) translateY(3.4%);
}
.feature.two-phone .feature-visual .phone-duo .phone.duo-front .phone-frame {
  box-shadow:
    inset 0 0 0 .2em rgba(255,255,255,.16),
    0 30px 66px rgba(42,38,64,.44);
}
/* Back (Goals): behind, tilted right, lifted, tucked under the front phone. */
.feature.two-phone .feature-visual .phone-duo .phone.duo-back {
  position: relative; z-index: 1;
  margin-left: -14%; transform: rotate(2.6deg) translateY(-3.4%);
}

.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  font-size: 8.7px;                    /* static fallback ≈ 340px wide */
  background: linear-gradient(160deg, #3A3552, #191527 70%);
  border-radius: 5.8em;
  padding: 1em;
  box-shadow:
    inset 0 0 0 .2em rgba(255,255,255,.16),
    0 24px 64px rgba(42,38,64,.32);
}
@supports (container-type: inline-size) {
  .phone { container-type: inline-size; }
  .phone-frame { font-size: calc(100cqw / 39); }
}

.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 4.8em; overflow: hidden;
  background: linear-gradient(180deg, #F0EAFA 0%, #E4D9F2 100%);
  font-family: var(--sans); color: var(--juno-text-primary);
}

/* Dynamic island + status bar */
.p-island {
  position: absolute; top: 1.1em; left: 50%; transform: translateX(-50%);
  width: 12.4em; height: 3.7em; border-radius: 1.9em;
  background: #0B0A14; z-index: 30;
}
.p-status {
  position: relative; z-index: 20;
  height: 5em; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2em 3.2em 0;
  font-size: 1.5em; font-weight: 600; letter-spacing: .01em;
}
.p-status .p-icons { display: flex; align-items: center; gap: .35em; }
.p-status svg { height: .78em; width: auto; display: block; }

/* Screen body */
.p-body { position: absolute; inset: 5.6em 0 0; padding: 0 2.4em 2.4em; overflow: hidden; }
.p-body::after {                       /* bottom fade: screens scroll IRL */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7em;
  background: linear-gradient(180deg, transparent, rgba(228,217,242,.96));
  pointer-events: none;
}
.p-body.no-fade::after { display: none; }

/* Header (global chrome: white 36px circles + serif title) */
.p-header { display: flex; align-items: center; gap: 1.4em; height: 6em; }
.p-back, .p-header-aux, .ph-spacer {
  flex: none; width: 3.9em; height: 3.9em; border-radius: 50%;
}
.p-back, .p-header-aux {
  background: #fff; box-shadow: var(--sh-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--juno-text-primary);
}
.p-back::before { content: "‹"; font-size: 2.4em; font-weight: 600; line-height: 1; transform: translateY(-.08em); }
.p-header-aux svg { width: 2em; height: 2em; }
.p-title { font-family: var(--serif); font-size: 2.9em; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.p-title.tc { text-align: center; }

/* Shared primitives */
.p-card {
  background: var(--juno-surface); border-radius: 2.2em;
  box-shadow: 0 .4em 1.6em rgba(138,127,216,.08);
  padding: 1.8em; margin-top: 1.6em;
}
.p-eyebrow {
  font-size: 1.1em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--juno-text-tertiary);
}

/* ---- Floating cream tab bar (every tab-root screen) ---- */
.p-tabbar {
  position: absolute; left: 1.6em; right: 1.6em; bottom: 1.3em; z-index: 28;
  height: 7.4em; border-radius: 3.7em;
  background: rgba(242,237,230,.96);
  box-shadow: 0 .8em 2.6em rgba(42,38,64,.16);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.2em;
}
.p-tabbar .tb {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35em; width: 4.6em; height: 5.8em; color: #55506B;
}
.p-tabbar .tb svg { width: 2.5em; height: 2.5em; flex: none; }
.p-tabbar .tb i {
  display: none; font-style: normal; font-size: .95em; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.p-tabbar .tb.on {
  width: 6.6em; border-radius: 1.8em;
  background: var(--juno-accent-soft); color: var(--juno-accent-deep);
}
.p-tabbar .tb.on i { display: block; }

/* ============ S1 · Daily Insights — "Your Story" ============ */
.scr-insights .p-body { display: flex; flex-direction: column; }
.scr-insights .story-eyebrow { font-size: 1.15em; font-weight: 700; letter-spacing: .13em; color: var(--juno-accent-deep); margin: 1em 0 .5em; text-transform: uppercase; }
.scr-insights .story-title { font-family: var(--serif); font-size: 3em; font-weight: 600; line-height: 1.1; }
.scr-insights .narrator {
  background: rgba(255,255,255,.62); border-radius: 2em; padding: 1.3em 1.6em; margin-top: 1.2em;
  box-shadow: 0 .3em 1.2em rgba(138,127,216,.07);
}
.scr-insights .narrator .n-text { font-family: var(--serif); font-style: italic; font-size: 1.5em; line-height: 1.42; }
.scr-insights .narrator .n-text::before { content: "✦ "; font-style: normal; color: var(--juno-accent); font-size: .9em; }
.scr-insights .narrator .n-sig { margin-top: .7em; font-size: 1em; letter-spacing: .1em; color: var(--juno-text-tertiary); font-weight: 600; }
.scr-insights .since { margin-top: 1.4em; }
.scr-insights .since .p-eyebrow { color: var(--juno-text-tertiary); }
.scr-insights .since-pills { display: flex; flex-wrap: wrap; gap: .7em; margin-top: .8em; }
.scr-insights .since-pills span {
  background: var(--juno-accent-soft); color: var(--juno-accent-deep);
  font-size: 1.15em; font-weight: 600; padding: .45em 1em; border-radius: 1.6em; white-space: nowrap;
}
/* Today's Three — lavender-tint wash card (home-top.png) */
.scr-insights .today3 {
  background: linear-gradient(180deg, #F8F4FD, #F0E9FA);
  border: .12em solid rgba(138,127,216,.20);
  box-shadow: 0 .6em 2.2em rgba(138,127,216,.16);
  padding: 1.8em;
}
.scr-insights .today3 .t3-eyebrow {
  display: flex; align-items: center; gap: .7em;
  font-size: 1.2em; font-weight: 700; letter-spacing: .19em; color: var(--juno-accent-deep); text-transform: uppercase;
}
.scr-insights .today3 .t3-eyebrow::before {
  content: ""; width: .75em; height: .75em; border-radius: 50%; background: var(--juno-accent-deep);
}
.scr-insights .today3 .t3-read {
  font-family: var(--serif); font-size: 1.9em; font-weight: 600; line-height: 1.26;
  margin: .5em 0 .45em; letter-spacing: -.005em;
}
.scr-insights .t3-row { display: flex; align-items: center; gap: .85em; padding: .48em 0; font-size: 1.45em; font-weight: 500; color: var(--juno-text-primary); white-space: nowrap; }
.scr-insights .t3-row .ring {
  flex: none; width: 1.55em; height: 1.55em; border-radius: 50%;
  border: .15em solid var(--juno-accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.scr-insights .t3-row .ring::before {
  content: ""; width: .8em; height: .8em; border-radius: 50%; background: var(--juno-accent-deep);
}
.scr-insights .t3-btn {
  margin-top: .9em; display: flex; align-items: center; justify-content: center;
  background: #1C1826; color: #fff;
  font-size: 1.65em; font-weight: 600; height: 3.05em; border-radius: 1.7em;
}
/* Sealed insight — blurred card + reveal pill */
.scr-insights .sealed {
  position: relative; margin-top: 1.4em; border-radius: 2.2em; overflow: hidden;
  background: var(--juno-surface); box-shadow: 0 .4em 1.6em rgba(138,127,216,.08);
  padding: 1.8em; min-height: 12.5em;
}
.scr-insights .sealed .s-ghost { filter: blur(5px); opacity: .55; }
.scr-insights .sealed .s-ghost .g-kind { display: flex; align-items: center; gap: .8em; }
.scr-insights .sealed .s-ghost .g-kind i {
  width: 2.2em; height: 2.2em; border-radius: .8em; background: var(--kind-growth-tint); flex: none;
}
.scr-insights .sealed .s-ghost .g-kind span { font-size: 1.2em; font-weight: 700; letter-spacing: .12em; color: var(--kind-growth); text-transform: uppercase; }
.scr-insights .sealed .s-ghost .g-line { height: 1.05em; border-radius: .6em; background: #DCD4EC; margin-top: 1.15em; }
.scr-insights .sealed .s-ghost .g-line.w2 { width: 72%; }
.scr-insights .sealed .s-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; color: var(--juno-text-primary);
  font-size: 1.4em; font-weight: 600; padding: .68em 1.5em; border-radius: 1.8em;
  box-shadow: 0 .5em 1.8em rgba(138,127,216,.30);
  white-space: nowrap;
}
.scr-insights .sealed .s-pill b { color: var(--juno-accent-deep); font-weight: 600; }
/* Cascade delay for the 7th printed child (tab bar); 1–6 live in main.css */
.reveal-stage.act2 #reveal-phone .p-body > :nth-child(7) { transition-delay: 1.02s; }

/* ============ S2 · Monthly Review — animated story player ============
   8 full-bleed slides, each its own gradient; a shared status bar +
   segmented progress + ✕. Auto-advances via js/mr-story.js (rAF loop,
   engine-independent). Cover slide carries is-active in the HTML so the
   mockup still reads correctly with JS disabled / reduced motion. */
.scr-mr {
  color: #fff;
  background: linear-gradient(180deg, var(--mr-cover-top), var(--mr-cover-bottom));
}
.scr-mr .p-status { color: #fff; z-index: 25; }

/* Shared chrome: segmented progress + decorative close */
.scr-mr .mr-topbar {
  position: absolute; top: 5.3em; left: 0; right: 0; z-index: 25;
  display: flex; align-items: center; gap: 1.4em; padding: 0 2.6em;
}
.scr-mr .mr-progress { flex: 1; display: flex; gap: .5em; }
.scr-mr .mr-progress i {
  flex: 1; height: .34em; border-radius: .3em;
  background: rgba(255,255,255,.28); overflow: hidden;
}
.scr-mr .mr-progress i > s {
  display: block; height: 100%; width: 0; border-radius: .3em;
  background: rgba(255,255,255,.96); text-decoration: none;
}
.scr-mr .mr-x {
  flex: none; width: 2.7em; height: 2.7em; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4em; line-height: 1;
  color: #fff; background: rgba(255,255,255,.2);
}

/* Slide stack */
.scr-mr .mr-stage { position: absolute; inset: 0; z-index: 1; }
.scr-mr .mr-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .55s ease;
}
.scr-mr .mr-slide.is-active { opacity: 1; z-index: 2; }

/* Per-slide gradients — DESIGN_SPEC §4 */
.scr-mr .s-cover {
  background:
    radial-gradient(88% 52% at 50% 14%, var(--mr-cover-radial), transparent 62%),
    linear-gradient(180deg, var(--mr-cover-top), var(--mr-cover-bottom));
}
.scr-mr .s-chapter    { background: linear-gradient(180deg, var(--mr-chapter-a), var(--mr-chapter-b) 52%, var(--mr-chapter-c)); }
.scr-mr .s-gratitudes { background: linear-gradient(180deg, var(--mr-gratitudes-a), var(--mr-gratitudes-b) 52%, var(--mr-gratitudes-c)); }
.scr-mr .s-prides     { background: linear-gradient(180deg, var(--mr-prides-a), var(--mr-prides-b) 52%, var(--mr-prides-c)); }
.scr-mr .s-mood       { background: linear-gradient(180deg, var(--mr-mood-a), var(--mr-mood-b) 52%, var(--mr-mood-c)); }
.scr-mr .s-advice     { background: linear-gradient(180deg, var(--mr-advice-a), var(--mr-advice-b) 52%, var(--mr-advice-c)); }
.scr-mr .s-moved      { background: linear-gradient(180deg, var(--mr-goals-a), var(--mr-goals-b) 52%, var(--mr-goals-c)); }
.scr-mr .s-honest     { background: linear-gradient(180deg, var(--mr-top-entry-a), var(--mr-top-entry-b) 55%, var(--mr-top-entry-c)); }
.scr-mr .s-momentum   { background: linear-gradient(165deg, var(--mr-momentum-a), var(--mr-momentum-b) 55%, var(--mr-momentum-c)); }

/* Slide content shell */
.scr-mr .mr-content {
  position: absolute; inset: 0; overflow: hidden;
  padding: 11em 2.6em 2.6em;
  display: flex; flex-direction: column; color: #fff;
}
.scr-mr .s-cover .mr-content { align-items: center; text-align: center; }

/* Stagger-in: eyebrow → headline → cards. User's own words print with
   the card (no char animation). Restarts each time a slide re-activates. */
@keyframes mrRise { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
.scr-mr .mr-content > * { opacity: 0; }
.scr-mr .mr-slide.is-active .mr-content > * { animation: mrRise .5s var(--rise) both; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(1) { animation-delay: .04s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(2) { animation-delay: .13s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(3) { animation-delay: .22s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(4) { animation-delay: .31s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(5) { animation-delay: .40s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(6) { animation-delay: .49s; }
.scr-mr .mr-slide.is-active .mr-content > *:nth-child(7) { animation-delay: .58s; }

/* Shared type */
.scr-mr .mr-eb {
  font-size: 1.15em; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.scr-mr .mr-hl {
  font-family: var(--serif); font-size: 3.6em; font-weight: 600;
  line-height: 1.1; letter-spacing: -.01em; margin: .3em 0 0; color: #fff;
}
.scr-mr .mr-hl .gold { font-style: italic; color: var(--mr-gold-highlight); }
.scr-mr .mr-body-serif {
  font-family: var(--serif); font-size: 1.72em; line-height: 1.4;
  color: rgba(255,255,255,.95); margin: .75em 0 0;
}
.scr-mr .mr-micro { font-size: 1.2em; color: rgba(255,255,255,.58); margin-top: 1.4em; }
.scr-mr .mr-micro.left { text-align: left; margin-top: 1.5em; }

/* Cover */
.scr-mr .cover-hl { font-size: 4.8em; line-height: 1.02; margin: 0; }
.scr-mr .mr-subtitle {
  font-family: var(--serif); font-style: italic; font-size: 1.95em;
  color: rgba(255,255,255,.9); margin-top: .5em;
}
.scr-mr .mr-mascot { margin-top: 1.6em; }
.scr-mr .mr-mascot img { width: 7em; height: auto; display: block; }
.scr-mr .mr-fill { flex: 1; min-height: 1.4em; }
.scr-mr .mr-cover-sub { font-size: 1.65em; line-height: 1.4; color: rgba(255,255,255,.86); margin-top: .7em; }
.scr-mr .s-cover .mr-micro { margin-top: 1.3em; }

/* Frosted quote card (user's own words) */
.scr-mr .mr-quote {
  margin-top: 1.5em; padding: 1.4em 1.5em; border-radius: 1.8em;
  background: rgba(255,255,255,.14); border: .1em solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scr-mr .mr-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.7em; line-height: 1.4; color: #fff; }
.scr-mr .mr-quote-sig { display: block; margin-top: .75em; font-size: 1.15em; font-weight: 700; letter-spacing: .14em; color: var(--mr-gold-highlight); }

/* Frosted cards */
.scr-mr .mr-card {
  margin-top: 1.1em; padding: 1.25em 1.4em; border-radius: 1.8em;
  background: rgba(255,255,255,.14); border: .1em solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scr-mr .mr-card-label {
  font-size: 1.05em; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .5em;
}
.scr-mr .mr-card-label.green  { color: #BFE8C8; }
.scr-mr .mr-card-label.amber  { color: #F3C98C; }
.scr-mr .mr-card-label.violet { color: #CFB9F4; }
.scr-mr .mr-card-body { font-size: 1.4em; line-height: 1.4; color: rgba(255,255,255,.95); }
.scr-mr .mr-card-body.serif { font-family: var(--serif); font-size: 1.6em; }

/* Mood-mix rows */
.scr-mr .mm-rows { margin-top: 1.3em; display: flex; flex-direction: column; gap: 1.05em; }
.scr-mr .mm-row { display: flex; align-items: center; gap: .9em; }
.scr-mr .mm-emoji { flex: none; width: 1.5em; font-size: 1.9em; line-height: 1; text-align: center; }
.scr-mr .mm-label { flex: none; width: 4.8em; font-size: 1.35em; font-weight: 600; color: #fff; }
.scr-mr .mm-bar { flex: 1; height: .75em; border-radius: .5em; background: rgba(255,255,255,.18); overflow: hidden; }
.scr-mr .mm-bar i { display: block; height: 100%; width: 0; border-radius: .5em; transition: width .9s var(--rise) .3s; }
.scr-mr .mr-slide.is-active .mm-bar i { width: var(--w); }
.scr-mr .mm-pct { flex: none; width: 3.3em; text-align: right; font-size: 1.3em; font-weight: 700; color: #fff; }

/* What-you-moved rows */
.scr-mr .mv-rows { margin-top: 1.3em; display: flex; flex-direction: column; gap: .7em; }
.scr-mr .mv-row {
  display: flex; align-items: center; gap: .9em; padding: .85em 1.1em;
  border-radius: 1.5em; background: rgba(255,255,255,.12); border: .08em solid rgba(255,255,255,.14);
}
.scr-mr .mv-row.done { background: rgba(255,255,255,.2); }
.scr-mr .mv-check {
  flex: none; width: 2em; height: 2em; border-radius: 50%; background: #fff;
  color: var(--mr-goals-b); display: grid; place-items: center; font-size: 1.1em; font-weight: 800;
}
.scr-mr .mv-radio { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; border: .18em solid rgba(255,255,255,.55); }
.scr-mr .mv-title { flex: 1; font-size: 1.4em; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-mr .mv-pct { flex: none; font-size: 1.35em; font-weight: 700; color: rgba(255,255,255,.92); }
.scr-mr .mv-done { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.scr-mr .mv-done b { font-size: 1.15em; font-weight: 800; letter-spacing: .08em; color: #fff; }
.scr-mr .mv-done span { font-size: 1.1em; color: rgba(255,255,255,.75); }

/* Honest page (gold slide): frosted journal-entry card, user's own words */
.scr-mr .mr-entry {
  margin-top: 1.7em; padding: 1.7em 1.6em 1.35em; border-radius: 1.9em;
  background: rgba(255,255,255,.14); border: .1em solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scr-mr .mr-entry-body { margin: 0; font-family: var(--serif); font-size: 1.74em; line-height: 1.44; color: #fff; }
.scr-mr .mr-entry-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.3em; }
.scr-mr .mr-entry-date { font-size: 1.3em; color: rgba(255,255,255,.72); }
.scr-mr .mr-entry-open { font-size: 1.35em; font-weight: 600; color: #fff; }

/* Momentum: earned bookmark + share buttons */
.scr-mr .mr-card.earned .mr-earned { display: flex; align-items: center; gap: .8em; }
.scr-mr .mr-bookmark { flex: none; font-size: 1.7em; line-height: 1; }
.scr-mr .mr-earned b { display: block; font-size: 1.4em; font-weight: 600; color: #fff; }
.scr-mr .mr-earned span { display: block; margin-top: .2em; font-size: 1.2em; color: rgba(255,255,255,.78); }
.scr-mr .mr-btns { display: flex; gap: .8em; margin-top: 1.5em; }
.scr-mr .mr-btn {
  flex: 1; text-align: center; font-size: 1.4em; font-weight: 600;
  padding: .82em 1em; border-radius: 1.6em; color: #fff;
  background: rgba(255,255,255,.18); border: .1em solid rgba(255,255,255,.24);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr-mr .mr-btn.ghost { background: rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) {
  .scr-mr .mr-slide { transition: none; }
  .scr-mr .mr-content > *,
  .scr-mr .mr-slide.is-active .mr-content > * { opacity: 1; animation: none; transform: none; }
  .scr-mr .mm-bar i,
  .scr-mr .mr-slide.is-active .mm-bar i { width: var(--w); transition: none; }
}

/* ============ S3 · Inner Weather — "Your weather" ============ */
.scr-weather .hero-card {
  background: var(--juno-cream); border-radius: 2.2em; padding: 1.5em 1.4em; margin-top: .8em;
  box-shadow: var(--sh-card); display: flex; gap: 1.4em; align-items: center;
}
.scr-weather .mood-tile {
  flex: none; width: 7em; height: 7em; border-radius: 2em;
  background: linear-gradient(135deg, var(--mood-calm-start), var(--mood-calm-end));
  display: flex; align-items: center; justify-content: center;
  font-size: 1em;
}
.scr-weather .mood-tile span { font-size: 3.7em; line-height: 1; }
.scr-weather .hero-card .h-eyebrow { font-size: 1.1em; font-weight: 700; letter-spacing: .14em; color: var(--juno-text-tertiary); text-transform: uppercase; }
.scr-weather .hero-card h4 { margin: .16em 0 .2em; font-family: var(--serif); font-size: 2.35em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.scr-weather .hero-card .h-sub { font-size: 1.2em; color: var(--juno-text-secondary); white-space: nowrap; }
.scr-weather .section-label { margin: 1.6em 0 0; font-size: 1.2em; font-weight: 700; letter-spacing: .16em; color: var(--juno-text-tertiary); text-transform: uppercase; }
.scr-weather .notice { padding: 1.3em 1.5em; margin-top: .9em; }
.scr-weather .notice.warm { border: .14em solid rgba(233,122,63,.35); box-shadow: 0 .4em 1.6em rgba(217,166,109,.14); }
.scr-weather .n-head { display: flex; gap: 1.3em; align-items: flex-start; }
.scr-weather .n-tile {
  flex: none; width: 5.6em; height: 5.6em; border-radius: 1.6em;
  display: flex; align-items: center; justify-content: center;
}
.scr-weather .n-tile svg { width: 2.8em; height: 2.8em; }
.scr-weather .n-kind { font-size: 1.15em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--juno-accent-deep); }
.scr-weather .n-kind.amber { color: #E97A3F; }
.scr-weather .n-head h5 { margin: .2em 0 0; font-family: var(--serif); font-size: 1.9em; font-weight: 600; line-height: 1.18; letter-spacing: -.005em; }
.scr-weather .n-body { margin: .7em 0 0; font-size: 1.25em; line-height: 1.38; color: var(--juno-text-secondary); }
.scr-weather .n-src { margin-top: .6em; font-size: 1.25em; font-weight: 600; color: var(--juno-accent-deep); }
.scr-weather .range-chips { display: flex; gap: .9em; margin-top: 1.4em; }
.scr-weather .range-chips span {
  font-size: 1.4em; font-weight: 600; padding: .5em 1.2em; border-radius: 1.7em;
  background: #fff; color: var(--juno-text-primary); box-shadow: var(--sh-card);
}
.scr-weather .range-chips span.on { background: var(--juno-accent-soft); color: var(--juno-accent-deep); }
.scr-weather .chart-card h5 { margin: 0; font-family: var(--serif); font-size: 2em; font-weight: 600; letter-spacing: -.005em; }
.scr-weather .chart-card .cc-sub { margin-top: .35em; font-size: 1.3em; color: var(--juno-text-secondary); }
.scr-weather .chart-card svg { display: block; width: 100%; height: 9.6em; margin-top: .7em; }
.scr-weather .cc-axis { display: flex; justify-content: space-between; margin-top: .4em; }
.scr-weather .cc-axis span { font-size: 1.05em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--juno-text-tertiary); }

/* ============ S4 · Guided Journal — reef hub ============ */
.scr-reef {
  background:
    linear-gradient(180deg, rgba(5,16,26,.30), rgba(5,16,26,.14) 30%, rgba(5,16,26,.42) 100%),
    url("../assets/images/reef-backdrop.webp") center / cover no-repeat, #0A3049;
  color: #fff;
}
.scr-reef .p-status { color: #fff; }
.scr-reef .p-body { display: flex; flex-direction: column; }
.scr-reef .p-body::after { display: none; }
.scr-reef .reef-close {
  position: relative; z-index: 5;
  width: 4.4em; height: 4.4em; border-radius: 50%; background: #fff; color: var(--juno-text-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .5em 1.6em rgba(0,15,25,.35); margin: .3em 0 0;
  font-size: 1em;
}
.scr-reef .reef-close::before { content: "✕"; font-size: 1.7em; font-weight: 600; }
.scr-reef .reef-header {
  background: rgba(16,16,22,.52); border: .1em solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border-radius: 2.4em; padding: 1.7em 1.9em 1.9em; margin-top: -1.4em;
}
.scr-reef .reef-header h4 {
  margin: 0; font-family: var(--serif); font-size: 2.25em; font-weight: 600;
  line-height: 1.22; text-align: center; color: #fff; letter-spacing: -.01em;
}
.scr-reef .rh-sub { margin-top: .6em; font-size: 1.45em; color: rgba(255,255,255,.92); }
.scr-reef .rh-xp { display: flex; align-items: center; justify-content: space-between; margin-top: .9em; }
.scr-reef .rh-xp .xp-label { font-size: 1.9em; font-weight: 600; color: #fff; }
.scr-reef .rh-shield {
  width: 3.1em; height: 3.4em; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.scr-reef .rh-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr-reef .rh-shield b { position: relative; color: #E8A33D; font-size: 1.6em; font-weight: 800; line-height: 1; }
.scr-reef .xp-track { margin-top: 1em; height: .85em; border-radius: .45em; background: #E4D5F5; }
/* Floating step scene */
.scr-reef .reef-scene { position: relative; flex: 1; margin: .4em -0.4em 0; }
.scr-reef .reef-scene > svg.path-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr-reef .step { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .5em; width: 10.5em; }
/* Smaller tiles + generous spacing (declutter pass, founder 2026-07-12):
   nothing overlaps and every step has room to breathe. */
.scr-reef .s-tile {
  width: 6.6em; height: 6.6em; border-radius: 2em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .7em 1.9em rgba(0,15,25,.45);
}
.scr-reef .s-tile svg { width: 3.7em; height: 3.7em; color: #fff; }
.scr-reef .s-cap {
  font-size: 1.35em; font-weight: 600; color: #fff; text-align: center; line-height: 1.15;
  text-shadow: 0 .15em .8em rgba(0,10,20,.75);
  white-space: nowrap;
}
.scr-reef .step.dim .s-tile { opacity: .82; filter: saturate(.72) brightness(.88); }
.scr-reef .step.locked .s-tile { background: rgba(120,126,140,.85); opacity: .8; }
.scr-reef .s1 .s-tile { background: #3D5AF5; box-shadow: 0 .7em 2.2em rgba(30,60,220,.55), 0 0 2.8em rgba(90,120,255,.4); }
.scr-reef .s2 .s-tile { background: #4E9E58; }
.scr-reef .s3 .s-tile { background: #C03E8E; }
.scr-reef .s4 .s-tile { background: #E0912F; }
/* Clean single diagonal path down the left/centre; the mascot sits clear
   on the lower right so tiles and mascot never overlap. */
.scr-reef .s1 { top: 3%; left: 30%; }
.scr-reef .s2 { top: 21%; left: 5%; }
.scr-reef .s3 { top: 40%; left: 3%; }
.scr-reef .s4 { top: 58%; left: 18%; }
.scr-reef .s5 { top: 75%; left: 34%; }
.scr-reef .s5 .s-tile { width: 5.4em; height: 5.4em; }   /* recedes: next step ahead */
.scr-reef .s5 .s-cap { opacity: .82; }
/* Mascot + thought cloud (lower right, clear of the path) */
.scr-reef .reef-mascot { position: absolute; right: -1em; top: 50%; width: 12.5em; text-align: center; }
.scr-reef .reef-mascot img { width: 11.5em; height: 11.5em; object-fit: contain; filter: drop-shadow(0 .6em 1.6em rgba(0,15,25,.5)); margin-top: 2.2em; }
.scr-reef .cloud {
  position: absolute; top: -8.4em; right: -1.2em; width: 13.2em;
  box-sizing: border-box;
  background: #fff; color: var(--juno-text-primary);
  border: .35em solid #fff; border-radius: 2.6em;
  font-size: 1.3em; font-weight: 600; line-height: 1.25; text-align: center;
  padding: 1em .8em; box-shadow: 0 .6em 2em rgba(0,15,25,.4);
}
.scr-reef .cloud::before, .scr-reef .cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 .3em 1em rgba(0,15,25,.35);
}
.scr-reef .cloud::before { width: 1.5em; height: 1.05em; left: 16%; bottom: -1.9em; }
.scr-reef .cloud::after { width: .95em; height: .7em; left: 7%; bottom: -3.3em; }
.scr-reef .reef-ledger {
  position: relative; z-index: 6;
  text-align: center; font-size: 1.5em; font-weight: 600; color: #fff;
  text-shadow: 0 .15em .9em rgba(0,10,20,.8); margin-bottom: .9em;
}
.scr-reef .reef-cta {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  height: 3.1em; border-radius: 1.6em; font-size: 1.75em; font-weight: 600;
  background: rgba(160,160,175,.38); border: .08em solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9);
}

/* ============ S5 · Composer — New Journal ============ */
/* NOTE: the app ships a subtle mood-tint hairline, but at the phone's rounded
   top corner it read as a stray bright-green line (founder flagged it as a
   defect). Removed entirely — the mood is already carried by the cream mood
   card + rail below, so no top-edge line is needed. */
.scr-composer .c-header { display: flex; align-items: center; gap: 1.2em; height: 6em; }
.scr-composer .c-header .p-title { text-align: center; font-size: 2.55em; white-space: nowrap; }
.scr-composer .date-pill {
  flex: none; background: #fff; color: var(--juno-text-primary);
  font-size: 1.35em; font-weight: 600; padding: .55em 1.05em; border-radius: 1.6em;
  box-shadow: var(--sh-card); letter-spacing: .02em;
}
.scr-composer .c-day {
  text-align: center; margin: .9em 0 .2em;
  font-size: 1.2em; font-weight: 700; letter-spacing: .17em; color: var(--juno-accent); text-transform: uppercase;
}
.scr-composer .c-card { padding: 2.1em; }
.scr-composer .c-label {
  font-family: var(--mono); font-size: 1.05em; font-weight: 600; letter-spacing: .1em;
  color: var(--juno-text-tertiary); text-transform: uppercase;
}
.scr-composer .c-title { font-family: var(--serif); font-size: 2.9em; font-weight: 600; color: #8B84A8; margin: .22em 0 .85em; letter-spacing: -.01em; }
.scr-composer .c-placeholder { font-family: var(--serif); font-style: italic; font-size: 2.4em; color: var(--juno-text-tertiary); line-height: 1.35; margin-top: .35em; min-height: 6.4em; }
.scr-composer .c-foot { display: flex; align-items: center; gap: .8em; margin-top: 1em; font-size: 1.35em; color: var(--juno-text-secondary); }
.scr-composer .c-foot .dot { width: 1.15em; height: 1.15em; border-radius: 50%; background: #A9D3B2; }
.scr-composer .mood-card {
  background: var(--juno-cream); border-radius: 2.2em; padding: 1.7em 1.9em 2.1em; margin-top: 1.6em;
  box-shadow: var(--sh-card);
}
.scr-composer .mc-top { display: flex; align-items: center; justify-content: space-between; }
.scr-composer .mc-top .c-label { color: #8D8672; }
.scr-composer .mc-sel { font-size: 1.5em; font-weight: 600; color: var(--juno-accent-deep); }
.scr-composer .mc-sel .up { font-size: .85em; opacity: .8; }
.scr-composer .mc-name { text-align: center; font-family: var(--serif); font-size: 2.9em; font-weight: 600; color: var(--juno-accent-deep); margin: .5em 0 .55em; }
.scr-composer .mood-rail { position: relative; height: 8em; display: flex; align-items: center; justify-content: space-between; padding: 0 1em; }
.scr-composer .mood-rail::before {
  content: ""; position: absolute; left: -1.9em; right: -1.9em; top: 50%; height: .5em;
  transform: translateY(-50%); background: #E2D6F0; border-radius: .3em;
}
.scr-composer .m-circ {
  position: relative; width: 5.6em; height: 5.6em; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .3em 1em rgba(138,127,216,.14); font-size: 1em;
}
.scr-composer .m-circ span { font-size: 2.9em; line-height: 1; }
.scr-composer .m-circ.sel {
  width: 7.6em; height: 7.6em; background: #CFE7CE;
  box-shadow: 0 0 0 .45em #fff, 0 .7em 2em rgba(110,98,194,.28);
}
.scr-composer .m-circ.sel span { font-size: 4.2em; }
.scr-composer .rail-notch { position: absolute; top: 50%; width: 2.2em; height: 4.4em; background: #fff; transform: translateY(-50%); box-shadow: 0 .3em 1em rgba(138,127,216,.14); }
.scr-composer .rail-notch.l { left: -2.4em; border-radius: 0 2.2em 2.2em 0; }
.scr-composer .rail-notch.r { right: -2.4em; border-radius: 2.2em 0 0 2.2em; }
.scr-composer .c-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8.4em; z-index: 25;
  background: #fff;
  box-shadow: 0 -0.4em 2em rgba(138,127,216,.14);
  display: flex; align-items: center; gap: 1.2em; padding: 0 2.4em 1em;
}
.scr-composer .c-tool {
  width: 5em; height: 5em; border-radius: 50%; background: var(--juno-accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--juno-accent-deep);
}
.scr-composer .c-tool svg { width: 2.3em; height: 2.3em; }
.scr-composer .c-save {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--juno-accent-soft);
  color: var(--juno-text-primary); font-size: 1.9em; font-weight: 600;
  width: 5.4em; height: 2.6em; border-radius: 1.35em;
}

/* ============ S6 · Chat ============ */
.scr-chat .p-body { display: flex; flex-direction: column; padding-bottom: 10.2em; }
.scr-chat .p-body::after { display: none; }
/* Recent messages pin to the bottom (just above the composer), older ones
   tuck under the header — a real chat scrolled to its latest message. This
   keeps a fuller 3-exchange thread from displacing the composer. */
.scr-chat .chat-scroll {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 1.25em; padding-top: 1.2em;
}
.scr-chat .bubble {
  max-width: 82%; font-size: 1.62em; line-height: 1.34;
  padding: .78em 1.02em; border-radius: 1.45em;
}
.scr-chat .bubble.user {
  align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, #8F84DE, #7A6ED0);
  border-bottom-right-radius: .45em;
  box-shadow: 0 .25em 1em rgba(110,98,194,.28);
}
.scr-chat .juno-row { display: flex; align-items: flex-end; gap: .8em; }
/* Small circular Juno avatar (matches the round Juno head in chat.png).
   The app's close-up head GIFs are banned, so we use Juno-waveboth — the one
   approved mascot whose face is large, front-facing and centred with no props
   to crop around (JUNO_MAIN holds a book that intrudes). We scale into the
   face (origin ~ the eyes) so it reads as a clean head, not a shrunk body. */
.scr-chat .j-avatar {
  flex: none; width: 5em; height: 5em; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #F3ECFB, #E1D6F2);
  overflow: hidden;
  box-shadow: 0 .25em .9em rgba(138,127,216,.25);
}
.scr-chat .j-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.34); transform-origin: 50% 33%;
}
.scr-chat .bubble.juno {
  background: #fff; color: var(--juno-text-primary);
  border-bottom-left-radius: .45em; box-shadow: 0 .25em 1em rgba(138,127,216,.10);
}
.scr-chat .composer { display: flex; align-items: center; gap: 1em; margin-top: 1.2em; }
.scr-chat .composer .field {
  flex: 1; display: flex; align-items: center; gap: 1em;
  background: #fff; border-radius: 2.8em; height: 5.6em; padding: 0 1.7em;
  box-shadow: var(--sh-card); font-size: 1.55em; color: var(--juno-text-tertiary);
}
.scr-chat .composer .field svg { width: 1.35em; height: 1.35em; margin-left: auto; color: var(--juno-text-secondary); flex: none; }
.scr-chat .composer .send {
  flex: none; width: 5.6em; height: 5.6em; border-radius: 50%;
  background: linear-gradient(180deg, var(--juno-accent), var(--juno-accent-deep));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1em; font-weight: 700; box-shadow: 0 .3em 1.2em rgba(110,98,194,.35);
}
.scr-chat .composer .send::before { content: "↑"; font-size: 2.6em; }

/* ============ S7 · Tasks & Goals ============ */
.scr-tasks .p-body { padding-bottom: 10.2em; }
.scr-tasks .day-strip { display: flex; justify-content: space-between; margin-top: .8em; padding: 0 .6em; }
.scr-tasks .day {
  width: 6.4em; height: 7em; border-radius: 1.8em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
}
.scr-tasks .day .num { font-family: var(--serif); font-size: 2.2em; font-weight: 600; }
.scr-tasks .day .dow { font-size: 1.25em; font-weight: 500; color: var(--juno-text-secondary); }
.scr-tasks .day.sel { background: linear-gradient(180deg, var(--juno-accent), #7C70CE); color: #fff; box-shadow: 0 .5em 1.6em rgba(110,98,194,.38); }
.scr-tasks .day.sel .dow { color: rgba(255,255,255,.85); }
.scr-tasks .date-line { text-align: center; margin-top: 1.1em; font-size: 1.55em; color: var(--juno-text-secondary); }
.scr-tasks .filters { display: flex; gap: .9em; margin-top: 1.4em; }
.scr-tasks .filters span {
  display: flex; align-items: center; gap: .55em;
  font-size: 1.45em; font-weight: 600; padding: .55em 1.2em; border-radius: 1.7em;
  background: #fff; color: var(--juno-text-primary); box-shadow: var(--sh-card);
}
.scr-tasks .filters svg { width: 1.25em; height: 1.25em; }
.scr-tasks .filters span.on { background: var(--juno-accent-soft); color: var(--juno-accent-deep); }
.scr-tasks .t-cell { display: flex; gap: 1.4em; align-items: flex-start; padding: 1.9em 1.8em; }
.scr-tasks .t-check {
  flex: none; width: 4.4em; height: 4.4em; border-radius: 50%;
  border: .2em solid var(--juno-accent-soft); margin-top: .2em;
}
.scr-tasks .t-main { flex: 1; min-width: 0; }
.scr-tasks .t-cell h5 { margin: 0 0 .35em; font-family: var(--serif); font-size: 2.2em; font-weight: 600; line-height: 1.18; letter-spacing: -.005em; }
.scr-tasks .t-why { font-size: 1.45em; line-height: 1.35; color: var(--juno-text-secondary); }
.scr-tasks .t-meta { display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1em; }
.scr-tasks .t-meta span { font-size: 1.3em; font-weight: 600; padding: .42em 1em; border-radius: 1.4em; }
.scr-tasks .t-meta .time { background: var(--juno-accent-soft); color: var(--juno-accent-deep); }
.scr-tasks .t-meta .pri-med { background: var(--kind-trigger-tint); color: var(--kind-trigger); }
.scr-tasks .t-progress { display: flex; align-items: center; gap: 1em; margin-top: 1.2em; }
.scr-tasks .t-bar { flex: 1; height: .45em; border-radius: .3em; background: var(--juno-accent-soft); overflow: hidden; }
.scr-tasks .t-bar i { display: block; height: 100%; background: var(--juno-accent); border-radius: .3em; }
.scr-tasks .t-pct { font-size: 1.25em; color: var(--juno-text-secondary); font-weight: 600; }
.scr-tasks .fab, .scr-goals .fab {
  position: absolute; right: 2.4em; bottom: 10.4em; z-index: 26;
  width: 6.2em; height: 6.2em; border-radius: 50%;
  background: linear-gradient(180deg, var(--juno-accent), var(--juno-accent-deep));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .8em 2em rgba(110,98,194,.45);
}
.scr-tasks .fab::before, .scr-goals .fab::before { content: "+"; font-size: 3.4em; font-weight: 300; line-height: 1; transform: translateY(-.05em); }

/* ============ S7b · Goals (its own phone, matches goals.png) ============ */
.scr-goals .p-body { padding-bottom: 10.2em; }
.scr-goals .cat-chips { display: flex; gap: .9em; margin-top: 1.2em; }
.scr-goals .cat-chips span {
  flex: none; font-size: 1.45em; font-weight: 600; padding: .55em 1.3em; border-radius: 1.7em;
  background: var(--juno-accent-soft); color: var(--juno-text-primary); white-space: nowrap;
}
.scr-goals .cat-chips span.on { background: var(--juno-accent); color: #fff; }
.scr-goals .goal-cell { padding: 1.7em 1.8em; }
.scr-goals .goal-top { display: flex; align-items: flex-start; gap: 1.2em; }
.scr-goals .goal-top h5 { margin: 0; font-family: var(--serif); font-size: 2.2em; font-weight: 600; flex: 1; line-height: 1.18; letter-spacing: -.005em; }
.scr-goals .goal-ring { position: relative; flex: none; width: 4.4em; height: 4.4em; margin-top: .1em; }
.scr-goals .goal-ring svg { width: 100%; height: 100%; }
.scr-goals .goal-ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.25em; font-weight: 700; color: var(--juno-accent-deep);
}
.scr-goals .goal-deadline { margin-top: .75em; font-size: 1.45em; color: var(--juno-text-secondary); }
.scr-goals .goal-deadline b { color: var(--juno-text-primary); font-weight: 700; }
.scr-goals .goal-sub { margin-top: .25em; font-size: 1.35em; color: var(--juno-text-tertiary); }
.scr-goals .goal-foot {
  margin-top: 1.25em; padding: 1.05em 1.2em; border-radius: 1.3em;
  background: var(--juno-cream);
  text-align: center; font-size: 1.45em; font-weight: 600; color: var(--juno-accent-deep);
}

/* ============ S8 · Streaks & Badges ============ */
.scr-streak .p-body { padding-bottom: 10.2em; }
.scr-streak .flame-hero { display: flex; align-items: center; justify-content: center; gap: 1.8em; margin-top: .8em; }
.scr-streak .flame-hero img { width: 11.5em; height: 11.5em; object-fit: contain; flex: none; }
.scr-streak .fh-count .count { display: block; font-family: var(--serif); font-size: 4.6em; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.scr-streak .fh-count .fh-label { display: block; margin-top: .35em; font-family: var(--serif); font-size: 1.75em; font-weight: 600; color: var(--juno-text-secondary); max-width: 8em; line-height: 1.2; }
.scr-streak .week { display: flex; justify-content: space-between; margin-top: 1.6em; padding: 0 .4em; }
.scr-streak .wd { text-align: center; font-size: 1em; color: var(--juno-text-tertiary); font-weight: 600; }
.scr-streak .wd .d {
  width: 3.2em; height: 3.2em; border-radius: 50%; margin: 0 auto .4em;
  background: var(--juno-accent-soft);
  display: flex; align-items: center; justify-content: center; font-size: 1em;
}
.scr-streak .wd .d span { font-size: 1.5em; line-height: 1; }
.scr-streak .wd.hit .d { background: #FAE3CC; }
.scr-streak .wd.today .d { box-shadow: 0 0 0 .24em var(--juno-accent); }
.scr-streak .ms-card { padding: 1.7em 1.8em; }
.scr-streak .ms-card .ms-eyebrow { font-size: 1.1em; font-weight: 600; letter-spacing: .12em; color: var(--juno-text-tertiary); text-transform: uppercase; }
.scr-streak .ms-card h4 { margin: .35em 0 .25em; font-family: var(--serif); font-size: 2.1em; font-weight: 600; }
.scr-streak .ms-card .ms-sub { font-size: 1.35em; color: var(--juno-text-secondary); }
.scr-streak .ms-bar { margin-top: 1.1em; height: .6em; border-radius: .4em; background: var(--juno-accent-soft); overflow: hidden; }
.scr-streak .ms-bar i { display: block; height: 100%; width: 80%; min-width: 4%; border-radius: .4em; background: linear-gradient(90deg, var(--juno-accent), var(--juno-accent-deep)); }
.scr-streak .safe {
  margin-top: 1.4em; background: #E8F4EC; color: var(--juno-success-text);
  font-size: 1.4em; font-weight: 600; padding: .75em 1.2em; border-radius: 1.3em;
  display: flex; align-items: center; gap: .6em;
}
.scr-streak .badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; margin-top: 1.5em; }
.scr-streak .badge {
  background: rgba(255,255,255,.7); border-radius: 1.8em; padding: 1.3em .6em 1.2em;
  text-align: center; position: relative;
}
.scr-streak .badge .art { display: block; width: 7em; height: 7em; object-fit: contain; margin: 0 auto .5em; }
.scr-streak .badge .b-name { font-size: 1.1em; font-weight: 600; color: var(--juno-text-secondary); line-height: 1.25; display: block; }
.scr-streak .badge.locked .art { opacity: .4; filter: grayscale(.35); }
.scr-streak .badge.locked .b-name { color: var(--juno-text-tertiary); }
.scr-streak .badge.locked .lock {
  position: absolute; top: .8em; right: .8em;
  width: 2em; height: 2em; border-radius: 50%; background: rgba(42,38,64,.55);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.scr-streak .badge.locked .lock svg { width: 1.1em; height: 1.1em; }