/* quote-stepper.css - the quote stepper's stylesheet. Hand-written, no build step.
 *
 * One sheet for every page that carries the stepper: the homepage (beside home.css), the
 * 21 model pages and /inquiry (beside the frozen styles.css). The rules were lifted out of
 * home.css on the day the stepper left index.html's inline script for js/quote-stepper.js,
 * so the homepage renders exactly as it did; what changed is that the model pages and the
 * ad landing page now get the same form.
 *
 * TOKENS. Everything here reads a --qs-* token declared on .quote-panel, and each token
 * takes the page's own variable first with a fallback second: var(--bg, #FFFFFF). On the
 * homepage the fallbacks never apply - home.css defines --bg, --ink, --accent and the rest
 * on :root, in both colour schemes, and the stepper follows the page. On a Tailwind page
 * nothing defines them, so the fallbacks stand: the light palette of a white card, which
 * is where the stepper sits on those pages. This sheet deliberately carries no
 * prefers-color-scheme block of its own - the page decides the scheme, never the widget.
 *
 * SCOPE. The stepper's own class names (.screen, .field, .control, .chip, .bar, .result,
 * .echo, .confirm, .readback, .progress, .err, .hint, .tight, .damage-*) are unscoped;
 * nothing else on any page uses them. The generic names it borrows from the homepage
 * (.btn, .link, .link-btn, .soft, .num, .mt, .sr-only, [hidden]) are scoped under
 * .quote-panel so they exist on the Tailwind pages without touching the rest of the page,
 * and on the homepage resolve to the same values home.css already gives them.
 *
 * 16px controls, on purpose and outside any media query: iOS will not zoom a 16px control,
 * and the zoom is a property of the control rather than the viewport
 * (tests/quote-form-mobile.test.js reads this sheet).
 *
 * FONTS. The @font-face rules are here and not in home.css since 2026-09-02 night, because
 * this sheet is the one every stepper page links. They sat in home.css, which only the
 * homepage links, so on the 21 model pages and /inquiry the stacks below named two faces
 * the browser had never been told about: no request to /fonts/ was made and the stepper
 * rendered in Segoe UI (seen live 22:42 AEST). Variable woff2 from Google Fonts' CSS API,
 * saved to /fonts/ with the OFL text beside them - the site rule is no CDN. Bricolage
 * carries the opsz and wght axes; Instrument Sans wght. Latin and latin-ext subsets only;
 * a name typed in another script falls back to the system stack. home.css must not
 * repeat them (tests/stepper-fonts.test.js).
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.quote-panel {
  --qs-bg: var(--bg, #FFFFFF);
  --qs-ink: var(--ink, #0B1B33);
  --qs-ink-soft: var(--ink-soft, #4A5568);
  --qs-rule: var(--rule, rgba(11, 27, 51, 0.16));
  --qs-rule-strong: var(--rule-strong, rgba(11, 27, 51, 0.4));
  --qs-accent: var(--accent, #1A5DFC);
  --qs-accent-hover: var(--accent-hover, #124BD1);
  --qs-on-accent: var(--on-accent, #FFFFFF);
  --qs-danger: var(--danger, #B42318);
  --qs-field-bg: var(--field-bg, #FFFFFF);
  --qs-font-display: var(--font-display, "Bricolage Grotesque", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif);
  --qs-font-body: var(--font-body, "Instrument Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
  --qs-radius: var(--radius, 6px);
  --qs-measure: var(--measure, 34rem);

  border-top: 1px solid var(--qs-rule); border-bottom: 1px solid var(--qs-rule); padding: 1.25rem 0 0;
  color: var(--qs-ink); font-family: var(--qs-font-body); line-height: 1.55;
  min-width: 0;
}
@media (min-width: 900px) { .quote-panel { padding: 2rem 0 0.5rem; } }
/* Inside a card (the model pages, /inquiry) the card draws the edges, not the panel. */
.quote-panel.qs-card { border-top: 0; border-bottom: 0; padding: 0; }
@media (min-width: 900px) { .quote-panel.qs-card { padding: 0; } }

/* The generic vocabulary, scoped. Same values as home.css, so the homepage is unchanged. */
.quote-panel *, .quote-panel *::before, .quote-panel *::after { box-sizing: border-box; }
.quote-panel p { margin: 0; }
.quote-panel h3 { font-family: var(--qs-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--qs-ink); }
.quote-panel button, .quote-panel input, .quote-panel select { font: inherit; color: inherit; }
.quote-panel .num { font-variant-numeric: tabular-nums; }
.quote-panel .soft { color: var(--qs-ink-soft); }
.quote-panel .mt { margin-top: 1.25rem; }
.quote-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.quote-panel [hidden] { display: none !important; }
.quote-panel :focus-visible { outline: 2px solid var(--qs-accent); outline-offset: 3px; border-radius: 2px; }
.quote-panel .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.375rem;
  border-radius: var(--qs-radius); border: 1px solid transparent;
  font-family: var(--qs-font-body); font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.quote-panel .btn-solid { background: var(--qs-accent); color: var(--qs-on-accent); border-color: var(--qs-accent); }
.quote-panel .btn-solid:hover { background: var(--qs-accent-hover); border-color: var(--qs-accent-hover); }
.quote-panel .btn-solid:disabled { opacity: 0.6; cursor: default; }
.quote-panel .link { color: var(--qs-accent); text-decoration: none; font-weight: 600; }
.quote-panel .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.quote-panel .link-btn { background: none; border: 0; padding: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .quote-panel *, .quote-panel *::before, .quote-panel *::after { transition: none !important; animation: none !important; }
}

/* Progress line: "1 of 3" in the display face and thin segments that fill as the seller
   goes. Hairline-thin, so it reads as a rule with a position on it, not a widget. */
.progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.progress .n { font-family: var(--qs-font-display); font-weight: 600; color: var(--qs-accent); font-size: 0.9375rem; white-space: nowrap; }
.progress .segs { display: flex; gap: 0.375rem; flex: 1; max-width: 12rem; }
.progress .segs span { flex: 1; height: 3px; background: var(--qs-rule); border-radius: 2px; transition: background-color 160ms ease; }
.progress .segs span.on { background: var(--qs-accent); }
.screen { display: block; }
.screen.enter { animation: screen-in 160ms ease; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
.screen h3 { font-size: 1.5rem; }
.screen .q-sub { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--qs-ink-soft); }
.screen-head { margin-bottom: 1.25rem; }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; }
.field label, .field .label { font-weight: 600; font-size: 0.9375rem; }
.field label small, .field .label small { font-weight: 400; color: var(--qs-ink-soft); }
/* iOS will not zoom a 16px control, and the zoom is a property of the control rather than
   the viewport - so this sits outside any media query, on purpose. */
.control {
  width: 100%; min-height: 3rem; padding: 0 0.875rem;
  border: 1px solid var(--qs-rule-strong); border-radius: var(--qs-radius);
  background: var(--qs-field-bg); color: var(--qs-ink);
  font-size: 16px;
}
.control:focus { outline: 2px solid var(--qs-accent); outline-offset: 2px; border-color: var(--qs-accent); }
select.control { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Damage picker: checkboxes drawn as chips. Wrapping row on a phone, a three-column
   block from 900px where the form has the width for it. 44px tall, 16px text. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: flex; min-height: 44px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--qs-rule-strong); border-radius: var(--qs-radius); cursor: pointer;
  font-weight: 500; font-size: 16px; line-height: 1.25; background: var(--qs-field-bg); width: 100%;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.chip span::before {
  content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 3px;
  border: 1px solid var(--qs-rule-strong); background: transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.chip input:checked + span { background: var(--qs-ink); color: var(--qs-bg); border-color: var(--qs-ink); }
.chip input:checked + span::before {
  border-color: var(--qs-bg); background: var(--qs-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size: 0.75rem; background-position: center; background-repeat: no-repeat;
}
.chip input:focus-visible + span { outline: 2px solid var(--qs-accent); outline-offset: 2px; }
.damage-field { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.damage-field legend { padding: 0; }
.model-hint { margin-top: 0.75rem; }
@media (min-width: 900px) { .model-hint { display: none; } } /* the bar carries this line on desktop */
.damage-field .chips + .group-label { margin-top: 1rem; }
.group-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qs-ink-soft); margin: 0 0 0.5rem; }
@media (min-width: 560px) { .damage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .damage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* In a card column the form never has the width for three chips across. */
@media (min-width: 900px) { .qs-card .damage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.err { color: var(--qs-danger); font-size: 0.875rem; display: none; }
.err.show { display: block; }
.control.invalid { border-color: var(--qs-danger); }
.hint { font-size: 0.875rem; color: var(--qs-ink-soft); }

/* The details screen stacks its fields tightly so the whole question and its button
   come close to one phone screen: 0.9rem between fields, 3rem controls. */
.tight .field { margin-bottom: 0.9rem; gap: 0.3rem; }
.tight .field label { font-size: 0.875rem; }

/* Button bar. On a phone it is sticky to the bottom of the viewport inside its screen,
   with the page ground behind it and a hairline above, so a screen taller than the
   viewport (the chips at 360px) scrolls under a button that never leaves. From 900px the
   panel fits, so the bar sits in flow like an ordinary form foot. */
.bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 1rem 1.5rem;
  margin-top: 1rem; padding: 0.875rem 0 calc(0.875rem + env(safe-area-inset-bottom, 0px));
  background: var(--qs-bg); border-top: 1px solid var(--qs-rule);
}
.bar .btn { flex: 1 1 auto; }
.bar .back { flex: 0 0 auto; background: none; border: 0; padding: 0.5rem 0; min-height: 3rem; }
.bar .soft { display: none; font-size: 0.9375rem; }
@media (min-width: 900px) {
  .bar { position: static; border-top: 0; background: transparent; padding: 0; margin-top: 1.5rem; flex-wrap: wrap; }
  .bar .btn { flex: 0 0 auto; }
  .bar .soft { display: block; }
}
/* In a card the bar keeps the card's ground behind it on a phone, and on desktop the card
   itself scrolls with the page, so the bar stays a fitted foot with a full-width button. */
@media (min-width: 900px) { .qs-card .bar .btn { flex: 1 1 auto; } }

/* The band, shown the moment a model is chosen: the model's range in the display face,
   tabular, read one number to another. It is the hook and the signature, so it sits in
   the model screen itself rather than behind the button - or, on a model page, above the
   first screen. */
.result { padding-top: 1rem; border-top: 1px solid var(--qs-rule); margin-top: 0.25rem; }
.result .model { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qs-ink-soft); }
.result .band {
  font-family: var(--qs-font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(2.75rem, 9vw, 4.5rem); margin: 0.4rem 0 0.6rem;
}
.result .band small { font-size: 0.42em; font-weight: 500; letter-spacing: -0.01em; color: var(--qs-ink-soft); margin: 0 0.15em; }
.result .band.no-band { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.02em; }
.result .note { font-size: 0.875rem; max-width: var(--qs-measure); }
/* A model page's readout leads the panel: no rule above it, a rule below, and a figure
   sized for a card column rather than the homepage's half-width. */
.result.lead { padding-top: 0; margin: 0 0 1.25rem; border-top: 0; border-bottom: 1px solid var(--qs-rule); padding-bottom: 1rem; }
.result.lead .band { font-size: clamp(2.25rem, 8vw, 3.25rem); }
.result.lead .switch { margin-top: 0.5rem; font-size: 0.875rem; }
/* Echo on the details screen: what was chosen, one line, before the seller hands over a number */
.echo { font-size: 0.9375rem; padding: 0.75rem 0; border-top: 1px solid var(--qs-rule); border-bottom: 1px solid var(--qs-rule); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.echo .band { font-family: var(--qs-font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.25rem; white-space: nowrap; }
.echo .band small { font-family: var(--qs-font-body); font-size: 0.75rem; font-weight: 500; color: var(--qs-ink-soft); letter-spacing: 0; margin: 0 0.3rem; }
.echo .cond { flex-basis: 100%; color: var(--qs-ink-soft); }
.confirm { padding-bottom: 1.25rem; }
.confirm h3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 22ch; }
.qs-card .confirm h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.confirm h3:focus { outline: none; }
.confirm p { margin-top: 0.75rem; max-width: var(--qs-measure); }
/* What we heard, read back as hairline rows: term left, detail right */
.readback { margin: 1.5rem 0 0; max-width: var(--qs-measure); border-top: 1px solid var(--qs-rule); }
.readback div { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--qs-rule); }
.readback dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qs-ink-soft); padding-top: 0.2em; }
.readback dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
/* The failed submit: the existing error copy with the number, inline above the bar. */
.form-error { margin: 0 0 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--qs-danger); border-radius: var(--qs-radius); color: var(--qs-danger); font-size: 0.9375rem; }
.form-error a { font-weight: 600; }