/* Paper theme — shared visual language for desktop (sidebar) + mobile (bottom-nav) layouts.
   Structure differs by breakpoint (chosen in JS via matchMedia), but colors,
   type, row/tile/modal anatomy and animations are shared. */

:root{
  --paper:#f2f1ec; --paper-raised:#ffffff; --ink:#1f1e1b; --ink-soft:#6b6a63;
  --ink-faint:#a3a196; --line:#dcdad0; --accent:#a13d2d; --accent-soft:#c98a7a;
  --done:#7c8a6e; --leo:#5b6ea8; --konrad:#a1763f; --violet:#8a6fb0; --sea:#008192;
  --navbg:#1f1e1b; --star:#a13d2d;
  --cat-red:#a13d2d; --cat-blue:#3d5a8a; --cat-orange:#b8763a; --cat-green:#5c7a4a;
  /* DESIGN.md `overdue`. It was referenced (var(--overdue, …)) long before it
     was declared, so every use had to carry its own literal fallback. */
  --overdue:#FF3B30;
  /* Warstwy nakładek: overlay dostaje warstwę po TYPIE, nie własny numer.
     Toast jest NA DOLE pasma (--z-toast) — każdy otwarty panel, sheet czy
     menu zawsze jest nad nim, bez ręcznego podbijania liczb. */
  --z-nav:15; --z-toast:100; --z-sheet:210; --z-menu:300; --z-top:400;
}
:root[data-theme="dark"]{
  --paper:#1a1917; --paper-raised:#232220; --ink:#eae8e2; --ink-soft:#a5a399;
  --ink-faint:#6e6c62; --line:#37352f; --accent:#d9705a; --accent-soft:#8a5147;
  --done:#93a382; --leo:#8fa3e0; --konrad:#d3a35f; --violet:#b49bd6; --sea:#2ba9bb;
  --navbg:#0f0e0c; --star:#d9705a;
  --cat-red:#d9705a; --cat-blue:#7d94c4; --cat-orange:#d3a35f; --cat-green:#8fa87a;
}
/* No prefers-color-scheme override: light is the default and paper.js writes
   data-theme from the schedule (THEME_DARK_FROM) or the manual pin. */

*{box-sizing:border-box;}
/* No overflow lock here: desktop scrolls the body (.pp-desktop is min-height:100vh).
   The lock is mobile-only — see the <=860px block, where .pp-content-scroll scrolls. */
html,body{margin:0;padding:0;height:100%;background:var(--paper);}
body{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;color:var(--ink);}
a{color:var(--accent);}
a:hover{color:var(--ink);}
input,select,textarea,button{font-family:inherit;}
input,select,textarea{font-size:max(16px,1rem);} /* prevent iOS/Android auto-zoom */
::-webkit-scrollbar{display:none;}
#app{min-height:100vh;position:relative;}

@keyframes burst{0%{transform:scale(0.5);opacity:0.8;}100%{transform:scale(2.1);opacity:0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes sheetup{0%{transform:translateY(100%);}100%{transform:translateY(0);}}
@keyframes pulsering{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(2);opacity:0;}}
@property --ring{syntax:'<angle>';inherits:false;initial-value:0deg;}

.sysfont{font-family:system-ui,-apple-system,sans-serif;}
/* Reset for interactive elements converted from div to button for a11y —
   later class rules re-apply their layout/colors. */
.pp-unbtn{border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;}
.jag{clip-path:polygon(0% 14px, 3% 4px, 7% 12px, 12% 2px, 17% 10px, 22% 3px, 28% 13px, 33% 5px, 39% 11px, 45% 2px, 51% 12px, 57% 4px, 63% 10px, 69% 2px, 75% 12px, 81% 4px, 86% 11px, 92% 3px, 97% 10px, 100% 14px, 100% 100%, 0% 100%);}

/* ---------- boot skeleton ---------- */
.pp-skel{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);}
.pp-skel .b{background:var(--line);animation:skelpulse 1.2s ease-in-out infinite;}
@keyframes skelpulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.pp-skel .b{animation:none;}}

/* ---------- shared: task row ---------- */
.pp-row{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);position:relative;touch-action:pan-y;transition:transform 0.3s ease, box-shadow 0.15s ease, opacity 0.3s ease;background:var(--paper);}
.pp-row.done-anim-2{transform:rotate(-1deg) translateY(-2px);}
.pp-row.done-anim-3{transform:translate(130%,-16px) rotate(5deg);box-shadow:0 8px 18px rgba(0,0,0,.18);clip-path:polygon(0% 0%, 100% 0%, 100% 88%, 95% 100%, 90% 86%, 84% 100%, 78% 88%, 71% 100%, 64% 87%, 57% 100%, 50% 88%, 43% 100%, 36% 87%, 29% 100%, 22% 88%, 15% 100%, 9% 87%, 4% 100%, 0% 90%);transition:transform 0.4s cubic-bezier(.55,0,1,.45);}
.pp-row.done-anim-4{height:0 !important;overflow:hidden;padding:0;border:0;opacity:0;transition:height .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;}
.pp-row.row-done{opacity:.5;}
/* Today/Tomorrow/Yesterday move — small arrow draws in the left margin, then
   the row slides off in that direction before the list re-renders in its new group. */
.pp-arrow{position:absolute;left:4px;top:50%;width:14px;height:14px;margin-top:-7px;opacity:0;pointer-events:none;}
.pp-row.migrate-out{transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s cubic-bezier(.22,1,.36,1);}
@keyframes rowarrive{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0% 0 0);}}
.pp-row.just-arrived{animation:rowarrive .22s cubic-bezier(.65,0,.35,1);}
/* Not yet due — visible but subdued; full strength on touch/hover. */
.pp-row.upcoming{opacity:.55;}
.pp-row.upcoming:hover,.pp-row.upcoming:focus-within{opacity:1;}
/* Current-time marker inside the Dziś group. */
.pp-nowline{display:flex;align-items:center;gap:8px;margin:1px 0;}
.pp-nowline span{font-family:system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--accent);flex:none;}
.pp-nowline::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.pp-nowline::after{content:"";flex:1;border-top:1.5px solid var(--accent);}
.pp-dot{width:3px;border-radius:2px;align-self:stretch;margin:2px 0;flex-shrink:0;}
/* Agenda time column (layout B): time + relative date left of the project bar.
   Clickable → quick-adjust menu. */
.pp-timecol-wrap{position:relative;flex-shrink:0;}
/* 74px, not 64px: star + alarm + hour is the widest line the column has to hold,
   and at 64px it sat exactly on the boundary — the button clipped the leading star
   on a priority task with a fixed hour. A fixed width (rather than min-width
   growing per row) keeps the column an actual column — every row's title starts at
   the same x, and the marks stay off the row's left edge. */
.pp-timecol{width:74px;white-space:nowrap;display:flex;flex-direction:column;gap:1px;text-align:right;align-items:flex-end;padding-top:2px;font-family:system-ui,sans-serif;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;cursor:pointer;}
.pp-timecol:hover .tm,.pp-timecol.open .tm{color:var(--sea);text-decoration:underline dotted;}
.pp-timecol .tm.faint{color:var(--ink-faint);letter-spacing:2px;}
.pp-timecol .dt{font-size:10.5px;color:var(--ink-faint);text-transform:lowercase;}
.pp-time-menu{top:24px;left:0;width:210px;}
.pp-time-menu-inputs{border-bottom:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.pp-time-menu-inputs label{display:flex;align-items:center;gap:8px;font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-soft);}
.pp-time-menu-inputs input{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:3px 6px;border-radius:4px;font-family:system-ui,sans-serif;}
.pp-time-apply{margin-top:4px;border:1px solid var(--line)!important;border-radius:4px;padding:6px 8px!important;justify-content:center;font-size:11px!important;background:var(--paper-raised)!important;}
.pp-proj-ic{font-size:12px;vertical-align:-1px;}
.pp-proj-m{font-family:'Iowan Old Style',Georgia,serif;font-weight:700;font-size:12px;line-height:1;}
.pp-avatar{width:26px;height:26px;border-radius:0;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .3s ease;}
.pp-avatar-wrap{position:relative;flex-shrink:0;padding-top:2px;}
.pp-avatar.open{transform:rotate(-12deg);}
/* Matte paper panel: one flat card, hairline dividers — no per-button gloss. */
/* warstwa --z-menu: nad toastami (--z-toast) i panelami (--z-sheet) */
.pp-menu{position:absolute;top:30px;left:0;z-index:var(--z-menu);width:200px;display:flex;flex-direction:column;pointer-events:none;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.22);opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;visibility:hidden;}
.pp-menu.open{pointer-events:auto;opacity:1;transform:translateY(0);visibility:visible;}
.pp-menu button{text-align:left;border:none;border-bottom:1px solid var(--line);background:none;padding:11px 12px;cursor:pointer;color:var(--ink);font-size:12px;display:flex;gap:8px;align-items:center;font-family:inherit;}
.pp-menu button:last-child{border-bottom:none;}
.pp-menu button:hover{background:var(--paper-raised);}
.pp-menu.open button:disabled{opacity:.35;cursor:not-allowed;}
.pp-menu.open button:disabled:hover{background:none;}
.pp-menu button .ico{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:10px;color:var(--sea);width:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.pp-menu button .ico i{font-size:15px;line-height:1;}
.pp-menu-scrim{position:fixed;inset:0;z-index:calc(var(--z-menu) - 1);background:rgba(0,0,0,.35);backdrop-filter:blur(2px);}
.pp-title-wrap{cursor:pointer;flex:1;min-width:0;}
.pp-title{position:relative;display:inline-block;font-size:16px;font-weight:500;line-height:1.3;}
.pp-title.strike{text-decoration:line-through;}
.pp-title svg{position:absolute;left:-3px;top:0;width:calc(100% + 6px);height:100%;pointer-events:none;overflow:visible;}
.pp-desc{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.4;word-break:break-word;}
.pp-desc a{color:var(--accent);}
.pp-favicon{width:14px;height:14px;vertical-align:-2px;margin-right:2px;}
.pp-meta{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pp-meta .overdue{color:var(--accent);font-weight:600;}
.pp-date{font-family:system-ui,sans-serif;font-size:12px;color:var(--ink-soft);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px;flex-shrink:0;}
.pp-date .lower{display:block;text-transform:lowercase;}
.pp-date .faint{display:block;font-size:11px;color:var(--ink-soft);}
.pp-star{color:var(--star);font-size:14px;}
.pp-edit-btn{border:none;background:none;cursor:pointer;color:var(--ink-faint);font-size:14px;}
/* Row actions live on hover (desktop): the space is reserved at all times so the
   row never reflows when they fade in. Mobile keeps the pencil and its swipes. */
.pp-row-acts{display:flex;align-items:flex-start;gap:1px;flex-shrink:0;}
.pp-rowact{border:none;background:none;cursor:pointer;color:var(--ink-faint);font-size:14px;padding:0 3px;line-height:1;}
.pp-rowact:hover:not(:disabled){color:var(--ink);}
.pp-rowact:disabled{opacity:.35;cursor:default;}
.pp-desktop .pp-edit-btn,.pp-desktop .pp-rowact{opacity:0;transition:opacity .15s ease;}
.pp-desktop .pp-row:hover .pp-edit-btn,.pp-desktop .pp-row:focus-within .pp-edit-btn,
.pp-desktop .pp-row.row-active .pp-edit-btn,.pp-desktop .pp-edit-btn:focus-visible,
.pp-desktop .pp-row:hover .pp-rowact,.pp-desktop .pp-row:focus-within .pp-rowact,
.pp-desktop .pp-row.row-active .pp-rowact,.pp-desktop .pp-rowact:focus-visible{opacity:1;}
.pp-mobile .pp-rowact{display:none;}
.pp-arch-btn{border:none;background:none;cursor:pointer;color:var(--ink-faint);font-size:14px;padding:0 6px 0 0;}
.pp-arch-btn:hover{color:var(--accent);}
/* Desktop: reveal on row hover; touch devices: always visible (handy on mobile). */
@media (hover:hover){
  .pp-arch-btn{opacity:0;transition:opacity .15s ease;}
  .pp-row:hover .pp-arch-btn,.pp-arch-btn:focus-visible{opacity:1;}
}
.pp-group-label{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:26px 0 8px;display:flex;align-items:baseline;gap:8px;cursor:pointer;user-select:none;width:100%;}
.pp-group-label .chev{display:inline-block;transition:transform .15s ease;font-size:9px;}
.pp-group-label.collapsed .chev{transform:rotate(0deg);}
.pp-group-label:not(.collapsed) .chev{transform:rotate(90deg);}

/* ---------- mobile swipe actions ---------- */
.pp-swipe-wrap{position:relative;}
.pp-swipe-wrap.swiping{overflow:hidden;}
.pp-swipe-acts{position:absolute;inset:0 0 1px 0;display:flex;}
.pp-swipe-acts.r{justify-content:flex-start;}
.pp-swipe-acts.l{justify-content:flex-end;}
.pp-swipe-acts button{border:none;cursor:pointer;font-family:system-ui,sans-serif;font-size:10.5px;font-weight:600;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:78px;padding:0;}
.pp-swipe-acts button i{font-size:16px;transition:transform .16s cubic-bezier(.34,1.56,.64,1);}
/* M4 — threshold tell: the icon grows once releasing would commit the action. */
.pp-swipe-wrap.past .pp-swipe-acts button i{transform:scale(1.28);}
.pp-swipe-acts button:disabled{opacity:.45;cursor:not-allowed;}
.sw-done{background:var(--done);}
.sw-doneswap{background:var(--sea);}
.sw-today{background:var(--sea);}
.sw-tomorrow{background:var(--navbg);}
.sw-next{background:var(--accent);}

/* ---------- shared: filter chips ---------- */
.pp-chips{position:relative;display:flex;border:1px solid var(--line);padding:3px;width:fit-content;font-family:system-ui,sans-serif;border-radius:4px;}
.pp-chips .pill{position:absolute;top:3px;left:3px;height:26px;border-radius:3px;background:var(--navbg);transition:transform .3s cubic-bezier(.22,1,.36,1);}
.pp-chips button{position:relative;height:26px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);transition:color .25s ease;white-space:nowrap;}
.pp-chips button.active{color:var(--paper);}

/* ---------- shared: buttons ---------- */
.pp-btn-primary{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:none;padding:9px 16px;cursor:pointer;white-space:nowrap;border-radius:4px;}
.pp-btn-ghost{font-size:12px;padding:9px 16px;border:1px solid var(--line);background:none;color:var(--ink-soft);cursor:pointer;border-radius:4px;}
.pp-btn-save{font-size:12px;padding:9px 22px;border:none;color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .3s ease;border-radius:4px;background:var(--ink);}
.pp-btn-save.done{background:var(--done);}
.pp-spinner{width:13px;height:13px;border-radius:50%;border:2px solid rgba(242,241,236,.35);border-top-color:var(--paper);animation:spin .7s linear infinite;}
.pp-chip-btn{font-size:12px;padding:6px 12px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:4px;display:inline-flex;align-items:center;gap:6px;}
.pp-chip-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pp-dot-sm{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* ---------- shared: project tiles ---------- */
.pp-project-tile{border-bottom:1px solid var(--line);padding:16px 0;}
.pp-project-head{display:flex;align-items:center;gap:12px;}
.pp-ring{cursor:pointer;flex-shrink:0;width:44px;height:44px;border-radius:50%;position:relative;background:conic-gradient(var(--sea) var(--ring,0deg), var(--line) 0deg);transition:--ring .7s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;}
.pp-ring-inner{width:35px;height:35px;border-radius:50%;background:var(--paper-raised);display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif;font-size:10px;color:var(--ink-soft);}
.pp-project-name{font-size:16px;}
.pp-project-sub{font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pp-project-link{display:inline-block;margin-top:8px;font-family:system-ui,sans-serif;font-size:10.5px;padding:2px 8px;border:1px solid var(--line);text-decoration:none;color:var(--ink-soft);border-radius:4px;}
.pp-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1);}
.pp-acc.open{grid-template-rows:1fr;}
.pp-acc>div{overflow:hidden;}
.pp-acc-inner{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;opacity:0;transform:translateY(-8px);transition:all .3s ease .08s;}
.pp-acc.open .pp-acc-inner{opacity:1;transform:translateY(0);}
.pp-check-row{display:flex;align-items:center;gap:10px;padding:6px 0;}
.pp-check{position:relative;width:17px;height:17px;cursor:pointer;flex-shrink:0;}
.pp-check .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--sea);opacity:0;}
.pp-check.burst .ring{animation:burst .5s ease-out;}
.pp-check-box{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--ink-faint);background:transparent;transition:all .2s ease;display:flex;align-items:center;justify-content:center;}
.pp-check.done .pp-check-box{border-color:var(--sea);background:var(--sea);}
.pp-check-box svg{transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.pp-check.done .pp-check-box svg{transform:scale(1);}
.pp-check-label{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink);flex:1;min-width:0;}
.pp-check-label.strike{text-decoration:line-through;}
/* Row actions stay faintly visible instead of fully hidden: at opacity 0 they were
   undiscoverable — nothing hinted a row could be edited until you happened to hover. */
.pp-ptask-acts{display:flex;gap:2px;opacity:.35;transition:opacity .15s ease;flex-shrink:0;}
.pp-check-row:hover .pp-ptask-acts{opacity:1;}
@media (hover:none){.pp-ptask-acts{opacity:.55;}}
.pp-ptask-edit{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;font-size:12.5px;padding:4px 6px;border-radius:4px;outline:none;}
.pp-inline-input{width:100%;border:none;background:none;font-family:system-ui,sans-serif;font-size:12.5px;padding:8px 0 4px;color:var(--ink);outline:none;margin-top:4px;}
.pp-inline-input.dashed-top{border-top:1px dashed var(--line);}
.pp-subproject{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.pp-subproject-head{display:flex;align-items:center;gap:8px;font-family:system-ui,sans-serif;font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;width:100%;user-select:none;}
.pp-done-row{display:flex;align-items:center;gap:8px;}
.pp-done-row .pp-check-row{flex:1;min-width:0;}
.pp-done-date{font-family:system-ui,sans-serif;font-size:10.5px;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums;}
.pp-subproject-count{font-size:10px;background:var(--line);color:var(--ink-soft);border-radius:3px;padding:1px 7px;}
.pp-project-chev i{transition:transform .2s ease;}
.pp-donehead{display:flex;align-items:center;gap:7px;margin-top:10px;padding:6px 0 4px;cursor:pointer;user-select:none;color:var(--ink-soft);font-family:system-ui,sans-serif;font-size:11.5px;font-weight:600;border-top:1px dashed var(--line);width:100%;}
.pp-donehead i{transition:transform .2s ease;}
.pp-donehead.open i{transform:rotate(90deg);}
/* D3 — height comes from the content instead of a 1200px cap that clips long
   lists and makes the easing land unevenly. */
.pp-donelist{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1);}
.pp-donelist.open{grid-template-rows:1fr;}
.pp-donelist>div{overflow:hidden;}

/* ---------- shared: notes ---------- */
.pp-note-bucket-label{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
.pp-topic{border-bottom:1px solid var(--line);overflow:hidden;}
.pp-topic-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;width:100%;}
.pp-topic-head .chev{color:var(--ink-faint);transition:transform .15s ease;}
.pp-topic.open .pp-topic-head .chev{transform:rotate(90deg);}
.pp-note-line{margin:2px 0;word-break:break-word;}
.pp-note-check-row{display:flex;align-items:flex-start;gap:9px;padding:4px 0;}
.pp-note-check-row .pp-check{margin-top:1px;}
.pp-note-h{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;margin:12px 0 4px;font-family:'Iowan Old Style',Georgia,serif;font-size:15px;font-weight:600;color:var(--ink);width:100%;}
.pp-note-h i{font-size:12px;color:var(--ink-faint);transition:transform .15s ease;}
.pp-note-sec{overflow:hidden;transition:max-height .3s ease,opacity .2s ease;max-height:2000px;}
.pp-note-sec.folded{max-height:0;opacity:0;}
.pp-note{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;}
.pp-note-edit-btn{position:absolute;top:8px;right:10px;border:none;background:none;cursor:pointer;color:var(--ink-faint);font-size:13px;padding:4px;}
.pp-note-edit-btn:hover{color:var(--accent);}
.pp-note-title{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;}
.pp-note-body{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

/* ---------- shared: modal/sheet ---------- */
.pp-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:var(--z-sheet);}
.pp-modal-label{display:block;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-family:system-ui,sans-serif;}
.pp-modal-input{width:100%;padding:9px 10px;border:1px solid var(--line);font-size:14px;margin-bottom:14px;background:var(--paper);color:var(--ink);border-radius:4px;}
.pp-modal-title{font-family:'Iowan Old Style',Georgia,serif;font-size:20px;margin-bottom:18px;}

/* ---------- quick capture notifications (Skrzynka bell) ---------- */
.pp-quick-bell{position:relative;}
.pp-quick-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif;border:1.5px solid var(--paper);}
.pp-quick-scrim{z-index:var(--z-sheet);background:transparent;}
.pp-mobile .pp-quick-scrim{background:rgba(0,0,0,.35);}
.pp-quick-panel{position:fixed;z-index:calc(var(--z-sheet) + 1);background:var(--paper-raised);font-family:system-ui,sans-serif;display:flex;flex-direction:column;}
.pp-quick-panel.pop{top:60px;right:24px;width:320px;max-height:70vh;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.22);padding:14px;overflow-y:auto;}
.pp-quick-panel.sheet{left:0;right:0;bottom:0;max-height:75vh;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.3);padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px));overflow-y:auto;}
.pp-quick-grabber{width:34px;height:4px;border-radius:2px;background:var(--ink-faint);opacity:.5;margin:2px auto 12px;}
.pp-quick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pp-quick-head h3{font-family:'Iowan Old Style',Georgia,serif;font-size:16px;margin:0;font-weight:400;}
.pp-quick-count{font-size:11px;color:var(--ink-faint);}
.pp-quick-empty{font-size:12.5px;color:var(--ink-faint);padding:14px 2px;}
.pp-quick-row{display:flex;flex-direction:column;padding:9px 8px;border-radius:6px;background:var(--paper);margin-bottom:6px;}
.pp-quick-row.open{background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line);}
.pp-quick-row-main{display:flex;align-items:flex-start;gap:8px;}
.pp-quick-row-body{flex:1;min-width:0;cursor:pointer;}
.pp-quick-txt a{color:var(--sea);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.pp-quick-act{background:none;border:none;padding:3px 4px;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;border-radius:4px;}
.pp-quick-act:hover{color:var(--ink);background:var(--paper-raised);}
.pp-triage{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);}
.pp-triage-label{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;}
.pp-triage-row{display:flex;flex-wrap:wrap;gap:6px;}
.pp-triage-row + .pp-triage-row{margin-top:6px;}
.pp-triage-btn{display:inline-flex;align-items:center;gap:5px;font-family:system-ui,sans-serif;font-size:12px;font-weight:600;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer;min-height:32px;}
.pp-triage-btn:hover:not([disabled]){border-color:var(--sea);color:var(--sea);}
.pp-triage-btn[disabled]{opacity:.4;cursor:not-allowed;}
.pp-triage-btn.suggested{border-color:var(--sea);color:var(--sea);box-shadow:inset 0 0 0 1px var(--sea);}
.pp-triage-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0 0 8px;color:var(--ink-faint);
  font-family:system-ui,sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;}
.pp-triage-confirm .pp-triage-label{color:var(--sea);}
.pp-quick-txt{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;}
.pp-quick-meta{font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.pp-quick-arch-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 8px;color:var(--ink-soft);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:none;border:none;cursor:pointer;font-family:system-ui,sans-serif;}
.pp-quick-arch-list{padding:0 4px 4px;}
.pp-quick-arch-row{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:12px;color:var(--ink-soft);}
.pp-quick-arch-ok{color:var(--done);}
.pp-quick-arch-no{color:var(--accent-soft);}
.pp-quick-arch-row .from.dismissed{text-decoration:line-through;color:var(--ink-faint);}
.pp-quick-source{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--accent);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:6px 9px;margin:-4px 0 14px;}

/* ---------- toast container: jeden dom dla obu toastów, warstwa --z-toast.
   Najniższa warstwa pasma nakładek — każdy otwarty panel/menu jest nad nimi,
   a kontener sam nie łapie kliknięć (pointer-events łapią dopiero dzieci). */
.pp-toast-container{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  max-width:calc(100vw - 24px);}
.pp-toast-container>*{pointer-events:auto;}
.pp-toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:4px;font-family:system-ui,sans-serif;font-size:13px;max-width:100%;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
.pp-toast.show{opacity:1;transform:none;pointer-events:auto;}
.pp-toast-msg{flex:1 1 auto;}
.pp-toast-undo{background:none;border:none;color:var(--sea);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;flex:none;}
.pp-toast-x{background:none;border:none;color:var(--paper);opacity:.55;cursor:pointer;flex:none;
  width:44px;height:44px;margin:-13px -14px -13px 0;display:inline-flex;align-items:center;justify-content:center;}
.pp-toast-x i{font-size:13px;}
.pp-toast-x:hover{opacity:.9;}
@media (prefers-reduced-motion: reduce){.pp-toast{transition:opacity .01s linear;}}

/* ---------- diff toast: paper slip confirming what changed ---------- */
.pp-diff-toast{position:relative;transform:translateY(18px) rotate(-.8deg);
  width:300px;max-width:calc(100vw - 32px);background:var(--paper-raised);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.18);padding:13px 15px 11px;font-family:system-ui,sans-serif;
  opacity:0;transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1);}
.pp-diff-toast.show{opacity:1;transform:translateY(0) rotate(0);}
.pp-diff-toast .hd{display:flex;align-items:center;gap:7px;font-family:'Iowan Old Style',Georgia,serif;font-size:14px;color:var(--ink);margin-bottom:8px;}
.pp-diff-toast .dt-close{margin-left:auto;background:none;border:none;color:var(--ink-faint);cursor:pointer;
  width:44px;height:44px;margin-top:-13px;margin-right:-15px;margin-bottom:-13px;
  display:inline-flex;align-items:center;justify-content:center;}
.pp-diff-toast .dt-close i{font-size:13px;}
.pp-diff-toast .dt-close:hover{color:var(--ink);}
.pp-diff-toast .hd i{color:var(--sea);font-size:14px;flex:none;}
.pp-diff-toast .row{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0;}
.pp-diff-toast .row .f{color:var(--ink-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;min-width:52px;}
.pp-diff-toast .row .o{color:var(--ink-soft);text-decoration:line-through;opacity:.75;}
.pp-diff-toast .row i{color:var(--ink-faint);font-size:11px;}
.pp-diff-toast .row .n{color:var(--ink);font-weight:700;}
.pp-diff-toast .undo{margin-top:9px;border:none;background:none;padding:0;cursor:pointer;color:var(--sea);font-family:inherit;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px;}
@media (prefers-reduced-motion: reduce){.pp-diff-toast{transition:opacity .01s linear;}}

/* ---------- shared: sidebar box widget ---------- */
.pp-side-bar{margin-top:8px;height:5px;background:var(--line);border-radius:3px;overflow:hidden;}
/* S6 — the fill eases past its mark and settles, like yarn pulled taut. */
.pp-side-bar>div{height:100%;background:var(--violet);
  transition:width .6s cubic-bezier(.34,1.4,.64,1);}


/* ==================== DESKTOP layout (>860px) ==================== */
.pp-desktop{background:var(--paper);color:var(--ink);min-height:100vh;position:relative;}
/* S1 — rail width eases between 220px and 64px. Animating a layout property is
   deliberate here: it is a one-shot on an explicit user action, and there is no
   transform-based way to reflow the content column alongside the rail. */
.pp-desktop .pp-shell{display:grid;grid-template-columns:220px 1fr;max-width:1440px;margin:0 auto;
  transition:grid-template-columns .28s cubic-bezier(.22,1,.36,1);}
/* sticky: the nav stays put while the content column scrolls */
.pp-sidebar{padding:36px 20px;border-right:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;}
.pp-sidebar .pp-brand{font-size:20px;letter-spacing:.01em;}
.pp-sidebar .pp-brand small{display:block;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;color:var(--ink-faint);margin-top:4px;text-transform:uppercase;}
.pp-rail-toggle{margin-top:14px;border:1px solid var(--line);background:var(--paper-raised);width:26px;height:26px;cursor:pointer;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;align-self:flex-start;}
.pp-rail-toggle:hover{color:var(--ink);border-color:var(--ink-faint);}
.pp-shell.rail-collapsed .pp-rail-toggle{align-self:center;}
.pp-nav{margin-top:18px;display:flex;flex-direction:column;gap:2px;position:relative;}
.pp-nav a{font-family:system-ui,-apple-system,sans-serif;font-size:13px;text-decoration:none;padding:7px 0;color:var(--ink-soft);border-bottom:1px solid transparent;display:flex;align-items:center;gap:10px;position:relative;}
.pp-nav a.active{color:var(--ink);font-weight:600;}
.pp-nav a .ic{flex:none;}
/* S2 — the active marker is one bar that slides between items (same FLIP trick as
   .pp-chips .pill), so switching views reads as movement, not a border popping. */
.pp-navpill{position:absolute;left:-20px;top:0;width:2px;height:31px;background:var(--accent);
  transform:translateY(calc(var(--navidx,0) * 33px));
  transition:transform .3s cubic-bezier(.22,1,.36,1);}
.pp-shell.rail-collapsed .pp-navpill{left:-14px;}
/* S3 — hover underline is drawn left-to-right rather than faded in. */
.pp-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);clip-path:inset(0 100% 0 0);}
.pp-nav a:hover::after,.pp-nav a:focus-visible::after{clip-path:inset(0 0 0 0);
  transition:clip-path .22s cubic-bezier(.65,0,.35,1);}
/* S9 — nav item as drop target while a task row is being dragged. */
.pp-nav a{transition:transform .12s ease;}
.pp-nav a.dropping{border-bottom-color:var(--accent);transform:translateY(-1px);color:var(--ink);}
/* S7 — collapsed rail has no labels, so name each icon on hover. */
.pp-nav a .pp-navtip{position:absolute;left:44px;top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--paper-raised);border:1px solid var(--line);border-radius:4px;padding:4px 9px;
  font-size:11.5px;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;z-index:40;
  box-shadow:0 4px 12px rgba(0,0,0,.16);}
.pp-shell.rail-collapsed .pp-nav a:hover .pp-navtip,
.pp-shell.rail-collapsed .pp-nav a:focus-visible .pp-navtip{opacity:1;
  transform:translateY(-50%) translateX(0);
  transition:opacity .14s ease .12s,transform .14s ease .12s;}
.pp-shell:not(.rail-collapsed) .pp-nav a .pp-navtip{display:none;}
/* External app launcher (Linksss) — inherits the nav look, gains a top rule to
   read as a separate group, and a muted glyph to signal it leaves the app. */
.pp-nav .pp-applink{margin-top:6px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink-soft);}
.pp-nav .pp-applink:hover{color:var(--ink);}
.pp-nav .pp-applink .pp-applink-ext{margin-left:auto;font-size:12px;opacity:.6;}
.pp-shell.rail-collapsed .pp-nav .pp-applink .lbl,
.pp-shell.rail-collapsed .pp-nav .pp-applink .pp-applink-ext{display:none;}
/* Search-hit counters on nav items while a query is active. */
.pp-nav-badge{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--paper);font-family:system-ui,sans-serif;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none;}
.pp-nav-badge.zero{background:var(--ink-faint);}
.pp-bottomnav .pp-nav-badge{position:absolute;top:0;right:50%;transform:translateX(20px);margin:0;}
.pp-shell.rail-collapsed{grid-template-columns:64px 1fr;}
.pp-shell.rail-collapsed .pp-sidebar{padding-left:14px;padding-right:14px;align-items:center;}
.pp-shell.rail-collapsed .pp-brand small,
.pp-shell.rail-collapsed .pp-sidebar-user span,
.pp-shell.rail-collapsed .pp-side-box,
.pp-shell.rail-collapsed .pp-sidebar-foot span{display:none;}
/* S1 — nav labels fade and slide out with the rail instead of vanishing on
   display:none, which cannot be transitioned. */
.pp-nav a .lbl{min-width:0;overflow:hidden;
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1);}
.pp-shell.rail-collapsed .pp-nav a .lbl{opacity:0;width:0;transform:translateX(-6px);}
.pp-shell.rail-collapsed .pp-brand{font-size:0;}
.pp-shell.rail-collapsed .pp-brand::first-letter{font-size:20px;}
.pp-shell.rail-collapsed .pp-nav a{justify-content:flex-start;padding:8px 0;position:relative;}
/* Collapsed rail: no room inline — overlay the badge on the icon's corner. */
.pp-shell.rail-collapsed .pp-nav-badge{position:absolute;top:-2px;left:12px;margin:0;}
.pp-shell.rail-collapsed .pp-sidebar-user{justify-content:center;}
.pp-sidebar-user{margin-top:20px;display:flex;align-items:center;gap:8px;}
.pp-sidebar-user button{width:30px;height:30px;font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;border-radius:0;}
.pp-sidebar-user span{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);}
.pp-side-box{margin-top:20px;padding:12px;border:1px solid var(--line);}
.pp-side-box .hd{display:flex;align-items:center;gap:6px;font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.pp-side-box .val{font-size:22px;margin-top:4px;}
.pp-side-box .cap{font-family:system-ui,sans-serif;font-size:10px;color:var(--ink-faint);margin-top:4px;}
/* Reading progress (Kindle push). Inherits .pp-side-box for the frame, bar and
   collapsed-rail hiding; only the title line and the bar colour are its own —
   --sea keeps it from reading as a second meter. */
.pp-read-box .ttl{font-size:12.5px;line-height:1.3;margin-top:6px;color:var(--ink-soft);}
/* Count only appears from the second book on — "1" would be noise. */
.pp-read-box .hd .n{margin-left:auto;font-size:10px;color:var(--ink-faint);}
/* The other open books: one line each, separated from the featured one by a rule
   so the block reads as "this, and also these". */
.pp-read-rest{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;}
.pp-read-more{display:flex;align-items:center;gap:6px;font-family:system-ui,sans-serif;
  font-size:11px;color:var(--ink-soft);white-space:nowrap;cursor:pointer;}
.pp-read-more:hover .t{color:var(--ink);}
.pp-read-more .t{overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;}
.pp-read-more .p{flex:none;color:var(--ink);font-size:10px;}
.pp-read-box .val{font-size:20px;}
.pp-read-box .pp-side-bar>div{background:var(--sea);}
/* Mobile: no permanent element. Rendered only while a book is actually in
   progress, so it costs nothing on the days you are not reading. */
.pp-read-strip{display:flex;align-items:center;gap:7px;margin-top:8px;font-family:system-ui,sans-serif;
  font-size:11px;color:var(--ink-soft);white-space:nowrap;}
.pp-read-strip i.ph-bold{font-size:12px;color:var(--sea);flex:none;}
.pp-read-strip .t{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;}
.pp-read-strip .p{color:var(--ink);flex:none;}
.pp-read-strip .m{color:var(--ink-faint);font-size:10px;flex:none;margin-left:auto;}
.pp-read-strip-bar{flex:0 0 40px;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.pp-read-strip-bar>i{display:block;height:100%;background:var(--sea);}
.pp-sidebar-foot{margin-top:auto;padding-top:24px;font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint);display:flex;flex-direction:column;gap:8px;}
.pp-sidebar-foot>div{cursor:pointer;}
.pp-sidebar-foot span{letter-spacing:.08em;text-transform:uppercase;}
.pp-theme-btn{margin-top:12px;border:1px solid var(--line);background:var(--paper-raised);border-radius:50%;width:30px;height:30px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
/* Collapsed rail is only ~36px wide — two 30px buttons in a row overflow and clip
   the fullscreen icon. Stack them vertically when collapsed. */
.pp-shell.rail-collapsed .pp-sidebar-foot>div:last-child{flex-direction:column;align-items:center;}
.pp-main{padding:36px 40px 80px;}
.pp-eyebrow{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.pp-h1{font-size:34px;font-weight:500;margin:4px 0 2px;text-wrap:balance;}
.pp-sub{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink-soft);}
.pp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;}
.pp-topbar-actions{display:flex;align-items:center;gap:8px;}
.pp-theme-btn.tb{margin-top:0;}
/* Capture flight: the typed line folds into a paper plane and flies to Notatki.
   Lives on <body> because the save re-renders #app while the plane is airborne. */
/* Lot karty do archiwum: nad panelami, pod menu (--z-menu). */
.pp-flyer{position:fixed;z-index:260;pointer-events:none;display:flex;align-items:center;justify-content:center;will-change:transform,opacity;}
.pp-flyer-card{max-width:230px;padding:7px 11px;border:1px solid var(--line);border-radius:4px;background:var(--paper-raised);box-shadow:0 8px 18px rgba(0,0,0,.18);font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-flyer-plane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:0;}
.pp-flyer-plane svg{width:26px;height:26px;}
.pp-trail{position:fixed;z-index:259;pointer-events:none;width:5px;height:5px;border-radius:50%;background:var(--accent-soft);opacity:0;}
.pp-badge-pop{animation:ppbadgepop 500ms cubic-bezier(.34,1.36,.64,1);}
@keyframes ppbadgepop{0%{opacity:0;transform:translate(8px,-8px) scale(.2);}60%{opacity:1;}100%{opacity:1;transform:none;}}
.pp-land{animation:ppland 420ms cubic-bezier(.22,1,.36,1);}
@keyframes ppland{0%{transform:none;}35%{transform:translateY(-3px) scale(1.05);}100%{transform:none;}}
@media (prefers-reduced-motion: reduce){.pp-badge-pop,.pp-land{animation:none;}}

.pp-omnirow{display:flex;align-items:center;gap:8px;margin:12px 0 4px;}
/* Frozen head — the capture field and the filter echo stay reachable at any
   scroll depth. Sticky, not fixed: it keeps the grid column width for free. */
.pp-mainhead{position:sticky;top:0;z-index:20;background:var(--paper);
  padding:36px 40px 8px;margin:-36px -40px 0;border-bottom:1px solid transparent;}
.pp-desktop.scrolled .pp-mainhead{border-bottom-color:var(--line);}
/* The head paints paper over the body, which would blank the dot grid under it —
   same gradient, same fixed attachment, so the dots line up across the seam. */
body.pp-dotgrid .pp-mainhead{
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 0);
  background-size:24px 24px;background-attachment:fixed;}

/* Nastrój + filtr + Zara w jednym wierszu: wszystko, co zmienia widoczną listę. */
.pp-actionrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 12px;}
.pp-actionrow .pp-moodbar,.pp-actionrow .pp-zara-line{margin:0;}
.pp-actionrow .pp-zara-line{flex:1;min-width:200px;}
.pp-actionrow .pp-filter-btn{flex:none;}
.pp-omni{flex:1;min-width:0;display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;background:var(--paper-raised);padding-right:6px;transition:border-color .2s ease;}
.pp-omni:focus-within,.pp-omni.searching{border-color:var(--ink-soft);}
/* v2 — the three modes are named on screen instead of hidden behind one icon:
   the field says what it does before it is touched. */
.pp-omni.feedback{border-color:var(--sea);}
.pp-omni-segs{flex:none;display:flex;align-items:center;gap:2px;padding:0 4px 0 3px;border-right:1px solid var(--line);}
.pp-omni-seg{height:28px;padding:0 9px;display:flex;align-items:center;gap:5px;border:none;border-radius:3px;
  background:transparent;color:var(--ink-soft);font-family:system-ui,sans-serif;font-size:11.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;transition:background .15s ease,color .15s ease;}
.pp-omni-seg i{font-size:13px;}
.pp-omni-seg:hover{color:var(--ink);}
.pp-omni-seg.on{background:var(--ink);color:var(--paper);}
/* Narrow columns keep the icons and drop the words — three labels would push
   the field itself down to a stub. */
@media (max-width:900px){.pp-omni-seg span{display:none;}.pp-omni-seg{padding:0 8px;}}
.pp-omni input{flex:1;min-width:0;height:34px;border:none;background:transparent;outline:none;font-family:system-ui,sans-serif;font-size:max(16px,13px);color:var(--ink);padding:0 10px;}
.pp-omni-add{background:var(--ink);color:var(--paper);border-color:var(--ink);}
/* Phone: same bar, two segments, full width under the top row. Only the active
   segment keeps its word — a title tooltip never appears on touch, so two bare
   icons would leave the mode unnamed, and two labels would squeeze the field. */
.pp-omni-m{margin-top:10px;padding-right:0;}
.pp-omni-m .pp-omni-seg span{display:none;}
.pp-omni-m .pp-omni-seg.on span{display:inline;}
@media (prefers-reduced-motion: reduce){.pp-omni,.pp-omni-seg{transition:none;}}
/* A feedback capture reads differently from a thought, so it is labelled where
   it lands — in the Skrzynka list, next to the notes it sits between. */
.pp-note-fb{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:1px 6px;border-radius:3px;
  background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea);font-family:system-ui,sans-serif;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px;}
.pp-note-fb i{font-size:11px;}
.pp-toprow{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
/* D12 — tiles of unequal height stacked ragged with no row gap. */
.pp-project-grid{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px 32px;}
.pp-notes-grid{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;align-items:start;}
.pp-detail-pane{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--paper-raised);border-left:1px solid var(--line);z-index:var(--z-sheet);padding:28px;font-family:system-ui,sans-serif;overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.08);}
/* Note edit mode on desktop: editor + live preview side by side. */
.pp-detail-pane.wide{width:820px;}
.pp-note-view{cursor:text;border-radius:4px;}
.pp-note-view:hover{background:var(--paper);}
.pp-desktop-modal{background:var(--paper-raised);width:520px;max-width:92vw;max-height:88vh;overflow-y:auto;padding:26px;font-family:system-ui,sans-serif;}
.pp-desktop-modal.narrow{width:460px;}
.pp-footer{margin-top:34px;font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint);display:flex;gap:18px;flex-wrap:wrap;}
.pp-desktop-only{display:block;}
.pp-mobile-only{display:none;}

/* ==================== MOBILE layout (<=860px) ==================== */
/* Serif body matching desktop ("two surfaces, one vocabulary") — mono stays
   only on eyebrows/labels where it is deliberate garnish, not body copy. */
.pp-mobile{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;width:100%;max-width:430px;margin:0 auto;height:100vh;height:100dvh;position:relative;display:flex;flex-direction:column;background:var(--paper);}
/* Fullscreen (v4 "Pełny ekran"): drop the letterboxing width cap so it fills the window. */
.pp-mobile[data-full="1"]{max-width:none;}
.pp-desktop[data-full="1"] .pp-shell{max-width:none;}
/* v4 mockup ships cornerStyle default "square" as a blanket reset — same technique here.
   Desktop squares too (per user), incl. avatars/dots that Desktop v2 left circular.
   #ppToast and .cw-* are appended to <body>, outside both roots, so listed explicitly. */
.pp-desktop *,.pp-mobile *,#ppToast,#ppToastContainer,#ppToastContainer *,.cw-icon,.cw-panel,.cw-panel *{border-radius:0 !important;}
.pp-mobile .pp-desktop-only{display:none;}
.pp-mobile .pp-mobile-only{display:block;}
.pp-mtop{padding:18px 18px 8px;}
/* Zrzuć myśl siedzi w przyklejonym pasku, nie w treści — pod ręką na każdym
   ekranie i na każdej wysokości przewinięcia. */
.pp-mtop-row{display:flex;align-items:flex-start;justify-content:space-between;}
.pp-mtop-eyebrow{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.pp-mtop-actions{display:flex;align-items:center;gap:8px;}
.pp-icon-btn{border:none;background:var(--paper-raised);border-radius:50%;width:30px;height:30px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;}
.pp-avatar-btn{width:30px;height:30px;border-radius:0;font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;}
.pp-mobile-title{font-family:'Iowan Old Style',Georgia,serif;font-size:20px;font-weight:600;}
.pp-content-scroll{flex:1;min-height:0;padding:6px 16px calc(110px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pp-mlist-header{margin-top:14px;display:flex;align-items:baseline;gap:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.pp-fab-stack{position:fixed;right:calc(max(0px,50% - 215px) + 18px);bottom:calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;z-index:20;}
.pp-fab{position:relative;color:#fff;border:none;width:46px;height:46px;border-radius:50%;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease;background:var(--navbg);}
.pp-fab.recording{animation:none;}
.pp-fab-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:pulsering 1.4s ease-out infinite;}
.pp-bottomnav{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:15;}
.pp-bottomnav-inner{max-width:390px;width:calc(100% - 28px);background:var(--navbg);border-radius:100px;display:flex;padding:8px 10px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.3);}
.pp-bottomnav-pill{position:absolute;top:8px;bottom:8px;left:10px;border-radius:100px;background:rgba(255,255,255,.16);transition:transform .35s cubic-bezier(.22,1,.36,1);}
.pp-bottomnav button{flex:1;border:none;background:none;cursor:pointer;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;padding:6px 4px;position:relative;transition:color .25s ease,transform .25s ease;}
.pp-bottomnav button.active{color:#fff;transform:scale(1.08);}
.pp-sheet{position:fixed;left:0;right:0;bottom:0;max-width:430px;margin:0 auto;background:var(--paper-raised);z-index:var(--z-sheet);padding:20px;padding-top:26px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheetup .5s cubic-bezier(.34,1.4,.64,1);font-family:system-ui,sans-serif;}
.pp-sheet-handle{width:36px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 14px;}
/* Search field docks to the search FAB: same row, same 46px height, growing
   leftward out of the icon so button + field read as one control. */
.pp-search-sheet{position:fixed;left:auto;right:calc(max(0px,50% - 215px) + 18px + 56px);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:16;}
.pp-search-sheet-inner{width:min(300px,calc(100vw - 118px));height:46px;background:var(--paper-raised);border:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 12px;box-shadow:0 6px 16px rgba(0,0,0,.3);transform-origin:right center;animation:searchin .28s cubic-bezier(.22,1,.36,1);}
@keyframes searchin{0%{transform:scaleX(.25);opacity:0;}100%{transform:none;opacity:1;}}
.pp-fab.search-active{background:var(--accent);}
@media (prefers-reduced-motion: reduce){.pp-search-sheet-inner{animation:none;}}
.pp-search-sheet-inner input{flex:1;min-width:0;border:none;background:transparent;font-family:system-ui,sans-serif;font-size:13px;color:var(--ink);outline:none;}

/* ==================== enhancement pass (S/D/M ids from the design review) ==================== */

/* S8 — cold boot only: rail parts fade up 30ms apart. paper.js adds .pp-booting
   for one frame on first paint, never on re-render. */
@keyframes ppbootin{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.pp-sidebar.pp-booting>*{animation:ppbootin .34s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 30ms);}

/* S10 — the incoming theme wipes out from the toggle as a circle. The overlay is
   painted in the *new* background colour, so the old one is covered as it grows. */
.pp-theme-reveal{position:fixed;inset:0;z-index:var(--z-top);pointer-events:none;
  animation:ppthemewipe .42s ease-out forwards;}
@keyframes ppthemewipe{from{clip-path:circle(0 at var(--rx,50%) var(--ry,50%));}
  to{clip-path:circle(150% at var(--rx,50%) var(--ry,50%));}}

/* D2 — groups open and close by height instead of display:none. */
.pp-group-body{border-top:1px solid var(--line);display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1);}
.pp-group-body.collapsed{grid-template-rows:0fr;}
.pp-group-body>div{overflow:hidden;}

/* D5 — the pane is created on open, so an entry animation is enough. */
@keyframes ppslidein{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
.pp-detail-pane{animation:ppslidein .22s cubic-bezier(.22,1,.36,1);}

/* D6 — a hairline shrinks over the undo window so the timeout explains itself. */
.pp-diff-toast .pp-count{height:1.5px;background:var(--line);margin-top:9px;overflow:hidden;}
.pp-diff-toast .pp-count>i{display:block;height:100%;background:var(--accent);width:100%;}
.pp-diff-toast.show .pp-count>i{animation:ppcountdown var(--undo-ms,6000ms) linear forwards;}
@keyframes ppcountdown{to{width:0;}}

/* D7 — a save under 300ms never shows a spinner, it just lands. */
.pp-btn-save{position:relative;}
.pp-btn-save.done::after{content:"";position:absolute;inset:0;border:2px solid var(--done);
  border-radius:4px;pointer-events:none;animation:burst .5s ease-out;}

/* D8 — the day label pins under the topbar while its own group scrolls past. */
.pp-desktop .pp-group-label{position:sticky;top:var(--headh,0px);z-index:5;background:var(--paper);
  padding-top:8px;padding-bottom:6px;margin-top:20px;}

/* D9 — the heading condenses on scroll, giving the list back ~80px. */
.pp-h1{transition:font-size .2s ease,margin .2s ease;}
.pp-desktop.scrolled .pp-h1{font-size:20px;margin-top:0;}
.pp-desktop.scrolled .pp-eyebrow{opacity:.7;}

/* D10 — the "/" shortcut already works; say so in the field. */
.pp-omni-kbd{flex:none;margin-right:8px;font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:10px;color:var(--ink-faint);border:1px solid var(--line);border-radius:3px;padding:1px 5px;}
@media (hover:none){.pp-omni-kbd{display:none;}}

/* D13 — hover actions reserve their width so titles and dates stop reflowing. */
@media (hover:hover){
  .pp-row .pp-rowacts{display:flex;align-items:center;justify-content:flex-end;
    gap:2px;width:56px;flex:none;}
}

/* D15 — an empty state that offers the next action instead of only naming the void. */
.pp-empty{margin-top:64px;text-align:center;}
.pp-empty .slip{width:132px;height:80px;margin:0 auto 16px;border:1px solid var(--line);
  background:var(--paper-raised);box-shadow:0 6px 14px rgba(0,0,0,.10);transform:rotate(-2deg);
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:24px;}
/* The illustration carries its own paper-coloured background, so it needs no
   border or shadow. No image-rendering:pixelated here, unlike the sprites: this
   is a 512px drawing shown at 180px, and nearest-neighbour on a downscale
   throws away two pixels in three and aliases the whole thing. */
.pp-empty .art{display:block;margin:0 auto 12px;
  border-radius:8px;max-width:60vw;height:auto;}
.pp-empty .t{font-family:'Iowan Old Style',Georgia,serif;font-size:22px;color:var(--ink);}
.pp-empty .s{font-family:system-ui,sans-serif;font-size:12.5px;margin-top:8px;color:var(--ink-faint);}
.pp-empty .pp-btn-primary{margin-top:16px;}

/* D17 — descriptions stop at a readable measure instead of running the column. */
.pp-desktop .pp-desc{max-width:68ch;}

/* D18 — one type scale. Adopted by the primary text roles; one-off garnish
   (badges, chips, counters) keeps its own sizes on purpose. */
:root{--t-1:11px;--t-2:12.5px;--t-3:13px;--t-4:16px;--t-5:34px;}

/* M1 — a held tab confirms the press; touch has no hover to fall back on. */
.pp-bottomnav button:active{transform:scale(.94);}

/* M2 — 500ms is long under a thumb; and the handle can now throw it away. */
.pp-sheet{animation-duration:.32s;}
.pp-sheet.dragging{animation:none;transition:none;}
.pp-sheet.settling{transition:transform .22s cubic-bezier(.22,1,.36,1);}
.pp-sheet-handle{touch-action:none;cursor:grab;padding:6px 0;height:auto;background:none;}
.pp-sheet-handle::before{content:"";display:block;width:36px;height:4px;border-radius:2px;
  background:var(--line);margin:0 auto;}

/* M5 — pull past the top to refresh; the paper stretches, then releases. */
.pp-ptr{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;display:flex;
  align-items:flex-end;justify-content:center;padding-bottom:5px;pointer-events:none;
  font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint);}
.pp-ptr.settling{transition:height .3s cubic-bezier(.22,1,.36,1);}
.pp-ptr i{transition:transform .2s ease;}
.pp-ptr.armed i{transform:rotate(180deg);color:var(--accent);}

/* M9 — bottom padding derived from the real nav height, not a hardcoded 110px. */
.pp-mobile .pp-content-scroll{padding-bottom:calc(var(--navspace,96px) + env(safe-area-inset-bottom,0px));}

/* M10 — reading reclaims the thumb strip; the FABs come back on scroll up. */
.pp-fab-stack{transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;}
.pp-mobile.fabs-hidden .pp-fab-stack{transform:translateY(96px);opacity:0;pointer-events:none;}

/* M11 — long-press surfaces the swipe actions for anyone who never found them. */
.pp-lp-sheet{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  z-index:calc(var(--z-sheet) + 1);background:var(--paper-raised);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.25);animation:ppslideup .2s cubic-bezier(.22,1,.36,1);}
@keyframes ppslideup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pp-lp-sheet button{display:flex;width:100%;align-items:center;gap:10px;border:none;
  border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;
  font-family:system-ui,sans-serif;font-size:13.5px;padding:13px 15px;cursor:pointer;}
.pp-lp-sheet button:last-child{border-bottom:none;}
.pp-lp-scrim{z-index:var(--z-sheet);}
.pp-lp-sheet button i{color:var(--sea);font-size:16px;flex:none;}

/* M11b — na mobile menu czasu przestaje wisieć przy wierszu: siada jak pp-lp-sheet
   nad paskiem nawigacji i nad toastem (--z-toast), bo tam nic go nie zasłania.
   Absolutne pozycjonowanie przy wierszu chowało dolne pozycje pod nav i toastem. */
.pp-mobile .pp-time-menu{position:fixed;top:auto;left:50%;right:auto;
  bottom:calc(var(--navspace,96px) + env(safe-area-inset-bottom,0px));
  width:min(300px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;z-index:var(--z-menu);
  transform:translateX(-50%) translateY(6px);}
.pp-mobile .pp-time-menu.open{transform:translateX(-50%) translateY(0);}
/* tylko scrim menu czasu — .pp-menu-scrim noszą też inne menu (avatar),
   podniesienie wszystkich zasłoniłoby je własną przesłoną. */
.pp-mobile .pp-time-scrim{z-index:calc(var(--z-menu) - 1);}

/* M12 — the group name stays put while its rows scroll under it. */
.pp-mobile .pp-group-label,.pp-mobile .pp-mlist-header{position:sticky;top:0;z-index:4;
  background:var(--paper);padding-top:6px;padding-bottom:4px;}

/* M13 — the title shrinks on scroll, freeing the fold. */
.pp-mobile-title{transition:font-size .2s ease,opacity .2s ease;}
.pp-mobile.scrolled .pp-mobile-title{font-size:15px;opacity:.75;}

/* M16 — WCAG 2.2 target size: pad the trailing icons out to 44px without
   changing how they look. */
@media (hover:none){
  .pp-mobile .pp-arch-btn,.pp-mobile .pp-edit-btn,.pp-mobile .pp-note-edit-btn{
    position:relative;min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center;}
}

/* M17 — the cap letterboxed wider phones instead of filling them. */
.pp-mobile{max-width:min(430px,100%);}

/* M18 — desc plus meta made every row three lines; tap opens the full text. */
.pp-mobile .pp-row:not(.expanded) .pp-desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* M20 — badges anchored to the icon rather than hung off right:50%. */
.pp-bottomnav button{position:relative;}
.pp-bottomnav .pp-icwrap{position:relative;display:inline-flex;}
.pp-bottomnav .pp-icwrap .pp-nav-badge{position:absolute;top:-6px;right:-9px;left:auto;
  transform:none;margin:0;}
.pp-bottomnav .pp-nav-badge.zero{opacity:.45;}

/* Global reduced-motion: collapse every animation/transition (tear-off, burst,
   pulsering, springs, accordions) to effectively instant. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

@media (max-width:860px){
  /* Mobile shell owns its scroller (.pp-content-scroll) — lock the page so iOS
     doesn't rubber-band the whole document behind it. Desktop must NOT get this. */
  html,body{overflow:hidden;}
  .pp-desktop-only{display:none !important;}
  .pp-mobile-only{display:block !important;}
  /* iOS/Android auto-zoom on focus fires for any input <16px. Class rules
     (.pp-modal-input, .pp-inline-input, search, .pp-ptask-edit…) drop below 16,
     so force the floor on every focusable field on mobile. */
  input,select,textarea{font-size:16px !important;}
}

/* ---- filter panel + active-filter bar (faza 1) ----
   The bar is never collapsed into the funnel icon on purpose: a hidden filter is
   indistinguishable from lost tasks, which is exactly the panic we are avoiding. */
.pp-filter-btn{position:relative;}
.pp-filter-btn.has-filters{color:var(--accent);}
.pp-filter-panel .pp-fgroup{margin-bottom:12px;}
.pp-filter-panel .pp-flabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;}
.pp-fchips{display:flex;flex-wrap:wrap;gap:6px;}
.pp-fchip{font-family:system-ui,sans-serif;font-size:12px;padding:5px 11px;border:1px solid var(--line);
  border-radius:20px;background:var(--paper);color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
.pp-fchip:hover{border-color:var(--sea);color:var(--ink);}
.pp-fchip.on{background:var(--sea);border-color:var(--sea);color:#fff;}
.pp-fchip i{font-size:10px;opacity:.85;}
.pp-fclear{font-family:system-ui,sans-serif;font-size:11.5px;background:none;border:0;
  color:var(--accent);cursor:pointer;padding:4px 6px;}
.pp-fclear:hover{text-decoration:underline;}
.pp-fclear.wide{width:100%;border:1px solid var(--line);border-radius:6px;padding:8px;margin-top:4px;}
.pp-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 24px 10px;border-bottom:1px solid var(--line);}
.pp-mobile .pp-filterbar{padding:6px 14px 8px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pp-mobile .pp-filterbar::-webkit-scrollbar{display:none;}
.pp-mobile .pp-filterbar .pp-fchip,.pp-mobile .pp-filterbar .pp-fclear{flex:0 0 auto;}
/* Szybkie przełączniki kategorii w pasku Dziś — pigułki jak nastroje. */
.pp-quickcats{display:flex;gap:8px;}
.pp-mobile .pp-quickcats{flex-wrap:nowrap;}

/* The karteczki widget floats at z-index 200. A panel that dims the page with a
   scrim has to sit above it — this covers the quick panel too, which had the same
   latent overlap. */
.pp-quick-panel{z-index:calc(var(--z-sheet) + 1);}
.pp-quick-scrim{z-index:var(--z-sheet);}

/* ---- Zara proposal card + collapsed overdue pile (faza 2) ---- */
.pp-zara-card{display:flex;gap:12px;align-items:flex-start;background:var(--paper-raised);
  border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 14px;
  font-family:system-ui,sans-serif;}
.zc-cat{flex:0 0 auto;image-rendering:pixelated;}
.zc-body{min-width:0;flex:1;}
.zc-kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:6px;display:flex;gap:8px;align-items:center;}
.zc-count{color:var(--accent);letter-spacing:0;text-transform:none;}
.zc-title{font-family:'Iowan Old Style',Georgia,serif;font-size:16px;margin-bottom:3px;}
.zc-meta{font-size:11.5px;color:var(--ink-soft);margin-bottom:10px;}
.zc-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin:0 0 10px;max-width:220px;}
.zc-bar>i{display:block;height:100%;background:var(--accent);}
.zc-acts{display:flex;gap:7px;flex-wrap:wrap;}
.zc-acts .pp-fchip.danger{color:var(--accent);border-color:var(--accent-soft);}
.zc-acts .pp-fchip.danger:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
/* Quieter than the three decisions above it — muting is an exit, not an answer. */
.zc-mute{background:none;border:0;font-family:system-ui,sans-serif;font-size:11.5px;
  color:var(--ink-faint);cursor:pointer;padding:8px 0 0;min-height:32px;}
.zc-mute:hover{color:var(--ink-soft);text-decoration:underline;}
.pp-pile{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.pp-pile-head{font-family:'Iowan Old Style',Georgia,serif;font-size:15px;}
.pp-pile-sub{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px;}
.pp-pile-more{margin-top:8px;}

/* ---- gap-filling wizard (faza 3) ----
   Deliberately no "12 of 340" counter: the size of the backlog is the thing that
   makes people close the dialog. Only answered-so-far is shown. */
/* one line for all three rounds (przegląd · drobiazgi · zaległe); wraps on narrow
   phones instead of shrinking the chips below tap size */
.pp-zara-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  background:var(--paper-raised);border:1px dashed var(--line);border-radius:8px;
  padding:8px 12px;margin:0 0 14px;font-family:system-ui,sans-serif;}
.pp-zara-line img{image-rendering:pixelated;flex:0 0 auto;}
.pp-zara-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;
  background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;cursor:pointer;font-family:system-ui,sans-serif;
  font-size:12.5px;color:var(--ink-soft);}
.pp-zara-chip:hover{border-color:var(--sea);color:var(--ink);}
.pp-zara-chip i{font-size:14px;color:var(--sea);}
.pp-zara-chip b{color:var(--ink);font-weight:600;}
.pp-wiz-scrim{z-index:calc(var(--z-sheet) + 2);background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
.pp-wizard{position:fixed;z-index:calc(var(--z-sheet) + 3);background:var(--paper-raised);
  font-family:system-ui,sans-serif;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.28);padding:24px;
  top:50%;left:50%;transform:translate(-50%,-50%);width:440px;max-width:92vw;max-height:88vh;overflow-y:auto;}
.pp-wiz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.pp-wiz-kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.pp-wiz-progress{font-size:11px;color:var(--sea);}
.pp-wiz-task{font-family:'Iowan Old Style',Georgia,serif;font-size:19px;line-height:1.3;}
.pp-wiz-taskmeta{font-size:11px;color:var(--ink-faint);margin:4px 0 20px;}
.pp-wiz-q{font-family:'Iowan Old Style',Georgia,serif;font-size:17px;margin-bottom:4px;}
.pp-wiz-hint{font-size:12px;color:var(--ink-soft);margin-bottom:16px;}
.pp-wiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.pp-wiz-opt{font-family:inherit;font-size:15px;padding:13px 16px;text-align:left;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
  cursor:pointer;transition:background .14s ease,border-color .14s ease;}
.pp-wiz-opt:hover:not(:disabled){border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--paper));}
.pp-wiz-opt:disabled{opacity:.5;cursor:progress;}
.pp-wiz-foot{display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:14px;}
.pp-wiz-skip{background:none;border:0;font-family:inherit;font-size:12px;color:var(--ink-soft);
  cursor:pointer;padding:4px;}
.pp-wiz-skip:hover{color:var(--accent);}
.pp-wiz-done{text-align:center;}
.pp-wiz-done img{image-rendering:pixelated;margin-bottom:10px;}
.pp-wiz-done h3{font-family:'Iowan Old Style',Georgia,serif;font-weight:400;font-size:19px;margin:0 0 6px;}
.pp-wiz-done p{font-size:13px;color:var(--ink-soft);margin:0 0 18px;}
@media (max-width:860px){
  .pp-wizard{top:auto;bottom:0;left:0;transform:none;width:100%;max-width:none;
    border-radius:12px 12px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:82vh;}
}

/* ---- przegląd (review sweep) ----
   Reuses the wizard sheet (.pp-wizard): centred card on desktop, bottom sheet on
   mobile. Four primary decisions stay under the thumb; everything else lives one
   tap deep so the card never becomes a wall of buttons. */
.pp-review{width:460px;}
.pp-rev-desc{font-size:13px;color:var(--ink-soft);line-height:1.45;margin:-12px 0 18px;
  max-height:120px;overflow-y:auto;}
/* The task's four facts as controls, each in the colour it already has elsewhere
   in the app: overdue red, person's own colour, project green, priority accent.
   An unset field is dashed and grey — missing reads differently from set. */
.pp-rev-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 16px;}
.pp-rev-chip{display:inline-flex;align-items:center;gap:6px;font-family:system-ui,sans-serif;
  font-size:12.5px;line-height:1;padding:9px 11px;min-height:36px;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);
  transition:background .14s ease,border-color .14s ease;}
.pp-rev-chip i{font-size:13px;color:var(--ink-faint);}
.pp-rev-chip:hover{border-color:var(--ink-soft);}
.pp-rev-chip.empty{border-style:dashed;color:var(--ink-faint);}
.pp-rev-chip.empty i{color:var(--ink-faint);}
.pp-rev-chip.overdue{border-color:var(--accent-soft);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--paper));}
.pp-rev-chip.overdue i{color:var(--accent);}
.pp-rev-chip.leo{border-color:var(--leo);color:var(--leo);background:color-mix(in srgb,var(--leo) 9%,var(--paper));}
.pp-rev-chip.leo i{color:var(--leo);}
.pp-rev-chip.konrad{border-color:var(--konrad);color:var(--konrad);background:color-mix(in srgb,var(--konrad) 9%,var(--paper));}
.pp-rev-chip.konrad i{color:var(--konrad);}
.pp-rev-chip.both{border-color:var(--sea);color:var(--sea);background:color-mix(in srgb,var(--sea) 9%,var(--paper));}
.pp-rev-chip.both i{color:var(--sea);}
.pp-rev-chip.project{border-color:var(--cat-green);color:var(--cat-green);
  background:color-mix(in srgb,var(--cat-green) 9%,var(--paper));}
.pp-rev-chip.project i{color:var(--cat-green);}
.pp-rev-chip.repeat{border-color:var(--cat-blue);color:var(--cat-blue);
  background:color-mix(in srgb,var(--cat-blue) 9%,var(--paper));}
.pp-rev-chip.repeat i{color:var(--cat-blue);}
.pp-rev-chip.prio{border-color:var(--accent);color:var(--accent);font-weight:600;
  background:color-mix(in srgb,var(--accent) 10%,var(--paper));}
.pp-rev-chip.prio i{color:var(--accent);}
.pp-rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.pp-rev-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;padding:16px 12px;min-height:56px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
  cursor:pointer;transition:background .14s ease,border-color .14s ease;}
.pp-rev-btn:hover{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--paper));}
.pp-rev-btn.wide{grid-column:1 / -1;}
.pp-rev-btn.primary{border-color:var(--sea);color:var(--sea);font-weight:600;}
.pp-rev-btn.primary:hover{background:color-mix(in srgb,var(--sea) 14%,var(--paper));}
.pp-rev-moretoggle{width:100%;background:none;border:0;font-family:inherit;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer;padding:6px 0 14px;text-align:left;}
.pp-rev-moretoggle:hover{color:var(--sea);}
.pp-rev-more{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--paper);}
.pp-rev-more-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-family:inherit;font-size:14px;padding:11px 10px;min-height:44px;
  background:none;border:0;border-radius:6px;color:var(--ink);cursor:pointer;}
.pp-rev-more-btn:hover{background:color-mix(in srgb,var(--sea) 10%,var(--paper));}
.pp-rev-more-btn i{color:var(--ink-faint);}
.pp-rev-pick{margin:0 0 14px;padding:12px;border:1px solid var(--sea);border-radius:8px;
  background:var(--paper);}
/* 16px floor: anything smaller makes iOS zoom the whole sheet on focus. */
.pp-rev-pick input,.pp-rev-pick select{font-size:max(16px,1rem);width:100%;}
.pp-rev-pick-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px;}
.pp-rev-save{font-family:inherit;font-size:13px;font-weight:600;padding:8px 16px;min-height:36px;
  border:1px solid var(--sea);border-radius:6px;background:var(--sea);color:var(--paper);cursor:pointer;}
.pp-rev-endbtns{display:flex;flex-direction:column;gap:8px;align-items:center;}
.pp-rev-primary{font-family:inherit;font-size:15px;font-weight:600;padding:13px 20px;min-height:48px;
  border:1px solid var(--sea);border-radius:8px;background:var(--sea);color:var(--paper);cursor:pointer;}
@media (max-width:860px){
  .pp-review{width:100%;}
  .pp-rev-btn{font-size:16px;min-height:62px;}
}

/* ---- resume memo (#10) ---- */
.pp-memo{display:flex;gap:12px;align-items:flex-start;background:var(--paper-raised);
  border:1px solid var(--sea);border-radius:8px;padding:12px 14px;margin:0 0 14px;
  font-family:system-ui,sans-serif;}
.pp-memo img{image-rendering:pixelated;flex:0 0 auto;}
.pp-memo-body{flex:1;min-width:0;}
.pp-memo-txt{font-size:13px;color:var(--ink);margin-bottom:9px;}
.pp-memo-proj{color:var(--ink-faint);font-size:11px;}
.pp-memo-acts{display:flex;gap:7px;flex-wrap:wrap;}

/* ---- focus session, first step, clusters (faza 5) ---- */
.pp-focus{display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--sea) 8%,var(--paper-raised));
  border:1px solid var(--sea);border-radius:8px;padding:11px 14px;margin:0 0 14px;font-family:system-ui,sans-serif;}
.pp-focus img{image-rendering:pixelated;flex:0 0 auto;}
.pp-focus-body{flex:1;min-width:0;}
.pp-focus-kicker{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);}
.pp-focus-task{font-family:"Iowan Old Style",Georgia,serif;font-size:15px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-step{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;font-family:system-ui,sans-serif;}
.pp-step-out{flex:1 0 100%;font-size:14px;color:var(--sea);margin-top:4px;line-height:1.45;}
.pp-step-out.muted{color:var(--ink-faint);}
.pp-step-acts{flex:1 0 100%;display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.pp-cluster{background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin:0 0 14px;font-family:system-ui,sans-serif;}
.pp-cluster-head{font-family:"Iowan Old Style",Georgia,serif;font-size:16px;margin-bottom:8px;}
.pp-cluster-notes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.pp-cluster-notes span{font-size:11.5px;padding:3px 9px;border-radius:3px;
  background:color-mix(in srgb,var(--cat-orange) 15%,var(--paper));
  border:1px solid color-mix(in srgb,var(--cat-orange) 30%,transparent);}
.pp-cluster-acts{display:flex;gap:8px;flex-wrap:wrap;}

/* The row that owns the open menu (or the open detail pane). A menu floating over
   a long list is orphaned unless you can see what it belongs to. */
.pp-row.row-active{background:color-mix(in srgb,var(--sea) 9%,transparent);
  box-shadow:inset 3px 0 0 var(--sea);}
.pp-row.row-active .pp-title{color:var(--ink);}
/* An .upcoming row is dimmed via opacity, which also dims its own menu and makes the
   row the containing block for the fixed scrim (blur lands under the menu). Undim while
   its menu/detail is open — :hover/:focus-within never fire on touch. */
.pp-row.upcoming.row-active{opacity:1;}

/* Which task does this menu belong to? The scrim dims the row it came from, so the
   menu says the name itself. */
.pp-menu-title{font-family:system-ui,sans-serif;font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-faint);padding:9px 12px 8px;border-bottom:1px solid var(--line);
  background:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── priority bang, markdown notes, subtasks, listy ───────────────────────── */
/* A "!" typed at the start of a title is stored as a flag and shown as this. */
.pp-prio{color:var(--accent);font-size:11px;margin-right:4px;vertical-align:baseline;}

/* Note bodies render inline markdown; a blank line stays a paragraph break. */
.pp-md-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--line);border-radius:3px;padding:1px 4px;}
.pp-note-gap{height:8px;}
.pp-note-bullet{position:relative;padding-left:14px;}
.pp-note-bullet::before{content:"•";position:absolute;left:2px;color:var(--ink-faint);}

/* Subtasks: counter chip in the row meta, checklist unfolded beneath the row. */
.pp-subchip{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  border:1px solid var(--line);border-radius:100px;padding:1px 7px;color:var(--ink-soft);}
.pp-subchip.all{color:var(--accent);border-color:var(--accent-soft);}
.pp-subtasks{margin:0 0 10px 52px;padding:6px 12px 8px;border-left:2px solid var(--line);}
.pp-subtasks.in-modal{margin:0 0 16px;border-left:none;border:1px solid var(--line);border-radius:6px;}

/* Listy reuse the project tile; only the nesting and the action row are new. */
.pp-list-kids{margin-left:26px;padding-left:12px;border-left:1px dashed var(--line);}
.pp-check-row.child .pp-check-label{font-size:12.5px;color:var(--ink-soft);}
.pp-list-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);}
.pp-tmpl-badge{font-family:system-ui,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--paper);background:var(--ink-faint);border-radius:100px;padding:2px 7px;}

/* ── Prada ── Weigh-in card, sparkline and the two sheets. Same paper surface as
   everything else; the only new shape is the big readout, which earns its size
   because the whole view exists to answer "ile waży?" in one glance. */
.pp-prada-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding:16px 18px;border:1px solid var(--line);background:var(--paper-raised);}
.pp-prada-now{flex:1;min-width:150px;}
.pp-prada-eyebrow{font-family:system-ui,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-faint);}
.pp-prada-kg{font-family:'Iowan Old Style',Georgia,serif;font-size:34px;line-height:1.1;margin-top:2px;}
.pp-prada-sub{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);margin-top:4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-prada-delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;}
.pp-prada-delta.up{color:var(--accent);}
.pp-prada-delta.down{color:var(--ink-soft);}
.pp-prada-sparkwrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--accent-soft);}
.pp-prada-spark{display:block;}
.pp-prada-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:26px 0 10px;font-family:system-ui,sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-faint);}
.pp-prada-row{gap:12px;}
.pp-more-link{display:flex;align-items:center;gap:14px;border:1px solid var(--line);
  background:var(--paper-raised);padding:14px 16px;cursor:pointer;}
/* Sheet: centred card on desktop, bottom sheet on phones — same geometry the
   task modal already uses, so it lands where the thumb expects it. */
.pp-prada-sheet{position:fixed;z-index:calc(var(--z-sheet) + 1);background:var(--paper-raised);border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.22);padding:20px 22px;width:min(420px,92vw);
  top:50%;left:50%;transform:translate(-50%,-50%);max-height:88vh;overflow-y:auto;}
.pp-prada-result{font-family:'Iowan Old Style',Georgia,serif;font-size:28px;text-align:center;
  margin:16px 0 4px;padding:10px;border:1px dashed var(--line);}
.pp-prada-result.bad{color:var(--accent);border-color:var(--accent-soft);}
.pp-prada-result .pp-meta{font-size:11px;margin-top:4px;}
.pp-prada-num{font-family:'Iowan Old Style',Georgia,serif;font-size:max(16px,20px);text-align:center;}
@media (max-width:860px){
  .pp-prada-sheet{top:auto;bottom:0;left:0;transform:none;width:100%;max-width:100%;
    border-left:none;border-right:none;border-bottom:none;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .pp-prada-kg{font-size:30px;}
}

/* Way out of the triage panel and into the reading feed. */
.pp-quick-feedlink{display:inline-flex;align-items:center;gap:4px;margin-left:auto;margin-right:10px;
  font-family:system-ui,sans-serif;font-size:11px;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:100px;padding:3px 9px;}
.pp-quick-feedlink:hover{color:var(--ink);border-color:var(--ink-faint);}

/* ---------- kalendarz: month grid over tasks + subscribed ICS feeds ---------- */
.pp-cal-head{display:flex;align-items:center;gap:10px;margin:22px 0 12px;}
.pp-cal-title{font-family:'Iowan Old Style',Georgia,serif;font-size:20px;min-width:180px;}
.pp-cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;
  font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);}
.pp-cal-legend-item{display:inline-flex;align-items:center;gap:6px;}
.pp-cal-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.pp-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  font-family:system-ui,sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-faint);padding-bottom:6px;}
.pp-cal-dow span{padding-left:6px;}
.pp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
.pp-cal-cell{background:var(--paper);border:0;padding:5px 6px 6px;min-height:92px;cursor:pointer;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;text-align:left;
  font:inherit;color:inherit;overflow:hidden;}
.pp-cal-cell.out{opacity:.42;}
.pp-cal-cell.sel{background:var(--paper-raised);box-shadow:inset 0 0 0 2px var(--ink);}
.pp-cal-cell:hover{background:var(--paper-raised);}
.pp-cal-num{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);}
.pp-cal-cell.today .pp-cal-num{background:var(--ink);color:var(--paper);border-radius:100px;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;}
.pp-cal-chips{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pp-cal-chip{display:flex;align-items:center;gap:4px;font-family:system-ui,sans-serif;font-size:10.5px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-cal-more,.pp-cal-tasks{font-family:system-ui,sans-serif;font-size:10px;color:var(--ink-faint);}
.pp-cal-tasks{margin-top:auto;display:inline-flex;align-items:center;gap:3px;}
.pp-cal-panel{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
.pp-cal-panel-head{font-family:'Iowan Old Style',Georgia,serif;font-size:16px;margin-bottom:10px;}
.pp-cal-row{display:flex;align-items:baseline;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);}
.pp-cal-row.done .pp-cal-what{text-decoration:line-through;color:var(--ink-faint);}
.pp-cal-when{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);
  min-width:66px;flex-shrink:0;}
.pp-cal-what{font-size:13.5px;min-width:0;}
.pp-cal-empty,.pp-cal-hint{font-family:system-ui,sans-serif;font-size:12px;color:var(--ink-soft);padding:10px 0;}
.pp-cal-hint{margin-top:18px;border:1px dashed var(--line);padding:12px 14px;}
.pp-cal-feed-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:12px 14px;}
.pp-cal-feed-err{color:var(--overdue);}
@media (max-width:860px){
  .pp-cal-title{font-size:17px;min-width:132px;}
  .pp-cal-cell{min-height:62px;padding:4px;}
  /* Titles never fit in a phone-width cell — the day's dots say "something is
     here", the panel below says what. */
  .pp-cal-chips{flex-direction:row;flex-wrap:wrap;gap:3px;}
  .pp-cal-chip{font-size:0;gap:0;}
  .pp-cal-chip .pp-cal-dot{width:6px;height:6px;}
}

/* ============================== faza 4: wiersz, stan, papier ============================== */

/* ---- time column: star, alarm, overdue ----
   The star reads before the hour on purpose: "czy to ważne" is the question you
   answer first. Both marks are 13px so a starred fixed task does not push the
   column wider than a plain one. */
/* A <button> clips its own overflow in Safari/iOS, so the star had nowhere to spill
   even when the row had room. Belt to the width fix above. */
.pp-timecol{overflow:visible;}
.pp-timecol .tmline{display:flex;align-items:center;gap:3px;justify-content:flex-end;line-height:1;}
.pp-timecol .pp-star{font-size:12px;color:var(--star);flex:0 0 auto;}
.pp-timecol .pp-fixed{font-size:12px;color:var(--sea);flex:0 0 auto;}
.pp-timecol .tm.fixed{font-weight:600;color:var(--ink);}
/* Overdue is said once, here, next to the number it is about — the old "zaległe 1d"
   chip in the meta line repeated it three columns away. */
.pp-timecol.late .tm,.pp-timecol.late .dt{color:var(--overdue);}
.pp-timecol.late .dt{font-weight:600;}

/* ---- stalled: pushed away over and over ----
   Not a cemetery, not an auto-archive: the row simply stops looking like the
   others, so the pattern is visible at the moment of deciding again. */
.pp-stalled{display:inline-flex;align-items:center;gap:3px;color:var(--accent);
  border:1px solid var(--accent-soft);border-radius:100px;padding:0 6px;font-size:10.5px;}
.pp-stalled i{font-size:11px;}

/* ---- shared work ----
   A tint, not a badge: it should register without being read. The left edge is
   3% ink so it survives both themes without a second declaration. */
.pp-row.shared{background:linear-gradient(90deg,color-mix(in srgb,var(--sea) 7%,var(--paper)) 0 3px,color-mix(in srgb,var(--sea) 3.5%,var(--paper)) 3px 100%);}
.pp-row.fixed .pp-title{font-weight:600;}

/* ---- mood bar: co teraz dam radę ---- */
.pp-moodbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.pp-mood{display:inline-flex;align-items:center;gap:6px;min-height:32px;
  background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:5px 12px;cursor:pointer;font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink-soft);}
.pp-mood:hover{border-color:var(--sea);color:var(--ink);}
.pp-mood.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pp-mood i{font-size:14px;}

/* ---- the cat parks in the Zara line instead of the corner ---- */
.pp-zara-perch:empty{display:none;}
.kz-perch-inline{position:static!important;top:auto!important;right:auto!important;}

/* Favicons are data: URIs from /api/favicons; the globe holds the space until one
   arrives, so a line of links does not reflow under the cursor. */
.pp-favicon-ph{font-size:13px;color:var(--ink-faint);margin-right:3px;vertical-align:-1px;}

/* ---- papier w kropki (bullet journal) ----
   The paper colour is unchanged — only the grid is added, in ink at 14% so it
   reads as texture in both themes and never competes with a row. 24px spacing is
   the bujo standard 5 mm at this type size. */
body.pp-dotgrid{
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 0);
  background-size:24px 24px;
  background-attachment:fixed;
}
/* Rows paint their own paper so text stays legible; on dot paper they go
   transparent, or every row would erase the grid it sits on. */
body.pp-dotgrid .pp-row:not(.shared){background:transparent;}
/* The app shells paint their own paper over <body>, which would hide the grid
   entirely — they let the body's dots through instead. */
body.pp-dotgrid .pp-desktop,
body.pp-dotgrid .pp-mobile{background:transparent;}

/* Czas trwania wideo obok linku (YouTube, Vimeo…) */
.pp-dur{font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint);margin-left:5px;white-space:nowrap;}
/* Price sits next to the title like the video duration does, but it is the
   thing you scan a shopping list for — so it keeps the ink colour. */
.pp-price{font-family:system-ui,sans-serif;font-size:11px;font-weight:600;color:var(--ink);margin-left:6px;white-space:nowrap;}
@media (prefers-reduced-motion:no-preference){
  .pp-mood,.pp-zara-chip{transition:border-color .15s ease,color .15s ease,background .15s ease;}
}

/* ---------- kalendarz: dziś w kalendarzu (Dziś) + kolory kanałów ---------- */
/* The immovable part of the day. Solid left rule rather than a card, so it
   reads as a fixed spine above the list without competing with the task rows. */
.pp-caltoday{margin:0 0 14px;padding:8px 0 8px 12px;border-left:2px solid var(--line);}
.pp-caltoday-label{font-family:system-ui,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-faint);margin-bottom:6px;}
.pp-caltoday-row{display:flex;align-items:baseline;gap:9px;padding:3px 0;}
.pp-caltoday-row.past{opacity:.45;}
.pp-caltoday-when{font-family:system-ui,sans-serif;font-size:12px;color:var(--ink-soft);
  min-width:62px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.pp-caltoday-what{font-size:13.5px;min-width:0;}
.pp-cal-feed-card{border:1px solid var(--line);padding:12px 14px;}
.pp-cal-feed-card .pp-cal-feed-row{border:0;padding:0;}
.pp-cal-swatches{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.pp-cal-swatch{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;padding:0;flex:0 0 auto;}
.pp-cal-swatch.sel{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink);}

/* ---------- pasek stanu (HUD) + wydarzenia w liście + stopka dnia ----------
   Jeden ciemny wiersz zamiast trzech bloków. Ciemny, bo ma się czytać jak
   listwa przyrządów, a nie jak kolejna kartka: papier zostaje dla zadań. */
.pp-hud{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto;
  background:var(--navbg);color:#fff;border-radius:4px;padding:7px 12px;margin:10px 0 0;
  font-family:system-ui,sans-serif;font-size:12px;scrollbar-width:none;}
.pp-hud::-webkit-scrollbar{display:none;}
/* Biel dosłowna, nie var(--paper): pasek jest ciemny w obu motywach, a w ciemnym
   --paper JEST tłem — tekst zniknąłby sam w sobie. Tak samo robi dolna nawigacja. */
.pp-hud-count{flex:none;font-weight:600;letter-spacing:.01em;}
.pp-hud-count .late{color:var(--accent-soft);font-weight:400;}
.pp-hud-seg{display:inline-flex;align-items:center;gap:5px;flex:none;color:rgba(255,255,255,.72);
  white-space:nowrap;text-decoration:none;position:relative;padding-left:12px;}
/* Kropka rozdziela segmenty bez rysowania linii — pasek zostaje jednym obiektem. */
.pp-hud-seg::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;margin-top:-1.5px;
  border-radius:50%;background:rgba(255,255,255,.34);}
.pp-hud-seg.link:hover{color:#fff;}
.pp-hud-seg.soon{color:var(--accent-soft);font-weight:600;}
/* Wydarzenie w liście zadań: ta sama siatka co wiersz, ale bez pola do
   odhaczenia i bez data-tid — nie da się go przesunąć ani zamknąć, bo nie jest
   twoje. Kursywa i plakietka mówią to, zanim ktoś spróbuje kliknąć. */
.pp-evrow{display:flex;align-items:baseline;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line);color:var(--ink-soft);}
.pp-evrow.past{opacity:.45;}
.pp-evrow-when{font-family:system-ui,sans-serif;font-size:12px;min-width:62px;flex-shrink:0;
  font-variant-numeric:tabular-nums;}
.pp-evrow-what{flex:1;min-width:0;font-style:italic;}
.pp-evrow-tag{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.05em;
  color:var(--sea);border:1px solid var(--sea);border-radius:3px;padding:1px 5px;flex:none;}

/* Stopka dnia — koniec listy jako podsumowanie, nie jako pustka. */
.pp-closer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:18px;padding:14px 0 4px;}
.pp-closer-body{min-width:0;}
.pp-closer-txt{font-size:14px;}
.pp-closer .pp-zara-line{margin:0;flex:1;min-width:200px;}
.pp-calchip{flex:none;}
/* Telefon: pasek opcji zostaje jednym wierszem — zawijanie robiło z trzech
   chipów dwa piętra i spychało listę niżej niż przed zmianą. */
.pp-mobile .pp-actionrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.pp-mobile .pp-actionrow::-webkit-scrollbar{display:none;}
.pp-mobile .pp-moodbar{flex-wrap:nowrap;}
.pp-mobile .pp-actionrow>*{flex:none;}

/* ── Tryb feed (mobile) ──────────────────────────────────────────────────
   Ściana zadań czytana kartka po kartce. Nakładka wewnątrz .pp-mobile, więc
   dziedziczy papier i motyw; scroll-snap trzyma jedną kartkę na ekran, ale
   przewijanie zostaje swobodne w obie strony. */
.pp-feedmode{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--paper);}
.pp-feed-top{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  border-bottom:1px solid var(--line);}
.pp-feed-top-title{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);}
.pp-feed-scroll{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* height 100% i nie więcej: bez tego długi opis rozpycha kartkę ponad ekran i
   snap łapie w połowie treści. Opis dostaje własny scroll (min-height:0 niżej). */
.pp-feed-card{scroll-snap-align:start;scroll-snap-stop:always;
  height:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;
  gap:14px;padding:26px 20px calc(env(safe-area-inset-bottom) + 26px);
  border-bottom:1px solid var(--line);}
.pp-feed-eyebrow{font-family:system-ui,sans-serif;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);}
.pp-feed-title{font-size:26px;line-height:1.25;}
.pp-feed-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.pp-feed-chip{font-family:system-ui,sans-serif;font-size:12px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:4px;padding:3px 8px;
  display:inline-flex;align-items:center;gap:5px;}
.pp-feed-who{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;position:relative;overflow:hidden;color:#fff;
  font-family:system-ui,sans-serif;font-size:12px;}
.pp-feed-desc{font-size:15px;line-height:1.55;color:var(--ink-soft);
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
/* Zara (karteczki) siedzi w <body> z z-index 200, a feed to nakładka wewnątrz
   .pp-mobile — bez tego kot i panel karteczek leżą na kartkach feedu. */
body.pp-feed-open .kz-orb,
body.pp-feed-open .kz-panel,
body.pp-feed-open .kz-bubble,
body.pp-feed-open .kz-perch{display:none !important;}

/* Akcje w feedzie — pas na dole kartki, cel dotyku 44 px. */
.pp-feed-acts{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:6px;}
.pp-feed-act{flex:1 1 0;min-width:96px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;
  font-family:system-ui,sans-serif;font-size:13px;color:var(--ink);
  background:var(--paper-raised,transparent);border:1px solid var(--line);
  border-radius:4px;cursor:pointer;}
.pp-feed-act.primary{border-color:var(--accent);color:var(--accent);}
.pp-feed-act:active{transform:translateY(1px);}
/* Zniknięcie kartki po akcji: następna wjeżdża na jej miejsce (każda ma
   wysokość kontenera), więc scroll zostaje tam, gdzie był. */
.pp-feed-card.leaving{opacity:0;transform:translateY(-12px);
  transition:opacity .24s ease-out,transform .24s ease-out;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.pp-feed-card.leaving{transition:none;}}

/* „…" w nagłówku karty: narzędzie zadania, nie akcja workflow — dlatego nie
   w footerze obok trzech głównych przycisków. Sheet otwiera pp-lp-sheet
   (współdzielona klasa = wspólny wygląd i animacja). */
.pp-feed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pp-feed-more{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:4px;background:none;color:var(--ink-soft);cursor:pointer;}
.pp-feed-more i{font-size:16px;line-height:1;}
.pp-feed-more:active{transform:translateY(1px);}
.pp-feed-grp{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:10px 15px 2px;}
.pp-feed-grp:first-child{padding-top:4px;}