/* SG Motorhub COE comparison tool — internal team UI.
 *
 * Chrome follows the client-ratified direction (see
 * docs/design/design-brief-comparison-calculator.md): landing-page idiom —
 * white canvas, light-grey curve boxes, pill chips, ink text, brand red only
 * as an accent. Green and red are SIGNALS, never decoration: green marks the
 * figures that are genuinely better, red the ones that are worse.
 *
 * "Less trashy" is a rule here, not a mood: at most two filled-emphasis
 * elements per card, no gradients, no black bars, generous spacing.
 */

:root {
  --ink: #1B2333;
  --muted: #8F95A0;
  --panel: #EEEEEE;
  --panel-soft: #FAFBFC;
  --border: #D3E5EE;
  --brand: #FF1313;
  --brand-hover: #C90E0E;

  --good: #0F7A50;
  --good-bg: #EAF5EF;
  --good-border: #C6E3D5;

  --bad: #C0271F;

  --warn: #8A6200;
  --warn-bg: #FFF8EC;
  --warn-border: #E0C48C;

  --radius-card: 24px;
  --radius-field: 16px;
  --radius-pill: 999px;

  --gap: 1rem;
  --shadow-card: 0 1px 3px rgba(27, 35, 51, .06), 0 8px 24px rgba(27, 35, 51, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 1rem 3rem;
  background: #fff;
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.wrap { max-width: 44rem; margin: 0 auto; }

/* ---------- header ---------- */

.masthead {
  display: flex;
  /* center, not baseline: the wordmark became an <img>, which has no text
     baseline, so baseline alignment dropped the tag to the image's bottom. */
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.25rem;
}

.wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.wordmark .sg { color: var(--brand); }

/* Real brand logo (1560x375) in the masthead. */
.wordmark-img { height: 30px; width: auto; display: block; }

.masthead .tag {
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- PQP line ---------- */

.pqp {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: .7rem 1rem;
  margin-bottom: var(--gap);
  font-size: .95rem;
}

.pqp strong { font-size: 1.05rem; }
.pqp .month { color: var(--muted); }

.error {
  background: #FFF3F2;
  border: 1px solid #F3C7C4;
  color: var(--bad);
  border-radius: var(--radius-field);
  padding: .75rem 1rem;
  margin-bottom: var(--gap);
  font-size: .9rem;
}

/* ---------- cards & form ---------- */

.card {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.15rem 1.25rem;
  margin-bottom: var(--gap);
}

.card > h2 {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.field { margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field > .label {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: .35rem;
}

.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: .6rem .8rem;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field input:disabled,
.field select:disabled { background: var(--panel); color: var(--muted); }

/* Selects styled as pill chips — the control stays a <select> so the JS
 * id/event contract is untouched. */
.field.pill select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-pill);
  padding-right: 2.2rem;
  font-weight: 600;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; }

/* ---------- results ---------- */

#result { margin-top: 1.5rem; }

/* Safety valve: a three-column money table on a 360px phone is tight. It
 * scrolls inside its own container rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.compare th,
.compare td {
  padding: .6rem .85rem;
  text-align: right;
  font-size: .95rem;
  border-bottom: 1px solid #F1F5F8;
}

.compare thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--panel-soft);
}

.compare th:first-child,
.compare td:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
  font-weight: 700;
  font-size: 1rem;
  background: var(--panel-soft);
}

.compare .hero td { font-size: 1.15rem; font-weight: 700; }

/* Engine-authored context line under the interest row. */
.compare .int-note {
  font-size: .78rem;
  color: var(--muted);
  text-align: left;
  font-weight: 400;
}

/* Green = genuinely better, red = worse. Applied by JS per column. */
.good { color: var(--good); font-weight: 700; }
.bad { color: var(--bad); font-weight: 700; }

.meta {
  margin: .6rem .2rem 0;
  font-size: .82rem;
  color: var(--muted);
}

/* ---------- verdict ---------- */

.verdict {
  margin-top: 1rem;
  border-radius: var(--radius-card);
  padding: .95rem 1.1rem;
  font-weight: 600;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.verdict .mark { font-size: 1.15rem; line-height: 1.3; }

.verdict-win {
  background: var(--good-bg);
  border: 1px solid var(--good-border);
  color: var(--good);
}

.verdict-lose {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--ink);
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.chip {
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: .3rem .75rem;
  background: var(--good-bg);
  border: 1px solid var(--good-border);
  color: var(--good);
}

.warn {
  margin-top: .75rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  border-radius: var(--radius-field);
  padding: .7rem .9rem;
  font-size: .88rem;
}

/* ---------- actions ---------- */

.actions { margin-top: 1.25rem; }

.btn {
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-pill);
  padding: .85rem 1rem;
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: var(--brand-hover); }

/* In-card verdict pill: flips with the arithmetic while the user types. */
.offer-status {
  margin: .25rem 0 .75rem;
  padding: .5rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 600;
}
.offer-status.win { background: rgba(18, 135, 74, .12); color: var(--good); }
.offer-status.lose { background: rgba(217, 43, 43, .1); color: var(--bad); }

/* Rebate solver: input + button side by side; button sized to its label. */
.solver-row { display: flex; gap: .5rem; align-items: stretch; }
.solver-row input { flex: 1; min-width: 0; }
.btn-suggest { width: auto; font-size: .85rem; padding: .5rem .9rem; white-space: nowrap; }
.btn:disabled { background: var(--panel); color: var(--muted); cursor: default; }

/* ---------- login ---------- */

.login { max-width: 22rem; margin: 12vh auto 0; }
.login p { color: var(--muted); font-size: .92rem; }

/* Narrow phones: tighten the table so all three columns fit the content box
 * without the right-hand figures touching the screen edge. */
@media (max-width: 430px) {
  body { padding-left: .75rem; padding-right: .75rem; }

  .compare th,
  .compare td { padding: .55rem .5rem; font-size: .86rem; }

  .compare thead th { font-size: .7rem; letter-spacing: .03em; }

  .compare td:first-child,
  .compare th:first-child { font-size: .8rem; }

  .compare .hero td { font-size: 1rem; }

  .compare tbody tr:last-child th,
  .compare tbody tr:last-child td { font-size: .9rem; }
}

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .wrap { max-width: 60rem; }
  .columns { display: grid; grid-template-columns: 22rem 1fr; gap: 1.5rem; align-items: start; }
  #result { margin-top: 0; }
  body { padding-top: 2rem; }
}

/* ---------- quote mode (Cat C) ----------
   Commercial vehicles get no rebate, so there is no second product to compare
   against. The standard-loan column and every comparison-only control are
   removed rather than blanked - an empty column reads as missing data. */
.quote-mode .col-std,
.quote-mode [data-comparison-only] { display: none; }