/* Nagłówek: okrągłe przyciski (stoper = Start bloku, Dostosuj, dzwonek) + centrum powiadomień + klawiatura na telefonie */
.hdr :is(#hdr-start,#hdr-customize,#hdr-bell){width:36px;height:36px;padding:0;gap:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
.hdr #hdr-start.live{box-shadow:0 0 0 2px var(--green);color:var(--green);animation:hs-live 1.6s ease-in-out infinite}
@keyframes hs-live{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 35%,transparent)}}
.hdr #hdr-customize.on{background:var(--accent);border-color:var(--accent);color:#17120a}
.hdr-clock[role=button]{cursor:pointer;border-radius:10px;transition:background-color .15s}
.hdr-clock[role=button]:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hdr-clock[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nt-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#ff453a;color:#fff;font:600 10px/16px var(--sans,system-ui);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.nt-badge[hidden]{display:none}
.is-phone :is(#hdr-bell){order:1;flex:none;width:40px;height:40px}
.is-phone .hdr :is(#hdr-start,#hdr-customize){width:40px;height:40px}
/* Telefon, nagłówek: najpierw rząd okrągłych przycisków (do prawej), pod nim tytuł w jednej linii (fitHdrTitle dopasowuje czcionkę), na końcu pasek widoku */
.is-phone .hdr{justify-content:flex-end}
.is-phone .hdr-title{order:2;flex:0 0 100%;min-width:0}
.is-phone .hdr-actions{order:3}
.is-phone .hdr h1{white-space:nowrap}
/* Start bloku: okienko na telefonie zawsze mieści się w ekranie (wcześniej: 280 px od prawej krawędzi przycisku wyjeżdżało poza lewy brzeg) */
.is-phone .start-pop #sb-own{flex:1 1 96px;min-width:96px;width:auto!important}
.is-phone .start-pop{left:16px;right:16px!important;width:auto;max-width:none}

.nt-bg{position:fixed;inset:0;z-index:57;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .22s ease}
.nt-panel{position:fixed;z-index:58;top:72px;right:16px;width:392px;max-height:calc(100vh / var(--scale, 1) - 96px);display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;visibility:hidden;transition:opacity .18s ease,transform .22s cubic-bezier(.32,.72,0,1),visibility 0s linear .22s}
.nt-open .nt-panel{opacity:1;transform:none;visibility:visible;transition-delay:0s}
[data-style="glass"] .nt-panel{background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-color:var(--edge)}
.nt-panel header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.nt-panel header .spacer{flex:1}
.nt-list{overflow-y:auto;overscroll-behavior:contain;padding:6px}
.nt-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;width:100%;text-align:left;padding:12px;border:0;border-radius:14px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s}
.nt-item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.nt-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)}
.nt-item.unread .nt-ico{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.nt-item.prio .nt-ico{background:color-mix(in srgb,#ff453a 22%,transparent);color:#ff453a}
.nt-item.prio.unread .nt-txt b{color:#ff6b61}
.nt-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nt-txt b{font-weight:500;line-height:1.3}
.nt-item.unread .nt-txt b{font-weight:700}
.nt-txt small{color:var(--muted);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-when{color:var(--muted);font-size:11px;white-space:nowrap;padding-top:2px;font-variant-numeric:tabular-nums}
.nt-item.unread .nt-when::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}
.nt-empty{padding:32px 20px;text-align:center;color:var(--muted);line-height:1.45}
.nt-bg{display:none}
.is-phone .nt-bg{display:block}
.nt-open .nt-bg{opacity:1;pointer-events:auto}
.is-phone .nt-panel{top:0;right:0;bottom:0;width:min(92vw,420px);max-height:none;border-radius:24px 0 0 24px;padding-top:env(safe-area-inset-top);transform:translateX(100%);opacity:1}
.is-phone .nt-open .nt-panel{transform:none}
.nt-panel[inert]{pointer-events:none}
@media (prefers-reduced-motion:reduce){.nt-panel,.nt-bg{transition:none}.hdr #hdr-start.live{animation:none}}

/* Telefon: pole wiadomości nad klawiaturą. shell.js mierzy visualViewport: --vvt (przesunięcie), --vvh (wysokość widoczna), --kb (ile zasłania klawiatura) */
.is-phone .jm-drawer{top:var(--vvt,0px);bottom:var(--kb,0px);height:auto}
/* Nad klawiaturą iOS wisi pasek ✓ / strzałki (z poziomu strony nie da się go usunąć) i leży POZA visualViewport. Szuflada sięga więc pod klawiaturę (tło wypełnia lukę pod paskiem),
   a treść stoi na dolnej krawędzi widocznego viewportu (padding = --kb). Ustawienia modelu pod polem chowamy, żeby pole było tuż nad paskiem. */
.is-phone.kb-open .jm-drawer{bottom:0;padding-bottom:var(--kb,0px)}
.is-phone.kb-open .jm-model{display:none}
.is-phone .cw:not(.min){bottom:var(--kb,0px);height:calc(var(--vvh,100dvh) - 40px - var(--cw-mins, 0) * 52px)}
.nt-row{position:relative}
.nt-row .nt-item{padding-right:38px}
.nt-del{position:absolute;top:8px;right:6px;width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:0;opacity:0;transition:opacity .12s,background .12s,color .12s;cursor:pointer}
.nt-row:hover .nt-del,.nt-del:focus-visible{opacity:1}
.nt-del:hover{background:color-mix(in srgb,var(--danger,#e5484d) 18%,transparent);color:var(--danger,#e5484d)}
.is-phone .nt-del,.nt-row:focus-within .nt-del{opacity:1}
@media (hover:none){.nt-del{opacity:1}}
.is-phone .nt-panel header{gap:6px;padding:12px}

/* Telefon: przełącznik okresu w górnym pasku — segmenty równo na całą szerokość (wcześniej skupione z lewej) */
.is-phone .hdr-actions>.seg>button{flex:1 1 0;min-width:max-content;justify-content:center;text-align:center}
/* Nawyki: kolumna nazw (.hnames) stoi poza przewijaną siatką — nic nie zachodzi pod nazwami, więc nie potrzeba tła ani filtra. Wiersze o stałej wysokości, żeby obie kolumny równały się linia w linię. */
.hwrap{--lw:176px;--sw:188px;--hcw:28px;--rh:52px;--hh:62px;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);width:100%}
.hwrap.compact{--hcw:24px;--rh:44px}
@media(max-width:600px){.hwrap{--lw:128px;--sw:150px}}
.is-phone .hwrap{--lw:96px;--sw:40px;--hcw:24px}
.hwrap .hgrid{--lw:inherit;--sw:inherit;--hcw:inherit;--cols:repeat(var(--hn),minmax(var(--hcw),1fr)) var(--sw);min-width:calc(var(--hn) * var(--hcw) + var(--sw))}
.hwrap .hnames{display:flex;flex-direction:column;min-width:0}
.hwrap .hlabel{position:static;box-sizing:border-box;height:var(--rh);min-width:0;padding:0 10px 0 0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);align-self:auto}
.hwrap .hlabel.hl-head{height:var(--hh);border-bottom:2px solid var(--line)}
.hwrap .hnames .hlabel:last-child{border-bottom:0}
.hwrap .hrow{box-sizing:border-box;height:var(--rh)}
.hwrap .hrow.hhead{height:var(--hh)}
.hwrap .hrow:last-child{border-bottom:0}
.hwrap .hscroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.hwrap .htoday{right:var(--sw);width:calc((100% - var(--sw)) / var(--hn))}
/* Dyscyplina (kafel): tytuł w rogu siatki, na linii z dniami miesiąca */
.hmini-ph .hmini-nhead{align-items:flex-end;padding-bottom:8px}
.hmini-ph .hmini-nhead .tile-title{margin:0;line-height:1}

/* Chowanie klawiatury iOS: układ jedzie w dół razem z nią (czas i krzywa jak w iOS), a nie skacze po zakończeniu animacji. kb-open zostaje do końca przejścia, żeby pasek modelu nie wskakiwał w trakcie. */
/* Jamal na telefonie wjeżdża i wyjeżdża z boku jak centrum powiadomień (transform .32 s, bez zanikania); padding-bottom to animacja klawiatury.
   Uwaga: `transition` nadpisuje całą listę, więc przejście transform musi tu zostać razem z paddingiem (wcześniej samo padding-bottom wyłączało wjazd/wyjazd). */
.is-phone .jm-drawer{transition:transform .32s cubic-bezier(.32,.72,0,1),display .32s allow-discrete,padding-bottom .34s cubic-bezier(.25,.46,.45,.94)}
.is-phone .jm-drawer[hidden]{opacity:1}
@starting-style{.is-phone .jm-drawer{opacity:1}}
.is-phone .cw:not(.min){transition:bottom .34s cubic-bezier(.25,.46,.45,.94),height .34s cubic-bezier(.25,.46,.45,.94)}
@media (prefers-reduced-motion:reduce){.is-phone .jm-drawer,.is-phone .cw:not(.min){transition:none}}