/* ============================================================
   Kreator — stepper, siatka osi, kompilacja, pipeline, galeria,
   rendycje, copy. Style widokowe; tokeny w tokens.css.
   ============================================================ */
.stepper{display:flex;align-items:center;gap:12px;font-size:var(--font-size-base)}
.stepper .st{color:var(--text-tertiary)}
.stepper .st.is-active{color:var(--text-primary);font-weight:600;position:relative}
.stepper .st.is-active::after{content:"";position:absolute;left:0;bottom:-5px;width:12px;height:2px;background:var(--accent)}
.stepper .st.is-done{display:inline-flex;align-items:center;gap:6px}
.stepper .sep{color:var(--text-disabled)}
.kreator-grid{display:grid;grid-template-columns:1fr 430px;align-items:start}
.kreator-main{padding:36px 52px 48px;min-width:0}
/* prawa szyna „przyklejona" do ekranu — nie rozciąga się na całą wysokość
   strony; scrolluje się tylko lewa kolumna z ustawieniami (jeśli szyna
   przerośnie ekran, scrolluje się wewnętrznie) */
/* prawa szyna = host przypiętego doku (12b): sama szyna nie scrolluje —
   scrolluje .rail-scroll, a estymata+CTA (.action-dock) są przyklejone na
   dole i nigdy nie znikają pod krawędzią (spec v1.33). */
/* rail przypięty (fixed) pod top barem — dok estymaty/CTA NIGDY nie wypada pod
   dolną krawędź (naprawa: przy sticky+100vh rail startował pod stepperem i
   przelewał viewport o wysokość nagłówka). Siatka rezerwuje 430px, fixed rail
   nakłada się dokładnie na tę kolumnę. */
.kreator-rail{background:var(--surface-rail);border-left:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:var(--top-bar-h);right:0;width:430px;height:calc(100vh - var(--top-bar-h));overflow:hidden}
.rail-scroll{flex:1;min-height:0;overflow-y:auto;padding:36px 40px 236px;scrollbar-width:thin;scrollbar-color:var(--border-chip) transparent}
.h1{font-size:var(--font-size-xl);font-weight:600;letter-spacing:-.01em}
/* .chip przeniesiony do components.css (kanoniczny, --text-primary wg 12c) */
/* --- Kreator krok 1: nagłówek na PŁASKIM tle apki (bez okienka/karty —
   decyzja Marcela). Produkt (packshot + identyfikacja + cechy) płynie od
   lewej; osobny rząd kontrolek sceny (własna scena + tryb). Zero pustych
   dziur — treść zbita do lewej, separatory kropką. --- */
.scene-head{display:flex;align-items:flex-start;gap:16px;margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--border-section)}
.scene-head .product-png{width:72px;height:72px;border-radius:var(--radius-3);border:1px solid var(--border-field);flex:none;object-fit:contain;background:repeating-linear-gradient(45deg,var(--checker-a) 0 10px,var(--checker-b) 10px 20px)}
.sh-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;padding-top:2px}
.sh-identity{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
/* cechy: tytuł NAD chipami (lewo), niżej rząd chipów + „dane produktu →"
   wyśrodkowany pionowo względem linii chipów */
.sh-features{display:flex;flex-direction:column;gap:9px;min-width:0}
.sh-features .section-label{flex:none}
.sh-feat-row{display:flex;align-items:center;gap:18px;min-width:0;flex-wrap:wrap}
.sh-feat-row .chip-row{margin:0}
.sh-sep{color:var(--border-strong)}
/* rząd kontrolek sceny — płaskie tło, etykieta+kontrolka w linii */
.scene-controls{display:flex;align-items:center;gap:36px;margin-top:20px}
.sh-ctl{display:flex;align-items:center;gap:10px}
.sh-ctl .section-label{margin:0}
.ss-mode-select{min-width:190px;padding:6px 11px;font-size:var(--font-size-sm)}
.product-name{display:flex;align-items:center;gap:8px;font-size:var(--font-size-lg);font-weight:600}
.product-meta{display:flex;align-items:center;gap:8px;font-size:var(--font-size-base);color:var(--text-secondary)}
.product-price{display:flex;align-items:baseline;gap:8px}
.product-price b{font:600 var(--font-size-base) var(--font-mono)}
.product-price s{font:400 var(--font-size-sm) var(--font-mono);color:var(--text-tertiary)}
.scene-head .prod-field{background:none;border:none;padding:0;cursor:pointer}
.scene-head .prod-field:hover{border:none}
.scene-head .prod-field:hover .product-name{color:var(--accent-soft)}
.product-meta .brand-mini-logo{height:19px;max-width:64px;object-fit:contain}
.product-meta .logo-chip{width:18px;height:14px}
.axes-head{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.axes-scroll{max-height:496px;overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:var(--border-chip) transparent}
.axis-row{display:grid;grid-template-columns:36px 174px 1fr;align-items:center;padding:17px 0;border-bottom:1px solid var(--border-hairline)}
.axis-row.is-freetext{align-items:start}
/* łokieć-łącznik pod-osi (mockup 3a) */
.subaxis-elbow{display:block;width:12px;height:14px;border-left:1.5px solid var(--border-strong);border-bottom:1.5px solid var(--border-strong);border-radius:0 0 0 6px;margin:-6px 0 6px 3px}
.axis-no{font:500 var(--font-size-sm) var(--font-mono);color:var(--text-ghost)}
.axis-name{font-size:var(--font-size-md);font-weight:500}
.axis-kind{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-faint);margin-top:3px}
.axis-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.axis-ctl select.field{width:100%;max-width:250px}
.axis-count{font-size:var(--font-size-sm);color:var(--text-faint)}
/* osie + kompilacja obok siebie (mockup 3a) */
.axes-compile-grid{display:grid;grid-template-columns:1fr 360px;column-gap:44px;align-items:start;margin-top:32px}
.compile-rail{border-left:1px solid var(--border-hairline);padding-left:32px;position:sticky;top:24px;align-self:start}
.compile-list{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.compile-row{display:flex;align-items:baseline;gap:14px;justify-content:space-between}
/* etykieta osi nie zawija (panel szerszy niż lista osi) */
.compile-row .k{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);white-space:nowrap;flex:none}
.compile-row .v{font-size:var(--font-size-base);color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;max-width:190px;flex:none}
.compile-row .v.is-custom{color:var(--accent-soft)}
.compile-row .v.is-empty{color:var(--text-faint)}
.compile-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.pipeline-rail{position:relative}
.pipeline-rail::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--border-ghost)}
.pipeline-rail .p-row{display:flex;align-items:center;gap:14px;padding:10px 0;position:relative}
/* stan override „ten run" (mockup 3a/3c) + kroki done (3b/4a) */
.model-sel.is-override{border-color:var(--accent-dim-border)}
.model-sel.is-locked{opacity:.55;pointer-events:none}
.p-badge{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-faint);flex:none;white-space:nowrap}
.p-badge.is-run{font-weight:500;color:var(--accent-soft);border:1px solid var(--accent-dim-border);border-radius:var(--radius-1);padding:1px 5px}
.p-back{display:inline-flex;align-items:center;gap:4px;font:400 var(--font-size-xs) var(--font-ui);color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;cursor:pointer;background:none;border:none;flex:none}
.p-back:hover{color:var(--text-primary)}
.p-state{font:500 var(--font-size-sm) var(--font-mono);color:var(--accent-soft);white-space:nowrap;flex:none}
/* meta runa pod tytułem kroku (4a/4b/4c) */
.run-meta{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:var(--font-size-sm);color:var(--text-tertiary);flex-wrap:wrap}
.run-meta .id{font:500 var(--font-size-sm) var(--font-mono);color:var(--text-secondary)}
.run-meta .real{font:500 var(--font-size-sm) var(--font-mono);color:var(--text-soft)}
/* konsola KOSZTY RUNA — stopka pod przyciskiem */
.console-foot{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);margin-top:13px;text-align:center}
.est-note{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);margin-top:13px;text-align:center}
.own-master-drop{border:1.5px dashed var(--border-field-hover);border-radius:var(--radius-4);padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:9px;background:rgba(255,255,255,.012);cursor:pointer;margin-top:18px}
.own-master-drop.is-drag{border-color:var(--accent);box-shadow:var(--focus-ring)}
.own-master-drop img.preview{max-width:100%;max-height:260px;border-radius:var(--radius-3)}

/* galeria 2x2 / porównanie / rendycje */
.cand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px}
.cand{position:relative;cursor:pointer}
.cand img{width:100%;display:block;border-radius:var(--radius-3);border:1px solid var(--border-field)}
.cand .idx{position:absolute;top:6px;left:6px;font:500 9px var(--font-mono);color:var(--text-secondary);background:rgba(8,11,16,.85);border:1px solid var(--border-chip);border-radius:3px;padding:0 5px}
.cand.is-selected .idx{color:var(--accent-soft);border-color:var(--accent-dim-border)}
.cand.is-selected img{border:1.5px solid var(--accent);box-shadow:var(--focus-ring)} /* master = obwódka + ring (plansza 10c) */
.badge-master{position:absolute;top:6px;right:6px;font:600 8px var(--font-mono);color:var(--on-accent);background:var(--accent);border-radius:3px;padding:1px 5px}
.compare-grid{display:grid;gap:0;border-top:1px solid var(--border)}
.compare-grid .cand{overflow:hidden}
.compare-grid .cand img{transform-origin:center;will-change:transform}
.compare-col{border-right:1px solid var(--border);padding:20px 24px 28px;min-width:0}
.compare-col:last-child{border-right:none}
.compare-col .cg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
/* pasek narzędzi porównania (10c) */
.compare-toolbar{display:flex;align-items:center;gap:16px;padding:12px 0;margin-top:14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.zoom-seg{display:inline-flex;background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-2);overflow:hidden}
.zoom-seg .zs{padding:4px 12px;font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer;border-left:1px solid var(--border-seg)}
.zoom-seg .zs:first-child{border-left:none}
.zoom-seg .zs.is-active{background:var(--surface-active);color:var(--text-primary);font-weight:500}
/* pas pod siatką kandydatów (4a) */
.cand-bar{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:632px}
/* zakładki formatów (4c) */
.fmt-tabs{display:flex;align-items:baseline;gap:24px;margin-top:26px;border-bottom:1px solid var(--border-hairline);padding-bottom:11px;flex-wrap:wrap}
.fmt-tab{font-size:var(--font-size-base);color:var(--text-secondary);cursor:pointer;position:relative;white-space:nowrap;background:none;border:none;padding:0}
.fmt-tab .n{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);margin-left:4px}
.fmt-tab.is-active{color:var(--text-primary);font-weight:600}
.fmt-tab.is-active::after{content:"";position:absolute;left:0;bottom:-12px;width:16px;height:2px;background:var(--accent)}
.safe-toggle{display:inline-flex;align-items:center;gap:9px;font-size:var(--font-size-base);color:var(--text-secondary)}
.rend-cost{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);white-space:nowrap}
.rend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.rend-card .rend-frame{position:relative;border:1px solid var(--border-field);border-radius:var(--radius-3);overflow:hidden;background:var(--surface-inset)}
.rend-card img{width:100%;display:block}
.rend-card.is-accepted .rend-frame{border:1.5px solid var(--success)}
.rend-card.is-rejected .rend-frame{border-color:var(--danger-dim-border)}
.rend-card.is-rejected img{opacity:.55}
.safe-overlay{position:absolute;inset:0;pointer-events:none}
.safe-overlay .band{position:absolute;left:0;right:0;background:rgba(249,115,22,.07);border-color:rgba(249,115,22,.4);border-style:dashed;border-width:0}
.safe-overlay .band.top{top:0;border-bottom-width:1px}
.safe-overlay .band.bottom{bottom:0;border-top-width:1px}
.safe-overlay.soft .band{background:rgba(138,147,162,.05);border-color:rgba(138,147,162,.25)}
.rend-meta{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
/* pas akcji rendycji (4c): koszt + cofnij/akceptuj[A]/odrzuć[D]/↻ponów */
.rend-actionbar{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.rend-note{margin-top:7px}

/* copy krok 3 */
.copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:900px}
.copy-var{background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-3);padding:14px 16px;cursor:pointer}
.copy-var.is-selected{border-color:var(--accent);box-shadow:var(--focus-ring)}
.copy-var .cv-super{font-size:var(--font-size-sm);color:var(--text-secondary)}
.copy-var .cv-head{font-size:14px;font-weight:600;margin-top:5px}
.copy-var .cv-cta{display:inline-block;font-size:var(--font-size-sm);color:var(--text-soft);background:var(--surface-1);border:1px solid var(--border-chip);border-radius:4px;padding:2px 9px;margin-top:9px}
.char-count{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-tertiary)}
.char-count.is-over{color:var(--danger)}
/* copy — wiersze wariantów (mockup 4b) */
.copy-rows{max-width:720px;margin-top:24px}
.copy-row{display:grid;grid-template-columns:30px 1fr 110px;align-items:start;padding:18px 0;border-bottom:1px solid var(--border-hairline)}
.copy-row:last-of-type{border-bottom:none}
.cv-radio{width:14px;height:14px;border-radius:var(--radius-pill);border:1.5px solid var(--text-ghost);margin-top:3px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center}
.copy-row.is-selected .cv-radio{border-color:var(--accent)}
.copy-row.is-selected .cv-radio::after{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--accent)}
.cv-hd{display:flex;align-items:center;gap:10px}
.cv-tag{font:500 var(--font-size-xs) var(--font-mono);color:var(--text-faint)}
.copy-row.is-selected .cv-tag{color:var(--text-secondary)}
.cv-star{font-size:var(--font-size-md);cursor:pointer;color:var(--text-ghost);background:none;border:none;padding:0;line-height:1}
.cv-star.is-fav{color:var(--accent-soft)}
.cv-chip-sel{font:500 9.5px var(--font-mono);color:var(--accent-soft);border:1px solid var(--accent-dim-border);border-radius:var(--radius-1);padding:0 5px}
.cv-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:9px}
.cv-line .t-super{font-size:var(--font-size-lg);font-weight:600;color:var(--text-soft)}
.copy-row.is-selected .cv-line .t-super{color:var(--text-primary)}
.cv-line .t-head{font-size:var(--font-size-base);color:var(--text-secondary)}
.cv-line .cnt{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-faint)}
.cv-line .cnt.is-over{color:var(--danger)}
.cv-cta-chip{font-size:var(--font-size-sm);color:var(--text-soft);border:1px solid var(--border-chip);border-radius:4px;padding:3px 10px}
.cv-edit-col{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* DIFF własnej sceny (mockup 3b) */
.diff-block{border-left:2px solid var(--border-chip);padding:2px 0 2px 14px;font-size:var(--font-size-base);line-height:1.7;color:var(--text-soft)}
.diff-cut{color:var(--danger);text-decoration:line-through;background:var(--danger-dim-bg)}
.diff-add{color:var(--success);background:var(--success-dim-bg)}
.diff-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:22px}
.diff-cols .lst{display:flex;flex-direction:column;gap:7px;margin-top:12px;font-size:var(--font-size-base);color:var(--text-secondary)}
.diff-cols .lst .pl{color:var(--success);font-weight:700}
.diff-cols .lst .mi{color:var(--danger);font-weight:700}

/* dropdown produktu — pole (mockup 3a:40) + lista wierszy 48px (mockup 3c:10-20) */
.prod-dd{position:relative}
.prod-field{display:flex;align-items:center;gap:9px;background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-2);padding:5px 10px 5px 6px;cursor:pointer;color:var(--text-primary)}
.prod-field:hover{border-color:var(--border-field-hover)}
.prod-thumb{border-radius:4px;border:1px solid var(--border-field);flex:none;display:inline-flex;align-items:center;justify-content:center;object-fit:contain;background:repeating-linear-gradient(45deg,var(--surface-hover) 0 7px,var(--surface-1) 7px 14px)}
.prod-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:262px;background:var(--surface-1);border:1px solid var(--border-chip);border-radius:var(--radius-3);box-shadow:0 10px 30px rgba(0,0,0,.5);overflow:hidden}
.prod-opt{display:flex;align-items:center;gap:10px;padding:7px 10px;color:var(--text-secondary);cursor:pointer}
.prod-opt:hover{background:var(--surface-hover)}
.prod-opt.is-sel{background:var(--surface-hover)}
.po-name{font-size:var(--font-size-base)}
.prod-opt.is-sel .po-name{font-weight:500;color:var(--text-primary)}
.po-cat{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-tertiary);margin-top:1px}
.po-check{color:var(--accent);font-weight:700;font-size:var(--font-size-base)}
.prod-menu-foot{border-top:1px solid var(--border);padding:9px 12px;font-size:var(--font-size-sm);color:var(--text-tertiary)}
/* logo-chip brandu w karcie produktu (mockup 3a:49) */
.logo-chip{width:20px;height:20px;border:1px dashed var(--border-field-hover);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font:500 6.5px var(--font-mono);color:var(--text-faint);letter-spacing:.08em;flex:none}
/* wiersz „+K · Pozostałe osie" (mockup 3a:159-162) */
.axes-more{display:grid;grid-template-columns:36px 1fr;align-items:center;padding:16px 0 0}
/* pod-oś: notka przyczyny widoczności (mockup 3a:125-131) */
.subaxis-note{font-size:var(--font-size-sm);color:var(--text-tertiary);white-space:nowrap}
.sub-dot{display:inline-block;width:5px;height:5px;border-radius:var(--radius-pill);background:var(--accent);margin-right:7px;vertical-align:1.5px}