/* ---------- components/print-list/print-list.css ---------- the Print List panel (desktop only; built by print-list.js) */
#printList{position:static}
#plPop{display:none;position:fixed;width:min(390px,calc(100vw - 16px));height:min(500px,calc(100vh - 110px));max-height:none;overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);padding:10px;z-index:40;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scrollbar-gutter:stable;overscroll-behavior:contain}
#plPop.on{display:block}
#plPop .plh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px 8px}
#plPop .plh b{font-size:15px;font-weight:700}
#plPop .plt{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#plPop .plt em{font-style:normal;color:var(--err);font-weight:600}
#plPop .plsel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 6px 8px}
#plPop .plka{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);padding:0;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#plPop .plc{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
#plPop .plk{width:22px;height:22px;flex:none;padding:0;box-sizing:border-box;border-radius:6px;display:flex;align-items:center;justify-content:center;background:none;border:1.5px solid var(--mute);color:#fff;cursor:pointer}
#plPop .plk svg{width:14px;height:14px;display:block;opacity:0}
#plPop .plk.on{background:var(--accent);border-color:var(--accent)}
#plPop .plk.on svg{opacity:1}
#plPop .plk:focus-visible,#plPop .plka:focus-visible,#plPop .plgo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#plPop .plr{display:flex;align-items:center;gap:10px;padding:8px;margin-top:6px;border-radius:14px;background:var(--bg);border:1px solid var(--line);transition:opacity .15s}
#plPop .plr.unp{opacity:.55}
#plPop .plm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#plPop .pln{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plPop .pls{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plPop .pla{flex:none;min-width:58px;text-align:right;white-space:nowrap;font-size:14px;font-weight:700;color:var(--err);font-variant-numeric:tabular-nums}
#plPop .plnone{padding:22px 8px;color:var(--mute);font-size:13px;text-align:center}
#plPop .plb{position:sticky;bottom:-10px;margin-top:10px;padding:10px 0 2px;background:var(--card);border-top:1px solid var(--line)}
#plPop .plgo{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff;border:1px solid var(--accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
#plPop .plgo:disabled{opacity:.45;cursor:not-allowed}
#plPop .pll{color:var(--err);font-weight:600}
#plPop .plall{flex:none;min-height:26px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--mute);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
#plPop .plall:hover{color:var(--text);border-color:var(--mute)}
#plPop .plall.on{background:color-mix(in srgb,var(--accent) 14%,var(--card));border-color:var(--accent);color:var(--accent)}
#plPop .plon{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:26px;padding:0 9px;border:1px dashed var(--line);border-radius:999px;background:none;color:var(--mute);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
#plPop .plon svg{width:13px;height:13px}
#plPop .plon:hover{border-color:var(--mute);color:var(--text)}
#plPop .plon.on{border-style:solid;border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent)}
#plPop .plall:focus-visible,#plPop .plon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#plPop .plq{display:flex;align-items:center;gap:8px;padding:0 6px 8px}
#plPop .plw{position:relative;flex:1;min-width:0}
#plPop .plw input{width:100%;box-sizing:border-box;height:32px;padding:0 28px 0 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:13px}
#plPop .plw input:focus{outline:2px solid var(--accent);outline-offset:1px}
#plPop .plw input::-webkit-search-cancel-button{display:none}
#plPop .plqc{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--mute);font-size:17px;line-height:1;cursor:pointer}
#plPop .plqc:hover{color:var(--text)}
#plPop .plg{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 0;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
#plPop .plg.today{color:var(--accent)}
#plPop .plg span{font-variant-numeric:tabular-nums;font-weight:600}

#plPop .pth,#plPop .ptr{display:grid;grid-template-columns:22px minmax(0,1fr) 46px 80px;gap:10px;align-items:center;padding:7px 8px}
#plPop .pth{position:sticky;top:-10px;z-index:1;background:var(--card);border-bottom:1px solid var(--line);font-size:11px}
#plPop .psort{background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);cursor:pointer;text-align:left;white-space:nowrap}
#plPop .psort.r{text-align:right}
#plPop .psort:hover{color:var(--text)}
#plPop .psort.on{color:var(--accent)}
#plPop .psort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#plPop .ptr{border-bottom:1px solid var(--line);transition:opacity .15s}
#plPop .ptr.unp{opacity:.55}
#plPop .pdy{text-align:right;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
#plPop .pdy.hot{color:var(--err);font-weight:600}
#plPop .ptr .pla{min-width:0}
#plPop .plb2{display:flex;align-items:center;justify-content:space-between;gap:12px}
#plPop .pbi{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
#plPop .pbi b{font-size:15px;color:var(--text);font-weight:700}
#plPop .plb2 .plgo{width:auto;flex:none;padding:10px 18px}
/* ===== phone (560px or less): the list becomes a full page that starts under the header (the script sets top), like the bell and the notepad; the phone's Back button closes it ===== */
@media (max-width:560px){
  #plPop{position:fixed;left:0;right:0;top:120px;bottom:0;width:auto;height:auto;max-height:none;border:0;border-radius:0;box-shadow:none;padding:0 14px 0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #plPop .plh{padding:10px 2px 8px}
  #plPop .plq{padding:0 0 8px}
  #plPop .pth{top:0}
  #plPop .pth,#plPop .ptr{grid-template-columns:26px minmax(0,1fr) 44px 78px;padding:10px 2px}
  #plPop .plk{width:26px;height:26px}
  #plPop .pln{font-size:15.5px}
  #plPop .pla{font-size:15px}
  #plPop .plb{bottom:0;margin-top:6px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
  #plPop .plr{margin-top:8px}
  #plPop.on{display:flex;flex-direction:column}   /* the Print bar sits at the bottom of the page */
  #plPop.on>*{flex:none}
  #plPop .plb{margin-top:auto}
}
/* the 80mm thermal receipt: a print-only box that exists only while printing (72mm wide, black on white, boxes drawn with plain borders) */
#plSlip{display:none}
@media print{
  body.plprint{overflow:visible !important;height:auto !important;background:#fff !important}
  body.plprint>*:not(#plSlip){display:none !important}
  body.plprint #plSlip{display:block;width:70mm;margin:0 auto;padding:1.5mm 0 5mm;box-sizing:border-box;background:#fff;color:#000;font:10pt/1.1 Arial,Helvetica,sans-serif}
  #plSlip .pd{text-align:center;font-weight:700;font-size:10pt;padding-bottom:.5mm}
  #plSlip .pc{display:flex;align-items:center;gap:1.3mm;border:.4mm solid #000;padding:1.3mm 1.3mm;margin-top:1.6mm;font-weight:700;font-size:10pt;break-inside:avoid;page-break-inside:avoid}
  #plSlip .b2{flex:none;width:3.2mm;height:3.2mm;box-sizing:border-box;border:.4mm solid #000}
  #plSlip .nm{flex:1;min-width:0;font-size:9pt;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #plSlip .pw{flex:none;font-size:8pt;min-width:6mm;text-align:center;white-space:nowrap}
  #plSlip .pa{flex:none;font-size:8pt;min-width:10mm;text-align:right;white-space:nowrap}
  #plSlip .ul{flex:none;width:9mm;height:4.2mm;border-bottom:.4mm solid #000}
  #plSlip .pf{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;font-size:8pt;margin-top:2mm;padding-top:1mm;border-top:.3mm dashed #000}
  #plSlip .pf b{font-weight:800;white-space:nowrap}
}
/* All view: the header labels are plain text (not sortable), the rows are the same as the print list */
#plPop .plab{cursor:default}
#plPop .plab:hover{color:var(--mute)}

/* thin scrollbar (its space is always kept, so the search box and the All button never jump sideways when the list gets long or short) */
#plPop::-webkit-scrollbar{width:6px;height:6px}
#plPop::-webkit-scrollbar-track{background:transparent}
#plPop::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
#plPop::-webkit-scrollbar-thumb:hover{background:var(--mute)}
/* the pinned top part (title, search, column heading): only the rows scroll under it, so the total and the search box never move */
#plPop .plhd{position:sticky;top:-10px;z-index:3;margin:-10px -10px 0;padding:10px 10px 0;background:var(--card);overflow:hidden}
#plPop .plhd .pth{position:static}
#plPop .plh{min-height:30px}
#plPop .plt{min-width:96px;text-align:right}
/* All view: flat sorted list (day under the name) */
#plPop .pnm{display:flex;flex-direction:column;gap:1px;min-width:0}
/* loading look, the same as the Reminders filter buttons: rows dim with a thin moving bar under the pinned part, then fade in */
#plPop .plhd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent),transparent);transition:opacity .15s}
#plPop.pld .plhd::after{opacity:1;animation:pldb .9s ease-in-out infinite}
#plPop .ptr,#plPop .plg,#plPop .plnone{transition:opacity .15s}
#plPop.pld .ptr,#plPop.pld .plg,#plPop.pld .plnone{opacity:.45}
#plPop.plfin .ptr,#plPop.plfin .plg,#plPop.plfin .plnone,#plPop.plfin .plt{animation:plfin .2s ease}
@keyframes pldb{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes plfin{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#plPop.pld .plhd::after,#plPop.plfin .ptr,#plPop.plfin .plg,#plPop.plfin .plnone,#plPop.plfin .plt{animation:none}}
@media (max-width:560px){#plPop .plhd{top:0;margin:0 -14px;padding:0 14px}}