/* Lose the Dent quote walkthrough. One question a screen, large selectable options, Continue always moves on (a tap
   only selects), the buttons never leave the screen, progress always visible, ZIP code first, contact details last.
   Loaded after the base, site, journey and mobile sheets, on /get-quotes only. Tokens only: ground and ink carry the
   page, --co-blue is the accent (progress, hover, the live number, chosen car panels). Sections 8 to 11 are the dent
   widgets: the car diagram, the coin tiles, the vehicle lists and the photo uploader. */

/* 2. Walkthrough frame ------------------------------------------------------------------------------------------- */
/* The whole point is a screen that fits: less chrome above the question than on other pages (owner 2026-09-22,
   "does not fit above the fold"). The heading keeps its two lines at a smaller size and the page starts higher. */
body.qz-page .cx-page { padding-top: 40px; }
body.qz-page .co-heading { --co-h1-size: clamp(26px, 2.4vw, 34px); }
body.qz-page .co-form-page { margin-top: 28px; }
body.qz-page .co-form-aside { top: calc(var(--cx-header-h) + 16px); }
.qz { display: flex; flex-direction: column; gap: 0; padding-left: var(--co-gutter); min-width: 0; }
.qz-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: var(--cx-module-2); }
.qz-top__where { font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; }
.qz-top__section { font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; color: var(--co-blue); text-align: right; }
.qz-progress { position: relative; margin: 10px 0 0; height: 1px; background: var(--co-ink); max-width: var(--cx-module-2); }
.qz-progress::after { content: ""; position: absolute; left: 0; top: -2px; height: 5px; width: var(--qz-pc, 0%); background: var(--co-blue); transition: width 260ms var(--co-ease); }

.qz-screen { display: block; margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.qz-screen[hidden] { display: none !important; }
.qz-screen > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-transform: none; max-width: 30ch; }
.qz-screen > legend:focus { outline: none; }                     /* focus lands on the question for screen readers; no ring */
.qz-screen[data-kind="group"] .qz-opt__key { display: none; }      /* two groups on one screen: number keys would be ambiguous */
.qz-screen[data-kind="group"] .qz-opt { padding-right: 16px; }
.qz-screen__hint { clear: both; margin: 0 0 20px; max-width: 56ch; font-size: var(--co-body-size); }
.qz-prices { display: block; margin-top: 4px; font-size: var(--co-label-size); }
.qz-screen__hint:empty { display: none; }
.qz-screen > .co-fieldset__fields { clear: both; padding-top: 4px; }
.qz-screen__how { display: block; font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.qz-screen__how:empty { display: none; }
.co-fieldset__fields > .co-field:has(> .qz-opts) { grid-column: 1 / -1; width: var(--cx-module-2); max-width: 100%; }
.co-fieldset__fields > .co-field > .qz-opts { padding-top: 0; }

/* 3. Options: one module wide, two to a row, the square inside on the left, ticked when chosen ---------------------- */
.qz-opts { clear: both; display: grid; grid-template-columns: repeat(2, var(--cx-module)); gap: 8px; padding-top: 4px; }
/* Short options (every label 16 characters or fewer) sit three to a row on the same 568px width */
.qz-opts--3 { grid-template-columns: repeat(3, calc((var(--cx-module-2) - 16px) / 3)); }
.qz-opts--3 .qz-opt { padding-left: 12px; padding-right: 36px; }
.qz-opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 44px 12px 16px;
  background: var(--co-ground); color: var(--co-ink); border: var(--co-line); cursor: pointer; text-decoration: none;
  font-size: var(--co-label-size); line-height: 1.3; font-weight: 700; text-transform: uppercase;
  transition: background var(--co-fast) var(--co-ease), color var(--co-fast) var(--co-ease), box-shadow var(--co-fast) var(--co-ease);
}
.qz-opt input { appearance: none; margin: 0; width: 16px; height: 16px; border: var(--co-line); border-radius: 0; background: var(--co-ground); flex-shrink: 0; cursor: pointer; }
.qz-opt input:focus-visible { outline: none; }
.qz-opt:hover { box-shadow: inset 0 0 0 2px var(--co-blue); color: var(--co-blue); }
.qz-opt:has(input:focus-visible), a.qz-opt:focus-visible { outline: 2px solid var(--co-blue); outline-offset: 2px; }
/* Chosen: the tile stays light, the square fills with the accent and carries a tick (owner 2026-09-30: no dark tile) */
.qz-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--co-blue); }
.qz-opt:has(input:checked) input { background: var(--co-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFAF8' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px 14px no-repeat; border-color: var(--co-blue); }
.qz-opt:has(input:checked):hover { color: var(--co-ink); }
.qz-opt__text { flex: 1 1 auto; min-width: 0; }
.qz-opt__key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; border: 1px solid currentColor; opacity: 0.45; }
.qz-opt:hover .qz-opt__key { opacity: 1; }
@media (hover: none) { .qz-opt__key { display: none; } .qz-opt { padding-right: 16px; } }

/* Postcode screen: the area line under the field, the town input only when revealed */
.qz-area { display: block; font-weight: 700; }
.qz-area[hidden] { display: none; }
.qz-area__change { background: none; border: 0; padding: 0; margin-left: 8px; font: 700 var(--co-label-size)/1.4 var(--co-font); text-transform: uppercase; color: var(--co-blue); cursor: pointer; }
.qz-town[hidden] { display: none !important; }
.co-fieldset__fields > .co-field:has(> .qz-area) { grid-column: 1 / -1; }

/* 4. Actions: Back outlined, Continue solid, Skip as a text link, all always within the window ------------------- */
.qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--co-gap-control); margin-top: 28px; }
/* Safety net on any width: a screen taller than the window gets its buttons pinned to the bottom edge */
.qz-actions.is-pinned { position: sticky; bottom: 0; z-index: 30; margin-left: calc(-1 * var(--co-gutter)); padding: 12px var(--co-gutter) 12px; background: var(--co-ground); border-top: 1px solid var(--co-ink); width: calc(var(--cx-module-2) + 2 * var(--co-gutter)); box-sizing: border-box; }
.qz-actions .co-btn { width: var(--cx-module); }
.qz-actions__skip, .qz-change { font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; background: none; border: 0; padding: 0; color: var(--co-ink); cursor: pointer; text-decoration: none; }
.qz-actions__skip { margin-left: 8px; }
.qz-actions__skip:hover, .qz-change:hover { color: var(--co-blue); }
.qz-key-hint { margin-top: 12px; font-size: var(--co-label-size); }
.qz-key-hint kbd { font: inherit; font-weight: 700; }
.qz-change { display: inline-block; margin-top: 28px; }
.qz-reassure { margin-top: 12px; max-width: var(--cx-module-2); }
.qz-reassure[hidden] { display: none; }
.qz-error { margin-top: 16px; }

/* 5. Consent and review on the last screen ------------------------------------------------------------------------ */
.qz-consent { display: flex; flex-direction: column; gap: 16px; }
.qz-review { max-width: var(--cx-module-2); }
.qz-review > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 16px; border: var(--co-line); font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; }
.qz-review > summary::-webkit-details-marker { display: none; }
.qz-review > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.qz-review[open] > summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.qz-review .qz-answers { padding: 16px; border: var(--co-line); border-top: 0; }

/* 6. Side column: the live count of nearby dent specialists, what happens next, and every answer so far with a way back to it ---------- */
.qz-aside { display: flex; flex-direction: column; gap: 32px; }
.qz-live { display: flex; flex-direction: column; gap: 4px; }
.qz-live__n { font-size: var(--co-h1-size); line-height: 1; font-weight: 700; color: var(--co-blue); letter-spacing: -0.01em; }
.qz-live__n:empty { display: none; }
.qz-answers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-answers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; font-size: var(--co-label-size); }
.qz-answers .qz-answers__q { grid-column: 1; font-weight: 700; text-transform: uppercase; }
.qz-answers .qz-answers__a { grid-column: 1; overflow-wrap: anywhere; }
.qz-answers .qz-answers__edit { grid-column: 2; grid-row: 1 / span 2; font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; background: none; border: 0; padding: 0; color: var(--co-ink); cursor: pointer; }
.qz-answers .qz-answers__edit:hover { color: var(--co-blue); }
.qz-answers:empty::before { content: "Your answers appear here as you go."; font-size: var(--co-label-size); }

/* 7. Narrow windows ---------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .qz { padding-left: 0; }
  .qz-aside { padding-top: 40px; }
  .qz-aside .qz-answers-block { display: none; }   /* the review fold on the last screen does this job on phones */
}
@media (max-width: 760px) {
  .qz-opts { grid-template-columns: minmax(0, 1fr); }
  .qz-opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz-opts--3 .qz-opt { min-height: 48px; }
  .qz-actions.is-pinned { width: auto; margin-left: calc(-1 * var(--co-gutter)); }
  .qz-opt { min-height: 52px; padding: 12px 16px; }
  .qz-screen { margin-top: 28px; }
  .qz-screen > legend { font-size: 21px; }
  .qz-actions {
    position: sticky; bottom: 0; z-index: 30; margin: 24px calc(-1 * var(--co-gutter)) 0; padding: 12px var(--co-gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--co-ground); border-top: 1px solid var(--co-ink); flex-wrap: nowrap;
  }
  .qz-actions .co-btn { flex: 1 1 0; width: auto; min-height: 48px; }
  .qz-actions .co-btn[hidden] { display: none !important; }
  .qz-actions__skip { flex: 0 0 auto; margin-left: 4px; }
  .qz-key-hint { display: none; }
  .qz-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .qz-top__section { text-align: left; }
  .qz-actions [data-qz-back] { flex: 0 0 104px; }
  .qz-change { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
}

.qz [data-rule][hidden] { display: none !important; }
.qz-optional { font-weight: 400; text-transform: none; }
.qz-zipcount { display: block; font-weight: 700; color: var(--co-blue); }
.qz-zipcount[hidden] { display: none; }
.qz-screen[data-kind="contact"] .co-textarea { min-height: 72px; }
.qz button[disabled] { opacity: 0.6; cursor: progress; }

/* 8. The car diagram: a top-down car, front at the top, driver side on the left. A chosen panel fills with the accent. */
.qz-car { clear: both; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 40px; align-items: start; max-width: var(--cx-module-2); }
.qz-car__pic { display: flex; justify-content: center; }
.qz-car__svg { display: block; height: 430px; width: auto; max-width: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.qz-car__panel { cursor: pointer; }
.qz-car__panel path { fill: var(--co-ground); stroke: var(--co-ink); stroke-width: 1.5; stroke-linejoin: round; transition: fill var(--co-fast, 120ms) var(--co-ease, ease); }
.qz-car__panel text { font: 700 10.5px/1 var(--co-font, inherit); fill: var(--co-ink); pointer-events: none; text-transform: uppercase; letter-spacing: 0.02em; }
.qz-car__panel--side text { font-size: 9px; letter-spacing: 0; }
@media (hover: hover) { .qz-car__panel:hover path { stroke: var(--co-blue); stroke-width: 3; } .qz-car__panel:hover text { fill: var(--co-blue); } }
.qz-car__panel.is-on path { fill: var(--co-blue); stroke: var(--co-ink); }
.qz-car__panel.is-on text, .qz-car__panel.is-on:hover text { fill: var(--co-ground); }
.qz-car__glass { fill: none; stroke: var(--co-ink); stroke-width: 1; opacity: 0.45; pointer-events: none; }
.qz-car__trim { fill: var(--co-ground); stroke: var(--co-ink); stroke-width: 1.5; pointer-events: none; }
.qz-car__side { font: 700 10px/1 var(--co-font, inherit); fill: var(--co-ink); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; pointer-events: none; }
.qz-car__list { display: flex; flex-direction: column; gap: 0; }
.qz-car__item { align-items: center; min-height: 32px; font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; }
.qz-car__item:has(input:checked) { color: var(--co-blue); }
.qz-car__item input:checked { background: var(--co-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFAF8' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px 14px no-repeat; border-color: var(--co-blue); }

/* 9. Coin tiles: the picture above the name, circles drawn to the same scale (27px to the inch) */
.qz-opts.qz-coins { grid-template-columns: repeat(5, minmax(0, 1fr)); width: var(--cx-module-2); max-width: 100%; }
.qz-coin { flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 8px 12px; text-align: center; }
.qz-coin input { position: absolute; left: 8px; top: 8px; }
.qz-coin .qz-opt__key { top: 18px; right: 8px; }
.qz-coin__pic { width: 84px; height: 84px; flex: none; overflow: visible; }
.qz-coin__fill { fill: none; stroke: currentColor; stroke-width: 2; }
.qz-coin__fill--dashed { stroke-dasharray: 5 4; }
.qz-coin__line { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.7; }
.qz-coin__dot { fill: currentColor; opacity: 0.7; }
.qz-coin__seam { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 3 3; }
.qz-coin .qz-opt__text { flex: none; }
.qz-coin__size { display: block; margin-top: 2px; font-weight: 400; text-transform: none; }

/* 10. Vehicle: a list where we have one, the plain input where we do not */
.qz-select { appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; padding-right: 36px; color: var(--co-ink);
  background-color: var(--co-ground);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.qz-select[hidden], .qz-veh input[hidden] { display: none !important; }
.qz-select:disabled { opacity: 0.55; cursor: default; }
.qz-veh .qz-select + input:not([hidden]) { margin-top: 8px; }
.qz-screen[data-kind="vehicle"] .co-fieldset__fields { grid-template-columns: var(--cx-module); gap: 16px; }

/* 11. Photos: square tiles, the add tile last, progress along the bottom, remove in the corner */
.qz-photos { width: var(--cx-module-2); max-width: 100%; }
.qz-photos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.qz-photos__grid > li { position: relative; aspect-ratio: 1 / 1; margin: 0; padding: 0; min-width: 0; }
.qz-photos__grid > li[hidden] { display: none; }
.qz-photos__tile { border: var(--co-line); background: var(--co-ground); overflow: hidden; }
.qz-photos__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-photos__tile.is-up img { opacity: 0.45; }
.qz-photos__tile.is-blank img, .qz-photos__tile.is-err img { visibility: hidden; }
.qz-photos__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: transparent; }
.qz-photos__bar > span { display: block; height: 100%; width: 0; background: var(--co-blue); transition: width 160ms linear; }
.qz-photos__tile:not(.is-up) .qz-photos__bar { display: none; }
.qz-photos__msg { position: absolute; inset: 0; display: none; align-items: center; padding: 8px 8px 8px; font-size: 12px; line-height: 1.3; font-weight: 700; overflow: hidden; }
.qz-photos__tile.is-err .qz-photos__msg { display: flex; justify-content: center; text-transform: uppercase; }
.qz-photos__tile.is-err { border-style: dashed; }
.qz-photos__rm { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-end; }
.qz-photos__rm > span { display: grid; place-items: center; width: 28px; height: 28px; background: var(--co-ink); color: var(--co-ground); font-size: 20px; line-height: 1; font-weight: 700; }
.qz-photos__rm:hover > span, .qz-photos__rm:focus-visible > span { background: var(--co-blue); }
.qz-photos__rm:focus-visible { outline: 2px solid var(--co-blue); outline-offset: -2px; }
.qz-photos__add label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--co-ink); cursor: pointer;
  font-size: var(--co-label-size); font-weight: 700; text-transform: uppercase; text-align: center; padding: 8px; }
.qz-photos__add label:hover, .qz-photos.is-drop .qz-photos__add label { border-style: solid; border-color: var(--co-blue); color: var(--co-blue); box-shadow: inset 0 0 0 1px var(--co-blue); }
.qz-photos__plus { font-size: 34px; line-height: 0.8; font-weight: 400; }
.qz-photos__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.qz-photos__input:focus-visible + label { outline: 2px solid var(--co-blue); outline-offset: 2px; }
.qz-photos > .co-field__help { display: block; margin-top: 10px; }
.qz-photos__tips { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--co-label-size); }
.qz-photos__tips li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--co-blue); vertical-align: middle; }

@media (max-width: 760px) {
  .qz-car { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qz-car__svg { height: min(392px, calc(100vh - 360px)); min-height: 384px; }
  .qz-car__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .qz-car__item { min-height: 44px; font-size: 12px; line-height: 1.25; }
  .qz-opts.qz-coins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qz-coin { min-height: 0; padding: 8px 4px 10px; gap: 4px; }
  .qz-coin__pic { width: 72px; height: 72px; }
  .qz-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qz-photos__tips { flex-direction: column; }
  .qz-screen[data-kind="vehicle"] .co-fieldset__fields { grid-template-columns: minmax(0, 1fr); }
  .qz-screen__hint { margin-bottom: 14px; }
}

/* Two modules wide: the car diagram with its list, the coin tiles, and the consent lines */
.qz .co-field.qz-w-car, .qz .co-field.qz-w-coins, .qz .qz-consent > .co-field { width: var(--cx-module-2); max-width: 100%; }
@media (min-width: 761px) {
  .qz-car__svg { height: min(430px, calc(100vh - 330px)); min-height: 340px; }
  .qz-car { column-gap: 24px; }
  .qz-car__item { white-space: nowrap; font-size: 12px; letter-spacing: 0; }
}