:root{
  --primary:#00838d;
  --secondary:#00b0a6;
  --bg:#ffffff;
  --card:#f5f9f9;
  --text:#333;
  --radius:8px;
  --shadow:0 2px 6px rgba(0,0,0,.08);
  --danger:#c62828;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);display: flex;flex-direction: column;}
header{background:var(--primary);color:#fff;text-align:center;padding:1rem;}
h1{margin:0;font-size:clamp(1.4rem,3vw,2rem);}  
.container {
  max-width: 960px;
  margin-inline: auto;
  padding: 1rem;
  flex: 1 1 auto;
  width: 100%;
}
fieldset{
  border:1px solid #d0dede;
  background:var(--card);
  padding:1.4rem 1rem 1rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:1.5rem;
  position:relative;
}
legend{
  font-weight:600;
  color:var(--primary);
  background:var(--card);
  padding:0 .6rem;
  font-size:1rem;
  position:absolute;
  top:-0.7rem;
  left:0;
}
label{display:block;margin-top:0.7rem;font-size:0.95rem;}
input,select,option{ font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; width:100%;padding:0.45rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;}
.flex{display:flex;gap:1rem;flex-wrap:wrap;}
.snack-row,.meal-row{display:grid;grid-template-columns:1fr 100px 34px;gap:0.5rem;align-items:center;margin-top:0.5rem;}

/* Używana w sekcji zaawansowanych obliczeń wzrostowych. Pojedynczy wiersz pomiaru zawiera trzy pola:
 * wiek w latach, wzrost w cm oraz wagę w kg. Zastosowano grid z trzema równymi kolumnami,
 * aby pola były rozmieszczone obok siebie. Margines górny zapewnia odstęp między kolejnymi pomiarami. */
/* Każdy wpis historii wzrostu w sekcji zaawansowanej składa się z separatora,
 * górnego i dolnego wiersza. Kontener measure-row jest blokiem, aby
 * wiersze ustawiały się pionowo. */
.measure-row{
  display:block;
  margin:0.5rem 0 0 0;
}
/* Delikatna turkusowa pozioma linia oddzielająca wpisy. Jest widoczna
 * przed każdym wpisem, dzięki czemu historyczne pomiary są wyraźnie oddzielone. */
.measure-row-sep{
  height:3px;
  background:rgba(0, 118, 126, 0.25);
  margin:0.6rem 0;
}
/* Górny wiersz: trzy kolumny – wiek w latach, wiek w miesiącach i wzrost.
 * Używamy grid, aby elementy ustawiały się obok siebie z równymi odstępami. */
.measure-row-top{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0.5rem;
  align-items:end;
}
/* Dolny wiersz: dwie kolumny (waga, wiek kostny) oraz wąska kolumna na przycisk usuwania. */
.measure-row-bot{
  display:grid;
  grid-template-columns:1fr 1fr 34px;
  gap:0.5rem;
  align-items:end;
  margin-top:0.35rem;
}
/* Zmniejszamy rozmiar czcionki etykiet w wierszach pomiarowych. */
.measure-row-top label,
.measure-row-bot label{
  font-size:0.95rem;
}
/* Przycisk „×” (remove-measure) wyrównany do prawej w dolnym wierszu. */
.measure-row-bot .icon{
  align-self:center;
  justify-self:end;
}
button.icon{background:none;border:none;font-size:1.35rem;cursor:pointer;color:var(--danger);font-weight:900;line-height:1;}
button.icon:hover{opacity:0.8;}
button.add-row{background:var(--secondary);color:#fff;border:none;padding:0.45rem 0.9rem;border-radius:4px;cursor:pointer;margin-top:0.7rem;}
button.add-row:hover{background:var(--primary);}  
/*
 * Kontener wyników (#results) jest domyślnie ukryty i pojawia się
 * dopiero po wykonaniu obliczeń w formularzu. Aby zachować czytelny
 * odstęp między sekcją z numerem PWZ a pierwszą kartą z wynikami
 * (Centyle, BMI & Basal Metabolic Rate), dodajemy górny margines
 * równy 1 rem. Wartość ta odpowiada zalecanemu odstępowi pomiędzy
 * elementami w układzie siatki i utrzymuje spójność wizualną.
 */
#results{
  display:none;
  flex-direction:column;
  gap:1.5rem;
  /*
   * Usuwamy górny margines z kontenera wyników. Odstęp między polem PWZ
   * i pierwszą kartą z wynikami jest teraz kontrolowany przez
   * margin-bottom na #pwzContainer. Dzięki temu zachowujemy dokładnie
   * 1 rem przerwy w trybie lekarskim, bez podwajania odstępu.
   */
}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #d0dede;}  
.activity-time{margin:0.4rem 0;font-size:1.25rem;font-weight:700;}
table{width:100%;border-collapse:collapse;margin-top:0.6rem;}
th,td{border:1px solid #ddd;padding:0.6rem;text-align:center;font-size:0.95rem;}
th{background:var(--secondary);color:#fff;}
footer{margin-top:2rem;text-align:center;font-size:0.85rem;color:#666;padding:1rem 0;background:#fafafa;}  
@media(min-width:700px){
  .grid-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
    /* 
   * Domyślna wartość align-items w CSS Grid to „stretch”, co powodowało rozciąganie elementów 
   * w osi poprzecznej do pełnej wysokości. W tym projekcie takie zachowanie sprawiało, 
   * że karta „Centyle, BMI & Basal Metabolic Rate” była sztucznie wydłużana, aby zrównać się 
   * z kartą „Droga do normy BMI”. Zamiast tego ustawiamy align-items na „start”, 
   * dzięki czemu kolumny pozostają naturalnej wysokości.
   */
    .grid-two {
      align-items: start;
    }
}

/* Kontener łączący kartę Cole'a i drogę do normy BMI – kolumnowy układ wypełniający wysokość */
.norm-wrapper{
  display:flex;
  flex-direction:column;
  height:100%;
  /*
    Dodajemy odstęp między elementami wewnątrz kontenera „norm-wrapper”,
    który zawiera karty „Wskaźnik Cole'a” oraz „Droga do normy BMI”.
    Dzięki temu przestrzeń między tymi dwiema kartami będzie taka sama
    jak odstęp pomiędzy innymi kartami w układzie (domyślnie 1 rem w grid‑two).
  */
  gap:1rem;
}

/*
 * Lewa kolumna w sekcji wyników (grid-two).
 * Zawiera kartę BMI oraz sekcję obliczeń dla dzieci z zespołem Downa.
 * Używamy flexboxa z kierunkiem kolumnowym, aby elementy układały się
 * jeden pod drugim zarówno w układzie dwukolumnowym, jak i jednokolumnowym.
 * gap zapewnia równomierny odstęp między kartą BMI a blokiem DS.
 */
.left-column{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Krótkie wyjaśnienie pod wynikiem Wskaźnika Cole'a */
.cole-explanation{
  font-size:0.9rem;
  margin-top:0.5rem;
  line-height:1.3;
}

/*
 * Adnotacje dotyczące preferowanego wskaźnika (waga/długość zamiast BMI) w kartach
 * BMI oraz wskaźnika Cole'a. Zgodnie z nowymi wymaganiami powinny być
 * bardziej widoczne – zwiększamy czcionkę o ok. 50 % i nadajemy
 * ciemnopomarańczowy kolor. Pogrubienie wyróżnia treść względem innych
 * opisów w kartach. Margines górny pozostawiamy, aby zachować odstęp od
 * nagłówka karty. Uwaga: właściwość display jest ustawiana dynamicznie w JS.
 */
.wfl-reminder{
  font-size:1.3rem;
  color:#c75d00; /* ciemny pomarańczowy odcień */
  font-weight:600;
  line-height:1.4;
  margin-top:0.5rem;
}

/* center calorie burn block */
#timesCard{ text-align:center; }

/*
 * Guided tutorial overlay and styling
 *
 * When a user visits the application for the first time a simple tutorial
 * overlay guides them through filling out their age, weight and height.
 * The entire page is dimmed and only the current input field is
 * highlighted. A bubble explains each step and contains navigation
 * buttons. These styles ensure the overlay appears on top of all
 * existing content without affecting the underlying layout.
 */
.tutorial-overlay {
  /* Cover the whole viewport */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* The overlay no longer applies a dark background – dimming is handled via the highlight’s box‑shadow. */
  background: transparent;
  z-index: 9999;
  display: none;
  /* Prevent interactions with the page beneath while allowing
     interactions with highlighted inputs and the bubble */
  pointer-events: auto;
}

.tutorial-bubble {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  /* Fixed width so all steps appear consistent – width based on the longest message (step 4) */
  width: 280px;
  background: #ffffff;
  color: #111;
  padding: 1.2rem 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  text-align: left;
  line-height: 1.4;
  /* Ensure the bubble sits on top of the highlight (which uses z-index 10001) */
  z-index: 10002;
}

.tutorial-bubble strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--primary);
}

.tutorial-bubble p {
  margin: 0;
  font-size: 1rem;
}

.tutorial-bubble button {
  margin-top: 0.8rem;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Primary action for advancing through tutorial */
.tutorial-next {
  background: var(--primary);
  color: #fff;
  margin-right: 0.5rem;
}

/* Secondary action to skip the tutorial */
.tutorial-skip {
  background: #e0e0e0;
  color: #333;
}

/* Highlighted fields during the tutorial
   We raise the stacking context and draw a border around the input. */
.tutorial-highlight {
  position: relative;
  z-index: 10001 !important;
  /* Create a huge spread shadow that dims the rest of the page around the highlighted element */
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--primary), 0 0 0 6px rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  /* Make the highlighted region opaque so it doesn’t appear dimmed */
  background: rgba(255, 255, 255, 0.98);
  /* Ensure pointer events work on the highlighted element */
  pointer-events: auto;
}

/* Powiększone ramki wyników BMI i BMR */
/*
 * Ogólne ramki wyników w kartach. Każdy nowy moduł korzystający z klasy
 * .result-box odziedziczy białe tło, turkusową ramkę oraz delikatny cień,
 * podobnie jak karty DS i Zaawansowanych Obliczeń. Zachowujemy domyślny
 * margines i rozmiar czcionki; stosujemy globalne zmienne dla kolorów i
 * promienia zaokrąglenia, aby łatwo zmieniać wygląd w jednym miejscu.
 */
.result-box{
  border:2px solid var(--brand);
  border-radius:var(--radius);
  padding:1rem;
  margin:12px 0;
  font-size:1.75rem;
  background:var(--card-bg);
  text-align:center;
  box-shadow: var(--shadow-s);
}
/* Jednolity wygląd wszystkich wartości liczbowych (BMI, centyle itp.) */
.result-val{
  color: var(--primary);   /* turkus #00838d – zgodny z nagłówkiem „Dane użytkownika” */
  font-size: 1.75rem;       /* możesz zmieniać wg potrzeb */
  font-weight: 600;
}
/* --- legenda wewnątrz ramek fieldset --- */
fieldset{
  position:relative;
  padding-top:1.0rem;   /* miejsce na legendę */
}
legend{
  position:absolute;
  top:0;
  left:0;
  font-size:1.1rem;
  font-weight:600;
  padding:0 .5rem;
  background:var(--card); /* kolor karty, zakrywa linię ramki */
  border-radius:var(--radius);
}
/* zaokrąglone logo jak kontenery wyników */
header img {
  border-radius: var(--radius);
  display: inline-block; /* opcjonalnie, żeby mieć pewność */
}
/* Wyśrodkowanie nagłówka w karcie "Droga do normy BMI" */
#toNormCard h2 {
  text-align: center;
}

html, body{
  height:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  /* Ukryj poziomy pasek przewijania – zapobiega przesuwaniu w poziomie na małych urządzeniach */
  overflow-x:hidden;
}
/* =====================  UI REFINEMENTS – 2025‑06‑29  ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body{
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Buttons */
button,
input[type="button"],
input[type="submit"]{
  cursor:pointer;
  font:inherit;
  border:none;
  border-radius: var(--radius);
  padding: .55rem 1.1rem;
  background: var(--primary);
  color:#fff;
  transition:background .2s ease, box-shadow .2s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  background: var(--secondary);
  box-shadow: var(--shadow);
}
button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Icon (×) buttons inside rows */
button.icon{
  background:transparent;
  color:var(--danger);
  font-size:1.25rem;
  padding:.25rem .5rem;
  line-height:1;
}
button.icon:hover{
  background:rgba(198,40,40,.1);
}

/* Inputs & selects */
input[type="number"],
input[type="text"],
select{
  width:100%;
  max-width:100%;
  padding:.45rem .65rem;
  border:1px solid #d0d7da;
  border-radius:var(--radius);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,
select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(0,131,141,.25);
}

/* Table design */
table{
  width:100%;
  border-collapse:collapse;
}
th, td{
  padding:.6rem .75rem;
  text-align:left;
}
thead th{
  background:var(--primary);
  color:#fff;
  font-weight:600;
}
tbody tr:nth-child(odd){
  background:var(--card);
}
tbody tr:hover{
  background:rgba(0,176,166,.08);
}

/* Card shadow & radius unification */
/*
 * Ujednolicone tło i cień dla kart sekcyjnych i karty „Droga do normy BMI”.
 * Usunięcie selektora `.result-box` z poniższego bloku zapobiega
 * nadpisywaniu globalnych ustawień `.result-box` (białe tło z
 * turkusową ramką) dla ramek wynikowych. Dzięki temu nowe moduły
 * korzystające z klasy `.result-box` zachowają spójny styl.
 */
section.card,
#toNormCard{
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:1rem;
}

/* Responsive horizontal scrolling for wide tables */
.table-scroll{
  overflow-x:auto;
}
.table-scroll > table{
  min-width:520px;
}

/* Utility */
.text-center{ text-align:center; }
.text-right{ text-align:right; }

/* Mobile tweaks */
@media(max-width:600px){
  th,td{padding:.5rem;}
  button, input[type="button"], input[type="submit"]{
    width:100%;
    margin-top:.5rem;
  }
}

/* --- Dodatkowe style dla sekcji zaawansowanych obliczeń wzrostowych --- */
/* Ramka wyników w sekcji zaawansowanej: turkusowa obwódka, białe tło i zaokrąglone rogi. */
#advResults{
  border: 1px solid var(--primary);
  background: var(--bg);
  padding: 1rem;
  border-radius: var(--radius);
  /*
    Ustawiamy bazowy rozmiar czcionki w sekcji wyników zaawansowanych obliczeń wzrostowych.
    Dzięki temu wszystkie elementy (potencjał wzrostowy, tempo wzrastania, komunikaty oraz
    tabele) korzystają z ujednoliconego i powiększonego rozmiaru tekstu, co poprawia
    czytelność. Bez tego modyfikacja rozmiaru czcionki była stosowana tylko w przypadku
    ostrzeżeń, a zwykłe wyniki pozostawały mniejsze. 1.25 rem odpowiada powiększeniu
    o 25% względem domyślnej wartości.
  */
  font-size: 1.25rem;
}
/* Kontener z przyciskami na dole karty zaawansowanej. Przyciski są wyśrodkowane
   i oddzielone stałym odstępem 1,5 rem. */
.adv-buttons{
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ======================================================================== */

/* === RESULT HIGHLIGHT 2025‑06‑29 ===================== */
:root{
  --brand:#00838d;
  --brand-light:#00b0a6;
  --card-bg:#ffffff;
  --radius:12px;
  --shadow-s:0 1px 3px rgba(0,0,0,.08);
  --shadow-l:0 4px 22px rgba(0,0,0,.14);
  --anim-fast:150ms ease;
}

/* NAME LOCK STYLES */
#name[disabled], #advName[disabled]{
  background:#f1f5f5;
  color:#6b7a7a;
}

button,
input[type="submit"]{
  transition:transform var(--anim-fast),box-shadow var(--anim-fast);
}
button:hover,
input[type="submit"]:hover,
button:focus-visible,
input[type="submit"]:focus-visible{
  transform:translateY(-1px) scale(1.02);
  box-shadow:var(--shadow-l);
}

.result-card{
  background:var(--card-bg);
  border:2px solid var(--brand);
  border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  padding:1.25rem 1.5rem;
  position:relative;
  overflow:hidden;
}
.result-card.--pulse::after{
  content:'';
  position:absolute;inset:0;
  background:var(--brand-light);
  opacity:0;z-index:-1;
  animation:pulseBG 1s ease-out forwards;
}
@keyframes pulseBG{
  0%{opacity:.15;}
  100%{opacity:0;}
}

.result-number{
  font:600 1.75rem/1 "Inter",sans-serif;
  letter-spacing:-.02em;
  color:var(--brand);
  display:inline-flex;
  align-items:flex-end;
}
.result-number small{
  font-size:.65em;margin-left:.1em;color:#444;
}

@keyframes fadeSlideUp{
  0%{opacity:0;transform:translateY(12px);}
  100%{opacity:1;transform:translateY(0);}
}
.animate-in{
  animation:fadeSlideUp .45s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;}
}


/* === DATA CARDS 2025‑06‑29 ===================== */
.data-card{
  background:var(--card);
  border:2px solid var(--primary);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem 1rem;
  overflow:auto;
}

.data-card table{
  width:100%;
  border-collapse:collapse;
}

.data-card thead{
  background:var(--primary);
  color:#fff;
}

.data-card th,
.data-card td{
  padding:.4rem .6rem;
  text-align:center;
}

.data-card tr:nth-child(even){
  background:rgba(0,0,0,.03);
}

/* === PULSUJĄCE RAMKI OSTRZEŻEŃ (BMI, WHR, Plan) ======================= */
:root{
  /* szerokość „pierścienia” pulsu; możesz zmniejszyć do 8px */
  --pulse-ring: 12px;
}

/* Czerwony (otyłość, ostrzeżenia) */
@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(198,40,40,.30); }
  70%  { box-shadow: 0 0 0 var(--pulse-ring) rgba(198,40,40,.10); }
  100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); }
}

/* Ciemnopomarańczowy (niedowaga/nadwaga, sugestie WHR itp.) */
@keyframes pulseOrange {
  0%   { box-shadow: 0 0 0 0 rgba(199,93,0,.28); }
  70%  { box-shadow: 0 0 0 var(--pulse-ring) rgba(199,93,0,.10); }
  100% { box-shadow: 0 0 0 0 rgba(199,93,0,0); }
}

/* Klasy narzędziowe – dobierz kolor + tryb pracy */
.pulse-danger-infinite  { animation: pulseRed    1.25s ease-in-out infinite; will-change: box-shadow; }
.pulse-warning-infinite { animation: pulseOrange 1.25s ease-in-out infinite; will-change: box-shadow; }

/* Jednorazowy „flash” 2 s – kończy się stanem bez poświaty */
.pulse-danger-2s  { animation: pulseRed    2s ease-in-out 1; will-change: box-shadow; }
.pulse-warning-2s { animation: pulseOrange 2s ease-in-out 1; will-change: box-shadow; }

/* Upewnij się, że pseudo-cienie nie „zlewają” się z już istniejącym cieniem kart */
.result-card.pulse-danger-infinite,
.result-card.pulse-warning-infinite,
.result-card.pulse-danger-2s,
.result-card.pulse-warning-2s {
  /* celowo nie definiujemy dodatkowego box-shadow, wykorzystujemy animowane cienie */
}

/* Szacunek dla preferencji systemowych: wyłącz wszystkie animacje pulsów */
@media (prefers-reduced-motion: reduce) {
  .pulse-danger-infinite,
  .pulse-warning-infinite,
  .pulse-danger-2s,
  .pulse-warning-2s {
    animation: none !important;
  }
}

/* === PLAN RESULTS TWO-COLUMN LAYOUT 2025‑06‑30 === */
#planResults{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

/*
 * Ujednolicenie wyglądu wybranych przycisków (2025‑08‑29)
 *
 * W aplikacji występują różne przyciski wywołujące dodatkowe sekcje
 * (np. zaawansowane obliczenia wzrostowe, generowanie siatki
 * centylowej w karcie „Centyle, BMI & Basal Metabolic Rate” oraz
 * włączenie modułu szacowanego spożycia energii). Dotychczas miały one
 * zdefiniowane style inline (odrębne zaokrąglenia, odstępy i szerokości),
 * co powodowało niespójność z przyciskiem „Chcesz zobaczyć jaka jest
 * idealna waga przy twoim wzroście? Kliknij”. Aby ujednolicić wygląd
 * tych elementów, nadpisujemy wybrane właściwości dla poszczególnych
 * identyfikatorów. Korzystamy z wartości zmiennych CSS (m.in. 
 * --radius, --primary) tak jak w ogólnym stylu przycisków, dzięki czemu
 * zaokrąglenie i kolorystyka pozostają spójne. Zastosowano
 * !important tam, gdzie konieczne jest przysłonięcie stylów inline.
 */
#toggleAdvancedGrowth,
#generateCentileChart,
#toggleIntakeCard,
#toggleDownSyndrome,
#generateDsCentileChart,
#toggleCircSection {
  /* Szerokość dopasowana do kontenera przycisku – pełna długość wiersza */
  width: 100%;
  /* Ujednolicone odstępy wewnętrzne tak jak w przycisku idealnej wagi */
  padding: .55rem 1.1rem !important;
  /* Ujednolicone promienie zaokrąglenia rogów */
  border-radius: var(--radius) !important;
  /* Kolorystyka odpowiada przyciskowi „idealnej wagi” */
  background: var(--primary) !important;
  color: #fff !important;
  /* Stały odstęp pionowy – usuwa margin:auto z inline */
  margin: .5rem 0 !important;
}

/*
 * Ujednolicony efekt najechania kursorem na przyciski wywołujące dodatkowe sekcje
 * (2025‑09‑17).
 *
 * Poniższa reguła dodaje efekt hover do przycisków odpowiadających za
 * zaawansowane obliczenia wzrostowe, generowanie siatki centylowej
 * (zarówno w głównej karcie, jak i w module dla dzieci z zespołem Downa),
 * włączanie modułu szacowanego spożycia energii oraz obliczenia dla dzieci
 * z zespołem Downa. Wcześniej te elementy miały ustawiony kolor tła z
 * użyciem !important, co powodowało, że globalny efekt hover (zmiana
 * koloru na var(--secondary) oraz delikatne uniesienie) nie był stosowany.
 * Dlatego nadpisujemy kolor tła za pomocą !important w stanie :hover
 * oraz kopiujemy transformację i cień z ogólnego stylu przycisków, aby
 * zapewnić spójne wrażenia wizualne.
 */
#toggleAdvancedGrowth:hover,
#generateCentileChart:hover,
#toggleIntakeCard:hover,
#toggleDownSyndrome:hover,
#generateDsCentileChart:hover,
#toggleCircSection:hover {
  /* Zmieniamy kolor tła na jaśniejszy turkus, aby wskazać interakcję */
  background: var(--secondary) !important;
  /* Dodajemy subtelne uniesienie i skalowanie jak w przyciskach globalnych */
  transform: translateY(-1px) scale(1.02);
  /* Stosujemy większy cień dla wyraźnego odcięcia od tła */
  box-shadow: var(--shadow-l);
}
@media(max-width:600px){
  #planResults{
    grid-template-columns:1fr;
  }
}

/* === BMI & BMR BLOCK FRAME PATCH 2025‑06‑30 === */
#bmiCard{
  border:1px solid #d0dede;
}

/* === Szacowane spożycie energii – ujednolicenie wyglądu karty i wyników (2025‑08‑30) === */
/*
 * Domyślnie karta szacowanego spożycia energii (#intakeCard) korzysta z klasy
 * .result-card, która nadaje jej turkusową, grubą ramkę i białe tło. Aby
 * zachować spójność z pozostałymi kartami w aplikacji (np. kartą wskaźnika Cole'a
 * czy spalania kalorii), karty te mają delikatne, jasnoszare obramowanie oraz
 * lekko turkusowe tło definiowane przez zmienną --card. Poniższa reguła
 * nadpisuje wygląd dla #intakeCard tak, aby karta miała subtelną ramkę i
 * tło spójne z innymi kartami. Jednocześnie zachowujemy dotychczasowe
 * zaokrąglenie i cień.
 */
#intakeCard{
  background: var(--card) !important;  /* delikatny turkusowy odcień jak inne karty */
  border: 1px solid #d0dede !important; /* subtelna ramka jak w pozostałych kartach */
  box-shadow: var(--shadow) !important; /* zachowujemy spójny cień */
}

/*
 * Pole z wynikami w karcie szacowanego spożycia energii (#intakeResults)
 * powinno być wyróżnione turkusową ramką i białym tłem, tak jak wyniki
 * prezentowane w innych modułach (np. .result-card z białym wnętrzem).
 * Poniżej nadajemy temu kontenerowi grubszą ramkę w kolorze głównego
 * akcentu oraz białe tło. Zastosowano border-radius zgodny ze zmienną
 * --radius, aby zachować spójność z pozostałymi elementami. Użycie
 * !important gwarantuje, że reguła przysłoni wcześniejszą definicję
 * .result-box, która stosowała szare obramowanie i jasne tło.
 */
#intakeResults{
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--primary) !important;
  background: var(--card-bg) !important; /* białe tło dla czytelności wyników */
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* === HOTFIX 2025‑08‑31 – Pulsująca ramka dla karty szacowanego spożycia energii ===
 *
 * Aby ramka pola wyników (#intakeResults) pulsowała tak samo jak w kartach BMI czy WHR,
 * oraz zmieniała kolor w zależności od poziomu alertu (pomarańczowy lub czerwony),
 * używamy pseudo‑elementu ::after. Jest to konieczne, ponieważ wcześniejsze reguły
 * ustawiają box-shadow i border z !important, co uniemożliwia nadpisywanie tych
 * właściwości przez animacje z klas .pulse-danger-infinite / .pulse-warning-infinite.
 * Pseudo-element pozwala narysować „pierścień” animacji niezależnie od istniejącego
 * cienia i obramowania.
 */
#intakeResults{
  position: relative;
}

/* Kolor obramowania w zależności od alertu. Pomarańczowy ma niższy priorytet niż czerwony. */
#intakeResults.bmi-warning{ border-color: #c75d00 !important; }
#intakeResults.bmi-danger{  border-color: var(--danger) !important; }

/* Wspólny pseudo‑element dla pierścienia pulsu. Wykorzystuje te same animacje,
 * co w kartach BMI (pulseRed i pulseOrange), ale animuje ::after, aby nie kolidować
 * z box-shadow elementu #intakeResults. */
#intakeResults.pulse-warning-infinite::after,
#intakeResults.pulse-warning-2s::after,
#intakeResults.pulse-danger-infinite::after,
#intakeResults.pulse-danger-2s::after{
  content: "";
  position: absolute;
  inset:0;
  border-radius: inherit;
  pointer-events: none;
}

#intakeResults.pulse-warning-infinite::after{
  animation: pulseOrange 1.25s ease-in-out infinite;
}
#intakeResults.pulse-warning-2s::after{
  animation: pulseOrange 2s ease-in-out 1;
}
#intakeResults.pulse-danger-infinite::after{
  animation: pulseRed 1.25s ease-in-out infinite;
}
#intakeResults.pulse-danger-2s::after{
  animation: pulseRed 2s ease-in-out 1;
}

/* Wyłącz puls, jeśli użytkownik preferuje ograniczenie ruchu (preferuje reduced motion).
 * Do kart poza szacowanym spożyciem energii zachowujemy szacunek do preferencji
 * użytkownika, natomiast dla karty spożycia energii utrzymujemy pulsowanie jak
 * w karcie BMI nawet przy redukcji ruchu, aby ostrzeżenia były bardziej
 * widoczne.  Poniższy blok definiuje zachowanie dla #intakeResults w trybie
 * prefers-reduced-motion: zamiast wyłączać animację, ustawiamy identyczne
 * animacje jak w normalnym trybie.  Dzięki temu ramka szacowanego
 * spożycia energii będzie pulsować niezależnie od systemowego ustawienia
 * redukcji ruchu (co jest zgodne z wymaganiami).  Pozostałe elementy w
 * aplikacji nadal respektują prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  #intakeResults.pulse-warning-infinite::after { animation: pulseOrange 1.25s ease-in-out infinite !important; }
  #intakeResults.pulse-warning-2s::after       { animation: pulseOrange 2s ease-in-out 1 !important; }
  #intakeResults.pulse-danger-infinite::after  { animation: pulseRed    1.25s ease-in-out infinite !important; }
  #intakeResults.pulse-danger-2s::after        { animation: pulseRed    2s ease-in-out 1 !important; }
}

/* Styl komunikatów wewnątrz pola wyniku – spójny z innymi kartami. */
#intakeResults .intake-alert{
  margin-top: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
}
#intakeResults .intake-alert.warn{   color: #c75d00; }
#intakeResults .intake-alert.danger{ color: var(--danger); }
#intakeResults .intake-reasons{ margin: .25rem 0 .4rem 1.2rem; padding: 0; }
#intakeResults .intake-reasons li{ margin: .1rem 0; }

/*
 * HOTFIX 2025‑09‑17 – Pulsująca ramka dla pola Wskaźnik Cole'a
 *
 * Użytkownicy zgłaszali, że w karcie „Wskaźnik Cole'a” ramka
 * wyniku zmienia kolor (pomarańczowy/czerwony), ale nie widać
 * efektu pulsowania, mimo że pulsowanie działa poprawnie w innych
 * modułach (np. WHR czy zaawansowane obliczenia wzrostowe). Przyczyną
 * jest kombinacja klas .result-card oraz animacji box‑shadow, która
 * w niektórych przeglądarkach uniemożliwia wyświetlenie pierścienia
 * pulsu. Aby zapewnić spójne zachowanie, stosujemy pseudo‑element
 * ::after, który rysuje animowany „pierścień” niezależnie od
 * istniejącego cienia i obramowania elementu. Podobnie jak w
 * #intakeResults, ustawiamy border‑color dla klas .bmi-warning i
 * .bmi-danger, a puls animowany jest tylko przez pseudo‑element.
 */

/* Upewnij się, że kontener wyniku Cole’a tworzy własny kontekst pozycyjny */
#coleInfo{
  position: relative;
}

/* Kolor obramowania w zależności od kategorii Cole’a */
#coleInfo.bmi-warning{ border-color: #c75d00 !important; }
#coleInfo.bmi-danger{  border-color: var(--danger) !important; }

/* Pseudo‑element dla pulsu: korzystamy z tych samych animacji co w kartach BMI/WHR */
#coleInfo.pulse-warning-infinite::after,
#coleInfo.pulse-warning-2s::after,
#coleInfo.pulse-danger-infinite::after,
#coleInfo.pulse-danger-2s::after{
  content: "";
  position: absolute;
  inset:0;
  border-radius: inherit;
  pointer-events: none;
}
#coleInfo.pulse-warning-infinite::after{
  animation: pulseOrange 1.25s ease-in-out infinite;
}
#coleInfo.pulse-warning-2s::after{
  animation: pulseOrange 2s ease-in-out 1;
}
#coleInfo.pulse-danger-infinite::after{
  animation: pulseRed 1.25s ease-in-out infinite;
}
#coleInfo.pulse-danger-2s::after{
  animation: pulseRed 2s ease-in-out 1;
}

/* ====================
 * Wyniki ciśnienia tętniczego (RR)
 *
 * Aby zapewnić spójność z polem wyniku Wskaźnika Cole'a, definiujemy
 * specjalne style dla kontenera #bpResult. Tak jak w karcie Cole'a,
 * zmieniamy kolor obramowania w zależności od stanu oraz używamy
 * pseudo‑elementu ::after do animowanego pierścienia. Ostrzeżenie
 * (wysokie prawidłowe ciśnienie) przyjmuje ciemnopomarańczowy kolor
 * (#c75d00), a nadciśnienie (stopnie I i II) kolor niebezpieczny
 * (var(--danger)). Klasy .pulse-warning-* i .pulse-danger-* sterują
 * animacją pulsowania, a w razie preferencji redukcji ruchu
 * zachowujemy animacje jak w pozostałych kartach.
 */

#bpResult {
  position: relative;
}

/* Kolor obramowania dla stanu ostrzegawczego i niebezpiecznego */
#bpResult.rr-warning { border-color: #c75d00 !important; }
#bpResult.rr-danger  { border-color: var(--danger) !important; }

/* Animowany pierścień pulsowania – kopiujemy logikę z pola Cole'a */
#bpResult.pulse-warning-infinite::after,
#bpResult.pulse-warning-2s::after,
#bpResult.pulse-danger-infinite::after,
#bpResult.pulse-danger-2s::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
#bpResult.pulse-warning-infinite::after{
  animation: pulseOrange 1.25s ease-in-out infinite;
}
#bpResult.pulse-warning-2s::after{
  animation: pulseOrange 2s ease-in-out 1;
}
#bpResult.pulse-danger-infinite::after{
  animation: pulseRed 1.25s ease-in-out infinite;
}
#bpResult.pulse-danger-2s::after{
  animation: pulseRed 2s ease-in-out 1;
}

/* Zachowujemy animacje pulsów przy preferencji ograniczonego ruchu */
@media (prefers-reduced-motion: reduce) {
  #bpResult.pulse-warning-infinite::after { animation: pulseOrange 1.25s ease-in-out infinite !important; }
  #bpResult.pulse-warning-2s::after      { animation: pulseOrange 2s ease-in-out 1        !important; }
  #bpResult.pulse-danger-infinite::after { animation: pulseRed    1.25s ease-in-out infinite !important; }
  #bpResult.pulse-danger-2s::after       { animation: pulseRed    2s ease-in-out 1        !important; }
}

/* =======================
 * Dodatkowe style modułu ciśnienia (RR)
 *
 * Definiujemy wygląd bloku z objaśnieniami i źródłem oraz placeholdera,
 * który pojawia się w polu wyników, zanim użytkownik poda wartości ciśnienia.
 */
.bp-definition{
  font-size:0.9rem;
  margin-top:0.6rem;
  line-height:1.35;
}
.bp-definition ul{
  margin:0.4rem 0 0 1.2rem;
  padding-left:0;
}
.bp-definition li{
  margin-bottom:0.2rem;
}
.bp-definition .source-note{
  font-size:0.85rem;
  margin-top:0.4rem;
  color:#555;
}
.bp-placeholder{
  color:#666;
  font-style:italic;
}

/* =======================
 * Dodatkowe style modułu obwodów głowy i klatki piersiowej
 *
 * Pola wyniku dla obwodu głowy (#circHeadResult) i klatki piersiowej (#circChestResult)
 * dziedziczą wygląd z .result-box, ale mogą zmieniać kolor obramowania w zależności
 * od klasy ostrzeżeniowej (rr-warning lub rr-danger).  Animowane pierścienie
 * pulsowania są kopiowane z modułu ciśnienia, aby zapewnić spójność wizualną.
 */
#circHeadResult,
#circChestResult{
  position: relative;
}

/* Kolor obramowania dla stanu ostrzegawczego i niebezpiecznego w module obwodów */
#circHeadResult.rr-warning,
#circChestResult.rr-warning{ border-color:#c75d00 !important; }
#circHeadResult.rr-danger,
#circChestResult.rr-danger{ border-color:var(--danger) !important; }

/* Animowany pierścień pulsowania – spójny z modułem ciśnienia */
#circHeadResult.pulse-warning-infinite::after,
#circHeadResult.pulse-warning-2s::after,
#circHeadResult.pulse-danger-infinite::after,
#circHeadResult.pulse-danger-2s::after,
#circChestResult.pulse-warning-infinite::after,
#circChestResult.pulse-warning-2s::after,
#circChestResult.pulse-danger-infinite::after,
#circChestResult.pulse-danger-2s::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
#circHeadResult.pulse-warning-infinite::after,
#circChestResult.pulse-warning-infinite::after{
  animation:pulseOrange 1.25s ease-in-out infinite;
}
#circHeadResult.pulse-warning-2s::after,
#circChestResult.pulse-warning-2s::after{
  animation:pulseOrange 2s ease-in-out 1;
}
#circHeadResult.pulse-danger-infinite::after,
#circChestResult.pulse-danger-infinite::after{
  animation:pulseRed 1.25s ease-in-out infinite;
}
#circHeadResult.pulse-danger-2s::after,
#circChestResult.pulse-danger-2s::after{
  animation:pulseRed 2s ease-in-out 1;
}

/* Definicje i placeholdery w modułach obwodów */
.circ-definition{
  font-size:0.9rem;
  margin-top:0.6rem;
  line-height:1.35;
}
.circ-definition ul{
  margin:0.4rem 0 0 1.2rem;
  padding-left:0;
}
.circ-definition li{
  margin-bottom:0.2rem;
}
.circ-definition .source-note{
  font-size:0.85rem;
  margin-top:0.4rem;
  color:#555;
}
.circ-placeholder{
  color:#666;
  font-style:italic;
}

/* Jeżeli użytkownik preferuje redukcję ruchu, zachowujemy puls w karcie Cole’a
 * analogicznie do karty szacowanego spożycia energii. Dzięki temu ostrzegawcze
 * informacje pozostają widoczne nawet przy „prefers-reduced-motion: reduce”. */
@media (prefers-reduced-motion: reduce) {
  #coleInfo.pulse-warning-infinite::after { animation: pulseOrange 1.25s ease-in-out infinite !important; }
  #coleInfo.pulse-warning-2s::after       { animation: pulseOrange 2s ease-in-out 1        !important; }
  #coleInfo.pulse-danger-infinite::after  { animation: pulseRed    1.25s ease-in-out infinite !important; }
  #coleInfo.pulse-danger-2s::after        { animation: pulseRed    2s ease-in-out 1        !important; }
}

/*
 * Adnotacje przypominające o zaleceniach Amerykańskiej Akademii Pediatrii dotyczących
 * stosowania wskaźnika waga/długość (WFL) u dzieci <2 lat. Elementy z klasą
 * `.wfl-reminder` są wyświetlane pod kartą BMI i wskaźnikiem Cole’a, aby
 * użytkownik wiedział, że w przypadku niemowląt ocena masy powinna opierać się
 * na WFL, a BMI jest dedykowane dzieciom ≥2 lat. Rozmiar, odstępy i kolor
 * są spójne z pozostałymi notatkami w aplikacji.
 */
/*
 * Aktualizacja stylu adnotacji o preferowanym wskaźniku (WFL vs BMI).
 * Zgodnie z wymaganiami zwiększamy czcionkę o 50 % względem pierwotnej
 * (z 0.85 rem do ok. 1.3 rem), pogrubiamy tekst i zmieniamy kolor na
 * ciemnopomarańczowy. Pozostawiamy margines górny, aby zachować
 * odstęp od nagłówka karty. Linie ustawiamy nieco większą wysokość,
 * aby tekst był czytelny. Kolor oparty jest na niestandardowym odcieniu,
 * a nie na głównym turkusowym.
 */
.wfl-reminder{
  font-size:1.3rem;
  line-height:1.4;
  margin-top:0.5rem;
  font-weight:600;
  color:#c75d00;
}

/* === Ujednolicenie obramowania karty Wskaźnika Cole'a === */
/*
  Aby karta „Wskaźnik Cole'a” (coleCard) miała identyczne obramowanie
  jak pozostałe karty (np. „Centyle, BMI & Basal Metabolic Rate” i
  „Droga do normy BMI”), ustawiamy jej subtelną, szarą ramkę. Dzięki temu
  całość interfejsu wygląda spójnie, a intensywny turkusowy obrys
  wykorzystywany wcześniej w tej karcie zostaje zastąpiony neutralnym
  kolorem, jak w innych kartach.
*/
#coleCard{
  border:1px solid #d0dede;
}
/* === WHR CARD FRAME – identyczna ramka jak w #coleCard === */
#whrCard{
  border: 1px solid #d0dede;
}

/* === WHR RESULT BOX STYLE OVERRIDE ===
 *
 * W karcie „Wskaźnik talia-biodra (WHR)” pole z wynikiem (element #whrInfo)
 * powinno mieć ten sam wygląd, co inne pola wynikowe w aplikacji.
 * Inne karty używają klasy .result-card w połączeniu z .result-box, co
 * daje białe tło i turkusową ramkę. Element #whrInfo ma jedynie klasę
 * .result-box, więc tutaj nadpisujemy jego obramowanie i tło, aby
 * odpowiadały stylowi .result-card. Ostrzegawcze pola wewnątrz (#whrInfo)
 * mają własne klasy (np. .plan-warning-card) i pozostają bez zmian.
 */
#whrInfo{
  /* Dwupikselowa ramka jak w .result-card */
  border-width: 2px;
  border-style: solid;
  border-color: var(--primary);
  /* Białe tło jak w kartach wynikowych */
  background: var(--card-bg);
}
/* === TIMES CARD FRAME PATCH 2025‑06‑30 === */
#timesCard{
  border:1px solid #d0dede;
}

/* === PATCH 2025‑07‑01 – PLAN & 50 centyl UI === */
.small-50{font-size:.1.5rem;font-weight:600;}
.plan-time,.plan-month,.plan-year{font-size:1.5rem;font-weight:600;display:inline-block;margin-bottom:2px;}

/* === PLAN CARD – override font size ONLY in plan columns (added 2025‑07‑01) === */
/*
 * Rozmiar czcionki w komórkach planu odchudzania dopasowujemy do pozostałych
 * wartości (BMI, BMR). Ustawiamy 1.75 rem, tak jak dla `.result-val`, oraz
 * zachowujemy pogrubienie.
 */
.plan-col .result-number{
    font-size: 1.75rem;
    font-weight: 600;
}

/*
 * Wspólny styl dla kontenerów z wynikami w karcie „Plan odchudzania”.
 * Dzięki klasie `.plan-result-card` można łatwo modyfikować wygląd
 * trzech pól: „Zalecana kaloryczność”, „Do górnej granicy BMI” oraz
 * „Do BMI 50 centyla”.
 */
.plan-result-card{
    text-align: center;
}
.plan-result-card h3{
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.plan-result-card .result-number{
    font-size: 2.0rem;
    font-weight: 600;
}
.plan-result-card small{
    font-size: 1.5rem;
}

/*
 * Ostrzeżenie o intensywnej diecie – wyświetlane pod kalorycznością w karcie planu odchudzania.
 * Tekst powinien być w kolorze czerwonym (var(--danger)) i mieć font o 0.25 rem mniejszy
 * niż nagłówek kart planu (1.75 rem). Dzięki temu zachowujemy hierarchię wizualną.
 */
.diet-warning {
    color: var(--danger);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0.4rem;
    line-height: 1.2;
}

/* Klasa dla komunikatów dotyczących centyli wagi, wzrostu i BMI.
   Utrzymuje czerwony kolor, pogrubienie i niewielki margines górny.
   Linki w środku dziedziczą kolor i są podkreślone. */
.centile-warning {
    color: var(--danger);
    font-weight: 600;
    margin-top: 0.4rem;
    line-height: 1.3;
}
.centile-warning a {
    color: inherit;
    text-decoration: underline;
    font-weight: inherit;
}

/*
 * Ostrzeżenie o konieczności monitorowania wzrastania dziecka
 * (zakres centylowy 3–10). Używamy ciemnopomarańczowego koloru,
 * zgodnego z komunikatami w karcie WHR. Pozostawiamy ten sam
 * margines i waga czcionki jak w .centile-warning, aby zachować
 * spójność. W razie użycia linków wewnątrz komunikatu dziedziczą
 * one kolor i są podkreślone.
 */
.centile-monitor-warning {
    color: var(--notice-orange);
    font-weight: 600;
    margin-top: 0.4rem;
    line-height: 1.3;
}
.centile-monitor-warning a {
    color: inherit;
    text-decoration: underline;
    font-weight: inherit;
}

/* Oznaczenie rekomendowanej diety w liście wyboru diety.
   Ustawiamy kolor na główny turkusowy, aby wyróżnić rekomendację. */
#dietLevel option.recommended {
  color: var(--primary);
}

/* Nota rekomendowanej diety – informuje użytkownika, która dieta jest sugerowana przez kalkulator.
   Używana w planie odchudzania, nad wynikami. */
.diet-recommend-note {
    font-size: 0.9rem;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}
.plan-steps{
  /* Arrange the two steps vertically with comfortable spacing */
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:stretch;
}
.plan-step h3{
  /* Heading for each step */
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:0.5rem;
  color:var(--primary);
}
.plan-step select{
  /* Ensure selects expand to full width within their container */
  width:100%;
  max-width:100%;
  padding:.6rem .8rem;
  border:1px solid #d0d7da;
  border-radius:var(--radius);
  font-size:1rem;
}
.plan-desc{
  /* Description text shown under PAL and diet selectors */
  margin-top:.4rem;
  font-size:0.95rem;
  line-height:1.3;
  white-space:pre-line;
  max-width:100%;
  color:var(--text);
}
.calorie-info{
  /* Calorie info emphasised under diet selector */
  margin-top:.5rem;
  text-align:center;
  font-weight:600;
  font-size:1.2rem;
  color:var(--primary);
}
#errorBox {
  color: var(--primary);
  /* ten sam kolor co legendy */
  font-weight: 600;
  font-size: 1.4rem;
  text-align: center;
  /* wyśrodkowanie */
  margin: 1rem 0;
  display: none;
}
/* Fieldset ma zajmować najwyżej 50 % okna, ale na małych ekranach pełną szerokość */
.half {
  flex: 0 1 50%;
  /* pod Flexboxem – zajmij max 50 % */
  max-width: 50%;
  margin: 0 auto;   /* ⬅︎  WYŚRODKOWANIE  */
}
@media (max-width: 600px) {
  .half {
    flex: 1 1 100%;
    /* na telefonach / wąskich oknach – wróć do pełnej szerokości */
    max-width: 100%;
    margin: 0;       /* pełna szerokość – auto niepotrzebne */
  }
}
#toNormCard.result-card{ border: 1px solid #d0dede;}

/* === Ujednolicenie wyglądu formularza „Dane użytkownika” do kart wynikowych === */
.user-card{
  font-family: 'Inter', sans-serif;   /* ten sam krój co karty wyników */
  font-size: 1.1rem;                  /* większa baza (karty mają ~1.1rem) */
  line-height: 1.3;
  box-shadow: var(--shadow);          /* ten sam cień co .result-card */
  border: 1px solid #d0dede;          /* subtelna ramka jak karty */
  border-radius: var(--radius);
}

/* legend jako nagłówek karty */
.user-card legend{
  font-size: 1.25rem;
  font-weight: 600;
  padding-inline: .4rem;
}

/* większe pola input/select wewnątrz .user-card */
.user-card input,
.user-card select{
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  padding: .65rem .85rem;     /* było 0.45 / 0.65 – teraz jak w kartach */
  border-radius: .4rem;
  border: 1px solid #c0c8c8;
}
.plan-card {
  background: var(--card);
  /* Jasne tło (np. białe) */
  border-radius: var(--radius);
  /* Zaokrąglone rogi */
  padding: 1.25rem 1.5rem;
  /* Odstępy wewnętrzne */
  box-shadow: var(--shadow);
  /* Cień wokół karty */
  font-family: 'Inter', sans-serif;
  /* Font taki jak w kartach wyników */
  font-size: 1.1rem;
  /* Rozmiar tekstu jak w kartach wyników */
  border: 1px solid #d0dede; /* Subtelna ramka */
}
/* rozdziela wizualnie karty */
#timesCard {
  margin-bottom: 1.5rem;
} /* 1 rem ≈ 16 px – zmień wg gustu */
/* tabela w karcie Spalanie kalorii – wygląd jak w BMR / Normie BMI */
#timesCard table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

/* === ŹRÓDŁA DANYCH FIELDSET ADJUSTMENTS 2025‑07‑24 === */
/*
 * Blok źródeł danych znajduje się na końcu formularza i domyślnie jest
 * ukrywany w JS. Gdy pojawia się w interfejsie, jego treść jest bardzo
 * długa i zawiera liczne nazwiska z niełamanymi spacjami (&nbsp;), co
 * mogło powodować rozszerzanie całego kontenera poza szerokość kolumn
 * kart wyników. Aby zapobiec poziomemu przewijaniu lub łamaniu układu,
 * ograniczamy szerokość fieldsetu do szerokości swojego rodzica i
 * umożliwiamy łamanie długich łańcuchów w dowolnym miejscu. Dodatkowo
 * zwiększamy odstęp nad blokiem źródeł, aby wizualnie oddzielić go od
 * poprzednich kart i fieldsetów.
 */
#sourceFieldset {
  max-width: 100%;        /* nigdy nie przekraczaj szerokości kontenera */
  overflow-wrap: anywhere;/* pozwól łamać długie słowa w dowolnym miejscu */
  word-break: break-word; /* łamie wyrazy, jeśli zawierają twarde spacje */
  margin-top: 1.5rem;       /* większy odstęp od poprzednich bloków */
}

/* Na szerszych ekranach siatka wyników (grid-two) składa się z dwóch kolumn
   o szerokości 50% każda i przerwy 1rem między nimi. Aby dopasować szerokość
   sekcji źródeł danych do szerokości pojedynczej kolumny, ograniczamy jej
   maksymalną szerokość do połowy kontenera pomniejszonej o połowę odstępu.
   Na wąskich ekranach (gdzie wyniki układają się w jeden słupek) blok
   źródeł może zajmować całą szerokość rodzica. */
@media (min-width: 700px) {
  #sourceFieldset {
    /* Ustaw górną granicę szerokości na połowę kontenera; centracja w osi poziomej */
    max-width: 100%;
    /* Wyrównaj blok źródeł do lewej krawędzi kontenera, aby pasował do kolumn */
    margin-left: 0;
    margin-right: auto;
  }
}

#timesCard th {
  text-align: left;
  padding: .6rem .75rem;
  font-weight: 600;
}

#timesCard td {
  text-align: left;
  padding: .6rem .75rem;
  background: #fff;
  /* białe tło komórek */
  color: #000;
}
/* ===== Sub‑headline under H2 (uniwersalne) ===== */
.subhead {
  display: block;
  margin-top: 2px;
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--text-light, #555);
  line-height: 1.2;
  text-align: center;
}
/* ===== Legendy w sekcjach Przekąski / Dania obiadowe ===== */
.food-field {
  /* potrzebne, by legend mógł być absolutny */
  position: relative;
}

.food-field legend {
  position: absolute;
  top: 0.1em;
  /* lekko nad ramką */
  left: 1rem;
  /* wyrównanie do lewej krawędzi treści */
  padding: 0 .45rem;
  background: var(--card);
  /* to jest takie lekko zielonkawe tło jak potrzeba */
  font-weight: 600;
  line-height: 1.2;
}
/* ===== KARTA ŁĄCZNA KALORYCZNOŚĆ ===================================== */
.total-card {
  --pad: 1rem;
  /* wygodny „gałkowy” odstęp – łatwo zmienić */
  padding: var(--pad);
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #e2e8ea);
  border-radius: var(--radius, 6px);
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* ⬅ odsunięcie od karty Plan odchudzania */
}

.total-card h2 {
  /* tytuł + podtytuł */
  text-align: center;
  margin: 0;
}

.kcal-table {
  /* tabela pozycji */
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
}

.kcal-table th,
.kcal-table td {
  padding: 4px 6px;
}

.kcal-table th {
  text-align: left;
  color:#f9fafa;
}

.kcal-table td:last-child {
  text-align: right;
}
/* === BSA (powierzchnia ciała) – edycja wyglądu tylko w jednym miejscu === */
.bsa-info{
  margin-top: 6px;          /* odstęp pod wierszem z BMI */
  font-size: 1.35rem;       /* rozmiar – możesz dowolnie zmienić */
  font-weight: 600;
  color: var(--primary);    /* turkus clinic – spójnie z innymi wynikami */
}
/* 1. Kontener przełącznika – wyśrodkowanie poziome i pionowe zawartości */
.toggle-wrap {
  display: flex;
  justify-content: center;
  /* wyśrodkuj horyzontalnie całe przełącznik */
  align-items: center;
  /* wyśrodkuj pionowo elementy w jednej linii */
  margin: 0.6rem 0 1rem;
  /* odstępy wokół przełącznika (jak w oryginale) */
}

/* 2. Styl etykiety przełącznika (suwaka) */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 0 0.75rem;
  /* odstęp po lewej i prawej, aby tekst nie nachodził na suwak */
}

.switch input {
  display: none;
  /* ukryj domyślny checkbox */
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary);
  /* zawsze turkusowe tło suwaka */
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s;
}

.switch .slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* 3. Pozycje suwaka w zależności od stanu (lewo = OLAF, prawo = WHO)
   W stanie „checked” ustawiamy uchwyt z prawej strony za pomocą
   absolutnego pozycjonowania. Dzięki temu białe kółko pozostaje
   zawsze 2 px od prawego brzegu, a po obu stronach widać
   delikatną turkusową obwódkę. Ustawiamy right na 2px, left na auto
   i wyłączamy translację, aby kółko nie przesuwało się poza pole. */
#dataToggle:checked+.slider::before {
  left: auto;
  right: 2px;
  transform: none;
  /* Pozycjonowanie absolutne po prawej stronie z marginesem 2 px */
}

/* Dostosowanie położenia białej kropki dla przełącznika ciśnienia krwi (bpDataToggle).
   Nie kopiujemy reguły dla .switch, bo jest wspólna, ale musimy przestawić 
   białe kółko na prawą stronę, gdy suwak jest zaznaczony. */
#bpDataToggle:checked + .slider::before {
  left: auto;
  right: 2px;
  transform: none;
}

/* Styl dla suwaka ciśnienia krwi w stanie disabled – analogicznie do dataToggle */
#bpDataToggle:disabled + .slider {
  background: #ddd !important;
  cursor: not-allowed;
}

/* 5. Styl dla naszego suwaka trybu wyników (standardowe / profesjonalne)
   Ustawiamy białe kółko z prawej strony, gdy checkbox jest zaznaczony (tryb profesjonalny).
   Dzięki temu użytkownik widzi, że przełącznik zmienił stan.  Replikujemy
   zachowanie jak w innych przełącznikach (#dataToggle, #bpDataToggle). */
/* Przesuń białe kółko w prawo, gdy aktywny jest tryb profesjonalny.
   Ustawiamy left:auto oraz right:2 px, podobnie jak w innych przełącznikach
   (#dataToggle, #bpDataToggle). Dzięki temu uchwyt przesuwa się na prawą
   stronę suwaka. */
/* Ze względu na białe znaki pomiędzy <input> a <span> w HTML, używamy
   selektora ogólnego rodzeństwa (~) zamiast sąsiedniego (+). Dzięki temu
   reguła zadziała nawet jeśli w DOM znajduje się węzeł tekstowy (whitespace)
   pomiędzy elementami. */
#resultsModeToggle:checked ~ .slider::before {
  left: auto;
  right: 2px;
  transform: none;
}

/* 4. Styl dla stanu disabled – wyszarzenie tła */
#dataToggle:disabled+.slider {
  background: #ddd !important;
  /* wyszarzony suwak, gdy przełącznik nieaktywny */
  cursor: not-allowed;
}

/* -------------------------------------------------------------------
   Styl dla trójpozycyjnego suwaka wyboru źródła danych (Palczewska/OLAF/WHO)
   Zastępuje dwustanowy przełącznik .switch w karcie BMI.  Każdy segment
   to etykieta z ukrytym inputem typu radio.  Wybrany segment ma
   turkusowe tło i biały tekst; pozostałe są obramowane turkusowo
   z przezroczystym tłem.  Flexbox zapewnia równą szerokość segmentów.
*/
.data-source-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.6rem 0 1rem;
  gap: 0.5rem;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.data-source-toggle label {
  flex: 1 1 0;
  text-align: center;
  cursor: pointer;
}

.data-source-toggle label input {
  display: none;
}

.data-source-toggle label span {
  display: block;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--primary);
  border-radius: 20px;
  color: var(--primary);
  background-color: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
  user-select: none;
}

.data-source-toggle label input:checked + span {
  background-color: var(--primary);
  color: #fff;
}

/* 5. Etykiety tekstowe po bokach suwaka */
.label-left,
.label-right {
  font-weight: 600;
  font-size: 0.9rem;
  font-family: "Inter", sans-serif;
  color: var(--primary);
  /* turkusowy kolor tekstu etykiet */
  user-select: none;
  /* tekst etykiet nie będzie się zaznaczał przy kliku */
}

/* 6. Responsywność – zmniejszenie czcionki etykiet na bardzo wąskich ekranach */
@media (max-width: 480px) {

  .label-left,
  .label-right {
    font-size: 0.8rem;
  }
}

/* Ostrzegawcza ramka w Planie odchudzania dla dzieci z nadwagą/otyłością */
.plan-warning-card {
  border: 2px solid var(--danger);
  background: #ffeaea;
  border-radius: var(--radius);
  color: var(--danger);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* === FORM LAYOUT OVERRIDE FOR DOCTOR FIELD (2025-08-15) === */
/*
 * Domyślne marginesy .half ustawione na 'auto' centrowały każdy element,
 * co powodowało, że przy dwóch elementach (np. dane użytkownika i pole dla
 * lekarza) drugi element przechodził do nowego wiersza. Ustawiamy
 * marginesy na 0 wewnątrz formularza kalkulatora, aby elementy .half
 * mogły ułożyć się w dwóch kolumnach, a na małych ekranach – zgodnie z
 * istniejącym media query – zachować pełną szerokość.
 */
#calcForm .half {
  margin: 0;
}

/* Układ formularza kalkulatora w dwóch kolumnach dla szerokich ekranów (700px+) */
@media (min-width: 700px) {
  #calcForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  /* W trybie grid, elementy .half tracą własność flex i zajmują 100% szerokości komórki */
  #calcForm .half {
    flex: none;
    max-width: 100%;
  }
}

/* === GH TEST CARDS OVERRIDE (2025-08-15) === */
/*
 * Aby karty stymulacyjne GH wyglądały jak pozostałe karty w aplikacji,
 * nadajemy im jednolite tło, delikatny cień i ramkę. Ta reguła pojawia
 * się na końcu pliku, dzięki czemu nadpisuje ewentualne wcześniejsze
 * definicje dla `.gh-test-card`.
 */
.gh-test-card {
  background: var(--card);
  border: 1px solid #d0dede;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  /* W widoku jednokolumnowym stosujemy odstęp między kartami za pomocą margin-bottom.
     W widoku dwukolumnowym odstęp definiuje row-gap kontenera, więc margin jest
     nadpisywany w media query. */
  margin-bottom: 1rem;
}
/*
 * Utrzymujemy dolny margines także dla ostatniej karty testu GH. Dzięki temu
 * krawędź dolna ostatniej karty nie przylega bezpośrednio do kolejnych kart
 * (np. sekcji wyników BMI). Wcześniej ostatnia karta miała margin-bottom:0,
 * co powodowało, że stykała się z kolejnymi sekcjami. Teraz ustawiamy
 * jednolity odstęp 1 rem.
 */
/* Zachowujemy odstęp pod ostatnią kartą testu GH w widoku jednokolumnowym */
.gh-test-card:last-child {
  margin-bottom: 1rem;
}
.gh-test-card p {
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

/* === Przycisk testów GH – kontener wyśrodkowany (dodano 2025-08-17) === */
#ghButtonWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  #ghButtonWrapper {
    grid-column: 1 / -1;
  }
}

/* === Przycisk testów OGTT/GnRH i ACTH/TRH – ustawienia identyczne jak GH === */
#ogttButtonWrapper,
#acthButtonWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  #ogttButtonWrapper,
  #acthButtonWrapper {
    grid-column: 1 / -1;
  }
}

/* === Układ kart testów GH === */
/* Domyślnie kolumny z testami GH są ukryte. Widoczność kontroluje klasa `.active`,
   którą JS dodaje przy otwarciu listy testów. */
#ghTestsLeft,
#ghTestsRight {
  display: none;
}
#ghTestsLeft.active,
#ghTestsRight.active {
  display: block;
}
/* Odstępy pomiędzy kartami testów w widoku jednokolumnowym (poniżej 700px). */
#ghTestsLeft .gh-test-card:not(:last-child),
#ghTestsRight .gh-test-card:not(:last-child) {
  margin-bottom: 1rem;
}
/* Dwukolumnowy układ testów GH. Każda kolumna jest flexowym kontenerem,
   a karty mają zdefiniowane współczynniki wzrostu, aby zachować
   proporcję wysokości 2 kart po lewej równej 3 kartom po prawej. */
@media (min-width: 700px) {
  /* Gdy testy są aktywne w widoku szerokim, kontenery stają się flex kolumnami */
  #ghTestsLeft.active,
  #ghTestsRight.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
  }
  /* Wysokości kart: po lewej każda karta ma większy współczynnik flex-grow
     (3 jednostki) niż karty po prawej (2 jednostki). Dzięki temu dwie karty
     po lewej stronie mają sumę współczynników 6, a trzy po prawej także 6,
     co zapewnia równą wysokość kolumn i proporcję 1.5:1 między kartami. */
  #ghTestsLeft.active .gh-test-card {
    flex: 3 1 0;
  }
  #ghTestsRight.active .gh-test-card {
    flex: 2 1 0;
  }
  /* W widoku dwukolumnowym karty korzystają z gap do odstępów; usuwamy dolny margines */
  /* W widoku dwukolumnowym używamy gap do odstępów między kartami;
     usuwamy więc margines dolny, aby uniknąć podwojenia przerwy. */
  #ghTestsLeft.active .gh-test-card,
  #ghTestsRight.active .gh-test-card {
    margin-bottom: 0;
  }
  /* Dodajemy 1 rem odstępu tylko pod ostatnią kartą w każdej kolumnie,
     aby dolne krawędzie kart testów nie przylegały do następnych sekcji. */
  #ghTestsLeft.active .gh-test-card:last-child,
  #ghTestsRight.active .gh-test-card:last-child {
    margin-bottom: 1rem;
  }
}

/* === Układ kart testów OGTT/GnRH i ACTH/TRH === */
/* Domyślnie kontenery są ukryte; klasa .active steruje widocznością */
#ogttTestsLeft,
#ogttTestsRight,
#acthTestsLeft,
#acthTestsRight {
  display: none;
}
#ogttTestsLeft.active,
#ogttTestsRight.active,
#acthTestsLeft.active,
#acthTestsRight.active {
  display: block;
}
/* Odstępy między kartami w trybie jednokolumnowym */
#ogttTestsLeft .gh-test-card:not(:last-child),
#ogttTestsRight .gh-test-card:not(:last-child),
#acthTestsLeft .gh-test-card:not(:last-child),
#acthTestsRight .gh-test-card:not(:last-child) {
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  /* Dwukolumnowy układ dla nowych testów */
  #ogttTestsLeft.active,
  #ogttTestsRight.active,
  #acthTestsLeft.active,
  #acthTestsRight.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
  }
  /* Wysokości kart: lewa kolumna (OGTT lub ACTH) ma flex 3, prawa (GnRH lub TRH) ma flex 2 */
  #ogttTestsLeft.active .gh-test-card,
  #acthTestsLeft.active .gh-test-card {
    flex: 3 1 0;
  }
  #ogttTestsRight.active .gh-test-card,
  #acthTestsRight.active .gh-test-card {
    flex: 2 1 0;
  }
  /* Usuwamy margines dolny w trybie flex, korzystając z gap */
  #ogttTestsLeft.active .gh-test-card,
  #ogttTestsRight.active .gh-test-card,
  #acthTestsLeft.active .gh-test-card,
  #acthTestsRight.active .gh-test-card {
    margin-bottom: 0;
  }
  /* Przywracamy odstęp pod ostatnią kartą w kolumnie */
  #ogttTestsLeft.active .gh-test-card:last-child,
  #ogttTestsRight.active .gh-test-card:last-child,
  #acthTestsLeft.active .gh-test-card:last-child,
  #acthTestsRight.active .gh-test-card:last-child {
    margin-bottom: 1rem;
  }

/* === Nowe przyciski endokrynologii i IGF-1 (2025-09-07) === */
/* Przycisk „Testy w endokrynologii” oraz przyciski leczenia hormonem wzrostu / IGF-1 i ich opcje
   mają identyczne parametry układu jak dotychczasowe przyciski testów. Ustawiamy pełną szerokość
   kontenera, wyśrodkowanie oraz marginesy pionowe. */
#endoButtonWrapper,
#igfButtonWrapper,
#snpButtonWrapper,
#turnerButtonWrapper,
#pwsButtonWrapper,
#sgaButtonWrapper,
#igf1ButtonWrapper,
#abxButtonWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  #endoButtonWrapper,
  #igfButtonWrapper,
  #snpButtonWrapper,
  #turnerButtonWrapper,
  #pwsButtonWrapper,
  #sgaButtonWrapper,
  #igf1ButtonWrapper,
  #abxButtonWrapper {
    grid-column: 1 / -1;
  }
}

/* Żółte tło i czarny tekst dla przycisku „Leczenie hormonem wzrostu / IGF-1”
   oraz jego podprzycisków. Efekt hover delikatnie przyciemnia żółty kolor. */
#toggleIgfTests,
#toggleSnp,
#toggleTurner,
#togglePws,
#toggleSga,
#toggleIgf1 {
  background: #ffe600;
  color: #000;
}
#toggleIgfTests:hover,
#toggleSnp:hover,
#toggleTurner:hover,
#togglePws:hover,
#toggleSga:hover,
#toggleIgf1:hover {
  background: #fdd835;
}
}

/* === PATCH 2025‑08‑16 – wyrównanie odstępów wokół kart testów GH === */
/*
 * Karta z danymi użytkownika (fieldset.user-card) miała domyślnie większy
 * margines dolny (1.5 rem), co powodowało powstanie zbyt dużej przerwy
 * między tą kartą a kolejnymi elementami (np. testami GH) w układzie
 * dwukolumnowym. Ograniczamy margines do 1 rem, aby odstęp był
 * porównywalny z przerwami między kartami testów.
 */
fieldset.user-card {
  /* Usuń dolny margines z karty użytkownika, aby zachować spójne odstępy
     między sekcjami w formularzu. Odstęp między wierszami będzie kontrolowany
     tylko przez gap kontenera flex. */
  margin-bottom: 1rem;
}

/* === Zwiększenie rozmiaru czcionki w polach testów stymulacyjnych GH (2025‑08‑17) === */
/*
 * Na prośbę użytkownika powiększamy czcionkę w kartach testów GH o 0,5 rem.
 * W kartach tych znajdują się nagłówki (<strong>) oraz opisy (<p>),
 * które pierwotnie miały wielkości 1 rem (dla nagłówka) i 0,9 rem (dla opisu).
 * Ponieważ w HTML opisy posiadają inline'owy styl font-size:0.9rem, używamy
 * !important, aby nadpisać tę wartość i zwiększyć ją o dodatkowe 0,5 rem.
 * Nagłówki zwiększamy analogicznie, co powoduje, że są teraz bardziej wyraziste.
 */
.gh-test-card strong {
  font-size: calc(1rem + 0.5rem);
}
.gh-test-card p {
  font-size: calc(0.9rem + 0.5rem) !important;
}

/*
 * Moduł profesjonalny jest oddzielony od sekcji z checkboxem „Przejdź
 * do modułu lekarskiego” marginesem o wysokości 1 rem. Dodatkowy
 * odstęp zapewnia wyraźne rozdzielenie elementów i spełnia wymóg
 * użytkownika dotyczący większej przerwy między polem a checkboxem.
 */
#professionalModule {
  /* Zwiększamy odstęp nad modułem profesjonalnym, aby uzyskać 1 rem przerwy
     pomiędzy sekcją z checkboxem „Przejdź do modułu lekarskiego” a kartą
     z komunikatem edukacyjnym. */
  margin-top: 1.4rem !important;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border: 1px solid #d0dede;
  box-shadow: var(--shadow)
}

/* ======================================================================== */
/* Styl dla komunikatu w module profesjonalnym.
 * Utworzenie osobnej klasy umożliwia łatwe sterowanie wyglądem tekstu
 * informacyjnego bez konieczności modyfikowania elementu poprzez style
 * inline czy id. Można tu zmienić rozmiar czcionki, interlinię lub margines
 * w przyszłości bez ingerowania w strukturę HTML. */
.professional-message {
  /* Wyśrodkuj tekst komunikatu edukacyjnego, aby był wizualnie wyrównany z
     innymi elementami modułu lekarskiego */
  text-align: center;
  /* Zmniejszamy rozmiar czcionki o 25%, redukując 0.9 rem do 0.675 rem */
  font-size: 0.98rem;
  line-height: 1.0;
  margin-top: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  /* Ustawiamy kolor czcionki na czerwony, podkreślając charakter ostrzeżenia */
  color: rgb(206, 0, 0);
}

/* Wyśrodkowanie i kolorowanie etykiety modułu profesjonalnego */
/* Dodajemy styl dla nagłówka h3 w module profesjonalnym, aby spełnić wymóg
   wyśrodkowania tytułu oraz ustawienia jego koloru na czerwony. Dzięki temu
   „Moduł profesjonalny” będzie wizualnie wyróżniony i spójny z kolorem
   komunikatu ostrzegawczego. */
#professionalModule h3 {
  text-align: center;
  color: rgb(206, 0, 0);
}

/* =====================  DOKTOR – personalizacja pola „Jestem lekarzem”  ===================== */
/*
 * Sekcja „Jestem lekarzem” składa się z własnoręcznie stylowanego pola
 * wyboru (checkbox) oraz etykiety. Celem jest zwiększenie czytelności na
 * urządzeniach mobilnych oraz nadanie spójnej turkusowej kolorystyki.
 */
/* ====== DOKTOR – personalizacja sekcji modułu lekarskiego ====== */
/*
 * Sekcja „Przejdź do modułu lekarskiego” składa się z dwóch tekstów (głównego
 * i podtytułu) oraz niestandardowego pola wyboru. Wszystkie elementy
 * ustawiamy w kolumnie, aby teksty znalazły się nad checkboxem. Taki układ
 * ułatwia czytanie i zapewnia lepszą widoczność na urządzeniach mobilnych.
 */
.doctor-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0.7rem;
}

/* Niestandardowe pole wyboru. Ukrywamy domyślny wygląd i rysujemy własny
 * kwadrat. W widoku kolumnowym nie potrzeba już marginesu po prawej,
 * zamiast tego dodajemy odstęp powyżej, aby oddzielić go od tekstów. */
.doctor-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--primary);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  margin-top: 0.6rem;
}

/* Po zaznaczeniu wypełniamy pole kolorem i dodajemy symbol „ptaszka” */
/* Po zaznaczeniu checkbox wypełniamy pole kolorem i dodajemy symbol „ptaszka”. */
.doctor-checkbox:checked {
  background-color: var(--primary);
}

.doctor-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Główne hasło przejścia do modułu lekarskiego. Zachowujemy rozmiar
 * z poprzedniej etykiety „Jestem lekarzem”. Poniżej w wariancie .compact
 * zmniejszymy je o 0,25 rem. */
.doctor-label {
  font-size: 1.425rem;
  color: var(--primary);
  font-weight: 500;
  user-select: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

/* Podtytuł opisujący sekcję. Jest mniejszy o 0.25 rem względem
 * doctor-label. */
.doctor-subtitle {
  font-size: 1.175rem;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
}

/* Wariant kompaktowy używany przy wyświetlaniu wyników: zmniejszamy
 * rozmiary tekstów i samego pola checkbox o 0.25 rem (≈4 px). */
.doctor-wrapper.compact .doctor-label {
  font-size: calc(1.425rem - 0.25rem);
}
.doctor-wrapper.compact .doctor-subtitle {
  font-size: calc(1.175rem - 0.25rem);
}
.doctor-wrapper.compact .doctor-checkbox {
  width: calc(28px - 4px);
  height: calc(28px - 4px);
  margin-top: 0.4rem;
}

/* Stylujemy kontener z polem numeru PWZ, aby etykieta była wyśrodkowana
   względem pola tekstowego. Ustawiamy elastyczny układ kolumnowy i
   wyśrodkowujemy tekst oraz input, aby całość była estetyczna w
   widoku mobilnym oraz desktopowym. */
#pwzContainer label {
  /* Użycie !important zapewnia nadpisanie stylu inline (display:block) obecnego w HTML */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Ustawiamy kontener pola PWZ jako wyśrodkowany. Tekst i pole wejściowe
   będą centrowane w obrębie kolumny formularza. */
#pwzContainer {
  text-align: center;
  /*
   * Dodajemy dolny margines, aby oddzielić pole numeru PWZ
   * od następujących po nim kart wyników. Wysokość 1 rem
   * zapewnia równowagę z odstępami w innych częściach formularza.
   */
  margin-bottom: 1rem;
}

/* Ograniczamy maksymalną szerokość pola tekstowego dla numeru PWZ,
   aby nie rozciągało się na całą dostępną przestrzeń i ustawiamy
   automatyczny margines poziomy, co powoduje wyśrodkowanie pola. */
#pwzContainer input[type="text"] {
  max-width: 320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* === REDUKCJA ODSTĘPU POD KARTĄ „Dane użytkownika” W WIDOKU JEDNOKOLUMNOWYM (2025‑08‑17) === */
/*
 * W trybie jednokolumnowym (gdy szerokość okna jest mniejsza niż 700 px) układ formularza
 * #calcForm korzysta z flexboxa z domyślnym odstępem (gap) równym 1 rem. Karta „Dane
 * użytkownika” (fieldset.user-card) posiada też wewnętrzny margines dolny 1 rem, a
 * element .doctor-wrapper ma margines górny 0.7 rem. Suma tych trzech wartości
 * (1 rem gap + 1 rem margin‑bottom + 0.7 rem margin‑top) powoduje zbyt dużą przerwę
 * między końcem karty „Dane użytkownika” a tekstem „Przejdź do modułu lekarskiego”
 * przy wąskiej szerokości ekranu. Aby zmniejszyć ten dystans mniej więcej o połowę,
 * wprowadzamy poniższe modyfikacje wyłącznie w widoku jednokolumnowym:
 *  • zmniejszamy gap formularza #calcForm do 0.3 rem,
 *  • zmniejszamy dolny margines karty user-card do 0.3 rem,
 *  • zmniejszamy górny margines doctor-wrapper do 0.25 rem.
 * Dzięki temu łączny odstęp wynosi około 0.3 rem + 0.3 rem + 0.25 rem ≈ 0.85 rem,
 * co jest zbliżone do połowy pierwotnego dystansu 1.7 rem.
 */
@media (max-width: 699px) {
  /* Mniejszy odstęp między wierszami formularza w trybie jednokolumnowym */
  #calcForm {
    gap: 0.3rem;
  }
  /* Ograniczamy dolny margines karty danych użytkownika */
  fieldset.user-card {
    margin-bottom: 0.3rem;
  }
  /* Zmniejszamy górny margines nad sekcją modułu lekarskiego */
  .doctor-wrapper {
    margin-top: 0.25rem;
  }
}

/* === FORM GRID-FIRST PATCH – zastosowanie rozwiązania nr 2 (2025‑08‑17) === */
/* Formularz kalkulatora zawsze działa jako siatka: jedna kolumna domyślnie, dwie od 700px. */
#calcForm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Neutralizacja reguł .half (flex: 0 1 50%; max-width: 50%) wewnątrz formularza */
#calcForm .half {
  margin: 0;
  flex: initial;
  max-width: 100%;
  width: 100%;
}
@media (min-width: 700px) {
  #calcForm {
    grid-template-columns: 1fr 1fr;
  }
}


/* Keep compact spacing on very small widths */
@media (max-width: 699px) {
  #calcForm {
    gap: 0.3rem;
  }
}

/*
 * Ostrzeżenie o przeciwwskazaniu w testach GH. Ten element jest wyświetlany
 * pod obliczoną dawką w kartach testów stymulacyjnych GH, gdy wiek dziecka
 * jest mniejszy niż graniczny dla danego testu. Używamy czerwonego koloru
 * (var(--danger)) oraz nieco mniejszej czcionki, aby wyróżnić komunikat.
 */
.gh-test-warning {
  color: var(--danger);
  font-size: 1.25rem;
  font-weight: 600;
  display: block;
  margin-top: 1.0rem;
  line-height: 1.3;
}
/* === Szacowane spożycie energii === */
.primary-btn {
  background: var(--primary);
  color: #fff;
  border: 0;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
}

#intakeCard .badge {
  display: inline-block;
  padding: .35rem .6rem;
  border: 1px solid #d0dede;
  background: #fff;
  border-radius: 6px;
}

.intake-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .6rem 0;
}

#intakeTable td input {
  width: 100%;
}

#intakeTable td:last-child {
  width: 36px;
}

#intakeTable .remove-intake-row {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  line-height: 28px;
  text-align: center;
}

.muted {
  color: #6b7a7a;
  font-size: .92rem;
}
/* ==== Szacowane spożycie energii – UI & mobile (wariant A) ==== */

/* odstęp 1rem pod kartą + wyśrodkowany tytuł */
#intakeCard {
  margin-bottom: 1rem;
}

#intakeCard h2.intake-title {
  text-align: center;
}

/* przycisk otwierający – delikatne wyrównanie odstępów */
.intake-toggle-wrap {
  margin: 1rem 0;
}

/* układ wierszy pomiarów – jak w „Zaawansowanych…” */
.measure-row-intake {
  display: grid;
  /* trzy kolumny na pola; przycisk × przejdzie do nowego wiersza */
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
  align-items: end;
  margin-top: .5rem;
}

.measure-row-intake label {
  font-size: .95rem;
}

/* przycisk × w sekcji Szacowanego spożycia energii – poniżej pól pomiarowych */
.measure-row-intake .remove-intake-row {
  grid-column: 3;
  justify-self: end;
  margin-top: .25rem;
  /* styl dziedziczony z .icon (brak obramowania, czerwony kolor) */
}
.measure-row-intake .remove-intake-row:hover {
  opacity: 0.8;
}

/* bardzo wąskie ekrany – ustaw w kolumnę jedna pod drugą */
@media (max-width:480px) {
  .measure-row-intake {
    grid-template-columns: 1fr;
  }

  .measure-row-intake .remove-intake-row {
    justify-self: end;
    margin-top: .25rem;
    grid-column: 1;
  }
}

/* Intake: pierwszy wiersz = „Dane użytkownika” (readonly/locked) */
.measure-row-intake[data-locked="true"] {
  opacity: .85;
}
.measure-row-intake[data-locked="true"] input[disabled] {
  background: #f5f7f7;
  cursor: not-allowed;
}

/* karty wyników wariantu A na mobile */
.intake-result-card {
  border: 1px solid #d0dede;
  background: #fff;
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin-bottom: .75rem;
}

.intake-result-card p {
  margin: .15rem 0;
  font-size: .95rem;
}

/* === PATCH 2025‑08‑31: duet wieku (lata + miesiące) === */
.age-mm-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.35rem;
}
@media (max-width:480px){
  .age-mm-group{
    grid-template-columns:1fr;
  }
}
.age-mm-group input{
  width:100%;
}

.intake-result-card p strong {
  color: var(--primary);
}

/* Na urządzeniach mobilnych (szerokość do 700 px) zwiększ czcionkę
 * wyników karty Szacowanego spożycia energii o ~75% i wyrównaj tekst do lewej */
@media (max-width:700px) {
  .intake-result-card p {
    font-size: 1.65rem;
    text-align: left;
  }
}

/* awaryjnie: jeśli gdzieś pozostała stara tabela – pokaż „×” w komórce akcji */
#intakeTable .remove-intake-row::before {
  content: '×';
  font-size: 1.25rem;
}
@media (min-width: 700px) {
  .intake-toggle-wrap #toggleIntakeCard {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/* === WHR – kolor podpowiedzi + wyśrodkowanie powiadomień (2025‑07‑xx) === */

/* 1) Wyśrodkowanie tekstu we wszystkich „ramkach” powiadomień
   (np. #planWarning oraz #whrSuggest mają klasę .plan-warning-card). */
   .plan-warning-card{
    text-align: center;
    font-weight: 600;
  }
  
  /* 2) Tylko podpowiedź użycia WHR — ciemnopomarańczowy kolor. 
     (#whrSuggest istnieje w HTML i ma klasę .plan-warning-card) */
  #whrSuggest{
    color: #c75d00; /* ciemny pomarańcz — spójny z .wfl-reminder */
  }
  /* === WHR – pomarańczowa ramka i delikatne tło dla podpowiedzi === */
:root{
  /* paleta dla noty WHR (ciemny pomarańcz + bardzo jasne tło) */
  --notice-orange: #c75d00;   /* ciemnopomarańczowy (spójny z .wfl-reminder) */
  --notice-orange-bg: #fff7ed;/* bardzo delikatny pomarańcz */
}

/* Nadpisanie tylko dla podpowiedzi WHR */
#whrSuggest.plan-warning-card{
  border-color: var(--notice-orange);   /* ciemnopomarańczowa ramka */
  background:   var(--notice-orange-bg);/* bardzo delikatne tło */
  color:        var(--notice-orange);   /* tekst w tym samym odcieniu */
  text-align: center;                   /* wyśrodkowanie treści */
  font-weight: 600;                     /* lepsza czytelność komunikatu */
}
#whrSuggest.plan-warning-card strong{ color: inherit; }
.plan-warning-card.notice-orange{
  border-color:#c75d00;
  background:#fff7ed;
  color:#c75d00;
  text-align:center;
  font-weight:600;
}
/* === WHR – czytelny wynik w jednej ramce (opcja A) === */
.whr-result {
  display: grid;
  gap: .4rem;
}

.whr-topline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.whr-label {
  font-weight: 600;
}

.whr-number {
  font: 600 1.75rem/1 "Inter", sans-serif;
  color: var(--primary);
}

/* spójne z resztą UI */

.whr-badges {
  display: flex;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
}

.whr-badge {
  display: inline-block;
  padding: .35rem .55rem;
  border: 1px solid #d0dede;
  background: #fff;
  border-radius: 6px;
  font-size: 1rem;
}

.whr-badge small {
  opacity: .85;
  margin-left: .25rem;
}

.whr-status {
  margin-top: .25rem;
  text-align: center;
}

.whr-status.ok {
  color: var(--primary);
  font-weight: 600;
}

/* Karta „Droga do normy BMI” – styl akapitu wyświetlającego idealną wagę */
#idealWeightInfo {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
}
/* === BMI (dorośli) – wyróżnienie wyniku i ramki === */
.result-box.bmi-warning {
  /* niedowaga / nadwaga */
  border-color: #c75d00 !important;
}

.result-box.bmi-warning .result-val {
  color: #c75d00 !important;
}

.result-box.bmi-danger {
  /* otyłość (I/II/III) */
  border-color: var(--danger) !important;
  /* #c62828 */
}

.result-box.bmi-danger .result-val {
  color: var(--danger) !important;
}

/* === WHR – wyróżnienie wyniku i ramki === */
/*
 * Dla ostrzeżenia (warn) lub stanu nieprawidłowego (bad) w module WHR
 * nie tworzymy dodatkowej ramki wewnętrznej, lecz kolorujemy i pulsujemy
 * obwódkę całego pola wyniku (#whrInfo). Poniższe klasy definiują
 * kolory obramowania i tekstu dla odpowiednich stanów.
 */
.result-box.whr-warning {
  border-color: #c75d00 !important;
}
.result-box.whr-warning .whr-number,
.result-box.whr-warning .whr-status {
  color: #c75d00 !important;
}
.result-box.whr-danger {
  border-color: var(--danger) !important;
}
.result-box.whr-danger .whr-number,
.result-box.whr-danger .whr-status {
  color: var(--danger) !important;
}

/* Kolorowanie tekstu statusu wewnątrz wyniku WHR. */
.whr-status.warn {
  color: #c75d00;
  font-weight: 600;
}
.whr-status.bad {
  color: var(--danger);
  font-weight: 600;
}
/* Wyłącz „tarcze” (inline SVG) tylko na karcie BMI/BMR */
#bmiCard .result-box strong svg { display: none !important; }

/* ============================================================================
 * WHR typography customization variables and application (added 2025‑08‑30).
 *
 * To make it easy to adjust the font size and style of WHR-related elements,
 * we define a dedicated :root block with CSS custom properties. These variables
 * are consumed by rules below for #whrSuggest, #whrInterpret and #whrInfo.
 * Modify the values here to change the appearance of the text without editing
 * the HTML or JS. The defaults yield a clear, consistent look that aligns
 * with the rest of the interface.
 * ========================================================================== */
:root{
  /* Rozmiar i styl czcionki dla baneru sugestii WHR (#whrSuggest). */
  --whr-suggest-font-size: 1.5rem;
  --whr-suggest-font-style: "Inter",
    sans-serif;
  /* Rozmiar i styl czcionki dla akapitu interpretacji WHR (#whrInterpret). */
  --whr-interpret-font-size: 1.5rem;
  --whr-interpret-font-style: "Inter",
    sans-serif;
  /* Rozmiar, styl i grubość czcionki dla pola z wynikiem WHR (#whrInfo). */
  --whr-info-font-size: 1.5rem;
  --whr-info-font-style: "Inter",
    sans-serif;
  --whr-info-font-weight: 600;
}

/* Zastosowanie zdefiniowanych zmiennych do poszczególnych etykiet WHR. */
#whrSuggest{
  font-size: var(--whr-suggest-font-size);
  font-style: var(--whr-suggest-font-style);
}
#whrInterpret{
  font-size: var(--whr-interpret-font-size);
  font-style: var(--whr-interpret-font-style);
}
#whrInfo{
  font-size: var(--whr-info-font-size);
  font-style: var(--whr-info-font-style);
  font-weight: var(--whr-info-font-weight);
}
/* === Badge na przycisku „Szacowane spożycie energii” (czerwona kropka) === */
#toggleIntakeCard {
  position: relative;
}

#toggleIntakeCard.has-alert::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--danger, #d93025);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  /* delikatna obwódka dla kontrastu */
}

@media (prefers-reduced-motion: no-preference) {
  #toggleIntakeCard.has-alert::after {
    animation: badgePing 1.6s ease-in-out infinite;
  }

  @keyframes badgePing {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    70% {
      transform: scale(1.6);
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}
/* Desktop (układ dwukolumnowy): odsuń "Usuń wszystkie dane" o 1rem w dół
   i ustaw go w nowej linii, wyśrodkowany */
@media (min-width: 700px) {
  #clearAllDataBtn {
    display: block;
    /* przełóż przycisk do nowej linii */
    width: max-content;
    /* szerokość dopasowana do treści */
    margin: 1rem auto 0;
    /* 1rem odstępu nad przyciskiem + centrowanie */
  } }

/* === Podsumowanie poprzednich pomiarów === */
.summary-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.5rem;
}
.summary-grid .label{
  color: var(--text);
  font-size: 0.95rem;
}
.summary-grid .val{
  text-align: right;
}
.summary-grid .val .result-val{
  font-size: 1.35rem;
}
.summary-grid .muted{
  color: #6b7a7a;
  font-size: 0.92rem;
}
/* Styl karty z podsumowaniem – delikatna turkusowa ramka */
#prevSummaryCard{
  border: 1px solid var(--primary);
  width: 100%;
}
/* Zapewnij pełną szerokość dla kontenera podsumowania */
#prevSummaryWrap{
  width: 100%;
}
/* Dodatkowy margines pod kartą w widoku jednokolumnowym (mobilnym) */
@media (max-width: 700px){
  #prevSummaryWrap{
    margin-bottom: 1rem;
  }
}
/* Styl przycisku do ukrywania karty (sekundarny) */
.secondary-btn{
  background: transparent;
  color: var(--primary);
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
}

/* === IGF THERAPY CARD FULL-WIDTH (2025-09-08) === */
/* 
 * W widoku dwukolumnowym (ekrany ≥700px) karta "Leczenie hormonem wzrostu / IGF‑1"
 * powinna rozciągać się na obie kolumny siatki formularza. Domyślnie, elementy
 * wewnątrz #calcForm są ustawiane w dwóch kolumnach, co powoduje, że wstawiona
 * dynamicznie karta (#ghIgfTherapyCard) zajmuje tylko połowę dostępnej szerokości.
 * Poniższe reguły wymuszają, aby karta zajmowała cały wiersz w trybie desktopowym,
 * natomiast w widoku mobilnym (jednokolumnowym) zachowuje się jak wcześniej.
 */
@media (min-width: 700px) {
  #calcForm #ghIgfTherapyCard {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Rozciągnij kartę antybiotykoterapii na pełną szerokość kontenera w trybie dwukolumnowym.
   * Podobnie jak karta GH/IGF‑1, karta antybiotykoterapii jest wstawiana dynamicznie
   * i bez tej reguły zajmuje tylko połowę siatki. Dlatego ustawiamy grid-column
   * na 1 / -1, aby objęła obie kolumny na desktopie.  */
  #calcForm #antibioticTherapyCard {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* === PATCH 2025-09-08 – Kolor przycisku IGF-1 w widoku mobilnym === */
@media (max-width: 699px) {
  #toggleIgfTests,
  #toggleSnp,
  #toggleTurner,
  #togglePws,
  #toggleSga,
  #toggleIgf1 {
    background: #ffe600 !important;
    color: #000 !important;
  }
  #toggleIgfTests:hover,
  #toggleSnp:hover,
  #toggleTurner:hover,
  #togglePws:hover,
  #toggleSga:hover,
  #toggleIgf1:hover {
    background: #fdd835 !important;
  }
}

/* === PATCH 2025-09-08 – Turkusowa ramka dla pola podsumowania GH/IGF‑1 === */
#ghIgfTherapyCard .result-box {
  /* Ensure the inner summary box in the GH/IGF‑1 therapy card
     uses the same turquoise border colour as the outer card.
     Set the full border property with !important to override the default
     .result-box rule. */
  border: 2px solid var(--brand) !important;
}

/* === DS Card border and results styling 2025‑09‑13 === */
/*
 * Karta „Obliczenia dla dzieci z zespołem Downa” (identyfikator #downSyndromeCard)
 * powinna mieć taką samą subtelną, jasnoszarą ramkę jak karta Wskaźnika Cole'a
 * i inne podstawowe karty w aplikacji. Dzięki temu obie karty wyglądają
 * spójnie obok siebie.
 */
#downSyndromeCard {
  border: 1px solid #d0dede;
}

/*
 * Wyniki w karcie Downa (.result-box umieszczone wewnątrz #downSyndromeCard)
 * powinny być prezentowane na białym tle z turkusową ramką, na wzór kart
 * wyników w innych modułach (np. wskaźnika Cole'a). Zastosowanie
 * delikatnego cienia i zaokrąglonych rogów podkreśla, że to ważne, odrębne
 * elementy. Dodatkowe wypełnienie (padding) zwiększa czytelność treści.
 */
#downSyndromeCard .result-box {
  background: var(--card-bg);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 1rem;
}

/* === Advanced Growth card customization 2025‑09‑13 === */
/*
 * Karta „Zaawansowane obliczenia wzrostowe” (#advancedGrowthForm) powinna
 * otrzymać tę samą subtelną, jasnoszarą ramkę jak inne główne karty (np. wskaźnik Cole'a).
 */
#advancedGrowthForm {
  border: 1px solid #d0dede;
}

/*
 * Kontener wyników w karcie zaawansowanych obliczeń (#advResults) należy
 * wyróżnić białym tłem i turkusową ramką – analogicznie do wyglądu kart
 * wynikowych w innych modułach (takich jak Wskaźnik Cole'a i DS). Utrzymujemy
 * zaokrąglenie rogów, delikatny cień oraz istniejący rozmiar czcionki.
 */
#advResults {
  border: 2px solid var(--brand);
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  /* padding pozostawiamy domyślny (1rem) z oryginalnej definicji */
}
/* 1) Tytuł w nagłówku zawsze turkusowy */
header h1 {
  color: var(--primary);
}

/* 2) (Opcjonalnie) białe tło belki nagłówka w trybie bez „Liquid Glass”.
   Dzięki temu turkusowy tytuł nie zlewa się z tłem */
header {
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid #d0dede;
}

/* 3) Gdy działa motyw Liquid Glass – dobitnie utrzymujemy turkus tytułu */
.liquid-ios26 header h1 {
  color: var(--primary) !important;
}
/* Styl banera zgody */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  padding: 1rem;
  font-size: 0.9rem;
  z-index: 10000;
  display: none;
}
.cookie-banner ul {
  margin: 0 0 1rem 0;
  padding-left: 1.2rem;
  list-style-type: disc;
}
.cookie-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}
.cookie-buttons button {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
#consent-accept {
  background-color: #007c8d; /* turkus z logo */
  color: #fff;
}
#consent-decline {
  background-color: #e0e0e0;
  color: #333;
}

/* Prosta nawigacja w nagłówku.  Wyświetla linki poziomo i
   zachowuje spójność kolorystyczną z motywem aplikacji. */
.main-nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  gap: 1rem;
}
.main-nav a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.main-nav a:hover {
  text-decoration: underline;
}

/*
 * The main navigation sits outside of the `.container`, which means it
 * naturally spans the full viewport width. On very wide screens the
 * single link ("O aplikacji") would float far away from the rest of
 * the content. To keep the navigation visually aligned with the
 * central content area, constrain its width to the same maximum as
 * `.container` and horizontally center it. We also apply horizontal
 * padding matching the container so that the link sits flush with
 * other elements at smaller breakpoints. This ensures that the link
 * never exceeds the container on large screens and remains
 * "attached" to the left edge of the content area.
 */
.main-nav {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1rem;
  width: 100%;
  /* Inherit the header background to avoid visual gaps when centered */
  background: inherit;
}/* Ogólne style nawigacji */
.main-nav ul li a {
  font-size: 1rem;
  /* inne style */
}

/* Dodatkowe style dla ekranów do 600 px szerokości */
@media (max-width: 600px) {
  .main-nav ul li a {
    font-size: 0.9rem;        /* zmniejsz rozmiar czcionki */
    /* Ogólne style nawigacji */
.main-nav ul li a {
  font-size: 1rem;
  /* inne style */
}}}

/* Dodatkowe style dla ekranów do 600 px szerokości */
@media (max-width: 600px) {
  .main-nav ul li a {
    font-size: 0.8rem;        /* zmniejsz rozmiar czcionki */
  }
}

/* Ustawienia koloru alertów dla modułu Antybiotykoterapia
   Zmieniamy kolor tekstu notatek i alertów w kartach antybiotykoterapii na czerwony,
   korzystając z koloru --danger zdefiniowanego w :root.
   Dotyczy to elementów #abxNote oraz klas .muted wewnątrz karty. */
#antibioticTherapyCard #abxNote,
#antibioticTherapyCard .muted {
  color: var(--danger) !important;
}

/* Tymczasowe ukrycie przycisku Antybiotykoterapia */
#abxButtonWrapper {
  display: none !important;
}