: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;}
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);}  
#results{display:none;flex-direction:column;gap:1.5rem;}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);}  
.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;}
  /* Upewnij się, że kolumny siatki mają równą wysokość – pozwala to karcie Cole'a i drodze do normy BMI dopasować wysokość do karty BMI */
  .grid-two{
    align-items: stretch;
  }
}

/* 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%;
}

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

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

/* Powiększone ramki wyników BMI i BMR */
.result-box{
  border:2px solid #ccc;
  border-radius:8px;
  padding:10px;
  margin:12px 0;
  font-size:1.75rem;
  background:#f8f9fa;
  text-align:center;
}
/* 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 */
section.card,
.result-box,
#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;
  }
}

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

/* === 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;
}

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);
}

/* === PLAN RESULTS TWO-COLUMN LAYOUT 2025‑06‑30 === */
#planResults{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@media(max-width:600px){
  #planResults{
    grid-template-columns:1fr;
  }
}

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

/* === 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;
}

/* 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 ( ), 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) */
#dataToggle:checked+.slider::before {
  transform: translateX(30px);
  /* przesunięcie kółka w prawo, gdy WHO aktywne */
}

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

/* 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;
}