/* Talerz. Kierunek: ceramika z Bolesławca. Kobaltowe stemple na białym szkliwie,
   jedyny mocny element to stemplowany rant talerza z postępem dnia. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonty/fraunces-latin-ext-full-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonty/fraunces-latin-full-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonty/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonty/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --szkliwo:#F3F6FB;--porcelana:#FFFFFF;--kobalt:#1B3FAB;--kobalt-mocny:#142F85;--granat:#0F1B44;
  --szary:#4E5A82;--blekit:#C4D4F0;--mgla:#E5ECF7;--musztarda:#C98F0A;--musztarda-tekst:#7A5600;--blad:#A8261D;
  --dok:72px;--bezp-dol:env(safe-area-inset-bottom,0px);--bezp-gora:env(safe-area-inset-top,0px);
  --szer:440px;
  --display:"Fraunces",Georgia,serif;--tekst:"Schibsted",Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--szkliwo);color:var(--granat);font:400 17px/1.45 var(--tekst);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block}
:focus-visible{outline:2.5px solid var(--kobalt);outline-offset:2px;border-radius:6px}
#ekran:focus{outline:none}
[hidden]{display:none!important}

#ekran{max-width:var(--szer);margin:0 auto;
  padding:calc(var(--bezp-gora) + 14px) 20px calc(var(--dok) + var(--bezp-dol) + 32px)}
.tytul{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0;
  font-size:27px;line-height:1.14;letter-spacing:-.01em;text-wrap:balance}

/* --- dzień --- */
.pasek-dnia{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:6px}
.pasek-dnia h1{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0;
  font-size:21px;line-height:1.2;text-align:center}
.strzalka{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.strzalka svg{width:22px;height:22px;fill:none;stroke:var(--kobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.strzalka:disabled svg{stroke:var(--blekit)}
.strzalka:disabled{cursor:default}

.talerz{position:relative;width:min(100%,380px);margin:4px auto 10px;aspect-ratio:1}
.talerz svg{display:block;width:100%;height:100%}
.talerz-srodek{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding-bottom:4px}
.talerz-liczba{font-family:var(--display);font-weight:620;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;
  font-variant-numeric:lining-nums tabular-nums;font-size:clamp(58px,19.5vw,80px);line-height:1;letter-spacing:-.025em}
.talerz-opis{font-size:15px;line-height:1.3;color:var(--szary)}
.talerz-opis strong{font-weight:600;color:var(--granat)}
.talerz.ponad .talerz-liczba{color:var(--musztarda-tekst)}
.stempel{transform-box:fill-box;transform-origin:center}
.stempel.nowy{animation:stempel .34s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i)*16ms)}
@keyframes stempel{from{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}

.makro{display:flex;justify-content:center;gap:22px;margin:0 0 24px;font-size:15px;color:var(--szary)}
.makro b{display:block;font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0;
  font-variant-numeric:lining-nums tabular-nums;font-size:21px;line-height:1.2;color:var(--granat);text-align:center}
.makro div{text-align:center}

.posilki{list-style:none;margin:0;padding:0}
.posilek{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;width:100%;min-height:76px;
  padding:7px 0;text-align:left;border-top:1px dashed var(--blekit)}
.posilki li:first-child .posilek{border-top:0}
.miniatura{position:relative;width:62px;height:62px;border-radius:50%;background:var(--porcelana);
  outline:2px dotted var(--kobalt);outline-offset:-1px;padding:5px}
.miniatura img,.miniatura span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.miniatura span{background:var(--mgla);display:grid;place-items:center;font-family:var(--display);font-weight:600;
  font-size:21px;color:var(--kobalt)}
.posilek-nazwa{font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.posilek-czas{font-size:15px;color:var(--szary)}
.posilek-kcal{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0;
  font-variant-numeric:lining-nums tabular-nums;font-size:21px;white-space:nowrap}
.posilek-kcal small{font:400 14px var(--tekst);color:var(--szary);margin-left:2px}

.pusto{padding:12px 8px 0;text-align:center}
.pusto p{color:var(--szary);max-width:30ch;margin:4px auto 0}

/* --- dok --- */
#dok{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--porcelana);
  border-top:1px solid var(--mgla);padding-bottom:var(--bezp-dol);
  display:grid;grid-template-columns:1fr 1fr 84px 1fr 1fr;align-items:center;height:calc(var(--dok) + var(--bezp-dol))}
.dok-przycisk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--dok);
  font-size:13px;font-weight:500;color:var(--szary)}
.dok-przycisk svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dok-przycisk[aria-current=page]{color:var(--kobalt)}
.dok-aparat{width:72px;height:72px;justify-self:center;margin-top:-22px;border-radius:50%;background:var(--kobalt);color:#fff;
  display:grid;place-items:center;outline:3px dotted var(--porcelana);outline-offset:-7px;
  box-shadow:0 0 0 5px var(--porcelana)}
.dok-aparat:active{background:var(--kobalt-mocny)}
.dok-aparat:focus-visible{outline:3px solid #fff;outline-offset:-7px;box-shadow:0 0 0 5px var(--kobalt)}
.dok-aparat svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* --- arkusz: analiza i edycja posiłku --- */
#arkusz{position:fixed;inset:0;z-index:10;background:var(--szkliwo);overflow-y:auto;-webkit-overflow-scrolling:touch}
.arkusz-tresc{max-width:var(--szer);margin:0 auto;padding:calc(var(--bezp-gora) + 10px) 20px calc(var(--bezp-dol) + 28px)}
.arkusz-gora{display:flex;justify-content:flex-end;margin-bottom:2px}
.zamknij{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;border-radius:50%}
.zamknij svg{width:22px;height:22px;fill:none;stroke:var(--granat);stroke-width:2;stroke-linecap:round}

.okragle{position:relative;width:min(68vw,240px);aspect-ratio:1;margin:0 auto 18px}
.okragle img{width:100%;height:100%;object-fit:cover;border-radius:50%;padding:18px}
.okragle .obrecz{position:absolute;inset:0;width:100%;height:100%}
.liczy .obrecz{animation:kolo 2.8s linear infinite}
@keyframes kolo{to{transform:rotate(360deg)}}
.liczy-opis{text-align:center;color:var(--szary)}

.nazwa-pole{display:block;width:100%;border:0;background:none;padding:0;font-family:var(--display);font-weight:600;
  font-variation-settings:"SOFT" 100,"WONK" 0;font-size:27px;line-height:1.15;letter-spacing:-.01em;
  border-bottom:1px dashed var(--blekit);padding-bottom:4px;resize:none;overflow:hidden}
.naglowek-skladnikow{display:flex;justify-content:space-between;align-items:baseline}
.naglowek-skladnikow small{font-size:14px;font-weight:400;color:var(--szary)}
.wynik-kcal{display:flex;align-items:baseline;gap:6px;margin:14px 0 2px}
.wynik-kcal b{font-family:var(--display);font-weight:620;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;
  font-variant-numeric:lining-nums tabular-nums;font-size:60px;line-height:1;letter-spacing:-.02em;color:var(--kobalt)}
.wynik-kcal span{font-size:17px;color:var(--szary)}
.wynik-zakres{color:var(--szary);font-size:15px}
.wynik-bilans{margin-top:12px;font-weight:500}
.wynik-bilans.ponad{color:var(--musztarda-tekst)}
.wynik-uwaga{margin-top:10px;font-size:15px;line-height:1.4;color:var(--szary)}

.sekcja{margin-top:24px}
.sekcja h2{font-size:17px;font-weight:600;margin-bottom:8px}
.czesci{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid var(--kobalt);border-radius:999px;overflow:hidden}
.czesci button{height:46px;font-weight:500;color:var(--kobalt)}
.czesci button+button{border-left:1.5px solid var(--kobalt)}
.czesci button[aria-pressed=true]{background:var(--kobalt);color:#fff}

.skladnik{display:grid;grid-template-columns:1fr 92px 56px 34px;gap:8px;align-items:center;min-height:50px;
  border-top:1px dashed var(--blekit);padding:4px 0}
.skladnik:first-of-type{border-top:0}
.skladnik-nazwa{line-height:1.25;overflow-wrap:anywhere}
.gramy{display:flex;align-items:center;gap:4px;background:var(--porcelana);border:1px solid var(--blekit);border-radius:10px;padding:0 8px;height:42px}
.gramy input{width:100%;min-width:0;border:0;background:none;text-align:right;font-variant-numeric:tabular-nums;padding:0}
.gramy input:focus{outline:none}
.gramy:focus-within{border-color:var(--kobalt)}
.gramy span{font-size:15px;color:var(--szary)}
.skladnik-kcal{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.usun-skladnik{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.usun-skladnik svg{width:16px;height:16px;fill:none;stroke:var(--szary);stroke-width:2;stroke-linecap:round}

.pole{display:block;margin-top:14px}
.pole>span{display:block;font-size:15px;font-weight:500;margin-bottom:4px}
.pole small{display:block;font-size:14px;color:var(--szary);margin-top:4px}
input.wejscie,select.wejscie,textarea.wejscie{width:100%;background:var(--porcelana);border:1px solid var(--blekit);
  border-radius:10px;padding:10px 12px;min-height:46px}
textarea.wejscie{min-height:92px;resize:vertical}
input.wejscie:focus,select.wejscie:focus,textarea.wejscie:focus{outline:none;border-color:var(--kobalt);box-shadow:0 0 0 1px var(--kobalt)}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.przycisk{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:999px;
  background:var(--kobalt);color:#fff;font-weight:600;padding:0 20px}
.przycisk:active{background:var(--kobalt-mocny)}
.przycisk:disabled{background:var(--blekit);color:var(--szary);cursor:default}
.przycisk.drugi{background:none;color:var(--kobalt);border:1.5px solid var(--kobalt)}
.przycisk.drugi:active{background:var(--mgla)}
.akcje{display:grid;gap:10px;margin-top:24px}
.tekstowy{color:var(--kobalt);font-weight:500;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.tekstowy.groza{color:var(--blad)}
.srodek{text-align:center}

.ostatnie{list-style:none;margin:0;padding:0}
.ostatnie button{display:flex;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 0;text-align:left;
  border-top:1px dashed var(--blekit)}
.ostatnie li:first-child button{border-top:0}
.ostatnie b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--kobalt)}

.blad-tekst{color:var(--blad);font-weight:500;margin-top:10px}

/* --- tydzień --- */
.dni{list-style:none;margin:18px 0 0;padding:0}
.dzien-rzad{display:grid;grid-template-columns:62px 1fr 56px;gap:10px;align-items:center;width:100%;min-height:46px;text-align:left}
.dzien-rzad .kropki{display:flex;flex-wrap:wrap;gap:3px}
.kropka{width:12px;height:12px;border-radius:50%;background:var(--kobalt)}
.kropka.pusta{background:none;box-shadow:inset 0 0 0 1px var(--blekit)}
.kropka.ponad{background:var(--musztarda)}
.dzien-rzad .kcal{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.dzien-rzad .nazwa-dnia{font-size:15px;color:var(--szary);line-height:1.15}
.dzien-rzad[aria-current=date] .nazwa-dnia{color:var(--kobalt);font-weight:600}
.podsumowanie{margin-top:6px;color:var(--szary)}
.wagi{list-style:none;margin:10px 0 0;padding:0}
.wagi li{display:flex;justify-content:space-between;padding:8px 0;border-top:1px dashed var(--blekit)}
.wagi li:first-child{border-top:0}
.wagi b{font-weight:500}
.waga-dodaj{display:grid;grid-template-columns:1fr auto;gap:10px}
.waga-dodaj .przycisk{width:auto;min-height:46px;padding:0 22px}

/* --- profil --- */
.cel-wynik{margin-top:18px;padding:16px 0;border-top:2px dotted var(--kobalt);border-bottom:2px dotted var(--kobalt)}
.cel-wynik b{display:block;font-family:var(--display);font-weight:620;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;
  font-variant-numeric:lining-nums tabular-nums;font-size:48px;line-height:1.05;color:var(--kobalt)}
.drobne{font-size:15px;line-height:1.45;color:var(--szary);margin-top:16px}

/* --- komunikat --- */
#komunikat{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(var(--dok) + var(--bezp-dol) + 28px);
  width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.tost{display:flex;align-items:center;gap:14px;background:var(--granat);color:#fff;padding:12px 16px;border-radius:12px;
  pointer-events:auto;animation:tost .18s ease-out}
.tost button{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:28px}
@keyframes tost{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- wejście bez dostępu --- */
.brama{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:12px}
.brama p{color:var(--szary)}

@media (min-width:700px){
  #dok{left:50%;right:auto;transform:translateX(-50%);width:var(--szer);border:1px solid var(--mgla);border-bottom:0;border-radius:18px 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .stempel.nowy,.tost{animation:none}
  .liczy .obrecz{animation-duration:12s}
}