/* 436 px mobile reference, excluding the surrounding frame and device chrome. */
:root { font-size: min(2.293577982vw, 10px); }
.mom-sprite { display: block; flex-shrink: 0; background: url('assets/mom-reference.webp') no-repeat; background-size: 95.6rem 147.2rem; }
.mom-header { position: relative; display: grid; grid-template-columns: 3rem minmax(0,1fr) 3.5rem; align-items: start; min-height: calc(6rem + env(safe-area-inset-top,0px)); padding: calc(1rem + env(safe-area-inset-top,0px)) 1.6rem 1rem; gap: 1.5rem; }
.mom-header > div { text-align: left; min-width: 0; }
.mom-header h1 { font-size: 2.64rem; line-height: 3.3rem; letter-spacing: -.07rem; }
.mom-header p { color: var(--muted); font-size: 1.32rem; line-height: 1.98rem; white-space: nowrap; }
.mom-back { display: grid; place-items: center; width: 3rem; height: 3.6rem; color: #1c2838; }
.mom-back .chevron { width: 2.4rem; height: 2.4rem; color: inherit; }
.mom-header-heart { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: #fff0f4; border-radius: 50%; color: #fa83b4; }
.mom-header-heart svg { width: 1.8rem; height: 1.8rem; }
.mom-main { padding: 0 1.4rem; }
.mom-overview { position: relative; min-height: 13rem; border: 1px solid #faf1f8; border-radius: 1.5rem; background: linear-gradient(105deg,#fcf6ff,#fff8fa 55%,#fff2ee); }
.mom-overview-copy { position: relative; z-index: 2; width: 22rem; padding: 1.2rem 1.6rem 1rem; }
.mom-overview h2 { font-size: 2.31rem; line-height: 3.19rem; letter-spacing: -.06rem; white-space: nowrap; }
.mom-overview h2 > span { font-size: 2.75rem; }
.mom-overview-meta { color: #566c94; font-size: 1.375rem; line-height: 2.2rem; white-space: nowrap; }
.mom-overview-meta > span { margin: 0 .4rem; }
.mom-progress { margin-top: .4rem; height: .8rem; width: 18.6rem; border-radius: 2rem; background: #ede3ff; overflow: hidden; }
.mom-progress > span { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#925dff,#a776ff); }
.mom-encouragement { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; padding: .6rem .9rem; width: 19rem; min-height: 3.3rem; background: #f9e9ff; color: #72578e; border-radius: 2rem; font-size: 1.155rem; white-space: nowrap; }
.mom-encouragement > svg:first-child { width: 1.5rem; height: 1.5rem; color: #a66bff; flex-shrink: 0; }
.mom-portrait { position: absolute; z-index: 1; right: 0; top: -2.8rem; width: 12.3rem; height: 17rem; background-position: -55.7rem -32.9rem; mask-image: linear-gradient(to right,transparent 2%,#000 24%); }
.mom-affirmation { position: absolute; right: 10.5rem; top: 5.7rem; color: #b1959a; font-size: 1.155rem; line-height: 1.595rem; font-style: italic; transform: rotate(-6deg); }
.mom-affirmation svg { display: block; width: 1.6rem; height: 1.6rem; margin-left: 3.3rem; margin-top: -1.5rem; margin-bottom: .2rem; color: #efc6cb; }
.mom-panel { position: relative; z-index: 2; margin-top: 1rem; border-radius: 1.5rem; border: 1px solid #f5f1ef; background: #fff; padding: .9rem 1rem; box-shadow: 0 .2rem .6rem #715e5d03; }
.mom-panel .section-heading { height: 2.2rem; }
.mom-panel h2 { font-size: 1.76rem; line-height: 2.42rem; letter-spacing: -.035rem; }
.mom-panel .text-link { font-size: 1.155rem; line-height: 1.98rem; letter-spacing: -.025rem; gap: .3rem; }
.mom-panel .text-link .chevron { width: 1rem; height: 1.8rem; }
.mom-data-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; margin-top: .7rem; }
.mom-metric { position: relative; display: flex; flex-direction: column; align-items: center; height: 9.6rem; border-radius: 1rem; border: 1px solid #f0eaff; padding: .6rem .2rem; }
.metric-weight { background: linear-gradient(120deg,#f5f0ff,#faf7ff); }
.metric-gain { background: linear-gradient(120deg,#fff2fa,#fdf7fc); border-color: #fbeaf5; }
.metric-pressure { background: linear-gradient(120deg,#edfff8,#f4fdf9); border-color: #e5f9f0; }
.metric-wellbeing { background: linear-gradient(120deg,#fff7eb,#fffaf4); border-color: #faf0e4; }
.metric-icon { width: 2.8rem; height: 2.8rem; border-radius: .7rem; }
.weight-icon { background-position: -31.4rem -54.1rem; }
.gain-icon { background-position: -41.4rem -54.1rem; }
.pressure-icon { background-position: -51.4rem -54.1rem; }
.wellbeing-icon { background:none; }
.wellbeing-face { display:block; width:100%; height:100%; }
.face-good { color:#c8ecc7; }
.face-normal { color:#ffe7ae; }
.face-bad { color:#ffc9c7; }
.metric-wellbeing .metric-note { max-width:100%; padding:0 .5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-label { font-size: 1.155rem; line-height: 1.65rem; margin-top: .3rem; white-space: nowrap; }
.mom-metric > strong { font-size: 1.54rem; line-height: 2.2rem; letter-spacing: -.03rem; }
.metric-note { font-size: 1.21rem; line-height: 1.98rem; color: #586e94; }
.mom-metric > .chevron { position: absolute; right: .4rem; bottom: .5rem; width: 1rem; height: 1.7rem; }
.mom-changes { padding: .9rem 1rem .8rem; }
.mom-changes-copy { color: #687b9e; font-size: 1.43rem; line-height: 1.815rem; margin-top: .6rem; letter-spacing: -.018rem; }
.mom-information { display: flex; align-items: center; gap: 1.2rem; margin-top: .7rem; min-height: 4.2rem; background: linear-gradient(110deg,#f8f4ff,#f6f2ff); border-radius: 1.5rem; padding: .7rem 1.2rem; }
.information-icon { display: grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; background: #8756ff; color: white; border-radius: 50%; font-size: 1.76rem; line-height: 2.09rem; font-weight: 700; }
.mom-information p { font-size: 1.155rem; line-height: 1.54rem; color: #697a98; }
.mom-tools { padding-bottom: .8rem; }
/* Same one-wide, two-below composition as Today materials. */
.mom-tools-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.mom-tools-grid > :first-child { grid-column: 1 / -1; }
.mom-practice, .mom-weight-tool { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 16rem; padding: 1.1rem 1.3rem .9rem; border: 1px solid #f0eef4; border-radius: 1.4rem; overflow: hidden; background: #f7f3ef; }
.mom-practice:first-child { min-height: 11.2rem; }
.practice-photo { position: absolute; right: 0; top: 0; width: 65%; height: 100%; background-size: 981% auto; mask-image: linear-gradient(to right,transparent,#000); opacity: .6; pointer-events: none; }
.back-practice-photo { background-position: 34.8% 62.82871%; }
.birth-practice-photo { top: auto; bottom: 3.8rem; height: auto; aspect-ratio: 125 / 65; background-size: 764.8% auto; background-position: 50.30084% 62.82871%; }
.practice-copy, .weight-tool-heading, .mom-weight-tool > p { position: relative; z-index: 1; }
.practice-copy { padding: 0; }
.practice-copy h3, .weight-tool-heading h3 { margin: 0; max-width: 78%; font-size: 1.43rem; line-height: 1.705rem; letter-spacing: -.03rem; }
.mom-practice:first-child .practice-copy h3 { max-width: 72%; font-size: 1.76rem; line-height: 2.09rem; }
.practice-copy p, .mom-weight-tool > p { margin-top: .6rem; margin-bottom: 1rem; max-width: 78%; color: #6c7d9f; font-size: 1.155rem; line-height: 1.54rem; letter-spacing: -.02rem; }
.practice-start, .weight-record { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .8rem; align-self: flex-start; width: auto; max-width: 100%; min-height: 3.2rem; flex-shrink: 0; margin: auto 0 0; padding: .6rem 1.2rem; border-radius: 2rem; font-size: 1.21rem; line-height: 1.43rem; }
.practice-start { background: linear-gradient(105deg,#8954ff,#7847f9); color: white; }
.practice-start svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.weight-tool-heading { display: block; }
.weight-tool-icon { position: absolute; z-index: 0; right: -.5rem; top: -.2rem; width: 4.3rem; height: 4.3rem; border-radius: .8rem; background-position: -55.6rem -89.3rem; opacity: .6; pointer-events: none; }
.weight-tool-heading h3 { max-width: 70%; }
.weight-record { border: 1px solid #a578ff; background: #ffffffde; color: #8252ff; text-align: center; }
.mom-recommendations-grid { margin-top: 1rem; }
.mom-week-article { background: linear-gradient(105deg,#f4fff9,#fff6f1); }
.recommended-mom-art { position: absolute; width: 9rem; height: 11.2rem; right: 0; bottom: 0; background-position: -61rem -65.7rem; mask-image: linear-gradient(to right,transparent,#000 40%); }
@media (max-width: 350px) {
  .mom-changes .section-heading, .mom-recommendations .section-heading { height: auto; align-items: flex-start; gap: .5rem; }
  .mom-changes h2, .mom-recommendations h2 { max-width: 27rem; }
}

.mom-changes-copy p + p { margin-top:1rem; }
.mom-changes-subtitle { font-size:1.65rem; line-height:2.09rem; margin-top:.8rem; }
.mom-metric { min-height:10.8rem; height:auto; padding-bottom:1rem; }
.mom-metric > strong { max-width:100%; overflow-wrap:anywhere; text-align:center; }
.metric-note { font-size:1.1rem; }
.gain-icon { display:grid; place-items:center; background:#fff0f5; color:#64748b; font-size:2.75rem; }
.gain-icon::before { content:'—'; }
.gain-icon.is-up { background:#e9faf0; color:#2a9a60; }
.gain-icon.is-up::before { content:'↑'; }
.gain-icon.is-down { background:#fff0f5; color:#df647d; }
.gain-icon.is-down::before { content:'↓'; }
.mom-data-dialog { margin:auto; width:calc(100% - 3.2rem); max-width:44rem; max-height:calc(100dvh - 3.2rem); overflow:auto; padding:2rem; border:0; border-radius:2rem; background:#fff; color:#191b24; box-shadow:0 1rem 5rem #30224433; }
.mom-data-dialog::backdrop { background:#211a3c66; }
.mom-form-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mom-form-heading h2 { font-size:2.2rem; }
.mom-form-heading button { width:44px; height:44px; flex-shrink:0; border-radius:50%; background:#f6f3fd; font-size:2.75rem; color:#7550cc; }
.mom-form-note { margin:.8rem 0 1.5rem; font-size:1.43rem; line-height:1.5; color:#727987; }
.mom-data-dialog label { display:block; margin-top:1.2rem; font-size:1.54rem; line-height:1.5; }
.mom-data-dialog input { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:44px; margin-top:.5rem; padding:1rem; border:1px solid #ddd4ee; border-radius:1rem; font:inherit; font-size:17.6px; background:#fcfaff; color:#191b24; }
.mom-form-actions { display:flex; gap:1rem; justify-content:flex-end; margin-top:2rem; }
.mom-form-actions button { min-height:44px; padding:1rem 1.6rem; font-size:1.54rem; }
.mom-form-actions button:not(.primary-button) { border-radius:3rem; background:#f6f3fd; color:#7550cc; }
.mom-form-actions .primary-button { border:0; border-radius:1.5rem; background:#794aff; color:#fff; }
.wellbeing-options { min-width:0; margin:0; padding:0; border:0; }
.wellbeing-options legend { padding:0; font-size:1.54rem; line-height:1.5; }
.wellbeing-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:.8rem; }
.mom-data-dialog .wellbeing-choice { position:relative; min-width:0; margin:0; cursor:pointer; }
.mom-data-dialog .wellbeing-choice input { position:absolute; width:1px; height:1px; min-height:0; margin:0; padding:0; opacity:0; }
.wellbeing-choice > span { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1.4rem .3rem; border:2px solid #eeeaf2; border-radius:1.4rem; background:#fdfcfe; font-size:1.43rem; }
.wellbeing-choice .wellbeing-face { width:5rem; height:5rem; }
.wellbeing-choice input:checked + span { border-color:#794aff; background:#f3edff; }
.wellbeing-choice input:focus-visible + span { outline:2px solid #794aff; outline-offset:3px; }
.mom-data-dialog .wellbeing-comment { margin-top:1.8rem; }
.wellbeing-comment > span { color:#727987; }
.wellbeing-comment textarea { display:block; box-sizing:border-box; width:100%; min-height:10rem; margin-top:.6rem; padding:1rem; border:1px solid #ddd4ee; border-radius:1.2rem; background:#fcfaff; color:#191b24; font:inherit; font-size:17.6px; resize:vertical; }
.mom-form-error { margin-top:1rem; font-size:1.54rem; color:#a62b39; }
html:has(.mom-data-dialog[open]) { overflow:hidden; }

/* Larger article text, shared by the Mom and Baby sections. */
.mom-page .school-article-card .content-open h3 { font-size: 1.595em; }
.mom-page .school-article-card .content-type { font-size: 1.265em; }

/* Week selector follows the Baby section. */
.mom-week-carousel .week-selector { display: grid; grid-template-columns: 2.8rem minmax(0,1fr) 2.8rem; gap: .6rem; align-items: center; }
.mom-week-carousel .round-arrow { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: white; color: #914aff; font-size: 2.97rem; line-height: 1; box-shadow: 0 .2rem 1rem #8653d51c; text-align: center; }
.mom-week-carousel .week-wheel { display: flex; align-items: center; gap: .6rem; overflow-x: auto; min-width: 0; padding: .8rem calc(50% - 5rem); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; user-select: none; }
.mom-week-carousel .week-wheel::-webkit-scrollbar { display: none; }
.mom-week-carousel .week-option { flex: 0 0 10rem; min-height: 4.3rem; text-align: center; border-radius: 1.1rem; background: #f6f0ff; white-space: nowrap; font-size: 1.485rem; color: #858197; scroll-snap-align: center; transform: perspective(24rem) rotateY(var(--turn,0deg)) scale(var(--scale,.85)); opacity: var(--opacity,.65); }
.mom-week-carousel .week-option.week-selected { color: #191b24; font-weight: 700; box-shadow: 0 .3rem 1.2rem #9876d52b; }
.mom-week-carousel .week-selector button:disabled { opacity: .3; cursor: default; }
.mom-week-carousel .week-dots { display: flex; justify-content: center; gap: .4rem; margin: .7rem 0 1rem; }
.mom-week-carousel .week-dots span { width: .6rem; height: .6rem; background: #ddccf8; border-radius: 50%; transition: width .25s, background-color .25s, transform .25s; }
.mom-week-carousel .week-dots span.active { width: 1.4rem; background: #9450fa; transform: scale(1.1); }