/* Corpay brand palette (pulled from corpay.com 2026-08-07): primary crimson #be1549
   (their --bs-primary), bright accent #e7004c, warm off-white #f7f6f5, ink #212529/#121212,
   muted plum-grey #6b6166, border #e6e8e7, success #198754, red #dc3545. */
:root {
  --bg: #f7f6f5; --panel: #fff; --border: #e6e8e7; --text: #212529; --muted: #6b6166;
  /* Warnings/errors = classic red (Ryan 2026-08-10). To keep them distinct, HEADINGS use
     the non-red Corpay ink (--heading) instead of crimson — crimson stays for actions. */
  --accent: #be1549; --heading: #121212; --danger: #dc3545; --warn: #8a5a00; --warn-bg: #fff6e0;
  --ok-bg: #e9f7ef; --ok: #198754;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --panel: #1e1a1c; --border: #3d3438; --text: #f7f6f5; --muted: #a89fa4;
    --accent: #e7004c; --heading: #f7f6f5; --danger: #ff6b70; --warn-bg: #2a2410; --ok-bg: #10261a; }
}

/* Corpay logo: the wordmark color is baked into each SVG, so swap files per theme. */
.brand-logo { height: 26px; vertical-align: middle; margin-right: 12px; }
.brand-logo.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand-logo.on-light { display: none; }
  .brand-logo.on-dark { display: inline; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); }
header { padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--panel); }
header h1 { font-size: 18px; margin: 0; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
main { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(300px, 390px); gap: 16px;
  padding: 12px 20px; max-width: 1440px; margin: 0 auto; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 7px; padding: 7px 14px;
  background: var(--panel); }
legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: var(--heading); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 120px; }
.field label { font-size: 12px; color: var(--muted); }
input, select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg); color: var(--text); font-size: 13px; }
.checkbox-row { display: flex; align-items: center; gap: 6px; }
button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; }
button:hover { opacity: 0.9; }
#results { position: sticky; top: 20px; align-self: start; }
.panel { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 12px 14px; margin-bottom: 10px; }
.panel h2 { font-size: 14px; margin: 0 0 10px; }
.kv { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12.5px;
  border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: none; }
.kv .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.banner { border-radius: 8px; padding: 8px 11px; font-size: 12px; margin-bottom: 10px; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.error { background: rgba(220, 53, 69, 0.10); color: var(--danger);
  border: 1px solid var(--danger); font-weight: 600; }

/* Live spend-allocation validation under the CSR/mix fields — appears the moment the
   percentages are off, in red. */
.mix-error { display: none; color: var(--danger); font-size: 12.5px; font-weight: 600;
  margin: 2px 0 8px; }
.mix-error.show { display: block; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.approver { font-size: 16px; font-weight: 700; }
.approver.none { color: var(--ok); }
.approver.required { color: var(--danger); }
.placeholder { color: var(--muted); font-size: 13px; }
small.hint { color: var(--muted); }

/* The workbook greys out sections that don't apply to the chosen product (Input!BC19/BD18
   etc.). For a web form that's confusing, so we HIDE them entirely instead — the engine
   zeroes any wrong-section input anyway, so the result is identical and the user only sees
   fields that actually apply. */
.section-hidden { display: none !important; }
[data-hidden-note] { display: none; }

/* Collapsible sections — optional steps fold to a single header line so the default
   view is just the required core. Click the legend to open/close. */
fieldset.collapsible legend { cursor: pointer; user-select: none; }
fieldset.collapsible legend::before { content: "▾ "; color: var(--muted); font-size: 11px; }
fieldset.collapsible.collapsed legend::before { content: "▸ "; }
fieldset.collapsible.collapsed > :not(legend) { display: none; }
fieldset.collapsible.collapsed { padding-bottom: 4px; }
fieldset.collapsible.collapsed .step-desc { display: none; }

/* Inline sub-folds inside a section (e.g. "More mix options" under Spend). */
.subfold-head { cursor: pointer; user-select: none; font-size: 12.5px; color: var(--heading);
  font-weight: 600; margin: 2px 0 6px; display: inline-block; text-decoration: underline dotted; text-underline-offset: 3px; }
.subfold-head::before { content: "▸ "; font-size: 11px; }
.subfold.open > .subfold-head::before { content: "▾ "; }
.subfold > .subfold-body { display: none; }
.subfold.open > .subfold-body { display: block; }

/* Required-field marker and "optional" section tag. */
.req { color: var(--danger); margin-left: 2px; }
.optional-tag { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 8px; margin-left: 8px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
/* Plain-language one-liner under a step legend. */
.step-desc { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* The "what you'll fill out" summary that reacts to the Product choice. */
#product-summary { margin-top: 8px; font-size: 13px; color: var(--muted); }
#product-summary b { color: var(--text, inherit); font-weight: 600; }

/* Give-vs-Retain sub-rows: only one is ever valid per Instructions ("Do not have a
   value in both cells"), so these fully hide rather than just dim. */
[data-show-for-structure] { display: none; }
[data-show-for-structure].structure-active { display: flex; }

/* Reference tables (Rebate Book Rates, Fee Tiers) */
#reference-tables .panel { margin-bottom: 8px; padding: 8px 14px; }
.ref-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.ref-table-wrap h3 { font-size: 13px; margin: 0 0 6px; color: var(--heading); }
table.ref { border-collapse: collapse; width: 100%; font-size: 12px; }
table.ref th, table.ref td { border: 1px solid var(--border); padding: 4px 8px; text-align: right; white-space: nowrap; }
table.ref th { background: var(--bg); text-align: center; }
table.ref td:first-child, table.ref th:first-child { text-align: left; }

/* Drag & drop target for supporting documents (2026-08-18) */
#docs-fieldset.dragover { outline: 2px dashed var(--primary, #be1549); outline-offset: -4px; background: var(--bg); }

/* Section 2 mix options are always expanded (2026-08-19 — no more fold). */
.mix-more { margin-top: 6px; }
.mix-more-head { font-size: 12.5px; color: var(--heading); font-weight: 600; margin: 2px 0 2px; }

/* Economics tables (tier/mix sensitivity, 2026-08-20): the results column is ~390px and
   table.ref cells are nowrap — 7 money columns overflowed the panel. Compact variant +
   a scroll container: tight cells, wrap-allowed first column, horizontal scroll INSIDE
   the panel as the safety valve. */
.table-scroll { overflow-x: auto; max-width: 100%; }
table.ref.econ { font-size: 11px; }
table.ref.econ th, table.ref.econ td { padding: 3px 3px; }
table.ref.econ td:first-child, table.ref.econ th:first-child { white-space: normal; min-width: 64px; }