/* Taylor Tire retail — the two calculators
   (/tire-size-calculator, /wheel-size-calculator). Page-scoped via
   retail_header(['stylesheets' => ['assets/calc.css']]).
   Colour convention on both pages: size/group 1 (current, OEM) = orange,
   size/group 2 (new) = blue — the same pair the Will They Fit canvas uses
   (#FF710D / #008EF2), so the table and the diagram read as one thing. */

.calc-intro { max-width: 68ch; font-size: 17px; color: #33404d; margin: 0 0 22px; }
.calc { display: flex; flex-direction: column; gap: 20px; }
.calc-h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 22px; margin: 0 0 4px; color: var(--blue-ink);
}
.calc-hint { margin: 0 0 14px; color: var(--ink-soft); font-size: 14.5px; }
.calc-linkbtn {
  background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline;
  font: inherit; font-size: 14px; cursor: pointer;
}
.calc-linkbtn:hover { color: var(--blue-deep); }

/* ---- vehicle picker ---- */
.calc-vehicle {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 16px; box-shadow: var(--shadow); border-top: 3px solid var(--blue);
}
.calc-vehicle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.calc-vehicle-status { margin: 12px 0 0; font-size: 14.5px; color: var(--ok); font-weight: 600; }
.calc-vehicle-status.is-error { color: var(--danger); }
.calc-vehicle-status.is-info { color: var(--ink-soft); }
.calc-vehicle [data-vehicle-clear] { margin-top: 6px; }

/* ---- controls row ---- */
.calc-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.calc-stagger { display: inline-flex; gap: 9px; align-items: center; font-weight: 600; font-size: 15px; cursor: pointer; }
.calc-stagger input { width: 18px; height: 18px; accent-color: var(--blue); }
.calc-units { display: inline-flex; border: 1px solid var(--line-blue); border-radius: 8px; overflow: hidden; margin-left: auto; }
.calc-units button {
  border: 0; background: var(--paper); padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.calc-units button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* ---- axle block ---- */
.calc-axle {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 22px; box-shadow: var(--shadow);
}
.calc-axle-title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 21px; margin: 0 0 12px; color: var(--blue);
}
.calc-axle-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 30px; align-items: start; }
.calc-axle-grid-wheel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.calc-inputs { min-width: 0; }

.calc-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 14px; margin: 0 0 12px; min-width: 0; }
.calc-group legend {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-weight: 700; font-size: 14.5px; padding: 0 6px; color: var(--blue-ink);
}
.calc-group[data-group="1"] { border-color: #f6c9a8; }
.calc-group[data-group="1"] legend { color: #c2410c; }
.calc-group[data-group="2"] { border-color: #b6dcf5; }
.calc-group[data-group="2"] legend { color: #0369a1; }

.calc-size-row { display: flex; align-items: flex-end; gap: 8px; }
.calc-size-row label, .calc-wheel-row label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.calc-size-row label span, .calc-wheel-row label span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.calc-size-row input, .calc-wheel-row input {
  font: inherit; font-size: 18px; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid #c6d0da; border-radius: 8px;
  padding: 9px 10px; width: 100%; min-width: 0; text-align: center;
  -moz-appearance: textfield;
}
.calc-size-row input::-webkit-outer-spin-button, .calc-size-row input::-webkit-inner-spin-button,
.calc-wheel-row input::-webkit-outer-spin-button, .calc-wheel-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-size-row input:focus, .calc-wheel-row input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.calc-sep { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink-soft); padding-bottom: 9px; }
.calc-wheel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.calc-wheel-row-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.calc-oem-info { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.calc-oem-info b { color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.calc-oem-sep { margin: 0 6px; }

/* ---- comparison table ---- */
.calc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 4px; }
.calc-table th, .calc-table td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.calc-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink-soft); white-space: normal; }
.calc-table thead th {
  border-top: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 14px; color: var(--ink-soft); padding-bottom: 4px;
}
.calc-table thead th.calc-col-1 { color: #c2410c; }
.calc-table thead th.calc-col-2 { color: #0369a1; }
.calc-table td[data-cell$=".2"] { font-weight: 700; }
.calc-table td[data-cell$=".delta"] { color: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; }
.calc-table td.is-warn { color: var(--danger); font-weight: 700; }
.calc-table td.is-ok { color: var(--ok); }

.calc-note { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--ok); }
.calc-note.is-warn { color: var(--danger); }
.calc-note.is-hint { color: var(--ink-soft); font-weight: 500; }

/* ---- visuals ---- */
.calc-visual { min-width: 0; }
.calc-visual h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 17px; margin: 0 0 8px; color: var(--blue-ink);
}
.calc-visual h3 small {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--ink-soft); font-size: 13px; margin-left: 8px;
}
.calc-visual svg { width: 100%; height: auto; display: block; background: var(--porcelain); border-radius: 8px; }
.calc-visual svg text { font-family: var(--font-body); }
.calc-visual svg .calc-svg-dim { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
.calc-visual svg .calc-svg-cap { font-size: 12px; fill: var(--ink-soft); }
.calc-visual svg .calc-svg-num { font-family: var(--font-display); font-size: 34px; font-weight: 700; fill: #fff; }
.calc-visual canvas { max-width: 100%; height: auto; display: block; margin: 0 auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.calc-visual-wheel { position: sticky; top: 90px; }
.calc-diagram-note { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; }

.calc-speedo-wrap { margin-top: 16px; overflow-x: auto; }
.calc-speedo { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.calc-speedo th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 6px 8px 6px 0; white-space: nowrap; font-size: 13px; }
.calc-speedo td { padding: 7px 4px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; }
.calc-speedo tr:last-child td { font-weight: 700; background: #fff5e0; }
.calc-speedo td.is-key { background: var(--blue-tint); font-weight: 700; color: var(--blue-ink); }
.calc-speedo tr:last-child td.is-key { background: #ffe3a3; }

.calc-results { margin: 0; }
.calc-results .btn { font-size: 17px; padding: 11px 20px; }
.calc-results b { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 15px; }

.calc-summary {
  background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: 8px;
  padding: 10px 12px; font-size: 14.5px; line-height: 1.55; margin: 0 0 10px;
}
.calc-summary b.is-out { color: #b45309; }
.calc-summary b.is-in { color: #0f766e; }
.calc-summary b.is-closer { color: #b91c1c; }

.calc-disclaimer { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: 80ch; }
.calc-crosslink { margin: 26px 0 8px; font-weight: 600; font-size: 16px; }
.calc-crosslink a { color: var(--blue); }

/* ---- prose / FAQ / CTA below the tool ---- */
.calc-prose { margin-top: 34px; }
.calc-prose ol { margin: 0 0 14px; padding-left: 22px; color: #33404d; }
.calc-prose li { margin: 6px 0; }
.calc-faq { margin-top: 30px; max-width: 760px; }
.calc-faq h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 26px; margin: 0 0 8px; color: var(--blue-ink);
}
.calc-cta { max-width: 760px; }
.calc-cta h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 24px; margin: 0 0 6px; color: var(--blue-ink); }

@media (max-width: 960px) {
  .calc-vehicle-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .calc-axle-grid, .calc-axle-grid-wheel { grid-template-columns: 1fr; }
  .calc-visual-wheel { position: static; }
}
@media (max-width: 560px) {
  .calc-vehicle-grid { grid-template-columns: 1fr; }
  .calc-axle { padding: 14px 14px 18px; }
  .calc-group { padding: 8px 10px 12px; }
  .calc-size-row { gap: 5px; }
  .calc-size-row input, .calc-wheel-row input { font-size: 16px; padding: 8px 6px; }
  .calc-sep { font-size: 18px; padding-bottom: 8px; }
  .calc-wheel-row { gap: 6px; }
  .calc-table { font-size: 13.5px; }
  .calc-table th, .calc-table td { padding: 6px 4px; }
  .calc-units { margin-left: 0; }
}