/* ---------- selecting several to-dos (js/select.js; Drew, 2026-11-10 21:44, proposals/swipe-select-full.html S2b) ----------
   html.sel-on while anything is selected: circles instead of checkboxes, the lists locked (strip dimmed, a line under it),
   "Select all" on group headings, the bulk bar (phone / closed Duo / Mac) or open mode A's pane (open Duo). */

/* the row while it's swiped: the row slides, the reveal under it fills a circle (or empties it) as it nears the line */
.trow-wrap.sel-mv > .trow { will-change: transform; z-index: 1; }
.sel-rv { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; box-sizing: border-box; font-size: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, var(--app)); color: var(--accent); overflow: hidden; pointer-events: none; }
.sel-rv .ic { position: relative; flex: none; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px currentColor;
  transform: scale(calc(.7 + var(--p, 0) * .3)); }
.sel-rv .ic i { position: absolute; inset: 0; border-radius: 12px; background: currentColor; transform: scale(var(--p, 0)); }
.sel-rv .ic svg { position: relative; color: var(--app); opacity: var(--p, 0); }
.sel-rv .lb { opacity: calc(var(--p, 0) * 1.4 - .4); }
.sel-rv.uns { background: var(--fill8); color: var(--ink55); }
.sel-rv.uns .ic i { transform: scale(calc(1 - var(--p, 0))); }
.sel-rv.uns .ic svg { opacity: calc(1 - var(--p, 0)); }
.sel-rv.armed { background: var(--accent); color: #fff; }
.sel-rv.uns.armed { background: var(--ink40); }
.sel-rv.armed .ic { transform: scale(1.14); transition: transform 140ms cubic-bezier(.3,1.6,.5,1); }
.sel-rv.armed .ic svg { color: var(--accent); opacity: 1; } .sel-rv.uns.armed .ic svg { opacity: 0; }
.sel-rv.armed .lb { opacity: 1; }
.mac .sel-rv { padding-left: 20px; }

/* selecting: circles, the picked rows tinted; a done to-do (Logbook) shows as unpicked until it's picked */
html.sel-on #scr-tasks .trow-wrap > .trow .box, html.sel-on #scr-tasks .trow-wrap > .trow .box::before { border-radius: 50%; }
html.sel-on #scr-tasks .trow-wrap:not(.is-sel) > .trow .box { box-shadow: inset 0 0 0 1.6px var(--ink22); }
html.sel-on #scr-tasks .trow-wrap:not(.is-sel) > .trow .box::before { transform: scale(0); opacity: 0; }
html.sel-on #scr-tasks .trow-wrap:not(.is-sel) > .trow .box svg path { stroke-dashoffset: 16; }
html.sel-on #scr-tasks .trow-wrap.is-sel > .trow .box { box-shadow: none; }
html.sel-on #scr-tasks .trow-wrap.is-sel > .trow .box::before { transform: scale(1); opacity: 1; }
html.sel-on #scr-tasks .trow-wrap.is-sel > .trow .box svg path { stroke-dashoffset: 0; }
html.sel-on #scr-tasks .trow-wrap.is-sel > .trow { background: color-mix(in srgb, var(--accent) 12%, var(--app)); }
html.sel-on .mac #scr-tasks .trow-wrap.is-sel > .trow { background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); }
html.sel-on #scr-tasks .trow-wrap > .trow.done .t-title { text-decoration: none; }

/* the lists are locked */
html.sel-on #scr-tasks .scope-strip { opacity: .4; pointer-events: none; }
html.sel-on #scr-tasks .tasks-head [data-act="tasks-more"] { opacity: .4; pointer-events: none; }
.sel-line { display: flex; align-items: center; gap: 6px; margin: -6px 16px 6px; min-height: 26px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.sel-line b { color: var(--ink85); }
.sel-line svg { flex: none; }
.sel-line .sel-x { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -4px; border-radius: 14px; color: var(--accent); }
.mac .sel-line { margin: 0 20px 6px; }
.sel-all { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; padding: 0 2px; font-size: 13.5px; font-weight: 650; letter-spacing: 0; color: var(--accent); white-space: nowrap; }
.tlist .group .sel-all { align-self: center; }

/* the bulk bar: phone / closed Duo / Mac; above the bottom bar (--bar-h, js/navbar.js) */
.sel-bar { position: fixed; z-index: 62; left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); bottom: calc(max(var(--bar-h, 0px), var(--sab)) + 10px); max-width: 520px; margin: 0 auto;
  height: 56px; box-sizing: border-box; padding: 0 7px; display: flex; align-items: center; gap: 5px; border-radius: 28px;
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--md);
  transform: translateY(calc(100% + 30px)); transition: transform 300ms var(--ease); }
.sel-bar.in { transform: none; }
.sel-bar button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; }
.sel-bar .sb-x { width: 38px; height: 38px; border-radius: 19px; color: var(--ink55); }
.sel-bar .sb-n { flex: 1; min-width: 0; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-bar .sb-n b { font-size: 15px; font-weight: 750; color: var(--ink); }
.sel-bar .sb-n small { display: block; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--ink40); }
.sel-bar .sb-b { width: 42px; height: 42px; border-radius: 21px; background: var(--fill8); color: var(--ink85); }
.sel-bar .sb-b.pri { background: var(--accent); color: #fff; }
.sel-bar .sb-d { display: none; } /* Details: the open Duo in portrait, where the card would cover the list */
html.op-port .sel-bar .sb-d { display: grid; }
.sel-bar .sb-b:active, .sel-bar .sb-x:active { opacity: .7; }
html.sel-on .phone .fab, html.sel-on .phone .fab-find { visibility: hidden; }
html.sel-on .phone #scr-tasks { padding-bottom: calc(120px + var(--sab) + 60px); }
.mac .sel-bar { left: calc(50% + 120px); right: auto; width: 420px; transform: translate(-50%, 90px); }
.mac .sel-bar.in { transform: translate(-50%, 0); }
.side-rail .phone .sel-bar { bottom: calc(var(--sab) + 10px); }
@media (prefers-reduced-motion: reduce) { .sel-bar { transition: none; } }

/* the bulk choices (popovers) */
.pop.sel-pop .opt.red { color: var(--redText); }
.pop.sel-move { width: 300px; }
.pop.sel-move .search { all: unset; box-sizing: border-box; display: block; width: calc(100% - 20px); margin: 2px 10px 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--fill8); font-size: 16px; color: var(--ink); }
.pop.sel-move .opts { max-height: 46vh; overflow-y: auto; }
.pop .opt.muted { color: var(--ink40); cursor: default; }

/* the open Duo: open mode A's second pane (open.css): .op-det.has-ms */
.op-ms { display: none; }
.op-det.has-ms .op-ms { display: block; }
.op-det.has-ms .op-tm, .op-det.has-ms .op-hint { display: none !important; }
.op-ms .ms-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 8px 16px; background: inherit; }
html.op-split .phone .op-det .op-ms .ms-h { background: var(--app); }
html.op-port .phone .op-det .op-ms .ms-h { background: var(--sheet); }
.op-ms .ms-h .op-x + .op-x { margin-left: -4px; }
.op-ms .ms-h b { flex: 1; min-width: 0; font-size: 22px; line-height: 28px; font-weight: 750; letter-spacing: -.01em; }
.op-ms .ms-h b small { display: block; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink40); }
.op-ms .ms-g { padding: 10px 16px 2px; font-size: 12.5px; font-weight: 700; color: var(--ink40); text-transform: uppercase; letter-spacing: .04em; }
.op-ms .ms-t { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px 0 16px; font-size: 15px; color: var(--ink85); }
.op-ms .ms-t .l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ms .ms-c { flex: none; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.op-ms .ms-t button { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; color: var(--ink40); }
.op-ms .ms-r { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px; box-sizing: border-box; box-shadow: inset 0 1px 0 var(--line); }
.op-ms .ms-r:first-of-type { margin-top: 8px; }
.op-ms .ms-r .k { width: 64px; flex: none; font-size: 14px; color: var(--ink55); font-weight: 500; }
.op-ms .ms-r .v { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.op-ms .ms-r .chip { all: unset; box-sizing: border-box; cursor: pointer; height: 32px; padding: 0 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--fill8); font-size: 14px; font-weight: 600; color: var(--ink85); white-space: nowrap; }
.op-ms .ms-a { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 16px; box-shadow: inset 0 1px 0 var(--line); }
.op-ms .ms-a .btn { all: unset; box-sizing: border-box; cursor: pointer; height: 40px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; background: var(--fill8); font-size: 15px; font-weight: 650; color: var(--ink85); }
.op-ms .ms-a .btn.red { color: var(--redText); }
.op-ms .ms-a .btn.pri { background: var(--accent); color: #fff; }

/* the swipe log's Oops button (dev, off by default: Settings → Developer → Swipe log) */
.sel-oops { all: unset; box-sizing: border-box; cursor: pointer; position: fixed; z-index: 90; top: calc(var(--sat, 0px) + 6px); left: 50%; transform: translateX(-50%); height: 28px; padding: 0 12px; border-radius: 14px;
  font: 700 12.5px -apple-system, system-ui, sans-serif; color: var(--orangeText); background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--glassRing); }
.sel-oops.hit { background: var(--orangeText); color: #fff; }