/* The "sell your car" wizard: landing, 10 steps, photo manager, seller dashboard. */

/* ---- guest / signed-in landing ---- */
.sell-guest__hero,
.sell-start__intro { max-width: 44rem; margin: var(--s-10) auto var(--s-8); text-align: center; }
.sell-guest__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.steps--light { max-width: 52rem; margin: 0 auto var(--s-12); }
.steps--light li { background: var(--surface); border-color: var(--line); }
.steps--light h2 { color: var(--navy-900); }
.steps--light p { color: var(--ink-500); }
.steps--light .steps__n { color: var(--navy-950); }

.sell-start__resume { max-width: 40rem; margin: 0 auto var(--s-6); }
.sell-start__card { max-width: 40rem; margin: 0 auto var(--s-12); padding: var(--s-6); }
.sell-start__card h2 { margin-bottom: var(--s-5); }

/* .category-pick itself (car/motorbike/bicycle) is a shared component — see app.css. */

/* ---- wizard shell ---- */
.wizard { max-width: 40rem; margin: var(--s-8) auto var(--s-16); }
.wizard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.wizard-head__count { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-600); }
.wizard-head h1 { font-size: var(--fs-h2); }
.wizard-head__exit { flex: none; }
/* A native <progress> element: no inline style is needed (the CSP forbids style="..."), and it is accessible for free. */
.wizard-progress__bar { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 0.25rem; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); }
.wizard-progress__bar::-webkit-progress-bar { background: var(--surface-2); }
.wizard-progress__bar::-webkit-progress-value { background: var(--blue-600); transition: width 0.3s var(--ease); }
.wizard-progress__bar::-moz-progress-bar { background: var(--blue-600); transition: width 0.3s var(--ease); }
/* Step navigation: one scrollable row of real links; the current step is scrolled into view by the browser
   (scroll-snap) on narrow screens, where the row overflows by design. */
.wizard-steps { margin: var(--s-3) 0 var(--s-8); }
.wizard-steps ol { list-style: none; display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: var(--s-1); }
.wizard-steps ol::-webkit-scrollbar { display: none; }
.wizard-steps li { flex: none; scroll-snap-align: start; }
.wizard-steps a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h-sm); padding: 0 var(--s-3) 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink-700); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wizard-steps a:hover { border-color: var(--ink-400); color: var(--ink-900); }
.wizard-steps__n { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--surface-2); color: var(--ink-700); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wizard-steps__n .icon { width: 0.75rem; height: 0.75rem; stroke-width: 2.5; }
.wizard-steps .is-done .wizard-steps__n { background: var(--green-100); color: var(--green-700); }
.wizard-steps a[aria-current] { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-600); }
.wizard-steps a[aria-current] .wizard-steps__n { background: var(--blue-600); color: #fff; }

.wizard-form { display: flex; flex-direction: column; gap: 0; }
.wizard-hint { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); background: var(--blue-50); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--navy-800); }
.wizard-hint .icon { color: var(--blue-600); margin-top: 0.1rem; flex: none; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin: var(--s-4) 0; }
.field-row > .field, .field-row > .sfield { margin: 0; }
@media (min-width: 30rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.textarea { min-height: 10rem; resize: vertical; line-height: 1.6; font-family: inherit; }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.wizard-nav__end { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-left: auto; }
/* Back and the primary action share one height; on a phone the primary actions take the full width above Back. */
.wizard-nav .btn { min-height: var(--control-h-lg); }
@media (max-width: 29.99rem) {
  .wizard-nav { flex-wrap: wrap-reverse; }
  .wizard-nav > .btn, .wizard-nav__end { flex: 1 1 100%; }
  .wizard-nav__end .btn { flex: 1 1 100%; }
}

/* Autosave status (app.js) — empty and invisible until JS has something to say; never shown on the photos
   step (file uploads aren't autosaved). */
.autosave-status { display: flex; align-items: center; gap: 0.4rem; margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-500); min-height: 1.25rem; }
.autosave-status:empty { margin: 0; min-height: 0; }
.autosave-status--saving::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--blue-600); flex: none; }
@media (prefers-reduced-motion: no-preference) { .autosave-status--saving::before { animation: spin 0.8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.autosave-status--ok { color: var(--green-700); }
.autosave-status--ok::before { content: ""; width: 0.9rem; height: 0.9rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

.feature-group { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.feature-group legend { font-weight: 650; font-size: var(--fs-sm); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-500); padding: 0 0 var(--s-3); width: 100%; border-bottom: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 0.125rem; padding-top: var(--s-3); }
@media (min-width: 30rem) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-grid .check { min-height: 2.5rem; }

/* ---- price ---- */
.price-input { position: relative; }
.price-input span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-500); font-weight: 700; font-size: 1.125rem; }
.price-input .input { padding-left: 1.875rem; height: var(--control-h-lg); font-family: var(--font-brand); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* ---- photos ---- */
.photo-drop { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-10) var(--s-5); border: 2px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; background: var(--surface); margin-bottom: var(--s-6); transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
.photo-drop:has(:hover, :focus-visible) { border-color: var(--blue-500); background: var(--blue-50); }
.photo-drop label { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); cursor: pointer; }
.photo-drop .icon { width: 1.5rem; height: 1.5rem; padding: 0.875rem; box-sizing: content-box; border-radius: 50%; background: var(--blue-600); color: #fff; }
.photo-drop__title { font-weight: 650; font-size: var(--fs-lg); color: var(--navy-900); }
.photo-drop__hint { font-size: var(--fs-sm); color: var(--ink-500); max-width: 32ch; }
.photo-drop input[type="file"] { max-width: 100%; font-size: var(--fs-sm); }
.photo-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); }
.photo-tile { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile--cover { outline: 2px solid var(--amber-500); outline-offset: -2px; }
.photo-tile__badge { position: absolute; top: 0.375rem; left: 0.375rem; }
.photo-tile__actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: 0.25rem; padding: 0.375rem; background: linear-gradient(to top, rgba(6, 18, 36, 0.7), transparent); }
.photo-tile__actions form { margin: 0; }
.photo-tile__edit { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.photo-tile__edit form { margin: 0; display: flex; }
.photo-tile__crop { align-items: center; gap: 0.25rem; }
.icon-btn { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); color: var(--navy-900); cursor: pointer; }
.icon-btn:hover { background: #fff; }
.icon-btn .icon { width: 0.9rem; height: 0.9rem; }
.icon-btn--danger { color: var(--red-700); }
.state--compact { margin: var(--s-6) auto; padding: var(--s-6); }
.state--compact .state__icon { width: 3rem; height: 3rem; margin-bottom: var(--s-3); }

/* ---- seller dashboard ---- */
/* .dash-list/.dash-item* (the row component) and .choice-row/.choice (the Reserve drawer's buyer-type
   picker) are shared across pages — see app.css. Only this page's own chrome stays here. */
.sell-dash { padding: var(--page-top) 0 var(--page-bottom); }
.sell-dash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-8); }
.sell-dash__group { margin-bottom: var(--s-8); }
.sell-dash__group h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }