/* ═══════════════════════════════════════════════════════════════════════════
   BGW Bassinet Pad Fit — /bassinet-mattress-pad-size/
   Brand: ink #2B2A28 · cream rgb(251,248,244) · mint rgb(143,179,159)
          hairline #E7E3DD · sand #EFE7E1
   Only tool-specific components live here. .section / .band / .wrap / .lede /
   .steps / .faq / .pill are shared pSEO components (bgw-pseo.css).
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-bassinet {
	--ink: #2B2A28;
	--ink-soft: rgba(43, 42, 40, .72);
	--mint: rgb(143, 179, 159);
	--hair: #E7E3DD;
	--sand: #EFE7E1;
	--card: #fff;
}

/* ── the short answer box ───────────────────────────────────────────────── */
.bgw-bassinet .answer {
	background: var(--card);
	border: 1px solid var(--hair);
	border-left: 3px solid var(--mint);
	border-radius: 4px;
	padding: 20px 22px;
}
.bgw-bassinet .answer .eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ink);
}
.bgw-bassinet .answer p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.62 }
.bgw-bassinet .answer p:last-child { margin-bottom: 0 }
.bgw-bassinet .answer strong { color: var(--ink) }

/* ── tool card ──────────────────────────────────────────────────────────── */
.bgw-bassinet .tool-card {
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: 12px;
	padding: 26px 26px 24px;
	box-shadow: 0 16px 34px -26px rgba(43, 42, 40, .28);
}

.bgw-bassinet .row-label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 12px;
}
.bgw-bassinet .row-label .n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mint);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	flex: none;
}
.bgw-bassinet .row-label h3 {
	margin: 0;
	font-size: 15px;
	letter-spacing: .01em;
	color: var(--ink);
}

/* unit toggle */
.bgw-bassinet .unit {
	display: inline-flex;
	gap: 0;
	margin: 0 0 18px;
	border: 1px solid var(--hair);
	border-radius: 999px;
	overflow: hidden;
}
.bgw-bassinet .unit button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 8px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.bgw-bassinet .unit button:hover,
.bgw-bassinet .unit button:focus-visible {
	background: rgba(143, 179, 159, .18);
	color: var(--ink);
	outline: none;
}
.bgw-bassinet .unit button[aria-pressed="true"] {
	background: var(--mint);
	color: #fff;
}

/* field grid */
.bgw-bassinet .fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 20px;
}
.bgw-bassinet .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.bgw-bassinet .fields label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	margin: 0 0 6px;
}
.bgw-bassinet .fields input[type="number"],
.bgw-bassinet .fields select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--hair);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bgw-bassinet .fields input:focus,
.bgw-bassinet .fields select:focus {
	outline: none;
	border-color: var(--mint);
	box-shadow: 0 0 0 3px rgba(143, 179, 159, .22);
}

.bgw-bassinet .divider {
	height: 1px;
	background: var(--hair);
	margin: 22px 0;
}

/* ── fit meter ──────────────────────────────────────────────────────────── */
.bgw-bassinet .meter { margin: 22px 0 4px }
.bgw-bassinet .meter .cap {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--ink-soft);
}
.bgw-bassinet .meter .track {
	position: relative;
	height: 34px;
	background: var(--sand);
	border-radius: 4px;
	overflow: hidden;
}
.bgw-bassinet .meter .surface {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: rgba(143, 179, 159, .38);
	border-right: 2px solid var(--mint);
}
.bgw-bassinet .meter .pad {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	background: var(--ink);
	border-radius: 2px;
	opacity: .78;
	transition: width .25s ease;
}
.bgw-bassinet .meter .legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ink-soft);
}
.bgw-bassinet .meter .legend .key {
	display: inline-block;
	width: 14px;
	height: 10px;
	border-radius: 2px;
	margin-right: 7px;
	vertical-align: middle;
}
.bgw-bassinet .meter .legend .k1 { background: var(--ink); opacity: .78 }
.bgw-bassinet .meter .legend .k2 {
	background: rgba(143, 179, 159, .38);
	border-right: 2px solid var(--mint);
	box-sizing: content-box;
}

/* ── verdict ────────────────────────────────────────────────────────────── */
.bgw-bassinet .verdict:empty { display: none }
.bgw-bassinet .verdict {
	margin: 22px 0 0;
	padding: 16px 18px;
	border-radius: 4px;
	border: 1px solid var(--hair);
	background: var(--card);
}
.bgw-bassinet .verdict .tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 3px;
	margin: 0 0 10px;
}
.bgw-bassinet .verdict.ok .tag { background: var(--mint); color: #fff }
.bgw-bassinet .verdict.warn .tag { background: var(--ink); color: #fff }
.bgw-bassinet .verdict p { margin: 0 0 8px; line-height: 1.6; color: var(--ink-soft) }
.bgw-bassinet .verdict p:last-child { margin-bottom: 0 }
.bgw-bassinet .verdict strong { color: var(--ink) }

/* ── shapes ─────────────────────────────────────────────────────────────── */
.bgw-bassinet .shapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}
.bgw-bassinet .shape {
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: 4px;
	padding: 18px;
}
.bgw-bassinet .shape h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink) }
.bgw-bassinet .shape p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft) }
.bgw-bassinet .shape svg { display: block; margin: 0 0 12px }

/* ── source table ───────────────────────────────────────────────────────── */
.bgw-bassinet .table-card {
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: 4px;
	overflow-x: auto;
}
.bgw-bassinet .table-card table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.bgw-bassinet .table-card th {
	text-align: left;
	padding: 13px 16px;
	background: rgba(143, 179, 159, .16);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--hair);
	white-space: nowrap;
}
.bgw-bassinet .table-card td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--hair);
	color: var(--ink-soft);
	vertical-align: top;
	line-height: 1.55;
}
.bgw-bassinet .table-card tr:last-child td { border-bottom: 0 }
.bgw-bassinet .table-card strong { color: var(--ink) }
.bgw-bassinet .table-card .src { font-size: 12.5px; white-space: nowrap }

.bgw-bassinet .pill {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	white-space: nowrap;
}
.bgw-bassinet .pill.y { background: var(--mint); color: #fff }
.bgw-bassinet .pill.n { background: var(--sand); color: var(--ink) }

/* ── callout for the standard ───────────────────────────────────────────── */
.bgw-bassinet .standard {
	background: var(--ink);
	color: #fff;
	border-radius: 12px;
	padding: 26px;
}
.bgw-bassinet .standard h3 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 17px;
}
.bgw-bassinet .standard .sub {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .66);
}
.bgw-bassinet .standard dl {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 20px;
	font-size: 14px;
}
.bgw-bassinet .standard dt {
	color: var(--mint);
	font-weight: 600;
	white-space: nowrap;
}
.bgw-bassinet .standard dd { margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.55 }

/* ── sourced rules list ─────────────────────────────────────────────────── */
.bgw-bassinet .rules { margin: 0; padding: 0; list-style: none }
.bgw-bassinet .rules li {
	position: relative;
	padding: 0 0 0 26px;
	margin: 0 0 14px;
	line-height: 1.62;
	color: var(--ink-soft);
}
.bgw-bassinet .rules li:last-child { margin-bottom: 0 }
.bgw-bassinet .rules li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48em;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--mint);
}
.bgw-bassinet .rules strong { color: var(--ink) }
.bgw-bassinet .rules .cite {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: rgba(43, 42, 40, .55);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.bgw-bassinet .shapes { grid-template-columns: 1fr }
	.bgw-bassinet .standard dl { grid-template-columns: 1fr; gap: 4px 0 }
	.bgw-bassinet .standard dd { margin-bottom: 12px }
}
@media (max-width: 620px) {
	.bgw-bassinet .fields { grid-template-columns: 1fr }
	.bgw-bassinet .fields.two { grid-template-columns: 1fr }
	.bgw-bassinet .tool-card { padding: 20px 18px }
	.bgw-bassinet .table-card table { font-size: 13px }
	.bgw-bassinet .table-card th,
	.bgw-bassinet .table-card td { padding: 11px 12px }
}
/* ═══════════════════════════════════════════════════════════════════════════
   DARK TOOL CARD — /bassinet-mattress-pad-size/   (#2739)

   The tool card gets the dark background rgb(43,42,40).
   The rest of the page — hero, headings, answer box, shapes, tables, footer —
   stays exactly as it was. Nothing outside .tool-card is affected.

   Mechanism: the card redefines the palette variables, so every existing rule
   INSIDE it (which already uses var(--ink), var(--hair) etc.) flips to the
   dark scheme without being rewritten.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-bassinet .tool-card {
	/* palette redefined for everything inside the card */
	--ink: #F7F2EA;                        /* text — was #2B2A28 */
	--ink-soft: rgba(247, 242, 234, .68);  /* was rgba(43,42,40,.72) */
	--hair: rgba(255, 255, 255, .10);      /* was #E7E3DD */
	--sand: rgba(255, 255, 255, .06);      /* was #EFE7E1 */
	--card: rgba(255, 255, 255, .045);     /* was #fff */
	--field: rgba(255, 255, 255, .06);
	--on-mint: #23301F;                    /* dark text on mint — was #fff (2.2:1) */

	background: rgb(43, 42, 40);
	border-color: rgba(255, 255, 255, .10);
	box-shadow: 0 18px 38px -28px rgba(0, 0, 0, .55);
}

/* the numbered circles: dark text on mint reads at ~7:1, white was 2.2:1 */
.bgw-bassinet .tool-card .row-label .n { color: var(--on-mint) }

/* unit toggle */
.bgw-bassinet .tool-card .unit { background: var(--field) }
.bgw-bassinet .tool-card .unit button[aria-pressed="true"] { color: var(--on-mint) }

/* inputs — the base rule hard-codes #fff */
.bgw-bassinet .tool-card .fields input[type="number"],
.bgw-bassinet .tool-card .fields select {
	background: var(--field);
	color: var(--ink);
}
.bgw-bassinet .tool-card .fields input::placeholder { color: rgba(247, 242, 234, .34) }
.bgw-bassinet .tool-card .fields select option { background: rgb(43, 42, 40); color: var(--ink) }

/* the meter sits on the dark card */
.bgw-bassinet .tool-card .meter .track { background: rgba(255, 255, 255, .07) }
.bgw-bassinet .tool-card .meter .pad { background: var(--ink); opacity: .85 }
.bgw-bassinet .tool-card .meter .legend .k1 { background: var(--ink); opacity: .85 }

/* verdict panel inside the card */
.bgw-bassinet .tool-card .verdict {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .10);
}
.bgw-bassinet .tool-card .verdict.ok .tag { background: var(--mint); color: var(--on-mint) }
.bgw-bassinet .tool-card .verdict.warn .tag { background: var(--ink); color: rgb(43, 42, 40) }

/* ── COLOR INHERITANCE FIX ────────────────────────────────────────────────
   Redefining --ink inside the card does NOT change inherited text colour.
   `.bgw-pseo` sets color:var(--ink) with its own dark value; anything inside
   the card that does not set a colour of its own would inherit that dark ink
   and vanish. Pin it explicitly. */
.bgw-bassinet .tool-card { color: var(--ink); }
.bgw-bassinet .tool-card p { color: var(--ink-soft); }
.bgw-bassinet .tool-card strong { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE — buy links in the "bassinets worth measuring first" section
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-pseo .fit-buy,
.bgw-bassinet .fit-buy {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 7px 13px;
	border-radius: 3px;
	background: rgb(143, 179, 159);
	color: #fff;
	text-decoration: none;
	border: 1px solid rgb(143, 179, 159);
	transition: background .15s ease, transform .15s ease;
}
.bgw-pseo .fit-buy:hover,
.bgw-pseo .fit-buy:focus-visible,
.bgw-bassinet .fit-buy:hover,
.bgw-bassinet .fit-buy:focus-visible {
	background: rgb(110, 150, 128);
	border-color: rgb(110, 150, 128);
	color: #fff;
		outline: none;
}
.bgw-pseo .fit-buy-cell,
.bgw-bassinet .fit-buy-cell { white-space: nowrap; text-align: right; }

@media (max-width: 760px) {
	.bgw-pseo .fit-buy-cell,
	.bgw-bassinet .fit-buy-cell { white-space: normal; }
	.bgw-pseo .fit-buy,
	.bgw-bassinet .fit-buy { font-size: .75rem; padding: 6px 10px; }
}

/* ── ROW HOVER inside dark cards ─────────────────────────────────────────
   .bgw-pseo tbody tr:hover uses var(--cream), which is a LIGHT fill. On a
   dark card that makes the row go pale while the cell text stays cream —
   the row's contents disappear. Repaint it as a subtle lighten instead. */
.bgw-bassinet .tool-card tbody tr:hover { background: rgba(255, 255, 255, .06); }
.bgw-bassinet .tool-card tbody tr:hover td { background: transparent; }
.bgw-bassinet .tool-card .fit-buy-cell { background: transparent; }

/* 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;
}