/**
 * D5 (2026-08-14) - MINIMALNI, funkcni styl pro Modelator plugin sloty.
 *
 * POZOR pro dalsiho agenta: toto NENI vizualni 1:1 parita se starym
 * konfiguratorem (Q-C2 pozadavek analyzy) - je to jen citelny, pouzitelny
 * layout, aby slo D5 client-side vyvijet a testovat. Skutecna vizualni
 * shoda vyzaduje review v prohlizeci (viz stavovy dokument sekce D5,
 * "Otevrene body") - agent bez pristupu k vizualni kontrole nemuze tvrdit
 * pixel-perfect parity, jen ji poctive oznacit jako neoverenou.
 */
.modelator-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
}

@media (max-width: 960px) {
  .modelator-shell {
    grid-template-columns: 1fr;
  }
}

.modelator-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modelator-status-item {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #f0f0f0;
}

.modelator-status-item--ready {
  background: #e3f5e6;
  color: #1c6b2c;
}

.modelator-status-item--error {
  background: #fbe4e4;
  color: #a32020;
}

.modelator-status-item--idle {
  background: #f0f0f0;
  color: #6a6a6a;
}

.modelator-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Nalez 2026-08-26 (prvni realny klikaci test na UAT) - sekce se ted
   vykresluji jako nativni <details>/<summary> (misto <fieldset>/<legend>),
   aby sly sbalit bez JS zavislosti (viz form.js render() docblock). */
.modelator-section > summary {
  font-weight: 600;
  cursor: pointer;
  list-style-position: outside;
}

.modelator-section[open] > summary {
  margin-bottom: 12px;
}

.modelator-viz {
  position: relative;
  margin-bottom: 20px;
}

.modelator-viz-search {
  position: relative;
  margin-bottom: 8px;
}

.modelator-viz-search input {
  width: 100%;
  padding: 8px 10px;
}

.modelator-viz-search ul {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
}

/* D5 (2026-08-14): mapa POTREBUJE explicitni vysku, jinak MapLibre GL
   vykresli 0x0 platno (viz plugins/viz-tls.js - vizualne neoverene v tomto
   prostredi, viz stavovy dokument). */
.modelator-viz-map {
  width: 100%;
  height: 420px;
  background: #e8e8e8;
  border-radius: 8px;
}

.modelator-viz-status {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #666;
}

/* D5 (2026-08-15): WebGLRenderer potrebuje explicitni vysku kontejneru
   stejne jako MapLibre vyse (jinak canvas.clientHeight=0 => renderer
   nastavi velikost 0x0). Vizualne NEOVERENO - viz stavovy dokument. */
.modelator-preview3d {
  margin-bottom: 20px;
}

.modelator-preview3d-canvas {
  width: 100%;
  height: 420px;
  background: #efe7da;
  border-radius: 8px;
  overflow: hidden;
}

.modelator-preview3d-canvas canvas {
  display: block;
}

.modelator-ar {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.modelator-ar-status {
  font-weight: 600;
  margin: 0 0 4px;
}

.modelator-ar-copy {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 8px;
}

.modelator-ar-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* NALEZ (2026-08-18, UAT): bez tohoto pravidla se modal zobrazoval CELOPLOSNE
   vzdy od prvniho vykresleni, bez ohledu na atribut `hidden` (JS ho spravne
   nastavuje, viz plugins/ar.js closeModal/openModal) - `display: flex` v
   pravidle vyse je autorske CSS a prebiji vychozi prohlizecove `[hidden]{display:
   none}` bez ohledu na poradi/specificitu. */
.modelator-ar-modal[hidden] {
  display: none;
}

.modelator-ar-modal-body {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  width: min(100%, 340px);
  /* NALEZ 2026-08-23 (vizualni QA vlastnikem, D6.11): bez `min-width: 0` v
     tomto flex-centrovanem modalu nutil nezalomitelny 64znakovy hex hash
     (data-ar-model-hash) box roztahnout se daleko pres `max-width` - flex
     polozky maji vychozi `min-width: auto`, ktere respektuje obsahovou
     min-sirku PRED `max-width`. `overflow-wrap` na hash nize resi totez
     z druhe strany (zalomeni dlouheho retezce). */
  min-width: 0;
  max-width: 340px;
  text-align: center;
}

.modelator-ar-modal-body h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
}

.modelator-ar-modal-body > p {
  margin: 0 0 18px;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.5;
}

.modelator-ar-modal-body img {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.modelator-ar-modal-qr-wrap {
  display: grid;
  justify-items: center;
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid #ddd;
  background: #faf8f2;
}

.modelator-ar-modal-body dl {
  display: grid;
  gap: 4px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eee;
  font-size: 12px;
}

.modelator-ar-modal-body dt {
  color: #8a8a8a;
}

.modelator-ar-modal-body dd {
  margin: 0 0 8px;
  color: #333;
  /* Viz nalez u .modelator-ar-modal-body vyse - dlouhy hash se musi umet
     zalomit, jinak roztahuje celou kartu. */
  overflow-wrap: anywhere;
  word-break: break-all;
}

.modelator-ar-modal-body dd:last-child {
  margin-bottom: 0;
}

.modelator-ar-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.modelator-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.modelator-field-tooltip {
  font-size: 0.8rem;
  color: #666;
  margin: 0;
}

/* D6.12 (2026-08-23) - `validation_error` efekt, prvni skutecny konzument. */
.modelator-field-error {
  font-size: 0.8rem;
  color: #a32020;
  margin: 0;
}

.modelator-widget-segmented,
.modelator-widget-chips,
.modelator-widget-color-swatch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Korekce D6.12 (2026-08-24) - vybrany stav tlacitka nemel zadny vizualni
   projev krome aria-pressed atributu (ten uz se spravne prepinal). Stejny
   vzor jako .modelator-stage-tab[aria-pressed="true"] nize v tomto souboru
   a legacy .mode-chip.is-active (public/legacy-configurator/assets/css/app.css). */
.modelator-widget-segmented button,
.modelator-widget-chips button {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.modelator-widget-segmented button:hover,
.modelator-widget-chips button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.modelator-widget-segmented button[aria-pressed="true"],
.modelator-widget-chips button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.modelator-widget-segmented button:disabled,
.modelator-widget-chips button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Korekce D6.12 (2026-08-24) - GPX upload widget: prazdny (dropzone) a
   vyplneny (nazev souboru + Odebrat) stav. Vzor prevzaty z legacy
   `public/legacy-configurator/assets/css/lite.css` (.cfg-lite-drop). */
.modelator-widget-upload-input {
  display: none;
}

.modelator-widget-upload-drop {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 16px;
  border: 1px dashed var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.modelator-widget-upload-drop strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.modelator-widget-upload-drop span {
  font-size: 12.5px;
}

.modelator-widget-upload-drop:hover,
.modelator-widget-upload-drop.is-dragover {
  border-color: var(--ink);
  color: var(--ink);
}

.modelator-widget-upload-drop.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Nalez 2026-08-26 (prvni realny klikaci test na UAT) - prubeh nahravani
   GPX trasy (viz widgets/index.js buildUploadDropzone()). */
.modelator-widget-upload-progress {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Nalez 2026-08-26 (druhy klikaci test) - text sam o sobe nestacil jako
   indikace probihajici operace (upload i odebrani trasy), vlastnik chtel i
   vizualni prvek. Cisty CSS-only rotujici prstenec, viz widgets/index.js
   buildSpinner(). */
.modelator-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: modelator-spin 0.7s linear infinite;
}

@keyframes modelator-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modelator-spinner {
    animation-duration: 2.5s;
  }
}

.modelator-widget-upload--filled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

/* UAT nalez 2026-09-03 - nazev trasy pretekal mimo kartu "Zdroj trasy".
   Cely rozbor je v docblocku `buildTrackNameWithCallout()` (widgets/index.js);
   ve zkratce: `text-overflow` na flex kontejneru neplati a flex polozka se bez
   `min-width: 0` nezmensi pod sirku obsahu. Oboji je potreba zaroven. */
.modelator-widget-upload-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  /* Bez tohohle se polozka nikdy nezmensi pod sirku obsahu a orez se neuplatni. */
  min-width: 0;
  /* Call-out lezi NAD nazvem, takze polozka sklada svisle. */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Stav "odebiram trasu" ma vedle sebe spinner a text - tam svisle skladani
   nechceme, jde o jeden radek. */
.modelator-widget-upload-name[role="status"] {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Teprve tenhle obal je BLOKOVY kontejner, na kterem `text-overflow` funguje. */
.modelator-widget-upload-name-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.modelator-widget-upload-name-text:focus-visible {
  outline: 2px solid var(--accent, #b87333);
  outline-offset: 2px;
}

/* Call-out s celym nazvem. V TOKU, ne absolutne - levy sloupec ma
   `overflow: hidden`, takze bublina u horniho okraje by se orizla. */
.modelator-widget-upload-name-callout {
  display: block;
  margin-bottom: 6px;
  padding: 7px 9px;
  border-left: 3px solid var(--accent, #b87333);
  background: var(--paper, #f2f0e6);
  font-size: 12px;
  line-height: 1.45;
  /* Cely nazev se ZALOMI - to je smysl call-outu, orez uz je nad nim. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.modelator-widget-upload-remove {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

.modelator-widget-upload-remove:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.modelator-widget-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modelator-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modelator-recommend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modelator-recommend > div {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.modelator-recommend--danger {
  background: #fbe4e4;
  color: #a32020;
}

.modelator-recommend--warning {
  background: #fdf3d8;
  color: #8a6100;
}

.modelator-recommend--success {
  background: #e3f5e6;
  color: #1c6b2c;
}

.modelator-recommend--info {
  background: #e6effa;
  color: #1c4f8a;
}

.modelator-price {
  font-size: 1.4rem;
  font-weight: 600;
}

.modelator-recap-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

/* V9 (2026-08-28, vlastnikuv bod 3) - rekapitulace je nove seskupena po
   sekcich ve stejnem poradi jako formular (viz plugins/recap.js). Nadpis
   sekce je zamerne decentni: rekapitulace ma zustat prehledovym souhrnem,
   ne druhym formularem. */
.modelator-recap-section + .modelator-recap-section {
  margin-top: 16px;
}

.modelator-recap-section-title {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
}

/* OPRAVA (2026-09-01, UAT nalez) - sekce rekapitulace (mimo "Trasa", ktera
   zustava prosty <div>, viz recap.js) jsou ted sbalitelne <details>/<summary>
   - stejny "+/-" jazyk, jaky uz ma `.modelator-recap-breakdown` (rozpad
   naceneni) o par set radku niz. `display:flex` na summary zaroven potlaci
   nativni disclosure trojuhelnik (marker se aplikuje jen na `display:list-item`). */
.modelator-recap-section > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.modelator-recap-section > summary::after {
  content: "+";
  margin-left: auto;
  color: #6b6b6b;
  font-size: 13px;
  line-height: 1;
}

.modelator-recap-section[open] > summary::after {
  content: "−";
}

.modelator-recap-total {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* D19 (2026-08-31, zadani body 10-11) - kosik/ulozeni modelace
   (plugins/cart.js). Davka 3 (2026-09-13, #84): blok .modelator-checkout-*
   (D8.4 primo objednavka) smazan spolu s plugins/checkout.js. */
.modelator-cart-error {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fbe4e4;
  color: #a32020;
}

/* Limitovane edice E2 (AD-285) - stitek „zbyva X z N“ a vysvetleni, proc nejde
   vlozit do kosiku (plugins/cart.js). */
.modelator-edition-badge {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #f3efe6;
  color: #4a3b1f;
}

.modelator-edition-badge[data-edition-state="sold_out"],
.modelator-edition-badge[data-edition-state="upcoming"],
.modelator-edition-badge[data-edition-state="ended"] {
  background: #fbe4e4;
  color: #a32020;
}

.modelator-cart-success {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #e3f5e6;
  color: #1c6b2c;
}

/* D6.10 (2026-08-22) - manualni autoquote rezim (WEB_APP_MODELATOR_AUTOQUOTE_DEBOUNCE_MS=0,
   plugins/autoquote-gate.js). Vizualne NEOVERENO - viz hlavicka souboru. */
.modelator-autoquote-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff3cd;
  color: #7a5c00;
  font-size: 0.9rem;
}

.modelator-autoquote-gate-text {
  flex: 1 1 auto;
}

.modelator-autoquote-gate-button {
  flex: 0 0 auto;
}

/* Davka F2 (2026-09-15), #67: bloky `.modelator-input-mode*` (plugin
   input-mode.js, jen Classic), `.modelator-shell--classic` + `.modelator-col--*`
   (sablona modelator-full-classic) a obal `.modelator-stage` (stage vetev
   sdileneho partialu, vizualizace configurator-stage-v1) smazany spolu s
   markupem. VSECHNA `.modelator-stage-*` pravidla nize ZUSTAVAJI - je to
   viewport Lite (lite.blade.php), ovlada ho plugins/stage-chrome.js.
   Hodnoty puvodne portovane 1:1 ze stareho /configurator "podia"
   (public/legacy-configurator/assets/css/app.css, tridy .cfg-stage-... a
   .cfg-north-indicator...).

   UAT nalez 2026-09-15 (web-app 1.12.68): puvodni zneni teto vety obsahovalo
   ".cfg-stage-*" bezprostredne nasledovane lomitkem - hvezdicka + lomitko je
   KONEC KOMENTARE, zbytek vety zustal mimo komentar a prohlizec ho slepil s
   nasledujicim selektorem do neplatneho pravidla, ktere zahodil. Od 2026-08-23
   to tise sezralo neskodne `.modelator-stage { margin-bottom }`; po jeho
   smazani v davce F2 zacalo mizet `.modelator-stage-canvas` (viewport Lite
   bez obalu: mapa pres vyhledavani i zalozky). Hlida
   tests/JavaScript/css-comments-close-where-intended.test.mjs - v komentari
   nikdy nepsat hvezdicku primo pred lomitkem. */
.modelator-stage-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(480px, 62vh, 720px);
  padding: clamp(20px, 4vw, 56px);
  /* Vetsi spodni odsazeni = misto pro "ouska" (taby) pod spodni hranou okna. */
  padding-bottom: clamp(52px, 6vw, 76px);
  overflow: hidden;
  background: #0f1412;
  border-radius: 8px;
}

.modelator-stage-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.modelator-stage-pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mapa zustava viditelna i kdyz neni aktivni (3D nahled tab) = "zamrzla"
   posledni pozice pod 3D nahledem, stejne jako .cfg-pane-map ve starem
   /configurator - jen pointer-events se toggluje. */
.modelator-stage-pane--map {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.modelator-stage-pane--map.is-active {
  pointer-events: auto;
}

/* Sloty vizTls/preview3d uvnitr stage panelu potrebuji vyplnit celou plochu
   panelu (na rozdil od plocheho layoutu, kde maji pevnou vysku 420px). */
.modelator-stage-pane .modelator-viz,
.modelator-stage-pane .modelator-preview3d {
  position: relative;
  height: 100%;
  margin: 0;
}

.modelator-stage-pane .modelator-viz-map,
.modelator-stage-pane .modelator-preview3d-canvas {
  height: 100%;
  border-radius: 0;
}

/* NALEZ 2026-08-23 (vizualni QA vlastnikem, D6.11 #1): vyhledavaci pole a
   stavovy text mapy jsou v plochem layoutu obycejne blokove prvky NAD mapou
   (viz zakladni .modelator-viz-search/.modelator-viz-status vyse) - v tomto
   "okennim" stage layoutu ale mapa musi vyplnit 100 % panelu (pravidlo vyse),
   takze normalni tok vytlacoval vyhledavani nad cely canvas a mapu roztahoval
   pres okraj. Vyjmuti z toku (position: absolute) resi obojí najednou.*/
.modelator-stage-pane .modelator-viz-search {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: min(280px, calc(100% - 32px));
  margin: 0;
}

.modelator-stage-pane .modelator-viz-status {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  margin: 0;
  padding: 4px 8px;
  background: rgba(255, 251, 244, 0.92);
  border: 1px solid rgba(18, 24, 22, 0.14);
  border-radius: 4px;
  font-size: 0.78rem;
}

/* NALEZ 2026-08-23 (vizualni QA vlastnikem, D6.11 #2+#3): nativni
   MapLibre/Mapbox ovladaci prvky (zoom, meritko a POVINNA licencni atribuce
   poskytovatele mapovych podkladu) nemely zadny z-index, takze lezely POD
   ztmavovaci vrstvou (.modelator-stage-scrim, z-index: 1) - viditelny byl
   nanejvys uzky prouzek, kde scrim panel neprekryval. Port stejneho pravidla
   jako stary /configurator (.cfg-pane-map .maplibregl-control-container). */
.modelator-stage-pane--map .maplibregl-control-container,
.modelator-stage-pane--map .mapboxgl-control-container {
  z-index: 4;
}

/* Ztmavovaci vrstva (efekt modalniho okna): 4 panely kolem prostredniho okna.
   Vyrez (= okno) pocita JS (stage-chrome.js syncStageScrim()) do CSS
   promennych --scrim-win-*, ktere ctou panely nize. */
.modelator-stage-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.modelator-stage-scrim-panel {
  position: absolute;
  background: rgba(7, 11, 9, 0.46);
  pointer-events: auto;
}

.modelator-stage-scrim-panel--top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--scrim-win-t, 8%);
}

.modelator-stage-scrim-panel--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  top: var(--scrim-win-b, 92%);
}

.modelator-stage-scrim-panel--left {
  left: 0;
  width: var(--scrim-win-l, 16%);
  top: var(--scrim-win-t, 8%);
  bottom: calc(100% - var(--scrim-win-b, 92%));
}

.modelator-stage-scrim-panel--right {
  right: 0;
  left: var(--scrim-win-r, 84%);
  top: var(--scrim-win-t, 8%);
  bottom: calc(100% - var(--scrim-win-b, 92%));
}

/* Prostredni "okno": cisty vyrez do sdilene mapy, pruhledne pozadi. */
.modelator-stage-stack {
  position: relative;
  z-index: 2;
  height: min(100%, 600px);
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.modelator-stage-status {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* V3 (2026-08-28, zadani bod 1) - loader pres cele okno vyrezu behem prepoctu
   nahledu. Vizualni predloha je puvodni /configurator (screenshot vlastnika):
   zesvetlene/ztmavene okno, spinner uprostred, popisek pod nim.
   `pointer-events: auto` prebiji `pointer-events: none` rodicovskeho
   .modelator-stage-stack - behem prepoctu se tim zaroven blokuje interakce s
   modelem v okne (zadani: "disablovani vstupu na kartu zobrazeni"). */
.modelator-stage-loader {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(250, 249, 246, 0.72);
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
}

.modelator-stage-loader[hidden] {
  display: none;
}

.modelator-stage-loader-spinner {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(0, 0, 0, 0.14);
  border-top-color: var(--ink, #1c1c1c);
  border-radius: 50%;
  animation: modelator-stage-loader-spin 900ms linear infinite;
}

.modelator-stage-loader-label {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@keyframes modelator-stage-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Uzivatele s omezenim pohybu v systemu (prefers-reduced-motion) nesmi dostat
   tocici se prvek - loader zustava, jen bez animace. */
@media (prefers-reduced-motion: reduce) {
  .modelator-stage-loader-spinner {
    animation: none;
  }
}

.modelator-stage-meta-label {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 4;
  max-width: calc(100% - 80px);
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Tlacitka jako "ouska" na spodni hrane prostredniho okna. Sirka = sirka okna
   (z --scrim-win-*), tri rovnomerne dily (mapa/3D/AR). */
.modelator-stage-tabs {
  position: absolute;
  z-index: 3;
  left: var(--scrim-win-l, 16%);
  width: calc(var(--scrim-win-r, 84%) - var(--scrim-win-l, 16%));
  top: var(--scrim-win-b, 92%);
  display: flex;
}

.modelator-stage-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.modelator-stage-tab + .modelator-stage-tab {
  border-left: 0;
}

.modelator-stage-tab:hover {
  background: var(--paper-raised);
}

.modelator-stage-tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.modelator-stage-tab:disabled,
.modelator-stage-tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* AR slot (.modelator-ar, beze zmeny plugins/ar.js) je 3. "ousko" tab-listy -
   `display: contents` vyjme obalovy <div data-modelator-slot="ar"> ze
   souvisleho toku (tlacitko [data-ar-launch] se pak chova jako primy flex
   potomek .modelator-stage-tabs), status/copy odstavce a modal zustavaji v
   DOM (ar.js do nich pise), jen se v tomto kompaktnim kontextu nezobrazuji -
   modal je stejne `position: fixed` a escapuje z toku uplne. */
.modelator-stage-tabs [data-modelator-slot="ar"] {
  display: contents;
}

.modelator-stage-tabs [data-ar-status],
.modelator-stage-tabs [data-ar-copy] {
  display: none;
}

.modelator-stage-tab--ar {
  border: 1px solid var(--line);
}

/* Kompas (3D nahled tab) - otaci se podle kamery, viz stage-chrome.js
   syncNorthIndicator()/computeNorthIndicatorAngle(). */
.modelator-stage-north-indicator {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
}

.modelator-stage-north-indicator-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(18, 24, 22, 0.14);
  border-radius: 999px;
  background: rgba(255, 251, 244, 0.92);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.modelator-stage-north-indicator-arrow {
  display: block;
  width: 2px;
  height: 44px;
  position: relative;
  background: linear-gradient(180deg, rgba(18, 24, 22, 0.1) 0%, rgba(18, 24, 22, 0.7) 100%);
  transform-origin: 50% 85%;
  transition: transform 120ms linear;
}

.modelator-stage-north-indicator-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  background: rgba(255, 251, 244, 0.82);
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 640px) {
  .modelator-stage-meta-label,
  .modelator-stage-north-indicator {
    display: none;
  }
}

/* ==========================================================================
   D12 (2026-08-28) — REDESIGN LAYOUTU LITE (`modelator-lite`)
   Wireframe v8, analyza dopadu kap. 16, plan implementace davka D12.

   BARVY: vsechno cerpa z GLOBALNICH tokenu webu (`resources/css/app.css`,
   `--paper`/`--ink`/`--line`/`--mono`...) - rozhodnuti vlastnika (2026-08-28,
   ad3): "barvy pouzijeme nase z nasi css". Wireframova vlastni paleta
   (modra #4f67e9) se NEPREBIRA - nikde jinde na webu se nevyskytuje.

   CHYBEJICI TOKENY se definuji NIZE, scopovane pod `[data-modelator-root]`, ne
   v `app.css`. Duvod: `app.css` prochazi Vite buildem, takze jeho zmena si
   vynuti plny frontend rebuild; `modelator.css` se linkuje primo pres
   `asset()` a nasazuje se patchem. Hodnoty NEJSOU vymyslene - jsou to uz
   existujici, jen netokenizovane barvy z `app.css` (`.tone-success` :2748,
   `.tone-warning` :2752, `.tone-danger` :2756, `--surface` fallback :2772).
   Az je bude potrebovat i zbytek webu, presunou se do `app.css` beze zmeny
   hodnot.
   ========================================================================== */

[data-modelator-root] {
  --modelator-success: #17643b;
  --modelator-warning: #8a5a12;
  --modelator-danger: #932f24;
  --modelator-surface: #ece9e1;
  --modelator-lite-gap: 14px;
}

[data-theme="dark"] [data-modelator-root] {
  /* Stejny vzor jako `--brand`/`--accent` v app.css: tmavy motiv posouva
     odstiny do svetlejsich, aby drzely kontrast na tmavem papire. */
  --modelator-success: #4cae83;
  --modelator-warning: #d8a34a;
  --modelator-danger: #e08276;
  --modelator-surface: #232422;
}

/* ---------- Kostra tri sloupcu ---------- */

.modelator-shell--lite {
  display: grid;
  grid-template-columns: 334px minmax(500px, 1fr) 318px;
  align-items: start;
  gap: var(--modelator-lite-gap);
  padding: var(--modelator-lite-gap) 0 45px;
}

.modelator-lite-panel {
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

/* Levy sloupec je sticky pod globalni hlavickou (spec kap. 3) a INTERNE
   sroluje (`.modelator-lite-panel-scroll` nize) - `top` se odvozuje od
   skutecne vysky hlavicky webu, ne z natvrdo zapsane hodnoty.

   `--site-header-height` nastavuje `resources/views/layouts/app.blade.php`
   (skript na konci `<body>`) z realne vysky `header.nav`, vcetne prepoctu pri
   zmene sirky okna. Do 2026-09-03 se promenna NIKDE nedefinovala a vsechna
   ctyri pouziti nize tise jela na fallbacku 68px - fallback proto zustava,
   ale uz jen jako pojistka pro pripad, ze skript nedobehne. */
.modelator-lite-panel--config {
  position: sticky;
  top: calc(var(--site-header-height, 68px) + 16px);
  max-height: calc(100vh - var(--site-header-height, 68px) - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* OPRAVA (2026-09-01, UAT nalez) - stredni ("stage") sloupec NESMI mit
   vlastni posuvnik - jeho vyska se ma dynamicky prizpusobit poloz kam
   uvnitr (viewport + sync pruh + doporuceni + admin-only stavovy panel/
   SYSTEM). Predchozi reseni (D21, 2026-09-01, viz git historie) resilo
   klipovany obsah pridanim `max-height`+`overflow:hidden` sem a
   `overflow-y:auto` na `.modelator-lite-stage` nize - vlastnik si ale
   vyslovne nepral posuvnik, chce prirozenou vysku (presne to, co uz na
   mobilu dela media query nize - `position:static; max-height:none;
   overflow:visible`). Panel proto zustava sticky (drzi se pod hlavickou),
   ale uz nema zadny vyskovy strop - roste s obsahem, stranka pak sroluje
   cela, misto internich posuvniku uvnitr sloupce. */
.modelator-lite-panel--viz {
  position: sticky;
  top: calc(var(--site-header-height, 68px) + 16px);
  display: flex;
  flex-direction: column;
}

.modelator-lite-panel--order {
  position: sticky;
  top: calc(var(--site-header-height, 68px) + 16px);
  padding: 20px 18px;
}

.modelator-lite-panel-head {
  flex: 0 0 auto;
  padding: 18px 18px 15px;
  border-bottom: 1px solid var(--line);
}

.modelator-lite-panel-head h1 {
  margin: 6px 0;
  font-size: 23px;
  letter-spacing: -0.025em;
}

.modelator-lite-panel-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.modelator-eyebrow {
  display: block;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.modelator-lite-panel-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 15px 16px 26px;
  scrollbar-width: thin;
}

/* ---------- Lead blok (produktovy rezim + zdroj trasy) ---------- */

.modelator-lite-lead:not(:empty) {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

/* ---------- Akordeon sekci ----------
   `form.js` uz sekce renderuje jako nativni details/summary (nalez
   2026-08-26) - D12 je jen ostyluje do podoby karet z wireframu. Zadna JS
   zavislost, sbaleni funguje i bez skriptu. */

.modelator-shell--lite .modelator-section {
  margin-bottom: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}

.modelator-shell--lite .modelator-section > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* OPRAVA (2026-09-01, UAT nalez) - eyebrow "NASTAVENÍ KOLEKCE" vedle nazvu
   sekce (D14, 2026-08-31) byl na vlastnikovu zadost odstranen z markupu
   (form.js uz ho nevykresluje) - pravidlo tu proto uz nema na co sednout. */

.modelator-shell--lite .modelator-section > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1;
}

.modelator-shell--lite .modelator-section[open] > summary::after {
  content: "−";
}

.modelator-shell--lite .modelator-section[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.modelator-shell--lite .modelator-section > .modelator-field {
  padding: 0 12px;
}

.modelator-shell--lite .modelator-section > .modelator-field:first-of-type {
  padding-top: 12px;
}

.modelator-shell--lite .modelator-section > .modelator-field:last-child {
  padding-bottom: 14px;
}

/* ---------- Vyber (produktovy rezim, velikost) ----------
   Vzor prevzat z uz existujici site konvence `.ship-card:has(input:checked)`
   (app.css:1593, vyber dopravy v checkoutu) - tmavy ramecek + zvyseny papir +
   inset prstenec. NE wireframova modra. */

.modelator-shell--lite .modelator-widget-segmented,
.modelator-shell--lite .modelator-widget-chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

/* Velikost ma 5 hodnot - vlastni mrizka, at se nesmackne do sloupcu. */
.modelator-shell--lite [data-field="size"] .modelator-widget-segmented {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.modelator-shell--lite .modelator-widget-segmented button,
.modelator-shell--lite .modelator-widget-chips button {
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}

.modelator-shell--lite .modelator-widget-segmented button[aria-pressed="true"],
.modelator-shell--lite .modelator-widget-chips button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--paper-raised);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-weight: 700;
}

/* D14 (2026-08-31, zadani bod 2) - slider ve wireframu v8 ma aktualni
   hodnotu tucne nahore vpravo, track uprostred a min/max dole - cisty CSS
   Grid prerozlozeni stavajicich plochych deti (zadna zmena markupu ve
   widgets/index.js). Base rada (Full/Classic) zustava beze zmeny. */
.modelator-shell--lite .modelator-widget-slider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "value value" "input input" "min max";
  gap: 4px;
}

.modelator-shell--lite .modelator-widget-slider > input[type="range"] {
  grid-area: input;
  width: 100%;
  /* OPRAVA (2026-09-02, UAT kolo 2) - puvodne tu bylo `touch-action: none`
     a `min-height: 44px`. Obojí pryc, obojí ze zmereneho duvodu:

     - `none` zabranuje rolovani stranky nad sliderem. Na mobilu ma levy
       sloupec `overflow: visible` (roluje se celou strankou) a slider je pres
       celou sirku, takze vznikl souvisly pruh, ve kterem prst stranku
       neposunul vubec nijak. `manipulation` misto toho ponechava panning a
       zaroven vypina cekani na dvojklik - tim zkracuje okno mezi `touchend` a
       commitem tapu, ktere je jadrem zavodu popsaneho v form.js
       `endInteraction()`.
     - `min-height: 44px` zvetsovalo box INPUTU, ale ne nativni jezdec: ten ma
       na WebKitu velikost z UA shadow stromu a zustal vycentrovany, takze nad
       nim a pod nim vzniklo mrtve pasmo. Dotykovy cil se tim nezvetsil (input
       nema v Lite zadne pozadi ani ramecek, uzivatel mirí na viditelny jezdec),
       jen se zhorsilo, jak snadno se do nej trefit. Pozadavek na 44px cil
       (spec kap. 12 / WCAG 2.5.8) plni odsazeni radku pole, ne vyska inputu. */
  /* OPRAVA (2026-09-02, DOLOZENO diagnostikou z iPadu) - `manipulation` bylo
     porad spatne, jen jinak nez `none`.

     Co ukazal zaznam z iOS: behem doteku na slideru NEPRIJDE ANI JEDEN `input`.
     Hodnota se zmeni az ~7 ms PO `touchend`, kdyz dorazi kompatibilni
     `mousedown` (doslova: touchstart -> touchend -> mousedown -> input).
     WebKit tedy kazdy dotek vyhodnotil jako TAP a nativni tazeni jezdce vubec
     nespustil - protoze `manipulation` dovoluje panning, takze gesto zabral
     scroller. Na desktopu je pritom videt souvisla rada `input` udalosti
     behem jednoho tazeni, jak ma byt.

     `pan-y` je pro VODOROVNY slider spravna hodnota: svisly tah zustava
     rolovani stranky (mobilni sloupec roluje celou strankou, viz
     `.modelator-lite-panel-scroll { overflow: visible }`), zatimco vodorovny
     tah uz scroller nezabira a muze ho prevzit jezdec. Tim odpada i duvod pro
     `pointercancel`, ktery v zaznamu z iPadu trikrat utrhl interakci uplne
     (po nem uz nedosel zadny `input`). */
  touch-action: pan-y;
}

.modelator-shell--lite .modelator-widget-slider-min {
  grid-area: min;
  justify-self: start;
  color: var(--ink-muted);
  font-size: 11px;
}

.modelator-shell--lite .modelator-widget-slider-max {
  grid-area: max;
  justify-self: end;
  color: var(--ink-muted);
  font-size: 11px;
}

.modelator-shell--lite .modelator-widget-slider > output {
  grid-area: value;
  justify-self: end;
  /* D21 (2026-09-01, UAT nalez c. 2) - wireframe v8 barvi hodnotu accentem
     (index.html radek 143 `.range-head output`), ne obecnou textovou barvou. */
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
}

/* D21 (2026-09-01, UAT nalez c. 2) - select/text/number vstupy v Lite
   formulari nemely VUBEC zadnou vlastni stylizaci (jen vychozi OS/prohlizec
   vzhled), coz na nekterych systemech vypada jako zaobleny "pilulkovy"
   prvek misto hranateho ohraniceneho boxu z wireframu v8 (index.html radek
   136). Scoped na .modelator-shell--lite - Full/Classic (jiny formular,
   zamerne beze zmeny, viz D12 verze.json) tímto neprojde. */
.modelator-shell--lite select,
.modelator-shell--lite input[type="text"],
.modelator-shell--lite input[type="number"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
}

.modelator-shell--lite select:focus-visible,
.modelator-shell--lite input[type="text"]:focus-visible,
.modelator-shell--lite input[type="number"]:focus-visible,
.modelator-shell--lite input[type="range"]:focus-visible,
.modelator-shell--lite input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

/* Range slidery mely vychozi prohlizecovou (typicky modrou) barvu vyplne a
   jezdce - wireframe pouziva vlastni `accent-color` (index.html radek 144),
   stejny princip jako uz existujici site konvence
   `.ship-card input[type=radio]{accent-color:var(--ink)}` (app.css:1592),
   jen s --accent misto --ink (viz stejne zduvodneni u D20 productMode
   vyse - struktura z wireframu, barva ze site tokenu). */
.modelator-shell--lite input[type="range"] {
  accent-color: var(--accent);
}

.modelator-shell--lite input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* D21 (2026-09-01, UAT nalez c. 3 - "Zimni rezim"/"Snehova linie") -
   checkbox pole wireframe vykresluje jako radek: popisek+popis VLEVO,
   control VPRAVO, oddelovaci cara dole (index.html `.toggle`, radky
   137-141), ne genericka svisla skladanka `label -> widget -> tooltip`
   pouzivana pro ostatni widgety (renderField(), form.js). Reseno cistym
   CSS Gridem bez zasahu do DOM/renderField() - `tooltip` (tady slouzi jako
   popis pod nazvem) dostava vlastni radek ve STEJNEM sloupci jako label,
   checkbox dostava vlastni sloupec pres oba radky.
   Poradi poli "Snehova linie" pred "Zimni rezim" (vlastnikuv screenshot) je
   admin-konfigurovatelny `sort_order` sekce v Catalog2 - NENI to kod, viz
   docblock LITE_LEAD_FIELD_CODES (form.js) proc se poradi obecne needomysli
   v kodu; oprava patri do administrace kolekce, ne sem. */
.modelator-shell--lite .modelator-field:has(> input[type="checkbox"]) {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label checkbox" "tooltip checkbox";
  align-items: center;
  column-gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* OPRAVA (2026-09-02) - vedle `label` i `.modelator-field-label`: popisek pole
   uz neni vzdy `<label>` (skupinove widgety maji `<span>`, viz form.js), takze
   stylovani nesmi viset na tagu. Dnes obe pravidla mirí na widgety, ktere
   `<label>` MAJI - je to pojistka proti tiche vizualni regresi, kdyby se
   nektery z nich v budoucnu presunul mezi skupinove. */
.modelator-shell--lite .modelator-field:has(> input[type="checkbox"]) > label,
.modelator-shell--lite .modelator-field:has(> input[type="checkbox"]) > .modelator-field-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 700;
}

.modelator-shell--lite .modelator-field:has(> input[type="checkbox"]) > input[type="checkbox"] {
  grid-area: checkbox;
  justify-self: end;
}

.modelator-shell--lite .modelator-field:has(> input[type="checkbox"]) > .modelator-field-tooltip {
  grid-area: tooltip;
  margin: 0;
  font-size: 11px;
}

/* D13 (2026-08-31, zadani bod 1) - Produktovy rezim jako karta s titulkem a
   popiskem (wireframe v8 `.mode-options`: <strong>Terrain</strong>
   <small>samotná krajina</small>), ne uzka pilulka s jednim radkem velkych
   pismen jako vyse. Scoped na `[data-field="productMode"]`, aby sdileny
   `.modelator-widget-segmented` (napr. velikost) zustal beze zmeny - popisek
   dostavaji jen tlacitka, kterym ho `form.js` skutecne posle
   (`optionHints`, viz widgets/index.js buildToggleGroup()). */
.modelator-shell--lite [data-field="productMode"] .modelator-widget-segmented button {
  min-height: 56px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 2px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 700;
}

.modelator-shell--lite [data-field="productMode"] .modelator-widget-segmented button small {
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-soft);
}

/* D20 (2026-09-01, novy UAT nalez bod 1) - vyber Produktoveho rezimu porad
   neodpovidal wireframu, i po D13 vyse (ten resil jen tvar karty, ne
   vybranou kartu). Wireframe (`formion-configurator-html-v8/index.html`
   radek 100) ma `.mode-options button.is-selected { border-color: accent;
   background: accent-soft; box-shadow: inset accent }` - barevny ramecek +
   podbarveni, NE tmavy inset prstenec beze zmeny pozadi jako doted (viz
   docblock u sdilenych `.modelator-widget-segmented button[aria-pressed]`
   par sekci vyse, "NE wireframova modra").
   Wireframuv `--accent` (#4f67e9) je ale CIZI modra, ktera v tomto brandu
   neexistuje - skutecny site accent (`resources/css/app.css`) je medeny
   `#b87333`, ne modra. Prevzata je proto STRUKTURA vyberu (barevny ramecek +
   jemne podbarveni misto ciste tmave), ne doslovna wireframova barva - `var(--accent)`
   uz je to spravne medene tonovani a zustava vizualne v ramci brandu.
   Scoped jen na `[data-field="productMode"]` (bod 1 teto davky) - `size`
   grid (D15) ma stejny sdileny tmavy vzor a zustava zatim beze zmeny, dokud
   nepride vlastni UAT nalez. */
.modelator-shell--lite [data-field="productMode"] .modelator-widget-segmented button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-raised));
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* D15 (2026-08-31, zadani bod 2 - Velikost widget) - size_grid protejsek
   productMode kartoveho pravidla vyse, jen pro uzsi 5-sloupcovou mrizku
   (`[data-field="size"]`, viz grid-template-columns o par radku vyse) -
   text vycentrovany, ne zarovnany vlevo, na kartu se toho neveje na sirku. */
.modelator-shell--lite [data-field="size"] .modelator-widget-segmented button {
  min-height: 52px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.modelator-shell--lite [data-field="size"] .modelator-widget-segmented button small {
  font-weight: 400;
  font-size: 9px;
  color: var(--ink-muted);
}

.modelator-widget-readonly {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid var(--ink);
  background: var(--paper-raised);
  font-size: 12px;
}

/* ---------- Akcni tlacitka v levem sloupci (jen mobil) ----------

   UAT nalez 2026-09-03 (vlastnik, druhe kolo): "tlacitka Aktualizovat nahled a
   cenu, Vlozit konfiguraci do kosiku, Ulozit konfiguraci musi byt na malem
   rozliseni k dispozici i v levem sloupci jako separatni box, aby je uzivatel
   nehledal. Ted jsou skryta pouze v rekapitulaci a to neni videt."

   Na desktopu je pravy sloupec videt trvale, takze by tenhle box byl jen
   zdvojenim tehoz - je proto VYCHOZIM STAVEM SKRYTY a zapina ho az mobilni
   media query nize. Opacne poradi (zobrazit vzdy, skryt na desktopu) by
   znamenalo, ze pri chybejicim CSS uvidi uzivatel tlacitka dvakrat; takhle
   v nejhorsim neuvidi box navic, ktery uz jinde ma. */
.modelator-lite-actions-inline {
  display: none;
  margin-top: 18px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

/* Prazdny box (plugin se jeste nenamountoval, nebo sablona akce nema) nesmi
   po sobe nechat ramecek s odsazenim. */
.modelator-lite-actions-inline:empty {
  display: none;
}

@media (max-width: 960px) {
  .modelator-shell--lite .modelator-lite-actions-inline:not(:empty) {
    display: block;
  }
}

/* ---------- Vyhledavani nad viewportem ---------- */

.modelator-shell--lite .modelator-viz {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 13px;
}

.modelator-lite-search {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.modelator-lite-search-icon {
  padding-left: 11px;
  color: var(--ink-muted);
  font-size: 15px;
}

.modelator-lite-search input {
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 8px 9px;
  color: var(--ink);
  font-size: 13px;
  outline: 0;
}

.modelator-lite-search-submit {
  height: 42px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.modelator-lite-search ul {
  position: absolute;
  z-index: 12;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.modelator-shell--lite .modelator-viz-status:empty {
  display: none;
}

.modelator-shell--lite .modelator-stage-canvas {
  flex: 1 1 auto;
  min-height: 420px;
}

/* 2026-08-31 (redesign Lite, vlastnikuv nalez) - `legacy-configurator/assets/js/map-provider.js`
   mountuje pro KAZDOU sablonu vlastni nativni MapLibre/Mapbox zoom ovladani
   (`NavigationControl`, top-right) - viz jeho `mount()`. V Lite je to
   DUPLICITNI se sadou `.modelator-stage-viewtools` (+/-/reset) nize, ktera
   sedi ve STEJNEM rohu okna a mapu i 3D nahled ovlada jednotne - proto se tu
   nativni control jen schovava CSS-em (Classic/Index vlastni tlacitka nemaji,
   tam nativni control zustava jedinou zoom UI, viz jejich sablony). */
.modelator-shell--lite .maplibregl-ctrl-top-right,
.modelator-shell--lite .mapboxgl-ctrl-top-right {
  display: none;
}

/* ---------- Popisek mista (eyebrow + nazev + detail) ---------- */
/* 2026-08-31 (redesign Lite, wireframe v8) - zakladni `.modelator-stage-meta-label`
   (viz vyse) zustava beze zmeny jako plochy jednoradkovy stitek v rohu OKNA
   vyrezu (`.modelator-stage-stack`). Davka F2 (2026-09-15), #67: jeho puvodni
   konzument (stage vetev sdileneho partialu, "configurator-stage-v1") je pryc,
   `updateMetaLabel()` v stage-chrome.js plochou variantu dal umi (kdyz chybi
   [data-stage-meta-location]). Lite dostava vlastni, bohatsi vzhled: sklenena
   tmava karta na SKUTECNEM okraji cele plochy (`.modelator-stage-canvas`, ne
   stredoveho ctverce), 3 radky (eyebrow/nazev/detail) - viz `updateMetaLabel()`
   v plugins/stage-chrome.js, ktery obe varianty (ploche i 3-radkove) rozlisi
   podle pritomnosti [data-stage-meta-location]. */
.modelator-shell--lite .modelator-stage-meta-label {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 8;
  max-width: calc(100% - 96px);
  margin: 0;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(12, 16, 31, 0.72);
  backdrop-filter: blur(7px);
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.modelator-shell--lite .modelator-stage-meta-eyebrow {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modelator-shell--lite .modelator-stage-meta-label strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelator-shell--lite .modelator-stage-meta-label small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
}

/* ---------- Ovladani nahledu (+/-/reset) ---------- */

.modelator-stage-viewtools {
  position: absolute;
  z-index: 9;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 4px;
}

.modelator-stage-viewtools button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.modelator-stage-viewtools button:hover {
  border-color: var(--ink);
}

/* ---------- Slouceny sync pruh pod viewportem ---------- */

.modelator-lite-sync {
  flex: 0 0 auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 13px 13px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-lite-sync-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-faint);
}

.modelator-lite-sync-dot[data-sync-kind="ready"] {
  background: var(--modelator-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--modelator-success) 16%, transparent);
}

.modelator-lite-sync-dot[data-sync-kind="processing"],
.modelator-lite-sync-dot[data-sync-kind="pending"] {
  background: var(--modelator-warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--modelator-warning) 16%, transparent);
}

.modelator-lite-sync-dot[data-sync-kind="error"] {
  background: var(--modelator-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--modelator-danger) 16%, transparent);
}

.modelator-lite-sync-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.modelator-lite-sync-copy strong {
  font-size: 12px;
}

.modelator-lite-sync-copy small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.35;
}

/* Autoquote gate zije UVNITR sync pruhu - banner uz nema vlastni ramecek ani
   pozadi, splyva do jednoho pruhu (pozadavek "slouceny sync bar"). */
.modelator-lite-sync .modelator-autoquote-gate {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.modelator-lite-sync .modelator-autoquote-gate[hidden] {
  display: none;
}

/* Text "Cekaji neulozene zmeny" uz rika sync pruh sam - v gate zustava jen
   akce, aby se informace nezdvojovala. */
.modelator-lite-sync .modelator-autoquote-gate-text {
  display: none;
}

/* 2026-08-31 (redesign Lite, vlastnikuv nalez) - "Aktualizovat nahled a cenu"
   (plugins/autoquote-gate.js) melo doposud jen `flex: 0 0 auto` (viz vyse) -
   vykreslovalo se surovym prohlizecovym vzhledem tlacitka. Wireframe v8 chce
   ohraniceny "ghost" button - stejny jazyk jako ostatni sekundarni akce
   Lite layoutu (pruhledne pozadi, ramecek `--line`, tmavne pri hoveru). */
.modelator-shell--lite .modelator-autoquote-gate-button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.modelator-shell--lite .modelator-autoquote-gate-button:hover {
  border-color: var(--ink);
}

.modelator-shell--lite .modelator-autoquote-gate-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* OPRAVA (2026-09-01, UAT nalez) - "Aktualizovat nahled a cenu" (hlavni
   akce, ne "Zresetovat modelaci" vedle ni) musi byt vyraznejsi nez ostatni
   sekundarni akce - stejne tmave provedeni jako `.btn-primary`
   (resources/css/app.css) uz pouziva "Vlozit konfiguraci do kosiku". */
.modelator-shell--lite .modelator-autoquote-gate-button:not(.modelator-autoquote-gate-button--reset) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.modelator-shell--lite .modelator-autoquote-gate-button:not(.modelator-autoquote-gate-button--reset):hover {
  background: transparent;
  color: var(--ink);
}

/* D16 (2026-08-31, zadani bod 3) - "recommend" blok opakuje vizualni jazyk
   sync pruhu (tecka + text), misto puvodni barevne "banner" plochy - viz
   `.modelator-recommend` vyse pro puvodni, nyni jen Full/Classic, vzhled.
   OPRAVA (2026-09-01, UAT nalez c. 3, opakovany po nekolikate) - predchozi
   verze davala POLOZCE stejnou tridu `modelator-recommend` jako KONTEJNERU,
   takze kontejnerove pravidlo (vyssi specificita) omylem vyhralo i na
   polozce - ramecek v ramecku + sloupcovy flex (tecka NAD textem misto
   vedle nej). Polozka ma ted VLASTNI tridu (`modelator-recommend-item`,
   viz plugins/recommend.js) a ZNOVUPOUZIVA presne stejne DOM uzly jako sync
   pruh (`.modelator-lite-sync-dot`/`.modelator-lite-sync-copy` vyse) - zadne
   zvlastni pravidlo pro tecku/nadpis/text uz neni potreba, jen rozestupy.
   Box je od tehoz nalezu i PRESUNUTY - sedi uvnitr `.modelator-viz`
   (vyhledavani -> doporuceni -> mapa), ne pod sloucenym sync pruhem, viz
   lite.blade.php. `.modelator-viz` uz ma padding:13px (vyse) - box proto
   NEMA vlastni horizontalni margin (na rozdil od predchozi verze), jinak by
   vzniklo dvojite odsazeni. */
.modelator-shell--lite .modelator-recommend:empty,
.modelator-shell--lite .modelator-recommend[hidden] {
  display: none;
}

.modelator-shell--lite .modelator-recommend:not(:empty) {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-shell--lite .modelator-recommend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
}

.modelator-shell--lite .modelator-recommend-item + .modelator-recommend-item {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.modelator-shell--lite .modelator-recommend-item .modelator-lite-sync-dot {
  margin-top: 4px;
}

/* D16 (2026-08-31, zadani bod 4) - status blok, stejny princip jako vyse:
   kontejner + polozky uz nemaji vlastni "pill" pozadi/radius - dot barvu
   resi `.modelator-lite-sync-dot[data-sync-kind=...]` (jiz existujici
   pravidla o par radku vyse), ktere `buildStatusItem()` v `plugins/status.js`
   na kazdou polozku znovu pouziva. */
.modelator-shell--lite .modelator-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 13px 13px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-shell--lite .modelator-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  color: var(--ink);
}

/* OPRAVA (2026-09-01, UAT nalez) - surovy technicky duvod (napr. proc AR
   zustava nedostupne), kdyz ho `resolve()` posle - viz status.js
   buildStatusItem() docblock. Tenhle panel je uz admin-only, takze primo
   technicky text je zamerny, ne "prilis technicke pro zakaznika". */
.modelator-status-item-detail {
  color: var(--ink-muted);
  font-style: italic;
}

/* D21 (2026-09-01, UAT nalez) - "SYSTEM" diagnosticky box, posledni v
   stredni ploše, stejny kartovy vzor jako `.modelator-status` vyse (D16).
   Radky uvnitr (`.modelator-recap-row`/-label/-value) jsou sdilene se
   sekcemi rekapitulace (pravy sloupec) - zamerne, chce se stejny "popisek
   vlevo tlumene, hodnota vpravo tucne" vzhled, ne novy paralelni styl. */
.modelator-system-info {
  margin: 0 13px 13px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-system-info .modelator-recap-section-title {
  margin: 0 0 4px;
}

.modelator-system-info .modelator-recap-row:last-child {
  border-bottom: 0;
}

/* D17 (2026-08-31, zadani bod 8) - AR nahled jako 3. zalozka (data-stage-pane="ar"),
   ne modalni okno. NOVE tridy (.modelator-ar-body/-qr-wrap), NE sdilene
   .modelator-ar-modal-* - ty pouziva beze zmeny Full/Classic (sdileny
   partial _viz-preview-ar-slots.blade.php, plugins/ar.js docblock), kde AR
   porad otevira modal. `.modelator-stage-pane--ar` dedi zakladni
   show/hide z `.modelator-stage-pane` (viz base pravidlo) - staci jen
   vnitrni layout obsahu. */
/* OPRAVA (2026-09-01, UAT nalez) - panel nemel VLASTNI pozadi, jen
   `.modelator-stage-canvas` (spolecny predek vsech trech zalozek) ma tmave
   pozadi (#0f1412) - ALE mapova zalozka pod nim zustava VZDY
   `opacity:1 !important` (viz `.modelator-stage-pane--map` vyse, "zamrzla"
   pozice pod 3D nahledem), takze skrz pruhledny AR panel presvitala mapa
   vsude tam, kde ji nezakryval vlastni svetly QR ramecek. 3D nahled tenhle
   problem nema, protoze jeho canvas (`.modelator-preview3d-canvas`) sam
   vykresli neprusvitnou scenu pres 100% plochy - AR panel zadny takovy
   vlastni canvas nema, potrebuje proto VLASTNI opakni pozadi. `justify-items`/
   `align-content` (misto `place-content`) - stejny vysledek, ale
   jednoznacnejsi pro TRI oddelene grid-radky (status/copy/body), zadna
   zavislost na tom, jak prohlizec pocita "auto" sirku implicitni stopy. */
.modelator-shell--lite .modelator-stage-pane--ar {
  display: grid;
  justify-items: center;
  /* OPRAVA (2026-09-02, UAT kolo 2 - "na PC je obsah AR zalozky useknuty a
     zacina az u nadpisu, na telefonu a iPadu je cely").

     Panel je `position: absolute; inset: 0` uvnitr ctvercoveho vyrezu s
     `overflow: hidden`, takze jeho vyska NIKDY neplyne z obsahu - je dana
     vyrezem. Obsah ma ~650 px, ale vyrez vyjde na 1080p notebooku ~454 px a
     na 1366x768 dokonce ~349 px, zatimco na iPadu 550-600 px. Odtud ten
     rozdil mezi zarizenimi.

     `align-content: center` pri preteceni oreze obsah na OBOU stranach a
     vrsek se nedá dorolovat (klasicka past centrovani + overflow) - proto
     `start`. `overflow-y: auto` uz tu bylo, jen bylo k nicemu. Vysledek: na
     kazdem zarizeni stejny obsah, ktery se v pripade potreby roluje uvnitr
     ramu - shodne s mapou i 3D nahledem. */
  align-content: start;
  overflow-y: auto;
  /* Rolovani AR panelu se nesmi retezit na stranku pod nim. */
  overscroll-behavior: contain;
  padding: 20px;
  background: #0f1412;
}

/* UAT 2026-09-02 - "Pripraveno." je v Lite nadbytecne: zalozka je viditelne
   aktivni a QR kod s tlacitky mluvi sam za sebe. Cileno na `data-tone`, NE na
   cely `[data-ar-status]`, aby chybovy a cekaci stav (`danger`/`neutral`, viz
   plugins/ar.js) zustaly videt - jinak by uzivatel u nedostupneho AR nevidel
   duvod. Full/Classic (modalni okno) se to netyka. */
.modelator-shell--lite .modelator-stage-pane--ar [data-ar-status][data-tone="success"] {
  display: none;
}

.modelator-shell--lite .modelator-ar-status {
  color: var(--paper);
}

.modelator-shell--lite .modelator-ar-copy {
  color: var(--paper);
  opacity: 0.75;
}

.modelator-shell--lite .modelator-ar-body {
  width: min(100%, 320px);
  min-width: 0;
  text-align: center;
}

.modelator-shell--lite .modelator-ar-body h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
}

.modelator-shell--lite .modelator-ar-body > p {
  margin: 0 0 16px;
  color: var(--paper);
  opacity: 0.75;
  font-size: 13px;
  line-height: 1.5;
}

/* OPRAVA (2026-09-01, UAT nalez) - obe tlacitka (`.btn-primary`/`.btn-ghost`,
   sdilene site-wide tridy z app.css - viz `data-ar-modal-open-link`/
   `data-ar-modal-quick-look` v lite.blade.php) byla na tmavem pozadi panelu
   AR necitelna: `.btn-primary` ma tmave pozadi s vychozim VZHLEDEM proti
   svetlemu papiru (splyvalo s tmavym panelem), `.btn-ghost` je pruhledny s
   `color:inherit` (bez vlastniho svetleho prepisu zdedil vychozi tmavy ink -
   tmavy text na tmavem pozadi = neviditelne). Vlastnikuv pozadavek: OBE
   tlacitka maji vypadat jako existujici `.btn-ghost:hover` stav (svetle
   pozadi, tmavy text) - VZDY, ne jen pri najeti mysi. Cilene jen na tlacitka
   UVNITR AR panelu (nemeni Full/Classic modal, kde `.btn-ghost` sedi na
   SVETLEM pozadi a puvodni vzhled je tam spravny). */
.modelator-shell--lite .modelator-ar-body .btn {
  background: var(--inverse-ink);
  border-color: var(--inverse-ink);
  color: var(--ink);
}

.modelator-shell--lite .modelator-ar-body .btn:hover {
  opacity: 0.85;
}

.modelator-shell--lite .modelator-ar-qr-wrap {
  display: grid;
  justify-items: center;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-shell--lite .modelator-ar-qr-wrap img {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.modelator-shell--lite .modelator-ar-body dl {
  display: grid;
  gap: 4px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--paper);
  font-size: 11px;
  text-align: left;
}

.modelator-shell--lite .modelator-ar-body dt {
  opacity: 0.6;
}

.modelator-shell--lite .modelator-ar-body dd {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.modelator-shell--lite .modelator-ar-body dd:last-child {
  margin-bottom: 0;
}

/* ---------- Pravy sloupec: objednavka ---------- */

.modelator-lite-order-head h2 {
  margin: 6px 0 14px;
  font-size: 21px;
}

/* D19 (2026-08-31, zadani body 10-11) - podtitulek s misto, prvni prvek
   uvnitr `.modelator-recap` (wireframe v8 ".order-location") - recap.js ho
   vykresli jen kdyz `state.locationName` neni prazdne (viz jeho render()). */
.modelator-recap-location {
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 13px;
}

/* D21 (2026-09-01, UAT nalez c. 4 - rekapitulace) - vlastnikuv pokyn: nase
   SESKUPENI radku podle sekci z administrace (V9, viz recap.js docblock -
   "rekapitulace ma zustat prehledovym souhrnem") se zachovava beze zmeny -
   wireframe v8 grafiku (ploche `.summary` radky, index.html radky 207-210)
   preberame jen jako VZHLED jednotliveho radku (popisek tlumene vlevo,
   hodnota tucne vpravo, jemny oddelovac), NE jako zplosteni struktury.
   Sekce jiz maji odpovidajici "eyebrow" vzhled (base .modelator-recap-section-title
   vyse, mono/uppercase/tlumene) - jen dolaeno na Lite tokeny/odsazeni. */
.modelator-shell--lite .modelator-recap-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.modelator-shell--lite .modelator-recap-label {
  color: var(--ink-muted);
  font-size: 12px;
}

.modelator-shell--lite .modelator-recap-value {
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  text-align: right;
}

.modelator-shell--lite .modelator-recap-section-title {
  color: var(--ink-muted);
  font-size: 10px;
}

.modelator-shell--lite .modelator-recap-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 13px;
  font-size: inherit;
  font-weight: inherit;
}

.modelator-recap-total-label {
  color: var(--ink-muted);
  font-size: 11px;
}

.modelator-recap-total-value {
  font-size: 21px;
  white-space: nowrap;
}

.modelator-recap-breakdown {
  margin-top: 6px;
  border-bottom: 1px solid var(--line);
}

.modelator-recap-breakdown > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.modelator-recap-breakdown > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
}

.modelator-recap-breakdown[open] > summary::after {
  content: "−";
}

.modelator-recap-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.modelator-recap-breakdown-row--delivery {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.modelator-lite-assurances {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--ink-soft);
  font-size: 11px;
}

.modelator-lite-assurances li::before {
  content: "✓ ";
  color: var(--modelator-success);
}

/* ---------- D21 (2026-09-01) — karta "Zdroj trasy" (GPX + Strava) ----------
   Wireframe v8 `.trail-source`: JEDEN ohraniceny box pro GPX upload i Strava,
   oddeleny od "Produktoveho rezimu" nad nim. Viz lite.blade.php docblock u
   `.modelator-track-source` proc to drive (GPX+Strava ve STEJNEM JS render
   slotu jako productMode) nesla postavit. */
.modelator-track-source {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

/* GPX field skryty pravidlem (rezim Terrain) necha `formLeadTrack` prazdny -
   cely box se v tom pripade schova bez jakehokoli JS zasahu. */
.modelator-track-source:has(.modelator-lite-lead-track:empty) {
  display: none;
}

.modelator-track-source-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.modelator-track-source-status {
  color: var(--modelator-success);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modelator-track-source-status:empty {
  display: none;
}

/* Samotne GPX pole (`renderField()` z form.js) nese vlastni <label>, ktery by
   uvnitr teto karty zdvojoval nadpis "Zdroj trasy" - viditelne se schova, ale
   zustava v DOM (a11y label pro screen readery, ne jen vizualni dekorace). */
.modelator-lite-lead-track .modelator-field > label,
.modelator-lite-lead-track .modelator-field > .modelator-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.modelator-lite-lead-track .modelator-field {
  margin-bottom: 0;
}

/* D21 (2026-09-01) - GPX dropzone uvnitr karty "Zdroj trasy" dostava ikonu +
   text zarovnany vlevo dle wireframu v8 (`.gpx-upload`), misto vystredene
   caps varianty pouzivane jinde (zdilena zakladni stylizace, Full/Classic
   beze zmeny - proto scoped presne na `.modelator-lite-lead-track`, ne
   globalne na `.modelator-widget-upload-drop`). Ikona je CSS `::before` s
   neutralnim glyfem (stejny idiom jako "+"/"−" u accordion sekci vyse) -
   zadny DOM zasah do sdileneho widgets/index.js `buildUploadDropzone()`,
   takze Full/Classic zustavaji bit-identicke. "Vybrat"/"Zmenit" odkaz z
   wireframu zamerne VYNECHAN - cely button uz je klikaci cil, dalsi
   prekladovy klic pro cistě dekorativni duplicitni odkaz by nepridal
   funkcni hodnotu. */
.modelator-lite-lead-track .modelator-widget-upload-drop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon hint";
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px;
  text-align: left;
}

.modelator-lite-lead-track .modelator-widget-upload-drop::before {
  content: "↥";
  grid-area: icon;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
}

.modelator-lite-lead-track .modelator-widget-upload-drop strong {
  grid-area: title;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.modelator-lite-lead-track .modelator-widget-upload-drop span {
  grid-area: hint;
  font-size: 11px;
  color: var(--ink-muted);
}

/* ---------- D12.e — import trasy ze Stravy ----------
   Ted uz jen sourozenec GPX pole UVNITR `.modelator-track-source` (D21) -
   zadny vlastni ramecek/pozadi, ten uz dava obalujici karta. Skryva/odkryva
   se plugin podle stejneho pravidla jako GPX pole (viz strava-source.js). */

.modelator-strava {
  display: grid;
  gap: 8px;
}

.modelator-strava[hidden] {
  display: none;
}

/* Oddelovac "nebo" mezi GPX uploadem a Stravou (wireframe v8). */
.modelator-strava-or {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modelator-strava-or::before,
.modelator-strava-or::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.modelator-strava-connect {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

/* D21 (2026-09-01) - odznak "STRAVA" v jejich vlastni brand barve (#fc4c02) -
   nejde o wireframovou/site paletu, je to znacka partnerske sluzby, stejne
   jako by se pouzilo napr. skutecne PayPal modra na PayPal tlacitku. */
.modelator-strava-badge {
  flex: 0 0 auto;
  padding: 4px 6px;
  background: #fc4c02;
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.modelator-strava-connect:hover:not([disabled]) {
  border-color: var(--ink);
}

.modelator-strava-connect[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.modelator-strava-status:empty {
  display: none;
}

.modelator-strava-status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.4;
}

.modelator-strava-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}

.modelator-strava-list:empty {
  display: none;
}

.modelator-strava-activity {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  cursor: pointer;
}

.modelator-strava-activity:hover {
  border-color: var(--ink);
}

.modelator-strava-login {
  color: var(--ink);
  font-size: 11px;
  text-decoration: underline;
}

/* ==========================================================================
   D12.g — TABLET A MOBIL
   Rozhodnuti vlastnika (2026-08-28, ad4): mobilni UX je soucast davky od
   zacatku, ne oddelitelny dodatek.
   ========================================================================== */

/* --- Tablet: dva sloupce, objednavka se presouva do vysouvaciho panelu --- */
@media (max-width: 1179px) {
  .modelator-shell--lite {
    /* OPRAVA (2026-09-02, UAT nalez 2) - `330px` byla PEVNA stopa: na uzsim
       zarizeni nemela jak ustoupit a cely grid pretekl doprava. `minmax(0,
       330px)` drzi stejnou maximalni sirku, ale dovoli sloupci se zmensit,
       kdyz na nej neni misto. */
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    padding-bottom: 92px;
  }

  .modelator-lite-panel--order {
    position: fixed;
    /* OPRAVA (2026-09-02, UAT kolo 2 - "rekapitulaci prekryje pri scrolovani
       vrstva s polem Odsazeni terenu").

       Prekryvajici prvek nebyl radek formulare, ale TENHLE panel: zakladni
       pravidlo vyse mu dava `top: calc(var(--site-header-height, 68px) + 16px)`
       kvuli DESKTOPOVEMU sticky sloupci, a tenhle mobilni blok `top`
       neprepisoval. `top` + `height` + `bottom` zaroven dela box
       over-constrained; prohlizec podle CSS 2.1 §10.6.4 zahodi `bottom`, panel
       se ukotvi 84 px pod horni hranou a `translateY(101%)` (101 % z 82vh) ho
       uz nema jak dostat pod spodni hranu. Zustal viditelny pruh vysoky
       0.1718 x vyska okna - 84 px (na 915px displeji ~73 px), ve kterem
       prosvital nahodny radek rekapitulace.

       Chyba je v repu od D12.g (2026-08-28); davka 1.12.13 ji jen odkryla tim,
       ze narovnala vysku stage a stranka jde nove dorolovat na konec. */
    top: auto;
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 82vh;
    overflow-y: auto;
    /* Panel lezi nad strankou a sam roluje - bez tohohle se scroll retezi
       obema smery (u otevreneho sheetu se pod nim posouva formular). */
    overscroll-behavior: contain;
    transform: translateY(101%);
    transition: transform 0.22s ease;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.22);
  }

  .modelator-shell--lite.is-order-sheet-open .modelator-lite-panel--order {
    transform: translateY(0);
  }

  .modelator-lite-bottombar {
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-top: 1px solid var(--line);
    background: var(--paper-raised);
  }

  .modelator-lite-order-close {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  /* ZADANI VLASTNIKA 2026-09-10 - krizek na zavreni rekapitulace.
     `modelator-lite-order-close` je az POD celym obsahem panelu, ktery sam
     roluje (max-height 82vh), takze uzivatel musel projet celou rekapitulaci,
     nez na nej narazil - z jeho pohledu sheet zavrit neslo.
     `sticky` (ne `absolute`): panel se pod krizkem posouva, ale on zustava
     videt po celou dobu rolovani. */
  .modelator-lite-order-dismiss {
    position: sticky;
    z-index: 2;
    top: 8px;
    /* `float` misto flexu: panel nema vlastni layout kontejner pro hlavicku a
       tohle ho nerozbije - krizek se vysadi vpravo a obsah tece pod nim. */
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px = minimalni dotykovy cil (WCAG 2.5.5). */
    width: 44px;
    height: 44px;
    margin: -4px -4px 0 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper-raised);
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .modelator-lite-order-dismiss:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
}

/* --- Mobil: jeden sloupec, napred nahled, pak volby --- */
@media (max-width: 767px) {
  .modelator-shell--lite {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 92px;
  }

  /* Poradi dle spec kap. 3: nejprve kompaktni nahled, pak volby. */
  .modelator-lite-panel--viz {
    order: 1;
  }

  .modelator-lite-panel--config {
    order: 2;
  }

  .modelator-lite-panel--config,
  .modelator-lite-panel--viz {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .modelator-lite-panel-scroll {
    overflow: visible;
  }

  /* ==========================================================================
     OPRAVA (2026-09-02, UAT nalez 2) - "graficke roztazeni stranky na malem
     rozliseni diky mape rozbije formular ... ma byt POUZE VYREZ mapy BEZ
     rozmazaneho okraje/ramu a ctverec mapy ma byt proporcne zmensen".

     Co bylo spatne: `.modelator-stage-canvas` melo `height: clamp(480px, 62vh,
     720px)` - VYSKU NEZAVISLOU NA SIRCE. `.modelator-stage-stack` (tiskovy
     vyrez) z ni pak pres `aspect-ratio: 1/1` + `width: auto` odvozovalo SIRKU,
     takze pri vysce 480 px chtelo byt 480 px SIROKE - vic, nez ma cely telefon
     k dispozici. `max-width: 100%` sirku sice orizlo, ale vyska zustala
     (CSS `aspect-ratio` je jen preferovany pomer, ne tvrda vazba, kdyz je
     druhy rozmer urceny explicitne) - z tiskoveho CTVERCE se stal na vysku
     protazeny OBDELNIK a stranka se roztahovala do strany.

     Jak je to ted: na mobilu se rozmery odvozuji od SIRKY. Canvas nema pevnou
     vysku (`height: auto`) a jeho vysku urcuje obsah; vyrez je `width: 100%` +
     `aspect-ratio: 1/1`, tedy VZDY ctverec, ktery se proporcne zmensi s
     displejem a nikdy nemuze byt sirsi nez rodic.

     Scrim (4 ztmavovaci panely kolem vyrezu) se na mobilu skryva: vyrez ted
     vyplnuje celou plochu canvasu, takze by panely stejne byly nulove siroke -
     a vlastnik vyslovne chtel "pouze vyrez mapy bez rozmazaneho okraje/ramu".
     `stage-chrome.js syncStageScrim()` pocita `--scrim-win-*` z realnych
     getBoundingClientRect() obou prvku, takze ho tahle zmena nerozbiji - jen
     zapisuje promenne, ktere nikdo nekresli.
     ========================================================================== */
  .modelator-shell--lite .modelator-stage-canvas {
    height: auto;
    min-height: 0;
    padding: 8px;
    /* Misto pro "ouska" (taby) pod spodni hranou okna - stejny zamer jako v
       zakladnim pravidle, jen v mobilnim meritku. */
    padding-bottom: 52px;
  }

  .modelator-shell--lite .modelator-stage-stack {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
  }

  .modelator-shell--lite .modelator-stage-scrim {
    display: none;
  }

  /* Popisek mista lezi na okraji plochy vyrezu - v mobilnim meritku uz na nej
     neni misto vedle ovladacich tlacitek, proto uzsi a bez pevne sirky. */
  .modelator-shell--lite .modelator-stage-meta-label {
    /* Zakladni pravidlo ma odsazeni 40px, ktere bylo odvozene od desktopoveho
       paddingu canvasu (az 56px) - v mobilnim meritku (padding 8px) by popisek
       visel uprostred mapy. `max-width` navic drzi odstup od ovladacich
       tlacitek vyrezu (`.modelator-stage-viewtools`, right: 12px, sirka 44px). */
    left: 12px;
    top: 12px;
    max-width: calc(100% - 80px);
    padding: 6px 10px;
  }

  /* Pojistka proti vodorovnemu preteceni: flex/grid polozky maji vychozi
     `min-width: auto`, ktere je nuti zustat aspon tak siroke jako jejich
     obsah (napr. mapove platno) - i kdyz je rodic uzsi. Stejny nalez jako
     `min-width: 0` u .modelator-status (2026-08-23). */
  .modelator-shell--lite,
  .modelator-shell--lite .modelator-lite-panel,
  .modelator-shell--lite .modelator-viz {
    min-width: 0;
    max-width: 100%;
  }

  /* Dotykove cile min. 44px (spec kap. 12 / WCAG 2.5.8). */
  .modelator-shell--lite .modelator-stage-tab,
  .modelator-stage-viewtools button {
    min-height: 44px;
  }

  .modelator-stage-viewtools button {
    width: 44px;
  }

  /* 5 velikosti se na uzkem displeji nevejde vedle sebe - vodorovny posuv
     je citelnejsi nez nasilne zalamovani na jednopismenne sloupce. */
  .modelator-shell--lite [data-field="size"] .modelator-widget-segmented {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    overflow-x: auto;
  }

  .modelator-lite-sync {
    flex-wrap: wrap;
    margin-inline: 13px;
  }
}

.modelator-lite-bottombar[hidden] {
  display: none;
}

.modelator-lite-bottombar-summary {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.modelator-lite-bottombar-price {
  font-size: 18px;
  font-weight: 700;
}

.modelator-lite-bottombar-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Na desktopu je pravy sloupec videt trvale - lista i zaviraci tlacitko
   panelu nemaji co delat. */
@media (min-width: 1180px) {
  .modelator-lite-bottombar,
  .modelator-lite-order-close,
  /* Na desktopu je pravy sloupec videt trvale, sheet se neotevira - krizek by
     tam byl matouci prvek bez funkce. */
  .modelator-lite-order-dismiss {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modelator-lite-panel--order {
    transition: none;
  }
}

/* ==========================================================================
   UAT 2026-09-02, nalez 3 — skeleton pri prvnim nacteni Modelatoru.
   Staticky Blade markup (lite.blade.php `[data-modelator-boot]`), ktery
   bootstrap script po dobehnuti odstrani. Vizualni jazyk je prevzaty ze
   sync pruhu (`.modelator-lite-sync`): tenky ramecek, tucny titulek, drobny
   popisek pod nim - aby to nepusobilo jako dalsi, cizi komponenta.
   ========================================================================== */
.modelator-boot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper-raised, var(--paper));
}

.modelator-boot--compact {
  padding: 12px 14px;
}

.modelator-boot-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.modelator-boot-copy strong {
  font-size: 14px;
}

.modelator-boot-copy small {
  color: var(--ink-muted);
  font-size: 12px;
}

/* ==========================================================================
   UAT 2026-09-02 — diagnosticky panel pro dotykova zarizeni (jen admin).
   Zamerne strizlivy, monospace a s pevnou vyskou se scrollem: ma se vejit
   pod stavovy panel a nesmi rozhazet layout stranky, kterou ma sledovat.
   Viz plugins/touch-debug.js docblock.
   ========================================================================== */
.modelator-touchdebug {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--paper-raised, var(--paper));
}

.modelator-touchdebug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.modelator-touchdebug-clear {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.modelator-touchdebug-note {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 11px;
}

.modelator-touchdebug-list {
  max-height: 240px;
  margin: 0;
  padding: 6px 10px;
  overflow-y: auto;
  list-style: none;
}

.modelator-touchdebug-row {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Zaznamy z relace PRED reloadem/padem - opticky oddelene, at je hned videt,
   kde konci historie a zacina aktualni beh. */
.modelator-touchdebug-row--previous {
  color: var(--ink-muted);
}

.modelator-touchdebug-row--previous:last-of-type {
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 6px;
}

/* ==========================================================================
   BODY 13/14 (2026-09-02) — admin panel "DEM a reliéf (ladění)" pod mapou.
   Vizuál je port legacy `.fact-chip` mřížky (app.css), aby operátor viděl
   stejné uspořádání, jaké zná z původního konfigurátoru. Viz docblock
   plugins/terrain-facts.js.
   ========================================================================== */
.modelator-facts {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised, var(--paper));
}

.modelator-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.modelator-facts-chip {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.modelator-facts-chip span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.modelator-facts-chip strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.modelator-facts-note,
.modelator-facts-empty {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ==========================================================================
   Davka G-prep 2 (2026-09-16), inventura #45 — admin box "Výřez presetu"
   pod mapou (plugins/preset-bbox.js). Stejný rámec jako `.modelator-facts`,
   tóny hlášky shodné s `.modelator-recommend--*`, aby to nebyl další cizí
   jazyk na stránce. Sekce je `hidden`, dokud plugin nemá preset.
   ========================================================================== */
.modelator-preset-bbox {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised, var(--paper));
}

.modelator-preset-bbox[hidden] {
  display: none;
}

.modelator-preset-bbox-panel {
  display: grid;
  gap: 8px;
}

.modelator-preset-bbox-copy,
.modelator-preset-bbox-hint {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.modelator-preset-bbox-hint {
  font-family: var(--mono);
}

.modelator-preset-bbox-notice {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.modelator-preset-bbox-notice[hidden] {
  display: none;
}

.modelator-preset-bbox-notice p {
  margin: 0;
}

.modelator-preset-bbox-notice--danger {
  background: #fbe4e4;
  color: #a32020;
}

.modelator-preset-bbox-notice--warning {
  background: #fdf3d8;
  color: #8a6100;
}

.modelator-preset-bbox-notice--success {
  background: #e3f5e6;
  color: #1c6b2c;
}

/* ==========================================================================
   BOD 12 (2026-09-02) — indikace nedostupnosti backendu. Vizuálně shodná se
   sync pruhem (tečka vlevo, tučný titulek, popisek pod ním), aby to nebyl
   další cizí jazyk na stránce. Viz plugins/backend-health.js.
   ========================================================================== */
.modelator-backend-health {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised, var(--paper));
}

.modelator-backend-health--down {
  border-color: #a32020;
}

.modelator-backend-health .modelator-lite-sync-dot {
  margin-top: 4px;
}

.modelator-backend-health-admin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.modelator-backend-health-slot[hidden] {
  display: none;
}

/* ---------- R1 (2026-09-04): panel revize objednavky ----------
   Vlastnik 2026-09-04 vybral variantu, kde je komentar i obe akce v JEDNOM
   panelu v pravem sloupci. Legacy je melo rozdelene (komentar vpravo, tlacitka
   pod mapou) a muselo to operatorovi vysvetlovat vetou primo v rozhrani.

   Panel je zamerne jediny prvek v Modelatoru s akcentovym ramem: je to jediny
   stav, ve kterem obsluha needituje bezny navrh, ale cizi objednavku. Ma to
   byt videt na prvni pohled, ne az z popisku. */
.modelator-revision {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 14px;
  margin-bottom: 16px;
}

/* Fallback pro prohlizece bez color-mix() - radeji plocha bez odstinu nez
   pruhledne pozadi, na kterem by ram visel bez vyplne. */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
  .modelator-revision {
    background: var(--modelator-surface);
  }
}

.modelator-revision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.modelator-revision-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.modelator-revision-badge {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--modelator-warning) 16%, transparent);
  color: var(--modelator-warning);
  white-space: nowrap;
}

/* Odeslana revize uz ceka na zakaznika - jiny stav, jina barva. */
.modelator-revision-badge[data-modelator-revision-status="submitted"],
.modelator-revision-badge[data-modelator-revision-status="approved"] {
  background: color-mix(in srgb, var(--modelator-success) 16%, transparent);
  color: var(--modelator-success);
}

.modelator-revision-order {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Identita zakazky pod nazvem produktu (UAT 2026-09-05) - jmeno zakaznika
   normalne, token monospacem, aby sel precist znak po znaku a slo ho porovnat
   s URL nebo s detailem objednavky. */
.modelator-revision-customer {
  font-size: 0.78rem;
  color: var(--ink-soft, #444);
  margin: 0 0 2px;
}

.modelator-revision-token {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted, #6a6a6a);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.modelator-revision-copy {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-muted, #6a6a6a);
  margin: 0 0 10px;
}

.modelator-revision-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.modelator-revision-note {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.82rem;
  padding: 8px 10px;
  border: 1px solid var(--line, #ddd);
  border-radius: 6px;
  background: var(--paper-raised, #fff);
  color: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

/* Ve 320px sloupci se dlouhe popisky ("Synchronizovat a odeslat zakaznikovi")
   nevejdou vedle sebe - tlacitka jsou proto pod sebou pres celou sirku.
   Zkracovat popisky by u jednosmerne akce (odeslani zakaznikovi) bylo horsi
   nez zalomeni. */
.modelator-revision-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modelator-revision-detail {
  margin-top: 8px;
}