/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CONTENT — intro, skip table, rules, FAQ, next steps
   These sit OUTSIDE .bgw-registry, so they're scoped by their own class names
   and by the section ids we created. Nothing here touches the shared
   bgw-pseo.css or any other page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── how to use (numbered steps) ────────────────────────────────────────── */
.reg-steps {
	counter-reset: step;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	max-width: 74ch;
}
.reg-steps li {
	position: relative;
	counter-increment: step;
	padding: 0 0 0 52px;
	margin: 0 0 20px;
	line-height: 1.65;
}
.reg-steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgb(143, 179, 159);
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

/* ── inline note ────────────────────────────────────────────────────────── */
.reg-note {
	max-width: 74ch;
	margin: 20px 0 0;
	padding: 14px 18px;
	border-left: 3px solid rgb(143, 179, 159);
	background: rgba(143, 179, 159, .10);
	font-size: .93rem;
	line-height: 1.6;
}

/* ── dark data tables in the new sections ───────────────────────────────── */
#skip .table-card,
#where .table-card {
	background: rgb(43, 42, 40);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 10px;
	overflow: hidden;
	color: rgb(247, 242, 234);
}
#skip .table-card table,
#where .table-card table { width: 100%; border-collapse: collapse; }
#skip .table-card th,
#where .table-card th {
	text-align: left;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(247, 242, 234);
	background: rgba(255, 255, 255, .07);
	padding: 12px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}
#skip .table-card td,
#where .table-card td {
	padding: 13px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	color: rgb(247, 242, 234);
	font-size: .93rem;
	line-height: 1.6;
	vertical-align: top;
}
#skip .table-card tr:last-child td,
#where .table-card tr:last-child td { border-bottom: 0; }
#skip .table-card td:first-child,
#where .table-card td:first-child { white-space: nowrap; }
#skip .table-card strong,
#where .table-card strong { color: #fff; }
#skip .table-card tbody tr:hover,
#where .table-card tbody tr:hover { background: rgba(255, 255, 255, .06); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list { margin: 22px 0 0; max-width: 80ch; }
.faq-list details {
	border: 1px solid rgba(43, 42, 40, .14);
	border-radius: 8px;
	margin: 0 0 10px;
	background: rgba(255, 255, 255, .5);
}
.faq-list summary {
	cursor: pointer;
	padding: 15px 18px;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.45;
	list-style: none;
	position: relative;
	padding-right: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 400;
	color: rgb(143, 179, 159);
	line-height: 1;
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details[open] summary { border-bottom: 1px solid rgba(43, 42, 40, .12); }
.faq-list details p {
	margin: 0;
	padding: 14px 18px 17px;
	line-height: 1.7;
	font-size: .95rem;
}
.faq-list summary:focus-visible { outline: 2px solid rgb(143, 179, 159); outline-offset: 2px; }

/* ── next steps grid ────────────────────────────────────────────────────── */
.next-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	margin: 22px 0 0;
}
.next-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px;
	border-radius: 10px;
	background: rgb(43, 42, 40);
	border: 1px solid rgba(255, 255, 255, .10);
	color: rgb(247, 242, 234);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.next-card:hover {
	border-color: rgb(143, 179, 159);
	transform: translateY(-2px);
	color: rgb(247, 242, 234);
}
.next-card:focus-visible { outline: 2px solid rgb(143, 179, 159); outline-offset: 3px; }
.next-card .eyebrow {
	color: rgb(143, 179, 159);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0;
}
.next-card strong {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}
.next-card span:last-child { font-size: .9rem; line-height: 1.55; }

@media (max-width: 620px) {
	.reg-steps li { padding-left: 44px; }
	#skip .table-card td:first-child,
	#where .table-card td:first-child { white-space: normal; }
}

@media print {
	.faq-list details { border-color: #ccc; background: #fff; }
	.faq-list details p { display: block !important; }
	.next-grid { display: none; }
}

/* BGW-UNIVERSAL-TABLE-CARD */
/* Every table card is dark, on every tool page. No section ID games — that
   approach silently failed 3 times when a copied sheet met a new section. */
.table-card {
	background: rgb(43, 42, 40) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-radius: 10px !important;
	overflow: hidden;
}
.table-card table { background: transparent !important; width: 100%; }
.table-card th {
	background: transparent !important;
	color: rgba(247,242,234,.60) !important;
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid rgba(255,255,255,.16) !important;
	padding: 14px 20px !important;
	text-align: left !important;
}
.table-card td {
	background: transparent !important;
	color: #F7F2EA !important;
	font-size: .93rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-bottom: 1px solid rgba(255,255,255,.07) !important;
	padding: 16px 20px !important;
	vertical-align: top !important;
}
.table-card td strong,
.table-card th strong { color: #fff !important; font-weight: 700 !important; }
.table-card tbody tr:last-child td { border-bottom: 0 !important; }
.table-card tbody tr:hover td { background: rgba(255,255,255,.05) !important; }

/* BGW-HOVER-FIX */
/* Shared sheet line 88 turns every tbody row cream on hover. On a dark card
   that hides the text, because our tint was ~94% transparent and let it show
   through. Opaque tint + no inherited cream. */
.table-card tbody tr:hover { background: transparent !important; }
.table-card tbody tr:hover td {
	background: rgb(56, 54, 51) !important;
	color: #F7F2EA !important;
}
.table-card tbody tr:hover td strong { color: #fff !important; }

/* BGW-CONTRAST-FILL */
/* Brand mint rgb(143,179,159) with white text measures 2.30:1 — fails WCAG AA.
   Anything carrying WHITE text uses this darker green instead: 4.80:1.
   The light mint remains for accents, borders and dark-text fills. */
.bgw-gender .fit-buy,
.bgw-hospital .fit-buy,
.bgw-gender .gq-start,
.bgw-gender .gq-opt.chosen,
.bgw-gender .gq-badge,
.bgw-hospital .hbc-badge.essential,
.bgw-registry .fit-buy,
.bgw-sizechart .fit-buy,
.bgw-duedate .fit-buy,
.bgw-duedate .dd-chip.on,
a.fit-buy,
button.gq-start {
	background: rgb(86, 122, 102) !important;
	border-color: rgb(86, 122, 102) !important;
	color: #fff !important;
}
.bgw-gender .fit-buy:hover,
.bgw-hospital .fit-buy:hover,
.bgw-gender .gq-start:hover,
a.fit-buy:hover,
button.gq-start:hover {
	background: rgb(74, 106, 89) !important;
	border-color: rgb(74, 106, 89) !important;
}

/* ══ CONTRAST FIXES ════════════════════════════════════════════════════════
   Three real defects found by bgw-preflight (audit/audit-tools.mjs):

   1. .dd-ymyl — the YMYL disclaimer — had NO background of its own, so it sat
      on the cream page while its text was #F7F2EA. Measured 1.07:1. It has been
      invisible since it was added. It is a compliance notice, so this matters.
   2. Week-card labels (.n = "8w", .f = "Raspberry") at 1.58–2.07:1.
   3. Mint rgb(143,179,159) used as LINK text on a light background = 2.14:1.
      The mint is an accent/fill colour, not a text colour on light.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1 — the disclaimer becomes its own dark card, matching the tool */
.bgw-duedate .dd-ymyl {
	background: rgb(43, 42, 40) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-left: 3px solid rgb(217, 143, 154) !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 16px 20px !important;
	margin: 0 0 22px !important;
}
.bgw-duedate .dd-ymyl p { color: #F7F2EA !important; }
.bgw-duedate .dd-ymyl strong { color: #fff !important; }
.bgw-duedate .dd-ymyl a { color: rgb(143, 179, 159) !important; }

/* 2 — week-card labels: lift off the card, still subordinate to the heading */
.bgw-duedate .dd-week .n,
.bgw-duedate span.n { color: #F7F2EA !important; }
.bgw-duedate .dd-week .f,
.bgw-duedate span.f { color: rgba(247,242,234,.86) !important; }

/* 3 — mint as link text on a light background fails; use the darker green */
#shop p a,
#eitherway p a,
.section-head a,
.lede a,
.reg-note a,
.bgw-pseo .section a:not(.fit-buy):not(.next-card):not(.btn-primary) {
	color: rgb(74, 106, 89) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
#shop p a:hover,
#eitherway p a:hover,
.section-head a:hover,
.lede a:hover,
.reg-note a:hover {
	color: rgb(43, 42, 40) !important;
}

/* ── due date: the panel lost its dark background while --ink stayed cream ──
   .dd-wk .n/.f inherited colour: var(--ink) => #F7F2EA, but the panel behind
   them paints light, so the week labels measured 1.58–2.07:1.
   Restore the dark panel rather than recolouring the text: the tool is a dark
   card by design, and the ghost-number/trimester-header layout assumes it. */
.bgw-duedate .dd-panel,
.bgw-duedate .dd-answer,
.bgw-duedate .dd-timeline {
	background: rgb(43, 42, 40) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-radius: 10px !important;
	color: #F7F2EA !important;
}
.bgw-duedate .dd-panel *,
.bgw-duedate .dd-answer * { color: inherit; }

/* NOTE: the class is .dd-wk, not .dd-week — earlier rule was a typo and
   never applied. These are the real selectors. */
.bgw-duedate .dd-wk .n { color: #F7F2EA !important; }
.bgw-duedate .dd-wk .f { color: rgba(247,242,234,.86) !important; }
.bgw-duedate .dd-wk.is-now .n,
.bgw-duedate .dd-wk.is-now .f { color: #fff !important; }
.bgw-duedate .dd-wk .hd { color: rgba(247,242,234,.60) !important; }

/* ── .dd-wk.is-now carries a MINT background ───────────────────────────────
   Mint rgb(143,179,159) with white text = 2.30:1 (fails). With dark text it is
   6.22:1. The earlier fix forced #fff here, which created the failure it was
   meant to solve — the highlight needs dark text, not light. */
.bgw-duedate .dd-wk.is-now .n,
.bgw-duedate .dd-wk.is-now .f,
.bgw-duedate .dd-wk.is-now .hd { color: rgb(43, 42, 40) !important; }
.bgw-duedate .dd-wk.is-now .f { color: rgba(43, 42, 40, .82) !important; }

/* ── .dd-wk .n/.f sit on a LIGHT background (measured ~rgb(247,242,234)) ────
   So the text must be DARK. Both cases are light: the plain week card, and
   .is-now which carries mint. Cream text on either measures 1.89–2.07:1.
   Dark text gives 11:1 on cream and 6.22:1 on mint — correct in both. */
.bgw-duedate .dd-wk .n { color: rgb(43, 42, 40) !important; }
.bgw-duedate .dd-wk .f { color: rgba(43, 42, 40, .80) !important; }
.bgw-duedate .dd-wk .hd { color: rgba(43, 42, 40, .62) !important; }
.bgw-duedate .dd-wk .ghost,
.bgw-duedate .dd-wk .num { color: rgba(43, 42, 40, .14) !important; }
.bgw-duedate .dd-wk.is-now .n,
.bgw-duedate .dd-wk.is-now .f,
.bgw-duedate .dd-wk.is-now .hd { color: rgb(43, 42, 40) !important; }
   Solid ink gives 6.22:1. */
.bgw-duedate .dd-wk .f,
.bgw-duedate .dd-wk.is-now .f { color: rgb(43, 42, 40) !important; }

/* buying note under the chart — the affiliate copy for a table with no room
   for a sentence per row */
.buying-note {
	margin: 18px 0 0; padding: 18px 20px;
	background: rgb(43,42,40); border: 1px solid rgba(255,255,255,.10);
	border-radius: 10px; color: #F7F2EA;
}
.buying-note p { margin: 0; font-size: .93rem; line-height: 1.68; color: #F7F2EA !important; }
.buying-note p + p { margin-top: 11px; }
.buying-note strong { color: #fff !important; font-weight: 700; }
.buying-note .sub { font-size: .88rem; color: rgba(247,242,234,.80) !important; }
.buying-note a { color: rgb(143,179,159) !important; text-decoration: underline; text-underline-offset: 3px; }
.buying-note a:hover { color: #fff !important; }