/* icons.css — warstwa wizualna ArtOn (23.09.2026)
   Klasy pomocnicze ikon. Dwa rodzaje:
   1) ilustrowane (duotone, plik icons/<nazwa>.svg): <img class="ico" src="icons/groups.svg" alt="" aria-hidden="true">
      rozmiary: .ico 20 px, .ico-md 26 px, .ico-lg 40 px, .ico-xl 64 px;
   2) glify UI (monoline, currentColor): <svg class="ui" aria-hidden="true"><use href="icons/ui.svg#check"/></svg>
   3) glify mono ikon (sprite icons/glyphs.svg, currentColor): <svg class="gl" aria-hidden="true"><use href="icons/glyphs.svg#g-home"/></svg>
      rozmiary: .gl 1.5rem, .gl-sm 1.1rem, .gl-lg 2rem — dolna/górna nawigacja portalu, nagłówki, przyciski.
   Tokeny --t-*/--ease-* pochodzą ze style.css; tu z wartościami zapasowymi. */

/* ===== Ikony ilustrowane ===== */
.ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: -0.25em;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ico-md { width: 26px; height: 26px; vertical-align: -0.35em; }
.ico-lg { width: 40px; height: 40px; vertical-align: middle; }
.ico-xl { width: 64px; height: 64px; vertical-align: middle; }

/* ===== Glify UI ===== */
.ui {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}

/* ===== Glify mono (sprite icons/glyphs.svg) — kolor przez currentColor ===== */
.gl {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  vertical-align: -0.3em;
  flex: 0 0 auto;
  pointer-events: none;
}
.gl-sm { width: 1.1rem; height: 1.1rem; vertical-align: -0.2em; }
.gl-lg { width: 2rem; height: 2rem; vertical-align: -0.45em; }

/* ===== Zakładki panelu na fioletowym pasku: kafelek pełny, biała obwódka po krawędzi kafelka ===== */
header nav .tab-btn .ico {
  opacity: 1;
  filter: none;
  border-radius: 23.5%; /* = zaokrąglenie kafelka (rx 15/64) — obwódka idzie po jego krawędzi */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); /* 3,8:1 do tła paska */
  transition: opacity var(--t-fast, 140ms) var(--ease-standard, ease), filter var(--t-fast, 140ms) var(--ease-standard, ease);
}
header nav .tab-btn:hover .ico,
header nav .tab-btn.active .ico { opacity: 1; filter: none; }
header nav .tab-btn { display: inline-flex; align-items: center; gap: 6px; }
header nav .tab-btn .ico { width: 20px; height: 20px; }
@media (max-width: 700px) { header nav .tab-btn .ico { width: 18px; height: 18px; } }
/* nawigacja portalu (.nav-ico z svg.gl): układ, kolory stanów i ruch — rodzic.css / motion.css */

/* ===== Ikona przed tekstem w przycisku / linku (odstęp .4em) ===== */
button:has(> .ico, > .ui),
a.btn-link:has(> .ico, > .ui),
.import-label:has(> .ico, > .ui) { display: inline-flex; align-items: center; gap: 0.4em; }
button > .ico { width: 18px; height: 18px; }
button.small > .ico, .small > .ico { width: 16px; height: 16px; }
button > .ui { font-size: 1.1em; }
button.primary > .ui, .btn-link > .ui { stroke-width: 2; }
.logout-link > .ui, .signup-hint > .ui, .signup-hint a > .ui { margin-right: 0.35em; }
.logout-link > .ico { width: 16px; height: 16px; margin-right: 0.35em; }

/* ===== Przycisk ikonowy (tylko glif, z aria-label) ===== */
button.btn-ico, .btn-ico {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--muted, #6b6479);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--t-fast, 140ms) var(--ease-standard, ease), color var(--t-fast, 140ms) var(--ease-standard, ease), transform var(--t-micro, 90ms) var(--ease-out, ease);
}
button.btn-ico.small, .btn-ico.small { width: 32px; height: 32px; min-width: 32px; }
.btn-ico > .ui { width: 20px; height: 20px; font-size: 20px; }
.btn-ico.small > .ui { width: 18px; height: 18px; }
.btn-ico:hover { background: var(--bg-inset, #f3f1f7); color: var(--text, #2b2637); }
.btn-ico:active { transform: scale(0.94); }
.btn-ico:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 4px rgba(169, 150, 207, 0.32)); }

/* nawigatory miesiąca (‹ › w .cal-nav poza kalendarzem): sam glif, stała szerokość */
.cal-nav button > .ui:only-child { font-size: 18px; margin: 0 -2px; }

/* ===== Ikona w nagłówku h2 / h1 (ikona + tekst, odstęp .5rem, 22 px) ===== */
h2 > .ico, h1 > .ico, .col-toggle > .ico, .modal h2 > .ico, legend > .ico {
  width: 22px;
  height: 22px;
  margin-right: 0.5rem;
  vertical-align: -0.3em;
}
h1 > .ico { width: 28px; height: 28px; vertical-align: -0.35em; }
h3 > .ico, .cp-h > .ico, .pay-day > .ico { width: 18px; height: 18px; margin-right: 0.4rem; vertical-align: -0.25em; }
/* caret panelu zwijanego (<span class="caret"> z glifem chevron): kafelek i obrót — panel.css / motion.css */

/* ===== Pusty stan: ikona 64 px, lekko wygaszona ===== */
.empty > .ico, .empty-row td > .ico, .thread-empty > .ico, .cal-empty > .ico, .cp-empty > .ico, .free-empty > .ico, .empty-ico {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  opacity: 0.9;
}

/* ===== Krok formularza / kafelek wyboru: ikona 40 px ===== */
.step-ico, .city-btn > .ico, .pay-opt > .ico, .tile > .ico { width: 40px; height: 40px; }
.city-btn > .ico { display: block; margin: 0 auto 6px; }
.mode-switch .city-btn > .ico { margin-bottom: 2px; }

/* ===== Ikona w polu formularza (label = kolumna flex; glif nad polem po lewej) ===== */
label.with-ico { position: relative; }
label.with-ico > .fi {
  position: absolute;
  left: 13px;
  bottom: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-faint, #8d86a0);
  pointer-events: none;
}
/* specyficzność wyższa niż globalna reguła pól ze style.css (input:not(...)×4) */
label.with-ico > input:not([hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) { padding-left: 38px; }
label.with-ico:focus-within > .fi { color: var(--lav-600, #7d68a8); }

/* ===== Ikona przy akapicie podpowiedzi (18 px, wyrównana do pierwszej linii) ===== */
p > .ico, .sms-meta > .ico, .signup-hint > .ico { width: 18px; height: 18px; margin-right: 0.4rem; vertical-align: -0.25em; }

/* ===== Komunikat końcowy zapisów (zamiast emoji) ===== */
.done-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--ok-bg, #e7f5ec);
  color: var(--ok-fg, #1f6b43);
  vertical-align: middle;
}
.done-ico > .ui { width: 30px; height: 30px; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  header nav .tab-btn .ico, .btn-ico { transition: none; }
}
/* strony publiczne (landing, logowanie, zapisy, RODO): rozmiary i marginesy ikon kontekstowych — public.css */