/* PictoCook: style aplikacji. Wspólne dla index.html i styleguide.html. */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/roboto-latin-ext.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:'Roboto'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/roboto-latin.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 }
/* Skala: nowy styl = istniejący token. Wartości spoza tokenów widać w audycie na /styleguide.html. */
:root {
  --bg:#fbf8f2; --ink:#2b2622; --muted:#7a716a; --accent:#eb592e; --card:#fff; --line:#e6ddd0;
  --line-2:#cfc4b5;                 /* mocniejsza linia: ramka checkboxa, wyłączona gwiazdka */
  --soft:#f1e9dd;                   /* neutralne tło: przyciski drugorzędne, liczniki, placeholdery obrazków */
  --ok:#1f5e2a; --ok-soft:#e3efe3;  /* zrobione / timer */
  --qty:#fbe7d6; --qty-ink:#8a3b12; /* ilości (pigułka) */
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:18px; --fs-xl:20px; --fs-2xl:26px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
}
* { box-sizing:border-box }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:'Roboto',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
.screen { display:none }
.screen.active { display:flex; flex-direction:column }

/* ---- lista ---- */
#list.active { min-height:100dvh }
.appbar { position:sticky; top:0; z-index:5; background:var(--bg); padding:12px 16px 10px; transition:box-shadow .2s }
.appbar.scrolled { box-shadow:0 2px 12px rgba(0,0,0,.08) }
.barrow { display:flex; align-items:center; gap:8px }
.barrow .brand { flex:1 }
.iconbtn { flex:none; width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--ink); display:grid; place-items:center; padding:0 }
.iconbtn svg { width:24px; height:24px }
.iconbtn:active { background:var(--soft) }
.searchrow { display:flex; align-items:center; gap:6px; margin-top:10px }
.searchrow[hidden] { display:none }
.iconbtn[hidden] { display:none }
.search::-webkit-search-cancel-button { -webkit-appearance:none; display:none }
.brand { display:flex; align-items:center; gap:12px }
.brand .logo { width:44px; height:44px; flex:none }
h1 { font-size:var(--fs-2xl); margin:0; letter-spacing:-.8px; line-height:1 }
h1 .wordmark { height:30px; width:auto; display:block }
.search { width:100%; padding:12px 14px; font-size:var(--fs-m); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); outline:none }
.search:focus { border-color:var(--accent) }
.list { padding:4px 16px 32px; display:grid; gap:14px }
/* Karta = samo zdjęcie; dane na nim (chipy u góry, tytuł na gradiencie u dołu). */
.card { position:relative; display:block; width:100%; aspect-ratio:4/3.4; border:0; padding:0; border-radius:var(--r-lg); overflow:hidden; background:var(--soft); text-align:left; color:#fff;
        box-shadow:0 10px 28px -12px rgba(60,30,10,.45); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; -webkit-tap-highlight-color:transparent }
.card:active { transform:scale(.97); box-shadow:0 4px 14px -8px rgba(60,30,10,.5) }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:drift 16s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -3s) }
.card .shade { position:absolute; inset:auto 0 0 0; padding:56px 16px 16px; background:linear-gradient(transparent, rgba(20,12,6,.35) 35%, rgba(20,12,6,.82)) }
.card h2 { margin:0; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.4px; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.35) }
.card .meta { margin-top:4px; font-size:var(--fs-s); opacity:.85 }
/* Chipy zawsze w jednym wierszu: przy braku miejsca kurczy się tylko .fit (tekst → „…”), „Kontynuuj” zostaje cały. */
.card .chips { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:6px }
.chip { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:var(--r-pill); font-size:var(--fs-s); font-weight:700; color:var(--ink);
        background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 2px 8px rgba(0,0,0,.12) }
.chip svg { width:15px; height:15px; flex:none }
.chip { flex:none; white-space:nowrap }
.chip.fit { flex:0 1 auto; min-width:0 }
.chip.fit span { overflow:hidden; text-overflow:ellipsis }
.card { container-type:inline-size }
@container (max-width:320px) { .chip.fit { display:none } } /* za mało miejsca nawet na „9…” (najdłuższy czas: „ok. 2 h 10 min”) */
.chip.go { margin-left:auto; background:var(--accent); color:#fff; animation:pulse 2.4s ease-in-out infinite }
.card .prog { position:absolute; left:0; bottom:0; height:5px; width:var(--p); background:var(--accent); border-radius:0 3px 3px 0 }
/* Wejście: karty wjeżdżają kolejno, chipy wyskakują, po zdjęciu przelatuje połysk. Tylko przy pierwszym renderze. */
.list.enter .card { animation:rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 80ms) }
.list.enter .chip { animation:pop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * 80ms + 350ms) }
.list.enter .chip.go { animation:pop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 80ms + 350ms) both, pulse 2.4s ease-in-out 1.5s infinite }
.list.enter .card::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
        transform:translateX(-120%); animation:shine 1.1s ease-out both; animation-delay:calc(var(--i) * 80ms + 300ms) }
@keyframes rise { from { opacity:0; transform:translateY(28px) scale(.96) } }
@keyframes pop { from { opacity:0; transform:scale(.4) } }
@keyframes shine { to { transform:translateX(120%) } }
@keyframes drift { from { transform:scale(1.02) } to { transform:scale(1.12) translate(-2%, -1%) } }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(235,89,46,.25) } }
@media (prefers-reduced-motion: reduce) { .card, .card *, .card::after, .list > *, .tile { animation:none !important } }
.empty { color:var(--muted); text-align:center; padding:32px }
/* Filtry: ulubione, ostatnie, kategorie. Przewijane poziomo, jeden aktywny naraz. */
.filters { display:flex; gap:8px; overflow-x:auto; margin:10px -16px 0; padding:0 16px 2px; scroll-padding-inline:16px; scrollbar-width:none }
.filters::-webkit-scrollbar { display:none }
.filter { flex:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill); padding:7px 13px; font-size:var(--fs-s); font-weight:500 }
.filter svg { width:15px; height:15px }
.filter[data-filter=home] { padding:7px 11px }
.filter[data-filter=home] svg { width:18px; height:18px }
.filter { transition:background .2s, border-color .2s, color .2s, transform .15s }
.filter:active { transform:scale(.93) }
.filter.on { background:var(--ink); border-color:var(--ink); color:#fff }
/* Sekcje strony głównej: „Kontynuuj” = duże karty, reszta = poziome rzędy małych kafelków. */
.sec { display:flex; align-items:baseline; justify-content:space-between; margin:14px 0 -4px }
.sec h2 { margin:0; font-size:var(--fs-xl); font-weight:700; letter-spacing:-.3px }
.sec button { border:0; background:none; color:var(--accent); font-size:var(--fs-s); font-weight:500; padding:4px 0 }
.row { display:flex; gap:10px; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scroll-snap-type:x proximity; scroll-padding:0 16px; scrollbar-width:none }
.row::-webkit-scrollbar { display:none }
.row .tile { flex:none; width:31%; min-width:104px; max-width:150px; scroll-snap-align:start }
.grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 10px }
.tile { display:block; align-self:start; border:0; background:none; padding:0; text-align:left; -webkit-tap-highlight-color:transparent } /* align-self: bez rozciągania — przycisk centruje treść w pionie i dwulinijkowy tytuł obniżał sąsiadów */
.tile .ph { position:relative; display:block; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--soft); transition:transform .2s }
.tile:active .ph { transform:scale(.95) }
.tile img { width:100%; height:100%; object-fit:cover; display:block } /* miniatura = kadr okładki na danie (src/optimize.ts) */
.tile .fav { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.85); color:var(--accent); display:grid; place-items:center }
.tile .fav svg { width:14px; height:14px }
.tile .prog { position:absolute; left:0; bottom:0; height:4px; width:var(--p); background:var(--accent) }
.tile b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; font-size:var(--fs-s); line-height:1.2 }
.tile small { display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--muted) }
.list.enter .tile { animation:rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 40ms) }
/* Zmiana wyników (filtr, szukanie): krótkie wejście kafelków falą, tylko gdy zestaw faktycznie się zmienił. */
.list.swap > :not(.grid), .list.swap .grid .tile { animation:swap .32s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(min(var(--i, 0), 8) * 30ms) }
@keyframes swap { from { opacity:0; transform:translateY(10px) } }
/* Ulubione w przepisie */
.fav.on { color:var(--accent) }

/* ---- przepis ---- */
#recipe.active { height:100dvh; overflow:hidden; position:relative }
/* Dok timerów: działające timery z innych kroków, widoczne na każdym ekranie; tap = skok do kroku. */
.dock { position:absolute; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none }
.dock button { pointer-events:auto; display:flex; align-items:center; gap:8px; max-width:100%; border:0; border-radius:var(--r-pill); padding:8px 14px 8px 10px; background:var(--ok); color:#fff;
               font-size:var(--fs-m); font-weight:500; box-shadow:0 6px 18px -4px rgba(0,0,0,.35); animation:dockin .35s cubic-bezier(.3,1.4,.5,1) }
.dock button svg { width:20px; height:20px; flex:none }
.dock .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dock .left { font-variant-numeric:tabular-nums; font-weight:700 }
#recipe.docked .slide { padding-bottom:calc(72px + env(safe-area-inset-bottom)) }
@keyframes dockin { from { opacity:0; transform:translateY(20px) scale(.9) } }
/* Jednorazowa podpowiedź przesuwania + lekkie „zajrzenie” na następny ekran. */
.hint { position:absolute; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill);
        background:var(--ink); color:#fff; font-size:var(--fs-m); font-weight:500; white-space:nowrap; box-shadow:0 8px 24px -6px rgba(0,0,0,.4); animation:dockin .4s .8s both; pointer-events:none }
.hint[hidden] { display:none }
.hint svg { width:20px; height:20px; animation:nudgearrow 1.2s ease-in-out infinite }
.track.peek { animation:peek 1.4s .9s ease-in-out 1 }
@keyframes nudgearrow { 50% { transform:translateX(-6px) } }
@keyframes peek { 30% { transform:translateX(-56px) } 60%, 100% { transform:none } }
@media (prefers-reduced-motion: reduce) { .track.peek, .hint svg { animation:none } }
.top { display:flex; align-items:center; gap:8px; padding:8px 12px 6px }
/* Ikona apki = powrót do listy (jak logo w pasku strony głównej). */
.back { flex:none; border:0; background:transparent; padding:0; width:36px; height:36px; border-radius:var(--r-sm); transition:transform .15s }
.back img { width:100%; height:100%; display:block }
.back:active { transform:scale(.9) }
.top .title { flex:1; margin:0 0 0 4px; font-size:var(--fs-l); font-weight:700; letter-spacing:-.2px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.counter { font-variant-numeric:tabular-nums; font-size:var(--fs-m); font-weight:700; padding:4px 10px; border-radius:var(--r-pill); background:var(--soft) }
.progress { height:4px; background:var(--line) }
.progress i { display:block; height:100%; background:var(--accent); transition:width .25s }

.track { flex:1; min-height:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.track::-webkit-scrollbar { display:none }
.slide { flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; padding:8px 16px 16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto }
.slide img { width:100%; aspect-ratio:1; border-radius:var(--r-md); background:var(--soft); display:block; user-select:none; -webkit-user-drag:none }
.figure { position:relative }
.clockov { position:absolute; top:10px; right:10px; border:0; padding:6px 12px 6px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); color:var(--ok); font-weight:700; font-size:var(--fs-m); display:flex; align-items:center; gap:6px; box-shadow:0 1px 6px rgba(0,0,0,.18); font-variant-numeric:tabular-nums }
.clockov svg { width:26px; height:26px }
.clockov.running { background:var(--ok); color:#fff }
.clockov.done { background:var(--soft); color:var(--muted) }
.clockov:not(.running):not(.done) { display:none } /* bez timera czas jest już w pigułce pod obrazkiem */
.finish .btn { margin-top:16px; border:0; background:var(--accent); color:#fff; border-radius:var(--r-sm); padding:14px 22px; font-size:var(--fs-l); font-weight:500 }
.slide { padding-bottom:calc(16px + env(safe-area-inset-bottom)) }
.head { display:flex; align-items:center; gap:10px; min-height:40px }
.head .num { flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:var(--fs-l); display:grid; place-items:center }
.head .t { flex:1; font-weight:700; font-size:var(--fs-xl); line-height:1.2 }
.head .track { flex:none; background:var(--soft); color:var(--muted); font-size:var(--fs-xs); font-weight:500; padding:4px 10px; border-radius:var(--r-pill); letter-spacing:.3px }
.meanwhile { display:flex; gap:10px; align-items:flex-start; background:#fff7e6; border:1px solid #f3dfb6; border-radius:var(--r-sm); padding:10px 12px; font-size:var(--fs-m); line-height:1.4; color:#6b4a12 }
.meanwhile svg { width:20px; height:20px; flex:none; margin-top:1px }
.stepper { display:flex; align-items:center; gap:8px; margin:2px 0 4px }
.stepper button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:var(--fs-xl); line-height:1 }
.stepper b { min-width:90px; text-align:center; font-size:var(--fs-l) }
.slide img.wide { aspect-ratio:3/2; object-fit:cover }
.slide h3 { margin:2px 0 0; font-size:var(--fs-xl); line-height:1.2 }
.actions { margin:0; padding:0; list-style:none; display:flex; flex-direction:column }
.actions li { display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--fs-l); line-height:1.4 }
.actions li:last-child { border-bottom:0 }
.actions li[data-check] { cursor:pointer; -webkit-user-select:none; user-select:none }
.nc { flex:none; width:26px; height:26px; border-radius:50%; background:var(--soft); color:var(--muted); font-size:var(--fs-xs); font-weight:700; display:grid; place-items:center; position:relative; top:-1px; transition:background .15s }
.nc b, .nc svg { grid-area:1/1 }
.nc svg { width:16px; height:16px; color:#fff; opacity:0 }
li.checked .nc { background:var(--ok) }
li.checked .nc b { opacity:0 }
li.checked .nc svg { opacity:1 }
.actions { counter-reset:act }
.actions li.running { background:var(--ok-soft); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:var(--r-sm) }
.actions.vessels li::before { content:counter(act) '.'; background:none; color:inherit; font-size:inherit; font-weight:700; width:auto; height:auto; display:inline; top:0 }
.slide ul { margin:0; padding-left:20px; font-size:var(--fs-l); line-height:1.6 }
.pill { display:inline-flex; align-items:center; gap:4px; padding:1px 9px; border-radius:var(--r-pill); font-weight:500; white-space:nowrap; font-size:.92em; vertical-align:baseline }
.pill.qty { background:var(--qty); color:var(--qty-ink) }
.pill.time { background:var(--ok-soft); color:var(--ok) }
.pill svg { width:.95em; height:.95em; flex:none }
button.pill.time { border:0; cursor:pointer; font:inherit; font-weight:500; font-size:.92em }
button.pill.time.running { background:var(--ok); color:#fff; animation:blink 1.2s infinite }
button.pill.time.done { background:var(--soft); color:var(--muted); text-decoration:line-through }
@keyframes blink { 50% { opacity:.75 } }
.slide .meta { color:var(--muted); font-size:var(--fs-s) }
.finish { text-align:center; margin:auto 0 }
.finish { display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 8px }
.finish .thumb { width:62%; aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:0 6px 24px rgba(0,0,0,.15); border:6px solid #fff; margin-bottom:14px }
.finish h3 { font-size:var(--fs-2xl); margin:0 }
.rate { margin:18px 0 4px; display:flex; flex-direction:column; align-items:center; gap:6px }
.rate .q { font-size:var(--fs-m); font-weight:500; color:var(--ink) }
.stars { display:flex; gap:4px }
.stars button { border:0; background:none; padding:4px; color:var(--line-2) }
.stars button svg { width:36px; height:36px }
.stars button.on { color:#e8a317 }
.rate .msg { font-size:var(--fs-s); color:var(--muted); min-height:1.2em; margin:0 }
.rate .msg.err { color:var(--accent) }
.finish p { font-size:var(--fs-l); line-height:1.45; color:var(--muted); margin:0; max-width:300px }


@media (hover:hover) and (min-width:700px) {
  body { max-width:520px; margin:0 auto; box-shadow:0 0 40px rgba(0,0,0,.08) }
}
.slide ul.ing { display:flex; flex-direction:column; margin:0; padding:0; list-style:none }
.ing li { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-l); line-height:1.35 }
.ing li:last-child { border-bottom:0 }
.ing .name { flex:1 1 55%; font-weight:500 }
.ing .note, .ing .alt { color:var(--muted); font-size:var(--fs-s) }
.ing .note { flex-basis:100%; padding-left:32px; margin-top:-2px }
.ing li.staple .name { color:var(--muted) }
.sub { margin:10px 0 0; font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.ing li[data-check] { cursor:pointer; -webkit-user-select:none; user-select:none }
.box { flex:none; align-self:center; width:24px; height:24px; border-radius:var(--r-xs); border:2px solid var(--line-2); background:#fff; display:grid; place-items:center; transition:background .15s, border-color .15s }
.box svg { width:16px; height:16px; color:#fff; opacity:0; transition:opacity .15s }
li.checked .box { background:var(--ok); border-color:var(--ok) }
li.checked .box svg { opacity:1 }
li.checked .name, li.checked .txt, .actions li.checked > span:last-child { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-2) }
li.checked .pill, li.checked .alt, li.checked .note { opacity:.45 }
.ing .txt { flex:1 }
.listhead { display:flex; align-items:baseline; gap:10px }
.listhead h3 { flex:1 }
.reset { flex:none; border:0; background:none; color:var(--muted); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; padding:0 }
.reset svg { width:20px; height:20px }
/* ---- pytanie przy wejściu w rozpoczęty przepis ---- */
.resume { border:0; border-radius:var(--r-lg); padding:0; width:min(360px, calc(100vw - 32px)); background:var(--card); color:var(--ink); text-align:center; overflow:hidden }
.resume::backdrop { background:rgba(20,12,6,.5) }
.resume:focus { outline:none }
.resume img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
.resume h3 { margin:16px 16px 4px; font-size:var(--fs-xl) }
.resume p { margin:0 16px; color:var(--muted) }
.resume .opts { display:flex; flex-direction:column; gap:8px; padding:16px }
.resume .opts button { border:0; border-radius:var(--r-sm); padding:14px; font-size:var(--fs-l); font-weight:500; background:var(--soft) }
.resume .opts .primary { background:var(--accent); color:#fff }
.resume .opts .link { padding:6px; background:none; color:var(--muted); font-size:var(--fs-s); text-decoration:underline; text-underline-offset:3px }
.resume .opts svg { width:18px; height:18px; vertical-align:-3px; margin-right:6px }
.reset.armed { width:auto; padding:0 12px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:var(--fs-s); font-weight:500 }
.count { font-size:var(--fs-s); color:var(--muted); font-variant-numeric:tabular-nums }
.clear { border:0; background:none; color:var(--accent); font-size:var(--fs-s); padding:4px 0 }
.clear[hidden] { display:inline; visibility:hidden } /* rezerwuje miejsce: pojawienie się nie przesuwa layoutu */
.pill.taste { background:var(--soft); color:var(--muted); font-weight:500 }
.pill.temp { background:#fde2dc; color:var(--qty-ink) }
.during a { color:inherit; font-weight:500 }