/* The intake keeps choices beside their consequences. */
[hidden] { display: none !important; }
.whole-car-guide { margin: 0 0 20px; max-width: 340px; }
.whole-car-guide img { display: block; width: 100%; border-radius: 8px; }
.whole-car-guide figcaption { font-size: 13px; margin-top: 8px; color: var(--mut); }
.angle-card { min-height: 92px; }
.one-photo-warning { margin-top: 20px; padding: 18px; border: 1px solid #c64236; border-radius: 8px; background: #fff4f2; color: #8c251d; }
.one-photo-warning p { margin: 0 0 12px; line-height: 1.5; }
.one-photo-warning .checkbox { margin: 0; }
.identity-summary { border: 1px solid var(--line); border-radius: 8px; padding: 18px; font-weight: 600; overflow-wrap: anywhere; }
.guest-signin { margin-bottom: 20px; }
.guest-signin h3 { margin: 0 0 8px; }
.guest-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.spec-row { position: relative; }
.spec-row [data-spec-label] { font-weight: 600; }
.preview-stack .preview-art { aspect-ratio: auto; }
.preview-stack .preview-bg { position: static; height: auto; object-fit: contain; }
.preview-stack .preview-card { max-width: 440px; }
.preview-example-note { margin: 18px 0 8px; color: var(--mut); font-size: 13px; text-align: center; }
#details .poster-inputs { min-width: 0; }
#step-preview-layout { max-width: 600px; margin: 0 auto; }
#details .live-poster-preview { margin-bottom: 28px; }
#finish-step { margin-top: 20px; }
/* One picture with the text choice directly under it (create.js renderDetails, 2026-10-07). */
#details .live-poster-preview:has(+ #finish-slot:not(:empty)) { margin-bottom: 14px; }
#finish-slot #finish-step { width: min(100%, 380px); margin: 0 auto 28px; }
#finish-slot #finish-copy { text-align: center; margin-bottom: 10px; }
#finish-slot .radio-row { justify-content: center; }
#form .step-copy:empty { display: none; }
.look-picker { min-width: 0; }
.look-toolbar { display: flex; align-items: center; gap: 12px; margin: 18px 0 24px; }
.look-toolbar label { color: var(--mut); font-size: 14px; }
.look-toolbar select { min-width: 0; max-width: 260px; min-height: 44px; padding: 8px 34px 8px 12px; }
.look-toolbar > span { margin-left: auto; color: var(--mut); font-size: 13px; white-space: nowrap; }
.look-stage { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 20px; align-items: center; }
.look-arrow { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 24px; cursor: pointer; }
.look-arrow:hover { border-color: var(--mut); background: var(--deep); }
.look-arrow:disabled { opacity: .35; cursor: default; }
.look-feature { min-width: 0; margin: 0; text-align: center; }
.look-frame { position: relative; width: min(100%, 344px); margin: 0 auto; border: 12px solid #141517; outline: 1px solid #44464a; box-shadow: inset 0 0 0 1px #020303, 0 16px 28px #0005; background: #101216; }
.look-frame.is-file { border: 0; outline: 0; }
.look-frame > img, .look-frame > svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.look-no-example { position: absolute; bottom: 12%; left: 8%; right: 8%; color: var(--mut); font-size: 13px; }
.look-feature figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; min-height: 40px; margin: 18px 0 0; }
.look-feature figcaption strong { font: 700 26px/1.2 var(--font-display); }
.look-feature figcaption span { color: var(--mut); font-size: 14px; }
.look-feature > .button { margin-top: 10px; min-height: 44px; }
.look-thumbnails { position: relative; display: flex; gap: 12px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 10px 4px 16px; margin: 22px -4px 0; scrollbar-width: thin; scrollbar-color: var(--mut-dim) var(--deep); }
.style-choice.look-thumb { flex: 0 0 94px; width: 94px; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); scroll-snap-align: center; }
.style-choice.look-thumb:hover { background: var(--panel); }
.style-choice.look-thumb[aria-pressed="true"] { padding: 4px; border-color: var(--red); background: var(--deep); }
.look-thumb > img, .look-thumb > svg { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1px; }
.look-thumb > span { display: block; margin: 7px 1px 2px; font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.look-selected { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--red); font-size: 13px; }
.look-options { min-width: 0; border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 18px 0 0; }
.look-options legend { padding: 0 12px 0 0; color: var(--mut); font-size: 13px; font-weight: 600; }
.look-option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.look-option-row .radio-chip { min-height: 44px; }
.look-photo-need { margin: 12px 0 0; font-size: 13px; color: var(--mut); }
.look-picker :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 480px) {
  .look-toolbar { gap: 8px; margin-bottom: 20px; }
  .look-toolbar select { flex: 1; width: 0; }
  .look-stage { position: relative; display: block; }
  .look-feature { padding: 0 18px; }
  .look-arrow { position: absolute; z-index: 1; top: 38%; width: 44px; height: 44px; }
  .look-arrow[data-look-step="-1"] { left: 0; }
  .look-arrow[data-look-step="1"] { right: 0; }
  .look-frame { border-width: 8px; }
  .look-feature figcaption strong { font-size: 23px; }
  .look-feature > .button { padding-left: 10px; padding-right: 10px; }
  .style-choice.look-thumb { flex-basis: 82px; width: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .look-picker, .look-picker * { scroll-behavior: auto; animation: none; transition: none; }
}
.ic-labeled-input { display: block; min-width: 0; }
.ic-labeled-input > span { display: block; margin-bottom: 6px; font-size: 13px; }
@media (min-width: 980px) {
  #details:has(.poster-inputs:not(:empty)) { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr); gap: 32px; align-items: start; }
  #details .details-visual { position: sticky; top: 28px; }
}

.vehicle-configuration { margin-top: 24px; }
.vehicle-choice-field { min-width: 0; border: 0; padding: 0; margin: 22px 0; }
.vehicle-choice-field legend { margin-bottom: 10px; }
.vehicle-options { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-options .radio-chip { min-height: 44px; text-align: left; white-space: normal; }
.vehicle-custom { display: block; margin-top: 12px; }
.vehicle-custom > span { display: block; margin-bottom: 6px; }
.vehicle-option-sources { display: flex; gap: 12px; flex-wrap: wrap; }
.story-tone-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 20px; }
.story-tone { min-width: 0; min-height: 96px; padding: 14px 10px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; text-align: left; cursor: pointer; }
.story-tone strong { display: block; font-size: 15px; margin-bottom: 7px; overflow-wrap: anywhere; }
.story-tone span { display: block; color: var(--mut); font-size: 12px; line-height: 1.4; }
.story-tone[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: var(--deep); }
.story-tone:focus-visible, .vehicle-options button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.story-notes { margin: 12px 0; }
#d-story-out { margin-top: 16px; }
.text-counter { display: block; text-align: right; margin-top: 4px; font-size: 12px; }
.text-counter.is-over-limit { color: var(--red); }
.spec-row { grid-template-areas: "label value remove" "label-count value-count ."; }
.spec-row [data-spec-label] { grid-area: label; }
.spec-row [data-spec-value] { grid-area: value; }
.spec-row .spec-remove { grid-area: remove; }
.spec-row .text-counter { display: block; margin-top: -6px; }
.spec-row [data-count-for="label"] { grid-area: label-count; }
.spec-row [data-count-for="value"] { grid-area: value-count; }
.spec-row [data-cite] { grid-column: 1 / -1; }
#d-word-count { display: block; margin-top: 6px; font-size: 12px; font-weight: normal; }
#details-preparation { padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 700px) {
  .spec-row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "label remove" "label-count remove" "value remove" "value-count remove"; }
}
@media (max-width: 480px) {
  .story-tone-options { grid-template-columns: minmax(0,1fr); }
  .story-tone { min-height: 0; padding: 12px 14px; }
  .story-tone strong { font-size: 15px; margin-bottom: 3px; }
  .story-tone span { font-size: 12px; }
}
.story-figures-internal { padding: 0; border: 0; background: none; }
.checkout-action { border: 0; background: none; box-shadow: none; padding: 8px 0 0; }
.checkout-action .summary-line[hidden] { display: none; }
.photo-label-status { display: block; margin-top: 7px; color: var(--mut); font-size: 12px; line-height: 1.4; }
#thumbs .thumb:not(.thumb-empty) { aspect-ratio: auto; display: flex; flex-direction: column; overflow: hidden; }
#thumbs .thumb > img { height: auto; aspect-ratio: 1; object-fit: cover; }
#thumbs .thumb-main, #thumbs .thumb-kind { position: static; width: 100%; min-width: 0; }
#thumbs .thumb-main { font-size: 10px; }
#thumbs .thumb-kind { font-size: 11px; }
#thumbs .photo-label-status { margin: 0; padding: 5px; font-size: 10px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  #thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.photo-main-label { display: block; font-size: 12px; color: var(--ink); margin: 7px 0; }
[data-main-photo] { display: block; position: static; margin: 7px 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--panel); font: inherit; font-size: 12px; cursor: pointer; }
[data-main-photo]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }