/* ==========================================================================
   Quote planner (quote.php): DESIGN-SPEC §6.2, pages.css B.
   Builds on the shared foundation in styles.css (tokens, buttons, fields, segmented control,
   alerts, cards, tags, stats, rates table). quote.js sets main[data-state] and main[data-mode]
   and toggles [hidden]; this file lays the states out.
   ========================================================================== */

.page-quote .site-footer { margin-top: 0; }

/* Head ---------------------------------------------------------------------- */
.planner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-7);
  padding-block: clamp(20px, 2.6vw, 36px) clamp(16px, 1.8vw, 24px);
}
.planner-head .kicker { margin-bottom: 12px; }
.planner-head__title { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem); }
.planner-head__intro { max-width: 34em; color: var(--text); }
.planner-head__intro-short { display: none; }
/* After saving, "No account or contact details needed" would sit right above the optional contact card */
.planner[data-state="saved"] .planner-head__intro-short { display: none !important; }
.planner-head__intro--alert { display: none; color: var(--text-strong); font-weight: 600; }
.planner-head__notice { grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 600; color: var(--warning-text); }
@media (min-width: 1080px) {
  .planner-head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; }
  .planner-head__intro { padding-bottom: 4px; font-size: var(--fs-small); color: var(--text-muted); }
  .planner-head__intro--alert { color: var(--text-strong); }
}
@media (max-width: 599px) {
  .planner-head__intro:not(.planner-head__intro--alert):not(.planner-head__intro--edit) { display: none; }
  .planner-head__intro-short { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
}

/* Work area: map column + estimate panel ------------------------------------ */
.planner-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-bottom: var(--space-7); }
@media (min-width: 1080px) {
  .planner-work { grid-template-columns: minmax(0, 1fr) minmax(360px, 412px); align-items: start; column-gap: var(--space-5); row-gap: var(--space-6); }
  .planner-panel { position: sticky; top: calc(var(--header-h) + 16px); }
  /* After saving the panel is short and the contact card runs full width below, so nothing sticks */
  .planner[data-state="saved"] .planner-panel { position: static; }
  .contact-step { grid-column: 1 / -1; }
}

/* Controls above the map ---------------------------------------------------- */
.planner-controls { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 760px) {
  .planner-controls { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--space-4); }
  .planner-method__seg { width: auto; display: inline-flex; }
  .planner-postcode { grid-column: 1 / -1; }
  /* Edit mode (and drawing-only fallback) has no method choice: the place search takes the whole row */
  .planner-controls:not(:has(> .planner-method:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}
.planner-method__seg .segmented__option span { padding: 0 20px; min-height: 44px; }
.planner-search { position: relative; min-width: 0; }
.planner-search .field { gap: 4px; }
.planner-search .field__label { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }
/* The optional fields start read-only only to keep Safari's login heuristic away (quote.js); they are
   never shown as read-only. */
.planner-controls .input[readonly] { background: var(--surface-field); color: var(--text-strong); border-color: var(--field-border); }
.planner-controls .input[readonly]:hover { border-color: var(--green-900); }
.planner-controls .input[readonly][aria-invalid="true"] { border-color: var(--error-border); background: #FFFBF9; }
.planner-search .input::-webkit-search-cancel-button,
.planner-search .input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.planner-postcode__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 760px) { .planner-postcode__row { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr); align-items: end; } }
.planner-postcode .field__hint { margin-top: 8px; }
.planner-radius .segmented { min-height: 52px; }
.planner-radius .segmented__option span { min-height: 44px; font-size: 1rem; }
/* Saved, unavailable and edit-free states do not offer a method choice */
.planner[data-state="saved"] .planner-controls,
.planner.is-unavailable .planner-controls,
.no-js .planner .planner-controls { display: none; }

/* Place search suggestions (rendered by StreetHelloMaps.placeSearch) */
.place-search-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--paper-0);
  box-shadow: var(--shadow-raise);
}
.place-search-heading { padding: 6px 10px 4px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.place-search-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-s); cursor: pointer; color: var(--text-strong); font-size: var(--fs-small); line-height: 1.35; }
.place-search-option.is-active { background: var(--green-50); }
@media (hover: hover) and (pointer: fine) { .place-search-option:hover { background: var(--green-50); } }
.place-search-option.is-active { box-shadow: inset 0 0 0 2px var(--green-900); }
.place-search-option--action { color: var(--text-muted); }
.place-search-icon { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.place-search-text { flex: 1; min-width: 0; display: grid; }
.place-search-main { font-weight: 600; overflow-wrap: anywhere; }
.place-search-main mark { background: transparent; color: var(--accent-text); }
.place-search-secondary { color: var(--text-muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.place-search-distance { flex: none; color: var(--text-muted); font-size: var(--fs-caption); font-variant-numeric: lining-nums tabular-nums; }
.place-search-status:empty { display: none; }
.place-search-status { margin-top: 6px; font-size: var(--fs-caption); line-height: 1.45; color: var(--text-muted); }
/* Beside the method choice (760px and wider) the status floats under the field, like the suggestions,
   so typing never makes the controls row taller and moves the map. The open suggestions cover it. */
@media (min-width: 760px) {
  .planner-search .place-search-status {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 0;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: var(--radius-s);
    background: var(--paper-0);
    box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -12px rgba(18, 53, 46, 0.5);
    color: var(--text);
  }
  .planner-search .place-search-list:not([hidden]) + .place-search-status { opacity: 0; }
}

/* Map ----------------------------------------------------------------------- */
.planner-map {
  position: relative;
  height: clamp(420px, calc(100svh - 330px), 640px);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: #EEEBE3;
  box-shadow: var(--shadow-print);
  isolation: isolate;
}
.planner[data-mode="postcode"] .planner-map { height: clamp(400px, calc(100svh - 400px), 600px); }
/* Tablets: the panel sits below the map, so the map leaves room for the result bar (the only figures
   above the fold) inside the first screen */
@media (min-width: 760px) and (max-width: 1079px) {
  .planner-map { height: clamp(340px, calc(100svh - 440px), 640px); }
  .planner[data-mode="postcode"] .planner-map { height: clamp(300px, calc(100svh - 540px), 600px); }
}
/* From 960px the header is 12px taller and the long intro shows, so the map gives back that height and
   the result bar still ends inside the first screen (for example 1040 × 900) */
@media (min-width: 960px) and (max-width: 1079px) {
  .planner-map { height: clamp(340px, calc(100svh - 470px), 640px); }
  .planner[data-mode="postcode"] .planner-map { height: clamp(300px, calc(100svh - 570px), 600px); }
}
/* Short tablets (for example 1024 × 768): the short intro and no postcode hint, as on phones */
@media (min-width: 760px) and (max-width: 1079px) and (max-height: 820px) {
  .planner-head__intro:not(.planner-head__intro--alert):not(.planner-head__intro--edit) { display: none; }
  .planner-head__intro-short { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
  .planner-postcode .field__hint { display: none; }
}
.planner-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: #EEEBE3; font-family: var(--font-text); }
/* The focus ring is drawn above the map's own absolutely positioned layers (an outline on the canvas is
   painted under them and never shows) */
.planner-map__canvas:focus-visible { outline: none; }
.planner-map__canvas:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1000; border: 3px solid var(--focus); pointer-events: none; }
.planner-map__canvas .gm-style { font-family: var(--font-text); }
.planner-map__canvas .map-fallback { display: none; }

/* Keyboard drawing: a crosshair marks where Enter places the next corner */
.quote-map-crosshair {
  display: none;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.quote-map-crosshair::before, .quote-map-crosshair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--terra-600);
  box-shadow: 0 0 0 2px var(--paper-0);
  transform: translate(-50%, -50%);
}
.quote-map-crosshair::before { width: 28px; height: 2px; }
.quote-map-crosshair::after { width: 2px; height: 28px; }
.planner.is-keyboard-drawing .quote-map-crosshair { display: block; }

/* Map tools: paper pills; the pressed toggle (drawing armed) is tinted, never a solid fill */
.map-tools { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 80px); }
.map-tools:not(:has(> :not([hidden]))) { display: none; }
.quote-edit-create-controls { display: contents; }
.quote-edit-create-controls[hidden] { display: none !important; }
.map-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid rgba(18, 53, 46, 0.2);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: 0 6px 16px -10px rgba(18, 53, 46, 0.5);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--green-900);
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
@media (hover: hover) and (pointer: fine) { .map-tool:hover { background: var(--paper-0); border-color: rgba(18, 53, 46, 0.45); } }
.map-tool:disabled { cursor: not-allowed; color: var(--text-muted); background: var(--paper-100); }
.map-tool .icon { width: 18px; height: 18px; }
.map-tool[aria-pressed="true"] { background: var(--terra-100); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--terra-600), 0 6px 16px -10px rgba(18, 53, 46, 0.5); color: var(--terra-800); }
.map-tool--icon { width: 44px; padding: 0; justify-content: center; }
.map-tool[aria-busy="true"] { cursor: progress; }
.map-search { display: none; }
/* Redraw's inline confirmation, in place of Redraw and Delete: a paper panel with the question, Discard (the
   tinted terracotta of a pressed tool, never a solid fill) and Keep. The question wraps above the pills when
   the row is narrow. */
.map-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 6px 6px 6px 14px; border: 1px solid rgba(18, 53, 46, 0.2); border-radius: 22px; background: var(--paper-50); box-shadow: 0 6px 16px -10px rgba(18, 53, 46, 0.5); }
.map-confirm[hidden] { display: none; }
.map-confirm__text { flex: 1 1 12rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--green-900); }
.map-confirm__actions { display: flex; gap: 6px; }
.map-confirm .map-tool { box-shadow: none; }
.map-tool--discard { background: var(--terra-100); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--terra-600) !important; color: var(--terra-800); }
@media (hover: hover) and (pointer: fine) { .map-tool--discard:hover { background: #F1D3C7; border-color: transparent; } }

.map-chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 0 0 1px rgba(18, 53, 46, 0.14), 0 6px 16px -10px rgba(18, 53, 46, 0.5);
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-strong);
}
.map-chip .icon { width: 15px; height: 15px; color: var(--accent-text); }
#quote-chip-incomplete .icon { color: var(--ochre-700); }

.map-zoom { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; border: 1px solid rgba(18, 53, 46, 0.18); border-radius: var(--radius-m); overflow: hidden; background: var(--paper-50); box-shadow: 0 6px 16px -10px rgba(18, 53, 46, 0.5); }
.map-zoom button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text-strong); cursor: pointer; }
.map-zoom button + button { border-top: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) { .map-zoom button:hover { background: var(--paper-0); } }
.map-zoom button:disabled { color: var(--paper-300); cursor: not-allowed; }
.map-zoom button:focus-visible { outline-offset: -3px; }
.map-zoom .icon { width: 18px; height: 18px; }

/* Help line: the live map status. It sits above Google's logo, which the map keeps bottom left. */
.map-help {
  position: absolute;
  left: 12px; bottom: 32px;
  z-index: 2;
  max-width: min(440px, calc(100% - 24px));
  padding: 9px 14px;
  border-radius: var(--radius-m);
  background: rgba(18, 53, 46, 0.92);
  color: var(--paper-50);
  font-size: var(--fs-caption);
  line-height: 1.4;
  pointer-events: none;
}
.map-help:empty { display: none; }
.map-help strong { font-weight: 700; }

/* Overlays drawn as map markers (quote.js): corners, midpoints, the centre pin and the radius tag */
.planner-map .map-dot { display: block; box-sizing: border-box; width: 14px; height: 14px; border: 2.5px solid var(--terra-600); border-radius: 50%; background: var(--paper-0); box-shadow: 0 1px 3px rgba(18, 53, 46, 0.35); }
.planner-map .map-dot--vertex { cursor: pointer; }
.planner-map .map-dot--first { width: 18px; height: 18px; border: 3px solid var(--paper-0); background: var(--terra-600); }
.quote-corner {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border: 2.5px solid var(--terra-600);
  border-radius: 50%;
  background: var(--paper-0);
  box-shadow: 0 1px 3px rgba(18, 53, 46, 0.35);
  cursor: grab;
  touch-action: none;
}
.quote-corner::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; }
.quote-corner:active { cursor: grabbing; }
.quote-corner--mid { width: 9px; height: 9px; border-width: 1.5px; background: rgba(255, 254, 250, 0.9); box-shadow: none; }
.quote-corner--mid::after { inset: -17.5px; }
.quote-corner:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* On Google's map the marker itself takes keyboard focus; the ring is drawn on the handle inside it. */
gmp-advanced-marker:focus { outline: none; }
gmp-advanced-marker:focus-visible .quote-corner { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (pointer: coarse) {
  .planner-map .map-dot { width: 18px; height: 18px; }
  .planner-map .map-dot--first { width: 20px; height: 20px; }
  .quote-corner { width: 18px; height: 18px; }
  .quote-corner::after { inset: -13px; }
  .quote-corner--mid { width: 14px; height: 14px; }
  .quote-corner--mid::after { inset: -15px; }
}
.quote-pin { display: block; width: 28px; height: 37px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(18, 53, 46, 0.3)); }
.quote-pin path { fill: var(--green-900); stroke: var(--paper-0); stroke-width: 2.5; }
.quote-pin circle { fill: var(--paper-0); }
.map-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: var(--green-900);
  color: var(--paper-50);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--paper-0);
  pointer-events: none;
}
.map-tag--warn { background: var(--ochre-700); }
/* Google's advanced markers anchor their content at the bottom centre; translateY(50%) centres each
   corner, midpoint and tag on its point (the pin keeps its tip on the point). */
gmp-advanced-marker .map-dot, gmp-advanced-marker .quote-corner, gmp-advanced-marker .map-tag { transform: translateY(50%); }

/* Map unavailable (and no JavaScript): a card at the map's minimum height replaces the map */
.map-fallback { display: none; max-width: 34rem; padding: clamp(28px, 4vw, 56px); text-align: center; }
.map-fallback__icon { width: 44px; height: 44px; margin: 0 auto var(--space-4); color: var(--accent-text); stroke-width: 1.4; }
.map-fallback p { margin-top: var(--space-3); color: var(--text); }
.map-fallback__actions { justify-content: center; margin-top: var(--space-5); }
.map-fallback__call { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.map-fallback__call .phone-display { font-size: 1.75rem; }
.planner.is-unavailable .planner-map,
.no-js .planner .planner-map { display: grid; place-items: center; height: auto; min-height: 560px; background: var(--paper-50); box-shadow: none; border-color: rgba(18, 53, 46, 0.22); }
.planner.is-unavailable .planner-map > :not(.map-fallback),
.no-js .planner .planner-map > :not(.map-fallback) { display: none !important; }
.planner.is-unavailable .map-fallback,
.no-js .planner .map-fallback { display: block; }
.no-js #quote-map-retry { display: none; }
.map-fallback__nojs-text { display: none; }
.no-js .map-fallback__retry-text { display: none; }
.no-js .map-fallback__nojs-text { display: inline; }
.planner.is-unavailable .planner-head__intro,
.no-js .planner .planner-head__intro,
.planner.is-unavailable .planner-head__intro-short,
.no-js .planner .planner-head__intro-short { display: none; }
.planner.is-unavailable .planner-head__intro--alert,
.no-js .planner .planner-head__intro--alert { display: block; }

/* Result bar (below 1080): in normal flow directly under the map, never an overlay -------- */
.result-bar { display: none; }
.result-bar__main { display: flex; align-items: center; gap: var(--space-3); min-height: 50px; }
.result-bar__help { display: none; font-size: 0.8125rem; line-height: 1.35; color: var(--on-inverse-muted); }
.result-bar__help:empty { display: none !important; }
.result-bar__hint { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); line-height: 1.35; color: var(--on-inverse); }
.result-bar__hint > .icon { display: none; width: 20px; height: 20px; flex: none; }
.result-bar__hint--warn { color: #F6D9A0; font-weight: 600; }
.result-bar__hint--warn > .icon { display: block; }
.result-bar__figures { display: flex; gap: var(--space-4); flex: 1 1 auto; min-width: 0; }
.result-bar__figures div { display: grid; }
.result-bar__figures span { font-size: 0.75rem; color: var(--on-inverse-muted); white-space: nowrap; }
.result-bar__figures strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--on-inverse); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.result-bar__go { --btn-bg: var(--paper-50); --btn-fg: var(--green-950); --btn-bg-hover: var(--paper-200); flex: none; margin-left: auto; padding: 0 14px; }
.result-bar__go .icon { width: 16px; height: 16px; }
.result-bar :focus-visible { outline-color: var(--focus-inverse); }
@media (max-width: 1079px) {
  .planner-map { border-radius: var(--radius-m) var(--radius-m) 0 0; }
  .result-bar:not([hidden]) {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    background: var(--green-900);
    color: var(--paper-50);
    box-shadow: var(--shadow-print);
  }
  .planner.is-unavailable .planner-map, .planner[data-state="saved"] .planner-map, .no-js .planner .planner-map { border-radius: var(--radius-m); }
}
.planner[data-state="saved"] .result-bar, .planner.is-unavailable .result-bar, .no-js .planner .result-bar { display: none !important; }

/* Estimate panel -------------------------------------------------------------- */
/* "Details & save" lands the panel 16px below the header through the shared html scroll-padding-top
   (a scroll-margin here would add the offset twice) */
.planner-panel { padding: clamp(20px, 2vw, 28px); background: var(--surface-raised); box-shadow: var(--shadow-print); }
.planner-panel:focus { outline: none; }
.planner-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* At 320px the area tag wraps under the kicker rather than leaving the card */
.planner-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-height: 24px; }
.planner-panel__head .tag { flex: none; margin-left: auto; }
.planner-panel__head .kicker { color: var(--text-muted); }
.planner-panel__head .tag .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.figures { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
/* As on the saved Quote: a figure too wide to share the row moves onto its own row instead of overflowing. */
.figures > .stat { flex: 1 1 0; }
.figures .stat + .stat { padding-left: var(--space-4); border-left: 1px solid var(--rule); }
.figures .stat__value { font-size: clamp(2rem, 1.5rem + 1vw, 2.5rem); min-height: 1.05em; }
.figures .stat__value .skeleton { width: 7.2rem; max-width: 100%; height: 2.4rem; }
.figures .stat + .stat .stat__value .skeleton { width: 8rem; }
.figures__status { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); }
.figures__note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.planner-live .alert { margin-top: var(--space-4); }
.planner-panel .rates { margin-top: var(--space-5); }
.rates__note { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); }
.band-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-3); margin-top: var(--space-4); padding: 10px 12px; border-radius: var(--radius-m); background: var(--green-50); box-shadow: inset 3px 0 0 var(--green-900); font-size: var(--fs-small); color: var(--text-strong); }
.band-line strong { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.band-line .tag { background: var(--green-900); color: var(--paper-50); }
.rates-more { margin-top: var(--space-2); }
.planner-band.is-rates-only { display: none; }
.planner-band.is-rates-only .band-line { display: none; }
.planner-band.is-rates-only .rates-more { margin-top: var(--space-4); }
/* Incomplete data beside the map: the full table folds into "See all rates" so Save stays in the first screen */
@media (min-width: 1080px) {
  .planner[data-state="incomplete"] .planner-rates { display: none; }
  .planner-band.is-rates-only { display: block; }
}
.rates-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; text-decoration-color: rgba(18, 53, 46, 0.35); }
@media (hover: hover) and (pointer: fine) { .rates-more summary:hover { text-decoration-color: var(--accent-text); } }
.rates-more summary::-webkit-details-marker { display: none; }
.rates-more summary .icon { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.rates-more[open] summary .icon { transform: rotate(180deg); }
.rates-more .rates { margin-top: var(--space-2); }
.rates-more .rates tr.is-current th::after { content: "Your band"; display: inline-flex; align-items: center; min-height: 20px; margin-left: 8px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--green-900); color: var(--paper-50); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: 2px; }
.guide { display: grid; gap: 2px; margin-top: var(--space-4); }
.guide li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-m); font-size: var(--fs-small); color: var(--text-muted); }
.guide b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule); font-size: 0.75rem; color: var(--text-muted); }
.guide strong { color: var(--text-strong); font-weight: 600; }
.guide .is-current { background: var(--green-50); color: var(--text); }
.guide .is-current b { background: var(--green-900); border-color: var(--green-900); color: var(--paper-50); }
.guide .is-done b { background: var(--green-100); border-color: transparent; color: var(--green-900); }
.save-block { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.save-block .alert { margin-bottom: 0; }
.access-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: var(--fs-caption); line-height: 1.45; color: var(--text); }
.access-note .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.planner-panel__retrieve { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-muted); }
.unavailable-note { display: none; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text); }
.btn .spinner { width: 16px; height: 16px; }

/* Map unavailable (or no JavaScript): rates only, with the consultation and phone in the map card */
.planner.is-unavailable .planner-panel .planner-live,
.planner.is-unavailable .planner-panel .guide,
.planner.is-unavailable .planner-panel .save-block,
.planner.is-unavailable .planner-panel .planner-band,
.no-js .planner .planner-panel .planner-live,
.no-js .planner .planner-panel .guide,
.no-js .planner .planner-panel .save-block { display: none !important; }
.planner.is-unavailable .unavailable-note, .no-js .planner .unavailable-note { display: block; }
.planner.is-unavailable [data-panel-title="estimate"], .no-js .planner [data-panel-title="estimate"] { display: none; }
.planner.is-unavailable [data-panel-title="rates"], .no-js .planner [data-panel-title="rates"] { display: inline !important; }
.planner.is-unavailable .planner-panel .rates caption,
.no-js .planner .planner-panel .rates caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Saved: reference, access sentence and ways to change course ----------------------- */
.saved { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
/* The reference row never grows past the panel: the copy button moves under the reference when both do not fit
   (a wide reference at 320px, WCAG 1.4.12 text spacing), and a reference wider than the row breaks at a hyphen. */
.saved__ref > div { min-width: 0; }
.saved__ref .ref { white-space: normal; }
@media (max-width: 359px) { .saved__ref .ref--lg { font-size: 1.1875rem; } }
.saved__ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); background: var(--green-50); box-shadow: inset 0 0 0 1px rgba(18, 53, 46, 0.1); }
.saved__ref:focus { outline: none; }
.saved__ref:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.saved__label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 600; color: var(--green-700); }
.saved__label .icon { width: 18px; height: 18px; }
.saved__ref .icon-btn { background: var(--paper-50); }
.saved__copy-status:empty { display: none; }
.saved__copy-status { margin-top: -4px; }
.saved__manual { display: grid; gap: 6px; }
.saved__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.saved__links .link-arrow, .saved__jump { font-size: var(--fs-small); }

/* Optional contact request: its own full-width card after the saved Quote ---------------- */
.contact-step { display: grid; gap: var(--space-6); padding: clamp(20px, 3vw, 40px); box-shadow: var(--shadow-print); }
.contact-step:focus { outline: none; }
.contact-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 900px) { .contact-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; } }
.contact-step__intro > * + * { margin-top: var(--space-3); }
.contact-step__intro .tag { margin-bottom: var(--space-2); }
.contact-step__intro .form-note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.contact-step__pair { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .contact-step__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.field--short { max-width: 26rem; }
.textarea--short { min-height: 96px; }
.contact-step__actions { display: grid; gap: var(--space-3); }
@media (min-width: 620px) { .contact-step__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } }
.contact-step__actions .btn { min-width: 220px; }
.contact-step__form .alert__actions .btn { min-width: 0; }
.contact-step__done { grid-column: 1 / -1; display: grid; gap: var(--space-4) var(--space-6); }
.contact-step__done:focus { outline: none; }
.contact-step__done:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.contact-step__done-head { display: grid; gap: var(--space-3); align-content: start; }
.contact-step__done-body { display: grid; gap: var(--space-3); align-content: start; max-width: 36rem; }
.contact-step__done-body .cta-row { margin-top: var(--space-2); }
@media (min-width: 900px) { .contact-step__done { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); } .contact-step__done-body { padding-top: 60px; } }
.success__icon { width: 44px; height: 44px; color: var(--green-700); stroke-width: 1.5; }
#quote-contact-done-value { white-space: nowrap; }
.success__call { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--fs-small); }
.contact-step.is-done .contact-step__intro, .contact-step.is-done .contact-step__form { display: none; }

/* Help disclosure ---------------------------------------------------------------- */
.planner-help { padding-bottom: var(--section-pad); }
.planner-help__details { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.planner-help__details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-s); line-height: 1.25; letter-spacing: -0.01em; color: var(--text-strong); }
.planner-help__details summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .planner-help__details summary:hover .faq__toggle { border-color: var(--green-900); } }
.planner-help__details[open] .faq__toggle { background: var(--green-900); border-color: var(--green-900); }
.planner-help__details[open] .faq__toggle::before, .planner-help__details[open] .faq__toggle::after { background: var(--paper-50); }
.planner-help__details[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.planner-help__grid { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-6); }
.planner-help__grid h2 { margin-bottom: var(--space-3); }
.planner-help__grid h2 + p, .planner-help__grid p + p { margin-top: var(--space-2); }
.planner-help__grid .ticks + h2 { margin-top: var(--space-5); }
@media (min-width: 900px) { .planner-help__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Phones: map and result bar run edge to edge and fill the first screen; tools stay on one row;
   the help line moves from the map into the result bar (the map keeps its live status for AT) */
@media (max-width: 759px) {
  .planner-head { padding-block: 16px 12px; }
  .planner-head .kicker { margin-bottom: 8px; }
  .planner-head__title { font-size: 1.875rem; }
  .planner-map { height: clamp(260px, calc(100svh - 376px), 480px); margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0 !important; box-shadow: none; }
  .planner[data-mode="postcode"] .planner-map { height: clamp(260px, calc(100svh - 560px), 420px); }
  /* Place search folds into a map button; it opens the same labelled field above the map */
  .planner:not(.is-search-open) .planner-search { display: none; }
  .map-search:not([hidden]) { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 2; }
  .map-search[aria-expanded="true"] { background: var(--terra-100); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--terra-600); color: var(--terra-800); }
  .result-bar:not([hidden]) {
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
    border-radius: 0;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .result-bar__help:not([hidden]) { display: block; }
  .map-help { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map-zoom { display: none !important; }
  .planner-method__seg .segmented__option span { padding: 0 10px; font-size: 0.875rem; }
  .map-tools { max-width: calc(100% - 80px); flex-wrap: nowrap; }
  /* While drawing the search button steps aside (unless its panel is open), so the tools take the row */
  .planner.is-drawing:not(.is-search-open) .map-tools { max-width: calc(100% - 24px); }
  .map-tool { padding: 0 14px; }
  .map-tool__label--hide-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map-tool--compact-sm { width: 44px; padding: 0; justify-content: center; }
  .planner-postcode__row { grid-template-columns: minmax(0, 1fr); }
  .planner-postcode .field__hint { display: none; }
  .planner.is-unavailable .planner-map, .no-js .planner .planner-map { min-height: 0; margin-inline: 0; border-inline: 1px solid rgba(18, 53, 46, 0.22); border-radius: var(--radius-m) !important; }
  .map-fallback__actions .btn { width: 100%; }
}
/* Narrow phones: Draw area becomes icon-only while drawing so Draw area, Finish, Undo and Delete keep one row.
   The visually hidden text keeps its accessible name. */
@media (max-width: 359px) {
  .planner.is-drawing #quote-draw { width: 44px; padding: 0; justify-content: center; }
  .planner.is-drawing #quote-draw .map-tool__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 399px) {
  .planner.is-drawing.is-search-open #quote-draw { width: 44px; padding: 0; justify-content: center; }
  .planner.is-drawing.is-search-open #quote-draw .map-tool__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 374px) {
  .planner-method__seg .segmented__option span { padding: 0 6px; font-size: 0.8125rem; }
  .planner-method__seg .segmented__option span .icon { display: none; }
  .result-bar__figures { gap: var(--space-3); }
  .result-bar__figures strong { font-size: 1.25rem; }
  .result-bar__go { width: 44px; padding: 0; }
  .result-bar__go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .figures .stat__value { font-size: 1.75rem; }
}

@media (forced-colors: active) {
  .map-tool, .map-zoom, .map-chip, .map-help, .quote-corner, .planner-map .map-dot { border: 1px solid ButtonText; }
  .map-tool[aria-pressed="true"] { outline: 2px solid Highlight; }
  .quote-map-crosshair::before, .quote-map-crosshair::after { background: CanvasText; }
}