/* ═══════════════════════════════════════════════════════════════
   Math Hero — parents' area styles.
   Mirrors MathHero/Sources/Parent/ParentDesign.swift. Owned by the
   parents' area; the shared V2.2 tokens live in v22.css.

   Two rules hold everywhere below: motion is transform/opacity only
   (this runs in an Android WebView), and every edge is a logical
   property so the Hebrew RTL build mirrors without a second sheet.
   ═══════════════════════════════════════════════════════════════ */

/* ─── ParentTheme (ParentDesign.swift:9-20) ─── */
:root {
  --p-ink: #0E0B24;
  --p-violet: #2A2160;
  --p-plum: #3B2A6B;
  --p-accent: #9F8BFF;
  --p-accent-deep: #6C4BE0;
  --p-gold-top: #FFE58A;
  --p-gold-bot: #E8B33C;
  --p-gold-ink: #3A2A00;
  --p-corner: 22px;
  /* Text that sits on the accent pill / gold capsule — dark in both themes,
     because both fills stay light. */
  --p-on-accent: #0E0B24;
  --p-mist: rgba(255, 255, 255, .08);
  --p-hairline: rgba(255, 255, 255, .14);
  --p-heat-none: var(--track-fill);
  --p-heat-novice: rgba(255, 107, 107, .85);
  --p-heat-learning: rgba(255, 150, 113, .9);
  --p-heat-practiced: rgba(255, 217, 61, .95);
  --p-heat-mastered: var(--green);
}
body[data-theme="light"] {
  /* The light build keeps the same hues but needs a deeper accent to hold
     contrast against a pale card. */
  --p-accent: #6C4BE0;
  --p-accent-deep: #4B2FB5;
  --p-mist: rgba(255, 255, 255, .72);
  --p-hairline: rgba(132, 94, 194, .22);
  --p-on-accent: #FFFFFF;
  --p-heat-novice: rgba(224, 74, 74, .9);
  --p-heat-learning: rgba(224, 106, 62, .9);
  --p-heat-practiced: rgba(224, 168, 0, .9);
}

/* ─── Aurora (ParentDesign.swift:27-57) ───
   Three colour fields drifting on one long loop. Radial gradients rather
   than blurred circles: same look, no per-frame blur in the WebView. */
body.view-parent #parentScreen { position: relative; }
#parentScreen::before {
  content: "";
  position: fixed; inset: -20%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side circle at 28% 22%, color-mix(in srgb, var(--p-accent-deep) 55%, transparent), transparent),
    radial-gradient(closest-side circle at 74% 74%, color-mix(in srgb, var(--teal) 28%, transparent), transparent),
    radial-gradient(closest-side circle at 62% 40%, color-mix(in srgb, var(--purple) 32%, transparent), transparent);
  background-size: 62% 62%, 52% 52%, 46% 46%;
  background-repeat: no-repeat;
  opacity: .5;
  animation: pAuroraDrift 14s ease-in-out infinite alternate;
}
body[data-theme="light"] #parentScreen::before { opacity: .22; }
@keyframes pAuroraDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.06); }
}
#parentTop, #parentScroll { position: relative; z-index: 1; }

/* The scrollers are column flex boxes, so anything that clips its own overflow
   (the shimmering pitch card) would otherwise be squeezed to nothing when the
   content is taller than the viewport. */
#parentScroll > *, .pSheetBody > * { flex: none; }

/* ─── Card + section-title metrics (ParentDesign.swift:19, 257-276) ─── */
#parentScroll .pCard, .pSheetBody .pCard { border-radius: var(--p-corner); }
#parentScroll .pLocked > .pLockVeil, .pSheetBody .pLocked > .pLockVeil {
  border-radius: var(--p-corner);
}
#parentScroll .pCardHead .pIcon, .pSheetBody .pCardHead .pIcon { font-size: 16px; }
#parentScroll .pCardHead b, .pSheetBody .pCardHead b { font-size: 15px; }
#parentScroll .pCardHead .pPill, .pSheetBody .pCardHead .pPill { color: var(--p-accent); }

/* ─── Staggered entrance (ParentDesign `parentEnter`) ─── */
.pEnter { animation: pCardIn .45s cubic-bezier(.3, 1.15, .5, 1) both; }

/* ─── Header identity line + Pro crest ─── */
.pIdent { display: flex; align-items: center; gap: 8px; flex: none; }
.pIdentName {
  font-size: 11px; font-weight: 800; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pCrest {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 3px 7px; border-radius: 999px;
  background: linear-gradient(180deg, var(--p-gold-top), var(--p-gold-bot));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--p-gold-bot) 45%, transparent);
}
.pCrest i { font-style: normal; font-size: 9px; }
.pIdentAvatar {
  margin-inline-start: auto; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: block; overflow: hidden;
  background: var(--card-fill);
  box-shadow: 0 0 0 1.5px var(--card-stroke);
}
.pIdentAvatar.pro { box-shadow: 0 0 0 1.5px var(--p-gold-bot); }
.pIdentAvatar svg { display: block; }
.pCrest b { font-size: 9px; font-weight: 900; letter-spacing: .6px; color: var(--p-gold-ink); }

/* ─── Segmented tabs (ParentDesign `ParentTabs`) ─── */
.pTabs {
  display: flex; gap: 4px; padding: 4px; flex: none;
  border-radius: 999px;
  background: var(--track-fill);
  border: 1px solid var(--p-hairline);
}
.pTab {
  flex: 1; min-height: 36px; border-radius: 999px;
  font-size: 13px; font-weight: 900; color: var(--text-secondary);
  transition: color .2s;
}
.pTab.on {
  color: var(--p-on-accent);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--p-accent) 85%, transparent));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--p-accent) 45%, transparent);
}
body[data-theme="light"] .pTab.on {
  background: linear-gradient(180deg, var(--p-accent), var(--p-accent-deep));
}
.pTab:active { transform: scale(.96); }

/* ─── Week hero card ─── */
.pHero { flex-direction: row; align-items: center; gap: 16px; }
.pHero { border-color: color-mix(in srgb, var(--p-accent) 55%, transparent); }
.pRingWrap { position: relative; flex: none; width: 104px; height: 104px; }
.pRing { display: block; width: 104px; height: 104px; }
.pRingLabel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  direction: ltr;
}
.pRingLabel b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pRingLabel small { font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.pHeroText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pHeroTop { font-size: 12px; font-weight: 900; color: var(--p-accent); }
.pHeroCount {
  font-size: 30px; font-weight: 900; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pHeroSub { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pHeroGoal { font-size: 10px; font-weight: 700; color: var(--text-faint); }

/* ─── Metric tiles (2×2 all-time grid) ─── */
.pTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pTiles4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pTile {
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
  border-radius: 18px;
  padding: 12px;
  /* flex-start, so the LTR-isolated number below still sits on the
     reading-start edge in Hebrew. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  box-shadow: inset 0 1px 0 var(--card-topline);
  min-width: 0;
}
.pTileCentre { align-items: center; text-align: center; gap: 4px; padding: 12px 6px; }
.pTileHead { display: flex; align-items: center; gap: 6px; font-size: 15px; align-self: stretch; }
.pTileDot {
  margin-inline-start: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tint, var(--teal));
  box-shadow: 0 0 6px var(--tint, var(--teal));
}
.pTileEmoji { font-size: 18px; }
/* Digits, a colon and a percent sign read left-to-right in both languages;
   isolating them keeps "0:54" and "46%" intact inside an RTL card. */
.pTileValue, .pImproveVal, .pDelta b, .pDetailStat b, .pCompareStat b, .pLegendStat b,
.pDetailScore, .pBarVal, .pSkillChip small {
  direction: ltr; unicode-bidi: isolate;
}
.pTileValue { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.pTileCentre .pTileValue { font-size: 18px; }
.pTileLbl {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Pro pitch card + gold call to action ─── */
.pPitch {
  position: relative; overflow: hidden; text-align: start;
  border-color: color-mix(in srgb, var(--p-accent) 60%, transparent);
}
.pPitchHead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pPitchHead b { font-size: 14px; font-weight: 900; }
.pGoldCap, .pGoldBtn {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: var(--p-gold-ink);
  background: linear-gradient(180deg, var(--p-gold-top), var(--p-gold-bot));
}
.pGoldBtn:active { transform: scale(.96); }
/* A 2.8s sweep, the one place in the area that shimmers. */
.pPitch::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
  animation: pShimmer 2.8s linear infinite;
}
@keyframes pShimmer {
  from { transform: translate3d(-160%, 0, 0); }
  to   { transform: translate3d(260%, 0, 0); }
}
.pPitch:active { transform: scale(.97); }

/* ─── The three Pro entry buttons ─── */
.pProRow { display: flex; flex-direction: column; gap: 8px; }
.pProPair { display: flex; gap: 8px; }
.pProBtn {
  flex: 1; min-height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 900; padding: 0 8px;
  background: var(--card-fill);
  border: 1px solid color-mix(in srgb, var(--p-accent) 55%, transparent);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .18);
}
.pProBtn > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pProBtn.wide { width: 100%; }
.pProLock { font-size: 11px; flex: none; }
.pProBtn:active { transform: scale(.96); }

/* ─── Bars: per-day counts above, letters below ─── */
.pBarVal {
  font-size: 9px; font-weight: 800; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; min-height: 11px;
}
.pBarsTall { height: 110px; }
.pBarsWeek .pBarTrack i { background: linear-gradient(180deg, var(--p-accent), var(--teal)); }
.pBarsTall .pBarTrack i { background: linear-gradient(180deg, var(--teal), var(--teal-deep)); }

/* ─── Mastery distribution ─── */
.pMastery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pMasteryCell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--track-fill); border-radius: 14px; padding: 8px 4px;
}
.pMasteryEmoji { font-size: 20px; }
.pMasteryCell b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ─── Improvement ─── */
.pImprove { flex-direction: row; align-items: center; gap: 10px; }
.pImproveEmoji { font-size: 22px; }
.pImproveLbl { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.pImproveVal { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ─── Recommended practice ─── */
.pBullet { display: flex; align-items: center; gap: 8px; }
.pBulletDot { color: var(--yellow); font-size: 14px; font-weight: 900; }
.pBulletLbl {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pSmartBtn {
  display: flex; align-items: center; gap: 8px; text-align: start;
  min-height: 48px; padding: 0 12px; border-radius: 14px; margin-top: 4px;
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--teal) 40%, transparent);
  color: #fff;
}
.pSmartEmoji { font-size: 18px; }
.pSmartText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pSmartText b { font-size: 14px; font-weight: 900; }
.pSmartText small {
  font-size: 10px; font-weight: 700; opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pSmartBtn:active { transform: scale(.97); }

/* ─── Screen / empty states ─── */
.pScreenTitle { display: flex; align-items: center; gap: 8px; flex: none; }
.pScreenTitle b { font-size: 20px; font-weight: 900; }
.pEmpty { align-items: center; text-align: center; padding: 34px 16px; }
.pEmptyEmoji { font-size: 48px; }

/* ─── Pro veil ─── */
.pLockHead { font-size: 12px; font-weight: 900; }
.pLockSub {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  max-width: 15rem; line-height: 1.45;
}

/* ─── Trend chart ─── */
.pRange { display: flex; gap: 6px; }
.pRangePill {
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: var(--text-secondary);
  background: var(--track-fill);
}
.pRangePill.on { background: var(--teal); color: #1a1a4e; }
.pRangePill:active { transform: scale(.94); }
.pTrendWrap { direction: ltr; width: 100%; overflow-x: auto; }
.pTrendChart { display: block; width: 100%; height: auto; }
.pTrendAxis { font-size: 9px; font-weight: 700; fill: var(--text-faint); }
.pTrendEmpty { text-align: center; padding: 34px 0; color: var(--text-faint); }
.pTrendLegend { display: flex; flex-wrap: wrap; gap: 14px; }
.pLegendStat { display: inline-flex; align-items: center; gap: 5px; }
.pLegendStat i { font-style: normal; font-size: 13px; }
.pLegendStat b { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pLegendStat small { font-size: 11px; font-weight: 700; color: var(--text-faint); }

/* ─── Skill heat map ─── */
.pHeatRow { display: flex; align-items: center; gap: 5px; }
.pHeatOp { width: 24px; text-align: center; font-size: 14px; flex: none; }
.pHeatRow { flex-wrap: nowrap; }
.pHeatCell {
  flex: 1 1 18px; min-width: 0; max-width: 26px; aspect-ratio: 1;
  border-radius: 7px; border: 1px solid var(--card-stroke);
}
.pHeatCell:active { transform: scale(.9); }
.heat-none { background: var(--p-heat-none); }
.heat-novice { background: var(--p-heat-novice); }
.heat-learning { background: var(--p-heat-learning); }
.heat-practiced { background: var(--p-heat-practiced); }
.heat-mastered { background: var(--p-heat-mastered); }
.pHeatLegend { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.pHeatKey { display: inline-flex; align-items: center; gap: 4px; }
.pHeatSwatch { width: 11px; height: 11px; border-radius: 3px; display: block;
  border: 1px solid var(--card-stroke); }
.pHeatKey small { font-size: 10px; font-weight: 700; color: var(--text-faint); }

/* ─── Skill detail overlay ─── */
.pDetail {
  position: fixed; inset: 0; z-index: 98;
  display: flex; align-items: center; justify-content: center; padding: 0 40px;
}
.pDetailDim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pDetailCard {
  position: relative; width: 100%; max-width: 300px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: 22px;
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-bot));
  border: 1.5px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 50%, transparent);
  animation: pDetailIn .22s var(--m-snappy) both;
}
@keyframes pDetailIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.pDetailName { font-size: 18px; font-weight: 900; text-align: center; }
.pDetailStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pDetailStat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pDetailStat b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pDetailStat small { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-align: center; }
.pDetailTrend { display: flex; align-items: center; gap: 8px; }
.pDetailArrow { font-size: 16px; font-weight: 900; }
.pDetailTrendLbl { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.pDetailScore {
  font-size: 13px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

/* ─── Error analysis badges ─── */
.pBadge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--badge-tint);
  background: color-mix(in srgb, var(--badge-tint) 30%, transparent);
}
.pBadge i { font-style: normal; font-size: 12px; }
.pBadge b { font-size: 11px; font-weight: 900; }
.pBadge.rush { --badge-tint: var(--orange); }
.pBadge.struggle { --badge-tint: var(--purple); }

/* ─── Recommendation rows ─── */
.pRec {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--track-fill); border-radius: 14px; padding: 12px;
}
.pRecEmoji { font-size: 22px; flex: none; }
.pRecText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pRecReason { font-size: 13px; font-weight: 700; line-height: 1.45; }
.pRecAction {
  font-size: 11px; font-weight: 900; color: #1a1a4e;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--yellow) 90%, transparent);
}

/* ─── Compare children ─── */
.pCompare {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--track-fill); border-radius: 14px; padding: 12px;
}
.pCompareName { font-size: 14px; font-weight: 900; }
.pCompareStats { display: flex; flex-wrap: wrap; gap: 12px; }
.pCompareStat { display: inline-flex; align-items: center; gap: 4px; }
.pCompareStat i { font-style: normal; font-size: 12px; }
.pCompareStat b { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ─── Preset chips (limit / goal / count / hour) ─── */
.pChipRow { display: flex; gap: 6px; }
.pPreset {
  flex: 1; min-width: 0; min-height: 32px; padding: 0 8px; border-radius: 10px;
  font-size: 11px; font-weight: 900; color: var(--text-secondary);
  background: var(--track-fill);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pPreset.on {
  color: #1a1a4e;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
}
.pPreset:active { transform: scale(.94); }
.pGrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pRowLock { font-size: 10px; }
.pRowValue {
  font-size: 14px; font-weight: 900; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Full-screen sub-screens (Weekly Report, Custom Practice) ─── */
.pSheet, .pSheet.modal.open {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 10px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--bg-top), var(--bg-mid), var(--bg-bot));
  animation: pSheetIn .28s var(--m-snappy) both;
}
/* Dismissed by the shell's back gesture, which only clears `.open`. */
.pSheet:not(.open) { display: none; }
@keyframes pSheetIn { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.pSheetHead { display: flex; align-items: center; gap: 10px; flex: none; }
.pSheetTitles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pSheetTitles b { font-size: 22px; font-weight: 900; }
.pSheetTitles small { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.pSheetClose {
  width: 38px; height: 38px; border-radius: 50%; flex: none; font-size: 15px; font-weight: 900;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.pSheetClose:active { transform: scale(.93); }
.pSheetBody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px;
}
.pSheetBody::-webkit-scrollbar { display: none; }

/* ─── Weekly report: locked Pro sections + deltas ─── */
.pLockedCard {
  flex-direction: row; align-items: center; gap: 10px; text-align: start;
  opacity: .78;
}
.pLockedEmoji { font-size: 18px; opacity: .55; }
.pLockedText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pLockedText b { font-size: 15px; font-weight: 900; color: var(--text-secondary); }
.pLockedText small { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.pLockedIcon { font-size: 14px; }
.pLockedCard:active { transform: scale(.97); }
.pDeltaRow { display: flex; flex-wrap: wrap; gap: 10px; }
.pDelta {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
}
.pDelta b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pDelta small { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.pDelta.up { background: color-mix(in srgb, var(--green) 14%, transparent); }
.pDelta.up b { color: var(--green); }
.pDelta.down { background: color-mix(in srgb, var(--red) 14%, transparent); }
.pDelta.down b { color: var(--red); }

/* ─── Custom practice builder ─── */
.pOpTitle { font-size: 12px; font-weight: 900; }
.pSkillChip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 999px; min-width: 0;
  background: var(--track-fill);
  border: 1px solid var(--card-stroke);
}
.pSkillChip b {
  font-size: 11px; font-weight: 900; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pSkillChip small {
  font-size: 9px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pSkillChip.on {
  color: #fff;
  background: linear-gradient(180deg, var(--tint, var(--purple)),
                              color-mix(in srgb, var(--tint, var(--purple)) 65%, transparent));
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 3px 6px color-mix(in srgb, var(--tint, var(--purple)) 50%, transparent);
}
.pSkillChip.on small { color: rgba(255, 255, 255, .85); }
.pSkillChip:active { transform: scale(.94); }
.pHint { text-align: center; font-weight: 800; }
.pSlider { display: flex; align-items: center; gap: 10px; }
.pSlider small { font-size: 12px; font-weight: 700; color: var(--text-secondary); flex: none; }
.pSlider input[type="range"] {
  flex: 1; min-width: 0; accent-color: var(--teal); height: 28px;
}
.pLevelLbl {
  text-align: center; font-size: 14px; font-weight: 900; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.pSummary {
  text-align: center; font-size: 13px; font-weight: 700; line-height: 1.5;
  padding: 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--purple) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--purple) 40%, transparent);
}
.pStartBtn {
  flex: none; min-height: 52px; border-radius: 16px;
  font-size: 17px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(180deg, var(--green), var(--teal-deep));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--green) 45%, transparent);
}
.pStartBtn[disabled] {
  color: var(--text-faint); background: var(--track-fill);
  border-color: var(--card-stroke); box-shadow: none;
}
.pStartBtn:not([disabled]):active { transform: scale(.97); }

/* ─── Gate ───
   The locked door needs to look like one: a crest, then the reason, then
   the way in (ParentDashboardView.swift:130-153). */
#gateModal .mhead {
  border-radius: 50%;
  background: radial-gradient(closest-side circle,
              color-mix(in srgb, var(--p-accent) 35%, transparent), transparent);
  padding: 18px 0;
}
.pGateBody { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pGatePrompt { font-size: 15px; font-weight: 700; color: var(--text-secondary); text-align: center; }
.pGateQ { direction: ltr; font-variant-numeric: tabular-nums; }
.pGateGo {
  min-height: 46px; border-radius: 14px;
  font-size: 16px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--yellow) 45%, transparent);
}
.pGateGo:active { transform: scale(.96); }
.pGateLinks { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.pShake { animation: pShake .4s ease-in-out both; }
@keyframes pShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-8px, 0, 0); }
  40% { transform: translate3d(8px, 0, 0); }
  60% { transform: translate3d(-5px, 0, 0); }
  80% { transform: translate3d(5px, 0, 0); }
}

/* ─── Reduced motion: keep the layout, drop the movement ─── */
@media (prefers-reduced-motion: reduce) {
  #parentScreen::before, .pPitch::after { animation: none; }
  .pEnter, .pDetailCard, .pSheet, .pShake, .pCard, .pBarTrack i {
    animation: none !important;
  }
}

/* ─── Welcome to Parent Pro ─── */
/* The card gives its whole surface over for a moment, the way iOS swaps the
   paywall for the celebration rather than tucking a line above the benefits. */
.mcard.pwCelebrate {
  align-items: center; justify-content: center; text-align: center;
  gap: 14px; padding: 32px;
  animation: pwCelebrateIn .45s var(--m-bouncy);
}
.pwCrown {
  font-size: 64px; line-height: 1;
  filter: drop-shadow(0 0 16px rgba(255, 217, 61, .7));
}
.pwWelcomeTitle {
  font-size: 24px; font-weight: 900; line-height: 1.25;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes pwCelebrateIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mcard.pwCelebrate { animation: none; }
}