/* ═══════════════════════════════════════════════════════════════════════════
   DARK TOOL CARD — /car-seat-fit-calculator/   (#2649)

   The fit calculator's card styles live in the SHARED bgw-pseo.css, so this
   file exists to avoid touching that file at all. It is enqueued ONLY on the
   fit page (see bgw-fit.php) at priority 100, i.e. after bgw-pseo.css.

   The card is `.fit-panel`. Redefining the palette variables inside it flips
   every .fit-* rule at once, because they all consume var(--…).

   SCOPE: every rule starts with .bgw-pseo .fit-panel
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-pseo .fit-panel {
	/* palette redefined for everything inside the card */
	--ink: #F7F2EA;
	--ink-soft: rgba(247, 242, 234, .68);
	--hair: rgba(255, 255, 255, .12);
	--cream: rgba(255, 255, 255, .05);
	--sand: rgba(255, 255, 255, .07);
	--sage: rgb(143, 179, 159);          /* brand green — unchanged */
	--sage-dark: rgb(143, 179, 159);
	--rose: #D98F9A;                     /* lifted from #A04858 for dark legibility */
	--on-mint: #23301F;                  /* dark text on mint — was #fff, only 2.2:1 */

	background: rgb(43, 42, 40);
	border-color: rgba(255, 255, 255, .12);

	/* CRITICAL: redefining --ink above does NOT change inherited text colour.
	   `.bgw-pseo` sets color:var(--ink) with ITS OWN (dark) value, and table
	   cells (.bgw-pseo tbody td) set no colour of their own — so without this
	   line every cell inherits the dark ink and vanishes on the dark panel. */
	color: var(--ink);
}

/* table cells inside the panel — full-strength text, not grey */
.bgw-pseo .fit-panel tbody td { color: var(--ink); }
.bgw-pseo .fit-panel tbody th { color: var(--ink); }
.bgw-pseo .fit-panel td .pick { color: var(--ink); }
/* out-of-range rows: were a hard-coded #9A948C, then 52% — now full ink */
.bgw-pseo .fit-panel tbody tr.is-out td { color: var(--ink); }
/* the grey chip was #EDE9E3 bg / #9A948C text */
.bgw-pseo .fit-panel .chip.grey {
	background: rgba(255, 255, 255, .08);
	color: var(--ink);
}
/* the amber warning chip is a LIGHT chip — keep it, but soften for dark */
.bgw-pseo .fit-panel .chip.warn { background: #E3D3A2; color: #4A3D14; }
/* paragraphs and the intro line above each table — was 68% grey */
.bgw-pseo .fit-panel p { color: var(--ink); }
.bgw-pseo .fit-panel .fit-sub { color: var(--ink); }
.bgw-pseo .fit-panel strong { color: var(--ink); }

/* the number input hard-codes a white face and a warm grey border */
.bgw-pseo .fit-panel .fit-input {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: var(--ink);
}
.bgw-pseo .fit-panel .fit-input::placeholder { color: rgba(247, 242, 234, .34); }

/* preset chips: the selected one keeps white text, as in the original */
.bgw-pseo .fit-panel .fit-presets button:hover {
	background: var(--sage);
	color: rgb(43, 42, 40);   /* mint is LIGHT — dark text */
	border-color: var(--sage);
}
.bgw-pseo .fit-panel .fit-presets button.on {
	background: var(--sage);
	color: #fff;
	border-color: var(--sage);
}

/* helper text was a mid-grey that disappears on dark */
.bgw-pseo .fit-panel .fit-hint { color: rgba(247, 242, 234, .58); }
.bgw-pseo .fit-panel .fit-note { color: rgba(247, 242, 234, .58); }

/* scale bar: seat labels keep white text, as in the original */
.bgw-pseo .fit-panel .fit-track { background: rgba(255, 255, 255, .07); }
.bgw-pseo .fit-panel .fit-seat { border-right-color: rgba(43, 42, 40, .55); }
.bgw-pseo .fit-panel .fit-seat span { color: rgb(43, 42, 40); }
.bgw-pseo .fit-panel .fit-seat.over span { color: rgb(43, 42, 40); }

/* the bench line sat in ink; on a dark track it must be light */
.bgw-pseo .fit-panel .fit-benchline { background: var(--ink); }

/* overflow hatch used baked-in rgba(160,72,88,…) */
.bgw-pseo .fit-panel .fit-overflow {
	background: repeating-linear-gradient(45deg,
		rgba(217, 143, 154, .40), rgba(217, 143, 154, .40) 6px,
		rgba(217, 143, 154, .18), rgba(217, 143, 154, .18) 12px);
	border-left-color: var(--rose);
}

/* verdict: mint reads ~7:1 on dark; rose needed lifting */
.bgw-pseo .fit-panel .fit-verdict.good { color: rgb(160, 199, 178); }
.bgw-pseo .fit-panel .fit-verdict.bad  { color: var(--rose); }

/* the "I won't guess" refusal box */
.bgw-pseo .fit-panel .fit-refuse {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	border-left-color: rgba(143, 179, 159, .55);
}

/* chips rendered inside the panel.
   The rose and mint badges keep WHITE text, as in the original light design.
   (White on rgb(143,179,159) is only ~2.2:1 — below AA — but it is the
   established look on this site for these badges, so it is preserved.) */
.bgw-pseo .fit-panel .chip { background: rgba(255, 255, 255, .07); color: var(--ink); }
.bgw-pseo .fit-panel .chip.ok { background: var(--sage); color: rgb(43, 42, 40); }
.bgw-pseo .fit-panel .chip.bad { background: var(--rose); color: rgb(43, 42, 40); }
.bgw-pseo .fit-panel .chip.grey {
	background: rgba(255, 255, 255, .08);
	color: rgba(247, 242, 234, .62);
}

/* table headers: the shared rule uses a 68% tint. Full ink on the dark panel. */
.bgw-pseo .fit-panel thead th,
.bgw-pseo .fit-panel tbody th { color: var(--ink); }
/* helper text under the inputs */
.bgw-pseo .fit-panel .fit-hint,
.bgw-pseo .fit-panel .fit-note { color: var(--ink); }
.bgw-pseo .fit-panel .fit-field label { color: var(--ink); }
.bgw-pseo .fit-panel .fit-scale-label { color: var(--ink); }
.bgw-pseo .fit-panel .fit-unit { color: var(--ink); }
/* the refusal box text */
.bgw-pseo .fit-panel .fit-refuse { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE — buy links inside the dark panel

   The reader has just entered their bench width and been told which seats
   clear it. These links are the action they want next.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-pseo .fit-panel .fit-buy-cell { white-space: nowrap; text-align: right; }

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

/* the recommendation strip above the results table */
.bgw-pseo .fit-panel .fit-buybox {
	margin: 18px 0 22px;
	padding: 18px 20px;
	border-radius: 4px;
	background: rgba(143, 179, 159, .10);
	border: 1px solid rgba(143, 179, 159, .34);
	border-left: 4px solid var(--sage);
}
.bgw-pseo .fit-panel .fit-buybox-head {
	margin: 0 0 12px;
	font-weight: 700;
	color: var(--ink);
	font-size: .95rem;
}
.bgw-pseo .fit-panel .fit-buybox ul { margin: 0; padding: 0; list-style: none; }
.bgw-pseo .fit-panel .fit-buybox li { margin: 0 0 8px; }
.bgw-pseo .fit-panel .fit-buybox li:last-child { margin-bottom: 0; }
.bgw-pseo .fit-panel .fit-buybox .fit-buy { width: 100%; box-sizing: border-box; text-align: left; }
.bgw-pseo .fit-panel .fit-buybox-foot {
	margin: 12px 0 0;
	font-size: .84rem;
	color: var(--ink);
	opacity: .8;
}
.bgw-pseo .fit-panel .fit-buybox-foot a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* the "why" text in the rear-facing table — was an inline #8A8580 */
.bgw-pseo .fit-panel .fit-why { color: var(--ink); font-size: .84rem; opacity: .8; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   THE DATA TABLE — "Every dimension, and where it came from"

   This table sits OUTSIDE .fit-panel (it is a .table-card), so it never
   inherited the dark treatment. bgw-fit.css loads only on this page, so these
   rules are already page-scoped — no body class needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-pseo .table-card {
	background: rgb(43, 42, 40);
	border-color: rgba(255, 255, 255, .12);
	color: #F7F2EA;
}
.bgw-pseo .table-card table { color: #F7F2EA; }
.bgw-pseo .table-card thead th {
	background: rgba(255, 255, 255, .07);
	color: #F7F2EA;
	border-bottom-color: rgba(255, 255, 255, .10);
}
.bgw-pseo .table-card tbody td {
	color: #F7F2EA;
	border-top-color: rgba(255, 255, 255, .08);
}
.bgw-pseo .table-card tbody tr:hover { background: rgba(255, 255, 255, .04); }
.bgw-pseo .table-card strong { color: #F7F2EA; }
.bgw-pseo .table-card td.n { font-variant-numeric: tabular-nums; }
.bgw-pseo .table-card .chip.grey {
	background: rgba(255, 255, 255, .08);
	color: #F7F2EA;
}

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

@media (max-width: 760px) {
	.bgw-pseo .table-card .fit-buy-cell { white-space: normal; }
	.bgw-pseo .table-card .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-pseo .fit-panel tbody tr:hover { background: rgba(255, 255, 255, .06); }
.bgw-pseo .fit-panel tbody tr:hover td { background: transparent; }
.bgw-pseo .fit-panel .fit-buy-cell { background: transparent; }

/* ── 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-pseo .table-card tbody tr:hover { background: rgba(255, 255, 255, .06); }
.bgw-pseo .table-card tbody tr:hover td { background: transparent; }
.bgw-pseo .table-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;
}


/* the reason-to-compare line next to each buy button */
.bgw-pseo .fit-buybox .fit-why {
	color: rgba(247, 242, 234, .80);
	font-style: normal;
}
.bgw-pseo .fit-buybox li { margin-bottom: .5rem; }

/* ============================================================================
   #dataNote — the "Verified <date>" line and the manufacturer sources list.

   Both existing .fit-note rules in this sheet are scoped ".. .fit-panel .fit-note",
   but #dataNote is NOT inside .fit-panel — it sits directly in the section. So it
   fell through to the theme's muted grey and measured 3.65:1 on white.

   Scoped to #dataNote ONLY. An earlier attempt used "#data, #data p, #data li,
   #data strong" which also caught the DARK dimension table inside #data and
   measured 1.49:1 there. A colour rule must belong to one background context.
   ========================================================================= */
.bgw-pseo #dataNote,
.bgw-pseo #dataNote strong,
.bgw-pseo #dataNote li { color: rgb(74, 68, 62); }

.bgw-pseo #dataNote a { color: rgb(74, 106, 89); }

/* it is a <p> holding a <ul>, which is invalid nesting — render it as a block */
.bgw-pseo #dataNote ul { margin: .5rem 0 0 1.1rem; }
.bgw-pseo #dataNote li { margin-bottom: .25rem; }