.asrp {
  padding: 56px 0;
  background: #fafaf6;
}

.asrp-root {
  background: #fff;
  border: 1px solid #e6e2d8;
  border-radius: 4px;
  padding: 24px;
}

.asrp-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b08d57;
  margin: 0 0 4px;
}

.asrp-title {
  font-family: var(--as-font-display, "Cormorant Garamond", serif);
  font-size: 32px;
  margin: 0 0 20px;
}

.asrp-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.asrp-tab {
  padding: 12px 8px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.asrp-tab.is-active {
  background: #1d2b3a;
  border-color: #1d2b3a;
  color: #fff;
}

.asrp-tab[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.asrp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.asrp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.asrp-card.is-active {
  border-color: #b08d57;
  background: #f7f1e7;
}

.asrp-card__title { font-weight: 600; }
.asrp-card__note { font-size: 12px; color: #6b6b6b; }

.asrp-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.asrp-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.asrp-field input { padding: 10px; border: 1px solid #e6e2d8; border-radius: 3px; }

.asrp-check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 14px; }
.asrp-note { font-size: 13px; color: #6b6b6b; }
.asrp-sub { margin: 20px 0 8px; font-size: 15px; }

.asrp-opening,
.asrp-appliance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.asrp-opening select,
.asrp-opening input,
.asrp-appliance select {
  padding: 8px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
}

.asrp-finishes { display: flex; flex-wrap: wrap; gap: 8px; }

.asrp-finish {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.asrp-finish.is-active { border-color: #b08d57; background: #f7f1e7; }
.asrp-finish__chip { width: 18px; height: 18px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); }

.asrp-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

.asrp-btn {
  padding: 12px 22px;
  border: 0;
  border-radius: 3px;
  background: #b08d57;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.asrp-btn--ghost { background: transparent; color: #1d2b3a; border: 1px solid #e6e2d8; }

.asrp-error {
  margin-top: 16px;
  padding: 12px;
  border-left: 3px solid #c0392b;
  background: #fdf3f2;
  font-size: 14px;
}

@media (max-width: 767px) {
  .asrp-root { padding: 16px; }
  .asrp-tabs { grid-template-columns: repeat(2, 1fr); }
  .asrp-title { font-size: 26px; }
}

.asrp-plan { margin-top: 24px; }

/* Steps 2-4 draw the live plan above the step's fields. Done with `order` on a
   flex column rather than by moving nodes, so the plan view keeps its identity
   (and its listeners) across every step change. */
.asrp-root--plan-first { display: flex; flex-direction: column; }
.asrp-root--plan-first > .asrp-head { order: 1; }
.asrp-root--plan-first > .asrp-tabs { order: 2; }
.asrp-root--plan-first > .asrp-step { order: 4; margin-top: 24px; }
.asrp-root--plan-first > .asrp-error { order: 6; }

/* The reference's order is plan, then the fields, then the 3D preview — three
   siblings of one column. Ours are wrapped in `.asrp-views`, so that wrapper
   steps out of the way and lets its children take their own place in the
   column. Scoped to `:not([hidden])` because `display: contents` would
   otherwise beat the UA's `[hidden] { display: none }` and un-hide the whole
   block on step 1. */
.asrp-root--plan-first > .asrp-views:not([hidden]) { display: contents; }
.asrp-root--plan-first > .asrp-views > .asrp-view--plan { order: 3; }
.asrp-root--plan-first > .asrp-views > .asrp-view--iso { order: 5; }
.asrp-root--plan-first > .asrp-views > .asrp-view--plan .asrp-plan { margin-top: 8px; }

/* Steps 2-4: the preview is simply open, with no toggle and no essay. */
.asrp-iso--preview [data-show-3d],
.asrp-iso--preview > .asrp-note { display: none; }

.asrp-plan__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

/* Steps 2-4: the reference shows the plan and a zoom readout, nothing else. */
.asrp-plan--compact .asrp-plan__bar button:not([data-zoom]),
.asrp-plan--compact > .asrp-note { display: none; }
.asrp-plan--compact .asrp-plan__bar { margin-top: -34px; justify-content: flex-end; }

.asrp-plan__bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.asrp-plan__bar button {
  padding: 6px 10px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.asrp-plan__zoom { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Shown when the packer could not fit an appliance. Never hidden by compact
   mode — steps 2-4 are exactly where a customer is choosing the sizes that
   cause it. */
.asrp-plan__gaps {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-left: 3px solid #b08d57;
  background: #f9f4ec;
  font-size: 13px;
}
.asrp-plan__canvas {
  overflow-x: auto;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  /* The drawing is a fixed size now, so centre it rather than leaving it
     stranded against the left edge of a full-width box. */
  display: flex;
  justify-content: center;
}

.asrp-svg { display: block; height: auto; }
.asrp-floor { fill: #fbfaf7; }
.asrp-grid line { stroke: #efe9de; stroke-width: calc(var(--asrp-px, 1) * 0.6); }
/* stroke-width is set inline, in inches converted from px — see plan2d.js. */
.asrp-wall { stroke: #3a3735; }
.asrp-island { fill: #f4ecdd; stroke: #9c8765; stroke-width: var(--asrp-px, 1); }
.asrp-island__split { stroke: #9c8765; stroke-width: var(--asrp-px, 1); }
.asrp-island__clear { stroke: #6e665c; stroke-width: var(--asrp-px, 1); stroke-dasharray: 5 4; opacity: .6; }
.asrp-unit--island rect { fill: #f4ecdd; }

/* Fixture palette, read straight off the reference:
   steel #CDD2D7 / steelStroke #8A9099 for anything that is an appliance,
   cabStroke #9C8765 for cabinetry, filler #B8C4D6, ink #2B2A28, sub #6E665C.
   Appliances used to be a dashed cream box, indistinguishable at a glance from
   a cabinet — which is the whole reason the plan did not read. */
.asrp-unit rect { fill: #fff; stroke: #9c8765; stroke-width: var(--asrp-px, 1); }
/* Sizes are set inline by plan2d.js — see the note on .asrp-dim. */
.asrp-unit text { fill: #2b2a28; }
.asrp-unit__sku { fill: #6e665c; }
.asrp-unit__filler { fill: #5b6b85; }
.asrp-unit.is-selected rect { stroke: #b0844a; stroke-width: calc(var(--asrp-px, 1) * 2); }

.asrp-unit--sink_base rect { fill: #fff; }
.asrp-unit--appliance rect { fill: #cdd2d7; stroke: #8a9099; }
.asrp-unit--appliance text { fill: #8a9099; }
.asrp-unit--filler rect { fill: #b8c4d6; stroke: #8a9099; stroke-dasharray: 3 2; }
.asrp-unit--corner_base rect { fill: #f7f1e7; }

/* Sink: basin, bowl, tap. */
.asrp-basin { fill: #eef1f3; stroke: #8a9099; stroke-width: var(--asrp-px, 1); }
.asrp-basin__bowl { fill: #cdd2d7; stroke: #8a9099; stroke-width: var(--asrp-px, 1); opacity: .7; }
.asrp-basin__tap { fill: #8a9099; }

/* Range: burner rings. */
.asrp-burner { fill: none; stroke: #8a9099; stroke-width: calc(var(--asrp-px, 1) * 1.3); }

.asrp-island__name { fill: #6e665c; letter-spacing: .08em; }
.asrp-handle { fill: transparent; cursor: ew-resize; }

/* Doors and windows. A door reads as an absence — dashed outline, no fill of
   its own — and its swing is the faintest mark on the drawing. */
.asrp-opening polygon { fill: #fbfaf7; stroke: #6e665c; stroke-width: var(--asrp-px, 1); stroke-dasharray: 4 3; }
.asrp-opening text { fill: #6e665c; letter-spacing: 0.06em; }
.asrp-opening__leaf { stroke: #6e665c; stroke-width: calc(var(--asrp-px, 1) * 1.3); fill: none; opacity: .6; }
.asrp-opening__swing { stroke: #6e665c; stroke-width: var(--asrp-px, 1); fill: none; opacity: .35; }
.asrp-opening--window polygon { fill: #dce6ec; stroke-dasharray: none; }

/* Dimension chain. No `font-size` here on purpose: this SVG's user unit is an
   inch, so a size set in CSS is read as inches and a "7px" label comes out
   seven inches tall. plan2d.js sets it inline, converted through the drawing's
   own scale. */
/* Figures are near-black, as the reference draws them. At #6b6b6b on a cream
   floor a 7px number is legible in a screenshot and mush on a real screen. */
.asrp-dim { fill: #2b2a28; cursor: pointer; }
.asrp-dim:hover { fill: #b08d57; text-decoration: underline; }
.asrp-chain__line { stroke: #6e665c; stroke-width: calc(var(--asrp-px, 1) * 0.7); fill: none; }
.asrp-chain__tick { stroke: #6e665c; stroke-width: calc(var(--asrp-px, 1) * 0.7); fill: none; }
.asrp-chain__total-line { stroke: #2b2a28; stroke-width: calc(var(--asrp-px, 1) * 0.8); fill: none; }
/* The lines running back to the wall are the faintest thing in the chain, so
   they read as construction lines and not as part of the room. */
.asrp-chain__ext { stroke: #6e665c; stroke-width: calc(var(--asrp-px, 1) * 0.4); fill: none; opacity: .55; }
.asrp-chain__total rect { fill: rgba(255, 255, 255, 0.92); stroke: #cfc7b5; stroke-width: calc(var(--asrp-px, 1) * 0.7); }
.asrp-chain__total text { fill: #2b2a28; }

/* Additions beyond the brief's own block: drag affordances (unit bodies are
   draggable to move, not just clickable to select) and the overall
   per-wall dimension, which is informational text, not a click target. */
.asrp-unit { user-select: none; touch-action: none; }
.asrp-unit rect:not(.asrp-handle) { cursor: grab; }
.asrp-dim--wall { cursor: default; pointer-events: none; fill: #9a948a; }
.asrp-dim--wall:hover { fill: #9a948a; text-decoration: none; }

/* --- Elevation view (Task 14) --- */

.asrp-elev { margin-top: 24px; }
.asrp-elev__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.asrp-elev__tab {
  padding: 6px 12px;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  text-transform: capitalize;
  cursor: pointer;
}

.asrp-elev__tab.is-active { background: #1d2b3a; border-color: #1d2b3a; color: #fff; }

.asrp-elev__walltools,
.asrp-elev__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: #f7f1e7;
  border-radius: 3px;
  margin-bottom: 8px;
  font-size: 13px;
}

.asrp-elev__walltools button,
.asrp-elev__tools button,
.asrp-elev__tools select {
  padding: 6px 10px;
  border: 1px solid #e0d6c2;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

/* The selected front (door/2-drawer/3-drawer) for the currently selected
   base cabinet, so the tools bar itself shows which option is live. */
.asrp-elev__tools button[data-active] { border-color: #b08d57; background: #f7ecd9; }

.asrp-elev__heading { margin: 12px 0 4px; font-size: 13px; text-transform: capitalize; color: #6b6b6b; }
.asrp-svg--elev { border: 1px solid #e6e2d8; border-radius: 3px; background: #fbfaf7; display: block; margin-bottom: 8px; }

.asrp-elevunit rect { fill: #fff; stroke: #b3aa96; stroke-width: 0.8; }
.asrp-elevunit line { stroke: #cfc7b5; stroke-width: 0.5; }
.asrp-elevunit text { font-size: 5px; fill: #1d2b3a; }
.asrp-elevunit--wall rect { fill: #fdfcf9; }
.asrp-elevunit--stacker rect { fill: #f4f0e6; }
.asrp-elevunit.is-selected rect { stroke: #b08d57; stroke-width: 1.6; }

/* Purely decorative — the actual hit target is `.asrp-elev__heightline-hit`
   below. This line's own painted stroke is only ~0.8 SVG units wide and
   sits flush with a wall cabinet's own top border at the same Y, so relying
   on this element for hit-testing (even with a wider pointer-events value)
   is fragile: a press aimed at its mathematical centre can land on the
   cabinet's border underneath instead. */
.asrp-elev__heightline { stroke: #b08d57; stroke-width: 0.8; stroke-dasharray: 3 2; pointer-events: none; }

/* Invisible, generously wide grab target layered on top of everything else
   in the elevation, so the boundary is easy to grab regardless of exactly
   which pixel a press lands on. `pointer-events: stroke` hit-tests the
   stroke's geometry even though it is never actually painted (transparent). */
.asrp-elev__heightline-hit { stroke: transparent; stroke-width: 8; pointer-events: stroke; cursor: ns-resize; touch-action: none; }

/* --- Isometric 3D preview (Task 15) --- */

.asrp-iso { margin-top: 24px; }
.asrp-iso__head { display: flex; align-items: center; gap: 12px; }
.asrp-iso__canvas { overflow-x: auto; border: 1px solid #e6e2d8; border-radius: 3px; background: #fbfaf7; }
.asrp-svg--iso { display: block; width: 100%; height: auto; max-height: 520px; }

/* --- Item table, stats, review findings and the sign-in gate (Task 16) --- */

.asrp-items { margin-top: 24px; }

.asrp-review { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.asrp-review--ok { font-size: 13px; color: #4a7c59; }

.asrp-review__item {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 13px;
  background: #fdf8ee;
  border-left: 3px solid #d9a441;
}

.asrp-gate {
  padding: 20px;
  border: 1px dashed #d8cfbb;
  border-radius: 3px;
  background: #faf7f0;
  text-align: center;
  margin-bottom: 16px;
}

.asrp-gate__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.asrp-gate__note { font-size: 13px; color: #6b6b6b; margin: 0 0 12px; }
.asrp-gate__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0; }
.asrp-gate__actions a { text-decoration: none; }

.asrp-stats { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; flex-wrap: wrap; }

.asrp-table-wrap { overflow-x: auto; }
.asrp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.asrp-table th, .asrp-table td { padding: 10px 8px; border-bottom: 1px solid #eee9dd; text-align: left; }
.asrp-table th { font-weight: 600; color: #6b6b6b; }
.asrp-table tfoot td { font-weight: 600; border-top: 2px solid #1d2b3a; border-bottom: 0; }
.asrp-table .is-unpriced { color: #9a8f7a; font-style: italic; }

/* --- Step 1 / header, matching the reference's compact card ------------- */

.asrp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.asrp-head__titles .asrp-title { margin-bottom: 0; }

.asrp-head__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.asrp-head__version {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #9a8f7a;
}

/* The layout thumbnail: the run of cabinets each layout produces. */
.asrp-card__icon {
  width: 48px;
  height: 32px;
  margin-bottom: 6px;
  stroke: #b08d57;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}

.asrp-card.is-active .asrp-card__icon { stroke: #8f6f3c; }

/* Fullscreen. :fullscreen covers the real API; the class is the fallback for
   browsers that refuse the request, so the button is never a dead control. */
.asrp-root:fullscreen,
.asrp-root.is-faux-fullscreen {
  overflow-y: auto;
  border-radius: 0;
}

.asrp-root.is-faux-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

@media (max-width: 640px) {
  .asrp-head { flex-direction: column; }
  .asrp-head__tools { align-self: flex-end; }
}

/* --- Step 0: the room chooser ------------------------------------------ */

.asrp-cards--rooms { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.asrp-cards--rooms .asrp-card {
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}

.asrp-card__icon--room {
  width: 56px;
  height: 38px;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* A room whose pack does not exist yet is shown but not offered — seeing what
   the tool will cover is useful; a card that opens an empty planner is not. */
.asrp-card.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
  background: #faf8f4;
}

.asrp-card.is-unavailable .asrp-card__note {
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* --- Step headings ------------------------------------------------------
   `.asrp-step__title` had no rule of its own and inherited the theme's h3
   margins, which sit far too tight above the cards on every step. Fixing it
   here rather than only on the room chooser, because "Choose your kitchen
   layout" and "Enter wall dimensions" had exactly the same problem. */

.asrp-step__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px;
}

/* The room chooser is a screen of its own rather than a step inside the
   wizard, so it has to carry the vertical space the tab strip would otherwise
   have given it — without that it reads as a cramped strip rather than a
   choice worth making. */
.asrp-cards--rooms { margin-bottom: 20px; }

.asrp-step__title--gate {
  margin: 34px 0 28px;
  font-size: 19px;
}

/* The chooser is the whole screen, so it gets room to breathe rather than the
   tighter padding a step body sits in. */
.asrp-root.is-gate { padding: 32px 32px 40px; }

.asrp-cards--rooms .asrp-card { padding: 32px 20px; gap: 8px; }

.asrp-cards--rooms .asrp-card__icon--room { margin-bottom: 12px; }

@media (max-width: 640px) {
  .asrp-root.is-gate { padding: 20px 16px 28px; }
  .asrp-step__title--gate { margin: 24px 0 16px; }
  .asrp-cards--rooms .asrp-card { padding: 24px 16px; }
}

/* --- The wall drawing surface ------------------------------------------- */

.asrp-draw {
  width: 100%;
  height: auto;
  max-height: 46vh;
  background: #fdfcf9;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  /* Required, or a touch drag scrolls the page instead of drawing. */
  touch-action: none;
}

.asrp-draw__grid line { stroke: #efe9dc; stroke-width: 0.6; }

.asrp-draw__wall {
  stroke: #1d2b3a;
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
}

.asrp-draw__wall.is-selected { stroke: #b08d57; stroke-width: 5; }

/* An open wall has no wall built, but cabinets still go in — dashed says
   "nothing here to build against" without hiding the run. */
.asrp-draw__wall.is-open { stroke-dasharray: 8 6; }

.asrp-draw__ghost {
  stroke: #b08d57;
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.asrp-draw__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.asrp-draw__controls .asrp-note { flex: 1 0 100%; margin: 4px 0 0; }

/* Island size fields sit under their checkbox, indented so they read as its
   detail rather than as another top-level question. */
.asrp-fields--island {
  margin: 4px 0 6px 28px;
  max-width: 320px;
}

/* Opening rows carry labelled fields now, so they align on the baseline of the
   inputs rather than the tops of the labels. */
.asrp-opening { align-items: flex-end; }

.asrp-field--tight { max-width: 150px; }
.asrp-field--tight span { font-size: 12px; }

/* --- Step-5 editor --------------------------------------------------- */
.asrp-view--editor { margin: 12px 0; }
.asrp-editor { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.asrp-panel { border: 1px solid #e4dccf; border-radius: 10px; padding: 12px; background: #fff; display: grid; gap: 8px; }
.asrp-panel__title { margin: 0; font-size: 13px; font-weight: 700; }
.asrp-panel__row { display: flex; gap: 6px; flex-wrap: wrap; }
.asrp-panel__row .asrp-btn { flex: 1 1 auto; }
.asrp-panel__run,
.asrp-panel select,
.asrp-panel input[type="number"] { width: 100%; padding: 7px 8px; border-radius: 8px; border: 1px solid #e4dccf; font-size: 13px; background: #faf8f4; }
.asrp-note--tight { margin: 0; font-size: 11.5px; }
.asrp-note--flash { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #b0844a; }
.asrp-btn--warn { color: #c2683b; border-color: #c2683b; }
.asrp-btn--solid { background: #2b2a28; color: #fff; border-color: #2b2a28; font-weight: 700; }
.asrp-island { cursor: grab; }
.asrp-island__grip { fill: #6b675f; stroke: #fff; stroke-width: 1; cursor: nwse-resize; }

/* --- step 5: the enquiry card -------------------------------------------- */

.asrp-enquiry {
  margin-top: 24px;
  padding: 24px;
  /* Matched to the planner's other panels (.asrp-plan__canvas, .asrp-card)
     rather than the 8px/#e3e3e3 box it used to be, which belonged to nothing. */
  border: 1px solid #e6e2d8;
  border-radius: 3px;
}

.asrp-enquiry__title {
  margin: 0 0 4px;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px;
  font-weight: 500;
}

.asrp-enquiry__lead {
  margin: 0 0 16px;
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-size: 14px;
  color: #6b6b6b;
}

.asrp-enquiry__actions {
  margin-bottom: 20px;
}

.asrp-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

@media (max-width: 640px) {
  .asrp-form__grid {
    grid-template-columns: 1fr;
  }
}

/* The form is a real Contact Form 7 form, so none of the wizard's own field
   styles reach it and it was rendering as raw browser defaults — a different
   typeface, square grey inputs and a system button — inside a themed page.
   These mirror `.contact-form--cf7` in the theme, token for token, so the
   planner's enquiry and the site's contact form are the same form. Every
   token carries the theme's own value as a fallback: the plugin can be
   mounted on a page that never loaded the design system. */

.asrp-enquiry .wpcf7-form-control-wrap { display: block; }

.asrp-enquiry .wpcf7-form p { margin: 0 0 var(--space-4, 1rem); }

.asrp-enquiry .wpcf7-form label {
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-weight: var(--weight-medium, 500);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text, #2c2c2a);
  display: block;
}

.asrp-enquiry input.wpcf7-form-control:not([type='submit']),
.asrp-enquiry textarea.wpcf7-form-control {
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-size: 14px;
  color: var(--color-text, #2c2c2a);
  background: #fafaf6;
  border: 1px solid #e2e4e3;
  border-radius: 0;
  padding: 12px;
  width: 100%;
  margin-top: var(--space-2, 0.5rem);
}

.asrp-enquiry input.wpcf7-form-control::placeholder,
.asrp-enquiry textarea.wpcf7-form-control::placeholder { color: #757575; }

.asrp-enquiry input.wpcf7-form-control:focus-visible,
.asrp-enquiry textarea.wpcf7-form-control:focus-visible {
  outline: none;
  border-color: var(--color-gold, #c9a84c);
}

.asrp-enquiry textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }

.asrp-enquiry input.asrp-form__submit,
.asrp-enquiry input[type='submit'] {
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-weight: var(--weight-medium, 500);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-on-navy, #fff);
  background: var(--color-primary, #0b1e38);
  border: none;
  border-radius: 0;
  padding: 14px 12px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}

.asrp-enquiry input[type='submit']:hover,
.asrp-enquiry input[type='submit']:focus-visible {
  background: var(--color-gold, #c9a84c);
  color: var(--color-primary, #0b1e38);
}

.asrp-enquiry input[type='submit']:focus-visible {
  outline: 2px solid var(--color-primary, #0b1e38);
  outline-offset: 2px;
}

.asrp-enquiry input[type='submit']:active { transform: translateY(1px); }

/* CF7 puts the spinner after the button in flow, which reserves ~40px of dead
   space under it. The theme pins it inside the button; ours has no wrapper to
   pin against, so it simply sits inline and takes no height of its own. */
.asrp-enquiry .wpcf7-spinner { margin: var(--space-2, 0.5rem) 0 0; }

.asrp-enquiry .wpcf7-response-output {
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--space-2, 0.5rem) 0 0 !important;
  padding: 10px 12px !important;
}

.asrp-enquiry .wpcf7-not-valid-tip {
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  color: var(--color-error, #ef4444);
  margin-top: 4px;
}

/* The drawings are rasterised between the click and the real submit, which
   takes a moment on a large kitchen. Without this the button looks dead. */
.asrp-enquiry form.is-preparing .asrp-form__submit {
  opacity: 0.6;
  pointer-events: none;
}