/* Lokamo :: scena Panel (23:05, podsumowanie dnia) na MacBooku.
   Zestaw MacBooka jest w mac.css (.mbk, .mos, .mw, .lk, .ntf, .dock, .cur);
   tutaj tylko uklad tej sceny w pinie i widok Przeglad panelu Lokamo w Safari.
   Wymiary w em pulpitu (.mos = 1/80 szerokosci ekranu, pulpit 80 x 52 em). */

/* ---------- Scena w pinie ---------- */
.scn--dash{--sh:47;padding:1.7em 2em}
.scn--dash>.sprite{position:absolute;width:0;height:0;overflow:hidden}
.scn--dash .mos__wall{filter:brightness(.8) saturate(.92)}

/* ---------- Safari: jedno okno na srodku pulpitu ---------- */
.scn--dash .mw--sf{left:5em;top:3.1em;width:70em;height:42em;transform-origin:50% 55%;transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
.js .scn--dash .mw--sf:not(.is-open){opacity:0;transform:scale(.93);transition:none}

/* Dock: Safari podskakuje przy uruchamianiu */
.scn--dash .dk--safari.is-launch{animation:pbounce .95s linear}
@keyframes pbounce{
  0%{transform:none;animation-timing-function:cubic-bezier(.25,.6,.45,1)}
  24%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.55,0,.75,.4)}
  48%{transform:none;animation-timing-function:cubic-bezier(.25,.6,.45,1)}
  68%{transform:translateY(-.55em);animation-timing-function:cubic-bezier(.55,0,.75,.4)}
  86%,100%{transform:none}
}

/* Powiadomienie: krzyzyk po najechaniu, znika po kliknieciu */
.scn--dash .ntf__x{position:absolute;left:-.5em;top:-.5em;display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:rgba(246,246,248,.96);box-shadow:0 0 0 .06em rgba(0,0,0,.12),0 .15em .45em rgba(0,0,0,.22);opacity:0;transition:opacity .2s}
.scn--dash .ntf__x svg{width:.8em;height:.8em;color:#55555B;stroke-width:2.6}
.scn--dash .ntf.is-hover{background:rgba(250,250,252,.9)}
.scn--dash .ntf.is-hover .ntf__x{opacity:1}
.scn--dash .ntf.is-hit{opacity:0;transform:scale(.96);transition:opacity .28s,transform .3s var(--ease-out)}
.scn--dash .ntf__h{white-space:nowrap}

/* ---------- Przeglad ---------- */
.pp__live{display:inline-flex;align-items:center;gap:.4em;color:var(--ok);font-weight:560}
.pp__live::before{content:"";width:.52em;height:.52em;border-radius:50%;background:currentColor;box-shadow:0 0 0 .2em rgba(27,158,90,.16)}
.pp__grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9em;margin-top:1.15em}
/* panel v2: Dzis (liczby dnia nad wykresem), Wyniki i Opinie (jedna kolumna kart) */
.pp__grid--dzis{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.pp__grid--dzis .pp__kpis.pp__kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp__grid--jeden{grid-template-columns:minmax(0,1fr);align-content:start}
.lk__head .lk__pre{margin:0 0 .4em;font-size:.76em;color:#56565C}
.lk__rng{display:flex;gap:.2em;padding:.2em;border-radius:99em;background:#fff;box-shadow:0 0 0 .07em #E6E6EA;font-size:.76em}
.lk__rng i{padding:.4em .85em;border-radius:99em;font-style:normal;color:#56565C;white-space:nowrap}
.lk__rng i.is-on{background:var(--ink);color:#fff;font-weight:560}
.pp__th--sub{margin-top:1.1em}
.pp__kpis.pp__kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp__grid.pp__grid--dwa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}
.pp__ki{display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:.55em;background:#F2F2F5;color:#3A3A3F}
.pp__ki svg{width:1.25em;height:1.25em}
.pp__col{display:flex;flex-direction:column;gap:.9em;min-width:0;min-height:0}
.pp__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9em}
.pp__k{padding:.85em 1.05em .9em;border-radius:1.05em;background:#fff;box-shadow:0 .05em .12em rgba(13,13,15,.04),0 .35em 1.2em rgba(13,13,15,.05);transition:background-color .3s}
.pp__k.is-hov{background:#F7F7F9}
.pp__k small{display:block;font-size:.78em;color:var(--steel)}
.pp__k b{display:block;margin:.26em 0 .22em;font-size:1.66em;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.pp__k i{display:block;font-style:normal;font-size:.76em;color:var(--steel);white-space:nowrap}
.pp__k i.up{color:var(--ok)}
.pp__k i span{font-family:var(--font);color:var(--mute)}
.pp__card{position:relative;display:flex;flex-direction:column;min-width:0;padding:1em 1.15em 1.05em;border-radius:1.05em;background:#fff;box-shadow:0 .05em .12em rgba(13,13,15,.04),0 .35em 1.2em rgba(13,13,15,.05)}
.pp__card--chart{flex:1;min-height:0}
.pp__col>.pp__card:first-child{flex:1.25}
.pp__col>.pp__card+.pp__card{flex:1}
.pp__ct{display:flex;align-items:center;gap:.6em;font-size:.88em;font-weight:620;letter-spacing:-.005em}
.pp__ct small{margin-left:auto;font-size:.86em;font-weight:450;color:var(--steel)}
.pp__peak{margin-left:auto;padding:.24em .6em;border-radius:.45em;background:var(--ink);color:#fff;font-size:.86em;font-weight:500;transition:opacity .4s}
.js .pp__peak:not(.is-show){opacity:0}
.pp__hint{margin-top:auto;padding-top:.7em;font-size:.78em;line-height:1.35;color:var(--steel);transition:opacity .25s}
.pp__hint.is-swap{opacity:0}

/* Wykres: slupki co godzine 12-22, linie co 500 zl, dymek u gory */
.pp__plot{position:relative;flex:1;min-height:0;margin-top:.6em}
.pp__bars{height:100%;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.42em;align-items:end;padding-top:3.2em;border-bottom:.07em solid #DCDCE1;background:repeating-linear-gradient(to top,transparent 0 calc(33.333% - .07em),#EFEFF2 calc(33.333% - .07em) 33.333%) content-box}
.pp__bars i{height:calc(var(--h) * 100%);border-radius:.3em .3em 0 0;background:#D6D6DB;transform-origin:50% 100%;transition:transform .9s var(--ease-out) calc(var(--d,0) * 45ms),background-color .25s}
.js .pp__bars:not(.is-in) i{transform:scaleY(0);transition:none}
.pp__bars.is-peak i{background:#E2E2E6}
.pp__bars.is-peak i.is-pk{background:var(--ink)}
.pp__bars i.is-hov,.pp__bars.is-peak i.is-hov{background:var(--cobalt)}
.pp__axis{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.42em;margin-top:.45em;font-size:.74em;color:var(--mute);text-align:center}
.pp__tip{position:absolute;top:0;left:calc((var(--i,7) + .5) / 11 * 100%);padding:.42em .72em .48em;border-radius:.62em;background:var(--ink);color:#fff;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .2s,left .38s var(--ease-out);pointer-events:none;z-index:2}
.pp__tip::after{content:"";position:absolute;left:50%;bottom:-.3em;width:.62em;height:.62em;margin-left:-.31em;background:inherit;border-radius:.1em;transform:rotate(45deg)}
.pp__tip.is-on{opacity:1}
.pp__tip b{display:block;font-size:.74em;font-weight:500;color:#B4B4BC}
.pp__tip span{display:block;margin-top:.12em;font-size:.86em;font-weight:560}

/* Ogladane, ale niezamowione */
.pp__th,.pp__row{display:grid;grid-template-columns:2.7em minmax(0,1fr) 4.6em 4.9em;gap:.6em;align-items:center;font-size:.86em}
.pp__th{margin:.85em 0 .1em}
.pp__th span{font-size:.86em;color:var(--mute);white-space:nowrap}
.pp__th span:first-child{grid-column:span 2}
.pp__th span:nth-child(n+2),.pp__row>i,.pp__row>em{justify-self:end}
.pp__row{margin:0 -.5em;padding:.48em .5em;border-radius:.65em;transition:background-color .2s,opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.pp__row+.pp__row{box-shadow:0 -.07em 0 #EFEFF2}
.pp__row img{width:2.7em;height:2.7em;border-radius:.55em;object-fit:cover}
.pp__row span{font-weight:540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp__row>i{font-style:normal;color:var(--steel);font-size:.92em}
.pp__row>em{font-style:normal;font-size:.9em;padding:.16em .45em;border-radius:.4em;background:#F1F1F4}
.pp__row>em.warn{background:#FFF1D6;color:#8F5700}
.pp__row.is-hov{background:#F3F3F6;box-shadow:none}
.pp__row.is-hov+.pp__row{box-shadow:none}
.js .pp__rows:not(.is-in) .pp__row{opacity:0;transform:translateY(.4em);transition:none}
.pp__rows.is-in .pp__row:nth-child(2){transition-delay:0s,.08s,.08s}
.pp__rows.is-in .pp__row:nth-child(3){transition-delay:0s,.16s,.16s}

/* Kody QR do opinii: przelacznik kodu i lejek */
.pp__seg{display:flex;gap:.2em;width:max-content;margin:.8em 0 .95em;padding:.2em;border-radius:.72em;background:#F1F1F4}
.pp__seg span{padding:.36em .72em;border-radius:.54em;font-size:.78em;color:var(--steel);transition:background-color .25s,color .25s,box-shadow .25s}
.pp__seg .is-on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 .06em .22em rgba(13,13,15,.12)}
.pp__f{display:flex;flex-direction:column;gap:.72em}
.pp__fr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.34em .6em;align-items:center;font-size:.84em}
.pp__fr span{color:var(--steel)}
.pp__fr b{font-weight:500}
.pp__fb{grid-column:1/-1;position:relative;height:.55em;border-radius:99em;background:#EBEBEE;overflow:hidden}
.pp__fb::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);border-radius:inherit;background:var(--ink);transform-origin:0 50%;transition:width .8s var(--ease-out),transform 1s var(--ease-out)}
.pp__fb--ok::after{background:var(--ok)}
.js .pp__f:not(.is-in) .pp__fb::after{transform:scaleX(0);transition:none}

/* Arkusz dania z Menu (klik w danie z listy) */
.pp__scrim{position:absolute;inset:0;background:rgba(13,13,15,.16);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;z-index:5}
.pp__scrim.is-on{opacity:1;visibility:visible;transition:opacity .35s}
.pp__sheet{position:absolute;top:0;right:0;bottom:0;width:25.5em;display:flex;flex-direction:column;padding:1.3em 1.45em 1.3em;background:#fff;box-shadow:-.07em 0 0 #E4E4E8,-1.4em 0 3.2em -1.2em rgba(13,13,15,.3);transform:translateX(106%);transition:transform .55s var(--ease-out);z-index:6}
.pp__sheet.is-on{transform:none}
.pp__sh{display:flex;align-items:flex-start;gap:.6em}
.pp__sh>div{margin-right:auto;min-width:0}
.pp__sh small{display:block;font-size:.76em;color:var(--steel)}
.pp__sh b{display:block;margin-top:.12em;font-size:1.34em;font-weight:650;letter-spacing:-.02em}
.pp__x{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:#F1F1F4;flex:none}
.pp__x svg{width:.95em;height:.95em;color:#55555B;stroke-width:2.2}
.pp__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:1em 0 .3em;border-radius:.8em;background:#F6F6F8}
.pp__st span{padding:.62em .8em .66em}
.pp__st span+span{box-shadow:-.07em 0 0 #E6E6EA}
.pp__st b{display:block;font-size:1.12em;font-weight:500}
.pp__st small{display:block;margin-top:.1em;font-size:.76em;color:var(--steel)}
.pp__warn{color:#8F5700}
.pp__l{margin:.95em 0 .42em;font-size:.76em;font-weight:600;color:var(--text2)}
.pp__pic{display:flex;align-items:center;gap:.9em}
.pp__pic img{width:5.4em;height:5.4em;border-radius:.75em;object-fit:cover}
.pp__in{min-height:2.5em;padding:.55em .75em;border-radius:.6em;box-shadow:inset 0 0 0 .08em #DCDCE2;font-size:.84em;line-height:1.4;transition:box-shadow .2s}
.pp__in span{white-space:pre-wrap}
.pp__in.is-focus{box-shadow:inset 0 0 0 .09em var(--cobalt),0 0 0 .22em rgba(46,75,255,.14)}
.pp__in.is-focus::after{content:"";display:inline-block;width:.08em;height:1.15em;margin-left:.03em;vertical-align:-.22em;background:var(--ink);animation:mcaret 1s steps(1) infinite}
.pp__in--pr{width:9em}
.pp__al{display:flex;flex-wrap:wrap;gap:.4em}
.pp__al span{padding:.34em .7em;border-radius:99em;background:#F1F1F4;font-size:.78em;color:var(--text2)}
.pp__sf{display:flex;justify-content:flex-end;gap:.55em;margin-top:auto;padding-top:1em}
.pp__save{position:relative}
.pp__save>span{display:inline-flex;align-items:center;gap:.4em;transition:opacity .2s}
.pp__save .pp__save-b{position:absolute;inset:0;justify-content:center;opacity:0}
.pp__save svg{width:1.1em;height:1.1em;stroke-width:2.4}
.pp__save.is-busy .pp__save-a{opacity:.35}
.pp__save.is-done{background:var(--ok)}
.pp__save.is-done .pp__save-a{opacity:0}
.pp__save.is-done .pp__save-b{opacity:1}

/* ---------- Telefon i tablet: scena wypelnia kadr pinu, MacBook na srodku ---------- */
@media (max-width:999px){
  .js .scn--dash{display:flex;flex-direction:column;justify-content:center;padding:1em}
  .js .scn--dash .mbk{width:min(100%,calc((100cqh - 3em) * 1.46))}
  /* pauza na dole kadru: u gory jest powiadomienie macOS */
  .js .pin .scn--dash .scn__pause{top:auto;bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .scn--dash .dk--safari.is-launch{animation:none}
}

.pp__th>span:nth-child(n+2),.pp__row>i,.pp__row>em{text-align:right;white-space:nowrap}