/* Get a quote: four questions plus contact info. Send opens the visitor's email app (js/quote.js).
   Cream since r6: fields and the email box are paper with navy lines, a picked
   chip is navy with a cream label, errors are the light-side red. */

/* "Rather email?" is in the markup twice and only one shows. On narrow columns
   it's a strip above the form (--top), so the address shows once, early, and
   not again right above the footer. From 900 that one hides and the panel
   after the form (--side) takes its own column on the right and stays in view
   while the form scrolls. Either way the Tab order matches the screen: on
   wide screens it's the form first, then the panel. */
.quote-layout { display: grid; gap: var(--space-6); }
.quote-main { min-width: 0; }
.quote-aside--side { display: none; }
@container col (min-width: 900px) {
  .quote-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(var(--space-7), 4vw, 10rem); align-items: start; }
  .quote-aside--top { display: none; }
  .quote-aside--side { display: block; position: sticky; top: var(--space-6); }
}
@container col (min-width: 1500px) {
  .quote-layout { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
}

/* From a 1700 px column the form runs in rows of two, in reading order:
   questions 1 and 2, then 3 and 4, then the contact fields across the full
   width (Name under the left column, Email and Phone under the right), then
   Send under them. */
.qform { display: grid; gap: 0; }
@container col (min-width: 1700px) {
  .qform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 5vw, 8rem); }
  #q5, .qsend { grid-column: 1 / -1; }
  #q5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: inherit; align-items: start; }
  #q5 > .fields-2 { grid-column: 2; }
  #q5 > .qhelp { grid-column: 1 / -1; }
}
/* Text fields and the rooftop chips stop at a comfortable line length. */
@container col (min-width: 1150px) {
  .qstep > .field, .qstep .fields-2, .qchips--rooftops { max-width: 44rem; }
}
.qstep {
  display: grid;
  /* In a row of two the shorter step keeps its own spacing instead of
     spreading its rows to the taller one's height. */
  align-content: start;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-7) 0;
  border: 0;
  /* Each question opens on the chapter rule (layout.css, "Section rhythm"). */
  border-top: var(--rule-width) solid var(--line-rule);
  min-width: 0;
}
.qstep__legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-2);
}
.qstep__legend + * { clear: both; }
.qstep__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  /* Numerals (r8): Barlow Semi Condensed 800, tabular. */
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--type-label-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-text);
  translate: 0 -0.2em;
}
/* Heading-3 (r8): Barlow 600 in sentence case. */
.qstep__q { font-family: var(--type-heading-3-family); font-size: var(--type-heading-3-size); font-weight: var(--type-heading-3-weight); text-transform: var(--type-heading-3-case); letter-spacing: var(--type-heading-3-tracking); line-height: var(--type-heading-3-leading); text-wrap: balance; }

.qgroup { display: grid; gap: var(--space-3); min-width: 0; }
.qgroup__label { color: var(--color-text-muted); }

/* Chips for radios and checkboxes. The native input stays for keyboard and AT.
   The chips flow as inline boxes so their rows can be balanced, like the Work
   filters, and no group ends on one chip alone (Makes on "Other" and When on
   "Just planning ahead" at 1024, Services on "Not sure yet"). On phones Makes
   runs to nine rows and more, past what balance handles, so there it only
   keeps one chip from sitting alone on the last row (pretty). A chip too wide
   to share a row still takes a row of its own. */
.qchips { display: block; text-wrap: balance; margin-bottom: calc(-1 * var(--space-2)); }
.qchip { position: relative; display: inline-flex; margin: 0 var(--space-2) var(--space-2) 0; vertical-align: top; }
@container col (width < 520px) {
  .qchips--makes { text-wrap: pretty; }
}
.qchip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.qchip span {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: var(--size-touch-min);
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  /* A control in reading type: Barlow 600 (r8; it was 500, which the r8
     request doesn't load). The picked chip keeps 600 and shows its state
     by the navy fill and the tick. */
  font-family: var(--font-text);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  transition: background-color var(--hover) var(--ease-out), border-color var(--hover) var(--ease-out), color var(--hover) var(--ease-out);
  pointer-events: none;
}
.qchip span::before {
  content: "";
  width: 0;
  height: 10px;
  margin-right: -0.55em;
  border: solid var(--gist-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -2px);
  opacity: 0;
  transition: width var(--hover) var(--ease-out), margin var(--hover) var(--ease-out), opacity var(--hover) var(--ease-out);
}
.qchip input:hover + span { border-color: var(--color-text); }
/* Picked: a navy chip with a cream label and tick (control-sized, so navy may fill it). */
.qchip input:checked + span { background: var(--color-bg-brand); border-color: var(--color-bg-brand); color: var(--gist-cream); font-weight: 600; }
.qchip input:checked + span::before { width: 5px; margin-right: 0.1em; opacity: 1; }
.qchip input:focus-visible { outline: none; animation: none; }
.qchip input:focus-visible + span { outline: var(--border-focus-width) solid var(--color-focus); outline-offset: var(--border-focus-offset); animation: focus-pull 240ms var(--motion-ease-out); }
/* Rooftops: four even cells, two by two on phones. */
.qchips--rooftops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: 0; }
.qchips--rooftops .qchip { margin: 0; }
.qchips--rooftops .qchip span { width: 100%; justify-content: center; }
@container col (min-width: 520px) {
  .qchips--rooftops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Text fields */
.field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.field__label { font-size: var(--type-body-small-size); font-weight: 600; }
.field__opt { color: var(--color-text-muted); font-weight: 400; }
/* "(pick any)" beside the Makes label: a hint in reading type, not part of
   the label (r8; it was an inline style in js/views/quote.js). At the small
   reading size (15 px on phones, 16 at 1440), like "(optional)" in the field
   labels: at the label's 13 px its lowercase read smaller than any other
   running text (r8 fix round 1). */
.qgroup__label .field__opt { font-family: var(--font-text); font-size: var(--type-body-small-size); font-weight: var(--font-weight-regular); text-transform: none; letter-spacing: 0; }
.field__input {
  width: 100%;
  min-height: var(--size-control);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: max(16px, var(--type-body-size));
  transition: border-color var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out);
}
.field__input:hover { border-color: var(--color-text-muted); }
.field__input:focus-visible { --focus-offset: 1px; border-color: var(--color-focus); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.field__input { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
input[type="date"].field__input { max-width: 18rem; color-scheme: light; }
/* Fields line up at the top, so an error under Email doesn't stretch Phone. */
.fields-2 { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 720px) { .fields-2 { grid-template-columns: 1fr 1fr; } }

.qhelp { color: var(--color-text-muted); max-width: 60ch; }

.qerror {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: var(--color-error);
  font-size: var(--type-body-small-size);
  font-weight: 600;
  line-height: 1.4;
}
.qerror svg { width: 18px; height: 18px; flex: none; margin-top: 0.05em; }
.qerror:empty { display: none; }

.qsend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--color-line);
}
.qsend .btn { min-width: 12rem; }

.qmail {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--line-panel);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
@container col (min-width: 520px) {
  .qmail { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
}
@container col (min-width: 900px) {
  .qmail { display: grid; padding: clamp(var(--space-5), 2vw, var(--space-7)); }
}

.qdone {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  padding: var(--space-8) 0 var(--space-6);
  border-top: var(--border-hairline) solid var(--color-line);
}
.qdone__title { font-size: var(--type-display-3-size); }
/* What to do if no email app opened: the address, a copy of the answers, the same email again. */
.qdone__help {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 40rem;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--line-panel);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.qdone__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.qdone__actions a.email__copy { color: var(--color-text); text-decoration: none; }
.qdone__answers {
  margin: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  color: var(--color-text);
  user-select: all;
  -webkit-user-select: all;
}