/* All questionnaire styling is scoped so the garage and crew desk keep their themes. */
.conversation-page {
  --form-bg: #fbfcfd;
  --form-text: #101923;
  --form-muted: #526b81;
  --form-line: #d7e1e7;
  --form-control: #f8fbfd;
  --form-border: #b7c9d4;
  --form-selected: #e6f8fd;
  --form-accent: #007fa3;
  --form-track: #d1e1e8;
  --blue: #00bde8;
  background: var(--form-bg);
  color: var(--form-text);
  color-scheme: light;
}
[data-form-theme=dark] .conversation-page {
  --form-bg: #090f13;
  --form-text: #f4f7f9;
  --form-muted: #a9bece;
  --form-line: #293b47;
  --form-control: #0d1921;
  --form-border: #435a6a;
  --form-selected: #072a39;
  --form-accent: #00c7ed;
  --form-track: #435563;
  color-scheme: dark;
}
.conversation-page .build-header { background: var(--form-bg); border-color: var(--form-line); }
.conversation-page .build-header .brand-name > span { color: var(--form-text); }
.conversation-page .brand-mark { border: 1px solid var(--form-line); }
.form-theme-switch { display: flex; gap: .2rem; padding: .2rem; margin-left: auto; border: 1px solid var(--form-line); border-radius: 6px; }
.form-theme-switch button { display: flex; align-items: center; gap: .4rem; min-height: 34px; padding: .3rem .65rem; border: 0; border-radius: 3px; background: transparent; color: var(--form-muted); font-size: .8125rem; }
.form-theme-switch button[aria-pressed=true] { color: var(--form-text); background: var(--form-selected); box-shadow: 0 1px 3px #0000000d; }
.form-theme-switch button span { font-size: 1rem; }
.conversation-page .build-layout { padding-top: 2.5rem; gap: 4.5rem; }
.conversation-page .build-rail { position: relative; padding-top: 1.1rem; }
.conversation-page .build-rail::after { content: ''; position: absolute; top: 0; bottom: 0; right: -2.25rem; width: 1px; background: var(--form-line); }
.conversation-page .build-rail .eyebrow { color: var(--form-accent); }
.conversation-page .build-intro,
.conversation-page .build-phone,
.conversation-page .build-progress li { color: var(--form-muted); }
.conversation-page .build-phone strong,
.conversation-page .build-progress [aria-current=step] { color: var(--form-text); }
.conversation-page .step-dot { border-color: var(--form-border); }
.conversation-page .build-progress .is-complete .step-dot { color: var(--form-accent); border-color: var(--form-accent); }
.conversation-page .build-photo { border-color: var(--form-border); }
.conversation-page .build-photo figcaption { background: #102733; color: #f4f7f9; }
.conversation-page .build-form-area { background: transparent; border: 0; box-shadow: none; }
.conversation-progress { padding-top: 1.1rem; }
.conversation-page .build-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--form-track); }
.conversation-page .build-bar span { border-radius: 3px; }
.conversation-step { margin: 1.15rem 0 0; text-align: right; color: var(--form-muted); font-size: .9375rem; letter-spacing: .035em; }
.conversation-form { display: flex; flex-direction: column; min-height: 660px; }
.conversation-page .build-form-inner { padding: 2.6rem clamp(1rem, 5.5vw, 5rem) 2rem; }
.conversation-page .build-step-top { color: var(--form-muted); font-size: .875rem; }
.conversation-page .build-step-top strong { color: var(--form-accent); }
.conversation-section-title { margin-top: .3rem; font: 700 1.65rem/1.2 var(--display); }
.conversation-counter { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 1.3rem; color: var(--form-muted); font-size: 1.2rem; }
.conversation-counter b { color: var(--form-text); font-weight: 600; }
.conversation-counter > span:first-child { display: flex; gap: .45rem; align-items: center; }
.conversation-question-count { font-size: .8125rem; padding-left: 1rem; border-left: 1px solid var(--form-line); }
.conversation-page .conversation-question { font-family: var(--body); font-size: clamp(2.1rem, 3.65vw, 3.6rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.conversation-question:focus { outline: none; }
.conversation-description { color: var(--form-muted); font-size: 1.25rem; line-height: 1.5; margin: 1rem 0 1.75rem; max-width: 40rem; }
.conversation-page .build-fields { display: block; }
.conversation-field { max-width: 42rem; }
.conversation-page .build-field { gap: 0; }
.conversation-field .build-field > label:not(.consultation-consent),
.conversation-field .build-field legend,
.conversation-field .build-field > .build-note,
.conversation-field .build-field fieldset > .build-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.conversation-page .build-field input[type=text],
.conversation-page .build-field input[type=email],
.conversation-page .build-field input[type=tel],
.conversation-page .build-field input[type=number],
.conversation-page .build-field input[type=date],
.conversation-page .build-field textarea,
.conversation-page .build-field select { background: var(--form-control); color: var(--form-text); border: 1px solid var(--form-border); border-radius: 5px; min-height: 64px; font-size: 1.25rem; padding: 1.1rem 1.3rem; }
.conversation-page .build-field textarea { min-height: 155px; line-height: 1.5; }
.conversation-page .build-field input::placeholder,
.conversation-page .build-field textarea::placeholder { color: var(--form-muted); opacity: .85; }
.conversation-page .build-field input:focus,
.conversation-page .build-field select:focus,
.conversation-page .build-field textarea:focus { border-color: var(--blue); }
.conversation-page .build-choice { min-height: 68px; gap: .9rem; padding: .8rem 1rem; border-radius: 5px; background: var(--form-control); border-color: var(--form-border); color: var(--form-text); font-size: 1.125rem; }
.conversation-page .build-choice:has(input:checked) { background: var(--form-selected); border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.conversation-choice-key { display: grid; place-items: center; width: 32px; height: 34px; flex: none; font-size: 1rem; line-height: 1; border: 1px solid var(--form-border); border-radius: 4px; color: var(--form-text); }
.build-choice:has(input:checked) .conversation-choice-key { background: var(--blue); color: #07151b; border-color: var(--blue); }
.conversation-page .build-choice input { order: 3; margin-left: auto; width: 23px; height: 23px; }
.conversation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.6rem; }
.conversation-actions .button { min-width: 220px; min-height: 62px; border-radius: 5px; font-size: 1.125rem; font-weight: 600; }
.conversation-actions .button:hover { transform: none; }
.conversation-key-hint { color: var(--form-muted); font-size: .9375rem; }
.conversation-page .build-controls { margin-top: auto; padding: 1.25rem 0 0; background: transparent; border: 0; position: static; }
.conversation-page .build-back { color: var(--form-muted); font-size: 1.1rem; display: flex; gap: .8rem; align-items: center; }
.conversation-page .build-back span { font-size: 1.6rem; }
.conversation-page .build-note,
.conversation-page .build-step-description,
.conversation-page .field-optional,
.conversation-page .review-section dt { color: var(--form-muted); }
.conversation-page .review-section dd { color: var(--form-text); }
.conversation-page .review-section { border-color: var(--form-line); background: var(--form-control); border-radius: 5px; }
.conversation-page .link-button { color: var(--form-accent); }
.conversation-page .notice { color: var(--form-text); background: var(--form-selected); }
.conversation-page .notice strong { color: var(--form-text); }
.conversation-page .is-review .conversation-question { font: 700 clamp(2.4rem, 3.5vw, 3.5rem)/1.08 var(--display); margin-top: 1rem; letter-spacing: 0; }
.conversation-page .error-message { color: #9b2534; background: #fff0f1; border-color: #cf4052; }
[data-form-theme=dark] .conversation-page .error-message { color: #ffbdb5; background: #321d20; }
.conversation-page .button-outline { color: var(--form-text); border-color: var(--form-border); }
.conversation-page .success-mark, .conversation-page .receipt-ref { color: var(--form-accent); }

/* Specialized service options, calendars, and review panels use the same palette. */
.conversation-page .track-service-card, .conversation-page .booking-option,
.conversation-page .consultation-consent, .conversation-page .availability-picker,
.conversation-page .calendar-slot span, .conversation-page .consultation-slot span,
.conversation-page .maintenance-calendar-review, .conversation-page .consultation-day { background: var(--form-control); color: var(--form-text); border-color: var(--form-border); border-radius: 5px; }
.conversation-page .track-service-card { grid-template-columns: 32px minmax(0,1fr) 23px; }
.conversation-page .track-service-number { display: none; }
.conversation-page .track-service-card strong, .conversation-page .calendar-slot strong,
.conversation-page .availability-times > p, .conversation-page .consultation-facts strong,
.conversation-page .maintenance-calendar p, .conversation-page .track-calendar-title,
.conversation-page .maintenance-calendar-review span { color: var(--form-text); }
.conversation-page .track-service-card small, .conversation-page .booking-option small,
.conversation-page .calendar-slot small, .conversation-page .consultation-facts span,
.conversation-page .consultation-timezone, .conversation-page .consultation-contact-note,
.conversation-page .consultation-loading, .conversation-page .consultation-empty p,
.conversation-page .maintenance-calendar > small, .conversation-page .maintenance-calendar-empty,
.conversation-page .maintenance-calendar-loading, .conversation-page .track-inline-note,
.conversation-page .track-calendar-note, .conversation-page .track-calendar-empty,
.conversation-page .track-calendar-loading, .conversation-page .track-summary,
.conversation-page .maintenance-expectations dd, .conversation-page .availability-empty,
.conversation-page .availability-weekdays { color: var(--form-muted); }
.conversation-page .track-service-card:has(input:checked),
.conversation-page .booking-option:has(input:checked),
.conversation-page .consultation-consent:has(input:checked),
.conversation-page .calendar-slot input:checked + span,
.conversation-page .availability-day.is-selected,
.conversation-page .availability-day:not(:disabled):hover { background: var(--form-selected); border-color: var(--blue); color: var(--form-text); }
.conversation-page .availability-nav { background: var(--form-control); border-color: var(--form-border); color: var(--form-text); }
.conversation-page .availability-day { color: var(--form-text); }
.conversation-page .availability-day:disabled { color: var(--form-muted); opacity: .5; }
.conversation-page .consultation-review-time { background: var(--form-selected); }
.conversation-page .consultation-review-time span { color: var(--form-muted); }
.conversation-page .availability-times, .conversation-page .availability-month-head,
.conversation-page .maintenance-calendar, .conversation-page .track-calendar,
.conversation-page .consultation-facts, .conversation-page .track-summary,
.conversation-page .maintenance-expectations div { border-color: var(--form-line); }
.conversation-page .track-summary strong, .conversation-page .maintenance-expectations dt,
.conversation-page .maintenance-calendar-review small { color: var(--form-accent); }
.conversation-page .build-success { padding-top: 4rem; }
/* The existing garage footer and update dialog remain self-contained dark surfaces. */
.conversation-page .footer, .conversation-page .updates-dialog { color: #f4f5f4; --blue: #20b4e9; color-scheme: dark; }

@media (min-width: 1500px) {
  .conversation-page .build-layout { grid-template-columns: 340px minmax(0,1fr); }
}
@media (max-width: 1100px) {
  .conversation-page .build-layout { gap: 3rem; }
  .conversation-page .build-rail::after { right: -1.5rem; }
  .conversation-page .build-form-inner { padding-inline: 1.25rem; }
  .conversation-page .conversation-question { font-size: 2.7rem; }
  .conversation-actions { gap: 1rem; }
  .conversation-key-hint { font-size: .8125rem; }
}
@media (max-width: 700px) {
  .conversation-page .build-header { flex-wrap: wrap; height: auto; min-height: 76px; padding: .85rem 1rem; gap: .8rem; }
  .conversation-page .build-header .brand { gap: .5rem; }
  .conversation-page .build-header .brand-name { font-size: 1.35rem; }
  .conversation-page .brand-mark { width: 49px; height: 32px; }
  .conversation-page .build-header > .text-link { display: none; }
  .form-theme-switch button { padding: .3rem .45rem; }
  .conversation-page .build-layout { padding: 1.4rem 1.25rem 2.5rem; }
  .conversation-page .build-rail { padding-top: 0; }
  .conversation-page .build-rail::after { display: none; }
  .conversation-page .build-rail h1 { font-size: 2.6rem; }
  .conversation-page .build-progress li::after { background: var(--form-track); }
  .conversation-page .build-progress [aria-current=step]::after,
  .conversation-page .build-progress .is-complete::after { background: var(--blue); }
  .conversation-page .build-progress { margin-bottom: 0; }
  .conversation-progress { padding-top: 1.35rem; }
  .conversation-page .build-bar { height: 4px; }
  .conversation-step { margin-top: .7rem; font-size: .75rem; }
  .conversation-page .build-form-inner { padding: 1.5rem 0; }
  .conversation-section-title { font-size: 1.45rem; }
  .conversation-counter { margin: 1.4rem 0 1rem; }
  .conversation-page .conversation-question { font-size: 2.25rem; }
  .conversation-description { font-size: 1.0625rem; margin: .8rem 0 1.5rem; }
  .conversation-page .build-field input, .conversation-page .build-field textarea,
  .conversation-page .build-field select { font-size: 1.125rem; }
  .conversation-page .build-choices { grid-template-columns: 1fr; }
  .conversation-form { min-height: 500px; }
  .conversation-actions { margin-top: 1.8rem; }
  .conversation-actions .button { min-width: 180px; min-height: 56px; }
  .conversation-key-hint { display: none; }
  .conversation-page .build-controls { padding: .75rem 0 0; }
  .conversation-page .track-service-card { padding: 1rem; gap: .6rem; }
  .conversation-page .track-service-card strong { font-size: 1.35rem; }
  .conversation-page .track-service-card small { font-size: .875rem; }
  .conversation-page .maintenance-expectations, .conversation-page .consultation-facts { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .conversation-page *, .conversation-page *::before, .conversation-page *::after { scroll-behavior: auto; transition: none; }
}