/* ============================================================================
   BabyGearWise — stroller carry-on checker
   ----------------------------------------------------------------------------
   Matches the car-seat fit calculator: light cream page, green table headers,
   badges, monospace figures. Every structural style comes from the shared
   .bgw-pseo stylesheet — this file only adds the calculator-specific bits.

   GREEN: rgb(143,179,159) ONLY. It is used as a FILL (table headers, badges,
   buttons, the scale bar) and never as text on a light background, because
   rgb(143,179,159) on cream is 2.30:1 and fails WCAG AA. Text stays ink.
   ========================================================================= */

.bgw-carryon {
  --mint: rgb(143,179,159);
  --mint-soft: rgba(143,179,159,.18);
  --mint-line: rgba(143,179,159,.45);
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── the tool card ──────────────────────────────────────────────────────── */
.bgw-carryon .tool-card {
  background:#fff; border:1px solid var(--hair); border-radius:4px;
  padding:28px 30px 30px; margin:0 0 22px;
}
.bgw-carryon .tool-card h2 { margin:0 0 6px; }
.bgw-carryon .tool-card .hint { margin:0 0 22px; color:var(--ink-soft); font-size:.95rem; }

/* ── inputs ─────────────────────────────────────────────────────────────── */
.bgw-carryon .fields { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:640px){
  .bgw-carryon .fields { grid-template-columns:1fr 1fr; }
  .bgw-carryon .fields .f3 { grid-column:span 2; }
}
.bgw-carryon label {
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 7px;
}
.bgw-carryon input[type=number] {
  width:100%; background:#fff; border:1px solid var(--hair); border-radius:3px;
  padding:13px 14px; color:var(--ink); font-size:1.1rem; font-family:var(--mono);
  -moz-appearance:textfield;
}
.bgw-carryon input[type=number]::-webkit-outer-spin-button,
.bgw-carryon input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bgw-carryon input[type=number]:focus {
  outline:none; border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-soft);
}

/* ── unit toggle ────────────────────────────────────────────────────────── */
.bgw-carryon .unit {
  display:inline-flex; margin:0 0 18px; border:1px solid var(--hair);
  border-radius:3px; overflow:hidden;
}
.bgw-carryon .unit button {
  background:#fff; border:0; color:var(--ink-soft); cursor:pointer;
  font-family:var(--sans); font-size:.82rem; font-weight:600; padding:8px 18px;
  transition: background .15s ease, color .15s ease;
}
.bgw-carryon .unit button + button { border-left:1px solid var(--hair); }
.bgw-carryon .unit button:hover {
  background: var(--mint-soft); color: var(--ink);
}
.bgw-carryon .unit button:focus-visible {
  outline:2px solid var(--mint); outline-offset:-2px;
}
.bgw-carryon .unit button[aria-pressed=true] {
  background:var(--mint); color:var(--ink); font-weight:700;
}
.bgw-carryon .unit button[aria-pressed=true]:hover {
  background: var(--mint); color: var(--ink);   /* already selected — stays put */
}

/* ── verdict — fill colour, never green text ────────────────────────────── */
.bgw-carryon .verdict {
  display:none; margin:26px 0 0; border:1px solid var(--hair);
  border-left:4px solid var(--ink); border-radius:4px;
  background:var(--cream); padding:20px 22px;
}
.bgw-carryon .verdict.show { display:block; }
.bgw-carryon .verdict .big {
  margin:0 0 8px; font-size:1.35rem; font-weight:700; color:var(--ink);
  letter-spacing:-.01em;
}
.bgw-carryon .verdict p { margin:0 0 7px; color:var(--ink-soft); }
.bgw-carryon .verdict p:last-child { margin-bottom:0; }
.bgw-carryon .verdict.ok   { border-left-color:var(--mint); background:var(--mint-soft); }
.bgw-carryon .verdict.edge { border-left-color:var(--sand); background:var(--sand); }
.bgw-carryon .verdict.no   { border-left-color:var(--rose); background:#FBEEF0; }

/* ── scale bar: your stroller drawn against the envelope ────────────────── */
.bgw-carryon .scale { margin:22px 0 8px; }
.bgw-carryon .scale .cap {
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px;
}
.bgw-carryon .scale .track {
  position:relative; height:38px; background:var(--cream);
  border:1px solid var(--hair); border-radius:3px; overflow:hidden;
}
.bgw-carryon .scale .env {
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--mint-soft); border-right:2px dashed var(--mint-line);
  transition:width .18s ease;
}
.bgw-carryon .scale .bar {
  position:absolute; inset:6px auto 6px 0; width:0; border-radius:2px;
  background:var(--ink); transition:width .18s ease;
}
.bgw-carryon .scale .bar.over { background:var(--rose); }
.bgw-carryon .scale .legend {
  display:flex; gap:20px; flex-wrap:wrap; margin:9px 0 0;
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft);
}
.bgw-carryon .scale .legend i { font-style:normal; }
.bgw-carryon .scale .key { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; }
.bgw-carryon .scale .key.k1 { background:var(--ink); }
.bgw-carryon .scale .key.k2 { background:var(--mint); }

/* ── numbers in tables read as figures, like the fit calculator ─────────── */
.bgw-carryon table td.dim,
.bgw-carryon table th.dim { font-family:var(--mono); white-space:nowrap; }
.bgw-carryon table td.dim { font-weight:600; color:var(--ink); }
.bgw-carryon .pill {
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:20px;
  background:var(--sand); color:var(--ink); white-space:nowrap;
}
.bgw-carryon .pill.y { background:var(--mint); color:var(--ink); }
.bgw-carryon .pill.n { background:var(--sand); color:var(--ink-soft); }
.bgw-carryon .src { font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK TOOL CARD — /stroller-carry-on-checker/   (#2697)

   Same treatment as the bassinet tool: the card gets rgb(43,42,40), the page
   around it is untouched. The card redefines the palette variables, so the
   rules above (which already use var(--ink), var(--hair), var(--cream)…)
   flip inside it automatically.

   SCOPE: every rule below starts with .bgw-carryon .tool-card
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-carryon .tool-card {
  --ink: #F7F2EA;                        /* text — was page ink */
  --ink-soft: rgba(247,242,234,.68);
  --hair: rgba(255,255,255,.10);
  --sand: rgba(255,255,255,.07);
  --cream: rgba(255,255,255,.05);        /* used as a panel fill */
  --field: rgba(255,255,255,.06);
  --rose: #D98F9A;                       /* lifted for dark — was #A04858 */
  --mint: rgb(143,179,159);              /* brand green: unchanged */
  --mint-soft: rgba(143,179,159,.20);
  --mint-line: rgba(143,179,159,.45);
  --on-mint: #23301F;                    /* dark text on mint — was ink, 2.2:1 as white */

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

/* the unit toggle hard-codes a white button face */
.bgw-carryon .tool-card .unit { background: var(--field); }
.bgw-carryon .tool-card .unit button { background: transparent; color: var(--ink-soft); }
.bgw-carryon .tool-card .unit button:hover { background: var(--mint-soft); color: var(--ink); }
.bgw-carryon .tool-card .unit button + button { border-left-color: var(--hair); }
.bgw-carryon .tool-card .unit button[aria-pressed=true],
.bgw-carryon .tool-card .unit button[aria-pressed=true]:hover {
  background: var(--mint);
  color: var(--on-mint);                 /* dark on mint reads ~7:1 */
}

/* inputs hard-code background:#fff */
.bgw-carryon .tool-card input[type=number] {
  background: var(--field);
  color: var(--ink);
}
.bgw-carryon .tool-card input[type=number]::placeholder { color: rgba(247,242,234,.34); }

/* scale bar sits on the dark card */
.bgw-carryon .tool-card .scale .track { background: rgba(255,255,255,.07); }
.bgw-carryon .tool-card .scale .bar { background: var(--ink); }
.bgw-carryon .tool-card .scale .bar.over { background: var(--rose); }
.bgw-carryon .tool-card .scale .key.k1 { background: var(--ink); }

/* verdict — the "no" state was a light pink #FBEEF0 */
.bgw-carryon .tool-card .verdict { background: rgba(255,255,255,.05); }
.bgw-carryon .tool-card .verdict.ok   { background: rgba(143,179,159,.16); border-left-color: var(--mint); }
.bgw-carryon .tool-card .verdict.edge { background: rgba(255,255,255,.07); }
.bgw-carryon .tool-card .verdict.no   { background: rgba(217,143,154,.16); border-left-color: var(--rose); }

/* ── COLOR INHERITANCE FIX ────────────────────────────────────────────────
   See bgw-bassinet.css. Redefining the palette vars inside the card does not
   change inherited colour, so anything without its own colour would inherit
   the page's dark ink and disappear on the dark card. */
.bgw-carryon .tool-card { color: var(--ink); }
.bgw-carryon .tool-card p { color: var(--ink-soft); }
.bgw-carryon .tool-card strong { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE — buy links in the "strollers that fold down small" section

   .fit-buy is styled in bgw-fit.css, which loads only on the fit page, so the
   carry-on page needs its own copy of the rule.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-pseo .fit-buy,
.bgw-carryon .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-carryon .fit-buy:hover,
.bgw-carryon .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-carryon .fit-buy-cell { white-space: nowrap; text-align: right; }

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