/* ==========================================================================
   grafikit.pl — tools.css
   Wspólne style pięciu narzędzi: konwerter WebP, palety, gradienty, lorem ipsum, ZIP.
   Używa tokenów z style.css (motyw jasny/ciemny przez [data-theme]); nie nadpisuje klas globalnych.
   Prefiksy: tl- (wspólne), wp- (WebP), pal- (palety), gr- (gradienty), lo- (lorem), zp- (ZIP).
   ========================================================================== */

/* ---- Wspólne ------------------------------------------------------------ */
.tl-app { margin-bottom: 2.5rem; }
.tl-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
.tl-layout--wide { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
@media (max-width: 900px) { .tl-layout, .tl-layout--wide { grid-template-columns: minmax(0, 1fr); } }
.tl-title { font-size: 1.05rem; margin: 0 0 .75rem; }
.tl-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted); margin: 1.1rem 0 .5rem; font-family: var(--font-ui); }
.tl-status { min-height: 1.5em; margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.tl-status--err { color: var(--err); }
.tl-inline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.tl-inline > * { margin: 0; }
.tl-grow { flex: 1 1 auto; min-width: 0; }
.tl-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-mono { font-family: var(--font-mono); font-size: .88rem; }
.tl-code { position: relative; }
.tl-code pre { margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 18rem; }
.tl-sep { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }

progress.tl-progress { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); accent-color: var(--accent); appearance: none; -webkit-appearance: none; }
progress.tl-progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress.tl-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .15s; }
progress.tl-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.tl-progress-wrap { margin: .75rem 0; }
.tl-progress-wrap[hidden], .tl-app [hidden] { display: none !important; }

/* Przełączniki segmentowe (aria-pressed) */
.tl-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.tl-seg .btn { padding: .5rem .8rem; min-height: 40px; font-size: .875rem; }

/* Zakładki (role=tablist) */
.tl-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; }
.tl-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: .8rem 1.1rem; min-height: 44px; font: 600 1rem var(--font-ui); color: var(--muted); cursor: pointer; white-space: nowrap; }
.tl-tab:hover { color: var(--ink); }
.tl-tab[aria-selected="true"] { color: var(--ink-strong); border-bottom-color: var(--accent); }
.tl-tabpanel[hidden] { display: none; }

/* Wiersze etykieta + kontrolka */
.tl-range { display: grid; gap: .25rem; margin-bottom: 1rem; }
.tl-range__head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .9rem; }
.tl-note { font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }

/* Szachownica pod przezroczystymi obrazami (jasna / ciemna) */
.tl-checker {
  --ck-a: #ffffff; --ck-b: #d9d6cf;
  background-color: var(--ck-a);
  background-image: linear-gradient(45deg, var(--ck-b) 25%, transparent 25%, transparent 75%, var(--ck-b) 75%),
                    linear-gradient(45deg, var(--ck-b) 25%, transparent 25%, transparent 75%, var(--ck-b) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px;
}
:root[data-theme="dark"] .tl-checker { --ck-a: #2a2d33; --ck-b: #383c44; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .tl-checker { --ck-a: #2a2d33; --ck-b: #383c44; } }

/* Lista wyników (WebP, ZIP) */
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tl-item__name { font-weight: 600; overflow-wrap: anywhere; }
.tl-item__meta { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.tl-item__actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.tl-item--err { border-color: var(--err); background: var(--err-bg); }
.tl-item__err { color: var(--err); font-size: .875rem; font-weight: 500; }
@media (max-width: 560px) {
  .tl-item { grid-template-columns: auto minmax(0, 1fr); }
  .tl-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.tl-summary { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); margin: 0 0 1rem; }
.tl-summary strong { font-variant-numeric: tabular-nums; }
.tl-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* ---- WebP ------------------------------------------------------------------ */
.wp-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; }
.wp-thumb canvas { display: block; max-width: 100%; max-height: 100%; }
.wp-thumb--none { color: var(--muted); font-size: .75rem; }
.wp-saving { display: inline-flex; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; margin-left: .35rem; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }
.wp-saving--neg { background: var(--err-bg); color: var(--err); border-color: var(--err); }

/* ---- Palety -------------------------------------------------------------------- */
.pal-base { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .6rem; align-items: end; }
.pal-base input[type="color"] { width: 52px; height: 52px; }
.pal-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.pal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.pal-card.is-base { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm); }
.pal-swatch { appearance: none; border: 0; border-bottom: 1px solid var(--line); height: 96px; width: 100%; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; padding: .5rem .6rem; font: 700 .8rem var(--font-ui); text-align: left; }
.pal-swatch:focus-visible { outline-offset: -4px; }
.pal-card__body { padding: .6rem .7rem .7rem; display: grid; gap: .3rem; }
.pal-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-family: var(--font-mono); font-size: .8rem; }
.pal-row button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: .2rem .35rem; border-radius: 6px; text-align: left; min-height: 28px; overflow-wrap: anywhere; }
.pal-row button:hover { background: var(--accent-soft); }
.pal-lock { display: flex; align-items: center; gap: .4rem; font-size: .8rem; margin-top: .25rem; cursor: pointer; }
.pal-bar { display: flex; height: 56px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 1rem; }
.pal-bar span { flex: 1 1 0; }
.pal-matrix { border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
.pal-matrix th { font-weight: 600; padding: .25rem .4rem; text-align: center; white-space: nowrap; font-family: var(--font-mono); }
.pal-matrix td { min-width: 74px; padding: .3rem .35rem; text-align: center; border-radius: 6px; vertical-align: middle; border: 1px solid var(--line); }
.pal-matrix td strong { display: block; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pal-matrix td.pal-self { opacity: .45; }
.pal-chip { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 4px; border: 1px solid var(--line-strong); vertical-align: -.2em; margin-right: .3rem; }
.pal-pair { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) { .pal-pair { grid-template-columns: minmax(0, 1fr); } }
.pal-sample { border-radius: var(--radius); padding: 1.1rem 1.2rem; border: 1px solid var(--line-strong); min-height: 130px; }
.pal-sample p { margin: 0 0 .5rem; }
.pal-lvl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .75rem; }
.pal-lvl .badge { justify-content: center; }
.pal-ratio { font: 700 2rem var(--font-head); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---- Gradienty ------------------------------------------------------------------- */
.gr-stage { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem; display: grid; place-items: center; }
.gr-preview { width: 100%; border-radius: var(--radius); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.gr-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.gr-stop { display: grid; grid-template-columns: 44px minmax(0, 1fr) 76px auto; gap: .5rem; align-items: center; }
.gr-stop input[type="number"] { padding-inline: .5rem; }
@media (max-width: 420px) { .gr-stop { grid-template-columns: 44px minmax(0, 1fr) 68px; } .gr-stop .btn { grid-column: 1 / -1; } }
.gr-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.gr-swatch { appearance: none; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); cursor: pointer; padding: 0; position: relative; }
.gr-swatch[aria-pressed="true"] { border-color: var(--ink-strong); box-shadow: 0 0 0 2px var(--accent); }
.gr-swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.gr-thumb { max-width: 100%; max-height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.gr-size { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.gr-size span { color: var(--muted); font-weight: 600; }

/* ---- Lorem ipsum ----------------------------------------------------------------------- */
.lo-out { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.7; min-height: 10rem; max-height: 34rem; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.lo-out p { margin: 0 0 1em; white-space: normal; }
.lo-out p:last-child { margin-bottom: 0; }
.lo-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin: .75rem 0 0; }
.lo-stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- ZIP ---------------------------------------------------------------------------------------- */
.zp-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-active); font: 700 .7rem var(--font-mono); text-transform: uppercase; }
:root[data-theme="dark"] .zp-icon { color: var(--accent); }
.zp-icon--dir { background: var(--surface-2); color: var(--muted); }
.zp-preview { margin-top: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: .75rem; overflow: auto; max-height: 22rem; }
.zp-preview pre { margin: 0; border: 0; background: transparent; padding: 0; white-space: pre-wrap; word-break: break-word; }
.zp-preview img { max-width: 100%; max-height: 18rem; display: block; margin: 0 auto; }
.zp-result { border: 1px solid var(--ok); background: var(--ok-bg); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.zp-levels { display: grid; gap: .5rem; }
.zp-level { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.zp-level:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.zp-level input { margin-top: .2rem; }
.zp-level small { display: block; color: var(--muted); }
.zp-tree-name { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  progress.tl-progress::-webkit-progress-value { transition: none; }
}

/* ---- Drobne klasy pomocnicze (zamiast atrybutów style) ---- */
.tl-m0 { margin: 0; }
.tl-mt { margin-top: .75rem; }
.tl-mt2 { margin-top: 1rem; }
.gr-angle-num { width: 5.2rem; }
.pal-sample__h { font-size: 1.6rem; font-weight: 700; margin: 0 0 .5rem; }
.pal-sample__s { font-size: .8rem; margin: 0; }
.zp-fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.zp-fieldset legend { padding: 0; margin-bottom: .4rem; }
.zp-table-name { overflow-wrap: anywhere; }
.zp-table-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }