/* Help me choose — one question per screen, big tap targets, tokens only. */
.momhop-help { display: grid; gap: 18px; padding-block: 8px 32px; }
.momhop-help__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.momhop-help__eyebrow { margin: 0; font-size: var(--mh-fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--mh-coral, #d8694b); font-weight: 600; }
.momhop-help__progress { font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); font-variant-numeric: tabular-nums; }
.momhop-help__summary { margin: 0; min-height: 1.4em; font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-step { display: grid; gap: 14px; }
.momhop-help-step h2 { margin: 0; font-family: var(--mh-font-display, Fraunces, Georgia, serif); font-size: var(--mh-fs-h1); font-weight: var(--mh-fw-display); line-height: 1.15; color: var(--mh-ink, #2c2520); text-wrap: balance; outline: none; }
.momhop-help-step__hint { margin: 0; font-size: var(--mh-fs-body); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.momhop-help-cards--wide { grid-template-columns: 1fr; }
.momhop-help-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--mh-line, #ece0d1); border-radius: 16px; background: var(--mh-surface, #fff); color: var(--mh-ink, #2c2520); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .08s; }
.momhop-help-card:active { transform: scale(.98); }
.momhop-help-card.is-selected, .momhop-help-card[aria-pressed="true"] { border-color: var(--mh-coral, #d8694b); background: var(--mh-coral-soft, #fbe7dd); }
.momhop-help-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mh-cream, #fbf6ef); font-size: var(--mh-fs-h3); }
.momhop-help-card__text { display: grid; gap: 2px; min-width: 0; }
.momhop-help-card__label { font-weight: 600; font-size: var(--mh-fs-body); line-height: 1.2; }
.momhop-help-card__sub { font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); line-height: 1.3; }
.momhop-help-card--quiet { border-style: dashed; background: transparent; }
.momhop-help-date { display: grid; gap: 6px; }
.momhop-help-date input { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--mh-line, #ece0d1); border-radius: 12px; font: inherit; font-size: var(--mh-fs-lead); background: var(--mh-surface, #fff); color: var(--mh-ink, #2c2520); }
.momhop-help-reason { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mh-sun-soft, #fdf1dc); color: var(--mh-ink, #2c2520); font-size: var(--mh-fs-small); }
.momhop-help-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 4px; }
/* The shared .momhop-btn carries no size of its own (sections set it); give the wizard's buttons a real pill. */
.momhop-help .momhop-btn { min-height: 46px; padding: 11px 22px; border-radius: var(--mh-r-pill, 999px); font-size: var(--mh-fs-body); gap: 8px; }
.momhop-help .momhop-btn--primary:hover { background: var(--mh-coral-deep, #bf563b); border-color: var(--mh-coral-deep, #bf563b); }
.momhop-help-link { background: none; border: 0; padding: 8px 4px; font: inherit; font-size: var(--mh-fs-body); color: var(--mh-ink-soft, #7a6f64); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.momhop-help-done { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--mh-cream, #fbf6ef); border: 1px solid var(--mh-line, #ece0d1); }
.momhop-help-done__count { margin: 0; font-size: var(--mh-fs-body); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-done__count.is-thin { color: var(--mh-coral-deep, #bf563b); }
.momhop-help-done .momhop-btn { width: 100%; justify-content: center; min-height: 48px; font-size: var(--mh-fs-lead); }
.momhop-help-done__events { margin: 0; font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
/* The answer on the last screen (Neya, 2026-10-19): only what fits, a labelled way to widen the area,
   and a few events for the chosen day. */
.momhop-help-results { display: grid; gap: 8px; }
.momhop-help-result { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--mh-line, #ece0d1); background: var(--mh-surface, #fff); color: var(--mh-ink, #2c2520); text-decoration: none; }
.momhop-help-result:hover, .momhop-help-result:focus-visible { border-color: var(--mh-coral, #d8694b); }
.momhop-help-result__pick { font-size: var(--mh-fs-micro); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-coral-deep, #bf563b); }
.momhop-help-result__title { font-weight: 700; font-size: var(--mh-fs-body); line-height: 1.25; }
.momhop-help-result__meta { font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-broaden { display: grid; gap: 4px; }
.momhop-help-broaden__note { margin: 0; font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-also { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--mh-line, #ece0d1); }
.momhop-help-also__t { margin: 0; font-size: var(--mh-fs-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-also__list { display: grid; gap: 6px; }
.momhop-help-also__row { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--mh-surface, #fff); border: 1px solid var(--mh-line, #ece0d1); color: var(--mh-ink, #2c2520); text-decoration: none; }
.momhop-help-also__when { font-size: var(--mh-fs-micro); font-weight: 700; color: var(--mh-coral-deep, #bf563b); }
.momhop-help-also__title { font-weight: 600; font-size: var(--mh-fs-body); line-height: 1.25; }
.momhop-help-also__place { font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-also__all { font-size: var(--mh-fs-small); font-weight: 600; color: var(--mh-coral-deep, #bf563b); }
/* Ages: a small optional row under the preferences, more than one allowed. */
.momhop-help-ages { display: grid; gap: 8px; }
.momhop-help-ages__t { margin: 0; font-size: var(--mh-fs-small); font-weight: 700; color: var(--mh-ink, #2c2520); }
.momhop-help-ages__t span { font-weight: 400; color: var(--mh-ink-soft, #7a6f64); }
.momhop-help-ages__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.momhop-help-agechip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: var(--mh-r-pill, 999px); border: 1.5px solid var(--mh-line, #ece0d1); background: var(--mh-surface, #fff); color: var(--mh-ink, #2c2520); font: inherit; font-size: var(--mh-fs-small); cursor: pointer; }
.momhop-help-agechip b { font-weight: 600; }
.momhop-help-agechip small { color: var(--mh-ink-soft, #7a6f64); font-size: var(--mh-fs-micro); }
.momhop-help-agechip[aria-pressed="true"] { border-color: var(--mh-coral, #d8694b); background: var(--mh-coral-soft, #fbe7dd); }
.momhop-help-card--quiet { grid-column: 1 / -1; }
.momhop-help-done__secondary { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.momhop-help-launch { display: inline-flex; align-items: center; gap: 8px; }
/* Home card */
.momhop-hubcard--help .momhop-hubcard__icon { background: var(--mh-coral-soft, #fbe7dd); }
.momhop-home-help { display: grid; gap: 8px; margin-top: 4px; }
.momhop-home-help__today { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px dashed var(--mh-coral, #d8694b); color: var(--mh-coral-deep, #bf563b); font-weight: 600; font-size: var(--mh-fs-body); text-decoration: none; width: max-content; max-width: 100%; }
.momhop-whyline { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--mh-coral-soft, #fbe7dd); color: var(--mh-ink, #2c2520); font-size: var(--mh-fs-small); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.momhop-whyline a { color: var(--mh-coral-deep, #bf563b); font-weight: 600; }
@media (max-width: 479px) {
  /* Phone: cards that carry a subtitle read better full width; short ones stay two-up. */
  .momhop-help-cards--wide, .momhop-help-cards--when { grid-template-columns: 1fr; }
  .momhop-help-card { min-height: 60px; }
  /* The preference cards sit tighter so the optional Ages row shows without scrolling past them. */
  .momhop-help-cards--wide { gap: 8px; }
  .momhop-help-cards--wide .momhop-help-card { min-height: 50px; padding: 8px 12px; gap: 10px; }
  .momhop-help-cards--wide .momhop-help-card__icon { width: 32px; height: 32px; border-radius: 10px; }
  /* Keep Next within thumb reach above the bottom nav on long lists. */
  .momhop-help-step .momhop-help-actions { position: sticky; bottom: calc(var(--mh-nav-h, 64px) + var(--mh-nav-bottom, 15px) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 2; margin: 4px -4px 0; padding: 10px 4px; background: linear-gradient(to top, var(--mh-cream, #fbf6ef) 70%, color-mix(in srgb, var(--mh-cream) 0%, transparent)); }
  .momhop-help-step .momhop-help-actions .momhop-btn--primary { flex: 1 1 100%; width: 100%; }
}
@media (min-width: 768px) {
  .momhop-help { max-width: 640px; }
  .momhop-help-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .momhop-help-cards--wide, .momhop-help-cards--when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.momhop-help-nudge { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mh-surface, #fff); border: 1px dashed var(--mh-coral, #d8694b); font-size: var(--mh-fs-small); color: var(--mh-ink, #2c2520); }
.momhop-help-nudge a, .momhop-home-help__guest a { color: var(--mh-coral-deep, #bf563b); font-weight: 600; }
.momhop-home-help__guest { margin: 0; font-size: var(--mh-fs-small); color: var(--mh-ink-soft, #7a6f64); }
/* display:grid above would beat the UA [hidden] rule; keep hidden steps hidden. */
.momhop-help-step[hidden], .momhop-help-done[hidden], .momhop-help [hidden] { display: none !important; }

/* Home: Help me choose as a feature, not a plain row (owner 2026-10-06). A tinted card with its
   promise, four moods to tap, and the way in. */
.momhop-home-pick__card { background: var(--mh-coral-tint, #fceee7); border: 1px solid var(--mh-line, #ece0d1); border-radius: var(--mh-r-lg, 24px); display: grid; gap: 12px; padding: 18px; }
.momhop-home-pick__head { align-items: center; display: flex; gap: 12px; }
.momhop-home-pick__icon { align-items: center; background: var(--mh-surface, #fff); border: 1px solid var(--mh-line, #ece0d1); border-radius: 14px; display: inline-flex; flex: 0 0 46px; font-size: var(--mh-fs-h2); height: 46px; justify-content: center; }
.momhop-home-pick__eyebrow { color: var(--mh-coral-deep, #bf563b); font-size: var(--mh-fs-micro); font-weight: 800; letter-spacing: .1em; margin: 0 0 2px; text-transform: uppercase; }
.momhop-home-pick__title { color: var(--mh-ink, #2c2520); font-family: var(--mh-display-font, Fraunces, Georgia, serif); font-size: var(--mh-fs-h2); font-weight: 600; line-height: 1.15; margin: 0; }
.momhop-home-pick__lead { color: var(--mh-ink-soft, #7a6f64); font-size: var(--mh-fs-body); line-height: 1.5; margin: 0; max-width: 56ch; }
.momhop-home-pick__moods { display: flex; flex-wrap: wrap; gap: 8px; }
.momhop-home-pick__mood { align-items: center; background: var(--mh-surface, #fff); border: 1px solid var(--mh-line, #ece0d1); border-radius: 999px; color: var(--mh-ink, #2c2520); display: inline-flex; font-size: var(--mh-fs-body); font-weight: 600; gap: 8px; min-height: 44px; padding: 8px 16px; text-decoration: none; }
.momhop-home-pick__mood:hover, .momhop-home-pick__mood:focus-visible { border-color: var(--mh-coral, #d8694b); color: var(--mh-coral-deep, #bf563b); }
.momhop-home-pick__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.momhop-home-pick__go { align-items: center; background: var(--mh-coral-deep, #bf563b); border-radius: 999px; color: #fff; display: inline-flex; font-size: var(--mh-fs-body); font-weight: 700; gap: 8px; min-height: 46px; padding: 0 20px; text-decoration: none; }
.momhop-home-pick__go:hover, .momhop-home-pick__go:focus-visible { background: var(--mh-coral, #d8694b); }
.momhop-home-pick .momhop-home-help__today { background: var(--mh-surface, #fff); }
@media (max-width: 520px) {
	.momhop-home-pick__mood { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 8px 10px; }
	.momhop-home-pick__go { justify-content: center; width: 100%; }
}