/* Widok kuchenny — według docs/mockup-ui-v1.html. Zgodny z Safari 12:
   bez flex gap, aspect-ratio, clamp/min/max, :is/:where/:has, inset (sprawdza tests/client.test.mjs).
   Zasada wizualna: PŁYTA (tło) + WGŁĘBIENIA (karty) + ŚWIECĄCY PIERŚCIEŃ (stan).
   Panele Ninja i TM6 zostają ciemne w obu motywach — wyglądają jak wyświetlacze urządzeń. */

:root {
  --plate: #141A20; --plate2: #0E1318; --well: #07090D; --well-edge: #1E262E;
  --ink: #EAEEF2; --ink2: #9DABB8; --muted: #6E7C89;
  --live: #FF8A3D; --live-core: #FFD4AE;
  --ready: #2F7CC2; --ready-core: #9FD0FF;
  --done: #34C759; --hot: #FF5C39;
  --tm6: #3FB28E; --tm6-core: #B9F0DD;
  --chip: #1A222A;
}
html.light {
  --plate: #F3EEE6; --plate2: #E9E2D7; --well: #FFFFFF; --well-edge: #D8CFC2;
  --ink: #1D232A; --ink2: #4A5560; --muted: #7A848D;
  --live: #E0651B; --live-core: #E0651B;
  --ready: #1F6FB8; --ready-core: #1F6FB8;
  --done: #23963F; --hot: #D9431F;
  --tm6: #1E8A69; --tm6-core: #1E8A69;
  --chip: #E6DED2;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--plate);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
/* iOS 12: dotknięcie elementu bez cursor:pointer nie wysyła zdarzenia click do nasłuchu na document */
[data-act], [data-open], [data-step], button { cursor: pointer; }
button { font-family: inherit; }

/* numer wersji: mały, szary, prawy górny róg, nad przyciskami paska, nie przechwytuje dotyku */
.version { position: fixed; top: 3px; right: 10px; z-index: 100; font-size: 11px; line-height: 1; color: #8a8a8a; pointer-events: none; }
/* tryb pełnoekranowy (ekran początkowy): pasek stanu iOS nachodzi na stronę — czarny pas pod nim */
.standalone .version { top: 23px; }

#app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--plate); color: var(--ink); font-size: 20px; line-height: 1.35;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.standalone #app { border-top: 20px solid #000; }

.bar { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  padding: 16px 20px 12px; background: var(--plate2); border-bottom: 1px solid var(--well-edge); min-height: 80px; }
.bar h1 { font-size: 28px; line-height: 1.15; margin: 0; font-weight: 700; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.btn { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--well-edge); background: var(--well); color: var(--ink);
  font-size: 22px; padding: 0 16px; margin-left: 10px; white-space: nowrap; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.btn.back { margin-left: 0; margin-right: 14px; font-size: 20px; font-weight: 600; }

.scroll { -webkit-flex: 1 1 auto; flex: 1 1 auto; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── lista ── */
.search { display: -webkit-flex; display: flex; padding: 16px 20px 6px; }
.search .box { -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 56px; border-radius: 14px; background: var(--well); border: 1px solid var(--well-edge);
  color: var(--muted); font-size: 20px; padding: 14px 18px; opacity: .6; }
.resume { margin: 10px 20px 4px; padding: 16px 20px; border-radius: 16px; background: var(--well); border: 2px solid var(--live);
  box-shadow: 0 0 0 1px var(--live-core) inset, 0 0 18px rgba(255,138,61,.25); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.resume .t { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.resume .k { color: var(--live); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.resume .n { font-size: 22px; font-weight: 600; }
.grid { padding: 10px 12px 24px; }
.grid:after { content: ""; display: table; clear: both; }
.card { float: left; width: calc(33.333% - 16px); margin: 8px; padding: 18px; border-radius: 16px; background: var(--well); border: 1px solid var(--well-edge);
  height: 172px; overflow: hidden; position: relative; }
.card .thumb { position: absolute; left: 16px; top: 16px; width: 112px; height: 112px; border-radius: 12px; }
.card .txt { margin-left: 126px; }
.card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; }
.card .meta { color: var(--ink2); font-size: 17px; }
.card .devs { margin-top: 14px; }
.dev { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; margin-right: 6px; }
.dev.ninja { color: #111; background: #FF8A3D; }
.dev.tm6 { color: #fff; background: var(--tm6); }

/* zdjęcia i kafelek zastępczy */
.ph { position: relative; overflow: hidden; text-align: center; color: rgba(255,255,255,.9); background: var(--chip); }
.ph img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .em { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.6em; line-height: 1.2em; }
.ph .cap { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 13px; opacity: .75; }
.ph.none { color: var(--muted); border: 1px dashed var(--well-edge); }
.thumb .em { font-size: 54px; }
.pic .em { font-size: 96px; }

/* ── przepis ── */
.hero { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 0 20px 0 0; }
.hero .info { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.hero .pic-wrap { -webkit-flex: 0 0 300px; flex: 0 0 300px; margin-top: 14px; }
.hero .pic { width: 100%; height: 190px; border-radius: 16px; }
.pic .zoom { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 700; padding: 8px 12px; border-radius: 10px; }

#viewer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 10;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
#viewer .vbar { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 12px 20px; color: #EAEEF2; }
#viewer .vbar h1 { font-size: 24px; margin: 0; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
#viewer .close { -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 56px; border-radius: 28px; border: 0; background: #FF8A3D; color: #111; font-size: 22px; font-weight: 800; padding: 0 22px; margin-left: 12px; }
#viewer .big { -webkit-flex: 1 1 auto; flex: 1 1 auto; position: relative; margin: 0 20px 20px; }
#viewer .big img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
#viewer .hint { color: #8D99A5; text-align: center; font-size: 15px; padding-bottom: 14px; }

.head { padding: 16px 20px 6px; color: var(--ink2); font-size: 18px; }
.head b { color: var(--ink); }
.head .sep { margin: 0 10px; color: var(--muted); }
.head .times { display: block; margin-top: 10px; }
.tags { padding: 4px 20px 0; }
.tag { display: inline-block; font-size: 15px; color: var(--muted); margin-right: 10px; }
.desc { padding: 8px 20px 0; color: var(--ink2); font-size: 18px; }

.serv { display: inline-block; vertical-align: middle; margin-right: 6px; }
.serv .sb { width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--well-edge); background: var(--well); color: var(--ink);
  font-size: 28px; font-weight: 600; line-height: 48px; padding: 0; vertical-align: middle; }
.serv .sb[disabled] { opacity: .35; }
.serv .sn { display: inline-block; min-width: 118px; text-align: center; font-size: 20px; color: var(--ink2); vertical-align: middle; }
.serv .sn b { font-size: 28px; color: var(--ink); }
.serv .sn.chg b { color: var(--live); }
.serv .orig { display: block; font-size: 14px; color: var(--live); text-decoration: underline; padding: 4px 0; }

/* przypięte panele urządzeń (pod paskiem, przewija się tylko treść pod nimi) */
.pin { -webkit-flex: 0 0 auto; flex: 0 0 auto; background: var(--plate); border-bottom: 1px solid var(--well-edge); padding-bottom: 10px; }
.npanel { margin: 10px 20px 0; padding: 14px; border-radius: 18px; background: #050709; border: 1px solid #222A31; color: #EAEEF2;
  display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; }
.zone { -webkit-flex: 1 1 0; flex: 1 1 0; background: #0B0F14; border-radius: 12px; padding: 12px 16px; border: 1px solid #1B232B; }
.npanel.single .zone { -webkit-flex: 0 0 50%; flex: 0 0 50%; }
.zone .zh { font-size: 15px; color: #8D99A5; letter-spacing: .08em; text-transform: uppercase; }
.zone .zh b { color: #FF8A3D; font-size: 18px; margin-right: 6px; }
.zone .lbl { font-size: 22px; font-weight: 700; margin: 2px 0 6px; color: #EAEEF2; }
.zone .fn { font-size: 18px; font-weight: 800; color: #FFD4AE; letter-spacing: .06em; text-transform: uppercase; }
.zone .vals { margin-top: 4px; white-space: nowrap; }
.zone .big { font-size: 54px; font-weight: 300; color: #FF8A3D; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.zone .unit { font-size: 22px; color: #FFB27E; margin-right: 22px; }
.mode { -webkit-flex: 0 0 96px; flex: 0 0 96px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.mode .pill { font-size: 16px; font-weight: 800; letter-spacing: .1em; color: #111; background: #9FD0FF; padding: 8px 12px; border-radius: 8px; }
.mode .hint { font-size: 12px; color: #8D99A5; text-align: center; margin-top: 8px; line-height: 1.2; }
.scaled { margin: 8px 20px 0; padding: 8px 14px; border-radius: 10px; background: rgba(255,138,61,.12); color: var(--live); font-size: 16px; }

/* Panel TM6 — mocny kontrast (czytelny z ~1 m, także przy jasnym motywie reszty strony). */
.tpanel { margin: 10px 20px 0; padding: 12px 16px 14px; border-radius: 18px; background: #050709; border: 1px solid #2E6B57; color: #FFFFFF; }
.tpanel .th { font-size: 19px; color: #7DF5C8; font-weight: 700; margin-bottom: 10px; height: 26px; line-height: 26px; white-space: nowrap; overflow: hidden; }
.tpanel .th b { color: #FFFFFF; }
.tpanel .tk { display: inline-block; background: #3EE6A8; color: #04130D; font-weight: 800; font-size: 15px; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; margin-right: 10px; }
.tpanel .tmode { float: right; color: #7DF5C8; font-weight: 700; }
.dials { text-align: center; white-space: nowrap; }
.dial { display: inline-block; width: 31%; vertical-align: top; }
.dial .ring { width: 124px; height: 124px; margin: 0 auto; border-radius: 62px; border: 7px solid #3EE6A8; box-shadow: 0 0 0 1px #C8FFE9 inset, 0 0 18px rgba(62,230,168,.45);
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.dial .v { font-size: 34px; font-weight: 500; color: #FFFFFF; line-height: 1; font-variant-numeric: tabular-nums; }
.dial .v.sm { font-size: 26px; font-weight: 600; }
.dial .u { font-size: 14px; color: #A8FFDD; font-weight: 600; margin-top: 4px; }
.dial .dl { font-size: 15px; color: #C9D3DC; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.dial.off .ring { border-color: #2A3A35; box-shadow: none; }
.dial.off .v { color: #5E6B77; }
.dial.off .u { color: #5E6B77; }

/* składniki + kroki: w poziomie dwie kolumny, w pionie jedna pod drugą */
.cols { display: -webkit-flex; display: flex; padding: 6px 10px 20px; -webkit-align-items: flex-start; align-items: flex-start; }
.col { padding: 0 10px; }
.col.c-ing { width: 40%; }
.col.c-steps { width: 60%; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 18px 0 10px; font-weight: 700; }

.ing { background: var(--well); border: 1px solid var(--well-edge); border-radius: 16px; padding: 6px 18px; }
.ing .g { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--live); font-weight: 700; margin: 12px 0 2px; }
.ing .row { display: -webkit-flex; display: flex; padding: 9px 0; border-bottom: 1px solid var(--well-edge); }
.ing .row:last-child { border-bottom: 0; }
.ing .q { -webkit-flex: 0 0 150px; flex: 0 0 150px; font-weight: 700; color: var(--ink); text-align: right; padding-right: 14px; font-variant-numeric: tabular-nums; }
.ing .q.none { color: var(--muted); font-weight: 400; }
.ing .nm { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.ing .note { color: var(--muted); font-size: 17px; }

.step { display: -webkit-flex; display: flex; background: var(--well); border: 1px solid var(--well-edge); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.step .num { -webkit-flex: 0 0 44px; flex: 0 0 44px; height: 44px; border-radius: 22px; border: 2px solid var(--well-edge); color: var(--ink2);
  font-size: 20px; font-weight: 700; text-align: center; line-height: 40px; margin-right: 16px; }
.step .body { -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 22px; line-height: 1.4; }
.step.cur { border: 2px solid var(--live); padding: 15px 17px; box-shadow: 0 0 0 1px var(--live-core) inset, 0 0 22px rgba(255,138,61,.28); }
.step.cur .num { border-color: var(--live); color: var(--live); }
.step.past { opacity: .5; }
.step.past .num { border-color: var(--done); color: var(--done); }

.tm6row { margin-top: 12px; }
.tm { display: inline-block; margin: 0 8px 6px 0; padding: 7px 12px; border-radius: 10px; background: var(--chip); border: 1px solid var(--tm6);
  color: var(--tm6-core); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm.k { background: var(--tm6); color: #fff; border-color: var(--tm6); font-size: 14px; letter-spacing: .08em; }
.temp-in { display: table; margin-top: 12px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--hot); color: var(--hot); font-size: 19px; font-weight: 700; }

.notes { padding: 0 20px 28px; }
.notes .txt { background: var(--well); border: 1px solid var(--well-edge); border-radius: 16px; padding: 14px 18px; color: var(--ink2); white-space: pre-line; }

/* przepisy z błędem: czerwona plakietka na liście + nakładka z listą błędów */
.problems-badge { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: calc(100% - 40px); margin: 16px 20px 0;
  min-height: 56px; padding: 12px 18px; border-radius: 14px; border: 2px solid #D92D20; background: #D92D20; color: #FFFFFF;
  font-size: 21px; font-weight: 800; text-align: left; }
.problems-badge .more { margin-left: auto; padding-left: 16px; font-size: 18px; font-weight: 600; opacity: .9; white-space: nowrap; }
#problems { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: var(--plate);
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
#problems .pbar { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  padding: 16px 20px 12px; background: #D92D20; color: #FFFFFF; }
#problems .pbar h1 { font-size: 26px; margin: 0; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
#problems .close { -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 56px; border-radius: 28px; border: 0; background: #FFFFFF; color: #111; font-size: 22px; font-weight: 800; padding: 0 22px; margin-left: 12px; }
#problems .plist { -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 28px; }
#problems .pintro { color: var(--ink2); font-size: 18px; margin: 10px 0 14px; }
.pfile { background: var(--well); border: 1px solid var(--well-edge); border-left: 6px solid #D92D20; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.pfile .pname { font-size: 21px; font-weight: 800; word-break: break-all; }
.pfile .pstate { font-size: 16px; color: var(--ink2); margin: 2px 0 8px; }
.pfile .pstate.skipped { color: var(--hot); font-weight: 700; }
.pfile .pitem { font-size: 19px; padding: 8px 0; border-top: 1px solid var(--well-edge); }
.pfile .ppath { font-size: 14px; color: var(--muted); font-family: Menlo, Courier, monospace; margin-top: 2px; }

/* stany: ładowanie, pusta lista, błąd */
.loading { text-align: center; color: var(--muted); padding: 120px 40px; font-size: 22px; }
.empty { text-align: center; color: var(--muted); padding: 120px 40px; font-size: 22px; }
.err { margin: 40px 20px; padding: 24px; border-radius: 16px; border: 2px solid var(--hot); background: var(--well); }
.err b { color: var(--hot); }

/* ── pion (768 pt szerokości): dwie kolumny kart, przepis w jednej kolumnie ── */
@media (max-width: 900px) {
  .card { width: calc(50% - 16px); }
  .hero .pic-wrap { -webkit-flex: 0 0 260px; flex: 0 0 260px; }
  .hero .pic { height: 170px; }
  .cols { display: block; }
  .col.c-ing, .col.c-steps { width: 100%; }
}