/* Giggle & Grow: soft, boutique and familiar. Layout borrows from Instagram (stories,
   posts, profile) and WhatsApp (chat-style diary), dressed in warm pastels. */

:root {
  --bg: #faf6f1;             /* oat */
  --surface: #fffdfa;
  --surface-2: #f4ece4;      /* sand */
  --border: #ece2d8;
  --text: #2f2523;           /* espresso, never pure black */
  --muted: #74645e;          /* passes AA on --bg and --surface-2 */
  --brand: #ad5249;          /* rosy clay, white text passes AA */
  --brand-strong: #8c3f38;
  --brand-soft: #f7e2dc;
  --gold: #7d5f33;           /* champagne gold: eyebrows and highlight rings, AA on --bg and every soft tint */
  --gold-soft: #f4ead9;
  --blush-soft: #f8e7e5;
  --on-brand: #ffffff;
  --sage: #4b6a46;           /* passes AA as text on white and on --sage-soft */
  --sage-soft: #e5efe1;
  --butter: #8a6410;
  --butter-soft: #fbefcc;
  --lavender-soft: #ece6f7;
  --danger: #c0262d;
  --danger-soft: #fde4e3;
  --bubble-me: #fde9e3;
  --chat-bg: #fbf3ec;
  --art-bg: #fbf1ea;         /* how-to-serve pictures */
  --art-plate: #ffffff;
  --art-edge: #ecdccf;
  --art-bowl: #f6e3d6;
  --art-spoon: #e7d8cc;
  --ring: linear-gradient(45deg, #e9c58c, #ec9e91 48%, #c3abe6);
  --tip-bg: linear-gradient(150deg, #fbf0e4, #f8e2e5 55%, #ece4f6);
  --avatar-bg: linear-gradient(135deg, #fde3d6, #f6d3e4 55%, #e3daf5);
  --story-bg: linear-gradient(165deg, #c98e7c, #a8697d 50%, #6f6390);
  --ring-sos: linear-gradient(45deg, #ff8a7a, #e0353f);
  --ring-solid: #f19a8f;     /* single-colour story rings */
  --ring-soft: #f4b8a8;
  --progress-bg: linear-gradient(90deg, #f7c873, #f19a8f);
  --milestone-bg: linear-gradient(160deg, #fff1e6, #fde4ec 60%, #efe6fb);
  --journey-bg: linear-gradient(160deg, var(--brand), #8f5a9e 60%, #4f5d9e); /* white text on top */
  --iron: #6a4fa3;           /* AA on --lavender-soft */
  --iron-dot: #8f6fd0;
  --star: #e0a526;
  --dot-milestone: #f1b44c;
  --dot-memory: #c9a6e8;
  /* Print designer guides. They sit on the paper, which stays white in dark mode, so one value. */
  --guide: #d0457a;          /* snap lines */
  --guide-safe: #3b82c4;     /* the safe area inside the trim, blue as print shops draw it */
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 8px;          /* tiny controls: tick boxes, calendar days, the timeline marker */
  --shadow: 0 1px 2px rgba(80, 50, 40, 0.04), 0 8px 24px rgba(120, 80, 60, 0.07);
  --shadow-float: 0 10px 30px rgba(80, 50, 40, 0.14);
  --tabbar-h: 64px;
  /* --ad-h is the AdMob banner's height in the free phone app (js/app.js syncBanner), so the tab bar
     and sheets sit above it. 0 everywhere else. */
  --safe-b: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--ad-h, 0px));
  /* Android draws the app edge to edge (Android 15 and later). Capacitor sets --safe-area-inset-*
     for Android web views too old to report env(safe-area-inset-*), so the status bar and gesture
     bar never cover the top bar or tab bar. Browsers and the iPhone use env(). */
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Nunito", "Segoe UI", Roboto, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d181a;
    --surface: #282124;
    --surface-2: #322a2d;
    --border: #41363a;
    --gold: #d9b886;
    --gold-soft: #3a3127;
    --blush-soft: #43302f;
    --tip-bg: linear-gradient(150deg, #4a332c, #45303a 55%, #3a3249);
    --story-bg: linear-gradient(165deg, #6e4a40, #5a3c4c 50%, #3c3758);
    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
    --text: #f5ebe6;
    --muted: #b9a7a2;
    --brand: #e8958a;          /* a touch quieter than --danger, so red still reads as safety */
    --brand-strong: #ffb8ad;
    --brand-soft: #4a2f2e;
    --on-brand: #2a1514;
    --sage: #a3c99a;
    --sage-soft: #2f3b2d;
    --butter: #f0c865;
    --butter-soft: #3f3420;
    --lavender-soft: #352f45;
    --danger: #ff6460;         /* coral-red: dark text on it passes AA (6.2:1), and AA as text on --danger-soft */
    --danger-soft: #4c2326;
    --bubble-me: #43302f;
    --chat-bg: #241e21;
    --art-bg: #332a2f;
    --art-plate: #43393e;
    --art-edge: #54484e;
    --art-bowl: #5a4a4f;
    --art-spoon: #6b5d62;
    --ring-solid: #d98478;
    --ring-soft: #8a5a52;
    --progress-bg: linear-gradient(90deg, #d9b05e, #e08a80);
    --milestone-bg: linear-gradient(160deg, #4a332c, #45303a 60%, #3a3249);
    --journey-bg: linear-gradient(160deg, #8c3f38, #6a4578 60%, #3d4a7e);
    --iron: #cdb8f5;
    --iron-dot: #b49be8;
    --star: #f0c865;
    --dot-milestone: #d9a440;
    --dot-memory: #a68bcf;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
p { margin: 8px 0; }
a { color: var(--brand); }

.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 14px; }
.center { text-align: center; }
.warn { color: var(--butter); }
.lead { font-size: 17px; font-weight: 600; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-t) + 6px) 16px 6px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.wordmark span { color: var(--brand); font-style: normal; }

.topbar-actions { display: flex; gap: 2px; margin-right: -10px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  border-radius: 50%;
}
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sos { color: var(--danger); }

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 4px 16px calc(var(--tabbar-h) + var(--safe-b) + 28px);
  outline: none;
}
/* The website's own pages (privacy policy, support) have no tab bar. */
.doc-page main { padding-bottom: calc(var(--safe-b) + 32px); }
.doc-page .card p { margin: 8px 0 0; }

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 4px var(--safe-b);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.tabbar a > span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--text); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.4; }

.tab-add {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  margin: 0 6px;
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(173, 82, 73, 0.3);
  cursor: pointer;
}
.tab-add svg { width: 26px; height: 26px; stroke-width: 2.6; }

.tab-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
  border-radius: 50%;
}
.tabbar a[aria-current="page"] .tab-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--brand-strong);
  background: var(--avatar-bg);
  border-radius: 50%;
}
.avatar-story { font-size: 28px; }
.avatar-xl { flex: none; width: 92px; height: 92px; font-size: 44px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ring-solid); }
@media (prefers-color-scheme: dark) { .avatar { color: #96403a; } }

/* ---------- Home ---------- */

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.home-stats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.home-stats span { font-size: 20px; line-height: 1.2; }
.home-stats strong { font-size: 20px; line-height: 1.2; }
.home-stats small { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.btn-pair .btn { padding: 0 12px; }
.guide-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.guide-link > span:first-child { font-size: 24px; }
.guide-link span:last-child { display: flex; flex-direction: column; }
.guide-link small { color: var(--muted); }

/* ---------- Posts and cards ---------- */

.greeting { margin: 6px 2px 14px; }
.greeting p { margin: 2px 0 0; }

.page-head { margin: 8px 2px 14px; }
.page-head p { margin: 2px 0 0; }

.post, .card {
  display: block;
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 16px; }

.post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
}
.post-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 19px;
  background: var(--surface-2);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ring-soft);
}
.post-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.post-title strong { font-size: 15px; }
.post-title small { font-size: 13px; color: var(--muted); }
.post-title small a { text-decoration: none; font-weight: 600; }
.post-body { padding: 4px 16px 16px; }

.post-alert, .card-sos { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.post-alert { background: var(--danger-soft); }
.post-watch { border-color: color-mix(in srgb, var(--butter) 35%, transparent); background: var(--butter-soft); }
.watch-bar { height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; margin: 2px 0 10px; }
.watch-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--brand)); transition: width 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .watch-bar span { transition: none; } }
.post-alert .post-icon { background: var(--surface); box-shadow: none; }

details.card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.15s ease;
}
details.card[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details.card[open] > summary { margin-bottom: 8px; }
.card-sos h2 { color: var(--danger); }

.disclaimer {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--butter-soft);
  border-radius: var(--radius-sm);
}

.callout { margin: 0 0 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.callout p { margin-top: 0; }
.callout .btn-ghost { background: var(--surface); }
.callout-danger { color: var(--text); background: var(--danger-soft); }

.bullets { margin: 8px 0; padding-left: 20px; }
.bullets li { margin: 6px 0; }
.bullets li::marker { color: var(--brand); }
.plus-group { margin: 16px 0 4px; font-size: 0.95rem; }

.steps { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
  padding-left: 44px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
  border-radius: 50%;
}

.sos-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
}
.sos-banner > span:first-child { font-size: 24px; }
.sos-banner span:last-child { display: flex; flex-direction: column; }
.sos-banner small { color: var(--muted); }

.progress {
  height: 10px;
  margin: 10px 0 4px;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: 99px;
}
.progress span { display: block; height: 100%; background: var(--progress-bg); border-radius: inherit; }

.section-title { margin: 24px 2px 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}
.btn-block { display: flex; width: 100%; margin-top: 12px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:active { background: var(--brand-strong); }
.btn-secondary { background: var(--brand-soft); color: var(--brand-strong); }
.btn-ghost { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-text { background: transparent; color: var(--danger); }
.btn-call { min-height: 56px; font-size: 18px; margin: 0 0 4px; }
@media (prefers-color-scheme: dark) { .btn-danger { color: #2a0d0e; } }
html[data-night] .btn-danger { color: #2a0d0e; }

.btn-text {
  min-height: 44px;
  padding: 0 4px;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.btn-text.strong { font-weight: 700; color: var(--brand); }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
/* main takes focus on every screen change so screen readers start at the top; it needs no ring. */
main:focus-visible { outline: none; }

/* ---------- Chips and pills ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chip {
  min-height: 38px;
  padding: 6px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
}
.chip-static { cursor: default; font-size: 14px; font-weight: 500; min-height: 0; padding: 4px 12px; }
.chip-remove { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.pill input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.pill input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.pill-severe span { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.pill-severe input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (prefers-color-scheme: dark) { .pill-severe input:checked + span { color: #2a0d0e; } }
html[data-night] .pill-severe input:checked + span { color: #2a0d0e; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 99px;
  white-space: nowrap;
}
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badge-trying, .badge-tried { background: var(--butter-soft); color: var(--butter); }
.badge-introduced, .badge-regular { background: var(--sage-soft); color: var(--sage); }
.badge-reaction { background: var(--danger-soft); color: var(--danger); }


/* ---------- Lists ---------- */

.meal-list, .food-list, .allergen-list, .bubbles, .milestone-grid { list-style: none; margin: 0; padding: 0; }
.meal-list li + li, .food-list li + li { border-top: 1px solid var(--border); }

.meal-row, .allergen-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.meal-time { flex: none; width: 64px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meal-time small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.meal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.meal-foods { font-weight: 600; }
.meal-meta { font-size: 14px; color: var(--muted); }

.food-list li { display: flex; flex-direction: column; padding: 10px 0; }
.food-name { font-weight: 600; }

.allergen-list li { margin-bottom: 10px; }
.allergen-row {
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.allergen-row.state-reaction { border-color: var(--danger); }
.allergen-emoji {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  font-size: 24px;
  background: var(--surface-2);
  border-radius: 50%;
}
.state-regular .allergen-emoji { background: var(--sage-soft); }
.state-tried .allergen-emoji { background: var(--butter-soft); }
.state-reaction .allergen-emoji { background: var(--danger-soft); }
.allergen-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.allergen-name { font-weight: 700; }
.allergen-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- Chat-style diary ---------- */

.chat {
  margin: 0 -16px;
  padding: 4px 16px 12px;
  background: var(--chat-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--brand) 9%, transparent) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.date-pill { display: flex; justify-content: center; margin: 14px 0 10px; }
.date-pill span {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.bubbles { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bubbles li { max-width: 86%; }
.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px 12px 6px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bubble-me);
  border: 0;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.bubble-alert { background: var(--danger-soft); }
.bubble-type { font-size: 12px; font-weight: 700; color: var(--brand-strong); }
.bubble-foods { font-weight: 600; }
.bubble-notes { margin-top: 2px; font-size: 14px; }
.bubble-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.bubble-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.bubble-react {
  position: absolute;
  left: 10px;
  bottom: -22px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.bubbles li:has(.bubble-react) { margin-bottom: 18px; }

/* ---------- Profile ---------- */

.profile { display: flex; align-items: center; gap: 20px; margin: 12px 4px 10px; }
.stats { flex: 1; min-width: 0; display: flex; justify-content: space-around; gap: 8px; }
.stats a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); text-decoration: none; }
.stats strong { font-size: 19px; }
.stats span { font-size: 13px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; hyphens: auto; }
.bio { margin: 0 4px 8px; }
.bio p { margin: 0; }
.bio-actions { display: flex; gap: 8px; margin-top: 10px; }
.bio-actions .btn { flex: 1; min-width: 0; gap: 6px; }

.milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 132px;
  padding: 12px 6px 10px;
  font: inherit;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.milestone-emoji { font-size: 30px; filter: grayscale(0.9); opacity: 0.55; }
.milestone-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.milestone-date { margin-top: auto; font-size: 11px; font-weight: 700; }
.milestone.done {
  color: var(--text);
  background: var(--milestone-bg);
  border: 1.5px solid transparent;
}
.milestone.done .milestone-emoji { filter: none; opacity: 1; }
.milestone.done .milestone-date { color: var(--brand); }
.milestone:disabled { cursor: default; }

.segmented {
  display: flex;
  margin: 8px 0 12px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 99px;
}
.segmented a {
  flex: 1;
  padding: 9px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  border-radius: 99px;
}
.segmented a[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.entry-switch button { flex: 1; min-height: 44px; padding: 9px; font: inherit; font-size: 15px; font-weight: 700; color: var(--muted); background: none; border: 0; border-radius: 99px; cursor: pointer; }
.entry-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: default; }
/* Diary | Allergens | Plan stays under the top bar, so it shows even when the diary opens at its newest meal. */
.segmented-sticky { position: sticky; top: calc(var(--safe-t) + 56px); z-index: 9; box-shadow: 0 0 0 4px var(--bg); }
/* 44px tap targets without changing how they look: the hit area reaches past the drawn shape. */
.segmented a, .chip, .sos-pill { position: relative; }
.segmented a::after, .chip::after, .sos-pill::after { content: ""; position: absolute; inset: -3px 0; }
.sos-pill::after { inset: -6px 0; }

.empty { padding: 40px 12px; text-align: center; }
.empty-art { font-size: 56px; }
.empty h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.empty p { margin: 8px auto 20px; max-width: 32ch; }

/* ---------- Forms ---------- */

.form { display: block; }
.field { display: block; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend, .field > .field-label { display: block; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input:not([type=radio]):not([type=checkbox]), textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* stops iOS zooming into fields */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
}
input[type=date], input[type=time] { display: block; }
textarea { resize: vertical; }
/* Drop-downs in forms ("Born early?") look like the other fields, with a drawn arrow. */
.field select {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 40px 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface) url('../icons/chevron-down.svg') no-repeat right 16px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
}
.field select + small { display: block; margin-top: 6px; }

.add-food { display: flex; gap: 8px; margin-top: 4px; }
.add-food input { flex: 1; }
.add-food .btn { min-height: 46px; }
.field-error { margin: 6px 0 0; color: var(--brand-strong); font-size: 14px; font-weight: 600; }
input[aria-invalid=true] { border-color: var(--brand); }
.sub-field { margin: 14px 0 0; }

.reaction-box { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.reaction-fields { margin-top: 14px; }
.reaction-fields .pills { margin-bottom: 16px; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 700; min-height: 44px; cursor: pointer; } /* the whole row is the tap target */
.switch input {
  flex: none;
  position: relative;
  width: 50px;
  height: 30px;
  margin: 0;
  background: var(--border);
  border-radius: 99px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(20px); }

.emergency { margin-bottom: 16px; padding: 14px; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); }

/* ---------- Sheet ---------- */

.sheet {
  width: 100%;
  max-width: 600px;
  max-height: calc(100% - var(--safe-t) - 24px);
  margin: auto auto 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  border: 0;
  border-radius: 24px 24px 0 0;
}
.sheet::backdrop { background: rgba(40, 20, 15, 0.35); }
/* Our own "are you sure?" box (askConfirm in js/app.js), on top of any open sheet. */
.ask {
  border: 0; padding: 20px; width: min(340px, calc(100vw - 32px));
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  box-shadow: 0 12px 40px rgba(40, 20, 15, 0.25);
}
.ask::backdrop { background: rgba(40, 20, 15, 0.45); }
.ask p { margin: 0 0 16px; }
.ask-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ask-password .ask-buttons { grid-template-columns: 1fr; }
.ask-password .ask-buttons .btn-primary { order: -1; }
.ask-password [data-pw=cancel] { order: 1; }
.ask-password .field-error:empty { display: none; }
.ask-password .field-error { color: var(--danger, #a3352b); }
/* Plus: yearly, monthly or lifetime. */
.plus-plans { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.plus-plan {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; border: 1.5px solid var(--surface-2); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer;
}
.plus-plan:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.plus-plan input { grid-row: span 2; accent-color: var(--brand); width: 20px; height: 20px; margin: 0; }
.plus-plan { text-align: start; }
.plus-plan-name { font-weight: 600; }
.plus-plan-price { font-weight: 600; text-align: end; }
.plus-plan .small { grid-column: 2 / 4; }
.plus-terms { margin-top: 10px; text-align: center; }
.sheet[open] { animation: sheet-in 0.22s ease-out; }
.sheet-body {
  max-height: calc(100dvh - var(--safe-t) - 24px);
  overflow-y: auto;
  padding: 8px 16px calc(var(--safe-b) + 24px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sheet-body::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 6px;
  background: var(--border);
  border-radius: 99px;
}
.sheet-head {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: -8px -16px 12px;
  padding: 6px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.sheet-head > :first-child { justify-self: start; }
.sheet-head > :last-child { justify-self: end; }
.welcome-art { margin-top: 16px; font-size: 40px; letter-spacing: 6px; text-align: center; }
.welcome-title { margin: 8px 0 4px; font-family: var(--font-display); font-size: 26px; font-weight: 600; text-align: center; }
.welcome-title em { color: var(--brand); }

@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bg);
  background: var(--text);
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.toast-undo { min-height: 36px; padding: 0 12px; font: inherit; font-weight: 700; color: var(--bg); background: transparent; border: 1px solid currentColor; border-radius: 99px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Research-driven additions ---------- */

.sos-pill {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 32px;
  margin-right: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  background: var(--danger);
  border-radius: 99px;
  align-self: center;
}
@media (prefers-color-scheme: dark) { .sos-pill { color: #2a0d0e; } }
html[data-night] .sos-pill { color: #2a0d0e; }

.vit-post { padding: 0; }
.vit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}
.vit-row .post-title { flex: 1; }
.vit-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  font-weight: 800;
  color: var(--on-brand);
  border: 2px solid var(--border);
  border-radius: 50%;
}
.vit-row.done .vit-check { background: var(--sage); border-color: var(--sage); color: #fff; }

.idea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.idea {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.idea-emoji { font-size: 24px; }
.idea-name { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.2; }
.idea .badge-iron { position: absolute; top: -6px; right: -4px; }
.badge-iron { background: var(--lavender-soft); color: var(--iron); }

.tips { margin: 0 -16px 14px; }
.tips-track {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tips-track::-webkit-scrollbar { display: none; }
.tip {
  flex: none;
  position: relative;
  width: 82%;
  min-height: 150px;
  padding: 18px 18px 12px;
  background: var(--tip-bg);
  border-radius: var(--radius);
  scroll-snap-align: center;
}
.tip p { margin: 4px 0 8px; font-family: var(--font-display); font-size: 19px; line-height: 1.35; }
.tip .sources { font-size: 12px; }
.tip-count { position: absolute; top: 10px; right: 14px; font-size: 11px; font-weight: 700; color: var(--muted); }

.sources { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.sources a { color: var(--muted); }

.food-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; }
.food-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: 12px 4px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.food-tile.tried { background: var(--sage-soft); border-color: transparent; }
.food-emoji { font-size: 30px; }
.food-tile-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--sage);
  border-radius: 50%;
}
.iron-dot { position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; background: var(--iron-dot); border-radius: 50%; }

.serve-list { list-style: none; margin: 0; padding: 0; }
.serve-list li { display: flex; flex-direction: column; margin-bottom: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.serve-list li.current { background: var(--brand-soft); border-color: transparent; }
.serve-list strong { font-size: 13px; color: var(--brand); }

.profile-tabs { display: flex; margin: 16px -16px 12px; border-top: 1px solid var(--border); }
.profile-tabs a {
  flex: 1;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  filter: grayscale(1);
  opacity: 0.6;
}
.profile-tabs a[aria-selected="true"] { border-top-color: var(--text); filter: none; opacity: 1; }

.photo-wrap { display: block; overflow: hidden; background: var(--surface-2); }
.photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px; padding: 0; }
.photo-grid .photo-wrap { width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer; }
.meal-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; }
.bubble-photo { padding-top: 4px; }
.bubble .photo-wrap { margin: 0 -8px 6px; aspect-ratio: 4 / 3; border-radius: 12px; }
.photo-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photo-field .btn { min-height: 44px; }
.photo-preview .photo-wrap { width: 72px; height: 72px; border-radius: 12px; }

.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-quick { min-height: 34px; padding: 4px 12px; font-size: 14px; background: var(--surface); }

.facts { margin: 4px 0 0; }
.facts dt { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--brand); }
.facts dd { margin: 2px 0 0; }

blockquote { margin: 12px 0; padding: 10px 14px; font-family: var(--font-display); font-style: italic; background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.avoid-list { list-style: none; margin: 0; padding: 0; }
.avoid-list li { display: flex; flex-direction: column; padding: 10px 0; }
.avoid-list li + li { border-top: 1px solid var(--border); }
.avoid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.avoid-head .badge { flex: none; white-space: normal; text-align: right; max-width: 45%; }

.call-row { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; margin-bottom: 14px; }
.call-row .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; padding: 6px 12px; }
/* A long advice line (healthdirect 1800 022 222) takes a row of its own under the emergency number. */
.call-row-stack { grid-template-columns: 1fr; }
/* A poisons line (Ireland) has a long label, so it gets its own row. */
.call-row .btn-call-wide { grid-column: 1 / -1; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }
.call-row .btn { margin: 0; }

.gag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gag { padding: 12px; border-radius: var(--radius-sm); }
.gag .bullets { padding-left: 16px; font-size: 14px; }
.gag-ok { background: var(--sage-soft); }
.gag-bad { background: var(--danger-soft); }
.gag-bad strong { color: var(--danger); }
.gag-ok strong { color: var(--sage); }

.steps li > span:only-child { padding-top: 3px; }
.milestone-hero { margin: 8px 0 0; font-size: 56px; text-align: center; }

.confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute;
  top: -40px;
  font-size: 24px;
  animation: confetti-fall 2.2s cubic-bezier(0.3, 0.6, 0.5, 1) forwards;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift), 105vh) rotate(540deg); opacity: 0.6; }
}

.milk-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-undo { background: var(--surface); }
.callout-warn { margin-top: 12px; background: var(--butter-soft); }
.recipe-list { list-style: none; margin: 10px 0 0; padding: 0; }
.recipe-list li { margin-bottom: 8px; }
.recipe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.recipe-emoji { display: grid; place-items: center; flex: none; width: 52px; height: 52px; font-size: 28px; background: var(--brand-soft); border-radius: 16px; }
.recipe-main { display: flex; flex-direction: column; min-width: 0; }
.method { margin: 0; padding-left: 22px; }
.method li { margin-bottom: 8px; }
.method li.baby-out { list-style-position: outside; margin: 10px 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--butter-soft); }
.method li.baby-out strong { font-weight: 600; }
.method li.grown-ups .badge { margin-right: 4px; }
.rate { display: flex; gap: 8px; margin-top: 16px; }
.pill-btn {
  flex: 1;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
}
.pill-btn.on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.plan-day .chips { margin-top: 6px; }
.plan-day .add-food { margin-top: 8px; }
.star { position: absolute; top: 4px; right: 8px; color: var(--star); font-size: 15px; }
.gag-full { background: var(--butter-soft); }
.gag-full strong { color: var(--butter); }
.segmented a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px; }

/* ---------- Source badges ---------- */

.sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.source-badges { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.source-badge {
  padding: 1px 8px;
  font-family: var(--font);
  font-style: normal;
  color: var(--sage);
  background: var(--sage-soft);
  vertical-align: middle;
}
.info-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font: italic 700 12px/1 var(--font-display);
  color: var(--muted);
  background: var(--surface);
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  /* bigger invisible tap area */
  position: relative;
}
.info-badge::after { content: ""; position: absolute; inset: -12px; }
.info-static { cursor: default; }
.info-static::after { display: none; }
.popover {
  position: absolute;
  z-index: 300;
  width: 260px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bg);
  background: var(--text);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.legend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: -4px 2px 14px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.recipe-main strong { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-chips { display: flex; gap: 6px; margin: 4px -16px 4px; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .chip { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.filter-chips .chip[aria-selected="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.expert-list { list-style: none; margin: 0; padding: 0; }
.expert-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; }
.expert-list li + li { border-top: 1px solid var(--border); }
.expert-list .source-badges { flex: none; margin-top: 2px; }

/* ---------- Ease of use ---------- */

/* A second Save at the bottom of the meal sheet, where a thumb can reach it one-handed. */
.sheet-foot {
  position: sticky;
  bottom: calc(-24px - var(--safe-b));
  margin: 8px -16px calc(-24px - var(--safe-b));
  padding: 8px 16px calc(12px + var(--safe-b));
  background: linear-gradient(transparent, var(--bg) 14px);
}
.sheet-foot .btn { margin-top: 0; }
.photo-preview:empty { display: none; }
.iron-dot-inline { position: static; display: inline-block; vertical-align: middle; }

/* Optional meal fields fold away so a quick log is meal, foods, allergens and a reaction emoji. */
.more-details { margin: 0 0 18px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.more-details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; cursor: pointer; list-style: none; }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; font-weight: 800; color: var(--brand-strong); background: var(--brand-soft); border-radius: 50%; }
.more-details[open] > summary::before { content: "−"; }
.more-details > summary .muted { font-size: 13px; }
.more-details[open] > summary { margin-bottom: 14px; }
.more-details .field:last-child { margin-bottom: 0; }
.sos-first { margin-top: 4px; }

.search { margin: 0 0 4px; }
input.search { border-radius: 99px; padding-left: 18px; }
.search-wrap { position: relative; }
.search-wrap input.search { padding-right: 52px; }
.search-scan {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -24px;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.search-scan svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.plus-group { margin: 18px 0 8px; }
.plan-tools { margin: 0 0 14px; }
/* Clear of the sticky top bar and Diary | Allergens | Plan when the freezer tile jumps here. */
#freezer-card { scroll-margin-top: calc(var(--safe-t) + 120px); }
.freezer-tile { width: 100%; font: inherit; text-align: left; border: 0; cursor: pointer; }
.food-cat[hidden], .food-grid li[hidden] { display: none; }
.chip-add { color: var(--brand-strong); background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.add-food[hidden] { display: none; }
.formula-amount[hidden] { display: none; }
.allergen-hint { margin: -4px 0 8px; }
.allergen-pills:not(.show-all) .pill:not(:has(input:checked)) { display: none; }
.allergen-pills:not(.show-all):not(:has(input:checked)) { display: none; }
.allergen-pills + .chip-add { margin-top: 8px; }

/* ---------- Profile picture and memories ---------- */

.avatar, .tab-avatar { position: relative; overflow: hidden; }
.avatar-photo { position: absolute; inset: 0; border-radius: 50%; }
.avatar-lg { flex: none; width: 64px; height: 64px; font-size: 30px; }
.avatar-edit { position: relative; flex: none; cursor: pointer; }
.avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  background: var(--surface);
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.avatar-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-field .btn { min-height: 44px; }

.memory-add { margin: 0 0 12px; }
.photo-grid .photo-wrap { position: relative; }
.photo-grid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
}

.memory-pick {
  display: grid;
  place-items: center;
  min-height: 200px;
  margin: 0 0 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.memory-pick-preview { display: contents; }
.memory-pick-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; color: var(--brand-strong); }
.memory-pick-empty span { font-size: 40px; }
.memory-preview { display: block; width: 100%; max-height: 50vh; object-fit: contain; }
.memory-media { margin: 0 -16px 14px; background: #000; }
.memory-media img, .memory-media video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.memory-media .photo-wrap { background: #000; }
[data-keep-missing].missing { position: relative; display: grid; place-items: center; }
[data-keep-missing].missing > :not(.play-badge) { display: none; }
[data-keep-missing].missing .play-badge { display: none; }
[data-keep-missing].missing::after { content: attr(data-missing-label); padding: 12px; font-size: 13px; font-weight: 600; text-align: center; color: var(--muted); }
.memory-media.missing { min-height: 160px; background: var(--surface-2); }

/* ---------- Age locks ---------- */

.age-chips { margin-top: 8px; }
.age-chips .chip[aria-pressed="true"], .avoid-filter .chip[aria-pressed="true"], .language-picker .chip[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.language-picker { margin: 0; }
.avoid-filter { margin: 12px 0 4px; }
.avoid-filter .filter-chips { margin-top: 8px; }
.avoid-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.avoid-chips .chip[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.lock { font-size: 0.85em; }
.callout-lock { margin: 0 0 12px; background: var(--lavender-soft); }
.recipe-card.locked, .milestone.locked, details.card.locked > summary { opacity: 0.72; }
.recipe-card.locked .recipe-emoji { filter: grayscale(0.7); }
.serve-list li.locked { opacity: 0.7; }
.serve-list li.has-art { flex-direction: row; align-items: center; gap: 12px; }
.serve-text { display: flex; flex-direction: column; min-width: 0; }

/* ---------- How-to-serve pictures ---------- */

.serve-art { display: block; flex: none; width: 104px; height: auto; }
.serve-art + p { margin-top: 8px; }
h3 + .serve-art { width: 100%; max-width: 200px; margin: 0 auto; }
.art-bg { fill: var(--art-bg); }
.art-plate { fill: var(--art-plate); stroke: var(--art-edge); stroke-width: 2; }
.art-bowl { fill: var(--art-bowl); stroke: var(--art-edge); stroke-width: 2; }
.art-spoon { fill: var(--art-spoon); stroke: var(--art-edge); stroke-width: 1.5; }

/* ---------- Timeline ---------- */

.profile-tabs a { padding: 10px 6px; }
.journey-play { margin: 0 0 4px; }
.timeline { position: relative; list-style: none; margin: 12px 0 0; padding: 0 0 0 4px; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 21px; width: 2px; background: var(--border); }
.tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.tl-dot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 50%;
}
.tl-milestone .tl-dot { border-color: var(--dot-milestone); background: var(--butter-soft); }
.tl-allergen .tl-dot { border-color: var(--sage); background: var(--sage-soft); }
.tl-reaction .tl-dot { border-color: var(--danger); background: var(--danger-soft); }
.tl-memory .tl-dot { border-color: var(--dot-memory); background: var(--lavender-soft); }
.tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 2px; }
.tl-date { font-size: 12px; font-weight: 700; color: var(--muted); }
.tl-thumb { width: 100%; max-width: 260px; aspect-ratio: 4 / 3; margin-top: 8px; border-radius: var(--radius-sm); }
.tl-thumb img, .tl-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Story-style play-through */
.no-scroll { overflow: hidden; }
.journey {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 20px);
  color: #fff;
  background: var(--journey-bg);
}
.journey-bars { display: flex; gap: 3px; }
.journey-bars span { flex: 1; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.35); border-radius: 2px; }
.journey-bars i { display: block; width: 0; height: 100%; background: #fff; }
@keyframes journey-bar { from { width: 0; } to { width: 100%; } }
.journey-close {
  position: absolute;
  top: calc(var(--safe-t) + 22px);
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
}
.journey-stage { flex: 1; display: grid; place-items: center; }
.journey-slide { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; text-align: center; animation: journey-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.journey-slide h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.journey-slide p { margin: 0; font-size: 17px; opacity: 0.9; }
.journey-emoji { font-size: 88px; line-height: 1.1; animation: journey-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.journey-date { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.journey-count { margin-top: 6px !important; padding: 4px 12px; font-weight: 700; background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.journey-photo { width: min(80vw, 380px); aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.journey-photo .journey-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.journey-nav { position: absolute; top: 15%; bottom: 0; z-index: 2; width: 35%; background: none; border: 0; }
.journey-prev { left: 0; }
.journey-next { right: 0; width: 65%; }
@keyframes journey-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes journey-pop { from { transform: scale(0.3); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .journey-bars i { display: none; } }

/* ---------- Setup guide and tour ---------- */

.nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px;
  font: inherit;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: var(--lavender-soft);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nudge > span:first-child { font-size: 26px; }
.nudge span:last-child { display: flex; flex-direction: column; }
.nudge small { color: var(--muted); }
.settings-help { margin: 0 0 14px; }

.setup-step h2 { display: flex; align-items: center; gap: 10px; }
.setup-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font-size: 15px; color: var(--on-brand); background: var(--brand); border-radius: 50%; }
.setup-step.done .setup-num { background: var(--sage); color: #fff; }
.howto { margin: 12px 0 4px; padding-left: 22px; }
.howto li { margin-bottom: 8px; }
.key { display: inline-grid; place-items: center; min-width: 24px; padding: 0 4px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }

.tour { position: fixed; inset: 0; z-index: 180; }
.tour-spot {
  position: fixed;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(40, 20, 15, 0.62);
  transition: all 0.25s ease;
  pointer-events: none;
}
.tour:has(.tour-spot[style*="display: none"]) { background: rgba(40, 20, 15, 0.62); }
.tour-card {
  position: fixed;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 18px 12px;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.tour-count { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.tour-title { margin: 4px 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.tour-text { margin: 4px 0 10px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-actions .btn { min-height: 44px; padding: 0 16px; }
.tour [hidden] { display: none; }

/* ---------- Plus ---------- */

/* Paid items keep their normal look with this small tag (design brief section 8). */
.badge-plus { vertical-align: middle; }
/* One Plus tag: .badge-plus, .seg-pill (segmented tabs and menu rows) and .glance-pill share colours and pill shape; each keeps its own size. */
.badge-plus, .seg-pill, .glance-pill { color: var(--brand-strong); background: var(--brand-soft); border-radius: 99px; }
h1 .badge-plus { font-family: var(--font); font-size: 13px; }
.card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-title .muted { margin-left: auto; }
.plus-price { margin: 16px 0 0; text-align: center; }
.plus-price strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* On the web the store buttons are off on purpose: full colour, with a line saying where to buy. */
.btn.store-only:disabled { opacity: 1; cursor: default; }

/* ---------- Planner ---------- */

.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.week-nav > span { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.week-nav small { font-size: 13px; color: var(--muted); }
.week-nav .icon-btn { font: inherit; font-size: 26px; line-height: 1; background: var(--surface-2); border: 0; cursor: pointer; }
.week-nav .icon-btn:disabled { opacity: 0.4; cursor: default; }
.plan-past h2 { color: var(--muted); }
.plan-items, .template-list, .check-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plan-item, .template-list li, .check-list li { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.plan-item + .plan-item, .template-list li + li, .check-list li + li { border-top: 1px solid var(--border); }
.plan-emoji { flex: none; display: grid; place-items: center; width: 36px; height: 36px; font-size: 19px; background: var(--brand-soft); border-radius: 12px; }
.plan-main { flex: 1; min-width: 0; padding: 6px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; }
button.plan-main { cursor: pointer; }
.plan-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.template-list .plan-name { flex: 1; }
.plan-name strong { font-size: 15px; overflow-wrap: anywhere; }
.plan-name small { font-size: 13px; color: var(--muted); }
.chip-log { flex: none; min-height: 44px; padding: 6px 12px; font-size: 14px; color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
.plan-remove { flex: none; width: 44px; height: 44px; font: inherit; font-size: 22px; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.plan-day .chips[hidden] { display: none; }

/* ---------- Shopping checklist ---------- */

.check { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; min-height: 44px; padding: 10px 0; cursor: pointer; }
.check-static { cursor: default; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--sage); }
.check > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.check small { font-size: 13px; color: var(--muted); }
.check input:checked + span .shop-text { color: var(--muted); text-decoration: line-through; }
.shop-count { display: inline-block; margin-left: 4px; padding: 0 7px; font-size: 13px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border-radius: 99px; }
.shopping h3 { margin-top: 16px; }
.shopping .add-food { margin-top: 14px; }

/* ---------- GP report ---------- */

.report-actions { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.report { margin: 14px 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.report-brand { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 18px; }
.report-brand span { color: var(--brand); font-style: normal; }
.report h1 { margin: 2px 0 10px; font-size: 24px; }
.report h2 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.report-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; }
.report-meta dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.report-meta dd { margin: 0; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.report-table th, .report-table td { padding: 6px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.report-table thead th { font-size: 12px; color: var(--muted); border-bottom-width: 2px; }
.report-table tbody th { font-weight: 700; }
.report-flag { background: var(--surface-2); }
.carer-line { margin: 6px 0; }
.carer-line.report-flag { padding: 8px 10px; border-left: 4px solid var(--danger); border-radius: 6px; }
.carer-card h2 { margin-top: 18px; }
.report-foot { margin-top: 24px; padding-top: 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }

@media print {
  /* Paper is always light, whatever the phone's theme. */
  :root {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f0ee; --border: #cfc6c2;
    --text: #1f1a1a; --muted: #5a4d49; --brand: #96403a; --brand-strong: #96403a; --brand-soft: #f4f0ee;
    --shadow: none;
    color-scheme: light;
  }
  @page { size: A4; margin: 15mm 14mm; }
  body { background: var(--bg); font-size: 11pt; }
  .topbar, .tabbar, .no-print, .sheet, .toast, .tour, .journey, .confetti, .popover { display: none !important; }
  main { max-width: none; padding: 0; }
  .report { margin: 0; padding: 0; border: 0; }
  .report-table { font-size: 9.5pt; }
  .table-wrap { overflow: visible; margin: 0; }
  .report-table thead { display: table-header-group; }
  .report-table tr { break-inside: avoid; }
  .report h2 { break-after: avoid; }
  .report-flag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Printable sheets (printables.html) ---------- */

.allergen-chart .tick-box { width: 34px; min-width: 34px; border: 1px solid var(--border); }
.allergen-chart td:nth-child(2) { font-size: 12px; }
@media print {
  .printable-sheet { break-after: page; }
  .printable-sheet:last-of-type { break-after: auto; }
  .allergen-chart .tick-box { border-color: #999; }
}

/* ---------- Printable packs (#printables) ---------- */

.pack-card h2 { display: flex; align-items: center; gap: 8px; }
.pack-card .bullets { margin: 0 0 12px; }
.printable-sheet { margin-bottom: 24px; }
.printable-sheet .report-head .btn-text { margin-top: 4px; }
.write-lines { display: flex; flex-direction: column; gap: 0; margin: 4px 0 14px; }
.write-lines span, .write-line { display: block; height: 30px; border-bottom: 1px solid var(--border); }
.write-line.short { width: 60%; }
.food-ticks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin: 0 0 12px; padding: 0; font-size: 13px; }
.food-ticks li { display: flex; align-items: center; gap: 4px; }
.food-ticks .tick-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; font-size: 11px; border: 1px solid var(--border); border-radius: 3px; }
.planner-sheet td { height: 52px; min-width: 60px; border: 1px solid var(--border); }
.planner-sheet th small { display: block; font-weight: 400; color: var(--muted); }
.diary-sheet td { height: 34px; border: 1px solid var(--border); }
.about-me { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.about-photo { flex: none; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.about-photo-empty { border: 2px dashed var(--border); }
.about-facts { flex: 1; min-width: 0; margin: 0; }
.about-facts div { padding: 4px 0; border-bottom: 1px solid var(--border); }
.about-facts dt { font-size: 12px; color: var(--muted); }
.about-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.story-months { list-style: none; margin: 0; padding: 0; }
.story-months > li { break-inside: avoid; margin-bottom: 10px; }
.story-months h2 { margin: 8px 0 4px; font-size: 16px; }
.story-lines { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.story-lines li { padding: 2px 0; }
.milestone-cards { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; }
.milestone-cards li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 12px; text-align: center; border: 2px dashed var(--border); border-radius: var(--radius-sm); break-inside: avoid; }
.milestone-cards .card-emoji { font-size: 34px; }
.milestone-cards .write-line { width: 80%; }
.poster { text-align: center; }
.poster-count { margin: 10px 0 0; font-family: var(--font-display, inherit); font-size: 72px; font-weight: 700; line-height: 1; color: var(--brand); }
.poster-line { margin: 4px 0; font-size: 20px; font-weight: 600; }
.poster-foods { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 16px 0 0; padding: 0; }
.letter-open { font-size: 18px; font-weight: 600; }
@media (min-width: 600px) { .milestone-cards { grid-template-columns: repeat(3, 1fr); } }
@media print {
  .milestone-cards { grid-template-columns: repeat(3, 1fr); }
  .food-ticks { grid-template-columns: repeat(3, 1fr); font-size: 10pt; }
  .poster-count { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Food of the day and the first two weeks ---------- */

.pick { margin: 0 0 14px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.pick-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--brand-strong); }
.pick > .serve-art { width: 100%; max-width: 200px; margin: 0 auto 8px; }
.pick-main { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 0; text-align: left; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-emoji { flex: none; font-size: 48px; }
.pick .btn-text { display: block; margin: 6px auto 0; }

.how-list { margin: 0 0 12px; padding-left: 18px; }
.how-list li { margin-bottom: 6px; }

.starter-days { list-style: none; margin: 0; padding: 0; }
.starter-day { margin-bottom: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.starter-day.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.starter-head { margin: 0 0 6px; }
.starter-items { list-style: none; margin: 0 0 4px; padding: 0; }
.starter-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 0; text-align: left; color: inherit; font: inherit; background: none; border: 0; border-top: 1px solid var(--border); cursor: pointer; }
.starter-items li:first-child .starter-item { border-top: 0; }
.starter-name { flex: 1; min-width: 0; }
.starter-items .tick { color: var(--sage); font-weight: 700; }
.starter-items li.held .starter-name { color: var(--muted); }
.kind { flex: none; min-width: 92px; padding: 2px 8px; font-size: 12px; font-weight: 600; text-align: center; border-radius: 999px; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.kind-new { background: var(--sage-soft); color: var(--sage); box-shadow: none; }
.kind-allergen { background: var(--butter-soft); color: var(--butter); box-shadow: none; }
.kind-keep { background: var(--brand-soft); color: var(--brand-strong); box-shadow: none; }
.btn-small { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* ---------- Navigation: back links, grouped menus, the guide's topics ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: 4px 0 0;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.back-link span { font-size: 24px; line-height: 1; }
.menu { margin: 10px 0 16px; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.menu-row .post-title { flex: 1; }
.menu-chev {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}
.seg-pill {
  margin-left: 2px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.highlights { display: flex; gap: 18px; margin: -2px -6px 2px; padding: 6px 6px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.highlights::-webkit-scrollbar { display: none; }
.highlights > * { flex: none; }
.highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  padding: 0;
  color: var(--text);
  font: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.highlight-ring {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 26px;
  background: var(--surface-2);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ring-soft);
}
.highlight-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.highlight { position: relative; }
.highlight-label .badge-plus { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); padding: 1px 7px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check-list { list-style: none; margin: 8px 0; padding: 0; }
.check-list li + li { border-top: 1px solid var(--border); }
.check-list label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; cursor: pointer; }
.check-list input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--sage); }
.ready-go[hidden] { display: none; }
.ready-result { margin: 8px 0 12px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); }

/* ---------- Luxe refresh (20 Oct 2026) ----------
   Editorial serif headlines with an italic accent, champagne eyebrows, story rings, pastel bento
   stats, softer layered shadows and a floating frosted tab bar. Colours come from the tokens above. */

.eyebrow {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.greeting { margin: 10px 2px 16px; }
.greeting h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; }
.greeting h1 em, h1 em { font-style: italic; font-weight: 500; color: var(--brand); }
.page-head h1, .section-title { letter-spacing: -0.015em; }
.section-title { font-size: 24px; }

/* Stories row */
.stories {
  display: flex;
  gap: 14px;
  margin: 0 -16px 18px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories::-webkit-scrollbar { display: none; }
.story {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 70px;
  padding: 0;
  color: var(--text);
  font: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.story-ring, .highlight-ring {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 3px;
  background: var(--ring);
  border-radius: 50%;
  box-shadow: none;
  transition: transform 0.15s ease;
}
.story-ring.seen { background: var(--border); }
.story-ring > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  background: var(--surface-2);
  border: 3px solid var(--bg);
  border-radius: 50%;
}
.story-label, .highlight-label {
  display: -webkit-box;
  max-width: 80px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.story:active .story-ring, .highlight:active .highlight-ring { transform: scale(0.94); }
/* A Plus feature's circle: the usual Plus pill, tucked over the bottom of the ring. */
.story { position: relative; }
.story-plus { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); line-height: 1; pointer-events: none; }
.story-plus .badge { padding: 1px 6px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }

/* Highlights on the profile use the same ring, with a quieter champagne edge. */
.highlight-ring { width: 64px; height: 64px; font-size: 26px; background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold); }

/* Profile: the avatar wears a story ring, the counts are set in serif */
.avatar-xl {
  border: 3px solid transparent;
  background: var(--avatar-bg) padding-box, var(--ring) border-box;
  box-shadow: inset 0 0 0 3px var(--bg);
}
.profile .stats strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.bio h1 { font-size: 28px; }

/* Story player themes */
.journey { background: var(--story-bg); }
.journey-tip h2 { max-width: 340px; font-size: 25px; line-height: 1.3; }
.journey-tip .journey-emoji { font-size: 64px; }

/* Bento stats */
.home-stats { gap: 10px; }
.home-stats a { padding: 12px 4px 10px; border: 0; border-radius: var(--radius-sm); box-shadow: none; }
.home-stats a:nth-child(1) { background: var(--sage-soft); }
.home-stats a:nth-child(2) { background: var(--blush-soft); }
.home-stats a:nth-child(3) { background: var(--gold-soft); }
.home-stats strong { font-family: var(--font-display); font-size: 24px; font-weight: 600; }

/* Posts: the round icon gets a story ring */
.post-head { padding: 14px 16px 0; }
.post-icon {
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--ring) border-box;
  border: 2px solid transparent;
  box-shadow: none;
}
.post-title strong { font-size: 16px; letter-spacing: -0.005em; }
.post-body { padding: 6px 16px 18px; }
.post-alert .post-icon { background: var(--surface); border-color: transparent; }
.menu-row:active, .idea:active, .home-stats a:active { transform: scale(0.98); }
.menu-row, .idea, .home-stats a { transition: transform 0.15s ease; }

/* Buttons: softly lifted */
.btn-primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 26%, transparent); }
.btn:active { transform: scale(0.98); }

/* Segmented control as a pill */
.segmented { border-radius: 99px; }
.segmented a { border-radius: 99px; }


/* Floating frosted tab bar */
.tabbar {
  inset: auto 12px calc(var(--safe-b) + 10px) 12px;
  max-width: 560px;
  height: var(--tabbar-h);
  margin: 0 auto;
  padding: 0 6px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 32px;
  box-shadow: var(--shadow-float);
}
.tabbar a { position: relative; }
.tabbar a[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: 50%;
}
.tab-add {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand), var(--brand-strong));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
}
main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 40px); }
.toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); }

@media (prefers-color-scheme: dark) {
  .btn-primary, .tab-add { box-shadow: none; }
}
html[data-night] .btn-primary, html[data-night] .tab-add { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .story-ring, .menu-row, .idea, .home-stats a { transition: none; }
  .story:active .story-ring, .highlight:active .highlight-ring, .menu-row:active, .idea:active, .home-stats a:active, .btn:active, .quick-btn:active { transform: none; }
}

/* ---------- Check a product (barcode) ---------- */

.scan-view { margin: 0 0 16px; }
#scan-start[hidden], .scan-view[hidden] { display: none; }
.scan-view video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; background: #000; border-radius: var(--radius-sm); }
.product-card { margin-top: 16px; }
.product-card > h3:first-child { margin-top: 0; }
.product-card details { margin: 12px 0; }
.danger-text { color: var(--danger); font-weight: 600; }

/* ---------- Plus: diary tools, try again, variety, freezer, your recipes, keepsake ---------- */

/* Two tiles under the Diary tabs, in the same bento style as the Home stats. */
.diary-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.diary-find { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.diary-find .search { flex: 1; min-width: 0; margin: 0; }
.diary-jump { position: relative; flex: none; width: 48px; height: 48px; border-radius: 99px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-size: 1.25rem; }
.diary-jump input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.chat section[hidden], .bubbles li[hidden], .diary-none[hidden] { display: none; }
.tool-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.tool-tile:nth-child(1) { background: var(--sage-soft); }
.tool-tile:nth-child(2) { background: var(--gold-soft); }
.tool-tile > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tool-tile strong { font-size: 15px; }
.tool-tile small { font-size: 12px; font-weight: 600; color: var(--muted); }
.tool-icon { flex: none; font-size: 22px; }

/* Variety stats are figures, not links, so they take the tile look directly. */
.variety-stats > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  border-radius: var(--radius-sm);
}
.variety-stats > span:nth-child(1) { background: var(--sage-soft); }
.variety-stats > span:nth-child(2) { background: var(--blush-soft); }
.variety-stats > span:nth-child(3) { background: var(--gold-soft); }
.variety-stats > span > span { font-size: 20px; line-height: 1.2; }
.variety-empty h2 { color: var(--muted); }
.variety-cat .chips { margin-top: 8px; }

.try-list { list-style: none; margin: 0; padding: 0; }
.try-head { display: flex; align-items: center; gap: 10px; }
.try-dots { display: flex; align-items: center; gap: 5px; margin: 12px 0 8px; }
.try-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.try-dots span.on { background: var(--sage); box-shadow: none; }
.try-dots small { font-size: 12px; font-weight: 700; color: var(--sage); }

.freezer-list .plan-emoji { background: var(--lavender-soft); }

/* The keepsake book reuses the report card, with a softer cover. */
.keepsake-cover { text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.keepsake-cover h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; }
.keepsake-cover h1 em { color: var(--brand); }
.keepsake-avatar { display: block; width: 112px; height: 112px; margin: 12px auto 4px; overflow: hidden; border-radius: 50%; border: 3px solid var(--gold-soft); }
.keepsake-avatar img { width: 100%; height: 100%; object-fit: cover; }
.keepsake-first { margin: 8px 0 0; }
.keepsake-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 8px; }
.keepsake-stats div { padding: 8px 4px; background: var(--gold-soft); border-radius: var(--radius-sm); }
.keepsake-stats dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.keepsake-stats dd { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.keepsake-favs { font-family: var(--font-display); font-style: italic; font-size: 17px; }
.keepsake-list { list-style: none; margin: 0; padding: 0; }
.keepsake-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.keepsake-list li:first-child { border-top: 0; }
.keepsake h3 { margin: 16px 0 6px; font-size: 15px; }
.keepsake-foods { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.keepsake-foods li { display: flex; align-items: center; gap: 8px; break-inside: avoid; }
.keepsake-foods li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.keepsake-foods strong { font-size: 14px; overflow-wrap: anywhere; }
.keepsake-foods small { font-size: 12px; color: var(--muted); }
.keepsake-foods .serve-art, .keepsake-foods .photo-wrap { flex: none; width: 52px; height: 40px; }
.keepsake-foods .photo-wrap { overflow: hidden; border-radius: 10px; }
.keepsake-foods .photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.keepsake-dot { flex: none; width: 52px; height: 40px; border-radius: 10px; background: var(--gold-soft); }
.keepsake-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.keepsake-photos li { break-inside: avoid; }
.keepsake-photos .photo-wrap { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.keepsake-photos img { width: 100%; height: 100%; object-fit: cover; }
.keepsake-photos small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
@media print {
  /* Paper is light, so the keepsake's tints and drawings use their light values too. */
  :root {
    --gold-soft: #f4ead9; --sage-soft: #e5efe1; --blush-soft: #f8e7e5;
    --art-bg: #fbf1ea; --art-plate: #ffffff; --art-edge: #ecdccf; --art-bowl: #f6e3d6; --art-spoon: #e7d8cc;
    --milestone-bg: linear-gradient(160deg, #fff1e6, #fde4ec 60%, #efe6fb);
    --iron: #6a4fa3; --iron-dot: #8f6fd0; --star: #e0a526; --dot-milestone: #f1b44c; --dot-memory: #c9a6e8;
    --ring-solid: #f19a8f; --ring-soft: #f4b8a8; --progress-bg: linear-gradient(90deg, #f7c873, #f19a8f);
  }
  .keepsake-cover { break-after: page; padding-top: 60mm; border: 0; }
  .keepsake-photos-section { break-before: page; }
  .keepsake-stats div, .keepsake-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Unwell day, nappies, notes, cook-ups ---------- */

.unwell-toggle { display: block; width: 100%; margin: 8px 0 0; min-height: 44px; text-align: center; }
.unwell-toggle[aria-pressed="true"] { color: var(--butter); }

/* Nappies sit in the diary chat as small centred pills, like WhatsApp's system messages. */
.nappy-row { display: flex; justify-content: center; }
.nappy-pill {
  min-height: 44px;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-2);
  border: 0;
  border-radius: 99px;
  cursor: pointer;
}

.batch-portions { display: flex; align-items: center; gap: 4px; flex: none; }
.batch-portions input[type="number"] { flex: none; width: 56px; min-height: 44px; padding: 0 8px; font: inherit; text-align: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.batch-portions small { color: var(--muted); }
.batch-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.batch-labels li { display: flex; flex-direction: column; gap: 2px; padding: 10px; font-size: 13px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; break-inside: avoid; }
.batch-labels strong { font-size: 15px; }
.batch-labels small { margin-top: 4px; font-size: 11px; color: var(--muted); }
@media print {
  .batch-labels { grid-template-columns: repeat(3, 1fr); }
  .batch-labels li { border-color: #999; }
}

/* ---------- Allergy mode ---------- */

.ladder { padding: 12px 0; border-top: 1px solid var(--border); }
.ladder h3 { margin: 0; }
.ladder-steps { margin: 8px 0 0; padding-left: 22px; }
.ladder-steps li { padding: 4px 0; }
.ladder-steps li > span { display: flex; flex-direction: column; line-height: 1.35; }
.ladder-steps small { font-size: 13px; color: var(--muted); }
.ladder-steps li.logged::marker { color: var(--sage); font-weight: 700; }
.ladder-pills .pill span { text-align: left; }

/* More than one child: the name on the profile opens the switcher, like switching accounts. */
.child-switch { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; }
.child-switch > span[aria-hidden] { font-size: 0.55em; color: var(--muted); }
.child-list { list-style: none; margin: 0 0 12px; padding: 0; }
.child-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.child-row { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.child-main { display: flex; flex-direction: column; }
.child-tick { margin-left: auto; color: var(--brand); font-weight: 700; }
.child-remove { color: var(--muted); }

/* ---------- iPad and wide screens ----------
   The same look, given room: the floating tab bar becomes a rail on the left, sheets open as
   centred cards, and the dashboard pages (Home, Plan) set their posts in two columns. */
@media (min-width: 768px) {
  .tabbar {
    inset: 50% auto auto calc(16px + var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    transform: translateY(-50%);
    flex-direction: column;
    gap: 4px;
    width: 84px;
    height: auto;
    max-width: none;
    padding: 12px 0;
  }
  .tabbar a { flex: none; width: 100%; min-height: 64px; }
  .tabbar a[aria-current="page"]::after { top: 50%; left: 4px; transform: translateY(-50%); }
  .tab-add { margin: 6px auto; }
  .topbar, main { padding-left: calc(124px + var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); }
  .topbar { padding-right: 32px; }
  main { max-width: calc(1080px + 124px); padding-right: 32px; padding-bottom: 48px; }
  .toast { bottom: 32px; }

  /* Reading pages stay a comfortable line length. */
  main:not([data-view="home"]):not([data-view="plan"]) > * { max-width: 720px; margin-left: auto; margin-right: auto; }

  .sheet { margin: auto; border-radius: 24px; max-height: calc(100% - 64px); }
  .sheet-body { max-height: calc(100dvh - 64px); padding-bottom: 24px; }
  .sheet-body::before { display: none; }
}
@media (min-width: 1000px) {
  main[data-view="home"], main[data-view="plan"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
  }
  main[data-view="home"] > *, main[data-view="plan"] > * { grid-column: 1 / -1; min-width: 0; }
  main[data-view="home"] > .post, main[data-view="home"] > .guide-link, main[data-view="home"] > .sos-banner,
  main[data-view="plan"] > .card { grid-column: auto; }
  main[data-view="home"] > .post-watch, main[data-view="home"] > .post-alert { grid-column: 1 / -1; }
}

/* Smart suggestions */
.smart-h { margin-top: 4px; }
.smart-picks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.smart-picks li { display: flex; align-items: center; gap: 10px; }

/* Growing up: checks, things to mention, play ideas and the growth log */
.grow-check { background: var(--butter-soft); }
.grow-check p { margin: 6px 0 0; }
.grow-check .btn { margin-top: 10px; }
.grow-list { margin: 8px 0; padding-left: 20px; }
.grow-list li + li { margin-top: 6px; }
.play-list { list-style: none; margin: 8px 0; padding: 0; }
.play-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.play-list li + li { border-top: 1px solid var(--border); }
.play-list strong, .play-list .small { display: block; }
.play-emoji { font-size: 1.6rem; line-height: 1; flex: none; width: 32px; text-align: center; }
.growth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.growth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.growth-form input { min-height: 44px; width: 100%; box-sizing: border-box; }
.growth-form .growth-note, .growth-form button { grid-column: 1 / -1; }
.growth-list { list-style: none; margin: 8px 0 0; padding: 0; }
.growth-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 10px 0; }
.growth-list li + li { border-top: 1px solid var(--border); }
.growth-list li > span > span { display: block; }
#recent-scans { margin-top: 16px; }
#recent-scans .card-title h3 { margin: 0; }
#recent-scans .card-title .btn-text { margin-left: auto; }

/* ---------- Stages: pregnancy (#bump, #bumpdiary) ---------- */

.born-only[hidden], .expecting-only[hidden], .name-field[hidden], .field[hidden], .profile-tabs[hidden] { display: none; }
.start-options { display: grid; gap: 8px; }
.start-option { position: relative; display: block; }
.start-option input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.start-option > span { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 0 10px; min-height: 56px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.start-icon { grid-row: span 2; font-size: 26px; text-align: center; }
.start-option small { color: var(--muted); font-size: 13px; }
.start-option input:checked + span { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.start-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.plain-list { list-style: none; margin: 0 0 12px; padding: 0; }
.post-calm { background: var(--blush-soft); }
.preg-timeline li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.preg-timeline li:last-child { border-bottom: 0; }
.preg-timeline strong { display: inline-block; min-width: 92px; color: var(--brand-strong); }
.preg-timeline li.now { margin: 0 -8px; padding: 8px; background: var(--gold-soft); border-radius: var(--radius-xs); }
.feel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; min-height: 44px; padding: 6px 0; color: inherit; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.feel-row .small { flex-basis: 100%; }
.buy-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 0; color: var(--text); font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.buy-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.buy-list li:last-child { border-bottom: 0; }
.buy-list .buy-item { flex: 1; min-width: 0; border-bottom: 0; }
/* Paid links on the baby list: small, labelled "Ad", never louder than the item. */
.ad-link { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.8rem; color: var(--muted); text-decoration: underline; }
.ad-tag { display: inline-block; padding: 1px 6px; font-size: 0.7rem; font-weight: 700; text-decoration: none; color: var(--text); border: 1px solid var(--border); border-radius: 99px; }
.ad-card { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px dashed var(--border); box-shadow: none; }
.ad-card p { margin: 0; }
.ad-card-head { display: flex; align-items: center; gap: 8px; }
.ad-card-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; padding: 8px 0; color: var(--text); }
.ad-card-link span { font-size: 0.85rem; color: var(--muted); text-decoration: underline; }
.buy-item .tick-box, .tick-row .tick-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; font-weight: 700; color: var(--on-brand); border: 2px solid var(--border); border-radius: var(--radius-xs); }
.buy-item.got .tick-box { background: var(--sage); border-color: var(--sage); }
.buy-item.skip { color: var(--muted); text-decoration: line-through; }
.buy-item.skip .tick-box { color: var(--muted); }
.menu-list .menu-row { box-shadow: none; }
.bump-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; }
.bump-grid li { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 2px dashed var(--border); border-radius: var(--radius-sm); break-inside: avoid; }
.bump-box { display: block; height: 120px; }
@media (min-width: 600px) { .bump-grid { grid-template-columns: repeat(4, 1fr); } }
@media print { .bump-grid { grid-template-columns: repeat(4, 1fr); } .bump-box { height: 140px; } }
.appt-group { margin: 16px 0; }
.appt-group h2 { margin: 0 0 8px; font-size: 17px; }
.contraction-btn { min-height: 72px; font-size: 20px; flex-direction: column; }
.contraction-btn small { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.contraction-table td { font-variant-numeric: tabular-nums; }
.contraction-summary .about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contraction-summary .about-facts div { border: 0; }
.arrival-photo { display: block; width: 200px; height: 200px; margin: 16px auto; }
.arrival-facts { max-width: 360px; margin: 0 auto; text-align: left; }
.partner-card h2 { margin-top: 18px; }

/* ---------- Stages: newborn and baby (#newborn, #daybook) ---------- */

/* Night mode: very dim and warm, for feeds in the small hours. Set from the app, not the phone. */
html[data-night] {
  --bg: #120d0d; --surface: #1c1514; --surface-2: #241b1a; --border: #332826;
  --text: #e8cfc4; --muted: #a8908a; --brand: #d98b78; --brand-strong: #e8a493; --brand-soft: #3a2420; --on-brand: #1a0e0c;
  --gold: #c9a77a; --gold-soft: #2c2219; --blush-soft: #2e1f1d; --sage: #9fbf94; --sage-soft: #222b20;
  --butter: #d9b45a; --butter-soft: #2e2617; --lavender-soft: #26212f; --danger: #f25a54; --danger-soft: #3b1b1d;
  --bubble-me: #2e1f1d; --chat-bg: #160f0f; --shadow: none; --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.6);
  --tip-bg: linear-gradient(150deg, #2e1f1b, #2b1d22 55%, #231f2d); --story-bg: linear-gradient(165deg, #4d342c, #3f2b35 50%, #2a273d);
  --avatar-bg: linear-gradient(135deg, #3a2722, #36222b 55%, #2a2536);
  --art-bg: #2a2021; --art-plate: #382d2e; --art-edge: #46393a; --art-bowl: #4a3b3c; --art-spoon: #5a4b4c;
  --ring-solid: #b8705f; --ring-soft: #6e463d; --progress-bg: linear-gradient(90deg, #b8964a, #c27565);
  --milestone-bg: linear-gradient(160deg, #2e1f1b, #2b1d22 60%, #231f2d);
  --journey-bg: linear-gradient(160deg, #6e322c, #4f3459 60%, #2e375e);
  --iron: #c4b0ea; --iron-dot: #9580c4; --star: #d9b45a; --dot-milestone: #b88a36; --dot-memory: #8a74b0;
  color-scheme: dark;
}
.night-toggle { margin-top: 4px; }
.quick-log { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: 8px; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.quick-btn span { font-size: 22px; }
.quick-btn.on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.quick-btn small { font-size: 12px; font-variant-numeric: tabular-nums; }
.quick-btn:active { transform: scale(0.97); }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; }
.day-nav .btn { min-width: 48px; font-size: 22px; }
.day-entries .menu-row { margin-bottom: 8px; }
.baby-timeline strong { display: block; min-width: 0; }

/* ---------- Stages: toddler (#toddler) ---------- */
.routine-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.routine-list .plan-remove { margin-left: auto; }
.routine-time { min-width: 52px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-strong); }
.chips.words { list-style: none; padding: 0; }
.chips.words small { color: var(--muted); font-weight: 400; }
.routine-chart { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.routine-chart li { display: grid; grid-template-columns: 70px 48px 1fr 40px; align-items: center; gap: 10px; padding: 10px 12px; border: 2px dashed var(--border); border-radius: var(--radius-sm); font-size: 18px; break-inside: avoid; }
.routine-chart .routine-icon { font-size: 30px; }
.inline-line { display: inline-block; width: 160px; height: 1em; }
.season-card h2 { display: flex; align-items: center; gap: 8px; }
.keepsake-days strong { display: block; font-size: 0.85rem; }

/* ---------- Pre-release ease of use ---------- */
/* The Plus sheet's price and Unlock stay in view at the bottom, like the meal form's Save. */
.plus-foot { text-align: center; }
.plus-foot .plus-price { margin: 4px 0 8px; }
.plus-foot .muted { margin: 6px 0 0; }
.plus-more { margin: 14px 0 6px; }
.plus-more > summary { color: var(--brand-strong); }
.plus-more .plus-group:first-of-type { margin-top: 12px; }
/* SOS: one row of jump chips under the call buttons. */
.sos-jump { justify-content: center; margin: 4px 0 14px; }
.sos-jump .chip { display: inline-flex; align-items: center; text-decoration: none; }
/* In an emergency every chip is a full 44px target, drawn as well as tapped. */
main[data-view="safety"] .chip { min-height: 44px; }
#sos-choking, #sos-reaction, #sos-cpr { scroll-margin-top: calc(var(--safe-t) + 72px); }
/* Our own pack in the empty Ad slot: the same quiet card, with no "Ad" label. */
.house-card .ad-card-link span { color: var(--brand-strong); }
/* The welcome sheet: language on one row, the optional fields folded away. */
.language-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.language-row .field-label { margin: 0; }
.language-row select {
  width: auto;
  min-width: 150px;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.welcome-more { margin: 4px 0 18px; }
.welcome-more > .field:first-of-type { margin-top: 12px; }
/* Long button words (German, Swedish) wrap inside a pair instead of pushing the page sideways. */
.btn-pair .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 12px; }
/* Long single words (Dutch milestones, Swedish food names) break inside their tile at 320px. */
.milestone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.milestone, .idea { min-width: 0; }
.milestone-title, .idea-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* The routine chart, now printable from its own screen, fits a 320px phone (paper keeps its size). */
@media screen and (max-width: 360px) {
  .routine-chart li { grid-template-columns: 54px 34px minmax(0, 1fr) 28px; gap: 8px; padding: 8px 10px; font-size: 16px; }
  .routine-chart .routine-icon { font-size: 24px; }
}

/* ---------- The glance Home ----------
   One phone screen, like a watch face: the greeting, a hero tile for the stage, then a 2-column
   grid of status tiles. A tile's dot has its own shape for each status (filled for done, a ring
   for due today, a diamond for worth a look, a dash for nothing yet) and its words say it too. */
main[data-view="home"] { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); }
.glance-greeting { margin: 0 2px 8px; }
.glance-greeting .eyebrow { font-size: 11px; }
.glance-greeting h1 { font-size: 27px; }
.glance-greeting .muted { font-size: 14px; line-height: 1.35; }
.glance-greeting .night-toggle { position: relative; display: inline; min-height: 0; margin: 0 0 0 6px; padding: 6px 0; font-size: 13px; }
.glance-greeting .night-toggle::after { content: ""; position: absolute; inset: -8px -4px; } /* 44px tap area, same look */
main[data-view="home"] .stories { gap: 10px; margin-bottom: 10px; padding-top: 0; }
main[data-view="home"] .story { width: 58px; gap: 3px; }
main[data-view="home"] .story-ring { width: 50px; height: 50px; }
main[data-view="home"] .story-ring > span { font-size: 21px; }
main[data-view="home"] .story-label { font-size: 11px; -webkit-line-clamp: 2; max-width: 64px; }
main[data-view="home"] .story-plus { top: 38px; }

.glance-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0 0 10px;
  padding: 7px 10px 7px 12px;
  font: inherit;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: var(--lavender-soft);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.glance-banner-icon { flex: none; font-size: 20px; line-height: 1; }
.glance-banner-text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.glance-banner-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glance-banner-text small { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.glance-banner-btn { flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; }
.glance-banner-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; font: inherit; font-size: 22px; color: var(--muted); background: none; border: 0; cursor: pointer; }
.banner-plus { background: var(--gold-soft); cursor: default; }
.banner-alert { background: var(--brand-soft); }
.banner-unwell { padding: 0 8px; background: var(--butter-soft); cursor: default; }
.banner-unwell .unwell-toggle { margin: 0; }
.post-watch.watch-compact { margin-bottom: 10px; }
.watch-compact .post-head { padding-top: 10px; }
.watch-compact .post-body { padding-bottom: 12px; }
.watch-compact .post-body p { margin: 4px 0 8px; }
.watch-compact .btn { min-height: 44px; }
.watch-compact .btn-pair { margin-top: 8px; }

.glance { margin: 0; }
.glance-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.glance-tile { position: relative; min-width: 0; }
.glance-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  height: 100%;
  min-height: 72px;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.glance-main:active { transform: scale(0.98); }
.glance-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.has-quick .glance-top { padding-right: 30px; }
.glance-icon { flex: none; font-size: 16px; line-height: 1; }
.glance-label, .glance-metric, .glance-sub-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two lines for the small print, so translations aren't cut to a word. */
.glance-sub-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.has-quick .glance-metric { padding-right: 30px; }
.glance-more { display: none; }
.glance-pill { flex: none; margin-left: auto; padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.glance-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.glance-metric { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.glance-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.glance-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.is-done .glance-main { background: var(--sage-soft); border-color: transparent; }
.is-done .glance-dot { background: var(--sage); }
.is-due .glance-main { background: var(--gold-soft); border-color: transparent; }
.is-due .glance-dot { border: 2px solid var(--gold); }
.is-look .glance-main { background: var(--brand-soft); border-color: transparent; }
.is-look .glance-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--brand); transform: rotate(45deg); }
.is-none .glance-dot { width: 9px; height: 3px; border-radius: 2px; background: var(--muted); opacity: 0.6; }
.is-info .glance-dot { display: none; }
.glance-quick {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  color: var(--brand-strong);
  background: none;
  border: 0;
  cursor: pointer;
}
.glance-quick span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.glance-quick[aria-pressed="true"] span { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.glance-quick:active span { transform: scale(0.92); }
.glance-note { margin: 10px 4px 0; font-size: 12px; line-height: 1.35; color: var(--muted); }

/* Hero tiles: one per stage, full width above the grid. */
.glance-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  margin: 0 0 8px;
  padding: 8px 16px 8px 12px;
  color: var(--text);
  text-decoration: none;
  background: var(--tip-bg);
  border-radius: 22px;
  transition: transform 0.15s ease;
}
.glance-hero:active { transform: scale(0.99); }
.hero-text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.hero-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.hero-line { font-size: 14px; font-weight: 600; }
.hero-sub { font-size: 12px; color: var(--muted); }
/* Hero text is never cut: the line that tells a new parent what to do is the longest one, and
   German needs room. Long words break rather than run past the card. */
.hero-title, .hero-line, .hero-sub { overflow-wrap: anywhere; hyphens: auto; }

.bump-art { flex: none; width: 76px; height: 76px; }
.bump-glow { fill: var(--surface); opacity: 0.55; }
.bump-womb { fill: var(--blush-soft); }
.bump-baby { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.bump-line { fill: none; stroke: var(--brand-strong); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bump-cheek { fill: var(--brand); opacity: 0.25; }
.bump-spark { fill: var(--gold); }

.cycle-stem { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-cycle { background: var(--sage-soft); }
.cycle-lengths li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cycle-lengths li:last-child { border-bottom: 0; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head h2 { margin: 0; }
.cal-head .btn { min-width: 48px; font-size: 22px; text-decoration: none; }
.cal-grid { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; }
.cal-names li { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.cal-day { width: 100%; aspect-ratio: 1; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; font: inherit; color: var(--text); background: var(--surface-2); border: 0; border-radius: var(--radius-xs); }
.cal-day:disabled { opacity: 0.55; }
.cal-day.is-period, .cal-swatch.is-period { background: var(--blush-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.cal-day.is-maybe, .cal-swatch.is-maybe { background: transparent; border: 2px dashed var(--brand); }
.cal-day.is-today .cal-num { font-weight: 800; text-decoration: underline; }
.cal-num { font-size: 14px; line-height: 1; }
.cal-dots { display: flex; gap: 2px; min-height: 12px; font-size: 10px; line-height: 1; }
.cal-test { color: var(--muted); }
.cal-test.pos { color: var(--brand); }
.cal-note { color: var(--gold); font-weight: 800; }
.cal-intimate { color: var(--brand); font-size: .8em; }
.cal-streak { font-size: .7em; font-weight: 700; color: var(--text); }
.cal-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; color: var(--muted); }
.cal-key li { display: flex; align-items: center; gap: 6px; }
.cal-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 5px; }

.hero-gauge { background: var(--surface); border: 1px solid var(--border); }
.gauge { flex: none; width: 104px; height: 60px; overflow: visible; }
.gauge-track, .gauge-fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge-track { stroke: var(--surface-2); }
.gauge-fill { stroke: var(--gold); opacity: 0.45; }
.gauge-usual { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.gauge-needle { transform-box: view-box; transform-origin: 60px 62px; transform: rotate(-90deg); transition: transform 0.9s cubic-bezier(0.3, 1.25, 0.5, 1); }
.gauge-needle path { stroke: var(--brand-strong); stroke-width: 3; stroke-linecap: round; }
.gauge-needle circle { fill: var(--brand-strong); }
.gauge-waiting .gauge-needle, .gauge-waiting .gauge-usual { opacity: 0.35; }

/* Before solids: the start hero, and the feed scales and nappy card side by side (8 Nov 2026). */
.hero-start { background: var(--sage-soft); }
/* The first-food hero is a button (it opens the meal sheet), so it takes the link hero's look. */
button.glance-hero { width: 100%; font: inherit; text-align: left; border: 0; cursor: pointer; }
.start-art { flex: none; display: grid; place-items: center; width: 64px; height: 64px; font-size: 32px; background: var(--surface); border-radius: 50%; }
.hero-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.hero-pair .glance-hero { margin: 0; }
.hero-half { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
.hero-half .hero-title { font-size: 20px; }
.hero-half .hero-line { font-size: 13px; }
.hero-scales { background: var(--surface); border: 1px solid var(--border); }
.scales { width: 100%; max-width: 120px; height: 52px; overflow: visible; }
.scale-post, .scale-beam, .scale-string { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.scale-string { stroke-width: 1.2; }
.scale-pivot { fill: var(--brand-strong); }
.scale-dish { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.4; }
.pan-today .scale-dish { fill: var(--blush-soft); stroke: var(--brand); }
.is-balanced .scale-beam { stroke: var(--sage); }
.hero-nappy { background: var(--gold-soft); }
.nap-grid { display: grid; grid-template-columns: repeat(4, 26px); gap: 4px; }
.nap-spot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; overflow: hidden; background: var(--surface); border-radius: 8px; }
.nap-spot svg { width: 20px; height: 20px; }
.nap-spot path { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.2; }
.nap-spot .nap-tab { fill: var(--surface); }
.nap-spot.wet.open path:first-child { fill: #cfe3f2; stroke: #3d6f93; }
.nap-spot.dirty.open path:first-child { fill: #e8cf9a; stroke: #7d5f33; }
/* The scratch foil: a gold cover with a sheen, gone once the nappy is logged. */
.nap-spot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #d9b886 0%, #f3e4c4 45%, #c9a77a 55%, #e9d4a8 100%); border-radius: inherit; }
.nap-spot.open::after { opacity: 0; transform: translate(110%, -110%) rotate(20deg); }
.nap-spot.fresh::after { animation: nap-scratch 0.7s ease-out both; }
@keyframes nap-scratch { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(110%, -110%) rotate(20deg); } }
.nap-empty .nap-spot::after { opacity: 0.55; }
.is-done .nap-grid { box-shadow: 0 0 0 2px var(--sage); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .nap-spot.fresh::after { animation: none; opacity: 0; } }
@media (max-width: 360px) { .nap-grid { grid-template-columns: repeat(4, 22px); } .nap-spot { width: 22px; height: 22px; } }

.hero-bingo { background: var(--gold-soft); }
.bingo-mini { flex: none; display: grid; grid-template-columns: repeat(3, 24px); gap: 3px; }
.bingo-cell { display: grid; place-items: center; width: 24px; height: 24px; font-size: 12px; background: var(--surface); border-radius: 7px; opacity: 0.5; filter: grayscale(0.8); }
.bingo-cell.done { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px var(--brand); transform: rotate(-6deg); }

.bingo-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.bingo-square { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px 4px; text-align: center; background: var(--surface-2); border-radius: var(--radius-sm); }
.bingo-square.done { background: var(--sage-soft); }
.bingo-emoji { font-size: 24px; line-height: 1; }
.bingo-square:not(.done) .bingo-emoji { opacity: 0.45; filter: grayscale(0.8); }
.bingo-name { font-size: 12px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.bingo-stamp { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; font-size: 14px; font-weight: 800; color: var(--brand); border: 2px solid var(--brand); border-radius: 50%; transform: rotate(-12deg); }

@media (prefers-reduced-motion: reduce) {
  .gauge-needle, .glance-main, .glance-hero, .tour-spot { transition: none; }
  .glance-main:active, .glance-hero:active, .glance-quick:active span { transform: none; }
}

/* Short phones (an iPhone SE, 320 x 640): smaller shortcut circles, no date, a smaller hero, and the first six
   tiles. Everything else is still one tap away on its own screen. */
@media (max-height: 700px) {
  .glance-greeting .eyebrow { display: none; }
  /* The shortcut circles stay (they're how the scanner, sharing and reports are found), smaller. */
  main[data-view="home"] .stories { margin-bottom: 6px; }
  main[data-view="home"] .story { width: 50px; }
  main[data-view="home"] .story-ring { width: 44px; height: 44px; }
  main[data-view="home"] .story-ring > span { font-size: 18px; }
  main[data-view="home"] .story-label { font-size: 11px; -webkit-line-clamp: 1; max-width: 58px; }
  main[data-view="home"] .story-plus { top: 32px; }
  .glance-greeting { margin-bottom: 8px; }
  .glance-greeting h1 { font-size: 23px; }
  .glance-greeting .muted { font-size: 13px; }
  .glance-hero { min-height: 76px; padding: 6px 12px 6px 10px; gap: 10px; }
  .bump-art { width: 62px; height: 62px; }
  .gauge { width: 84px; height: 48px; }
  .hero-title { font-size: 20px; }
  .hero-sub { display: none; }
  .bingo-mini { grid-template-columns: repeat(3, 22px); }
  .bingo-cell { width: 22px; height: 22px; font-size: 11px; }
  .glance:not(.show-all) .glance-grid li:nth-child(n+7) { display: none; }
  .glance-more { display: block; margin: 6px auto 0; min-height: 44px; }
  .glance-grid { gap: 6px; }
  .glance-main { min-height: 64px; padding: 6px 10px; gap: 0; }
  .glance-metric { font-size: 18px; }
  .glance-banner { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  .glance-banner-text small { -webkit-line-clamp: 1; }
}
@media (max-width: 360px) {
  .glance-label, .glance-sub { font-size: 11px; }
  .glance-label { white-space: normal; line-height: 1.2; }
  .glance-main { padding-left: 10px; padding-right: 8px; }
}
@media (min-width: 768px) {
  .glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .glance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Trying for a baby: the Plus extras and the pack */
.letter-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.letter-card .btn-text { margin-top: 4px; }
.letter-print + .letter-print, .letter-print + .letter-open { margin-top: 20px; }
.memory-pick-small .memory-pick-preview { min-height: 120px; }
.memory-pick-small .memory-preview { max-height: 220px; }
.story-found { margin-bottom: 16px; }
.story-found h2 { margin-top: 0; }
.announce-cards strong { font-size: 1.15rem; line-height: 1.3; }
.year-grid { font-size: 10px; table-layout: fixed; min-width: 600px; }
.year-grid th, .year-grid td { padding: 2px 0; text-align: center; min-width: 14px; height: 18px; }
.year-grid tbody th { text-align: left; padding-right: 4px; width: 34px; }
.year-grid td { border: 1px solid var(--border); }
.year-grid td.year-p { background: var(--blush-soft); }
.year-grid td.year-x { background: var(--border); }
@media print { .year-grid { min-width: 0; } .year-grid td.year-p { background: #f6d9d4; } .year-grid td.year-x { background: #eee; } }

/* Review, Oct 2026: trusted-source labels, charts, names, ticks, the bundle */
.trusted-tag { display: inline-block; margin: 2px 6px 2px 6px; padding: 1px 8px; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; vertical-align: 1px; }
.trusted-note { margin: 12px 2px 0; font-size: 12px; color: var(--muted); }
.week-bars { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; padding: 0; }
.week-bars li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font-size: 12px; }
.week-bars small { color: var(--muted); }
.week-bar { display: flex; align-items: flex-end; width: 100%; height: 72px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.week-bar-fill { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; }
.bar-feeds { background: var(--brand); }
.bar-sleep { background: var(--sage); }
.names-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.names-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.names-fav { min-width: 44px; min-height: 44px; font-size: 20px; }
.check-ticks .buy-item { width: 100%; text-align: left; }
.keepsake-chapter { margin-top: 24px; }
.keepsake-chapter h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; }
.plan-preview { pointer-events: none; user-select: none; }
.sos-preg h2, .sos-later { margin-top: 0; }
.sos-later { margin: 20px 2px 4px; font-size: 18px; }
.pack-all { border: 2px solid var(--gold-soft); }
.btn-pair + .card, .btn-pair + section { margin-top: 12px; }
.night-toggle, .child-switch { min-height: 44px; min-width: 44px; }

/* Our own food icons (js/food-icons.js), sized and placed like an emoji. */
.food-icon { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; }
/* "Who is this for?" ticks for twins and siblings (alsoForField in js/app.js). */
.also-for .pill > span { display: inline-flex; align-items: center; gap: 6px; }
.also-for .avatar-sm { position: relative; width: 24px; height: 24px; font-size: 12px; overflow: hidden; flex: none; }

/* ---------- Companion features (6 Nov 2026) ---------- */
.companion-home { margin-top: 8px; }
.companion-home .post { margin-top: 12px; }
.partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.partner-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 128px; padding: 16px 12px; color: var(--text); font: inherit; text-align: center; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 20px); box-shadow: var(--shadow); cursor: pointer; }
.partner-btn > span { font-size: 36px; line-height: 1; }
.partner-btn strong { font-size: 16px; }
.timer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.timer-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; color: var(--text); font: inherit; background: var(--surface); border: 2px solid var(--border); border-radius: 50%; aspect-ratio: 1; justify-content: center; cursor: pointer; }
.timer-side span { font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 600; }
.timer-side small { color: var(--muted); }
.timer-side.is-running { background: var(--brand-soft); border-color: var(--brand); }
.chip.chip-on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.name-votes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.name-votes .chip { min-height: 44px; padding: 2px 10px; font-size: 13px; }
.names-list li > span { flex: 1; }
.tick-row { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; vertical-align: middle; margin-right: 2px; padding: 0; background: none; border: 0; cursor: pointer; }
.preg-timeline li.done strong { color: var(--sage); }
.potty-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.potty-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 96px; padding: 8px 4px; font-size: 12px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.potty-day.is-today { border-color: var(--brand); background: var(--brand-soft); }
.potty-stickers { font-size: 20px; line-height: 1.3; word-break: break-all; }
.potty-sticker { font-size: 22px; }
.words-book { padding: 16px; }
.words-cover { margin: 0 0 16px; font-family: var(--font-display); font-size: 30px; text-align: center; }
.words-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.words-grid li { display: flex; flex-direction: column; align-items: center; padding: 14px 8px; background: var(--surface-2); border-radius: var(--radius-sm); }
.words-grid strong { font-family: var(--font-display); font-size: 22px; }
.words-grid small { color: var(--muted); }
.announce-preview { display: block; width: 100%; max-width: 420px; margin: 12px auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.bump-weeks { margin-top: 12px; }
@media print {
  .potty-week { grid-template-columns: repeat(7, 1fr); }
  .potty-day { min-height: 160px; }
}

/* ---------- Pausing updates after a loss (js/loss.js): calm, no colour change ---------- */
.tab-add[hidden] { display: none; }
.loss-link { text-align: center; margin: 24px 0 8px; }
.loss-head h1 { margin-bottom: 8px; }
.loss-ext { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; height: auto; padding: 12px 16px; white-space: normal; }
.loss-ext .muted { font-weight: 400; }
.loss-quote { margin: 12px 0 8px; padding: 10px 14px; border-left: 3px solid var(--border); font-style: italic; }
.loss-kinds .pill span { white-space: normal; }
.loss-remember p { margin: 0; }

/* Medicine times */
.med-last { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.med-last p { margin: 4px 0 0; }
.med-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }

/* App lock: covers the diary while the app is away or locked */
.app-lock-cover { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 32px; background: var(--bg); text-align: center; }
.app-lock-cover > div { width: min(320px, 100%); }
.app-lock-logo { font-size: 44px; margin: 0 0 8px; }
body.is-locked { overflow: hidden; }

/* Money and admin dates */
.date-item.is-done { opacity: .6; }
.date-item.is-past h2::after { content: ''; }
.date-item h2 { margin: 2px 0 4px; font-size: 1.05rem; }

/* Movements card: plain and clear, never alarming */
.post-move { border-left: 4px solid var(--brand); }

/* Ovulation test photos, side by side (no reading or judging) */
.opk-grid { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opk-card { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.opk-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-xs); }
.place-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 0; }
.place-row p { margin: 2px 0 0; }

/* Calm labour mode: 4 seconds in, 6 out */
.calm-wrap { display: grid; place-items: center; gap: 8px; padding: 24px 0; text-align: center; }
.calm-circle { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 35%, transparent), color-mix(in srgb, var(--brand) 8%, transparent)); animation: calm-breathe 10s ease-in-out infinite; }
.calm-cue { font-size: 1.4rem; margin: 8px 0 0; }
.calm-word { min-height: 3em; max-width: 30ch; margin: 0; }
@keyframes calm-breathe { 0% { transform: scale(.6); } 40% { transform: scale(1); } 100% { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .calm-circle { animation: none; transform: scale(.85); } }

/* Deep dive picks (6 Nov 2026): passport, letters, postcard, bottle night card, calm and clear */
.passport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.stamp { display: grid; place-items: center; gap: 2px; min-height: 76px; padding: 6px 4px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; }
.stamp span { font-size: 1.6rem; filter: grayscale(1); }
.stamp small { font-size: .72rem; line-height: 1.15; text-align: center; }
.stamp.stamped { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--text); opacity: 1; transform: rotate(-2deg); }
.stamp.stamped span { filter: none; }
.letter-text, .postcard-text { white-space: pre-wrap; font-family: var(--font-display); line-height: 1.5; }
.letter.sealed { background: var(--gold-soft); }
.bottle-night .big-steps li { font-size: 1.15rem; line-height: 1.45; margin-bottom: 8px; }
.bottle-timer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.call-facts li { font-size: 1.05rem; }
.read-aloud { margin: -4px 0 8px; }
html.big-text { font-size: 112.5%; }
html.calm-clear .confetti, html.calm-clear .glance-banner.banner-plus { display: none !important; }
html.calm-clear *, html.calm-clear *::before, html.calm-clear *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: no-preference) { html.calm-clear .calm-circle { animation: calm-breathe 10s ease-in-out infinite !important; } }

/* Easy-read: a plain font, a little more space between letters, words and lines (pick 8). */
html.easy-read body, html.easy-read button, html.easy-read input, html.easy-read select, html.easy-read textarea { font-family: Verdana, "Atkinson Hyperlegible", Tahoma, system-ui, sans-serif !important; letter-spacing: .02em; word-spacing: .08em; }
html.easy-read p, html.easy-read li { line-height: 1.7; }
html.easy-read em, html.easy-read i { font-style: normal; }
/* One-handed: bigger buttons, content can scroll down into thumb reach, a back button by the thumb. */
html.one-hand .btn, html.one-hand .chip, html.one-hand .menu a, html.one-hand .btn-text { min-height: 52px; }
html.one-hand main { padding-bottom: 35vh; }
.thumb-back { position: fixed; left: 16px; bottom: calc(84px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); z-index: 30; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 28px; box-shadow: var(--shadow-float); }
@media print { .thumb-back { display: none; } }
.qr-box { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: var(--radius-sm); margin: 8px 0; }
.qr-box svg { max-width: 100%; height: auto; }
.sticker-sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sticker { aspect-ratio: 1; border: 2px dashed var(--border); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11px; }
.sticker span { font-size: 28px; }
.sticker.tried { border-style: solid; border-color: #ad5249; }
.photo-box { border: 2px dashed var(--border); border-radius: var(--radius-sm); height: 260px; display: flex; align-items: center; justify-content: center; color: var(--muted); margin: 12px 0; }

/* ---------- Quick answers (#more/ask and the bar on Home) ---------- */
.ask-bar { display: flex; gap: 8px; margin: 0 0 16px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); }
.ask-bar input[type=search] { flex: 1; box-shadow: none; -webkit-appearance: none; appearance: none; min-width: 0; border: 0; background: transparent; padding: 10px 14px; font: inherit; color: inherit; }
.ask-bar input[type=search]:focus { outline: none; box-shadow: none; }
.ask-bar:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.ask-not-urgent { margin: 6px 4px 0; text-align: center; }
.ask-bar .btn { border-radius: 999px; min-height: 44px; padding: 0 18px; }
.ask-scan { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--text); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.ask-scan svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ask-scan:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 360px) { .ask-bar .btn { padding: 0 12px; } .ask-bar input[type=search] { padding: 10px 8px; } }
.ask-entry .ask-q { margin: 0 0 12px; padding: 10px 14px; background: var(--bubble-me); border-radius: var(--radius-sm) var(--radius-sm) var(--radius-xs) var(--radius-sm); font-weight: 600; }
.ask-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ask-now p { margin: 0; }
.ask-now .btn { flex: none; min-height: 44px; }
.ask-ai { margin: 12px 0 0; padding: 14px; background: var(--lavender-soft); border-radius: var(--radius-sm); }
.ask-ai-label { margin: 0 0 6px; font-weight: 700; color: var(--iron); }

/* After Plus ends: the family's own writing stays readable, without the add forms. */
.plus-readonly form[inert] button, .plus-readonly #journal-form, .plus-readonly #stock-form, .plus-readonly #work-kit-form { display: none; }

/* Private family feed (#family): Instagram-like posts, a photo then a few words. */
.family-feed { display: grid; gap: 12px; margin: 12px 0; }
.family-post { padding: 0; overflow: hidden; }
.family-post img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; }
.family-post p { margin: 8px 14px; }
.family-post .btn { margin: 0 14px 12px; }

/* Gift list sheet (GrowPlan phase 1): the sections read like the baby list, not a boxed form. */
.gift-group { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.gift-group legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
.gift-row { flex-wrap: wrap; }
/* Check my nursery bill (GrowPlan phase 2). */
.bill-sums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.bill-sums p { margin: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.bill-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 15px; }
.bill-table th { text-align: left; font-weight: 400; padding: 6px 0; }
.bill-table td { text-align: right; padding: 6px 0; font-variant-numeric: tabular-nums; }
.bill-table tr + tr { border-top: 1px solid var(--line, rgba(0,0,0,.08)); }

/* Ease of use (8 Nov 2026): find a page in Home's long "Show all" list, word labels on the
   profile tabs, full-size "Read more" taps, and two-line shortcut names on short phones. */
.menu-row[hidden] { display: none; }
.more-find { display: block; margin: 4px 0 10px; }
.more-find span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.more-find input { width: 100%; }
.profile-tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profile-tab-label { font-size: 12px; font-weight: 600; color: var(--text); }
.post a.btn-text { display: inline-flex; align-items: center; }
@media (max-height: 700px) {
  main[data-view="home"] .story-label { -webkit-line-clamp: 2; }
}
.profile-tabs a { filter: none; opacity: 1; }
.profile-tabs a > span[aria-hidden] { filter: grayscale(1); opacity: 0.6; }
.profile-tabs a[aria-selected="true"] > span[aria-hidden] { filter: none; opacity: 1; }
.profile-tabs a:not([aria-selected="true"]) .profile-tab-label { color: var(--muted); }
.more-group[hidden] { display: none; }
.more-group-title { margin: 14px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* One menu style everywhere (8 Nov 2026): menus are icon rows or story circles under small
   headings; filters are one row of chips with the clay fill when chosen; views are the pill switch. */
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; justify-items: center; }
.menu-grid .story { position: relative; width: 74px; max-width: 100%; }
.menu-grid .story[hidden] { display: none; }
.menu-grid .story-ring { width: 56px; height: 56px; }
.menu-grid .story-ring > span { font-size: 24px; }
.menu-grid .story-label { max-width: 74px; font-size: 12px; }
.menu-grid .story-plus { top: 44px; }
.menu-sheet .more-find { margin-top: 12px; }
.menu-sheet .more-group-title { margin-top: 18px; }
.settings-me .post-icon { width: 48px; height: 48px; padding: 0; overflow: hidden; }
.settings-me .avatar { width: 100%; height: 100%; font-size: 22px; }
.settings-delete { margin-top: 18px; }
.filter-chips .chip[aria-pressed="true"], .chips .chip[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
/* Profile's Milestones | Memories | Journey use the same pill switch as Learn and Diary. */
.segmented.profile-tabs { margin: 14px 0 12px; border-top: 0; }
.segmented.profile-tabs a { flex-direction: row; justify-content: center; gap: 6px; margin-top: 0; padding: 9px 6px; font-size: 15px; border-top: 0; }
.segmented.profile-tabs a > span[aria-hidden] { filter: none; opacity: 1; font-size: 15px; }
.segmented.profile-tabs .profile-tab-label { font-size: 15px; font-weight: 700; color: inherit; }
.segmented.profile-tabs a:not([aria-selected="true"]) .profile-tab-label { color: var(--muted); }
.settings-page > .card:first-child > h2:first-child { display: none; }
/* Filters chip: the one way into a list page's filter sheet. */
.filter-btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filter-bar { margin-bottom: 8px; }
.filter-sheet .sheet-head h2 { margin: 0; font-size: 17px; }
.filter-sheet .chips { gap: 8px; }
.filter-sheet .sheet-foot { margin-top: 20px; }
/* Plus page peek: the real page, not tappable, cropped at the bottom, never faded. */
.plus-peek { position: relative; }
.plus-peek-body { max-height: 460px; overflow: hidden; pointer-events: none; user-select: none; }
.filter-bar .chip { gap: 6px; }
.bill-table tr + tr { border-top: 1px solid var(--border); }

/* Baby shower guest page (party.html) and the parent's page in the app (#more/party). */
.party-count { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; font-size: 14px; }
.party-msg { margin-top: 12px; white-space: pre-line; }
.party-cal { margin: 12px 0 4px; }
.party-cal .btn { text-decoration: none; }
.party-gifts { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.party-gifts li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.party-gifts li.taken span { text-decoration: line-through; opacity: 0.6; }
.party-gifts small { opacity: 0.7; }
.party-sub { margin: 16px 0 4px; }
.party-review { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.party-review li { display: grid; gap: 6px; }
.party-review img, .party-thumb-wait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; background: var(--surface-2); }
.party-review li div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.party-review .btn { min-width: 0; padding: 6px 8px; }
.party-ideas { grid-template-columns: 1fr 1fr; }

/* Bigger text (Settings > Calm and clear): most sizes are in px, so each one is raised here,
   from Home's tiles and circles to the menu, rows, chips and buttons. */
html.big-text body { font-size: 18px; }
html.big-text .small { font-size: 16px; }
html.big-text .post-title strong, html.big-text .menu-row strong { font-size: 18px; }
html.big-text .post-title small { font-size: 15px; }
html.big-text .story-label, html.big-text main[data-view="home"] .story-label { font-size: 13px; max-width: 76px; }
html.big-text .glance-label { font-size: 14px; white-space: normal; line-height: 1.2; }
html.big-text .glance-sub, html.big-text .glance-sub-text { font-size: 14px; }
html.big-text .chip { font-size: 17px; }
html.big-text .segmented a, html.big-text .btn, html.big-text .btn-text { font-size: 17px; }
html.big-text .more-group-title { font-size: 14px; }
html.big-text .tabbar a span:not(.tab-avatar) { font-size: 13px; }
/* Plus peek samples: drawn placeholders, not photos. */
.keepsake-photos .photo-wrap.sample-art { display: grid; place-items: center; background: var(--gold-soft); font-size: 34px; }
.extras-list .post { margin-top: 12px; }
.extras-banner { padding-right: 6px; }
.extras-banner-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.extras-x { flex: none; width: 44px; height: 44px; font-size: 16px; color: var(--muted); background: transparent; border: 0; }
/* A new chapter (stage change) and late solids cards on Home; one-off page tips. */
.chapter-card { background: var(--gold-soft); margin-top: 14px; }
.chapter-card h2 { margin: 2px 0 8px; }
.chapter-list { margin: 0 0 14px; padding-left: 18px; }
.chapter-list li { margin: 6px 0; }
.chapter-card .btn + .btn { margin-top: 8px; }
.late-solids { margin-bottom: 12px; }
.late-solids .btn + .btn { margin-top: 8px; }
.page-tip { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
.page-tip > span:nth-child(2) { flex: 1; }
/* Due date countdown: a ring round the bump and the days to go, big. */
.preg-ring { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; }
.preg-ring .bump-art { width: 70px; height: 70px; }
.countdown-ring { position: absolute; inset: 0; }
.ring-track { fill: none; stroke: var(--surface); stroke-width: 6; opacity: 0.8; }
.ring-fill { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; }
.countdown-big { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; padding-left: 4px; }
.countdown-big strong { font-family: var(--font-display); font-size: 38px; font-weight: 600; color: var(--brand-strong); }
.countdown-big small { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); max-width: 64px; }
.countdown-share { display: block; margin: -2px auto 8px; }
@media (max-width: 360px) { .hero-preg .hero-title { font-size: 19px; } .preg-ring { width: 76px; height: 76px; } .preg-ring .bump-art { width: 58px; height: 58px; } .countdown-big strong { font-size: 30px; } }

/* Gentle development check-in on Home: "later" and "stop" sit side by side, quietly. */
.nudge-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; margin-top: 4px; }
.nudge-actions .btn-text { font-size: 0.875rem; color: var(--muted); }

/* Family tea (#more/familytea and its Home card): the meal box, quick picks and the result. */
.tea-form label { display: block; margin-bottom: 6px; }
.tea-row { display: flex; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.tea-row:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.tea-row input[type=text] { flex: 1; -webkit-appearance: none; appearance: none; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 10px 14px; font: inherit; color: inherit; }
.tea-row input[type=text]:focus { outline: none; box-shadow: none; }
.tea-row .btn { border-radius: 999px; min-height: 44px; padding: 0 18px; }
.tea-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tea-h { font-size: 1rem; margin: 14px 0 6px; }
.tea-foods { list-style: none; padding: 0; margin: 0 0 12px; }
.tea-foods li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.tea-foods li:last-child { border-bottom: 0; }
.tea-foods .btn-text { padding: 0; min-height: 0; }
.tea-art-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px; }
.tea-art { margin: 0; text-align: center; }
.tea-art svg { width: 100%; height: auto; max-height: 80px; }
.tea-art figcaption { margin-top: 4px; line-height: 1.3; }
.tea-art-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tea-art-fill { fill: var(--brand-soft); }
.tea-art-a { fill: #b9c79a; stroke: var(--text); stroke-width: 2; }
.tea-art-b { fill: #f0c48a; stroke: var(--text); stroke-width: 2; }
.tea-art-c { fill: #e8a28c; stroke: var(--text); stroke-width: 2; }
.tea-art-text { font: 600 10px/1 var(--font, inherit); fill: var(--text); }
.tea-photo { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; margin: 8px 0; }
@media (max-width: 360px) { .tea-art-row { grid-template-columns: 1fr 1fr; } }
/* Baby poo guide colour chart (#more/poo): the parent taps a colour, CSS shows its lines. */
.poo-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.poo-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.poo-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; min-height: 44px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font-size: 0.85rem; text-align: center; cursor: pointer; }
.poo-dot { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(47, 37, 35, 0.15); }
.poo-panel { display: none; margin-top: 12px; }
.poo-panel .callout { margin-top: 8px; }
#pc-yellow:checked ~ .poo-panels .poo-panel-yellow { display: block; }
#pc-green:checked ~ .poo-panels .poo-panel-green { display: block; }
#pc-brown:checked ~ .poo-panels .poo-panel-brown { display: block; }
#pc-black:checked ~ .poo-panels .poo-panel-black { display: block; }
#pc-red:checked ~ .poo-panels .poo-panel-red { display: block; }
#pc-pale:checked ~ .poo-panels .poo-panel-pale { display: block; }
#pc-yellow:checked ~ .poo-swatches [for=pc-yellow],
#pc-green:checked ~ .poo-swatches [for=pc-green],
#pc-brown:checked ~ .poo-swatches [for=pc-brown],
#pc-black:checked ~ .poo-swatches [for=pc-black],
#pc-red:checked ~ .poo-swatches [for=pc-red],
#pc-pale:checked ~ .poo-swatches [for=pc-pale] { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
#pc-yellow:focus-visible ~ .poo-swatches [for=pc-yellow],
#pc-green:focus-visible ~ .poo-swatches [for=pc-green],
#pc-brown:focus-visible ~ .poo-swatches [for=pc-brown],
#pc-black:focus-visible ~ .poo-swatches [for=pc-black],
#pc-red:focus-visible ~ .poo-swatches [for=pc-red],
#pc-pale:focus-visible ~ .poo-swatches [for=pc-pale] { outline: 2px solid var(--brand); outline-offset: 2px; }
.poo-photo summary { cursor: pointer; color: var(--brand-strong); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.poo-photo[open] summary { margin-bottom: 8px; }

/* The birth day and first birthday cards (9 Nov 2026) */
.moment-card { text-align: center; padding-top: 22px; }
.moment-card .moment-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; margin: 6px 0 10px; }
.moment-title em { font-style: italic; font-weight: 500; color: var(--brand); }
.moment-art { font-size: 34px; letter-spacing: 6px; margin: 0 0 10px; }
.moment-card p { margin: 0 0 14px; }
.moment-stats { display: flex; gap: 8px; margin: 0 0 14px; }
.moment-stat { flex: 1; background: var(--surface, #fffdf9); border-radius: 14px; padding: 12px 6px; }
.moment-stat strong { display: block; font-family: var(--font-display); font-size: 24px; }
.moment-stat small { color: var(--muted); font-size: 12px; }
.moment-word { font-weight: 600; }

/* Everyday fireworks (9 Nov 2026) */
.keep-card { position: relative; background: var(--sage-soft); margin-top: 14px; }
.keep-card h2 { margin: 2px 28px 6px 0; font-size: 18px; }
.keep-card .keep-x { position: absolute; top: 8px; right: 8px; }
.kind-line { margin: 4px 0 0; font-weight: 600; color: var(--brand); }
@keyframes week-bounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.14); } 60% { transform: scale(0.97); } }
.preg-ring.new-week .bump-art { animation: week-bounce 0.9s ease-out 0.3s 2; }
@media (prefers-reduced-motion: reduce) { .preg-ring.new-week .bump-art { animation: none; } }

/* Sub-pages as a compact grid of circles at the top of a busy page (Recipes, the guide, Family hub). */
.hub-grid { margin: 4px 0 18px; }

/* Rows of circles never scroll sideways (9 Nov 2026): Home's row is five equal columns, down to
   320px phones, and the profile's highlights share the width the same way. */
main[data-view="home"] .stories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; justify-items: center; }
main[data-view="home"] .story { width: 100%; max-width: 72px; }
main[data-view="home"] .story-label { max-width: 100%; }
.highlights { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: -2px 0 2px; padding: 6px 0; overflow: visible; justify-items: center; }
.highlights > .highlight { width: 100%; max-width: 80px; }
.highlight-ring { width: min(62px, 100%); height: auto; aspect-ratio: 1; }
.highlight-label { max-width: 100%; }
/* In the menu and the grids inside pages, a long name gets a third line before it is cut. */
.menu-grid .story-label { -webkit-line-clamp: 3; }

/* Home is one screen on a phone (10 Nov 2026): four tiles, then "Show all" for the rest. */
@media (max-width: 767px) {
  .glance:not(.show-all) .glance-grid li:nth-child(n+5) { display: none; }
  .glance-more { display: block; margin: 6px auto 0; min-height: 44px; }
}

/* Guide cards folded to their title: the card inside drops its own frame and repeated heading. */
.guide-fold > .card, .guide-fold > .post { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.guide-fold > .card > h2:first-child, .guide-fold > .post > .post-head { display: none; }
.guide-fold { margin-bottom: 10px; }

/* Plus is always one tap away for free members: a small chip beside the greeting on Home. */
.glance-greeting { position: relative; }
.plus-chip { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 99px; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); cursor: pointer; }
.plus-chip::after { content: ""; position: absolute; inset: -6px; } /* 44px tap area */
/* Food group chips wrap onto a second line, never sideways. */
.food-jump { flex-wrap: wrap; overflow: visible; margin-top: 8px; }
.food-cat { scroll-margin-top: calc(var(--safe-t) + 72px); }
#main details[id^="prints-"] { scroll-margin-top: calc(var(--safe-t) + 72px); }
.growth-open { margin: 8px 0; }

/* Tile names and values wrap onto a second line instead of being cut off (longer in French, Dutch, Swedish and on small phones). */
.glance-label, .glance-metric { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }

/* The sheet takes the focus itself when its first control is a picker (openSheet). */
.sheet-body:focus { outline: none; }

/* A running feed timer, shown on Home and the day book. */
.timer-strip { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.timer-strip span:nth-child(2) { flex: 1; }
.timer-strip strong { color: var(--brand); white-space: nowrap; }
.lmp-help { margin-top: 8px; }
.welcome-restore { display: block; text-align: center; margin-top: 12px; min-height: 44px; cursor: pointer; }
.home-switch { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; }