/* The story poster's cool and warm light, with the blue on the left. */
:root {
  --story-canvas:
    radial-gradient(ellipse at 0% 85%, #61b6d1 0%, transparent 52%),
    radial-gradient(ellipse at 100% 100%, #f5af76 0%, transparent 53%),
    linear-gradient(90deg, #8ac8df 0%, #c9e9f3 29%, #fff5eb 56%, #ffd8b7 100%);
  --story-surface: linear-gradient(90deg, #c5e8f4 0%, #f8f7ef 48%, #ffdabd 100%);
  --story-panel: linear-gradient(90deg, #e0f2f8 0%, #fff8ef 55%, #ffe4cc 100%);
}
body.story-palette {
  min-height: 100dvh;
  background: var(--story-canvas);
}
.story-palette.pro-site :is(#top .pro-overview, #top .pro-how, .dialog-header),
.story-palette :is(.conversation, main > header) {
  background: var(--story-surface);
}
.story-palette.pro-site :is(.site-header, .site-header .mobile-navigation, #top .opening-screen, dialog, dialog[data-view] .dialog-world, .app-intro) {
  background: var(--story-canvas);
}
.story-palette.pro-site .opening-screen::before {
  background: none;
}
.story-palette .conversation + #chat-status + form {
  background: var(--story-panel);
}

.story-palette.pro-site #top > .seo-section {
  max-width: none;
  padding-inline: max(24px, calc((100% - 1002px) / 2));
  background: var(--story-canvas);
}
.story-palette.pro-site #top > .seo-section nav a {
  background: #fffaf2;
}

.story-palette.pro-site .opening-screen h1.story-wordmark {
  line-height: 1;
}
.story-palette.pro-site .opening-screen h1.story-wordmark svg {
  display: block;
  width: clamp(152px, 30vw, 225px);
  height: auto;
  margin-inline: auto;
}

/* Shared surfaces for all service details and request steps. */
.story-palette.pro-site dialog[data-view] :is(
  .vehicle-condition, .vehicle-photos,
  .location-box, .landmark-box, .landmark-safety, .landmark-toggle,
  .appointment-save, .photo-share-box,
  .guide-card, .guide-copy, .dialog-services button, .service-visual
) {
  background: var(--story-panel);
  border-color: #9bbdc5;
}
.story-palette.pro-site dialog[data-view] #request-form :is(select, input:not([type="radio"], [type="checkbox"]), textarea) {
  background: var(--story-panel);
  border-color: #8ca9b4;
  color: #263a46;
  color-scheme: light;
}
.story-palette.pro-site dialog[data-view] select option {
  background-color: #c7e4ed;
  color: #263a46;
}
.story-palette.pro-site dialog[data-view] .dialog-body .button.soft {
  background: var(--story-surface);
  border-color: #90afba;
  color: #294857;
}
.story-palette.pro-site dialog[data-view] .flow-stepper .current b {
  background: linear-gradient(90deg, #a9d8eb, #ffd0a5);
  border-color: #62899a;
  color: #253f4e;
}
.story-palette.pro-site dialog[data-view] .flow-stepper .finished b {
  background: #c5e8f4;
  color: #253f4e;
}

.story-palette.pro-site dialog[data-view] .vip-welcome {
  background: var(--story-surface);
  border-color: #92b7c3;
}
.story-palette.pro-site dialog[data-view] .detail-points li {
  background: var(--story-panel);
  border-color: #a6c8d0;
}

/* The same time picker is mounted for every service in the request view. */
.story-palette.pro-site dialog[data-view="request"] #request-form .schedule-picker {
  background: var(--story-surface);
  border-color: #709bad !important;
}
.story-palette.pro-site dialog[data-view="request"] #request-form .schedule-picker :is(legend, .schedule-note) {
  color: #203e50;
}
.story-palette.pro-site dialog[data-view="request"] #request-form .schedule-choices label {
  background: var(--story-surface);
  border-color: #709bad;
  color: #203e50;
}
.story-palette.pro-site dialog[data-view="request"] #request-form .schedule-choices label:has(input:checked) {
  background: linear-gradient(90deg, #a6d8eb, #ffd0a5);
  border-color: #376b82;
  box-shadow: inset 0 0 0 1px #376b82;
}
.story-palette.pro-site dialog[data-view="request"] #request-form .schedule-choices input {
  accent-color: #376b82;
}

.story-palette.pro-site dialog[data-view] :is(#request-form, .request-summary) {
  background: var(--story-panel);
  border-color: #9bbdc5;
}
.story-palette.pro-site dialog[data-view] #request-form :is(.address-picker, .address-geo, .vehicle-picker, .vip-options) {
  background: var(--story-surface);
  border-color: #92b7c3;
}
.story-palette.pro-site dialog[data-view] #request-form :is(select, input:not([type="radio"], [type="checkbox"]), textarea):focus {
  outline-color: #376b82;
}
.story-palette.pro-site dialog[data-view] .request-summary .summary-row {
  border-color: #a6c8d0;
}

.story-palette.pro-site :is(.schedule-home-card, .nearby-panel),
.story-palette.pro-site dialog[data-view] :is(.dialog-header button, .dialog-header #dialog-back, .dialog-services button:hover) {
  background: var(--story-surface);
  border-color: #92b7c3;
  color: #294857;
}
.story-palette.pro-site :is(.nearby-tag, .nearby-panel #nearby-manual, .nearby-panel select) {
  background: var(--story-panel);
  border-color: #8ca9b4;
  color: #263a46;
}
.story-palette.pro-site :is(.schedule-home-action, .schedule-home-card:hover .schedule-home-action, .nearby-panel button, .nearby-request),
.story-palette.pro-site dialog[data-view] :is(.dialog-body .button:not(.soft), .location-button) {
  background: linear-gradient(90deg, #a6d8eb, #ffd0a5);
  border-color: #789eab;
  color: #203e50;
}
.story-palette.pro-site dialog[data-view] #request-form .address-grid :is(input, select) {
  background: var(--story-panel) !important;
}
.story-palette.pro-site dialog[data-view] :is(.flow-stepper b, .journey-waypoint) {
  background: #d9eef5;
  color: #253f4e;
}
.story-palette.pro-site dialog[data-view] :is(.journey-track, .journey-fill) {
  background: var(--story-surface);
}

/* Keep the menu's interior colored through the middle of the gradient. */
.story-palette.pro-site dialog[data-view] {
  --story-surface: linear-gradient(90deg, #8bc9df, #f5b986);
  --story-panel: linear-gradient(90deg, #a9d5e5, #f7c79f);
}