/* ═══════════════════════════════════════════════════════════════════════════
   BGW Baby Clothes Size Chart — /tools/baby-clothes-size-chart/
   ---------------------------------------------------------------------------
   Design intent: this is TABULAR data, so the metaphor is a measured ladder —
   not the registry's filter rail, not the fit calculator's bench track.

   Two visuals do the work:
     1. RANGE BARS — every size drawn as a bar across a weight axis, so you can
        see that 0-3M *ends* at 12 lb. That answers the question every PAA asks
        and no competitor's static table shows.
     2. BRAND BIAS SCALE — a diverging axis (runs small ◀ to ▶ runs large) with
        each brand plotted on it.

   Palette: house system. Card rgb(43,42,40) · text rgb(247,242,234) FULL
   mint rgb(143,179,159) · buy = mint + WHITE text, hover darkens.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-sizechart {
	--ink:   #F7F2EA;
	--mint:  rgb(143, 179, 159);
	--mint-d:rgb(110, 150, 128);
	--line:  rgba(255, 255, 255, .10);
	--line-s:rgba(255, 255, 255, .06);
	--field: rgba(255, 255, 255, .055);
	--muted: rgba(247, 242, 234, .6);
	--void:  rgb(43, 42, 40);
	--rose:  #D98F9A;
	--amber: #E3D3A2;
	color: var(--ink);
}

/* ── shared dark surface ────────────────────────────────────────────────── */
.bgw-sizechart .sc-card {
	background: var(--void);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
}

/* ── unit toggle ────────────────────────────────────────────────────────── */
.bgw-sizechart .sc-units {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--field);
}
.bgw-sizechart .sc-units button {
	appearance: none;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 7px 15px;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}
.bgw-sizechart .sc-units button:hover { color: var(--ink); }
.bgw-sizechart .sc-units button[aria-pressed="true"] { background: var(--mint); color: #fff; }
.bgw-sizechart .sc-units button:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }

/* ── the finder ─────────────────────────────────────────────────────────── */
.bgw-sizechart .sc-finder { padding: 22px; }
.bgw-sizechart .sc-finder-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}
.bgw-sizechart .sc-finder-head h3 {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ink);
}
.bgw-sizechart .sc-inputs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.bgw-sizechart .sc-field label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 7px;
}
.bgw-sizechart .sc-inrow {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
}
.bgw-sizechart .sc-inrow:focus-within { border-color: var(--mint); }
.bgw-sizechart .sc-inrow input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	color: var(--ink);
	font: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	padding: 11px 0;
	font-variant-numeric: tabular-nums;
}
.bgw-sizechart .sc-inrow .unit {
	font-size: .8rem;
	color: var(--muted);
	white-space: nowrap;
}
.bgw-sizechart .sc-hint { margin: 14px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* ── the verdict ────────────────────────────────────────────────────────── */
.bgw-sizechart .sc-verdict {
	margin: 20px 0 0;
	padding: 20px 22px;
	border-left: 4px solid var(--mint);
	background: rgba(143, 179, 159, .10);
	border-radius: 0 8px 8px 0;
}
.bgw-sizechart .sc-verdict .who {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mint);
	margin: 0 0 6px;
}
.bgw-sizechart .sc-verdict .size {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
}
.bgw-sizechart .sc-verdict .why { margin: 8px 0 0; font-size: .93rem; line-height: 1.6; color: var(--ink); }
.bgw-sizechart .sc-verdict .band {
	display: inline-block;
	margin-top: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--mint);
	color: #fff;
}
.bgw-sizechart .sc-verdict.is-out { border-left-color: var(--rose); background: rgba(217, 143, 154, .12); }
.bgw-sizechart .sc-verdict.is-out .who { color: var(--rose); }
.bgw-sizechart .sc-verdict.is-out .band { background: var(--rose); }

/* ── the range-bar ladder ───────────────────────────────────────────────── */
.bgw-sizechart .sc-ladder { padding: 22px; margin-top: 20px; }
.bgw-sizechart .sc-ladder h3 {
	margin: 0 0 4px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ink);
}
.bgw-sizechart .sc-legend { margin: 0 0 20px; font-size: .85rem; color: var(--muted); line-height: 1.6; }

.bgw-sizechart .sc-rows { position: relative; }
.bgw-sizechart .sc-row {
	display: grid;
	grid-template-columns: 92px 1fr 104px;
	gap: 14px;
	align-items: center;
	padding: 6px 0;
}
.bgw-sizechart .sc-row .lbl {
	font-size: .85rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
.bgw-sizechart .sc-row .lbl small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }
.bgw-sizechart .sc-track {
	position: relative;
	height: 22px;
	background: rgba(255, 255, 255, .05);
	border-radius: 3px;
	overflow: hidden;
}
.bgw-sizechart .sc-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(143, 179, 159, .34);
	border-left: 2px solid var(--mint);
	border-right: 2px solid var(--mint);
	border-radius: 2px;
	transition: background .2s ease;
}
.bgw-sizechart .sc-row.is-hit .sc-bar { background: var(--mint); }
.bgw-sizechart .sc-row.is-hit .lbl { color: #fff; }
.bgw-sizechart .sc-row .rng {
	font-size: .8rem;
	color: var(--muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bgw-sizechart .sc-row.is-hit .rng { color: var(--ink); font-weight: 600; }

/* the baby's marker — a line through every bar */
.bgw-sizechart .sc-marker {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 2px;
	background: var(--amber);
	pointer-events: none;
	transition: left .25s ease, opacity .2s ease;
	z-index: 2;
}
.bgw-sizechart .sc-marker::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -4px;
	border: 5px solid transparent;
	border-top-color: var(--amber);
}
.bgw-sizechart .sc-axis {
	margin: 10px 0 0 106px;
	padding-right: 118px;
	display: flex;
	justify-content: space-between;
	font-size: .7rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ── brand bias scale ───────────────────────────────────────────────────────
   v2 — one ROW per brand on a shared axis.
   v1 absolutely-positioned 10 labels into one strip; long names wrapped and
   collided ("Burt's Bees Baby" over its neighbour, "Hanna Andersson" split).
   A row per brand cannot collide, stays scannable, and sorts small → large so
   the pattern is obvious at a glance.
   ─────────────────────────────────────────────────────────────────────────── */
.bgw-sizechart .sc-brands { padding: 22px; margin-top: 20px; }
.bgw-sizechart .sc-brands h3 {
	margin: 0 0 4px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ink);
}

.bgw-sizechart .sc-baxis {
	display: grid;
	grid-template-columns: 148px 1fr 104px;
	gap: 14px;
	margin: 20px 0 10px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.bgw-sizechart .sc-baxis span:nth-child(3) { text-align: right; }
.bgw-sizechart .sc-baxis .scale-lbl {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.bgw-sizechart .sc-baxis .scale-lbl b { font-weight: 700; }

.bgw-sizechart .sc-brow {
	display: grid;
	grid-template-columns: 148px 1fr 104px;
	gap: 14px;
	align-items: center;
	padding: 7px 0;
	border-top: 1px solid var(--line-s);
}
.bgw-sizechart .sc-brow:first-of-type { border-top: 0; }

.bgw-sizechart .sc-brow .nm {
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* the shared axis */
.bgw-sizechart .sc-brow .track {
	position: relative;
	height: 18px;
	background: rgba(255, 255, 255, .05);
	border-radius: 3px;
}
.bgw-sizechart .sc-brow .track::before {
	content: "";
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .18);
}
.bgw-sizechart .sc-brow .pip {
	position: absolute;
	top: 50%;
	width: 13px; height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--mint);
}
.bgw-sizechart .sc-brow[data-bias="-2"] .pip,
.bgw-sizechart .sc-brow[data-bias="-1"] .pip {
	background: var(--amber);
	box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--amber);
}
.bgw-sizechart .sc-brow[data-bias="1"] .pip,
.bgw-sizechart .sc-brow[data-bias="2"] .pip {
	background: #C9A9F0;
	box-shadow: 0 0 0 2px var(--void), 0 0 0 3px #C9A9F0;
}
.bgw-sizechart .sc-brow .td {
	font-size: .76rem;
	color: var(--muted);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 620px) {
	.bgw-sizechart .sc-baxis,
	.bgw-sizechart .sc-brow { grid-template-columns: 112px 1fr; }
	.bgw-sizechart .sc-baxis span:nth-child(3),
	.bgw-sizechart .sc-brow .td { display: none; }
}


/* brand notes list */
.bgw-sizechart .sc-bnote {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.bgw-sizechart .sc-bnote li {
	padding: 12px 0;
	border-bottom: 1px solid var(--line-s);
	font-size: .89rem;
	line-height: 1.6;
	color: var(--ink);
}
.bgw-sizechart .sc-bnote b { color: #fff; }

/* ── the full table ─────────────────────────────────────────────────────── */
.bgw-sizechart .sc-table { margin-top: 20px; overflow-x: auto; }
.bgw-sizechart table { width: 100%; border-collapse: collapse; min-width: 640px; }
.bgw-sizechart thead th {
	text-align: left;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink);
	background: rgba(255, 255, 255, .07);
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.bgw-sizechart tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--line-s);
	color: var(--ink);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}
.bgw-sizechart tbody tr:last-child td { border-bottom: 0; }
.bgw-sizechart tbody tr:hover { background: rgba(255, 255, 255, .055); }
.bgw-sizechart tbody td:first-child { font-weight: 700; color: #fff; }

/* ── buy link (house rule) ──────────────────────────────────────────────── */
.bgw-sizechart .fit-buy {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--mint);
	color: #fff;
	border: 1px solid var(--mint);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}
.bgw-sizechart .fit-buy:hover,
.bgw-sizechart .fit-buy:focus-visible {
	background: var(--mint-d);
	border-color: var(--mint-d);
	color: #fff;
	outline: none;
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.bgw-sizechart .sc-inputs { grid-template-columns: 1fr; }
	.bgw-sizechart .sc-row { grid-template-columns: 76px 1fr 88px; }
	.bgw-sizechart .sc-axis { margin-left: 90px; padding-right: 100px; }
	.bgw-sizechart .sc-pip { width: 92px; }
	.bgw-sizechart .sc-pip .nm { font-size: .72rem; }
}
@media (max-width: 560px) {
	.bgw-sizechart .sc-row { grid-template-columns: 64px 1fr; }
	.bgw-sizechart .sc-row .rng { grid-column: 2; text-align: left; }
	.bgw-sizechart .sc-axis { display: none; }
	.bgw-sizechart .sc-scale { padding-bottom: 90px; }
	.bgw-sizechart .sc-pip { position: static; transform: none; width: auto; text-align: left; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
	.bgw-sizechart .sc-pip .dot { margin: 0; }
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print {
	.bgw-sizechart .sc-units,
	.bgw-sizechart .fit-buy,
	.bgw-sizechart .bgw-noprint { display: none !important; }
	.bgw-sizechart .sc-card,
	.bgw-sizechart .sc-verdict,
	.bgw-sizechart .sc-track { background: #fff !important; }
	.bgw-sizechart .sc-card { border-color: #ccc !important; }
	.bgw-sizechart .sc-bar { background: #999 !important; border-color: #666 !important; }
	.bgw-sizechart .sc-row.is-hit .sc-bar { background: #333 !important; }
	.bgw-sizechart .sc-marker { background: #000 !important; }
	.bgw-sizechart .sc-marker::before { border-top-color: #000 !important; }
	.bgw-sizechart .sc-row,
	.bgw-sizechart .sc-bnote li,
	.bgw-sizechart tbody tr { break-inside: avoid; }
	.bgw-sizechart .lbl, .bgw-sizechart .rng, .bgw-sizechart .sc-verdict .size,
	.bgw-sizechart .sc-verdict .why, .bgw-sizechart .sc-bnote li,
	.bgw-sizechart tbody td, .bgw-sizechart thead th,
	.bgw-sizechart h3, .bgw-sizechart .sc-legend { color: #000 !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;
}