/* ---------- css/reminders.css ---------- */
/* ===== reminders =====
   The red bell button in the header (beside the notepad) opens the drop list of accounts that owe money (search box, then Today / Today done / Other days / No day set). */
.rem{order:2;margin-right:-4px}   /* not positioned: the drop list is placed against the header row (.top), so it can never pass the page borders */
.bell{--lg:32px;width:var(--lg);height:var(--lg);padding:0;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;background:var(--err);border:1px solid var(--err);box-shadow:0 1px 2px rgba(0,0,0,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s}
@media (max-width:420px){.bell{--lg:30px}}
.bell svg{width:calc(var(--lg) - 12px);height:calc(var(--lg) - 12px);display:block;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}   /* red button, bell drawn as an outline (not filled) */
.bell svg path:last-child{fill:none}
.bell:active{transform:scale(.94)}
.bell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bell:hover,.bell[aria-expanded="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 26%,transparent)}
.bell .bdg{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;box-sizing:border-box;background:#fff;color:var(--err);border:2px solid var(--err);line-height:1;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.bell .bdg:empty{display:none}
/* flipping bell: bell face (.f1) and number face (.f2) take turns; the colour follows the load (set by the script: lv0 none, lv1 1-3, lv2 4-7, lv3 8 or more) */
.bell.flip{--bc:var(--err);background:var(--bc);border-color:var(--bc)}
.bell.flip.lv0{--bc:#8a8f98}
.bell.flip.lv1{--bc:#1f9d55}
.bell.flip.lv2{--bc:#d98a00}
.bell.flip.lv3{--bc:var(--err)}
.bell.flip:hover,.bell.flip[aria-expanded="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--bc) 26%,transparent)}
.bell.flip .bdg{display:none}
.bell .f1,.bell .f2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bell .f2{color:#fff;font-size:15px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;opacity:0;transform:scaleY(0)}
.bell.flip:not(.lv0) .f1{animation:bf1 4s ease-in-out 3}
.bell.flip:not(.lv0) .f2{animation:bf2 4s ease-in-out 3}
.bell.flip.lv3{animation:bglow 4s ease-in-out 3}
.bell.flip:hover .f1,.bell.flip:hover .f2,.bell.flip[aria-expanded="true"] .f1,.bell.flip[aria-expanded="true"] .f2{animation-play-state:paused}
@keyframes bf1{0%,40%{transform:scaleY(1);opacity:1}50%,90%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
@keyframes bf2{0%,40%{transform:scaleY(0);opacity:0}50%,90%{transform:scaleY(1);opacity:1}100%{transform:scaleY(0);opacity:0}}
@keyframes bglow{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.12)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--err) 24%,transparent)}}
@media (prefers-reduced-motion:reduce){.bell.flip .f1,.bell.flip .f2,.bell.flip.lv3{animation:none !important}}
#remPop{display:none;position:absolute;right:0;top:calc(100% + 8px);width:min(390px,calc(100vw - 16px));height:min(500px,calc(100vh - 110px));max-height:none;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);padding:10px;z-index:40}
#remPop.on{display:block}
#remPop .rstick{position:sticky;top:-10px;background:var(--card);z-index:2;display:flex;align-items:center;gap:8px;padding:2px 0 8px}   /* search bar takes the place of the old title row */
#remPop .rsr{flex:1;min-width:0;padding:0}
#remPop .rtot b{color:var(--err);font-weight:600}
#remPop .rtot{flex:none;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px;pointer-events:none}   /* count and total owing, faded inside the search bar */
#remPop .rsr input{display:block;width:100%;min-width:0;border:1.5px solid transparent;background:var(--bg);color:var(--text);border-radius:10px;padding:8px 11px;font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s,background .15s}
#remPop .rsr input::placeholder{color:var(--mute);opacity:.6}
#remPop .rsr input:focus{outline:0;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#remPop .rtabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:0 0 6px}
#remPop .rt{min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 6px;border-radius:12px;background:var(--bg);color:var(--mute);border:1px solid var(--line);line-height:1.1;white-space:nowrap;cursor:pointer}   /* a day tile: day name, count, total owed */
#remPop .rt:hover{color:var(--text)}
#remPop .rt .dn{font-size:11px;font-weight:500}
#remPop .rt .c{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);margin:1px 0}
#remPop .rt .s{font-size:10px;font-variant-numeric:tabular-nums;color:var(--mute)}
#remPop .rt.z{opacity:.55}
#remPop .rt.tod:not(.on) .dn{color:var(--accent);font-weight:700}
#remPop .rt.on,#remPop .rt.z.on{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}
#remPop .rt.on .c,#remPop .rt.on .dn,#remPop .rt.on .s{color:#fff}

@media (max-width:360px){#remPop .rtabs{gap:3px}#remPop .rt .dn{font-size:10px}#remPop .rt .c{font-size:17px}#remPop .rt .s{font-size:9px}}   /* very narrow phones: the seven tiles must fit inside the list */
#remPop .rg{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);padding:12px 6px 6px}
#remPop .rg::after{content:"";flex:1;height:1px;background:var(--line)}
#remPop .rg.today{color:var(--err)}
#remPop .rg.done{color:var(--accent)}
#remPop .rs{font-size:12px;font-weight:600;color:var(--text);padding:8px 6px 2px}
#remPop .rr{display:flex;align-items:center;gap:10px;padding:8px;margin-top:6px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
#remPop .rr.due{background:color-mix(in srgb,var(--err) 9%,var(--bg));border-color:color-mix(in srgb,var(--err) 35%,var(--line))}
#remPop .dt{width:36px;height:38px;flex:none;box-sizing:border-box;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:color-mix(in srgb,var(--mute) 18%,transparent);color:var(--mute)}   /* the date tile: day number on top, month below */
#remPop .dt i{font-style:normal;font-size:9.5px;font-weight:400;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
#remPop .dt b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:2px}
#remPop .dt.none{border:1px dashed var(--line);background:none}
#remPop .rr.sent .dt{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
#remPop .rm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#remPop .rn{background:none;color:var(--text);padding:0;text-align:left;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#remPop .rn:hover{text-decoration:underline}
#remPop .ra{flex:none;white-space:nowrap;color:var(--text);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
#remPop .rr.due .ra{color:var(--err);font-weight:700}
#remPop .rl{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#remPop .dsel{display:inline-flex;align-items:center;justify-content:center;flex:none;width:96px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;padding:7px 8px;border-radius:99px;background:var(--card);color:var(--text);border:1px solid var(--line);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
#remPop .dsel:hover{border-color:var(--mute)}
#remPop .dsel[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#remPop .dsel.set{background:color-mix(in srgb,var(--accent) 12%,var(--card));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
#remPop .dsel.set.now{background:var(--accent);border-color:var(--accent);color:#fff}
#remPop .dsel.none{border-style:dashed;color:var(--mute);font-weight:500}
/* the day menu itself: one small floating card (fixed, so the scrolling list never clips it) */
#remDay{display:none;position:fixed;z-index:60;width:212px;max-height:min(60vh,340px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 32px -10px rgba(0,0,0,.4);padding:6px}
#remDay.on{display:block}
#remDay .dm{display:flex;align-items:center;gap:8px;width:100%;background:none;color:var(--text);text-align:left;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:500}
#remDay .dm:hover,#remDay .dm:focus-visible{background:var(--bg);outline:0}
#remDay .dm.cur{color:var(--accent);font-weight:700}
#remDay .dm .tn{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:0 6px}
#remDay .dm.no{color:var(--mute)}
#remDay .dm.no.cur{color:var(--accent)}
#remDay .dg{display:grid;grid-template-columns:1fr 1fr;gap:2px}
#remDay .dg .dm{padding:7px 10px}
#remDay .dg .dm.cur{background:color-mix(in srgb,var(--accent) 12%,transparent)}
#remDay .dcw{display:flex;gap:6px;padding:2px 4px 0}
#remDay .dcw input{flex:1;min-width:0;width:100%;font-size:16px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
#remDay .dcw.cur input{border-color:var(--accent);color:var(--accent);font-weight:700}
#remDay .dcs{flex:none;display:flex;align-items:center;justify-content:center;width:38px;padding:0;background:var(--accent);color:#fff;border-radius:10px}
#remDay .dce{font-size:12px;color:var(--err);padding:5px 6px 0}
#remDay .dce:empty{display:none}
#remDay .dsep{height:1px;background:var(--line);margin:4px 6px}
#remPop .remempty,#remPop .remnone{padding:22px 8px;color:var(--mute);font-size:13px;text-align:center}
#remPop .sk{width:32px;height:32px;flex:none;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--mute);border:1px solid var(--line)}
#remPop .sk:hover{color:var(--text);background:var(--bg)}
#remPop .rg.skip{color:var(--mute)}
#remPop .rr.skipped{opacity:.85}
#remPop .rr.skipped .dt{background:var(--card);color:var(--mute)}
#remPop .rr.skipped .ra{color:var(--mute)}

/* changing a filter button (Today, Other days, ...): the rows dim for a moment with a thin moving bar under the buttons, then fade in (same feel as the transactions list) */
#remPop .rhd::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}
#remPop.rld .rhd::after{opacity:1;animation:rldb .9s ease-in-out infinite}
#remPop .rr,#remPop .rg,#remPop .rs,#remPop .remempty,#remPop .remnone{transition:opacity .15s}
#remPop.rld .rr,#remPop.rld .rg,#remPop.rld .rs,#remPop.rld .remempty,#remPop.rld .remnone{opacity:.45}
#remPop.rfin .rr,#remPop.rfin .rg,#remPop.rfin .rs,#remPop.rfin .remempty,#remPop.rfin .remnone{animation:rfin .2s ease}
@keyframes rldb{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes rfin{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#remPop.rld .rhd::after,#remPop.rfin .rr,#remPop.rfin .rg,#remPop.rfin .rs,#remPop.rfin .remempty,#remPop.rfin .remnone{animation:none}}

/* ===== phone (560px or less): the list becomes a full page under the header. Sizes match the Home screen (names 15.5px, small text 12-13px, 34px round buttons); no Back button (the phone's own Back button and the bell both close it) ===== */
.rback{display:none !important}
@media (max-width:560px){
  body.mpage{overflow:hidden}   /* the page behind does not scroll while a page is open */
  #remPop{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 0 28px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}   /* top is set by the script to just under the header */
  #remPop .rstick{top:0;padding:8px 14px}
  #remPop .rsr{padding:0}
  #remPop .rtot{font-size:12px}
  #remPop .rsr input{padding:9px 11px;border-radius:8px}
  #remPop .rtabs{gap:5px;padding:8px 14px 6px}
  #remPop .rt{padding:7px 0 6px}
  #remPop .rt .c{font-size:19px}
  #remPop .rg{padding:12px 14px 6px}
  #remPop .rs{padding:8px 14px 2px;font-size:12px}
  #remPop .rr{margin:6px 14px 0;padding:8px 10px;gap:10px;border-radius:14px}
  #remPop .dt{width:36px;height:38px}
  #remPop .rn{font-size:15.5px}
  #remPop .ra{font-size:14px}
  #remPop .rl{font-size:12px}
  #remPop .sk{width:34px;height:34px}
  #remPop .dsel{width:96px;min-height:34px;font-size:13px;padding:6px 8px}
  #remPop .remempty,#remPop .remnone{padding:28px 14px;font-size:13px}
  #remDay{width:230px;max-height:min(70vh,420px)}
  #remDay .dm,#remDay .dg .dm{min-height:38px;padding:8px 10px;font-size:14px}
  #remDay .dcw input{padding:8px 10px}
  #remDay .dcs{width:40px}
}
/* date tile and row tint by days without payment: set inline by the script, green (10 days) to red (40+ days) in steps of 5 days; under 10 stays plain grey */
/* thin, simple scrollbar for the list and the day menu: a slim rounded line, no arrows, no track */
#remPop,#remDay{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--mute) 45%,transparent) transparent}
#remPop::-webkit-scrollbar,#remDay::-webkit-scrollbar{width:4px;height:4px}
#remPop::-webkit-scrollbar-track,#remDay::-webkit-scrollbar-track{background:transparent}
#remPop::-webkit-scrollbar-thumb,#remDay::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mute) 45%,transparent);border-radius:99px}
#remPop::-webkit-scrollbar-button,#remDay::-webkit-scrollbar-button{display:none}

/* the compact row: name and a small line (day, last payment) on the left, the amount, then one joined pill with WhatsApp and Skip */
#remPop .jp{display:flex;flex:none;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
#remPop .jp .sk{width:38px;height:34px;border-radius:0;border:none;background:var(--card)}
#remPop .rl2{overflow:visible;text-overflow:clip}
#remPop .rl .dsel,#remPop .rl .dsel.set,#remPop .rl .dsel.set.now,#remPop .rl .dsel.none{display:inline;width:auto;min-height:0;padding:3px 2px;margin:-3px -2px;border:0;border-radius:4px;background:none;box-shadow:none;font-size:inherit;font-weight:600;color:var(--accent);text-decoration:underline dotted;text-underline-offset:3px;overflow:visible}
#remPop .rl .dsel.set.now{font-weight:700}
#remPop .rl .dsel.none{color:var(--mute);font-weight:500}
#remPop .rl .dsel[aria-expanded="true"]{text-decoration-style:solid}
/* search bar with the All / Monthly / Not set chip inside it (the chip changes with a short slide, and the list dims and fades in like the day tiles) */
#remPop .rsw{display:flex;align-items:center;gap:4px;background:var(--bg);border:1.5px solid transparent;border-radius:10px;padding-right:5px;transition:border-color .15s,box-shadow .15s,background .15s}
#remPop .rsw:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#remPop .rsw input,#remPop .rsw input:focus{flex:1 1 auto;width:auto;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:10px}
#remPop .rsw input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
#remPop .rqc{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--mute);font-size:20px;line-height:1;cursor:pointer;padding:0}
#remPop .rqc:hover{color:var(--text)}
#remPop .rchip{flex:none;border:1px solid var(--line);background:var(--card);color:var(--mute);border-radius:99px;font:inherit;font-size:12px;font-weight:600;padding:6px 11px;white-space:nowrap;cursor:pointer;overflow:hidden;transition:background .2s,color .2s,border-color .2s}
#remPop .rchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
#remPop .rchip:active{transform:scale(.96)}
#remPop .rci{display:inline-block}
#remPop .rchip.go{animation:rchp .24s ease}
#remPop .rchip.go .rci{animation:rchin .24s ease}
@keyframes rchin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes rchp{from{transform:scale(.92)}60%{transform:scale(1.04)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#remPop .rchip.go,#remPop .rchip.go .rci{animation:none}}
/* the date tile is the WhatsApp button: it keeps its look, and glows WhatsApp green only when the account has a saved number */
#remPop .dt{padding:0;font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#remPop button.dt{border:0}
#remPop button.dt.none{border:1px dashed var(--line)}
#remPop .dt.dw{box-shadow:0 0 0 1px rgba(37,211,102,.55),0 0 4px 0 rgba(37,211,102,.4)}
#remPop .dt.dw:hover{box-shadow:0 0 0 1px rgba(37,211,102,.75),0 0 6px 1px rgba(37,211,102,.5)}
#remPop .dt:active{transform:scale(.95)}
#remPop .dt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* status in the small line of Skipped / Done rows */
#remPop .rl .st,#remPop .rl .st.ok{display:inline;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;min-width:0;height:auto;font-size:inherit;font-weight:600;line-height:inherit;color:var(--mute)}   /* reset: the page's global .st / .ok badge styles must not paint a filled pill here */
#remPop .rl .st.ok{color:var(--accent)}
/* ===== phase 1: empty states (soft icon above the message) ===== */
#remPop .remempty,#remPop .remnone{display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1.4}
#remPop .remempty::before,#remPop .remnone::before{content:"";width:44px;height:44px;background:color-mix(in srgb,var(--mute) 55%,transparent);-webkit-mask:var(--ei) center/contain no-repeat;mask:var(--ei) center/contain no-repeat}
#remPop .remempty{--ei:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E")}
#remPop .remnone{--ei:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10.3 20a2 2 0 0 0 3.4 0'/%3E%3C/svg%3E")}

/* ===== phase 1b: date tile matches the transactions tile (bigger, soft, title-case month, pastel by age) ===== */
#remPop .dt{position:relative;width:48px;height:48px;border-radius:12px;gap:3px;background:color-mix(in srgb,var(--mute) 26%,var(--card));color:var(--text)}
#remPop .dt b{font-size:18px;font-weight:700;line-height:1;margin:0}
#remPop .dt i{font-size:12px;font-weight:500;line-height:1;text-transform:none;letter-spacing:0;opacity:.8}
#remPop .dt.none{background:none;border:1px dashed var(--line);color:var(--mute)}
/* age colour: 2w green ... 8w+ red, as a soft pastel with dark text (the script only sets --th, the hue) */
#remPop .rr .dt[data-t]{background:hsl(var(--th) 62% 78%);color:hsl(var(--th) 70% 16%)}
/* WhatsApp: a small green dot on the tile corner replaces the glow, so it can never be mistaken for the age colour */
#remPop .dt.dw,#remPop .dt.dw:hover{box-shadow:none}
#remPop .dt.dw::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:#25d366;border:2px solid var(--bg);box-sizing:content-box}
#remPop .rr.due .dt.dw::after{border-color:color-mix(in srgb,var(--err) 9%,var(--bg))}
@media (max-width:560px){#remPop .dt{width:48px;height:48px}}

/* ===== phase 2: sticky filter header, day pill, weeks tag ===== */
/* search row + day tiles stay pinned while the list scrolls (the loading bar now runs under the tiles) */
#remPop .rhd{position:sticky;top:-10px;z-index:2;background:var(--card)}
#remPop .rstick{position:static;top:auto}
@media (max-width:560px){#remPop .rhd{top:0}}
/* day picker: a real pill with a caret instead of dotted text, easy to hit with a thumb */
#remPop .rl .dsel,#remPop .rl .dsel.set,#remPop .rl .dsel.set.now,#remPop .rl .dsel.none{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:26px;padding:0 10px;margin:1px 2px 1px 0;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:12.5px;font-weight:600;text-decoration:none;vertical-align:middle}
#remPop .rl .dsel.set.now{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
#remPop .rl .dsel.none{background:none;border:1px dashed var(--line);color:var(--mute);font-weight:500}
#remPop .rl .dsel::after{content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);opacity:.75}
#remPop .rl .dsel:hover{border-color:var(--accent)}
#remPop .rl .dsel[aria-expanded="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
@media (max-width:560px){#remPop .rl .dsel,#remPop .rl .dsel.set,#remPop .rl .dsel.set.now,#remPop .rl .dsel.none{min-height:30px;padding:0 12px}}
/* weeks tag: small black pill on the corner of the date tile (1w, 2w, 3w ... without payment) */
#remPop .dt .wk{position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;line-height:14px;padding:0 4px;box-sizing:content-box;border-radius:99px;background:#111;color:#fff;font-style:normal;font-size:10px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(255,255,255,.14);pointer-events:none}

/* ===== phase 3: labelled Skip / Undo, steadier row, group counts ===== */
#remPop .jp .sk{width:auto;min-width:38px;height:34px;padding:0 13px;gap:6px;font:inherit;font-size:13px;font-weight:600;color:var(--text);background:var(--card)}
#remPop .jp .sk svg{flex:none}
#remPop .jp .sk .sl{line-height:1}
@media (max-width:400px){#remPop .jp .sk{width:38px;padding:0}#remPop .jp .sk .sl{display:none}}   /* very narrow phones: icon only, so the name keeps its room */
#remPop .ra{min-width:58px;text-align:right}   /* amounts line up in one column, buttons too */
#remPop .rr,#remPop .rg,#remPop .rs,#remPop .remempty,#remPop .remnone{transition:opacity .15s,border-color .15s}
@media (hover:hover){#remPop .rr:hover{border-color:color-mix(in srgb,var(--mute) 55%,var(--line))}}
/* Print ON/OFF pill beside the reminder-day pill (desktop only: the script never builds it on a phone) */