/**
 * Smart Pregnancy Calculator Suite — front-end.
 * Modern, clean look: neutral greys + a single warm pink accent.
 * No purple/blue shades, no multi-colour icons. Theme via CSS variables.
 */
.spc-app{
  --spc-primary:#db2777; --spc-accent:#ec4899; --spc-text:#1f2933; --spc-bg:#ffffff;
  --spc-btn-text:#ffffff; --spc-radius:18px;
  --spc-font:'Plus Jakarta Sans',system-ui,sans-serif; --spc-title:'Plus Jakarta Sans',system-ui,sans-serif;
  --spc-muted:#6b7280; --spc-line:#e9eaee; --spc-soft:#f6f7f9; --spc-lav:#f6f7f9; --spc-pink-soft:#fdf2f7;
  --spc-grad:linear-gradient(135deg,var(--spc-primary),var(--spc-accent));
  --spc-shadow:14px 30px rgba(17,24,39,.06);
  font-family:var(--spc-font); color:var(--spc-text); background:var(--spc-bg);
  width:100%; max-width:1080px; margin:0 auto; box-sizing:border-box; line-height:1.55; font-size:16px;
}
.spc-app *{ box-sizing:border-box; }
/* Stop themes from forcing upper/lower-casing on our controls. */
.spc-app button, .spc-app input, .spc-app select, .spc-app textarea, .spc-app label{ text-transform:none; letter-spacing:normal; }
/* ============================================================= *
 * THEME ISOLATION — hard-reset our elements so the active theme
 * cannot restyle plugin UI. All selectors are scoped under .spc-app.
 * Only theme-injected props are reset here; design props (background,
 * border, radius, padding, box-shadow) are owned by the component
 * rules below and re-asserted across states where themes target :hover.
 * ============================================================= */
.spc-app button, .spc-app input, .spc-app select, .spc-app textarea{
  margin:0; font-family:inherit; letter-spacing:normal; text-shadow:none;
  text-transform:none; min-width:0; min-height:0; max-height:none; float:none;
  outline:none; vertical-align:baseline;
}
.spc-app button{ -webkit-appearance:none; appearance:none; background-image:none; width:auto; height:auto; }
.spc-app button:hover, .spc-app button:focus, .spc-app button:active, .spc-app button:focus-visible{
  background-image:none; text-shadow:none; filter:none; outline:none;
}
.spc-app a{ box-shadow:none; text-decoration:none; }
.spc-app img{ max-width:100%; height:auto; width:auto; border:0; border-radius:0; box-shadow:none; filter:none; vertical-align:middle; display:inline-block; }
.spc-app svg{ vertical-align:middle; max-width:none; box-shadow:none; }
.spc-app input[type=checkbox], .spc-app input[type=radio]{ -webkit-appearance:auto; appearance:auto; width:auto; height:auto; opacity:1; position:static; box-shadow:none; }
.spc-app h2, .spc-app h3, .spc-app h4, .spc-app h5, .spc-app p, .spc-app ul, .spc-app ol, .spc-app li{ margin:0; padding:0; line-height:inherit; background:none; }
/* Re-assert design backgrounds across states so theme :hover/:focus/:active can't bleed in. */
.spc-app .spc-tool-card, .spc-app .spc-tool-card:hover, .spc-app .spc-tool-card:focus, .spc-app .spc-tool-card:active, .spc-app .spc-tool-card:focus-visible{ background:#fff; background-image:none; color:inherit; }
.spc-app .spc-btn-primary, .spc-app .spc-btn-primary:hover, .spc-app .spc-btn-primary:focus, .spc-app .spc-btn-primary:active{ background:var(--spc-primary); color:var(--spc-btn-text); }
.spc-app .spc-btn-ghost, .spc-app .spc-btn-ghost:hover, .spc-app .spc-btn-ghost:focus, .spc-app .spc-btn-ghost:active{ background:#fff; }
.spc-app .spc-btn-accent, .spc-app .spc-btn-accent:hover, .spc-app .spc-btn-accent:focus{ background:var(--spc-accent); color:#fff; }
.spc-app .spc-choice, .spc-app .spc-choice:hover, .spc-app .spc-choice:focus{ background:#fff; }
.spc-app .spc-choice.is-active{ background:var(--spc-primary); color:var(--spc-btn-text); }
.spc-app .spc-ms-arrow, .spc-app .spc-ms-arrow:hover, .spc-app .spc-ms-arrow:focus{ background:#fff; }
.spc-app .spc-tri-tab, .spc-app .spc-tri-tab:hover, .spc-app .spc-tri-tab:focus{ background:transparent; }
.spc-app .spc-tri-tab.is-active{ background:#fff; }
.spc-app .spc-tri-tab.is-active.is-now{ background:var(--spc-grad); }
.spc-app[data-layout="card"]{
  border:1px solid var(--spc-line); border-radius:24px; padding:34px 38px 30px;
  box-shadow:0 var(--spc-shadow);
}
.spc-app[data-layout="flat"]{ padding:4px 0; }
@media(max-width:640px){ .spc-app[data-layout="card"]{ padding:20px; } }

.spc-svg{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- Header ---------- */
.spc-app-head{ text-align:center; margin-bottom:8px; }
.spc-app-logo{ max-height:60px; margin:0 auto 14px; display:block; }
.spc-app-title{ font-family:var(--spc-title); font-size:38px; font-weight:800; margin:0 0 10px; line-height:1.15; color:var(--spc-text); letter-spacing:-.01em; text-align:center; }
.spc-app-title .hh{ color:var(--spc-accent); font-family:var(--spc-font); }
/* Higher specificity (.spc-app prefix) so the auto side-margins beat the
   `.spc-app p{ margin:0 }` reset above — otherwise the 620px block sits flush
   left instead of centered. text-align:center centers the text within it. */
.spc-app .spc-app-sub{ color:var(--spc-muted); margin:0 auto; font-size:16px; max-width:620px; text-align:center; }
.spc-divider{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 26px; color:var(--spc-accent); }
.spc-divider::before,.spc-divider::after{ content:""; width:60px; height:2px; background:linear-gradient(90deg,transparent,var(--spc-line)); }
.spc-divider::after{ background:linear-gradient(90deg,var(--spc-line),transparent); }
@media(max-width:640px){ .spc-app-title{ font-size:27px; } }

/* ---------- Tool chooser ---------- */
.spc-chooser-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--spc-text); text-transform:uppercase; letter-spacing:1px; margin:0 0 18px; }
.spc-chooser-title .spc-svg{ color:var(--spc-accent); }
.spc-tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.spc-tool-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left;
  padding:22px; border:1px solid var(--spc-line); border-radius:20px; background:#fff;
  cursor:pointer; transition:.18s; font-family:inherit; color:inherit; overflow:hidden; min-height:188px;
  box-shadow:0 4px 18px rgba(17,24,39,.04);
}
.spc-tool-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(17,24,39,.09); border-color:color-mix(in srgb,var(--spc-primary) 35%,var(--spc-line)); }
/* One calm, uniform icon style for every tool. */
.spc-tool-ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:var(--spc-pink-soft); color:var(--spc-primary); }
.spc-tool-ico .spc-svg{ width:26px; height:26px; }
.spc-tool-name{ font-weight:700; font-size:17px; color:var(--spc-text); }
.spc-tool-desc{ font-size:13.5px; color:var(--spc-muted); line-height:1.5; }
.spc-tool-open{ margin-top:auto; color:var(--spc-primary); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.spc-tool-wm{ position:absolute; right:-10px; bottom:-12px; width:78px; height:78px; color:var(--spc-text); opacity:.05; pointer-events:none; }
.spc-tool-wm .spc-svg{ width:78px; height:78px; }

/* ---------- Steps / progress ---------- */
.spc-progress{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.spc-progress-track{ flex:1; height:8px; background:var(--spc-line); border-radius:999px; overflow:hidden; }
.spc-progress-fill{ height:100%; background:var(--spc-grad); border-radius:999px; transition:width .4s ease; }
.spc-progress-label{ font-size:12.5px; color:var(--spc-primary); font-weight:700; white-space:nowrap; }
.spc-step{ animation:spc-fade .35s ease; }
@keyframes spc-fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.spc-step h3{ font-size:21px; font-weight:700; margin:0 0 4px; display:flex; align-items:center; gap:10px; color:var(--spc-text); }
.spc-step .spc-q-help{ color:var(--spc-muted); font-size:14.5px; margin:0 0 20px; }
.spc-step-ico{ width:38px; height:38px; border-radius:11px; background:var(--spc-pink-soft); color:var(--spc-primary); display:grid; place-items:center; flex:none; }

/* ---------- Inputs ---------- */
.spc-row{ margin-bottom:18px; }
.spc-row label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.spc-control{ width:100%; max-width:480px; padding:14px 15px; font-size:16px; font-family:inherit; color:var(--spc-text);
  border:1.5px solid var(--spc-line); border-radius:14px; background:#fff; outline:none; transition:.14s; }
.spc-control:focus{ border-color:var(--spc-primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--spc-primary) 14%,transparent); }

/* Theme-proof form controls (scoped + high enough specificity to beat
   theme input[type=...] attribute selectors). Explicit metrics everywhere. */
.spc-app .spc-control{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:block; width:100%; min-height:52px; height:auto; box-sizing:border-box;
  margin:0; padding:14px 15px; font-size:16px; font-weight:500; line-height:1.3;
  font-family:inherit; color:var(--spc-text); -webkit-text-fill-color:var(--spc-text);
  background-color:#fff; background-image:none; border:1.5px solid var(--spc-line);
  border-radius:14px; box-shadow:none; text-transform:none; letter-spacing:normal;
}
.spc-app textarea.spc-control{ min-height:auto; line-height:1.55; resize:vertical; }
.spc-app input[type=date].spc-control, .spc-app input[type=number].spc-control,
.spc-app input[type=text].spc-control, .spc-app input[type=email].spc-control,
.spc-app input[type=tel].spc-control{ background-color:#fff; color:var(--spc-text); }
/* Muted placeholders so empty fields don't look pre-filled. */
.spc-app .spc-control::placeholder{ color:var(--spc-muted); opacity:.55; -webkit-text-fill-color:var(--spc-muted); }
.spc-app .spc-control::-webkit-input-placeholder{ color:var(--spc-muted); opacity:.55; -webkit-text-fill-color:var(--spc-muted); }
.spc-app .spc-control:-ms-input-placeholder{ color:var(--spc-muted); opacity:.55; }
.spc-app input[type=date].spc-control::-webkit-datetime-edit{ line-height:1.3; padding:0; }
.spc-app input[type=date].spc-control::-webkit-calendar-picker-indicator{ opacity:.6; cursor:pointer; }
.spc-app select.spc-control{
  cursor:pointer; padding-right:44px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:18px 18px;
}
.spc-app select.spc-control::-ms-expand{ display:none; }
/* Inside grids / inline rows the controls should fill their cell. */
.spc-grid-2c .spc-control, .spc-rem-add .spc-control, .spc-lead .spc-control{ max-width:none; }
.spc-grid-2c{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:480px; }
@media(max-width:560px){ .spc-grid-2c{ grid-template-columns:1fr; } }
.spc-extra:empty{ display:none; }
.spc-help-note{ display:flex; gap:10px; background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:14px; padding:13px 15px; font-size:13.5px; color:var(--spc-muted); margin-top:4px; }
.spc-help-note .spc-svg{ color:var(--spc-primary); flex:none; }

/* ---------- Choice pills ---------- */
.spc-choices{ display:flex; flex-wrap:wrap; gap:10px; }
.spc-choice{ padding:11px 20px; border:1.5px solid var(--spc-line); border-radius:999px; cursor:pointer;
  font-size:14.5px; font-weight:600; background:#fff; transition:.14s; font-family:inherit; color:inherit; }
.spc-choice:hover{ border-color:var(--spc-primary); }
.spc-choice.is-active{ background:var(--spc-primary); color:var(--spc-btn-text); border-color:transparent; }

/* ---------- Nav / buttons ---------- */
.spc-nav{ display:flex; gap:12px; margin-top:24px; align-items:center; justify-content:space-between; }
.spc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; padding:14px 24px; border-radius:14px;
  border:1.5px solid transparent; text-decoration:none; transition:.16s; line-height:1.1;
  text-transform:none; letter-spacing:normal; }
.spc-btn-primary{ background:var(--spc-primary); color:var(--spc-btn-text); box-shadow:0 8px 18px color-mix(in srgb,var(--spc-primary) 24%,transparent); }
.spc-btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.spc-btn-ghost{ background:#fff; color:var(--spc-text); border-color:var(--spc-line); }
.spc-btn-ghost:hover{ border-color:var(--spc-primary); color:var(--spc-primary); }
.spc-btn-accent{ background:var(--spc-accent); color:#fff; }
.spc-btn-icon{ width:50px; flex:none; padding:14px; }
.spc-btn:disabled{ opacity:.5; cursor:not-allowed; }
.spc-btn-block{ width:100%; }
.spc-nav.spc-nav-end{ justify-content:flex-end; }

/* ---------- Results ---------- */
.spc-results{ display:grid; grid-template-columns:1fr; gap:18px; }
/* Grid (and flex) items default to min-width:auto = their min-content size, so a
   wide descendant (the scrollable milestone strip, an auto-fit card row, a long
   unbroken string) forces the 1fr column wider than the app and pushes content
   outside the calculator on narrow widths. Letting these shrink to their track
   keeps everything inside the box while preserving the grid layout. */
.spc-results > *,
.spc-stats > *, .spc-dev-grid > *, .spc-dev-mid > *,
.spc-result-grid > *, .spc-check-grid > *{ min-width:0; }
.spc-ms-wrap, .spc-ms-scroll{ min-width:0; }
.spc-results-head h3{ font-size:22px; font-weight:800; margin:0; display:flex; align-items:center; gap:10px; color:var(--spc-text); }
.spc-results-head h3 .spc-svg{ color:var(--spc-primary); }

.spc-hero{ text-align:center; padding:32px 26px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--spc-pink-soft),#ffffff 70%); border:1px solid var(--spc-line); }
.spc-hero-label{ font-size:13px; font-weight:700; color:var(--spc-muted); text-transform:uppercase; letter-spacing:1.5px; }
.spc-hero-value{ font-family:var(--spc-title); font-size:40px; font-weight:800; margin:8px 0 0; color:var(--spc-primary); letter-spacing:.01em; }
.spc-hero-sub{ font-size:13.5px; color:var(--spc-muted); margin-top:8px; }
@media(max-width:560px){ .spc-hero-value{ font-size:30px; } }

/* Stat cards — reflow by available width (works inside narrow sidebars too). */
.spc-app{ container-type:inline-size; }
.spc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; }
.spc-stat-card{ background:#fff; border:1px solid var(--spc-line); border-radius:16px; padding:16px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 3px 12px rgba(17,24,39,.03); }
.spc-stat-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--spc-pink-soft); color:var(--spc-primary); }
.spc-stat-k{ font-size:12px; color:var(--spc-muted); font-weight:600; line-height:1.3; }
.spc-stat-v{ font-size:16px; font-weight:800; margin-top:3px; line-height:1.2; color:var(--spc-text); }
.spc-stat-v small{ font-weight:600; color:var(--spc-muted); font-size:12px; display:block; }

/* Progress bar */
.spc-prog-top{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--spc-text); }
.spc-prog-top .pct{ color:var(--spc-primary); }
.spc-prog-track{ height:11px; background:var(--spc-line); border-radius:999px; overflow:hidden; }
.spc-prog-fill{ height:100%; background:var(--spc-grad); border-radius:999px; transition:width .5s ease; }

/* ---------- Trimester tabs (clickable) ---------- */
.spc-tri-tabs{ display:flex; gap:8px; background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:14px; padding:6px; }
.spc-tri-tab{ flex:1; text-align:center; padding:11px 6px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer;
  background:transparent; border:none; color:var(--spc-muted); font-family:inherit; transition:.15s; }
.spc-tri-tab:hover{ color:var(--spc-text); }
.spc-tri-tab.is-active{ background:#fff; color:var(--spc-primary); box-shadow:0 2px 8px rgba(17,24,39,.08); }
.spc-tri-tab.is-active.is-now{ background:var(--spc-grad); color:var(--spc-btn-text); }
.spc-tri-panel{ margin-top:14px; border:1px solid var(--spc-line); border-radius:16px; padding:20px 22px; background:#fff; }
.spc-tri-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.spc-tri-name{ font-size:17px; font-weight:800; color:var(--spc-text); }
.spc-tri-range{ font-size:12.5px; color:var(--spc-muted); margin-top:2px; }
.spc-tri-status{ font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.spc-tri-status.is-now{ background:var(--spc-pink-soft); color:var(--spc-primary); }
.spc-tri-status.is-done{ background:#ecfdf5; color:#047857; }
.spc-tri-status.is-next{ background:var(--spc-soft); color:var(--spc-muted); }
.spc-tri-desc{ font-size:14px; color:var(--spc-muted); margin:0 0 14px; line-height:1.6; }
.spc-tri-points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
@container (max-width:520px){
  .spc-tri-points{ grid-template-columns:1fr; gap:8px; }
  .spc-tri-points li{ font-size:12px; gap:7px; }
  .spc-tri-points li .spc-svg{ width:14px; height:14px; margin-top:2px; }
}
.spc-tri-points li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--spc-text); }
.spc-tri-points li .spc-svg{ color:var(--spc-primary); margin-top:3px; width:16px; height:16px; }

/* Development section + week stepper */
.spc-dev-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.spc-dev-head h4{ margin:0; font-size:16px; font-weight:800; color:var(--spc-text); display:flex; align-items:center; gap:9px; }
.spc-dev-head h4 .spc-svg{ color:var(--spc-primary); }
.spc-dev-nav{ display:flex; gap:8px; flex:none; }
.spc-dev-week .h .now{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--spc-primary); background:#fff; border:1px solid var(--spc-line); padding:2px 7px; border-radius:999px; margin-left:6px; }

/* Development grid */
.spc-dev-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
@container (max-width:760px){ .spc-dev-grid{ grid-template-columns:1fr; } }
.spc-dev-baby{ background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:16px; padding:18px; position:relative; overflow:hidden; }
.spc-dev-baby .h{ font-size:12.5px; font-weight:700; color:var(--spc-primary); margin-bottom:6px; }
.spc-dev-baby .size{ font-size:17px; font-weight:800; color:var(--spc-text); line-height:1.3; max-width:70%; }
.spc-dev-baby .note{ font-size:13px; color:var(--spc-muted); margin-top:6px; max-width:75%; }
.spc-dev-baby .fruit{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:70px; height:70px; }
.spc-dev-baby .fruit .emoji{ position:absolute; inset:0; display:grid; place-items:center; font-size:46px; }
.spc-dev-baby .fruit .fruit-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.spc-dev-mid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:420px){ .spc-dev-mid{ grid-template-columns:1fr; } }
.spc-mini{ background:#fff; border:1px solid var(--spc-line); border-radius:14px; padding:13px 15px; }
.spc-mini .k{ font-size:11.5px; color:var(--spc-muted); font-weight:600; }
.spc-mini .v{ font-size:14.5px; font-weight:700; margin-top:3px; color:var(--spc-text); }
.spc-dev-week{ background:var(--spc-pink-soft); border:1px solid var(--spc-line); border-radius:16px; padding:18px; position:relative; overflow:hidden; }
.spc-dev-week .h{ font-size:12.5px; font-weight:700; color:var(--spc-accent); }
.spc-dev-week .wk{ font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--spc-text); margin-top:6px; }
.spc-dev-week .range{ font-size:11.5px; color:var(--spc-muted); margin:2px 0 10px; }
.spc-dev-week .wt{ font-size:15px; font-weight:800; color:var(--spc-text); margin-bottom:5px; }
.spc-dev-week .wd{ font-size:12.5px; color:var(--spc-muted); line-height:1.55; max-width:70%; }

.spc-dev-week .embryo {
    position: absolute;
    right: 3px;
    bottom: 10px;
    width: 100px;
    height: auto;
}

.spc-dev-week .embryo svg, .spc-dev-week .embryo .embryo-img{ position:absolute; right:0; bottom:0; width:100px; height:auto; display:block; }
.spc-dev-week .embryo .embryo-img{ z-index:1; object-fit:contain; }

/* Emoji must render in a colour-emoji font regardless of the theme's font. */
.spc-app .emoji{ font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif; font-style:normal; font-weight:400; line-height:1; -webkit-text-fill-color:initial; }

/* Milestones (horizontal strip) */
.spc-ms-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.spc-ms-head h4{ margin:0; font-size:16px; font-weight:800; color:var(--spc-text); display:flex; align-items:center; gap:9px; }
.spc-ms-head h4 .spc-svg{ color:var(--spc-primary); }
.spc-ms-nav{ display:flex; gap:8px; }
.spc-ms-arrow{ width:34px; height:34px; border-radius:50%; border:1px solid var(--spc-line); background:#fff; cursor:pointer;
  display:grid; place-items:center; color:var(--spc-primary); }
.spc-ms-arrow:hover{ background:var(--spc-soft); }
.spc-ms-arrow:disabled{ opacity:.35; cursor:not-allowed; }
.spc-ms-scroll{ display:flex; gap:0; overflow-x:auto; scroll-behavior:smooth; padding:6px 2px 10px; scrollbar-width:thin; }
.spc-ms-node{ flex:0 0 auto; width:178px; position:relative; padding:34px 14px 0 0; }
.spc-ms-node::before{ content:""; position:absolute; top:10px; left:11px; right:-3px; border-top:2px dashed var(--spc-line); }
.spc-ms-node:last-child::before{ display:none; }
.spc-ms-dot{ position:absolute; top:0; left:0; width:22px; height:22px; border-radius:50%; background:var(--spc-line); z-index:1;
  display:grid; place-items:center; color:#fff; }
.spc-ms-node.is-done .spc-ms-dot{ background:var(--spc-accent); }
.spc-ms-node.is-now .spc-ms-dot{ background:var(--spc-grad); box-shadow:0 0 0 5px color-mix(in srgb,var(--spc-primary) 16%,transparent); }
.spc-ms-wk{ font-size:13px; font-weight:800; color:var(--spc-primary); }
.spc-ms-date{ font-size:11.5px; color:var(--spc-muted); margin:1px 0 4px; }
.spc-ms-lab{ font-size:12.5px; color:var(--spc-text); font-weight:600; }
.spc-ms-node.is-now .spc-ms-lab{ color:var(--spc-accent); }

/* Footer note */
.spc-footnote{ display:flex; gap:12px; align-items:center; justify-content:flex-start; text-align:left;
  background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:14px; padding:14px 18px; font-size:13.5px; color:var(--spc-text); }
.spc-footnote .ico{ width:30px; height:30px; border-radius:9px; background:var(--spc-pink-soft); color:var(--spc-primary); display:grid; place-items:center; flex:none; }

/* Consistent vertical rhythm between results and the CTA / lead / restart chrome
   that follows it (these are appended as siblings, not part of the results grid). */
.spc-step > .spc-results ~ *{ margin-top:18px; }
.spc-cta + .spc-emergency, .spc-emergency{ margin-top:12px; }

/* Generic result grid (other tools) */
.spc-result-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.spc-result-item{ background:#fff; border:1px solid var(--spc-line); border-radius:16px; padding:15px 17px; }
.spc-result-item .k{ font-size:12.5px; color:var(--spc-muted); font-weight:600; }
.spc-result-item .v{ font-size:17px; font-weight:700; margin-top:3px; }

.spc-section-h{ font-size:16px; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:9px; color:var(--spc-text); }

/* Checklist — side-by-side groups */
.spc-check-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.spc-check-group{ background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:16px; padding:18px; }
.spc-check-group h5{ font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--spc-primary); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.spc-checklist{ display:grid; gap:8px; }
.spc-check{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--spc-line); border-radius:12px; cursor:pointer; font-size:14px; background:#fff; transition:.12s; }
.spc-check:hover{ border-color:var(--spc-primary); }
.spc-check input{ width:18px; height:18px; accent-color:var(--spc-primary); flex:none; }
.spc-check.is-done{ background:var(--spc-soft); color:var(--spc-muted); text-decoration:line-through; }
.spc-check-meter{ font-size:13px; color:var(--spc-muted); margin:14px 0 0; font-weight:600; }

/* Reminders */
.spc-reminders{ display:grid; gap:10px; }
.spc-rem{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--spc-line); border-radius:16px; background:#fff; }
.spc-rem .when{ font-size:12.5px; color:var(--spc-muted); }
.spc-rem-add{ display:grid; grid-template-columns:1fr 180px auto; gap:10px; margin-top:14px; }
@media(max-width:560px){ .spc-rem-add{ grid-template-columns:1fr; } }
.spc-rem-del{ background:none; border:none; color:var(--spc-accent); cursor:pointer; padding:6px; border-radius:8px; display:grid; place-items:center; }
.spc-rem-del:hover{ background:var(--spc-soft); }

/* Weight gauge */
.spc-gauge{ height:14px; border-radius:999px; background:var(--spc-line); overflow:hidden; }
.spc-gauge-fill{ height:100%; border-radius:999px; background:var(--spc-grad); }

/* CTA bar */
.spc-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.spc-cta .spc-btn{ flex:1 1 auto; font-size:14px; padding:13px 16px; min-width:150px; }
@media(max-width:480px){ .spc-cta .spc-btn{ flex:1 1 100%; } }

/* Contact panel */
.spc-contact{ background:#fff; border:1px solid var(--spc-line); border-radius:16px; padding:18px; font-size:14px; line-height:1.8; }
.spc-contact a{ color:var(--spc-primary); text-decoration:none; }

/* Lead form */
.spc-lead{ background:var(--spc-soft); border:1px solid var(--spc-line); border-radius:18px; padding:24px; }
.spc-lead h3{ font-size:19px; margin:0 0 6px; display:flex; align-items:center; gap:9px; color:var(--spc-text); }
.spc-lead h3 .spc-svg{ color:var(--spc-primary); }
.spc-lead p.intro{ color:var(--spc-muted); font-size:14px; margin:0 0 18px; }
.spc-msg{ font-size:14px; font-weight:600; margin-top:12px; min-height:18px; }
.spc-msg.ok{ color:#16a34a; } .spc-msg.err{ color:#dc2626; }

/* Fun note */
.spc-fun-note{ font-size:13px; color:var(--spc-muted); font-style:italic; text-align:center; padding:12px 16px; background:var(--spc-soft); border-radius:12px; }

/* Notices */
.spc-disclaimer{ display:flex; gap:8px; font-size:13px; color:var(--spc-muted); margin:24px 0 0; padding-top:16px; border-top:1px solid var(--spc-line); line-height:1.5; }
.spc-emergency{ display:flex; gap:10px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:14px; padding:14px 16px; font-size:13.5px; }
.spc-branding{ text-align:center; font-size:12px; color:var(--spc-muted); margin:16px 0 0; }
.spc-branding a{ color:var(--spc-muted); }

/* ---------- Mobile responsiveness ---------- */
@media(max-width:600px){
  .spc-app{ font-size:15px; }
  /* Due-date stat cards: one per row on phones. */
  .spc-stats{ grid-template-columns:1fr; gap:10px; }
  .spc-stat-card{ padding:14px; }
  .spc-stat-ico{ width:36px; height:36px; border-radius:11px; }
  /* Breathing room before the progress bar. */
  .spc-prog{ margin-top:6px; }
  /* Trimester tabs: shrink so all three fit without clipping. */
  .spc-tri-tabs{ gap:5px; padding:5px; }
  .spc-tri-tab{ font-size:12px; padding:10px 4px; }
  .spc-tri-panel{ padding:16px; }
  .spc-tri-panel-head{ flex-wrap:wrap; }
  .spc-dev-baby, .spc-dev-week{ padding:16px; }
}

/* When the development grid stacks into a single column, pull the fruit /
   embryo art out of absolute positioning so it flows below the text —
   centered and never overlapping the description — and place the embryo
   (weekly) card right after the fruit card. */
@container (max-width:760px){
  .spc-dev-baby{ order:1; }
  .spc-dev-week{ order:2; }
  .spc-dev-mid{ order:3; }
  .spc-dev-baby .size, .spc-dev-baby .note, .spc-dev-week .wd{ max-width:100%; }
  .spc-dev-baby .fruit{ position:relative; right:auto; top:auto; transform:none; margin:14px auto 0; }
  .spc-dev-week .embryo{ position:relative; right:auto; bottom:auto; width:100%; height:auto; margin:14px 0 4px; text-align:center; }
  .spc-dev-week .embryo .embryo-img,
  .spc-dev-week .embryo .embryo-svg,
  .spc-dev-week .embryo svg{ position:static; right:auto; bottom:auto; display:inline-block; }
  .spc-dev-week .embryo .embryo-img{ width:auto; max-width:120px; max-height:150px; height:auto; }
  .spc-dev-week .embryo svg{ width:100px; height:auto; }
}

/* Print */
@media print{
  body *{ visibility:hidden; }
  .spc-app, .spc-app *{ visibility:visible; }
  .spc-app{ position:absolute; left:0; top:0; box-shadow:none; border:none; }
  .spc-cta, .spc-nav, .spc-lead, .spc-branding, .spc-ms-nav{ display:none !important; }
}