/* ============================================================================
   Dealer onboarding — the wizard.

   The approach is deliberately restrained: one idea per screen, a lot of air,
   type that carries the hierarchy instead of boxes and rules, and motion only
   where it explains what just happened. Colour is reserved for the one thing
   the dealer should act on next.
   ========================================================================= */

.sldo-wrap{
	--ink:#0b1116;
	--ink-2:#404b54;
	--ink-3:#536274;   /* 5.3:1 on the active-step blue, 6.2:1 on white */
	--line:#e6e9ec;
	--line-2:#eff1f3;
	--surface:#ffffff;
	--surface-2:#f6f7f9;
	--accent:#002442;          /* the single call to action */
	--accent-ink:#003a66;
	--accent-soft:#e6eef5;
	--good:#1d8a4e;
	--bad:#c8342b;
	--radius:14px;
	--radius-lg:20px;
	--shadow:0 1px 2px rgba(11,17,22,.05),0 8px 28px rgba(11,17,22,.06);
	--ease:cubic-bezier(.32,.72,0,1);

	/* The wizard is a single screen: the panel below takes whatever height is
	   left once the masthead and the progress rail have had their share. JS
	   refines --sldo-panel from the real geometry; this calc is the fallback. */
	--sldo-chrome:96px;
	--sldo-sticky:78px;

	max-width:1080px;margin:0 auto;padding:16px 24px 24px;
	font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	font-size:16px;line-height:1.5;
}

/* Hidden means hidden. Steps, conditional fields and nav entries are switched
   with the hidden attribute, but several rules below give them a display of
   their own — an author rule beats the browser's, so say it once, here. */
.sldo-wrap [hidden]{display:none!important}

/* --- masthead ----------------------------------------------------------- */
/* A fixed reserve: the masthead is the same height on every step, so the
   panel underneath never resizes as the dealer moves through the wizard. */
.sldo-intro{display:none}
.sldo-intro h1{margin:0;font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.sldo-intro p{margin:3px 0 0;font-size:.9rem;line-height:1.35;color:var(--ink-3);letter-spacing:-.008em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* Past the first step the lead has done its job; the heading stays for place. */
.sldo-portal.is-inner .sldo-intro p{display:none}

/* --- progress ----------------------------------------------------------- */
.sldo-progress{position:sticky;top:var(--sldo-sticky);z-index:5;margin:0 -24px 16px;padding:10px 24px 9px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-2)}
.sldo-progress-bar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.sldo-progress-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .55s var(--ease)}
.sldo-progress-meta{display:flex;align-items:baseline;gap:8px;margin-top:7px;font-size:.78rem;color:var(--ink-3);letter-spacing:-.005em}
.sldo-progress-value{font-weight:600;color:var(--ink)}
.sldo-saved{margin-left:auto;font-size:.78rem;color:var(--ink-3);transition:color .2s}
.sldo-saved.is-error{color:var(--bad)}

/* --- layout ------------------------------------------------------------- */
.sldo-layout{display:grid;grid-template-columns:224px 1fr;gap:48px;align-items:start}
/* Grid items default to min-width:auto, which lets a wide child push the page sideways. */
.sldo-layout>*{min-width:0}
.sldo-nav{display:flex;flex-direction:column;min-height:0;height:calc(100vh - var(--sldo-chrome))}
.sldo-nav-head{flex:0 0 auto;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line-2)}
.sldo-nav-title{margin:0 0 10px;font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.sldo-nav .sldo-progress{margin:0;position:static;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.sldo-nav .sldo-progress-bar{height:4px}
.sldo-nav .sldo-progress-meta{display:block;margin:7px 0 0;font-size:.76rem;color:var(--ink-3)}
.sldo-nav .sldo-progress-value{color:var(--ink);font-weight:600}
.sldo-nav ol{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0 6px 0 0;scrollbar-width:thin}
.sldo-nav-item{display:flex;gap:11px;align-items:flex-start;width:100%;padding:7px 10px;margin-bottom:1px;border:0;border-radius:10px;background:none;text-align:left;font-size:.9rem;line-height:1.35;color:var(--ink-3);cursor:pointer;transition:background .18s var(--ease),color .18s}
.sldo-nav-item:hover{background:var(--surface-2);color:var(--ink-2)}
.sldo-nav-item.is-active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.sldo-nav-mark{flex:0 0 auto;width:15px;height:15px;margin-top:3px;border:1.5px solid #cbd3da;border-radius:50%;transition:all .22s var(--ease)}
.sldo-nav-item.is-active .sldo-nav-mark{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-soft)}
.sldo-nav-item.is-complete .sldo-nav-mark{border-color:var(--good);background:var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E") center/11px no-repeat}
.sldo-nav-text em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.04em;color:var(--ink-3);margin-bottom:1px}
.sldo-resume-hint{flex:0 0 auto;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);font-size:.79rem;line-height:1.5;color:var(--ink-3)}
.sldo-link{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(0,36,66,.3)}
.sldo-link:hover{border-bottom-color:var(--accent)}

/* --- a step ------------------------------------------------------------- */
/* One screen, always the same screen. The panel is a fixed height; inside it
   the heading is pinned to the top, Back/Continue to the bottom, and only the
   field area scrolls when a step has more questions than the height allows. */
.sldo-steps{position:relative;height:calc(100vh - var(--sldo-chrome));min-height:380px;display:flex;flex-direction:column}
.sldo-step{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;animation:sldo-in .45s var(--ease) both}
.sldo-step-head{flex:0 0 auto;padding-bottom:12px}
.sldo-step-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 20px 0;scrollbar-gutter:stable}
.sldo-step-body:focus{outline:none}
@keyframes sldo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sldo-step{animation:none}.sldo-progress-bar span{transition:none}}
.sldo-step h2{margin:0 0 5px;font-size:clamp(1.3rem,1.9vw,1.62rem);line-height:1.15;letter-spacing:-.018em;font-weight:600;color:var(--ink)}
.sldo-step-number{display:block;margin-bottom:3px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sldo-step-intro{margin:0;max-width:680px;font-size:.93rem;line-height:1.42;color:var(--ink-3);letter-spacing:-.008em}
.sldo-fields{display:flex;flex-wrap:wrap;gap:20px 18px}
.sldo-subheading{flex:0 0 100%;margin:14px 0 -8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* --- fields ------------------------------------------------------------- */
.sldo-field{flex:0 0 100%;display:flex;flex-direction:column;min-width:0}
.sldo-half{flex:1 1 calc(50% - 10px);min-width:230px}
.sldo-third{flex:1 1 calc(33.333% - 14px);min-width:180px}
.sldo-two-thirds{flex:1 1 calc(66.666% - 7px);min-width:260px}
.sldo-label{margin-bottom:7px;font-size:.88rem;font-weight:500;letter-spacing:-.005em;color:var(--ink-2)}
.sldo-label em{font-style:normal;color:var(--ink-3);font-size:.9em}
.sldo-help{margin:-3px 0 8px;font-size:.82rem;line-height:1.45;color:var(--ink-3)}

.sldo-field input[type=text],.sldo-field input[type=email],.sldo-field input[type=tel],.sldo-field input[type=url],
.sldo-field input[type=number],.sldo-field input[type=date],.sldo-field input[type=time],.sldo-field select,.sldo-field textarea{
	width:100%;padding:13px 15px;border:1px solid #d8dde2;border-radius:var(--radius);background:var(--surface);
	font:inherit;font-size:1rem;letter-spacing:-.006em;color:var(--ink);box-sizing:border-box;
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.sldo-field textarea{resize:vertical;min-height:94px;line-height:1.5}
.sldo-field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23536274' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.sldo-field input::placeholder,.sldo-field textarea::placeholder{color:#b3bcc4}
.sldo-field input:hover,.sldo-field select:hover,.sldo-field textarea:hover{border-color:#c2cad2}
.sldo-field input:focus,.sldo-field select:focus,.sldo-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,36,66,.13)}
.sldo-field input:user-invalid{border-color:#e2b4b0}
.sldo-field.has-error input,.sldo-field.has-error select,.sldo-field.has-error textarea{border-color:var(--bad);box-shadow:0 0 0 4px rgba(200,52,43,.1)}
.sldo-field-error{margin:7px 0 0;font-size:.82rem;color:var(--bad)}

/* checks and radios, as controls rather than browser defaults */
.sldo-options{display:flex;flex-wrap:wrap;gap:10px}
.sldo-check{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #dde2e7;border-radius:999px;background:var(--surface);font-size:.93rem;color:var(--ink-2);cursor:pointer;transition:all .18s var(--ease)}
.sldo-check:hover{border-color:#c2cad2;background:var(--surface-2)}
.sldo-check input{accent-color:var(--accent);width:16px;height:16px;margin:0;cursor:pointer}
.sldo-check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.sldo-check-single{align-self:flex-start;border-radius:var(--radius);align-items:flex-start;padding:14px 18px;line-height:1.45}
.sldo-check-single input{margin-top:2px}

/* --- service picker ----------------------------------------------------- */
.sldo-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;width:100%}
.sldo-module{position:relative;display:block;padding:24px 24px 26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.sldo-module:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sldo-module.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.sldo-module input{position:absolute;opacity:0;pointer-events:none}
.sldo-module::after{content:"";position:absolute;top:22px;right:22px;width:22px;height:22px;border:1.5px solid #cbd3da;border-radius:50%;transition:all .2s var(--ease)}
.sldo-module.is-on::after{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E") center/13px no-repeat}
.sldo-module-title{display:block;margin:0 40px 6px 0;font-size:1.05rem;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.sldo-module-desc{display:block;font-size:.9rem;line-height:1.5;color:var(--ink-3)}
.sldo-tag{position:absolute;bottom:22px;right:22px;padding:3px 9px;border-radius:99px;background:var(--surface-2);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8d99a3}

/* --- tags, colour, cards ------------------------------------------------ */
.sldo-tags{width:100%}
.sldo-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.sldo-tag-list:not(:empty){margin-bottom:10px}
.sldo-tag-item{display:inline-flex;align-items:center;gap:7px;padding:7px 9px 7px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:.88rem;animation:sldo-pop .22s var(--ease)}
@keyframes sldo-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.sldo-tag-item button{display:grid;place-items:center;width:18px;height:18px;border:0;border-radius:50%;background:rgba(0,36,66,.14);color:inherit;font-size:.9rem;line-height:1;cursor:pointer}
.sldo-tag-item button:hover{background:rgba(0,36,66,.25)}
.sldo-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.sldo-suggestion{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:none;font-size:.84rem;color:var(--ink-3);cursor:pointer;transition:all .18s var(--ease)}
.sldo-suggestion:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sldo-colour{display:flex;gap:10px;align-items:center}
.sldo-colour-preview{flex:0 0 auto;width:44px;height:44px;border:1px solid #d8dde2;border-radius:12px;
	background-image:linear-gradient(45deg,#eef1f3 25%,transparent 25%,transparent 75%,#eef1f3 75%),linear-gradient(45deg,#eef1f3 25%,transparent 25%,transparent 75%,#eef1f3 75%);
	background-size:12px 12px;background-position:0 0,6px 6px;transition:background .2s var(--ease)}
.sldo-colour-pick{position:relative;display:inline-flex;align-items:center;padding:11px 14px;border:1px solid #d8dde2;border-radius:var(--radius);background:var(--surface);font-size:.88rem;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.sldo-colour-pick:hover{border-color:#c2cad2}
.sldo-colour-pick input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.sldo-shades{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:12px;max-width:240px}
.sldo-shade-row{display:contents}
.sldo-swatch-button{width:100%;aspect-ratio:1;min-width:22px;border:1px solid rgba(11,17,22,.1);border-radius:7px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.sldo-swatch-button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.sldo-swatch-button.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.sldo-swatch-note{margin:10px 0 0;font-size:.78rem;line-height:1.45;color:var(--ink-3)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sldo-palettes{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.sldo-palette{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;transition:all .18s var(--ease)}
.sldo-palette:hover{border-color:#c2cad2;transform:translateY(-1px)}
.sldo-palette span{width:15px;height:15px;border-radius:5px}
.sldo-palette em{font-style:normal;font-size:.84rem;color:var(--ink-3);margin-left:3px}
.sldo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;width:100%}
.sldo-card{position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.sldo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sldo-card.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.sldo-card input{position:absolute;opacity:0;pointer-events:none}
.sldo-card strong{display:block;margin-bottom:5px;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sldo-card span{font-size:.87rem;line-height:1.5;color:var(--ink-3)}
.sldo-range{display:flex;align-items:center;gap:12px}
.sldo-range span{color:var(--ink-3);font-size:.9rem}
.sldo-social{display:flex;flex-direction:column;gap:9px}
.sldo-social .sldo-check{align-self:flex-start;padding:7px 13px;font-size:.84rem}

/* --- hours -------------------------------------------------------------
   Most dealerships open the same hours Monday to Friday, so that is one row.
   The per-day detail stays one click away for the ones that do not.        */
.sldo-hours{display:grid;gap:14px;width:100%}
.sldo-hours-dept{padding:18px 20px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.sldo-hours-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sldo-hours-head h4{flex:1 1 auto;margin:0;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sldo-mini{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.78rem;color:var(--accent);cursor:pointer;transition:all .18s var(--ease)}
.sldo-mini:hover{border-color:var(--accent);background:var(--accent-soft)}
.sldo-hours-preset{width:auto!important;padding:6px 34px 6px 12px!important;font-size:.8rem!important;border-radius:999px!important;color:var(--ink-3)!important;background-position:right 12px center!important}
.sldo-hours-quick{display:grid;gap:8px}
.sldo-hours-row{display:grid;grid-template-columns:86px minmax(0,1fr) 22px minmax(0,1fr) auto;gap:10px;align-items:center}
.sldo-hours-row input[type=time]{padding:9px 11px;font-size:.9rem;min-width:0}
.sldo-hours-row.is-closed input[type=time]{opacity:.32}
.sldo-hours-day{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.sldo-hours-dash{font-size:.8rem;color:var(--ink-3);text-align:center}
.sldo-hours-closed{padding:6px 12px;font-size:.78rem}
.sldo-hours-weekdays{padding:10px 12px;margin:-4px -12px 2px;border-radius:12px;background:var(--surface-2)}
.sldo-hours-weekdays.is-mixed .sldo-hours-day::after{content:" (varies)";color:var(--ink-3);font-weight:400}
.sldo-hours-detail{margin-top:12px}
.sldo-hours-detail summary{display:inline-block;font-size:.82rem;color:var(--accent);cursor:pointer;list-style:none}
.sldo-hours-detail summary::-webkit-details-marker{display:none}
.sldo-hours-detail summary::before{content:"+ ";font-weight:600}
.sldo-hours-detail[open] summary::before{content:"– "}
.sldo-hours-days{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}

/* --- repeater, access -------------------------------------------------- */
.sldo-repeater{width:100%}
.sldo-repeater-row{padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:16px;background:var(--surface);animation:sldo-in .3s var(--ease) both}
.sldo-repeater-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sldo-repeater-head h4{margin:0;font-size:.95rem;font-weight:600;color:var(--ink)}
.sldo-repeater-number{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:.78rem;color:var(--ink-3)}
.sldo-repeater-remove{border:0;background:none;color:#a8b2ba;font-size:.84rem;cursor:pointer;transition:color .18s}
.sldo-repeater-remove:hover{color:var(--bad)}
.sldo-access{width:100%}
.sldo-access-row{display:grid;grid-template-columns:1fr auto 230px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.sldo-access-row:last-child{border-bottom:0}
.sldo-info{padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.79rem;color:var(--accent);cursor:pointer;transition:all .18s var(--ease)}
.sldo-info:hover{border-color:var(--accent);background:var(--accent-soft)}
.sldo-access-note{font-size:.88rem!important;padding:9px 13px!important}
.sldo-notice{width:100%;padding:20px 22px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line)}
.sldo-notice strong{display:block;margin-bottom:5px;font-size:.95rem;color:var(--ink)}
.sldo-notice p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-3)}

/* --- uploads ------------------------------------------------------------ */
.sldo-upload{width:100%}
.sldo-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:38px 24px;border:1.5px dashed #d3d9df;border-radius:var(--radius-lg);background:var(--surface-2);text-align:center;cursor:pointer;transition:all .2s var(--ease)}
.sldo-dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.sldo-dropzone.is-over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.008)}
.sldo-dropzone strong{font-size:.98rem;font-weight:500;color:var(--ink-2)}
.sldo-dropzone span{font-size:.85rem;color:var(--ink-3)}
.sldo-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.sldo-file-list{list-style:none;margin:12px 0 0;padding:0}
.sldo-file-list li{display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;background:var(--surface);font-size:.92rem;animation:sldo-in .25s var(--ease) both}
.sldo-file-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.sldo-file-size{font-size:.82rem;color:var(--ink-3);white-space:nowrap}
.sldo-file-remove{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;background:var(--surface-2);color:#8d99a3;font-size:1rem;line-height:1;cursor:pointer;transition:all .18s}
.sldo-file-remove:hover{background:#fdeceb;color:var(--bad)}
.sldo-file-list li.is-failed{border-color:#f0d3d0;background:#fdf7f7}
.sldo-file-list li.is-failed .sldo-file-size{color:var(--bad)}
.sldo-file-list progress{width:96px;height:4px;border:0;border-radius:99px;background:var(--line);overflow:hidden}
.sldo-file-list progress::-webkit-progress-bar{background:var(--line);border-radius:99px}
.sldo-file-list progress::-webkit-progress-value{background:var(--accent);border-radius:99px;transition:width .2s}

/* --- review ------------------------------------------------------------- */
.sldo-review{margin-top:6px}
.sldo-review h4{display:flex;align-items:baseline;gap:12px;margin:22px 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sldo-review-table{width:100%;border-collapse:collapse;font-size:.94rem}
.sldo-review-table th{width:44%;padding:11px 20px 11px 0;text-align:left;font-weight:400;color:var(--ink-3);vertical-align:top}
.sldo-review-table td{padding:11px 0;color:var(--ink);vertical-align:top}
.sldo-review-table tr+tr th,.sldo-review-table tr+tr td{border-top:1px solid var(--line-2)}

/* --- actions ------------------------------------------------------------ */
.sldo-step-actions{flex:0 0 auto;display:flex;gap:12px;align-items:center;margin:0;padding-top:16px;border-top:1px solid var(--line-2);transition:box-shadow .2s var(--ease)}
/* When the field area scrolls, lift the rail off it so the edge reads as one. */
.sldo-step.is-scrollable .sldo-step-actions{box-shadow:0 -14px 18px -14px rgba(11,17,22,.16)}
.sldo-button{padding:12px 28px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-size:.98rem;font-weight:500;letter-spacing:-.006em;cursor:pointer;transition:transform .16s var(--ease),background .18s,opacity .18s}
.sldo-button:hover{background:var(--accent-ink);transform:translateY(-1px)}
.sldo-button:active{transform:translateY(0) scale(.985)}
.sldo-button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.sldo-secondary{background:var(--surface-2);color:var(--ink-2)}
.sldo-secondary:hover{background:#eceef1;color:var(--ink)}
.sldo-submit{background:var(--good)}
.sldo-submit:hover{background:#166c3d}
[data-next],[data-submit]{margin-left:auto}
.sldo-errors{flex:0 0 auto;margin-top:14px;padding:16px 20px;border-radius:var(--radius);background:#fdf3f2;border:1px solid #f3d5d2;color:#8a2822}
.sldo-errors strong{display:block;margin-bottom:8px}
.sldo-errors ul{margin:0;padding-left:18px;line-height:1.9}
.sldo-errors .sldo-link{color:#8a2822;border-bottom-color:rgba(138,40,34,.35);text-align:left}

/* --- the page around the wizard ------------------------------------------
   This stylesheet only loads on the page holding the shortcode, so it can say
   what that page looks like. The theme prints its own big page title there —
   the same words the masthead already carries, and a third of the screen —
   so it stands down, and the wizard starts under the site header.
   The page has no dark hero either, so the theme's white logo would sit
   invisible on white; show the blue mark instead.                          */
.dsf-page-head{display:none}
.site-header .logo-white{display:none!important}
.site-header .logo-dark{display:inline-block!important}

.sldo-finished{min-height:62vh;display:flex;align-items:center}
.sldo-done{max-width:640px;margin:0 auto;text-align:center}
.sldo-done-mark{width:76px;height:76px;margin:0 auto 30px}
.sldo-done-mark svg{width:100%;height:100%;fill:none;stroke:var(--good);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sldo-done-mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:sldo-ring .7s var(--ease) .1s forwards}
.sldo-done-mark path{stroke-dasharray:38;stroke-dashoffset:38;animation:sldo-tick .4s var(--ease) .65s forwards}
@keyframes sldo-ring{to{stroke-dashoffset:0}}
@keyframes sldo-tick{to{stroke-dashoffset:0}}
.sldo-done h1{margin:0 0 14px;font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.022em;font-weight:600;color:var(--ink);animation:sldo-rise .6s var(--ease) .35s both}
.sldo-done-lead{margin:0 auto 18px;max-width:520px;font-size:1.1rem;line-height:1.55;color:var(--ink-3);animation:sldo-rise .6s var(--ease) .45s both}
.sldo-done-ref{display:inline-block;margin:0 0 40px;padding:6px 16px;border-radius:999px;background:var(--surface-2);font-size:.84rem;color:var(--ink-3);animation:sldo-rise .6s var(--ease) .55s both}
.sldo-done-ref strong{color:var(--ink-2);font-weight:600}
@keyframes sldo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.sldo-next{list-style:none;margin:0 0 42px;padding:30px 0 0;border-top:1px solid var(--line-2);text-align:left;display:grid;gap:22px}
.sldo-next li{display:flex;gap:16px;align-items:flex-start;animation:sldo-rise .6s var(--ease) both;animation-delay:calc(.65s + var(--i)*.1s)}
.sldo-next-num{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.82rem;font-weight:600}
.sldo-next-body strong{display:block;margin-bottom:3px;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sldo-next-body span{font-size:.94rem;line-height:1.55;color:var(--ink-3)}
.sldo-done-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;animation:sldo-rise .6s var(--ease) .95s both}
.sldo-done-actions .sldo-button{text-decoration:none;display:inline-block}
@media (prefers-reduced-motion:reduce){
	.sldo-done *,.sldo-done-mark circle,.sldo-done-mark path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
}

/* --- modal -------------------------------------------------------------- */
.sldo-modal{border:0;border-radius:var(--radius-lg);padding:0;max-width:540px;box-shadow:0 30px 80px rgba(11,17,22,.28);animation:sldo-modal .3s var(--ease)}
@keyframes sldo-modal{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sldo-modal::backdrop{background:rgba(11,17,22,.4);backdrop-filter:blur(3px)}
.sldo-modal-inner{padding:32px}
.sldo-modal h3{margin:0 0 16px;font-size:1.2rem;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.sldo-modal ol{margin:0 0 26px;padding-left:20px;color:var(--ink-2);line-height:1.75;font-size:.95rem}
.sldo-modal li{margin-bottom:6px}

/* --- holding the line ---------------------------------------------------
   The theme dresses bare h1, h2 and p for the rest of the site. The wizard is
   printed after it so it normally wins on order alone; these few repeats win
   on weight too, so the type survives whatever the theme does next.        */
.sldo-wrap .sldo-intro h1{margin:0;font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
/* A theme may style h1 for articles; in a sidebar it is a label. */
.sldo-wrap .sldo-nav-title{margin:0 0 10px;font-family:inherit;font-size:1rem;line-height:1.25;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.sldo-wrap .sldo-intro p{margin:3px 0 0;font-size:.9rem;line-height:1.35}
.sldo-wrap .sldo-step h2{margin:0 0 5px;font-size:clamp(1.3rem,1.9vw,1.62rem);line-height:1.15;letter-spacing:-.018em}
.sldo-wrap .sldo-step-intro{margin:0;font-size:.93rem;line-height:1.42}
.sldo-wrap .sldo-help{margin:-3px 0 8px;font-size:.82rem;line-height:1.45}
.sldo-wrap .sldo-field-error{margin:7px 0 0;font-size:.82rem}
.sldo-wrap .sldo-notice p{margin:0;font-size:.92rem;line-height:1.55}
.sldo-wrap .sldo-resume-hint,.sldo-wrap .sldo-swatch-note{margin-bottom:0}
.sldo-wrap .sldo-modal h3{margin:0 0 16px;font-size:1.2rem;line-height:1.3}
.sldo-wrap .sldo-review h4{margin:22px 0 8px;font-size:.78rem;line-height:1.3}
.sldo-wrap .sldo-hours-head h4,.sldo-wrap .sldo-repeater-head h4{margin:0;font-size:.95rem;line-height:1.3}
.sldo-wrap .sldo-done h1{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.08}
.sldo-wrap .sldo-done-lead{font-size:1.1rem;line-height:1.55}

/* --- responsive --------------------------------------------------------- */
/* Below the two-column breakpoint the fixed panel stops helping: the viewport
   is short, the keyboard steals half of it, so the step flows again and the
   action rail sticks to the bottom of the screen instead. */
@media (max-width:900px){
	.sldo-layout{grid-template-columns:1fr;gap:20px;align-items:start}
	.sldo-steps{height:auto!important;min-height:0}
	.sldo-nav{height:auto!important}
	.sldo-step-body{overflow:visible;min-height:0;padding:14px 0 4px;scrollbar-gutter:auto}
	.sldo-step.is-scrollable .sldo-step-actions{box-shadow:none}
	.sldo-nav{position:static;display:block}
	.sldo-nav{max-width:100%;overflow:hidden}
	.sldo-nav ol{display:flex;gap:6px;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:0 0 6px;scrollbar-width:none}
	.sldo-nav li{flex:0 0 auto}
	.sldo-nav ol::-webkit-scrollbar{display:none}
	.sldo-nav-item{white-space:nowrap;margin:0}
	.sldo-resume-hint{margin-top:14px;padding-top:12px}
	.sldo-intro{height:auto;margin-bottom:12px}
	.sldo-access-row{grid-template-columns:1fr auto}
	.sldo-access-note{grid-column:1/-1}
}
@media (max-width:640px){
	.sldo-wrap{padding:14px 18px 24px}
	.sldo-progress{margin:0 -18px 18px;padding:10px 18px 9px}
	.sldo-fields{gap:22px 16px}
	.sldo-half,.sldo-third,.sldo-two-thirds{flex:0 0 100%;min-width:0}
	.sldo-hours-row{grid-template-columns:1fr 22px 1fr;row-gap:6px}
	.sldo-hours-day{grid-column:1/-1}
	.sldo-hours-closed{grid-column:1/-1;justify-self:start}
	.sldo-hours-head{flex-wrap:wrap}
	.sldo-steps{min-height:0}
	.sldo-step-actions{position:sticky;bottom:0;z-index:4;flex-direction:row;margin:18px -18px 0;padding:14px 18px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
	.sldo-button{padding:13px 22px;font-size:.94rem}
}

/* ===========================================================================
   QA fixes, 2026-09-25 (qa-onboarding.md)
   ======================================================================== */

/* #4 the error list floats over the step instead of squeezing it */
.sldo-steps{position:relative}
.sldo-wrap .sldo-errors{position:absolute;left:16px;right:16px;bottom:78px;z-index:6;max-height:46%;overflow-y:auto;margin:0;padding:14px 18px;border:1px solid #f3d5d2;border-radius:var(--radius);background:#fff7f6;box-shadow:var(--shadow);color:#8a2822}
.sldo-errors-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.sldo-errors-close{border:0;background:none;font-size:1.3rem;line-height:1;color:#8a2822;cursor:pointer}
.sldo-wrap .sldo-errors ul{margin:0;padding-left:18px;line-height:1.7}

/* #9 link-buttons keep white text; the theme's link colour must not win */
.sldo-wrap a.sldo-button{color:#fff;text-decoration:none}
.sldo-wrap a.sldo-button.sldo-secondary{color:var(--ink-2)}
.sldo-wrap a.sldo-button:hover{color:#fff}
.sldo-wrap a.sldo-button.sldo-secondary:hover{color:var(--ink)}

/* #5 the address to invite, with a copy button */
.sldo-access-email{color:var(--ink);font-weight:600;word-break:break-all}
.sldo-copy{margin-top:10px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:.8rem;font-weight:600;color:var(--accent);cursor:pointer}
.sldo-copy:hover{border-color:var(--accent);background:var(--accent-soft)}
.sldo-modal-email{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:.9rem}
.sldo-modal-email .sldo-copy{margin:0 0 0 6px;padding:3px 10px}

/* #14 a failed upload can be dismissed */
.sldo-file-dismiss{border:0;background:none;font-size:1.1rem;line-height:1;color:#a8545a;cursor:pointer}

/* #23 review summary details */
.sldo-review-muted{color:var(--ink-3)}
.sldo-review-row{margin-bottom:6px}
.sldo-review-row em{font-style:normal;color:var(--ink-3)}
.sldo-review{margin-bottom:22px}

/* #29 the hex field shows the whole value */
.sldo-colour input[data-colour-hex]{min-width:108px}

/* #30 Remove looks like an action, not a disabled label */
.sldo-repeater-remove{color:#9a4a4f}

/* #15 #16 phones: time fields wide enough for AM/PM, and 16px so iOS does not zoom */
@media (max-width:640px){
	.sldo-wrap input,.sldo-wrap select,.sldo-wrap textarea{font-size:16px!important}
	.sldo-hours-row input[type=time]{min-width:128px}
	.sldo-hours-row{grid-template-columns:1fr;row-gap:6px}
	.sldo-hours-dash{display:none}
	.sldo-wrap .sldo-errors{bottom:84px;max-height:52%}
}
.sldo-nav ol{position:relative}

/* A compact upload that belongs to the question above it (privacy policy: paste, link or upload) */
.sldo-field:has(> .sldo-upload-compact){margin-top:-10px}
.sldo-upload-compact .sldo-dropzone{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius)}
.sldo-upload-compact .sldo-dropzone strong{font-size:.9rem}

/* ---------------------------------------------------------------------
 * Space use on laptops (2.8.1). The wizard stopped at 1080px, so a
 * 1512px MacBook screen left a wide empty band and every step scrolled.
 * Wider form, fields that keep their size, a quarter width, tighter rhythm.
 * ------------------------------------------------------------------ */
@media (min-width:1200px){
	.sldo-wrap{max-width:1320px}
	.sldo-layout{gap:40px}
}
@media (min-width:901px){
	.sldo-fields{gap:14px 16px}
	/* A short field alone on its row keeps its size instead of stretching */
	.sldo-half{flex:0 1 calc(50% - 8px)}
	.sldo-third{flex:0 1 calc(33.333% - 10.7px)}
	.sldo-two-thirds{flex:0 1 calc(66.666% - 5.3px)}
	.sldo-quarter{flex:0 1 calc(25% - 12px);min-width:150px}
	.sldo-field textarea{min-height:72px}
	.sldo-check{padding:8px 14px}
	.sldo-options{gap:8px}
	.sldo-suggestions{gap:6px}
	.sldo-step-intro{max-width:none}
}
@media (max-width:900px){
	.sldo-quarter{flex:1 1 calc(50% - 9px);min-width:140px}
}

/* Hours: Sales / Service / Parts as tabs, one table at a time */
.sldo-hours-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);justify-self:start}
.sldo-hours-tab{border:0;background:none;padding:6px 16px;border-radius:999px;font:inherit;font-size:.86rem;color:var(--ink-3);cursor:pointer}
.sldo-hours-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(11,17,22,.12)}
.sldo-hours-dept.is-tab-hidden{display:none}
.sldo-hours-tabs ~ .sldo-hours-dept .sldo-hours-head h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sldo-hours-tabs ~ .sldo-hours-dept .sldo-hours-head{justify-content:flex-end}

/* Colour shades: families as columns, so all 50 shades sit in five short rows */
.sldo-shades{display:flex;gap:4px;max-width:300px}
.sldo-shade-row{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.sldo-shade-row .sldo-swatch-button{min-width:0}

@media (min-width:901px){
	.sldo-field textarea{height:84px}
	.sldo-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (min-width:1200px){
	/* Access: two columns of accounts instead of one long list */
	.sldo-access{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
	.sldo-access-row{grid-template-columns:1fr auto 170px}
	.sldo-access-row:nth-last-child(2):nth-child(odd){border-bottom:0}
}
@media (min-width:901px){
	/* A single-file drop area needs one line of height, not a billboard */
	.sldo-upload:not([data-multiple]) .sldo-dropzone{flex-direction:row;justify-content:center;gap:10px;padding:18px 24px}
	.sldo-card{padding:14px 16px}
	.sldo-card span{font-size:.82rem;line-height:1.4}
}

/* Access: the note box appears once an account is ticked (or already has a note), halving each row */
.sldo-access-row .sldo-access-note{display:none}
.sldo-access-row:has(input[type=checkbox]:checked) .sldo-access-note,
.sldo-access-row:has(.sldo-access-note:not(:placeholder-shown)) .sldo-access-note{display:block}
@media (min-width:901px){
	.sldo-access-row{padding:10px 0}
	.sldo-notice{padding:14px 18px}
	.sldo-notice p{margin-top:4px}
}
/* The address sits inside the sentence, not on a line of its own */
.sldo-notice p strong.sldo-access-email{display:inline;margin:0;font-size:inherit}
/* Without a note box to make room for, the account name gets the whole row; the note opens beneath it */
.sldo-wrap .sldo-access-row{grid-template-columns:1fr auto;row-gap:8px}
.sldo-wrap .sldo-access-row .sldo-access-note{grid-column:1/-1}

/* 2.9.2: the blue DealerSales mark leads the thank-you card, the tick sits beneath it */
.sldo-done-logo{display:block;width:200px;height:auto;margin:0 auto 28px}
.sldo-done-mark{width:58px;height:58px;margin-bottom:24px}
/* A multi-file drop area needs one line on laptops too */
@media (min-width:901px){
	.sldo-upload[data-multiple] .sldo-dropzone{flex-direction:row;justify-content:center;gap:10px;padding:22px 24px}
}