/* IMI CMS — Institute for Methods Innovation brand.
   Mobile-first; desktop refinements layered on at ≥720px. */

:root {
  /* IMI primary palette */
  --imi-purple: #3D1F5C;
  --bright-grey: #EFEBF8;
  --silver-sand: #C0C1C2;
  --cultured: #F7F8F9;
  --white: #FFFFFF;

  /* IMI secondary (cool spectrum) */
  --tapestry: #A34888;
  --studio: #78508E;
  --powder: #515284;
  --deep-blue: #364F71;
  --dusk: #2F4858;

  /* Functional */
  --bg: var(--white);
  --bg-alt: var(--cultured);
  --text: var(--imi-purple);
  --text-body: #2A2A2A;
  --muted: #6B6776;
  --border: #E4E1ED;
  --accent: var(--imi-purple);
  --danger: #C74074;

  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(61, 31, 92, 0.06);
  --shadow-md: 0 4px 12px rgba(61, 31, 92, 0.10);
  --shadow-lg: 0 10px 30px rgba(61, 31, 92, 0.18);

  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Layout tokens */
  --topbar-height: 56px;
  --sidebar-width: 220px;
  --tap-target: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
body { font-size: 16px; }

a { color: var(--imi-purple); text-decoration: none; font-weight: 500; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--imi-purple); outline-offset: 2px;
}

h1, h2, h3, h4 { color: var(--imi-purple); margin: 0 0 0.5rem 0; line-height: 1.2; }
h1 { font-weight: 800; letter-spacing: -0.01em; font-size: 1.4rem; }
h2 { font-weight: 700; font-size: 1.15rem; }
h3 { font-weight: 600; font-size: 1.0rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--bright-grey);
  color: var(--imi-purple);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-height);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--imi-purple);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  min-width: 0;
}
.brand-mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--imi-purple);
  color: var(--white);
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.05em;
}
.brand-divider {
  width: 1px; height: 22px;
  background: var(--silver-sand);
  margin: 0 0.2rem;
}
.brand-name {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.user {
  color: var(--muted); font-size: 0.8rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40vw;
}

/* User menu — `<details>` dropdown anchored to the top-right of the header */
.user-menu {
  position: relative;
}
.user-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  outline: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 0.4rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.user-menu[open] > summary::after { transform: rotate(180deg); }
.user-menu > summary:hover,
.user-menu > summary:focus-visible {
  background: var(--bg-alt);
  color: var(--text);
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.25rem;
  z-index: 50;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-body);
  cursor: pointer;
  font-family: inherit;
}
.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--bg-alt);
  color: var(--text);
  outline: none;
}

/* Hamburger button — visible only on small screens */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target); height: var(--tap-target);
  margin-right: 0.25rem; padding: 0;
  background: transparent; color: var(--imi-purple);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
.hamburger svg { width: 22px; height: 22px; }

/* ── Shell + sidebar ──────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - var(--topbar-height));
}
.sidebar {
  padding: 1rem 0.5rem;
  background: var(--cultured);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sidebar a {
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  color: var(--text-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  min-height: var(--tap-target);
  display: flex; align-items: center;
}
.sidebar a:hover, .sidebar a.active {
  background: var(--bright-grey); color: var(--imi-purple);
}
.sidebar-group {
  display: flex; flex-direction: column; gap: 0.1rem;
  margin-top: 0.85rem;
}
.sidebar-group-label {
  padding: 0.25rem 0.85rem 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
.scrim {
  position: fixed; inset: var(--topbar-height) 0 0 0; z-index: 40;
  background: rgba(61, 31, 92, 0.45);
  display: none;
}
.shell.menu-open .scrim { display: block; }
.content { padding: 1.25rem 1rem 2rem; max-width: 1400px; min-width: 0; }

/* ── Page head ────────────────────────────────────────── */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 1.35rem; }
.page-head input[type="search"], .page-head input[type="text"] {
  background: var(--white);
  color: var(--text-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
  flex: 1 1 240px; max-width: 480px; min-width: 0;
  font: inherit; font-size: 16px;  /* 16px prevents iOS zoom on focus */
  min-height: var(--tap-target);
}
.page-head input:focus {
  outline: none; border-color: var(--imi-purple);
  box-shadow: 0 0 0 2px var(--bright-grey);
}

/* ── Empty state ──────────────────────────────────────── */
.empty { max-width: 640px; }
.empty h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.empty p { color: var(--muted); }

/* ── Tables (desktop) → cards (mobile) ───────────────── */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.grid th, table.grid td {
  text-align: left; padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border);
}
table.grid th {
  color: var(--muted); font-weight: 600;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--cultured);
}
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr:hover td { background: var(--cultured); }

/* ── Kanban (deals board) ────────────────────────────── */
.kanban {
  display: flex; gap: 0.75rem;
  overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.kanban-column {
  flex: 0 0 86vw; max-width: 320px;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.kanban-column.drop-target { background: var(--bright-grey); border-color: var(--imi-purple); }
.kanban-head {
  padding: 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.kanban-head strong { color: var(--imi-purple); font-weight: 600; font-size: 0.95rem; }
.kanban-cards {
  padding: 0.6rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 70vh; overflow-y: auto;
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
  min-height: var(--tap-target);
}
.card:hover { box-shadow: var(--shadow-md); }
.card:active { cursor: grabbing; }
.card-title { font-weight: 600; color: var(--imi-purple); margin-bottom: 0.2rem; font-size: 0.95rem; }

/* ── Forms / buttons ─────────────────────────────────── */
form input, form select {
  background: var(--white);
  color: var(--text-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-right: 0.5rem; margin-bottom: 0.5rem;
  font: inherit; font-size: 16px;
  min-height: var(--tap-target);
}
form input:focus, form select:focus {
  outline: none; border-color: var(--imi-purple);
  box-shadow: 0 0 0 2px var(--bright-grey);
}
/* Primary form buttons. Scoped to type="submit" so we don't accidentally
   restyle dropdown triggers, record-picker buttons, or btn-link controls
   that happen to live inside a <form>. */
form button[type="submit"], button.btn-primary {
  background: var(--imi-purple);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  min-height: var(--tap-target);
  margin-bottom: 0.5rem;
}
form button[type="submit"]:hover, button.btn-primary:hover { background: #2D1745; }
button.btn-link {
  background: transparent;
  color: var(--imi-purple);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 500;
  min-height: var(--tap-target);
}
button.btn-link:hover { background: var(--bright-grey); }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* ── Pills ────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bright-grey); color: var(--imi-purple);
}
.pill-static { background: var(--silver-sand); color: var(--dusk); }
.pill-dynamic { background: var(--bright-grey); color: var(--imi-purple); }
/* Ticket-status colors */
.pill-new { background: var(--bright-grey); color: var(--imi-purple); }
.pill-open { background: #FFE7D6; color: #8C3A00; }
.pill-in_progress { background: #DCE8F8; color: var(--deep-blue); }
.pill-waiting_on_contact { background: #F2E5C7; color: #6F5800; }
.pill-resolved { background: #D8EDD8; color: #1F5C2A; }
.pill-closed { background: var(--silver-sand); color: var(--dusk); }

/* ── Clickable rows ──────────────────────────────────── */
table.grid-clickable tbody tr { cursor: pointer; }
table.grid-clickable tbody tr:hover td { background: var(--bright-grey); }

/* ── Detail pages ────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--muted); font-size: 0.85rem; font-weight: 500;
  margin-bottom: 0.75rem;
}
.back-link:hover { color: var(--imi-purple); }
.detail-head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.detail-head h1 { margin: 0 0 0.25rem 0; }
.detail-head p { margin: 0; }
.detail-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.detail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.detail-card h3 { margin: 0 0 0.6rem 0; font-size: 0.95rem; font-weight: 600; }
dl.kv {
  margin: 0; display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  row-gap: 0.4rem; column-gap: 0.85rem;
  font-size: 0.9rem;
}
dl.kv dt { color: var(--muted); font-weight: 500; }
dl.kv dd { margin: 0; color: var(--text-body); }
ul.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
ul.link-list li { font-size: 0.92rem; }

/* ── Timeline ────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border);
}
.timeline-item {
  position: relative;
  padding: 0.6rem 0 0.6rem 0.5rem;
}
.timeline-dot {
  position: absolute; left: -1.5rem; top: 0.85rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--imi-purple);
}
.timeline-stage_change .timeline-dot { background: var(--imi-purple); }
.timeline-email .timeline-dot { border-color: var(--studio); }
.timeline-task .timeline-dot { border-color: var(--tapestry); }
.timeline-note .timeline-dot { border-color: var(--silver-sand); }
.timeline-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.timeline-body { font-size: 0.92rem; }

/* ── Inbox: message list + reply ─────────────────────── */
.message-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.message {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.message-out { background: var(--bright-grey); border-color: var(--bright-grey); }
.message-head { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.message-body {
  font-family: var(--font-sans);
  white-space: pre-wrap;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
  background: transparent;
  padding: 0;
}
.reply-composer { margin-top: 1.5rem; }
.reply-composer textarea {
  width: 100%; min-height: 140px;
  background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem;
  font: inherit; font-size: 0.95rem;
  resize: vertical;
}

/* ── Tickets: status counts ──────────────────────────── */
.ticket-counts, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ticket-count, .kpi {
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
}
.ticket-count strong, .kpi strong { font-size: 1.4rem; color: var(--imi-purple); font-weight: 700; line-height: 1.1; }

/* Mobile detail-grid → single column */
@media (max-width: 720px) {
  .detail-grid { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: minmax(100px, max-content) 1fr; }
}

/* ── Inbox v1.0 — three-pane shell (Aaron 2026-05-07) ── */

/* Outer shell takes the full content area's height so each pane can scroll
   independently. Grid columns: rail (240px) | list (340px) | detail (1fr). */
.inbox-shell {
  display: grid;
  grid-template-columns: 240px 340px 1fr;
  gap: 0;
  height: calc(100vh - var(--topbar-h, 60px) - 1rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.inbox-shell > * { min-width: 0; min-height: 0; }

/* Rail */
.inbox-rail {
  display: flex; flex-direction: column;
  background: var(--cultured);
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  overflow-y: auto;
  gap: 0.4rem;
}
.inbox-rail-head { font-size: 0.95rem; margin: 0 0 0.6rem 0.25rem; color: var(--imi-purple); }
.inbox-rail-subhead { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 1rem 0 0.3rem 0.25rem; color: var(--muted); }
.inbox-views, .inbox-mailboxes { display: flex; flex-direction: column; gap: 0.1rem; }
.inbox-view, .inbox-mailbox {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
}
.inbox-view:hover, .inbox-mailbox:hover { background: rgba(61, 31, 92, 0.06); }
.inbox-view.active, .inbox-mailbox.active {
  background: var(--imi-purple);
  color: var(--white);
}
.inbox-view-count {
  margin-left: auto;
  font-size: 0.75rem;
  background: rgba(61, 31, 92, 0.1);
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  min-width: 1.4rem;
  text-align: center;
}
.inbox-view.active .inbox-view-count { background: rgba(255,255,255,0.2); color: var(--white); }
.inbox-mailbox-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.inbox-mailbox-dot.pill-shared    { background: #999; }
.inbox-mailbox-dot.pill-staff     { background: var(--imi-purple); }
.inbox-mailbox-dot.pill-marketing { background: #B8425C; }
.inbox-mailbox-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}
.inbox-rail-foot {
  margin-top: auto;
  padding: 0.5rem;
  text-decoration: none;
  border-top: 1px solid var(--border);
}

/* List */
.inbox-list {
  display: flex; flex-direction: column;
  background: var(--white);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.inbox-list-toolbar {
  display: flex; gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.inbox-list-toolbar input,
.inbox-list-toolbar select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
}
.inbox-list-toolbar input { flex: 1; min-width: 0; }
.inbox-list-body { flex: 1; overflow-y: auto; padding: 0.5rem 0.6rem; }
.inbox-empty { padding: 1rem 0.5rem; }

.thread-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}
.thread-card:hover { border-color: var(--imi-purple); }
.thread-card.selected {
  border-color: var(--imi-purple);
  background: var(--bright-grey);
  box-shadow: 0 0 0 2px rgba(61, 31, 92, 0.15);
}
.thread-card-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.thread-priority {
  width: 4px; height: 18px; border-radius: 2px;
  flex-shrink: 0;
  background: #cbd5e1;
}
.thread-priority-high   { background: #e74c3c; }
.thread-priority-normal { background: #cbd5e1; }
.thread-priority-low    { background: #ecedf0; }
.thread-subject {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--imi-purple);
}
.thread-card.selected .thread-subject { color: var(--ink); }
.thread-assignee {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--imi-purple);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.thread-card-meta {
  display: flex; gap: 0.5rem;
  font-size: 0.75rem;
}
.thread-badge {
  padding: 0 0.4rem;
  border-radius: 4px;
  background: var(--cultured);
  font-size: 0.7rem;
}
.thread-badge-closed { background: #ecedf0; color: var(--muted); }

/* Detail */
.inbox-detail {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--white);
}
.inbox-empty-detail, .inbox-detail-loading {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  text-align: center;
}
.thread-detail-head {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.thread-detail-title { display: flex; gap: 0.5rem; align-items: flex-start; flex: 1; min-width: 0; }
.thread-detail-title h1 { font-size: 1.15rem; margin: 0; line-height: 1.25; }
.thread-detail-title p { margin: 0.15rem 0 0; }
.inbox-back {
  font-size: 1.1rem;
  padding: 0.15rem 0.5rem;
  display: none;
}
.thread-detail-actions {
  display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
}
.thread-detail-actions select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  min-height: 32px;
}
.inbox-detail .message-list,
.inbox-detail .reply-composer,
.inbox-detail .triage-panel,
.inbox-detail .thread-audit { margin: 0; }
.inbox-detail > .message-list,
.inbox-detail > .reply-composer,
.inbox-detail > .triage-panel,
.inbox-detail > .thread-audit { padding: 0 1.1rem; }
.inbox-detail > .message-list { flex: 1; overflow-y: auto; padding-top: 1rem; padding-bottom: 1rem; }
.inbox-detail > .reply-composer { padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid var(--border); background: var(--cultured); }
.inbox-detail > .thread-audit { padding-top: 0.5rem; padding-bottom: 1rem; border-top: 1px solid var(--border); }

.message-body-html {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
}
.message-body-html img { max-width: 100%; height: auto; }

/* AI triage panel */
.triage-panel {
  margin: 0.75rem 1.1rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border: 1px solid rgba(61, 31, 92, 0.18);
}
.triage-panel-head {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.triage-icon { color: var(--imi-purple); font-size: 1.05rem; }
.triage-summary { margin: 0.2rem 0 0.4rem; font-size: 0.88rem; }
.triage-suggested {
  margin: 0.4rem 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--imi-purple);
  background: rgba(255,255,255,0.6);
  font-size: 0.86rem;
  font-style: italic;
}
.triage-actions { display: flex; gap: 0.4rem; }
.pill-triage           { background: rgba(61, 31, 92, 0.1); color: var(--imi-purple); }
.pill-urgency-high     { background: #fde2e0; color: #b8425c; }
.pill-urgency-normal   { background: var(--cultured); color: var(--ink); }
.pill-urgency-low      { background: #e8eef3; color: var(--muted); }
.triage-urgency-high { border-color: #e74c3c; }

/* Audit timeline */
.thread-audit summary {
  cursor: pointer;
  padding: 0.45rem 0;
  font-size: 0.85rem;
}
.audit-timeline {
  list-style: none;
  margin: 0; padding: 0.4rem 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.audit-event {
  display: flex; gap: 0.5rem; align-items: baseline;
  font-size: 0.8rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--border);
}
.audit-event:last-child { border-bottom: 0; }
.audit-actor { font-weight: 600; color: var(--imi-purple); flex-shrink: 0; }
.audit-detail { flex: 1; min-width: 0; }
.audit-when { flex-shrink: 0; }

/* Single-pane collapse on narrow viewports */
@media (max-width: 960px) {
  .inbox-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .inbox-rail { display: none; }
  /* When a thread is selected, hide the list; otherwise hide the detail. */
  .inbox-shell[data-has-selection="1"] .inbox-list { display: none; }
  .inbox-shell[data-has-selection="0"] .inbox-detail { display: none; }
  .inbox-back { display: inline-flex; }
}

/* ── Custom Dropdown — replaces native <select> (Aaron 2026-05-08) ── */
.dropdown { position: relative; display: inline-flex; min-width: 0; }
.dropdown-native {
  /* Hide the native <select> but keep it in the layout for forms +
     accessible focus. Visually replaced by the .dropdown-trigger button. */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}
.dropdown-trigger {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  min-height: 36px;
  transition: border-color 0.12s, background 0.12s;
}
.dropdown-trigger:hover  { border-color: var(--imi-purple); }
.dropdown-trigger:focus-visible {
  outline: 2px solid var(--imi-purple);
  outline-offset: 2px;
}
.dropdown-trigger[aria-expanded="true"] {
  border-color: var(--imi-purple);
  background: var(--white);
}
.dropdown-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.dropdown-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-label-empty { color: var(--muted); }
.dropdown-caret {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* When the trigger inherits a status pill class, the pill background
   should win over the cultured default. */
.dropdown.pill-status-intake     .dropdown-trigger { background: #F2EEE7; color: #6B5A30; border-color: rgba(107, 90, 48, 0.2); }
.dropdown.pill-status-actionable .dropdown-trigger { background: #E5EFE7; color: #2D5A3F; border-color: rgba(45, 90, 63, 0.2); }
.dropdown.pill-status-blocked    .dropdown-trigger { background: #F1E8E1; color: #7A4F35; border-color: rgba(122, 79, 53, 0.2); }
.dropdown.pill-status-done       .dropdown-trigger { background: #ECEAF5; color: var(--imi-purple); border-color: rgba(61, 31, 92, 0.2); }

.dropdown-popover {
  position: absolute;
  z-index: 280;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(26, 20, 40, 0.18);
  padding: 0.3rem 0;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  font-size: 0.92rem;
  animation: dropdown-in 0.1s ease-out;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-option {
  display: flex; align-items: center;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  user-select: none;
}
.dropdown-option:hover,
.dropdown-option.focused {
  background: var(--bright-grey);
  color: var(--imi-purple);
}
.dropdown-option.selected {
  background: var(--cultured);
  color: var(--imi-purple);
  font-weight: 600;
}
.dropdown-option.selected.focused { background: var(--bright-grey); }
.dropdown-option.disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* ── RecordPicker — search-and-select (Aaron 2026-05-08) ────── */
.record-picker {
  appearance: none;
  display: inline-flex; align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 40px;
  transition: border-color 0.12s, background 0.12s;
}
.record-picker:hover { border-color: var(--imi-purple); }
.record-picker:focus-visible {
  outline: 2px solid var(--imi-purple); outline-offset: 2px;
}
.record-picker.record-picker-set { background: var(--white); border-color: rgba(61, 31, 92, 0.25); }
.record-picker-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
  color: var(--imi-purple);
}
.record-picker-label.record-picker-empty {
  color: var(--muted);
  font-weight: 400;
}
.record-picker-sublabel {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.record-picker-popover {
  position: absolute;
  z-index: 280;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(26, 20, 40, 0.18);
  width: min(380px, calc(100vw - 16px));
  max-height: min(360px, 60vh);
  display: flex; flex-direction: column;
  animation: dropdown-in 0.1s ease-out;
}
.record-picker-search {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  outline: none;
}
.record-picker-results {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.record-picker-result {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.record-picker-result:hover,
.record-picker-result.focused {
  background: var(--bright-grey);
}
.record-picker-loading,
.record-picker-empty {
  padding: 0.6rem 0.85rem;
}
.record-picker-clear {
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem;
  cursor: pointer;
  text-align: center;
}
.record-picker-clear:hover { color: #B8425C; }

/* ── Deploy banner — passive "new version" pill (Aaron 2026-05-08) ── */
.deploy-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.85rem 0.6rem 1rem;
  background: var(--imi-purple);
  color: var(--white);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(26, 20, 40, 0.25);
  max-width: min(560px, calc(100vw - 2rem));
  font-size: 0.88rem;
  animation: deploy-banner-in 0.2s ease-out;
}
@keyframes deploy-banner-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.deploy-banner-icon { font-size: 1rem; }
.deploy-banner-text {
  flex: 1; min-width: 0;
  line-height: 1.35;
}
.deploy-banner-refresh {
  appearance: none;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.deploy-banner-refresh:hover { background: rgba(255,255,255,0.25); }
.deploy-banner-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.75);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0 0.2rem;
}
.deploy-banner-dismiss:hover { color: var(--white); }
@media (max-width: 640px) {
  .deploy-banner { flex-wrap: wrap; }
  .deploy-banner-text { flex-basis: 100%; }
}

/* ── Reason popover — anchored, single-instance (Aaron 2026-05-08) ── */
.reason-popover {
  position: absolute;
  z-index: 250;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(26, 20, 40, 0.18);
  padding: 0.85rem 0.95rem;
  min-width: 320px;
  max-width: min(420px, calc(100vw - 16px));
  animation: reason-popover-in 0.12s ease-out;
}
@keyframes reason-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reason-popover-arrow {
  position: absolute;
  top: -7px; left: 18px;
  width: 12px; height: 12px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
}
.reason-popover-above .reason-popover-arrow {
  top: auto; bottom: -7px;
  border-top: 0; border-left: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.reason-popover-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.reason-popover-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1rem; color: var(--muted);
  padding: 0; line-height: 1;
}
.reason-popover-close:hover { color: var(--imi-purple); }
.reason-popover-intro { margin: 0 0 0.6rem; }
.reason-popover-form { display: flex; flex-direction: column; gap: 0.65rem; }
.reason-popover-form .field input,
.reason-popover-form .field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  resize: vertical;
}
.reason-popover-form .field input:focus,
.reason-popover-form .field textarea:focus {
  background: var(--white);
  border-color: var(--imi-purple);
  outline: none;
}
.reason-popover-actions {
  display: flex; gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* ── Workshop catalogue + line-item builder + AI intake (Aaron 2026-05-08) ── */
.catalogue-section-head {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--imi-purple);
}
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}
.catalogue-card {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.catalogue-card:hover { border-color: var(--imi-purple); box-shadow: var(--shadow-sm); }
.catalogue-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.catalogue-card-head strong { color: var(--imi-purple); font-size: 0.95rem; }
.catalogue-card-headline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.catalogue-card-foot { display: flex; gap: 0.6rem; }

.catalogue-headline {
  margin: 0 0 1rem;
  padding: 0.7rem 0.95rem;
  background: var(--cultured);
  border-left: 3px solid var(--imi-purple);
  border-radius: 4px;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}
.catalogue-description {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.catalogue-list {
  list-style: disc;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.catalogue-list li { margin-bottom: 0.3rem; }
.catalogue-pricing-table { width: 100%; font-size: 0.85rem; }

/* Line-items table action row + per-row affordances */
.line-items-actions {
  display: flex; gap: 0.5rem; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.line-items-empty {
  background: var(--cultured);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  text-align: center;
}
/* Per-row actions in the line items table.
   Aaron 2026-05-08: SVG-only, with delete standing off from edit so a
   one-pixel slip can't trigger destruction. Layout:
   [✓ deliver?] [✎ edit]   |   [🗑 delete]
   group on the left      div   destructive on the right */
.line-item-row-actions {
  width: 100px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}
.row-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.row-actions-divider {
  display: inline-block;
  width: 1px; height: 1.1rem;
  background: var(--border);
}
button.row-action {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 0.3rem;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s;
}
button.row-action svg { width: 16px; height: 16px; }
button.row-action:hover {
  color: var(--imi-purple);
  background: var(--bright-grey);
}
button.row-action[data-line-item-edit]:hover { color: var(--imi-purple); }
button.row-action[data-line-item-deliver] { color: #2D5A3F; }
button.row-action[data-line-item-deliver]:hover { background: #E5EFE7; }
button.row-action.row-action-danger {
  color: #94A3B8;
  margin-left: 0.25rem;
}
button.row-action.row-action-danger:hover {
  color: #B8425C;
  background: #FEF6F8;
}
.line-item-override {
  display: inline-block;
  padding: 0 0.35rem;
  background: #FEF3C7;
  color: #854D0E;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Line-item builder live preview */
.line-item-preview {
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.line-item-preview-summary { display: flex; flex-direction: column; gap: 0.3rem; }
.line-item-preview-price { font-size: 0.92rem; }

/* Line-item override toggle + £-pounds price input */
.line-item-price-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.line-item-price-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.line-item-price-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
/* Qty / price row in the line-item builder — qty is a tiny field
   (default 1, often 1-3); reserve most width for the price stack so the
   currency dropdown + £-input + override toggle don't get squeezed. */
.line-item-qty-price-row {
  grid-template-columns: 110px 1fr;
}
.line-item-qty-price-row #li-qty {
  max-width: 100%;
}

.line-item-price-input {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}
.line-item-price-input .dropdown {
  flex: 0 0 auto;
  min-width: 86px;
}
.line-item-price-input .dropdown-trigger {
  min-height: 36px;
}
.line-item-price-input input[type="number"] {
  flex: 1;
  margin: 0;
}
.line-item-price-input input[disabled] {
  background: #F8F8FA;
  color: #94A3B8;
}
/* Locked workshop picker (edit mode) */
.record-picker.locked {
  background: var(--cultured);
  color: var(--muted);
  cursor: not-allowed;
}

/* AI intake review pane */
.ai-review-summary {
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border: 1px solid rgba(61, 31, 92, 0.18);
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.ai-review-summary strong { display: block; margin-bottom: 0.35rem; color: var(--imi-purple); }
.ai-review-warnings {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: #854D0E;
}
.ai-review-warnings li { padding: 0.1rem 0; }

.ai-suggestion-list {
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.ai-suggestion {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column;
  gap: 0.4rem;
  transition: opacity 0.18s, background 0.18s;
}
.ai-suggestion-accepted {
  background: #EAF6EE;
  border-color: #B5DBC1;
}
.ai-suggestion-dismissed {
  opacity: 0.45;
  background: var(--cultured);
}
.ai-suggestion-head {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.ai-suggestion-conf {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pill-confidence-high   { background: #E5EFE7; color: #2D5A3F; }
.pill-confidence-medium { background: #F2EEE7; color: #6B5A30; }
.pill-confidence-low    { background: #F1E8E1; color: #7A4F35; }

.ai-confidence-low { border-left: 3px solid #F2BABA; padding-left: 0.7rem; }

.ai-suggestion-rationale {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}
.ai-suggestion-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }

/* ── Tickets v1.0 — operational state contract (Aaron 2026-05-07) ─── */

/* List page status counts behave as filter chips. */
a.ticket-count {
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}
a.ticket-count:hover { border-color: var(--imi-purple); }
a.ticket-count.active {
  border-color: var(--imi-purple);
  background: var(--bright-grey);
  box-shadow: 0 0 0 2px rgba(61, 31, 92, 0.15);
}

.ticket-outcome-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

/* Status pills — calmer palette (Aaron 2026-05-07): muted rather than
   alarming. The pill conveys state, not urgency; priority handles that. */
.pill-status-intake     { background: #F2EEE7; color: #6B5A30; }   /* needs first triage */
.pill-status-actionable { background: #E5EFE7; color: #2D5A3F; }   /* ready to work */
.pill-status-blocked    { background: #F1E8E1; color: #7A4F35; }   /* waiting external */
.pill-status-done       { background: #ECEAF5; color: var(--imi-purple); }
/* When the pill is also a <select>, give it a soft border so the dropdown
   chevron has something to land against. */
select.pill-status-intake,
select.pill-status-actionable,
select.pill-status-blocked,
select.pill-status-done   { border-color: rgba(61, 31, 92, 0.18); }

.ticket-stale-flag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: #FBE4E4;
  color: #7A2E2E;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.4rem;
}

/* Detail header — source chip + contact + linked-thread/deal pieces. */
.ticket-detail-headline {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.ticket-detail-headline a { color: var(--imi-purple); }
.ticket-source-chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  background: var(--cultured);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ticket-source-thread  { background: #ECEAF5; color: var(--imi-purple); }
.ticket-source-form    { background: #E5EFE7; color: #2D5A3F; }
.ticket-source-manual  { background: var(--cultured); color: var(--muted); }
.ticket-source-deal    { background: #F2EEE7; color: #6B5A30; }
.ticket-source-contact { background: #F1E8E1; color: #7A4F35; }

/* Two-column detail layout — main + contact rail. Collapses to single
   column when the rail is empty or the viewport is narrow. */
.ticket-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
.ticket-detail-grid.ticket-detail-with-rail {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.ticket-detail-main { min-width: 0; }
.ticket-detail-rail {
  display: flex; flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
@media (max-width: 960px) {
  .ticket-detail-grid.ticket-detail-with-rail {
    grid-template-columns: 1fr;
  }
}

/* Linked-thread inline card — last 3 messages from the source thread,
   so operators don't have to context-switch to the inbox to read context. */
.linked-thread-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.linked-thread-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 0.6rem;
}
.linked-thread-head h3 { margin: 0; font-size: 1rem; }
.linked-thread-msg {
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  background: var(--cultured);
}
.linked-thread-msg-out { background: #ECEAF5; }
.linked-thread-msg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
}
.linked-thread-msg-body { line-height: 1.45; }

/* Contact rail cards. Reuses .rail-card from elsewhere in the codebase. */
.ticket-detail-rail .rail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
}
.ticket-detail-rail .rail-card-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.ticket-detail-rail .rail-card-body { display: flex; flex-direction: column; gap: 0.35rem; }
.rail-contact-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--imi-purple);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
}
.rail-kv { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.rail-related-list { gap: 0.35rem; }
.rail-related-item {
  display: block;
  padding: 0.5rem 0.6rem;
  background: var(--cultured);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
}
.rail-related-item:hover {
  border-color: var(--imi-purple);
  background: var(--white);
}
.rail-related-subject {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tickets v1.0 — composer + unified activity timeline (Aaron 2026-05-08) ── */
.ticket-composer {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.ticket-composer-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  flex-wrap: wrap;
}
.ticket-composer textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  resize: vertical;
  min-height: 70px;
}
.ticket-composer textarea:focus {
  background: var(--white);
  border-color: var(--imi-purple);
  outline: none;
}
.ticket-composer-actions {
  display: flex; align-items: center; gap: 0.5rem;
}

.ticket-activity {
  margin-top: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.ticket-activity-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.ticket-activity-filters {
  display: flex; gap: 0.3rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.ticket-activity-filter {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
}
.ticket-activity-filter:hover { background: var(--cultured); color: var(--ink); }
.ticket-activity-filter.active {
  background: var(--imi-purple);
  color: var(--white);
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.activity-event {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--white);
}
.activity-event-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.activity-icon { color: var(--muted); }
.activity-actor { font-weight: 600; color: var(--imi-purple); }

/* Comments — most prominent (largest type, calmest border, IMI purple stripe) */
.activity-comment {
  background: var(--cultured);
  border-left-color: var(--imi-purple);
  padding: 0.7rem 0.85rem;
}
.activity-comment-ai {
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border-left-color: #B8425C;
}
.activity-comment-deleted {
  opacity: 0.5;
  font-style: italic;
  background: var(--cultured);
  border-left-color: var(--border);
}
.activity-comment-body {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.activity-comment-body p { margin: 0.3rem 0; }
.activity-comment-body p:first-child { margin-top: 0; }
.activity-comment-body p:last-child { margin-bottom: 0; }
.activity-comment-body code {
  background: rgba(61, 31, 92, 0.1);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85em;
}
.activity-comment-body a { color: var(--imi-purple); }
.activity-comment-actions {
  margin-left: auto;
  display: flex; gap: 0.3rem;
}
.activity-comment-actions .btn-link {
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
  min-height: auto;
  border: 0;
}

/* Provenance — compact, muted; system events shouldn't dominate visually */
.activity-provenance {
  background: var(--white);
  border-left-color: rgba(61, 31, 92, 0.25);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.activity-provenance-ai { border-left-color: #B8425C; }
.activity-provenance-detail .prov-from { color: var(--muted); text-decoration: line-through; }
.activity-provenance-detail .prov-to   { color: var(--ink); font-weight: 600; }
.activity-provenance-reason {
  margin-top: 0.2rem;
  font-style: italic;
}

/* Thread messages — direction-coded, mid-density */
.activity-thread-msg {
  background: var(--white);
  border-left-color: #1F5F3F;  /* inbound — green */
  padding: 0.55rem 0.75rem;
}
.activity-thread-msg-out {
  border-left-color: #3D1F5C;  /* outbound — purple */
  background: var(--cultured);
}
.activity-thread-msg-body {
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Custom inline validation — replaces the browser-native tooltip. */
.field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #7A2E2E;
  min-height: 0;
}
.field-input-invalid {
  border-color: #B8425C !important;
  background: #FCEFEF !important;
}
.ticket-legacy-flag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--cultured);
  color: var(--muted);
  font-size: 0.65rem;
  margin-left: 0.4rem;
  font-style: italic;
}

/* Ticket detail — state panel is the contract (top), conversation/body
   in the middle, provenance audit drawer at the bottom. */
.ticket-state-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.ticket-state-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.ticket-state-row.ticket-state-controls {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}
.ticket-state-cell { display: flex; flex-direction: column; gap: 0.25rem; }
.ticket-state-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.ticket-state-outcome {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--imi-purple);
  font-weight: 600;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
  resize: vertical;
}
.ticket-state-outcome:focus {
  background: var(--white);
  border-color: var(--imi-purple);
  outline: none;
}
.ticket-state-select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
}
.ticket-state-flags { display: flex; align-items: center; gap: 0.4rem; min-height: 32px; }

.ticket-outcome-note {
  margin-top: 0.4rem;
  padding: 0.65rem 0.85rem;
  background: #ECEAF5;
  border-left: 3px solid var(--imi-purple);
  border-radius: 4px;
  font-size: 0.92rem;
}

.banner-warn {
  background: #FFF3DA;
  color: #6F4D00;
  border: 1px solid #F2DCA8;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* Provenance timeline — append-only, distinguishes human vs AI actors. */
.ticket-provenance {
  margin-top: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.95rem;
}
.ticket-provenance summary { cursor: pointer; padding: 0.2rem 0; }
.prov-timeline {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.prov-event {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: var(--cultured);
  border-left: 3px solid var(--imi-purple);
}
.prov-event-ai {
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border-left-color: #B8425C;
}
.prov-event-head {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}
.prov-actor { font-weight: 600; color: var(--imi-purple); }
.prov-event-detail {
  font-size: 0.85rem;
  font-family: var(--font-sans);
}
.prov-from { color: var(--muted); text-decoration: line-through; }
.prov-to   { color: var(--ink); font-weight: 600; }
.prov-reason {
  margin-top: 0.25rem;
  font-style: italic;
}

/* Ticket-create modal — outcome required + similar-tickets pane. */
.ticket-create-form { display: flex; flex-direction: column; gap: 0.85rem; }
.ticket-create-form .field input,
.ticket-create-form .field textarea,
.ticket-create-form .field select {
  width: 100%;
  font: inherit; font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--cultured);
  resize: vertical;
}
.ticket-create-form .field input:focus,
.ticket-create-form .field textarea:focus,
.ticket-create-form .field select:focus {
  background: var(--white);
  border-color: var(--imi-purple);
  outline: none;
}
.ticket-outcome-field span { color: var(--imi-purple); font-weight: 600; }
.ticket-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.ticket-similar {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}
.ticket-similar-head { margin-bottom: 0.4rem; color: #854D0E; font-weight: 600; }
.ticket-similar-item {
  display: flex; flex-direction: column; gap: 0.2rem;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.ticket-similar-item:hover { border-color: var(--imi-purple); }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.5rem;
}
/* When modal-actions is a direct child of .modal (not nested inside
   modal-body), it acts as the footer — give it footer-grade padding +
   the cultured bg + a top border so the action buttons aren't crammed
   against the modal walls. Used by promptText() and confirmAction(). */
.modal > .modal-actions {
  margin-top: 0;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--cultured);
}

/* ── Settings (Inbox v1.0) ───────────────────────────── */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.settings-tab {
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.settings-tab:hover { color: var(--imi-purple); }
.settings-tab.active {
  color: var(--imi-purple);
  border-bottom-color: var(--imi-purple);
  font-weight: 600;
}
.settings-section { background: var(--white); padding: 0; }
.settings-section-head {
  margin-bottom: 1rem;
}
.settings-section-head h3 { margin: 0 0 0.2rem; }
.settings-placeholder {
  background: var(--cultured);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
}
.channel-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.channel-card-off { opacity: 0.6; background: var(--cultured); }
.channel-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.channel-card-actions {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.channel-card-dns {
  flex-basis: 100%;
  font-size: 0.78rem;
}
.dns-ok   { color: #2f855a; }
.dns-fail { color: #b8425c; }

.settings-add-channel {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  background: var(--white);
}
.settings-add-channel summary {
  cursor: pointer;
  padding: 0.25rem 0;
}
.settings-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; }
.settings-form .field input,
.settings-form .field select {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cultured);
}
.field-checkbox {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem;
}

/* ── Modal overlay ───────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(61, 31, 92, 0.55);
  display: grid; place-items: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal {
  background: var(--white);
  border-radius: 10px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal.modal-wide  { max-width: 760px; }
/* Even wider for the line-item builder, where multi-session full-day
   workshops have two parallel session blocks that fit better
   side-by-side. Aaron 2026-05-09: "preferably all the information
   should be on a single modal panel … wider frame." */
.modal.modal-xwide { max-width: 1040px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--cultured);
}

/* Ticket-create modal — AI intake paste block (Aaron 2026-05-08) */
.ticket-ai-paste {
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ticket-ai-paste textarea {
  width: 100%;
  font: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  resize: vertical;
}
.ticket-ai-paste #ticket-ai-state { min-height: 1.2em; }

/* Finance reconciliation banner on the Handover tab (Aaron 2026-05-08) */
.handover-reconcile-banner {
  background: #FEF6F8;
  border: 1px solid rgba(184, 66, 92, 0.4);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.handover-reconcile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
}
.handover-reconcile-figures {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.92rem;
}
.handover-reconcile-figures > span { white-space: nowrap; }
.recon-pos { color: #2D5A3F; }
.recon-neg { color: #9C354B; }
.handover-reconcile-actions {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
}
.handover-reconcile-actions .btn-link {
  border: 1px solid var(--border);
  background: var(--white);
}
.handover-reconcile-actions .btn-link:hover {
  border-color: var(--imi-purple);
  background: var(--bright-grey);
}
.handover-reconcile-reason textarea { min-height: 60px; }
.recon-ok  { color: #2D5A3F; }
.recon-err { color: #9C354B; }

/* Sales scoping workspace (Aaron 2026-05-09)
   Pre-deal surface: contact/company anchors at top, big notes pane,
   reactive AI rail on the right. Designed UX-first for messy real-time
   call work — text-first, voice-friendly, schema-second. */
.scope-workspace {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .scope-workspace { grid-template-columns: 1fr; }
}
.scope-main {
  display: flex; flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.scope-rail {
  display: flex; flex-direction: column; gap: 0.75rem;
  min-width: 0;
}
.scope-anchors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .scope-anchors { grid-template-columns: 1fr; }
}
.scope-notes-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 320px;
  padding: 0.85rem 1rem;
}
.scope-notes-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
}
/* Sticky AI action toolbar (Aaron 2026-05-10) — replaces the bottom-of-page
   action row. Sits between the anchors and the sectioned notepad so the
   AI commands are always within easy reach. */
.scope-actions-toolbar {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.scope-actions-toolbar .scope-actions-save-state {
  margin-left: auto;
  text-align: right;
}
/* Dependency-blocked buttons — visibly disabled but with a tooltip that
   explains what's missing. The `is-dep-blocked` class is paired with
   the native `disabled` attr; the class lets us style without overriding
   the browser's :disabled cursor + opacity behavior. */
.scope-actions-toolbar .btn-link.is-dep-blocked,
.scope-actions-toolbar .btn-primary.is-dep-blocked {
  cursor: not-allowed;
  opacity: 0.45;
  position: relative;
}
.scope-actions-toolbar .btn-link.is-dep-blocked::after,
.scope-actions-toolbar .btn-primary.is-dep-blocked::after {
  /* Tiny lock-icon affordance — clarifies that the button is gated,
     not just visually muted. */
  content: " 🔒";
  font-size: 0.78em;
  filter: grayscale(1);
  margin-left: 0.15rem;
}
.scope-head h1[contenteditable] {
  outline: none;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: -4px;
}
.scope-head h1[contenteditable]:hover,
.scope-head h1[contenteditable]:focus { background: var(--bright-grey); }
.scope-head-actions {
  display: inline-flex; align-items: center;
  gap: 0.5rem;
}
.pill-scope-active   { background: #ECEAF5; color: var(--imi-purple); padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.pill-scope-promoted { background: #E5EFE7; color: #2D5A3F; padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.pill-scope-archived { background: var(--cultured); color: var(--muted); padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }

.scope-extract-row {
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}
.scope-extract-row:first-child { border-top: 0; padding-top: 0; }
.scope-extract-row.is-low-conf {
  border-left: 2px solid #B8853D;
  margin-left: -0.55rem;
  padding-left: 0.55rem;
}

/* Sectioned scope notepad — replaces the single textarea with six labelled
   sections that double as prompt sheet, coverage tracker, and steering tool.
   Aaron 2026-05-09: feedback was that one textarea loses the comms-director
   workflow. Each section has hint text lifted from the FTI scoping checklist.
   Empty section IS the prompt; the icon flips ○→✓ once typing starts. */
.scope-coverage {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--bright-grey);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text);
}
.scope-coverage-label {
  flex-shrink: 0;
  font-weight: 600;
}
.scope-coverage-bar {
  flex: 1;
  height: 6px;
  background: rgba(61, 31, 92, 0.15);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.scope-coverage-fill {
  height: 100%;
  background: var(--imi-purple);
  border-radius: 999px;
  transition: width 0.25s ease-out;
}
.scope-coverage-meta {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.8rem;
}

.scope-sections {
  display: flex; flex-direction: column;
  gap: 0.85rem;
}
.scope-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.scope-section:focus-within {
  border-color: var(--imi-purple);
  box-shadow: 0 0 0 3px rgba(61, 31, 92, 0.08);
}
.scope-section.is-filled {
  border-color: #C8DBC8;
  background: #FAFCFA;
}
.scope-section-head {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.scope-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem;
  font-size: 0.85rem;
  color: var(--silver-sand);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.scope-section.is-filled .scope-section-icon {
  color: #5A8763;
}
.scope-section-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.scope-section-hint {
  margin: 0 0 0.4rem 1.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.scope-section.is-filled .scope-section-hint {
  /* Once the section has content the prompt fades — it's done its job. */
  opacity: 0.55;
}
.scope-section textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  color: var(--text-body);
}
.scope-section textarea:focus {
  outline: none;
  border-color: var(--imi-purple);
}
.scope-section textarea::placeholder {
  color: var(--silver-sand);
  font-style: italic;
}

/* Pin-suggestion card — appears after extract surfaces an org/contact
   the CRM might already know. One-click pin or create. Aaron 2026-05-09 */
.pin-block {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}
.pin-block:first-child {
  border-top: 0;
  padding-top: 0;
}
.pin-block:last-child {
  padding-bottom: 0;
}
.pin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.pin-actions button {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}
.pin-actions button:hover {
  background: var(--bright-grey);
}
.btn-sm {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}

/* Soft callout — used inside the follow-up modal for "things to double check". */
.callout-soft {
  background: #FFF8E5;
  border: 1px solid #F2D89A;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.callout-soft ul {
  margin: 0.3rem 0 0 1.1rem;
  padding: 0;
}

/* "From scoping" cross-link on the deal page — surfaces the back-link
   to the scope session that originated this deal. Subtle but findable. */
.deal-from-scope {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.deal-from-scope:hover {
  border-bottom-style: solid;
  background: rgba(61, 31, 92, 0.04);
  border-radius: 3px;
}

/* Pre-call brief modal — sectioned display with copy-able openings.
   Aaron 2026-05-09: front end of the call workflow (mirror of the
   post-call follow-up email modal). */
.prebrief-h3 {
  margin: 1rem 0 0.4rem 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.prebrief-headline {
  background: var(--bright-grey);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0.5rem 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--text);
}
.prebrief-list {
  margin: 0.2rem 0 0.4rem 1.1rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.prebrief-list li { margin-bottom: 0.25rem; }
.prebrief-openings {
  margin: 0.2rem 0 0.4rem 1.4rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.prebrief-openings li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.prebrief-openings li > span { flex: 1; }
.prebrief-copy {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--bright-grey);
}

/* Inline TBC chip — surfaces in the rail when sections mention dates/budget
   that haven't landed yet. Picked up by the live extractor. */
.scope-tbc-chip {
  display: inline-flex; align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  background: #FFF4E0;
  color: #7A4A00;
  border: 1px solid #F2D89A;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0.15rem 0.25rem 0.15rem 0;
}

/* Scheduled deliveries cross-deal aggregate page (Aaron 2026-05-08) */
.scheduled-month {
  margin-bottom: 1.25rem;
}
.scheduled-month-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.5rem 0 0.4rem 0;
}

/* Scheduled Deliveries tab strip — proper tab affordance (Aaron flagged
   the chip version was hard to distinguish from regular links). Same
   visual treatment as `.record-tabs` so the system feels consistent. */
.schedule-tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.schedule-tab {
  display: inline-block;
  padding: 0.55rem 0.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.schedule-tab:hover {
  color: var(--imi-purple);
  border-bottom-color: rgba(61, 31, 92, 0.25);
}
.schedule-tab.active {
  color: var(--imi-purple);
  border-bottom-color: var(--imi-purple);
  font-weight: 600;
}

/* Facilitators page — grid of trainer cards */
.facilitator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}
.facilitator-card {
  display: flex; align-items: center;
  gap: 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.facilitator-card:hover {
  border-color: var(--imi-purple);
  box-shadow: 0 1px 8px rgba(61, 31, 92, 0.08);
}
.facilitator-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--cultured);
}
.facilitator-avatar-fallback {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bright-grey);
  color: var(--imi-purple);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  flex: 0 0 auto;
}
.facilitator-avatar-large {
  width: 84px; height: 84px;
  font-size: 1.4rem;
}
.facilitator-card-body {
  flex: 1; min-width: 0;
}

/* Delivery detail header — status pill + Edit button (Aaron 2026-05-08:
   moved Edit to the top-right because the bottom-of-page placement was
   counter-intuitive — operators were looking up at the readiness card). */
.delivery-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Multi-session emphasis on the Delivery details panel. The Sessions
   row gets a coloured strong + a "delivered as N × duration" subtitle
   when sessionCount > 1 so a full-day workshop reads as TWO things to
   organise, not one. */
.prop-multi-session {
  color: var(--imi-purple);
  font-size: 1.05rem;
}

/* Per-session list rendered into the Delivery details prop-list when
   the line item has > 1 session. Each session is its own card with
   date / meeting URL / status, mirroring the multi-row treatment of
   the edit modal. (Aaron 2026-05-08 — multi-session segments.) */
.prop-row-sessions { display: block; padding: 0.4rem 0; }
.session-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.session-list-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.session-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.session-list-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.session-list-row-missing {
  background: linear-gradient(to right, #FEF6F8 0%, transparent 75%);
  border-left: 3px solid #B8425C;
  margin-left: -0.55rem;
  padding-left: 0.55rem;
  border-radius: 0 4px 4px 0;
}
.session-list-row-missing > span:last-child { color: #9C354B; }

/* Edit modal: per-session segment block (Session 1, Session 2, ...) */
fieldset.delivery-segment {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  min-width: 0;
}
fieldset.delivery-segment legend {
  padding: 0 0.4rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
/* When the modal is wide enough, lay multi-session blocks out
   side-by-side instead of stacked — keeps Session 1 and Session 2
   on screen together so the operator can fill them in parallel
   without scrolling. */
#li-sessions-slot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 880px) {
  #li-sessions-slot {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
}

/* Missing-required-field flagging in modals (line item builder).
   Same red-pink language as the .prop-row-missing on the detail panel
   so the operator's eye gets the same signal in both surfaces. The
   hint is the small empty-circle ○ marker next to the label.
   Aaron 2026-05-08: "the unfilled areas to be uncomfortable to ignore
   here" (same effect as the missing pieces). */
.field.field-missing {
  background: linear-gradient(to right, #FEF6F8 0%, transparent 70%);
  border-left: 3px solid #B8425C;
  margin-left: -0.55rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0 4px 4px 0;
}
.field.field-missing > span:first-child {
  color: #9C354B;
}
.field.field-missing input,
.field.field-missing select,
.field.field-missing .dropdown-trigger {
  border-color: rgba(184, 66, 92, 0.45);
}

/* Missing-required-field flagging in the Delivery details left panel.
   Aaron 2026-05-08: "the missing details on the left side need to be
   uncomfortable for people to ignore." Same red-pink language as the
   readiness card so the operator's eye travels to the same place
   regardless of where they're looking on the page. */
.prop-row.prop-row-missing {
  background: linear-gradient(to right, #FEF6F8 0%, transparent 80%);
  border-left: 3px solid #B8425C;
  margin-left: -0.55rem;
  padding-left: 0.55rem;
  border-radius: 0 4px 4px 0;
}
.prop-row-missing .prop-label {
  color: #9C354B;
  font-weight: 600;
}
.prop-row-missing .prop-value { color: #9C354B; }
.prop-empty {
  color: #9C354B;
  font-style: italic;
  font-size: 0.92rem;
}
.prop-missing-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 0.95rem; height: 0.95rem;
  border: 1px solid #B8425C;
  border-radius: 50%;
  color: #B8425C;
  background: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Delivery readiness + materials checklist (Aaron 2026-05-08).
   Mirrors the visual language of the Finance handover sections. */
.delivery-readiness.is-blocked {
  border: 1px solid rgba(184, 66, 92, 0.4);
  background: #FEF6F8;
}
.delivery-readiness.is-ready {
  border: 1px solid rgba(45, 90, 63, 0.25);
  background: #F4FAF5;
}
.readiness-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.readiness-list li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.92rem;
}
.readiness-list li.is-filled { color: #2D5A3F; }
.readiness-list li.is-missing { color: #9C354B; }
.readiness-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.readiness-list li.is-filled .readiness-icon {
  background: #E5EFE7;
  border-color: #2D5A3F;
}
.readiness-list li.is-missing .readiness-icon {
  background: var(--white);
}

/* Inline blocking hint surfaced on Scheduled Deliveries + line items table */
.readiness-blocking {
  color: #9C354B !important;
  margin-top: 0.2rem;
}

/* Materials checklist — list of toggleable items */
.checklist-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.checklist-item label {
  display: flex; align-items: flex-start; gap: 0.6rem;
  cursor: pointer;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.checklist-item label:hover {
  background: var(--bright-grey);
}
.checklist-item input[type="checkbox"] {
  margin: 0.2rem 0 0 0;
  width: 1.05rem; height: 1.05rem;
  flex: 0 0 auto;
  cursor: pointer;
}
.checklist-item-body {
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 0;
}
.checklist-item-label { font-weight: 500; }
.checklist-item-hint  { font-size: 0.82rem; line-height: 1.35; }
.checklist-item.is-done .checklist-item-label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(45, 90, 63, 0.35);
  color: var(--muted);
}

/* Workshop delivery foundations — line item table pills + edit modal section
   (Aaron 2026-05-08, slice #1) */
.pill-delivery-pending   { background: #F2EEE7; color: #6B5A30; padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.pill-delivery-scheduled { background: #ECEAF5; color: var(--imi-purple); padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.pill-delivery-delivered { background: #E5EFE7; color: #2D5A3F; padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.pill-delivery-cancelled { background: #F1E8E1; color: #7A4F35; padding: 0 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.delivery-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
.delivery-section legend {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Voice dictation — mic button overlay on text fields (Aaron 2026-05-08) */
.dictate-wrap {
  position: relative;
  display: block;
}
.dictate-wrap > textarea,
.dictate-wrap > input {
  width: 100%;
  padding-right: 2.4rem;
}
button.dictate-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  z-index: 2;
}
button.dictate-btn svg { width: 0.95rem; height: 0.95rem; }
button.dictate-btn:hover {
  color: var(--imi-purple);
  border-color: var(--imi-purple);
  background: var(--bright-grey);
}
button.dictate-btn.dictate-active {
  color: var(--white);
  background: #B8425C;
  border-color: #B8425C;
  animation: dictate-pulse 1.2s ease-in-out infinite;
}
@keyframes dictate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 66, 92, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 66, 92, 0); }
}

/* New-deal modal: AI review pane — proposed line item rows */
.line-items-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin: 0;
  min-width: 0;
}
.line-items-fieldset legend {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.proposed-line-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  background: var(--cultured);
}
.proposed-line-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  margin: 0;
}
.proposed-line-item-body { flex: 1; min-width: 0; }
.proposed-line-item-manual {
  border-style: dashed;
  background: var(--white);
}
.ai-review-summary {
  background: linear-gradient(135deg, rgba(61, 31, 92, 0.06), rgba(184, 66, 92, 0.05));
  border: 1px solid rgba(61, 31, 92, 0.18);
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.ai-review-warnings {
  margin: 0.4rem 0 0 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* New-deal modal: tab strip for Structured / AI intake choice */
.new-deal-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.25rem;
  margin-top: -0.25rem;
  border-bottom: 1px solid var(--border);
}
.new-deal-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  font: inherit; font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.new-deal-tab:hover { color: var(--imi-purple); }
.new-deal-tab.active {
  color: var(--imi-purple);
  border-bottom-color: var(--imi-purple);
  font-weight: 600;
}

/* Rail-card header right-cluster (action button + view-all link) */
.rail-card-head-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
button.btn-link.rail-card-action {
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
  min-height: 0;
  border: 1px solid var(--border);
}
button.btn-link.rail-card-action:hover {
  background: var(--bright-grey);
  border-color: var(--imi-purple);
}

/* When the deal amount is computed from line items but the agreed fee
   in handover differs, prefix the figure with ~ and hint at the diff. */
.kpi.kpi-amount-approx strong {
  color: #9C3E1A;
}
.kpi.kpi-amount-approx { cursor: help; }

/* Deal Overview pane — at-a-glance summary blocks */
.deal-overview-summary {
  display: flex; flex-direction: column; gap: 1rem;
}
.deal-overview-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.deal-overview-block.deal-overview-warn {
  border-color: rgba(184, 66, 92, 0.4);
  background: #FEF6F8;
}
.deal-overview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.deal-overview-head h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.deal-overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.deal-overview-list li {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.pill-warn {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  background: #FEE3D6;
  color: #9C3E1A;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Custom confirm modal — drop-in for window.confirm() */
.modal.modal-confirm { max-width: 440px; }
.modal-confirm .confirm-body {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}
button.btn-danger {
  background: #B8425C;
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  min-height: var(--tap-target);
}
button.btn-danger:hover { background: #9C354B; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
/* Restore browser-default [hidden] behaviour — author styles like
   `.field { display: flex }` otherwise win against the UA stylesheet. */
[hidden] { display: none !important; }
.field > span:first-child {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  background: var(--white); color: var(--text-body);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  font: inherit; font-size: 16px;
  min-height: var(--tap-target);
}
.field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; line-height: 1.4;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--imi-purple);
  box-shadow: 0 0 0 2px var(--bright-grey);
}
.field input.input-error,
input.input-error {
  border-color: #b3261e;
  box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.18);
}
.seg-preview { display: flex; align-items: center; gap: 0.75rem; }

.token-display {
  display: flex; gap: 0.5rem; align-items: stretch;
  margin-top: 0.5rem;
}
.token-display input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--imi-purple);
}
.token-display button { flex: none; }

/* ── Pill colors for campaigns ───────────────────────── */
.pill-draft { background: var(--silver-sand); color: var(--dusk); }
.pill-scheduled { background: #DCE8F8; color: var(--deep-blue); }
.pill-sending { background: #FCE3D6; color: #8C3A00; }
.pill-sent { background: #D8EDD8; color: #1F5C2A; }
.pill-cancelled { background: #FCE3E3; color: #7A1F1F; }
.pill-suppressed { background: var(--bright-grey); color: var(--imi-purple); }
.pill-failed { background: #FCE3E3; color: #7A1F1F; }

/* ── Compose wizard ───────────────────────────────────── */
.wizard-steps {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.wizard-steps li {
  flex: 1; min-width: 100px;
  padding: 0.7rem 1rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 500; color: var(--muted);
  text-align: center;
}
.wizard-steps li.done { background: var(--bright-grey); color: var(--imi-purple); }
.wizard-steps li.active { background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple); }
.wizard-steps li a { display: block; margin: -0.7rem -1rem; padding: 0.7rem 1rem; }

/* Pre-send checks panel — Aaron 2026-05-12. Surfaced from Step 3 into
   Step 2 so issues get caught during composition. Qualia-inspired
   sectioned layout: each section header carries a Success/Warning pill,
   individual findings appear inline with severity-coloured borders. */
.cmp-tests-card .cmp-run-tests-btn {
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
}
.cmp-tests-results { margin-top: 0.85rem; }
.cmp-test-section {
  border-top: 1px solid var(--border);
  padding: 0.85rem 0 0.4rem;
}
.cmp-test-section:first-child { border-top: 0; padding-top: 0.4rem; }
.cmp-test-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.cmp-test-status {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cmp-test-pass { background: #DCEBD8; color: #1F5C2A; }
.cmp-test-warn { background: #FFF3DA; color: #6F4D00; }
.cmp-test-fail { background: #FCE3E3; color: #7A1F1F; }
.cmp-test-findings { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cmp-test-finding {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  font-size: 0.85rem; line-height: 1.45;
  border-left: 3px solid var(--border);
}
.cmp-test-finding-red    { background: #FCE3E3; color: #7A1F1F; border-left-color: #C74040; }
.cmp-test-finding-yellow { background: #FFF8E8; color: #6F4D00; border-left-color: #C79B40; }
.cmp-test-finding-green  { background: #ECEAF5; color: #3D1F5C; border-left-color: var(--imi-purple); }
.cmp-test-finding-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; margin-top: 0.1rem; }
.cmp-test-finding-body { flex: 1; min-width: 0; }
.cmp-test-finding-msg { line-height: 1.45; }
.cmp-test-finding-fix { margin-top: 0.4rem; }

/* Suggested-fix affordances per finding. Three flavours:
   navigate (link) · auto (button) · manual (just text). Aaron 2026-05-12. */
.cmp-test-fix-navigate {
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem; font-weight: 600;
  background: var(--white);
  border: 1px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.cmp-test-fix-navigate:hover { background: rgba(255,255,255,0.6); }
.cmp-test-fix-auto {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem; font-weight: 700;
  background: var(--imi-purple);
  color: var(--white);
  border: 1px solid var(--imi-purple);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.cmp-test-fix-auto:hover { background: #2D1745; }
.cmp-test-fix-auto:disabled { opacity: 0.7; cursor: wait; }
.cmp-test-fix-manual {
  display: inline-block;
  font-style: italic;
}

/* "Apply all auto-fixes" batch banner — purple-tinted to read as
   action-able + distinct from severity banners. */
.cmp-test-batch-fix {
  background: #F2EEFA;
  border: 1px solid #D4CCEC;
  color: #3D1F5C;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 0.6rem;
}
.cmp-test-batch-fix .cmp-test-fix-all-btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
}

/* Inline-patch trigger — visually pairs with .cmp-test-fix-auto (same
   primary-action weight) but uses outline rather than solid fill, signalling
   that clicking expands a form rather than commits immediately. */
.cmp-test-fix-inline {
  display: inline-block;
  background: rgba(255, 255, 255, 0.55);
  color: var(--imi-purple);
  border: 1px solid var(--imi-purple);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cmp-test-fix-inline:hover { background: #FFFFFF; }
.cmp-test-fix-inline.cmp-test-fix-inline-open {
  background: var(--imi-purple);
  color: #FFFFFF;
}
.cmp-test-fix-fallback {
  margin-left: 0.45rem;
  text-decoration: underline;
}

/* Inline-patch form — diagnostic + patch + commit in the same surface.
   Modeled on the Finance reconciliation panel: sectioned wash, primary +
   secondary action buttons, optional fallback link on the right. Indented
   under the finding so the relationship is visually obvious. */
.cmp-test-inline-patch {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem 0.8rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #E1D7F2;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.cmp-test-inline-patch[hidden] { display: none; }
.cmp-test-patch-intro {
  color: #4A3D5F;
  line-height: 1.45;
}
.cmp-test-patch-intro-error {
  color: #7A1F1F;
  font-weight: 600;
}
.cmp-test-patch-rows {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.cmp-test-patch-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  background: #FFFFFF;
  border: 1px solid #ECE5F5;
  border-radius: var(--radius-sm);
}
.cmp-test-patch-thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #ECEAF5;
  border: 1px solid #DCD3EC;
}
.cmp-test-patch-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.cmp-test-patch-row-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-test-patch-input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  border: 1px solid #C9BCE3;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: #1F1233;
}
.cmp-test-patch-input:focus {
  outline: 2px solid var(--imi-purple);
  outline-offset: -1px;
  border-color: var(--imi-purple);
}
.cmp-test-patch-input-error {
  border-color: #C74040;
  background: #FCE3E3;
}
.cmp-test-patch-actions {
  display: flex; align-items: center; gap: 0.5rem;
  padding-top: 0.15rem;
}
.cmp-test-patch-actions .btn-primary,
.cmp-test-patch-actions .btn-secondary {
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
}
.cmp-test-patch-fallback-wrap {
  margin-left: auto;
}

/* Tri-state save markers for the audience step (Aaron 2026-05-12).
   Shifts the validation UX from "what's missing" (red, punitive) to
   "what's saved" (green, rewarding). Each required field carries a
   .cmp-step1-marker span whose data-state drives the visual:
     - empty   → red ○ (waiting; suppressed for recommended fields)
     - saving  → spinning ↻ (in flight, ~150ms minimum so the user sees it)
     - saved   → green ✓ (locked in; the dopamine moment)
     - error   → red ⚠ (save failed; visible until next attempt)
   The .cmp-saved-flash sibling flashes a positive label next to the
   marker for ~1.4s after each save ("Email locked in ✓"). */
.cmp-step1-marker {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: -2px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cmp-step1-marker[data-state="empty"] {
  border: 1px solid #B8425C;
  color: #B8425C;
  background: var(--white);
}
.cmp-step1-marker[data-state="empty"]::before { content: "○"; }
/* Recommended (not required) fields don't show a red dot when empty —
   the marker only appears once it's been saved. Keeps "recommended"
   from feeling like a punishment. */
.cmp-step1-marker[data-state="empty"][data-recommended="1"] { display: none; }
.cmp-step1-marker[data-state="saving"] {
  border: 1px solid #6B6776;
  color: #6B6776;
  background: var(--white);
  animation: cmpStep1Spin 0.6s linear infinite;
}
.cmp-step1-marker[data-state="saving"]::before { content: "↻"; }
.cmp-step1-marker[data-state="saved"] {
  border: 1px solid #1F5F3F;
  color: #FFFFFF;
  background: #1F5F3F;
}
.cmp-step1-marker[data-state="saved"]::before { content: "✓"; }
.cmp-step1-marker[data-state="error"] {
  border: 1px solid #B3261E;
  color: #FFFFFF;
  background: #B3261E;
}
.cmp-step1-marker[data-state="error"]::before { content: "⚠"; }
@keyframes cmpStep1Spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Flash label next to the marker — "Email locked in ✓" etc. Stays
   visible for ~1.4s after each save, then fades. The aria-live region
   means screen readers also catch the positive feedback. */
.cmp-saved-flash {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1F5F3F;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s, transform 0.25s;
}
.cmp-saved-flash.cmp-flash-on {
  opacity: 1;
  transform: translateY(0);
}

/* Encouraging green banner for "Ready to continue" state. Same family
   as the .banner-info / .banner-yellow already in use. */
.banner.banner-green {
  background: #EAF6EE;
  color: #1F5F3F;
  border: 1px solid #C8E5D2;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
}
.banner.banner-green a { color: #1F5F3F; font-weight: 600; }

/* Wizard-step nav blocked state (Aaron 2026-05-12 afternoon).
   When audience step has missing required fields, message + send
   steps render as "locked" until the operator backfills. Same
   red-pink language as .field-missing so the visual cue is unified
   across the app — "missing detail" feels the same wherever it is.
   The link is still clickable (graceful, with helpful banner on
   the target step) but visually reads as not-ready-yet. */
.wizard-steps li.wizard-step-blocked {
  opacity: 0.55;
  background: #FEF6F8;
  border-color: rgba(184, 66, 92, 0.25);
  position: relative;
}
.wizard-steps li.wizard-step-blocked::after {
  content: " 🔒";
  font-size: 0.7rem;
  margin-left: 0.25rem;
  opacity: 0.7;
}
.wizard-steps li.wizard-step-blocked a {
  color: #9C354B !important;
  cursor: not-allowed;
}

/* Message-source heading when no source picked — same colour family
   as .field-missing labels so eye treats it as one unified pattern. */
#cmp-source-heading.source-required {
  color: #9C354B;
}

/* Disabled state on Continue / wizard-forward buttons. */
button.btn-primary.is-disabled,
button.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
button.btn-primary.is-disabled:hover,
button.btn-primary:disabled:hover {
  background: var(--imi-purple); /* don't brighten on hover when disabled */
}

/* Stage D — Power-user mode: vertical-stack layout for all 3 setup
   sections at once. Each section gets a numbered header + breathing
   room. The campaign-list row actions live alongside it. */
.pu-section {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pu-section-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--imi-purple);
}
.pu-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  background: var(--bright-grey);
  color: var(--imi-purple);
  border-radius: 50%;
  font-size: 0.85rem; font-weight: 700;
}
.pu-section-body { /* Inner body where the step-renderer dumps content. */ }
.pu-section-body > .compose-pane {
  /* Compress the side-by-side compose pane in power-user mode — the
     preview iframe is heavy; tuck it into a collapsible details panel
     within each section's body. */
}
/* Campaigns list — row actions column (Stage E). */
.cmp-row-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Setup mode — split layout for the campaign workspace. Main column
   hosts the active wizard step; sidebar carries "This campaign"
   metadata. Aaron 2026-05-10 night. */
/* setup-mode-layout — was a 2-col grid with a right rail ("This
   campaign" aside). Aaron 2026-05-12 round 4 removed the aside; layout
   is now a single full-width column. Kept as a wrapper for future
   header/banner additions but no grid is needed. */
.setup-mode-layout {
  display: block;
}
.setup-mode-main { min-width: 0; }
/* (Dead .setup-mode-side .kv-list rules + responsive overrides removed
   2026-05-12 round 4 when the aside itself was dropped from the HTML.) */

/* Template grid (step 1) */
.template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem; margin-top: 0.5rem;
}
.template-card {
  position: relative;
  display: block;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.template-card:hover { border-color: var(--imi-purple); box-shadow: var(--shadow-sm); }
.template-card.selected { border-color: var(--imi-purple); background: var(--bright-grey); box-shadow: 0 0 0 2px rgba(61, 31, 92, 0.15); }
.template-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.template-card-brand {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.template-card-brand-imi { background: var(--imi-purple); color: var(--white); }
.template-card-brand-fti { background: linear-gradient(135deg, var(--imi-purple), #C74074); color: var(--white); }
.template-card-name { font-weight: 600; color: var(--imi-purple); margin-bottom: 0.2rem; }

/* Source tabs (Stage C — template vs email picker on compose step 1). */
.source-tabs {
  display: inline-flex;
  gap: 0;
  margin: 0.4rem 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cultured);
}
.source-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.source-tab + .source-tab { border-left: 1px solid var(--border); }
.source-tab.active {
  background: var(--imi-purple);
  color: var(--white);
}
.source-pane[hidden] { display: none; }

/* Compose pane: editor + preview side-by-side */
/* Message-step layout: preview is the canvas, edit is the control panel.
   Reweighted 2026-05-12 — Aaron: "the preview panel feels quite small
   compared to the screen space I have available." The edit panel is
   capped at 420px so the preview gets every extra pixel on wide screens.
   Below 900px the layout stacks (handled in the @media block below). */
/* Message-step layout. Aaron 2026-05-12 round 4:
   - Fixed edit-column width (420px) instead of minmax so the
     .preview-anchor-wrap's padding-left value can exactly match it.
   - .preview-anchor-wrap holds the layout buttons + plain-text + send-
     test + grey toolbar; it spans both grid columns but has a left
     padding equal to the edit-column width, so its inner content sits
     ABOVE the preview column.
   - Focus mode collapses the edit column to 0; the preview column
     expands leftward to fill; BUT the anchor-wrap's padding-left stays
     constant, so the buttons + grey toolbar stay anchored where they
     were in Std. Iframe gets full width; controls don't move. */
.compose-pane {
  --compose-edit-w: 420px;
  --compose-col-gap: 1.25rem;
  display: grid;
  grid-template-columns: var(--compose-edit-w) minmax(0, 1fr);
  column-gap: var(--compose-col-gap);
  row-gap: 0.6rem;
  transition: grid-template-columns 0.22s ease, column-gap 0.22s ease;
}
.preview-anchor-wrap {
  grid-column: 1 / -1;
  /* Offset by the full edit-column width + column gap so the inner
     controls visually align with the preview column's left edge in Std
     mode AND keep that exact offset when the edit column collapses in
     Focus mode. This is the trick that anchors the controls. */
  padding-left: calc(var(--compose-edit-w) + var(--compose-col-gap));
  display: flex; flex-direction: column;
  gap: 0;
}
.compose-edit {
  min-width: 0;
  transition: opacity 0.18s ease;
}
.compose-preview { min-width: 0; display: flex; flex-direction: column; position: sticky; top: 1rem; align-self: start; }

/* Focus mode: edit column actually collapses (preview grows leftward),
   but .preview-anchor-wrap's padding-left stays constant, so the
   controls don't move. */
.compose-pane[data-layout="focus"] {
  grid-template-columns: 0px minmax(0, 1fr);
  column-gap: 0;
}
.compose-pane[data-layout="focus"] .compose-edit {
  opacity: 0;
  pointer-events: none;
  /* The column itself is 0px wide so the content area has no flex
     basis. Tab order is suppressed by pointer-events:none + the
     ancestor's effective width=0 (focus rings won't be visible). */
}
/* Note: .preview-anchor-wrap's padding-left is deliberately NOT
   overridden here — that's the whole point of the round-4 design. */
/* Stable preview-controls row. Aaron 2026-05-12 round 4: lives inside
   .preview-anchor-wrap (which provides the left padding that anchors
   it above the preview column). Two flex groups (layout + tools) split
   left/right via space-between. Never wraps on normal viewports. */
.preview-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: nowrap;
}
.preview-controls-group {
  display: flex; align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;  /* never compress; preview pane shrinks instead */
}

/* Layout selector buttons — icon + label, visually communicates which
   columns are visible. Selected state uses the purple fill that
   matches the device-width buttons. */
.cmp-layout-btn {
  display: inline-flex; align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  font-feature-settings: "tnum";
}
.cmp-layout-btn:hover { background: var(--cultured); border-color: var(--imi-purple); }
.cmp-layout-btn[aria-pressed="true"] {
  background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple);
}
.cmp-layout-btn svg { flex-shrink: 0; }

/* Plain-text mode button — sits in the upper controls row next to
   Send-test. Lighter weight so it doesn't compete with the primary CTA. */
.preview-tools-group .preview-mode-btn[data-mode="text"] {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.preview-tools-group .preview-mode-btn[data-mode="text"]:hover {
  background: var(--cultured); border-color: var(--imi-purple);
}
.preview-tools-group .preview-mode-btn[data-mode="text"][aria-pressed="true"] {
  background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple);
}

/* Grey bar — Desktop / Tablet / Mobile only, fixed positions, no wrap. */
.preview-toolbar {
  display: flex; gap: 0.4rem; align-items: center;
  padding: 0.5rem; background: var(--cultured);
  border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
}
.preview-toolbar button[data-mode][aria-pressed="true"] { background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple); }
.preview-frame {
  flex: 1; min-height: 600px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  display: flex; align-items: stretch; justify-content: center;
  padding: 1rem;
}
.preview-iframe { width: 100%; height: 100%; min-height: 600px; border: 0; background: #F7F8F9; }
.preview-iframe.preview-mobile { max-width: 380px; box-shadow: 0 4px 24px rgba(61, 31, 92, 0.12); }
/* Tablet preview — sits below the email's 640px max-width so the inner
   @media block (481-640) triggers. Aaron 2026-05-10 — parity with the
   email editor's preview toolbar. */
.preview-iframe.preview-tablet { max-width: 600px; box-shadow: 0 4px 24px rgba(61, 31, 92, 0.10); margin: 0 auto; display: block; }
.preview-text-pane {
  width: 100%; max-width: 600px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; line-height: 1.5;
  background: var(--cultured); padding: 1rem;
  border-radius: var(--radius);
  white-space: pre-wrap; color: var(--text-body);
}

/* Campaigns list filter bar (Aaron 2026-05-12 round 5) — status pills
   on the left, search + brand + sort on the right. Wraps below 720px. */
.cmp-filter-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.cmp-filter-bar .filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cmp-filter-tools { display: flex; gap: 0.5rem; align-items: center; }
.cmp-search-wrap {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.55rem;
  transition: border-color 0.12s ease;
}
.cmp-search-wrap:focus-within { border-color: var(--imi-purple); }
.cmp-search-wrap .cmp-search-icon { color: var(--muted); font-size: 1rem; line-height: 1; }
.cmp-search-wrap input[type="search"] {
  border: 0;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  background: transparent;
  outline: none;
  min-width: 180px;
}
.cmp-filter-tools select {
  padding: 0.35rem 0.55rem;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}

/* Stale draft pill — soft amber, matches Xd cold / stale signals on
   other surfaces (Deals "Xd cold", Tickets SLA-breach age). */
.pill-stale {
  background: #FFF3E0;
  color: #8A5A00;
  border: 1px solid #F5DDB1;
  font-weight: 600;
}

/* Live progress panel (Aaron 2026-05-12 round 5). Appears at the top of
   reporting mode when status=sending. Auto-refreshes every 30s. */
.cmp-live-progress {
  background: linear-gradient(135deg, #F2EEFA 0%, #ECEAF5 100%);
  border: 1px solid #D4CCEC;
  border-left: 4px solid var(--imi-purple);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1rem;
}
.cmp-live-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.cmp-live-head strong { font-size: 1rem; color: var(--imi-purple); }
.cmp-live-bar-wrap {
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #C9BCE3;
  border-radius: 14px;
  overflow: hidden;
}
.cmp-live-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--imi-purple), #6B3FA0);
  border-radius: 14px;
  transition: width 0.5s ease-out;
}
.cmp-live-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  mix-blend-mode: difference;
  filter: invert(1);
}
.cmp-live-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.cmp-live-stats > div {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
}
.cmp-live-stats strong { font-size: 0.95rem; }
.cmp-live-senders td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-live-loading { padding: 0.5rem 0; }

/* Schedule options (step 3) */
.schedule-options { display: flex; flex-direction: column; gap: 0.5rem; }
.schedule-options label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }

/* Sender pool picker (step 3, Send-step hardening Aaron 2026-05-12 round 5).
   Each row: checkbox + mailbox address + per-mailbox daily budget hint. */
.cmp-sender-pool {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}
.cmp-sender-row {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.92rem;
  padding: 0.25rem 0;
  cursor: pointer;
}
.cmp-sender-row code {
  background: var(--white);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.cmp-sender-row input[type="checkbox"] { accent-color: var(--imi-purple); }

/* Danger button — destructive confirmations (Launch campaign, etc.).
   Same shape as btn-primary but in a stronger color signal. */
.btn-danger {
  background: #B8425C;
  color: var(--white);
  border: 1px solid #B8425C;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn-danger:hover { background: #9A3550; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 900px) {
  .compose-pane { grid-template-columns: 1fr; column-gap: 0; }
  /* Focus mode at narrow viewports: undo the hide-edit (layout has
     stacked vertically; preview is wide either way) and drop the
     anchor-wrap left padding so controls don't overflow. */
  .compose-pane[data-layout="focus"] { grid-template-columns: 1fr; column-gap: 0; }
  .compose-pane[data-layout="focus"] .compose-edit { opacity: 1; pointer-events: auto; }
  /* Anchor wrap: collapse the left padding — controls span full row. */
  .preview-anchor-wrap { padding-left: 0; }
  .compose-preview { position: static; }
  /* Hide the layout selectors at narrow viewports — Focus has no
     benefit once the layout has stacked. */
  .preview-layout-group { display: none; }
  .preview-controls-bar { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .preview-frame { min-height: 400px; }
  .preview-iframe { min-height: 400px; }
}

/* ── Markdown toolbar ─────────────────────────────────── */
.md-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  margin-top: 0.35rem;
}
.md-toolbar button {
  font: inherit; font-size: 0.8rem; font-weight: 500;
  padding: 0.3rem 0.5rem; min-height: 30px;
  background: var(--white);
  color: var(--imi-purple);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
}
.md-toolbar button:hover { background: var(--bright-grey); }
.md-toolbar select {
  font: inherit; font-size: 0.8rem;
  padding: 0.3rem 0.5rem; min-height: 30px;
  background: var(--white);
  color: var(--imi-purple);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 0;
  max-width: 180px;
}
.md-toolbar-spacer { flex: 1; }
/* When the toolbar is above a textarea, kill that textarea's top corners */
.md-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* ── Pre-send checklist ──────────────────────────────── */
.preflight {
  padding: 0.85rem 1rem; border-radius: var(--radius);
  font-size: 0.92rem;
}
.preflight-ok {
  background: #DCEBD8; color: #1F5C2A; border: 1px solid #BBE2B8;
}
.preflight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.preflight-item {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.preflight-red    { background: #FCE3E3; color: #7A1F1F; border: 1px solid #F2BABA; }
.preflight-yellow { background: #FFF3DA; color: #6F4D00; border: 1px solid #F2DCA8; }
.preflight-green  { background: #DCEBD8; color: #1F5C2A; border: 1px solid #BBE2B8; }
.preflight-dot {
  flex: none; display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-top: 0.25rem;
}
.preflight-red .preflight-dot { background: #C74040; }
.preflight-yellow .preflight-dot { background: #C79B40; }
.preflight-green .preflight-dot { background: #2E7D32; }

/* ── Filter pill bar ─────────────────────────────────── */
.filter-bar {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filter-pill {
  display: inline-block; padding: 0.4rem 0.85rem;
  font-size: 0.85rem; font-weight: 500;
  background: var(--white);
  color: var(--text-body);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  text-transform: capitalize;
}
.filter-pill:hover { background: var(--bright-grey); text-decoration: none; }
.filter-pill.active { background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple); }

/* ── Mailbox health cards ────────────────────────────── */
.mailbox-health-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mailbox-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.88rem;
}
.mailbox-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.mailbox-card-head strong { color: var(--imi-purple); font-size: 0.95rem; word-break: break-all; }
.quota-bar {
  height: 8px; width: 100%;
  background: var(--bright-grey);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.quota-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--imi-purple), var(--studio));
  transition: width 0.3s;
}

/* Pill colors for mailbox roles */
.pill-shared { background: var(--bright-grey); color: var(--imi-purple); }
.pill-staff { background: var(--silver-sand); color: var(--dusk); }
.pill-marketing { background: linear-gradient(135deg, var(--imi-purple), var(--tapestry)); color: var(--white); }

/* ── Banners (campaign approval / auto-pause) ────────── */
.banner {
  padding: 0.85rem 1.1rem; border-radius: var(--radius);
  margin: 0.75rem 0; font-size: 0.92rem;
  border: 1px solid transparent;
}
.banner strong { display: inline-block; margin-right: 0.4rem; }
.banner-red { background: #FCE3E3; color: #7A1F1F; border-color: #F2BABA; }
.banner-yellow { background: #FFF3DA; color: #6F4D00; border-color: #F2DCA8; }
.banner-info { background: #ECEAF5; color: #3D1F5C; border: 1px solid #D4CCEC; padding: 0.7rem 0.95rem; border-radius: var(--radius); }
.banner-info a { color: #3D1F5C; font-weight: 600; }
.banner-grey { background: var(--cultured); color: var(--text-body); border-color: var(--border); }

/* ── AI paste-and-structure (composer) ───────────────── */
.ai-paste-wrap {
  background: linear-gradient(135deg, rgba(61,31,92,0.04), rgba(199,64,116,0.04));
  border: 1px solid var(--bright-grey);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.ai-paste-summary {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0;
  cursor: pointer;
  list-style: none;
}
.ai-paste-summary::-webkit-details-marker { display: none; }
.ai-paste-summary .ai-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--imi-purple), var(--tapestry));
  color: var(--white); font-weight: 700;
}
.ai-paste-summary .muted { display: block; }
.ai-paste-body { padding-top: 0.5rem; }
.ai-paste-body textarea {
  width: 100%; min-height: 140px;
  background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem;
  font: inherit; font-size: 0.92rem;
}
.ai-paste-result { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.ai-leftover {
  background: var(--cultured);
  padding: 0.6rem 0.8rem; border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; line-height: 1.5;
  white-space: pre-wrap;
  color: var(--muted);
}

/* ── Image drop target hint ──────────────────────────── */
textarea.image-drop-target {
  background: var(--bright-grey);
  border-color: var(--imi-purple);
  border-style: dashed;
}

/* ── 3-column record page (contacts / companies / deals) ── */
.record-page {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  gap: 1rem;
  align-items: start;
}

.record-left, .record-right {
  display: flex; flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.record-center {
  min-width: 0;
}

.record-identity {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.record-avatar {
  width: 64px; height: 64px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--imi-purple), var(--tapestry));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.record-name {
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
  color: var(--imi-purple);
  font-weight: 700;
}

.record-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem;
}
.record-action {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.5rem 0.2rem;
  background: transparent;
  color: var(--imi-purple);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
}
.record-action:hover { background: var(--bright-grey); }
.record-action svg { color: var(--imi-purple); }

.record-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
}
.record-section > summary {
  cursor: pointer;
  display: flex; gap: 0.5rem; align-items: baseline;
  list-style: none;
  padding: 0.25rem 0;
}
.record-section > summary::-webkit-details-marker { display: none; }
.record-section > summary strong { color: var(--imi-purple); font-size: 0.85rem; }
.record-section > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.25rem;
  color: var(--muted);
  transition: transform 0.15s;
}
.record-section[open] > summary::before { transform: rotate(90deg); }

/* Stacked property list — used in the left About panel AND in the
   Properties tab (where it grids into 2 columns). Mirrors HubSpot's
   pattern: small label above value, value can wrap freely. */
.prop-list {
  margin-top: 0.5rem;
  display: flex; flex-direction: column;
  gap: 0.55rem;
}
.prop-row { font-size: 0.85rem; }
.prop-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
  word-break: break-word;
}
.prop-row-custom .prop-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prop-value {
  color: var(--text-body);
  word-break: break-word;
  min-height: 1.2em;
  border-radius: 3px;
  padding: 0.1rem 0.25rem;
  margin: 0 -0.25rem;
}
.prop-value[data-key] {
  cursor: pointer;
  transition: background-color 0.1s;
}
.prop-value[data-key]:hover {
  background: var(--bright-grey);
  color: var(--imi-purple);
}
.prop-divider {
  height: 0;
  border-top: 1px dashed var(--border);
  margin: 0.6rem 0 0;
}
details.prop-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0 0.25rem;
  color: var(--imi-purple);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
details.prop-more > summary::-webkit-details-marker { display: none; }
details.prop-more > summary::before { content: '▸ '; color: var(--muted); }
details.prop-more[open] > summary::before { content: '▾ '; }

/* All-properties tab: 2-column grid */
.all-properties-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}
.prop-row-grid { font-size: 0.88rem; }
.prop-section-head {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--imi-purple);
}
.prop-section-head .muted { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.85em; }

/* Legacy import properties: extra-muted treatment */
.prop-row-legacy .prop-label { color: var(--silver-sand); font-weight: 500; }
.prop-row-legacy .prop-value { color: var(--muted); }
details.prop-more-legacy > summary { color: var(--muted); }
details.prop-more-legacy { margin-top: 0.4rem; opacity: 0.85; }

@media (max-width: 720px) {
  .all-properties-grid { grid-template-columns: 1fr; }
}
.inline-edit {
  width: 100%; box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--imi-purple);
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  font: inherit; font-size: 0.85rem;
  color: var(--text-body);
}

.sub-status { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0; flex-wrap: wrap; }
.pill-on { background: #DCEBD8; color: #1F5C2A; }
.pill-off { background: #FCE3E3; color: #7A1F1F; }
.pill-unknown { background: var(--silver-sand); color: var(--dusk); }

/* ── Center column: tabs + activity feed ─────────────── */
.record-tabs {
  display: flex; gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding: 0.4rem 0.4rem 0;
}
.record-tab {
  padding: 0.6rem 1rem;
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
}
.record-tab:hover { color: var(--imi-purple); }
.record-tab.active { color: var(--imi-purple); border-bottom-color: var(--imi-purple); font-weight: 600; }

.record-tab-pane {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 1rem 1.25rem;
}

.kpi-3col {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1.25rem;
}

/* ── Company detail page (KPI strip + record-page) ──── */

.kpi-6col {
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 1.5rem;
}
.kpi-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.kpi-clickable:hover {
  background: var(--white);
  border-color: var(--imi-purple);
  transform: translateY(-1px);
}
.kpi-clickable:active { transform: translateY(0); }

.kpi-sub {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 0.4rem;
  letter-spacing: 0;
}
/* For stacked KPIs (count on top, secondary metric on its own line). The
 * secondary metric uses tabular-style spacing and a softer weight so the
 * count remains the dominant number. */
.kpi-stacked { gap: 0.05rem; }
.kpi-strong-sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.kpi-warn { color: var(--tapestry, #B8425C); }

.company-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1rem 0 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.company-head-id {
  display: flex; align-items: center; gap: 0.9rem;
}
.company-head-actions {
  display: flex; gap: 0.5rem;
  align-items: center;
}
/* Compact stat grid used in the Company Overview "Relationship snapshot" block. */
.company-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem 1.25rem;
}
.company-overview-grid > div { min-width: 0; }
.company-overview-grid strong { font-size: 1.05rem; }
.company-logo {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--imi-purple), var(--tapestry));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  overflow: hidden;
}
.company-logo .company-logo-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* When the favicon loads, it sits on top of the initials and hides them.
 * If it errors (onerror removes the img), initials show through. */
.company-logo .company-favicon {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--white);
  padding: 8px;
  z-index: 2;
}
.company-head-text h1 { margin: 0; font-size: 1.4rem; }
.company-head-text p { margin: 0.15rem 0 0; }
.company-head-text a { color: var(--imi-purple); }

.dept-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.dept-chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--imi-purple);
  font-weight: 500;
}

/* Contact tile grid for the Contacts tab on a Company record */
.contact-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.contact-tile {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.08s;
}
.contact-tile:hover { border-color: var(--imi-purple); transform: translateY(-1px); }
.contact-tile-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--imi-purple), var(--tapestry));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  flex-shrink: 0;
}
.contact-tile-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.contact-tile-text strong { color: var(--imi-purple); font-size: 0.92rem; }
.contact-tile-text .muted { font-size: 0.78rem; }

@media (max-width: 1100px) {
  .kpi-6col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .kpi-6col { grid-template-columns: repeat(2, 1fr); }
  .company-head { flex-direction: column; align-items: flex-start; }
}

/* ── Deal record page extras ─────────────────────────── */

.deal-head { align-items: flex-start; }
.deal-head-actions {
  display: flex; gap: 0.4rem; align-items: center;
}
.deal-head-actions select {
  padding: 0.4rem 0.6rem; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text-body);
}

/* KPI variants for deal page (ready / pending / warn) */
.kpi.kpi-ready { border-color: #2D8659; background: #EAF6EE; }
.kpi.kpi-ready strong { color: #1F5F3F; }
.kpi.kpi-pending { border-color: var(--imi-purple); }

/* Tab badges for in-progress / ready signals on the Finance handover tab */
.tab-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  vertical-align: middle;
}
.tab-badge-ok { background: #1F5F3F; color: var(--white); }
.tab-badge-pending { background: var(--cultured); color: var(--imi-purple); border: 1px solid var(--border); }

/* Right-rail handover summary */
.handover-summary-card .rail-card-head { justify-content: space-between; }
.handover-section-pill {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.handover-section-pill:hover { background: var(--cultured); }
.handover-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.handover-pill-icon.ok { background: #1F5F3F; color: var(--white); }
.handover-pill-icon.partial { background: #E5C85A; color: #5A4A0A; }
.handover-pill-icon.empty { background: var(--cultured); color: var(--muted); border: 1px solid var(--border); }
.handover-section-pill .muted { margin-left: auto; }

.pill-ready { background: #1F5F3F; color: var(--white); border: 0; }

/* Finance handover form */
.handover-banner {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.handover-banner-ready {
  background: #EAF6EE; color: #1F5F3F;
  border: 1px solid #B5DBC1;
}
.handover-banner-pending {
  background: #FBF5E4; color: #5A4A0A;
  border: 1px solid #E8D88F;
}

.handover-form { display: flex; flex-direction: column; gap: 1.25rem; }
.handover-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.25rem;
  background: var(--white);
  /* Prevent the inner fieldset from forcing min-content width on us. */
  min-width: 0;
  overflow: hidden;
}
/* Browser-default fieldset styling resets — and crucially, reset
   min-inline-size so it doesn't push wider than its parent when an
   unbreakable child (long save-button label) is present.
   Aaron 2026-05-08: this is what was clipping "Save quotation &
   acceptance" past the section's right border. */
.handover-section fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: block;
}
.handover-section.is-ready {
  border-color: #B5DBC1;
  background: #FAFEFB;
}
.handover-section legend {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--imi-purple);
}
.handover-section.is-ready legend { color: #1F5F3F; }
.handover-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--imi-purple);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
}
.handover-section.is-ready .handover-section-num { background: #1F5F3F; }

.handover-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1rem;
  margin-top: 0.7rem;
}
.handover-field { display: flex; flex-direction: column; gap: 0.3rem; }
.handover-field-wide { grid-column: 1 / -1; }
.handover-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-body);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
}
.handover-label .req { color: var(--tapestry, #B8425C); font-weight: 700; }
.handover-hint {
  font-size: 0.75rem;
  font-weight: 400;
}
.handover-input {
  padding: 0.45rem 0.6rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-body);
}
textarea.handover-input { resize: vertical; min-height: 5em; }
.handover-input:focus {
  outline: 2px solid var(--imi-purple);
  outline-offset: -1px;
}

.radio-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.radio-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  background: var(--white);
  font-size: 0.85rem;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.radio-pill input[type=radio] { margin: 0; }
.radio-pill:hover { border-color: var(--imi-purple); }
.radio-pill.selected {
  background: var(--imi-purple);
  color: var(--white);
  border-color: var(--imi-purple);
}
.radio-pill.selected input[type=radio] { accent-color: var(--white); }

/* Per-section save UX. Aaron's brief: each section saves independently
 * rather than as one big submit, so users can edit one component without
 * disturbing others. The Save button lives in the section footer; status
 * messages render inline beside it. */
.handover-section-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.handover-section-status { margin-left: auto; }
.handover-section-msg { transition: opacity 0.2s; }
.handover-msg-ok { color: #1F5F3F; font-weight: 600; }
.handover-msg-err { color: var(--tapestry, #B8425C); font-weight: 600; }
.handover-section-save {
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  background: var(--cultured);
  border: 1px solid var(--border);
  color: var(--imi-purple);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s;
}
.handover-section-save:hover {
  background: var(--imi-purple);
  color: var(--white);
  border-color: var(--imi-purple);
}
.handover-section-save:disabled {
  opacity: 0.6; cursor: progress;
}
.handover-section.is-ready .handover-section-save {
  background: #FAFEFB;
  color: #1F5F3F;
  border-color: #B5DBC1;
}
.handover-section.is-ready .handover-section-save:hover {
  background: #1F5F3F;
  color: var(--white);
}

@media (max-width: 720px) {
  .handover-fields { grid-template-columns: 1fr; }
  .deal-head-actions { width: 100%; }
  .deal-head-actions select { flex: 1; }
}

/* ── Segment detail page ─────────────────────────────── */

/* Compact prop-row variant for rail-card summaries */
.prop-row-compact { padding: 0.35rem 0; }
.prop-row-compact .prop-label { font-size: 0.78rem; }
.prop-row-compact .prop-value { font-size: 0.85rem; }

/* Subtle info-card variant for "coming next" placeholders */
.rail-card-info {
  background: var(--cultured);
  border-style: dashed;
}
.rail-card-info .rail-card-head { color: var(--muted); }

/* Distribution bars (lifecycle / source breakdown in left rail) */
.dist-list { display: flex; flex-direction: column; gap: 0.4rem; }
.dist-row {
  display: grid;
  grid-template-columns: 1fr 100px max-content;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.dist-label {
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.dist-bar {
  height: 6px;
  background: var(--cultured);
  border-radius: 3px;
  overflow: hidden;
}
.dist-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--imi-purple), var(--tapestry));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.dist-count { font-variant-numeric: tabular-nums; }
.dist-pct { color: var(--muted); }

/* Activity histogram (last-30-day contact-action counts).
 * Bar width visualises the rate (count / eligibility), so a row with 5/10
 * visually fills the bar more than 50/200 — engagement-rate intuition,
 * not raw-volume intuition. */
.histogram { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.histogram-row {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.histogram-label { color: var(--text-body); }
.histogram-bar {
  height: 22px;
  background: var(--cultured);
  border-radius: 4px;
  overflow: hidden;
}
.histogram-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--imi-purple), var(--tapestry));
  min-width: 2px;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.histogram-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
}
.histogram-value strong { color: var(--imi-purple); line-height: 1.1; }
.histogram-value .muted { font-size: 0.7rem; }
.histogram-row-na { opacity: 0.5; }
.histogram-row-na .histogram-bar { background: repeating-linear-gradient(45deg, var(--cultured), var(--cultured) 4px, var(--white) 4px, var(--white) 8px); }

/* Funnel-style histogram (campaign engagement composition).
 * Negative outcomes render in a tapestry/red gradient so 'bounced' and
 * 'unsubscribed' are visually distinct from positive engagement events. */
.histogram-funnel .histogram-row { padding: 0.1rem 0; }
.histogram-bar-fill-neg { background: linear-gradient(90deg, #B8425C, #7A1F1F); }
.histogram-row-neg .histogram-value strong { color: #B8425C; }

@media (max-width: 720px) {
  .histogram-row { grid-template-columns: 130px 1fr 90px; font-size: 0.82rem; }
}

/* Pill variants for segment kind */
.pill-static { background: #E8E1F4; color: var(--imi-purple); }
.pill-dynamic { background: #FBE9E1; color: var(--tapestry, #B8425C); }
.pill-mini { font-size: 0.65rem; padding: 0.05rem 0.35rem; vertical-align: middle; }

/* Contact segments rail card — aggregate strip + per-segment rows */
.seg-aggregate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--cultured);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
}
.seg-agg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.05rem;
}
.seg-agg-cell strong {
  color: var(--imi-purple);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
}
.seg-agg-cell .muted { font-size: 0.7rem; }

.seg-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.seg-row:last-child { border-bottom: 0; }
.seg-row-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
}
.seg-row-name strong {
  color: var(--imi-purple);
  font-size: 0.88rem;
  font-weight: 600;
}
.seg-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.78rem;
}
.seg-row-last {
  font-size: 0.72rem;
  color: var(--muted);
}

.activity-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 1rem 0 0.6rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.activity-actions { display: flex; gap: 0.4rem; }
.activity-actions input[type="search"] {
  padding: 0.35rem 0.6rem; font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text-body);
}
.activity-actions select {
  padding: 0.35rem 0.6rem; font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text-body);
}

.act-month { margin-bottom: 1rem; }
.act-month-label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.act-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.act-item:last-child { border-bottom: 0; }
.act-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bright-grey);
  color: var(--imi-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
}
.act-email .act-icon { background: #DCE8F8; color: var(--deep-blue); }
.act-note .act-icon { background: var(--bright-grey); color: var(--imi-purple); }
.act-task .act-icon { background: #FFF3DA; color: #6F4D00; }
.act-call .act-icon { background: #DCEBD8; color: #1F5C2A; }
.act-meeting .act-icon { background: #FCE3D6; color: #8C3A00; }
.act-stage_change .act-icon { background: var(--imi-purple); color: var(--white); }

.act-body { min-width: 0; }
.act-head {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}
.act-head strong { color: var(--imi-purple); }
.act-when { margin-left: auto; }
.act-preview {
  color: var(--text-body);
  white-space: pre-wrap;
  line-height: 1.45;
}
.act-full { display: none; white-space: pre-wrap; line-height: 1.45; margin-top: 0.4rem; }
.act-item.expanded .act-preview { display: none; }
.act-item.expanded .act-full { display: block; }
.act-expand {
  background: transparent;
  border: 0; padding: 0.15rem 0;
  color: var(--imi-purple);
  cursor: pointer;
  font: inherit; font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* ── Right rail association cards ────────────────────── */
.rail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.rail-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.45rem;
}
.rail-card-head strong { color: var(--imi-purple); font-size: 0.85rem; }
.rail-card-body { font-size: 0.88rem; }
.assoc-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.assoc-item:last-child { border-bottom: 0; }

/* ── Mobile: single column with collapsed rails ──────── */
@media (max-width: 1100px) {
  .record-page { grid-template-columns: 280px 1fr; }
  .record-right { order: 3; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .record-right .rail-card { flex: 1 1 280px; }
}
@media (max-width: 720px) {
  .record-page { grid-template-columns: 1fr; }
  .record-actions { grid-template-columns: repeat(5, 1fr); }
  .record-right { flex-direction: column; }
  .record-tabs { padding: 0.4rem 0.4rem 0; overflow-x: auto; }
  .kpi-3col { grid-template-columns: 1fr; }
}

/* ── Agent chat panel ────────────────────────────────── */
#chat-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 56px; height: 56px;
  border: none; border-radius: 50%;
  background: var(--imi-purple); color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
#chat-toggle:hover { transform: scale(1.05); background: #2D1745; }
#chat-toggle svg { width: 24px; height: 24px; }

#chat-panel {
  position: fixed; right: 0; bottom: 0; top: var(--topbar-height);
  width: 380px; max-width: 100vw;
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 95;
  transform: translateX(100%);
  transition: transform 0.2s ease-out;
  display: flex; flex-direction: column;
}
#chat-panel.open { transform: translateX(0); }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--cultured);
}
.chat-log {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.chat-msg {
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  max-width: 85%;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.4;
}
.chat-user {
  align-self: flex-end;
  background: var(--imi-purple); color: var(--white);
  border-bottom-right-radius: 4px;
}
.chat-agent {
  align-self: flex-start;
  background: var(--bright-grey); color: var(--text-body);
  border-bottom-left-radius: 4px;
}
.chat-thinking {
  align-self: flex-start;
  background: var(--cultured); color: var(--muted);
  font-style: italic;
}
.chat-system {
  align-self: center; max-width: 90%; text-align: center;
  background: transparent;
  border: 1px dashed var(--border);
}
.chat-tools {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(61, 31, 92, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.chat-form {
  display: flex; gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.chat-form input {
  flex: 1;
  background: var(--white); color: var(--text-body);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  font: inherit; font-size: 16px;
  min-height: var(--tap-target);
  margin: 0;
}
.chat-form input:focus { outline: none; border-color: var(--imi-purple); }
.chat-form button { margin: 0; flex: none; padding: 0.6rem 1.1rem; }

/* ── Login page ───────────────────────────────────────── */
.login-page {
  display: grid; place-items: center; min-height: 100vh;
  padding: 1rem;
  background: var(--imi-purple);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: ""; position: absolute; right: -12vw; top: 0; bottom: 0; width: 60vw;
  background: radial-gradient(ellipse at left center, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}
.login-card {
  background: var(--white);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: left;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
.login-card .brand { margin-bottom: 1.25rem; }
.login-card h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem; font-weight: 800;
  color: var(--imi-purple);
  letter-spacing: -0.01em;
}
.login-card p.muted { color: var(--muted); margin-top: 0; }
.login-card .btn-primary {
  display: block; width: 100%; text-align: center;
  margin: 1.25rem 0 0.75rem 0;
  padding: 0.85rem 1.4rem;
  background: var(--imi-purple);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
  min-height: var(--tap-target);
}
.login-card .btn-primary:hover { background: #2D1745; text-decoration: none; }

/* Mobile chat panel = full-screen */
@media (max-width: 720px) {
  #chat-panel { width: 100vw; left: 0; right: 0; top: 0; }
  #chat-toggle { right: 0.85rem; bottom: 0.85rem; width: 52px; height: 52px; }
}

/* ──────────────────────────────────────────────────────
   Mobile (≤ 720px): hide sidebar by default, drawer on tap.
   ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .shell {
    grid-template-columns: 1fr;
    position: relative;
  }
  .sidebar {
    position: fixed; top: var(--topbar-height); left: 0; bottom: 0;
    width: 280px; max-width: 80vw;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: var(--shadow-lg);
  }
  .shell.menu-open .sidebar { transform: translateX(0); }
  .content { padding: 1rem 0.85rem 2rem; }
  .brand-name { display: none; }
  .brand-divider { display: none; }
  .user { font-size: 0.75rem; max-width: 35vw; }

  /* Tables → card stack */
  table.grid, table.grid thead, table.grid tbody, table.grid tr, table.grid th, table.grid td {
    display: block;
  }
  table.grid { box-shadow: none; background: transparent; }
  table.grid thead { display: none; }
  table.grid tr {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
    padding: 0.5rem 0;
    box-shadow: var(--shadow-sm);
  }
  table.grid tr:hover td { background: transparent; }
  table.grid td {
    border: 0; padding: 0.35rem 0.95rem;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.75rem;
  }
  table.grid td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  table.grid td:first-child {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem; margin-bottom: 0.25rem;
  }
  table.grid td:first-child::before { display: none; }
  table.grid td:first-child { font-weight: 600; color: var(--imi-purple); }
}

/* Wider phones / small tablets keep sidebar visible inline */
@media (min-width: 721px) {
  .hamburger { display: none; }
  .scrim { display: none !important; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .topbar { padding: 0.85rem 1.5rem; }
  .content { padding: 2rem 2.5rem; }
  .kanban-column { flex: 0 0 240px; max-width: 280px; }
  .login-card { padding: 3rem 2.5rem 2.5rem; }
  .login-card h1 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ── Block library catalogue ─────────────────────────── */
.block-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
  padding: 0.6rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.block-filter-bar input[type="search"],
.block-filter-bar select {
  padding: 0.4rem 0.6rem;
  font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-body);
}
.block-filter-bar input[type="search"] { flex: 1 1 240px; min-width: 200px; }

.block-section-head {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.6rem;
  color: var(--imi-purple);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.block-section-head:first-of-type { margin-top: 0.5rem; }

.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}
.block-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.08s;
}
.block-card:hover { border-color: var(--imi-purple); transform: translateY(-1px); }
.block-card-head { display: flex; align-items: center; gap: 0.4rem; }
.block-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--cultured);
  color: var(--imi-purple);
  font-size: 0.85rem; font-weight: 700;
  flex-shrink: 0;
}
.block-card-slug {
  color: var(--imi-purple);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.block-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.block-card-preview {
  font-size: 0.78rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pill-intent { background: #E8E1F4; color: var(--imi-purple); }
.pill-brand-imi    { background: #ECEAF5; color: #3D1F5C; }
.pill-brand-fti    { background: #FBE4EE; color: #B8425C; }
.pill-brand-shared { background: #E5F2EE; color: #1F5F3F; }

.block-template-source {
  background: #1A1428;
  color: #EDE9F2;
  padding: 1rem;
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* Library detail: rendered preview + form-style slot samples (Aaron 2026-05-07). */
.block-preview-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 220px;
  display: flex;
}
.block-preview-frame .preview-iframe {
  width: 100%;
  min-height: 220px;
  border: 0;
  background: #f5f4f9;
}
.block-preview-empty {
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.slot-sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.slot-sample-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.slot-sample-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.slot-sample-key code {
  background: var(--cultured);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.75rem;
}
.slot-sample-hint {
  margin: 0;
}
.slot-sample-card input,
.slot-sample-card textarea {
  font: inherit;
  font-size: 14px;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafafd;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.slot-sample-card textarea {
  resize: vertical;
  min-height: 64px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.pill-required { background: #FBE4EE; color: #B8425C; }
.pill-type     { background: var(--cultured); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }

/* ── Image slot (drop / upload / library / URL) — Aaron 2026-05-07 ─── */
.ee-image-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
.ee-image-slot-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--cultured);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.ee-image-slot-drop:hover { border-color: var(--imi-purple); }
.ee-image-slot-drop.dragover {
  border-color: var(--imi-purple);
  background: #EFEAF8;
  border-style: solid;
}
.ee-image-slot-drop.uploading::after {
  content: 'Uploading…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  color: var(--imi-purple);
  font-weight: 600;
}
.ee-image-slot-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  height: auto;
  width: auto;
  object-fit: contain;
}
.ee-image-slot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.ee-image-slot-placeholder span:first-child { font-size: 1.6rem; }
.ee-image-slot-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ee-image-slot-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

/* Image library picker modal */
.image-lib-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 20, 40, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 2rem;
}
.image-lib-modal {
  background: var(--white);
  border-radius: 10px;
  width: min(900px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.image-lib-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.image-lib-head .image-lib-close { margin-left: auto; }
.image-lib-body {
  padding: 1rem 1.1rem;
  overflow-y: auto;
}
.image-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.image-lib-tile {
  appearance: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.image-lib-tile:hover { border-color: var(--imi-purple); box-shadow: var(--shadow-sm); }
.image-lib-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cultured);
  display: block;
}
.image-lib-tile-wrap {
  position: relative;
}
.image-lib-tile-wrap .image-lib-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(26, 20, 40, 0.7);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.image-lib-tile-wrap:hover .image-lib-delete,
.image-lib-tile-wrap:focus-within .image-lib-delete { opacity: 1; }
.image-lib-tile-wrap .image-lib-delete:hover { background: #B8425C; }
.image-lib-tile-meta {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-top: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

.block-library-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.block-library-footer code {
  background: var(--cultured);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ── Email list (Stage B) ─────────────────────────────── */

.email-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.7rem;
}
.email-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
}
.email-card:hover {
  border-color: var(--imi-purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(75, 36, 153, 0.08);
}
.email-card-head { display: flex; align-items: flex-start; gap: 0.4rem; flex-wrap: wrap; }
.email-card-name {
  color: var(--imi-purple); font-size: 0.95rem;
  flex: 1; min-width: 0;
  /* Wrap rather than collide with the action row */
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.email-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.email-card-subject {
  margin-top: 0.2rem;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.email-card-foot {
  display: flex; gap: 0.4rem; margin-top: auto; flex-wrap: wrap;
  padding-top: 0.4rem;
}
.email-card-actions {
  /* Bottom row, always present so it never overlaps the title. Subtle until hover. */
  display: flex; gap: 0.3rem; justify-content: flex-end;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  opacity: 0.55;
  transition: opacity 0.12s;
}
.email-card:hover .email-card-actions,
.email-card:focus-within .email-card-actions { opacity: 1; }
.email-card-action {
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
}
.email-card-action:hover { background: var(--white); border-color: var(--imi-purple); color: var(--imi-purple); }
.email-card-action.is-danger:hover { border-color: #b3261e; color: #b3261e; }

.pill-draft    { background: #FBF5E4; color: #5A4A0A; }
.pill-ready    { background: #EAF6EE; color: #1F5F3F; }
.pill-archived { background: #EDEDED; color: #666; }

/* ── Email editor: 3-pane block composer ────────────── */

.email-editor-head {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.email-editor-meta { display: flex; flex-direction: column; gap: 0.5rem; }
.email-editor-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--imi-purple);
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem 0.4rem;
  margin: -0.2rem -0.4rem;
  border-radius: var(--radius);
  font-family: inherit;
  width: 100%;
}
.email-editor-name:hover, .email-editor-name:focus {
  border-color: var(--border);
  background: var(--cultured);
  outline: none;
}
.email-editor-sub { display: flex; flex-direction: column; gap: 0.4rem; }
.email-editor-sub input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-body);
}
.email-editor-pills {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.85rem;
}
.email-editor-pills select {
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.email-editor-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 1rem;
  height: calc(100vh - 280px);
  min-height: 600px;
}

.email-editor-left, .email-editor-right {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  overflow-y: auto;
}

.email-editor-center {
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ee-preview-toolbar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.ee-mode {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.ee-mode.active { background: var(--imi-purple); color: var(--white); }
.ee-preview-frame {
  flex: 1;
  overflow: auto;
  position: relative;
  padding: 1rem;
}
.ee-preview-frame.preview-mobile iframe {
  max-width: 380px;
  margin: 0 auto;
  display: block;
}
/* Tablet preview: constrain to ~600px — sits below the 640px desktop
   max-width so the tablet @media block (481-640px) inside the iframe
   triggers, surfacing the modest tablet scaling. Aaron 2026-05-10. */
.ee-preview-frame.preview-tablet iframe {
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

/* Tree (left rail) */
.ee-tree-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.ee-insert-palette {
  background: var(--cultured);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem;
  margin-bottom: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
}
.ee-palette-section { margin-top: 0.5rem; }
.ee-palette-section:first-child { margin-top: 0; }
.ee-palette-section-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.ee-palette-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.25rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 0.3rem;
}
.ee-palette-item:hover { border-color: var(--imi-purple); }
.ee-palette-item strong { color: var(--imi-purple); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; }

.ee-tree { display: flex; flex-direction: column; gap: 0.25rem; }
.ee-tree-node {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ee-tree-node:hover { border-color: var(--imi-purple); }
.ee-tree-node.selected {
  background: #F2EFF8;
  border-color: var(--imi-purple);
}
.ee-tree-node.ee-dragging { opacity: 0.4; }
.ee-tree-node.ee-drop-target {
  border-color: var(--imi-purple);
  border-style: dashed;
}
.ee-tree-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cultured); border-radius: 4px;
  color: var(--imi-purple);
  font-weight: 700; font-size: 0.78rem;
  flex-shrink: 0;
}
.ee-tree-label { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 0.82rem; }
.ee-tree-label strong { color: var(--imi-purple); }
.ee-tree-label .muted { font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-tree-delete {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); padding: 0.15rem 0.35rem;
  font-size: 0.85rem; border-radius: 4px;
  flex-shrink: 0;
}
.ee-tree-delete:hover { color: var(--tapestry, #B8425C); background: #FBE9E1; }

/* Edit panel (right rail) */
.ee-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.6rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.ee-panel-head strong { color: var(--imi-purple); font-size: 0.95rem; }
.ee-panel-section {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--imi-purple);
  margin: 1rem 0 0.4rem;
}
.ee-panel-section:first-of-type { margin-top: 0.2rem; }
.ee-slot-form, .ee-inline-form { display: flex; flex-direction: column; gap: 0.7rem; }
.ee-field-hint {
  display: block;
  margin-top: -0.15rem;  /* tuck under the uppercase label */
  margin-bottom: 0.2rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
}
/* ── Preset swatch picker (Aaron 2026-05-10) ─────────────
   Visual color picker for bg_preset and button_preset slots.
   Replaces the old names-only dropdown so authors see the actual
   palette tone / CTA treatment. The hidden <input> behind the grid
   keeps the existing data-slot save pipeline working unchanged. */
.preset-swatch-grid {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.preset-swatch-grid-bg     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preset-swatch-grid-button { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset-swatch {
  position: relative;
  display: flex; align-items: stretch; justify-content: stretch;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
  min-height: 44px;
}
.preset-swatch:hover    { border-color: var(--bright-grey); }
.preset-swatch:focus-visible {
  outline: none;
  border-color: var(--imi-purple);
  box-shadow: 0 0 0 2px rgba(75, 36, 153, 0.25);
}
/* Selection — Material focus-ring pattern: a visible ring around the
   tile is enough; no overlay glyph needed. The previous ✓ in the corner
   collided with short labels like "White" / "Pink" / "Link". The 4px
   purple ring (2px border + 2px box-shadow) reads cleanly as "selected"
   against any panel bg, light or dark, and stays within the grid's
   0.4rem gap so it doesn't bleed into neighboring tiles.
   Aaron 2026-05-10. */
.preset-swatch.is-active {
  border-color: var(--imi-purple);
  box-shadow:
    0 0 0 2px var(--imi-purple),
    0 2px 6px rgba(75, 36, 153, 0.18);
}

/* Bg-preset tile: full-bleed colored fill with the preset name overlaid. */
.preset-swatch-fill {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 38px;
  padding: 0.45rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  /* Subtle inset shadow stops near-white tiles from disappearing into
     the panel bg. */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  text-transform: capitalize;
}
.preset-swatch-clear .preset-swatch-fill {
  font-style: italic;
  font-weight: 500;
}

/* Button-preset tile: render a tiny mock CTA so the operator sees the
   actual button treatment (bg, fg, border, shape). */
.preset-swatch-btn { padding: 4px; }
.preset-swatch-mock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 0.4rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  /* Inset shadow for outline / ghost / link variants where the bg may
     match the panel surface — keeps the swatch outline visible. */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Compact variant for the email editor head — used by ee-body-bg-host.
   Single horizontal row of small swatches that fit alongside the brand
   dropdown. */
.ee-body-bg-host {
  display: inline-flex;
  align-items: center;
}
.ee-body-bg-host .field {
  display: flex; flex-direction: row; align-items: center; gap: 0.4rem;
  margin: 0;
}
.ee-body-bg-host .field > span:first-child {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ee-body-bg-host .preset-swatch-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0;
}
.ee-body-bg-host .preset-swatch {
  min-height: 28px;
  padding: 1px;
}
.ee-body-bg-host .preset-swatch-fill {
  min-height: 22px;
  padding: 0.2rem 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

/* On phones, the head wraps to a new line — give the swatches a bit of
   breathing room then. */
@media (max-width: 720px) {
  .ee-body-bg-host {
    width: 100%;
    margin-top: 0.25rem;
  }
  .ee-body-bg-host .preset-swatch-grid {
    flex: 1 1 auto;
  }
}

.ee-panel-advanced { margin-top: 1rem; }
.ee-override-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.ee-override-toggle { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; min-width: 140px; }
.ee-override-row input[type="text"] {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ee-panel-foot {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

/* Conditional-block chip in the tree */
.ee-cond-chip {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  background: #FBF5E4;
  color: #5A4A0A;
  border: 1px solid #E8D88F;
  border-radius: 4px;
  vertical-align: middle;
}

/* "Show when" conditions builder */
.ee-conditions { display: flex; flex-direction: column; gap: 0.7rem; }
.cond-multiselect { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cond-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  background: var(--white);
  font-size: 0.78rem;
  user-select: none;
}
.cond-pill input[type="checkbox"] { margin: 0; }
.cond-pill:hover { border-color: var(--imi-purple); }
.cond-pill.selected {
  background: var(--imi-purple);
  color: var(--white);
  border-color: var(--imi-purple);
}

/* Variable picker — button next to field labels */
.ee-var-picker-btn {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  background: var(--cultured);
  color: var(--imi-purple);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}
.ee-var-picker-btn:hover { background: var(--imi-purple); color: var(--white); border-color: var(--imi-purple); }

/* Variable picker modal — grouped list */
.ee-var-group-head {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--imi-purple);
  margin: 1rem 0 0.4rem;
}
.ee-var-group-head:first-child { margin-top: 0.3rem; }
.ee-var-list { display: flex; flex-direction: column; gap: 0.25rem; }
.ee-var-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.6rem;
  align-items: center;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  transition: border-color 0.12s;
}
.ee-var-item:hover { border-color: var(--imi-purple); }
.ee-var-item code {
  background: var(--cultured);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--imi-purple);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ee-var-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.ee-var-meta strong { font-weight: 600; font-size: 0.85rem; }
.ee-var-meta .muted { font-size: 0.72rem; }

@media (max-width: 1100px) {
  .email-editor-grid { grid-template-columns: 240px 1fr 280px; height: auto; min-height: 0; }
  .email-editor-left, .email-editor-right { max-height: 600px; }
}
@media (max-width: 720px) {
  .email-editor-grid { grid-template-columns: 1fr; }
  .email-editor-left, .email-editor-right, .email-editor-center { max-height: none; }
  .email-editor-center { min-height: 400px; }
  .ee-var-item { grid-template-columns: 1fr; }
}

/* ============================================================
   ── Responsive — first principles (Aaron 2026-05-08) ──
   ============================================================
   Aaron's brief: "Responsive is a first principle. No failures."

   Standard breakpoints (this section is the source of truth — earlier
   page-specific breakpoints stay in place where they're tighter):
     >= 1280px   Desktop      — full 3-column record pages
     <= 1279px   Large tablet — 3-col record page collapses to 1-col with
                                rails wrapping as flex rows
     <=  960px   Small tablet — 2-col layouts collapse to 1-col
     <=  720px   Phone        — full collapse, hamburger menu, all forms
                                stack, KPI strip = 2-col
     <=  480px   Small phone  — extra padding compression
   ============================================================ */

/* ── Universal: long-text wrapping ─────────────────────
   Email addresses, URLs, deal names, etc. should wrap at any character
   if no whitespace breakpoint exists, rather than overflow. */
.prop-value,
.rail-card-body,
.contact-tile-text strong,
.contact-tile-text .muted,
.activity-actor,
.activity-comment-body,
.activity-thread-msg-body,
.linked-thread-msg-body,
.kpi span.muted,
.message-body,
.message-body-html {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Single-line cells that should truncate, not wrap (override above). */
.thread-subject,
.ticket-outcome-line,
.dropdown-label,
.record-picker-label,
.rail-related-subject,
.rail-mailbox-addr,
.template-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

/* ── Tabs: never wrap awkwardly ──
   Horizontal scroll is the right pattern when tabs exceed available
   width — better than stacking individual tab labels onto two lines. */
.record-tabs,
.settings-tabs,
.ticket-activity-filters,
.source-tabs,
.filter-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.record-tab,
.settings-tab,
.ticket-activity-filter,
.source-tab,
.filter-pill,
.ticket-count {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Hide native scrollbar chrome on the tab strips — small aesthetic win
   that doesn't sacrifice keyboard scroll. */
.record-tabs::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar,
.ticket-activity-filters::-webkit-scrollbar { height: 0; }

/* ── Header rows wrap before they overflow ──
   page-head, company-head, detail-head, deal-head all carry inline action
   buttons that should wrap to a new row rather than push the title off. */
.page-head,
.detail-head,
.company-head,
.deal-head,
.detail-actions,
.thread-detail-actions,
.ticket-composer-actions,
.deal-head-actions,
.handover-head {
  flex-wrap: wrap;
  min-width: 0;
}

/* ── Record page (3-col → 1-col) ──
   The center is wide enough that 2-col only really works above ~1280px.
   Below that, collapse fully and let left + right rails reflow as
   wrapping flex rows of panels. */
@media (max-width: 1279px) {
  .record-page {
    grid-template-columns: 1fr;
  }
  .record-left,
  .record-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .record-left > *,
  .record-right > * {
    flex: 1 1 280px;
    min-width: 0;
  }
  .record-left { order: 1; }
  .record-center { order: 2; }
  .record-right { order: 3; }
}

/* ── KPI strips: graceful auto-fit ──
   The previous 6-col → 3-col → 2-col cascade left awkward in-betweens
   (cards crushed at 860–1100px). Replace with a single auto-fit rule
   that reflows naturally based on available width. */
.kpi-6col {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 720px) {
  .kpi-6col,
  .kpi-grid,
  .ticket-counts {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }
  .kpi-3col { grid-template-columns: 1fr; }
  .kpi { padding: 0.7rem 0.85rem; }
  .kpi strong { font-size: 1.2rem; }
}

/* ── Forms: 2-col fields collapse to 1-col on phone ── */
@media (max-width: 720px) {
  .ticket-form-row,
  .ticket-state-controls,
  .ticket-linked-records,
  .handover-fields,
  .compose-pane,
  .channels-grid,
  .contact-tile-grid,
  .block-grid,
  .email-grid,
  .template-grid,
  .source-pane .template-grid,
  .slot-sample-grid,
  .ticket-form-row {
    grid-template-columns: 1fr !important;
  }
  /* Header titles smaller on phone — leaves room for actions. */
  .detail-head h1,
  .company-head-text h1,
  .record-name {
    font-size: 1.2rem;
    line-height: 1.25;
  }
  .page-head h1 { font-size: 1.4rem; }
  .ticket-detail-headline {
    gap: 0.4rem;
    font-size: 0.78rem;
  }
  /* Tighter content padding so cards have more inner room. */
  .content { padding: 1rem 0.75rem 2rem; }
  /* Modal fits viewport. */
  .modal { max-width: calc(100vw - 1rem); }
  .modal-overlay { padding: 0.5rem; }
}

/* ── Tables on phone — keep the data-label card-mode pattern usable.
   `.grid` already toggles to per-row stacked cards under the existing
   media rules elsewhere; we just tighten spacing here. */
@media (max-width: 720px) {
  .table-wrap { overflow-x: auto; }
  table.grid { font-size: 0.88rem; }
}

/* ── Inbox three-pane reaffirmed at 960 + 720 ──
   Already collapses to single-pane at 960; verify the rail's mailbox
   list doesn't blow horizontally. */
@media (max-width: 720px) {
  .inbox-list-toolbar { flex-wrap: wrap; }
  .inbox-list-toolbar input { flex: 1 1 100%; }
  .thread-detail-head { padding: 0.6rem 0.85rem; }
  .thread-detail-actions select,
  .thread-detail-actions .btn-link { font-size: 0.78rem; padding: 0.3rem 0.55rem; }
}

/* ── Settings tabs / channels grid ── */
@media (max-width: 720px) {
  .settings-form .field input,
  .settings-form .field select { font-size: 16px; }
  .channel-card-actions { flex-wrap: wrap; }
}

/* ── Compose wizard: cramped below ~900px without the existing rule.
   The existing rule is at 720px — bump to 960 so tablet portrait reads
   sensibly. */
@media (max-width: 960px) {
  .compose-pane { grid-template-columns: 1fr; }
  .compose-preview { min-height: 400px; }
}

/* ── Small phone (<=480px) — extra compression ── */
@media (max-width: 480px) {
  .kpi { padding: 0.55rem 0.7rem; }
  .kpi strong { font-size: 1.05rem; }
  .ticket-state-panel { padding: 0.75rem 0.85rem; }
  .ticket-state-controls { gap: 0.6rem; }
  .modal-actions { flex-wrap: wrap; gap: 0.4rem; }
  .deploy-banner {
    left: 0.5rem;
    right: 0.5rem;
    transform: none;
    max-width: none;
  }
  /* Sidebar groups: smaller labels save vertical space. */
  .sidebar-group-label { font-size: 0.62rem; padding: 0.2rem 0.85rem 0.1rem; }
  /* Tab strip horizontal scroll inherits — no further work. */
}

/* ── Inputs on phone: prevent iOS auto-zoom (font-size <16px triggers it) ── */
@media (max-width: 720px) {
  .field input,
  .field textarea,
  .field select,
  .ticket-state-outcome,
  .ticket-composer textarea,
  .reason-popover-form input,
  .reason-popover-form textarea,
  .record-picker-search,
  .dropdown-trigger {
    font-size: 16px;
  }
}

/* ── Tablet packing: tighter rail-card min so we get 2-up where the
   space allows, instead of always stacking at 1-up. (Aaron 2026-05-08
   noted "opportunities to optimize still" — this is the main one.) */
@media (min-width: 721px) and (max-width: 1279px) {
  .record-left > *,
  .record-right > * { flex: 1 1 240px; }
}

/* ── Phone-friendly tap targets: action buttons go full-width ──
   Long-label buttons especially — much easier to tap, and they line up
   with the form fields above. */
@media (max-width: 720px) {
  .handover-section-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .handover-section-save {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
  }
  .handover-section-msg { flex: 1 1 100%; }

  /* Modal primary actions full-width */
  .modal-actions { flex-wrap: wrap; gap: 0.5rem; }
  .modal-actions .btn-primary,
  .modal-actions button[type="submit"] { width: 100%; order: -1; }
  .modal-actions .btn-link { width: 100%; }

  /* Reason-popover confirm: full-width on phone for tap consistency */
  .reason-popover-actions { flex-wrap: wrap; }
  .reason-popover-actions .btn-primary { flex: 1 1 100%; order: -1; }

  /* Generic detail-actions row */
  .detail-actions {
    flex-wrap: wrap;
  }
  .detail-actions .btn-primary { flex: 1 1 100%; }
}