/* Tasks filters (js/taskfilter.js; Drew picked A of proposals/tasks-filters.html, 2026-11-10 19:38, "in the elipsis") */
/* while a filter is on: the line under the strip, the ⋯'s blue dot, the list's last line */
.tf-line { display: flex; align-items: center; gap: 4px; margin: -4px 16px 8px; padding: 2px 4px 2px 2px; border-radius: 10px; background: var(--a8); color: var(--accent); font-size: 13px; font-weight: 600; }
.tf-line[hidden] { display: none; }
.tf-line .tf-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 8px; color: inherit; font: inherit; text-align: left; }
.tf-line .tf-l span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-line .tf-l svg { flex: none; }
.tf-line .tf-x { flex: none; padding: 5px 9px; border-radius: 7px; color: inherit; font: inherit; font-weight: 700; }
.tf-line button:active { opacity: .6; }
.mac .tf-line { margin: 0 20px 8px; }
[data-act="tasks-more"].tf-on { position: relative; }
[data-act="tasks-more"].tf-on::after { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--app); }
.tf-hidden { padding: 12px 16px 4px 56px; font-size: 13.5px; color: var(--ink40); }
.tf-hidden button { margin-left: 6px; color: var(--accent); font: inherit; font-weight: 600; }
.tf-empty button { display: block; margin: 14px auto 0; height: 34px; padding: 0 14px; border-radius: 11px; background: var(--a12); color: var(--accent); font: inherit; font-weight: 700; }

/* the panel: a sheet from the bottom (narrow), a popover under the ⋯ (wide) */
.tf-catch { position: fixed; inset: 0; z-index: 900; }
.tf-panel { position: fixed; z-index: 901; display: flex; flex-direction: column; background: var(--sheet); color: var(--ink); font-size: 15px; -webkit-user-select: none; user-select: none; }
.tf-sheet { left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 0 var(--line), 0 -14px 40px rgba(0,0,0,.28); transform: translateY(100%); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.tf-sheet.in { transform: none; }
html.side-rail .tf-sheet { right: var(--sar, 0px); }
.tf-pop { width: 360px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.32); overflow: hidden; }
.tf-grab { flex: none; width: 38px; height: 5px; border-radius: 3px; background: var(--ink22); margin: 8px auto 0; }
.tf-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.tf-body::-webkit-scrollbar { display: none; }
.tf-panel button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.tf-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.tf-h b { flex: 1; font-size: 19px; line-height: 24px; font-weight: 700; }
.tf-panel .tf-clear { height: 30px; padding: 0 12px; border-radius: 9px; background: var(--fill8); font-size: 13.5px; font-weight: 650; }
.tf-seg { display: flex; margin: 4px 16px 10px; padding: 2px; border-radius: 10px; background: var(--fill8); }
.tf-panel .tf-seg button { flex: 1; padding: 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink55); }
.tf-panel .tf-seg button[aria-pressed="true"] { background: var(--thumb); color: var(--ink); box-shadow: var(--pill); }
.tf-sec { padding: 8px 0 4px; box-shadow: inset 0 1px 0 var(--line); }
.tf-sh { display: flex; align-items: baseline; gap: 12px; padding: 2px 16px 6px; }
.tf-sh b { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink55); }
.tf-panel .tf-sh button { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.tf-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--fill8); color: var(--ink40); }
.tf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.tf-search input::-webkit-search-cancel-button { display: none; }
.tf-area { display: flex; align-items: center; gap: 6px; padding: 6px 16px 2px; font-size: 12.5px; font-weight: 700; color: var(--hf); }
.tf-area i { width: 8px; height: 8px; border-radius: 2px; background: var(--hue); }
.tf-panel .tf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 4px 16px; box-sizing: border-box; text-align: left; }
.tf-row:active { background: var(--fill4); }
.tf-cb { flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.6px var(--ink25); display: grid; place-items: center; color: #fff; }
.tf-row.on .tf-cb { background: var(--accent); box-shadow: none; }
.tf-tile { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--hue); background: color-mix(in srgb, var(--hue) 16%, transparent); }
.tf-row .l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-row .c { font-size: 13px; font-weight: 600; color: var(--ink40); font-variant-numeric: tabular-nums; }
.tf-none { padding: 6px 16px 10px; font-size: 13.5px; color: var(--ink40); }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.tf-panel .tf-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: var(--fill8); font-size: 13.5px; font-weight: 600; color: var(--ink85); }
.tf-panel .tf-chip.on { background: var(--a12); color: var(--accent); }
.tf-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--hue); }
.tf-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--sheet); box-shadow: inset 0 1px 0 var(--line); }
.tf-foot span { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink55); }
.tf-panel .tf-done { height: 36px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 650; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .tf-sheet { transition: none; } }