@font-face { font-family: "Intro"; src: url('assets/fonts/Intro-Regular.woff') format('woff'); font-style: normal; font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Intro"; src: url('assets/fonts/Intro-Bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Intro"; src: url('assets/fonts/Intro-Black.woff') format('woff'); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: "Intro"; src: url('assets/fonts/Intro-Regular-Italic.woff') format('woff'); font-style: italic; font-weight: 400 500; font-display: swap; }
/* The reference screen is 500 px wide. 1 rem = 10 reference pixels.
   Scaling is limited to the mobile composition; there is no desktop layout. */
:root {
  font-size: min(2vw, 10px);
  color-scheme: light;
  --ink: #0c0e25;
  --muted: #61709b;
  --purple: #794aff;
  --selected-week-border: #794aff;
  --canvas: #fcfaf7;
  scrollbar-width: none;
}
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 0; height: 0; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Intro", Arial, sans-serif; font-weight: 500; font-synthesis: none; -webkit-font-smoothing: antialiased; }
input, textarea, select { font-family: inherit; font-weight: inherit; }
h3, strong, b { font-weight: 700; }
button, a { -webkit-tap-highlight-color: transparent; }
button { appearance: none; margin: 0; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.week-option.week-selected { border: 1px solid var(--selected-week-border); }
button:active { filter: brightness(.98); }
/* Close icons are centered independently of the text font and baseline. */
button.close-button { display: grid; place-items: center; flex-shrink: 0; padding: 0; line-height: 1; }
button.close-button > svg.close-icon { display: block; width: 22px; height: 22px; max-width: 70%; max-height: 70%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
h1, h2, p { margin: 0; }
.app { display: flex; flex-direction: column; width: 100%; min-height: 100svh; min-height: 100dvh; margin: 0; background: radial-gradient(ellipse at 50% 22%, #fffdfa80, transparent 75%), var(--canvas); }
.sprite { display: block; background-image: url('assets/reference.webp'); background-repeat: no-repeat; background-size: 105.3rem 147.2rem; flex-shrink: 0; }
.page-header { min-height: calc(7.8rem + env(safe-area-inset-top,0px)); padding: calc(1.6rem + env(safe-area-inset-top,0px)) 1.9rem 0 2.1rem; display: flex; justify-content: space-between; align-items: flex-start; }
h1 { font-size: 3.6rem; line-height: 4rem; letter-spacing: -.13rem; font-weight: 900; }
.greeting { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: 1.8rem; line-height: 2.2rem; letter-spacing: -.045rem; }
.greeting-heart { width: 1.9rem; height: 1.9rem; background-position: -46.7rem -34.7rem; }
.header-actions { display: flex; align-items: center; gap: 1.8rem; }
.icon-button { background: none; }
.bell { width: 3.3rem; height: 3.8rem; background-position: -65.6rem -31.1rem; }
.avatar { height: 5.4rem; width: 5.4rem; border-radius: 50%; background-position: -70.4rem -30.5rem; }
main { flex: 1; padding: 1.3rem 1.6rem 0; }
.pregnancy-summary { display: block; color: inherit; text-decoration: none; width: 100%; height: 6.7rem; padding: .8rem 1.6rem 1rem; border-radius: 1.5rem; background: linear-gradient(115deg,#fffcff,#faf7ff); border: 1px solid #f1eef8; box-shadow: 0 .3rem 1.3rem #49346803; }
.summary-row { display: flex; align-items: center; height: 3.4rem; }
.pregnancy-age { flex: 1; font-size: 2.15rem; line-height: 2.8rem; font-weight: 700; letter-spacing: -.08rem; white-space: nowrap; }
.pregnancy-age strong { font-size: 2.8rem; letter-spacing: -.09rem; }
.pregnancy-meta { color: var(--muted); font-size: 1.4rem; line-height: 1.7rem; letter-spacing: -.035rem; margin-right: 3.1rem; }
.chevron { width: 1.6rem; height: 2.4rem; color: #4c618b; flex: none; }
.progress-track { display: block; height: 1rem; margin-top: .3rem; margin-right: 2.4rem; border-radius: 9rem; background: #ece5fa; overflow: hidden; }
.progress-track > span { display: block; width: 62%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c8a7ff,#9772ff); }
.feature-card { display: block; position: relative; width: 100%; overflow: hidden; border-radius: 1.4rem; border: 1px solid; padding: 1.1rem 1.6rem; color: inherit; text-decoration: none; }
.baby-card { margin-top: 1rem; height: 18.8rem; border-color: #fbe8ec; background: linear-gradient(105deg,#fff7f9,#fff2f5); }
.mom-card { margin-top: 1rem; height: 15.4rem; border-color: #efeafa; background: linear-gradient(110deg,#faf7ff,#f6f1ff); }
.card-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; font-size: 2rem; line-height: 4.2rem; font-weight: 700; letter-spacing: -.04rem; }
.round-icon { width: 4.2rem; height: 4.2rem; border-radius: 50%; margin-left: -.3rem; }
.baby-icon { background-position: -30.6rem -46.9rem; }
.mom-icon { background-position: -30.6rem -66.7rem; }
.feature-card > .chevron { position: absolute; right: 1.2rem; top: 1.6rem; z-index: 2; }
.feature-copy { display: block; position: relative; z-index: 1; }
.feature-copy > span, .feature-copy > strong { display: block; }
.baby-age { font-size: 1.9rem; line-height: 2.3rem; letter-spacing: -.055rem; margin-top: .7rem; }
.trimester { color: #344b77; font-size: 1.4rem; line-height: 1.9rem; }
.baby-measurements { margin-top: 1.3rem; color: #344b77; font-size: 1.4rem; line-height: 1.9rem; letter-spacing: -.025rem; }
.baby-description { margin-top: .4rem; color: #344b77; font-size: 1.4rem; line-height: 1.75rem; }
.mom-subtitle { margin-top: .7rem; font-size: 1.6rem; line-height: 2rem; letter-spacing: -.04rem; }
.mom-description { margin-top: .8rem; font-size: 1.4rem; line-height: 1.75rem; color: var(--muted); letter-spacing: -.015rem; }
.feature-art { position: absolute; pointer-events: none; }
.baby-art { right: 2.4rem; bottom: 0; width: 17rem; height: 18.6rem; background-position: -56.6rem -46rem; mask-image: linear-gradient(to right,transparent,#000 12%,#000 94%,transparent); }
.mom-art { right: 3.5rem; bottom: 0; width: 15.8rem; height: 15.3rem; background-position: -56.6rem -65.7rem; mask-image: linear-gradient(to right,transparent,#000 13%,#000 94%,transparent); }
.helpers { margin-top: 1rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; height: 2.5rem; }
h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -.06rem; }
.text-link { display: flex; align-items: center; gap: .4rem; background: none; color: var(--purple); font-size: 1.3rem; line-height: 2rem; letter-spacing: -.035rem; white-space: nowrap; text-decoration: none; }
.text-link .chevron { width: 1.1rem; height: 1.8rem; }
.helper-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-top: .7rem; }
.helper { height: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1rem; gap: .3rem; background: linear-gradient(130deg,#ffffff,#fcfaff); border: 1px solid #f1edf4; border-radius: 1.4rem; box-shadow: 0 .3rem .9rem #75638604; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -.035rem; }
.helper-icon { width: 6rem; height: 6rem; border-radius: 50%; }
.calendar-icon { background-position: -31.7rem -86.2rem; }
.breathing-icon { background-position: -43.7rem -86.2rem; }
.movements-icon { background-position: -55.7rem -86.2rem; }
.more-icon { background-position: -67.7rem -86.2rem; }
.recommendations { margin-top: 1.2rem; }
.section-description { color: var(--muted); font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -.02rem; }
.pregnancy-summary .section-description { font-size: 1.6rem; line-height: 2rem; }
.article-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: .5rem; }
.article-card { position: relative; display: block; height: 11.2rem; padding: 1.1rem 1.3rem; border-radius: 1.3rem; border: 1px solid #f2eeee; overflow: hidden; }
a.article-card, a.content-open { text-decoration: none; color: inherit; }
a.content-open { display: block; }
.baby-article { background: linear-gradient(105deg,#f1fcf4 10%,#fff3f0 62%,#ffd4d6); }
.practice-article { background: linear-gradient(105deg,#fff7f4,#fbefec); }
.article-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; width: max-content; height: 2rem; border-radius: 1rem; color: #009371; background: #effff6b8; padding-right: .7rem; font-size: 1.1rem; line-height: 2rem; }
.tag { background: #dcf8e9; border-radius: 1rem; padding: 0 .7rem; font-size: 1rem; }
.practice-article .article-meta { background: #fff4f7ce; color: #ba0048; }
.practice-article .tag { background: #ffe1eb; }
.article-title { position: relative; z-index: 1; display: block; font-size: 1.3rem; line-height: 1.55rem; font-weight: 700; letter-spacing: -.03rem; margin-top: .7rem; }
.article-art { position: absolute; right: 0; top: 0; height: 11.2rem; }
.article-baby-art { width: 11.6rem; background-position: -40.6rem -101.2rem; mask-image: linear-gradient(to right,transparent,#000 18%); }
.article-practice-art { width: 9.7rem; background-position: -66.3rem -101.2rem; mask-image: linear-gradient(to right,transparent,#000 28%); }
.article-arrow { position: absolute; z-index: 2; bottom: .8rem; right: .9rem; width: 3.1rem; height: 3.1rem; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 .2rem .5rem #27305114; }
.article-arrow .chevron { width: 1.6rem; height: 2.1rem; color: #11142b; }
/* Navigation uses its own scale, independent of each reference page's rem size. */
.bottom-navigation { --nav-unit: min(2vw, 10px); position: sticky; bottom: 0; flex-shrink: 0; z-index: 5; min-height: calc(67 * var(--nav-unit) / 10 + env(safe-area-inset-bottom,0px)); margin-top: calc(1 * var(--nav-unit)); padding: calc(.9 * var(--nav-unit)) calc(.6 * var(--nav-unit)) calc(.9 * var(--nav-unit) + env(safe-area-inset-bottom,0px)); border-top: 1px solid #f5f1f9; border-radius: 0; background: #fff; box-shadow: 0 -3px 18px #7d6b8c04; }
.navigation-items { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.nav-item { display: flex; align-items: center; flex-direction: column; gap: calc(.3 * var(--nav-unit)); color: #65719b; background: none; text-decoration: none; font-size: calc(1.25 * var(--nav-unit)); line-height: calc(1.6 * var(--nav-unit)); font-weight: 500; white-space: nowrap; }
.nav-item.active, .nav-item[aria-current="page"] { color: #794aff; }
.bottom-navigation .nav-item { min-height: 44px; border-radius: 12px; transition: color .15s ease, background-color .15s ease; }
.bottom-navigation .nav-item:active { background: #f0e9ff; }
.bottom-navigation .nav-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .bottom-navigation .nav-item { transition: none; } }
.bottom-navigation .nav-icon { width: calc(3 * var(--nav-unit)); height: calc(3 * var(--nav-unit)); flex-shrink: 0; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { button { transition: filter .12s ease; } }
@media (max-width: 350px) {
  .pregnancy-meta { margin-right: 1.6rem; }
}

/* Supplied weekly baby text must fit fully beside the illustration. */
.baby-card { height:auto; min-height:18.8rem; }
.baby-card .feature-copy { max-width:calc(100% - 15rem); }
.baby-measurement-caption { margin-top:.6rem; color:#69778f; font-size:1.1rem; line-height:1.5rem; }

.baby-card .baby-art { object-fit: contain; background: none; mask-image: none; }

.mom-card { height: auto; min-height: 15.4rem; }
.mom-card .feature-copy { max-width: calc(100% - 17.7rem); }

.school-article { height: auto; min-height: 11.2rem; background: #f7f1fa; }
.school-article .article-title { padding-right: 1.8rem; }
.school-recommendation-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .8rem; margin-bottom: .8rem; }
.school-article-cover { display: block; width: 100%; object-fit: cover; }
.article-load-status { padding: 1rem; color: #685882; }
.article-load-retry { margin: 0 1rem 1rem; padding: .8rem 1.2rem; border: 0; border-radius: .8rem; background: #f0e9ff; color: #794aff; cursor: pointer; }
.weekly-load-status { margin: .75rem 1rem; padding: .8rem 1rem; border-radius: .8rem; background: #f0e9ff; color: #685882; }
.weekly-load-status button { margin-left: .5rem; padding: .5rem .8rem; border: 0; border-radius: .6rem; background: #794aff; color: #fff; cursor: pointer; }

/* Shared article carousel for Today and Mom. */
.recommendations-carousel { position: relative; margin-top: 1rem; }
.recommendations-carousel .article-grid { display: flex; gap: 1rem; margin-top: 0; padding-bottom: .4rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.recommendations-carousel .school-article-card { flex: 0 0 55%; min-width: 0; scroll-snap-align: start; }
.recommendations-prev, .recommendations-next { position: absolute; top: 4.7rem; z-index: 3; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: white; color: #914aff; font-size: 2.7rem; line-height: 1; box-shadow: 0 .2rem 1rem #8653d51c; text-align: center; }
.recommendations-prev { left: -1.3rem; }
.recommendations-next { right: -1.3rem; }

/* Article cards share the My Journey composition in every section. */
.school-article-card { font-size: min(2.56vw, 10px); display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #f0eef4; border-radius: 1.1em; overflow: hidden; box-shadow: 0 .2em .4em #37457708; }
.school-article-card .school-article-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: none; }
.school-article-card .content-open h3 { margin: .483em .69em 0; font-size: 1.45em; line-height: 1.17; font-weight: 700; letter-spacing: -.017em; }
.school-article-card .content-footer { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: auto; padding: .7em 1em; }
.school-article-card .content-type { display: inline-flex; align-items: center; gap: .435em; width: max-content; max-width: 100%; padding: .261em .435em; font-size: 1.15em; line-height: 1.304; color: #914aff; background: #f7f0ff; border-radius: .435em; }
.school-article-card .content-type svg { width: 1.304em; height: 1.478em; flex-shrink: 0; }
.school-article-card .read-checkbox { appearance: none; font-size: inherit; width: 1.9em; height: 1.9em; border: 1.3px solid #a3a9bb; border-radius: 50%; margin: 0; cursor: pointer; background: white; flex-shrink: 0; }
.school-article-card .read-checkbox:checked { background: #9060ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; border-color: #9060ff; }
.school-article-card .read-checkbox:focus-visible { outline: 2px solid #9060ff; outline-offset: 3px; }

/* Consistent message receipts, independent of the text font. */
.read-mark { display: inline-flex; align-items: center; flex: 0 0 auto; width: 18px; height: 12px; color: inherit; }
.read-mark svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.discussion-message-meta { display: inline-flex; align-items: center; gap: 4px; color: #a49ab7; }