/* =============================================================================
   rapato/web/ui.css - JEDEN system wygladu dla calego Rapato.

   Zrodlo prawdy: panel.print.gg (`Web_Panel/operator_ui.py`). Stamtad pochodza
   fonty (Epilogue + JetBrains Mono) i WARTOSCI tokenow. NAZWY tokenow zostaja
   rapatowe (--paper/--card/--ink/--api), bo uzywa ich caly istniejacy CSS
   widokow ORAZ JavaScript (podglad arkusza rysuje wypelniacze `var(--api)`).
   Podmiana nazw wymagalaby ruszenia logiki, ktora dziala i jest przetestowana.

   Rozne domyslne motywy sa CELOWE, nie niedopatrzeniem:
     panel.print.gg -> ciemny (hala, monitor na scianie, praca zmianowa),
     Rapato         -> jasny  (klient SaaS, biuro, swiatlo dzienne).
   Tokeny sa te same, wiec oba produkty pozostaja rozpoznawalnie jedna rodzina.

   Motyw przelacza `data-theme` na <html> (tak robi JS Rapato) albo
   `data-motyw` (konwencja panelu). Obsluzone SA OBA - zeby dalo sie przenosic
   fragmenty miedzy produktami bez tlumaczenia atrybutow.
   ============================================================================= */

/* JetBrains Mono usuniety z pobierania 3.08 - po przejsciu calego interfejsu na Epilogue
   nie byl juz uzywany, a nadal sie sciagal. Mniej bajtow i jeden font mniej do czekania. */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&display=swap');

/* Pierwszy krok kreatora i nestingu — wspolne komponenty, te same tokeny. */
.workspace-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 28px 12px}
.workspace-intro .eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--api-btn);margin:0 0 10px}
.workspace-intro h1{font-size:30px;line-height:1.2;letter-spacing:-.04em;margin:0}
.workspace-intro p:not(.eyebrow){font-size:14px;color:var(--mut);margin:10px 0 0;max-width:620px}
.workspace-note{font-size:12px;color:var(--mut);white-space:nowrap}
.workspace-link{font-size:13px;color:var(--api-btn);text-decoration:none;font-weight:600}
.workspace-link:hover{text-decoration:underline}
.rp-creator .stage:not(.has-artwork){background:radial-gradient(ellipse at 50% 38%,var(--api-soft),transparent 70%),var(--card);touch-action:pan-y;aspect-ratio:auto;min-height:440px}
.rp-creator .stage:not(.has-artwork) .zw{pointer-events:none}
.rp-creator .stage:not(.has-artwork) .editbar,.rp-creator .stage:not(.has-artwork) .zctl{display:none}
.rp-creator .stage .drop{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:430px;z-index:1;pointer-events:none;background:transparent;border:0}
.rp-creator .stage .drop b{font-size:23px;letter-spacing:-.035em;line-height:1.25}
.rp-creator .stage .drop span{font-size:14px;line-height:1.6}
.rp-creator .stage .drop small{font-size:12px;color:var(--mut)}
.rp-creator .stage svg.upload-art{width:210px;height:160px;max-height:none;filter:none;margin-bottom:4px}
.upload-art .art-back{fill:var(--cut-soft);stroke:var(--cut);stroke-width:1.2}
.upload-art .art-front{fill:var(--card);stroke:var(--api);stroke-width:1.3}
.upload-art .art-outline{fill:var(--api-soft);stroke:var(--api-btn);stroke-width:2;stroke-linejoin:round}
.upload-art .art-plus{fill:var(--api-btn)}
.upload-art .art-plus-line{fill:none;stroke:var(--card);stroke-width:2.5;stroke-linecap:round}
.upload-action{background:var(--api-btn);color:white;border-radius:10px;padding:11px 22px;font-weight:700;margin:8px 0}
.rp-creator .stage[aria-busy=true]{opacity:.65;cursor:progress}
.rp-nesting .pusto{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;max-width:470px;margin:auto}
.rp-nesting .pusto b{display:block;font-size:21px;line-height:1.3;letter-spacing:-.025em;margin:14px 0 10px}
.rp-nesting .pusto span{display:block;font-size:14px;line-height:1.6;margin-bottom:12px}
.rp-creator [hidden],.rp-nesting [hidden]{display:none!important}
.rp-nesting .pusto .cta{margin-top:6px;flex:none}
.rp-nesting .stage svg.nest-art{width:160px;height:125px;filter:none;fill:var(--card);stroke:var(--line);stroke-width:1.5}
.rp-nesting .nest-art rect:nth-child(2){fill:var(--api-soft);stroke:var(--api)}
.rp-nesting .nest-art rect:nth-child(3){fill:var(--cut-soft);stroke:var(--cut)}
.rp-nesting .nest-art rect:nth-child(4){fill:var(--ok-soft);stroke:var(--ok)}
.rp-nesting .grp-pliki .drop{background:var(--api-soft);border-color:var(--api);padding:20px 14px}
.rp-nesting.is-empty .pier-blok,.rp-nesting.is-empty .stan-m{display:none}
.rp-nesting.is-empty .stan{display:block}
.rp-creator :focus-visible,.rp-nesting :focus-visible{outline:3px solid var(--api);outline-offset:3px}
@media(max-width:820px){
  .workspace-intro{padding:22px 16px 10px;display:block}
  .workspace-intro h1{font-size:25px}
  .workspace-intro .workspace-note{display:none}
  .workspace-link{font-size:11px}
  .rp-creator .stage .drop{gap:9px;padding:20px 14px}
  .rp-creator .stage svg.upload-art{width:145px;height:110px;margin:0}
  .rp-creator .stage .drop b{font-size:20px}
  .rp-creator .stage .drop span{font-size:12px}
  .rp-creator .stage .drop small{font-size:10px}
  .rp-nesting.is-empty .stage{min-height:340px}
}

/* ---------------------------------------------------------------- tokeny ---- */
:root{
  color-scheme:light;

  /* powierzchnie (panel: --tlo/--panel/--karta/--karta2/--karta3) */
  --paper:#eef0f3; --card:#ffffff; --card2:#f2f3f6; --card3:#e7e9ee; --field:#f6f7f9;
  --line:rgba(0,0,0,.09);
  /* tekst (panel: --txt/--mut/--mut2) */
  --ink:#191b1e; --mut:#5f666c; --mut2:#9298a1;

  /* akcent. --api to panelowy --nieb2; --api-btn jest CIEMNIEJSZY, bo bialy tekst
     na #3d8bfd daje 3,4:1 - ponizej progu 4,5:1 dla tekstu przycisku. Ten sam
     niebieski w odbiorze, czytelny w pomiarze. */
  --api:#3d8bfd; --api-btn:#2f6fe4; --api-soft:#e8f0fe; --api-ring:rgba(61,139,253,.35);
  --ok:#127a52; --ok-soft:#e8f9f1; --ok-line:#a9e3c9;
  --warn:#8a6a12; --warn-soft:#faf6df; --warn-line:#e3d9a0;
  --err:#c0272d; --err-soft:#fdeaea; --err-line:#f0b9bb;

  /* MAGENTA CIECIA - stala produkcyjna, nie decyzja estetyczna. Ten sam kolor
     widzi operator w Corelu i na ploterze. NIE podmieniac pod motyw. */
  --cut:#E6197D; --cut-soft:#fce3ef;

  /* JEDNA RODZINA W CALYM INTERFEJSIE (Art 3.08). Liczby zostaja w tym samym
     rozmiarze i grubosci, zmienia sie tylko krój - a `tabular-nums` nizej
     pilnuje, zeby cyfry mialy rowna szerokosc i kolumny sie nie ruszaly. */
  --mono:'Epilogue',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ui:'Epilogue',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* skala stala w rem (product register: bez clamp - uzytkownik siedzi przy
     jednym DPI, a plynny naglowek w waskim panelu wyglada gorzej, nie lepiej) */
  --t-xs:.75rem; --t-sm:.8125rem; --t-md:.875rem; --t-lg:1rem;
  --t-xl:1.125rem; --t-2xl:1.375rem; --t-3xl:1.75rem;

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --cien:0 1px 2px rgba(20,22,29,.05), 0 12px 28px -16px rgba(20,22,29,.20);
  --cien-sm:0 1px 2px rgba(20,22,29,.06);
  --cien-lg:0 2px 4px rgba(20,22,29,.06), 0 24px 48px -20px rgba(20,22,29,.26);

  /* z-index: skala semantyczna, zero magicznych 9999 */
  --z-tlo:0; --z-sticky:10; --z-side:20; --z-modal:40; --z-toast:60; --z-tip:80;

  --ruch:180ms cubic-bezier(.22,1,.36,1);
  --side-w:106px;

  /* ALIASY ZGODNOSCI. Kreator zostal napisany wczesniej i uzywa wlasnych nazw w ~120
     regulach. Alias jest tansza i bezpieczniejsza droga niz przemianowanie ich
     wszystkich: kreator dziedziczy palete i fonty panelu, a jego uklad zostaje
     nietkniety. Nowego kodu NIE pisac na tych nazwach - sa tu dla starego. */
  --font:var(--ui);
  --r:var(--r-lg);
  --shadow:var(--cien);
  --shadow-sm:var(--cien-sm);
}

:root[data-theme="dark"], :root[data-motyw="ciemny"]{
  color-scheme:dark;
  --paper:#161615; --card:#1f2125; --card2:#26282d; --card3:#2e3137; --field:#1b1d21;
  --line:rgba(255,255,255,.08);
  --ink:#f2f4f7; --mut:#9298a1; --mut2:#5f666c;
  --api:#3d8bfd; --api-btn:#3d8bfd; --api-soft:#17233a; --api-ring:rgba(61,139,253,.45);
  --ok:#2fd08a; --ok-soft:#12271f; --ok-line:#2b5c47;
  --warn:#e0b53a; --warn-soft:#2a2712; --warn-line:#5c552b;
  --err:#e5484d; --err-soft:#2a1215; --err-line:#5c2b2e;
  --cut:#ff4da0; --cut-soft:#2a1420;
  --cien:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.7);
  --cien-sm:0 1px 2px rgba(0,0,0,.4);
  --cien-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 56px -22px rgba(0,0,0,.75);
}
:root[data-motyw="jasny"]{ color-scheme:light }

/* ------------------------------------------------------------------ baza ---- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:var(--t-md); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.01em; text-wrap:balance }
h1{ font-size:var(--t-2xl) } h2{ font-size:var(--t-xl) } h3{ font-size:var(--t-md) }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
a{ color:var(--api-btn) }
::placeholder{ color:var(--mut) }        /* nie --mut2: placeholder tez ma miec 4,5:1 */

:where(button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--api); outline-offset:2px; border-radius:var(--r-sm);
}

/* =============================================================== SZKIELET ==== */
/* Sidebar + topbar + tresc. Kolumna nawigacji ma WLASNA powierzchnie (--card),
   odcieta od tla tresci (--paper) - drugi neutralny layer, jak kaze uklad
   narzedziowy. */
.rp{ display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh }

.rp-side{
  position:sticky; top:0; z-index:var(--z-side); height:100vh;
  display:flex; flex-direction:column; gap:2px; padding:14px 8px;
  background:var(--card); border-right:1px solid var(--line);
}
.rp-logo{
  display:grid; place-items:center; width:44px; height:44px; margin:0 auto 14px;
  border-radius:var(--r-md); border:2px solid var(--cut); color:var(--cut);
  font-weight:800; font-size:var(--t-lg); letter-spacing:-.02em;
}
.rp-nav{ display:flex; flex-direction:column; gap:2px }
.rp-nav .sp{ flex:1 }
.rp-i{
  display:grid; justify-items:center; gap:5px; padding:10px 4px;
  border:0; background:none; color:var(--mut); cursor:pointer; text-decoration:none;
  border-radius:var(--r-md); font:inherit; font-size:var(--t-xs); font-weight:500;
  transition:background var(--ruch), color var(--ruch);
}
.rp-i svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.rp-i:hover{ background:var(--card2); color:var(--ink) }
.rp-i[aria-current="page"]{ background:var(--api-soft); color:var(--api-btn); font-weight:600 }
.rp-i:disabled{ opacity:.4; cursor:not-allowed }

.rp-main{ display:flex; flex-direction:column; min-width:0 }

/* --- gorny pasek --- */
.hd{ position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--card); border-bottom:1px solid var(--line) }
.hd-in{ display:flex; align-items:center; gap:14px; padding:12px 22px; min-height:64px }
.hd-t{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.hd-t b{ font-size:var(--t-xl); font-weight:700; letter-spacing:-.015em }
.hd-t span{ font-size:var(--t-sm); color:var(--mut) }
.hd .sp{ flex:1 }
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.02em }
.brand .mark{ color:var(--cut) }
.brand small{ font-weight:500; color:var(--mut) }

.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); color:var(--mut); cursor:pointer; font-size:var(--t-lg);
  transition:background var(--ruch), color var(--ruch);
}
.icon-btn:hover{ background:var(--card2); color:var(--ink) }

.badge-makieta{
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--card2); color:var(--mut);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.02em;
}
.znak{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); color:var(--mut); font-size:var(--t-sm); font-weight:600;
}

/* --- obszar tresci --- */
.rp-body{ flex:1; padding:20px 22px 96px; display:flex; flex-direction:column; gap:16px }
.grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start }
.ctrl{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.ctrl .grp + .grp{ margin-top:0 }   /* odstep daje `gap`, nie margines - inaczej podwojny */
.app{ min-height:100vh }            /* stara nazwa powloki, zostawiona dla widokow bez .rp */

/* =============================================================== KARTY ======= */
.karta, .grp, .stage-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--cien-sm);
}
.karta{ padding:18px }
.grp{ padding:16px }
.grp + .grp{ margin-top:14px }
.glab, .stage-hd, .karta-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.glab h3, .karta-hd h3{ font-size:var(--t-md); font-weight:700 }
.hint, .sub{ font-size:var(--t-sm); color:var(--mut) }

/* --- stan zlecenia: stepper + pierscien --- */
.stan{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center }
.stan-l{ min-width:0 }
.stan-lab{ font-size:var(--t-sm); color:var(--mut) }
.stan-t{ font-size:var(--t-3xl); font-weight:800; letter-spacing:-.02em; margin:2px 0 2px }
.stan-p{ font-size:var(--t-sm); color:var(--mut) }
.stan-m{ display:flex; gap:38px; margin:16px 0 20px }
.stan-m b{ display:block; font-size:var(--t-2xl); font-weight:700; letter-spacing:-.02em }
.stan-m span{ font-size:var(--t-sm); color:var(--mut) }

.krok-pas{ display:flex; align-items:center; gap:0 }
.kr{ display:grid; justify-items:center; gap:7px; flex:none }
.kr i{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--card2); border:1px solid var(--line); color:var(--mut);
  font-style:normal; font-size:var(--t-xs); font-weight:700;
}
.kr span{ font-size:var(--t-xs); color:var(--mut); white-space:nowrap }
.kr.zrobiony i{ background:var(--api-btn); border-color:var(--api-btn); color:#fff }
.kr.teraz i{ background:var(--api-btn); border-color:var(--api-btn); color:#fff;
  box-shadow:0 0 0 4px var(--api-ring) }
.kr.zrobiony span, .kr.teraz span{ color:var(--ink); font-weight:600 }
.kr-lin{ flex:1; height:2px; background:var(--line); margin:0 8px; margin-bottom:20px;
  border-radius:2px }
.kr-lin.zrobiony{ background:var(--api-btn) }

.pier{ position:relative; width:132px; height:132px; flex:none }
.pier svg{ width:100%; height:100%; transform:rotate(-90deg) }
.pier .tor{ stroke:var(--card3) } .pier .luk{ stroke:var(--api-btn); transition:stroke-dashoffset var(--ruch) }
.pier b{ position:absolute; inset:0; display:grid; place-content:center; gap:1px;
  text-align:center; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.02em }
.pier b small{ display:block; font-size:var(--t-xs); font-weight:500; color:var(--mut) }

/* =============================================================== SCENA ====== */
.stage-card{ padding:16px; display:flex; flex-direction:column; gap:12px }
.stage{
  position:relative; background:var(--card2); border:1px solid var(--line);
  border-radius:var(--r-md); min-height:420px; display:grid; place-items:center;
  padding:16px; overflow:hidden;
}
.stage svg{ max-width:100%; max-height:62vh; display:block }
.pusto{ display:grid; justify-items:center; gap:6px; color:var(--mut); text-align:center }
.pusto .big{ font-size:2rem; color:var(--mut2) }
.pusto b{ color:var(--ink) } .pusto span{ font-size:var(--t-sm) }

.stage-tabs{ display:inline-flex; gap:2px; padding:3px; align-self:center;
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md) }
.stab{
  padding:7px 18px; border:0; border-radius:var(--r-sm); background:none;
  color:var(--mut); font:inherit; font-size:var(--t-sm); font-weight:600; cursor:pointer;
  transition:background var(--ruch), color var(--ruch);
}
.stab:hover{ color:var(--ink) }
.stab[aria-pressed="true"]{ background:var(--card); color:var(--api-btn); box-shadow:var(--cien-sm) }

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.metric{
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); text-align:center;
}
.metric b{ display:block; font-family:var(--mono); font-size:var(--t-xl); font-weight:700;
  letter-spacing:-.02em }
.metric small{ display:block; margin-top:3px; font-size:var(--t-xs); color:var(--mut) }
.metric.good b{ color:var(--ok) }
.metric.warn b{ color:var(--warn) }

/* =============================================================== FORMULARZE = */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.fld{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.fld > label{ font-size:var(--t-sm); font-weight:600; color:var(--mut) }
input[type=number], input[type=text], select, textarea{
  width:100%; padding:9px 11px; font:inherit; font-size:var(--t-md);
  color:var(--ink); background:var(--field);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--ruch), box-shadow var(--ruch);
}
input[type=number]{ font-family:var(--mono); font-variant-numeric:tabular-nums }
input:hover, select:hover{ border-color:var(--mut2) }
input:focus, select:focus{ outline:none; border-color:var(--api); box-shadow:0 0 0 3px var(--api-ring) }
input:disabled, select:disabled{ opacity:.55; cursor:not-allowed }
.suffix{ position:relative; display:flex; align-items:center }
.suffix input{ padding-right:44px }
.suffix span{ position:absolute; right:11px; font-size:var(--t-sm); color:var(--mut);
  pointer-events:none }

/* segment (Arkusz/Rola, PDF/DXF) */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.seg button{
  display:grid; gap:2px; padding:10px 12px; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--mut); font:inherit; transition:border-color var(--ruch), background var(--ruch);
}
.seg button b{ font-size:var(--t-md); font-weight:700; color:var(--ink) }
.seg button small{ font-size:var(--t-xs); line-height:1.35 }
.seg button:hover{ border-color:var(--mut2) }
.seg button[aria-pressed="true"]{ border-color:var(--api); background:var(--api-soft) }
.seg button[aria-pressed="true"] b{ color:var(--api-btn) }

/* Checkbox z opisem. Ta sama klasa sluzy DWOM rzeczom: krotkiemu przelacznikowi
   przy pozycji na liscie i dlugiemu opisowi w ustawieniach. Baza jest wspolna,
   a wariant przy pozycji dociska sie kontekstem `.it`. */
.wyp{ display:flex; gap:9px; align-items:flex-start; font-size:var(--t-sm);
  color:var(--mut); line-height:1.4; cursor:pointer; user-select:none }
.wyp input{ margin:2px 0 0; accent-color:var(--api-btn); flex:none; width:16px; height:16px }
.it .wyp{ align-items:center; margin-top:6px }
.it .wyp span{ font-size:var(--t-xs); font-weight:700 }

/* suwak czasu */
.czas{ margin-top:14px }
.czas-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.czas-hd label{ font-size:var(--t-sm); font-weight:600; color:var(--mut) }
.czas-val{ font-size:var(--t-sm); font-weight:700; color:var(--api-btn) }
input[type=range]{ width:100%; margin:9px 0 5px; accent-color:var(--api-btn) }
.czas-skala{ display:flex; justify-content:space-between; font-size:var(--t-xs); color:var(--mut2) }
.czas-opis{ margin-top:9px; padding:9px 11px; background:var(--card2);
  border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--mut); line-height:1.45 }

/* =============================================================== PRZYCISKI == */
.cta{
  width:100%; padding:11px 18px; border:1px solid transparent; border-radius:var(--r-md);
  background:var(--api-btn); color:#fff; font:inherit; font-size:var(--t-md); font-weight:700;
  cursor:pointer; transition:filter var(--ruch), background var(--ruch);
}
.cta:hover:not(:disabled){ filter:brightness(1.08) }
.cta:active:not(:disabled){ filter:brightness(.94) }
.cta:disabled{ background:var(--card3); color:var(--mut2); cursor:not-allowed }
.cta.ghost{ background:var(--card); color:var(--ink); border-color:var(--line) }
.cta.ghost:hover:not(:disabled){ background:var(--card2); filter:none }
.cta.waski{ width:auto }

/* =============================================================== PLIKI ====== */
.drop{
  display:grid; justify-items:center; gap:3px; padding:22px 14px; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--r-md);
  background:var(--card2); color:var(--mut); cursor:pointer;
  transition:border-color var(--ruch), background var(--ruch);
}
/* `.over` na .drop i `.nad` na .stage - obie klasy wstawia JS przy przeciaganiu
   plikow. Nazwy sa rozne i takie zostaja: zmiana wymagalaby ruszenia logiki. */
.drop:hover, .drop.over{ border-color:var(--api); background:var(--api-soft) }
.stage.nad{ border-color:var(--api); background:var(--api-soft) }
.drop .big{ font-size:1.35rem; color:var(--mut2) }
.drop b{ color:var(--ink); font-size:var(--t-md) }
.drop small{ font-size:var(--t-xs) }

/* Uklad pozycji jest podyktowany przez JS, ktory ten markup generuje:
   [miniatura 46px | nazwa | kosz], a sterowanie (.it-ctl) schodzi do PELNEJ
   szerokosci w drugim wierszu. Nie zmieniam siatki - zmieniam wylacznie skore. */
.lista{ display:flex; flex-direction:column; gap:8px; margin-top:11px }
.it{
  display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:11px; align-items:center;
  padding:9px; background:var(--card2); border:1px solid var(--line); border-radius:12px;
}
.it .th{ width:46px; height:46px; display:grid; place-items:center; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm) }
.it .th img{ max-width:100%; max-height:100%; display:block }
.it .th svg{ width:80%; height:80% }
.it .nm{ min-width:0 }
.it .nm b{ display:block; font-size:var(--t-sm); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.it .nm small{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut) }
.it .del{ border:0; background:none; color:var(--mut2); cursor:pointer; font-size:var(--t-lg);
  padding:4px 6px; border-radius:var(--r-sm) }
.it .del:hover{ color:var(--err); background:var(--err-soft) }
.it-ctl{
  grid-column:1/-1; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  border-top:1px dashed var(--line); padding-top:9px; margin-top:2px;
}
.it.jest-wyp{ border-color:var(--api) }
.it.jest-wyp .wyp span{ color:var(--api-btn) }

/* stepper ILOSCI (minus / liczba / plus) - nie mylic z .kr, ktory jest krokiem kreatora */
.step{ display:flex; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.step button{ width:30px; height:32px; border:0; background:var(--card); color:var(--ink);
  cursor:pointer; font:inherit; font-size:var(--t-lg); font-weight:700 }
.step button:hover{ background:var(--api-soft); color:var(--api-btn) }
.step input{ width:46px; height:32px; border:0; border-left:1px solid var(--line);
  border-right:1px solid var(--line); border-radius:0; background:var(--card); color:var(--ink);
  text-align:center; font-family:var(--mono); font-size:var(--t-sm); font-weight:700 }
.step input:focus{ outline:none; background:var(--field); box-shadow:none }

.skala{ display:grid; grid-template-columns:1fr auto; gap:9px; align-items:center }
.skala input[type=range]{ margin:0 }
.skala .val{ display:flex; align-items:center; gap:5px }
.skala .val input{ width:58px; padding:5px 7px; text-align:right; font-size:var(--t-sm);
  background:var(--card) }
.skala .val span{ font-size:var(--t-xs); font-weight:700; color:var(--mut) }

.znacz-wyp{
  margin-left:6px; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--api-soft); color:var(--api-btn); border:1px solid var(--api);
  font-size:var(--t-xs); font-weight:800;
}
.wym{ display:block; margin-top:5px; font-family:var(--mono); font-size:var(--t-xs); color:var(--mut) }
.wym em{ color:var(--cut); font-style:normal; font-weight:700 }

/* sciaga rozwijana */
.sciaga{ margin-bottom:11px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card2); overflow:hidden }
.sciaga summary{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; cursor:pointer; font-size:var(--t-sm); font-weight:600; color:var(--api-btn);
  list-style:none }
.sciaga summary::-webkit-details-marker{ display:none }
.sciaga .car{ transition:transform var(--ruch) }
.sciaga[open] .car{ transform:rotate(90deg) }
.sciaga .body{ padding:2px 12px 12px; display:flex; flex-direction:column; gap:10px }
.krok{ display:grid; grid-template-columns:auto 1fr; gap:9px; font-size:var(--t-sm);
  color:var(--mut); line-height:1.45 }
.krok .nr{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--api-btn); color:#fff; font-size:var(--t-xs); font-weight:700 }
.krok b{ color:var(--ink) }
.krok code{ font-family:var(--mono); font-size:.95em; padding:1px 4px;
  background:var(--card3); border-radius:4px }

/* =============================================================== ALERTY ===== */
.alert{
  display:grid; grid-template-columns:auto 1fr; gap:10px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--t-sm); line-height:1.45;
}
.alert .ai{ font-size:var(--t-lg); line-height:1.2 }
.alert b{ display:block }
.alert.ostrz{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn) }
.alert.ostrz b{ color:var(--ink) }
.alert.kryt{ background:var(--err-soft); border-color:var(--err-line); color:var(--err) }
.alert.kryt b{ color:var(--ink) }
.alert.info{ background:var(--api-soft); border-color:var(--api); color:var(--api-btn) }
.alert.info b{ color:var(--ink) }
.alert.good{ background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok) }

/* =============================================================== PASEK AKCJI  */
/* Akcje siedza na dole ekranu, nie na koncu dlugiej kolumny - operator ma je
   w tym samym miejscu niezaleznie od tego, jak daleko przewinal ustawienia. */
.rp-bar{
  position:fixed; left:var(--side-w); right:0; bottom:0; z-index:var(--z-sticky);
  display:flex; align-items:center; gap:14px; padding:12px 22px;
  background:var(--card); border-top:1px solid var(--line); box-shadow:var(--cien-lg);
}
.rp-bar .sp{ flex:1 }
.rp-bar .cta{ width:auto; flex:none }
.rp-bar-stan{ display:flex; align-items:center; gap:8px; font-size:var(--t-sm);
  color:var(--mut); min-width:0 }
.rp-bar-stan .ok{ color:var(--ok); font-size:var(--t-lg) }
.rp-bar-stan .uw{ color:var(--warn) }
#ostrzMiejsce:empty{ display:none }

/* =============================================================== RESPONSYWNOSC */
/* Zwijanie strukturalne (kolumny, sidebar), NIE plynna typografia. */
@media (max-width:1180px){
  /* minmax(0,1fr), NIE 1fr. Samo `1fr` znaczy `minmax(auto,1fr)`, a `auto` nie zejdzie
     ponizej min-content - jeden napis z `white-space:nowrap` (np. „1600 x 918 mm ·
     mix:sparrow") rozpychal wtedy kolumne i CALA strone w poziomie na telefonie. */
  .grid{ grid-template-columns:minmax(0,1fr) }
  .stan{ grid-template-columns:1fr; gap:16px }
  .pier{ justify-self:start }
}
@media (max-width:820px){
  :root{ --side-w:64px }
  .rp-i span{ display:none }
  .rp-i{ padding:11px 4px }
  .rp-body{ padding:14px 14px 92px }
  .hd-in{ padding:10px 14px }
  .metrics{ grid-template-columns:repeat(2,1fr) }
  .row{ grid-template-columns:1fr }
  .stan-m{ gap:24px }
  .rp-bar{ padding:10px 14px; flex-wrap:wrap }
  .rp-bar .cta{ flex:1 1 auto }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

@media print{
  .rp-side,.hd,.rp-bar,.stage-tabs{ display:none }
  .rp{ grid-template-columns:minmax(0,1fr) } .rp-body{ padding:0 }
}

/* =============================================================================
   WARSTWA 2 (2026-08-02, spec Arta). Dopisana na koncu CELOWO: nadpisuje wczesniejsze
   reguly bez ich usuwania, wiec kazda zmiana jest widoczna jako jawna decyzja,
   a nie jako zniknieta linia w diffie.
   ============================================================================= */

/* ------------------------------------------- 3. narzedzia w sidebarze --------- */
/* Motyw i jezyk NIE sa nawigacja. Nie moga miec stanu „aktywny", bo wtedy dwie
   pozycje wygladalyby na biezaca strone naraz. */
.rp-util{ display:grid; gap:6px; justify-items:center; padding-top:8px;
  border-top:1px solid var(--line) }
.lang{ display:inline-flex; padding:2px; gap:2px; background:var(--card2);
  border:1px solid var(--line); border-radius:var(--r-pill) }
.lang button{
  min-width:30px; padding:4px 7px; border:0; border-radius:var(--r-pill);
  background:none; color:var(--mut); font:inherit; font-size:var(--t-xs);
  font-weight:700; cursor:pointer; transition:background var(--ruch), color var(--ruch);
}
.lang button:hover{ color:var(--ink) }
.lang button[aria-pressed="true"]{ background:var(--card); color:var(--ink); box-shadow:var(--cien-sm) }
.rp-u{
  display:grid; place-items:center; width:44px; height:44px;   /* 44 px = minimalny cel dotyku */
  border:0; border-radius:var(--r-md); background:none; color:var(--mut); cursor:pointer;
  transition:background var(--ruch), color var(--ruch);
}
.rp-u:hover{ background:var(--card2); color:var(--ink) }
.rp-u svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.rp-u .ik-sun{ display:none }
:root[data-theme="dark"] .rp-u .ik-sun{ display:block }
:root[data-theme="dark"] .rp-u .ik-moon{ display:none }

/* ------------------------------------------- 2. kompaktowy stan zlecenia ------ */
/* Bylo ~300 px. Teraz ~180 px: naglowek i metryki w jednym rzedzie, kroki niskim
   paskiem pod spodem. Podglad arkusza jest tu wazniejszy niz karta statusu. */
.stan{ grid-template-columns:minmax(0,1fr) auto; gap:22px; padding:14px 18px; align-items:center }
.stan-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap }
.stan-lab{ font-size:var(--t-xs); color:var(--mut) }
.stan-t{ font-size:var(--t-2xl); font-weight:800; letter-spacing:-.02em; margin:1px 0 0 }
.stan-m{ display:flex; gap:26px; margin:0 }
.stan-m b{ font-size:var(--t-xl); font-weight:700 }
.stan-m span{ font-size:var(--t-xs) }
.krok-pas{ margin-top:14px }
.kr i{ width:22px; height:22px; font-size:11px }
.kr span{ font-size:var(--t-xs) }
.kr-lin{ margin-bottom:18px }

.pier-blok{ display:grid; gap:8px; justify-items:center }
.pier{ width:104px; height:104px }
.pier b{ font-size:var(--t-xl) }
.pier b small{ display:none }          /* podpis nachodzil na liczbe - jest w legendzie */
.pier-lab{ font-size:var(--t-xs); color:var(--mut); text-align:center; max-width:150px }
.pier .luk, .pier .luk-wyp{ transition:stroke-dasharray var(--ruch), stroke-dashoffset var(--ruch) }
.pier .luk-wyp{ stroke:var(--api); opacity:.38 }

/* ------------------------------------------- 4. legenda uzysku ---------------- */
.pier-leg{ display:flex; gap:12px; margin:0; padding:0; list-style:none }
.pier-leg li{ display:flex; align-items:center; gap:5px; font-size:var(--t-xs); color:var(--mut) }
.pier-leg b{ font-family:var(--mono); font-weight:700; color:var(--ink) }
.kropka{ width:9px; height:9px; border-radius:50%; flex:none }
.kropka.zam{ background:var(--api-btn) }
.kropka.wyp{ background:var(--api); opacity:.38 }

/* ------------------------------------------- 5. lista plikow ------------------ */
.grp-pliki{ display:flex; flex-direction:column; min-height:0 }
/* Wlasny obszar przewijania: przy 15 plikach panel rozpychal cala kolumne.
   `padding-bottom` zostawia miejsce, zeby OSTATNI plik nie chowal sie pod paskiem. */
.lista{ max-height:min(46vh, 420px); overflow-y:auto; padding:2px 2px 8px; margin-top:8px }
.lista-hd{ display:flex; gap:8px; margin-top:10px }
.szukaj{ flex:1; padding:7px 10px; font-size:var(--t-sm) }
.mini{ padding:7px 11px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); color:var(--mut); font:inherit; font-size:var(--t-xs);
  font-weight:600; cursor:pointer; white-space:nowrap }
.mini:hover{ background:var(--card2); color:var(--ink) }

.it{ display:block; padding:8px 9px }
.it-gl{ display:grid; grid-template-columns:36px minmax(0,1fr) auto auto auto;
  gap:7px; align-items:center }
.it .th{ width:36px; height:36px }
/* Zwezone celowo: przy szerokosci kolumny 380 px kazdy piksel kontrolek zabiera
   go nazwie pliku, a to po nazwie operator rozpoznaje uzytek. */
.it-gl .step button{ width:24px; height:28px; font-size:var(--t-md) }
.it-gl .step input{ width:34px; height:28px; font-size:var(--t-xs) }
.it .del{ width:26px; height:26px; padding:0; font-size:var(--t-md) }
.roz{ width:24px; height:26px }
.it .nm b{ font-size:var(--t-sm) }
.it .nm small{ display:block; font-size:var(--t-xs); color:var(--mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.roz{ width:28px; height:28px; display:grid; place-items:center; border:0; background:none;
  color:var(--mut); cursor:pointer; border-radius:var(--r-sm); font-size:var(--t-lg) }
.roz:hover{ background:var(--card3); color:var(--ink) }
.roz span{ display:block; transition:transform var(--ruch) }
.it.otwarty .roz span{ transform:rotate(90deg) }
/* Zwiniete domyslnie. `display:none` zamiast wysokosci - zero animacji na liscie,
   ktora operator otwiera dziesiatki razy dziennie. */
.it-roz{ display:none; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line) }
.it.otwarty .it-roz{ display:block }
.mini-lab{ font-size:var(--t-xs); font-weight:600; color:var(--mut) }
.skala{ grid-template-columns:auto 1fr auto; gap:8px }
.ostrzega{ color:var(--warn) }

/* ------------------------------------------- 7. bez natywnych strzalek -------- */
/* Pole ilosci ma wlasne - i +, wiec natywny spinner to druga para kontrolek
   robiaca to samo, w dodatku w innym miejscu i innym stylu. */
input[type=number]{ -moz-appearance:textfield; appearance:textfield }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* ------------------------------------------- 6. podpowiedzi ------------------- */
.ihelp{
  width:16px; height:16px; margin-left:5px; flex:none; display:inline-grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; background:var(--card2); color:var(--mut);
  font:inherit; font-size:10px; font-weight:800; cursor:help; padding:0; line-height:1;
}
.ihelp:hover, .ihelp:focus-visible{ background:var(--api-soft); color:var(--api-btn); border-color:var(--api) }
.tip{
  position:fixed; z-index:var(--z-tip); padding:9px 11px; border-radius:var(--r-md);
  background:var(--ink); color:var(--paper); font-size:var(--t-sm); line-height:1.4;
  box-shadow:var(--cien-lg); pointer-events:none;
}

/* ------------------------------------------- 9. podglad arkusza --------------- */
/* Bialy arkusz na bialym tle nie mial granicy - operator nie widzial, gdzie konczy
   sie material. Tlo warsztatu ciemniejsze, arkusz z obrysem i wlasnym cieniem. */
.stage{ background:var(--card3) }
:root[data-theme="dark"] .stage{ background:#101216 }
/* Cien pod arkuszem daje SVG jako filtr - obrys rysuje <rect> w srodku, bo tylko on
   zna realne wymiary materialu. Border na <svg> obejmowalby tez pusty margines skalowania. */
.stage svg{ filter:drop-shadow(0 10px 22px rgba(0,0,0,.22)) }
.stage-stopka{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap }
.legenda{ display:flex; gap:14px; margin:0; padding:0; list-style:none }
.legenda li{ display:flex; align-items:center; gap:6px; font-size:var(--t-xs); color:var(--mut) }
.legenda i{ width:16px; height:0; border-top-width:2px; flex:none }
.legenda .pr-druk{ border-top-style:solid; border-top-color:var(--mut2) }
.legenda .pr-ciecie{ border-top-style:dashed; border-top-color:var(--cut) }

/* ------------------------------------------- 11. pasek akcji ------------------ */
.rp-bar{ gap:10px }
.rp-bar-stan{ gap:9px; flex-wrap:nowrap; overflow:hidden }
/* JEDNO zdanie w JEDNEJ linii - `<b>` w srodku lamalo je na cztery wiersze
   z osierocona kropka (zrzut Arta 2.08 19:55). */
.rp-bar-stan .zd{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rp-bar-stan .uw{
  flex:none; min-height:32px; padding:5px 11px; border:1px solid var(--warn-line);
  border-radius:var(--r-md); background:var(--warn-soft); color:var(--warn);
  font:inherit; font-size:var(--t-sm); font-weight:700; cursor:pointer; white-space:nowrap;
}
.rp-bar-stan .uw:hover{ filter:brightness(.97) }
.cta{ min-height:44px }                 /* minimalny cel dotyku, takze na pasku */
.cta.ikona{ display:inline-flex; align-items:center; gap:7px }
.cta.ikona svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none }
.blysk{ animation:blysk 1.6s ease-out }
@keyframes blysk{ 0%,100%{ box-shadow:none } 15%,60%{ box-shadow:0 0 0 3px var(--api-ring) } }
@media (prefers-reduced-motion:reduce){ .blysk{ animation:none; outline:2px solid var(--api) } }

/* ------------------------------------------- 12. responsywnosc ---------------- */
@media (max-width:1180px){
  .stan{ grid-template-columns:minmax(0,1fr) }
  .pier-blok{ justify-self:start; grid-auto-flow:column; align-items:center; gap:16px }
}
@media (max-width:820px){
  /* Sidebar schodzi na dol jako nawigacja - na telefonie kciuk jest przy dolnej
     krawedzi, a boczna kolumna zjadalaby szerokosc potrzebna podgladowi. */
  :root{ --side-w:0px }
  .rp{ grid-template-columns:1fr }
  .rp-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; height:auto; z-index:var(--z-side);
    flex-direction:row; align-items:center; gap:4px; padding:6px 10px;
    border-right:0; border-top:1px solid var(--line);
  }
  .rp-logo{ display:none }
  .rp-nav{ flex-direction:row; flex:1; gap:4px }
  .rp-nav .sp, .rp-side > .sp{ display:none }
  .rp-i{ flex:1; padding:7px 4px }
  .rp-i span{ display:block; font-size:10px }
  .rp-util{ border-top:0; border-left:1px solid var(--line); padding:0 0 0 8px;
    grid-auto-flow:column; align-items:center }
  .rp-u{ width:38px; height:38px }
  .rp-bar{ left:0; bottom:56px }              /* nad nawigacja, nie pod nia */
  .rp-body{ padding-bottom:170px }            /* pasek + nawigacja + zapas */
  .rp-nesting .rp-body{ padding-bottom:190px } /* cala odmowa eksportu nad paskiem */
  .stan{ padding:12px 14px }
  .stan-hd{ gap:12px }
  .stan-t{ font-size:var(--t-xl) }
  /* Kroki jako zwarty wskaznik - pelna linia z podpisami nie miesci sie w szerokosci. */
  .krok-pas{ gap:0; margin-top:10px }
  .kr span{ display:none }
  .kr.teraz span{ display:block; font-size:10px }
  .kr-lin{ margin-bottom:0 }
  .pier-blok{ grid-auto-flow:row; justify-self:center }
  .metrics{ grid-template-columns:repeat(2,1fr) }
  .lista{ max-height:none }
  .rp-bar-stan .zd{ display:none }            /* na pasku zostaje ikona + liczba uwag */
  /* SIATKA, nie flex-wrap. Flex liczyl szerokosc od tresci przyciskow, wiec dwa
     „Download …" po ~200 px rozpychaly pasek ponad 414 px i robily poziomy scroll
     CALEJ strony (zlapane zrzutem). `minmax(0,1fr)` nie moze przepelnic kolumny. */
  .rp-bar{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"stan pdf cut" "akcja akcja akcja"; gap:8px; align-items:center }
  .rp-bar .sp{ display:none }
  .rp-bar-stan{ grid-area:stan }
  #pobierz{ grid-area:pdf } #pobierzCiecie{ grid-area:cut } #uloz{ grid-area:akcja }
  .rp-bar .cta{ width:100%; min-width:0 }
  /* Pelny podpis jest za dlugi, ale same dwie identyczne ikony nie rozrozniaja
     druku i ciecia na dotyku. Krotki, tlumaczony podpis + pelne title/aria-label. */
  .cta.ikona{ justify-content:center }
  .cta.ikona span{ display:none }
  .rp-bar .cta.ikona::after{ content:attr(data-short); font-size:12px; line-height:1.2 }
}
@media (max-width:520px){
  .it-gl{ grid-template-columns:36px minmax(0,1fr) auto auto }
  .it-gl .step{ grid-column:1/-1; justify-self:start; margin-top:6px }
}

/* --------- POZIOMY SCROLL NA TELEFONIE (zlapane zrzutem 414 px) ---------
   Gorny pasek niosl marke, tytul, plakietke MAKIETA i licznik plikow - razem
   ~450 px, wiec rozpychal CALA strone i wszystko wystawalo poza ekran.
   Na waskim ekranie zostaje sam tytul; licznik plikow i tak stoi w karcie Pliki. */
@media (max-width:820px){
  /* Bylo tu `overflow-x:clip` jako obejscie rzekomego przepelnienia na 414 px.
     USUNIETE 3.08: zrzut Arta z telefonu (2.08 21:34, produkcja) pokazal poprawny
     uklad bez przesuniecia w bok. Przepelnienie widzialem WYLACZNIE w headless
     Chrome, ktory nie stosuje <meta viewport> i renderuje jak waski desktop -
     to byl artefakt narzedzia, nie blad strony. Maskowanie zostalo zdjete, zeby
     realne przepelnienie w przyszlosci bylo widoczne, a nie ucinane po cichu. */
  .rp-main, .rp-body, .grid, .ctrl, .stage-card, .karta{ min-width:0 }
  .hd .brand span, .badge-makieta, #znakPliki{ display:none }
  .hd-in{ gap:10px }
  .hd-t b{ font-size:var(--t-lg) }
  .hd-t span{ font-size:var(--t-xs) }
  .stage-hd{ flex-wrap:wrap; gap:4px }
  .stage-hd .sub{ white-space:normal; word-break:break-word }
  .stan-hd{ flex-wrap:wrap }
  .stan-m{ gap:18px }
  .stan-m b{ font-size:var(--t-lg) }
  /* Nawigacja dolna: 3 pozycje + narzedzia musza sie zmiescic bez zawijania. */
  .rp-i span{ font-size:9px }
  .lang button{ min-width:26px; padding:4px 5px }
  .rp-util{ padding-left:6px; gap:4px }
}

/* =============================================================================
   WARSTWA 3 (2026-08-03): zoom podgladu + wlasna kolejnosc paneli.
   ============================================================================= */

/* ------------------------------------------------- zoom podgladu ------------- */
.zoom{ display:inline-flex; align-items:center; padding:3px; gap:2px;
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md) }
.zoom button{
  min-width:32px; height:30px; padding:0 8px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--mut); font:inherit; font-size:var(--t-md); font-weight:700;
  cursor:pointer; transition:background var(--ruch), color var(--ruch);
}
.zoom button:hover{ background:var(--card); color:var(--ink) }
.zoom .zval{ min-width:56px; font-family:var(--mono); font-size:var(--t-sm) }
/* Kursor mowi, ze kadr da sie przesunac - inaczej operator po przyblizeniu nie wie,
   ze moze chwycic arkusz i przeciagnac. */
.stage.mozna-przesuwac{ cursor:grab }
.stage.mozna-przesuwac:active{ cursor:grabbing }
.stage.mozna-przesuwac svg{ pointer-events:none }   /* przeciaganie kadru, nie zaznaczanie */

/* ------------------------------------------------- kolejnosc paneli ---------- */
.panel{ position:relative }
.chwyt{
  width:22px; height:22px; margin-right:6px; flex:none; display:inline-grid; place-items:center;
  border:0; border-radius:var(--r-sm); background:none; color:var(--mut2);
  font-size:13px; line-height:1; cursor:grab; padding:0;
  touch-action:none;              /* bez tego przeciaganie na telefonie przewija strone */
}
.chwyt:hover{ background:var(--card3); color:var(--ink) }
.chwyt:active{ cursor:grabbing }
.glab .chwyt{ margin-left:-4px }
summary .chwyt{ margin-left:-2px }
/* Uchwyt jest dyskretny, dopoki nie szuka sie go swiadomie - panel ma wygladac
   spokojnie, a nie jak plansza do ukladania. */
.panel:hover .chwyt, .chwyt:focus-visible{ color:var(--mut) }
.panel.wleczony{
  opacity:.9; outline:2px dashed var(--api); outline-offset:2px;
  border-radius:var(--r-lg); cursor:grabbing;
}
.ctrl{ scroll-margin-top:80px }

@media (max-width:820px){
  .zoom button{ min-width:38px; height:34px }   /* wiekszy cel dotyku */
}

/* Uchwyt doszedl jako TRZECI element do naglowka, a `space-between` rozlozyl wtedy
   trzy rzeczy zamiast dwoch - tytul wyladowal na srodku. Tytul ma stac przy uchwycie,
   a podpis odpychamy w prawo marginesem, nie rozkladem. */
.glab{ justify-content:flex-start }
.glab .hint{ margin-left:auto; text-align:right }
.sciaga summary{ justify-content:flex-start }
.sciaga summary .car{ margin-left:auto }

/* --------------------------------------------- ikony opcji zaawansowanych ---- */
/* Rysunek mowi, CO sie wlacza, zanim operator przeczyta opis - przy dwoch opcjach
   o podobnie brzmiacych nazwach to szybsze niz czytanie. */
.ik-opc{
  width:26px; height:26px; flex:none; margin-top:-2px;
  stroke:var(--mut); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.wyp:hover .ik-opc{ stroke:var(--ink) }
.wyp input:checked ~ .ik-opc{ stroke:var(--api-btn) }

/* --------------------------------------------- pasek postepu na telefonie ---- */
/* Kroki musza miec ROWNE odstepy. Wczesniej podpis pokazywal sie tylko przy
   aktywnym kroku, wiec jeden kafelek byl szerszy od pozostalych i caly pasek
   wygladal na przekrzywiony (zgloszenie Arta 3.08, zrzut z telefonu). */
@media (max-width:820px){
  .krok-pas{ display:grid; grid-template-columns:repeat(7, auto); align-items:center;
    justify-content:space-between; gap:0 }
  .kr{ width:26px }                    /* stala szerokosc = rowne odstepy */
  .kr span{ display:none }
  .kr.teraz span{
    display:block; position:absolute; margin-top:30px; left:50%;
    transform:translateX(-50%); white-space:nowrap; font-size:10px;
  }
  .kr{ position:relative }
  .krok-pas{ margin-bottom:14px }      /* miejsce na podpis wychodzacy pod krok */
  .kr-lin{ min-width:14px; margin:0 4px }
}

/* --------------------------------------------- pole dodawania plikow --------- */
/* Zwarty pasek zamiast wysokiego prostokata (zrzut Arta 3.08): ikona obok tekstu,
   nie nad nim. Przy kilku panelach w kolumnie kazde 40 px wysokosci to mniej
   miejsca na to, po co operator tu przyszedl - czyli na liste plikow. */
.drop{
  display:flex; align-items:center; gap:11px; justify-items:stretch;
  padding:11px 13px; text-align:left;
}
.drop .ik-plik{ width:26px; height:26px; flex:none; stroke:var(--mut); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.drop:hover .ik-plik, .drop.over .ik-plik{ stroke:var(--api-btn) }
.drop-t{ display:grid; gap:1px; min-width:0 }
.drop-t b{ font-size:var(--t-sm) }
.drop-t small{ font-size:var(--t-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Kafelek „dodaj" na koncu listy - ten sam jezyk wizualny co pole glowne. */
.dodaj{
  display:grid; place-items:center; width:100%; height:52px; margin-top:8px;
  border:1.5px dashed var(--line); border-radius:var(--r-md);
  background:var(--card2); color:var(--mut); cursor:pointer;
  transition:border-color var(--ruch), background var(--ruch);
}
.dodaj:hover{ border-color:var(--api); background:var(--api-soft) }
.dodaj .ik-plik{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.dodaj:hover .ik-plik{ stroke:var(--api-btn) }