/*
  style.css — WYGLĄD strony.
  Każda reguła mówi: "ten element ma wyglądać tak".
  Składnia: selektor { właściwość: wartość; }
  np.  h1 { color: blue; }  ->  nagłówki h1 mają być niebieskie.

  MOTYWY (kolory):
  - Wszystkie kolory trzymamy w "zmiennych" (--nazwa) w bloku :root poniżej.
  - PALETĘ zmienia atrybut data-theme na <html>:  domyślna=niebieska,
    "gray"=szara, "teal"=morska, "pink"=różowa.  (ustawia go JavaScript)
  - TRYB jasny/ciemny zmienia atrybut data-mode="dark".
  Dzięki temu motyw to TYLKO podmiana zmiennych — reszta kodu zostaje bez zmian.
*/

/* ====== PALETA DOMYŚLNA: NIEBIESKA, JASNA ====== */
:root {
  --kolor-tlo: #f6f2ea;          /* jasny, ciepły beż (tło strony) */
  --kolor-karta: #fffefb;        /* kość słoniowa (karty/sekcje) */
  --kolor-glowny: #4f81a0;       /* stonowany niebieski — kolor AKCENTU */
  --kolor-glowny-ciemny: #426c87;/* ciemniejszy akcent (najazd myszą) */
  --kolor-tekst: #33414d;        /* grafitowy tekst */
  --kolor-szary: #7b8794;        /* szary na podpowiedzi/opisy */
  --kolor-obramowanie: #e7e1d6;  /* jasne, ciepłe obramowania */
  --kolor-akcent-tlo: #edf3f6;   /* bardzo jasny akcent (tła znaczków) */
  --kolor-akcent-ramka: #d3e1e9; /* delikatna akcentowa ramka */
  --kolor-tor: #ece7dc;          /* tło "toru" paska postępu */
  --kolor-przycisk-tlo: #f4f0e8; /* tło małych przycisków */
  --kolor-przycisk-hover: #eae3d6;
  --gb-expected: #c2b9a6;        /* wypełnienie paska "oczekiwany" (jasny ciepły szary) */
  --kolor-over: #f59e0b;         /* złoty — oznacza wynik PONAD plan (ten sam we wszystkich motywach) */
  --kolor-warn: #dc2626;         /* red: a 'dose' item logged above plan / a limit exceeded (item 11) */

  /* Baner (pasek na górze) — ciemniejsze tło = większy kontrast białego tekstu */
  --kolor-banner: #20384a;       /* przyciemnione tło = mocniejszy kontrast białych ikon/liczb */
  --banner-elem: #182b3a;        /* tło pól/znaczków w banerze */
  --banner-elem-hover: #2a455a;
  --banner-border: #7ea3bd;      /* jaśniejsze obramowanie = ikony wyraźniej odcięte */
  --banner-text: #ffffff;
  --banner-sub: #ffffff;

  --cien: 0 4px 14px rgba(40, 50, 60, 0.08); /* miększy, bardziej "uniesiony" cień */
  --zaokraglenie: 16px;                       /* łagodniejsze zaokrąglenia kart */
}

/* ====== PALETA: SZARA / STONE (data-theme="gray") ====== */
[data-theme="gray"] {
  --kolor-glowny: #647686;
  --kolor-glowny-ciemny: #536472;
  --kolor-akcent-tlo: #eff1f3;
  --kolor-akcent-ramka: #dadfe4;
  --kolor-banner: #2f363f;
  --banner-elem: #272d35;
  --banner-elem-hover: #3a424c;
  --banner-border: #8b96a3;
  --banner-text: #ffffff;
  --banner-sub: #ffffff;
}

/* ====== PALETA: MORSKA / TEAL (data-theme="teal") — rozjaśniona ====== */
[data-theme="teal"] {
  --kolor-glowny: #3a8a79;
  --kolor-glowny-ciemny: #2f7164;
  --kolor-akcent-tlo: #e8f3f0;
  --kolor-akcent-ramka: #c6ded7;
  --kolor-banner: #1c3d36;
  --banner-elem: #143029;
  --banner-elem-hover: #285048;
  --banner-border: #5da692;
  --banner-text: #ffffff;
  --banner-sub: #ffffff;
}

/* ====== PALETA: RÓŻOWA / ROSE (data-theme="pink") ====== */
[data-theme="pink"] {
  --kolor-glowny: #b06183;
  --kolor-glowny-ciemny: #97506f;
  --kolor-akcent-tlo: #f8edf2;
  --kolor-akcent-ramka: #ead0dc;
  --kolor-banner: #402736;
  --banner-elem: #341f2c;
  --banner-elem-hover: #4e3143;
  --banner-border: #ba8aa2;
  --banner-text: #ffffff;
  --banner-sub: #ffffff;
}

/* ====== TRYB CIEMNY (data-mode="dark") ======
   Zmienia TŁA i tekst na ciemne, ale kolor AKCENTU zostaje z wybranej palety.
   Definiujemy go PO paletach, żeby ciemne tła wygrały z ustawieniami palety. */
[data-mode="dark"] {
  --kolor-tlo: #1c232c;
  --kolor-karta: #27303b;
  --kolor-tekst: #e7ecf1;
  --kolor-szary: #9aa6b2;
  --kolor-obramowanie: #3a4654;
  --kolor-akcent-tlo: #2d3a47;
  --kolor-akcent-ramka: #3f5160;
  --kolor-tor: #3a4654;
  --kolor-przycisk-tlo: #313c48;
  --kolor-przycisk-hover: #3a4654;
  --gb-expected: #6b7787;
  --kolor-banner: #161c24;
  --banner-elem: #222b35;
  --banner-elem-hover: #2c3742;
  --banner-border: #4a5868;
  --banner-text: #f7fafc;
  --banner-sub: #c3cdd8;
  /* Akcent w trybie ciemnym = JAŚNIEJSZY niebieski (paleta domyślna), żeby „świecił"
     na ciemnym tle. Palety gray/teal nadpisują to niżej. */
  --kolor-glowny: #6ea8c9;
  --kolor-glowny-ciemny: #5b93b4;
  --kolor-akcent-tlo: #243443;     /* lekko niebieskawe tło znaczków */
}

/* Akcent palety w TRYBIE CIEMNYM — jaśniejsze warianty, żeby zmiana palety była widoczna.
   Selektor [data-mode][data-theme] jest "mocniejszy" niż sam [data-mode], więc wygrywa. */
[data-mode="dark"][data-theme="gray"] {
  --kolor-glowny: #95a6b6;
  --kolor-glowny-ciemny: #7f90a0;
  --kolor-akcent-tlo: #2b3540;
}
[data-mode="dark"][data-theme="teal"] {
  --kolor-glowny: #4fc1a6;
  --kolor-glowny-ciemny: #3fa88f;
  --kolor-akcent-tlo: #213a35;
}
[data-mode="dark"][data-theme="pink"] {
  --kolor-glowny: #d68fb0;
  --kolor-glowny-ciemny: #c1789b;
  --kolor-akcent-tlo: #3a2b34;
}

/* Reset — usuwa domyślne marginesy przeglądarki, żeby wszystko zaczynało się "od zera" */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* szerokość elementu liczy się razem z obramowaniem — wygodniej */
}

body {
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background-color: var(--kolor-tlo);
  color: var(--kolor-tekst);
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s; /* płynne przejście przy zmianie motywu */
}

/* ====== BANER (TOP BAR) ======
   Wyraźny pasek na górze: marka + nick (lewo), data z nawigacją i hasło dnia
   (środek), statystyki + narzędzia/motyw (prawo). */
.topbar {
  background: var(--kolor-banner);
  color: var(--banner-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  position: sticky;   /* baner "przykleja się" do góry i nie ucieka przy scrollu */
  top: 0;
  z-index: 50;        /* warstwa nad treścią, żeby nic go nie przykrywało */
}
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.25rem 1rem 0.1rem;  /* baner niski; animacja to nakładka i NIE rezerwuje miejsca */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap; /* na wąskim ekranie strefy zawijają się w pionie */
  position: relative;     /* punkt odniesienia dla paska animacji (position: absolute) */
}

/* --- Row 1: Home + brand + date (2026-10-18: the bar was too tall,
   so the date moved up here and the daily quote was removed) --- */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  flex: 1 1 100%;        /* a full row of its own; the stats + tools form row 2 */
}
/* Przycisk Home w banerze — wraca do panelu głównego z każdego miejsca. */
.home-btn {
  font-size: 1.6rem;
  cursor: pointer;
  background: var(--banner-elem);
  border: 1px solid var(--banner-border);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  color: var(--banner-text);
  flex-shrink: 0;
}
.home-btn:hover { background: var(--banner-elem-hover); }
.topbar-brand {
  font-weight: 800;
  /* Scales down on narrow screens so the full localized name never overflows
     the bar; caps at 1.4rem on wide screens (was a fixed 1.4rem). */
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  white-space: nowrap;
  min-width: 0;   /* let the brand shrink inside the flex row instead of pushing */
}
/* Phones: the name is hidden so Home + date fit in ONE row (the long localized name pushed
   the date onto a line of its own). The name still shows in the browser tab / app icon. */
@media (max-width: 520px) {
  .topbar-brand { display: none; }
}

.date-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--banner-text);
  margin-left: auto;     /* pushed to the right end of row 1 */
  white-space: nowrap;
}

/* --- Animacja wspinaczki (dekoracja, niżej — między cytatem a spodem banera) --- */
.climber {
  position: absolute;    /* NAKŁADKA: leży na banerze, nie rezerwuje miejsca (nie podnosi wysokości) */
  bottom: 0.6rem;        /* podniesione trochę do góry */
  left: 65%;             /* pasek odrobinę bardziej w prawo... */
  right: 13%;            /* ...żeby flaga (prawy koniec) wypadała za datą */
  height: 44px;          /* wyższy pasek -> miejsce na stromy szczyt blisko cytatu */
  pointer-events: none;  /* kliknięcia przechodzą przez animację -> nie blokuje ikon pod spodem */
  z-index: 0;            /* decoration layer: tool buttons sit above (see .topbar-right) */
}
.climber-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Zbocze + maszt: cienkie, stonowane linie w kolorze podtekstu banera */
.climb-hill, .climb-pole {
  fill: none;
  stroke: var(--banner-sub);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.55;
}
.climb-flag { fill: var(--kolor-glowny); }
/* Patyczak: linie w kolorze tekstu banera */
.climb-figure line {
  stroke: var(--banner-text);
  stroke-width: 2.1;
  stroke-linecap: round;
}
.climb-fill { fill: var(--banner-text); }
/* Patyczak PODĄŻA PO ŚCIEŻCE: offset-path = ta sama wyboista trasa co rysowane zbocze.
   offset-distance 0%→100% przesuwa go wzdłuż niej; offset-rotate:0deg = zostaje pionowy. */
.climb-figure {
  offset-path: path('M7 28 L24 24 L40 27 L58 19 L74 23 L92 14 L109 18 L128 9 L145 13 L163 4');
  offset-rotate: 0deg;
  animation: climb-up 26s linear infinite;
}
/* Trasa: wchodzi (0–6%), wspina się do flagi (do 70%), świętuje przy fladze (70–94%), znika i wraca */
@keyframes climb-up {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  70%  { offset-distance: 100%; opacity: 1; }
  94%  { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* "Krok": delikatne podskakiwanie tułowia podczas marszu */
.climb-bob { animation: climb-bob 1.8s ease-in-out infinite; }
@keyframes climb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.1px); }
}
/* Przełączanie póz: marsz znika przy fladze, triumf się pojawia */
.climb-walk  { animation: climb-walk-vis  26s linear infinite; }
.climb-cheer { animation: climb-cheer-vis 26s linear infinite; }
@keyframes climb-walk-vis  { 0%, 69% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes climb-cheer-vis { 0%, 69% { opacity: 0; } 70%, 100% { opacity: 1; } }
/* Triumfalny podskok na mecie (działa tylko pod koniec trasy) */
.climb-jump { animation: climb-jump 26s linear infinite; }
@keyframes climb-jump {
  0%, 70%  { transform: translateY(0); }
  76%      { transform: translateY(-6px); }
  82%      { transform: translateY(0); }
  88%      { transform: translateY(-4px); }
  94%, 100% { transform: translateY(0); }
}
/* Złoty puchar przy fladze: wskakuje, gdy patyczak dojdzie na szczyt (70% pętli),
   i znika, zanim animacja ruszy od nowa (100% -> reset do opacity 0). */
.climb-trophy {
  position: absolute;
  right: -0.5rem;            /* z boku, tuż za flagą po prawej */
  top: -0.35rem;             /* na wysokości szczytu/flagi */
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0;
  transform-origin: center bottom;
  animation: trophy-pop 26s linear infinite;   /* ten sam rytm co wspinaczka */
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.65));  /* złota poświata */
}
@keyframes trophy-pop {
  0%, 69%  { opacity: 0; transform: scale(0.4) translateY(4px); }  /* schowany w czasie wspinaczki */
  73%      { opacity: 1; transform: scale(1.15) translateY(0); }   /* "puk!" przy fladze */
  78%      { transform: scale(1); }
  93%      { opacity: 1; transform: scale(1); }                    /* stoi obok flagi */
  100%     { opacity: 0; transform: scale(0.4) translateY(4px); }  /* znika przed nowym startem */
}

/* Szacunek dla ustawienia "ogranicz animacje" — postać stoi przy fladze z rękami w górze, bez ruchu */
@media (prefers-reduced-motion: reduce) {
  .climb-figure { animation: none; offset-distance: 100%; opacity: 1; }
  .climb-bob, .climb-jump { animation: none; }
  .climb-walk  { animation: none; opacity: 0; }
  .climb-cheer { animation: none; opacity: 1; }
  .climb-trophy { animation: none; opacity: 1; transform: none; }  /* puchar widoczny na stałe */
}

/* Phones (tester feedback, 2026-07-12): the wrapped topbar can cover most of a
   small screen, so it scrolls away with the page instead of sticking; the
   decorative climber is app-only clutter there and is hidden (the landing page
   has its own copy and keeps it). Tablets/desktop (>760px) stay as before. */
@media (max-width: 760px) {
  .topbar { position: static; }
  .climber { display: none; }
  /* The goal row's six action icons never shrink (flex-shrink: 0), so on a
     narrow portrait screen the row can grow wider than the viewport and drag
     the whole page sideways (visible after a landscape->portrait rotation).
     Let the icons wrap to their own line instead, kept at the right edge. */
  .goal-row, .archive-item { flex-wrap: wrap; }
  .goal-row .goal-tools, .archive-item .goal-tools { margin-left: auto; }
  /* The topbar tool strip can be wider than a narrow phone.
     Instead of clipping, it becomes a finger-scrollable strip: buttons keep
     their size, the strip swipes left/right. A half-visible last icon is the
     "there is more" hint, so the scrollbar itself stays hidden. */
  .topbar-right, .topbar-tools { min-width: 0; }  /* let flex shrink the strip to screen width */
  .topbar-tools {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* Firefox */
    padding-bottom: 2px;               /* breathing room so button borders are not clipped */
  }
  .topbar-tools::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .topbar-tools > * { flex-shrink: 0; }  /* buttons scroll instead of squeezing */

}

/* --- Prawo: statystyki + narzędzia --- */
.topbar-right {
  position: relative;    /* + z-index: chips and tool buttons paint ABOVE the .climber overlay, */
  z-index: 1;            /* so the figure walks BEHIND them instead of across the 🌙 icon */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.stat-chips {
  display: flex;
  gap: 0.4rem;
}
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ciemniejsze tło niż baner -> mocniejszy kontrast dla białych liczb (mniej "rozmyte") */
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 0.2rem 0.7rem;
  min-width: 4.6rem;
}
.chip-val {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.05;
  color: #ffffff;
}
.chip-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--banner-sub);
}
.topbar-tools {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.tool-btn {
  font-size: 1.5rem;            /* mniejsze emoji (było 2.15rem) */
  cursor: pointer;
  background: var(--banner-elem);
  border: 1px solid var(--banner-border);
  border-radius: 10px;
  height: 2.2rem;               /* wspólna, mniejsza wysokość wszystkich ikon-narzędzi (było 3rem) */
  padding: 0 0.5rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--banner-text);
}
.tool-btn:hover { background: var(--banner-elem-hover); }

/* --- Navigation: Goals · Statistics · Charts (scope item 2) ---
   Wide screens: a strip of buttons in row 2 of the topbar, so it sticks with
   it. Phones: a bar at the bottom edge (see the max-width: 760px block). */
.main-nav {
  display: flex;
  gap: 0.3rem;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 2.2rem;
  padding: 0 0.75rem;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--banner-elem);
  color: var(--banner-text);
  border: 1px solid var(--banner-border);
  border-radius: 10px;
  line-height: 1;
}
.nav-btn:hover { background: var(--banner-elem-hover); }
.nav-btn.active { background: #ffffff; color: var(--kolor-banner); border-color: #ffffff; }
.nav-ico { font-size: 1.05rem; }
.nav-ico-pct { font-weight: 800; }   /* the plain % character, not an emoji */
/* Placed AFTER the base rules above, so these phone rules win. */
@media (max-width: 760px) {
  /* Navigation on phones: a bar fixed to the bottom edge, in thumb reach
     (scope item 2, the phone is the primary device). Three equal buttons,
     icon above the label, ~56px tall. The page gets room underneath so the
     bar never covers the last lines, and the toasts sit above it. */
  .main-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0; gap: 0;
    background: var(--kolor-karta);
    border-top: 1px solid var(--kolor-obramowanie);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    padding: 0 0 env(safe-area-inset-bottom, 0px);
  }
  .nav-btn {
    flex: 1 1 0; flex-direction: column; gap: 0.15rem;
    height: auto; min-height: 3.5rem; border-radius: 0;
    background: transparent; border: none;
    color: var(--kolor-szary); font-size: 0.75rem;
  }
  .nav-btn:hover { background: transparent; }
  .nav-btn .nav-ico { font-size: 1.35rem; }
  .nav-btn.active {
    color: var(--kolor-glowny); background: transparent;
    box-shadow: inset 0 3px 0 var(--kolor-glowny);
  }
  body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
  /* body prefix: the base .undo-toast rule comes LATER in this file and would win */
  body .undo-toast { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ====== POJEMNIK NA TREŚĆ ====== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;            /* więcej oddechu między sekcjami */
}

/* ====== KARTA (sekcja) ====== */
.card {
  background-color: var(--kolor-karta);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien);
  padding: 1.6rem 1.8rem;   /* więcej miejsca w środku kart */
}
.card h2 {
  font-size: 1.45rem;        /* mocniejsza hierarchia nagłówków */
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.hint {
  color: var(--kolor-szary);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}
.placeholder {
  border: 2px dashed var(--kolor-obramowanie);
  border-radius: var(--zaokraglenie);
  padding: 1.5rem;
  text-align: center;
  color: var(--kolor-szary);
  font-style: italic;
}
/* First-run welcome box (empty goal list) — friendlier than a bare placeholder,
   points a newcomer to the "Add new goal" button. Uses the accent variables so
   it adapts to every palette and to dark mode. */
.welcome-box {
  border: 1px solid var(--kolor-akcent-ramka);
  background: var(--kolor-akcent-tlo);
  border-radius: var(--zaokraglenie);
  padding: 1.3rem 1.5rem;
}
.welcome-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}
.welcome-body {
  margin: 0;
  color: var(--kolor-szary);
  line-height: 1.5;
}

/* ====== PRZYCISKI ====== */
.btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--kolor-glowny);
  color: white;
}
.btn-primary:hover { background: var(--kolor-glowny-ciemny); }
.btn-ghost {
  background: transparent;
  color: var(--kolor-szary);
  border-color: var(--kolor-obramowanie);
}
.btn-ghost:hover { background: var(--kolor-przycisk-tlo); }
.btn-small {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  background: var(--kolor-przycisk-tlo);
  color: var(--kolor-tekst);
  border-color: var(--kolor-obramowanie);
}
.btn-small:hover { background: var(--kolor-przycisk-hover); }
.btn-danger { color: #b3402f; }
.btn-danger:hover { background: #f7e4df; border-color: #e3b3a8; }

.hidden { display: none; }

/* ====== LISTA CELÓW (kompaktowa) ====== */
.goal-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.goal-item {
  border: 1px solid var(--kolor-obramowanie);
  border-left: 4px solid var(--kolor-glowny); /* kolor celu nadpisuje JS */
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  background: var(--kolor-karta);
}
.goal-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.goal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.goal-name {
  font-size: 1rem;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.goal-name:hover { text-decoration: underline; }
.goal-status {
  font-size: 0.78rem;
  color: var(--kolor-szary);
  white-space: nowrap;
}
.goal-tools {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.icon-btn {
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  background: var(--kolor-przycisk-tlo);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 7px;
  padding: 0.28rem 0.4rem;
}
.icon-btn:hover { background: var(--kolor-przycisk-hover); }
.icon-btn.danger:hover { background: #f7e4df; border-color: #e3b3a8; }
/* Strzałki zmiany kolejności — węższe; wyłączone (pierwszy/ostatni) są wygaszone */
.icon-btn.move { font-size: 0.72rem; padding: 0.28rem 0.32rem; }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn:disabled:hover { background: var(--kolor-przycisk-tlo); }

/* --- Sekcja ARCHIWUM (zwijana, na dole listy celów) --- */
/* Archiwum wyraźnie odcięte od aktywnych celów: kreska + odstęp nad sekcją,
   a nagłówek wygląda jak klikalny „pasek sekcji", nie jak zwykły szary tekst. */
.archive-section {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 2px dashed var(--kolor-obramowanie);
}
.archive-head {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  background: var(--kolor-przycisk-tlo);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: var(--kolor-tekst);
  font-weight: 700;
  font-size: 0.95rem;
}
.archive-head:hover {
  background: var(--kolor-akcent-tlo);
  border-color: var(--kolor-glowny);
}
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.archive-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--kolor-obramowanie);
  border-left: 4px solid var(--kolor-glowny);  /* kolor celu nadpisuje JS */
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  background: var(--kolor-karta);
  opacity: 0.85;
}
.archive-stat {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kolor-szary);
  white-space: nowrap;
}

/* Dwa cienkie paski: Expected (czas) i Achieved (wyniki) — oba widać od razu */
.goal-bars {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.gb-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--kolor-szary);
}
.gb-label {
  width: 4.2rem;
  flex-shrink: 0;
  font-weight: 600;
}
.gb-track {
  flex: 1 1 auto;
  height: 7px;
  background: var(--kolor-tor);
  border-radius: 999px;
  overflow: hidden;
}
.gb-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.gb-fill.expected { background: var(--gb-expected); }
.gb-pct {
  width: 2.6rem;
  flex-shrink: 0;
  text-align: right;
  font-weight: 700;
  color: var(--kolor-tekst);
}

/* Cel wstrzymany (pauza) */
.goal-paused { opacity: 0.65; }
.goal-badge {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--kolor-akcent-tlo);
  color: var(--kolor-glowny);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.goal-badge.paused { background: #fbeccd; color: #92400e; }
.goal-badge.active { background: #e2f0e8; color: #2f7d57; }
.goal-badge.upcoming { background: #edeff1; color: #5f6b77; }
.goal-badge.finished { background: var(--kolor-akcent-tlo); color: var(--kolor-glowny); }
.goal-paused-note {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #b07b2e;
}

/* Delikatna podpowiedź o skupieniu (przy 6+ celach) */
.soft-limit {
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
  border-radius: 8px;
  color: var(--kolor-tekst);
}

/* ====== STREFA DODAWANIA CELU (na dole, rozwijana) ====== */
.add-goal-zone { margin-top: 1rem; }

/* ====== FORMULARZ DODAWANIA CELU ====== */
.goal-form {
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--zaokraglenie);
  padding: 1.1rem 1.2rem;
  margin-top: 0.8rem;
  background: var(--kolor-akcent-tlo);
}
.form-legend { font-size: 1rem; margin-bottom: 0.9rem; }
/* Starter templates offered at the top of the add-goal form (scope item 3) */
.tpl-picker { margin-bottom: 1rem; }
.tpl-picker-title { font-weight: 600; margin: 0 0 0.25rem; }
.tpl-picker-hint { margin: 0 0 0.6rem; }
.tpl-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.tpl-pick {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; text-align: left;
  padding: 0.45rem 0.6rem; border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--kolor-akcent-ramka); background: var(--kolor-karta); color: var(--kolor-tekst);
}
.tpl-pick:hover:not(:disabled) { border-color: var(--kolor-glowny); }
.tpl-pick:disabled { opacity: 0.55; cursor: wait; }
.tpl-pick.loading { opacity: 1; border-color: var(--kolor-glowny); }
.tpl-pick-icon { font-size: 1.3rem; flex-shrink: 0; }
.tpl-picker-msg { color: #c0392b; margin: 0.5rem 0 0; font-size: 0.9rem; }
.tpl-picker-or { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--kolor-obramowanie); font-weight: 600; font-size: 0.95rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kolor-tekst);
}
.field-wide { grid-column: 1 / -1; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--kolor-glowny);
  box-shadow: 0 0 0 3px var(--kolor-akcent-ramka);
}
.form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }

/* ====== WIDOK DNIA (Krok 3b) ====== */
.day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Home po lewej, ikony po prawej, tytuł rozpycha środek */
  gap: 0.8rem;
  flex-wrap: wrap;
}
.day-title {
  flex: 1 1 auto;                   /* tytuł zajmuje wolne miejsce między Home a ikonami */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.day-home { flex-shrink: 0; }
.goal-icons {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;                   /* ikony 📊 📄 🔗 trzymają się prawej krawędzi */
}
.goal-icons .icon-btn { font-size: 1.05rem; }

/* ====== UKŁAD DWUKOLUMNOWY WIDOKU DNIA ======
   Lewa kolumna = wpisywanie wyników, prawa = statystyki/zegary.
   Na wąskich ekranach kolumny zwijają się pod siebie (wyniki na górze). */
.day-columns {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.day-col-left  { flex: 1 1 380px; min-width: 0; }   /* wyniki — zajmują więcej miejsca */
.day-col-right { flex: 0 1 320px; min-width: 0; }   /* statystyki — węższa kolumna */
.day-col-right .goal-hero { margin-top: 0.6rem; }
.day-col-title {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.day-col-hint {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--kolor-szary);
}
.start-from-plan { margin: 0.6rem 0 0.2rem; }
/* Na telefonie/tablecie: jedna kolumna (najpierw wyniki, potem statystyki). */
@media (max-width: 760px) {
  .day-columns { flex-direction: column; }
  .day-col-left, .day-col-right { flex: 1 1 auto; width: 100%; }
}

/* --- PANEL ZEGARÓW POJEDYNCZEGO CELU --- */
.goal-hero {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 12px;
  background: var(--kolor-akcent-tlo);
}
.period-range {
  margin-top: 0.7rem;
  text-align: center;
}
.period-range-dates { font-weight: 700; font-size: 0.85rem; }
.period-range-dates2 { font-weight: 600; font-size: 0.82rem; margin-top: 0.05rem; }
.period-range-sub {
  font-size: 0.74rem;
  color: var(--kolor-szary);
  margin-top: 0.1rem;
}

/* --- Przegląd wszystkich 4 okresów naraz (Day/Week/Month/Quarter) — skondensowany --- */
.goal-hero-hint {
  font-size: 0.8rem;
  color: var(--kolor-szary);
  text-align: center;
  margin-bottom: 0.1rem;
}
/* Notka wyjaśniająca różnicę: zegary (regularność, cap 100%) vs sumy (ilość, mogą >100%). */
.goal-hero-note {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--kolor-tekst);
  background: var(--kolor-przycisk-tlo);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  margin: 0.2rem 0 0.6rem;
}
/* Notka „ten dzień jeszcze się nie zaczął" — wyraźniejsza (akcent), bo tłumaczy zegary na 0%. */
.future-day-note,
.future-results-note {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--kolor-glowny);
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-glowny);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  margin: 0 0 0.6rem;
}
/* Wyłączone pola wyniku na przyszłych dniach — wyszarzone, kursor „zakaz". */
.param-input:disabled {
  background: var(--kolor-przycisk-tlo);
  color: var(--kolor-szary);
  cursor: not-allowed;
  opacity: 0.7;
}
.scale-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.done-row input:disabled { cursor: not-allowed; }
/* Pasek „↩ Undo" przy dolnej krawędzi ekranu — pojawia się po groźnej akcji (jak w Gmailu).
   Domyślnie schowany pod ekranem; klasa .show wsuwa go w górę. */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 200%);   /* schowany pod krawędzią */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;                 /* left: 50% alone would squeeze it to half the screen */
  max-width: calc(100vw - 2rem);
  background: #1f2937;
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 200;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.undo-toast.show { transform: translate(-50%, 0); opacity: 1; }
.undo-toast-msg { font-size: 0.9rem; }
.undo-toast-btn {
  background: transparent;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.undo-toast-btn:hover { background: rgba(251, 191, 36, 0.15); }
.undo-toast-close {
  background: transparent;
  color: #9ca3af;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
}
.undo-toast-close:hover { color: #fff; }

/* Sumy okresowe (Ulepszenie #3): zaplanowane vs wykonane łącznie, per parametr */
.period-totals {
  border-top: 1px dashed var(--kolor-obramowanie);
  padding-top: 0.35rem;
}
.period-totals-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kolor-szary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}
.totals-row {
  display: flex;
  flex-wrap: wrap;                 /* gdy się nie mieści, wynik/% schodzą do nowej linii zamiast wychodzić poza kartę */
  align-items: baseline;
  gap: 0.1rem 0.5rem;              /* mały odstęp w pionie (po zawinięciu) + poziomy jak wcześniej */
  font-size: 0.82rem;
  padding: 0.1rem 0;
}
/* Nazwa zostaje w JEDNEJ linii i ucina się „…", zamiast zawijać i nachodzić na wynik */
.totals-name {
  flex: 1 1 auto;
  min-width: 6rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.totals-val { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals-pct {
  flex: 0 0 auto;
  min-width: 3rem;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.totals-pct.totals-over { color: var(--kolor-over); }
.totals-pct.totals-warn, .item-res-pct.totals-warn { color: var(--kolor-warn); }
/* Red tag next to a limit or dose total that went over (item 11). */
.totals-warn-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--kolor-warn);
  border: 1px solid var(--kolor-warn);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  white-space: nowrap;
}
/* Znacznik „▲ above plan" przy sumach >100% — złota plakietka. */
.totals-over-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--kolor-over);
  border: 1px solid var(--kolor-over);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  white-space: nowrap;
}

/* --- Mapa konsekwencji (kalendarz 12 tyg. × 7 dni) --- */
.goal-day-chart {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--kolor-obramowanie);
  padding-top: 0.5rem;
}
.goal-day-chart-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.4rem; }
.goal-day-chart .chart-svg { width: 100%; height: auto; }

.goal-day-chart-empty {
  font-size: 0.85rem;
  color: var(--kolor-szary);
  margin: 0.2rem 0;
}

.heatmap {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--kolor-obramowanie);
  padding-top: 0.5rem;
}
.heatmap-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.4rem; }
.heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: 3px;
}
.hm-head, .hm-week {
  font-size: 0.62rem;
  color: var(--kolor-szary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-week { justify-content: flex-end; padding-right: 0.25rem; }
.hm-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--kolor-karta);            /* domyślnie BIAŁE/puste — kolor pojawia się dopiero od 1% */
  border: 1px solid var(--kolor-obramowanie);
  /* The day's % sits in the middle as a small number. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: var(--kolor-tekst);
  font-variant-numeric: tabular-nums;
}
.hm-cell.hm-strong { color: #fff; }
.hm-cell.hm-empty  { background: var(--kolor-karta); }                 /* miniony bez wpisu lub 0% = białe */
.hm-cell.hm-future { background: var(--kolor-karta); border-style: dashed; opacity: 0.55; } /* jeszcze przed nami */
/* Klikalne kwadraciki: rączka + delikatne podniesienie po najechaniu. */
.hm-cell.hm-clickable { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.hm-cell.hm-clickable:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 1px var(--kolor-glowny);
  position: relative;
  z-index: 1;
}
/* Aktualnie oglądany dzień — wyraźna obwódka „tu jesteś". */
.hm-cell.hm-current {
  outline: 2px solid var(--kolor-glowny);
  outline-offset: 1px;
}
/* Dzień zaznaczony do porównania — pełna obwódka + wewnętrzny pierścień. */
.hm-cell.hm-selected {
  outline: 2px solid var(--kolor-glowny);
  outline-offset: 1px;
  box-shadow: inset 0 0 0 2px #fff;
}

/* Pasek trybu porównania nad mapą. */
.hm-compare-ctrl {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.3rem 0;
}
.btn.hm-compare-on {
  background: var(--kolor-glowny);
  color: #fff;
  border-color: var(--kolor-glowny);
}
.hm-compare-hint {
  font-size: 0.8rem;
  color: var(--kolor-szary);
  margin: 0 0 0.3rem;
}

/* Podsumowanie zaznaczonych dni (zakres + chipsy dat) nad uśrednionym wykresem. */
.compare-dates { margin: 0.2rem 0 0.4rem; }
.compare-range { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.3rem; }
.compare-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.compare-chip {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
}

/* Linia z datą pod tytułem dziennego wykresu. */
.goal-day-chart-date {
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}
.goal-day-chart-date .gdc-date { font-weight: 600; }
.goal-day-chart-date .gdc-rel { color: var(--kolor-szary); margin-left: 0.35rem; }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  color: var(--kolor-szary);
}
.hm-leg-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--kolor-obramowanie);
  display: inline-block;
}
.hm-leg-label { margin: 0 0.15rem; }
.hm-leg-numbers { margin-left: auto; }
.gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.gauge {
  position: relative;
  width: 120px;
  text-align: center;
}
.gauge-svg { width: 120px; height: 120px; display: block; }
.gauge-center {
  position: absolute;
  top: 60px;                        /* środek koła (połowa wysokości 120px) */
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
.gauge-num { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.gauge-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--kolor-szary);
  font-weight: 600;
}
.gauge-over .gauge-num { color: #d97706; }
.gauge-badge {
  margin-top: 0.25rem;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--kolor-over);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.gauge-over { animation: gauge-pulse 1.6s ease-in-out infinite; }
@keyframes gauge-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55)); }
}
.day-sub {
  margin-top: 0.4rem;
  color: var(--kolor-szary);
  font-size: 0.92rem;
}
.day-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;          /* na telefonie zawija się do kilku rzędów zamiast wyjeżdżać poza ekran */
  gap: 0.4rem;
  margin: 0.9rem 0;
}
.day-nav-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 12rem;
  text-align: center;
  margin: 0 0.4rem;
}
/* Mały przycisk „Today" pod datą — dyskretny, nie konkuruje ze strzałkami. */
.day-nav-today {
  margin-top: 0.25rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
/* Lewy klaster nagłówka celu: „← Back" + „🏠 Home" obok siebie. */
.day-head-left {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.day-nav-date { font-weight: 700; font-size: 1.05rem; }
.day-nav .dn-ico + .dn-txt, .day-nav .dn-txt + .dn-ico { margin-left: 0.3em; }
/* Phones: the date on top, then ONE row of six buttons (arrow above a small caption),
   back on the left, forward on the right. Wrapping used to split them around the date. */
@media (max-width: 760px) {
  .day-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
  }
  .day-nav-label { grid-column: 1 / -1; grid-row: 1; min-width: 0; margin: 0 0 0.3rem; }
  .day-nav > .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.25rem 0.1rem;
    min-width: 0;
  }
  .day-nav > .btn .dn-ico { order: -1; font-size: 1rem; line-height: 1.1; }
  .day-nav > .btn .dn-txt { font-size: 0.68rem; line-height: 1.2; white-space: nowrap; }
  .day-nav > .btn .dn-ico + .dn-txt, .day-nav > .btn .dn-txt + .dn-ico { margin-left: 0; }
  .day-nav > .btn:nth-of-type(4) { margin-left: 0.25rem; }
  .day-nav > .day-nav-edge { display: none; }   /* Day 1 / Day 84: rare jumps, desktop only */
}
.day-nav-rel {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.1rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
}
.day-nav-rel.is-today  { background: var(--kolor-glowny); color: #fff; }
.day-nav-rel.is-past   { background: var(--kolor-przycisk-tlo); color: var(--kolor-szary); }
.day-nav-rel.is-future { background: var(--kolor-akcent-tlo); color: var(--kolor-glowny); }
.day-completion { margin-bottom: 1.2rem; }
.day-completion-label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.goal-bar {
  height: 8px;
  background: var(--kolor-tor);
  border-radius: 999px;
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.item-card {
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--zaokraglenie);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
  background: var(--kolor-karta);
}
.item-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.item-name { font-weight: 700; flex: 1 1 auto; }
.item-total {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kolor-glowny);
  background: var(--kolor-akcent-tlo);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;      /* nie zawijaj „Total: 100%" — stabilny nagłówek */
}
.param-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}
.param-label { font-weight: 600; min-width: 7rem; }
.param-plan { color: var(--kolor-szary); }
/* Pole wyniku wyróżnione — to TU się wpisuje, więc ma być widoczne. */
.param-result {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;            /* dosuń wynik do prawej krawędzi wiersza */
  padding: 0.25rem 0.5rem;
  background: var(--kolor-akcent-tlo);
  border-radius: 8px;
}
.param-result > span { font-weight: 600; color: var(--kolor-glowny); }
.param-input {
  width: 5.5rem;
  padding: 0.4rem 0.55rem;
  border: 2px solid var(--kolor-glowny);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
}
.param-input:focus { outline: 2px solid var(--kolor-glowny); outline-offset: 1px; }
/* Procent obok wyniku ma STAŁĄ szerokość i nie zawija — dzięki temu pole wyniku
   (ze strzałkami) nie przesuwa się, gdy liczba rośnie z „5%" do „100%". */
.param-pct {
  font-weight: 600;
  min-width: 3.6rem;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.done-row { cursor: pointer; }
/* Item 11: a dose logged above plan, and the empty-vs-0 hint on limit items. */
.param-row.dose-over .param-pct,
.param-row.dose-over .param-input { color: var(--kolor-warn); }
.param-row.dose-over .param-input { border-color: var(--kolor-warn); }
.dose-over-note {
  color: var(--kolor-warn);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.1rem 0 0.4rem;
}
.item-limit-hint {
  color: var(--kolor-szary);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}
.item-form {
  border: 1px dashed var(--kolor-glowny);
  border-radius: var(--zaokraglenie);
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
  background: var(--kolor-akcent-tlo);
}
.param-editor { margin-top: 0.6rem; }
.param-editor-title { font-weight: 600; margin-bottom: 0.2rem; }
.param-editor-hint {
  font-size: 0.85rem;
  color: var(--kolor-szary);
  margin-bottom: 0.5rem;
}
.param-edit-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; align-items: center; }
/* Wiersz nagłówków kolumn — drobne, szare etykiety nad polami. */
.param-edit-head { margin-bottom: 0.2rem; }
.param-edit-head span {
  flex: 1 1 6rem;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kolor-szary);
}
/* "Sets" i kosz są wąskie — tak samo w nagłówku, jak i w wierszu pól. */
.param-edit-row .col-sets { flex: 0 0 4.5rem; }
.param-edit-head .col-sets { flex: 0 0 4.5rem; }
.param-edit-row .col-trash,
.param-edit-head .col-trash { flex: 0 0 2.5rem; text-align: center; }
/* Time-of-day column (item 5): a "🕐 add time" button or a time input + ✕. */
.param-edit-row .col-time,
.param-edit-head .col-time { flex: 0 0 8.5rem; }
.time-ctl { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.time-ctl input { flex: 1 1 auto; min-width: 0; }
.time-ctl .add-time { white-space: nowrap; padding-left: 0.3rem; padding-right: 0.3rem; }
.time-ctl .time-clear { padding-left: 0.45rem; padding-right: 0.45rem; }
.time-ctl-label { font-size: 0.9rem; font-weight: 600; margin-right: 0.3rem; }
.item-time-field .time-ctl input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  font: inherit;
  max-width: 9rem;
}

/* Day view: time of day next to an item or a param (item 5). */
.param-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kolor-glowny);
  white-space: nowrap;
}
.param-edit-row input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  font: inherit;
  flex: 1 1 6rem;
  min-width: 0;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
}
.day-add { margin-top: 0.5rem; }

/* Add item · Copy plan · Weekly schedule share one row and wrap only when it is full.
   An opened form or panel takes the whole width. */
.day-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.day-actions > * { margin-top: 0; flex: 0 0 auto; }
.day-actions > .open,
.day-actions > :not(.btn):not(.copy-panel):not(.wizard-panel) { flex-basis: 100%; }
.day-actions > .copy-panel:empty { display: none; }
/* Phones: the three never fit in one row (~510 px of labels), so "Add item" keeps its own
   row and the two helpers share the next one half and half, their text may wrap. */
@media (max-width: 760px) {
  .day-actions > .day-add { flex-basis: 100%; }
  .day-actions > .copy-panel:not(.open),
  .day-actions > .wizard-panel:not(.open) { flex: 1 1 0; min-width: 0; align-self: stretch; }
  .day-actions .copy-toggle,
  .day-actions .wizard-toggle { width: 100%; height: 100%; white-space: normal; line-height: 1.25; }
}

/* ====== PANEL DNIA: nastrój / trudność / notatka (Krok 3b) ====== */
.day-meta {
  margin-top: 1rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--zaokraglenie);
  padding: 0.9rem 1rem;
  background: var(--kolor-akcent-tlo);
}
.day-meta-title { font-weight: 700; margin-bottom: 0.7rem; }
.day-meta-hide { margin-top: 0.6rem; font-size: 0.8rem; }
.field-check { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.92rem; }
.field-check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.scale-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.scale-label { font-size: 0.85rem; font-weight: 600; min-width: 10rem; }
.scale-btns { display: flex; gap: 0.3rem; }
.scale-btn {
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  background: var(--kolor-karta);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  padding: 0.3rem 0.45rem;
  filter: grayscale(0.6);
  opacity: 0.7;
  transition: opacity 0.15s, filter 0.15s, box-shadow 0.15s;
}
.scale-btn:hover { opacity: 1; filter: grayscale(0.2); }
.scale-btn.selected {
  filter: none;
  opacity: 1;
  border-color: var(--kolor-glowny);
  box-shadow: 0 0 0 2px var(--kolor-akcent-ramka);
}
.day-note-wrap { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.day-note-label { font-size: 0.85rem; font-weight: 600; }
.day-note-input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
  resize: vertical;
}
.day-note-input:focus {
  outline: none;
  border-color: var(--kolor-glowny);
  box-shadow: 0 0 0 3px var(--kolor-akcent-ramka);
}

/* ====== PANEL KOPIOWANIA PLANU DNIA (Krok 3b) ====== */
.copy-panel { margin-top: 0.8rem; }
.copy-panel.open {
  border: 1px dashed var(--kolor-glowny);
  border-radius: var(--zaokraglenie);
  padding: 0.9rem 1rem;
  background: var(--kolor-akcent-tlo);
}
.copy-title { font-weight: 700; margin-bottom: 0.6rem; }
.copy-form { display: flex; flex-direction: column; gap: 0.45rem; }
.copy-opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.copy-range { display: inline-flex; align-items: center; gap: 0.35rem; }
.copy-num {
  width: 4rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  font: inherit;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
}
.copy-note {
  margin: 0.6rem 0;
  font-size: 0.82rem;
  color: var(--kolor-szary);
  font-style: italic;
}

/* --- Kreator powtarzalnego planu tygodnia (Ulepszenie #2) --- */
.wizard-panel { margin-top: 0.8rem; }
.wizard-panel.open {
  border: 1px dashed var(--kolor-glowny);
  border-radius: var(--zaokraglenie);
  padding: 0.9rem 1rem;
  background: var(--kolor-akcent-tlo);
}
.wizard-hint {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--kolor-szary);
}
.wizard-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.wizard-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wizard-day {
  flex: 0 0 7rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.wizard-day.is-weekend { color: var(--kolor-glowny); }
.wizard-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  font: inherit;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
}

/* --- Kalendarz wielodniowego kopiowania (ticker) --- */
.copy-cal-wrap { margin: 0.7rem 0; }
.copy-cal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.copy-cal-count { font-size: 0.85rem; font-weight: 600; }
.copy-cal {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: 4px;
  max-width: 360px;
}
.cal-corner, .cal-head, .cal-weeklbl {
  font-size: 0.7rem;
  color: var(--kolor-szary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-head { font-weight: 600; }
.cal-head-btn {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--kolor-szary);
  padding: 0.2rem 0;
}
.cal-head-btn:hover { border-color: var(--kolor-glowny); color: var(--kolor-glowny); }
.cal-weeklbl { font-weight: 600; padding-right: 0.2rem; }
.cal-cell.is-weekend { background: var(--kolor-akcent-tlo); }
.cal-cell.is-weekend.selected { background: var(--kolor-glowny); }
.cal-cell {
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 6px;
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
  padding: 0.3rem 0;
  text-align: center;
}
.cal-cell:hover { border-color: var(--kolor-glowny); }
.cal-cell.has-data { border-color: var(--kolor-glowny); font-weight: 700; }
.cal-cell.selected {
  background: var(--kolor-glowny);
  color: #fff;
  border-color: var(--kolor-glowny);
  font-weight: 700;
}
.cal-cell.is-source {
  background: var(--kolor-akcent-tlo);
  color: var(--kolor-szary);
  cursor: not-allowed;
  outline: 2px dashed var(--kolor-glowny);
}

/* ====== STATYSTYKI (Krok 4) ====== */
/* Przełącznik zakresu: Day / Week / Month (pigułka z aktywną zakładką) */
.stat-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
  border-radius: 999px;
  padding: 0.2rem;
  margin-bottom: 0.8rem;
}
.stat-tab {
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--kolor-szary);
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
}
.stat-tab.active {
  background: var(--kolor-glowny);
  color: #fff;
  font-weight: 700;
}
.stat-period {
  font-size: 0.9rem;
  color: var(--kolor-szary);
}
/* Left group: range pills + the period label right next to them. The label's
   width varies with the period text, so it lives HERE — never pushing the
   arrows on the right (tester note: arrows used to jump around). */
.stat-lead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}
/* Period navigation in Statistics: (Today) · ◀ · ▶ — arrows keep a fixed spot */
.stat-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stat-today { margin-right: 0.2rem; }
/* Cała sekcja Statistics jako WYRAŹNIE inna strefa niż Goals */
#sekcja-statystyki {
  background: var(--kolor-akcent-tlo);
  border-color: var(--kolor-akcent-ramka);
  border-left: 4px solid var(--kolor-glowny);
}
/* Notka „tu mierzymy konsekwencję" — wyróżniony dymek pod nagłówkiem */
.stat-consistency-note {
  margin: 0.4rem 0 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--kolor-karta);
  border: 1px solid var(--kolor-akcent-ramka);
  border-left: 3px solid var(--kolor-glowny);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--kolor-szary);
}
.stat-consistency-note b { color: var(--kolor-tekst); }
/* Wiersz sterowania: [pigułki + etykieta okresu] i [Dziś ◀ ▶] na przeciwnych końcach */
.stat-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.stat-controls .stat-toggle { margin-bottom: 0; }

/* Siatka kafelków — max 3 w rzędzie, stałe i symetryczne ułożenie */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 160px;
  background: var(--kolor-karta);
  border: 1px solid var(--kolor-obramowanie);
  border-top: 3px solid var(--kolor-glowny);
  border-radius: 14px;
  padding: 1.1rem;
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stat-box:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(40, 50, 60, 0.12); }
/* Stan przeciągania kafelka myszką */
.stat-box.dragging { opacity: 0.4; cursor: grabbing; }
.stat-box.drag-over { border-color: var(--kolor-glowny); box-shadow: 0 0 0 2px var(--kolor-glowny); }
.stat-box-head { display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.stat-box-head .goal-dot { margin-top: 0.3rem; flex-shrink: 0; }
.stat-box-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kolor-glowny);
  overflow-wrap: anywhere;
}
.stat-box-pct {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--kolor-glowny);
  margin-top: auto;
}
.stat-box .gb-track { flex: none; width: 100%; }
.stat-box-label { font-size: 0.72rem; color: var(--kolor-szary); }
.stat-box-warn { font-size: 0.72rem; font-weight: 700; color: var(--kolor-warn); margin-top: 0.15rem; }
.stat-box-muted {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--kolor-szary);
  font-style: italic;
}
/* Wyróżniony kafelek "Overall" — wypełniony kolorem głównym */
.stat-box-overall {
  background: var(--kolor-glowny);
  border-color: var(--kolor-glowny);
  border-top-color: var(--kolor-glowny-ciemny);
  color: #fff;
}
.stat-box-overall .stat-box-name,
.stat-box-overall .stat-box-pct { color: #fff; }
.stat-box-overall .gb-track { background: rgba(255, 255, 255, 0.3); }
.stat-box-overall .gb-fill { background: #fff; }

/* ====== STOPKA ====== */
.app-footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--kolor-szary);
  font-size: 0.9rem;
}

/* ====== DRUKOWANIE: pojemnik na kartkę (na ekranie ukryty) ====== */
#print-area { display: none; }

/* ====== OKNO WYBORU DRUKU (modal na ekranie) ====== */
.print-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.print-modal {
  background: var(--kolor-karta);
  color: var(--kolor-tekst);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.print-modal-title { margin: 0 0 0.3rem; font-size: 1.25rem; }
.print-modal-hint {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--kolor-szary);
}
.print-section-title { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.print-goals { display: flex; flex-direction: column; gap: 0.25rem; }
.print-goal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
}
.print-goal-row:hover { background: var(--kolor-akcent-tlo); }
.print-goal-name { font-size: 0.95rem; }
.print-goal-all {
  border-bottom: 1px solid var(--kolor-obramowanie);
  margin-bottom: 0.25rem;
  padding-bottom: 0.35rem;
}
.print-all-label { font-weight: 600; }
.print-start {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 6px;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font-size: 0.95rem;
}
/* Print dialog date range From–To (item 10D). */
.print-range-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.6rem; }
.print-date-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.print-range-note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--kolor-szary); }
.print-range-note.error { color: #c0392b; font-weight: 600; }
.print-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.print-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}

/* Two tabs in the 🖨️ dialog: Plan / checklist · Results report (item 7). */
.print-tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0.4rem 0 0.8rem;
  border-bottom: 1px solid var(--kolor-obramowanie);
}
.print-tab {
  flex: 1;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--kolor-szary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.print-tab.active { color: var(--kolor-tekst); border-bottom-color: var(--kolor-glowny); }
.print-panel[hidden], .print-range-row[hidden], .print-range-note[hidden] { display: none; }
.report-goal-status { margin-left: auto; font-size: 0.75rem; color: var(--kolor-szary); }
.report-period { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; }
.report-mood { margin-top: 0.6rem; }
.report-mood.is-disabled { opacity: 0.5; cursor: not-allowed; }
.report-copy-box {
  width: 100%;
  min-height: 9rem;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 6px;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: 0.85rem/1.4 inherit;
  box-sizing: border-box;
}

/* ====== STYL TYLKO DO DRUKU (papier / zapis do PDF) ====== */
@media print {
  .main-nav { display: none !important; }
  /* Chowamy całą aplikację, pokazujemy wyłącznie kartkę. */
  body > *:not(#print-area) { display: none !important; }
  #print-area {
    display: block !important;
    color: #000;
    /* wymuś druk kolorów (kropki celów) także w przeglądarkach, które
       domyślnie pomijają tła/kolory przy drukowaniu */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-family: Arial, Helvetica, sans-serif;
  }
  @page { margin: 1.5cm; }

  .print-title { font-size: 18pt; margin: 0 0 0.1cm; }
  .print-range { font-size: 11pt; color: #333; margin: 0 0 0.5cm; }

  .print-day {
    page-break-inside: avoid;     /* nie rozrywaj dnia między strony */
    margin-bottom: 0.5cm;
    border-top: 1.5px solid #999;
    padding-top: 0.2cm;
  }
  .print-date { font-size: 13pt; margin: 0 0 0.2cm; }

  .print-goal { margin: 0 0 0.3cm 0.2cm; }
  .print-goal-head {
    font-weight: bold;
    font-size: 11pt;
    margin-bottom: 0.08cm;
  }
  .print-goal-head .goal-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
  }

  .print-item, .print-param {
    display: flex;
    align-items: center;
    gap: 0.35cm;
    font-size: 10.5pt;
    margin: 0.07cm 0 0.07cm 0.4cm;
  }
  .print-param { margin-left: 1cm; }
  .print-box {
    display: inline-block;
    width: 12px; height: 12px;
    border: 1.5px solid #000;
    border-radius: 2px;
    flex: none;
  }
  .print-item-name { font-weight: 600; }
  .print-param-label { color: #000; }
  .print-plan { color: #333; }
  .print-done { color: #555; white-space: nowrap; }
  .print-blank {
    display: inline-block;
    border-bottom: 1px solid #000;
    min-width: 3cm;
  }
  .print-note {
    font-style: italic;
    color: #777;
    font-size: 10pt;
    margin-left: 0.4cm;
  }
  .print-footer {
    margin-top: 0.6cm;
    padding-top: 0.2cm;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #777;
  }

  /* No beige app background on a printed page. */
  html, body { background: #fff !important; }
}

/* ====== RESULTS REPORT — shared by the PDF (print) and the on-screen preview ====== */
/* ---- Results report (scope item 7): white page, no coloured fills; the
   palette colour only as a thin rule. Light colours even in dark mode, and
   the charts / map / gauge are the app's own, so the CSS vars are reset. ---- */
#print-area.report-mode {
  --kolor-karta: #fff;
  --kolor-tlo: #fff;
  --kolor-tekst: #222;
  --kolor-szary: #666;
  --kolor-obramowanie: #d6d6d6;
  background: #fff;
  color: #222;
  font-size: 10pt;
}
.report-header {
  border-bottom: 1.5px solid var(--kolor-glowny);
  padding-bottom: 0.15cm;
  margin-bottom: 0.35cm;
}
.report-title { font-size: 17pt; margin: 0; }
.report-meta { font-size: 10pt; color: #444; margin-top: 0.05cm; }
.report-goal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2cm; margin-bottom: 0.15cm; }
.report-goal-head .goal-dot { width: 10px; height: 10px; }
.report-goal-name { font-size: 13pt; font-weight: bold; }
.report-goal-meta { font-size: 9.5pt; color: #555; }
.report-sub { font-weight: bold; font-size: 10pt; margin: 0.25cm 0 0.1cm; }
.report-line { font-size: 9.5pt; margin: 0.05cm 0; }
.report-score { font-size: 12pt; font-weight: bold; margin-bottom: 0.1cm; }

.report-top { display: flex; align-items: center; gap: 0.7cm; }
.report-top .gauge { flex: none; }
.report-top .gauge-label { font-size: 8.5pt; }
.report-chart .chart-svg { display: block; width: 100%; max-height: 5cm; }
.report-chart .chart-legend { font-size: 8.5pt; margin-top: 0.05cm; }

.report-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25cm;
  font-size: 9.5pt;
  padding: 0.05cm 0;
  border-bottom: 1px solid #eee;
}
.report-item-name { flex: 1; min-width: 40%; }
.report-item-pct { font-weight: bold; }
.report-item-over { color: #b45309; font-size: 8.5pt; }
.report-item-warn { color: var(--kolor-warn); font-size: 8.5pt; }

.report-table { width: 100%; border-collapse: collapse; margin-bottom: 0.35cm; font-size: 10pt; }
.report-table th, .report-table td { text-align: left; padding: 0.08cm 0.15cm; border-bottom: 1px solid #ddd; }
.report-table th { border-bottom: 1.5px solid var(--kolor-glowny); }
.report-td-name .goal-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: middle; }
.report-compact { page-break-inside: avoid; margin-bottom: 0.3cm; padding-top: 0.15cm; border-top: 1px solid #ddd; }
.report-compact .report-goal-name { font-size: 11pt; }
.report-compact .report-items .report-sub { display: none; }
/* Condensed: the items run on as one wrapped line instead of a list. */
.report-compact .report-items { display: flex; flex-wrap: wrap; gap: 0.05cm 0.5cm; }
.report-compact .report-item { border-bottom: none; padding: 0; gap: 0.15cm; }
.report-compact .report-item-name { flex: none; min-width: 0; }

.report-hint { font-size: 8pt; color: #555; margin: 0.2cm 0 0; }
/* Consistency tiles: "D5 97%" per day; two plan weeks per row on paper. */
.report-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 0.06cm; }
.report-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.03cm 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 1.15;
}
.report-day.is-full { border-width: 1.5px; }
.report-day-n { font-size: 6.5pt; color: #777; }
.report-day-pct { font-size: 8.5pt; font-weight: bold; }
.report-day.is-empty .report-day-pct { color: #aaa; font-weight: normal; }
.report-consistency .report-hint { margin-top: 0.08cm; font-size: 7.5pt; }
.report-footer {
  margin-top: 0.2cm;
  padding-top: 0.1cm;
  border-top: 1px solid #ccc;
  font-size: 8.5pt;
  color: #777;
}

/* On-screen preview (👁️ in the report dialog): the same #print-area as the PDF,
   shown over the app as a white page with a small bar on top. Never printed. */
@media screen {
  body.report-preview-open { overflow: hidden; }
  body.report-preview-open #print-area {
    display: block;
    position: fixed;
    top: 3.4rem; left: 0; right: 0; bottom: 0;
    z-index: 150;   /* above the app and the nav, below toasts (200) */
    overflow-y: auto;
    padding: 1rem max(1rem, calc((100vw - 21cm) / 2)) 2rem;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }
  .report-preview-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 151;
    min-height: 3.4rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: var(--kolor-karta);
    border-bottom: 1px solid var(--kolor-obramowanie);
  }
  .report-preview-bar .btn { min-height: 44px; }
  .report-preview-bar .btn-primary { margin-left: auto; }
  .report-preview-copy:empty { display: none; }
  .report-preview-copy { flex-basis: 100%; }
  body.report-preview-open .main-nav { display: none; }
}

/* Phones: one readable column — gauge above the lines, a taller chart. */
@media screen and (max-width: 760px) {
  #print-area.report-mode { font-size: 0.95rem; }
  .report-title { font-size: 1.35rem; }
  .report-meta, .report-goal-meta, .report-line, .report-item, .report-hint { font-size: 0.9rem; }
  .report-item-over, .report-item-warn { font-size: 0.82rem; }
  .report-goal-name { font-size: 1.1rem; }
  .report-score { font-size: 1.05rem; }
  .report-top { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .report-top .gauge { align-self: center; }
  .report-chart .chart-svg { max-height: 260px; }
  .report-chart .chart-legend { font-size: 0.8rem; }
  .report-days { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .report-day { padding: 3px 0; }
  .report-day-n { font-size: 0.72rem; }
  .report-day-pct { font-size: 0.9rem; }
  .report-consistency .report-hint { font-size: 0.8rem; }
  .report-table { font-size: 0.85rem; }
  .report-footer { font-size: 0.8rem; }
}

/* ============================================================
   WYBÓR KOLORU CELU (formularz)
   Gotowe próbki + własny kolor. Kolory działają w trybie jasnym i ciemnym.
   ============================================================ */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--kolor-obramowanie);
  padding: 0;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active {
  border-color: var(--kolor-tekst);
  box-shadow: 0 0 0 2px var(--kolor-karta), 0 0 0 4px var(--kolor-tekst);
}
.color-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--kolor-szary);
}
.color-custom-label { white-space: nowrap; }
#pole-kolor {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 6px;
  background: var(--kolor-karta);
  cursor: pointer;
}

/* ============================================================
   WYKRESY (Charts) — własne SVG, bez bibliotek zewnętrznych.
   ============================================================ */
.charts-wrap { display: flex; flex-direction: column; gap: 0.9rem; }

/* Pasek sterowania: wybór celu + typ wykresu */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}
.chart-ctl { display: inline-flex; align-items: center; gap: 0.45rem; }
.chart-ctl-label { font-size: 0.85rem; color: var(--kolor-szary); font-weight: 600; }
.chart-type-group { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.chart-type-btn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 999px;
  background: var(--kolor-przycisk-tlo);
  color: var(--kolor-tekst);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.chart-type-btn:hover { background: var(--kolor-przycisk-hover); }
.chart-type-btn.active {
  background: var(--kolor-glowny);
  border-color: var(--kolor-glowny);
  color: #fff;
}

/* Ramka i samo płótno */
.chart-frame {
  width: 100%;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 10px;
  background: var(--kolor-karta);
  padding: 0.5rem 0.4rem;
  box-sizing: border-box;
}
.chart-svg { display: block; width: 100%; height: auto; }

/* Osie i siatka */
.chart-grid { stroke: var(--kolor-obramowanie); stroke-width: 1; }
.chart-axis-label { fill: var(--kolor-szary); font-size: 12px; }
.chart-axis-y { text-anchor: end; }
.chart-axis-x { text-anchor: middle; }
.chart-axis-name { fill: var(--kolor-szary); font-size: 12px; text-anchor: middle; }

/* Linie serii */
.chart-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.chart-expected-line { stroke-dasharray: 6 4; }   /* Expected = przerywana szara */
.chart-achieved-line { stroke-dasharray: none; }   /* Achieved = ciągła, kolor celu */
.chart-dot { stroke: var(--kolor-karta); stroke-width: 1.2; }

/* Słupki */
.chart-bar { opacity: 0.9; }
.chart-bar:hover { opacity: 1; }
.chart-bar-label { fill: var(--kolor-szary); font-size: 11px; text-anchor: middle; }
.chart-warn-mark { fill: var(--kolor-warn); font-size: 12px; font-weight: 700; text-anchor: middle; }

/* Legenda */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend-swatch {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
}
.chart-legend-swatch.as-line {
  height: 4px; border-radius: 2px; width: 18px;
}
.chart-legend-text { font-size: 0.85rem; color: var(--kolor-tekst); }

/* Wyjaśnienie pod wykresem */
.chart-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kolor-szary);
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.chart-note b { color: var(--kolor-tekst); }

/* Linia odniesienia „100%" (cel) — szara przerywana, jak Expected */
.chart-ref-line { stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 5 4; }
.chart-ref-label { fill: #9ca3af; font-weight: 700; }

/* Napis „brak wyników" na środku pustego wykresu */
.chart-empty-note { fill: var(--kolor-szary); font-size: 15px; font-style: italic; text-anchor: middle; }

/* --- Kafelki celów (mini-wykresy) --- */
.chart-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}
.chart-tile {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 10px;
  background: var(--kolor-karta);
  padding: 0.6rem 0.6rem 0.5rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.chart-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border-color: var(--kolor-glowny);
}
.chart-tile-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.chart-tile-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.chart-tile-name {
  font-weight: 600; color: var(--kolor-tekst); font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
.chart-tile-badge {
  flex: none;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.05rem 0.35rem; border-radius: 999px; white-space: nowrap;
}
.chart-tile-badge.paused { background: #fbeccd; color: #92400e; }
.chart-tile-badge.archived { background: #edeff1; color: #5f6b77; }
.chart-tile-svg { width: 100%; }
.chart-tile-hint { margin-top: 0.25rem; font-size: 0.78rem; color: var(--kolor-szary); text-align: right; }

/* --- „Foldery" (pauzowane / zarchiwizowane) --- */
.chart-folder { margin-top: 0.4rem; }
.chart-folder-head {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  background: var(--kolor-przycisk-tlo);
  color: var(--kolor-tekst);
  cursor: pointer;
  font-size: 0.9rem;
}
.chart-folder-head:hover { background: var(--kolor-przycisk-hover); }
.chart-folder-head.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chart-folder-icon { width: 1em; color: var(--kolor-szary); }
.chart-folder-title { font-weight: 600; }
.chart-folder-count {
  margin-left: auto;
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
  color: var(--kolor-szary);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
}
.chart-folder .chart-tiles { margin-top: 0.6rem; }
.chart-empty-hint { color: var(--kolor-szary); font-size: 0.9rem; }

/* --- Powiększenie (modal) --- */
.chart-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.chart-modal {
  width: min(880px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--kolor-karta);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 12px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.chart-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.chart-modal-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--kolor-tekst); font-size: 1rem;
}
.chart-modal-close {
  flex: none; width: 34px; height: 34px;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: 8px;
  background: var(--kolor-przycisk-tlo);
  color: var(--kolor-tekst);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.chart-modal-close:hover { background: var(--kolor-przycisk-hover); }

@media (max-width: 480px) {
  .chart-tiles { grid-template-columns: 1fr; }
  .chart-axis-label, .chart-bar-label { font-size: 13px; }
}

/* Okienko wyboru przy imporcie kopii: „Dołącz" / „Zastąp wszystko" / „Anuluj". */
.import-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.import-modal {
  background: var(--kolor-karta); color: var(--kolor-tekst);
  border: 1px solid var(--kolor-akcent-ramka);
  border-radius: 14px; padding: 1.25rem;
  width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  /* A tall dialog (Settings) must scroll inside itself on a short screen:
     the backdrop is fixed, so the page behind it cannot scroll it into view. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.import-modal-title { margin: 0 0 0.5rem; font-size: 1.1rem; }
.import-modal-summary { margin: 0 0 0.25rem; }
.import-modal-question { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--kolor-szary); }
.import-btn {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--kolor-akcent-ramka);
  background: var(--kolor-akcent-tlo); color: var(--kolor-tekst);
  border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
  cursor: pointer;
}
.import-btn:hover { border-color: var(--kolor-glowny); }
a.import-btn { box-sizing: border-box; text-decoration: none; } /* link styled as a button (Settings → feedback) */
.import-btn-label { display: block; font-weight: 700; }
.import-btn-hint { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--kolor-szary); }
.import-btn-replace .import-btn-label { color: #b45309; } /* bursztyn = akcja groźna */
.import-btn-cancel {
  text-align: center; background: transparent; font-weight: 600;
  margin-top: 0.25rem; margin-bottom: 0;
}
.import-date-label { display: block; margin: 0.25rem 0 0.9rem; font-size: 0.9rem; }

/* ⚙️ Settings dialog — reuses the import-modal shell; rows are label + select. */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.9rem;
}
.settings-label { flex: 1; }
/* Name field: label above a full-width input, a small hint below. */
.settings-name { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.settings-input {
  padding: 0.45rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--kolor-akcent-ramka);
  background: var(--kolor-karta); color: var(--kolor-tekst);
  font: inherit;
}
.settings-hint { font-size: 0.78rem; color: var(--kolor-szary); }
.settings-install { margin: 0 0 0.9rem; line-height: 1.4; }
.settings-select {
  padding: 0.4rem 0.5rem; border-radius: 8px;
  border: 1px solid var(--kolor-akcent-ramka);
  background: var(--kolor-karta); color: var(--kolor-tekst);
  font: inherit;
}
.import-date-input {
  display: block; margin-top: 0.35rem; width: 100%;
  padding: 0.45rem 0.5rem; border-radius: 8px;
  border: 1px solid var(--kolor-akcent-ramka);
  background: var(--kolor-karta); color: var(--kolor-tekst);
}

/* ====== GOAL VIEW (10B): one big gauge + period lines + one chart ====== */
.gauge-big { margin-top: 0.4rem; }
.gauge-big .gauge { width: 170px; }
.gauge-big .gauge-svg { width: 170px; height: 170px; }
.gauge-big .gauge-center { top: 85px; }          /* środek koła = połowa 170px */
.gauge-big .gauge-num { font-size: 2.3rem; }
.gauge-big .gauge-label { font-size: 0.95rem; }
.gauge-center-stack { flex-direction: column; align-items: center; gap: 0.15rem; }
.gauge-plan { font-size: 0.75rem; font-weight: 600; color: var(--kolor-szary); }
.hero-sofar { text-align: center; margin-top: 0.4rem; font-size: 0.95rem; }
.hero-sofar strong { font-size: 1.05rem; }
.period-lines { margin-top: 0.7rem; }
.period-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;           /* not enough room: the value moves to its own line, never splits the title */
  gap: 0.2rem 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--kolor-obramowanie);
}
.period-line:first-child { border-top: none; }
.period-line-info { min-width: 0; }
.period-line-title { font-weight: 800; margin-right: 0.4rem; white-space: nowrap; }
.period-line-dates { font-size: 0.82rem; color: var(--kolor-szary); display: inline-block; white-space: nowrap; }
.period-line-val { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.period-line-val strong { font-size: 1.1rem; }
.period-line-plan, .period-line-noplan { font-size: 0.82rem; color: var(--kolor-szary); }
.goal-view-chart {
  margin-top: 0.8rem;
  border-top: 1px dashed var(--kolor-obramowanie);
  padding-top: 0.5rem;
}
.goal-view-chart .chart-type-group { margin-bottom: 0.5rem; }
.goal-view-chart .chart-svg { width: 100%; height: auto; }
/* One sentence on how to read the chart (changes with the line/bars switch) */
.goal-view-chart-hint { font-size: 0.82rem; color: var(--kolor-szary); margin: 0 0 0.4rem; line-height: 1.4; }
/* The plan route still ahead (future weeks): same dashed grey, fainter */
.chart-plan-future { opacity: 0.45; }
/* "today" marker through the current week */
.chart-now-line { stroke: var(--kolor-szary); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.chart-now-label { fill: var(--kolor-szary); font-size: 11px; text-anchor: middle; }

/* Per-item results as a text table with small bars (10B) */
.item-res-table { margin-top: 0.3rem; }
.item-res-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.88rem;
}
.item-res-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-res-bar {
  flex: 0 0 35%;
  height: 8px;
  border-radius: 999px;
  background: var(--kolor-przycisk-tlo);
  border: 1px solid var(--kolor-obramowanie);
  overflow: hidden;
}
.item-res-fill { display: block; height: 100%; width: 0; border-radius: 999px; }
.item-res-pct {
  flex: 0 0 3.2rem;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.item-res-pct.totals-over { color: var(--kolor-over); }

/* Goal details popup (ℹ️) */
.goal-info-row { padding: 0.45rem 0; border-top: 1px solid var(--kolor-obramowanie); }
.goal-info-row:first-of-type { border-top: none; }
.goal-info-label { font-size: 0.78rem; font-weight: 700; color: var(--kolor-szary); margin-bottom: 0.15rem; }
.goal-info-val { font-size: 0.95rem; }
.goal-info-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Add-item form (10C): Examples toggle + box, '+ sets' button */
.item-form-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.item-ex-btn.active { background: var(--kolor-przycisk-hover); }
.item-examples {
  margin: 0.4rem 0 0.7rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  background: var(--kolor-akcent-tlo);
  border: 1px solid var(--kolor-akcent-ramka);
  border-radius: 8px;
}
.item-examples-intro { margin: 0 0 0.4rem; }
.item-examples-list { margin: 0; padding-left: 1.2rem; }
.item-examples-list li { margin: 0.2rem 0; }
.param-edit-row .add-sets { white-space: nowrap; padding-left: 0.3rem; padding-right: 0.3rem; }
/* Param editor cells (item 5): each field in its own cell with a caption that only
   phones show, because there the row wraps and the shared header row stops lining up. */
.param-edit-row .pcell { flex: 1 1 6rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.param-edit-row .pcell.col-sets { flex: 0 0 4.5rem; }
.param-edit-row .pcell.col-min { flex: 0 0 4.5rem; }
.param-edit-head .col-min { flex: 0 0 4.5rem; }
.param-edit-row .pcell.col-time { flex: 0 0 8.5rem; }
.param-edit-row .pcell.col-trash { flex: 0 0 2.5rem; align-items: center; justify-content: flex-end; }
.param-edit-row .pcell > input { flex: none; width: 100%; box-sizing: border-box; }
.param-edit-row .pcell .time-ctl input { flex: 1 1 auto; width: auto; }
.param-edit-row:not(.param-edit-head) { align-items: flex-end; }
.pcell-lab { display: none; font-size: 0.75rem; font-weight: 600; color: var(--kolor-szary); }
@media (max-width: 760px) {
  .param-edit-head { display: none; }
  .pcell-lab { display: block; min-height: 1em; }
  .param-edit-row:not(.param-edit-head) {
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--kolor-obramowanie);
  }
}

/* Phone accordion in the goal view (scope item 2, 2026-10-18). Wider screens: no header,
   the body always shows. Phones: the body shows only while the section is open. */
.fold-head { display: none; }
@media (max-width: 760px) {
  .fold {
    margin-top: 0.7rem;
    border: 1px solid var(--kolor-obramowanie);
    border-radius: 10px;
    background: var(--kolor-karta);
  }
  .fold-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;             /* ~44 px tap target */
    padding: 0.5rem 0.8rem;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
  }
  .fold-arrow { color: var(--kolor-szary); transition: transform 0.15s; flex-shrink: 0; }
  .fold-open .fold-arrow { transform: rotate(90deg); }
  .fold:not(.fold-open) .fold-body { display: none; }
  .fold-body { padding: 0 0.8rem 0.7rem; }
  .fold-body > :first-child { margin-top: 0; }
  .fold-dup { display: none; }
}

/* The mood panel inside its phone fold: the fold already draws the card. */
@media (max-width: 760px) {
  .fold > .fold-body > .day-meta { margin: 0; border: 0; padding: 0; background: none; }
}

/* License (scope item 8): view-only banner + the key dialog */
.license-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin: 0.75rem 0; padding: 0.7rem 0.9rem;
  border: 1px solid var(--kolor-szary); border-radius: 10px; font-size: 0.92rem; line-height: 1.4;
}
.license-banner span { flex: 1 1 14rem; }
.license-msg { margin: 0.5rem 0; font-size: 0.88rem; line-height: 1.4; }
.license-msg.error { color: #dc2626; }
.license-input { width: 100%; box-sizing: border-box; margin: 0.25rem 0 0.6rem; }
.license-help { margin: 0.5rem 0; font-size: 0.85rem; line-height: 1.4; }
.license-link { display: inline-block; margin: 0.25rem 0.75rem 0.25rem 0; font-size: 0.88rem; color: var(--kolor-glowny); } /* accent, not browser blue: readable in dark mode */
.license-settings { margin: 0 0 0.9rem; }
.license-key-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; font-size: 0.88rem; }
.license-key-row code { overflow-wrap: anywhere; }
@media print { .license-banner { display: none; } }

/* Settings: privacy policy + terms links (2026-11-08) */
.settings-legal { text-align: center; margin: 4px 0 8px; }