/* =========================================================
   Desync CRM - base styles
   Aesthetic: the official Desync brand system. Parchment surfaces,
   sharp (square) corners, hard offset shadows (print/technical, not
   soft AI blur), Cathedral Teal on parchment, mono labels, signal-only
   palette (teal/mint/gold/rubric), subtle teal grid background.
   ========================================================= */

:root {
  /* palette - Desync brand tokens (Cathedral Teal on parchment). Names kept
     stable so components don't change; values track the official tokens.css. */
  --bg:            #F7F4EE;  /* parchment - default background */
  --bg-2:          #E7E3DA;  /* limestone - muted surface */
  --card:          #F7F4EE;  /* parchment - surfaces sit on the grid, separated
                                by the rule hairline + hard shadows (brand look,
                                not white cards) */
  --text:          #283238;  /* slate */
  --text-2:        #55636B;  /* muted slate */
  --text-muted:    #8B958F;
  --accent:        #0E3D41;  /* cathedral teal - primary surface ink / info */
  --accent-light:  #6FA69C;  /* verdigris mint - accent / success */
  --accent-dark:   #0A2E31;
  --accent-faint:  rgba(14, 61, 65, 0.07);
  --border:        #D5CFC1;  /* hairline (row-level) */
  --border-strong: #C9C3B5;  /* rule - structural hairline */
  --green:         #6FA69C;  /* mint - success */
  --yellow:        #B4892C;  /* gold - warning */
  --red:           #C0392B;  /* rubric - error (liturgical "rubric" red) */
  --danger:        #7A2A20;  /* oxblood - destructive / purge */
  --blue:          #3F6E78;  /* muted teal - info */
  --purple:        #7A6A9C;

  /* type - Desync hybrid: Cormorant (serif soul) · Inter (body) · Plex Mono (data) */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Fira Code", "Courier New", monospace;

  /* shape - the brand is square / technical. All corners are sharp. */
  --radius:    0;
  --radius-sm: 0;
  --radius-lg: 0;

  /* depth - offset hard shadow (print/technical), never a soft blur. */
  --shadow-hard:    5px 5px 0 rgba(11, 20, 22, 0.10);
  --shadow-hard-lg: 8px 8px 0 rgba(11, 20, 22, 0.14);

  /* a11y - keyboard focus ring (parchment gap + teal halo) */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* layout */
  --sidebar-w: 236px;
  --topbar-h:  52px;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* subtle grid background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,61,65,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,61,65,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* Keyboard focus ring (brand: parchment gap + teal halo). Mouse clicks stay ring-free. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* =========================================================
   App shell
   ========================================================= */

.app {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  z-index: 1;
}

/* sidebar */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 6px 10px 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar .brand .br { color: var(--accent); }

.workspace-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.workspace-pill:hover { border-color: var(--accent); }
.ws-mark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  line-height: 1;
}
.workspace-pill .chev { margin-left: auto; color: var(--text-muted); font-size: 10px; }
.plan-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(14,61,65,0.1);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  margin-right: 4px;
}

.nav-section {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 14px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  position: relative;
  white-space: nowrap;
}
/* keep nav labels on a single line; truncate with ellipsis if very long */
.nav-item > span:not(.ico):not(.count):not(.nav-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item:hover { background: rgba(14,61,65,0.06); color: var(--text); }
.nav-item.active {
  background: rgba(14,61,65,0.1);
  color: var(--accent-dark);
  font-weight: 500;
}

/* Delete (✕) on a saved-view row in the in-page Views picker. The sidebar list
   that used to host this was removed to keep the nav from overflowing, so delete
   now lives on each row of the picker dropdown, pushed to the right edge. */
.vp-del {
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.vp-del:hover { background: rgba(192,57,43,0.12); color: var(--red); }

/* Outcome of "Load from Desync", centred over the page. The sync is on-demand
   only, so this is the user's sole confirmation that the click did anything.
   Fixed + pointer-events:none on the wrapper so it never displaces page layout
   and never blocks clicks outside the card itself. */
.sync-toast-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 60;
}
.sync-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: sync-toast-in 140ms ease-out;
}
@keyframes sync-toast-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-toast { animation: none; }
}
.sync-toast > .ico { flex: none; margin-top: 1px; }
.sync-toast.ok { border: 1px solid rgba(111, 166, 156, 0.5); }
.sync-toast.ok > .ico { color: var(--green); }
.sync-toast.error { border: 1px solid rgba(192, 57, 43, 0.45); }
.sync-toast.error > .ico { color: var(--red); }

.sync-toast-body { flex: 1; min-width: 0; }
.sync-toast-title { font-size: 14px; font-weight: 600; color: var(--text); }
.sync-toast-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sync-toast-links {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sync-toast-links .sep { color: var(--text-muted); }
.sync-toast-links a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sync-toast-links a:hover { color: var(--accent-dark); }

.sync-toast-x {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  margin: -2px -4px 0 0;
  color: var(--text-muted);
  line-height: 1;
}
.sync-toast-x:hover { color: var(--text); }

/* Leaves the SPA in a new tab. Never carries .active - it is not a route. */
.nav-item.nav-external { text-decoration: none; color: var(--text-2); }
/* The label takes the slack so the external-link glyph parks on the right.
   Scoped to the trailing .ico - the leading glyph is also a `.ico > svg`. */
.nav-item.nav-external > span:not(.ico) { flex: 1; }
.nav-item.nav-external > .ico:last-child {
  width: 13px;
  height: 13px;
  opacity: 0.4;
  transition: opacity 100ms ease;
}
.nav-item.nav-external:hover > .ico:last-child { opacity: 0.85; }
.nav-item .ico {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  font-size: 13px;
  opacity: 0.8;
}
.nav-item .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
/* Accent pill badge (e.g. pending-invite count) - circular for one digit. */
.nav-item .nav-badge {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.nav-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 12px 8px;
  line-height: 1.45;
}

.sidebar-foot {
  margin-top: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-2);
}
.sidebar-foot .avatar {
  width: 24px; height: 24px;
  background: var(--text);
  color: #fff;
  border-radius: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  flex-shrink: 0;
}
.sidebar-foot .sign-out {
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.sidebar-foot .sign-out:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg);
}

/* Login screen */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  background: var(--bg);
  z-index: 10;
}
.login-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.login-brand .br { color: var(--accent); }
.login-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.login-foot a {
  color: var(--accent);
  text-decoration: underline;
}
.login-foot a:hover { color: var(--accent-dark); }
.auth-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
}

/* topbar */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  border-bottom: 1.5px solid var(--border-strong);
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky; top: 0; z-index: 10;
}
.crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.crumbs .sep { color: var(--text-muted); padding: 0 6px; }
.crumbs strong { color: var(--text); font-weight: 600; }

.topbar .search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  width: 280px;
  font-size: 12px;
  color: var(--text-muted);
}
.topbar .search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  background: var(--bg-2);
}

.topbar .icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
  transition: border-color 100ms ease;
}
.topbar .icon-btn:hover { border-color: var(--accent); color: var(--accent-dark); }

/* content */
/* Extra bottom padding so page content (e.g. table pagers) can scroll clear of
   the fixed feedback FAB (.fb-root, bottom:20px) instead of being covered by it. */
.content { padding: 24px 28px 96px; min-width: 0; }
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.page-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.page-h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.page-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

/* =========================================================
   Bracket button
   ========================================================= */

.bracket-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  /* All four corner brackets, drawn as background gradients so no markup spans
     are needed — every bracket-btn gets top AND bottom corners. --bk = color. */
  --bk: var(--accent);
  background-color: transparent;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk));
  background-size:
    8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px,
    8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  transition: color 120ms ease, background-color 120ms ease;
}
/* Legacy per-corner elements/spans are superseded by the gradient corners above;
   hide them so any leftover .br-* markup doesn't double-draw. */
.bracket-btn::before, .bracket-btn::after,
.bracket-btn > .br-tl, .bracket-btn > .br-tr,
.bracket-btn > .br-bl, .bracket-btn > .br-br { display: none; }
.bracket-btn:hover { background-color: var(--accent-faint); color: var(--accent-dark); }

/* Transient "Copied ✓" confirmation on the draft Copy button. */
.bracket-btn.ok, .bracket-btn.ok:hover {
  color: var(--green);
  --bk: var(--green);
  background-color: rgba(111, 166, 156, 0.12);
}

/* ── In-app feedback widget (floating, every signed-in page) ─────────────── */
.fb-root { position: fixed; right: 20px; bottom: 20px; z-index: 55; transition: right 180ms ease; }
/* When the copilot panel (420px) is open, slide the feedback button left of it
   so it never covers the copilot's input box. */
.fb-root.shifted { right: 440px; }

.fb-fab {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff; border: 0; border-radius: 0;
  padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: background 0.15s, transform 0.1s;
}
.fb-fab:hover { background: var(--accent-dark); }
.fb-fab:active { transform: translateY(1px); }
.fb-fab-ico { font-size: 15px; line-height: 1; }

.fb-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 330px; max-width: calc(100vw - 40px);
  background: var(--bg); border: 1.5px solid var(--accent);
  border-radius: 0; box-shadow: var(--shadow-hard-lg); padding: 16px;
}
.fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fb-title { font-family: var(--font-serif); font-size: 18px; color: var(--text); }
.fb-x { background: 0; border: 0; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 0; }
.fb-x:hover { background: var(--bg-2); color: var(--text); }

.fb-sublabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.fb-pills { display: flex; gap: 6px; margin-bottom: 12px; }
.fb-pill {
  flex: 1; padding: 7px 4px; font-size: 12px; cursor: pointer;
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all 0.12s;
}
.fb-pill:hover { border-color: var(--border-strong); color: var(--text); }
.fb-pill.vital { background: rgba(192, 57, 43, 0.10); border-color: var(--red); color: var(--red); font-weight: 600; }
.fb-pill.med   { background: rgba(180, 137, 44, 0.12); border-color: var(--yellow); color: var(--yellow); font-weight: 600; }
.fb-pill.minor { background: var(--bg-2); border-color: var(--border-strong); color: var(--text); font-weight: 600; }

.fb-textwrap { position: relative; }
.fb-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 10px 32px 10px; font-size: 13px; color: var(--text); line-height: 1.45;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none;
}
.fb-textarea:focus { border-color: var(--accent-light); }
.fb-mic {
  position: absolute; right: 8px; bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 0;
  padding: 3px 10px; font-size: 11px; color: var(--text-muted); cursor: pointer;
}
.fb-mic:hover { color: var(--text); border-color: var(--border-strong); }
.fb-mic.on { background: rgba(192, 57, 43, 0.12); border-color: var(--red); color: var(--red); }

.fb-error { color: var(--red); font-size: 12px; margin-top: 8px; }
.fb-send { width: 100%; margin-top: 12px; text-align: center; }
.fb-foot { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; }

.fb-thanks { text-align: center; padding: 22px 8px; color: var(--text); }
.fb-thanks-ico { font-size: 28px; margin-bottom: 8px; }

.bracket-btn.solid {
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
}
.bracket-btn.solid::before, .bracket-btn.solid::after,
.bracket-btn.solid > .br-bl, .bracket-btn.solid > .br-br { display: none; }
.bracket-btn.solid:hover { background: var(--accent-dark); }

.bracket-btn.dark {
  background: var(--text);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
}
.bracket-btn.dark::before, .bracket-btn.dark::after,
.bracket-btn.dark > .br-bl, .bracket-btn.dark > .br-br { display: none; }
.bracket-btn.dark:hover { background: var(--accent); }

/* Quoted-text collapse toggle in the inbox thread — a quiet pill, not a primary
   action like the bracket buttons. Subtle until hovered. */
.quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
  min-height: 18px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.quote-toggle:hover {
  background: var(--card);
  color: var(--text-2);
  border-color: var(--text-muted);
}

/* =========================================================
   View switcher / filter chip row
   ========================================================= */

.view-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  font-size: 12px;
  /* Pin line-height so <button> chips (Views, Filter) match the <div> status
     chips: a bare <button> carries the UA `line-height: normal` (~1.2) while the
     divs inherit the body's 1.5, which made the button chips ~4px shorter. */
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 100ms ease;
  font-family: var(--font-sans);
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active {
  border-color: var(--accent);
  background: var(--accent-faint);
  color: var(--accent-dark);
}
.chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.chip.active .dot { background: var(--accent); }

/* In-page saved-view picker: tinted + accent-bordered so it reads as the
   primary "filter by a saved view" control, a step louder than the neutral
   status chips it sits beside (to the left of "Save view"). */
.view-picker-btn {
  border-color: var(--accent-light);
  background: var(--accent-faint);
  color: var(--accent-dark);
  font-weight: 600;
}
.view-picker-btn:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
  color: var(--accent-dark);
}

.chip .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.view-spacer { flex: 1; }
.view-actions { display: flex; gap: 6px; align-items: center; }

/* =========================================================
   Table
   ========================================================= */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}

/* Scroll container for wide data tables. Bounded to the viewport height so the
   table scrolls INSIDE this element rather than the window (#983): its
   horizontal scrollbar then sits at the bottom of the visible table/viewport
   intersection when the table is taller than the screen, and at the table's own
   bottom when it fits — reachable without scrolling to the end of a long table.
   Being a real scroll container is also what makes the sticky header + sticky
   identity column below actually stick. `--table-vh-offset` is the height of
   the page chrome above the table (topbar + page header + filter chips); tuned
   to the rendered layout so the container ends near the viewport bottom. */
.table-scroll {
  --table-vh-offset: 340px;
  overflow: auto;
  max-height: calc(100vh - var(--table-vh-offset));
}

/* Floating horizontal scrollbar pinned to the bottom of the viewport, kept in
   sync with the table's real scroll position. Shown only while the table's own
   bottom bar is scrolled out of view. */
.hscroll-proxy {
  position: fixed;
  bottom: 0;
  height: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 45;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: none;
}
.hscroll-proxy-inner { height: 1px; }

/* Data grid: airy rows, cells emerge on hover (Twenty/Apollo style) */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--card);
  table-layout: auto;
}

/* Resizable columns (People / Companies / Custom). The JS helper switches the
   table to fixed layout and adds a .col-resizer drag handle per header. Clip
   cells so a narrowed column truncates cleanly; leave the last (actions) column
   un-clipped so its hover controls aren't cut off. */
.table.resizable thead th { overflow: hidden; }
.table.resizable tbody td:not(:last-child) { overflow: hidden; }
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.col-resizer:hover { background: var(--accent); opacity: 0.55; }

.table thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: left;
  padding: 0 14px;
  height: 38px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
  cursor: pointer;
  transition: color 80ms ease, background 80ms ease;
}
.table thead th:hover {
  color: var(--text);
  background: rgba(14,61,65,0.04);
}
.table thead th .col-icon {
  display: inline-block;
  margin-right: 7px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.55;
  font-size: 11px;
}
.table thead th .sort {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.35;
  color: var(--accent);
}
.table thead th .sort.on { opacity: 1; }

.table tbody td {
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
  transition: background 80ms ease;
  /* Default to the arrow, not the text caret. The text caret (cursor:text) is
     set only on contenteditable cells, and clickable cells set pointer, so the
     caret never appears on a read-only cell that you can't actually type into. */
  cursor: default;
  /* No max-width: 0 - let cells size to content like Twenty. Only ellipsis when explicitly long. */
}
/* Truncate long cells to the column's actual (resizer-pinned) width: the ellipsis
   lands at the column edge. No max-width here — a cap narrower than the pinned
   column would clip the text early and leave blank space out to the column border. */
.table tbody td.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}
.table tbody tr:last-child td { border-bottom: 0; }

/* Hover state - very soft, only on the cell. */
.table tbody td:hover {
  background: rgba(14,61,65,0.035);
}

/* Editable cell: text cursor + soft focus ring */
.table tbody td[contenteditable="true"] {
  cursor: text;
  /* Match the row height so the caret is vertically centered even when the cell
     is empty (vertical-align:middle doesn't position an empty caret). */
  line-height: 40px;
}
.table tbody td[contenteditable="true"]:focus {
  outline: none;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    4px 4px 0 rgba(11,20,22,0.10);
  z-index: 5;
  /* Keep the editor inside its column while editing (overflow:visible let a long
     value spill out over the neighboring cells). Scroll horizontally to keep the
     caret in view, scrollbar hidden for a clean look. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-radius: 3px;
}
.table tbody td[contenteditable="true"]:focus::-webkit-scrollbar { display: none; }

/* Name nav cell */
.table tbody td.cell-nav {
  cursor: pointer;
  font-weight: 500;
}
.table tbody td.cell-nav:hover {
  background: rgba(14,61,65,0.025);
}

.table tbody td.cell-pill { cursor: pointer; }

.table tbody td.cell-readonly { cursor: default; }
.table tbody td.cell-readonly:hover { background: transparent; }

.table tbody td.cell-check,
.table thead th.cell-check {
  padding: 0 0 0 14px;
  cursor: default;
  background: transparent;
  /* Shift+click range-selects rows; without this the browser also drag-selects
     the table's text between the two clicks. */
  user-select: none;
  -webkit-user-select: none;
}
.table tbody td.cell-check:hover { background: transparent; }
.table thead th.cell-check:hover { background: var(--card); }
.table thead th.cell-check { cursor: default; }

.table tbody tr:hover .row-actions { opacity: 1; }

/* =========================================================
   Sticky identity columns (#983, review #979 U-4)
   Keep the checkbox + Name columns pinned to the left while the table scrolls
   horizontally, so far-right cells never lose which row they belong to. Works
   with both layouts: People has a checkbox column then Name; Companies has Name
   as the first column (no checkbox) — the general-sibling rule offsets Name past
   the checkbox only when one precedes it. Backgrounds are opaque so scrolled-under
   cells don't bleed through; z-index stacks body < header, with the top-left
   corner (sticky top AND left) above everything.
   ========================================================= */
.table thead th.cell-check,
.table tbody td.cell-check {
  position: sticky;
  left: 0;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}
.table thead th.cell-name-col,
.table tbody td.cell-name-col {
  position: sticky;
  left: 0; /* Companies: Name is the first column */
}
/* People: a checkbox column precedes Name → pin Name just past it. */
.table thead th.cell-check ~ th.cell-name-col,
.table tbody td.cell-check ~ td.cell-name-col {
  left: 44px;
}
/* Opaque backgrounds on the pinned cells (override the transparent cell-check
   and the semi-transparent cell-nav hover) so nothing shows through them while
   scrolling sideways. */
.table tbody td.cell-check,
.table tbody td.cell-check:hover,
.table tbody td.cell-name-col,
.table tbody td.cell-name-col:hover {
  background: var(--card);
}
/* Stacking: body pinned cells above normal body cells; header pinned cells
   (already sticky-top) form the corner and sit above both. */
.table tbody td.cell-check,
.table tbody td.cell-name-col { z-index: 1; }
.table thead th.cell-check,
.table thead th.cell-name-col { z-index: 3; }

/* Hidden columns */
.table .col-hidden { display: none !important; }

/* =========================================================
   Popover (columns visibility / filter rules)
   ========================================================= */

.popover-wrap { position: relative; display: inline-flex; }
.popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 6px;
  z-index: 30;
}
.popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
}
.popover.left { right: auto; left: 0; }
.popover.wide { min-width: 320px; }
.popover-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 6px 8px 4px;
}
.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.popover-item:hover { background: var(--bg-2); }
.popover-item input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}
.popover-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Bulk-action picker (inline panel under the bulk bar) */
.bulk-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bulk-picker .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  margin-right: 6px;
}
.bulk-picker .opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 100ms ease;
}
.bulk-picker .opt:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-faint); }
.bulk-picker .opt input { width: 140px; border: 0; outline: none; background: transparent; font-size: 12.5px; }

.cell-name {
  display: flex; align-items: center; gap: 10px;
  max-width: 240px;
}
/* Truncate the name text (not the avatar / arrow) when it's long. */
.cell-name > span:not(.nav-arrow) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cell-name .nav-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 80ms ease;
  flex-shrink: 0;
}
.table tbody td.cell-nav:hover .nav-arrow { opacity: 1; }
.avatar {
  width: 24px; height: 24px;
  border-radius: 0;
  background: var(--text);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}
/* Photo avatar (hospital staff) - same footprint as the monogram circle. */
.avatar.avatar-img {
  object-fit: cover;
  background: var(--bg-2);
}
.big-avatar.avatar-img {
  object-fit: cover;
}
/* Monogram tints - restrained brand family (teal/slate/gold/oxblood/mint), not a rainbow. */
.avatar.a-1 { background: #0E3D41; }
.avatar.a-2 { background: #283238; }
.avatar.a-3 { background: #3F6E78; }
.avatar.a-4 { background: #B4892C; }
.avatar.a-5 { background: #7A2A20; }
.avatar.a-6 { background: #2E5A52; }
.avatar.a-7 { background: #55636B; }

.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }

.row-actions {
  opacity: 0;
  transition: opacity 100ms ease;
  display: flex;
  gap: 4px;
}
.row-action-btn {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--text-2);
}
.row-action-btn:hover { background: var(--bg-2); color: var(--text); }

/* status chip */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.status .dot { width: 6px; height: 6px; border-radius: 50%; }

.status.s-new    { background: rgba(40,50,56,0.07); color: var(--text-2); }
.status.s-new .dot    { background: var(--text-muted); }
.status.s-contacted { background: rgba(180,137,44,0.14); color: #8A6A1F; }
.status.s-contacted .dot { background: var(--yellow); }
.status.s-replied   { background: rgba(14,61,65,0.10); color: var(--accent-dark); }
.status.s-replied .dot { background: var(--accent); }
.status.s-qualified { background: rgba(111,166,156,0.20); color: #2E5A52; }
.status.s-qualified .dot { background: var(--green); }
.status.s-lost      { background: rgba(192,57,43,0.10); color: #A2342A; }
.status.s-lost .dot { background: var(--red); }

/* score pill */
.score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.score .bar {
  width: 38px; height: 4px;
  background: var(--bg-2);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.score .bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 0;
}
.score.hi { color: var(--accent-dark); }
.score.md { color: #8A6A1F; }
.score.md .bar > span { background: var(--yellow); }
.score.lo { color: var(--text-muted); }
.score.lo .bar > span { background: var(--text-muted); }

/* enrichment tag */
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--border);
}
/* Dataset tags - kept within the signal palette (teal/gold/slate/rubric), no rainbow.
   In the brand system dataset meaning is carried by the icon; the chip stays restrained. */
.tag.t-nd { color: var(--accent-dark); border-color: rgba(14,61,65,0.3); background: var(--accent-faint); }
.tag.t-sponsor { color: #8A6A1F; border-color: rgba(180,137,44,0.35); background: rgba(180,137,44,0.10); }
.tag.t-parish { color: var(--accent-dark); border-color: rgba(14,61,65,0.3); background: var(--accent-faint); }
.tag.t-school { color: var(--text-2); border-color: var(--border-strong); background: var(--bg-2); }
.tag.t-hospital { color: #A2342A; border-color: rgba(192,57,43,0.3); background: rgba(192,57,43,0.07); }
.tag.t-custom { color: var(--text-muted); border-color: var(--border); background: var(--bg-2); }

/* =========================================================
   Kanban
   ========================================================= */

/* Stage board is grouped into phases (Qualify / Outreach / Close), each a row. */
.kanban-section { margin-bottom: 22px; }
.kanban-section:last-child { margin-bottom: 0; }
.kanban-section-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 8px 2px;
}

.kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
/* Keep each column compact in the sectioned layout so all three phases fit. */
.kanban-section .kanban-col { max-height: 440px; }
.kanban-col {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
/* The column a dragged card would land in. */
.kanban-col.drop-target {
  border-color: var(--accent);
  border-style: dashed;
  background: rgba(14,61,65,0.05);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* The column the dragged card came from - hovering it is a no-op move. */
.kanban-col.drag-source { opacity: 0.75; }
.kanban-col.drag-source.drop-target {
  border-style: solid;
  box-shadow: none;
  background: var(--bg-2);
}

/* Collapsed column: keep the full-width header exactly as-is and just collapse
   the body (cards) below it. The column keeps its normal width, shrinks to
   header height, and sits at the top of the row. Stays a drop target. */
.kanban-col.collapsed {
  max-height: none;
  align-self: flex-start;
}
.kanban-col.collapsed .col-head {
  border-bottom: none;
}
.col-collapse {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  flex: none;
}
.col-collapse:hover { color: var(--text); }
.kanban-col .col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.kanban-col .col-head .title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.kanban-col .col-head .title .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.kanban-col .col-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.kanban-col .col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}
.kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 100ms ease, box-shadow 100ms ease, transform 80ms ease;
}
.kanban-card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 rgba(11,20,22,0.10);
  transform: translateY(-1px);
}
.kanban-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.kanban-card:active { cursor: grabbing; }
.kanban-col.drop-target {
  background: rgba(14,61,65,0.06);
  border-color: var(--accent);
}
.kanban-card .kc-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.kanban-card .kc-sub { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.kanban-card .kc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kanban-card .amount {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}

/* =========================================================
   Dashboard
   ========================================================= */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.stat-card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 rgba(11,20,22,0.10);
}
.stat-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-card .value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.stat-card .trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.stat-card .trend.up { color: var(--green); }
.stat-card .trend.down { color: var(--red); }

.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel .panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel .panel-head h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.panel .panel-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.panel .panel-body { padding: 8px 0; }

/* First-run "Get started" checklist (dashboard). Matches the panel look but with
   an accent frame; steps strike through + dim their CTA when done. The whole card
   self-hides once every applicable step is complete or the user dismisses it
   (see components/onboarding.rs). */
.gs-card {
  background: var(--card);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.gs-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-faint);
}
.gs-head h3 { font-size: 13px; font-weight: 600; }
.gs-progress {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-dark);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.gs-x {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 12px; line-height: 1;
  padding: 4px 6px; border-radius: var(--radius-sm);
}
.gs-x:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.gs-step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}
.gs-step:first-of-type { border-top: none; }
.gs-check {
  flex-shrink: 0; width: 20px; text-align: center;
  color: var(--text-muted); font-size: 14px;
}
.gs-step.done .gs-check { color: var(--accent-light); }
.gs-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gs-label { font-size: 13px; font-weight: 500; color: var(--text); }
.gs-desc { font-size: 11px; color: var(--text-muted); }
.gs-step.done .gs-label {
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}
.gs-step.locked { opacity: 0.72; }
.gs-cta {
  flex-shrink: 0; text-decoration: none;
  font-size: 12px; font-weight: 500; color: var(--accent-dark);
  border: 1px solid var(--accent-light); border-radius: var(--radius-sm);
  padding: 4px 10px; background: var(--card);
}
.gs-cta:hover { background: var(--accent-faint); }
.gs-donetag {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-light);
}

.activity-row {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  align-items: flex-start;
  font-size: 13px;
}
.activity-row .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--accent);
  flex-shrink: 0;
}
.activity-row .when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* funnel bars */
.funnel { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.funnel .bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.funnel .bar-row .name { width: 96px; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.funnel .bar-row .bar { flex: 1; height: 8px; background: var(--bg-2); border-radius: 0; overflow: hidden; }
.funnel .bar-row .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 0; }
.funnel .bar-row .val { font-family: var(--font-mono); font-size: 11px; color: var(--text); width: 36px; text-align: right; }

/* =========================================================
   Detail drawer (slide-in record panel)
   ========================================================= */

.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(11,20,22,0.42);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 560px;
  max-width: 100vw;
  background: var(--card);
  border-left: 1.5px solid var(--accent);
  box-shadow: -8px 0 0 rgba(11,20,22,0.12);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 180ms ease;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.drawer-head .big-avatar {
  width: 40px; height: 40px;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.drawer-head h2 { font-size: 16px; font-weight: 600; }
.drawer-head .sub { color: var(--text-2); font-size: 12px; }
.drawer-head .close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.drawer-head .close:hover { background: var(--bg-2); }

.drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-tab {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.drawer-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.drawer-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-grid {
  display: grid;
  /* minmax(0,1fr) - without the 0 min, a wide <select> (sized to its longest
     option) forces the track past the drawer width and triggers side-scroll. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Keep every control inside the drawer within its column - selects in
   particular otherwise grow to fit their widest option. */
.drawer .field select,
.drawer .field input,
.drawer .field .value {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.field .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.field .value {
  font-size: 13px;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  cursor: text;
}
.field .value:hover { background: var(--accent-faint); }
.field .value:focus { outline: 1px solid var(--accent); background: var(--card); }

.section-head {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.related-list .item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}
.related-list .item:hover { border-color: var(--accent); }
.related-list .item .meta { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

/* =========================================================
   Misc
   ========================================================= */

.btn-row { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-faint);
  border: 1px solid rgba(14,61,65,0.3);
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--accent-dark);
}
.bulk-bar .count {
  font-family: var(--font-mono);
  font-weight: 600;
}

.empty {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================================================
   Tasks status pills
   ========================================================= */

.status.ts-todo  { background: rgba(40,50,56,0.07); color: var(--text-2); }
.status.ts-todo  .dot { background: var(--text-muted); }
.status.ts-doing { background: rgba(180,137,44,0.14); color: #8A6A1F; }
.status.ts-doing .dot { background: var(--yellow); }
.status.ts-done  { background: rgba(111,166,156,0.20); color: #2E5A52; }
.status.ts-done  .dot { background: var(--green); }

/* =========================================================
   Tasks · priority swimlanes
   ========================================================= */

/* Per-row priority picker, styled as a compact pill. A native <select> so the
   dropdown renders in the browser top layer - never clipped by the table. */
.cell-pri { white-space: nowrap; }
.pri-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  max-width: 100%;
}
.pri-select:hover { border-color: var(--accent); }
.pri-select:focus { outline: none; border-color: var(--accent); }
.pri-select.pri-urgent { background: rgba(192,57,43,0.10);  color: #A2342A; border-color: rgba(192,57,43,0.35); }
.pri-select.pri-high   { background: rgba(180,137,44,0.14); color: #8A6A1F; border-color: rgba(180,137,44,0.40); }
.pri-select.pri-medium { background: rgba(14,61,65,0.10);   color: var(--accent-dark); border-color: rgba(14,61,65,0.30); }
.pri-select.pri-low    { background: var(--bg-2);           color: var(--text-2); }
.pri-select.pri-none   { background: transparent;          color: var(--text-muted); }
/* Reset options to normal text in the native dropdown list. */
.pri-select option { background: var(--card); color: var(--text); font-weight: 500; }

/* Swimlane section header row. */
.tasks-table .group-head td {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 0;
}
.tasks-table .group-head:first-child td { border-top: none; }
.gh {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
}
.gh-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.gh .chev {
  width: 12px;
  display: inline-block;
  color: var(--text-muted);
  font-size: 10px;
}
.gh-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.gh-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.gh-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  line-height: 16px;
}
.gh-add {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease, color 100ms ease;
}
.tasks-table .group-head:hover .gh-add { opacity: 1; }
.gh-add:hover { background: var(--card); color: var(--accent); }

/* =========================================================
   Notes feed
   ========================================================= */

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.note-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.note-card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 rgba(11,20,22,0.10);
}
.note-card .note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.note-card .note-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  outline: none;
  border-radius: 0;
  padding: 1px 3px;
  margin: -1px -3px;
}
.note-card .note-title:focus {
  background: var(--accent-faint);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.note-card .note-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  white-space: pre-wrap;
  outline: none;
  min-height: 40px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 0;
}
.note-card .note-body:focus {
  background: var(--accent-faint);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.note-card .note-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.note-card .note-foot .spacer { flex: 1; }

/* Drawer: tasks + notes mini-list */
.drawer-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drawer-mini-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  background: var(--card);
}
.drawer-mini-task input { accent-color: var(--accent); }
.drawer-mini-task .due {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.drawer-mini-task .done-line { text-decoration: line-through; color: var(--text-muted); }
.drawer-mini-note {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.drawer-mini-note .title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.drawer-mini-note .body { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* Inline-editable drawer rows: notes (title + body) and task titles. */
.drawer-mini-note [contenteditable],
.drawer-mini-task [contenteditable] {
  outline: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 100ms ease, box-shadow 100ms ease;
}
.drawer-mini-note [contenteditable]:hover,
.drawer-mini-task [contenteditable]:hover { background: var(--bg-2); }
.drawer-mini-note [contenteditable]:focus,
.drawer-mini-task [contenteditable]:focus {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* A brand-new note has an empty body - without this there is nothing to click. */
.drawer-mini-note [contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}
.drawer-mini-task [contenteditable] { flex: 1; min-width: 0; }
.drawer-mini-note .meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

/* Drawer: company contact row (used in CompanyDrawer People tab + bulletin sponsors) */
.drawer-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.drawer-contact-row .ico {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Global pending-invite alert - fixed top-center, above the topbar. */
.invite-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-hard-lg);
  animation: invite-toast-in 220ms ease-out;
}
@keyframes invite-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.invite-toast .it-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.invite-toast .it-body { min-width: 0; }
.invite-toast .it-title {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.invite-toast .it-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.invite-toast .it-cta {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.invite-toast .it-cta:hover { background: var(--accent-dark); }
.invite-toast .it-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  line-height: 1;
}
.invite-toast .it-close:hover { color: var(--text); }

/* ── Custom data (bring-your-own tables) ──────────────────────────────────── */

/* Sidebar sub-items (the per-table list under "Custom data"). */
.nav-item.nav-sub { padding-left: 28px; font-size: 12px; }

/* Home grid of tables */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.cd-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.cd-card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 rgba(11,20,22,0.10);
  transform: translateY(-1px);
}
.cd-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
}
.cd-card-body { flex: 1; min-width: 0; }
.cd-card-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cd-card-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 13px; }
.cd-card:hover .cd-card-arrow { color: var(--accent); }

/* Empty states */
.empty.cd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
  text-align: center;
}
.cd-empty-title { font-weight: 600; font-size: 15px; color: var(--text); }
.cd-empty-sub { color: var(--text-muted); max-width: 440px; line-height: 1.5; }
.empty.cd-empty .bracket-btn { margin-top: 8px; }

/* Breadcrumb in the page title */
.cd-crumb { color: var(--text-muted); text-decoration: none; }
.cd-crumb:hover { color: var(--accent); }

/* Column type badge in the table header */
.cd-type-badge {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Small type <select> used in modals */
.cd-type-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text);
}

/* Pagination / table footer */
.cd-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.cd-foot .chip[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

/* Danger affordances */
.cd-danger, .popover-item.cd-danger { color: var(--red); }
.chip.cd-danger:hover { border-color: var(--red); color: var(--red); }

/* Deal drawer → linked custom table quick-link */
.deal-table-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.deal-table-link:hover { text-decoration: underline; }

/* Connect Google prompt card (opt-in calendar + gmail) */
.gc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 16px;
}
.gc-card.gc-ok { background: rgba(111, 166, 156, 0.12); border-color: rgba(111, 166, 156, 0.4); }
.gc-ico { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.gc-card.gc-ok .gc-ico { color: var(--green); }
.gc-body { flex: 1; min-width: 0; }
.gc-title { font-weight: 600; font-size: 13px; }
.gc-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Select / status cells rendered as colored pills */
.cd-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 22, 0.42);
  z-index: 80;
}
.modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 81;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--card);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
  padding: 20px;
}
.modal-card.modal-wide { width: min(720px, calc(100vw - 32px)); }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.modal-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.modal-form { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 18px; }
.modal-field { display: flex; flex-direction: column; gap: 4px; }
.modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* Post-conversion digest prompt (#1681): the low-emphasis "I'll pass" secondary.
   Grey, text-only, deliberately quieter than the "Set up my daily leads" primary
   — legible, not hidden. */
.digest-prompt-skip {
  background: none;
  border: none;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s ease;
}
.digest-prompt-skip:hover { color: var(--text); }

/* Import wizard */
.imp-help { color: var(--text-muted); font-size: 12px; margin-bottom: 10px; }
.imp-cols { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.imp-col {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.imp-col .imp-label { flex: 1; margin: 0; }
.imp-col input[type="checkbox"] { flex-shrink: 0; }

/* Column manager rows */
.col-manage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.col-manage-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-manage-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}
.col-manage-add .modal-input { flex: 1; }

/* Select-options chip editor (add-column form + per-column editor) */
.opt-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.opt-editor-inline { flex-basis: 100%; margin-top: 2px; }
.opt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 8px;
  border-radius: 0;
  background: rgba(14, 61, 65, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.opt-chip-x {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
.opt-chip-x:hover { opacity: 1; }
.opt-input {
  flex: 1;
  min-width: 90px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  font-family: var(--font-sans);
  padding: 2px 4px;
}

/* Import: status-column toggle + warning note */
.imp-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
}
.imp-status-row input[type="checkbox"] { flex-shrink: 0; }
.imp-status-note {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(180, 137, 44, 0.12);
  color: #8A6A1F;
  font-size: 12px;
}

/* Import result toast */
.cd-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-lg);
  font-size: 13px;
}
.cd-toast-undo {
  border: none;
  background: transparent;
  color: var(--accent-light);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}
.cd-toast-undo:hover { text-decoration: underline; }
.cd-toast-x {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.cd-toast-x:hover { color: #fff; }

/* =========================================================
   Scriptorium (AI email drafter)
   ========================================================= */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.scr-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.scr-winners-btn { white-space: nowrap; }
.page-head .label,
.scriptorium .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bracket-btn.xs { padding: 4px 10px; font-size: 11px; }
.empty-sm { padding: 16px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* Inbox filter pills — a compact 4-up segmented control above the thread list. */
.inbox-filters { display: flex; gap: 5px; margin-top: 8px; }
.inbox-filter {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  line-height: 1.1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.inbox-filter:hover:not(.active) { border-color: var(--accent); }
.inbox-filter .n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.inbox-filter .l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-filter.active { background: var(--accent); border-color: var(--accent); }
.inbox-filter.active .n, .inbox-filter.active .l { color: #fff; }

/* Inbox / Sent folder switch at the top of the thread list. */
.mailbox-tabs { display: flex; gap: 4px; }
.mailbox-tab {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mailbox-tab:hover:not(.active) { border-color: var(--accent); }
.mailbox-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Scriptorium: drafting-mode toggle, template hint, and revision chat. */
/* Drafting-mode segmented control (auto-width, joined, on-brand). */
.scr-modes {
  display: inline-flex;
  align-self: flex-start;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.scr-mode {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-right: 1.5px solid var(--accent);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.scr-mode:last-child { border-right: 0; }
.scr-mode:hover:not(.active) { background: var(--accent-faint); }
.scr-mode.active { background: var(--accent); color: #fff; }

.scr-hint { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* Results action bar: send-from + campaign on one row, refine-all below. */
.scr-panel.scr-results-bar { padding: 0; gap: 0; }
.scr-bar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 11px 14px; }
.scr-bar-row + .scr-bar-row { border-top: 1px solid var(--border); }
.scr-bar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.scr-bar-group .scr-select { width: auto; min-width: 150px; max-width: 240px; }
.scr-bar-refine .scr-input { flex: 1; min-width: 200px; }

/* Buttons on this page: solid-teal primaries, quiet-filled secondaries. The
   outlined "bracket" look reads as clutter here, so drop it (kept app-wide). */
.scriptorium .bracket-btn:not(.solid) {
  background-image: none;
  background-color: var(--bg-2);
  color: var(--accent);
  border-radius: var(--radius-sm);
}
.scriptorium .bracket-btn:not(.solid):hover { background-color: var(--border); color: var(--accent-dark); }
.scriptorium .bracket-btn.xs { padding: 6px 12px; font-size: 11px; gap: 5px; }
.scriptorium .bracket-btn.ok,
.scriptorium .bracket-btn.ok:hover {
  background-image: none;
  background-color: rgba(111, 166, 156, 0.16);
  color: var(--green);
}
.scriptorium .bracket-btn.solid.ok,
.scriptorium .bracket-btn.solid.ok:hover { background: var(--green); color: #fff; }

.draft-revise { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.revise-thread { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.revise-msg {
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  max-width: 85%;
  white-space: pre-wrap;
}
.revise-msg.user { align-self: flex-end; background: var(--accent-faint); color: var(--text); }
.revise-msg.ai { align-self: flex-start; background: var(--bg-2); color: var(--text-2); }
.revise-input-row { display: flex; gap: 6px; align-items: center; }
.revise-input-row .scr-input { flex: 1; }

/* quota meter */
.quota-meter { min-width: 220px; max-width: 300px; flex: 0 1 auto; }
.quota-meter-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.quota-track {
  height: 8px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 0; overflow: hidden;
}
.quota-fill { height: 100%; background: var(--accent); border-radius: 0; transition: width 240ms ease; }
.quota-fill.over { background: var(--red); }

/* two-column layout */
.scriptorium {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .scriptorium { grid-template-columns: 1fr; } }

/* ── Mobile: collapsible off-canvas sidebar ──────────────────────────────────
   Desktop layout is untouched. On small screens the sidebar slides in over the
   content (toggled by the Topbar hamburger), with a tap-to-close backdrop. */
.topbar-burger {
  display: none; /* shown only on small screens via the media query below */
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.topbar-burger:hover { border-color: var(--accent); color: var(--accent-dark); }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(84vw, 290px);
    transform: translateX(-100%);
    transition: transform 180ms ease;
    z-index: 60;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(11, 20, 22, 0.35);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 22, 0.42);
    z-index: 55;
  }
  .topbar-burger { display: grid; }
  .topbar { padding: 0 12px; }
  /* Hide the global search on phones (per-page search/filters remain). */
  .topbar .popover-wrap { display: none; }
  .content { padding: 16px 14px; }
}

.scr-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.scr-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scr-select, .scr-input, .scr-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
}
.scr-textarea { resize: vertical; line-height: 1.5; }
.scr-select:focus, .scr-input:focus, .scr-textarea:focus { outline: none; border-color: var(--accent); }

.scr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scr-row2 > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scr-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.scr-row3 > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 720px) { .scr-row3 { grid-template-columns: 1fr; } }

/* Collapsible "Add context (optional)" disclosure + its field group. */
.scr-disclosure {
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 14px;
  background: var(--accent-faint);
  border: 1px dashed var(--accent-light);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.scr-disclosure:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.scr-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.scr-toggles { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.scr-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

.scr-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.scr-warn { color: var(--red); font-size: 12px; }
.scr-error {
  margin-top: 8px; padding: 8px 10px; font-size: 12px;
  background: rgba(192,57,43,0.08); border: 1px solid var(--red); color: var(--red);
  border-radius: var(--radius);
}

/* recipients list */
.scr-recipients { flex: 1; }
.scr-rcp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr-rcp-actions { display: flex; gap: 6px; }
.rcp-list {
  display: flex; flex-direction: column;
  max-height: 460px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.rcp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.rcp-row:last-child { border-bottom: 0; }
.rcp-row:hover { background: var(--accent-faint); }
.rcp-meta { min-width: 0; }
.rcp-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcp-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* draft results */
.scr-results { display: flex; flex-direction: column; gap: 12px; }
.draft-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.draft-name { font-weight: 600; font-size: 14px; }
.draft-subj { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.draft-subj .label { flex-shrink: 0; }
.draft-body {
  width: 100%; padding: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  font-size: 13px; line-height: 1.55; resize: vertical; font-family: var(--font-sans);
}
.draft-body:focus { outline: none; border-color: var(--accent); }

/* Winning emails - team-private proven-outreach library under the drafter. */
.scr-winners {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scr-winners-top .page-sub { margin-top: 2px; }
.scr-winners-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent-dark);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.scr-winners-form { display: flex; flex-direction: column; gap: 8px; }
.scr-winners-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.scr-winners-list { display: flex; flex-direction: column; gap: 8px; }
.winner-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px 12px;
}
.winner-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.winner-label {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  background: var(--accent-faint);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}
.winner-subj { font-size: 13px; font-weight: 600; color: var(--text); }
.winner-body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================================================
   Subscription gate (unsubscribed personal owners). A
   non-dismissible card pinned bottom-center; the backdrop is
   click-through (pointer-events: none) so the page stays visible
   and browsable. Create/edit controls are disabled and the
   backend blocks every mutation, so they can look but not act.
   ========================================================= */
.sub-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(11, 20, 22, 0.16);
  pointer-events: none; /* clicks pass through so they can still navigate/see */
}
.sub-gate-card {
  position: fixed;
  z-index: 96;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px));
  background: var(--bg);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-hard-lg);
  padding: 20px 22px;
  pointer-events: auto; /* the card itself is interactive */
}
.sub-gate-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-faint);
  padding: 3px 8px;
  margin-bottom: 10px;
}
.sub-gate-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.sub-gate-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 16px;
}
.sub-gate-cta { width: 100%; }
.sub-gate-foot {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* Disabled create/edit controls while gated (the action flow never opens). */
.bracket-btn:disabled,
.bracket-btn.disabled,
.opt:disabled,
.chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   CRM Copilot side panel (#1507) — a NON-MODAL right drawer
   (no backdrop mask: the user keeps working while it's open).
   ========================================================= */

.copilot {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 420px;
  max-width: 100vw;
  background: var(--card);
  border-left: 1.5px solid var(--accent);
  box-shadow: -8px 0 0 rgba(11,20,22,0.12);
  z-index: 55;
  transform: translateX(100%);
  transition: transform 180ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.copilot.open { transform: translateX(0); }

.copilot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--border);
  flex: 0 0 auto;
}
.copilot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent-dark);
}
.copilot-head .close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
}
.copilot-head .close:hover { color: var(--text); }

.copilot-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;   /* never let a long line push the panel sideways */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.copilot-log .bubble {
  max-width: 100%;
  min-width: 0;          /* flex item: allow shrinking below content width */
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap; /* keep the agent's line breaks */
  overflow-wrap: anywhere; /* break anywhere as a last resort so nothing overflows */
  word-break: break-word;
}
.copilot-log .bubble.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.copilot-log .bubble.ai {
  align-self: flex-start;
  background: var(--accent-faint);
  color: var(--text);
  border: 1px solid var(--border);
}
.copilot-empty { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.copilot-empty ul { margin: 10px 0 0; padding-left: 18px; }
.copilot-empty li { margin: 4px 0; font-style: italic; }

.copilot-thinking { display: flex; gap: 4px; align-self: flex-start; padding: 6px 4px; }
.copilot-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: copilot-blink 1.2s infinite ease-in-out both;
}
.copilot-thinking span:nth-child(2) { animation-delay: 0.2s; }
.copilot-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes copilot-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.copilot-error {
  align-self: stretch;
  background: rgba(192,57,43,0.10);
  border: 1px solid rgba(192,57,43,0.33);
  color: #c0392b;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 3px;
}

.copilot-confirm {
  flex: 0 0 auto;
  margin: 0 16px 10px;
  padding: 12px;
  background: var(--accent-faint);
  border: 1.5px solid var(--accent);
  border-radius: 3px;
}
.copilot-confirm .cc-text { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.copilot-confirm .cc-actions { display: flex; gap: 8px; }
.bracket-btn.danger { border-color: #c0392b; color: #c0392b; }
.bracket-btn.danger:hover { background: #c0392b; color: #fff; }

.copilot-toast {
  flex: 0 0 auto;
  margin: 0 16px 10px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.copilot-toast .link-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent-dark);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12.5px;
}

.copilot-input {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1.5px solid var(--border);
}
.copilot-textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 3px;
}
.copilot-textarea:focus { outline: none; border-color: var(--accent); }
.copilot-send {
  flex: 0 0 auto;
  height: 38px; width: 38px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.copilot-send:hover { background: var(--accent-dark); }
.copilot-send:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 520px) { .copilot { width: 100vw; } }

/* Copilot floating launcher — matches the Feedback FAB (.fb-fab) and stacks
   just above it (feedback is bottom:20; this clears its ~40px height). */
.copilot-fab {
  position: fixed;
  right: 150px;
  bottom: 20px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-dark);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: background 0.15s, transform 0.1s;
}
.copilot-fab:hover { background: var(--accent); }
.copilot-fab:active { transform: translateY(1px); }

/* Empty-state capabilities list + clickable example prompts. */
.copilot-empty .ce-lead { font-weight: 600; color: var(--text); margin: 0 0 8px; }
.copilot-empty .ce-caps { margin: 0 0 14px; padding-left: 18px; }
.copilot-empty .ce-caps li { margin: 5px 0; font-size: 13px; line-height: 1.45; }
.copilot-empty .ce-try {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin-bottom: 8px;
}
.copilot-empty .ce-egs { display: flex; flex-direction: column; gap: 6px; }
.copilot-empty .ce-eg {
  text-align: left;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--accent-faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.copilot-empty .ce-eg:hover { border-color: var(--accent); background: var(--card); }