/* Meldly — wspólny arkusz stylów strony wizytówkowej i dokumentów.
   Paleta z marka/README.md. Jeden plik dla wszystkich stron: zmiana barwy
   w jednym miejscu, a nie w trzech. */

:root {
  --tlo:        #F5F0E6;
  --tlo2:       #EDE6D8;
  --powierzch:  #FFFDF8;
  --tekst:      #1C1B19;
  --tekst2:     #5C574E;
  --tekst3:     #8A8377;
  --kreska:     #E0D7C5;
  --zloto:      #C9971E;
  --niebieski:  #2E5FA3;
  --lico:       #FFFDF8;
  /* Barwy liter na płytkach. Świadomie NIE zmieniają się w trybie ciemnym —
     lico płytki pozostaje jasne, więc litery muszą zostać ciemne. */
  --plytka-czarna:      #2B2B2B;
  --plytka-czerwona:    #C4342B;
  --plytka-niebieska:   #2E5FA3;
  --plytka-pomarancz:   #D9822B;
  --cien:       0 1px 2px rgba(28,27,25,.10), 0 6px 18px rgba(28,27,25,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo:        #26241F;
    --tlo2:       #33302A;
    --powierzch:  #2B2924;
    --tekst:      #F2EDE2;
    --tekst2:     #B2AB9C;
    --tekst3:     #8A8377;
    --kreska:     #423D34;
    --zloto:      #E0B23C;
    --niebieski:  #8CB4E6;
    --lico:       #F5F0E6;
    --cien:       0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 9vw, 5.5rem) 1.25rem 3rem;
}

/* ── wordmark z płytek ─────────────────────────────────────────── */

.znak { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 2rem; padding: 0; }

.plytka {
  width: 2.9rem;
  height: 3.7rem;
  border-radius: .45rem;
  background: var(--lico);
  box-shadow: var(--cien);
  display: grid;
  place-items: center;
  font: 700 1.5rem/1 Georgia, "Times New Roman", serif;
  border: 1px solid rgba(28,27,25,.08);
  user-select: none;
}
.plytka:nth-child(1) { color: var(--plytka-czarna); }
.plytka:nth-child(2) { color: var(--plytka-czerwona); }
.plytka:nth-child(3) { color: var(--plytka-niebieska); }
.plytka:nth-child(4) { color: var(--plytka-pomarancz); }
.plytka:nth-child(5) { color: var(--plytka-czarna); }
.plytka:nth-child(6) { color: var(--plytka-niebieska); }

/* Mniejszy wariant na stronach dokumentów — tam znak jest nawigacją,
   a nie bohaterem strony. */
.znak--maly .plytka { width: 1.9rem; height: 2.45rem; font-size: 1rem; border-radius: .3rem; }
.znak--maly { gap: .28rem; margin-bottom: 1.5rem; }
a.znak, a.znak:hover { text-decoration: none; }

@media (max-width: 24rem) {
  .plytka { width: 2.4rem; height: 3.1rem; font-size: 1.25rem; }
  .znak--maly .plytka { width: 1.7rem; height: 2.2rem; font-size: .9rem; }
}

/* ── treść ─────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.6rem, 5.5vw, 2.3rem);
  line-height: 1.25;
  margin: 0 0 .75rem;
  letter-spacing: -.015em;
}

.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  color: var(--tekst2);
  margin: 0 0 2.25rem;
  max-width: 34rem;
}

.stan {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--powierzch);
  border: 1px solid var(--kreska);
  border-radius: 999px;
  padding: .4rem .95rem .4rem .75rem;
  font-size: .9rem;
  color: var(--tekst2);
  margin-bottom: 2.5rem;
}
.kropka { width: .55rem; height: .55rem; border-radius: 50%; background: var(--zloto); flex: none; }

.karta {
  background: var(--powierzch);
  border: 1px solid var(--kreska);
  border-radius: .85rem;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.5rem;
}
.karta h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tekst3);
  margin: 0 0 .85rem;
  font-weight: 700;
}
.karta p { margin: 0 0 .6rem; }
.karta p:last-child { margin-bottom: 0; }

a { color: var(--niebieski); }
a:hover { text-decoration: none; }

.dokumenty { list-style: none; margin: 0; padding: 0; }
.dokumenty li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--kreska);
}
.dokumenty li:last-child { border-bottom: 0; padding-bottom: 0; }
.dokumenty li:first-child { padding-top: 0; }
.wkrotce { font-size: .82rem; color: var(--tekst3); white-space: nowrap; }

/* ── wersja angielska ──────────────────────────────────────────── */

.en { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--kreska); color: var(--tekst2); }
.en h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tekst3);
  margin: 0 0 .6rem;
}
.en p { margin: 0 0 .6rem; }

/* ── dokumenty prawne ──────────────────────────────────────────── */

.dok h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 .75rem;
  padding-top: .35rem;
  border-top: 1px solid var(--kreska);
  line-height: 1.35;
}
.dok h2:first-of-type { margin-top: 2rem; }
.dok h3 { font-size: 1rem; margin: 1.6rem 0 .5rem; }
.dok p { margin: 0 0 .9rem; }
.dok ul, .dok ol { margin: 0 0 .9rem; padding-left: 1.3rem; }
.dok li { margin-bottom: .4rem; }

.meta {
  font-size: .85rem;
  color: var(--tekst3);
  margin: 0 0 2rem;
}

/* Wyróżnienie dla rzeczy, które użytkownik ma zapamiętać —
   nie ozdoba, tylko sygnał „to jest wiążące". */
.uwaga {
  background: var(--powierzch);
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--zloto);
  border-radius: .5rem;
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
}
.uwaga p:last-child { margin-bottom: 0; }

/* Miejsca do uzupełnienia przed publikacją — mają kłuć w oczy,
   żeby nie dało się ich przeoczyć. */
.dopisac {
  background: #FFF3CD;
  color: #5C4400;
  border-radius: .25rem;
  padding: 0 .3rem;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .dopisac { background: #6B5200; color: #FFF3CD; }
}

.tabela-otoczka { overflow-x: auto; margin: 0 0 1.4rem; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
  min-width: 30rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--kreska);
}
th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst3);
  border-bottom: 2px solid var(--kreska);
}

.spis { list-style: none; padding: 0; margin: 0 0 1rem; columns: 2; column-gap: 2rem; }
.spis li { margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 34rem) { .spis { columns: 1; } }

/* ── stopka ────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--kreska); background: var(--tlo2); }
.stopka-tresc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
  font-size: .85rem;
  color: var(--tekst3);
}
.stopka-tresc p { margin: 0 0 .5rem; }
.stopka-tresc p:last-child { margin-bottom: 0; }
.stopka-linki { margin-bottom: .9rem !important; }
.stopka-linki a { margin-right: 1rem; }

/* ── przełącznik języków ────────────────────────────────────────── */

/* Sprite z flagami nie ma się pokazywać — jest tylko magazynem kształtów.
   `display:none` na <svg> wyłączyłoby też <use>, dlatego chowamy inaczej. */
.flagi-zrodlo { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Znak po lewej, języki po prawej — w JEDNYM WIERSZU, a nie na zakładkę.
   Pierwsza wersja pozycjonowała przełącznik bezwzględnie i na telefonie
   nachodził on na znak (sprawdzone: przy 360 px znak zajmował 20..340,
   przełącznik 258..340). Wiersz nie ma tego problemu, a jest przewidywalny,
   bo przycisk ma tę samą szerokość w każdym języku — flaga i dwie litery. */
.gora {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  margin: 0 0 2rem;
}
.gora .znak { margin-bottom: 0; }

.jezyki {
  position: relative;
  flex: none;
  z-index: 10;
  font-size: .85rem;
}

/* Na wąskim ekranie duży znak i przełącznik nie zmieszczą się obok siebie.
   Zamiast ściskać jedno albo drugie — przełącznik nad znakiem, przy prawej
   krawędzi. Nadal „u góry po prawej", tylko we własnym wierszu. */
@media (max-width: 30rem) {
  .gora { flex-direction: column-reverse; align-items: flex-end; }
  .gora .znak { align-self: flex-start; }
}

.jezyki > summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem;
  border: 1px solid var(--kreska);
  border-radius: .5rem;
  background: var(--powierzch);
  color: var(--tekst2);
  cursor: pointer;
  user-select: none;
  list-style: none;           /* Firefox */
}
.jezyki > summary::-webkit-details-marker { display: none; }   /* Safari */
.jezyki > summary:hover { border-color: var(--niebieski); }
.jezyki > summary:focus-visible { outline: 2px solid var(--niebieski); outline-offset: 1px; }

.flaga {
  width: 1.15rem;
  height: .86rem;
  border-radius: .1rem;
  flex: none;
  /* Biały pas polskiej flagi znika na jasnym tle — obrys jest konieczny,
     a nie ozdobny. */
  box-shadow: 0 0 0 1px rgba(28,27,25,.18);
}

.jezyk-kod { font-weight: 700; letter-spacing: .03em; }

.strzalka { width: .6rem; height: .4rem; flex: none; transition: transform .15s; }
.jezyki[open] > summary .strzalka { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .strzalka { transition: none; } }

.jezyki-lista {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 11rem;
  padding: .3rem;
  background: var(--powierzch);
  border: 1px solid var(--kreska);
  border-radius: .6rem;
  box-shadow: var(--cien);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.jezyk {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .55rem;
  border-radius: .4rem;
  text-decoration: none;
  color: var(--tekst);
  white-space: nowrap;
}
.jezyk:hover { background: var(--tlo2); }
.jezyk:focus-visible { outline: 2px solid var(--niebieski); outline-offset: -2px; }
.jezyk-nazwa { flex: 1; }
.jezyk .jezyk-kod { color: var(--tekst3); font-size: .78rem; }

/* Bieżący język zostaje na liście, ale jako <span>, nie odnośnik — nie ma
   dokąd prowadzić. Musi być widoczny, żeby było wiadomo, co się właśnie
   czyta, i musi wyglądać na nieklikalny, żeby nikt nie próbował. */
.jezyk--teraz { background: var(--tlo2); cursor: default; font-weight: 700; }

/* ── formularz usuwania konta ───────────────────────────────────── */

.krok { display: none; }
.krok[data-aktywny] { display: block; }

.pole { margin: 0 0 1.1rem; }
.pole label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tekst2);
  margin-bottom: .35rem;
}
.pole input {
  width: 100%;
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--kreska);
  border-radius: .5rem;
  background: var(--powierzch);
  color: var(--tekst);
}
.pole input:focus-visible { outline: 2px solid var(--niebieski); outline-offset: 1px; }
.pole input[inputmode="numeric"] {
  font: 700 1.4rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .4em;
  text-align: center;
}
.pole .podpowiedz { font-size: .82rem; color: var(--tekst3); margin: .35rem 0 0; }

button {
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--niebieski);
  color: #FFFDF8;
}
@media (prefers-color-scheme: dark) { button { color: #1C1B19; } }
button:hover { filter: brightness(1.08); }
button[disabled] { opacity: .55; cursor: progress; }
button.wtorny { background: transparent; color: var(--niebieski); border-color: var(--kreska); }

.komunikat {
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin: 0 0 1.2rem;
  font-size: .92rem;
  border: 1px solid var(--kreska);
  background: var(--powierzch);
}
.komunikat[data-rodzaj="blad"]  { border-left: 3px solid var(--plytka-czerwona); }
.komunikat[data-rodzaj="ok"]    { border-left: 3px solid var(--zloto); }
.komunikat:empty { display: none; }

.zakladki { display: flex; gap: .5rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.zakladki button { background: transparent; color: var(--tekst2); border-color: var(--kreska); }
.zakladki button[aria-selected="true"] { background: var(--niebieski); color: #FFFDF8; border-color: transparent; }
@media (prefers-color-scheme: dark) { .zakladki button[aria-selected="true"] { color: #1C1B19; } }