/* ============================================================================
   Exponential Pipeline — dark theme
   CSS only. Selectors match the DOM built in app.js; do not rename them.
   Design tokens drive the palette so the look stays cohesive.
   ========================================================================== */

:root {
  /* Surfaces (cool near-neutral charcoals, layered for elevation) */
  --bg: #15171c;
  --panel: #1c1f26;        /* sidebar + columns */
  --panel2: #242832;       /* cards, inputs, chips base */
  --card: #2b303b;         /* nested subtasks */
  --elev: #2f3542;         /* hover / raised */

  /* Text */
  --text: #e8ebf1;
  --muted: #99a2b2;

  /* Brand + status */
  --accent: #5b9dff;       /* primary blue (bright, reads on dark) */
  --accent-ink: #cfe1ff;   /* light-blue text on blue tints */
  --accent-solid: #1967d2; /* filled button blue — white text meets WCAG AA (5.3:1) */
  --accent-solid-hi: #2a78e6;
  --green: #37b981;
  --green-ink: #eafff4;
  --amber: #f5c342;
  --danger: #ef6b6b;
  --danger-bg: #4a1f1f;

  /* Lines, rings, shadows */
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --ring: rgba(91,157,255,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,.38);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.6);

  /* Radii + rhythm */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
}

* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: radial-gradient(1200px 600px at 78% -8%, #1d222c 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 14px/1.5 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* Visible keyboard focus on every genuinely focusable control */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input[type=checkbox]:focus-visible { outline-offset: 3px; }

/* Custom scrollbars (thin, unobtrusive) */
* { scrollbar-width: thin; scrollbar-color: #3a414f transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #363d4a; border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4a5262; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================================
   Login
   ========================================================================== */
.login { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 24px; }
.login-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  padding: 48px 56px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.logo-plate { background: #fff; padding: 20px 26px; border-radius: 14px; margin-bottom: 22px; display: inline-block; box-shadow: var(--shadow-sm); }
.login-logo { display: block; max-width: 280px; width: 100%; height: auto; }
.login-card h1 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.login-card h1 span { color: var(--accent); font-weight: 300; }
.login-card p { color: var(--muted); margin: 8px 0 24px; }
.gbtn {
  display: inline-block; background: var(--accent-solid); color: #fff; text-decoration: none;
  padding: 12px 30px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--shadow-sm); transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.gbtn:hover { background: var(--accent-solid-hi); box-shadow: var(--shadow-md); }
.gbtn:active { transform: translateY(1px); }
.login-card small { display: block; margin-top: 16px; color: var(--muted); }

/* ============================================================================
   Header chrome
   Keep the box exactly 53px tall — .body height is calc(100vh - 53px).
   ========================================================================== */
header {
  display: flex; align-items: center; gap: 14px;
  height: 53px; padding: 0 20px;
  background: linear-gradient(180deg, #191c22, #15171c);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.brand { font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 10px; letter-spacing: .01em; }
.hlogo { height: 26px; width: auto; background: #fff; padding: 3px 7px; border-radius: var(--r-sm); display: block; box-shadow: var(--shadow-sm); }
.logo { display: inline-block; width: 14px; height: 14px; background: var(--accent); border-radius: 3px; margin-right: 8px; }
#boardTitle { font-size: 16px; color: var(--text); font-weight: 600; letter-spacing: -.01em; }
#boardCount { font-size: 12px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
#boardCount:empty { display: none; }
#boardInProc {
  font-size: 12px; color: var(--green-ink);
  background: rgba(55,185,129,.18); border: 1px solid rgba(55,185,129,.45);
  font-weight: 600; border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; margin-left: 4px;
}
#boardInProc:empty { display: none; }
.spacer { flex: 1; }

#search {
  background: var(--panel2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--text); padding: 8px 16px; width: 260px; transition: border-color .15s ease, box-shadow .15s ease, width .15s ease;
}
#search::placeholder { color: var(--muted); }
#search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* Shared header button look */
header button {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 7px 15px; cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
header button:hover { background: var(--elev); border-color: var(--line-2); }
header button:active { transform: translateY(1px); }
#avatar { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line-2); }
#avatar:hover { border-color: var(--accent); }

.body { display: flex; height: calc(100vh - 53px); position: relative; }

/* ============================================================================
   Sidebar
   ========================================================================== */
nav {
  width: 210px; background: var(--panel); padding: 12px 8px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--line);
}
nav .bitem {
  padding: 9px 14px; border-radius: 0 var(--r-pill) var(--r-pill) 0; cursor: pointer; color: var(--text);
  display: flex; gap: 8px; align-items: center; font-size: 13.5px;
  border-left: 3px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
nav .bitem:hover { background: var(--panel2); }
nav .bitem.active { background: rgba(91,157,255,.14); color: #fff; border-left-color: var(--accent); font-weight: 600; }
/* Search: boards that contain the searched loan get highlighted with a hit count */
nav .bitem-hit { background: rgba(245,195,66,.14); border-left-color: var(--amber); color: #fff; }
nav .bitem-hitn { margin-left: auto; background: var(--amber); color: #141414; border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; font-weight: 700; line-height: 1.5; }
nav .addboard { color: var(--muted); }

.nav-sec { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; padding: 14px 14px 5px; }

/* ============================================================================
   Board + columns
   ========================================================================== */
main { flex: 1; display: flex; gap: 0; padding: 16px; overflow-x: auto; align-items: flex-start; }

.list {
  background: var(--panel); border-radius: var(--r-lg); width: 300px; flex-shrink: 0; max-height: 100%;
  margin-right: 14px; /* spacing via margin (not flex gap) so a collapsed list leaves no gap during search */
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-left: 4px solid var(--accent); box-shadow: var(--shadow-sm); overflow: hidden;
}
/* ---- Search focus: matching lists stay & rise; non-matching lists collapse and fly away ---- */
body.search-active .list {
  transition: width .38s cubic-bezier(.2,.7,.2,1), margin .38s cubic-bezier(.2,.7,.2,1),
    padding .3s ease, opacity .26s ease, transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
body.search-active .list.is-hidden {
  width: 0; min-width: 0; margin: 0; padding: 0; border-width: 0; opacity: 0;
  transform: translateY(-14px) scale(.93); pointer-events: none;
}
body.search-active .list.is-match {
  width: 450px; max-width: 450px; /* 1.5× wider so the matched loan is easier to read */
  box-shadow: 0 0 0 1px rgba(91,157,255,.45), 0 14px 34px rgba(0,0,0,.42);
}
.card.is-hidden-card { display: none; } /* non-matching cards inside a matching list */
body.search-active .card.is-hit {
  outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-md);
  box-shadow: 0 0 0 4px rgba(91,157,255,.22); animation: hit-pop .32s cubic-bezier(.2,.7,.2,1);
}
@keyframes hit-pop { 0% { transform: scale(.99); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } }
#board.is-centered { justify-content: center; }
body.search-active .list:not([data-list-id]) { display: none; } /* hide "+ Add new list" while searching */
#searchCount { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; }
#searchCount:empty { display: none; }
#emptyState { display: none; }
body.no-results #emptyState {
  display: grid; place-items: center; position: absolute; inset: 0; pointer-events: none;
  color: var(--muted); font-size: 16px; letter-spacing: .01em;
}
@media (prefers-reduced-motion: reduce) {
  body.search-active .list, .card { transition-duration: .001ms !important; }
  body.search-active .card.is-hit { animation: none; }
}
.list-head { display: flex; align-items: center; padding: 12px 14px 8px; gap: 8px; cursor: grab; }
.list-head:active { cursor: grabbing; }
.list-head h3 { font-size: 14.5px; font-weight: 600; flex: 1; letter-spacing: -.01em; min-width: 0; }
.list-head h3.edit-title { border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; }
.list-head .count { color: var(--muted); font-size: 12px; }
.list-head .count { margin-left: auto; }
.list-head .count-proc {
  background: rgba(55,185,129,.18); color: var(--green-ink); border: 1px solid rgba(55,185,129,.4);
  font-weight: 600; border-radius: var(--r-pill); padding: 2px 9px; font-size: 11px; flex-shrink: 0;
}

.addtask {
  color: var(--accent); background: none; border: 0; text-align: left; padding: 4px 14px 10px;
  cursor: pointer; font-size: 13px; font-weight: 500; border-radius: var(--r-sm);
}
.addtask:hover { color: var(--accent-solid-hi); text-decoration: underline; }
.cards { overflow-y: auto; padding: 2px 8px 12px; }

/* Collapsed column (rotated label rail) */
.list.collapsed { width: 44px; cursor: pointer; }
.list.collapsed .clabel {
  writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 0; font-weight: 600;
  color: var(--text); cursor: pointer; white-space: nowrap; margin: 0 auto; letter-spacing: .02em;
}

/* ============================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--panel2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 10px 11px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease;
}
.card:hover { background: var(--elev); border-color: rgba(91,157,255,.35); box-shadow: var(--shadow-md); }
.card-title { display: flex; gap: 8px; align-items: baseline; font-weight: 600; letter-spacing: -.005em; }
/* Drag handle — the only place a card starts dragging, so all card text stays freely selectable */
.drag-grip { cursor: grab; color: var(--muted); opacity: .45; font-size: 13px; line-height: 1; align-self: center;
  user-select: none; flex-shrink: 0; letter-spacing: -2px; }
.drag-grip:hover { opacity: 1; }
.drag-grip:active { cursor: grabbing; }
.card, .card * { -webkit-user-select: text; user-select: text; } /* allow select-to-copy anywhere on a card */
.drag-grip { -webkit-user-select: none; user-select: none; }
.card-title .circle {
  width: 16px; height: 16px; border: 2px solid var(--muted); border-radius: 50%; flex-shrink: 0;
  position: relative; top: 2px; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.card-title .circle:hover { border-color: var(--green); box-shadow: 0 0 0 3px rgba(55,185,129,.2); }
.card-title .circle.checked { background: var(--green); border-color: var(--green); }
.card-title .circle.checked::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 11px; line-height: 13px; text-align: center; }
.card-done .card-title > span:last-child { color: var(--muted); text-decoration: line-through; }
.done-cards .card { opacity: .78; }
.done-cards .card:hover { opacity: 1; }
.card-notes { color: var(--muted); font-size: 12px; margin: 3px 0 4px 24px; white-space: pre-line; max-height: 54px; overflow: hidden; border-radius: var(--r-sm); }

.due {
  display: inline-block; background: rgba(91,157,255,.16); color: var(--accent-ink);
  border: 1px solid rgba(91,157,255,.3); font-size: 11px; font-weight: 500;
  border-radius: var(--r-pill); padding: 2px 10px; margin: 2px 0 2px 24px;
}
.due.today { background: rgba(239,107,107,.16); color: #f5b4b4; border-color: rgba(239,107,107,.4); }
.due.add { background: transparent; color: var(--muted); border-style: dashed; cursor: pointer; }
.due.add:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================================
   Regular subtasks
   ========================================================================== */
.subtask {
  margin: 6px 0 0 18px; padding: 7px 9px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: flex; gap: 8px; align-items: flex-start;
  transition: border-color .12s ease;
}
.subtask:hover { border-color: var(--line-2); }
.subtask input[type=checkbox] { accent-color: var(--green); width: 15px; height: 15px; margin-top: 2px; cursor: pointer; }
.subtask .st-title { cursor: pointer; }
.subtask.done .st-title { color: var(--muted); text-decoration: line-through; }
.subtask .st-notes { color: var(--muted); font-size: 11px; white-space: pre-line; }
.st-body { flex: 1; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 10px; font-weight: 600; border-radius: var(--r-pill); padding: 2px 9px; background: #3c4250; color: #fff; cursor: pointer; letter-spacing: .02em; }
.chip.off { opacity: .38; }
.chip.lbl-edit, .chip.done-lbl { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.chip.lbl-edit:hover, .chip.done-lbl:hover { color: var(--text); border-color: var(--accent); }

/* ============================================================================
   Inline editing (no popup)
   ========================================================================== */
.card-title > .edit-title { flex: 1; cursor: text; border-radius: var(--r-sm); padding: 1px 3px; margin: -1px -3px; }
.edit-title:hover, .st-title:hover, .card-notes.editable:hover, .st-notes.editable:hover { background: rgba(255,255,255,.06); }
.card-notes.editable, .st-notes.editable, .st-title { cursor: text; }
.inline-edit {
  width: 100%; background: #12141a; color: var(--text); border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 8px 10px; font: inherit; line-height: 1.4; box-shadow: 0 0 0 3px var(--ring);
}
.inline-edit:focus { outline: none; }
input.inline-edit { min-height: 34px; }
textarea.inline-edit, .inline-edit.ml { min-height: 84px; resize: vertical; overflow-y: auto; max-height: 420px; }

.card-del, .st-del { margin-left: auto; color: var(--muted); cursor: pointer; opacity: 0; padding: 0 2px 0 6px; flex-shrink: 0; transition: opacity .12s ease, color .12s ease; }
.card:hover .card-del, .subtask:hover .st-del { opacity: .55; }
.card-del:hover, .st-del:hover { color: var(--danger); opacity: 1; }
.add-sub { margin: 8px 0 0 18px; }
.add-sub-inp { font-size: 12px; padding: 5px 8px; }

/* ============================================================================
   LP Workflow Check (pinned, progressive reveal)
   Keep .wf-caret large (~24px); .wf-note = blue info; .wf-usernote = amber editable.
   ========================================================================== */
.wf {
  border: 1px solid rgba(91,157,255,.4); border-radius: var(--r-md); margin: 8px 0 10px;
  background: linear-gradient(180deg, #1f2a3d, #1b2334); overflow: hidden; box-shadow: var(--shadow-sm);
}
.wf-head {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
  font-weight: 600; font-size: 12px; letter-spacing: .01em;
  background: linear-gradient(180deg, #2a4373, #223860); color: #eaf1ff;
  transition: background .12s ease;
}
.wf-head:hover { background: linear-gradient(180deg, #315084, #274372); }
.wf-caret { width: 24px; font-size: 24px; line-height: 1; color: var(--accent); font-weight: 700; text-align: center; flex-shrink: 0; }
.wf-title { flex: 1; }
.wf-prog { font-size: 11px; background: var(--accent-solid); color: #fff; border-radius: var(--r-pill); padding: 1px 9px; font-weight: 600; }

.wf-step { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.08); }
.wf-step input[type=checkbox], .wf-subcheck input[type=checkbox] { accent-color: var(--green); width: 15px; height: 15px; margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.wf-step.done .st-title { color: var(--muted); text-decoration: line-through; }
.wf-num { color: var(--accent); font-weight: 700; font-size: 12px; margin-top: 1px; flex-shrink: 0; min-width: 18px; }
.wf-parent { align-items: center; font-weight: 600; }
.wf-parent .wf-prog { background: rgba(255,255,255,.1); color: var(--text); }
.wf-parent.done .st-title { color: var(--muted); }
.wf-subcheck {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 9px 6px 26px;
  border-top: 1px solid rgba(255,255,255,.05); background: rgba(0,0,0,.16); font-size: 13px;
}
.wf-subcheck.done .st-title { color: var(--muted); text-decoration: line-through; }
.wf-done { padding: 8px 10px; color: var(--green); font-size: 12px; font-weight: 600; }
/* Breadcrumb above the single collapsed check */
.wf-crumb { padding: 6px 10px 0; color: var(--muted); font-size: 11px; font-weight: 600; }

/* Title status: editable effective-date chip */
.title-eff {
  display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--accent-ink);
  background: rgba(91,157,255,.16); border: 1px solid rgba(91,157,255,.5); border-radius: var(--r-sm);
  padding: 3px 9px; cursor: pointer; transition: background .12s ease;
}
.title-eff:hover { background: rgba(91,157,255,.24); }
.title-eff.add { color: var(--muted); background: transparent; border-style: dashed; font-weight: normal; }

/* At-a-glance status badges under the card title */
.card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 1px 0 6px; }
.card-badge { font-size: 11px; font-weight: 700; color: #111; border-radius: var(--r-pill); padding: 1px 8px; line-height: 1.55; }
/* Active label-filter button */
#filterBtn.filter-on { background: rgba(91,157,255,.18); border-color: var(--accent); color: var(--accent-ink); }
/* Scaffold step notes are tucked behind an ⓘ button next to the title — click to reveal/hide */
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-left: 7px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent);
  font-size: 12px; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle;
  font-family: Georgia, 'Times New Roman', serif; user-select: none; flex-shrink: 0; transition: background .12s ease, color .12s ease; }
.info-btn:hover, .info-btn.open { background: var(--accent); color: #fff; }
.wf-info { margin: 4px 9px 8px 34px; display: flex; flex-direction: column; gap: 6px; }
.wf-info .wf-note, .wf-info .wf-help { margin: 0; }
/* Parent auto-checkbox: read-only indicator (checks itself when all sub-items are done) — keep it
   full-strength so it doesn't look like a broken/disabled control. */
.wf-auto-check { pointer-events: none; cursor: default; opacity: 1; accent-color: var(--green); }
.wf-help { padding: 8px 10px; font-size: 12px; line-height: 1.45; color: #dfe8f5;
  background: rgba(66,133,244,.10); border: 1px solid rgba(91,157,255,.35); border-radius: var(--r-sm); white-space: pre-line; }
/* Claude does → blue (default), Closer does → orange, each with a small label header */
.wf-help-claude::before { content: 'Claude does'; display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px; color: var(--accent); }
.wf-help-closer { background: rgba(245,195,66,.10); border-color: rgba(245,195,66,.45); color: #efe6c6; }
.wf-help-closer::before { content: 'Closer does'; display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px; color: var(--amber); }

/* Scaffold item note — blue accent, clearly visible (not muted) */
.wf-note {
  margin-top: 4px; font-size: 12px; line-height: 1.4; color: #dfe8f5; white-space: pre-line;
  background: rgba(91,157,255,.12); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 5px 9px;
}
.wf-parent.done .wf-note, .wf-step.done .wf-note, .wf-subcheck.done .wf-note { text-decoration: none; color: #cfd8e6; }
/* Container-level reference block (Title Review: the 4 Encompass fields) */
.wf-rootnote { margin: 6px 0 4px; }

/* Colored note highlights (==color:text== markup). Highlighter look — dark text on a colored bg,
   readable in both themes. */
mark.hl { border-radius: 3px; padding: 0 3px; color: #141414; }
.hl-red { background: #ff6b6b; }
.hl-orange { background: #ffa94d; }
.hl-yellow { background: #ffe066; }
.hl-green { background: #8ce99a; }
.hl-blue { background: #74c0fc; }
.hl-purple { background: #d0bfff; }
.hl-gray { background: #ced4da; }
/* Note-editor highlight toolbar */
.note-editor { display: block; }
.hl-bar { display: flex; gap: 6px; align-items: center; margin: 0 0 5px; flex-wrap: wrap; }
.hl-sw { width: 17px; height: 17px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(0,0,0,.3);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #141414; }
.hl-sw:hover { outline: 2px solid rgba(255,255,255,.35); }
.hl-clear { background: transparent; border: 1px solid #6b7785; color: #b8c2cf; }
.hl-hint { color: var(--muted); font-size: 11px; margin-left: 4px; opacity: .8; }
/* Live "how it will look" preview under the note editor */
.note-preview { margin-top: 6px; padding: 6px 9px; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: rgba(255,255,255,.03); }
.note-preview:empty { display: none; }

/* End-user editable amber note */
.wf-usernote {
  margin-top: 4px; font-size: 12px; line-height: 1.4; white-space: pre-line;
  border-left: 3px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 5px 9px; cursor: text;
  color: #efe6c6; background: rgba(245,195,66,.12);
}
/* API/skill-authored note → yellow */
.wf-usernote.src-api { color: #f6e9b0; background: rgba(245,195,66,.14); border-left-color: var(--amber); }
/* Front-end (user-typed) note → green */
.wf-usernote.src-ui { color: #d5f2df; background: rgba(55,185,129,.14); border-left-color: var(--green); }
.wf-usernote.src-ui:hover { background: rgba(55,185,129,.22); }
.wf-usernote.src-api:hover { background: rgba(245,195,66,.2); }
.wf-usernote.add { color: var(--muted); background: transparent; border-left-color: transparent; font-style: italic; }
.wf-usernote.add:hover { background: rgba(255,255,255,.05); }

/* ============================================================================
   Modal + dialogs
   ========================================================================== */
#modal { position: fixed; inset: 0; background: rgba(6,8,12,.66); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.dialog {
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 24px; width: 520px; max-width: 100%; max-height: 84vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.dialog h2 { font-size: 18px; margin-bottom: 14px; letter-spacing: -.01em; }
.dialog label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin: 12px 0 5px; }
.dialog input[type=text], .dialog input[type=date], .dialog input[type=email], .dialog textarea, .dialog select {
  width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text); padding: 9px 11px; font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.dialog input:focus, .dialog textarea:focus, .dialog select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.dialog textarea { min-height: 140px; resize: vertical; }
.dialog .row { display: flex; gap: 8px; align-items: center; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialog button {
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer;
  background: var(--panel2); color: var(--text); font: inherit; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, filter .15s ease;
}
.dialog button:hover { background: var(--elev); }
.dialog button:active { transform: translateY(1px); }
.dialog button.primary { background: var(--accent-solid); border-color: transparent; color: #fff; }
.dialog button.primary:hover { background: var(--accent-solid-hi); }
.dialog button.danger { background: var(--danger-bg); border-color: rgba(239,107,107,.4); color: #f5b4b4; }
.dialog button.danger:hover { filter: brightness(1.15); }
.dialog button.link { background: none; border: 0; color: var(--accent); padding: 2px 6px; border-radius: var(--r-sm); font-weight: 500; }
.dialog button.link:hover { text-decoration: underline; }

#f-subs .sub-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.label-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.label-pick .chip { cursor: pointer; font-size: 12px; padding: 4px 12px; opacity: .45; }
.label-pick .chip.on { opacity: 1; outline: 2px solid rgba(255,255,255,.35); outline-offset: 1px; }
.member { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.member .m-email { flex: 1; }
.completed-toggle { color: var(--muted); cursor: pointer; padding: 9px 14px; font-size: 13px; font-weight: 500; border-top: 1px solid var(--line); transition: color .12s ease; }
.completed-toggle:hover { color: var(--text); }
.drag-ghost { opacity: .4; }

/* ============================================================================
   List header controls
   ========================================================================== */
.list-sort { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .12s ease; }
.list-sort:hover { background: var(--elev); }
.list-menu { cursor: pointer; color: var(--muted); padding: 0 3px; font-size: 17px; line-height: 1; flex-shrink: 0; border-radius: var(--r-sm); transition: color .12s ease; }
.list-menu:hover { color: var(--text); }

#sortAllBtn, #deadBtn { background: var(--panel2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; white-space: nowrap; font: inherit; font-weight: 500; transition: background .15s ease; }
#sortAllBtn:hover { background: var(--elev); }
#deadBtn { background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.4); color: #f5c88a; }
#deadBtn:hover { background: rgba(245,166,35,.22); }

/* ============================================================================
   Dead-loans review
   ========================================================================== */
.dead-row { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; background: var(--panel2); }
.dead-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.dead-title { flex: 1 1 100%; font-weight: 600; min-width: 0; }
.dead-move { background: var(--accent-solid); color: #fff; border: 0; border-radius: var(--r-pill); padding: 7px 15px; cursor: pointer; white-space: nowrap; font-weight: 700; box-shadow: var(--shadow-sm); transition: filter .15s ease, transform .05s ease; }
.dead-move.withdraw { background: #b3261e; color: #fff; }
.dead-move:hover { filter: brightness(1.12); }
.dead-move:active { transform: translateY(1px); }
.dead-move:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; filter: none; }
.dead-steps { margin: 6px 0 4px; padding-left: 20px; color: var(--muted); font-size: 13px; }
.dead-steps li { margin: 3px 0; }
.dead-stop { background: #5a4300; color: #ffe08a; border: 1px solid #b8860b; border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; white-space: nowrap; font-weight: 600; transition: filter .15s ease; }
.dead-stop:hover { filter: brightness(1.15); }
.dead-wd-note { color: #f2a49b; font-size: 12px; font-style: italic; }
.dead-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.dead-q { color: var(--muted); }
.dead-toggle { border: 2px solid transparent; border-radius: var(--r-pill); padding: 4px 18px; cursor: pointer; font-weight: 700; color: #fff; transition: filter .15s ease, opacity .15s ease; }
.dead-toggle:hover { filter: brightness(1.1); }
.dead-toggle.yes { background: #1e9e52; }
.dead-toggle.no  { background: #c0392b; }
.dead-toggle:not(.sel) { opacity: .5; }
.dead-toggle.sel { opacity: 1; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.dead-comment { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; min-height: 42px; resize: vertical; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; }
.dead-comment:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.dead-ms { margin: 6px 0 2px; font-size: 13px; color: #cbd5e1; font-weight: 600; }
.dead-reasons { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.dead-reasons li { margin: 2px 0; }

/* ============================================================================
   Popup menus (list ⋮ menu, sort picker, avatar, sync)
   ========================================================================== */
.popup { position: fixed; z-index: 60; background: var(--panel2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 6px; min-width: 190px; box-shadow: var(--shadow-lg); }
.popup-lbl { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; padding: 8px 10px 4px; }
.popup-item { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: background .1s ease; }
.popup-item:hover { background: var(--elev); }
.popup-item.on { color: var(--accent); font-weight: 600; }
.popup-item.on::before { content: '✓'; margin-right: 2px; }
.popup-item.danger { color: #f5a9a9; }
.popup-item.danger:hover { background: var(--danger-bg); }
.popup-colors { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.popup-colors .sw { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,.35); transition: transform .1s ease; }
.popup-colors .sw:hover { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; transform: scale(1.1); }

/* ============================================================================
   Responsiveness (basic — desktop-first dense board)
   ========================================================================== */
@media (max-width: 1100px) {
  nav { width: 184px; }
  #search { width: 200px; }
}
@media (max-width: 820px) {
  header { gap: 10px; padding: 0 12px; }
  nav { width: 156px; }
  #search { width: 150px; }
  main { padding: 12px; gap: 12px; }
  .list { width: 84vw; max-width: 320px; }
  .dialog { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Screen-reader-only text (table captions etc.) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================================
   Processor Dashboard (left-nav page, .lpdash) — one processor board per page
   ========================================================================== */
.lpdash { flex: 1; min-width: 0; max-width: 1500px; padding: 2px 6px 24px; }
.lp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.lp-title { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.lp-asof { color: var(--muted); font-size: 12.5px; }
.lp-refresh, .lp-error button, .lp-fchip {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 6px 13px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.lp-refresh:hover, .lp-error button:hover, .lp-fchip:hover { background: var(--elev); }
.lp-refresh:active, .lp-fchip:active { transform: translateY(1px); }
.lp-refresh { margin-left: auto; }

/* Filter bar: one-of chips with counts + stage select */
.lp-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-fchip { display: inline-flex; align-items: center; gap: 7px; }
.lp-fchip[aria-pressed="true"] { background: rgba(91,157,255,.16); border-color: var(--accent); color: #fff; font-weight: 600; }
.lp-fchip .lp-n { background: rgba(255,255,255,.08); color: var(--muted); border-radius: var(--r-pill); padding: 0 7px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.lp-fchip[aria-pressed="true"] .lp-n { background: rgba(91,157,255,.28); color: #fff; }
.lp-stage { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin-left: auto; }
.lp-stage select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
}

/* Sections + tables */
.lp-sec { background: var(--panel2); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.lp-sech { display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; }
.lp-sech h3 { margin: 0; font-size: 15px; }
.lp-sech .count { color: var(--muted); font-size: 12px; background: rgba(255,255,255,.06); border-radius: var(--r-pill); padding: 1px 8px; }
.lp-tablewrap { overflow: auto; max-height: 72vh; border-radius: var(--r-sm); }
.lp-tablewrap-flat { max-height: none; overflow-x: auto; }
.lp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.lp-table th {
  position: sticky; top: 0; z-index: 1; background: var(--panel2);
  text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap;
}
.lp-table th.lp-thsort { padding: 0; }
.lp-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table tbody tr.lp-row:hover td { background: rgba(255,255,255,.025); }
.lp-table tr[hidden] { display: none; }
.lp-empty td { padding: 16px 10px; text-align: center; }
/* Sort buttons live inside <th>; the arrow reflects aria-sort on the header */
.lp-sort {
  background: none; border: 0; color: inherit; font: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit;
  padding: 8px 8px; cursor: pointer; width: 100%; text-align: left; display: inline-flex; align-items: center; gap: 5px; border-radius: 0;
}
.lp-sort:hover { color: var(--text); background: rgba(255,255,255,.04); }
th[aria-sort] .lp-sort { color: var(--text); }
th[aria-sort="ascending"] .lp-sort::after { content: '↑'; font-size: 11px; }
th[aria-sort="descending"] .lp-sort::after { content: '↓'; font-size: 11px; }
/* Loan link is a real button, styled like a link */
.lp-loan { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.lp-loan:hover { text-decoration: underline; }
.lp-borname { font-weight: 500; }
.lp-det { font-size: 11.5px; line-height: 1.35; margin-top: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-st { min-width: 120px; }
.lp-rem { white-space: nowrap; }
.lp-rem .lp-det { display: inline; margin-left: 6px; }
.lp-pay { display: inline-block; font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 8px; }
.lp-pay-unpaid { background: rgba(239,107,107,.16); color: #f5b4b4; border: 1px solid rgba(239,107,107,.5); }
.lp-pay-partial { background: rgba(245,195,66,.16); color: #f3d68a; border: 1px solid rgba(245,195,66,.5); }

/* Status chips: word always visible; glyph via ::before so it is not read twice */
.stchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border-radius: var(--r-pill); padding: 2px 9px 2px 7px; border: 1px solid transparent;
}
.stchip::before { font-size: 10px; line-height: 1; }
.st-ok { background: rgba(55,185,129,.18); border-color: rgba(55,185,129,.45); color: var(--green-ink); }
.st-ok::before { content: '●'; color: var(--green); }
.st-pending { background: rgba(91,157,255,.16); border-color: rgba(91,157,255,.42); color: var(--accent-ink); }
.st-pending::before { content: '◔'; }
.st-expiring { background: rgba(245,195,66,.16); border-color: rgba(245,195,66,.5); color: #f3d68a; }
.st-expiring::before { content: '▲'; font-size: 9px; }
.st-missing { background: transparent; border-color: var(--danger); color: #f5b4b4; }
.st-missing::before { content: '!'; font-weight: 800; font-size: 12px; }
.st-expired { background: var(--danger-bg); border-color: var(--danger); color: #ffd7d7; font-weight: 700; }
.st-expired::before { content: '✕'; }
.st-na, .st-unknown { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 500; }
.st-na::before { content: '–'; }
.st-unknown::before { content: '—'; }

/* Loading skeleton + error banner */
.lp-skel { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #2a2f3a 25%, #353b48 50%, #2a2f3a 75%); background-size: 200% 100%; animation: lp-shimmer 1.2s linear infinite; }
.lp-skelrow td { padding: 12px 8px; }
@keyframes lp-shimmer { to { background-position: -200% 0; } }
.lp-error { display: flex; align-items: center; gap: 12px; background: var(--danger-bg); border: 1px solid var(--danger); color: #ffd7d7; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; }
.lp-error span { flex: 1; }

/* Tooltip (single delegated element; see initTips in app.js) */
#tip {
  position: fixed; z-index: 80; max-width: 320px; pointer-events: none;
  background: #0f1116; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 6px 9px; font-size: 12.5px; line-height: 1.4; white-space: pre-line; box-shadow: var(--shadow-md);
}
#tip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-skel { animation: none; }
  .lp-refresh, .lp-fchip { transition: none; }
}
@media (max-width: 820px) {
  .lpdash { padding: 0; }
  .lp-stage { margin-left: 0; }
  .lp-det { max-width: 140px; }
}

/* ============================================================================
   Email templates (a collapsible section of each processor dashboard — code in templates.js, lazy-loaded)
   ========================================================================== */
.dialog.wide { width: 920px; max-height: 90vh; }
.tpl-head .tpl-dept { margin-left: auto; }
.tpl-head .tpl-new { margin-left: auto; background: var(--accent-solid); border-color: transparent; color: #fff; font-weight: 600; }
.tpl-head .tpl-dept + .tpl-new { margin-left: 0; }
.tpl-head .tpl-new:hover { background: var(--accent-solid-hi); }
.tpl-head .tpl-new:disabled { opacity: .45; cursor: not-allowed; }
.tpl-bar { margin-bottom: 12px; }
.tpl-search { flex: 1 1 260px; max-width: 460px; }
.tpl-searchin {
  width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 7px 14px; font: inherit; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease;
}
.tpl-searchin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.tpl-searchin::-webkit-search-cancel-button { cursor: pointer; }
.tpl-showarch { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; cursor: pointer; user-select: none; }
.tpl-showarch input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.tpl-empty { padding: 26px 8px; font-size: 14px; }

/* List */
.tpl-table td { vertical-align: middle; }
.tpl-row { cursor: pointer; }
.tpl-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tpl-c-name { min-width: 180px; }
.tpl-name { font-weight: 600; }
.tpl-c-subj { max-width: 380px; }
.tpl-subj { display: block; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.tpl-c-rev, .tpl-c-uses { text-align: right; width: 56px; font-variant-numeric: tabular-nums; }
.tpl-c-upd { white-space: nowrap; }
.tpl-c-act { width: 1%; white-space: nowrap; }
.tpl-archived .tpl-name, .tpl-archived .tpl-subj, .tpl-archived .tpl-c-rev, .tpl-archived .tpl-c-upd, .tpl-archived .tpl-c-by, .tpl-archived .tpl-c-uses { opacity: .5; }
.tpl-archchip { margin-left: 8px; vertical-align: middle; }
.tpl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tpl-btn, .dialog .tpl-btn {
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 11px; cursor: pointer; white-space: nowrap;
  background: var(--panel2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.tpl-btn:hover, .dialog .tpl-btn:hover { background: var(--elev); }
.tpl-btn:active { transform: translateY(1px); }
.tpl-btn:disabled, .dialog .tpl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tpl-btn-ghost, .dialog .tpl-btn-ghost { background: transparent; }
.tpl-more { padding: 3px 9px; font-size: 15px; line-height: 1.2; }
.popup-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* Banners (info / warn / stale / error) */
.tpl-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid; border-radius: var(--r-md); padding: 9px 12px; margin: 8px 0; font-size: 13px; }
.tpl-banner-text { flex: 1 1 220px; }
.tpl-banner-info { background: rgba(91,157,255,.12); border-color: rgba(91,157,255,.4); color: var(--accent-ink); }
.tpl-banner-warn, .tpl-banner-stale { background: rgba(245,195,66,.12); border-color: rgba(245,195,66,.45); color: #f3d68a; }
.tpl-banner-error { background: var(--danger-bg); border-color: var(--danger); color: #ffd7d7; }
.tpl-bannerslot:empty { display: none; }

/* Editor dialog */
.dialog input.is-ro { color: var(--muted); background: transparent; cursor: default; }
.tpl-editor { position: relative; }
.tpl-edload { display: grid; gap: 10px; padding: 14px; min-height: 120px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); }
.tpl-edload .lp-skel.short { width: 40%; }
.tpl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tpl-chips-lbl { font-size: 12px; margin-right: 2px; }
.tpl-chip, .dialog .tpl-chip {
  font: 12px/1.6 ui-monospace, Consolas, "Courier New", monospace; background: rgba(91,157,255,.12); border: 1px solid rgba(91,157,255,.4);
  color: var(--accent-ink); border-radius: var(--r-pill); padding: 1px 9px; cursor: pointer; font-weight: 500;
}
.tpl-chip:hover, .dialog .tpl-chip:hover { background: rgba(91,157,255,.26); }
.tpl-defaults { gap: 14px; flex-wrap: wrap; }
.dialog .tpl-def { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; margin: 0; }
.tpl-def span { color: var(--muted); font-size: 12px; font-weight: 600; }
.tpl-def.is-off { opacity: .5; }
.tpl-hint { margin-right: auto; font-size: 12.5px; }
.tpl-actions-row { align-items: center; }
.tpl-ref { position: relative; margin-top: 12px; }
.tpl-ref .tpl-ref-hide { position: absolute; top: 0; right: 0; }

/* Quill (snow) themed to the app: toolbar on --panel2, page-white body = what the recipient sees */
.tpl-editor .ql-toolbar.ql-snow { background: var(--panel2); border: 1px solid var(--line-2); border-radius: var(--r-sm) var(--r-sm) 0 0; font-family: inherit; padding: 6px 8px; }
.tpl-editor .ql-container.ql-snow { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); background: #fff; color: #222; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.tpl-editor .ql-snow .ql-editor { min-height: 240px; max-height: 44vh; color: #222; line-height: 1.5; }
.tpl-editor .ql-snow .ql-editor.ql-blank::before { color: #8a8f99; font-style: normal; }
.tpl-editor .ql-snow .ql-editor a { color: #0645ad; }
.tpl-editor .ql-snow .ql-editor blockquote { border-left: 4px solid #ccc; color: #555; }
.tpl-editor .ql-snow .ql-stroke { stroke: var(--text); }
.tpl-editor .ql-snow .ql-fill, .tpl-editor .ql-snow .ql-stroke.ql-fill { fill: var(--text); }
.tpl-editor .ql-snow .ql-picker { color: var(--text); }
.tpl-editor .ql-snow .ql-picker-options { background: var(--panel2); border-color: var(--line-2); box-shadow: var(--shadow-md); border-radius: var(--r-sm); }
.tpl-editor .ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: var(--line-2); border-radius: var(--r-sm); }
.tpl-editor .ql-snow .ql-picker-label:hover, .tpl-editor .ql-snow .ql-picker-label.ql-active,
.tpl-editor .ql-snow .ql-picker-item:hover, .tpl-editor .ql-snow .ql-picker-item.ql-selected { color: var(--accent); }
.tpl-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .tpl-editor .ql-snow.ql-toolbar button:focus .ql-stroke, .tpl-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.tpl-editor .ql-snow .ql-picker-label:hover .ql-stroke, .tpl-editor .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: var(--accent); }
.tpl-editor .ql-snow.ql-toolbar button:hover .ql-fill, .tpl-editor .ql-snow.ql-toolbar button:focus .ql-fill, .tpl-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }
.tpl-editor .ql-snow.ql-toolbar button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.tpl-editor .ql-snow .ql-tooltip { z-index: 5; color: #222; }
.tpl-editor .ql-snow .ql-tooltip input[type=text] { background: #fff; color: #222; border: 1px solid #ccc; width: 190px; padding: 3px 5px; box-shadow: none; }
/* Picker labels for our whitelists (Quill's stylesheet only names its own defaults) */
.tpl-editor .ql-snow .ql-picker.ql-font { width: 122px; }
.tpl-editor .ql-snow .ql-picker.ql-size { width: 92px; }
.tpl-editor .ql-snow .ql-picker.ql-font .ql-picker-label::before, .tpl-editor .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Default"; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Arial"]::before { content: "Arial"; font-family: Arial, sans-serif; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Georgia"]::before { content: "Georgia"; font-family: Georgia, serif; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Courier New"]::before { content: "Courier New"; font-family: "Courier New", monospace; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Verdana"]::before { content: "Verdana"; font-family: Verdana, sans-serif; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Tahoma"]::before { content: "Tahoma"; font-family: Tahoma, sans-serif; }
.tpl-editor .ql-snow .ql-picker.ql-font [data-value="Trebuchet MS"]::before { content: "Trebuchet MS"; font-family: "Trebuchet MS", sans-serif; }
.tpl-editor .ql-snow .ql-picker.ql-size .ql-picker-label::before, .tpl-editor .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Normal"; }
.tpl-editor .ql-snow .ql-picker.ql-size [data-value="10px"]::before { content: "Small"; }
.tpl-editor .ql-snow .ql-picker.ql-size [data-value="13px"]::before { content: "Normal"; }
.tpl-editor .ql-snow .ql-picker.ql-size [data-value="16px"]::before { content: "Large"; }
.tpl-editor .ql-snow .ql-picker.ql-size [data-value="18px"]::before { content: "Larger"; }
.tpl-editor .ql-snow .ql-picker.ql-size [data-value="24px"]::before { content: "Huge"; }

/* White mail preview cards (history compare, stale-reload reference) */
.tpl-mailwrap { flex: 1 1 0; min-width: 0; margin-top: 8px; }
.tpl-mailcap { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; margin: 0 2px 6px; }
.tpl-mail { background: #fff; color: #222; border-radius: var(--r-md); padding: 14px 16px; font: 13px/1.5 Arial, Helvetica, sans-serif; box-shadow: var(--shadow-sm); max-height: 46vh; overflow: auto; }
.tpl-mailsubj { font-weight: 700; font-size: 14px; border-bottom: 1px solid #e3e6ea; padding-bottom: 8px; margin-bottom: 10px; word-break: break-word; }
.tpl-mailbody { word-break: break-word; }
.tpl-mailbody p, .tpl-mailbody div { margin: 0 0 .7em; }
.tpl-mailbody blockquote { border-left: 4px solid #ccc; margin: .5em 0; padding-left: 12px; color: #555; }
.tpl-mailbody a { color: #0645ad; }
.tpl-mailbody ul, .tpl-mailbody ol { padding-left: 1.6em; margin: 0 0 .7em; }
.tpl-mailbody h1 { font-size: 1.6em; margin: 0 0 .4em; } .tpl-mailbody h2 { font-size: 1.35em; margin: 0 0 .4em; } .tpl-mailbody h3 { font-size: 1.15em; margin: 0 0 .4em; }
.tpl-mailbody .muted { color: #777; }

/* History */
.tpl-histlist { margin: 6px 0 12px; }
.tpl-histrow { cursor: pointer; }
.tpl-histrow:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tpl-histrow.is-sel td { background: rgba(91,157,255,.14); }
.tpl-curchip { margin-left: 8px; }
.tpl-histnote { max-width: 380px; }
.tpl-split { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.tpl-split .tpl-cmp-hint { flex-basis: 100%; margin: 6px 2px; font-size: 12.5px; }
.tpl-restore { margin-top: 10px; }

@media (max-width: 820px) {
  .tpl-split { flex-direction: column; }
  .tpl-c-upd, .tpl-c-by, .tpl-c-uses { display: none; }
  .tpl-head .tpl-new, .tpl-head .tpl-dept { margin-left: 0; }
}

/* ============================================================================
   Phase 3 — dashboard sections (collapsible), reminder composer slide-over,
   reminder tracker, detail drawer, toast. Code: app.js (sections), composer.js.
   ========================================================================== */
/* Collapsible section header: the title itself is the toggle button (inside the h3) */
.lp-col .lp-sech h3 { margin: 0; }
.lp-coltog { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 2px 6px 2px 2px; border-radius: var(--r-sm); }
.lp-coltog:hover { color: #fff; background: rgba(255,255,255,.04); }
.lp-colcaret { display: inline-block; color: var(--muted); font-size: 13px; transition: transform .15s ease; }
.lp-col.is-open .lp-colcaret { transform: rotate(90deg); }
.lp-colbadge:empty { display: none; }
.lp-colbody { margin-top: 4px; }
.lp-colbody[hidden] { display: none; }

/* Envelope button in the Reminders column */
.cmp-open { background: var(--panel); color: var(--accent); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 2px 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-right: 8px; vertical-align: middle; transition: background .12s ease, border-color .12s ease; }
.cmp-open:hover { background: rgba(91,157,255,.14); border-color: var(--accent); }
.cmp-open.has-campaign { color: var(--accent-ink); background: rgba(91,157,255,.16); border-color: rgba(91,157,255,.42); font-variant-numeric: tabular-nums; }

/* Slide-over shell (right-hand panel under the 53px header). z: #modal 50 < slideover 55 < #modal.over-slide 57 < .popup 60 < #tip 80 */
.slideover { position: fixed; top: 53px; right: 0; bottom: 0; width: 600px; max-width: 100vw; z-index: 55; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .18s ease; }
.slideover.is-open { transform: none; }
.slideover[hidden] { display: none; }
.slideover.is-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.slideover.is-drop::after { content: 'Drop files to attach'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21,23,28,.72); color: var(--accent-ink); font-weight: 600; font-size: 16px; pointer-events: none; }
/* minimized: a 320px bar bottom-right; body/footer hidden, draft state kept */
.slideover.is-min { top: auto; right: 16px; bottom: 0; width: 320px; height: 44px; border-radius: var(--r-md) var(--r-md) 0 0; border: 1px solid var(--line-2); border-bottom: 0; cursor: pointer; transform: none; }
.slideover.is-min .so-body, .slideover.is-min .so-foot { display: none; }
.slideover.is-min .so-head { border-bottom: 0; padding: 6px 10px; }
.so-restore { display: none; }
.slideover.is-min .so-restore { display: inline-flex; }
.so-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.so-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease; }
.so-ib:hover { background: var(--elev); color: var(--text); }
.so-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 14px; }
.so-foot { flex-shrink: 0; border-top: 1px solid var(--line-2); padding: 10px 14px 12px; background: var(--panel); }
#modal.over-slide { z-index: 57; }
@media (max-width: 820px) { .slideover { width: 100vw; } .slideover.is-min { right: 0; width: 100vw; border-radius: 0; } }

/* Composer fields */
.cmp-field { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cmp-field[hidden] { display: none; }
.cmp-lbl { color: var(--muted); font-size: 12.5px; font-weight: 600; padding-top: 6px; }
.cmp-fromv { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; padding: 5px 0; border-radius: var(--r-sm); }
.cmp-lock { font-size: 11px; }
.cmp-chipbox { min-width: 0; }
.cmp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 34px; padding: 3px 4px; border-radius: var(--r-sm); cursor: text; }
.cmp-chips:focus-within { box-shadow: 0 0 0 2px var(--ring); }
.cmp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 6px 3px 10px; font-size: 12.5px; line-height: 1.4; }
.cmp-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cmp-chip.is-locked { background: rgba(91,157,255,.12); border-color: rgba(91,157,255,.4); color: var(--accent-ink); padding-right: 10px; }
.cmp-chip.is-manual { border-style: dashed; }
.cmp-chip.is-blocked { background: var(--danger-bg); border-color: var(--danger); color: #ffd7d7; }
.cmp-chiptext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.cmp-chipx { background: none; border: 0; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 50%; }
.cmp-chipx:hover { color: var(--text); background: rgba(255,255,255,.08); }
.cmp-attest { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-left: 4px; cursor: pointer; white-space: nowrap; }
.cmp-attest input { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; cursor: pointer; }
.cmp-chipin { flex: 1 1 140px; min-width: 120px; background: transparent; border: 0; color: var(--text); font: inherit; padding: 5px 4px; }
.cmp-chipin:focus { outline: none; }
.cmp-chipin::placeholder { color: var(--muted); }
.cmp-chipin.is-invalid { color: #f5b4b4; text-decoration: underline wavy var(--danger); }
.cmp-links { display: flex; gap: 12px; align-items: center; padding: 0 4px 2px; }
.cmp-links .link, .cmp-note .link, .cmp-errslot .link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; padding: 1px 2px; cursor: pointer; border-radius: var(--r-sm); }
.cmp-links .link:hover, .cmp-note .link:hover, .cmp-errslot .link:hover { text-decoration: underline; }
.cmp-links .link:disabled { opacity: .5; cursor: progress; }
.cmp-links .link[hidden] { display: none; }
.cmp-err { grid-column: 1 / -1; color: #f5b4b4; font-size: 12.5px; }
.cmp-err:empty { display: none; }
.cmp-notes { grid-column: 1 / -1; }
.cmp-note { color: var(--muted); font-size: 12px; padding: 2px 4px; }
.cmp-note[hidden], .cmp-note:empty { display: none; }
.cmp-subjin { width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 4px; border-radius: var(--r-sm); }
.cmp-subjin:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.cmp-tplrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.cmp-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s ease; }
.cmp-btn:hover { background: var(--elev); }
.cmp-btn.danger { background: var(--danger-bg); border-color: rgba(239,107,107,.4); color: #f5b4b4; }
.cmp-tplchip { display: inline-flex; align-items: center; gap: 4px; background: rgba(91,157,255,.12); border: 1px solid rgba(91,157,255,.35); color: var(--accent-ink); border-radius: var(--r-pill); padding: 3px 6px 3px 10px; font-size: 12px; }
.cmp-tplchip[hidden] { display: none; }
/* Editor: white body, dark text; toolbar inherits the .tpl-editor Quill overrides */
.cmp-editor .ql-snow .ql-editor { min-height: 200px; max-height: none; }
.cmp-editor .ql-container.ql-snow { min-height: 200px; }
.ql-merge-blank { background: #fde68a; color: #5a3d00; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px #f0c34a inset; }
/* Attachments */
.cmp-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cmp-atts[hidden] { display: none; }
.cmp-att { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 5px 6px 5px 10px; font-size: 12.5px; overflow: hidden; }
.cmp-att.is-err { border-color: var(--danger); color: #ffd7d7; }
.cmp-att.is-done { border-color: rgba(55,185,129,.45); }
.cmp-attname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-attsize { font-size: 11.5px; }
.cmp-atterr { color: #f5b4b4; font-size: 11.5px; }
.cmp-attbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.cmp-attfill { height: 100%; background: var(--accent); transition: width .15s linear; }
.cmp-errslot { margin-top: 8px; }
.cmp-errslot:empty { display: none; }
/* Footer toolbar */
.cmp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-primary { background: var(--accent-solid); color: #fff; border: 0; border-radius: var(--r-pill); padding: 9px 20px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, transform .05s ease; }
.cmp-primary:hover { background: var(--accent-solid-hi); }
.cmp-primary:active { transform: translateY(1px); }
.cmp-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.cmp-sel { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.cmp-sel select { background: var(--panel2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cmp-sel select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cmp-sel.is-off { opacity: .5; }
.cmp-ib { width: 32px; height: 32px; font-size: 16px; }
.cmp-discard { margin-left: auto; background: none; border: 1px solid transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer; }
.cmp-discard:hover { color: #f5b4b4; background: var(--danger-bg); }
.cmp-plan { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cmp-override { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.cmp-override[hidden] { display: none; }
.cmp-override input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.cmp-mode { display: inline-block; margin-top: 8px; background: rgba(245,195,66,.16); border: 1px solid rgba(245,195,66,.5); color: #f3d68a; border-radius: var(--r-pill); padding: 2px 10px; font-size: 11.5px; font-weight: 600; }
.cmp-mode[hidden] { display: none; }
/* Templates picker + emoji popups */
.popup.cmp-tplpop { width: 340px; max-width: calc(100vw - 16px); padding: 8px; }
.cmp-tplsearch { width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); padding: 7px 10px; font: inherit; margin-bottom: 6px; }
.cmp-tplsearch:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cmp-tpllist { max-height: 300px; overflow-y: auto; }
.cmp-tplitem { flex-direction: column; align-items: flex-start; gap: 1px; }
.cmp-tplname { font-weight: 600; }
.cmp-tplsubj { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tplstatus { font-size: 12.5px; padding: 6px 10px; }
.cmp-tplstatus:empty { display: none; }
.popup.cmp-emojipop { min-width: 0; padding: 8px; }
.cmp-emojigrid { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; }
.cmp-emoji { width: 32px; height: 32px; background: none; border: 0; border-radius: var(--r-sm); font-size: 18px; cursor: pointer; }
.cmp-emoji:hover { background: var(--elev); }

/* Reminder tracker section */
.trk-bar.lp-bar { margin-bottom: 8px; }
.trk-mine { margin-left: 4px; }
.trk-bar .lp-refresh { margin-left: auto; padding: 5px 10px; }
.trk-loanchip[aria-pressed="true"] { background: rgba(245,195,66,.16); border-color: var(--amber); color: #f3d68a; }
.trk-row { cursor: pointer; }
.trk-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.trk-row.is-hl td { background: rgba(245,195,66,.12); }
.trk-c-subj { max-width: 300px; }
.trk-subj { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-rcpt { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; white-space: nowrap; }
.trk-rcpt:hover { text-decoration: underline; }
.trk-rcptlist { margin: 4px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.45; }
.trk-sends { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
span.trk-bar { display: inline-flex; gap: 2px; }
span.trk-bar i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); }
span.trk-bar i.on { background: var(--accent); border-color: var(--accent); }
.trk-sendsn { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.trk-c-last, .trk-c-next, .trk-c-created { white-space: nowrap; }
.trk-c-act { width: 1%; white-space: nowrap; }
.trk-cancel { color: #f5b4b4; }
.trk-logdet { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.trk-canceldlg h2 { color: #f5b4b4; }
.trk-cancelmeta { font-weight: 600; margin: 4px 0; }
.trk-cancelsubj { margin: 0 0 10px; }
.trk-canceldlg p { margin: 6px 0; }

/* Detail drawer */
.drw-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin: 4px 0 8px; }
.drw-line { color: var(--muted); font-size: 13px; margin: 4px 0; }
.drw-sec { margin-top: 14px; }
.drw-sec h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 0 0 6px; }
.drw-rcpt { padding-left: 16px; margin: 0; font-size: 13px; }
.drw-atts { margin: 0; padding-left: 16px; font-size: 13px; }
.drw-atts a { color: var(--accent); }
.drw-foot { display: flex; gap: 8px; justify-content: flex-end; }
.drw-log td { font-size: 12.5px; }

/* Toast (bottom-left live region) */
#toast { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast-item { background: #0f1116; color: var(--text); border: 1px solid var(--line-2); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow-md); transition: opacity .3s ease, transform .3s ease; }
.toast-ok { border-left-color: var(--green); }
.toast-warn { border-left-color: var(--amber); }
.toast-err { border-left-color: var(--danger); }
.toast-item.out { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  .slideover, .lp-colcaret, .cmp-attfill, .toast-item { transition: none; }
}

/* ============================================================================
   Phase 4 — inbox-bot suggestions (the bot only suggests; a person clicks Accept).
   Code: composer.js (bot*, trkSuggestRow, drwReply), app.js (bot* badge + banner, .cmp-open.has-suggest)
   ========================================================================== */
/* Nav badge: same pill as the search-hit count (amber), one per dashboard with open suggestions */
nav .bitem-botn { cursor: help; }
/* Dashboard banner (above the filter bar) */
.lp-botslot:empty { display: none; }
.lp-botbanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(245,195,66,.12); border: 1px solid rgba(245,195,66,.5);
  border-left: 4px solid var(--amber); color: #f3d68a; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; }
.lp-botbanner-text { flex: 1 1 280px; line-height: 1.4; }
.lp-botbanner-go { background: var(--amber); color: #141414; border: 0; border-radius: var(--r-pill); padding: 7px 15px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .12s ease; }
.lp-botbanner-go:hover { background: #f8cf5e; }
.lp-botbanner-x { background: none; border: 1px solid transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer; }
.lp-botbanner-x:hover { background: rgba(255,255,255,.06); color: var(--text); }
/* ✉ n/N on a dashboard row when the campaign has an open suggestion */
.cmp-open.has-suggest { color: #f3d68a; background: rgba(245,195,66,.16); border-color: rgba(245,195,66,.55); }
.cmp-open.has-suggest:hover { background: rgba(245,195,66,.26); border-color: var(--amber); }
/* Tracker: suggested campaign row (amber stripe + tint) and the suggestion row under it */
.lp-table tbody tr.trk-row.has-suggest td { background: rgba(245,195,66,.07); border-bottom-color: transparent; }
.lp-table tbody tr.trk-row.has-suggest td:first-child, .lp-table tbody tr.tr-suggest td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.lp-table tbody tr.trk-row.has-suggest:hover td { background: rgba(245,195,66,.11); }
.lp-table tbody tr.tr-suggest td { background: rgba(245,195,66,.07); padding: 0 10px 9px 12px; }
.lp-table tbody tr.trk-row.has-suggest.is-hl td, .lp-table tbody tr.tr-suggest.is-hl td { background: rgba(245,195,66,.17); }
.tr-suggest[hidden] { display: none; }
.trk-sug { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: #f3d68a; }
.trk-sugtext { flex: 1 1 320px; line-height: 1.45; }
.trk-sugtext strong { color: #fff; }
.trk-sugtext .muted { color: var(--muted); }
.trk-sugev { font-style: italic; color: var(--text); }
.trk-sugsrc { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; border: 1px solid rgba(245,195,66,.55); border-radius: var(--r-pill); padding: 0 6px; color: #f3d68a; vertical-align: middle; }
.trk-sugacts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tpl-btn.trk-sugaccept { background: var(--amber); border-color: transparent; color: #141414; }
.tpl-btn.trk-sugaccept:hover { background: #f8cf5e; }
.trk-replies { margin-top: 4px; }
.trk-acceptdlg h2 { color: #f3d68a; }
.trk-notedlg h2 { color: #f3d68a; }
/* Menus (Dismiss ▾ / 👎 relabel): real buttons inside the existing .popup */
.popup.trk-sugpop { min-width: 260px; max-height: min(70vh, 420px); overflow-y: auto; }
.popup-item.as-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.popup-item.as-btn:hover { background: var(--elev); }
.popup-item .popup-sub { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
/* Reply label chips (in addition to the st-ok / st-pending chips already defined) */
.st-bad { background: rgba(239,107,107,.14); border-color: rgba(239,107,107,.55); color: #f5b4b4; }
.st-bad::before { content: '!'; font-weight: 800; font-size: 12px; }
.st-ghost { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 500; }
.st-ghost::before { content: '○'; }
/* Drawer: Replies block */
.drw-sug { margin: 0 0 8px; padding: 8px 10px; background: rgba(245,195,66,.10); border: 1px solid rgba(245,195,66,.45); border-radius: var(--r-md); }
.drw-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.drw-reply { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px; }
.drw-reply.is-open-sug { border-color: rgba(245,195,66,.5); box-shadow: inset 3px 0 0 var(--amber); }
.drw-replyhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drw-replywho { font-weight: 600; }
.drw-replywhen, .drw-replypct { color: var(--muted); font-size: 12px; }
.drw-replysum { margin: 5px 0 0; line-height: 1.45; }
.drw-replyact { margin: 4px 0 0; font-size: 12px; color: #f3d68a; }
.drw-reply details { margin-top: 5px; }
.drw-reply summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.drw-reply summary:hover { text-decoration: underline; }
.drw-replytxt { margin: 4px 0 0; padding: 6px 8px; background: rgba(255,255,255,.03); border-radius: var(--r-sm); font: inherit; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--muted); max-height: 220px; overflow: auto; }
.drw-thumbs { margin-left: auto; display: inline-flex; gap: 4px; }
.tpl-btn.drw-thumb { width: 30px; height: 26px; padding: 0; font-size: 14px; line-height: 1; }
.drw-labeled { margin-left: auto; font-size: 12px; color: var(--green-ink); }
@media (prefers-reduced-motion: reduce) { .lp-botbanner-go { transition: none; } }