/* ═══════════════════════════════════════════════════════════════════════════
   Zdrowie — warstwa wizualna.

   Kierunek: emalia i papier. Chłodna, papierowa biel (nie kremowa), głęboka
   emaliowana zieleń jak na starym garnku, śliwka dla drugiego konta. Liczba dnia
   złożona krojem szeryfowym z systemu (na iPhonie: Iowan Old Style) — bo to
   jedyna liczba, po którą się tu sięga, i ma wyglądać jak wpis w zeszycie,
   nie jak wskaźnik z panelu.

   Ton wizualny wynika z wymogu produktowego: nigdy nie karcimy. Stąd brak
   czerwieni jako „przekroczenia" — nadwyżka jest opisana słowem, nie alarmem.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --papier:      #EAEFEB;
  --karta:       #FBFCFA;
  --atrament:    #16211F;
  --atrament-2:  #55635E;
  --emalia:      #1F5F57;
  --emalia-2:    #2F7D6E;
  --sliwka:      #6B3F5B;
  --bursztyn:    #9A6A22;
  --linia:       #D2DCD6;
  --cien:        0 1px 2px rgba(22, 33, 31, .06), 0 8px 24px -16px rgba(22, 33, 31, .35);

  --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --tekst:   -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --dane:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r: 14px;
  --gap: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:     #0E1615;
    --karta:      #16211F;
    --atrament:   #E6EEE9;
    --atrament-2: #93A39D;
    --emalia:     #6FBFAE;
    --emalia-2:   #8ED3C2;
    --sliwka:     #C79ABA;
    --bursztyn:   #D8AC6A;
    --linia:      #253330;
    --cien:       0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Brama (logowanie) ───────────────────────────────────────────────────── */
.brama {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.brama__karta {
  width: min(100%, 22rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 28px 22px;
  box-shadow: var(--cien);
}
.znak {
  width: 44px; height: 44px; border-radius: 50%;
  border: 5px solid var(--emalia);
  clip-path: polygon(0 0, 72% 0, 72% 28%, 100% 28%, 100% 100%, 0 100%);
  margin-bottom: 18px;
}
.brama__tytul {
  font-family: var(--display);
  font-size: 2rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0;
}
.brama__podtytul { margin: 4px 0 22px; color: var(--atrament-2); font-size: .95rem; }

.pole { display: block; margin-bottom: 14px; }
.pole--waskie { flex: 1; margin-bottom: 0; }
.pole__etykieta {
  display: block;
  font-family: var(--dane);
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--atrament-2);
  margin-bottom: 5px;
}
.pole input, .pole select {
  width: 100%;
  padding: 11px 12px;
  background: var(--papier);
  border: 1px solid var(--linia);
  border-radius: 10px;
}
.pole input:focus-visible, .pole select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--emalia-2);
  outline-offset: 2px;
}

.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.przycisk--glowny { width: 100%; background: var(--emalia); color: #FBFCFA; font-weight: 600; }
.przycisk--cichy  { border-color: var(--linia); background: var(--papier); color: var(--atrament); }
.przycisk:active { transform: translateY(1px); }
.komunikat { color: var(--sliwka); font-size: .9rem; margin: 12px 0 0; }

/* ── Szkielet aplikacji ──────────────────────────────────────────────────── */
/* minmax(0,1fr) w kolumnie jest konieczne: bez tego ścieżka `auto` bierze rozmiar
   min-content najszerszego dziecka (długi dymek czatu) i cała aplikacja robi się
   szersza niż ekran telefonu. */
#aplikacja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100dvh;
  max-width: 32rem;
  margin: 0 auto;
  background: var(--papier);
}
@media (min-width: 34rem) {
  #aplikacja { border-inline: 1px solid var(--linia); }
}
.widok, .rozmowa, .komponer { min-width: 0; }

.wstega {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
  background: var(--emalia);
  color: #EAF2EE;
}
.wstega__lewa { display: flex; flex-direction: column; }
.wstega__imie { font-weight: 600; letter-spacing: -.01em; }
.wstega__data { font-family: var(--dane); font-size: .7rem; letter-spacing: .08em;
                text-transform: uppercase; opacity: .78; }
.wstega__prawa { text-align: right; display: flex; align-items: baseline; gap: 6px; }
.wstega__liczba { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.wstega__jednostka { font-size: .72rem; opacity: .78; }

.widok {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--gap) var(--gap) 6px;
  display: flex; flex-direction: column; gap: var(--gap);
}

/* ── Czat ────────────────────────────────────────────────────────────────── */
.rozmowa { display: flex; flex-direction: column; gap: 10px; }
.dymek {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: var(--r);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: wejscie .16s ease-out;
}
.dymek--ja {
  align-self: flex-end;
  background: var(--emalia);
  color: #F4F8F5;
  border-bottom-right-radius: 4px;
}
.dymek--bot {
  align-self: flex-start;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-bottom-left-radius: 4px;
  box-shadow: var(--cien);
}
.dymek--czeka { color: var(--atrament-2); font-style: italic; }
@keyframes wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dymek { animation: none; } }

.pustka { margin: auto 0; text-align: center; color: var(--atrament-2); padding: 0 24px; }
.pustka p { margin: 6px 0; }
.pustka__drobne { font-size: .88rem; opacity: .8; }

/* ── Kafle ───────────────────────────────────────────────────────────────── */
.kafel {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--cien);
}
.kafel__tytul {
  font-family: var(--dane);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--atrament-2);
  margin: 0 0 12px;
  font-weight: 500;
}
.kafel--glowny { text-align: center; }
.kafel--partner { border-color: color-mix(in srgb, var(--sliwka) 35%, var(--linia)); }

/* Miernik — pierścień wypełniany tym, co zjedzone. Ta sama figura, co ikona.
   Pełne koło = cel dnia. Powyżej celu pierścień zostaje pełny i nie zmienia
   koloru na alarmowy: nadwyżkę opisujemy słowem, nie czerwienią. */
.miernik {
  --postep: 0;
  position: relative;
  width: 190px; height: 190px;
  margin: 4px auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--emalia) calc(var(--postep) * 1%), var(--linia) 0);
  transition: background .4s ease-out;
}
.miernik::before {
  content: ""; position: absolute; inset: 13px;
  border-radius: 50%; background: var(--karta);
}
.miernik__srodek { position: relative; display: grid; place-items: center; gap: 4px; }
.miernik__liczba {
  font-family: var(--display);
  font-size: 3rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.miernik__opis {
  font-family: var(--dane);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--atrament-2);
}
@media (prefers-reduced-motion: reduce) { .miernik { transition: none; } }

.dane { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.dane div { flex: 1; }
.dane dt {
  font-family: var(--dane); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--atrament-2);
}
.dane dd { margin: 3px 0 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.nota { margin: 12px 0 0; font-size: .85rem; color: var(--atrament-2); }

.makro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.makro li { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 10px; }
.makro--bez-progu { color: var(--atrament); }
.makro__nazwa { font-size: .9rem; }
.makro__pasek { height: 6px; border-radius: 3px; background: var(--linia); overflow: hidden; }
.makro__wypelnienie { display: block; height: 100%; background: var(--emalia-2); border-radius: 3px; }
.makro__liczby { font-family: var(--dane); font-size: .78rem; font-variant-numeric: tabular-nums;
                 color: var(--atrament-2); white-space: nowrap; }

.wpisy { list-style: none; margin: 0; padding: 0; }
.wpisy li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--linia);
}
.wpisy li:last-child { border-bottom: 0; }
.wpis__nazwa { flex: 1; }
.wpis__kcal { font-family: var(--dane); font-variant-numeric: tabular-nums; }
.wpis__usun {
  border: 0; background: none; color: var(--atrament-2);
  padding: 4px 6px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}

/* ── Dostępy ─────────────────────────────────────────────────────────────── */
/* Ten sam papier i ta sama linia przerywana, co przy wpisach dnia — dostęp do
   cudzych danych ma wyglądać jak zwykła pozycja na liście, a nie jak panel
   administracyjny. Żadnej czerwieni: cofnięcie i odmowa to normalne czynności,
   nie awarie. */
.dostepy { list-style: none; margin: 0; padding: 0; }
.dostepy:empty { display: none; }
.dostepy li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--linia);
}
.dostepy li:last-child { border-bottom: 0; }
.dostep__opis { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dostep__kto { font-weight: 600; }
.dostep__co { font-size: .85rem; color: var(--atrament-2); }
.dostep__cytat { font-size: .85rem; color: var(--atrament-2); font-style: italic; }
/* „Nadane z terminala" ma być widoczne, ale nie krzyczeć — to informacja
   o pochodzeniu dostępu (obejście zgody), nie ostrzeżenie o awarii. */
.dostep__zrodlo {
  align-self: flex-start;
  font-family: var(--dane); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bursztyn);
  border: 1px solid color-mix(in srgb, var(--bursztyn) 40%, transparent);
  border-radius: 999px; padding: 1px 8px; margin-top: 3px;
}
.dostep__akcje { display: flex; flex-direction: column; gap: 6px; flex: none; }
.przycisk--maly { min-height: 34px; padding: 0 12px; font-size: .85rem; }
.dostep__czekam { color: var(--atrament-2); }

/* Kropka przy zakładce — prośba o wgląd w cudze dane nie ma prawa czekać
   niezauważona, ale nie robimy z niej alarmu (bez liczby, bez czerwieni). */
.znacznik {
  display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 50%; background: var(--sliwka); vertical-align: middle;
}

.wielka { margin: 0; font-family: var(--display); font-size: 2.6rem; line-height: 1;
          font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wielka__jed { font-family: var(--tekst); font-size: .82rem; color: var(--atrament-2);
               letter-spacing: 0; }
/* `wrap`, bo w rzędzie „Poproś o dostęp" stoją dwa pola wyboru i przycisk —
   na 320 px muszą się złamać do drugiej linii zamiast wyjechać poza ekran. */
.rzad { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.rzad .pole--waskie { min-width: 7.5rem; }

.partner__liczba { margin: 0; font-family: var(--display); font-size: 2rem;
                   color: var(--sliwka); font-variant-numeric: tabular-nums; }
.partner__jed { font-family: var(--tekst); font-size: .8rem; color: var(--atrament-2); }
.kafel--partner .przycisk { margin-top: 12px; }

/* ── Pasek pisania ───────────────────────────────────────────────────────── */
.komponer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--karta);
  border-top: 1px solid var(--linia);
}
.komponer input[type="text"] {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  background: var(--papier);
  border: 1px solid var(--linia);
  border-radius: 999px;
}
.ikonka {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--linia);
  border-radius: 50%;
  background: var(--papier);
  color: var(--atrament-2);
  cursor: pointer;
}
.ikonka svg { width: 21px; height: 21px; }
.ikonka--glowna { background: var(--emalia); border-color: var(--emalia); color: #F4F8F5; }
.ikonka.is-nagrywa { background: var(--sliwka); border-color: var(--sliwka); color: #FBFCFA; }

/* ── Zakładki ────────────────────────────────────────────────────────────── */
.zakladki {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linia);
  background: var(--karta);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Cztery zakładki na wąskim ekranie: odrobinę ciaśniejszy tracking, żeby
   „Dostępy" mieściło się w jednej linii także na 320 px. */
.zakladka {
  border: 0; background: none;
  padding: 12px 2px 14px;
  font-family: var(--dane);
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--atrament-2);
  cursor: pointer;
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.zakladka.is-aktywna { color: var(--emalia); border-top-color: var(--emalia); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  max-width: 90vw;
  background: var(--atrament); color: var(--papier);
  padding: 10px 16px; border-radius: 999px;
  font-size: .9rem;
  box-shadow: var(--cien);
  z-index: 10;
}