/* ============================================================
   MOTYW CIEMNY DLA STRONY DEMA (17.08.2026)

   Zasada tej zmiany: **nie dotykamy ani jednego znacznika w index.html
   i ani jednej linii w ui-logika.js.** Strona ma własne zmienne CSS —
   ten arkusz je przemapowuje, a wszystko, co ich używa, idzie za nimi.
   Ręcznie nadpisujemy tylko te miejsca, gdzie w oryginale wpisano kolor
   na sztywno (białe tła paneli i pola tekstowego).

   Dlaczego tak, a nie przepisanie strony: `index.html` jest na liście
   zamrożonej do odczytu bramki B (18.08 wieczorem). Zepsuta strona nie
   objawiłaby się jako awaria, tylko jako „0 generacji" — czyli jako
   brak zainteresowania produktem (`plan.md` 17.08).

   Wycofanie: skasować linię <link> z index.html.
   Kopia sprzed zmiany: ~/app/index.html.bak-2026-08-17
   ============================================================ */

@import url('styl.css');

:root {
  /* Przemapowanie palety strony na paletę marki.
     Nazwy zmiennych zostają oryginalne — dzięki temu każda reguła
     w <style> strony działa dalej, tylko w innych kolorach. */
  --tlo: #0a0e1a;          /* było #FBF0DE (kremowe) */
  --grafit: #e8e6e0;       /* było #0E1736 — teraz kolor TEKSTU na ciemnym tle */
  --akcent: #d4a574;       /* było #F6A64D (pomarańcz) → złoto marki */
  --czerwien: #e07a5f;     /* było #A02020 — ceglane, czytelne na ciemnym */
  --zielen: #5fb87f;       /* było #0A6B33 — jaśniejsza, czytelna na ciemnym */
  --ramka: rgba(212, 165, 116, 0.22);
}

body {
  font-family: var(--sans);
  padding: clamp(2rem, 6vh, 4rem) 1rem 4rem;
}

h1 { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.1rem); }
.podtytul { color: var(--text-secondary); opacity: 1; }

/* --- Miejsca, gdzie oryginał ma kolor na sztywno ------------- */

.ramka-info,
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}
.ramka-info { border-left: 3px solid var(--akcent); }
.panel h2 { font-family: var(--serif); }

textarea {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea::placeholder { color: var(--text-tertiary); }

pre#szkic {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

/* --- Przyciski ---------------------------------------------- */
/* Strona używa gołego <button>, nie klasy .btn — dlatego celujemy
   w znacznik, zamiast dokładać klasy do znaczników (czego nie robimy). */

button {
  background: var(--accent);
  color: var(--bg-base);
  border-radius: 999px;
  padding: .8rem 1.75rem;
  font-family: var(--sans);
  transition: all var(--t-med);
}
button:hover:not(:disabled) { background: var(--accent-bright); }
button:disabled { opacity: .35; }

button.wtorny {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
button.wtorny:hover { background: var(--bg-card-hover); border-color: var(--accent); }

/* Fragment z trafieniem PII jest <button>em — musi zostać wtrąceniem
   w tekście, a nie wyglądać jak przycisk akcji. Bez tego reguła wyżej
   zrobiłaby z każdego wykrytego imienia złotą pigułkę. */
.fragment {
  background: rgba(224, 122, 95, 0.14);
  color: var(--text-primary);
  border-radius: 3px;
  padding: .1rem .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fragment:hover { background: rgba(224, 122, 95, 0.26); }

.kreciolek { border-color: var(--border-subtle); border-top-color: var(--accent); }

.stopka, .metryki { color: var(--text-tertiary); opacity: 1; }
.pytanie { border-top-color: var(--border-faint); }
.zgoda input { accent-color: var(--accent); }

/* --- Trzy listy strukturalne (23.08.2026) --------------------
   Pola typ_orzeczenia / etap_klasa / plec doszły do formularza 22.08
   i NIE MIAŁY ŻADNEJ reguły CSS — ani tutaj, ani w <style> strony.
   Renderowały się w domyślnym stylu przeglądarki, wizualnie obce wobec
   pola opisu i przycisków.

   Reguła jest tutaj, a nie w index.html, z tego samego powodu co cała
   reszta tego arkusza: index.html jest zamrożony do 15.09, a zepsuta
   strona nie objawiłaby się jako awaria, tylko jako „0 generacji".
   Wartości przepisane 1:1 z reguły `textarea` wyżej — ten sam token
   tła, obramowania, promienia i to samo zachowanie przy focusie.      */

select {
  width: 100%;
  padding: .8rem;
  padding-right: 2.75rem;      /* miejsce na strzałkę */
  margin-bottom: 1.25rem;      /* odstęp między grupami label+select */
  font: inherit;
  cursor: pointer;
  color-scheme: dark;          /* rozwijana lista też ciemna */
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8a39a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: .8rem auto;
}
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select:invalid { color: var(--text-tertiary); }   /* „— wybierz —" przygaszone */
select option { background: var(--bg-elevated); color: var(--text-primary); }