/* ── DENSITY TOKENS ───────────────────────────────────────────────────────
   One source of truth for card metrics, so every card type moves together
   instead of each surface carrying its own hard-coded numbers (Haseeb,
   1 Sep 2026 — the settings control was changing task rows and nothing else).
   EVERY card reads these: Today's task rows and calendar rows, the Manager's
   board cards, client-page lists. Change a number here, not in a page.
   `normal` is exactly the geometry that shipped before, so nothing moves until
   the control is actually used. */
:root{
  --card-pad-x:18px;      /* horizontal padding of a list row      */
  --card-pad-y:12px;      /* vertical padding of a stacked card    */
  --card-min-h:50px;      /* list-row height                       */
  --card-gap:14px;        /* gap between a row's own parts         */
  --card-stack:10px;      /* gap between cards                     */
  --card-title:16px;      /* row title                             */
  --card-title-sm:14px;   /* title on the denser board card        */
  --card-meta:12px;       /* times and other inline meta            */
  /* CHIP — .row-tag is the gold standard (Haseeb, 1 Sep 2026) and every chip
     on a card takes its geometry from these three, so nothing declares its own
     size, padding or radius ever again. Only COLOUR varies per chip. */
  --chip-font:8.5px;
  --chip-pad:2px 7px;
  --chip-radius:100px;
}
html[data-density="tight"]{
  --chip-font:8px; --chip-pad:1px 6px;
  --card-pad-x:13px; --card-pad-y:8px;  --card-min-h:40px;
  --card-gap:9px;    --card-stack:6px;  --card-title:14.5px;
  --card-title-sm:13px; --card-meta:11px;
}
html[data-density="relaxed"]{
  --chip-font:9.5px; --chip-pad:3px 9px;
  --card-pad-x:22px; --card-pad-y:16px; --card-min-h:62px;
  --card-gap:11px;   --card-stack:14px; --card-title:17px;
  --card-title-sm:15px; --card-meta:12.5px;
}
/* A phone is already tight for width — relaxed should mean roomier, not
   oversized type (Haseeb: "the font goes too large for tasks on mobile"). The
   title tops out well below the desktop step at every density. */
@media(max-width:640px){
  :root{ --card-title:15px; --card-title-sm:13.5px; }
  html[data-density="tight"]{ --card-title:13.5px; --card-title-sm:12.5px; }
  html[data-density="relaxed"]{ --card-title:15.5px; --card-title-sm:14px; }
}

/* ─── assets/task-tile.css ──────────────────────────────────────────
   TaskTile component styles. Non-compact (.tt-row) is the Today gold
   standard card, ported verbatim from focus.html. .tt-row-compact is the
   flatter list-row style used by client-page.js (Tasks tab / home).
   Relies on the shared :root custom properties already defined by every
   host page (--card, --border, --done, --dim, --mono, --ease, ...). ── */

/* ── card row (Today) ──
   The row owns its own vertical rhythm (margin-bottom) and a width cap, rather
   than leaning on whatever gap a given host container happens to set — so any
   consumer (Today's flex list, client-page's home/tasks lists) gets the same
   ~10px breathing room and the same column cap without per-page CSS. Note:
   focus.html's own `.list{gap:8px}` still applies on top of this (that file
   isn't owned by this pass) — rows there will render with ~18px between them
   until that gap is removed/reconciled. */
/* Card faces are not text. A long-press on a phone was selecting the title
   and raising the iOS callout menu instead of starting a drag or a hold —
   worst on the draggable cards, where the gesture is the whole interaction.
   Inputs inside a card keep their selection (see the rule below). */
.tt-row{display:flex;align-items:center;gap:var(--card-gap);padding:0 var(--card-pad-x);min-height:var(--card-min-h);max-width:560px;margin-bottom:var(--card-stack);background:var(--card);border:1px solid var(--border);border-radius:14px;transition:border-color 0.2s var(--ease),background 0.35s var(--ease),box-shadow 0.2s var(--ease),min-height 0.4s var(--ease);position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tt-row input,.tt-row textarea,.tt-row [contenteditable]{user-select:text;-webkit-user-select:text}
.tt-row:last-child{margin-bottom:0}
.tt-row:hover{border-color:var(--border-hi);background:var(--card-hi)}
.tt-row.dragging{opacity:0.6;cursor:grabbing;box-shadow:0 14px 40px -10px rgba(0,0,0,0.6);border-color:var(--border-hi);z-index:5}
.tt-row.drop-target{border-color:var(--done)}
.tt-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color 0.25s var(--ease-spring),background 0.25s var(--ease-spring),box-shadow 0.25s var(--ease-spring);position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.tt-check .tt-tick{width:10px;height:10px;fill:var(--bg);opacity:0;transform:scale(0.5);transition:all 0.25s var(--ease-spring)}
.tt-row:hover .tt-check{border-color:var(--muted)}
/* ── checklist-progress donut (.tt-prog) ──
   The circle's ring IS the progress read: a dim arc lying exactly on the 2px
   border centreline, 12 o'clock clockwise (the -90deg rotation). Deliberately
   muted — green stays reserved for completing/completed. Hidden once the row
   is done/committed, where the solid green circle covers it. */
.tt-prog{position:absolute;top:-2px;left:-2px;width:18px;height:18px;transform:rotate(-90deg);pointer-events:none}
.tt-prog circle{fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;opacity:0.85}
.tt-row.done .tt-prog,.tt-row.committed .tt-prog{display:none}
.tt-row.pressing .tt-check,.row.pressing .check{border-color:var(--done)}
/* ── kind glyph INSIDE the check circle (Haseeb, 29 Aug 2026) ──
   One circular slot per row: it shows what the card IS at rest, and yields to
   the tick once the card is done. Mirrors the Manager board's .check .row-kind.
   These override the detail-mode gate below (.tt-plan/.tt-auto are display:none
   until html.task-detail-full) on purpose — in the tail a glyph is an optional
   detail, but inside the circle it is the card's identity and must always read.
   Absolutely positioned so it shares the slot with the tick and the donut. */
.tt-check .tt-plan,.tt-check .tt-auto,.tt-check .tt-reminder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0.65;pointer-events:none;transition:opacity 0.2s var(--ease)}
.tt-check .tt-plan svg,.tt-check .tt-auto svg,.tt-check .tt-reminder svg{width:10px;height:10px}
/* REMINDERS (Haseeb, 31 Aug 2026): no check ring — a faded filled disc with a
   larger DARK glyph punched out of it, so the bell reads as a cutout rather
   than a tick that happens to be a bell. The element is still the toggle, so
   tapping it completes the reminder exactly as before; only the look changes.
   Everywhere at once — the class is set in rowHTML, not per page. */
/* The check circle is the SAME control on every kind (Haseeb, 1 Sep 2026).
   Reminders and plans used to dress it as a filled identity disc with the
   glyph knocked out of it — which is why those rows had no way to be ticked at
   all. Identity now lives in .tt-kind after the title; this seat is only ever
   a check.
   What differs per kind is the GESTURE, not the look: task and event tick on a
   tap, plan / reminder / automation need the hold (see the surface wiring). */
/* ── CHIPS ────────────────────────────────────────────────────────────────
   ONE declaration for every chip on a card, across every page — the kind chip,
   the due chip, urgent, the board's tags, its due and its client count. They
   share geometry and differ ONLY in colour, which is the whole point: a new
   chip type is a colour rule, never a new set of metrics.
   Listed by selector rather than a shared class so the existing markup on
   three pages did not have to be rewritten to gain it. */
.tt-kind,.tt-due,.tt-urgent,.tt-repeat,.row-tag,.row-due,.cl-count{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--mono,inherit);font-size:var(--chip-font);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:var(--chip-pad);border-radius:var(--chip-radius);
  line-height:1.5;white-space:nowrap;flex-shrink:0;vertical-align:-.15em}
.tt-kind svg,.tt-repeat svg,.row-tag svg,.row-due svg{width:1.15em;height:1.15em;display:inline-block;fill:currentColor;flex:0 0 auto}
/* colour only, one per kind — the house aurora family so they read as a set */
.tt-kind{pointer-events:none}
.tt-kind-plan{color:#A5B4FC;background:rgba(129,140,248,.16)}
.tt-kind-reminder{color:#F9A8D4;background:rgba(244,114,182,.16)}
.tt-kind-event{color:#67E8F9;background:rgba(34,211,238,.16)}
.tt-kind-automation{color:#C4B5FD;background:rgba(167,139,250,.18)}
.tt-repeat{color:#6EE7B7;background:rgba(52,211,153,.14);pointer-events:none}
/* Tight drops the kind chip's label and rounds it to an icon-only badge. */
html[data-density="tight"] .tt-kind,html[data-density="tight"] .tt-repeat{padding:0;width:1.9em;height:1.9em;
  border-radius:50%;justify-content:center;gap:0}
html[data-density="tight"] .tt-kind-lbl{display:none}
.tt-row.done .tt-kind,.tt-row.committed .tt-kind{opacity:.5}
/* Where a chip is a SIBLING of the title rather than inside it — Today's rows,
   whose titles are nowrap+ellipsis on desktop and would clip it. */
.tt-row-body>.tt-kind,.row-body>.tt-kind,.tt-row-body>.tt-repeat{margin-left:6px;align-self:center}
.tt-row.done .tt-check .tt-plan,.tt-row.done .tt-check .tt-auto,.tt-row.done .tt-check .tt-reminder,
.tt-row.committed .tt-check .tt-plan,.tt-row.committed .tt-check .tt-auto,.tt-row.committed .tt-check .tt-reminder{opacity:0}
/* hold-to-complete: the card fills left→right with a living green gradient */
.tt-hold-fill{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(100deg, rgba(34,197,94,0.12), rgba(74,222,128,0.44) 60%, rgba(134,239,172,0.72));
  background-size:220% 100%;background-position:100% 0}
/* The board's cards reuse this exact wipe — same class, same animation, so
   holding a card feels identical on Today and the Manager. */
.tt-row.holding,.row.holding{overflow:hidden}
.tt-row.holding .tt-hold-fill,.row.holding .tt-hold-fill{opacity:1;animation:ttHoldFlow 1.3s linear infinite}
@keyframes ttHoldFlow{to{background-position:0% 0}}
.tt-row>.tt-check,.tt-row>.tt-row-body,.tt-row>.tt-time,.tt-row>.tt-plan,.tt-row>.tt-auto,.tt-row>.tt-reminder,.tt-row>.tt-bolt,.tt-row>.tt-drag-handle{position:relative;z-index:1}
.tt-row-body{flex:1;min-width:0;display:flex;align-items:center;gap:9px;overflow:hidden}
.tt-row-name{font-size:var(--card-title);font-weight:500;letter-spacing:-0.01em;color:var(--text);line-height:1.3;transition:color 0.25s ease;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.tt-row-name:hover{text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
.tt-due.over{background:rgba(248,113,113,0.13);color:var(--over);width:18px;height:18px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.tt-due.over svg{height:12px;width:auto}
.tt-due.today{background:rgba(74,222,128,0.1);color:var(--done)}
.tt-due.future{background:var(--surface-2);color:var(--dim);font-family:var(--mono, inherit)}
/* Urgent chip — same red pill as the board's .row-tag.urgent, sized to the
   bigger Today card. Sits before the due chip in .tt-row-body. */
.tt-urgent{background:rgba(248,113,113,0.13);color:var(--over)}
/* ── time-of-day (a reminder that carries a real time) ──
   A MIRROR of focus.html's .evt-time, declaration for declaration, plus the
   mono/uppercase that file applies to it through a shared group selector — a
   timed reminder and a meeting are the same fact on the day thread, so they
   must not be two typographies. Copied rather than shared because .evt-time
   lives in focus.html (calendar-event cards) while task rows live here, and
   this file is deliberately self-contained: every other page that loads it
   would otherwise inherit nothing. If .evt-time is ever restyled, restyle this
   with it. Sits outside .tt-row-body at the row's right edge, the same
   position .evt-time occupies on an event card. */
.tt-time{font-family:var(--mono, inherit);font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);flex-shrink:0;font-variant-numeric:tabular-nums;padding-left:6px}
/* …and the same two state colours the event card gives it */
.tt-row.now .tt-time{color:#F87171}
.tt-row.done .tt-time,.tt-row.committed .tt-time{opacity:0.45}
/* effort meter + client-nav — machine-facing, hidden until Settings → Task detail: Full */
.tt-eff-meter,.tt-eff-nav{display:none}
html.task-detail-full .tt-eff-meter{display:inline-flex}
html.task-detail-full .tt-eff-nav{display:inline-flex}
.tt-eff-meter{align-items:flex-end;gap:1.5px;height:9px;flex-shrink:0;opacity:0.6}
.tt-eff-meter i{display:block;width:2px;border-radius:1px;background:var(--faint)}
.tt-eff-meter i:nth-child(1){height:3.5px}
.tt-eff-meter i:nth-child(2){height:6px}
.tt-eff-meter i:nth-child(3){height:9px}
.tt-eff-meter.tt-eff-low i:nth-child(1){background:var(--dim)}
.tt-eff-meter.tt-eff-medium i:nth-child(1),.tt-eff-meter.tt-eff-medium i:nth-child(2){background:var(--dim)}
.tt-eff-meter.tt-eff-high i{background:var(--dim)}
.tt-eff-nav{align-items:center;justify-content:center;font-size:9px;color:var(--dim);cursor:pointer;padding:1px 3px;border-radius:5px;flex-shrink:0;transition:color 0.18s ease,background 0.18s ease}
.tt-eff-nav:hover{color:var(--text);background:var(--surface-2)}
/* "Happening now" is the border + glow alone — the .tt-now-tag word beside the
   title was removed 27 Aug 2026 (duplicate signal). */
/* The next thing up REFLECTS the now-line above it: a 1px border carrying the
   marker's own red (#F87171) at the top, fading to nothing by the bottom, as
   if the line were casting down onto the card.
   Half strength (Haseeb, 1 Sep 2026) — a reflection, not a stripe.
   Done with two background layers clipped to padding-box and border-box — the
   gradient-border trick — deliberately NOT a mask-composite ring: masked
   layers are the thing that renders black on iOS in this stack. The card's own
   background has to be restated in the padding-box layer, which is why hover
   needs its own copy. */
.tt-row.now{border-color:transparent;box-shadow:none;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(180deg,rgba(248,113,113,.5) 0%,rgba(248,113,113,0) 100%) border-box}
.tt-row.now:hover{border-color:transparent;
  background:linear-gradient(var(--card-hi),var(--card-hi)) padding-box,
             linear-gradient(180deg,rgba(248,113,113,.5) 0%,rgba(248,113,113,0) 100%) border-box}
/* drag handle */
.tt-drag-handle{margin-left:auto;width:24px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--dim);opacity:0;cursor:grab;transition:opacity 0.2s ease,color 0.2s ease;flex-shrink:0;touch-action:none}
.tt-row:hover .tt-drag-handle{opacity:0.55}
/* Touch has no hover, so a hover-only handle is an invisible one — on a phone
   the handle IS the reordering affordance, so it always shows there. */
html.pr-touch .tt-drag-handle{opacity:.45}
.tt-drag-handle:hover{opacity:1;color:var(--muted)}
.tt-drag-handle:active{cursor:grabbing}
.tt-drag-handle svg{width:15px;height:15px;pointer-events:none}
/* DONE (step 1 — local) */
.tt-row.done{background:transparent;border-color:transparent;min-height:38px}
.tt-row.done .tt-drag-handle{opacity:0;pointer-events:none}
.tt-row.done .tt-check{background:linear-gradient(135deg,var(--done),#86EFAC);border-color:transparent}
.tt-row.done .tt-check .tt-tick{opacity:1;transform:scale(1)}
.tt-row.done .tt-row-name{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint);font-weight:400}
.tt-row.done .tt-due{opacity:0.45}
/* COMMITTED (step 2 — written back) */
.tt-row.committed .tt-check{background:linear-gradient(135deg,var(--done),#86EFAC);border-color:transparent;box-shadow:0 0 0 3px rgba(74,222,128,0.18)}
.tt-row.committed .tt-check .tt-tick{opacity:1;transform:scale(1)}
.tt-row.committed .tt-row-name{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint);font-weight:400}

@media(max-width:560px){
  .tt-row{align-items:center;min-height:58px;padding:12px 15px}
  .tt-row-body{display:block;overflow:visible}
  .tt-row-name{display:inline;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;font-size:var(--card-title)}
  .tt-due.over{margin-left:6px;vertical-align:-3px}
  .tt-due.today{margin-left:6px}
  .tt-drag-handle{display:flex;opacity:0.4;width:40px;height:44px}
}

/* ── compact list row (client-page: Tasks tab / home Next-actions / Quick-wins) ──
   Not currently instantiated by any caller (client-page.js renders the full
   .tt-row card everywhere, not compact:true) but kept as a public TaskTile
   variant — it opts back out of the card row's margin/width cap above since
   its own layout is a flat, full-bleed, border-separated list. */
.tt-row-compact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;margin-bottom:0;max-width:none;border-bottom:1px solid var(--border);background:none;border-left:none;border-right:none;border-top:none;width:100%;min-width:0;text-align:left;font:inherit;cursor:pointer;color:inherit}
.tt-row-compact:last-child{border-bottom:none}
.tt-row-compact:hover .tt-row-name{text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
.tt-row-compact .tt-row-name{font-size:13px;font-weight:400;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.tt-row-compact .tt-row-tail{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tt-row-compact .tt-due{font-family:var(--mono, inherit);color:var(--dim);background:var(--surface-2)}
.tt-row-compact .tt-due.over{width:auto;height:auto;padding:3px 8px;color:var(--neg, var(--over));background:rgba(248,113,113,0.1)}
.tt-row-compact .tt-due.over svg{display:none}
.tt-row-compact .tt-due.over::before{content:'Overdue'}
.tt-row-compact .tt-due.today{color:var(--pos, var(--done));background:rgba(74,222,128,0.1)}
.tt-row-compact .tt-eff-meter,.tt-row-compact .tt-eff-nav{display:none !important}
.tt-bolt{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);border:none;cursor:pointer;transition:all 0.2s var(--ease);padding:0}
.tt-bolt svg{width:10px;height:10px}
.tt-row-compact:hover .tt-bolt{background:var(--surface-hi);color:var(--text)}
/* discrete kind marker: a task that IS a plan's board card. Minimal mode (the
   default) hides it like the effort meter; the bolt stays — it's a working
   button (data-tt-bolt), not decoration. */
.tt-plan{flex-shrink:0;display:none;align-items:center;color:var(--dim);opacity:0.75}
/* …but a plan TILE (chat proposal / plans strip) keeps it — there the glyph
   is the tile's identity, not a detail chip */
html.task-detail-full .tt-plan,.tt-plan-tile .tt-plan{display:inline-flex}
.tt-plan svg{width:13px;height:13px}
/* automation kind glyph — same detail-chip rules as .tt-plan (hidden in
   minimal mode) EXCEPT on an automation tile (.tt-auto-tile — the client
   page's automations strip), where the glyph is the tile's identity. */
.tt-auto{flex-shrink:0;display:none;align-items:center;color:var(--dim);opacity:0.75}
html.task-detail-full .tt-auto,.tt-auto-tile .tt-auto{display:inline-flex}
.tt-auto svg{width:13px;height:13px}
/* reminder kind glyph. Unlike .tt-plan and .tt-auto this is NOT hidden in
   minimal mode: those two are detail chips on a board card, whereas this says
   the row is not a board card at all — it lives in Apple Reminders, it can't be
   dragged, and ticking it writes somewhere else. That is the one thing worth
   knowing when a reminder sits in an ordinary list among real tasks.
   Same dim/13px weight, so it stays a marker rather than a badge. */
.tt-reminder{flex-shrink:0;display:inline-flex;align-items:center;color:var(--dim);opacity:0.75}
.tt-reminder svg{width:13px;height:13px}

/* ── plan tile: a compact row carded up as a standalone, tappable tile ──
   ONE chrome for both callers — client-page.js planTileHTML (plans strip) and
   client-chat.js renderPlanEvent (transcript) — which used to re-declare the
   same card twice, in client-page.css and in client-chat.js's injected sheet.

   The card sits ON THE ROW (rowHTML opts.cls:'tt-plan-tile'), not on a wrapper
   div: the row is then the rect the eye sees, so the tile→modal FLIP
   (TaskModal.morph) morphs from the real card AND its ghost — a clone of that
   same node, reparented to <body> — still paints as one. The wrapper is left a
   bare click/data container. Insets equal the old wrapper+row sums (3+11/16+2).
   .pl-tile / .cc-plan-tile stay as wrapper-level aliases for any older markup. */
.tt-row-compact.tt-plan-tile,.pl-tile>.tt-row-compact,.cc-plan-tile>.tt-row-compact{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;transition:border-color 0.2s var(--ease)}
.tt-row-compact.tt-plan-tile:hover,.pl-tile:hover>.tt-row-compact,.cc-plan-tile:hover>.tt-row-compact{
  border-color:var(--border-hi)}
.pl-tile,.cc-plan-tile{display:block;min-width:0;cursor:pointer;background:none;border:none;padding:0}

/* ─── Neutral data mode: pearl instead of green/red (Haseeb, 20 Aug 2026).
   The material vars are (re)declared here because task tiles also render on
   pages that load neither perf-sections.css nor focus.html's neutral block
   (projects.html) — an undefined var() would void the whole background. Same
   values everywhere; the duplicate is harmless. */
html.data-neutral{
  --pearl-hi:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 58%);
  --pearl-iri:linear-gradient(120deg, rgba(129,140,248,0.34), rgba(244,114,182,0.26) 32%, rgba(34,211,238,0.30) 62%, rgba(167,139,250,0.32) 95%);
  --pearl-base:linear-gradient(160deg,#ffffff,#e9ecf6);
}
html.data-neutral .tt-row.done .tt-check,
html.data-neutral .tt-row.committed .tt-check{
  background:var(--pearl-hi),var(--pearl-iri),var(--pearl-base);
  background-size:100% 100%,240% 240%,100% 100%}
html.data-neutral .tt-check .tt-tick{fill:#23233B}
html.data-neutral .tt-row.committed .tt-check{box-shadow:0 0 0 3px rgba(167,139,250,0.22)}
html.data-neutral .tt-row.pressing .tt-check,
html.data-neutral .tt-row.drop-target{border-color:rgba(221,217,255,0.8)}
html.data-neutral .tt-hold-fill{
  background:linear-gradient(100deg, rgba(221,217,255,0.14), rgba(255,217,238,0.45) 60%, rgba(213,246,255,0.72));
  background-size:220% 100%;background-position:100% 0}
html.data-neutral .tt-due.over{background:rgba(255,255,255,0.12);color:#FFFFFF}
html.data-neutral .tt-due.today{background:rgba(221,217,255,0.16);color:#FFFFFF}
html.data-neutral .tt-row-compact .tt-due.over{background:rgba(255,255,255,0.12);color:#FFFFFF}
html.data-neutral .tt-row-compact .tt-due.today{background:rgba(221,217,255,0.16);color:#FFFFFF}
html.data-neutral .tt-urgent{background:rgba(255,255,255,0.12);color:#FFFFFF}

/* ── Per-label switches (rzvCardLabels; Settings → Board / Today — Haseeb,
   23 Aug 2026). cl-off-<k> classes come from each page's head bootstrap.
   !important: OFF must beat task-detail-full's re-shows above. ── */
html.cl-off-due .tt-due{display:none!important}
html.cl-off-checklist .tt-prog{display:none!important}
html.cl-off-effort .tt-eff-meter{display:none!important}
html.cl-off-nav .tt-eff-nav{display:none!important}