/* =============================================================
   Stork Pregnancy & Ovulation Calculators — v2.0
   Pink theme matching reference screenshots
   ============================================================= */

:root {
	--stork-pink:       #d4186c;
	--stork-pink-light: #f9d0e5;
	--stork-pink-pale:  #fff0f7;
	--stork-gray-light: #f3f3f3;
	--stork-gray:       #e0e0e0;
	--stork-text:       #2c2c2c;
	--stork-muted:      #777;
	--stork-white:      #ffffff;
	--stork-radius:     14px;
}

/* ---------- wrapper ---------- */
.stork-calc-wrap {
	max-width: 860px;
	margin: 0 auto 2.5rem;
	font-family: inherit;
	color: var(--stork-text);
	border-radius: var(--stork-radius);
	overflow: visible;
}

/* =====================================================
   PINK HEADER BAR
   ===================================================== */
.stork-header {
	background: linear-gradient(135deg, #d4186c 0%, #e9357e 100%);
	padding: 1.2rem 1.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: flex-end;
	border-radius: var(--stork-radius) var(--stork-radius) 0 0;
}

.stork-hfield {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1 1 180px;
}

.stork-hlabel {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: rgba(255,255,255,.85);
}

/* select box */
.stork-select-box {
	position: relative;
}
.stork-hselect {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	padding: .65rem 2.2rem .65rem 1rem;
	font-size: .95rem;
	font-family: inherit;
	font-weight: 500;
	background: var(--stork-white);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: var(--stork-text);
}
.stork-chevron {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .65rem;
	pointer-events: none;
	color: var(--stork-muted);
	line-height: 1;
}

/* date input */
.stork-hdate {
	padding: .65rem 1rem;
	font-size: .95rem;
	font-family: inherit;
	background: var(--stork-white);
	border: none;
	border-radius: 8px;
	color: var(--stork-text);
	width: 100%;
	box-sizing: border-box;
}

/* number input with spinners */
.stork-number-box {
	display: flex;
	align-items: center;
	background: var(--stork-white);
	border-radius: 8px;
	overflow: hidden;
}
.stork-hnumber {
	border: none;
	padding: .65rem .75rem;
	font-size: .95rem;
	font-family: inherit;
	width: 60px;
	text-align: center;
	color: var(--stork-text);
	-moz-appearance: textfield;
}
.stork-hnumber::-webkit-inner-spin-button,
.stork-hnumber::-webkit-outer-spin-button { -webkit-appearance: none; }
.stork-days-label {
	font-size: .85rem;
	color: var(--stork-muted);
	padding-right: .4rem;
}
.stork-spinners {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--stork-gray);
}
.stork-spinners button {
	background: none;
	border: none;
	padding: 0 .5rem;
	cursor: pointer;
	font-size: .65rem;
	color: var(--stork-muted);
	line-height: 1.5;
	height: 22px;
}
.stork-spinners button:hover { background: var(--stork-gray-light); }

/* =====================================================
   RESULT AREA / CARD
   ===================================================== */
.stork-result-area {
	background: #f8f8f8;
}
.stork-empty-state {
	padding: 3rem 2rem;
	text-align: center;
	color: var(--stork-muted);
}
.stork-empty-state span { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.stork-empty-state p { margin: 0; font-size: 1rem; }

.stork-card {
	padding: 1.5rem 1.6rem 0;
}
.stork-card-body {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

/* ---------- left column ---------- */
.stork-left-col {
	flex: 0 0 160px;
	text-align: center;
}
.stork-fruit-circle {
	width: 130px;
	height: 130px;
	border-radius: 12px;
	background: var(--stork-pink-pale);
	border: 2px solid var(--stork-pink-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}
.stork-fruit-emoji { font-size: 4.5rem; line-height: 1; }

.stork-meeting-badge {
	margin-top: .75rem;
	background: var(--stork-pink);
	color: var(--stork-white);
	border-radius: 12px;
	padding: .55rem .85rem;
	display: inline-block;
	text-align: left;
	width: 140px;
	box-sizing: border-box;
}
.stork-meeting-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	display: block;
	margin-bottom: .25rem;
	opacity: .9;
}
.stork-meeting-bottom {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.stork-meeting-cal {
	font-size: 1.5rem;
	line-height: 1;
}
.stork-meeting-days {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}

/* ---------- right column ---------- */
.stork-right-col {
	flex: 1 1 0;
	min-width: 0;
}
.stork-baby-desc {
	font-size: .95rem;
	margin: 0 0 .25rem;
	line-height: 1.5;
}
.stork-fruit-name {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--stork-pink);
	letter-spacing: .01em;
	margin: .2rem 0 .6rem;
	line-height: 1.1;
}

/* ---------- trimester progress bar ---------- */
.stork-trimester-bar-wrap {
	position: relative;
	margin-bottom: 1.5rem;
}
.stork-tri-dot {
	position: absolute;
	bottom: 100%;
	margin-bottom: 2px;
	font-size: 1.25rem;
	line-height: 1;
	pointer-events: none;
	transition: left .3s;
}
.stork-trimester-bar {
	display: flex;
	border-radius: 20px;
	overflow: hidden;
	height: 36px;
	background: var(--stork-gray);
}
.stork-tri-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	color: rgba(255,255,255,.6);
	background: var(--stork-gray);
	transition: background .3s;
}
.stork-tri-seg.active {
	background: var(--stork-pink);
	color: var(--stork-white);
}
.stork-tri-seg.done {
	background: #f08ab6;
	color: var(--stork-white);
}

/* ---------- timeline row ---------- */
.stork-timeline {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .75rem;
	font-size: .85rem;
}
.stork-tl-item { display: flex; flex-direction: column; gap: .1rem; }
.stork-tl-date { font-weight: 600; }
.stork-tl-label { font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.stork-tl-start { color: var(--stork-pink); }
.stork-tl-finish { color: var(--stork-pink); }
.stork-tl-center { text-align: center; }
.stork-tl-weeks { display: block; font-weight: 700; font-size: .95rem; }
.stork-tl-months { display: block; font-size: .8rem; color: var(--stork-muted); }
.stork-tl-right { text-align: right; }

/* ---------- trimester dates ---------- */
.stork-trimester-dates {
	font-size: .8rem;
	color: var(--stork-muted);
	margin-bottom: .75rem;
}
.stork-trimester-dates p { margin: .15rem 0; }

/* ---------- percentage pill ---------- */
.stork-pct-pill {
	display: inline-block;
	background: var(--stork-pink);
	color: var(--stork-white);
	border-radius: 999px;
	padding: .45rem 1.25rem;
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: .75rem;
}

/* ---------- state screens (future / born) ---------- */
.stork-state-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 .75rem;
}
.stork-avatar-circle {
	font-size: 3.5rem;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--stork-pink-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 1rem;
}
.stork-future-facts p {
	margin: .5rem 0;
	font-size: .95rem;
	line-height: 1.5;
}
.stork-future-facts strong {
	font-size: .75rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.stork-fact-icon { margin-right: .3rem; }

.stork-age-pill {
	display: inline-block;
	background: var(--stork-pink);
	color: var(--stork-white);
	border-radius: 999px;
	padding: .5rem 1.4rem;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: .9rem;
}

/* ---------- disclaimer ---------- */
.stork-disclaimer {
	font-size: .72rem;
	color: var(--stork-muted);
	margin: .75rem 0 1rem;
	font-style: italic;
}

/* =====================================================
   DUE DATE CALCULATOR v2 — Modern Result UI
   ===================================================== */
.stork-dd-v2 {
	padding: 1.5rem 1.6rem 1rem;
}

/* ── Hero row ── */
.stork-dd-hero {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

/* SVG ring */
.stork-dd-ring-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}
.stork-dd-ring-svg {
	width: 120px;
	height: 120px;
	transform: rotate(-90deg);
}
.stork-ring-track {
	fill: none;
	stroke: #f0f0f0;
	stroke-width: 10;
}
.stork-ring-fill {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset .6s ease;
}
.stork-ring-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.stork-ring-pct {
	font-size: 1.5rem;
	font-weight: 800;
	background: linear-gradient(135deg, #d4186c, #f06292);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}
.stork-ring-sub {
	font-size: .65rem;
	color: var(--stork-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* fruit bubble */
.stork-dd-hero-mid {
	text-align: center;
}
.stork-dd-fruit-bubble {
	font-size: 3.5rem;
	line-height: 1;
	margin-bottom: .4rem;
}
.stork-dd-baby-name {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--stork-pink);
}
.stork-dd-baby-size {
	font-size: .8rem;
	color: var(--stork-muted);
	margin: .15rem 0 .35rem;
}
.stork-dd-baby-fact {
	font-size: .78rem;
	color: var(--stork-text);
	line-height: 1.4;
	max-width: 180px;
	margin: 0 auto;
}

/* countdown */
.stork-dd-countdown-wrap {
	text-align: center;
}
.stork-dd-days-big {
	font-size: 3.2rem;
	font-weight: 900;
	background: linear-gradient(135deg, #d4186c, #f06292);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}
.stork-dd-days-sub {
	font-size: .75rem;
	color: var(--stork-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	margin-bottom: .75rem;
}
.stork-dd-due-strip {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: var(--stork-pink-pale);
	border: 1px solid var(--stork-pink-light);
	border-radius: 10px;
	padding: .6rem .85rem;
	text-align: left;
}
.stork-dd-due-icon { font-size: 1.4rem; }
.stork-dd-due-label {
	font-size: .68rem;
	color: var(--stork-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}
.stork-dd-due-val {
	font-size: .88rem;
	font-weight: 700;
	color: var(--stork-text);
}

/* ── Stats row ── */
.stork-dd-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.stork-dd-stat-box {
	background: var(--stork-white);
	border: 1px solid var(--stork-gray);
	border-radius: 12px;
	padding: .85rem .5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
}
.stork-dd-stat-ico { font-size: 1.4rem; }
.stork-dd-stat-num {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--stork-pink);
	line-height: 1;
}
.stork-dd-stat-lbl {
	font-size: .7rem;
	color: var(--stork-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* ── Trimester cards ── */
.stork-dd-tri-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.stork-dd-tri-card {
	background: var(--stork-white);
	border: 2px solid var(--stork-gray);
	border-radius: 12px;
	padding: .85rem 1rem;
	transition: border-color .2s;
}
.stork-dd-tri-card.stork-tri-now {
	border-color: var(--stork-pink);
	background: var(--stork-pink-pale);
}
.stork-dd-tri-card.stork-tri-done {
	border-color: #f08ab6;
	opacity: .75;
}
.stork-tri-badge {
	font-size: .7rem;
	font-weight: 800;
	color: var(--stork-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: .3rem;
}
.stork-tri-now .stork-tri-badge { color: var(--stork-pink); }
.stork-tri-cname {
	font-size: .88rem;
	font-weight: 700;
	color: var(--stork-text);
	margin-bottom: .2rem;
}
.stork-tri-cdates {
	font-size: .72rem;
	color: var(--stork-muted);
}
.stork-tri-tag {
	margin-top: .4rem;
	font-size: .72rem;
	font-weight: 700;
	color: var(--stork-pink);
}

/* ── Progress bar ── */
.stork-dd-prog-wrap { margin-bottom: .5rem; }
.stork-dd-prog-bar {
	height: 28px;
	background: var(--stork-gray);
	border-radius: 99px;
	overflow: hidden;
	position: relative;
	margin-bottom: .4rem;
}
.stork-dd-prog-fill {
	height: 100%;
	background: linear-gradient(90deg, #d4186c, #f06292);
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 4px;
	transition: width .5s ease;
	min-width: 36px;
}
.stork-dd-prog-baby { font-size: 1.1rem; line-height: 1; }
.stork-dd-prog-labels {
	display: flex;
	justify-content: space-between;
	font-size: .72rem;
	color: var(--stork-muted);
}

/* =====================================================
   OVULATION CALENDAR LAYOUT
   ===================================================== */
.stork-ov-result-area {
	padding: 1.5rem 1.6rem 1rem;
}
.stork-ov-layout {
	display: block;
}

/* ---------- month nav header row ---------- */
.stork-months-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.stork-month-nav-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--stork-text);
}
.stork-cal-nav {
	display: flex;
	gap: .4rem;
}
.stork-cal-nav-btn {
	background: var(--stork-white);
	border: 1px solid var(--stork-gray);
	border-radius: 100px;
	min-width: 40px;
	min-height: 40px;
	aspect-ratio: 1/1;
	box-sizing: border-box;
	padding: 0;
	font-size: 1.4rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stork-text);
	line-height: 1;
	transition: all .2s;
	font-weight: 300;
}
.stork-cal-nav-btn:hover {
	background: var(--stork-pink);
	border-color: var(--stork-pink);
	color: white;
}

/* ---------- two months side by side ---------- */
.stork-two-months {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
}
.stork-month {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ---------- calendar table ---------- */
.stork-cal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	border: none;
	border-radius: 8px;
	overflow: hidden;
	flex: 1;
}
.stork-cal-table th {
	text-align: center;
	padding: .55rem .2rem;
	font-weight: 700;
	font-size: .78rem;
	color: var(--stork-muted);
	background: var(--stork-gray-light);
	border-bottom: 1px solid var(--stork-gray);
}
.stork-cal-table td {
	text-align: center;
	padding: .2rem .1rem;
	vertical-align: middle;
	border-bottom: 1px solid #f0f0f0;
}
.stork-cal-empty { background: transparent; }

.stork-cal-day {
	width: 36px;
	min-width: 36px;
	max-width: 36px;
	height: 36px;
	min-height: 36px;
	border: none;
	background: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: .85rem;
	font-family: inherit;
	font-weight: 500;
	color: var(--stork-text);
	transition: all .15s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	flex-shrink: 0;
	box-sizing: border-box;
}
.stork-cal-day:hover:not(.scm-period):not(.scm-ovulation):not(.scm-test):not(.scm-fertile) {
	background: var(--stork-pink-pale);
	color: var(--stork-pink);
	border-radius: 50%;
}

/* calendar markers — all perfect circles */
.scm-fertile {
	border: 2px solid #f48fb1 !important;
	background: #fce4ef !important;
	color: var(--stork-pink) !important;
	border-radius: 50% !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	font-weight: 600 !important;
	box-sizing: border-box !important;
}
.scm-period {
	background: var(--stork-pink) !important;
	color: var(--stork-white) !important;
	border-radius: 50% !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	font-weight: 700 !important;
	box-sizing: border-box !important;
}
.scm-ovulation {
	background: #3d8ef8 !important;
	color: var(--stork-white) !important;
	border-radius: 50% !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 8px rgba(61,142,248,.4) !important;
	box-sizing: border-box !important;
}
.scm-test {
	background: #f5a623 !important;
	color: var(--stork-white) !important;
	border-radius: 50% !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	font-weight: 700 !important;
	box-sizing: border-box !important;
}
.scm-selected {
	box-shadow: 0 0 0 3px var(--stork-pink) !important;
}
.scm-today { font-weight: 800; color: var(--stork-pink); }

/* ---------- day detail strip (horizontal, below calendars) ---------- */
.stork-day-detail {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 1.1rem 0;
	background: var(--stork-white);
	border: 1px solid var(--stork-gray);
	border-radius: 14px;
	padding: 1rem 1.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.stork-detail-info {
	flex: 0 0 auto;
	min-width: 0;
}
.stork-day-header {
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .25rem;
	color: var(--stork-muted);
}
.stork-day-prob {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .75rem;
	line-height: 1.35;
	color: var(--stork-text);
}
.stork-egg-char {
	width: 90px;
	height: 90px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 3px solid var(--stork-pink);
	background: var(--stork-pink-pale);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: border-color .2s, background .2s;
}
.stork-egg-face { font-size: 2rem; line-height: 1; }
.stork-egg-day {
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stork-pink);
	margin-top: .25rem;
}
.stork-phase-pill {
	display: inline-block;
	background: var(--stork-pink);
	color: var(--stork-white);
	border-radius: 999px;
	padding: .4rem 1.1rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* detail divider + dates grid */
.stork-detail-divider {
	width: 1px;
	align-self: stretch;
	background: var(--stork-gray);
	flex-shrink: 0;
}
.stork-detail-dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem 1.2rem;
	flex: 1;
}
.stork-detail-date-item {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.stork-detail-date-ico {
	font-size: 1.2rem;
	flex-shrink: 0;
}
.stork-detail-date-lbl {
	font-size: .7rem;
	color: var(--stork-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.stork-detail-date-val {
	font-size: .85rem;
	font-weight: 700;
	color: var(--stork-text);
}

/* ---------- legend (kept for reference, no longer rendered) ---------- */
.stork-legend {
	margin-top: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	font-size: .8rem;
	color: var(--stork-text);
	border: 1px solid var(--stork-gray);
	border-radius: 10px;
	padding: .85rem 1.1rem;
	background: var(--stork-gray-light);
}
.stork-leg-item {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.stork-leg-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
}
.stork-leg-oval {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
}
.stork-leg-fertile  { background: #fce4ef; border: 2px solid #f48fb1; }
.stork-leg-ovulation { background: #3d8ef8; }
.stork-leg-test     { background: #f5a623; }
.stork-leg-period   { background: var(--stork-pink); }

/* =====================================================
   OVULATION TABLE
   ===================================================== */
.stork-ov-table-area {
	background: var(--stork-white);
	border-top: 1px solid var(--stork-gray);
}
.stork-ov-table-wrap { overflow-x: auto; }
.stork-ov-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}
.stork-ov-table th {
	background: var(--stork-pink);
	color: var(--stork-white);
	padding: .75rem 1rem;
	text-align: left;
	font-weight: 700;
	border-left: none;
	border-right: none;
}
.stork-ov-table th:first-child { border-left: none; }
.stork-ov-table th:last-child  { border-right: none; }
.stork-ov-table td {
	padding: .7rem 1rem;
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.stork-ov-table td:first-child { border-left: none; }
.stork-ov-table td:last-child  { border-right: none; }
.stork-ov-table tbody tr:nth-child(even) { background: var(--stork-gray-light); }
.stork-ov-table tbody tr:first-child td { background: var(--stork-pink-pale); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 700px) {
	/* Header — stack fields full-width */
	.stork-header {
		flex-direction: column;
		align-items: stretch;
		gap: .85rem;
	}
	.stork-hfield {
		width: 100%;
		flex: none;
	}
	.stork-hdate,
	.stork-select-box,
	.stork-number-box {
		width: 100%;
		box-sizing: border-box;
	}
	.stork-hselect { width: 100%; }

	/* Due date result card */
	.stork-card-body { flex-direction: column; }
	.stork-left-col { flex: none; display: flex; gap: 1rem; align-items: center; }
	.stork-fruit-circle { width: 90px; height: 90px; }
	.stork-fruit-emoji { font-size: 3rem; }
	.stork-meeting-badge { width: auto; }

	/* DDC v2 hero — stack vertically */
	.stork-dd-hero {
		grid-template-columns: 1fr !important;
		text-align: center;
	}
	.stork-dd-ring-wrap {
		margin: 0 auto;
	}
	.stork-dd-countdown-wrap {
		margin: 0 auto;
	}
	.stork-dd-due-strip {
		justify-content: center;
	}

	/* DDC v2 stats — 2 columns on mobile */
	.stork-dd-stats-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* DDC v2 trimester — stack */
	.stork-dd-tri-row {
		grid-template-columns: 1fr !important;
	}

	/* Ovulation calendar */
	.stork-two-months { grid-template-columns: 1fr; }
	.stork-months-nav-row { flex-wrap: wrap; gap: .5rem; }
	.stork-day-detail {
		flex-direction: column;
		text-align: center;
		gap: .75rem;
		padding: 1rem;
	}
	.stork-detail-info { text-align: center; }
	.stork-detail-divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
	.stork-detail-dates {
		grid-template-columns: 1fr;
		width: 100%;
	}
	.stork-detail-date-item {
		justify-content: center;
	}
	.stork-timeline { flex-direction: column; gap: .75rem; }
	.stork-tl-right { text-align: left; }
}