/* Funkcje (scena 4): zakładki z lewej, podgląd na laptopie i telefonie z prawej */
.feat{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(28px,5vw,72px);align-items:center}

/* lista zakładek */
.tabs{display:grid;border-top:1px solid var(--line)}
.tab{border-bottom:1px solid var(--line)}
.tab [role=tab]{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0 18px;
  font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-0.015em;color:var(--ink-3)}
.tab [role=tab]:hover{color:var(--ink)}
.tab [role=tab]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.tab[data-on="true"] [role=tab]{color:var(--ink)}
.tab-body{display:none;padding:0 0 20px;color:var(--ink-2);max-width:46ch}
.tab[data-on="true"] .tab-body{display:block}

/* przycisk wstrzymania automatycznego przełączania (WCAG 2.2.2), w stylu plakietki */
.tabs-col{display:grid;gap:16px;justify-items:start;min-width:0}
.tabs-col .tabs{width:100%}
.tabs-pause{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:600 13px var(--f-sans);padding:5px 12px 5px 10px;border-radius:999px;background:var(--mist-2);color:var(--ink-2)}
.tabs-pause::before{content:"";width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor;box-sizing:border-box}
.tabs-pause.is-paused{background:var(--blue-wash);color:var(--blue-deep)}
.tabs-pause.is-paused::before{border:0;border-left:8px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.tabs-pause:hover{color:var(--ink)}
.tabs-pause[hidden]{display:none}

/* pasek postępu: 6 s do automatycznego przełączenia */
.prog{height:3px;background:var(--mist-2);border-radius:2px;overflow:hidden;margin-top:16px}
.prog i{display:block;height:100%;width:0;background:var(--blue)}
.tab[data-on="true"] .prog i{animation:prog 6s linear forwards}
.paused-tabs .tab[data-on="true"] .prog i{animation:none;width:100%}
@keyframes prog{to{width:100%}}

/* makiety urządzeń (D-015): laptop z podglądem zakładek i telefon z alertami.
   --lw to szerokość laptopa razem z podstawą (ekran jest o 12% węższy); telefon wypełnia resztę
   i zachodzi na ekran tylko o --ov: ramkę 12 px i 4 px z 8 px marginesu wokół planu, nigdy na treść. */
.devices{display:grid;min-width:0;padding-bottom:clamp(24px,4vw,44px);--lw:86%;--ov:16px}
.dev-laptop{grid-area:1/1;align-self:start;width:var(--lw);min-width:0}
.dev-screen{width:calc(100% / 1.12);container-type:inline-size;margin-inline:auto;border:12px solid var(--device-frame);border-bottom-width:16px;border-radius:18px 18px 0 0;
  background:var(--device-frame);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--night) 55%,transparent)}
.app-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 12px;border-radius:6px 6px 0 0;background:var(--night-2);
  border-bottom:1px solid var(--night-line);font-size:12px;color:var(--on-night-2);white-space:nowrap;overflow:hidden}
.app-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.app-bar b{font-weight:600;color:var(--on-night)}
.app-bar i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--live)}
.dev-base{position:relative;height:16px;border-radius:0 0 18px 18px;background:linear-gradient(var(--device-base),var(--device-base-2))}
.dev-base::before{content:"";position:absolute;top:0;left:43%;width:14%;height:5px;border-radius:0 0 8px 8px;background:var(--device-base-2)}

.dev-phone{grid-area:1/1;justify-self:end;align-self:end;width:calc(100% - var(--lw) * .9464 + var(--ov));aspect-ratio:1/2;padding:9px;border-radius:34px;
  background:var(--device-frame);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--night) 55%,transparent);container-type:inline-size;transition:opacity .3s ease}
.dp-screen{position:relative;height:100%;border-radius:25px;overflow:hidden;background:var(--night);color:var(--on-night);font-size:7.4cqi;line-height:1.3}
/* sześć widoków w jednym miejscu ekranu (T-037): telefon nie zmienia rozmiaru, widoki się przenikają */
.dp-view{position:absolute;inset:0;display:flex;flex-direction:column;gap:5cqi;padding:10cqi 6cqi;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.dp-view.on{opacity:1;visibility:visible;transition:opacity .25s ease}
.dp-head{display:flex;justify-content:space-between;gap:4cqi;padding-inline:2cqi;margin-bottom:2cqi;font-size:9cqi;font-weight:600}
.dp-card{display:grid;gap:1.5cqi;padding:5cqi 6cqi;border-radius:7cqi;border-left:3cqi solid var(--plan-crit);background:var(--paper);color:var(--ink)}
.dp-card.warn{border-left-color:var(--plan-warn)}
.dp-card b{font-size:8.6cqi;font-weight:600}
.dp-card span{color:var(--ink-2)}
.dp-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4cqi}
.dp-tiles div{display:grid;align-content:start;gap:1cqi;min-width:0;padding:5cqi;border-radius:7cqi;border:1px solid var(--night-line);background:var(--night-2)}
.dp-tiles b{font-size:11cqi;font-weight:600;line-height:1.1}
.dp-tiles span{font-size:6.8cqi;color:var(--on-night-2)}
/* „Sala”: trzy stoliki najdłużej w jednym stanie, kropka w kolorze stanu, pasek przy pilnych */
.dp-rows{list-style:none;margin:0;padding:0;display:grid;gap:3cqi}
.dp-rows li{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:.5cqi 3cqi;align-items:center;padding:4cqi 5cqi;border-radius:6cqi;
  background:var(--night-2);border-left:3cqi solid transparent}
.dp-rows li.crit{border-left-color:var(--plan-crit)}
.dp-rows li.warn{border-left-color:var(--plan-warn)}
.dp-rows i{grid-row:span 2;width:4cqi;height:4cqi;border-radius:50%;background:var(--c)}
.dp-rows b{font-weight:600}
.dp-rows span{grid-column:2;font-size:6.6cqi;color:var(--on-night-2)}
.dp-rows time{grid-column:3;grid-row:1 / span 2;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c)}
/* „Alerty”: ekran blokady z powiadomieniami */
.dp-lock{justify-content:flex-start;padding-top:16cqi}
.dp-lock-time{font-size:24cqi;text-align:center;line-height:1;margin-bottom:6cqi}
.dp-note{display:grid;gap:1.5cqi;padding:5cqi;border-radius:7cqi;background:var(--paper);color:var(--ink)}
.dp-note.old{opacity:.6}
.dp-note p{margin:0}
.dp-app{display:flex;align-items:center;gap:2.5cqi;font-size:6.2cqi;color:var(--ink-3)}
.dp-app i{width:5cqi;height:5cqi;border-radius:1.5cqi;background:var(--blue)}
/* „Raport dnia”, „Kolejka” */
.dp-sub{margin:0;color:var(--on-night-2)}
.dp-big{font-size:22cqi;line-height:.9}
.dp-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:2cqi;padding-bottom:1px;border-bottom:1px solid var(--night-line)}
.dp-bars i{flex:1;height:var(--h);border-radius:1.5cqi 1.5cqi 0 0;background:var(--plan-st-seated);opacity:.9}
.dp-bars i.hi{background:var(--plan-st-bill)}
/* „Strefy”: stoliki z największym i najmniejszym ruchem, pasek w kolorach heatmapy */
.dp-zones{list-style:none;margin:0;padding:0;display:grid;gap:4cqi}
.dp-zones li{display:grid;gap:1.5cqi;padding:5cqi;border-radius:6cqi;background:var(--night-2)}
.dp-zones span{font-size:6.6cqi;color:var(--on-night-2)}
.dp-zones b{font-weight:600}
.dp-zones i{height:2.5cqi;border-radius:2cqi;width:var(--v,50%);background:var(--heat,var(--plan-st-seated))}
/* „Rachunki”: dwa ostatnie zdarzenia z listy POS */
.dp-pos{list-style:none;margin:0;padding:0;display:grid;gap:3cqi}
.dp-pos li{display:grid;gap:1.5cqi;padding:4cqi 5cqi;border-radius:6cqi;background:var(--night-2)}
.dp-pos time{font-size:6.6cqi;color:var(--on-night-2)}
.dp-pos em{justify-self:start;font-style:normal;font-size:5.8cqi;padding:0 3cqi;border-radius:999px;color:var(--plan-st-ordered);border:1px solid color-mix(in srgb,var(--plan-st-ordered) 40%,transparent)}

/* podgląd na ekranie laptopa: wysokość wynika z planu sali (cała szerokość ekranu, margines 8 px, proporcje 1000:640),
   pozostałe panele mieszczą się w tej samej wysokości, więc ekran nie zmienia rozmiaru przy przełączaniu zakładek */
.feat-stage{display:grid;height:calc((100cqi - 16px) * .64 + 16px);overflow:hidden;border-radius:0 0 4px 4px;color:var(--on-night);background:var(--night)}
/* zmiana zakładki bez przygaszania ekranu (T-033): nowy panel wchodzi nad starym, stary znika dopiero pod pełnym nowym */
.pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:0;overflow:hidden;padding:12px clamp(12px,1.6vw,20px);
  background:var(--night);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 0s linear .4s,transform 0s linear .4s,visibility 0s linear .4s}
.pane.on{z-index:1;opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.pane:focus-visible{outline:2px solid var(--blue-bright);outline-offset:-4px}
#pane-plan,#pane-heatmapy{padding:8px}

/* plan sali i heatmapa; plakietka i legenda w prawym górnym rogu leżą na strefie baru, nie na stolikach */
.plan-wrap{position:relative;width:100%}
#miniPlan,#heatPlan{display:block;width:100%;height:auto;aspect-ratio:1000/640;border-radius:14px;border:1px solid var(--night-line)}
.live-tag{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--on-night);
  background:color-mix(in srgb,var(--night) 75%,transparent);padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-night) 8%,transparent)}
.live-tag i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:live 2s infinite}
.heat-legend{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--on-night-2);white-space:nowrap;
  background:color-mix(in srgb,var(--night) 75%,transparent);padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-night) 8%,transparent)}
.heat-legend canvas{width:72px;height:6px;border-radius:3px}

/* powiadomienia */
.notifs{width:min(380px,100%);display:grid;gap:12px}
.notif{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:13px 15px;display:grid;grid-template-columns:34px 1fr auto;gap:4px 11px;
  box-shadow:0 18px 36px -18px color-mix(in srgb,var(--night) 60%,transparent)}
.notif.old{opacity:.75;transform:scale(.95)}
.notif .ic{grid-row:span 2;width:34px;height:34px;border-radius:9px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center}
.notif .ic.crit{background:var(--crit)}
.notif .ttl{font-weight:600;font-size:14.5px}
.notif .tm{font-size:12.5px;color:var(--ink-3)}
.notif .bd{grid-column:2/4;font-size:14px;color:var(--ink-2)}

/* wykres słupkowy */
.chart{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.chart h3{font-size:15px;font-weight:600}
.chart h3 span{display:block;font-size:13px;font-weight:400;color:var(--on-night-2);margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--night-line);padding-bottom:2px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--plan-st-seated);height:var(--h);opacity:.9}
.bars i.hi{background:var(--plan-st-bill)}
.bars-x{display:flex;gap:10px;font-size:12px;color:var(--on-night-2)}
.bars-x span{flex:1;text-align:center}

/* kolejka */
.queue{display:grid;gap:14px;justify-items:start;width:min(340px,100%)}
.queue b{font-size:clamp(64px,8vw,96px);line-height:.9}
.queue p{color:var(--on-night-2)}
.qrow{display:flex;gap:8px;flex-wrap:wrap}
.qrow span{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--on-night) 8%,transparent);font-size:14px}
.qrow span.warn{background:color-mix(in srgb,var(--plan-warn) 16%,transparent);color:var(--plan-warn)}

/* zdarzenia POS */
.posl{width:min(460px,100%);display:grid}
.posl div{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--night-line);font-size:14.5px}
.posl div:last-child{border-bottom:0}
.posl time{color:var(--on-night-2);font-size:13px}
.posl .s{display:flex;gap:5px;margin-top:3px}
.posl .s span{font-size:11.5px;padding:1px 8px;border-radius:999px;border:1px solid var(--night-line);color:var(--on-night-2)}
.posl .s .pos{color:var(--plan-st-ordered);border-color:color-mix(in srgb,var(--plan-st-ordered) 40%,transparent)}
.posl .s .vis{color:var(--plan-st-seated);border-color:color-mix(in srgb,var(--plan-st-seated) 40%,transparent)}

/* telefon wsuwa się 24 px z dołu, gdy podgląd wchodzi na ekran; tylko gdy przeglądarka to wspiera */
@media (max-width:980px){
  .feat{grid-template-columns:minmax(0,1fr)}
  /* telefon ok. 30% szerokości, laptop się zmniejsza, żeby telefon dalej zachodził tylko na ramkę */
  .devices{order:-1;width:100%;max-width:640px;justify-self:center;--lw:calc(74% + 21px)}
}
/* do 1120 px ekran laptopa jest niski: gęstsze panele, żeby mieściły się w wysokości planu */
@media (max-width:1120px){
  .notifs{gap:8px}
  .notif{padding:9px 11px;border-radius:14px;grid-template-columns:26px 1fr auto;gap:2px 9px}
  .notif .ic{width:26px;height:26px;border-radius:7px}
  .notif .ttl{font-size:13px}
  .notif .tm,.notif .bd{font-size:12px}
  .chart{gap:8px}
  .chart h3{font-size:13px}
  .chart h3 span,.bars-x{font-size:11px}
  .bars,.bars-x{gap:5px}
  .posl div{grid-template-columns:40px 1fr;gap:6px;padding:4px 0;font-size:12.5px}
  .posl time{font-size:11.5px}
  .posl .s{margin-top:3px}
  .posl .s span{font-size:10.5px;padding:0 6px}
  .queue{gap:8px}
  .queue b{font-size:52px}
  .queue p,.qrow span{font-size:13px}
  .qrow span{padding:4px 10px}
}
@media (max-width:600px){
  .devices{--lw:100%}
  .dev-phone{display:none}
  .pane{padding:6px 10px}
  .live-tag{display:none}
  .heat-legend{top:6px;right:6px;gap:6px;padding:3px 8px;font-size:10px}
  .heat-legend canvas{width:40px}
  /* ekran ma ok. 250 px szerokości i 160 px wysokości: najciaśniejsze panele */
  .notifs{gap:4px}
  .notif{padding:4px 9px;gap:0 8px;grid-template-columns:22px 1fr auto;line-height:1.25}
  .notif .ic{width:22px;height:22px}
  .notif .ttl{font-size:11.5px}
  .notif .tm,.notif .bd{font-size:11px}
  .chart{gap:6px}
  .posl div{grid-template-columns:36px 1fr;padding:3px 0;font-size:11px;line-height:1.3}
  .posl time{font-size:10.5px}
  /* plakietki w tej samej linii co zdarzenie */
  .posl .s{display:inline-flex;margin:0 0 0 5px;vertical-align:1px}
  .posl .s span{font-size:10px}
  .queue{gap:6px}
  .queue b{font-size:40px}
  .queue p,.qrow span{font-size:11.5px}
  .qrow{gap:5px}
  .qrow span{padding:3px 8px}
}
@media (prefers-reduced-motion:reduce){
  .tab[data-on="true"] .prog i{animation:none;width:100%}
  .tabs-pause{display:none}
  .dev-phone,.dp-view,.dp-view.on{transition:none}
  .pane,.pane.on{transition:none;transform:none}
}