/* Konto klienta /konto/: wygląd „Woda” (wariant B z sesji §36.3, wybór Roberta 18.10.2026).
   Jasny błękit marki w tle ekranów wejścia i w pasmach nagłówków, fala z panel-login.php,
   reszta jak w DESIGN.md: biel, czarne przyciski, karty z linią bez cienia.
   Ładuje się sam (glob konto-*.css w aj_konto_modules(), po nazwie), czyli po konto.css
   i pozostałych konto-*.css: przy tej samej specyficzności wygrywa kolejność, więc
   selektory są zwykłe, bez !important. Stany (:hover, --err) z konto*.css mają
   specyficzność wyższą i zostają.
   Zasady: tylko tokeny v2 (--c-*, --t-*, --s-*, --r-*), konto zawsze jasne (konto.css),
   logo zawsze na bieli (karta, pasek), nigdy na wodzie, przyciski czarne, bez aqua.
   Woda: --c-brand-aqua-2 20% na --c-bg (około #ecfefc). Kontrast tekstu na wodzie
   (obliczenie): --c-fg 18:1, --c-fg-2 7,1:1, --c-fg-3 5,1:1.
   Należność w kolorze ostrzeżenia (#9a5000 na #fdf4e7, 5,5:1), --c-err zostaje dla błędów.
   Odejście od DESIGN.md §1 i §4 (aqua jako tło sekcji, fala w wielu miejscach): konto
   rodzica jest wyjątkiem (decyzja Roberta). Opis i pomiar: konto-wyglad/KIERUNKI.md, POMIAR.md. */

/* ---------- Zmienne ---------- */

:root {
  --ajk-t-xs: var(--t-meta); /* najmniejsze pismo 13 px (było 12) */
  --ajk-bar-h: var(--header-h); /* 56 px na telefonie, 64 px na komputerze */

  --ajk-water: color-mix(in srgb, var(--c-brand-aqua-2) 20%, var(--c-bg));
  --ajk-water-line: color-mix(in srgb, var(--c-brand-aqua) 22%, var(--c-line));
  /* Woda na białej karcie (tor pierścienia, kółka ikon): 20% ginie na bieli
     (1,04:1), 40% jest widoczne, a --c-fg-3 na nim ma jeszcze 5:1. */
  --ajk-water-2: color-mix(in srgb, var(--c-brand-aqua-2) 40%, var(--c-bg));
  --ajk-wave-h: 120px;
  --ajk-wave-w: 300px;
  /* Fala pasma powitania niższa niż na ekranach wejścia: pełne 120/200 px
     zepchnęłoby kartę najbliższej lekcji pod pierwszy ekran telefonu. */
  --ajk-wave-band-h: 72px;
  /* Trzy linie fali z panel-login.php:44, jeden okres 600 jednostek (kafel bez szwu).
     Kolor daje background-color z tokenu, maska tylko kształt i krycie. */
  --ajk-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 150 600 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='.55' d='M0 214c120 0 180-46 300-46s180 46 300 46'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='.33' d='M0 254c120 0 180-46 300-46s180 46 300 46'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='.17' d='M0 294c120 0 180-46 300-46s180 46 300 46'/%3E%3C/g%3E%3C/svg%3E");

  --ajk-bg: var(--c-bg); /* ekrany aplikacji białe (było --c-bg-2) */
  --ajk-glass-bar: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
  :root {
    --ajk-wave-h: 200px;
    --ajk-wave-w: 600px;
    --ajk-wave-band-h: 112px;
  }
}

/* ---------- Skala i kształt z DESIGN.md ---------- */

/* Przyciski i pola: --r-sm 8 px (było --r-md 12). */
.ajk-btn,
.ajk-input,
.ajk-seg,
.ajl-btn {
  border-radius: var(--r-sm);
}

.ajk-seg__i {
  border-radius: 6px; /* wewnątrz .ajk-seg: 8 px minus 3 px odstępu, z zaokrągleniem */
}

/* Karty: --r-md 12 px (było --r-lg 16). Arkusz zostaje --r-lg. */
.ajk-card,
.ajk-next,
.ajk-pass,
.ajk-tile,
.ajk-auth__card,
.ajk-book,
.ajpwa-card {
  border-radius: var(--r-md);
}

/* Pismo 12 px do --t-meta 13 px. */
.ajk-tabs__i,
.ajl-pill,
.ajl-row__meta .ajl-pill,
.ajl-chip small,
.ajl-day-b__w,
.ajl-day-b__m,
.ajb-step__n,
.ajpwa-steps__n {
  font-size: var(--t-meta);
}

/* Logo w pasku 40 px (było 32; DESIGN.md §8). */
.ajk-bar .ajk-logo img {
  height: 40px;
}

/* ---------- Należność i plakietka ---------- */

/* Należność bez czerwieni jako głównego koloru: stan ostrzeżenia. */
.ajk-duebar {
  border-color: color-mix(in srgb, var(--c-warn) 22%, var(--c-warn-bg));
  background: var(--c-warn-bg);
  color: var(--c-warn);
}

.ajk-duebar__n {
  color: var(--c-warn);
  /* konto-r6.css daje licznikowi opacity .85: z kolorem ostrzeżenia 4,09:1, pełne 5,5:1. */
  opacity: 1;
}

/* Plakietka jak licznik koszyka na stronie: #111 z białym tekstem. */
.ajk-badge {
  background: var(--c-fg);
  color: var(--c-inverse);
}

/* ---------- Pasma wody ----------
   Pasma wody i fala sięgają na całą szerokość okna; main przycina je do swojego
   pudełka (clip nie robi kontenera przewijania, sticky i elementy fixed działają). */
.ajk-main {
  position: relative;
  overflow: clip;
}

/* ---------- Ekrany wejścia: logowanie, kod, onboarding ---------- */

html:has(> body.ajk-body--auth) {
  background: var(--ajk-water);
}

.ajk-body--auth {
  --ajk-bg: var(--ajk-water);
}

.ajk-body--auth .ajk-main {
  min-height: 100vh;
  min-height: 100svh;
}

/* Linki pod kartą stoją nad falą, nie na niej. */
.ajk-auth {
  padding-bottom: calc(var(--ajk-wave-h) - var(--s-8));
  box-sizing: border-box;
}

.ajk-body--auth .ajk-main::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--ajk-wave-h);
  background-color: var(--c-brand-aqua);
  -webkit-mask: var(--ajk-wave) repeat-x left bottom / var(--ajk-wave-w) 100%;
  mask: var(--ajk-wave) repeat-x left bottom / var(--ajk-wave-w) 100%;
  pointer-events: none;
}

.ajk-auth__card {
  padding: var(--s-8);
  border-color: var(--ajk-water-line);
  background: var(--c-bg);
  box-shadow: none;
}

/* Duże logo ekranów wejścia 64 px. */
.ajk-auth .ajk-logo--lg img {
  height: 64px;
}

.ajk-auth__title {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--tr-h2);
}

.ajk-auth__more {
  border-top-color: var(--c-line);
}

/* ---------- Pasek górny i zakładki: biel, logo na bieli ---------- */

.ajk-bar {
  border-bottom-color: var(--c-line);
}

.ajk-bar__name {
  color: var(--c-fg-2);
  font-weight: 500;
}

.ajk-bar__link.is-on::after {
  height: 3px;
  border-radius: 999px;
}

.ajk-tabs__i.is-on::before {
  border-radius: 999px;
}

/* ---------- Pasma wody na ekranach aplikacji ----------
   Tło pasma rysuje border-image z odsunięciem na boki i w górę (do paska),
   więc nie zmienia układu i nie robi przewijania w bok. Na dole linia wody.

   Nagłówek nie może być pozycjonowany: wtedy jego tło przykryłoby link „Start”
   (.ajk-back--m) stojący nad nim. */
.ajk-head,
.ajl-head {
  border-image: linear-gradient(to top, var(--ajk-water-line) 1px, var(--ajk-water) 1px) fill 0 / 0 / 400px 100vw 0;
}

/* Pulpit: pasmo z powitaniem i falą na dolnej krawędzi (nic nad nim nie stoi). */
.ajk-hello {
  position: relative;
  margin: 0 0 var(--s-5);
  padding: var(--s-2) 0 calc(var(--ajk-wave-band-h) + var(--s-3));
  border-image: linear-gradient(var(--ajk-water), var(--ajk-water)) fill 0 / 0 / 400px 100vw 0;
}

.ajk-hello::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: var(--ajk-wave-band-h);
  margin-left: -50vw;
  background-color: var(--c-brand-aqua);
  -webkit-mask: var(--ajk-wave) repeat-x center bottom / var(--ajk-wave-w) 100%;
  mask: var(--ajk-wave) repeat-x center bottom / var(--ajk-wave-w) 100%;
  pointer-events: none;
}

.ajk-hello__d {
  color: var(--c-fg-2);
}

/* Komunikat po przekierowaniu (?s=welcome, ?s=saved) stoi w .ajk-col przed pasmem.
   Pasmo maluje wodę border-image 400 px w górę, a .ajk-hello jest pozycjonowane,
   więc bez tego woda zakrywała cały komunikat na pulpicie, a na podstronach jego tło. */
.ajk-col > .ajk-alert {
  position: relative;
  z-index: 1;
}

/* Podstrony: niższe pasmo nagłówka, bez fali. */
.ajk-head,
.ajl-head {
  padding: var(--s-2) 0 var(--s-5);
  margin-bottom: var(--s-5);
}

.ajk-back--m + .ajk-head {
  padding-top: 0;
}

/* ---------- Typografia ---------- */

.ajk-h1,
.ajl-title {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--tr-h2);
}

/* ---------- Karty, przyciski, pola ---------- */

/* Linia bez cienia; :hover z konto*.css (ciemniejsza linia) zostaje. */
.ajk-card,
.ajk-next,
.ajk-pass,
.ajk-tile,
.ajk-book {
  border-color: var(--c-line);
  box-shadow: none;
}

.ajk-btn--secondary {
  border-color: var(--c-line-field);
  background: var(--c-bg);
}

.ajk-btn--secondary:hover {
  border-color: var(--c-line-hover);
  background: var(--c-bg-2);
}

.ajk-input:focus {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

/* ---------- Pierścień odliczania ---------- */

.ajk-ring circle {
  stroke-width: 6;
}

.ajk-ring__track {
  stroke: var(--ajk-water-2);
}

/* ---------- Puste stany: kółko ikony w kolorze wody ----------
   Błąd wczytania (.ajl-empty--err, konto-lekcje.css) zostaje w kolorze ostrzeżenia. */

.ajl-empty__ic {
  background: var(--ajk-water-2);
  color: var(--c-fg-3);
}

.ajk-empty > svg {
  box-sizing: content-box;
  padding: 13px;
  border-radius: 50%;
  background: var(--ajk-water-2);
  color: var(--c-fg-3);
}

/* ---------- Druk: bez wody i fali ---------- */

@media print {
  html:has(> body.ajk-body--auth),
  .ajk-body--auth {
    background: none;
  }

  .ajk-hello,
  .ajk-head,
  .ajl-head {
    border-image: none;
  }

  .ajk-hello::after,
  .ajk-body--auth .ajk-main::after {
    display: none;
  }
}

/* ---------- Wysoki kontrast (Windows): bez wody i fali ----------
   System podmienia background-color, ale gradientu w border-image i koloru
   stroke w SVG nie: pasma zostawały jasnymi blokami na czarnej stronie. */

@media (forced-colors: active) {
  .ajk-hello,
  .ajk-head,
  .ajl-head {
    border-image: none;
  }

  .ajk-hello::after,
  .ajk-body--auth .ajk-main::after {
    display: none;
  }

  .ajk-ring__track {
    stroke: GrayText;
  }
}