/* =====================================================================
   smacznejkawusi.pl: strona generatora (generator.php)
   Rama (header/footer/pasek oferty/.blok) siedzi w assets/css/wspolne.css.
   Kolory/kontury/cienie/komponenty bazowe: design/tokens.css.
   UWAGA: id-ki i data-act poniżej czyta assets/js/generator.js,
   nie zmieniaj ich bez sprawdzenia tego pliku.
   ===================================================================== */

.strona-naglowek{padding:36px 0 6px}
.strona-naglowek h1{font-size:clamp(30px,4.4vw,46px);color:var(--czerwien);margin:8px 0 10px}
.strona-naglowek p{font-size:15px;font-weight:500;max-width:60ch}

.layout{max-width:var(--maks);margin:0 auto;padding:24px 20px 60px;display:grid;
  grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
/* Bez min-width:0 kolumna z <canvas width="1080"> nie kurczy się poniżej
   rozmiaru płótna, na wąskim ekranie rozpychałaby całą stronę w bok. */
.layout>*{min-width:0}

/* ---------- płótno ---------- */
.stage-wrap{border:var(--kontur-gruby);box-shadow:var(--cien-duzy);border-radius:var(--promien);
  overflow:hidden;background:var(--biel)}
#stage{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
#stage.dragging{cursor:grabbing}

.stage-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.hint{font-size:13px;font-weight:500;margin:10px 0 0}

/* ---------- panele ---------- */
.panel{background:var(--biel);border:var(--kontur);border-radius:var(--promien);box-shadow:var(--cien);
  padding:16px;margin-bottom:16px}
.panel h2{font-size:19px;margin:0 0 12px}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
  max-height:260px;overflow-y:auto;padding:2px}
.thumb{aspect-ratio:1;border:var(--kontur);border-radius:var(--promien);background:var(--papier) center/cover no-repeat;
  box-shadow:var(--cien-maly);cursor:pointer;padding:0;transition:transform .08s,box-shadow .08s}
.thumb:hover{transform:translate(-2px,-2px);box-shadow:var(--cien)}
.thumb.active{border:var(--kontur-gruby);box-shadow:var(--cien)}
/* elementy mają przezroczyste tło, na jasnej karcie widać je lepiej niż wycięte do kwadratu */
.thumb.el{background-size:contain;background-color:var(--biel)}

.empty{grid-column:1/-1;font-size:13px;font-weight:500;background:var(--papier);
  border:var(--kontur);border-radius:var(--promien);padding:12px;margin:0}

/* ---------- formularz ---------- */
textarea,select,input[type="text"]{width:100%;font:inherit;color:var(--atrament);background:var(--biel);
  border:var(--kontur);border-radius:var(--promien);padding:9px 10px}
textarea{resize:vertical;margin-bottom:10px}
input[type="text"]:invalid{box-shadow:none} /* nie czerwienimy pola, dopóki użytkownik nie spróbuje wysłać */

input[type="range"]{width:100%}

.text-tools{margin-top:14px;padding-top:14px;border-top:var(--kontur);display:grid;gap:10px}
/* .text-tools{display:grid} ma tę samą specyficzność co domyślne [hidden]{display:none}
   przeglądarki i ładuje się później, bez tej reguły JS-owe .hidden=true nic by nie ukrywało. */
.text-tools[hidden]{display:none}
.text-tools label{display:block;font-size:13px;font-weight:600}

.color-row{display:flex;gap:12px}
.color-row label{flex:1}
input[type="color"]{width:100%;height:36px;border:var(--kontur);border-radius:var(--promien);
  padding:2px;background:var(--biel);cursor:pointer}

.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.check input{width:auto}
.publish-check{margin:4px 0 14px}

/* ---------- akcje generowania ---------- */
.btn-big{width:100%;font-size:18px;padding:15px;text-align:center}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-big:disabled{animation:pulsuj 1.1s ease-in-out infinite}
@keyframes pulsuj{0%,100%{opacity:.55}50%{opacity:.82}}
@media(prefers-reduced-motion:reduce){.btn-big:disabled{animation:none}}

.btn-link{display:block;margin:10px 0 0;background:none;border:none;padding:0;
  color:var(--atrament);text-decoration:underline;text-underline-offset:3px;
  font-size:13px;font-weight:600;cursor:pointer}

.gen-error{margin-top:14px;padding:12px 14px;background:var(--losos);border:var(--kontur);
  border-radius:var(--promien);box-shadow:var(--cien-maly);font-size:14px;font-weight:600}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
}