/* Unified configurator shell (2026-10-13): model switcher in the header, model picker (dialog + landing), switch overlay.
   Uses the configurator's own tokens (style.css :root) — one visual language for every vehicle. */
.mp-open{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:4px 12px 4px 14px;border:1px solid #3a3e45;background:#1b1d22;color:#fff;cursor:pointer;max-width:46vw}
.mp-open:hover,.mp-open:focus-visible{border-color:#fff;outline:none}
.mp-open-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9aa0a8}
.mp-open b{font-family:Teko,sans-serif;font-weight:600;font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-open i{font-style:normal;color:var(--red);font-size:13px}
.shell .crumb #crumb-var{color:#fff}
.shell .crumb .crumb-back{margin-left:10px}

/* picker grid (dialog and landing share it) */
.mp{width:min(1040px,calc(100vw - 32px))}
.mp-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0 14px}
.mp-tabs button{border:1px solid var(--line);background:#fff;padding:8px 14px;min-height:40px;cursor:pointer;font-weight:500}
.mp-tabs button small{color:var(--mut);font-weight:400;margin-left:2px}
.mp-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.mp-tabs button[aria-selected=true] small{color:#c9ccd1}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.mp-card{position:relative;display:grid;grid-template-rows:auto auto auto auto;align-content:start;gap:1px;padding:10px 12px 12px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:150px}
.mp-card:hover,.mp-card:focus-visible{border-color:var(--ink);outline:none;box-shadow:0 4px 16px rgba(17,18,22,.08)}
.mp-card.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.mp-card.off{opacity:.55;cursor:default}
.mp-img{display:block;height:88px;margin:0 -4px 6px}
.mp-img img{display:block;width:100%;height:100%;object-fit:contain}
.mp-b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.mp-t{font-family:Teko,sans-serif;font-weight:600;font-size:26px;line-height:1}
.mp-s{font-size:13px;color:var(--ink2)}
.mp-on{position:absolute;right:10px;top:8px;font-style:normal;color:var(--red);font-weight:700}

/* landing = the picker as a page (no model chosen yet) */
.landing{min-height:calc(100vh - 56px);background:linear-gradient(#e9ecef,#f4f5f6 340px)}
.landing-in{max-width:1180px;margin:0 auto;padding:36px 24px 48px}
.landing-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.landing h1{font-size:56px;margin:8px 0 6px}
.landing-lede{max-width:640px;color:var(--ink2);margin:0 0 8px}
.landing .mp-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.landing .mp-img{height:110px}
#landing-note{margin:10px 0}

/* switch in progress: the current vehicle stays visible underneath until the next one is ready */
.switching{position:fixed;inset:56px 0 0 0;z-index:30;display:grid;place-items:center;background:rgba(244,245,246,.55);pointer-events:none}
.switching div{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 16px;font-size:14px}
.switching i{width:14px;height:14px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:sw-spin .8s linear infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.switching i{animation:none}}
#shell-toast{z-index:45}

@media (max-width:900px){
  .mp-open{max-width:none;flex:1 1 auto;min-width:0}
  .mp-open-k{display:none}
  .mp-open b{font-size:20px}
  .shell .crumb .crumb-back,.shell .crumb .proto{display:none}
  .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing h1{font-size:40px}
  .landing-in{padding:22px 16px 40px}
  .mp-card{min-height:0}
  .mp-img,.landing .mp-img{height:72px}
}
@media (max-width:600px){
  .shell .top{gap:10px}
  .shell .brand{font-size:22px}
}

/* review notes (shared candidate only, REVIEW_NOTES=1 — src/review_notes.js) */
.rn-open{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;flex:none;margin-left:auto}
.rn-open i{font-style:normal;font-size:15px}
.rn-open:hover,.rn-open:focus-visible,.rn-open.on{border-color:var(--ink)}
.rn-open + .build-id{margin-left:0}
.rn{position:fixed;top:64px;right:16px;z-index:60;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 80px);overflow:auto;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(15,20,25,.18);padding:14px 16px 12px}
.rn-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rn-head h2{font-size:17px;margin:0}
.rn-x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink2);padding:2px 6px}
.rn-lede{font-size:13px;color:var(--ink2);margin:6px 0 10px}
.rn-l{display:block;font-size:13px;font-weight:600;margin:8px 0 4px}.rn-l span{font-weight:400;color:var(--mut)}
.rn textarea,.rn input[type=text]{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.rn textarea{resize:vertical;min-height:96px}
.rn textarea:focus,.rn input[type=text]:focus{outline:2px solid var(--ink);outline-offset:0}
.rn .rn-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rn-ctx{font-size:12px;color:var(--mut);margin:8px 0 0;overflow-wrap:anywhere}
.rn-act{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rn-send{height:38px;padding:0 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.rn-send:disabled{opacity:.5;cursor:default}
.rn-msg{font-size:13px;color:var(--ink2)}
.rn-priv{font-size:12px;color:var(--mut);margin:8px 0 0}
.rn-list{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.rn-list summary{cursor:pointer;font-size:14px;font-weight:600}
.rn-items{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.rn-items li{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.rn-items .rn-meta{font-size:12px;color:var(--mut);overflow-wrap:anywhere}
.rn-items p{margin:4px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.rn-items .rn-empty{border:0;padding:0;font-size:13px;color:var(--mut)}
/* the header is full between ~900 and 1360 px (section tabs + model link): icon only there and on phones; the label stays for screen readers */
@media (max-width:1360px){.rn-open{width:34px;padding:0;justify-content:center}.rn-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:600px){.rn{top:60px;right:8px;left:8px;width:auto}}

/* 23. 10. (joint check SEAL 6 Touring 18/19): in REVIEW mode the header also carries the review chip and the notes button — below 1600 px the
   „Stránka modelu ↗“ link then covered the Technológie tab (long model names); reviewers lose that link there, customers keep it */
@media (max-width:1599px){body.review-mode .top .crumb{display:none}}

/* production: the way back to the dealer website from the model picker (phones hide the header link) */
.mp-home{margin:14px 0 0}.mp-home a{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* reCAPTCHA v3 (production enquiries): the badge would cover the price bar and the phone tab bar; the form names reCAPTCHA with its links instead (allowed by Google) */
.grecaptcha-badge{visibility:hidden}