/* MOTYW - jedyne zrodlo prawdy o kolorze, elewacji i promieniach.
   Laduje sie OSTATNI. Kolorowych tokenow nie deklaruje juz zaden inny
   arkusz: 79 kopii (w tym `--page-depth` o DWOCH roznych wartosciach, przez
   co elewacja zalezala od kolejnosci ladowania) zostalo skasowanych. Kopia
   nigdy nie wygrywala, ale zmylala - edycja `--blue` w margines.css nie
   robila nic i nie bylo widac dlaczego.

   TOZSAMOSC ZOSTAJE: papier, tusz, krój szeryfowy, metafora zeszytu. Znika
   chrom lat 90., ktory ja psul - zmierzone w starym arkuszu:
     8 twardych cieni offsetowych `Npx Npx 0` i ZERO rozmytych (to dokladnie
       idiom wypuklego przycisku Win95),
     61 kresek `1px solid var(--ink)` - czarne linie zamiast delikatnych,
     8 regul z promieniem 2-4 px - kanciaste kontrolki,
     51 regul `text-transform: uppercase`, w tym 9 rozmiarow <= .66rem.

   Nazwy sa SEMANTYCZNE (tlo, powierzchnia, linia), nie dosłowne (bez
   --paper-cream-2): dzieki temu ten sam arkusz obsluguje oba motywy, a
   zmiana palety nie wymaga tlumaczenia nazw na nowy kolor. */

:root {
  color-scheme: light;

  /* --- POWIERZCHNIE --- */
  --tlo: #f4f1ea;             /* strona */
  --powierzchnia: #fdfbf6;    /* karta, panel - papier */
  --powierzchnia-2: #f0ece2;  /* zaglebienie, pasek narzedzi */
  --powierzchnia-3: #e6e0d3;  /* krawedz kartki, separator blokow */

  /* --- PISMO --- */
  --tekst: #1c1a19;
  --tekst-cichy: #57534d;     /* >= 7:1 na --powierzchnia */
  --tekst-slaby: #6d6862;     /* >= 4.6:1 - PROG dla drobnego druku */

  /* --- LINIE --- */
  /* Nigdy czysty tusz: kreska ma dzielic, nie rysowac ramke. */
  --linia: rgba(28, 26, 25, .10);
  --linia-mocna: rgba(28, 26, 25, .20);
  --linia-nacisk: rgba(28, 26, 25, .38);

  /* --- AKCENT --- */
  /* Fiolet z dotychczasowej rodziny (--notebook-violet), pogleboiony do
     kontrastu AA na papierze; lime zostaje jako iskra, nie jako plaszczyzna. */
  --akcent: #514388;
  --akcent-jasny: #6c5cab;
  --akcent-tlo: rgba(81, 67, 136, .10);
  --akcent-pismo: #fdfbf6;
  --iskra: #c3d63a;

  /* --- STANY --- */
  --dobrze: #256b4a;
  --dobrze-tlo: rgba(37, 107, 74, .12);
  --czesciowo: #8a5a08;
  --czesciowo-tlo: rgba(138, 90, 8, .13);
  --zle: #a83a2c;
  --zle-tlo: rgba(168, 58, 44, .12);

  /* --- ELEWACJA --- */
  /* Dwie warstwy: ciasny cien styku + szeroki cien odleglosci. Jedna warstwa
     wyglada jak naklejka, twardy offset - jak przycisk z Win95. */
  --cien-1: 0 1px 2px rgba(28, 26, 25, .06), 0 1px 3px rgba(28, 26, 25, .05);
  --cien-2: 0 2px 4px rgba(28, 26, 25, .05), 0 10px 26px rgba(28, 26, 25, .09);
  --cien-3: 0 4px 8px rgba(28, 26, 25, .06), 0 22px 54px rgba(28, 26, 25, .13);

  /* --- PROMIENIE --- */
  --r-1: 9px;      /* kontrolki */
  --r-2: 14px;     /* karty, panele */
  --r-3: 20px;     /* duze plyty */
  --r-pigulka: 999px;

  /* --- SKALA PISMA --- */
  /* Stary arkusz mial 19 roznych rozmiarow w monospace, od .49rem (7,8 px).
     Wersaliki w tak drobnej skali to wlasnie ten "urzedowy" charakter -
     i granica czytelnosci. Krój monospace ZOSTAJE tam, gdzie cos znaczy
     (kody taksonomii, liczby), ale skala schodzi do trzech stopni. */
  --pismo-mikro: .7rem;    /* etykieta pola, odznaka - 11.2 px */
  --pismo-drobne: .78rem;  /* metadane, kontrolki */
  --pismo-tekst: .95rem;   /* tresc */

  /* --- POWLOKI --- */
  /* Polprzezroczyste WARSTWY nad powierzchnia, nie kolory. Rozroznienie nie
     jest kosmetyczne: podstawienie pod nie koloru krycia zamienia ledwie
     widoczny refleks w plaska plyte - tak wlasnie rozjechalo sie ~20 regul,
     gdy przejscie na tokeny potraktowalo `rgba(255,255,255,.02)` jak zwykly
     kolor powierzchni. */
  --polysk: rgba(255, 255, 255, .55);   /* refleks gornej krawedzi kontrolki */
  --przemycie: rgba(28, 26, 25, .045);  /* delikatny wash na powierzchni */

  /* --- RUCH --- */
  --ruch: 140ms cubic-bezier(.2, .8, .2, 1);
}

/* MOTYW CIEMNY. Nie czern - cieply wegiel. Czyste #000 pod jasnym pismem
   daje halo na matrycach OLED i meczy przy dlugim czytaniu, a produkt jest
   do siedzenia nad zadaniami, nie do rzutu oka. */
:root[data-motyw="ciemny"] {
  color-scheme: dark;

  --tlo: #15141a;
  --powierzchnia: #1e1d25;
  --powierzchnia-2: #26252e;
  --powierzchnia-3: #322f3b;

  --tekst: #ece9e4;
  --tekst-cichy: #b8b3ae;
  --tekst-slaby: #9a958f;

  --linia: rgba(236, 233, 228, .10);
  --linia-mocna: rgba(236, 233, 228, .18);
  --linia-nacisk: rgba(236, 233, 228, .34);

  --akcent: #a294e0;
  --akcent-jasny: #bcb0ee;
  --akcent-tlo: rgba(162, 148, 224, .16);
  --akcent-pismo: #191723;
  --iskra: #d2e541;

  --dobrze: #6cc496;
  --dobrze-tlo: rgba(108, 196, 150, .15);
  --czesciowo: #e0ad5a;
  --czesciowo-tlo: rgba(224, 173, 90, .15);
  --zle: #ef8a7c;
  --zle-tlo: rgba(239, 138, 124, .15);

  /* W ciemnosci cien nie buduje glebi - robi to JASNIEJSZA powierzchnia.
     Cien zostaje po to, zeby oddzielic plyte od tla, plus wlos swiatla u gory. */
  --cien-1: 0 1px 2px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
  --cien-2: 0 2px 6px rgba(0, 0, 0, .38), 0 12px 30px rgba(0, 0, 0, .32),
            inset 0 1px 0 rgba(255, 255, 255, .05);
  --cien-3: 0 6px 14px rgba(0, 0, 0, .42), 0 26px 64px rgba(0, 0, 0, .40),
            inset 0 1px 0 rgba(255, 255, 255, .06);

  --polysk: rgba(255, 255, 255, .07);
  --przemycie: rgba(255, 255, 255, .05);
}

/* Ustawienie systemowe dziala, dopoki uzytkownik sam nie wybierze motywu -
   wtedy na <html> siada `data-motyw` i wygrywa (wyzsza szczegolowosc).

   Ta paleta jest BLIZNIACZA z blokiem wyzej i musi taka zostac. CSS nie
   pozwala trzymac jednej listy deklaracji dla selektora spoza media query
   i selektora w srodku, wiec kopia jest nieunikniona - ale rozjazd juz nie:
   pilnuje go test_motyw_bliznaicze_palety. (Bez niego `--iskra` zdazyla
   wypasc z tego bloku i motyw systemowy mial inna zolc niz wybrany recznie.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    color-scheme: dark;

    --tlo: #15141a;
    --powierzchnia: #1e1d25;
    --powierzchnia-2: #26252e;
    --powierzchnia-3: #322f3b;

    --tekst: #ece9e4;
    --tekst-cichy: #b8b3ae;
    --tekst-slaby: #9a958f;

    --linia: rgba(236, 233, 228, .10);
    --linia-mocna: rgba(236, 233, 228, .18);
    --linia-nacisk: rgba(236, 233, 228, .34);

    --akcent: #a294e0;
    --akcent-jasny: #bcb0ee;
    --akcent-tlo: rgba(162, 148, 224, .16);
    --akcent-pismo: #191723;
    --iskra: #d2e541;

    --dobrze: #6cc496;
    --dobrze-tlo: rgba(108, 196, 150, .15);
    --czesciowo: #e0ad5a;
    --czesciowo-tlo: rgba(224, 173, 90, .15);
    --zle: #ef8a7c;
    --zle-tlo: rgba(239, 138, 124, .15);

    --cien-1: 0 1px 2px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
    --cien-2: 0 2px 6px rgba(0, 0, 0, .38), 0 12px 30px rgba(0, 0, 0, .32),
              inset 0 1px 0 rgba(255, 255, 255, .05);
    --cien-3: 0 6px 14px rgba(0, 0, 0, .42), 0 26px 64px rgba(0, 0, 0, .40),
              inset 0 1px 0 rgba(255, 255, 255, .06);

    --polysk: rgba(255, 255, 255, .07);
    --przemycie: rgba(255, 255, 255, .05);
  }
}

/* ------------------------------------------------------------------ */
/* MOST DO STARYCH NAZW.                                              */
/* Trzy arkusze i ~7000 linii regul mowia jeszcze --paper/--ink/       */
/* --notebook-*. Zamiast przepisywac je wszystkie naraz (i stracic     */
/* kontrole nad tym, co sie zmienilo), przepinamy stare nazwy na nowe  */
/* tokeny. Dzieki temu OBA motywy dzialaja od razu w calej aplikacji,  */
/* a kolejne arkusze mozna migrowac pojedynczo.                        */
/* ------------------------------------------------------------------ */
:root,
:root[data-motyw="ciemny"],
:root[data-motyw="jasny"] {
  --paper: var(--powierzchnia);
  --paper-soft: var(--powierzchnia-2);
  --ground: var(--tlo);
  --ground-dark: var(--powierzchnia-3);
  --ink: var(--tekst);
  --muted: var(--tekst-slaby);
  --rule: var(--linia);
  --rule-strong: var(--linia-mocna);
  --blue: var(--akcent);
  --blue-soft: var(--akcent-tlo);
  --red: var(--zle);
  --red-soft: var(--zle-tlo);
  --yellow: var(--iskra);
  --good: var(--dobrze);
  --good-soft: var(--dobrze-tlo);
  --amber: var(--czesciowo);
  --amber-soft: var(--czesciowo-tlo);

  --notebook-night: var(--tlo);
  --notebook-night-raised: var(--powierzchnia-2);
  --notebook-cover: var(--powierzchnia-3);
  --notebook-cover-edge: var(--linia-mocna);
  --notebook-paper: var(--powierzchnia);
  --notebook-paper-soft: var(--powierzchnia-2);
  --notebook-paper-edge: var(--powierzchnia-3);
  --notebook-ink: var(--tekst);
  --notebook-muted: var(--tekst-slaby);
  --notebook-rule: var(--linia);
  --notebook-rule-strong: var(--linia-mocna);
  --notebook-lime: var(--iskra);
  --notebook-lime-soft: var(--akcent-tlo);
  --notebook-violet: var(--akcent-jasny);
  --notebook-violet-deep: var(--akcent);
  --notebook-violet-soft: var(--akcent-tlo);
  --notebook-cool: var(--tekst-cichy);
  --notebook-cool-soft: var(--powierzchnia-2);
  --notebook-coral: var(--zle);
  --notebook-coral-soft: var(--zle-tlo);

  /* Elewacja kartki - jedno miejsce zamiast dwoch sprzecznych definicji. */
  --page-depth: var(--cien-3);
  --page-depth-small: var(--cien-2);
  --radius-control: var(--r-1);
  --motion-fast: var(--ruch);
}

/* Powloka strony przestaje byc ciemna plyta pod jasna kartka: w motywie
   jasnym tlo jest jasne, w ciemnym - ciemne. To ta jedna zmiana zdejmuje
   wrazenie "okna programu na pulpicie" na rzecz spokojnej powierzchni. */
body {
  background: var(--tlo);
  color: var(--tekst);
}

/* Zadanie na Planszy (Tablica, brudnopis) to SKAN kartki - biale tlo,
   czarny tusz. W motywie ciemnym taki prostokat swieci jak ekran latarki
   posrod wegla reszty interfejsu. Odwrocenie + obrot barwy przywraca
   rzadkie kolorowe elementy (odwrocenie samo w sobie zamienia np. czerwony
   na cyjan), a niepelne 93% i przygaszony kontrast dają ciemny grafit
   zamiast czystej czerni - ta sama zasada co reszta motywu ciemnego wyzej
   (SMART invert, nie #000 pod jasnym pismem). */
:root[data-motyw="ciemny"] .plansza-zadanie,
:root[data-motyw="ciemny"] .tablica-zadanie,
:root[data-motyw="ciemny"] .tablica-raport-wpis img {
  filter: invert(.93) hue-rotate(180deg) brightness(.92) contrast(.88);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .plansza-zadanie,
  :root:not([data-motyw="jasny"]) .tablica-zadanie,
  :root:not([data-motyw="jasny"]) .tablica-raport-wpis img {
    filter: invert(.93) hue-rotate(180deg) brightness(.92) contrast(.88);
  }
}

/* --- PRZELACZNIK MOTYWU --- */
.motyw-przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-pigulka);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--ruch), background var(--ruch);
}

.motyw-przelacznik:hover { border-color: var(--linia-nacisk); }

/* Znak niesie stan bez ikon z zewnatrz: pelne kolo = jasny, pusty pierscien
   = ciemny, polowa = zgodnie z systemem. */
.motyw-znak {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.motyw-przelacznik[data-motyw="jasny"] .motyw-znak { background: currentColor; }
.motyw-przelacznik[data-motyw="ciemny"] .motyw-znak { background: transparent; }

@media (max-width: 720px) {
  .motyw-przelacznik .motyw-etykieta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .motyw-przelacznik { padding: 7px; }
}

/* --- START: POWOD REKOMENDACJI I SYGNALY --- */
/* Panel startowy przestaje byc tablica wynikow. "46% ogolem" nie mowilo
   uczniowi, co ma zrobic; ponizsze sygnaly mowia i kazdy prowadzi dalej. */

.start-powod {
  max-width: 42ch;
  margin: 0 0 22px;
  padding-left: 11px;
  border-left: 2px solid var(--akcent);
  color: var(--tekst-cichy);
  font-size: var(--pismo-drobne);
  line-height: 1.45;
}

.start-sygnaly {
  display: grid;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
}

.start-sygnal a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--linia);
  border-radius: var(--r-1);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ruch), background var(--ruch);
}

.start-sygnal a:hover,
.start-sygnal a:focus-visible {
  border-color: var(--linia-nacisk);
  background: var(--powierzchnia);
}

.start-sygnal strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}

.start-sygnal span {
  display: block;
  font-size: var(--pismo-drobne);
  line-height: 1.3;
}

.start-sygnal small {
  display: block;
  margin-top: 3px;
  color: var(--tekst-slaby);
  font-size: var(--pismo-mikro);
}

/* Slepa plamka to jedyny sygnal, ktory ma ZATRZYMAC wzrok - stad pelna
   krawedz w kolorze ostrzezenia, a nie sam kolor liczby (czytelnie takze
   przy daltonizmie). */
.start-sygnal.is-uwaga a {
  border-color: var(--czesciowo);
  background: var(--czesciowo-tlo);
}

.start-sygnal.is-uwaga strong { color: var(--czesciowo); }
.start-sygnal.is-dobrze strong { color: var(--dobrze); }
.start-sygnal.is-cichy strong {
  font-size: 1.1rem;
  color: var(--tekst-cichy);
}

/* "Ogolem" zostaje jako KONTEKST, nie naglowek. To srednia samoocen - mowi
   "jak mi idzie", ale nie mowi, co zrobic; sygnaly ponizej mowia. Dominowala
   nad nimi rozmiarem (clamp do 5rem), wiec pierwsze, co uczen widzial w
   rejestrze, bylo tez najmniej uzyteczne. */
body.student-dashboard-page .register-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 0 14px;
}

body.student-dashboard-page .register-score > span:first-child {
  font-size: 1.85rem;
  letter-spacing: -.02em;
}

body.student-dashboard-page .register-score p {
  margin: 0;
  margin-right: auto;
}

body.student-dashboard-page .register-score .trace-meter,
body.student-dashboard-page .register-score .trace-meter-empty {
  width: 100%;
  margin-top: 6px;
}