/* ─────────────────────────────────────────────────────────────
   Phone mockup — three app screens (Today · Team · League) that
   cross-fade every 5 s. Component styles are lifted from the Steps
   design system (StepArc, StreakPill, RankRow, LeagueBoardRow,
   GlassProgressBar, SegmentedToggle, DayStepper, AppBottomNav).
   Frame is 414 × 868 and scales down on narrow viewports via
   --phone-scale (set in js/site.js).
   ───────────────────────────────────────────────────────────── */

.phone-wrap {
  margin-top: 48px; width: 100%;
  height: calc(868px * var(--phone-scale, 1));
  display: flex; justify-content: center; align-items: flex-start; overflow: visible;
}
.phone {
  flex: none; width: 414px; height: 868px;
  transform: scale(var(--phone-scale, 1)); transform-origin: top center;
  border-radius: 54px; padding: 12px; background: #0b0b0d;
  box-shadow: 0 40px 90px rgba(20, 24, 18, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.phone__screen {
  position: relative; height: 844px; border-radius: 42px; overflow: hidden;
  background: var(--night-base); pointer-events: none;
}
.phone__status {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  color: #FFFFFF;
}
.phone__status .time { font-size: 14px; font-weight: 700; }
.phone__status .icon { font-size: 17px; }
.phone__home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 5px; border-radius: 3px; background: var(--white-55); z-index: 60;
}
.phone[data-screen="2"] .phone__status { color: var(--forest); }
.phone[data-screen="2"] .phone__home { background: var(--forest-45); }

/* Screens */
.screen { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.screen.is-active { opacity: 1; }
.screen__photo {
  position: absolute; inset: 0;
  background-image: url("../assets/backgrounds/landegode_day_1.jpg");
  background-size: cover; background-position: center top;
}
/* Progressive downward blur — Today recipe */
.screen--today .screen__photo--b1 { filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 68%); mask-image: linear-gradient(to bottom, transparent 48%, #000 68%); }
.screen--today .screen__photo--b2 { filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 64%, #000 84%); mask-image: linear-gradient(to bottom, transparent 64%, #000 84%); }
.screen--today .screen__photo--b3 { filter: blur(9px); -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 97%); mask-image: linear-gradient(to bottom, transparent 80%, #000 97%); }
/* Team recipe */
.screen--team .screen__photo--b1 { filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 52%); mask-image: linear-gradient(to bottom, transparent 30%, #000 52%); }
.screen--team .screen__photo--b2 { filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 72%); mask-image: linear-gradient(to bottom, transparent 48%, #000 72%); }
.screen--team .screen__photo--b3 { filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 68%, #000 92%); mask-image: linear-gradient(to bottom, transparent 68%, #000 92%); }
.screen__wash { position: absolute; inset: 0; background: rgba(10, 15, 25, 0.15); }
.screen__vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 15, 25, 0.35) 0%, rgba(10, 15, 25, 0) 18%, rgba(10, 15, 25, 0) 62%, rgba(10, 15, 25, 0.5) 100%);
}
.screen--league .screen__linen {
  position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(108, 112, 91, 0.12), transparent 70%), radial-gradient(60% 45% at 85% 70%, rgba(217, 200, 170, 0.20), transparent 70%), #ECE9E3;
}
.screen__body { position: relative; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 56px; }
.screen--team .screen__body, .screen--league .screen__body { padding-top: 64px; }
.screen__spacer { flex: 1; }
.gap-8 { height: 8px; } .gap-10 { height: 10px; } .gap-12 { height: 12px; } .gap-18 { height: 18px; }
.gap-26 { height: 26px; } .gap-28 { height: 28px; } .gap-40 { height: 40px; } .gap-64 { height: 64px; }

/* Today — header */
.today__bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.today__menu { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.today__menu .icon { font-size: 22px; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.today__wordmark {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.streak { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; }
.streak .icon { font-size: 18px; color: var(--amber); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.streak__count { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; color: #FFFFFF; font-feature-settings: var(--tabular); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }

/* Date chevrons + steppers */
.chev { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chev .icon { font-size: 20px; color: var(--white-60); }
.chev--dim .icon { color: var(--white-30); }
.screen--league .chev .icon { color: var(--forest-55); }
.screen--league .chev--dim .icon { color: var(--forest-30); }
.today__date { display: flex; align-items: center; justify-content: center; }
.today__date-label { width: 120px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 2.4px; color: var(--white-95); }
.day-stepper { display: flex; align-items: center; width: 100%; }
.day-stepper__label {
  flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white-95);
}
.screen--league .day-stepper__label { color: var(--forest-95); }
.stepper-row { display: flex; align-items: center; padding: 0 20px; }
.screen--league .stepper-row { padding: 0; }
.stepper-row__side { width: 80px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.stepper-row__mid { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--night-chrome-fill); border: 1px solid var(--night-chrome-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.chip__label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #FFFFFF; }
.chip .icon { font-size: 14px; color: var(--white-72); }
.chip--linen { background: var(--linen-glass-fill); border-color: var(--forest-18); box-shadow: 0 12px 40px rgba(44, 51, 38, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; }
.chip--linen .chip__label { color: var(--forest); }
.chip--linen .icon { color: var(--forest-80); }

/* StepArc */
.arc-wrap { display: flex; justify-content: center; }
.arc { position: relative; width: 340px; height: 192px; }
.arc svg { display: block; overflow: visible; }
.arc__shadow { filter: blur(3px); }
.arc__readout { position: absolute; top: 83px; left: 0; right: 0; text-align: center; }
.arc__count { font-size: 42px; font-weight: 400; letter-spacing: 0; line-height: 1; color: #FFFFFF; font-feature-settings: var(--tabular); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.arc__left { margin-top: 9px; font-size: 13px; font-weight: 500; color: var(--white-72); font-feature-settings: var(--tabular); }
.arc__end { position: absolute; top: 138px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--white-78); font-feature-settings: var(--tabular); }
.arc__end--0 { left: 10px; }
.arc__end--goal { left: 330px; }

/* Today — status */
.today__status { padding: 0 32px; }
.today__head { font-family: var(--font-serif); font-size: 31px; font-weight: 400; line-height: 1.2; color: #FFFFFF; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.today__coach { margin: 12px auto 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--white-78); }

/* Bottom nav (AppBottomNav) */
.nav-wrap { display: flex; justify-content: center; padding-bottom: 24px; }
.bnav {
  display: inline-flex; align-items: center; height: var(--h-nav); padding: 0 6px; gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--night-chrome-fill); border: 1px solid var(--night-chrome-border);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  box-sizing: border-box;
}
.bnav__tab {
  height: var(--h-nav-tab); min-width: 84px; padding: 0 14px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--white-60);
}
.bnav__tab .icon { font-size: 24px; }
.bnav__label { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; }
.bnav__tab.is-active { color: #FFFFFF; }
.bnav__tab.is-active .bnav__label { font-weight: 700; }
.bnav--ivory { background: var(--linen-glass-fill); border-color: var(--linen-glass-border); box-shadow: var(--shadow-glass); }
.bnav--ivory .bnav__tab { color: var(--forest-55); }
.bnav--ivory .bnav__tab.is-active { color: var(--forest); }

/* Team — title + goal */
.screen__title-row { display: flex; justify-content: center; align-items: center; gap: 4px; }
.screen__title-row::before { content: ""; width: 24px; }
.screen__title { font-size: 30px; font-weight: 400; letter-spacing: -0.8px; color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.screen__title-row .icon { font-size: 20px; color: var(--white-72); }
.screen--league .screen__title { color: var(--forest); text-shadow: none; }
.screen--league .screen__title-row .icon { color: var(--forest-80); }
.goal { padding: 0 36px; display: flex; flex-direction: column; align-items: center; }
.goal__pct { font-size: 22px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); line-height: 1; }
.goal__pct span { font-size: 16px; font-weight: 500; }
.goal__eyebrow { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--white-70); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.goal__bar { margin-top: 10px; width: 100%; }
.progress {
  position: relative; height: 14px; width: 100%; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); overflow: hidden;
}
.progress__fill {
  position: absolute; inset: 0; width: 62%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), #FFFFFF); box-shadow: var(--glow-progress);
}
.goal__caption { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; color: var(--white-70); }
.goal__caption .icon { font-size: 14px; }
.goal__streak { margin-top: 6px; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--amber); }
.goal__streak .icon { font-size: 14px; }
.team__heading { font-size: 26px; font-weight: 400; letter-spacing: -0.6px; color: #FFFFFF; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

/* Row lists */
.rows { flex: 1; overflow: hidden; padding: 0 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.screen--league .rows { padding: 0 16px; }

/* RankRow (Team "Top movers") */
.rank-row { display: flex; align-items: center; gap: 10px; }
.rank-row__rank {
  width: 32px; text-align: center; flex-shrink: 0;
  font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1;
  font-feature-settings: var(--tabular); color: var(--white-72); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.rank-row:nth-child(1) .rank-row__rank { color: var(--rank-gold); }
.rank-row:nth-child(2) .rank-row__rank { color: var(--rank-silver); }
.rank-row:nth-child(3) .rank-row__rank { color: var(--rank-bronze); }
.rank-row__pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  height: var(--h-rank); padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--night-glass-fill); border: 1px solid var(--night-glass-border);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  box-shadow: var(--shadow-night); box-sizing: border-box;
}
.rank-row--you .rank-row__pill { background: var(--amber-glass-fill); border-color: var(--amber-glass-border); }
.rank-row__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white-95);
}
.rank-row__steps { font-size: 14px; font-weight: 400; letter-spacing: 0.2px; color: #FFFFFF; flex-shrink: 0; }

/* League — segmented toggle */
.league__tools { padding: 0 18px; }
.league__toggle-row { display: flex; justify-content: flex-end; }
.seg {
  display: inline-flex; padding: 2px; border-radius: var(--radius-pill);
  background: var(--linen-glass-fill); border: 1px solid var(--linen-glass-border); box-shadow: var(--shadow-glass);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
}
.seg__opt {
  height: 24px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--forest-55);
}
.seg__opt.is-active { background: var(--linen-glass-accent-fill); color: var(--forest); font-weight: 700; }

/* LeagueBoardRow */
.board-row { display: flex; align-items: center; }
.board-row__rank { width: 28px; text-align: center; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--forest-45); font-feature-settings: var(--tabular); }
.board-row:nth-child(1) .board-row__rank { color: var(--rank-gold-deep); }
.board-row:nth-child(2) .board-row__rank { color: var(--rank-silver-deep); }
.board-row:nth-child(3) .board-row__rank { color: var(--rank-bronze-deep); }
.board-row__pill {
  flex: 1; min-width: 0; display: flex; align-items: center; margin-left: 8px;
  height: var(--h-board); padding: 0 12px 0 6px; border-radius: var(--radius-pill);
  background: var(--linen-glass-fill); border: 1px solid var(--linen-glass-border); box-shadow: var(--shadow-glass);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); box-sizing: border-box;
}
.board-row__disc {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--forest);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--linen-bg); margin-right: 10px;
}
.board-row__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--forest-95);
}
.board-row__delta { width: 15px; flex-shrink: 0; display: flex; justify-content: center; margin: 0 10px; }
.board-row__delta .icon { font-size: 15px; }
.board-row__delta--up .icon { color: var(--arrow-up); }
.board-row__delta--down .icon { color: var(--arrow-down); }
.board-row__delta--flat { font-size: 12px; color: var(--forest-30); }
.board-row__steps { min-width: 66px; text-align: right; font-size: 14px; font-weight: 400; color: var(--forest); font-feature-settings: var(--tabular); }