/* =========================================================
   Mój Plan Dnia — style
   Sekcje: 1 tokeny, 2 baza, 3 układ, 4 karty dziecka,
           5 nawigacja, 6 tryb rodzica, 7 formularze,
           8 modal/toast, 9 tryby dostępności, 10 iPad
   ========================================================= */

/* --- 1. Tokeny ------------------------------------------------ */
:root{
  --bg:#F3EDE3;
  --bg-2:#EBE3D6;
  --surface:#FFFCF7;
  --ink:#2C2823;
  --ink-soft:#6E655A;
  --line:#E2D6C2;
  --line-strong:#CDBCA0;

  --primary:#3D7A62;        /* akcje, potwierdzenia */
  --primary-dark:#2E5E4B;
  --on-primary:#FFFFFF;
  --now:#E39B3C;            /* „teraz” */
  --now-soft:#FBEBD3;
  --parent:#4A6C8C;         /* tryb rodzica */
  --alert:#B4503F;          /* zmiana planu */
  --alert-soft:#F7E3DE;
  --done:#9AA79B;

  --r-card:30px;
  --r-btn:22px;
  --r-pill:999px;

  --gap:20px;
  --pad:24px;
  --touch:64px;

  --fs-scale:1;
  --fs-base:calc(19px * var(--fs-scale));
  --fs-small:calc(16px * var(--fs-scale));
  --fs-card:calc(30px * var(--fs-scale));
  --fs-h1:calc(38px * var(--fs-scale));
  --fs-h2:calc(24px * var(--fs-scale));

  --shadow:0 2px 0 var(--line-strong);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

/* --- 2. Baza -------------------------------------------------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",
              "Trebuchet MS",system-ui,sans-serif;
  font-size:var(--fs-base);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:4px solid var(--parent);outline-offset:3px;border-radius:8px}
.boot{padding:60px;text-align:center;color:var(--ink-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- 3. Układ ------------------------------------------------- */
.app{min-height:100%;display:flex;flex-direction:column}
.screen{
  flex:1;
  padding:var(--pad) var(--pad) calc(120px + var(--safe-b));
  max-width:1180px;
  width:100%;
  margin:0 auto;
}
.screen-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gap);margin-bottom:28px;flex-wrap:wrap;
}
.date-big{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.5px}
.date-sub{font-size:var(--fs-small);color:var(--ink-soft);margin-top:4px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* --- 4. Karty dziecka ----------------------------------------- */
.card{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.act{
  display:flex;align-items:center;gap:22px;
  padding:18px 22px;
  min-height:118px;
  width:100%;
  text-align:left;
  position:relative;
}
.act-face{
  width:96px;height:96px;flex:0 0 96px;
  border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;line-height:1;
  overflow:hidden;
  background:var(--chip,#EFE7D9);
}
.act-face img{width:100%;height:100%;object-fit:contain;padding:6px}
.act-body{flex:1;min-width:0}
.act-name{display:block;font-size:var(--fs-card);font-weight:700;letter-spacing:-.3px}
.act-time{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);
  background:var(--bg-2);border-radius:var(--r-pill);padding:6px 16px;
}
.act-part img{width:calc(34px * var(--fs-scale));height:calc(34px * var(--fs-scale));object-fit:contain}
.act-part span{font-size:calc(24px * var(--fs-scale))}
.act-order{
  min-width:calc(46px * var(--fs-scale));justify-content:center;
  font-size:calc(24px * var(--fs-scale));font-weight:800;color:var(--ink);
}
.part-pic{width:56px;height:56px;object-fit:contain;background:var(--bg-2);border-radius:14px;padding:4px}
.act-check{
  width:var(--touch);height:var(--touch);flex:0 0 var(--touch);
  border-radius:50%;
  border:3px solid var(--line-strong);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:transparent;
}
.act.is-done{background:var(--bg-2);border-color:var(--line)}
.act.is-done .act-name{color:var(--done);text-decoration:line-through}
.act.is-done .act-face{opacity:.5}
.act.is-done .act-check{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.act.is-now{border-color:var(--now);border-width:4px;background:var(--now-soft)}
.act.is-now::before{
  content:"TERAZ";
  position:absolute;top:-15px;left:26px;
  background:var(--now);color:#3A2508;
  font-size:14px;font-weight:800;letter-spacing:1px;
  padding:5px 14px;border-radius:var(--r-pill);
}
.act.is-changed{border-color:var(--alert);border-style:dashed}

.banner{
  display:flex;gap:16px;align-items:center;
  background:var(--alert-soft);
  border:3px solid var(--alert);
  border-radius:var(--r-card);
  padding:20px 24px;margin-bottom:var(--gap);
}
.banner .emoji{font-size:40px}
.banner b{display:block;font-size:var(--fs-h2)}

.empty{
  text-align:center;color:var(--ink-soft);
  padding:60px 24px;border:3px dashed var(--line-strong);
  border-radius:var(--r-card);
}
.empty .emoji{font-size:60px;display:block;margin-bottom:12px}

/* odliczanie */
.count-row{display:flex;gap:var(--gap);flex-wrap:wrap;margin-top:8px}
.count{
  flex:1 1 240px;padding:20px 24px;
  background:var(--surface);border:2px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:18px;
}
.count .num{font-size:calc(44px * var(--fs-scale));font-weight:800;line-height:1;color:var(--primary)}
.count .lbl{font-size:var(--fs-small);color:var(--ink-soft)}
.count .emoji{font-size:38px}

/* dni następne */
.dayblock{padding:20px 24px}
.dayblock h3{font-size:var(--fs-h2);font-weight:700;margin-bottom:12px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:8px;
  background:var(--chip,var(--bg-2));
  border-radius:var(--r-pill);padding:8px 16px;
  font-size:var(--fs-small);font-weight:600;
}

/* wybór „chcę robić” */
.grid-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--gap)}
.pick{
  padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;
  min-height:180px;justify-content:center;text-align:center;
}
.pick .act-face{width:84px;height:84px;flex:0 0 84px;font-size:46px}
.pick-name{font-size:calc(21px * var(--fs-scale));font-weight:700}
.pick .hint{margin:0;font-size:13px}

/* --- 5. Nawigacja --------------------------------------------- */
.navbar{
  position:fixed;left:0;right:0;bottom:0;
  padding:14px var(--pad) calc(14px + var(--safe-b));
  background:rgba(243,237,227,.94);
  backdrop-filter:blur(10px);
  border-top:2px solid var(--line);
  display:flex;gap:14px;justify-content:center;
  z-index:20;
}
.navbtn{
  flex:1 1 0;max-width:280px;min-height:var(--touch);
  border-radius:var(--r-btn);
  background:var(--surface);border:2px solid var(--line);
  font-weight:700;font-size:var(--fs-small);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.navbtn .emoji{font-size:26px}
.navbtn[aria-current="page"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.navbtn.want{background:var(--now-soft);border-color:var(--now);border-width:3px;flex:1.25 1 0}
.navbtn.want[aria-current="page"]{background:var(--now);border-color:var(--now);color:#3A2508}

.lock{
  width:56px;height:56px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);
  font-size:24px;display:flex;align-items:center;justify-content:center;
}

/* --- 6. Tryb rodzica ------------------------------------------ */
body.parent{--bg:#EEF1F4;--bg-2:#E3E8ED;--line:#D2DAE2;--line-strong:#B4C0CB;--surface:#FFFFFF}
.topbar{
  position:sticky;top:0;z-index:15;
  background:var(--parent);color:#fff;
  padding:14px var(--pad);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topbar h1{font-size:var(--fs-h2);font-weight:700}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  min-height:52px;padding:0 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:var(--fs-small);
}
.tab[aria-current="page"]{background:#fff;color:var(--parent)}
.seg{display:flex;gap:8px;background:var(--bg-2);padding:6px;border-radius:var(--r-pill);flex-wrap:wrap}
.seg button{
  min-height:52px;padding:0 22px;border-radius:var(--r-pill);
  font-weight:700;font-size:var(--fs-small);color:var(--ink-soft);
}
.seg button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

.panel{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-card);padding:24px}
.panel + .panel{margin-top:var(--gap)}
.panel h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:6px}
.panel .hint{color:var(--ink-soft);font-size:var(--fs-small);margin-bottom:18px}

/* edytor dnia */
.item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:var(--surface);
}
.item .act-face{width:64px;height:64px;flex:0 0 64px;font-size:34px;border-radius:18px}
.item .nm{flex:1;font-weight:700;min-width:120px}
.iconbtn{
  width:56px;height:56px;border-radius:16px;border:2px solid var(--line);
  background:var(--bg);font-size:22px;display:flex;align-items:center;justify-content:center;
}
.iconbtn.danger{color:var(--alert);border-color:var(--alert)}

/* kalendarz */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal .dow{text-align:center;font-size:var(--fs-small);font-weight:700;color:var(--ink-soft);padding-bottom:6px}
.cell{
  min-height:96px;border:2px solid var(--line);border-radius:18px;background:var(--surface);
  padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.cell.out{opacity:.35}
.cell.today{border-color:var(--now);border-width:3px}
.cell .d{font-weight:700}
.cell .dots{display:flex;gap:4px;flex-wrap:wrap}
.dot{width:12px;height:12px;border-radius:50%;background:var(--chip,var(--primary))}
.cell .hol{font-size:12px;font-weight:700;color:var(--primary)}

/* tydzień */
.week{display:grid;gap:12px;grid-template-columns:1fr}
.weekday{border:2px solid var(--line);border-radius:20px;background:var(--surface);padding:14px 16px}
.weekday .ttl{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:800}
.weekday.today{border-color:var(--now);border-width:3px}

/* rok */
.year{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--gap)}
.mini{border:2px solid var(--line);border-radius:20px;background:var(--surface);padding:14px}
.mini .ttl{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:800;text-transform:capitalize}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini-grid span{
  aspect-ratio:1;border-radius:6px;background:var(--bg-2);
  font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.mini-grid span.has{background:var(--primary);color:#fff;font-weight:700}
.mini-grid span.hol{background:var(--now);color:#3A2508;font-weight:700}
.mini-grid span.empty{background:transparent}

/* --- 7. Formularze i przyciski -------------------------------- */
.btn{
  min-height:var(--touch);padding:0 28px;border-radius:var(--r-btn);
  background:var(--surface);border:2px solid var(--line-strong);
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.parentish{background:var(--parent);border-color:var(--parent);color:#fff}
.btn.danger{background:var(--alert);border-color:var(--alert);color:#fff}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45}

.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:var(--fs-small);margin-bottom:8px}
.field .desc{font-weight:400;color:var(--ink-soft)}
input[type=text],input[type=time],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%;min-height:var(--touch);
  padding:12px 18px;border-radius:var(--r-btn);
  border:2px solid var(--line-strong);background:var(--surface);
}
textarea{min-height:110px;resize:vertical}
.switch{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--touch);padding:10px 18px;
  border:2px solid var(--line);border-radius:var(--r-btn);background:var(--surface);
  margin-bottom:12px;font-weight:600;
}
.switch input{width:34px;height:34px;flex:0 0 34px;accent-color:var(--primary)}
.choices{display:flex;gap:10px;flex-wrap:wrap}
.choices button{
  min-height:56px;padding:0 22px;border-radius:var(--r-pill);
  border:2px solid var(--line-strong);background:var(--surface);font-weight:700;
}
.choices button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

/* --- 8. Modal i toast ----------------------------------------- */
.backdrop{
  position:fixed;inset:0;background:rgba(44,40,35,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:60;
}
.sheet{
  background:var(--surface);border-radius:var(--r-card);
  width:min(760px,100%);max-height:92vh;overflow:auto;
  padding:28px;border:2px solid var(--line);
}
.sheet h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:18px}
.sheet-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:360px;margin:0 auto}
.pinpad button{min-height:76px;border-radius:20px;border:2px solid var(--line-strong);background:var(--bg);font-size:28px;font-weight:700}
.pindots{display:flex;gap:14px;justify-content:center;margin:20px 0}
.pindots i{width:20px;height:20px;border-radius:50%;border:3px solid var(--line-strong)}
.pindots i.on{background:var(--parent);border-color:var(--parent)}

#toast-root{position:fixed;left:0;right:0;bottom:calc(110px + var(--safe-b));display:flex;justify-content:center;pointer-events:none;z-index:80}
.toast{
  background:var(--ink);color:#fff;padding:16px 26px;border-radius:var(--r-pill);
  font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:90%;
}

/* --- 9. Tryby dostępności ------------------------------------- */
body.calm *,body.calm *::before,body.calm *::after{
  transition:none !important;animation:none !important;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
body:not(.calm) .act,body:not(.calm) .btn,body:not(.calm) .navbtn{transition:transform .12s ease}
body:not(.calm) .act:active,body:not(.calm) .btn:active,body:not(.calm) .navbtn:active{transform:scale(.985)}

body.contrast{
  --bg:#FFFFFF;--bg-2:#F0F0F0;--surface:#FFFFFF;
  --ink:#000000;--ink-soft:#000000;
  --line:#000000;--line-strong:#000000;
  --primary:#00563F;--now:#B35C00;--now-soft:#FFF3E0;--alert:#A3170A;--parent:#12395E;
  --shadow:none;
}
body.contrast .card,body.contrast .panel,body.contrast .cell,body.contrast .item,
body.contrast .weekday,body.contrast .mini,body.contrast .count{border-width:3px}
body.contrast .act-face{background:#FFF !important;border:3px solid #000}
body.contrast .act.is-now::before{color:#fff;background:#B35C00}


/* --- 12. Ekran wybranego dnia --------------------------------- */
.day-head{position:relative}
.pill-today{
  display:inline-block;background:var(--primary);color:var(--on-primary);
  font-size:14px;font-weight:800;letter-spacing:1.5px;
  padding:5px 16px;border-radius:var(--r-pill);margin-bottom:10px;
}
.dow-big{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.5px;line-height:1.05}
.date-line{font-size:calc(26px * var(--fs-scale));font-weight:600;color:var(--ink-soft);margin-top:2px}
.rel{
  display:inline-block;margin-top:12px;
  background:var(--now-soft);border:2px solid var(--now);border-radius:var(--r-pill);
  padding:8px 20px;font-size:calc(22px * var(--fs-scale));font-weight:700;
}
.dots-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.dot-day{width:22px;height:22px;border-radius:50%;background:var(--now);border:2px solid var(--now)}
.progress{color:var(--ink-soft);font-size:var(--fs-small);margin:4px 0 16px}

.daynav{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  margin:0 0 24px;flex-wrap:wrap;
}
.daynav .btn{flex:1 1 200px}

.group{margin-bottom:30px}
.group-title{
  display:flex;align-items:center;gap:12px;
  font-size:calc(24px * var(--fs-scale));font-weight:800;
  margin:0 0 14px;padding-bottom:8px;border-bottom:3px solid var(--line);
}
.group-title img{width:44px;height:44px;object-fit:contain}
.group-title span{font-size:calc(30px * var(--fs-scale))}

/* --- 13. Tydzień, miesiąc, rok u dziecka ---------------------- */
.thumb{
  width:52px;height:52px;border-radius:14px;object-fit:contain;
  background:var(--bg-2);border:2px solid var(--line);
}
.thumb-emoji{display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--chip,var(--bg-2))}

.weekgrid{display:grid;gap:var(--gap);grid-template-columns:1fr}
.daycard{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:20px 22px;text-align:left;width:100%;min-height:120px;
}
.dc-dow{font-size:calc(24px * var(--fs-scale));font-weight:800;letter-spacing:-.3px}
.dc-date{font-size:var(--fs-small);color:var(--ink-soft);font-weight:600}
.dc-rel{
  background:var(--bg-2);border-radius:var(--r-pill);padding:4px 14px;
  font-size:var(--fs-small);font-weight:700;color:var(--ink-soft);
}
.dc-ev{font-size:var(--fs-small);font-weight:700;color:var(--primary)}
.dc-pics{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dc-empty{color:var(--ink-soft)}
.daycard.is-today{border-color:var(--now);border-width:4px;background:var(--now-soft)}

.cal-child .cell-child{min-height:112px;gap:4px}
.cell-child .d{font-size:calc(22px * var(--fs-scale));font-weight:800}
.cell-child .cell-pics{display:flex;gap:4px;flex-wrap:wrap}
.cell-child .thumb{width:34px;height:34px;border-radius:10px;border-width:1px}
.cell-child .thumb-emoji{font-size:18px}
.cell-ev{position:absolute;top:6px;right:8px;font-size:20px}
.cell-child{position:relative}

.yeargrid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.monthcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:22px;min-height:140px;text-align:left;
}
.mc-name{font-size:calc(26px * var(--fs-scale));font-weight:800;text-transform:capitalize}
.mc-now{
  background:var(--now);color:#3A2508;border-radius:var(--r-pill);
  padding:3px 12px;font-size:13px;font-weight:800;letter-spacing:1px;
}
.mc-evs{display:flex;flex-direction:column;gap:6px}
.mc-ev{font-size:var(--fs-small);font-weight:600;color:var(--ink-soft)}
.monthcard.is-now{border-color:var(--now);border-width:4px;background:var(--now-soft)}

/* --- 14. Chcę robić: kiedy i potwierdzenie -------------------- */
.when-choices{display:grid;gap:14px;grid-template-columns:1fr}
.when-choices .pick{min-height:110px;padding:18px}
.want-confirm{text-align:center}
.want-confirm .act-face{width:140px;height:140px;font-size:70px;margin:0 auto 18px;border-radius:28px}
.wc-name{font-size:calc(30px * var(--fs-scale));font-weight:800}
.wc-date{font-size:calc(22px * var(--fs-scale));font-weight:700;color:var(--ink-soft);margin-top:8px;line-height:1.3}
.want-confirm .rel{margin-top:14px}
.want-confirm .dots-row{justify-content:center}


/* --- 15. Oznaczenie: szkoła czy wolne ------------------------- */
.schoolmark{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r-pill);padding:3px 10px;
  font-size:13px;font-weight:700;line-height:1.2;
  border:2px solid transparent;
}
.schoolmark.is-school{background:#DCE6F0;border-color:#9FB6CC;color:#2B4055}
.schoolmark.is-free{background:#DFEDDC;border-color:#9CBE93;color:#2E4A26}
.schoolmark.big{
  font-size:calc(19px * var(--fs-scale));padding:8px 18px;gap:10px;margin-top:12px;
}
.schoolmark.big small{font-weight:600;opacity:.8}
.markline{margin:0}
.cell-child .schoolmark{padding:2px 7px;font-size:11px;gap:4px}
.cell-child .schoolmark .sm-txt{display:none}
.cell-child.day-school{background:#F2F6FA}
.cell-child.day-free{background:#F2F8F0}
body.contrast .cell-child.day-school,body.contrast .cell-child.day-free{background:#fff}
body.contrast .schoolmark{background:#fff;border-color:#000;color:#000}
.dc-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

@media (min-width:760px){
  .cell-child .schoolmark .sm-txt{display:inline}
}

/* --- 10. iPad / duże ekrany ----------------------------------- */
@media (min-width:760px){
  :root{--pad:32px;--gap:24px}
  .grid-pick{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .week{grid-template-columns:repeat(2,1fr)}
  .weekgrid{grid-template-columns:repeat(2,1fr)}
  .when-choices{grid-template-columns:repeat(3,1fr)}
}
/* iPad poziomo: plan w dwóch kolumnach, tydzień w siedmiu */
@media (min-width:1000px) and (orientation:landscape){
  .stack.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
  .stack.plan .banner{grid-column:1/-1}
  .week{grid-template-columns:repeat(7,1fr)}
  .weekgrid{grid-template-columns:repeat(2,1fr)}
  .yeargrid{grid-template-columns:repeat(4,1fr)}
  .cell{min-height:120px}
  .cal-child .cell-child{min-height:130px}
}
@media (max-width:520px){
  :root{--pad:16px;--gap:14px;--fs-card:calc(24px * var(--fs-scale));--fs-h1:calc(28px * var(--fs-scale))}
  .act-face{width:74px;height:74px;flex:0 0 74px;font-size:40px}
  .navbtn .txt{display:none}
  .navbtn .emoji{font-size:26px}
  .navbar{gap:8px;padding-left:10px;padding-right:10px}
  .dow-big{font-size:calc(26px * var(--fs-scale))}
  .date-line{font-size:calc(20px * var(--fs-scale))}
  .daynav .btn{flex:1 1 140px;padding:0 14px;font-size:15px}
}
/* --- 11. Wydruk ----------------------------------------------- */
#print-root{display:none}

@media print{
  @page{size:A4 portrait;margin:12mm}
  html,body{background:#fff;color:#000}
  #app,#modal-root,#toast-root,.navbar,.topbar{display:none !important}
  #print-root{display:block}

  .p-page{page-break-after:always}
  .p-page:last-child{page-break-after:auto}
  .p-head{display:flex;justify-content:space-between;align-items:baseline;
          border-bottom:2px solid #000;padding-bottom:4mm;margin-bottom:6mm}
  .p-title{font-size:20pt;font-weight:700}
  .p-sub{font-size:11pt}
  .p-empty{font-size:11pt;color:#555}
  .p-note{margin-top:6mm;font-size:12pt;border:1.5pt dashed #000;padding:4mm;border-radius:3mm}

  .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
  .p-grid.p-list{grid-template-columns:1fr;gap:3mm}
  .p-card{display:flex;align-items:center;gap:4mm;position:relative;
          border:1.5pt solid #000;border-radius:4mm;padding:4mm;page-break-inside:avoid}
  .p-face{width:22mm;height:22mm;object-fit:contain;flex:0 0 22mm}
  .p-face-sm{width:11mm;height:11mm;flex:0 0 11mm}
  .p-emoji{display:flex;align-items:center;justify-content:center;font-size:16mm}
  .p-face-sm.p-emoji{font-size:8mm}
  .p-text{flex:1}
  .p-name{display:block;font-size:16pt;font-weight:700;line-height:1.2}
  .p-when{display:block;font-size:11pt;margin-top:1.5mm}
  .p-num{position:absolute;top:2mm;left:2mm;font-size:11pt;font-weight:700}
  .p-box{width:10mm;height:10mm;flex:0 0 10mm;border:1.5pt solid #000;border-radius:2mm}
  .p-box-sm{width:5mm;height:5mm;flex:0 0 5mm;border-width:1pt}

  .p-week{display:flex;flex-direction:column;gap:3mm}
  .p-row{display:flex;gap:4mm;border:1.5pt solid #000;border-radius:3mm;
         padding:3mm;page-break-inside:avoid}
  .p-day{flex:0 0 30mm;font-size:12pt;font-weight:700}
  .p-cells{flex:1;display:flex;flex-wrap:wrap;gap:2mm}
  .p-mini{display:flex;align-items:center;gap:2mm;border:1pt solid #000;
          border-radius:10mm;padding:1.5mm 3mm;font-size:10pt}

  .p-cut{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4mm}
  .p-cutcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3mm;
             border:1.5pt dashed #000;border-radius:3mm;height:52mm;page-break-inside:avoid}
  .p-cutname{font-size:13pt;font-weight:700;text-align:center;padding:0 2mm}
}