/* ============================================================
   La Manuli - generator koralików WODNYCH, redesign v2.
   Tylko różnice względem /css/tool.css (ładowany po nim):
   miętowy akcent (tło strony, zakładki, ramki, zaznaczenie koloru),
   siatka heksagonalna rysowana na płótnie, kulki zamiast koralików
   z otworem, karta kolorów (.swatch-card) 10 rodzin × 3 odcienie
   + biały i czarny. Wybór kafelkowania (.tiles), „Jak to działa?” (.how),
   .ready__status i .done__note są wspólne w tool.css - tu tylko mięta.
   Przyciski bez zmian: btn--primary (niebieski) = narzędzia i druk,
   btn--sun (żółty) = tylko sklep. Tekst na mięcie: --mint-ink / --blue-ink.
   Układ i funkcje edycji jak w generatorze prasowanek: wspólne klasy z tool.css
   (.tool__head--name, .toolbar--hist, .drawer__top / __nav / __toggle, --lbl,
   .palmode, .used--swap, .lg-picker, .tool-note--info, .tool__tip).
   Sekcje 11-12 powtarzają reguły, które tool.css ma tylko pod .tool--iron /
   .page-iron (telefon, tablet, telefon poziomo) - DO SCALENIA z tool.css:
   wystarczy tam dopisać selektor .tool--water / .page-water obok .tool--iron.
   Karta kolorów ma klasę .wball (nie .wsw - ta w tool.css należy do
   przełącznika w kreatorze zdjęcia i psuła kulki).
   ============================================================ */

body.page-water{ background:var(--bg-mint); }
body.page-water .nav-dd__btn.is-current:not([aria-expanded="true"]){ background:var(--mint-soft); color:var(--mint-ink); }

.tool--water{
  --sel-ring:var(--mint-select);
  --tile-line:var(--mint-line);   /* kafelki rozmiaru i „Jak to działa?” w mięcie */
  --tile-hover:var(--mint-soft);
  --tile-on:var(--mint);
  --tile-sel:var(--mint-select);
  --set-mark:var(--mint-ink);
  --wsw:44px;                     /* maks. cel karty kolorów (ok. 35 px przy 10 kolumnach w 351 px - telefon 375 px) */
  --sphere-shadow:0 1px 2px rgba(40,66,78,.28);
  --pale-ring:inset 0 0 0 1px rgba(40,66,78,.2);
  background:var(--bg-mint);
}

/* ---------- 0. Kulka wodna (CSS): pełna kulka, jeden połysk, lekki cień, bez otworu ---------- */
.tool--water [data-active-bead],
.tool--water .wball::before,
.tool--water .strip__btn::before,
.tool--water .used__btn::before,
.tool--water .lg-picker__grid button,
.tool--water .buy__bead{
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, var(--c, var(--mint)) 0, var(--c, var(--mint)) 100%);
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--c, var(--mint)) 86%, #fff) 0, var(--c, var(--mint)) 48%, color-mix(in srgb, var(--c, var(--mint)) 74%, #000) 100%);
  box-shadow:var(--sphere-shadow);
}
.tool--water [data-active-bead].is-pale,
.tool--water .wball.is-pale::before,
.tool--water .strip__btn.is-pale::before,
.tool--water .used__btn.is-pale::before,
.tool--water .buy__bead.is-pale{ box-shadow:var(--sphere-shadow), var(--pale-ring); }
/* numer koloru na kulce aktywnego koloru (wskaźnik nad planszą i w szufladzie) */
.tool--water [data-active-bead]{ color:var(--ink); text-shadow:0 0 2px rgba(255,255,255,.85); }
.tool--water [data-active-bead].is-dark{ color:#fff; text-shadow:0 0 2px rgba(0,0,0,.55); }
/* „We wzorze”: kulka z liczbą sztuk - zaznaczenie pierścieniem wokół kulki (jak w prasowankach) */
.tool--water .used__btn--n[aria-pressed="true"]::before{ box-shadow:var(--sphere-shadow), 0 0 0 2px #fff, 0 0 0 4px var(--sel-ring); }
.tool--water .used__btn--n.is-pale[aria-pressed="true"]::before{ box-shadow:var(--sphere-shadow), var(--pale-ring), 0 0 0 2px #fff, 0 0 0 4px var(--sel-ring); }
/* wybór koloru zamiany: kulka w polu wewnątrz przezroczystego obramowania (cel 44 px, od 1000 px z myszą 36 px) */
.tool--water .lg-picker{ border-color:var(--mint-soft); background:var(--bg-mint); }
.tool--water .lg-picker__grid button{
  background-clip:padding-box;
  box-shadow:none;
  color:var(--ink);
  text-shadow:0 0 2px rgba(255,255,255,.85);
}
.tool--water .lg-picker__grid button.is-pale{ box-shadow:var(--pale-ring); }
.tool--water .lg-picker__grid button.is-dark{ color:#fff; text-shadow:0 0 2px rgba(0,0,0,.55); }
.tool--water .lg-picker__grid button:focus-visible{ outline:3px dashed var(--focus); outline-offset:-2px; }

/* ---------- 1. Nagłówek narzędzia ---------- */
.tool--water .tool__title::before{
  content:"";
  display:inline-block;
  width:.85em;
  height:.85em;
  margin-right:.4em;
  vertical-align:-.08em;
  border-radius:50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, #B5ECE4 0, #46C7B8 48%, #2E8E82 100%);
  box-shadow:var(--sphere-shadow);
}
.tool--water .tool__help{ border-color:var(--pad-water-edge); color:var(--mint-ink); }
.tool--water .tool__help:hover{ background:var(--mint-soft); }
@media (max-width:479.98px){
  .tool__crumb-more{ display:none; }
}

/* ---------- 2. Płótno: podkładki rysowane na <canvas> ---------- */
.tool--water .tool__stage{ border-color:var(--mint-soft); }
.tool--water .tool__viewport{
  background:var(--bg-mint);
  scrollbar-color:var(--mint-line) var(--mint-soft);
}
.tool--water .tool__board{ padding:8px; }
#wb-grid{
  display:block;
  width:var(--cv-w, 300px);
  height:var(--cv-h, 320px);
}

/* ---------- 3. Zakładki (mięta) ---------- */
.tool--water .tabs{ background:var(--mint-soft); }
.tool--water .tabs__tab{ color:var(--mint-ink); }
.tool--water .tabs__tab[aria-selected="true"]{ color:var(--blue-ink); box-shadow:0 2px 0 var(--pad-water-edge); }
.tool--water .tabs__panel{ scrollbar-color:var(--pad-water-edge) transparent; }
.tool--water .used,
.tool--water .palmode{ border-bottom-color:var(--mint-soft); }
.tool--water .set{ border-bottom-color:var(--mint-soft); }

/* ---------- 4. Karta kolorów (.swatch-card) ---------- */
.wpal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  padding:0 2px 6px;
}
.wpal__hint{ margin-top:8px; padding:0 2px; font-size:12.5px; line-height:1.45; color:var(--ink-soft); }

.swatch-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 0;
  border-radius:18px;
  background:var(--bg-mint);
}
.swatch-card__grid,
.swatch-card__neutrals{
  display:grid;
  grid-template-columns:repeat(10, minmax(0, var(--wsw)));
  justify-content:space-between;
}
.swatch-card__grid{
  grid-template-rows:repeat(3, auto);
  grid-auto-flow:column;
  row-gap:6px;
}
.swatch-card__neutrals{ padding-top:8px; border-top:1px solid var(--mint-soft); }

.wball{
  --c:#ccc;
  position:relative;
  width:100%;
  max-width:var(--wsw);
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.wball::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  transition:transform var(--dur-1) var(--ease-out);
}
.wball:hover::before{ transform:scale(1.08); }
.wball[aria-checked="true"]::after{
  content:"";
  position:absolute;
  inset:4%;
  border-radius:50%;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--mint-select);
  pointer-events:none;
}
.wball:focus-visible{ outline:3px dashed var(--focus); outline-offset:1px; }
.wball__n{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font:900 10px/1 var(--font-head);
  font-variant-numeric:tabular-nums;
  color:#1E2F3A;
  text-shadow:0 0 2px rgba(255,255,255,.85);
  pointer-events:none;
}
.wball__n.is-dark{ color:#fff; text-shadow:0 0 2px rgba(0,0,0,.55); }
.wpal.has-nums .wball__n{ display:flex; }

/* ---------- 5. Ustawienia: kafelkowanie 1×1 do 4×4 (.tiles, .how, .ready__status - tool.css, kolory przez zmienne --tile-*) ---------- */
.tool--water .ready__btn{ border-color:var(--blue); }

/* ---------- 6. Lista zakupów (.buy z tool.css): kulki z numerem, wiersze i ramki w mięcie ---------- */
.tool--water .buy__bead{ color:#1E2F3A; text-shadow:0 0 2px rgba(255,255,255,.85); }
.tool--water .buy__bead.is-dark{ color:#fff; text-shadow:0 0 2px rgba(0,0,0,.55); }
.tool--water .buy__table thead th{ color:var(--mint-ink); }
.tool--water .buy__table tbody th,
.tool--water .buy__table tbody td{ background:var(--bg-mint); }
.tool--water .buy__name{ font-size:14px; }
.tool--water .buy__text{ border-color:var(--mint-edge); }

/* ---------- 7. Szuflada i arkusz (telefon, tablet) ---------- */
.tool--water .drawer{ box-shadow:0 -10px 30px rgba(30,107,71,.14); }
.tool--water .drawer__handle::before{ background:var(--pad-water-edge); }
/* górny pas: uchwyt ze strzałką w mięcie; przybliżenie i cofnij / ponów zostają niebieskie jak narzędzia */
.tool--water .drawer__top .drawer__handle::before{ background:var(--mint); }
.tool--water .drawer__top .drawer__handle::after{ border-color:var(--mint-line); }
/* stały przycisk „Paleta” / „Zwiń” - w kolorach zakładek */
.tool--water .drawer__toggle{
  border-color:var(--mint);
  background:var(--mint-soft);
  color:var(--mint-ink);
  box-shadow:0 2px 0 var(--pad-water-edge);
}
.tool--water .drawer__toggle .icon{ color:var(--mint-line); --icon-accent:var(--mint-line); }
.tool--water .drawer.is-open .drawer__toggle{ background:#fff; }
.tool--water .drawer__caret{ border-color:var(--mint-line); }
/* komunikat autozapisu nad planszą */
.tool--water .tool-note--info{ border-color:var(--mint); }

/* ---------- 8. Ekran startowy: 2 ścieżki (gotowy wzór, od zera) w stylu prasowanek ---------- */
.tool--water .start__row--one{ grid-template-columns:1fr; }
.tool--water .start__sec:focus-visible,
.tool--water .start__photo:focus-visible{ outline:3px dashed var(--focus); outline-offset:3px; }

/* ---------- 9. Sekcja SEO + FAQ (akcent mięty) ---------- */
.page-water .gen-seo{ background:#fff; }
/* FAQ: wariant .faq--water z lm.css (klasa w HTML) */

/* ---------- 10. Breakpointy ---------- */
@media (min-width:1000px){
  .tool--water{ --wsw:44px; background:var(--bg-mint); }
  .tool--water .tool__toolbar,
  .tool--water .tool__stage,
  .tool--water .tool__side,
  .tool--water .tool__chip{ box-shadow:0 2px 0 var(--peg-water); }
  .tool--water .tool__stage{ padding:10px; }
  .tool--water .tool__viewport{ border-radius:16px; }
  .tool--water .tool__board{ padding:14px; }
  .tool--water .swatch-card{ padding:10px 4px; }
  .tool--water .done__bar{ border-top-color:var(--mint-soft); }
  .tool--water .done__sum{ background:var(--bg-mint); }
  .tool--water .done__sum:hover{ background:var(--mint-soft); }
  .tool--water .start{ border-color:var(--pad-water-edge); }
  .tool--water .wpal__head{ min-height:32px; padding:0 2px 4px; }
}

@media (prefers-reduced-motion:reduce){
  .wball::before{ transition:none; }
  .wball:hover::before{ transform:none; }
}

/* telefon: 10 kolumn rodzin daje pole ok. 35 px szerokości (układ karty: kolumna = rodzina) - wysokość celu
   dotykowego podniesiona do 44 px; kulka i pierścień zaznaczenia bez zmian, wyśrodkowane w polu */
@media (max-width:599.98px){
  .tool--water .swatch-card__grid{ row-gap:0; }
  .tool--water .wball{ aspect-ratio:auto; height:44px; }
  .tool--water .wball::before{ inset:auto; top:50%; left:12%; width:76%; aspect-ratio:1; transform:translateY(-50%); }
  .tool--water .wball:hover::before{ transform:translateY(-50%) scale(1.08); }
  .tool--water .wball[aria-checked="true"]::after{ inset:auto; top:50%; left:4%; width:92%; aspect-ratio:1; transform:translateY(-50%); }
}

/* tablet (szuflada na pełną szerokość): karta zwarta, kulki 44 px ze stałym odstępem zamiast rozciągania na 700 px */
@media (min-width:600px) and (max-width:999.98px){
  .tool--water .swatch-card{ width:max-content; max-width:100%; padding:10px 12px; }
  .tool--water .swatch-card__grid,
  .tool--water .swatch-card__neutrals{ grid-template-columns:repeat(10, var(--wsw)); column-gap:10px; justify-content:start; }
}

/* ---------- 11. Telefon i tablet (szuflada, poniżej 1000 px) - POWTÓRZENIE tool.css, sekcja 14b (.tool--iron) ----------
   Te same wymiary co w generatorze prasowanek: zwarty nagłówek, plansza na całą szerokość, szuflada z podpisami.
   Różnice wodne: tło w mięcie i tytuł bez -webkit-box (kulka ::before przy tytule byłaby osobnym wierszem). */
@media (max-width:999.98px){
  .tool--water{
    --tool-peek:calc(158px + env(safe-area-inset-bottom, 0px));   /* uchwyt 44 + kolor i narzędzia z podpisami 58 + szybka paleta 56 */
    min-height:440px;
  }
  /* nagłówek w jednym wierszu (54 px zamiast 98): zwarty H1 obok „?” i „Gotowe” - do 2 linii.
     Okruszki są tylko dla czytników i danych strukturalnych. */
  .tool--water .tool__head{
    grid-template-areas:"title help done";
    gap:0 8px;
    padding:5px 12px 5px 16px;
  }
  .tool--water .tool__crumbs{
    position:absolute;
    width:1px;
    height:1px;
    min-height:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
  }
  /* klawiatura: okruszki z fokusem wracają na ekran (własny wiersz pod tytułem) */
  .tool--water .tool__crumbs:focus-within{
    position:static;
    grid-area:auto;
    grid-column:1 / -1;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto;
    clip-path:none;
  }
  .tool--water .tool__title{
    max-height:2.3em;               /* 2 linie po 1,15 */
    overflow:hidden;
    font-size:clamp(13px, calc((100vw - 200px) / 12.4), 16px);
    line-height:1.15;
  }
  /* plansza na całą szerokość: bez ramki sceny, podkładka leży na miętowym tle od nagłówka do szuflady
     (środek w pionie); odstęp planszy od krawędzi ekranu = 8 px */
  .tool--water .tool__stagewrap{
    padding:0 0 var(--tool-peek);
    border-top:1px solid var(--mint-soft);
    background:var(--bg-mint);
  }
  .tool--water .tool__stage{
    width:100cqw;
    height:100cqh;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
  }
  .tool--water .tool__viewport{ border-radius:0; }
  .tool--water .tool__board{ padding:8px; }
  /* szuflada: wiersz koloru i narzędzi z podpisami; paleta przewijana nad dolną krawędzią bezpieczną */
  .tool--water .drawer__row{ padding:0 12px 6px; }
  .tool--water .tabs__panel{ padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:374.98px){
  .tool--water .drawer__bead{ flex-basis:34px; width:34px; height:34px; }
}

/* ---------- 12. Telefon poziomo (niski ekran, np. 667 × 375, 812 × 375) - POWTÓRZENIE tool.css, sekcja 14c ----------
   Narzędzie jest wyższe niż ekran i strona się przewija - po przewinięciu do końca narzędzia plansza i zwinięta
   szuflada wypełniają dokładnie okno. Zwinięta szuflada to jeden wiersz (dopasuj, cofnij / ponów | kolor,
   narzędzia | szybka paleta, „Paleta”). Po bokach planszy zostają pasy z uchwytem - tam palec przewija stronę. */
@media (min-width:540px) and (max-width:999.98px) and (orientation:landscape) and (max-height:500px){
  .page-water .site-header{ position:static; }
  .tool--water{
    --tool-peek:calc(60px + env(safe-area-inset-bottom, 0px));
    height:auto;
    min-height:0;
  }
  .tool--water .tool__tip:not([hidden]){
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    margin:0 16px 6px;
    padding:0 0 0 14px;
    border:2px solid var(--notice-edge);
    border-radius:var(--radius-sm);
    background:var(--notice-bg);
    color:var(--notice-text);
    font:700 14px/1.3 var(--font-body);
  }
  .tool--water .tool__stagewrap{
    position:relative;
    flex:0 0 auto;
    height:100vh;
    height:100dvh;
    min-height:260px;
    padding:0 52px var(--tool-peek);
    border-top:0;
    background:var(--bg-mint);
  }
  /* uchwyty przewijania strony po bokach planszy */
  .tool--water .tool__stagewrap::before,
  .tool--water .tool__stagewrap::after{
    content:"";
    position:absolute;
    top:calc(50% - var(--tool-peek) / 2 - 28px);
    width:6px;
    height:56px;
    border-radius:3px;
    background:var(--pad-water-edge);
  }
  .tool--water .tool__stagewrap::before{ left:23px; }
  .tool--water .tool__stagewrap::after{ right:23px; }
  .tool--water .tool__viewport{ border-radius:16px 16px 0 0; }

  /* szuflada: siatka zamiast kolumny. Zwinięta = 1 wiersz; rozwinięta = narzędzia, zakładki, treść */
  .tool--water .drawer{
    display:grid;
    grid-template-columns:max-content max-content minmax(0,1fr);
    grid-template-rows:60px minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    height:calc(100vh - 12px);
    height:calc(100dvh - 12px);
    padding:0 10px env(safe-area-inset-bottom, 0px);
    border-radius:20px 20px 0 0;
  }
  .tool--water .drawer__top{ grid-column:1; grid-row:1; padding:0; }
  .tool--water .drawer__top .drawer__handle,
  .tool--water .drawer__zlabel{ display:none; }
  .tool--water .drawer:not(.is-open) .drawer__zbtn:not([data-zoom="fit"]){ display:none; }
  .tool--water .drawer__row{ grid-column:2; grid-row:1; padding:0; }
  .tool--water .drawer__active{ flex:0 0 auto; width:128px; }
  .tool--water .drawer__nav{ grid-column:3; grid-row:1; align-items:center; justify-content:flex-end; padding:0; }
  .tool--water .drawer__nav .drawer__strip{ padding:3px 8px 3px 4px; }   /* zapas na pierścień zaznaczenia */
  .tool--water .drawer__nav .tabs{ margin:0; }
  .tool--water .drawer__toggle,
  .tool--water .drawer.is-open .drawer__toggle{ margin-top:0; }
  .tool--water .drawer__body{ grid-column:1 / -1; grid-row:2; align-self:stretch; }
  .tool--water .drawer.is-open{
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-rows:56px 52px minmax(0,1fr);
  }
  .tool--water .drawer.is-open .drawer__row{ justify-content:flex-end; }
  .tool--water .drawer.is-open .drawer__nav{ grid-column:1 / -1; grid-row:2; align-self:start; }
  .tool--water .drawer.is-open .drawer__body{ grid-row:3; }
}
/* poziomo poniżej 720 px szerokości (np. 667 × 375): w wierszu nie ma miejsca na szybką paletę - kolory pod „Paleta” */
@media (min-width:540px) and (max-width:719.98px) and (orientation:landscape) and (max-height:500px){
  .tool--water .drawer:not(.is-open) .drawer__nav .drawer__strip{ display:none; }
}