/* Slobiq Health: nadpisuje paletę bazowego stylu (wspolny z Calcwise: strony/calcwise/src/style.css), ladowany po nim.
   Kolor glowny: ciemna ziel. Dodatkowy: jasna mieta. Tlo: biale i delikatnie szare. */
:root{--bg:#f3f5f4;--card:#fff;--ink:#14201b;--muted:#566660;--accent:#0f5a45;--accent-dark:#0b3d2e;--accent-soft:#e3f7ee;--mint:#c9f2df;--leaf:#2fbf8f;--line:#dde5e1;--shadow:0 1px 2px #0b3d2e14,0 8px 24px -8px #0b3d2e2e}
body{background:var(--bg) radial-gradient(900px 420px at 85% -80px,#d4f1e4 0,transparent 70%) no-repeat}
.btn,.logo-bg{background:linear-gradient(135deg,#14705a,#0b3d2e)}
.tool-title .h1-ico,.cards .card-ico{background:linear-gradient(135deg,#1c8a6c,#0b3d2e)}
.tool{border-top-color:var(--leaf)}
[data-result]>.results>div:first-child{background:linear-gradient(135deg,#14705a,#0b3d2e)}
.cards li.new a{border-color:#9fdcc4;background:linear-gradient(180deg,#fff 0,#eefaf4 100%)}
.cards li.ext a{border-style:dashed}
.cards li.ext .ext-tag{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.03em}
.hero-health{display:grid;gap:10px;margin:0 0 20px;padding:26px;border-radius:20px;background:linear-gradient(135deg,#0b3d2e,#14705a);color:#fff;box-shadow:var(--shadow)}
.hero-health h1{margin:0;color:#fff}
.hero-health .tagline{margin:0;font-size:19px;color:var(--mint);font-weight:700}
.hero-health .lead{margin:0;color:#e3f7ee}
.hero-health .count{margin:6px 0 0;font-weight:700;color:var(--mint)}
.hero-health .hero-cta{justify-self:start;margin-top:8px;background:var(--mint);color:#0b3d2e;box-shadow:none}
.medical{margin:14px 0 0;padding:12px 16px;background:#fff8e6;border-left:4px solid #d99a00;border-radius:6px;color:#4a3500;font-size:14px}
.sched{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sched li{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.sched li strong{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sched li.rest{background:#f3f5f4;color:var(--muted)}
.sched li.train{background:var(--accent-soft);border-color:#b6e5d0}
.crosslink{display:inline-flex;align-items:center;min-height:44px;gap:8px;padding:0 16px;border:1px solid var(--accent);border-radius:999px;font-weight:700;text-decoration:none}

/* ---- dashboard ---- */
.dashboard{display:grid;gap:16px}
.dash-stats{margin:0}
.msg{margin:0;padding:10px 14px;border-radius:10px;font-weight:600}
.msg.ok{background:var(--accent-soft);color:var(--accent-dark)}
.msg.error{background:#fdecea;color:#8a1c12}
.goalbars{display:grid;gap:12px}
.goalbar{display:grid;gap:4px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.goalbar progress,.goalbar span{display:block;width:100%}
.goalbar span{font-size:14px;color:var(--muted)}
progress{height:12px;border-radius:999px;overflow:hidden;border:0;background:#e3ece8;accent-color:var(--leaf)}
progress::-webkit-progress-bar{background:#e3ece8;border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#2fbf8f,#14705a);border-radius:999px}
progress::-moz-progress-bar{background:#14705a;border-radius:999px}
.charts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.chart-box{padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;min-height:120px}
.chart{width:100%;height:auto;display:block}
.dash-sec{background:var(--card);border:1px solid var(--line);border-radius:14px}
.dash-sec>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:700;font-size:17px}
.dash-body{display:grid;gap:12px;padding:0 16px 16px}
.inline-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.inline-form .btn{width:100%}
.entries{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.entries li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;background:#f7faf8;border-radius:10px}
.entries li.empty{display:block;color:var(--muted)}
.entries time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.entries span{overflow-wrap:anywhere}
.btn.small{min-height:44px;padding:6px 14px;width:auto}
.btn.danger{border-color:#b3261e;color:#b3261e}
.group-box{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc}
.group-box legend,.group-box summary{font-weight:700;color:var(--accent-dark);padding:0 6px}
.group-box summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0}
.group-fields{display:grid;gap:12px;margin-top:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:700px){.entries li{grid-template-columns:1fr auto}.entries time{grid-column:1/-1}.inline-form{grid-template-columns:1fr}}

/* pola hasla i pliku (kopia zapasowa): bazowy styl obejmuje tylko type=text, wiec bez tego na telefonie byly male i przyblizaly strone w iOS */
.field input[type=password],.field input[type=file]{width:100%;padding:12px;border:1px solid #b4c3c0;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:48px;transition:border-color .15s,box-shadow .15s}
.field input[type=password]:focus,.field input[type=file]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px #0f5a4526}
.field input[type=file]{padding:10px 12px}
.field input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);font:inherit;font-weight:700;cursor:pointer}

/* przyciski bedace linkami (a.btn): bez podkreslenia, wysrodkowany tekst, pelna wysokosc dotykowa */
a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;text-align:center}

/* ---- uklad strony: pasek promocji Calcwise NA GORZE (nad trescia, w normalnym przeplywie: bez sticky/fixed, bez kolumny obok) ----
   telefon: waski pasek (logo, nazwa, przycisk); tablet i komputer: pelny pasek z opisem i skrotami.
   .page opakowuje pasek i <main>. Bazowy styl ma main{max-width:860px}; na komputerze rozszerzamy tresc (strony narzedzi 980 px, strona glowna 1180 px). */
.page{width:100%;max-width:860px;margin:0 auto}
.page>main{min-width:0}
.promo{padding:14px max(4vw,env(safe-area-inset-left)) 0 max(4vw,env(safe-area-inset-right))}
.promo-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff 0,#f1faf7 100%);box-shadow:var(--shadow)}
.promo-card p{margin:0}
.promo-label,.promo-text,.promo-links{display:none}
.promo-brand{display:flex;align-items:center;gap:10px;min-width:0}
.promo-brand strong{font-size:16px;line-height:1.25;color:#0a4f44;overflow-wrap:anywhere}
.cw-logo{width:40px;height:40px;flex:none;filter:drop-shadow(0 3px 5px #0a4f4440)}
.promo-cta{background:linear-gradient(135deg,#14907c,#0a4f44);width:auto;padding:0 16px;min-height:44px;font-size:15px}
.promo-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.promo-text{color:var(--muted);font-size:15px}
.promo-links{list-style:none;margin:0;padding:0;flex-wrap:wrap;gap:8px}
.promo-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;font-weight:600;font-size:14px;color:#0a4f44}
.promo-links a:hover{border-color:#0f6b5c;background:#e3f2ee}

/* zdjecia: stale proporcje (aspect-ratio + width/height w HTML), wiec strona nie skacze podczas ladowania */
.hero-health{padding:0;overflow:hidden;gap:0}
.hero-text{display:grid;gap:10px;padding:22px 20px 24px}
.hero-photo{order:-1;line-height:0;background:#0b3d2e}
.hero-photo img{display:block;width:100%;height:180px;object-fit:cover}
.cat-photo{margin:10px 0 14px;line-height:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.cat-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:260px;object-fit:cover}
.credits{padding-left:20px;display:grid;gap:12px}

/* tablet: baner tekst + zdjecie obok siebie, kafelki w 2 kolumnach */
@media(min-width:700px){
  .hero-health{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
  .hero-text{padding:30px 28px;align-content:center}
  .hero-photo{order:0}
  .hero-photo img{height:100%;min-height:280px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* pelny pasek promocji: opis i skroty po lewej, przycisk po prawej */
  .promo{padding:18px 5vw 0}
  .promo-card{padding:16px 20px;gap:10px 20px}
  .promo-info{grid-column:1;grid-row:1}
  .promo-label,.promo-text{display:block}
  .promo-brand{margin:4px 0}
  .promo-links{display:flex;grid-column:1;grid-row:2}
  .promo-cta{grid-column:2;grid-row:1/3;align-self:center;padding:0 24px;min-height:48px;font-size:16px}
}

/* komputer: wieksza tresc bez kolumny bocznej (strony narzedzi 980 px, strona glowna 1180 px), kafelki w 3 kolumnach na stronie glownej */
@media(min-width:1100px){
  .page{max-width:980px}
  .page:not(.has-promo){max-width:860px}
  .page.wide{max-width:1180px}
  .page>main{max-width:none;margin:0;padding:24px 24px 56px}
  .page:not(.has-promo)>main{max-width:860px;margin:0 auto;padding:32px 5vw 56px}
  .promo{padding:24px 24px 0}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-health{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .hero-text{padding:40px 36px}
  .hero-photo img{min-height:340px}
  .cat-photo img{max-height:300px}
}
/* bardzo szerokie ekrany: srodek strony nie rozjezdza sie, tlo i naglowek zostaja pelnej szerokosci */
@media(min-width:1500px){.page.wide{max-width:1280px}}

/* telefon: baner z niskim zdjeciem (tekst i przycisk widoczne na pierwszym ekranie), bez poziomego przewijania */
@media(max-width:699px){
  .hero-photo img{height:160px}
  /* waski pasek Calcwise: tytul w maks. 2 liniach (PL: "Calcwise: darmowe kalkulatory"), mniejszy przycisk i logo */
  .promo-card{gap:8px 10px;padding:8px 10px}
  .cw-logo{width:36px;height:36px}
  .promo-brand{gap:8px}
  .promo-brand strong{font-size:15px;line-height:1.2}
  .promo-cta{padding:0 12px;font-size:14px}
}
/* telefon: kafelek zewnetrzny (BMI, kalorie z Calcwise) ma w siatce 3. wiersz; bez tego etykieta "Kalkulator w Calcwise" trafiala do waskiej kolumny ikony */
@media(max-width:560px){
  .cards li.ext .card-ico{grid-row:1/4}
  .cards li.ext .ext-tag{grid-column:2;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){.hero-photo img,.cat-photo img{transition:none}}