/* ============================================================================
   Clay — the Ledge Dashboard skin.

   Originally a claymorphism / neumorphic comp (soft "cloudy" inset + raised shadows).
   Flattened per request: the pastel `tone-*` palette, Nunito, and the purple accent
   (--lw-accent, the Import-from-Anaqua button colour) are all kept, but the puffy
   neumorphic shadows are gone — surfaces are now clean white cards with hairline
   borders and, at most, a single soft drop shadow. Per-status / per-owner accents are
   still handled by the `.tone-*` classes (see ledge_extras.status_tone / owner_tone).

   The class names keep the `clay-` prefix so templates don't need to change.
   The *rules* are scoped under `.clay-root` so they can't leak into the other
   (Tailwind) pages that share base.html. The design *tokens* are not: they live on
   `:root` so the item drawer — which base.html hosts on every page, Tailwind ones
   included — can read them. Custom properties paint nothing on their own, so this
   costs those pages no appearance; only a rule that names a clay class does anything.
   ============================================================================ */

/* ---- design tokens (flat surfaces, kept palette) --------------------------
   On :root, not .clay-root, so the drawer can wear them off-dashboard (see above).
   A page's clay *skin* — canvas, text colour, font — still comes from .clay-root
   below, which is what actually marks an element as a clay page. */
:root {
  --lw-canvas: #eef0f3;
  --lw-surface: #ffffff;
  --lw-surface-2: #f1f3f6;
  --lw-border: #e3e6ec;
  --lw-divider: #edeff2;
  --lw-text: #2f3440;
  --lw-text-2: #454c5b;
  --lw-text-3: #6e7686;
  --lw-text-4: #a4abb8;
  --lw-accent: #7a5af5;
  --lw-on-accent: #ffffff;
  --lw-accent-soft: #ece8fe;
  --lw-accent-soft-text: #6544cf;
  --lw-radius: 16px;
  --lw-radius-sm: 12px;
  --lw-shadow: 0 1px 2px rgba(70, 80, 100, .06);
  --lw-thead-text: #8a92a2;
  --lw-overdue: var(--tone-rose-text);
  --lw-today: var(--tone-amber-text);
  --lw-fs: 17px; /* DEFAULT table/row text size (single source of truth) — matches the former A+ max. The A−/A+ control overrides this on <html> once the user clicks it, so the drawer follows the choice too (_headboard.html). */
  --lw-font: 'Nunito', system-ui, -apple-system, sans-serif;
  --lw-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* tone tokens (status / owner accent colours) */
  --tone-slate-bg: #eceaf5;   --tone-slate-text: #6b6688;   --tone-slate-ring: #ddd9ee;   --tone-slate-solid: #9b95ba;
  --tone-rose-bg: #fbe7ee;    --tone-rose-text: #bd587e;   --tone-rose-ring: #f3d2de;    --tone-rose-solid: #e07a9e;
  --tone-amber-bg: #fbf0dd;   --tone-amber-text: #a9762c;   --tone-amber-ring: #f1e1c1;   --tone-amber-solid: #e0a44f;
  --tone-sky-bg: #e4f0fa;     --tone-sky-text: #4d84b0;     --tone-sky-ring: #cee3f3;     --tone-sky-solid: #74a9d4;
  --tone-indigo-bg: #e8edf7;  --tone-indigo-text: #566aa0;  --tone-indigo-ring: #d6deef;  --tone-indigo-solid: #7d8fc4;
  --tone-emerald-bg: #e2f3e9; --tone-emerald-text: #4c9569; --tone-emerald-ring: #cbe8d5; --tone-emerald-solid: #6cbf90;
  --tone-blue-bg: #e6ecfb;    --tone-blue-text: #5870c0;    --tone-blue-ring: #d3ddf6;    --tone-blue-solid: #8095e0;
  --tone-red-bg: #fbe5e5;     --tone-red-text: #bd5757;     --tone-red-ring: #f3d1d1;     --tone-red-solid: #e07a7a;
  --tone-violet-bg: #efe9f9;  --tone-violet-text: #7a63b3;  --tone-violet-ring: #e2d7f3;  --tone-violet-solid: #a78bda;
  --tone-yellow-bg: #fff1b5;  --tone-yellow-text: #6f5d0b;  --tone-yellow-ring: #f6e18f;  --tone-yellow-solid: #ecdb78;
}

/* ---- the clay page skin ---------------------------------------------------
   What marks a whole page as clay-skinned (dashboard, login, members). Deliberately
   separate from the tokens above: the drawer needs the tokens on Tailwind pages, but
   must not drag a full-viewport canvas onto them. */
.clay-root {
  min-height: 100vh;
  background: var(--lw-canvas);
  color: var(--lw-text);
  font-family: var(--lw-font);
}

/* ---- per-tone accent variables (status badges, owner avatars, stats, dots) -
   Unscoped, like the tokens: the drawer's status badge wears a .tone-* class and
   renders off-dashboard. `tone-` is unique to this project, so nothing else matches. */
.tone-slate   { --t-bg:var(--tone-slate-bg);   --t-text:var(--tone-slate-text);   --t-ring:var(--tone-slate-ring);   --t-solid:var(--tone-slate-solid); }
.tone-rose    { --t-bg:var(--tone-rose-bg);    --t-text:var(--tone-rose-text);    --t-ring:var(--tone-rose-ring);    --t-solid:var(--tone-rose-solid); }
.tone-amber   { --t-bg:var(--tone-amber-bg);   --t-text:var(--tone-amber-text);   --t-ring:var(--tone-amber-ring);   --t-solid:var(--tone-amber-solid); }
.tone-sky     { --t-bg:var(--tone-sky-bg);     --t-text:var(--tone-sky-text);     --t-ring:var(--tone-sky-ring);     --t-solid:var(--tone-sky-solid); }
.tone-indigo  { --t-bg:var(--tone-indigo-bg);  --t-text:var(--tone-indigo-text);  --t-ring:var(--tone-indigo-ring);  --t-solid:var(--tone-indigo-solid); }
.tone-emerald { --t-bg:var(--tone-emerald-bg); --t-text:var(--tone-emerald-text); --t-ring:var(--tone-emerald-ring); --t-solid:var(--tone-emerald-solid); }
.tone-blue    { --t-bg:var(--tone-blue-bg);    --t-text:var(--tone-blue-text);    --t-ring:var(--tone-blue-ring);    --t-solid:var(--tone-blue-solid); }
.tone-red     { --t-bg:var(--tone-red-bg);     --t-text:var(--tone-red-text);     --t-ring:var(--tone-red-ring);     --t-solid:var(--tone-red-solid); }
.tone-violet  { --t-bg:var(--tone-violet-bg);  --t-text:var(--tone-violet-text);  --t-ring:var(--tone-violet-ring);  --t-solid:var(--tone-violet-solid); }
.tone-yellow  { --t-bg:var(--tone-yellow-bg);  --t-text:var(--tone-yellow-text);  --t-ring:var(--tone-yellow-ring);  --t-solid:var(--tone-yellow-solid); }

/* ---- keyframes ------------------------------------------------------------ */
@keyframes clayShimmer { 0% { background-position: -600px 0 } 100% { background-position: 600px 0 } }
@keyframes claySpin    { to { transform: rotate(360deg) } }
@keyframes claySlideIn { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: translateX(0) } }

/* ---- scrollbars ----------------------------------------------------------- */
.lw-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.lw-scroll::-webkit-scrollbar-thumb { background: rgba(110, 118, 138, .4); border-radius: 99px; }
.lw-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- form controls (flat, hairline border) --------------------------------
   .clay-input is unscoped: the drawer's comment box wears it and renders off-dashboard. */
.clay-input,
.clay-root select.lw-sel {
  width: 100%;
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  background-color: var(--lw-surface);
  color: var(--lw-text-2);
  font-family: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.clay-input:focus,
.clay-root select.lw-sel:focus {
  border-color: var(--lw-accent);
  box-shadow: 0 0 0 3px var(--lw-accent-soft);
}
.clay-input::placeholder { color: var(--lw-text-4); }

/* native select chevron */
select.lw-sel {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a59ebd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

/* the big rounded search box on the top bar */
.clay-root .clay-search {
  height: 42px;
  border: 1px solid var(--lw-border);
  border-radius: 11px;
  padding: 0 16px 0 42px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--lw-text);
  background-color: var(--lw-surface);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.clay-root .clay-search:focus {
  border-color: var(--lw-accent);
  box-shadow: 0 0 0 3px var(--lw-accent-soft);
}
.clay-root .clay-search::placeholder { color: var(--lw-text-4); }

/* ---- global search dropdown (the search box's cross-tab results) ---------- */
/* Anchored under the top-bar box; see _search_panel.html and the ledgeSearch Alpine component.
   Capped and scrollable because the panel holds up to SEARCH_LIMIT hits. */
.clay-root .clay-search-panel {
  max-height: min(62vh, 460px);
  overflow-y: auto;
  padding: 6px;
  text-align: left;
}
.clay-root .clay-search-hit {
  display: block; padding: 9px 11px; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
/* .is-active is set by arrow-key movement, so keyboard and mouse land on the same look. */
.clay-root .clay-search-hit:hover,
.clay-root .clay-search-hit.is-active { background: var(--lw-surface-2); }
.clay-root .clay-search-hit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clay-root .clay-search-hit-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.clay-root .clay-search-hit-ref {
  font-family: var(--lw-mono);
  font-size: 12.5px; font-weight: 700; color: var(--lw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clay-root .clay-search-hit-task {
  font-size: 12.5px; font-weight: 600; color: var(--lw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clay-root .clay-search-hit-meta { font-size: 11.5px; font-weight: 600; color: var(--lw-text-4); }
.clay-root .clay-search-note {
  margin: 0; padding: 10px 11px;
  font-size: 12px; font-weight: 600; color: var(--lw-text-4);
}

/* ---- raised panels (sidebar cards, table card) ---------------------------- */
.clay-panel {
  background: var(--lw-surface);
  border-radius: var(--lw-radius);
  border: 1px solid var(--lw-border);
  box-shadow: var(--lw-shadow);
}

/* small icon "chips" that head each sidebar panel */
.clay-panel-icon {
  width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
}

.clay-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lw-text-3);
}

/* ---- raised / accent buttons (top bar, import) ---------------------------- */
.clay-icon-btn {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--lw-border);
  background: var(--lw-surface); color: var(--lw-text-3); cursor: pointer;
  box-shadow: var(--lw-shadow);
  transition: background .12s, color .12s, border-color .12s;
}
.clay-icon-btn:hover { color: var(--lw-text); border-color: var(--lw-text-4); }
/* ---- row actions: Done + Delete (each arms a Confirm/Cancel step) --------- */
.clay-btn-delete {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--tone-red-solid); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--lw-shadow);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.clay-btn-delete:hover, .clay-btn-delete:focus-visible { filter: brightness(.94); }
.clay-btn-delete:active { transform: scale(.97); }
.clay-btn-delete.is-armed {
  box-shadow: 0 0 0 2px var(--lw-surface), 0 0 0 4px var(--tone-red-solid);
}

.clay-btn-done {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--tone-emerald-solid); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--lw-shadow);
  transition: background .12s, transform .12s, filter .12s;
}
.clay-btn-done:hover, .clay-btn-done:focus-visible { filter: brightness(.94); }
.clay-btn-done:active { transform: scale(.97); }

/* Neutral "Cancel" that backs out of an armed Done/Delete confirm. */
.clay-btn-cancel {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 40px; padding: 0 18px; border: 1px solid var(--lw-divider); border-radius: 10px;
  cursor: pointer; background: var(--lw-surface); color: var(--lw-text-2);
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.clay-btn-cancel:hover, .clay-btn-cancel:focus-visible { color: var(--lw-text); border-color: var(--lw-text-4); }
.clay-btn-cancel:active { transform: scale(.97); }

/* The little "Mark filed?" / "Delete for good?" prompt shown while a confirm is armed. */
.clay-confirm-hint {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: var(--lw-text-3); text-align: center; padding: 0 2px 2px;
}

/* Restore an auto-filtered row back onto the working list (Deleted Items view). */
.clay-btn-restore {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--lw-accent); color: var(--lw-on-accent);
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--lw-shadow);
  transition: background .12s, transform .12s, filter .12s;
}
.clay-btn-restore:hover, .clay-btn-restore:focus-visible { filter: brightness(1.06); }
.clay-btn-restore:active { transform: scale(.97); }

/* Rec/RTX pending row — Submit, in the Same Day / accent purple, with a spaced icon + label. */
.clay-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--lw-accent); color: var(--lw-on-accent);
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--lw-shadow);
  transition: filter .12s, transform .12s;
}
.clay-btn-submit:hover, .clay-btn-submit:focus-visible { filter: brightness(.94); }
.clay-btn-submit:active { transform: scale(.97); }
/* RTX wording: the same button reads "Done" and carries the route's green, so the action matches
   the green "Filed" tag the row turns into (see _route_row.html). Modifier only — size, icon gap
   and press/hover behaviour stay shared with the accent version. */
.clay-btn-submit.is-done { background: var(--tone-emerald-solid); color: #fff; }
/* Rec/RTX submitted row — a plain green "Ledged" label ("Filed" on RTX; not a button), matching
   the bold date/time that sits just below it, only rendered in green (see _route_row.html). */
.clay-tag-submitted {
  display: block; text-align: center; white-space: nowrap;
  font-family: inherit; font-weight: 800; font-size: calc(var(--lw-fs, 17px) + 2px);
  color: var(--tone-emerald-solid);
}

.clay-row-actions {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; max-width: 116px; margin-left: auto;
}
.clay-row-actions .clay-btn-delete,
.clay-row-actions .clay-btn-done,
.clay-row-actions .clay-btn-submit,
.clay-row-actions .clay-tag-submitted,
.clay-row-actions .clay-btn-cancel,
.clay-row-actions .clay-btn-restore { width: 100%; justify-content: center; }

/* Completed Rec/RTX row: the one-line "Completed" + date/time is wider than the 116px action
   cap, which would clip it and push it past the cell edge. Drop the cap for this state so the
   actions cell grows to fit its content, and right-align everything against the cell's edge. */
.clay-row-actions.is-completed { max-width: none; align-items: flex-end; }
.clay-row-actions.is-completed > * { width: auto; }

/* Recommendation's Done renders the completion-email confirm popover inside this cell, whose
   right-alignment would otherwise follow into the popover's question text. (Its width and its
   footer buttons are put back by the .is-compact / .clay-status-comment-foot rules below, which
   undo `.is-completed > *` and the button rules above.) */
.clay-row-actions > .clay-status-comment { text-align: left; }

/* ---- "Restore to…" picker (Deleted Items) ---------------------------------
   Restore no longer posts on click: it opens this menu of the tabs the row can come back on (see
   _row.html / _results.html). Styled as the status dropdown's sibling — same surface, radius and
   shadow — but right-anchored, because it hangs off the last, right-aligned column and a
   left-anchored menu would run off the table's edge. The results table has no overflow clipping
   (see the .clay-tip note below), so it floats past the row boundary rather than being cut. */
.clay-restore-wrap { position: relative; display: inline-flex; }
.clay-restore-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 208px; text-align: left;
  background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 14px;
  padding: 7px; box-shadow: 0 18px 40px -12px rgba(40, 45, 70, .3);
  display: flex; flex-direction: column; gap: 2px;
}
/* The bulk toolbar's copy hangs off a left-aligned button in a full-width bar, so it anchors the
   other way; the row menus stay right-anchored against the table's last column. */
.clay-restore-menu.is-below { left: 0; right: auto; }
/* The actions column is a fixed 7% of the table — about 76px of content — so the button's usual
   18px padding doesn't fit: flex squeezes its leading icon to nothing and the label ends up against
   the pill's edges. Trim the padding for every restore button down here. The picker trigger goes
   one step further: it drops that icon outright (see _row.html) and runs a notch smaller, which is
   what buys room for the chevron beside the label. */
.clay-row-actions .clay-btn-restore { padding: 0 10px; gap: 5px; }
.clay-row-actions .clay-btn-restore.is-picker { padding: 0 9px; gap: 4px; font-size: 13px; }
/* `flex: none` belongs here rather than inline: Alpine's :style binding owns the chevron's style
   attribute (for the open-state flip) and clears whatever was written there. */
.clay-restore-caret { flex: none; transition: transform .15s; }
.clay-restore-menu-head {
  margin: 2px 4px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--lw-text-4);
}
.clay-restore-menu-note {
  margin: 5px 4px 1px; padding-top: 6px; border-top: 1px solid var(--lw-divider);
  font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--lw-text-4);
}
.clay-restore-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 36px; padding: 0 11px; border: none; border-radius: 9px;
  background: transparent; color: var(--lw-text); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14px; text-align: left;
  transition: background .1s;
}
.clay-restore-opt:hover:not(:disabled), .clay-restore-opt:focus-visible { background: var(--lw-surface-2); }
/* Disabled in the bulk toolbar only: a destination some selected row can't reach. Kept visible
   (not hidden) so the menu's shape is stable and the title explains the refusal. */
.clay-restore-opt:disabled { opacity: .38; cursor: not-allowed; }
.clay-restore-dot {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--lw-accent);
}

/* Filing/Rec row "Send email": a single Outlook-blue tile that opens a mailto: draft in the default
   mail app (Outlook desktop on firm machines), addressed to the row's Target user and cc'ing their
   support assistant when that person is an attorney. Subject = "<reference> : <task name>".
   See _mail_button.html, shared by _row.html and _route_row.html. */
.clay-mail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  border: none; cursor: pointer; text-decoration: none;
  color: #fff; background: linear-gradient(135deg, #2b7cd3, #0f5bab);
  box-shadow: 0 2px 6px -2px rgba(15, 91, 171, .5);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.clay-mail-btn:hover, .clay-mail-btn:focus-visible {
  filter: brightness(1.07); box-shadow: 0 4px 11px -3px rgba(15, 91, 171, .6);
}
.clay-mail-btn:active { transform: scale(.95); }
/* No address resolved for this row's Target user (nobody on the support roster, no account email):
   the draft still opens with the subject filled in, so the tile dims rather than disappearing —
   the To field is simply left for the sender. Regains full contrast on hover/focus. */
.clay-mail-btn.is-unaddressed {
  background: linear-gradient(135deg, #93b4d6, #7d9cbe);
  box-shadow: 0 1px 4px -2px rgba(15, 91, 171, .35);
}

/* ---- completion-email pip (_notify_pip.html) ------------------------------
   Sits beside the mail button on a finished row and reports the automatic notice: a solid disc
   with a white glyph — crimson ⟳ while the email hasn't gone, green ✓ once it has. A filled circle
   rather than a tinted square so it reads at a glance down a long list, and round rather than the
   mail button's rounded square so the two never look like a matched pair of actions: one is a
   button you press, the other is mostly a light that tells you where things stand.

   Not-sent and failed deliberately look identical. To the person scanning the row they mean the
   same thing — this one didn't go, press it — and the tooltip carries which of the two it is.
   `is-sent` renders as a <span>, so the pointer and press states are scoped to the clickable ones. */
.clay-notify-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%;
  border: none; color: #fff;
}
.clay-notify-pip.is-sent {
  background: linear-gradient(135deg, #2ec46f, #12a457);
  box-shadow: 0 2px 6px -2px rgba(18, 164, 87, .55);
}
.clay-notify-pip.is-unsent,
.clay-notify-pip.is-failed {
  cursor: pointer;
  background: linear-gradient(135deg, #fb3f6d, #e8134f);
  box-shadow: 0 2px 6px -2px rgba(232, 19, 79, .55);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.clay-notify-pip.is-unsent:hover, .clay-notify-pip.is-unsent:focus-visible,
.clay-notify-pip.is-failed:hover, .clay-notify-pip.is-failed:focus-visible {
  filter: brightness(1.07); box-shadow: 0 4px 11px -3px rgba(232, 19, 79, .6);
}
.clay-notify-pip.is-unsent:active, .clay-notify-pip.is-failed:active { transform: scale(.92); }
/* Spin the ⟳ while its retry POST is in flight, so a slow Graph call still looks like it's doing
   something (htmx-request lands on the button for the length of the request). */
.clay-notify-pip.htmx-request > svg { animation: clay-notify-spin .9s linear infinite; }
@keyframes clay-notify-spin { to { transform: rotate(360deg); } }

/* Row slide-out while HTMX removes it after a confirmed delete. */
.clay-root tr.htmx-swapping > td {
  opacity: 0; transform: translateX(22px);
  transition: opacity .22s ease, transform .22s ease;
}

/* ---- multi-select: row checkbox + bulk action toolbar --------------------- */
.clay-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid var(--lw-border); border-radius: 6px;
  background: var(--lw-surface); box-shadow: var(--lw-shadow);
  transition: background .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.clay-checkbox:hover { border-color: var(--lw-accent); }
.clay-checkbox:checked, .clay-checkbox:indeterminate {
  background: var(--lw-accent); border-color: var(--lw-accent);
}
.clay-checkbox:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid var(--lw-on-accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.clay-checkbox:indeterminate::after {
  content: ""; position: absolute; left: 3.5px; top: 7px;
  width: 9px; height: 0; border-top: 2px solid var(--lw-on-accent);
}
.clay-checkbox:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }

/* The bar that surfaces above the table once ≥1 row is checked. */
.clay-bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: 15px; border: 1px solid var(--lw-border);
  background: var(--lw-surface); box-shadow: var(--lw-shadow);
}
.clay-bulkbar-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 800; color: var(--lw-text-2);
}
.clay-bulkbar-count > span { color: var(--lw-accent); }
/* Toolbar buttons sit inline (row actions are column-stacked; here we want a row). */
.clay-bulkbar .clay-btn-delete,
.clay-bulkbar .clay-btn-done,
.clay-bulkbar .clay-btn-restore,
.clay-bulkbar .clay-btn-cancel { height: 38px; padding: 0 16px; }

/* "Select all N matching" bridge under the bulk toolbar (see _results.html). Accent-tinted so it
   reads as an offer, not an error, and centred like a notice. */
.clay-selectall-note {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: -6px 0 14px; padding: 8px 14px;
  border-radius: 12px; border: 1px solid var(--lw-accent-soft);
  background: var(--lw-accent-soft); color: var(--lw-accent-soft-text);
  font-size: 13px; font-weight: 600;
}
.clay-selectall-link {
  border: none; background: none; padding: 0;
  font: inherit; font-weight: 800; color: var(--lw-accent);
  cursor: pointer; text-decoration: underline;
}
.clay-selectall-link:hover { filter: brightness(1.08); }

.clay-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--lw-border);
  background: var(--lw-surface); color: var(--lw-text-2);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  box-shadow: var(--lw-shadow);
  transition: background .12s, border-color .12s, color .12s;
}
.clay-btn:hover { border-color: var(--lw-text-4); color: var(--lw-text); }
.clay-btn-accent {
  background: var(--lw-accent); color: var(--lw-on-accent); font-weight: 800;
  border-color: transparent;
  box-shadow: 0 2px 6px -1px rgba(122, 90, 245, .45);
}
.clay-btn-accent:hover { border-color: transparent; color: var(--lw-on-accent); filter: brightness(1.05); }

/* ---- segmented control (scope switcher, view modes, group, sort dir) ------ */
.clay-seg {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--lw-surface-2); border-radius: 10px; padding: 3px;
  border: 1px solid var(--lw-border);
}
.clay-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--lw-text-3);
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s;
}
.clay-seg-btn:hover:not(.is-active) { color: var(--lw-text-2); }
.clay-seg-btn.is-active {
  background: var(--lw-surface); color: var(--lw-text); font-weight: 800;
  box-shadow: var(--lw-shadow);
}
.clay-seg-btn:disabled { cursor: not-allowed; opacity: .55; }

/* The hero scope switcher (Same Day / Next Day / Filed) — larger and the focal control.
   Active tab is a solid purple pill so the current view reads at a glance. */
.clay-seg-hero { padding: 4px; border-radius: 14px; }
.clay-seg-hero .clay-seg-btn { height: 40px; padding: 0 18px; font-size: 14.5px; font-weight: 800; border-radius: 10px; gap: 8px; }
/* Active pill follows the selected source tab's colour (--src-tint); default = purple. */
.clay-seg-hero .clay-seg-btn.is-active {
  background: var(--src-tint); color: var(--lw-on-accent);
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--src-tint) 50%, transparent);
  transition: background .3s, box-shadow .3s;
}
.clay-seg-hero .clay-seg-btn .clay-seg-count {
  font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 99px;
  background: var(--lw-surface); color: var(--lw-text-3);
}
.clay-seg-hero .clay-seg-btn.is-active .clay-seg-count {
  background: rgba(255, 255, 255, .24); color: var(--lw-on-accent);
}

/* ---- primary source switcher — ring-dial tabs (Filing / Recommendation / RTX)
   Lives in the top bar. Ported from the claude.ai comp but flattened to the app's
   tokens: an inactive tab collapses to just its dial; the active tab expands to
   reveal its label and takes a per-tab accent gradient (`--tint`). UI only for now —
   the active tab is toggled client-side (Alpine), the list below is unchanged.
   Scoped under .clay-root so it never leaks into the Tailwind pages. --------- */

/* Source theme: the active tab's colour, exposed for the header to follow. `source` is an
   Alpine var lifted to .clay-root and mirrored as [data-source]; these vars re-tint the
   scope pill, the ring and the date badge (see below). Filing keeps the app's purple. */
.clay-root { --src-tint: var(--lw-accent); --src-ring-1: #8b6cf6; --src-ring-2: #6a45ef; }
.clay-root[data-source="recommendation"] { --src-tint: #16a97e; --src-ring-1: #3cc79a; --src-ring-2: #0d8f68; }
.clay-root[data-source="rtx"]            { --src-tint: #d68a2e; --src-ring-1: #e6b35c; --src-ring-2: #bf751b; }

.clay-root .clay-viewbar { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.clay-root .clay-vtab {
  --tint: var(--lw-accent);
  display: inline-flex; align-items: center; gap: 13px; flex: none;
  padding: 4px; border: none; border-radius: 999px;
  background: transparent; font-family: inherit; cursor: pointer;
  /* Route switcher is now <a> links — clear default anchor underline / visited colour. */
  color: inherit; text-decoration: none;
  transition: background .3s cubic-bezier(.22,.9,.32,1),
              box-shadow .3s cubic-bezier(.22,.9,.32,1),
              padding .3s cubic-bezier(.22,.9,.32,1);
}
.clay-root .clay-vtab[data-source="filing"]         { --tint: #7a5af5; }
.clay-root .clay-vtab[data-source="recommendation"] { --tint: #16a97e; }
.clay-root .clay-vtab[data-source="rtx"]            { --tint: #d68a2e; }
.clay-root .clay-vtab:focus-visible { outline: 3px solid var(--lw-accent-soft); outline-offset: 2px; }

.clay-root .clay-vdial { position: relative; width: 56px; height: 56px; flex: none; }
/* width/height:100% lets the ring scale with the dial container (viewBox handles the math). */
.clay-root .clay-vdial .ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.clay-root .clay-vdial .rtrk { stroke: var(--lw-border); transition: stroke .3s; }
/* The fill sweeps from empty to its value on load — a boot script (dashboard.html) resets each
   ring to empty then hands it the server value, so this transition animates the arc filling. */
.clay-root .clay-vdial .rfil {
  stroke: var(--tint); stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.22,.9,.32,1), stroke .3s;
}
.clay-root .clay-vdial .core {
  position: absolute; inset: 7px; border-radius: 999px; display: grid; place-items: center;
  background: var(--lw-surface); color: var(--tint); box-shadow: var(--lw-shadow);
  transition: background .3s, color .3s, transform .16s cubic-bezier(.22,.9,.32,1);
}
.clay-root .clay-vdial .core svg { width: 22px; height: 22px; }
.clay-root .clay-vtab:hover:not(.is-on) .clay-vdial .core { transform: scale(1.07); }

.clay-root .clay-vlbl {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25;
  text-align: left; white-space: nowrap; overflow: hidden;
  max-width: 0; opacity: 0; margin: 0;
  transition: max-width .34s cubic-bezier(.22,.9,.32,1),
              opacity .24s cubic-bezier(.22,.9,.32,1),
              margin .34s cubic-bezier(.22,.9,.32,1);
}
.clay-root .clay-vlbl .vn { font-size: 16px; font-weight: 900; letter-spacing: -.015em; color: #fff; }
.clay-root .clay-vlbl .vs { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .8); }

.clay-root .clay-vtab.is-on {
  padding: 4px 24px 4px 4px;
  background: linear-gradient(140deg, var(--tint), color-mix(in srgb, var(--tint) 72%, #000 22%));
  box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--tint) 60%, transparent);
}
/* min-width keeps every active tab the same width as the longest label ("Recommendation"), so
   the switcher doesn't resize as you move between Filing / Recommendation / RTX. */
.clay-root .clay-vtab.is-on .clay-vlbl { min-width: 150px; max-width: 300px; opacity: 1; margin-left: 3px; }
.clay-root .clay-vtab.is-on .clay-vdial .rtrk { stroke: rgba(255, 255, 255, .28); }
.clay-root .clay-vtab.is-on .clay-vdial .rfil { stroke: #fff; }
.clay-root .clay-vtab.is-on .clay-vdial .core { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }

/* Narrow widths: drop the active label so the switcher never crowds the search box. */
@media (max-width: 900px) {
  .clay-root .clay-vtab.is-on { padding: 3px; background: transparent; box-shadow: none; }
  .clay-root .clay-vtab.is-on .clay-vlbl { min-width: 0; max-width: 0; opacity: 0; margin: 0; }
  .clay-root .clay-vtab.is-on .clay-vdial .rtrk { stroke: var(--lw-border); }
  .clay-root .clay-vtab.is-on .clay-vdial .rfil { stroke: var(--tint); }
  .clay-root .clay-vtab.is-on .clay-vdial .core { background: var(--lw-surface); color: var(--tint); box-shadow: var(--lw-shadow); }
  .clay-root .clay-vtab.is-on .clay-vdial { box-shadow: 0 0 0 2px var(--tint); border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) {
  .clay-root .clay-vtab, .clay-root .clay-vlbl, .clay-root .clay-vdial .core { transition: none; }
  .clay-root .clay-vdial .rfil { transition: none; }
  .clay-root .clay-route-grid tbody tr { animation: none; }
}

/* Route tables (Recommendation / RTX): rows enter with a short staggered fade-and-rise, echoing
   the dial sweep. Fresh DOM — a full page load or an HTMX #results swap — replays it on its own;
   Filing's grid is deliberately left static. Mirrors the design comp's row-swap animation.
   Fill mode is `backwards`, not `both`, on purpose: it holds the from-state through the stagger
   delay (all the fill is actually needed for), but stops filling once the row lands. A forwards
   fill keeps the transform/opacity animation in effect for good, which leaves every row its own
   stacking context — and a row-local stacking context traps the confirm popovers that hang out of
   a row (the Done "send a confirmation email?" popover, _email_confirm_popover.html), so the rows
   below paint over them however high their z-index. Filing's grid has no such animation, which is
   why the same popover behaves there. The end state matches the row's normal styles anyway, so
   dropping the forwards fill changes nothing visually. */
.clay-root .clay-route-grid tbody tr { animation: clayRowIn .32s cubic-bezier(.22,.9,.32,1) backwards; }
.clay-root .clay-route-grid tbody tr:nth-child(2) { animation-delay: .02s; }
.clay-root .clay-route-grid tbody tr:nth-child(3) { animation-delay: .04s; }
.clay-root .clay-route-grid tbody tr:nth-child(4) { animation-delay: .06s; }
.clay-root .clay-route-grid tbody tr:nth-child(5) { animation-delay: .08s; }
.clay-root .clay-route-grid tbody tr:nth-child(6) { animation-delay: .10s; }
.clay-root .clay-route-grid tbody tr:nth-child(n+7) { animation-delay: .12s; }
@keyframes clayRowIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* ---- quick-filter chips (sidebar) ----------------------------------------- */
.clay-chip {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 38px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--lw-border);
  background: var(--lw-surface-2); color: var(--lw-text-3);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.clay-chip .clay-chip-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--lw-text-4); flex: none; }
.clay-chip .clay-chip-count { font-size: 11px; font-weight: 800; color: var(--lw-text-4); opacity: .85; }
.clay-chip.is-active {
  background: var(--t-bg); color: var(--t-text);
  border-color: var(--t-ring);
}
.clay-chip.is-active .clay-chip-dot { background: var(--t-solid); }
.clay-chip.is-active .clay-chip-count { color: var(--t-text); }

/* ---- inline status dropdown (row editor) ---------------------------------- */
.clay-status-select { position: relative; width: 100%; max-width: 220px; }
.clay-status-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 34px; padding: 0 4px 0 11px; border: none; border-radius: 10px;
  background: var(--t-solid); color: #fff; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: calc(var(--lw-fs, 17px) - 3.5px);
  box-shadow: 0 1px 2px rgba(70, 80, 100, .14);
}
.clay-status-trigger .clay-status-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clay-status-trigger .clay-status-chev {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(0, 0, 0, .17); flex: none;
}
.clay-status-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px;
  background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 14px;
  padding: 7px; box-shadow: 0 18px 40px -12px rgba(40, 45, 70, .3);
  display: flex; flex-direction: column; gap: 2px;
}
.clay-status-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 38px; padding: 0 11px; border: none; border-radius: 9px;
  background: transparent; color: var(--lw-text); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14px; text-align: left;
  transition: background .1s;
}
.clay-status-opt:hover { background: var(--lw-surface-2); }
.clay-status-opt.is-current { background: var(--t-solid); color: #fff; font-weight: 800; }
.clay-status-opt .clay-status-lead { width: 14px; display: grid; place-items: center; flex: none; }
.clay-status-opt .clay-status-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--t-solid); }

/* "Comment Details" popover — a dropdown anchored below the status control on a backward
   (send-back) move. JS (positionComment() in _row.html) sizes + positions it on open so it
   stays centred on the control yet clamped inside the viewport, never trimmed on small screens.
   The rules below are the pre-JS fallback: right-anchored + a viewport-capped width so even
   without JS it opens leftward and can't spill off the right edge. See _comment_popover.html. */
.clay-status-comment {
  position: absolute; top: calc(100% + 6px); z-index: 60;
  right: 0; width: min(540px, calc(100vw - 24px));
  background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 14px;
  padding: 12px; box-shadow: 0 18px 40px -12px rgba(40, 45, 70, .3);
}
/* A yes/no confirm carries only a question, so it doesn't need the width the comment textarea
   does. JS passes the same 320 to positionPopover; this is the pre-JS / no-JS fallback. */
.clay-status-comment.is-compact { width: min(320px, calc(100vw - 24px)); }
.clay-status-comment-head { font-weight: 800; font-size: 13px; color: var(--lw-text); margin-bottom: 8px; }
.clay-status-comment-input { width: 100%; resize: vertical; min-height: 80px; padding: 10px 14px; }
.clay-status-comment-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* Sized to their labels, never to an enclosing action column — see .clay-row-actions above. */
.clay-status-comment-foot > .clay-btn,
.clay-status-comment-foot > .clay-btn-cancel { width: auto; flex: none; }
.clay-status-opt.is-current .clay-status-dot { background: rgba(255, 255, 255, .92); }
.clay-status-opt .clay-status-label { flex: 1; white-space: nowrap; }

/* ---- sort-key pills (sidebar) --------------------------------------------- */
.clay-pill {
  display: inline-flex; align-items: center; height: 33px; padding: 0 13px;
  border: 1px solid var(--lw-border); border-radius: 9px;
  background: var(--lw-surface); color: var(--lw-text-3);
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.clay-pill.is-active {
  background: var(--lw-accent); color: var(--lw-on-accent); font-weight: 800;
  border-color: transparent;
  box-shadow: 0 2px 6px -1px rgba(122, 90, 245, .4);
}

/* ---- pagination (grid view) — "Page X of Y" + Prev/Next, matching the audit log --- */
.clay-pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 0 2px;
}
.clay-pagination-meta {
  font-size: 12.5px; font-weight: 500; color: var(--lw-text-3);
}
.clay-pagination-meta strong { font-weight: 700; color: var(--lw-text-2); }
.clay-pagination-nav { display: flex; align-items: center; gap: 8px; }
.clay-pagination-nav .clay-btn { height: 34px; padding: 0 14px; font-size: 12.5px; }

/* ---- stat cards ----------------------------------------------------------- */
.clay-stat {
  text-align: left; background: var(--t-bg); border-radius: var(--lw-radius);
  border: 1px solid var(--t-ring);
  padding: 15px 16px; cursor: pointer; font-family: inherit; width: 100%;
  box-shadow: var(--lw-shadow);
  transition: transform .12s, box-shadow .12s;
}
.clay-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--t-solid) 40%, transparent);
}
.clay-stat .clay-stat-dot {
  width: 9px; height: 9px; border-radius: 99px; background: var(--t-solid);
}
.clay-stat .clay-stat-label {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-text); opacity: .85;
}
.clay-stat .clay-stat-value {
  font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-top: 8px; line-height: 1;
  color: var(--t-text);
}

/* ---- status badge --------------------------------------------------------- */
.clay-badge {
  display: inline-flex; align-items: center; height: 23px; padding: 0 11px; border-radius: 99px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1px var(--t-ring);
}
.clay-off-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: 8px; font-size: 11px; font-weight: 700;
  background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1px var(--t-ring);
}

/* ---- owner avatar --------------------------------------------------------- */
.clay-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1.5px var(--t-ring);
}

/* ---- numbered-checkpoint stepper ------------------------------------------ */
.clay-step {
  flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.clay-step-done    { background: var(--tone-emerald-solid); color: #fff; }
.clay-step-current { background: var(--lw-accent); color: var(--lw-on-accent); }
.clay-step-upcoming{ background: var(--lw-surface-2); color: var(--lw-text-4); box-shadow: inset 0 0 0 1px var(--lw-border); }
.clay-step-line { flex: none; width: 14px; height: 2px; }
.clay-step-line-filled { background: var(--lw-accent); }
.clay-step-line-done   { background: var(--tone-emerald-solid); }
.clay-step-line-todo   { background: var(--lw-border); }

/* ---- mono reference link -------------------------------------------------- */
.clay-ref {
  font-family: var(--lw-mono); font-size: var(--lw-fs, 17px); font-weight: 700; color: var(--lw-text);
  letter-spacing: -.01em; text-decoration: none;
}
.clay-ref:hover { text-decoration: underline; }

/* Every reference is a <button> that opens the item drawer, never a link to a page —
   see _item_drawer_host.html. Tailwind's preflight already strips a button's border,
   padding, margin, background and font, but leaves cursor and text-align, so those are
   all that's left to undo. (.clay-board-card-title clamps to three lines, so its
   text-align genuinely shows.) */
.clay-ref,
.clay-board-card-title,
.clay-root .notif-ref { cursor: pointer; text-align: left; }

/* ---- serial-number column ------------------------------------------------- */
/* The count lives in a CSS counter (reset on the table, incremented per row) so it recomputes
   automatically when HTMX swaps a single row and numbers continuously across grouped sections. */
.clay-sno { padding: 14px 12px; vertical-align: top; text-align: right; white-space: nowrap; }
.clay-sno::before {
  counter-increment: clay-sno; content: counter(clay-sno);
  font-size: calc(var(--lw-fs, 17px) - 3px); font-weight: 700; color: var(--lw-text-4);
  font-variant-numeric: tabular-nums;
}

/* ---- item detail side drawer ---------------------------------------------- */
.clay-drawer-blur { filter: blur(3px); pointer-events: none; user-select: none; transition: filter .2s; }

.clay-drawer-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(47, 52, 64, .18);
  backdrop-filter: blur(2px);
}

.clay-drawer {
  position: fixed; top: 0; right: 0; z-index: 50;
  width: min(720px, 55vw); height: 100vh;
  background: var(--lw-surface);
  border-left: 1px solid var(--lw-border);
  box-shadow: -12px 0 40px -12px rgba(70, 80, 100, .22);
  display: flex; flex-direction: column;
}

.clay-drawer-body {
  flex: 1; overflow-y: auto; padding: 0;
}

.clay-drawer-inner { padding: 32px 32px 40px; }

.clay-drawer-header {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 28px; padding-bottom: 24px;
  border-bottom: 1px solid var(--lw-divider);
}

.clay-drawer-ref {
  font-family: var(--lw-mono); font-size: calc(var(--lw-fs, 17px) + 2px); font-weight: 700;
  color: var(--lw-text); letter-spacing: -.01em; margin: 0;
}

.clay-drawer-title {
  font-size: 26px; font-weight: 800; line-height: 1.25;
  color: var(--lw-text); margin: 8px 0 0;
}

.clay-drawer-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px;
}

.clay-drawer-due { font-size: 15px; font-weight: 600; color: var(--lw-text-3); }

/* The drawer's escape hatch to the standalone task page — a real <a href>, deliberately, since
   every reference number now opens the drawer instead. Ten of the seventeen statuses can only
   be set over there, and this also gives back copy-link-address. */
.clay-drawer-fullpage {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  font-size: 13px; font-weight: 700; color: var(--lw-accent); text-decoration: none;
}
.clay-drawer-fullpage:hover { text-decoration: underline; }

.clay-drawer .clay-badge {
  height: 28px; padding: 0 14px; font-size: 13px;
}

.clay-drawer .clay-ref { font-size: var(--lw-fs, 17px); }

.clay-drawer .clay-avatar {
  width: 34px; height: 34px; font-size: 13px;
}

.clay-drawer-close {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--lw-border);
  background: var(--lw-surface-2); color: var(--lw-text-3); cursor: pointer;
  display: grid; place-items: center;
  transition: color .12s, background .12s;
}
.clay-drawer-close:hover { color: var(--lw-text); background: var(--lw-surface); }

.clay-drawer-section { margin-bottom: 28px; }
.clay-drawer-section .clay-eyebrow { font-size: 13px; margin-bottom: 14px; }

.clay-drawer-dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; margin: 0;
}
.clay-drawer-dl dt {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--lw-text-4); margin: 0;
}
.clay-drawer-dl dd {
  font-size: 16px; font-weight: 600; color: var(--lw-text-2); margin: 4px 0 0;
}

/* File link spans the full drawer width and reads as a real (mono) link, not body text. It is
   NOT clickable (file:// can't be opened from an http(s) page — it just errors), so no pointer
   cursor / hover underline; the Copy button beside it is the action. */
.clay-drawer-dl .clay-filelink { grid-column: 1 / -1; min-width: 0; }
.clay-filelink dd { display: flex; align-items: flex-start; gap: 6px; }
.clay-filelink-path {
  display: inline-block; max-width: 100%;
  font-family: var(--lw-mono); font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--lw-accent); text-decoration: none; cursor: default;
  word-break: break-all; overflow-wrap: anywhere;
}

.clay-drawer-timeline {
  list-style: none; margin: 0; padding: 0 0 0 4px;
  border-left: 2px solid var(--lw-divider);
}
.clay-drawer-tl-item {
  position: relative; padding: 0 0 18px 18px;
  display: flex; gap: 0;
}
.clay-drawer-tl-item:last-child { padding-bottom: 0; }

.clay-drawer-tl-dot {
  position: absolute; left: -12px; top: 2px;
  width: 24px; height: 24px; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--tone-emerald-solid);
  box-shadow: 0 0 0 3px var(--lw-surface);
}

.clay-drawer-tl-dot-comment {
  background: var(--tone-red-solid);
}
/* Task-name / comment edits — accent dot with a pencil glyph. */
.clay-drawer-tl-dot-edit {
  background: var(--lw-accent);
}
/* Manual list moves (removed / restored) — amber dot with a swap glyph. */
.clay-drawer-tl-dot-move {
  background: var(--tone-amber-solid);
}
/* Moved to Deleted Items — slate dot with a trash glyph; a soft, recoverable delete. */
.clay-drawer-tl-dot-delete {
  background: var(--tone-slate-solid);
}
.clay-drawer-tl-label {
  font-size: 16px; font-weight: 700; color: var(--lw-text); margin: 0;
}
.clay-drawer-tl-meta {
  font-size: 14px; color: var(--lw-text-4); margin: 4px 0 0; line-height: 1.45;
}
.clay-drawer-tl-empty {
  font-size: 15px; color: var(--lw-text-4); padding-left: 20px;
}

.clay-drawer-comments {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.clay-drawer-comment {
  display: flex; align-items: flex-start; gap: 10px;
}
.clay-drawer-comment-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
.clay-drawer-comment-author { font-size: 15px; font-weight: 700; color: var(--lw-text); }
.clay-drawer-comment-time { font-size: 13px; font-weight: 600; color: var(--lw-text-4); }
.clay-drawer-comment-body {
  font-size: 16px; line-height: 1.5; color: var(--lw-text-2); margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere; word-break: break-word;
}
/* Links pasted into comments (auto-linked by Django's urlize) */
.clay-drawer-comment-body a,
.clay-comment-body a {
  color: var(--lw-accent, #6d5efc); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere; word-break: break-word;
}

/* A file link inside a comment body (ledge_extras.comment_html). It reads as a link — accent
   colour, mono, a small file glyph — but the click copies the path rather than navigating,
   since file:// can't be opened from an http(s) page. Flashes a green "Copied!" tag for ~1.5s
   (.is-copied, set by the delegated handler in static/js/clipboard.js). */
.clay-comment-filelink {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
  position: relative; vertical-align: bottom;
  font-family: var(--lw-mono); font-weight: 600;
  color: var(--lw-accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-style: dotted;
  overflow-wrap: anywhere; word-break: break-all;
}
.clay-comment-filelink:hover { background: var(--lw-accent-soft); border-radius: 5px; }
.clay-comment-filelink:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; border-radius: 5px; }
.clay-comment-filelink svg { flex: none; align-self: center; opacity: .85; }
.clay-comment-filelink.is-copied { color: var(--tone-emerald-text); }
.clay-comment-filelink.is-copied::after {
  content: "Copied!";
  position: absolute; left: 0; bottom: calc(100% + 4px);
  padding: 2px 7px; border-radius: 6px;
  font-family: var(--lw-font, inherit); font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #fff; background: var(--tone-emerald-solid);
}

/* Ledged file link surfaced in the Task-comment cell (see LedgeItem.shows_ledged_link). Shown as
   non-clickable, link-styled text (file:// can't be opened from the browser) next to a Copy
   button; .clay-filelink-wrap keeps the two aligned. */
.clay-filelink-wrap { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.clay-cell-filelink {
  display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%;
  font-family: var(--lw-mono); font-size: calc(var(--lw-fs, 17px) - 3px); font-weight: 600;
  line-height: 1.4; color: var(--lw-accent); text-decoration: none; cursor: default;
  overflow-wrap: anywhere; word-break: break-all;
}
.clay-cell-filelink svg { flex: none; margin-top: 3px; opacity: .8; }

/* Copy-path icon button (partials/_copy_path_button.html) — the actual action beside the
   non-clickable file path. Flips to a green check for ~1.5s on copy (.is-copied). */
.clay-copy-path {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--lw-text-4); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.clay-copy-path:hover { background: rgba(122, 90, 245, .12); color: var(--lw-accent); }
.clay-copy-path:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 1px; }
.clay-copy-path.is-copied { color: var(--tone-emerald-text); }
.clay-copy-path svg { display: block; }

/* ---- inline edit of Task name / Task comment (hover pencil → ✓ / ✕) -------- */
/* Display wrapper: the value + a faded pencil that reveals on hover (JIRA-style). Block-level flex
   so the task-type / info-icon line still drops BELOW the task name (not beside it); the pencil
   sits right after the text, and the text child keeps wrapping via min-width:0. */
.clay-editable { display: flex; align-items: flex-start; gap: 6px; }
.clay-editable > :first-child { min-width: 0; }
.clay-edit-pencil {
  flex: none; display: grid; place-items: center; margin-top: 1px;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--lw-text-4); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
/* Reveal on hover of that field's own cell (so the name pencil and the comment pencil are
   independent), or when focused for keyboard users (mirrors the .clay-tip fade idiom). */
.clay-root td:hover .clay-edit-pencil,
.clay-root .clay-edit-pencil:focus-visible { opacity: 1; }
.clay-edit-pencil:hover { color: var(--lw-text-2); background: var(--lw-surface-2); }

/* The inline editor: the field alongside a ✓ save / ✕ cancel pair. */
.clay-inline-form { display: flex; align-items: flex-start; gap: 6px; }
.clay-inline-form-comment { flex-wrap: wrap; }
.clay-inline-edit {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 9px; font-size: calc(var(--lw-fs, 17px) - 1px); line-height: 1.35;
}
textarea.clay-inline-edit { min-height: 46px; resize: vertical; }
.clay-inline-actions { display: inline-flex; gap: 6px; flex: none; }
.clay-inline-save, .clay-inline-cancel {
  flex: none; display: grid; place-items: center; cursor: pointer; padding: 0;
  width: 30px; height: 30px; border-radius: 8px;
  transition: filter .12s, background .12s, color .12s, border-color .12s, transform .12s;
}
.clay-inline-save { border: none; background: var(--tone-emerald-solid); color: #fff; box-shadow: var(--lw-shadow); }
.clay-inline-save:hover, .clay-inline-save:focus-visible { filter: brightness(.94); }
.clay-inline-cancel { border: 1px solid var(--lw-divider); background: var(--lw-surface); color: var(--lw-text-3); }
.clay-inline-cancel:hover, .clay-inline-cancel:focus-visible { color: var(--lw-text); border-color: var(--lw-text-4); }
.clay-inline-save:active, .clay-inline-cancel:active { transform: scale(.94); }

.clay-drawer-comment-form {
  display: flex; align-items: center; gap: 12px;
}
.clay-drawer-comment-form .clay-input {
  height: 46px; border-radius: 13px; font-size: 15px; padding: 0 16px;
}
.clay-drawer-comment-form .clay-btn {
  height: 46px; padding: 0 22px; font-size: 15px;
}

/* ---- "add a file link" button + popover, between the comment box and Send ---- */
.clay-attach { position: relative; flex: none; }
.clay-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--lw-border); border-radius: 13px;
  background: var(--lw-surface); color: var(--lw-text-4); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.clay-attach-btn:hover, .clay-attach-btn.is-open {
  color: var(--lw-accent); border-color: var(--lw-accent); background: var(--lw-accent-soft);
}
.clay-attach-btn:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }

/* Opens downward, under the file button. The composer sits at the foot of the drawer, so the
   button scrolls the popover into view on open (see the composer's Alpine in _item_drawer.html);
   .clay-drawer-body scrolls, and an absolutely-positioned box still extends its scroll area. */
.clay-attach-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
  width: min(420px, 78vw); padding: 12px;
  border: 1px solid var(--lw-border); border-radius: 13px;
  background: var(--lw-surface);
  box-shadow: 0 10px 26px -12px rgba(70, 80, 100, .38);
}
.clay-attach-row { display: flex; align-items: center; gap: 8px; }
.clay-drawer-comment-form .clay-attach-row .clay-field-input { flex: 1; }
.clay-drawer-comment-form .clay-attach-add {
  flex: none; height: 44px; padding: 0 18px; font-size: 14.5px;  /* matches .clay-field-input */
}

/* ---- "Ledged" cover-sheet pop-up (centred modal) -------------------------- */
.clay-modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(47, 52, 64, .28);
  backdrop-filter: blur(2px);
  /* Reset the row's cell typography so the form reads at its own scale. */
  text-align: left; white-space: normal;
}

.clay-modal {
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--lw-surface);
  border: 1px solid var(--lw-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px -18px rgba(70, 80, 100, .4);
  padding: 26px 28px 24px;
  animation: claySlideIn .18s ease;
}

.clay-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.clay-modal-eyebrow {
  font-family: var(--lw-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--lw-text-4); margin: 0;
}
.clay-modal-title {
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: var(--lw-text); margin: 6px 0 0;
}
.clay-modal-close {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--lw-border); background: var(--lw-surface);
  color: var(--lw-text-4); cursor: pointer; transition: color .12s, border-color .12s;
}
.clay-modal-close:hover { color: var(--lw-text); border-color: var(--lw-text-4); }

.clay-modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.clay-field { display: flex; flex-direction: column; gap: 6px; }
.clay-field-wide { grid-column: 1 / -1; }
.clay-field-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--lw-text-2);
}
.clay-root .clay-field-input {
  height: 44px; border-radius: 12px; font-size: 14.5px; padding: 0 14px;
}

.clay-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lw-divider);
}
.clay-modal-foot .clay-btn { height: 44px; padding: 0 22px; font-size: 14.5px; }
.clay-modal-foot .clay-btn-cancel { height: 44px; padding: 0 18px; }

@media (max-width: 560px) {
  .clay-modal-grid { grid-template-columns: 1fr; }
}

/* ---- combobox (Ledged pop-up: Document Type / Case type · Grade) ----------
   Free-text input with an always-visible faded caret matching the box, plus a
   suggestion list that drops BELOW the field, scrolls when long, and stays inside
   the modal (positioned relative to the field, not teleported). */
.clay-combo-wrap { position: relative; }
/* leave room for the caret so typed text never runs under it */
.clay-root .clay-combo-input { padding-right: 40px; }
.clay-combo-caret {
  position: absolute; top: 0; right: 0;
  height: 44px; width: 38px;            /* matches .clay-field-input height */
  display: grid; place-items: center;
  border: 0; padding: 0; background: transparent;
  color: var(--lw-text-4);              /* faded — same tone as the native select chevron */
  cursor: pointer;
  transition: color .12s;
}
.clay-combo-caret:hover { color: var(--lw-text-3); }
.clay-combo-caret svg { width: 14px; height: 14px; transition: transform .15s ease; }
.clay-combo-caret.is-open svg { transform: rotate(180deg); }

.clay-combo-list {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 6px; z-index: 40;
  max-height: 232px; overflow-y: auto;   /* scrollbar when the list is long */
  padding: 5px; list-style: none;
  background: var(--lw-surface);
  border: 1px solid var(--lw-border);
  border-radius: 12px;
  box-shadow: 0 16px 34px -14px rgba(70, 80, 100, .38);
}
.clay-combo-opt {
  padding: 8px 11px; border-radius: 8px;
  font-size: 14px; color: var(--lw-text-2); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clay-combo-opt:hover { background: var(--lw-surface-2); color: var(--lw-text); }
.clay-combo-opt.is-active {
  background: var(--lw-accent-soft); color: var(--lw-accent-soft-text); font-weight: 700;
}

/* ---- "Push & notify" email composer popup --------------------------------- */
.clay-modal-email { width: min(1200px, 100%); }

.clay-composer-errors {
  margin-bottom: 16px; border-radius: 12px; padding: 10px 14px;
  background: var(--t-rose-bg, #fef2f2); color: var(--t-rose-text, #b91c1c);
  box-shadow: inset 0 0 0 1px var(--t-rose-ring, rgba(190, 24, 60, .25));
  font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 3px;
}

/* Recipient chips — an editable "to" box that grows with the address list. */
.clay-recip-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  min-height: 46px; padding: 8px 10px;
  border-radius: 12px; background: var(--lw-surface);
  border: 1px solid var(--lw-border);
}
.clay-recip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; border-radius: 999px;
  background: var(--lw-accent-soft, #efeafe); color: var(--lw-text);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.clay-recip-x {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: none; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .06); color: var(--lw-text-2);
  transition: background .12s, color .12s;
}
.clay-recip-x:hover { background: rgba(0, 0, 0, .14); color: var(--lw-text); }
.clay-recip-input {
  flex: 1; min-width: 160px; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--lw-text); padding: 4px 2px;
}
.clay-recip-input::placeholder { color: var(--lw-text-4); }

/* Quill inside the clay modal — square the theme's corners to the field radius. */
.clay-modal-email .ql-toolbar.ql-snow {
  border: 1px solid var(--lw-border); border-bottom: none;
  border-radius: 12px 12px 0 0; background: var(--lw-surface);
}
.clay-modal-email .ql-container.ql-snow {
  border: 1px solid var(--lw-border);
  border-radius: 0 0 12px 12px;
  /* Match WAM's real emails (Aptos), with fallbacks that ship a semibold so the body's
     font-weight:600 renders. Kept in step with EMAIL_BODY_FONT in ledge/services.py, which
     wraps the sent email in the same stack (Quill spans don't carry a font-family). */
  font-family: Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
}
.clay-modal-email #email-editor {
  min-height: 200px; max-height: 42vh; overflow-y: auto;
}
.clay-modal-email .ql-editor { font-size: 14.5px; line-height: 1.55; }

/* Give the custom font / size picker items readable labels (Quill only ships labels for its
   own defaults; our whitelists need their own ::before content). */
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: "Arial"; font-family: Arial; }
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Georgia"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Georgia"]::before { content: "Georgia"; font-family: Georgia; }
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times New Roman"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times New Roman"]::before { content: "Times"; font-family: "Times New Roman"; }
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before { content: "Courier"; font-family: "Courier New"; }
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Verdana"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Verdana"]::before { content: "Verdana"; font-family: Verdana; }

.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8pt"]::before { content: "8"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9pt"]::before { content: "9"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10pt"]::before { content: "10"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11pt"]::before { content: "11"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12pt"]::before { content: "12"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"]::before { content: "14"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16pt"]::before { content: "16"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before { content: "18"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20pt"]::before { content: "20"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"]::before { content: "24"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28pt"]::before { content: "28"; }
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36pt"]::before,
.clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36pt"]::before { content: "36"; }

/* ---- Kanban board view ---------------------------------------------------- */
.clay-board {
  display: flex; align-items: flex-start; gap: 14px;
  overflow-x: auto; padding: 2px 2px 8px; min-height: 420px;
}

.clay-board-col {
  /* Share the row equally: grow to fill the width, never shrink below a
     readable minimum (horizontal scroll kicks in only when it truly won't fit). */
  flex: 1 0 220px; min-width: 0; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px;
}

.clay-board-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1px var(--t-ring);
}

.clay-board-col-dot {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--t-solid);
}

.clay-board-col-label {
  flex: 1; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
}

.clay-board-col-count {
  font-size: 11px; font-weight: 800; opacity: .75;
}

.clay-board-col-body {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 48px;
}

.clay-board-empty {
  padding: 18px 12px; border-radius: 12px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--lw-text-4);
  background: var(--lw-surface-2);
  border: 1px dashed var(--lw-border);
}

.clay-board-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px 13px 12px; border-radius: 12px;
  background: var(--lw-surface);
  border: 1px solid var(--lw-border);
  box-shadow: var(--lw-shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}

.clay-board-card:hover {
  transform: translateY(-1px);
  border-color: var(--lw-text-4);
  box-shadow: 0 6px 16px -8px rgba(70, 80, 100, .28);
}

.clay-board-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}

.clay-board-card-due {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}

.clay-board-card-date {
  font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--lw-text-2);
}

.clay-board-card-date.is-overdue { color: var(--lw-overdue); }
.clay-board-card-date.is-today { color: var(--lw-today); }

.clay-board-card-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: 6px; font-size: 9.5px; font-weight: 800;
  background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1px var(--t-ring);
}

.clay-board-card-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--lw-text);
  text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.clay-board-card-title:hover { color: var(--lw-accent); }

.clay-board-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 2px;
}

.clay-board-card-owner {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}

.clay-board-card-owner-name {
  font-size: 11.5px; font-weight: 600; color: var(--lw-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.clay-board-card-comments {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font-size: 10px; font-weight: 700; color: var(--lw-text-4);
}

.clay-board-card .clay-badge {
  flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; height: 21px; padding: 0 8px;
}

/* ---- htmx loading indicator ----------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ============================================================================
   HEADBOARD — a neutral white hero card at the top of the results column.
   Same soft --lw-surface on every scope (no per-scope colour). The scope switcher
   (Same Day / Next Day / Filed) sits above it and reuses .clay-seg-hero; the
   Grid/Board view switch lives inside it on the right. The ring shows today's
   filing completion and is re-rendered out-of-band on row mutations.
   See _headboard.html and _headboard_ring.html.
   ============================================================================ */
/* whole header is centred on the page */
.clay-root .clay-headboard { display: flex; justify-content: center; margin: 0px 0 20px; }

/* white card — a fixed, comfortable width (wider than its content so the three
   body zones can breathe, but deliberately narrower than the full-width table so
   it doesn't read as an elongated bar). Centred by the parent.
   The scope tabs are lifted above its top edge like a crown (see .clay-hb-scope). */
.clay-root .clay-hb-card {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 1600px;
  padding: 40px 40px 20px; border-radius: 20px;
  background: var(--lw-surface); border: 1px solid var(--lw-border);
  box-shadow: 0 16px 34px -20px rgba(60, 70, 95, .32), 0 2px 5px rgba(60, 70, 95, .05);
}

/* scope switcher — the four peer views, centred and bulging up above the card's top
   edge (a "crown"), still attached to it. Raised with its own shadow. */
.clay-root .clay-hb-scope {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -62%);
  display: flex; justify-content: center; z-index: 2;
}
.clay-root .clay-hb-scope .clay-seg {
  background: var(--lw-surface);
  box-shadow: 0 10px 22px -9px rgba(60, 70, 95, .4), 0 2px 6px rgba(60, 70, 95, .08);
}

/* body row, three zones: left lead (ring + title/date) · flexible centre (stage
   summary) · right controls. The centre grows to fill the width so nothing floats. */
.clay-root .clay-hb-body { display: flex; align-items: center; gap: 28px; }

/* left zone: ring + title/date. Natural width — the centre zone takes the slack. */
.clay-root .clay-hb-lead {
  flex: none; min-width: 0; display: flex; align-items: center; gap: 18px;
}

/* centre zone: stage summary (or the sub line) — grows and centres in the gap
   between the title and the controls so the card fills instead of leaving a hole. */
.clay-root .clay-hb-mid {
  flex: 1 1 auto; min-width: 0; display: flex; justify-content: center;
}
.clay-root .clay-hb-lead-text { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.clay-root .clay-hb-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clay-root .clay-hb-title {
  margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.03em;
  line-height: 1.02; color: var(--lw-text);
}
.clay-root .clay-hb-date {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 800;
  color: var(--src-tint);
  background: color-mix(in srgb, var(--src-tint) 9%, var(--lw-surface));
  border: 1px solid color-mix(in srgb, var(--src-tint) 22%, transparent);
  transition: color .3s, background .3s, border-color .3s;
}
.clay-root .clay-hb-date svg { opacity: .9; }
.clay-root .clay-hb-sub {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--lw-text-3);
}
.clay-root .clay-hb-sub strong { color: var(--lw-text); font-weight: 800; }

/* Action KPIs — the four things needing action now, each a filter link with a big urgency
   number over a toned label. Empty metrics dim (.is-zero); the active filter is tinted
   (.is-active). --t-* come from the .tone-* class on each link. */
.clay-root .clay-hb-kpis {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 8px; min-width: 220px;
}
/* Rec/RTX route KPIs — only three chips (All / Ledged / Pending). Spread them well apart and pull
   the group toward the left of the centre zone (margin-right:auto) rather than dead-centre. The
   chips are <button>s here (they submit the filter form), so strip the native button chrome. */
.clay-root .clay-hb-kpis--route { gap: 16px 84px; margin-right: auto; padding-left: 6px; }
.clay-root button.clay-kpi { background: none; border: none; font: inherit; cursor: pointer; }
.clay-root .clay-kpi {
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px 12px; border-radius: 12px; text-decoration: none;
  transition: background .12s, box-shadow .12s;
}
.clay-root .clay-kpi:hover { background: var(--lw-surface-2); }
.clay-root .clay-kpi.is-active {
  background: var(--t-bg); box-shadow: inset 0 0 0 1px var(--t-ring);
}
.clay-root .clay-kpi-n {
  font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--t-text);
}
.clay-root .clay-kpi.is-zero .clay-kpi-n { color: var(--lw-text-4); }
.clay-root .clay-kpi-l {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--lw-text-3);
}
.clay-root .clay-kpi.is-zero .clay-kpi-l { opacity: .55; }
.clay-root .clay-kpi-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--t-solid); flex: none; }

/* Deleted Items "Stage" filter — the pipeline-KPI pill look, but with a larger label, wider
   spacing spread across the centre, and NO persistent tint on the selected pill (the active
   one is marked only by a darker/bolder label, so no colour "stays" after a click). Scoped to
   .clay-stage-filter so the real pipeline KPIs are untouched. */
.clay-root .clay-stage-filter { gap: 14px 48px; }
.clay-root .clay-stage-filter .clay-kpi-l { font-size: 17px; }
.clay-root .clay-stage-filter .clay-kpi-dot { width: 10px; height: 10px; }
.clay-root .clay-stage-filter .clay-kpi.is-active {
  background: transparent; box-shadow: none;
}
.clay-root .clay-stage-filter .clay-kpi.is-active .clay-kpi-l {
  color: var(--lw-text); font-weight: 900;
}
/* Hover must paint even on the active pill (its transparent-bg rule above otherwise wins on
   specificity) so ALL / Stage 1 / Stage 2 all get the same hover feedback. */
.clay-root .clay-stage-filter .clay-kpi:hover,
.clay-root .clay-stage-filter .clay-kpi.is-active:hover {
  background: var(--lw-surface-2);
}

/* right zone: control cluster — view switch + text-size, grouped */
.clay-root .clay-hb-tools {
  flex: none; display: flex; align-items: center; gap: 10px;
}

/* filing-progress ring — overall share of the live ledge that is filed */
.clay-root .clay-hb-ring { position: relative; width: 76px; height: 76px; flex: none; }
.clay-root .clay-hb-ring svg { transform: rotate(-90deg); display: block; }
.clay-root .clay-hb-ring-track { stroke: var(--lw-surface-2); }
.clay-root .clay-hb-ring-fill {
  stroke: url(#hb-ring-grad); stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.22, .61, .36, 1);
}
/* Gradient stops follow the selected source tab's colour (--src-ring-*); default = purple. */
.clay-root .clay-hb-ring-g1 { stop-color: var(--src-ring-1); transition: stop-color .3s; }
.clay-root .clay-hb-ring-g2 { stop-color: var(--src-ring-2); transition: stop-color .3s; }
.clay-root .clay-hb-ring-lbl {
  position: absolute; inset: 0; display: grid; place-items: center; line-height: 1;
}
.clay-root .clay-hb-ring-count { display: flex; align-items: baseline; gap: 1px; }
.clay-root .clay-hb-ring-n { font-size: 21px; font-weight: 900; letter-spacing: -.03em; color: var(--lw-text); }
.clay-root .clay-hb-ring-sep { font-size: 13px; font-weight: 700; color: var(--lw-text-4); }
.clay-root .clay-hb-ring-t { font-size: 13px; font-weight: 800; letter-spacing: -.02em; color: var(--lw-text-3); }

@media (max-width: 720px) {
  .clay-root .clay-hb-body { flex-wrap: wrap; gap: 14px; }
  .clay-root .clay-hb-lead,
  .clay-root .clay-hb-mid { flex: 1 1 100%; min-width: 0; }
  .clay-root .clay-hb-mid { justify-content: flex-start; }
  .clay-root .clay-hb-tools { width: 100%; justify-content: flex-end; }
}

/* ---- responsive: collapse the sidebar above the content on narrow screens -- */
@media (max-width: 1024px) {
  .clay-root { flex-direction: column; }
  .clay-sidebar { position: static !important; width: 100% !important; height: auto !important; }
}

/* ============================================================================
   Notifications — the top-bar bell, its dropdown, and the toast stack.
   Temporary, session-backed alerts (see apps/ledge/notifications.py). Scoped under
   .clay-root; tone-* accent variables are provided by the per-tone classes above.
   ============================================================================ */

/* #notif-dot is just the OOB-swap wrapper — keep it out of the bell button's
   grid so the SVG is the only grid item and stays vertically centered */
.clay-root #notif-dot { display: contents; }

/* red "unread" dot on the bell — shown only while something is unread */
.clay-root .notif-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--tone-red-solid);
  box-shadow: 0 0 0 2px var(--lw-surface);
}

/* ---- dropdown panel ---- */
.clay-root .notif-panel {
  position: absolute; right: 0; top: 48px; z-index: 40;
  width: 340px; max-width: min(92vw, 340px);
  padding: 0; overflow: hidden;
}
.clay-root .notif-panel-head {
  padding: 12px 15px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .01em; color: var(--lw-text);
  border-bottom: 1px solid var(--lw-divider);
}
.clay-root .notif-panel-body { max-height: 360px; overflow-y: auto; }

.clay-root .notif-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 16px 34px; color: var(--lw-text-4);
  font-size: 12.5px; font-weight: 600; text-align: center;
}
.clay-root .notif-empty svg { color: var(--lw-text-4); opacity: .8; }

/* ---- one notification in the list ---- */
.clay-root .notif-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px 11px 15px;
  border-bottom: 1px solid var(--lw-divider);
}
.clay-root .notif-item:last-child { border-bottom: 0; }
.clay-root .notif-item.is-unread { background: color-mix(in srgb, var(--t-bg) 45%, var(--lw-surface)); }
.clay-root .notif-item.is-unread::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--t-solid);
}
.clay-root .notif-item-icon {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 9px; margin-top: 1px;
  background: var(--t-bg); color: var(--t-text);
}
.clay-root .notif-item-body { flex: 1; min-width: 0; }
.clay-root .notif-item-msg {
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--lw-text-2);
  word-break: break-word;
}
.clay-root .notif-item-time {
  margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--lw-text-4);
}
.clay-root .notif-ref {
  font-family: var(--lw-mono); font-weight: 600; color: var(--lw-accent);
  text-decoration: none;
}
.clay-root .notif-ref:hover { text-decoration: underline; }
.clay-root .notif-item-x {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin: -2px -3px 0 0;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--lw-text-4);
}
.clay-root .notif-item-x:hover { background: var(--lw-surface-2); color: var(--lw-text-2); }

/* ---- toast stack: pops below the bell, top-right ---- */
.clay-root .notif-toast-stack {
  position: fixed; top: 66px; right: 28px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  width: 320px; max-width: calc(100vw - 40px);
  pointer-events: none;
}
.clay-root .notif-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 14px;
  background: var(--lw-surface);
  border: 1px solid var(--lw-border);
  border-left: 3px solid var(--t-solid);
  box-shadow: 0 10px 28px -10px rgba(45, 52, 64, .28), 0 2px 6px rgba(45, 52, 64, .06);
  /* enter/leave: start slightly right + faded; JS toggles .is-in / .is-leaving */
  opacity: 0; transform: translateX(14px) scale(.98);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .3, 1);
  pointer-events: auto;
}
.clay-root .notif-toast.is-in { opacity: 1; transform: translateX(0) scale(1); }
/* leaving: drift up and shrink toward the bell, then JS removes it */
.clay-root .notif-toast.is-leaving { opacity: 0; transform: translateY(-14px) scale(.9); }
.clay-root .notif-toast-icon {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--t-bg); color: var(--t-text);
}
.clay-root .notif-toast-msg {
  flex: 1; min-width: 0; align-self: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--lw-text-2);
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .clay-root .notif-toast { transition: opacity .2s ease; transform: none; }
  .clay-root .notif-toast.is-in { transform: none; }
  .clay-root .notif-toast.is-leaving { transform: none; }
}

/* --- Hover tooltip (data-tip) --------------------------------------------------------
   A styled, instant tooltip that replaces the flaky/delayed native `title`. Used by the
   working-list "why is this on this tab?" info icon (see _row.html; tone class colours the
   bubble). The results table has no overflow clipping (see _results.html), so the
   absolutely-positioned bubble floats past the row/table edges. */
.clay-root .clay-tip { position: relative; color: var(--lw-text-4); transition: color .12s ease; }
.clay-root .clay-tip:hover, .clay-root .clay-tip:focus-visible { color: var(--lw-text-2); }
.clay-root .clay-tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-3px);
  width: max-content; max-width: 280px;
  padding: 3px 8px; border-radius: 7px;
  background: var(--t-bg); color: var(--t-text);
  box-shadow: inset 0 0 0 1px var(--t-ring), 0 8px 22px -6px rgba(45, 52, 64, .38);
  font-size: calc(var(--lw-fs, 17px) - 4px); font-weight: 600; line-height: 1.3;
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 60;
}
.clay-root .clay-tip:hover::after, .clay-root .clay-tip:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}