/* Atomy UI — te same nazwy klas co w makiecie. Ikony: Font Awesome (<i class="fa-solid …">), stylowany tylko kontekst. */

/* ---------- pasek górny ---------- */
.appbar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 10px;min-height:52px}
.appbar h1{font-size:22px;font-weight:800;flex:1;letter-spacing:-.01em;min-width:0}
.ico{width:44px;height:44px;border-radius:10px;display:inline-grid;place-items:center;background:transparent;border:0;cursor:pointer;color:var(--fg);text-decoration:none;flex:none;padding:0}
.ico:hover{background:var(--surface-2)}
.ico i{font-size:18px}
.ico.muted{color:var(--fg-muted)}
/* Pigułka kontekstu: „kim teraz jestem" + hamburger przełączania paneli. Siedzi w pasku tytułu jako
   ostatni element (margin-left:auto), więc tytuł skraca się sam i nic nie wchodzi pod przycisk. */
.context-pill{flex:none;display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 4px 0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px;white-space:nowrap;margin-left:auto}
.context-pill--static{padding-right:12px}
.context-pill .context-btn{width:32px;height:32px;border-radius:999px;color:inherit}
.context-pill .context-btn i{font-size:16px}
.context-pill--floating{position:absolute;top:8px;right:12px;z-index:5}
.context-menu .li[aria-current="true"]{background:var(--surface-2)}
.context-menu .li .fa-check{color:var(--accent)}

/* ---------- dolna nawigacja ---------- */
.tabbar{flex:none;position:sticky;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--border);background:var(--surface);padding:6px 6px calc(6px + var(--safe-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--fg-muted);font-size:11.5px;font-weight:600;padding:6px 4px;border-radius:10px;min-height:48px}
.tabbar a i{font-size:1.45em;line-height:1}
.tabbar a{position:relative}
.tabbar .badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:var(--danger-fg);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.new{color:var(--accent)}
.seg button .count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:var(--danger-fg);font-size:11px;font-weight:700;vertical-align:middle}
.tabbar a[aria-current="page"]{color:var(--accent)}

/* ---------- FAB ---------- */
.fab{position:fixed;right:max(16px,calc(50% - 304px));bottom:calc(88px + var(--safe-bottom));width:56px;height:56px;border-radius:18px;background:var(--accent);color:var(--accent-fg);border:0;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;z-index:3;text-decoration:none;font-size:16px}
.fab i{font-size:1.5em}

/* ---------- karta ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px;color:inherit;text-decoration:none}
.card.tap{cursor:pointer;transition:background .15s}
.card.tap:hover{background:var(--surface-2)}
.card h3{font-size:17px;font-weight:700}
.card .meta{color:var(--fg-muted);font-size:14.5px;margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------- pigułka statusu (zawsze kolor + ikona + tekst) ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap;line-height:1.3}
.pill i{font-size:1em}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.neutral{background:var(--surface-2);color:var(--fg-muted)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}

/* ---------- postęp zbiórki ---------- */
.progress{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg-muted);margin-top:8px}
.progress .bar{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.progress b{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--r-field);border:1px solid transparent;font-weight:700;font-size:15.5px;cursor:pointer;text-decoration:none;transition:filter .15s;background:transparent;color:inherit;position:relative}
.btn:hover{filter:brightness(1.06)}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.secondary{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.danger{background:var(--danger);color:var(--danger-fg)}
.btn.block{width:100%}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.btn i{font-size:1em}
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- pole formularza ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:13.5px;font-weight:600}
.field .in{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-field);background:var(--surface);font-size:16px;color:var(--fg)}
.field .in:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.field .in.textarea{align-items:flex-start;padding:10px 12px;min-height:88px}
.field .in .ph{color:var(--fg-muted)}
.field .in i{color:var(--fg-muted)}
/* prawdziwe kontrolki wewnątrz .in — wyglądają jak w makiecie; 16px = iOS nie zoomuje */
.field .in input,.field .in select,.field .in textarea{border:0;background:transparent;font:inherit;font-size:16px;color:inherit;flex:1;min-width:0;width:100%;outline:none;padding:0;margin:0;min-height:44px;border-radius:0;appearance:none;-webkit-appearance:none}
.field .in input:focus-visible,.field .in select:focus-visible,.field .in textarea:focus-visible{box-shadow:none}
.field .in input::placeholder,.field .in textarea::placeholder{color:var(--fg-muted);opacity:1}
.field .in textarea{min-height:66px;resize:vertical;line-height:1.45;padding:0}
.field .in select{cursor:pointer;padding-right:8px}
.field .in input[type="date"],.field .in input[type="time"]{min-width:0}
.field .in input:disabled,.field .in select:disabled,.field .in textarea:disabled{color:var(--fg-muted);cursor:not-allowed}
.field .hint{font-size:13px;color:var(--fg-muted)}
.field .err{font-size:13px;color:var(--danger);display:flex;gap:5px;align-items:center}
.field .err:empty{display:none}
.field.error .in{border-color:var(--danger)}
.field.error .in:focus-within{box-shadow:0 0 0 3px var(--danger-soft)}
.field .in.disabled{background:var(--surface-2);color:var(--fg-muted)}

/* ---------- segment ---------- */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);padding:3px;border-radius:10px;gap:3px}
.seg button{border:0;background:transparent;border-radius:8px;min-height:38px;padding:0 8px;font-weight:600;font-size:14px;cursor:pointer;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.seg[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- przełącznik ---------- */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
/* Status po prawej może być zdaniem („Zgoda na powiadomienia została odrzucona…") — łamie się, nie wychodzi z karty */
.toggle > .pill{white-space:normal;text-align:right;flex:0 1 auto;min-width:0;max-width:58%}
.toggle > div:first-child,.toggle > span.grow{min-width:0}
.toggle .sw{width:46px;height:28px;border-radius:999px;background:var(--border);position:relative;flex:none;border:0;cursor:pointer;padding:0}
.toggle .sw::before{content:"";position:absolute;inset:-8px 0}          /* niewidoczny obszar dotyku 44 px */
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .15s;box-shadow:var(--shadow-knob)}
.toggle .sw[aria-checked="true"]{background:var(--accent)}
.toggle .sw[aria-checked="true"]::after{transform:translateX(18px)}
.toggle .sw:disabled{opacity:.5;cursor:not-allowed}

/* ---------- lista ---------- */
.list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.list .li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--border);min-height:52px;text-decoration:none;color:inherit;cursor:pointer;background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font:inherit}
.list .li:first-child{border-top:0}
.list .li:hover{background:var(--surface-2)}
.list .li .ico{width:36px;height:36px;color:var(--fg-muted)}
.list .li > i{color:var(--fg-muted)}

/* ---------- awatar, chip ---------- */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;font:700 13px var(--font-display);flex:none;text-transform:uppercase}
.avatar.t{background:var(--warn-soft);color:var(--warn)}
.avatar.n{background:var(--ok-soft);color:var(--ok)}
.avatar.lg{width:56px;height:56px;font-size:22px}
.chip{font-size:12px;font-weight:700;color:var(--fg-muted);background:var(--surface-2);padding:2px 7px;border-radius:6px;white-space:nowrap}
.chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}

/* ---------- baner ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-card);font-size:14.5px}
/* Pływająca notka o zakresie (super_admin w panelu klasy): pod paskiem tytułu, poza przepływem, z „X". */
.scope-note{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;padding:6px 4px 6px 12px;border-radius:12px;background:var(--accent);color:var(--accent-fg);font-size:13.5px;font-weight:600;box-shadow:var(--shadow);line-height:1.3}
.scope-note .ico{width:32px;height:32px;color:inherit;flex:none}
.scope-note .ico:hover{background:rgba(255,255,255,.15)}
@media (min-width:992px){.app.app--nav .scope-note{top:64px;left:calc(220px + (100% - 220px) / 2)}}
.banner > i{flex:none;font-size:1.1em;margin-top:3px}
.banner.accent{background:var(--accent-soft);color:var(--fg)}
.banner.warn{background:var(--warn-soft);color:var(--fg)}
.banner.danger{background:var(--danger-soft);color:var(--fg)}
.banner .btn{margin-top:8px}
.banner .btn.ghost.sm{padding:0;min-height:30px}

/* ---------- stan pusty ---------- */
.empty{text-align:center;padding:36px 20px;color:var(--fg-muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty > i{font-size:44px;color:var(--fg-muted)}
.empty > i.danger{color:var(--danger)}
.empty :is(h2,h3){color:var(--fg);font-size:17px}
.card .empty{padding:16px}

/* ---------- kod zdarzenia (błędy) ---------- */
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em;background:var(--surface-2);color:var(--fg);padding:4px 8px;border-radius:6px;white-space:nowrap;user-select:all}

/* ---------- pinpad ---------- */
ui-pinpad{display:block}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:18px 0 8px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);display:block;transition:background .1s}
.pin-dots i.f{background:var(--accent)}
.pin-dots.is-shake{animation:shake .32s ease}
.pin-dots.is-error i{border-color:var(--danger)}
.pin-dots.is-error i.f{background:var(--danger)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.pinpad{display:grid;grid-template-columns:repeat(3,72px);gap:10px 18px;justify-content:center;margin-top:10px}
.pinpad button{height:64px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font:600 24px var(--font-display);cursor:pointer;color:var(--fg);padding:0}
.pinpad button:hover{background:var(--surface-2)}
.pinpad button.aux{border:0;background:transparent;font-size:20px;color:var(--fg-muted)}
.pinpad button.go{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.pinpad button.go i{font-size:22px}
.pinpad[aria-disabled="true"],ui-pinpad[disabled] .pinpad,ui-pinpad[disabled] .pin-dots{opacity:.35;pointer-events:none}
ui-pinpad .pin-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;opacity:0}

/* ---------- kroki kreatora ---------- */
.steps{display:flex;gap:6px}
.steps i{flex:1;height:4px;border-radius:999px;background:var(--border)}
.steps i.on{background:var(--accent)}

/* ---------- czat ---------- */
.bubble{max-width:82%;padding:9px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:15px;overflow-wrap:anywhere}
.bubble .who{font-size:12px;font-weight:700;color:var(--fg-muted);margin-bottom:2px}
.bubble.me{align-self:flex-end;background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.bubble.sys{align-self:center;background:transparent;border:0;color:var(--fg-muted);font-size:12.5px}
.composer{flex:none;display:flex;gap:8px;align-items:flex-end;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface)}
.composer .in{flex:1;display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:22px;background:var(--bg)}
.composer .in:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.composer .in input,.composer .in textarea{border:0;background:transparent;flex:1;font:inherit;font-size:16px;color:inherit;min-width:0;outline:none;padding:10px 0;margin:0;resize:none;max-height:calc(4 * 1.45em + 20px);line-height:1.45}
.composer .in input:focus-visible,.composer .in textarea:focus-visible{box-shadow:none}
.composer .send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-fg);border:0;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.composer .send:disabled{opacity:.5;cursor:not-allowed}

/* ---------- arkusz dolny ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:20;display:none}
.sheet-wrap.on{display:block}
.sheet-wrap .dim{position:absolute;inset:0;background:var(--dim)}
.sheet{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;width:100%;max-width:640px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-radius:20px 20px 0 0;padding:10px 16px calc(22px + var(--safe-bottom));box-shadow:var(--shadow);animation:up .22s ease-out;outline:none}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet .grip{width:40px;height:4px;border-radius:999px;background:var(--border);margin:0 auto 12px}
.sheet h3{font-size:18px;font-weight:800;margin-bottom:10px}

/* ---------- blokada ekranu (nakładka z pinpadem) ---------- */
.lockwrap{position:fixed;inset:0;z-index:30;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 78%,transparent);display:flex;flex-direction:column;justify-content:center;padding:24px;overflow-y:auto}
.lockwrap > *{width:100%;max-width:592px;margin-inline:auto}
.lockwrap .center > i{font-size:32px;color:var(--fg)}
.lockwrap h2{font-size:20px}

/* ---------- tabela (admin) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-top:1px solid var(--border);vertical-align:middle}
.tbl th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);border-top:0;background:var(--surface-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- galeria atomów ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gal .card{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.gal .lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}

/* ---------- dialog potwierdzenia (ui-confirm) ---------- */
ui-confirm,ui-toast{display:contents}
dialog.confirm{border:0;border-radius:16px;padding:0;margin:auto;background:var(--surface);color:var(--fg);box-shadow:var(--shadow);width:min(92vw,360px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
dialog.confirm::backdrop{background:var(--dim-strong)}
dialog.confirm .body{padding:22px 22px 18px}
dialog.confirm h3{font-size:18px;font-weight:800;margin-bottom:8px}
dialog.confirm p{color:var(--fg-muted);font-size:15px;white-space:pre-line}
dialog.confirm .who{margin-top:10px;font-size:14px;background:var(--surface-2);border-radius:8px;padding:8px 10px;color:var(--fg);max-height:120px;overflow:auto}
dialog.confirm .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 16px}

/* ---------- toast (ui-toast) ---------- */
.toast{position:fixed;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:12px;font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow);transition:.2s;z-index:100;pointer-events:none;max-width:92vw;width:max-content}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.has-action{pointer-events:auto}
.toast > i{flex:none}
.toast .act{background:transparent;border:0;color:inherit;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;padding:6px 8px;margin:-6px -8px -6px 0;min-height:44px;cursor:pointer;border-radius:8px;white-space:nowrap}

/* .scroll.center wyśrodkowuje pionowo (flex), ale tekst zostaje wyrównany do lewej */
.scroll.center{text-align:start}
.scroll.center > .center{text-align:center}

/* ============================================================================
   Siatka responsywna — progi jak w Bootstrapie:
     sm ≥576  md ≥768  lg ≥992  xl ≥1200  xxl ≥1400
   Telefon i tablet (do lg): pełna szerokość, pasek zakładek na dole, jedna kolumna.
   Od lg: kontener o stałej maksymalnej szerokości (960 → 1140 → 1400), pasek zakładek jako
   lewa kolumna, karty w dwóch (od xxl: trzech) kolumnach, arkusze jako okna na środku.
   Formularze, czat i ekrany logowania zostają jednokolumnowe — tam szerokość nie pomaga.
   ============================================================================ */
@media (min-width:768px){
  .scroll{padding:16px 24px 32px}
  .appbar{padding:10px 24px}
  .context-pill--floating{right:24px;top:12px}
}
@media (min-width:992px){
  .app{max-width:960px}
  /* Pasek tytułu (.appbar) jest rodzeństwem ekranu, nie jego dzieckiem — dlatego siatka z obszarami,
     a nie flex-direction:row, który ustawiłby tytuł obok treści. */
  .app.app--nav{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"nav bar" "nav main"}
  .app.app--nav > .appbar{grid-area:bar}
  .app.app--nav > .screen{grid-area:main;min-height:0}
  .app.app--nav > .tabbar{grid-area:nav;position:static;width:auto;display:flex;flex-direction:column;gap:4px;justify-content:flex-start;border-top:0;border-right:1px solid var(--border);padding:16px 10px}
  .app > .tabbar a{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:10px 12px;min-height:44px}
  .app > .tabbar a i{font-size:1.2em;width:22px;text-align:center}
  .app > .tabbar a[aria-current="page"]{background:var(--accent-soft)}
  .fab{right:max(16px,calc(50% - 480px + 24px));bottom:32px}
  .sheet{bottom:auto;top:50%;transform:translateY(-50%);border-radius:20px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);padding:16px 24px 24px;animation:none}
  .sheet .grip{display:none}
  #chat-log .bubble{max-width:min(82%,640px)}
  #chat-log .brow{max-width:min(90%,700px)}
  #chat-log .brow .bubble{max-width:none}
  /* Kolumny tylko tam, gdzie są kafelki (zbiórki, wiadomości): ekran z pojedynczą kartą i listami
     w dwóch kolumnach wyglądał krzywo. grid-auto-rows:max-content jest obowiązkowe — bez tego wiersze
     dopasowują się do wysokości okna zamiast do treści, a lista z overflow:hidden zapada się do 0 px
     i strona przestaje się przewijać. */
  /* Układ zależy od EKRANU, nie od tego, co akurat na nim jest: pulpit rodzica z dzieckiem bez zbiórek
     musi mieć tę samą szerokość co z dzieckiem, które je ma — inaczej treść skacze przy przełączaniu. */
  .screen:is([data-page="parent-home"],[data-page="class-home"]) > .scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:12px 16px;align-content:start}
  .screen:is([data-page="parent-home"],[data-page="class-home"]) > .scroll > :is(.eyebrow,.banner,.seg,.list,.adm-tbl,.tbl-wrap,.empty,.row,.divider,.progress,.stack,h2,p,form,[data-child-switch],.wide){grid-column:1/-1}
  /* Pozostałe ekrany bez tabel (profil, formularze, ustawienia): szerokość do czytania, wyśrodkowane */
  .screen:not([data-page="parent-home"]):not([data-page="class-home"]) > .scroll:not(.center):not(#chat-log):not(:has(> .adm-tbl)):not(:has(> .tbl-wrap)) > *{width:100%;max-width:820px;margin-inline:auto}
}
@media (min-width:1200px){
  .app{max-width:1140px}
  .fab{right:max(16px,calc(50% - 570px + 24px))}
}
@media (min-width:1400px){
  .app{max-width:1400px}
  .fab{right:max(16px,calc(50% - 700px + 24px))}
  .screen:is([data-page="parent-home"],[data-page="class-home"]) > .scroll{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- zdjęcia w czacie i odpowiedziach (plan załączników) ---------- */
.bubble.has-photo{padding:6px 6px 8px}
.bubble.has-photo .who{padding:2px 6px 0}
.bubble.has-photo .txt{padding:4px 6px 0}
.photo-grid{display:grid;gap:4px;max-width:240px}
.photo-grid.n2,.photo-grid.n3{grid-template-columns:1fr 1fr}
.photo{display:block;width:100%;max-width:100%;aspect-ratio:4/3;border:0;border-radius:10px;cursor:pointer;padding:0;overflow:hidden;background:var(--surface-2);min-height:44px}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo-grid.n3 .photo:last-child{grid-column:1/-1;aspect-ratio:2/1}
.photo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.photo-gone{display:inline-flex;gap:6px;align-items:center;color:var(--fg-muted);font-size:13px;padding:2px 6px}
.bubble.me .photo-gone{color:var(--accent-fg);opacity:.85}
.composer-wrap{flex:none;display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--surface)}
.composer-wrap .composer{border-top:0}
.composer .cam{width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--fg);border:0;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.composer .cam:disabled{opacity:.45;cursor:not-allowed}
ui-photo-picker{display:block}
ui-photo-picker .tiles{display:flex;gap:12px;align-items:center;padding:10px 12px 0;flex-wrap:wrap}
.tile{width:56px;height:56px;border-radius:10px;background:var(--surface-2);position:relative;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--fg-muted);flex:none;overflow:visible}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
.tile.busy img{opacity:.45}
.tile .pct{position:relative;z-index:1;text-align:center;line-height:1.2;padding:0 2px}
.tile .x{position:absolute;top:-9px;right:-9px;z-index:2;width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);background:var(--fg);color:var(--bg);font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
.tile .x::after{content:"";position:absolute;inset:-8px}          /* obszar dotyku 44 px */
.tile .retry{position:absolute;inset:0;z-index:1;border:0;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-size:18px;cursor:pointer}
.tile.failed img{opacity:.3}
.photo-notice{padding:6px 14px 0;font-size:12.5px;color:var(--fg-muted);margin:0}
.pin{color:var(--accent);font-size:.85em}
.chip.pin{color:var(--accent);background:var(--accent-soft)}
.composer-vis{padding:8px 12px 0}
.composer-vis .seg button{font-size:13px}
.composer .in textarea{padding:10px 0}
/* odpowiedź prywatna do autora wpisu (makieta: parent-chat-private, parent-thread-private, class-thread) */
.bubble.priv,.bubble.me.priv{border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--fg)}
.bubble .tag{font-size:12px;color:var(--fg-muted);display:flex;gap:4px;align-items:center;margin-bottom:2px}
.bubble.has-photo .tag{padding:2px 6px 0}
.quote{font-size:12.5px;color:var(--fg-muted);border-left:3px solid var(--border);padding:1px 0 1px 8px;margin:2px 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.brow{display:flex;align-items:center;gap:2px;max-width:92%}
.brow .bubble{max-width:none;min-width:0}
.reply-btn{width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--fg-muted);display:grid;place-items:center;border-radius:50%;cursor:pointer;padding:0}
.reply-btn:hover{background:var(--surface-2);color:var(--accent)}
.replyto{display:flex;align-items:center;gap:10px;padding:6px 4px 6px 14px;background:var(--accent-soft);font-size:13.5px}
.replyto[hidden]{display:none}
.replyto .grow{min-width:0}
.replyto .quote{margin:2px 0 0;-webkit-line-clamp:1}
ui-lightbox{position:fixed;inset:0;z-index:40;display:block}
ui-lightbox[hidden]{display:none}
ui-lightbox .lightbox{position:absolute;inset:0;background:#000;color:#fff;display:flex;flex-direction:column}
ui-lightbox .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;min-height:52px;font-size:14px;padding-bottom:calc(6px + var(--safe-bottom))}
ui-lightbox .bar .ico{color:#fff}
ui-lightbox .bar .ico:hover{background:rgba(255,255,255,.12)}
ui-lightbox .author{flex:1;text-align:center;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ui-lightbox .stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 8px}
ui-lightbox .stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
ui-lightbox .nav{display:inline-flex;align-items:center;gap:6px}
@media (prefers-reduced-motion:no-preference){ui-lightbox .stage img{animation:fade .15s ease-out}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* regulamin i polityka prywatności (makieta legal-page, legal-reaccept, activate-terms, admin-legal-edit) */
.legal-text h1{font-size:20px;margin:0 0 6px}
.legal-text h2{font-size:16px;margin:16px 0 6px}
.legal-text h3{font-size:15px;margin:12px 0 4px}
.legal-text p,.legal-text li{font-size:15px;line-height:1.55}
.legal-text p{margin:6px 0}
.legal-text ol,.legal-text ul{padding-left:22px;margin:6px 0}
.legal-text li{margin:3px 0}
.legal-text a{color:var(--accent);font-weight:600;overflow-wrap:anywhere}
.legal-scroll{flex:0 0 auto;max-height:45vh;overflow:auto}
.chk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.45;cursor:pointer}
.chk input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.chk a{color:var(--accent);font-weight:700}
.field.error .chk{border-color:var(--danger)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}

/* ---- plan lekcji (makieta parent-timetable*, class-timetable*, admin-bells) ---- */
.appbar .ico[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.tt-c1{background:var(--tt1)}.tt-c2{background:var(--tt2)}.tt-c3{background:var(--tt3)}.tt-c4{background:var(--tt4)}
.tt-c5{background:var(--tt5)}.tt-c6{background:var(--tt6)}.tt-c7{background:var(--tt7)}.tt-c8{background:var(--tt8)}
.tt-valid{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--fg-muted)}
.tt-days button{padding:0 2px;line-height:1.1}
.tt-days .tt-date{display:block;font-size:11px;font-weight:600;opacity:.8}
.tt-days .tt-today{color:var(--accent)}
.tt-list .li{align-items:center;text-align:left;font:inherit;color:inherit;background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%}
.tt-list .li .tt-time,.tt-list .li .tt-no{align-self:flex-start}
.tt-no{flex:none;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--surface-2);color:var(--fg)}
.tt-time{flex:none;width:42px;font-size:12.5px;line-height:1.25;color:var(--fg-muted);font-variant-numeric:tabular-nums;padding-top:4px}
.tt-note{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:13px;color:var(--fg);background:var(--surface-2);border-radius:6px;padding:1px 7px}
.tt-note i{font-size:11px;color:var(--fg-muted)}
.li.tt-past{opacity:.5}
.li.tt-next{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.pill.tt-soon{background:var(--accent);color:var(--accent-fg)}
.tt-break{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:12.5px;font-weight:700;color:var(--accent);border-top:1px dashed var(--accent)}
.tt-slot-empty .tt-no{background:transparent;border:1px dashed var(--border);color:var(--fg-muted)}
.tt-grid{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.tt-grid th{font-size:12px;font-weight:800;color:var(--fg-muted);padding:2px 0 4px;text-align:center}
.tt-grid th span{display:block;font-weight:600;font-size:11px}
.tt-grid th.today{color:var(--accent)}
.tt-grid td{height:42px;padding:0;position:relative}
.tt-grid td.n{width:34px;font-size:12px;color:var(--fg-muted);text-align:center;font-weight:700}
.tt-grid td.n span{display:block;font-size:10px;font-weight:600}
.tt-grid td.none{border:1px dashed var(--border);border-radius:7px}
.tt-grid button{width:100%;height:100%;min-height:42px;border:0;border-radius:7px;padding:2px;font:inherit;font-size:12px;font-weight:700;line-height:1.1;color:var(--fg);cursor:pointer;overflow:hidden;word-break:break-word}
.tt-grid button.today{box-shadow:inset 0 0 0 2px var(--accent)}
.tt-grid button.has-note::after,.tt-dot{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:999px;background:var(--warn)}
.tt-dot{position:static;display:inline-block;vertical-align:middle;margin-right:4px}
.tt-av{width:22px;height:22px;font-size:11px;display:inline-grid;vertical-align:middle;margin-right:6px}
.tt-sum .row + .row{margin-top:6px}
.tt-bells .li{gap:8px;padding:6px 14px;min-height:48px;align-items:center}
.tt-bells input{width:84px;min-height:38px;border:1px solid var(--border);border-radius:var(--r-field,8px);background:var(--surface);color:var(--fg);text-align:center;font:inherit;font-variant-numeric:tabular-nums}
.tt-gap{font-size:12px;color:var(--fg-muted);padding:2px 14px 2px 52px;background:var(--surface-2);border-top:1px solid var(--border)}
.tt-gap.long{color:var(--accent);font-weight:700}
.tt-gap.bad{color:var(--danger);font-weight:700}
.tt-swatches{display:flex;gap:6px;flex-wrap:wrap}
.tt-swatches label{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;border:2px solid transparent}
.tt-swatches input{position:absolute;opacity:0;pointer-events:none}
.tt-swatches input:checked + label{border-color:var(--accent)}
.tt-swatches input:focus-visible + label{box-shadow:var(--ring)}
.appbar h1.tt-h1{font-size:18px;white-space:nowrap;flex:1 0 auto}
.tt-page .context-pill{min-width:0;flex-shrink:1}
.tt-page .context-role{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tt-bells .li.field{flex-direction:row;flex-wrap:wrap;margin:0}
.tt-bells .li.field .err{flex-basis:100%;margin:0}
.tt-no.tt-c1{background:var(--tt1)}.tt-no.tt-c2{background:var(--tt2)}.tt-no.tt-c3{background:var(--tt3)}.tt-no.tt-c4{background:var(--tt4)}
.tt-no.tt-c5{background:var(--tt5)}.tt-no.tt-c6{background:var(--tt6)}.tt-no.tt-c7{background:var(--tt7)}.tt-no.tt-c8{background:var(--tt8)}
/* zajęcia dodatkowe: kilka lekcji z rzędu (makieta parent-timetable-fri, class-timetable-edit-extra) */
.tt-grid button.extra{outline:2px dashed var(--fg-muted);outline-offset:-4px}
.tt-extra-key{display:inline-block;width:12px;height:12px;border:2px dashed var(--fg-muted);border-radius:3px;vertical-align:-1px}
.chip.tt-extra{background:var(--tt8);color:var(--fg);white-space:nowrap;display:inline-block;margin:3px 0 1px}
.tt-no.tt-no-wide{width:auto;min-width:28px;padding:0 6px;font-size:12px}
.toggle.field{flex-direction:row;align-items:center;flex-wrap:wrap}
.toggle.field .err{flex-basis:100%}
.toggle.field > div:first-child{flex:1;min-width:0}
/* zajęcia w niestandardowych godzinach (makieta parent-timetable-custom, -week-custom) */
.tt-grid .tt-ctime{display:block;font-size:9.5px;font-weight:600;opacity:.8;margin-top:2px}
.tt-grid button.tt-abs{position:absolute;left:0;right:0;height:auto;min-height:0}
.tt-grid tr.tt-later td.n{font-size:10px;font-weight:700}
/* zajęcia rodzinne (plan zajecia-rodzinne, makieta parent-tt-own-*) */
.tt-list .li.tt-own{box-shadow:inset 3px 0 0 var(--own);color:inherit;text-decoration:none}
.tt-no.tt-own-no{background:var(--own-soft);color:var(--own)}
.chip.tt-own{background:var(--own-soft);color:var(--own);white-space:nowrap;display:inline-block;margin:3px 0 1px}
.tt-overlap{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--warn)}
.tt-grid button.has-own::before{content:"";position:absolute;bottom:4px;left:4px;width:7px;height:7px;border-radius:2px;background:var(--own)}
.tt-grid tr.tt-own-row td{vertical-align:top}
.tt-grid tr.tt-own-row td.n{font-size:10px;font-weight:700}
.tt-grid a.own{display:block;min-height:42px;border-radius:7px;padding:4px 2px;margin-bottom:3px;background:var(--own-soft);color:var(--own);box-shadow:inset 0 0 0 2px var(--own);font-size:12px;font-weight:700;line-height:1.1;text-align:center;text-decoration:none;word-break:break-word}
.tt-own-key{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--own-soft);box-shadow:inset 0 0 0 2px var(--own);vertical-align:-1px}
.tt-own-key--sm{width:8px;height:8px}
.tt-weeknav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-sum-own{font-size:13.5px;padding-left:28px;margin-top:3px;color:var(--fg-muted)}
.tt-sum-own>span:last-child{white-space:nowrap;padding-left:8px}
.tt-sum-overlap{color:var(--warn)}
.tt-slot-blocked{background:var(--surface-2)}