/* ═══════════════════════════════════════════════════════════════════════════
   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: #6E6A64; }
.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; }


/* ── the buy cell must wrap at the site's mobile breakpoint ──────────────────
   `white-space: nowrap` above cannot wrap, so the cell dictates the table's
   width — 641px inside a 390px viewport. The override that relaxes it lived in
   a max-width:760px block while every other mobile rule here switches at 1024px,
   so between 761 and 1024 the table overflowed with its scroll escape already
   removed by the responsive block in bgw-pseo.css. Same breakpoint as everything
   else, so the whole tool template switches together. */
@media (max-width:1024px){
  .bgw-pseo .table-card .fit-buy-cell{white-space:normal;text-align:right}
  .bgw-pseo .table-card td.n,
  .bgw-pseo .table-card th.n{white-space:normal}
}