/* ============================================================
   Stratokraft — "Dispatch" design system
   Warm oat paper, near-black ink, hairline rules, one burnt-orange
   accent reserved for the single irreversible action per screen.
   Radius: 0 everywhere. No shadows, no gradients.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}

:root {
  /* Dispatch tokens */
  --d-ink: #17150f;
  --d-paper: #fffefb;
  --d-oat: #f4f1ea;
  --d-oat-deep: #f0ebdd;
  --d-parchment: #faf7f0;
  --d-stroke: #c4bcab;
  --d-stroke-light: #ddd7c9;
  --d-muted: #8b857a;
  --d-body-muted: #57534a;
  --d-faint: #a19a8d;
  --d-orange: #cc4b12;
  --d-orange-deep: #a8341f;
  --d-orange-wash: #f7e2d5;
  --d-green: #4a6b3f;
  --d-amber: #b3801a;

  /* Spacing scale */
  --sp-2: 2px; --sp-3: 3px; --sp-5: 5px; --sp-7: 7px; --sp-8: 8px;
  --sp-9: 9px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px;
  --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-26: 26px;

  /* Legacy token names, remapped to Dispatch neutrals so every page —
     including ones not yet migrated screen-by-screen — drops the old
     teal/gold branding immediately. Orange is intentionally NOT wired
     into these broad-use tokens (links/icons/hovers); it is only ever
     applied explicitly, to keep the "one orange action per screen" rule. */
  --bg: var(--d-paper);
  --ink: var(--d-ink);
  --muted: var(--d-muted);
  --line: var(--d-stroke);
  --panel: var(--d-paper);
  --accent: var(--d-ink);
  --accent-dark: var(--d-ink);
  --accent-soft: var(--d-oat-deep);
  --gold: var(--d-amber);
  --green: var(--d-green);
  --warn: var(--d-orange-deep);
  --success: var(--d-green);
  --success-soft: var(--d-oat);
  --success-border: var(--d-stroke);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--d-paper);
  color: var(--d-ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-wrap: pretty;
}

table, .headline-metric, .secondary-metric, [data-numeric] {
  font-variant-numeric: tabular-nums;
}

*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

a {
  color: var(--d-orange-deep);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor;
  transform: translateY(1px);
}

.title-icon {
  flex: 0 0 auto;
  width: 32px !important;
  height: 32px !important;
  padding: 7px;
  color: var(--d-ink);
  fill: currentColor;
  background: var(--d-oat-deep);
  border: 1px solid var(--d-stroke);
}

/* ── App shell: fixed ink sidebar + content column ─────────────────── */

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 212px;
  display: flex;
  flex-direction: column;
  background: var(--d-ink);
  padding: 20px 0 16px;
  overflow-y: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 24px;
  color: var(--d-oat);
  text-decoration: none;
}

.brand-logo {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: contain;
}

.brand-wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--d-oat);
}

.sidebar-groups {
  flex: 1 1 auto;
}

.sidebar-group {
  padding: 16px 0;
}

.sidebar-group + .sidebar-group {
  border-top: 1px dashed rgba(244, 241, 234, 0.22);
}

.sidebar-group-label {
  padding: 0 18px 9px 15px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.38);
}

nav[aria-label="Primary navigation"] {
  display: flex;
  flex-direction: column;
}

nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 15px;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: rgba(244, 241, 234, 0.68);
  text-decoration: none;
  font-weight: 400;
}

nav a .icon { width: 15px !important; height: 15px !important; }

nav a .nav-count {
  margin-left: auto;
  font-size: 12px;
  color: rgba(244, 241, 234, 0.55);
}

nav a .nav-count.is-actionable { color: var(--d-orange); }

nav a:hover {
  color: #fffefb;
  background: rgba(244, 241, 234, 0.06);
}

nav a.active {
  border-left-color: var(--d-orange);
  background: rgba(204, 75, 18, 0.14);
  color: #fffefb;
  font-weight: 500;
}

.sidebar-footer {
  padding: 14px 18px 0 15px;
  border-top: 1px dashed rgba(244, 241, 234, 0.22);
  margin-top: 8px;
}

.sidebar-footer a {
  display: block;
  padding: 0 0 8px;
  border-left: 0;
  font-size: 13px;
  color: rgba(244, 241, 234, 0.68);
  text-decoration: none;
}

.sidebar-footer a:hover { color: #fffefb; background: none; }

.sidebar-status {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(244, 241, 234, 0.5);
}

.page {
  margin-left: 212px;
  min-height: 100vh;
  background: var(--d-paper);
  padding: 0;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 26px 14px;
}

.page-eyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.page-header h1 {
  margin: 0;
  font-size: 27px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-kpi {
  text-align: right;
}

.page-kpi-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-bottom: 2px;
}

.page-kpi-value {
  font-size: 22px;
  font-weight: 600;
}

.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Keep the cluster flush right even if a page's header uses a grid track
     wider than the buttons themselves. */
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
}

.page-body {
  padding: 0 26px 26px;
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--d-ink);
  background: var(--d-parchment);
  padding: 12px 26px;
  font-size: 12px;
  color: var(--d-body-muted);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 14px;
  margin-bottom: 30px;
}

.section-head > div {
  display: contents;
}

.section-head > :not(div) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}

.page-primary-action {
  box-shadow: 0 8px 18px rgba(23, 107, 135, 0.14);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.section-stack {
  display: grid;
  gap: 10px;
}

.breadcrumbs,
.stage-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}

.breadcrumbs {
  justify-content: flex-start;
  color: var(--d-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs-item:not(:last-child)::after {
  content: "/";
  color: var(--d-stroke);
}

.breadcrumbs a,
.breadcrumbs span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs a {
  color: var(--d-orange-deep);
  text-decoration: none;
}

.breadcrumbs span[aria-current="page"] {
  color: var(--d-muted);
}

.stage-nav {
  margin-top: -8px;
}

h1, h2 {
  margin: 0 0 8px;
  line-height: 1.2;
}

h1 {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

p {
  color: var(--muted);
}

.page-subtitle,
.section-lead {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
}

.page-chip-row,
.section-meta,
.section-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.page-chip,
.section-meta li,
.section-tags li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  color: #415168;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}

.page-chip code,
.section-tags code {
  padding: 2px 6px;
  color: #0f4b64;
  background: #eef7fb;
  border: 1px solid #c8dcea;
  border-radius: 6px;
  font-size: 0.92em;
}

.notice {
  margin-bottom: 20px;
  padding: 14px 16px;
  color: var(--d-ink);
  background: var(--d-oat);
  border: 1px solid var(--d-stroke);
  border-left: 3px solid var(--d-ink);
}

/* Flash confirmation as an overlay: fixed above the content so acting on a
   row (classifying a reply, saving a form) doesn't reflow the page.
   Scoped to .notice-toast — plain .notice stays an inline banner. */
.notice-toast {
  position: fixed;
  /* Bottom-centred: the top edge is occupied by the page title and the
     header action cluster on most screens. */
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(680px, calc(100vw - 260px));
  padding: 11px 12px 11px 15px;
  background: var(--d-paper);
  border: 1px solid var(--d-ink);
  border-left: 3px solid var(--d-ink);
  font-size: 13px;
  animation: notice-toast-in 0.16s ease-out;
}
.notice-toast.success { border-left-color: var(--d-green); }
.notice-toast.warning { border-left-color: var(--d-amber); }
.notice-toast-close {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--d-muted);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.notice-toast-close:hover { background: transparent; color: var(--d-ink); }
.notice-toast.is-hiding { opacity: 0; transition: opacity 0.2s ease; }

@keyframes notice-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .notice-toast { animation: none; }
}

.panel, .table-wrap, .card {
  background: var(--panel);
  border: 1px solid var(--line);
}

.panel {
  display: grid;
  gap: 22px;
  align-items: start;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.collapsible-panel {
  display: block;
  overflow: hidden;
  padding: 0;
}

.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 13px 16px;
  font-weight: 800;
  list-style: none;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.collapsible-toggle {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  color: var(--accent-dark);
  background: #ffffff;
  border: 1px solid #bddbe0;
  border-radius: 6px;
}

.collapsible-toggle .icon {
  width: 18px !important;
  height: 18px !important;
  transform: none;
  transition: transform 0.2s ease;
}

.collapsible-panel[open] .collapsible-summary {
  border-bottom: 1px solid var(--line);
}

.collapsible-panel[open] .collapsible-toggle .icon {
  transform: rotate(180deg);
}

.collapsible-body {
  display: grid;
  gap: 22px;
  align-items: start;
  padding: 28px 32px;
}

.panel > h2,
.panel > p {
  margin-bottom: 0;
}

.panel > button,
.panel > .button,
.form-actions {
  justify-self: start;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 24px;
  row-gap: 28px;
  margin-bottom: 4px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding-top: 24px;
  margin-top: 22px !important;
  border-top: 1px solid var(--line);
}

.contact-create-panel {
  padding: 0;
  overflow: hidden;
}

.contact-create-panel > .panel-heading-row {
  padding: 28px 32px 4px;
}

.contact-form-section {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 32px;
  border-top: 1px solid var(--line);
}

.contact-form-section-heading {
  display: grid;
  align-content: start;
  gap: 8px;
}

.contact-form-section-heading h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.contact-form-section-heading p {
  margin: 0;
  font-size: 0.92rem;
}

.contact-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 20px;
}

.contact-form-wide {
  grid-column: 1 / -1;
}

.contact-create-actions {
  justify-content: flex-end;
  padding: 22px 32px;
  margin: 0 !important;
  background: #fbfcfd;
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-checkbox {
  min-height: 42px;
  align-self: end;
}

.settings-save-panel {
  background: #fbfcfd;
}

.settings-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 6px;
}

.settings-tabs a.active {
  color: #ffffff;
  background: var(--accent);
  box-shadow: none;
}

.settings-tabs a.active:hover {
  color: #ffffff;
  background: var(--accent-dark);
}

.settings-form-section {
  display: grid;
  gap: 16px;
}

.settings-form-section + .settings-form-section {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.settings-form-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.settings-form-section p {
  margin: 0;
}

.settings-help-block {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  color: #314154;
  background: #f8fafb;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}

.settings-help-block p,
.settings-help-block ol {
  margin: 0;
}

.settings-help-block ol {
  padding-left: 22px;
}

.settings-help-block li + li {
  margin-top: 6px;
}

.settings-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.settings-note-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-note-grid h3,
.settings-note-grid p {
  margin: 0;
}

.panel-heading-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading-row h2,
.panel-heading-row p {
  margin: 0;
}

.panel-heading-row p {
  margin-top: 6px;
}

/* Badged heading icon — matches the .title-icon / op-title-icon standard. */
.panel-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-heading-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #bddbe0;
}
.panel-heading-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.identity-settings-panel {
  gap: 24px;
}

.identity-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.identity-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(23, 32, 42, 0.03);
}

.identity-editor-panel {
  background: #fbfcfd;
}

.identity-editor-form {
  display: grid;
  gap: 20px;
}

.identity-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.identity-card-head h3,
.identity-card-head p {
  margin: 0;
}

.identity-card-head p {
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.identity-badges,
.identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.identity-actions {
  justify-content: flex-start;
}

.log-viewer {
  max-height: 460px;
  overflow: auto;
  font-size: 0.82rem;
}

.identity-badges .page-chip {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.85rem;
  background: #ffffff;
}

.identity-meta {
  display: grid;
  gap: 10px;
  margin: 0;
}

.identity-status-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.identity-meta div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.identity-status-list div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.identity-meta dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.identity-status-list dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.identity-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.identity-status-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.identity-meta dd span {
  display: inline-flex;
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.identity-status-list dd span {
  display: inline-flex;
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.status-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}

.status-muted {
  color: var(--muted);
  background: #f2f5f7;
}

.identity-details {
  border-top: 1px solid var(--line);
}

.identity-details summary {
  padding-top: 14px;
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 800;
}

.identity-inline-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.identity-inline-form h3 {
  margin: 6px 0 -4px;
}

.identity-create-panel {
  margin: 0;
  background: #fbfcfd;
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  row-gap: 18px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

input, textarea, select {
  width: 100%;
  padding: 8px 11px;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
  font: inherit;
  color: var(--d-ink);
  transition: border-color 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--d-ink);
  outline: none;
}

input[readonly] {
  color: var(--d-muted);
  background: var(--d-oat);
}

input[aria-invalid="true"] {
  border-color: var(--d-orange-deep);
}

/* Inline-editable field (handoff notes, segment name): dashed border,
   saves on blur, no adjacent Save button. */
.field-inline-edit {
  border-style: dashed;
  border-color: var(--d-stroke);
  background: transparent;
}

.field-hint,
.field-error {
  color: var(--d-muted);
  font-size: 13px;
  font-weight: 400;
}

.field-error {
  color: var(--d-orange-deep);
}

/* Custom checkbox: 15x15px square, checked = ink border + centred check */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
  cursor: pointer;
}

input[type="checkbox"]:checked {
  border-color: var(--d-ink);
}

input[type="checkbox"]:checked::after {
  content: "\2713";
  font-size: 11px;
  line-height: 1;
  color: var(--d-ink);
}

input[type="checkbox"]:disabled {
  border-style: dashed;
  border-color: var(--d-stroke);
  cursor: not-allowed;
}

/* Toggle switch: 30x17 track, no radius */
.toggle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--d-stroke);
  cursor: pointer;
  padding: 0;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  background: var(--d-stroke);
}

.toggle:checked {
  background: var(--d-orange);
  border-color: var(--d-orange);
}

.toggle:checked::after {
  left: auto;
  right: 1px;
  background: var(--d-paper);
}

textarea {
  resize: vertical;
}

/* Button recipes. Bare `button`/`.button` defaults to the *secondary*
   (outlined) treatment rather than a solid fill — the solid orange fill
   is reserved for `.primary` and must be applied to exactly one button
   per screen (the irreversible action), per the Dispatch one-accent rule. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 16px;
  border: 1px solid var(--d-ink);
  background: transparent;
  color: var(--d-ink);
  font: 500 11px/1 "IBM Plex Sans";
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover, .button:hover {
  background: var(--d-oat-deep);
}

button.secondary, .button.secondary {
  color: var(--d-ink);
  background: transparent;
  border: 1px solid var(--d-ink);
}

button.secondary:hover, .button.secondary:hover {
  background: var(--d-oat-deep);
}

button.primary, .button.primary {
  border: 1px solid var(--d-orange);
  background: var(--d-orange);
  color: var(--d-paper);
}

button.primary:hover, .button.primary:hover {
  background: var(--d-ink);
  border-color: var(--d-ink);
}

button.tertiary, .button.tertiary {
  border: 1px solid var(--d-stroke);
  background: transparent;
  color: var(--d-body-muted);
}

button.tertiary:hover, .button.tertiary:hover {
  background: var(--d-oat-deep);
}

button.danger, .button.danger {
  border: 1px solid var(--d-orange-deep);
  background: transparent;
  color: var(--d-orange-deep);
}

button.danger:hover, .button.danger:hover {
  background: var(--d-orange-wash);
}

button.compact-button, .button.compact-button {
  min-height: 30px;
  padding: 6px 11px;
}

button:disabled, .button:disabled,
button[disabled], .button[disabled] {
  cursor: not-allowed;
  border-color: var(--d-stroke-light);
  color: var(--d-stroke);
  background: transparent;
}

button.secondary:disabled,
button.secondary:disabled:hover {
  color: var(--d-stroke);
  background: transparent;
  border-color: var(--d-stroke-light);
}

button:active:not(:disabled),
.button:active {
  transform: none;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--d-orange);
  outline-offset: 2px;
}

.table-wrap {
  overflow-x: auto;
}

.performance-table-section {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.performance-table-section + .performance-table-section {
  margin-top: 52px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border-bottom: 1px dashed var(--d-stroke-light);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--d-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--d-muted);
}

tbody tr:hover {
  background: var(--d-parchment);
}

tbody tr:last-child td {
  border-bottom: none;
}

td a {
  font-weight: 500;
}

.contact-company-cell,
.contact-email-cell,
.contact-detail-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-row-main,
.contact-row-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

.contact-row-main {
  color: var(--ink);
  font-weight: 700;
}

.contact-row-main > *,
.contact-row-meta > * {
  overflow-wrap: anywhere;
}

.contact-row-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-icon-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.contact-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #bddbe0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.contact-row-icon .icon {
  transform: none;
}

.contact-status-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.contact-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2f5f7;
  color: var(--muted);
}

.contact-status-icon .icon {
  transform: none;
}

.contact-status-active {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}

.contact-status-suppressed {
  color: #7a3d00;
  background: #fff7e1;
  border-color: #f2d28a;
}

.contact-status-icon.contact-status-failed {
  color: #b65f5f !important;
  background: #fff3f3 !important;
  border-color: #efcccc !important;
}

.contact-status-inactive {
  color: var(--warn);
  background: #f7eaea;
  border-color: #e4b8b8;
}

.template-detail-cell {
  min-width: min(360px, 48vw);
  overflow-wrap: anywhere;
}

.template-icon-cell,
.template-usage-cell {
  width: 1%;
  white-space: nowrap;
}

.template-icon-cell {
  text-align: center;
}

.template-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #bddbe0;
  border-radius: 999px;
}

.template-row-icon .icon {
  transform: none;
}

.template-usage-cell {
  min-width: 126px;
}

.template-usage-indicator {
  display: inline-block;
  color: var(--accent-dark);
}

.template-usage-copy {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.template-usage-copy strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.template-usage-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.template-usage-unused {
  color: var(--muted);
}

.dashboard-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2f5f7;
  color: var(--muted);
}

.dashboard-status-icon .icon {
  transform: none;
}

.dashboard-status-followup {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #bddbe0;
}

.dashboard-status-sent {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}

.dashboard-status-ready {
  color: #7a3d00;
  background: #fff7e1;
  border-color: #f2d28a;
}

.dashboard-status-draft {
  color: var(--muted);
  background: #f2f5f7;
  border-color: var(--line);
}

tbody tr {
  transition: background-color 0.1s ease;
}

tbody tr:hover {
  background-color: #f7f9fb;
}

.cards {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.card {
  padding: 16px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
  border-color: #c8d8de;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
}

.reply-note-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.reply-note {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fb;
}

.reply-note p {
  margin: 8px 0 0;
  color: var(--text);
  white-space: pre-wrap;
}

.reply-note .row {
  justify-content: space-between;
  color: var(--muted);
}

.template-edit-form,
.test-send-form,
.draft-test-panel {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.template-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.template-editor-panel {
  min-width: 0;
  margin-bottom: 0;
}

.template-editor-panel h2,
.template-editor-panel h3,
.template-test-panel h2,
.template-test-panel h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.template-helper-panel,
.template-copy-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.template-helper-panel {
  padding: 14px 16px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.template-variable-list {
  gap: 8px;
}

.template-variable-list .page-chip {
  min-height: 28px;
  padding: 4px 9px;
  background: #ffffff;
  font-size: 0.86rem;
}

.template-copy-section + .template-copy-section {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.template-copy-section textarea {
  min-height: 180px;
}

.template-body-textarea {
  min-height: 420px;
}

.template-preview-sidebar {
  display: grid;
  gap: 16px;
  min-width: 0;
  position: sticky;
  top: 22px;
}

.template-preview-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.template-preview-sidebar .template-preview-panel {
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.template-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.template-preview-header h3 {
  margin: 0;
}

.template-preview-header p {
  margin: 4px 0 0;
  font-size: 0.9rem;
}

.template-preview-state {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.template-preview-controls,
.template-test-fields {
  display: grid;
  gap: 14px;
}

.template-preview-output {
  display: grid;
  gap: 14px;
}

.template-preview-output > div {
  display: grid;
  gap: 7px;
}

.template-preview-output strong {
  font-size: 0.86rem;
  color: var(--muted);
  text-transform: uppercase;
}

.template-preview-output section {
  display: grid;
  gap: 12px;
}

.template-preview-output h4 {
  margin: 0;
  font-size: 1rem;
}

.template-preview-output p,
.template-preview-output pre,
.template-preview-error {
  margin: 0;
}

.campaign-template-preview section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.campaign-template-preview section:first-child {
  padding-top: 0;
  border-top: 0;
}

.template-preview-error {
  color: var(--warn);
  font-weight: 700;
}

.template-preview-lint {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 10px;
}

.template-preview-lint ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.template-preview-lint li {
  margin: 2px 0;
  font-size: 0.88em;
}

.template-lint-warn {
  color: var(--warn);
}

.template-lint-info {
  color: var(--muted);
}

.template-test-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.template-test-heading {
  display: grid;
  gap: 4px;
}

.template-test-heading p,
.template-test-panel p {
  margin: 0;
}

.template-action-bar {
  grid-column: 1 / -1;
  justify-content: space-between;
  margin: 0 !important;
  background: #fbfcfd;
}

.template-action-nav,
.template-action-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.template-action-primary {
  justify-content: flex-end;
  margin-left: auto;
}

.template-saved-test-panel {
  max-width: 1180px;
}

.template-saved-test-panel .form-actions {
  margin-top: 0 !important;
}

.template-saved-test-grid {
  margin-bottom: 0;
}

.template-preview-sidebar .draft-test-panel {
  margin: 0;
}

.template-edit-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.template-delete-form {
  margin-top: 18px;
}

.template-delete-form .form-actions {
  margin-top: 12px !important;
  padding-top: 12px;
}

.template-usage {
  margin: 0;
}

.test-send-form h3,
.draft-test-panel h3,
.template-edit-form h2 {
  margin: 0;
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  row-gap: 18px;
}

pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: #f2f5f7;
  padding: 12px;
  border-radius: 6px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.performance-metrics {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.performance-metrics div {
  min-height: 164px;
  padding: 18px;
}

.performance-metrics strong {
  font-size: 30px;
}

.performance-metrics .metric-icon {
  right: 16px;
  top: 16px;
}

.campaign-stepper {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 28px;
}

.campaign-stepper-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.campaign-step {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
}

.campaign-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(100% - 6px);
  width: 28px;
  height: 2px;
  background: var(--line);
}

.campaign-step.complete:not(:last-child)::after {
  background: #9fd2da;
}

.campaign-step-link {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  color: #415168;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.campaign-step-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #475569;
  background: #f2f5f7;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
}

.campaign-step-copy {
  display: grid;
  overflow: hidden;
  min-width: 0;
  gap: 2px;
}

.campaign-step-label {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-step-note {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-step.current .campaign-step-link {
  background: #f3fafb;
  border-color: #a9d8df;
  box-shadow: 0 8px 20px rgba(23, 107, 135, 0.08);
}

.campaign-step.current .campaign-step-node {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.campaign-step.current .campaign-step-label {
  color: var(--accent-dark);
}

.campaign-step.complete .campaign-step-link {
  border-color: #b9dce1;
}

.campaign-step.complete .campaign-step-node {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #b9dce1;
}

.campaign-step.locked .campaign-step-link,
.campaign-step.locked .campaign-step-node,
.campaign-step.locked .campaign-step-label,
.campaign-step.locked .campaign-step-note {
  color: var(--muted);
}

.campaign-step.locked .campaign-step-link {
  background: #f7f8fa;
}

.campaign-step:not(.locked) .campaign-step-link:hover {
  border-color: #b9dce1;
  background: #fbfdfe;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.setup-layout {
  display: grid;
  gap: 16px;
}

.setup-main-panel h2,
.performance-section-title,
.settings-icon-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-preview {
  margin-top: 14px;
  padding: 12px;
}

.setup-actions {
  margin-bottom: 0;
}

.summary-grid div {
  display: grid;
  min-width: 0;
  gap: 4px;
  align-content: start;
  padding: 12px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.summary-grid span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.summary-grid .stacked-value {
  display: grid;
  gap: 2px;
}

.summary-grid .stacked-value span {
  display: block;
}

.recipient-summary {
  min-width: 220px;
  max-width: 320px;
}

.recipient-summary div {
  padding: 10px;
}

@media (min-width: 760px) {
  .summary-grid .summary-card-wide {
    grid-column: span 2;
  }
}

.status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 28px;
  align-items: stretch;
}

.status-main {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.status-heading h2,
.status-description {
  margin: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
}

.status-badge-live {
  color: #176050;
  background: var(--success-soft);
  border-color: var(--success-border);
}

.status-badge-muted {
  color: #475569;
  background: #f2f5f7;
}

.status-description {
  max-width: 760px;
}

.status-definition-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.status-definition-list div {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.status-definition-list dt {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.status-definition-list dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.status-rail {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.status-count {
  display: grid;
  gap: 2px;
}

.status-count strong {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.status-count span,
.status-queue span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.status-queue {
  display: grid;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.status-queue div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.status-queue strong {
  color: var(--ink);
}

.campaign-meta-panel {
  margin-bottom: 36px;
}

.campaign-meta-rail {
  align-content: stretch;
  gap: 12px;
}

.campaign-status-summary,
.campaign-progress-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.campaign-status-summary {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.campaign-status-summary span,
.campaign-progress-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.campaign-status-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
}

.campaign-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.campaign-progress-card strong {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.campaign-progress-card-wide {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.campaign-status-queue {
  margin: 0;
  padding: 4px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.campaign-status-queue div:last-child {
  border-bottom: 0;
}

.campaign-meta-actions {
  display: grid;
  gap: 10px;
}

.campaign-meta-actions form,
.campaign-meta-actions button,
.campaign-meta-actions a {
  width: 100%;
}

.status-actions {
  margin-bottom: 0;
}

.notice.warning {
  color: var(--d-ink);
  background: var(--d-oat);
  border-color: var(--d-stroke);
  border-left-color: var(--d-amber);
}

.notice.success {
  color: var(--d-ink);
  background: var(--success-soft);
  border-color: var(--success-border);
  border-left-color: var(--d-green);
}

.metrics div {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 136px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.metrics div:hover {
  border-color: #bddbe0;
  box-shadow: 0 4px 12px rgba(23, 107, 135, 0.08);
  transform: translateY(-1px);
}

.metrics strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
}

.metric-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px !important;
  height: 30px !important;
  padding: 7px;
  color: var(--accent);
  fill: currentColor;
  background: var(--accent-soft);
  border-radius: 8px;
}

.metrics span {
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

.pill {
  color: var(--muted);
  font-size: 14px;
}

.metrics small {
  display: block;
  max-width: 88%;
  margin-top: 8px;
  color: #7a8798;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.sparkline {
  display: block;
  max-width: 100%;
  margin-top: 12px;
  overflow: visible;
}

.sparkline polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.sparkline-baseline {
  stroke: #d9e0ea;
  stroke-width: 1;
}

.sparkline-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-line-success {
  stroke: var(--green);
}

.sparkline-line-muted {
  stroke: #9aa7b5;
}

.dashboard-activity-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-activity-strip > div:first-child {
  display: grid;
  gap: 2px;
}

.dashboard-activity-strip span,
.row-activity span {
  color: #7a8798;
  font-size: 0.84rem;
  font-weight: 700;
}

.dashboard-activity-strip strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.dashboard-activity-sparklines {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dashboard-activity-sparklines span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-activity-sparklines .sparkline {
  width: 76px;
  margin-top: 0;
}

.row-activity {
  display: grid;
  min-width: 118px;
  gap: 4px;
}

.row-sparklines {
  display: flex;
  align-items: center;
  gap: 4px;
}

.row-sparklines .sparkline {
  width: 48px;
  height: 18px;
  margin-top: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  background: #f2f5f7;
  border-radius: 8px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkbox-grid label, .row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-grid input, .row input {
  width: auto;
}

.recipient-list {
  grid-template-columns: 1fr;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}

.recipient-list label {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  white-space: normal;
  overflow-wrap: anywhere;
}

.contact-picker-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.contact-picker-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 700;
}

.contact-picker-row input[type="checkbox"] {
  justify-self: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

.contact-picker-row label {
  display: block;
  min-width: 0;
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-line input {
  width: auto;
}

.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.actions-cell {
  white-space: nowrap;
}

.actions-cell .row-actions {
  flex-wrap: nowrap;
}

.action-menu {
  display: inline-block;
  min-width: 132px;
  position: relative;
}

.action-menu > summary {
  list-style: none;
}

.action-menu > summary::-webkit-details-marker {
  display: none;
}

.action-menu[open] > summary .icon {
  transform: rotate(180deg);
}

.action-menu-list {
  display: grid;
  gap: 4px;
  position: fixed;
  top: var(--action-menu-top, 0);
  left: var(--action-menu-left, 0);
  z-index: 100;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(28, 45, 56, 0.12);
}

.action-menu-list form {
  margin: 0;
}

.action-menu-item,
button.action-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.action-menu-item:hover,
button.action-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.action-menu-item.danger,
button.action-menu-item.danger {
  color: var(--warn);
}

button.action-menu-item:disabled {
  background: transparent;
  color: var(--muted);
}

.action-menu-item.danger:hover,
button.action-menu-item.danger:hover {
  background: #f7eaea;
  color: #7b2a2a;
}

.inline-form {
  display: inline;
  margin: 0;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.empty-state {
  padding: 40px 12px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.error {
  color: var(--warn);
}

@media (max-width: 700px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .section-head {
    grid-template-columns: 1fr;
  }

  .section-head > :not(div) {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
    justify-self: start;
  }

  .page {
    padding: 20px;
  }

  .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-heading-row,
  .identity-card-head {
    display: grid;
  }

  .contact-create-panel > .panel-heading-row,
  .contact-form-section,
  .contact-create-actions {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-form-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-create-actions {
    justify-content: flex-start;
  }

  .template-editor-panel,
  .template-preview-panel,
  .template-test-panel,
  .template-action-bar {
    padding-left: 20px;
    padding-right: 20px;
  }

  .template-action-bar {
    justify-content: flex-start;
  }

  .template-action-primary {
    justify-content: flex-start;
    margin-left: 0;
  }

  .identity-badges,
  .identity-actions {
    justify-content: flex-start;
  }

  .identity-status-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .status-definition-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 1040px) {
  .template-workspace {
    grid-template-columns: 1fr;
  }

  .template-preview-sidebar {
    position: static;
  }

  .template-preview-sidebar .template-preview-panel {
    max-height: none;
  }
}

@media (max-width: 980px) {
  .campaign-stepper-list {
    gap: 6px;
  }

  .campaign-step::after {
    display: none;
  }

  .campaign-step-link {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    min-height: 68px;
    padding: 8px;
  }

  .campaign-step-node {
    width: 30px;
    height: 30px;
  }

  .campaign-step-label {
    font-size: 0.8rem;
  }

  .campaign-step-note {
    font-size: 0.72rem;
  }

  .status-layout {
    grid-template-columns: 1fr;
  }

  .status-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .status-queue {
    grid-column: 1 / -1;
  }

  .campaign-status-summary,
  .campaign-meta-actions {
    grid-column: 1 / -1;
  }

  .campaign-progress-card-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .campaign-stepper-list {
    gap: 5px;
  }

  .campaign-step::after {
    display: none;
  }

  .campaign-step-link {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    min-height: 76px;
    padding: 8px 4px;
    text-align: center;
  }

  .campaign-step-node {
    width: 30px;
    height: 30px;
  }

  .campaign-step-label {
    font-size: 0.68rem;
  }

  .campaign-step-note {
    display: none;
  }
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 14px 16px;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 700;
}

.pagination-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pagination-split {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
}

.pagination-side {
  display: flex;
  align-items: center;
}

.pagination-side-left {
  justify-content: flex-start;
}

.pagination-side-right {
  justify-content: flex-end;
}

.icon-forward {
  transform: rotate(180deg);
}

/* ──────────────────────────────────────────────────────────────────────
   Campaign Overview redesign — claude.ai/design (h/fd23g74PEMtoRQkSowzJYw)
   Self-contained block. Reuses existing tokens (--accent, --ink, …) so
   only this page is affected unless other templates opt in to `op-*`.
   ────────────────────────────────────────────────────────────────────── */
.op-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 32px 64px;
}
.op-page-section { margin-bottom: 16px; }

/* breadcrumbs in the redesign use the existing .breadcrumbs class — no extra
   styles needed here. The hero block below sits right under them. */

.op-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
  padding: 24px 28px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: 16px;
}
.op-hero h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.op-hero h1 .op-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #bddbe0;
}
.op-hero h1 .op-title-icon svg { width: 20px; height: 20px; fill: currentColor; }
.op-hero-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 760px;
}
.op-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.op-hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  align-self: start;
  margin-right: -12px;
}

.op-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fbfcfd;
  color: var(--muted);
}
.op-badge.is-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.op-badge.is-accent  { background: var(--accent-soft); color: var(--accent-dark); border-color: #bddbe0; }
.op-badge.is-gold    { background: #fff9eb; color: #5c4300; border-color: #ecd9a3; }
.op-badge.is-warn    { background: #fff7e1; color: #7a3d00; border-color: #f2d28a; }
.op-badge.is-muted   { background: #fbfcfd; color: var(--muted); border-color: var(--line); }
.op-badge.is-danger  { background: #fff3f3; color: #b65f5f; border-color: #efcccc; }

/* KPI tiles */
.op-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
.op-kpi {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px 16px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 6px;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
  overflow: hidden;
  min-height: 132px;
}
.op-kpi .op-metric-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.op-kpi .op-metric-icon svg { width: 14px; height: 14px; fill: currentColor; }
.op-kpi-value {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.op-kpi-label {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.op-kpi-foot {
  position: relative;
  align-self: end;
  min-height: 32px;
  display: flex;
  align-items: flex-end;
}
.op-kpi-caption {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  color: #7a8798;
  max-width: 92%;
}

/* Two-column status grid (about + rail) */
.op-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  margin-bottom: 16px;
}
.op-status-grid.is-no-rail {
  grid-template-columns: minmax(0, 1fr);
}
.op-status-grid.is-no-rail .op-status-card .op-defs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.op-status-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
  padding: 22px 24px;
}
.op-status-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
}
.op-status-card .op-defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 16px;
  margin: 0;
}
.op-status-card .op-defs > div { min-width: 0; }
.op-status-card dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.op-status-card dd {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.op-status-rail {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(23, 32, 42, 0.03);
  padding: 22px;
  display: grid;
  gap: 14px;
}
.op-rail-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.op-rail-big { display: grid; gap: 4px; }
.op-rail-big strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.op-rail-big small {
  font-size: 0.78rem;
  color: #7a8798;
  font-weight: 500;
  line-height: 1.35;
}
.op-rail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.op-rail-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.op-rail-tile span {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.op-rail-tile strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.op-rail-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.op-rail-actions a,
.op-rail-actions button {
  width: 100%;
  justify-content: center;
}
.op-rail-actions form { width: 100%; }
.op-rail-actions form button { width: 100%; }

/* Tabbed panel */
.op-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
  padding: 20px 24px 24px;
  margin-bottom: 16px;
}
.op-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.op-tab {
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.op-tab:hover { color: var(--ink); }
.op-tab.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}
.op-tab svg { width: 14px; height: 14px; fill: currentColor; }
.op-tab-count {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  color: var(--muted);
}
.op-tab.is-active .op-tab-count {
  background: var(--accent-soft);
  border-color: #bddbe0;
  color: var(--accent-dark);
}

.op-table-wrap { overflow-x: auto; }
.op-table { width: 100%; border-collapse: collapse; }
.op-table th,
.op-table td { text-align: left; padding: 10px 14px; font-size: 13px; }
.op-table thead th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
  background: transparent;
  border-bottom: 1px solid var(--d-muted);
}
.op-table tbody tr { border-top: 1px dashed var(--d-stroke-light); }
.op-table tbody tr:first-child { border-top: 0; }
.op-table tbody tr:hover { background: var(--d-parchment); }
.op-row-main { display: block; font-weight: 600; color: var(--d-ink); }
.op-row-meta { display: block; font-size: 12px; color: var(--d-muted); }
.op-cell-preview {
  font-size: 13px;
  color: var(--d-body-muted);
  font-weight: 400;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.op-empty {
  padding: 24px;
  text-align: center;
  color: var(--d-muted);
  font-weight: 500;
}

/* Status pills inside tables */
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--d-stroke);
  background: transparent;
  color: var(--d-body-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.op-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0.85;
}
.op-pill.is-sent      { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-delivered { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-replied   { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-reply     { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-bounced   { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-bounce    { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-draft     { color: var(--d-amber); border-color: var(--d-amber); }
.op-pill.is-queued    { color: var(--d-amber); border-color: var(--d-amber); }
.op-pill.is-auto,
.op-pill.is-auto_replied { color: var(--d-muted); border-color: var(--d-stroke); }
.op-pill.is-optout,
.op-pill.is-opted_out,
.op-pill.is-opt-out   { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-failed    { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-invalid   { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-stale     { color: var(--d-amber); border-color: var(--d-amber); }
.op-pill.is-edited    { color: var(--d-ink); border-color: var(--d-ink); }
.op-pill.is-scheduled { color: var(--d-body-muted); border-color: var(--d-stroke); }

/* Per-draft badges + edit affordance in the review carousel. */
.cs-draft-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
}
.cs-draft-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--accent-dark);
  background: #fff;
  text-decoration: none;
}
.cs-draft-edit:hover { background: var(--accent-soft); border-color: #bddbe0; }

/* Buttons used inside the rail. Re-skin existing `.button` is risky, so we
   add a local class. */
.op-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.op-btn svg { width: 14px; height: 14px; fill: currentColor; }
.op-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 10px rgba(23, 107, 135, 0.14);
}
.op-btn-primary:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.op-btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
.op-btn-secondary:hover { background: #f7f9fb; color: var(--ink); text-decoration: none; }

/* Responsive */
@media (max-width: 1024px) {
  .op-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-status-grid { grid-template-columns: minmax(0, 1fr); }
  .op-status-card .op-defs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .op-hero { grid-template-columns: 1fr; }
  .op-hero-actions { justify-content: flex-start; }
  .op-metrics { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────
   Dashboard redesign — claude.ai/design (h/BOlV8AnfPLOavNUCpyuEig)
   Self-contained `dash-*` block. Reuses existing tokens.
   ────────────────────────────────────────────────────────────────────── */
.page.is-dashboard { max-width: 1280px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.dash-hero {
  display: grid;
  /* The actions cell is a wrapping flex row; grid's `auto` track sizes to its
     *unwrapped* max-content width regardless of flex-wrap, which starves the
     title column when there are many buttons. Capping it forces the wrap. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 55%);
  align-items: end;
  gap: 24px;
  margin: 0 0 22px;
}
.dash-hero-title h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dash-hero-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  max-width: 56ch;
}
.dash-hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  margin-top: 8px;
}
.dash-hero-meta > span { white-space: nowrap; }
.dash-hero-meta .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--success);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(47,157,143,0.18);
  margin-right: 6px;
  vertical-align: 1px;
}
.dash-hero-meta .dot.is-warn { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,200,76,0.22); }
.dash-hero-actions {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Stat ribbon ──────────────────────────────────────────────────── */
.dash-ribbon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 22px;
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
}
.dash-ribbon-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.dash-ribbon-stat .lab {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.dash-ribbon-stat .val {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.dash-ribbon-stat .val sup {
  font-size: 10px; font-weight: 700; color: var(--muted);
  margin-left: 1px; top: -0.6em;
}
.dash-ribbon-stat .sub {
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.dash-ribbon-stat .delta {
  font-size: 11px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}
.dash-ribbon-stat .delta.is-down {
  background: #fff3f3; color: #b65f5f; border-color: #efcccc;
}
.dash-ribbon-stat.is-feature .val { color: var(--accent-dark); }
.dash-ribbon-stat.is-feature .lab { color: var(--accent); }
.dash-ribbon-sep {
  align-self: stretch;
  width: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* ── Slim page header ─────────────────────────────────────────────── */
.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin: 0 0 18px;
}
.dash-head-title h1 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
}
.dash-head-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; color: var(--muted); font-size: 0.86rem; font-weight: 600;
}
.dash-head-meta > span { white-space: nowrap; }
.dash-head-meta .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--success);
  display: inline-block; box-shadow: 0 0 0 3px rgba(47,157,143,0.18);
  margin-right: 6px; vertical-align: 1px;
}
.dash-head-meta .dot.is-warn { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,200,76,0.22); }
.dash-head-actions { display: flex; gap: 10px; align-items: center; }

/* ── Triage bar (action-first: what needs you, then a compact trend) ─ */
.triage-bar {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 2px 8px rgba(23,32,42,0.06);
}
.triage-stats { display: flex; align-items: stretch; flex: 1 1 420px; flex-wrap: wrap; gap: 2px; }
.triage-stat {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; border-radius: 9px; flex: 1 1 0; min-width: 148px;
}
.triage-stat + .triage-stat { box-shadow: inset 1px 0 0 var(--line); }
.triage-ico {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f4f8; color: var(--muted);
}
.triage-ico svg { fill: currentColor; }
.triage-text { display: grid; gap: 0; min-width: 0; line-height: 1.15; }
.triage-num {
  font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.triage-lab {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.triage-stat.is-urgent { background: linear-gradient(180deg, #fff7e6 0%, #fffdf8 100%); }
.triage-stat.is-urgent .triage-ico { background: rgba(245,200,76,0.22); color: #8a5a00; }
.triage-stat.is-urgent .triage-num { color: #7a3d00; }
.triage-stat.is-accent .triage-ico { background: var(--accent-soft); color: var(--accent); }
.triage-stat.is-good .triage-ico { background: var(--success-soft); color: var(--success); }
.triage-stat.is-warn .triage-ico { background: #fdecec; color: #b65f5f; }
.triage-stat.is-warn .triage-num { color: #b65f5f; }

.triage-trend {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px 8px 18px; flex: 0 0 auto;
  border-left: 1px solid var(--line);
}
.triage-trend-figure { display: grid; gap: 4px; justify-items: start; }
.spark { width: 180px; height: 30px; display: block; }
.spark-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.spark-empty { font-size: 0.78rem; font-weight: 600; color: var(--muted); height: 30px; display: inline-flex; align-items: center; }
.triage-trend-meta {
  font-size: 0.76rem; font-weight: 700; color: var(--muted);
  font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap;
}
/* ── Lower grid: campaigns + side cards ──────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}
.dash-grid.is-stacked { grid-template-columns: minmax(0, 1fr); }

.dash-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
  overflow: hidden;
}
.dash-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--line);
}
.dash-panel-head .left { display: flex; align-items: center; gap: 10px; }
.dash-panel-title {
  font-size: 14px; font-weight: 800; letter-spacing: -0.005em;
  color: var(--ink);
}
.dash-panel-count {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 3px 8px;
  background: #f1f4f8;
  border-radius: 999px;
}
.dash-panel-actions { display: flex; gap: 8px; align-items: center; }
.dash-panel-link {
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--muted); text-decoration: none;
}
.dash-panel-link:hover { color: var(--ink); text-decoration: underline; }

/* ── Campaign worklist: status-spine action cards ───────────────────── */
.camp-card {
  --spine: #c4cdd9;                          /* default: draft / idle */
  --rest-opacity: 1;                         /* resting opacity (dimmed for finished/cancelled) */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(178px, 0.95fr) auto;
  align-items: center;
  column-gap: 18px; row-gap: 0;
  padding: 11px 36px 11px 16px;              /* right pad reserves the chevron */
  border-left: 3px solid var(--spine);
  border-bottom: 1px solid var(--line);
  background: transparent; color: inherit; text-decoration: none; cursor: pointer;
  transition: background 0.16s ease, opacity 0.16s ease;
}
.camp-card:last-child { border-bottom: 0; }

/* state → spine colour */
.camp-card.is-due_now, .camp-card.is-drafts { --spine: #e0a23c; }        /* urgent amber */
.camp-card.is-sending, .camp-card.is-ready  { --spine: var(--accent); }  /* teal */
.camp-card.is-paused                        { --spine: #c9857f; }        /* muted red */
.camp-card.is-scheduled                     { --spine: #94a6b8; }        /* slate */
.camp-card.is-finished                      { --spine: var(--success); } /* green */
.camp-card.is-cancelled                     { --spine: #cfd6df; }        /* faint grey */

/* urgent: faint warm wash bleeding from the spine */
.camp-card.is-urgent { background: linear-gradient(90deg, #fff8ec 0%, rgba(255,255,255,0) 56%); }
.camp-card.is-finished, .camp-card.is-cancelled { --rest-opacity: 0.72; opacity: 0.72; }
.camp-card.is-finished:hover, .camp-card.is-cancelled:hover { opacity: 1; }

/* hover */
.camp-card:hover { background: #f6f9fb; text-decoration: none; color: inherit; }
.camp-card.is-urgent:hover { background: linear-gradient(90deg, #fff2da 0%, #f8fbfc 60%); }
.camp-card:hover .camp-name { color: var(--accent-dark); }

/* page-load stagger — `backwards` fill (not `both`) so resting opacity / :hover win
   once the animation ends; the keyframe ends at --rest-opacity to avoid a pop. */
@keyframes camp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: var(--rest-opacity, 1); transform: none; } }
.camp-card { animation: camp-in 0.4s ease backwards; animation-delay: calc(min(var(--i, 0), 12) * 38ms); }
@media (prefers-reduced-motion: reduce) { .camp-card { animation: none; } }

/* identity column: name headline over sender */
.camp-id { display: grid; gap: 2px; min-width: 0; }
.camp-name {
  font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* reply-rate column: figure over label, right-aligned */
.camp-rate {
  display: grid; justify-items: end; align-content: center; gap: 0;
  min-width: 38px; text-align: right; font-feature-settings: "tnum" 1, "lnum" 1;
}
.camp-rate b { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.camp-rate span {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}

/* sender line */
.camp-sender {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  color: var(--muted); font-size: 0.81rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.camp-sender-ico { width: 12px; height: 12px; flex: none; fill: currentColor; opacity: 0.8; }

/* action column: next-action pill over muted detail */
.camp-action { display: grid; gap: 3px; justify-items: start; align-content: center; min-width: 0; }
.camp-next {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 9px; border-radius: 7px;
  background: #f4f6f9; border: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 800; letter-spacing: -0.005em; color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.camp-next-ico { width: 12px; height: 12px; flex: none; fill: currentColor; color: var(--muted); }
.camp-next-detail {
  color: var(--muted); font-size: 0.78rem; font-weight: 600; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.camp-next.is-due_now, .camp-next.is-drafts { background: #fff4e0; border-color: #f3dca7; color: #7a3d00; }
.camp-next.is-due_now .camp-next-ico, .camp-next.is-drafts .camp-next-ico { color: #b06f00; }
.camp-next.is-sending, .camp-next.is-ready { background: var(--accent-soft); border-color: #bcdce8; color: var(--accent-dark); }
.camp-next.is-sending .camp-next-ico, .camp-next.is-ready .camp-next-ico { color: var(--accent); }
.camp-next.is-paused { background: #fbeeed; border-color: #eccac6; color: #8a4a44; }
.camp-next.is-paused .camp-next-ico { color: #b65f5f; }
.camp-next.is-scheduled { background: #eef2f7; border-color: #dde3ec; }
.camp-next.is-finished { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.camp-next.is-finished .camp-next-ico { color: var(--success); }
.camp-next.is-cancelled, .camp-next.is-draft { background: #f4f5f7; border-color: var(--line); color: var(--muted); }
.camp-next.is-cancelled .camp-next-ico, .camp-next.is-draft .camp-next-ico { color: var(--muted); }

/* compact dashboard funnel: keep bar + legend tight within their column,
   one line, never spilling into the reply-rate column (scoped so the shared
   performance-page funnel is untouched) */
.camp-card .camp-funnel { min-width: 0; gap: 5px; }
.camp-card .camp-funnel-legend { gap: 11px; font-size: 0.74rem; flex-wrap: nowrap; overflow: hidden; }
/* the bar already encodes the colours, so drop the redundant legend dots to save width */
.camp-card .camp-funnel-legend .k::before { display: none; }

.camp-funnel { display: grid; gap: 6px; font-feature-settings: "tnum" 1, "lnum" 1; }
.camp-funnel-bar {
  display: flex; height: 8px;
  background: #eef1f5; border-radius: 999px; overflow: hidden;
}
.camp-funnel-bar > span { display: block; height: 100%; }
.camp-funnel-bar .seg-sent    { background: var(--accent); }
.camp-funnel-bar .seg-replied { background: var(--green); }
.camp-funnel-bar .seg-bounced { background: #c98787; }
.camp-funnel-legend {
  display: flex; gap: 12px;
  color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
}
.camp-funnel-legend .k { display: inline-flex; align-items: center; gap: 5px; }
.camp-funnel-legend .k::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; opacity: 0.85;
}
.camp-funnel-legend .k.k-sent::before   { background: var(--accent); }
.camp-funnel-legend .k.k-rep::before    { background: var(--green); }
.camp-funnel-legend .k.k-bounce::before { background: #c98787; }
.camp-funnel-legend strong { color: var(--ink); font-weight: 700; }

/* Campaign performance: per-stage sequence funnel */
.camp-funnel-bar .seg-inflight { background: var(--gold); }
.camp-funnel-bar .seg-notdue   { background: #d7dde5; }
.camp-funnel-legend .k.k-inflight::before { background: var(--gold); }
.camp-funnel-legend .k.k-notdue::before   { background: #d7dde5; }
.op-funnel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23, 32, 42, 0.06);
  padding: 22px 24px;
  margin: 0 0 16px;
}
.op-funnel h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink);
}
.op-funnel-bars { display: grid; gap: 18px; }
.op-funnel-row { display: grid; gap: 6px; }
.op-funnel-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.op-funnel-label { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.op-funnel-total {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-weight: 700; font-size: 0.82rem;
}
.op-funnel-row .camp-funnel-bar { height: 12px; }
.op-funnel-foot { margin: 16px 0 0; color: var(--muted); font-size: 0.82rem; }

/* chevron — appears on hover, vertically centred on the card's right edge */
.camp-card-chev {
  position: absolute; top: 50%; right: 15px; width: 14px; height: 14px;
  color: #b8c1cd; fill: currentColor;
  transform: translateY(-50%) rotate(-90deg);
  opacity: 0; transition: opacity 0.15s ease, right 0.15s ease, color 0.15s ease;
}
.camp-card:hover .camp-card-chev { opacity: 1; right: 13px; color: var(--accent-dark); }

.dash-side { display: grid; gap: 22px; }
.dash-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
  overflow: hidden;
}
.dash-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.dash-card-head .left { display: inline-flex; align-items: center; gap: 8px; }
.dash-card-head .left .ico {
  width: 22px; height: 22px; padding: 4px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-card-head .left .ico svg {
  width: 14px !important; height: 14px !important;
  transform: none; fill: currentColor;
}
.dash-card-head .left strong {
  font-size: 14px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink);
}
.dash-card-head .right { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.dash-card-body { padding: 16px 18px; }
.dash-card-body.is-flush { padding: 0; }

/* Sender mailboxes — one compact line per identity (email · sent/limit) */
.mbx-list { list-style: none; margin: 0; padding: 0; }
.mbx {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line);
}
.mbx:first-child { border-top: 0; }
.mbx-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--success); box-shadow: 0 0 0 3px rgba(47,157,143,0.16);
}
.mbx-dot.is-warn { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,200,76,0.22); }
.mbx-dot.is-fail { background: #b65f5f; box-shadow: 0 0 0 3px rgba(182,95,95,0.20); }
.mbx-email {
  font-size: 0.84rem; font-weight: 600; color: var(--ink);
  font-feature-settings: "tnum" 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbx-meta { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.mbx-bnc {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 800; color: #fff; background: #b65f5f;
  font-feature-settings: "tnum" 1;
}
.mbx-quota {
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap;
}
.mbx-quota b { font-weight: 800; color: var(--ink); }
.mbx-quota.is-high b { color: #9a6a00; }
.mbx-quota.is-full b { color: #b65f5f; }

/* Worklist empty state */
.dash-empty { padding: 32px; text-align: center; color: var(--muted); font-weight: 600; }
.dash-empty a { color: var(--accent-dark); }

/* Recent replies */
.replies-list { list-style: none; margin: 0; padding: 0; }
.replies-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px; align-items: start;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.replies-item:last-child { border-bottom: 0; }
.replies-item:hover { background: #f7f9fb; }
.replies-avatar {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; letter-spacing: 0.02em;
  border: 1px solid #d2e4ea;
  flex: 0 0 auto;
}
.replies-avatar svg { width: 14px !important; height: 14px !important; fill: currentColor; }
.replies-item.is-auto    .replies-avatar { background: #fff9eb; color: #5c4300; border-color: #ecd9a3; }
.replies-item.is-bounce  .replies-avatar { background: #fff3f3; color: #a33a3a; border-color: #efcccc; }
.replies-item.is-optout  .replies-avatar { background: #fff3f3; color: #a33a3a; border-color: #efcccc; }
.replies-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.replies-from {
  font-size: 0.92rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replies-time { color: var(--muted); font-size: 0.76rem; font-weight: 700; flex: 0 0 auto; }
.replies-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  color: var(--muted); font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replies-sub .sep { color: #c8d2dd; }
.replies-snippet {
  margin-top: 6px;
  color: #44546b;
  font-size: 0.88rem; line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.replies-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  background: #fbfcfd;
}
.replies-foot a {
  font-size: 0.86rem; font-weight: 700; color: var(--accent-dark); text-decoration: none;
}
.replies-foot a:hover { text-decoration: underline; }
.replies-empty { padding: 18px; color: var(--muted); font-weight: 600; font-size: 0.88rem; }

/* Responsive */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-hero-actions { justify-content: flex-start; }
  .camp-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px; row-gap: 8px;
    padding: 12px 30px 12px 15px;
  }
  .camp-id     { grid-column: 1; grid-row: 1; }
  .camp-rate   { grid-column: 2; grid-row: 1; }
  .camp-action { grid-column: 1 / -1; grid-row: 2; }
  .camp-funnel { grid-column: 1 / -1; grid-row: 3; }
}

/* ──────────────────────────────────────────────────────────────────────
   Contacts redesign — claude.ai/design (h/UjatbRsnFfyRwyguL1Udbw)
   Adds the new dash-stats KPI strip variant, status chip row, search/
   filter bar, and rich contact table. Self-contained, reuses tokens.
   ────────────────────────────────────────────────────────────────────── */
.page.is-contacts { max-width: 1280px; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
  overflow: hidden;
  margin: 0 0 22px;
}
.dash-stat {
  position: relative;
  padding: 14px 18px 12px;
  border-left: 1px solid var(--line);
  display: grid; gap: 4px; min-width: 0;
}
.dash-stat:first-child { border-left: 0; }
.dash-stat.is-feature {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(23,107,135,0.07) 0%, rgba(23,107,135,0.00) 60%),
    var(--panel);
}
.dash-stat.is-feature::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.dash-stat-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.dash-stat-row {
  display: flex; align-items: baseline; gap: 12px; min-height: 36px;
}
.dash-stat-value {
  font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap;
}
.dash-stat-delta {
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--success-soft); color: var(--success);
  border: 1px solid var(--success-border); white-space: nowrap;
}
.dash-stat-sub {
  color: var(--muted); font-size: 0.8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status filter chip row */
.camp-filter-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.camp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 12px 4px 10px;
  background: #ffffff; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.84rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.camp-chip:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #bddbe0;
  text-decoration: none;
}
.camp-chip.is-active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #bddbe0;
  box-shadow: inset 0 0 0 1px #bddbe0;
}
.camp-chip .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #c8d2dd; display: inline-block;
}
.camp-chip.is-active     .dot { background: #c8d2dd; }
.camp-chip.is-replied    .dot { background: var(--accent); }
.camp-chip.is-suppressed .dot { background: var(--gold); }
.camp-chip.is-bounced    .dot { background: #c98787; }
.camp-chip-count {
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--muted);
  padding: 1px 7px; background: #f1f4f8; border-radius: 999px;
}
.camp-chip.is-active .camp-chip-count { background: #ffffff; color: var(--accent-dark); }

/* Search / filter bar */
.contact-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px; align-items: stretch;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
}
.contact-bar-search-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2px;
  min-width: 0;
}
.contact-bar-search-wrap > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
}
.contact-bar-search {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.contact-bar-search:focus-within {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23,107,135,0.1);
}
.contact-bar-search svg {
  width: 14px !important; height: 14px !important;
  fill: #94a2b3; transform: none;
}
.contact-bar-search input {
  width: 100%; border: 0; background: transparent;
  padding: 4px 0;
  font: inherit; font-size: 0.92rem; color: var(--ink);
  outline: none;
}
.contact-bar-search input::placeholder { color: #94a2b3; font-weight: 500; }
.contact-bar-clear {
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px; color: var(--muted); cursor: pointer;
  text-decoration: none;
}
.contact-bar-clear:hover { background: #eef1f5; color: var(--ink); text-decoration: none; }
.contact-bar-clear svg { width: 12px !important; height: 12px !important; transform: none; }

.contact-bar-select {
  display: grid; grid-template-rows: auto 1fr; gap: 2px; min-width: 0;
}
.contact-bar-select > span {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding-left: 2px;
}
.contact-bar-select select {
  width: 100%;
  padding: 6px 28px 6px 10px;
  font: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--ink);
  background: #ffffff;
  background-image:
    linear-gradient(45deg, transparent 50%, #7a8798 50%),
    linear-gradient(135deg, #7a8798 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 6px;
  appearance: none;
  min-height: 36px; cursor: pointer;
}
.contact-bar-select select:hover { border-color: #c8d8de; }
.contact-bar-select select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.contact-bar-clear-all {
  align-self: end;
  height: 36px;
  padding: 0 12px;
  background: transparent; border: 0;
  color: var(--muted); font-weight: 700; font-size: 0.84rem;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.contact-bar-clear-all:hover { background: #eef1f5; color: var(--ink); text-decoration: none; }
.contact-bar-clear-all svg { width: 12px !important; height: 12px !important; transform: none; }

/* Contacts panel + table */
.contacts-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(23,32,42,0.06); overflow: hidden; }

.contact-table-wrap { overflow-x: auto; }
/* min-width keeps the fixed columns from starving the Contact/Company columns
   to 0 on narrow screens; the wrap's overflow-x:auto scrolls instead. */
.contact-table { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; }
.contact-table th {
  text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}
.contact-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
  vertical-align: middle;
}
.contact-table tr:last-child td { border-bottom: 0; }
.contact-table tbody tr { transition: background 0.15s ease; }
.contact-table tbody tr:hover { background: #f7f9fb; }

/* Fixed column widths (combined with table-layout: fixed above) so the
   audience pill can't push Status / Actions off the right edge. Scoped to the
   contacts table only — .tpl-table (templates list) sets its own widths below.
   Columns: 1 Avatar | 2 Contact | 3 Company | 4 Audience | 5 Sent |
            6 Replies | 7 Status | 8 Actions. Columns 2 & 3 flex-fill. */
.contact-table:not(.tpl-table) th:nth-child(1),
.contact-table:not(.tpl-table) td:nth-child(1) { width: 44px; padding-right: 0; }
.contact-table:not(.tpl-table) th:nth-child(4),
.contact-table:not(.tpl-table) td:nth-child(4) { width: 180px; }
.contact-table:not(.tpl-table) th:nth-child(5),
.contact-table:not(.tpl-table) td:nth-child(5) { width: 64px; }
.contact-table:not(.tpl-table) th:nth-child(6),
.contact-table:not(.tpl-table) td:nth-child(6) { width: 64px; }
.contact-table:not(.tpl-table) th:nth-child(7),
.contact-table:not(.tpl-table) td:nth-child(7) { width: 96px; }
.contact-table:not(.tpl-table) th:last-child,
.contact-table:not(.tpl-table) td:last-child  { width: 144px; }

/* Templates list — reuses .contact-table look with its own column widths
   (the contacts nth-child widths above are scoped to bare .contact-table rows,
   so .tpl-table overrides them). Columns: 1 Template | 2 Status |
   3 Reply rate | 4 Last used | 5 Actions. Column 1 flex-fills. */
.tpl-table { min-width: 720px; }
.tpl-table th:nth-child(2),
.tpl-table td:nth-child(2) { width: 150px; }
.tpl-table th:nth-child(3),
.tpl-table td:nth-child(3) { width: 96px; text-align: right; }
.tpl-table th:nth-child(4),
.tpl-table td:nth-child(4) { width: 120px; }
.tpl-table th:last-child,
.tpl-table td:last-child  { width: 144px; }

.tpl-cell-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tpl-cell-id > div { min-width: 0; flex: 1 1 auto; }
/* The name is an <a> here (inline by default); make it block so the shared
   .contact-cell-name ellipsis actually truncates within the squeezed column. */
.tpl-cell-id .contact-cell-name { display: block; }

.tpl-expand {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer;
}
.tpl-expand:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: #d2e4ea; }
.tpl-expand .icon { width: 16px !important; height: 16px !important; transition: transform 0.2s ease; }
.tpl-row.is-open .tpl-expand .icon { transform: rotate(180deg); }
.tpl-row.is-open > td { background: #f7f9fb; }

.tpl-row-detail > td {
  background: #f7f9fb;
  border-bottom: 1px solid var(--line);
  padding: 4px 16px 18px 52px;
}
.tpl-detail { display: grid; gap: 14px; }
.tpl-detail-field { display: grid; gap: 4px; }
.tpl-detail-subject { font-weight: 600; color: var(--ink); }
.tpl-detail-body {
  white-space: pre-wrap;
  font-size: 0.9rem; line-height: 1.55; color: var(--ink);
}
.tpl-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpl-detail-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 0.78rem; color: var(--muted);
}
.tpl-detail-stat .lab { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; }
.tpl-detail-stat .val { font-weight: 800; color: var(--ink); font-size: 0.86rem; }
.tpl-detail-edit { margin-left: auto; }
.contact-cell-name {
  font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-cell-sub {
  color: var(--muted); font-size: 0.78rem; font-weight: 600;
  font-family: "IBM Plex Sans", sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-cell-num {
  text-align: right;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--ink);
}
.contact-cell-num.is-zero { color: var(--muted); font-weight: 400; }
.contact-cell-num.is-strong { font-weight: 700; }
.contact-cell-when {
  color: var(--muted); white-space: nowrap;
}

/* Avatars */
.contact-avatar {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 11px; letter-spacing: 0.02em;
  background: var(--d-oat-deep);
  color: var(--d-body-muted);
  border: 1px solid var(--d-stroke);
  flex: 0 0 auto; user-select: none;
}
.contact-avatar.is-teal,
.contact-avatar.is-sage,
.contact-avatar.is-sand,
.contact-avatar.is-slate,
.contact-avatar.is-muted { background: var(--d-oat-deep); color: var(--d-body-muted); border-color: var(--d-stroke); }
.contact-avatar.is-blocked { background: var(--d-orange-wash); color: var(--d-orange-deep); border-color: var(--d-orange-deep); }

.audience-pill {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f1f4f8;
  color: #44546b;
  font-size: 0.74rem; font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audience-pill::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #9aa7b5;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.audience-pill--compact {
  min-height: 0;
  padding: 1px 7px;
  margin-left: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.005em;
  background: transparent;
  vertical-align: 1px;
}
.audience-pill--compact::before { width: 4px; height: 4px; }

/* Expand-recipients picker table */
.expand-table-scroll {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
}
.expand-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.expand-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 11px 16px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--line);
}
.expand-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  vertical-align: middle;
}
.expand-table tbody tr:last-child td { border-bottom: 0; }
.expand-table tbody tr { transition: background 0.12s ease; }
.expand-table tbody tr:hover { background: #f7f9fb; }
.expand-table tbody tr.is-selected { background: var(--accent-soft); }
.expand-table th.expand-check-col,
.expand-table td.expand-check-col { width: 46px; text-align: center; padding-right: 6px; }
.expand-table th:nth-child(2), .expand-table td:nth-child(2) { width: 34%; }
.expand-table th:nth-child(3), .expand-table td:nth-child(3) { width: 28%; }
.expand-table th:nth-child(4), .expand-table td:nth-child(4) { width: 22%; }
.expand-table th:nth-child(5), .expand-table td:nth-child(5) { width: 16%; }
.expand-table td.contact-cell-when { color: var(--muted); font-size: 0.86rem; }
.expand-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.expand-table .contact-cell-id { cursor: pointer; margin: 0; }

.expand-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.expand-foot-actions { display: flex; gap: 16px; }
.expand-foot .cs-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent); font-weight: 800; font-size: 0.86rem;
  cursor: pointer;
}
.expand-foot .cs-link:hover { text-decoration: underline; }
.expand-foot .cs-link--muted { color: var(--muted); }

/* Empty state */
.camp-empty {
  padding: 56px 24px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  margin: 0;
}
.camp-empty strong {
  display: block; color: var(--ink);
  font-size: 1rem; font-weight: 700; margin-bottom: 4px;
}
.camp-empty p { margin: 0 0 12px; }
.camp-empty a {
  display: inline-block;
  background: transparent; color: var(--accent-dark);
  border: 1px solid var(--line);
  min-height: 32px; padding: 6px 12px;
  font-weight: 700; font-size: 0.86rem;
  border-radius: 6px; text-decoration: none;
}
.camp-empty a:hover { background: var(--accent-soft); border-color: #bddbe0; }

@media (max-width: 1180px) {
  .contact-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-bar-search-wrap { grid-column: 1 / -1; }
  .contact-bar-clear-all { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 900px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stat { border-left: 0; border-top: 1px solid var(--line); }
  .dash-stat:first-child, .dash-stat:nth-child(2) { border-top: 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   Contact detail — claude.ai/design (h/r-gNKJOigh-_-YAfpC_lYQ)
   Prefix: .cv-*  (contact view). Reuses tokens + .dash-ribbon block.
   ────────────────────────────────────────────────────────────────────── */
.page.is-contact-detail { max-width: 1320px; padding-bottom: 80px; }
.page.is-contact-detail > * + *,
.page.is-contact-detail > form > * + * { margin-top: 22px; }

.cv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 4px; flex-wrap: wrap;
}
.cv-toolbar .breadcrumbs { margin: 0; }

.cv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 24px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
}
.cv-hero-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px; min-width: 0;
}
.cv-avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #bddbe0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(23,107,135,0.12);
  user-select: none;
}
.cv-hero-title { min-width: 0; }
.cv-hero-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cv-hero-title h1 {
  margin: 4px 0 6px;
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.cv-hero-title p {
  margin: 0; color: var(--muted); font-size: 0.95rem;
}
.cv-hero-title p strong { color: var(--ink); font-weight: 700; }
.cv-hero-chips {
  display: flex; flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
}
.cv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #f1f4f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
  color: #44546b;
  text-decoration: none;
}
.cv-chip svg { width: 12px; height: 12px; fill: currentColor; }
.cv-chip.is-mono {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--accent-dark);
}
.cv-chip.is-mono:hover { background: var(--accent-soft); text-decoration: none; }
.cv-chip.is-state { padding-left: 8px; }
.cv-chip.is-state .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--muted);
}
.cv-chip.is-state.is-replied { background: var(--accent-soft); color: var(--accent-dark); border-color: #bddbe0; }
.cv-chip.is-state.is-replied .dot { background: var(--accent); }
.cv-chip.is-state.is-active { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.cv-chip.is-state.is-active .dot { background: var(--success); }
.cv-chip.is-state.is-suppressed { background: #fff7e1; color: #7a3d00; border-color: #f2d28a; }
.cv-chip.is-state.is-suppressed .dot { background: var(--gold); }
.cv-chip.is-state.is-bounced { background: #fff3f3; color: #a33a3a; border-color: #efcccc; }
.cv-chip.is-state.is-bounced .dot { background: #c98787; }

.cv-hero-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; align-self: end;
}
.cv-ribbon { margin: 0; }

.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.cv-grid-main { display: grid; gap: 22px; min-width: 0; }
.cv-grid-side { display: grid; gap: 22px; min-width: 0; }

/* Reusable card chrome to mirror .dash-card across the detail page */
.cv-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
  overflow: hidden;
}
.cv-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.cv-card-head .left { display: inline-flex; align-items: center; gap: 8px; }
.cv-card-head .left .ico {
  width: 22px; height: 22px; padding: 4px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cv-card-head .left .ico svg {
  width: 14px !important; height: 14px !important;
  transform: none; fill: currentColor;
}
.cv-card-head .left strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.cv-card-head .right { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.cv-card-body { padding: 16px 18px; }
.cv-card-body.is-flush { padding: 0; }

/* Identity defs grid */
.cv-defs {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cv-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: start;
  min-width: 0;
}
.cv-row:nth-child(odd) { border-right: 1px solid var(--line); }
.cv-row-full { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.cv-row.is-edit dt { margin-top: 11px; }
.cv-row dt {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 0;
}
.cv-row dt label { display: inline; cursor: pointer; }
.cv-row dd {
  margin: 0;
  font-size: 0.94rem; font-weight: 600; color: var(--ink);
  min-width: 0; display: grid; gap: 4px;
}
.cv-row dd.is-mono {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.88rem; letter-spacing: -0.005em;
}
.cv-em { color: #b8c1cd; font-weight: 600; }

.cv-input {
  width: 100%;
  padding: 8px 12px;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cv-input:hover { border-color: #c8d8de; }
.cv-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23,107,135,0.12);
}
.cv-input.is-mono {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.86rem; letter-spacing: -0.01em;
}
select.cv-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7a8798 50%),
    linear-gradient(135deg, #7a8798 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 12px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 30px;
  cursor: pointer;
}
.cv-hint { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.cv-checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.cv-checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Campaign history table */
.cv-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.cv-table th {
  text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}
.cv-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
  vertical-align: middle;
}
.cv-table tr:last-child td { border-bottom: 0; }
.cv-table .cv-num {
  text-align: right; font-weight: 700; color: var(--ink);
}
.cv-row-main { display: block; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-row-meta { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.cv-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-dark); font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  padding: 4px 8px; border-radius: 6px;
}
.cv-link:hover { background: var(--accent-soft); text-decoration: none; }
.cv-link svg { width: 12px; height: 12px; fill: currentColor; }

/* Activity log */
.cv-log {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.cv-log::before {
  content: "";
  position: absolute;
  left: 14px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--line) 0%, var(--line) 92%, transparent 100%);
  border-radius: 2px;
}
.cv-log-entry {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  padding: 6px 0 18px;
  position: relative;
}
.cv-log-entry:last-child { padding-bottom: 0; }
.cv-log-marker {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex: 0 0 auto;
  position: relative; z-index: 1;
}
.cv-log-marker svg {
  width: 14px !important; height: 14px !important;
  transform: none; fill: currentColor;
}
.cv-log-entry.is-sent .cv-log-marker {
  border-color: #bddbe0; background: var(--accent-soft); color: var(--accent);
}
.cv-log-entry.is-reply .cv-log-marker {
  border-color: var(--success-border); background: var(--success-soft); color: var(--success);
}
.cv-log-entry.is-auto .cv-log-marker {
  border-color: #f2d28a; background: #fff7e1; color: #b8860b;
}
.cv-log-entry.is-bounce .cv-log-marker {
  border-color: #efcccc; background: #fff3f3; color: #a33a3a;
}
.cv-log-entry.is-system .cv-log-marker {
  border-color: #e3e8ef; background: #f1f4f8;
}
.cv-log-body { min-width: 0; }
.cv-log-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.cv-log-title { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.cv-log-meta { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.cv-log-subject { font-size: 0.92rem; font-weight: 700; color: var(--ink); margin: 2px 0 4px; }
.cv-log-snippet {
  font-size: 0.86rem; color: var(--muted);
  font-weight: 500; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cv-log-text { font-size: 0.88rem; color: var(--ink); font-weight: 500; line-height: 1.55; }
.cv-log-quote {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-left: 3px solid var(--success);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem; font-weight: 500; color: #2c3a4a;
  line-height: 1.55;
}
.cv-log-entry.is-auto .cv-log-quote { border-left-color: var(--gold); }

/* Status + quick actions side card */
.cv-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.cv-status-pill {
  display: grid; gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fbfcfd;
  position: relative;
}
.cv-status-pill .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--muted);
  position: absolute; top: 14px; right: 14px;
  box-shadow: 0 0 0 3px rgba(184,193,205,0.30);
}
.cv-status-pill.is-active { background: var(--success-soft); border-color: var(--success-border); }
.cv-status-pill.is-active .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(26,122,92,0.18); }
.cv-status-pill.is-replied { background: var(--accent-soft); border-color: #bddbe0; }
.cv-status-pill.is-replied .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(23,107,135,0.18); }
.cv-status-pill.is-suppressed { background: #fff7e1; border-color: #f2d28a; }
.cv-status-pill.is-suppressed .dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,200,76,0.22); }
.cv-status-pill.is-invalid { background: #fff3f3; border-color: #efcccc; }
.cv-status-pill.is-invalid .dot { background: #b65f5f; box-shadow: 0 0 0 3px rgba(182,95,95,0.18); }
.cv-status-pill .lbl { font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.cv-status-pill.is-suppressed .lbl { color: #7a3d00; }
.cv-status-pill.is-invalid .lbl { color: #b65f5f; }
.cv-status-pill .sub { font-size: 0.76rem; font-weight: 600; color: var(--muted); }

.cv-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cv-quick-actions form { margin: 0; width: 100%; }
.cv-quick-actions form button,
.cv-quick-actions > a,
.cv-quick-actions > button {
  width: 100%;
  justify-content: flex-start;
  font-size: 0.82rem;
  padding: 8px 12px;
}
.cv-quick-actions .is-wide { grid-column: 1 / -1; }
.cv-quick-actions .is-danger {
  color: #a33a3a;
}
.cv-quick-actions .is-danger:hover {
  background: #fff3f3;
  border-color: #e9b6b6;
  color: #a33a3a;
}

/* Engagement card */
.cv-engage-spark {
  position: relative;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px 6px;
  margin-bottom: 12px;
}
.cv-engage-spark svg {
  display: block;
  width: 100%; height: 56px;
  overflow: visible;
}
.cv-engage-area { fill: var(--accent-soft); opacity: 0.7; }
.cv-engage-line {
  fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cv-engage-dot { fill: var(--accent); }
.cv-engage-legend {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.cv-engage-defs {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.cv-engage-defs > div { display: grid; gap: 2px; }
.cv-engage-defs dt {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.cv-engage-defs dd {
  margin: 0; font-size: 0.86rem;
  font-weight: 700; color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Source card */
.cv-source-defs { margin: 0; padding: 0; display: grid; gap: 10px; }
.cv-source-defs > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px; align-items: baseline;
}
.cv-source-defs dt {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.cv-source-defs dd {
  margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--ink);
}
.cv-source-defs dd.is-mono {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.82rem;
}

/* Sticky save bar (edit mode) */
.cv-savebar {
  position: fixed;
  left: 24px; right: 24px; bottom: 18px;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px 12px 18px;
  background: var(--ink); color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(23,32,42,0.32), 0 2px 8px rgba(23,32,42,0.18);
  animation: cv-savebar-in 200ms ease-out;
}
@keyframes cv-savebar-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cv-savebar-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: #f3f5f7;
}
.cv-savebar-text strong { color: #fff; font-weight: 700; }
.cv-savebar-actions { display: inline-flex; gap: 8px; }
.cv-savebar-actions .button.secondary,
.cv-savebar-actions a.button.secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #f3f5f7;
}
.cv-savebar-actions .button.secondary:hover,
.cv-savebar-actions a.button.secondary:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

@media (max-width: 1180px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cv-hero { grid-template-columns: minmax(0, 1fr); }
  .cv-hero-actions { justify-content: flex-start; }
  .cv-defs { grid-template-columns: minmax(0, 1fr); }
  .cv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cv-row:nth-child(odd) { border-right: 0; }
  .cv-row dt { margin: 0; }
  .cv-savebar { left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 8px; }
  .cv-savebar-actions { justify-content: flex-end; }
}

/* ──────────────────────────────────────────────────────────────────────
   Settings redesign — claude.ai/design (h/UXnhz8Dr5auUp02k6Fpbmw)
   Tabs · Senders · Security · System · Logs · Advanced.
   ────────────────────────────────────────────────────────────────────── */
/* ── Dispatch settings: sidebar + 190px section nav + content (frame 9a) ── */
.dash-shell.is-settings {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--d-paper);
}
.settings-nav {
  background: var(--d-oat);
  border-right: 1px dashed var(--d-stroke);
  padding: 20px 0;
}
.settings-nav-group {
  padding: 0 18px 10px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--d-muted);
}
.settings-nav-group--app {
  margin: 18px 18px 10px 18px;
  padding: 14px 0 0;
  border-top: 1px dashed var(--d-stroke);
}
.settings-nav-list { display: flex; flex-direction: column; }
.settings-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 8px 15px;
  border-left: 3px solid transparent;
  font-size: 13px; color: var(--d-body-muted);
  text-decoration: none;
}
.settings-nav-item:hover { background: var(--d-oat-deep); text-decoration: none; }
.settings-nav-item.is-active {
  background: var(--d-paper);
  border-left-color: var(--d-orange);
  font-weight: 600; color: var(--d-ink);
}
.settings-nav-item .settings-nav-badge {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--d-orange-deep); font-weight: 600;
}
.settings-nav-note {
  margin: 18px 18px 0;
  border-top: 1px dashed var(--d-stroke);
  padding-top: 14px;
  font-size: 11px; line-height: 17px; color: var(--d-muted);
}
.settings-nav-note span { color: var(--d-body-muted); overflow-wrap: anywhere; }

.settings-content { min-width: 0; }
.settings-content.page.is-settings { max-width: none; margin: 0; }
.settings-content.page.is-settings > * + * { margin-top: 0; }
.settings-page-header { border-bottom: 1px solid var(--d-muted); }

.settings-banner {
  margin: 0 26px 16px;
  border: 1px solid var(--d-stroke);
  border-left: 3px solid var(--d-orange-deep);
  background: var(--d-parchment);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.settings-banner-text { font-size: 12px; line-height: 18px; color: var(--d-body-muted); }
.settings-banner-tag {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--d-orange-deep); margin-right: 8px;
}

.settings-empty { padding: 26px; color: var(--d-muted); }

/* Mailbox health cards */
.mailbox-list { display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 8px; }
.mailbox-card {
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}
.mailbox-card.is-sending { border-color: var(--d-ink); }
.mailbox-card.is-broken { border-left: 3px solid var(--d-orange-deep); }
.mailbox-card.is-warming { border-left: 3px solid var(--d-amber); }
.mailbox-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 14px 16px;
}
.mailbox-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mailbox-avatar {
  flex: 0 0 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--d-oat-deep); border: 1px solid var(--d-stroke);
  color: var(--d-body-muted); font-size: 12px;
}
.mailbox-avatar.is-broken {
  background: var(--d-orange-wash); border-color: var(--d-orange-deep); color: var(--d-orange-deep);
}
.mailbox-title-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.mailbox-name { font-size: 15px; font-weight: 600; color: var(--d-ink); }
.mailbox-tag {
  padding: 1px 7px; background: var(--d-oat-deep); border: 1px solid var(--d-ink);
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-ink);
}
.mailbox-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 7px; border: 1px solid;
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.mailbox-status .led { width: 5px; height: 5px; }
.mailbox-status.is-sending { color: var(--d-green); border-color: var(--d-green); }
.mailbox-status.is-sending .led { background: var(--d-green); }
.mailbox-status.is-warming { color: var(--d-amber); border-color: var(--d-amber); }
.mailbox-status.is-warming .led { background: var(--d-amber); }
.mailbox-status.is-broken { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.mailbox-status.is-broken .led { background: var(--d-orange-deep); }
.mailbox-sub { font-size: 12px; color: var(--d-muted); margin-top: 2px; overflow-wrap: anywhere; }
.mailbox-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.mailbox-head-actions form { margin: 0; }

.mailbox-consequence {
  margin: 0 16px 12px;
  border: 1px solid var(--d-stroke-light);
  background: var(--d-parchment);
  padding: 9px 12px;
  font-size: 12px; line-height: 18px; color: var(--d-body-muted);
  text-wrap: pretty;
}
.mailbox-consequence strong { color: var(--d-ink); }

.mailbox-health {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  padding: 12px 16px;
  background: var(--d-parchment);
  border-top: 1px dashed var(--d-stroke-light);
}
.mailbox-metric { min-width: 0; }
.mailbox-metric-label {
  display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted);
}
.mailbox-metric-value {
  display: block; font-size: 16px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--d-ink); margin-top: 2px;
}
.mailbox-metric-value.is-ok { color: var(--d-green); }
.mailbox-metric-value.is-warn { color: var(--d-amber); }
.mailbox-metric-value.is-broken { color: var(--d-orange-deep); }
.mailbox-metric-value.is-muted { color: var(--d-muted); }

/* In-card editor tabs */
.mbtab-strip { display: flex; gap: 0; margin-bottom: 4px; }
.mbtab {
  padding: 6px 13px;
  border: 1px solid var(--d-stroke); border-left: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-body-muted); background: var(--d-paper); cursor: pointer;
}
.mbtab:first-child { border-left: 1px solid var(--d-stroke); }
.mbtab:hover { background: var(--d-oat-deep); }
.mbtab.is-active { background: var(--d-oat-deep); border-color: var(--d-ink); color: var(--d-ink); }
.mbtab-panel[hidden] { display: none; }
/* Env-var-style keys under toggles are dropped from the mailbox editor in
   favour of plain language (frame 9a) — the toggle label already says what it
   does. Field-level keys stay: here they carry help text, not raw env names. */
.identity-editor-form .settings-toggle-key { display: none; }

.settings-footer { margin-top: 8px; }
@media (max-width: 720px) {
  .dash-shell.is-settings { grid-template-columns: 1fr; }
  .settings-nav { border-right: 0; border-bottom: 1px dashed var(--d-stroke); }
  .mailbox-health { grid-template-columns: repeat(2, 1fr); }
}

.page.is-settings { max-width: 1180px; margin: 0 auto; padding: 0; }
.page.is-settings > * + * { margin-top: 22px; }

.settings-inline-code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--accent-soft);
  border: 1px solid #bddbe0;
  border-radius: 4px;
  color: var(--accent-dark);
}

/* Tabs row — pill switcher */
.settings-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.04);
}
.settings-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.settings-tabs a:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
  text-decoration: none;
}
.settings-tabs a.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 10px rgba(23,107,135,0.18);
}
.settings-tabs a svg { width: 14px; height: 14px; fill: currentColor; }

/* Senders panel */
.senders-panel .dash-panel-head { padding: 14px 22px; }
.sender-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
@media (max-width: 900px) { .sender-card-list { grid-template-columns: 1fr; } }

.sender-card {
  position: relative;
  display: grid; gap: 14px;
  padding: 18px 18px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.sender-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px; background: transparent;
  border-radius: 10px 0 0 10px;
}
.sender-card.is-default::before { background: var(--accent); }
.sender-card.is-inactive {
  background: #fbfcfd;
  border-style: dashed;
}
.sender-card.is-inactive .sender-card-id h3,
.sender-card.is-inactive .sender-card-id p { color: var(--muted); }
.sender-card:hover { border-color: #c8d8de; }

.sender-card-head {
  display: flex; align-items: start; justify-content: space-between; gap: 14px;
}
.sender-card-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sender-card-id h3 {
  margin: 0; font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em; color: var(--ink); line-height: 1.25;
}
.sender-card-id p {
  margin: 2px 0 0; font-size: 13px; color: var(--muted);
  overflow-wrap: anywhere;
}
.sender-card-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; flex-shrink: 0;
}

.sender-prov {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
.sender-prov.is-gmail {
  background: #fff; color: #ea4335;
  border: 1px solid #f1d6d3;
  box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(234,67,53,0.10);
}
.sender-prov.is-smtp {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid #bddbe0;
}
.sender-prov.is-m365 {
  background: #fff; color: #0078d4;
  border: 1px solid #cfe4f7;
  box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(0,120,212,0.10);
}
.sender-prov svg { width: 18px; height: 18px; fill: currentColor; }

.sender-status-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  padding: 12px 14px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
@media (max-width: 520px) { .sender-status-grid { grid-template-columns: 1fr; } }
.sender-status-row {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  font-size: 13px;
  min-height: 22px;
}
.sender-status-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #c8d3df;
  transform: translateY(-1px);
}
.sender-status-row.is-ok .sender-status-dot { background: var(--green); }
.sender-status-row.is-warn .sender-status-dot { background: var(--warn); }
.sender-status-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.sender-status-value {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; min-width: 0;
}
.sender-status-hint {
  grid-column: 2 / 4;
  font-size: 11px;
  color: var(--muted);
  margin-top: -2px;
}

/* ── Deliverability check (Settings) ── */
.deliv-form {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.deliv-form-field { flex: 1 1 320px; min-width: 0; }
.deliv-quick { margin: 4px 0 18px; }
.deliv-quick-label {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.deliv-quick-links { display: flex; flex-wrap: wrap; gap: 8px; }

.deliv-risk {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line);
  font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.deliv-risk-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--muted); flex: none; }
.deliv-risk-domain { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 13px; }
.deliv-risk.is-low { background: rgba(47,157,143,0.10); border-color: rgba(47,157,143,0.35); }
.deliv-risk.is-low .deliv-risk-dot { background: var(--green); }
.deliv-risk.is-moderate { background: rgba(245,200,76,0.16); border-color: rgba(245,200,76,0.5); }
.deliv-risk.is-moderate .deliv-risk-dot { background: var(--gold); }
.deliv-risk.is-high { background: rgba(163,58,58,0.08); border-color: rgba(163,58,58,0.32); }
.deliv-risk.is-high .deliv-risk-dot { background: var(--warn); }

.deliv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.deliv-row {
  display: grid; grid-template-columns: 10px 1fr; column-gap: 10px;
  padding: 12px 14px;
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px;
}
.deliv-dot { width: 8px; height: 8px; border-radius: 999px; background: #c8d3df; margin-top: 5px; }
.deliv-row.is-ok .deliv-dot { background: var(--green); }
.deliv-row.is-warn .deliv-dot { background: var(--gold); }
.deliv-row.is-fail .deliv-dot { background: var(--warn); }
.deliv-row-main { min-width: 0; }
.deliv-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.deliv-row-name { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.deliv-row-status {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; color: #fff;
}
.deliv-row-status.is-ok { background: var(--green); }
.deliv-row-status.is-warn { background: var(--gold); color: #6a4b00; }
.deliv-row-status.is-fail { background: var(--warn); }
.deliv-row-summary { font-size: 13px; font-weight: 600; color: var(--ink); }
.deliv-row-record {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--muted);
  background: #f1f4f8; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; overflow-wrap: anywhere; white-space: pre-wrap;
}
.deliv-row-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.deliv-foot { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

.sender-card-foot { display: grid; gap: 12px; }
.sender-foot-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px;
}
.sender-foot-meta > div { min-width: 0; }
.sender-foot-meta dt {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.sender-foot-meta dd {
  margin: 1px 0 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sender-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sender-card-actions form { margin: 0; }
.sender-card-actions .compact-button {
  font-size: 12px; padding: 6px 10px; white-space: nowrap;
}
.sender-card-actions .danger {
  margin-left: auto;
  color: var(--warn);
  background: #fff;
  border-color: #efcccc;
}
.sender-card-actions .danger:hover { background: #f7eaea; color: #7b2a2a; }

.settings-stale-notice {
  display: flex; align-items: start; gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  background: #fffbef;
  border: 1px solid #f3deaa;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  color: #573b00;
}
.settings-stale-notice svg { width: 18px; height: 18px; fill: var(--gold); margin-top: 2px; flex: 0 0 auto; }
.settings-stale-notice strong { display: block; margin-bottom: 2px; color: #4a3200; }
.settings-stale-notice span { font-size: 13px; line-height: 1.45; }

/* Form panel (Security / System) */
.settings-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px; align-items: start;
}
@media (max-width: 960px) { .settings-twocol { grid-template-columns: 1fr; } }

.settings-form-panel { overflow: visible; }
.settings-form-panel .dash-panel-head { padding: 14px 22px; }
.settings-form-panel .dash-panel-title { display: inline-flex; align-items: center; gap: 8px; }
.settings-form-panel .dash-panel-title svg { width: 14px; height: 14px; fill: currentColor; }

.settings-form-body { padding: 22px 26px 26px; display: grid; gap: 24px; }
.settings-form-intro { margin: 0; color: var(--muted); font-size: 13.5px; }
.settings-form-section + .settings-form-section {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.settings-form-section h3 {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.settings-field {
  display: grid; gap: 6px;
  padding: 10px 12px 12px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-field:focus-within {
  background: #fff;
  border-color: #bddbe0;
  box-shadow: 0 0 0 3px rgba(23,107,135,0.1);
}
.settings-field-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--ink); font-weight: 700;
}
.settings-field-tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: #eef2f6; color: var(--muted);
}
.settings-field-tag.is-ok { background: var(--success-soft); color: var(--success); }
.settings-field input,
.settings-field select,
.settings-field textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit; font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff; color: var(--ink);
}
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.settings-field input[readonly] { color: var(--muted); background: #f1f4f8; }
.settings-field-key {
  font-size: 10.5px;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.settings-field-error {
  font-size: 12px;
  color: var(--warn);
  font-weight: 700;
}

.settings-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}
.settings-toggle:hover { border-color: #c8d8de; }
.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.settings-toggle-track {
  width: 32px; height: 18px;
  border-radius: 999px;
  background: #cdd5e0;
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.settings-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.15s ease;
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--accent); }
.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(14px);
}
.settings-toggle-copy { display: grid; gap: 1px; min-width: 0; }
.settings-toggle-label { font-size: 13px; color: var(--ink); font-weight: 700; }
.settings-toggle-key {
  font-size: 10.5px;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--muted); letter-spacing: 0.02em;
}

.working-days-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.working-day-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fbfcfd;
  font-size: 13px; font-weight: 700; color: var(--muted);
  cursor: pointer; user-select: none; position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.working-day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.working-day-chip:hover { border-color: #c8d8de; }
.working-day-chip:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark);
}

.settings-form-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.settings-help-block {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid #bddbe0;
  border-left: 4px solid var(--accent);
  color: #1d3441;
  margin-bottom: 14px;
}
.settings-help-block p { margin: 0 0 6px; }
.settings-help-block ol { margin: 6px 0 0 18px; padding: 0; }
.settings-help-block strong { color: var(--accent-dark); }
.settings-help-block code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.85em;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid #bddbe0;
  border-radius: 4px;
  color: var(--accent-dark);
  overflow-wrap: anywhere;
}

.settings-side {
  display: grid; gap: 14px;
  position: sticky; top: 18px;
}
.settings-side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.04);
  display: grid; gap: 10px;
}
.settings-side-card.is-muted { background: #fbfcfd; box-shadow: none; }
.settings-side-card.is-muted p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.settings-side-card.is-muted code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.88em;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.settings-side-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.settings-side-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.settings-side-list li {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: center; gap: 8px;
  font-size: 13px;
}
.settings-side-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #c8d3df;
}
.settings-side-list li.is-ok .settings-side-dot { background: var(--green); }
.settings-side-list li.is-muted .settings-side-dot { background: #c8d3df; }
.settings-side-label { color: var(--muted); font-weight: 600; }
.settings-side-value {
  text-align: right; color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Logs */
.logs-panel { overflow: visible; }
.logs-head { padding: 14px 18px 14px 22px; flex-wrap: wrap; row-gap: 10px; }
.logs-filter {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.logs-filter a,
.logs-filter button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.logs-filter a:hover, .logs-filter button:hover {
  color: var(--accent-dark); background: var(--accent-soft); text-decoration: none;
}
.logs-filter .is-active {
  color: var(--ink); background: #fff;
  box-shadow: 0 1px 3px rgba(23,32,42,0.08);
}
.logs-filter .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--muted);
}
.logs-filter .is-info .dot { background: var(--accent); }
.logs-filter .is-warn .dot { background: var(--gold); }
.logs-filter .is-error .dot { background: var(--warn); }
.logs-filter-count {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  background: #eef2f6; border-radius: 999px;
  color: var(--muted);
}
.logs-filter .is-active .logs-filter-count { background: var(--accent-soft); color: var(--accent); }

.logs-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 22px;
  font-size: 12.5px; color: var(--muted);
  background: #fbfcfd;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Sans", sans-serif;
}
.logs-meta strong { color: var(--ink); margin-right: 4px; }

.logs-stream {
  list-style: none; margin: 0;
  padding: 4px 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px; line-height: 1.55;
  max-height: 540px;
  overflow: auto;
  background: #fff;
}
.logs-row {
  display: grid;
  grid-template-columns: 130px 64px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 4px 22px;
  border-left: 3px solid transparent;
}
.logs-row.is-warn  { background: rgba(245,200,76,0.05); border-left-color: rgba(245,200,76,0.35); }
.logs-row.is-error { background: rgba(163,58,58,0.05); border-left-color: rgba(163,58,58,0.55); }
.logs-row:hover { background: #f7f9fb; }
.logs-row-ts {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.logs-row-level {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  text-align: center;
  background: #eef2f6;
  color: var(--muted);
  justify-self: start;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.logs-row-level.is-info  { background: var(--accent-soft); color: var(--accent-dark); }
.logs-row-level.is-warn  { background: #fff4d6; color: #7a5500; }
.logs-row-level.is-error { background: #f9e6e6; color: #7b2a2a; }
.logs-row-msg { color: var(--ink); overflow-wrap: anywhere; }

/* Advanced */
.advanced-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
@media (max-width: 760px) { .advanced-body { grid-template-columns: 1fr; } }
.advanced-card {
  display: grid; gap: 8px;
  padding: 18px 20px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.advanced-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.advanced-card p code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.88em;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
}
.advanced-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent);
}
.advanced-list {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 6px;
  font-size: 13px;
}
.advanced-list li { display: flex; align-items: center; gap: 8px; }
.advanced-list em { font-style: normal; color: var(--muted); margin-left: auto; font-weight: 600; }
.advanced-list-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #c8d3df;
}
.advanced-list-dot.is-ok    { background: var(--green); }
.advanced-list-dot.is-muted { background: #c8d3df; }
.advanced-foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 6px;
}
.advanced-foot form { margin: 0; }
.advanced-card .compact-button.danger {
  color: var(--warn);
  background: #fff;
  border-color: #efcccc;
}
.advanced-card .compact-button.danger:hover { background: #f7eaea; color: #7b2a2a; }

/* ── Settings control centre: final Dispatch pass ───────────────────────
   This intentionally lives after the earlier Settings experiment so it can
   retire its rounded, shadowed chrome without changing any other surface. */
.mobile-app-header { display: none; }
.mobile-nav-backdrop:not([hidden]) { display: none; }
.dash-shell.is-settings {
  grid-template-columns: 216px minmax(0, 1fr);
  min-width: 0;
}
.settings-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 0 28px;
  background: var(--d-oat);
  border-right: 1px dashed var(--d-stroke);
}
.settings-nav-group { padding: 0 16px 8px; color: var(--d-muted); }
.settings-nav-group--app { margin: 17px 16px 9px; padding: 14px 0 0; }
.settings-nav-item {
  min-height: 44px;
  padding: 10px 16px 10px 13px;
  color: var(--d-body-muted);
}
.settings-nav-item:hover { color: var(--d-ink); background: var(--d-parchment); }
.settings-nav-item.is-active { background: var(--d-paper); border-left-color: var(--d-orange); }
.settings-content.page.is-settings { width: 100%; max-width: 1240px; }
.settings-page-header {
  min-height: 92px;
  padding: 22px 28px 18px;
  background: var(--d-paper);
  border-bottom: 1px solid var(--d-ink);
  box-shadow: none;
}
.settings-section-picker { display: none; }
/* Horizontal inset removed so the overview aligns with the flush panel tabs
   (Data & backup); the top inset moves to the shared header-gap rule below. */
.settings-overview { padding: 0 0 42px; }
.settings-overview-header { max-width: 700px; padding-bottom: 20px; border-bottom: 1px dashed var(--d-stroke); }
.settings-overview-header h2 { margin: 3px 0 8px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; color: var(--d-ink); }
.settings-overview-header p:not(.page-eyebrow) { margin: 0; color: var(--d-body-muted); line-height: 1.5; }
.settings-overview > section[aria-labelledby="attention-heading"] { margin-top: 22px; border: 1px solid var(--d-stroke); border-left: 3px solid var(--d-orange); padding: 15px 17px; background: var(--d-parchment); }
.settings-overview > section h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.settings-attention-list { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--d-body-muted); }
.settings-attention-list a { color: var(--d-ink); font-weight: 600; }
.settings-all-ready { margin: 22px 0 0; border: 1px solid var(--d-green); padding: 14px 16px; color: var(--d-ink); background: var(--d-parchment); }
.settings-all-ready::before { content: "Ready · "; color: var(--d-green); font-weight: 600; }
.settings-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.settings-summary-card { display: grid; min-height: 132px; align-content: space-between; padding: 16px; border: 1px solid var(--d-stroke); background: var(--d-paper); color: var(--d-ink); text-decoration: none; }
.settings-summary-card:hover { background: var(--d-parchment); border-color: var(--d-ink); text-decoration: none; }
.settings-summary-card h3 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.settings-summary-card p { margin: 20px 0 0; color: var(--d-body-muted); font-size: 13px; line-height: 1.45; }

/* Vertical-only: the banner's own bottom margin now carries the gap down to
   the mailbox list, which lost its top padding along with its side inset. */
.settings-banner { margin: 20px 0; border-radius: 0; }
.mailbox-list { padding: 0 0 12px; gap: 12px; }
.mailbox-card, .settings-form-panel, .settings-side-card, .settings-help-block,
.settings-field, .settings-toggle, .working-day-chip, .settings-tabs,
.sender-card, .sender-status-grid, .deliv-risk, .deliv-row, .advanced-card { border-radius: 0; box-shadow: none; }
.mailbox-head { padding: 16px; }
.mailbox-head-actions .button, .mailbox-detail .button { min-height: 38px; }
.mailbox-health { gap: 12px; }
.mailbox-metric-value.is-ok, .mailbox-metric-value.is-warn, .mailbox-metric-value.is-broken { color: var(--d-ink); }
.mailbox-metric-value.is-ok::after { content: " · normal"; color: var(--d-green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mailbox-metric-value.is-warn::after { content: " · watch"; color: var(--d-amber); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mailbox-metric-value.is-broken::after { content: " · paused"; color: var(--d-orange-deep); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mailbox-detail { margin: 22px 0 0; }
.settings-form-body { padding: 22px 26px 28px; }
.settings-form-section + .settings-form-section { border-color: var(--d-stroke); }
.settings-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.settings-field, .settings-toggle { background: var(--d-paper); border-color: var(--d-stroke); }
.settings-field:focus-within, .settings-toggle:has(input:focus-visible) { background: var(--d-parchment); border-color: var(--d-ink); box-shadow: none; }
.settings-field input, .settings-field select, .settings-field textarea { min-height: 40px; border-radius: 0; border-color: var(--d-stroke); background: var(--d-paper); }
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus { outline: 2px solid var(--d-orange); outline-offset: 2px; border-color: var(--d-ink); }
.settings-toggle { min-height: 52px; }
.settings-toggle input:focus-visible + .settings-toggle-track, .working-day-chip:has(input:focus-visible) { outline: 2px solid var(--d-orange); outline-offset: 3px; }
.settings-toggle-track, .settings-toggle-thumb, .working-day-chip { border-radius: 0; box-shadow: none; }
.settings-toggle input:checked + .settings-toggle-track { background: var(--d-ink); }
.working-day-chip { min-height: 40px; border-color: var(--d-stroke); }
.working-day-chip:has(input:checked) { background: var(--d-parchment); border-color: var(--d-ink); color: var(--d-ink); }
.settings-help-block { background: var(--d-parchment); border-color: var(--d-stroke); border-left-color: var(--d-orange); color: var(--d-body-muted); }
.settings-help-block strong { color: var(--d-ink); }
.mbtab { min-height: 40px; border-radius: 0; }
.mbtab:focus-visible, .settings-nav-item:focus-visible, .settings-summary-card:focus-visible,
.settings-section-picker summary:focus-visible, .mobile-nav-toggle:focus-visible { outline: 2px solid var(--d-orange); outline-offset: 2px; }
.mbtab.is-active { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-paper); }
.settings-form-actions { border-color: var(--d-stroke); }
.settings-save-bar.is-dirty, .settings-form-actions:has(.settings-dirty-message:not([hidden])) { position: sticky; bottom: 0; z-index: 20; margin: 8px -26px -28px; padding: 12px 26px; background: var(--d-paper); border-top: 1px solid var(--d-ink); }
.settings-dirty-message { font-weight: 600; color: var(--d-ink); }
.settings-dirty-message:not([hidden])::before { content: "● "; color: var(--d-orange); }
.settings-twocol { margin: 22px 0 0; }

/* ── One gap under the settings title, on every tab ─────────────────────
   `.settings-content.page.is-settings > * + * { margin-top: 0 }` (see the
   earlier settings block) deliberately kills stacking margins so panels can
   sit flush against each other. That also welded the first panel of each tab
   straight onto the title rule. This re-opens exactly one seam — the one
   directly under the header — and nothing else. Four classes beat the
   three-class killer on specificity, and it is later in source order too.
   The wrappers above (twocol / banner / mailbox-detail) keep their own
   margin-top for the not-first-sibling case; where they ARE first this rule
   replaces it rather than adding to it, so the gap stays 22px, never 44. */
.settings-content.page.is-settings > .settings-page-header + * { margin-top: 22px; }

.settings-side-card { border-color: var(--d-stroke); background: var(--d-paper); }
.settings-side-dot { border-radius: 0; }
.op-table-wrap, .table-wrap { overscroll-behavior-inline: contain; }
.logs-stream { border: 1px solid var(--d-stroke); border-radius: 0; }
.logs-row { min-width: 620px; }
.notice-toast { z-index: 80; }

/* Tablet trades the permanent rail for the compact native disclosure. */
@media (max-width: 1099px) {
  .dash-shell.is-settings { display: flow-root; }
  .settings-nav { display: none; }
  .settings-section-picker { display: block; position: relative; z-index: 25; margin: 14px 22px 0; border: 1px solid var(--d-stroke); background: var(--d-paper); }
  .settings-section-picker summary { min-height: 44px; display: flex; align-items: center; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--d-ink); }
  .settings-section-picker nav { display: grid; padding: 0 0 8px; border-top: 1px dashed var(--d-stroke); }
  .settings-section-picker nav a { min-height: 40px; padding: 10px 14px; border-left: 3px solid transparent; color: var(--d-body-muted); }
  .settings-section-picker nav a[aria-current="page"] { border-left-color: var(--d-orange); background: var(--d-parchment); color: var(--d-ink); }
  .settings-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The app sidebar must never consume the 390px content width. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .mobile-app-header { position: fixed; inset: 0 0 auto; z-index: 70; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--d-ink); border-bottom: 1px solid var(--d-orange); }
  .mobile-app-header .brand { padding: 0; }
  .mobile-nav-toggle { min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(244,241,234,.55); background: transparent; color: var(--d-oat); font: 500 12px/1 "IBM Plex Sans", sans-serif; }
  .mobile-nav-backdrop:not([hidden]) { position: fixed; inset: 56px 0 0; z-index: 75; display: block; background: rgba(20, 28, 29, .5); }
  .sidebar { z-index: 76; width: min(88vw, 320px); transform: translateX(-102%); transition: transform .18s ease; box-shadow: none; }
  .sidebar.is-mobile-open { transform: translateX(0); }
  .page { width: 100%; min-width: 0; margin-left: 0; padding: 56px 0 0; }
  .dash-shell.is-settings { min-width: 0; }
  .settings-section-picker { margin: 12px 14px 0; }
  .settings-content.page.is-settings { width: 100%; min-width: 0; padding: 0; }
  .settings-page-header { min-height: 0; padding: 18px 14px 14px; gap: 12px; flex-wrap: wrap; }
  .settings-page-header h1 { font-size: 26px; }
  .page-actions { width: 100%; }
  .page-actions .button { width: 100%; justify-content: center; min-height: 44px; }
  .settings-overview, .mailbox-list { padding-left: 14px; padding-right: 14px; }
  /* Top offset comes from the shared header-gap rule; only the mobile
     bottom inset differs from desktop. */
  .settings-overview { padding-bottom: 30px; }
  .settings-summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .settings-summary-card { min-height: 104px; }
  .settings-banner, .mailbox-detail, .settings-twocol { margin-left: 14px; margin-right: 14px; }
  .mailbox-head { display: grid; gap: 14px; }
  .mailbox-head-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mailbox-head-actions > *, .mailbox-head-actions .button { width: 100%; }
  .mailbox-health { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; }
  .mailbox-health .mailbox-metric:last-child { grid-column: 1 / -1; }
  .settings-form-body { padding: 18px 14px 24px; gap: 20px; }
  .settings-grid, .settings-twocol { grid-template-columns: 1fr; }
  .settings-field, .settings-toggle { min-width: 0; }
  .working-days-row { gap: 6px; }
  .working-day-chip { flex: 1 0 40px; padding-inline: 8px; }
  .mbtab-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mbtab { min-width: 0; padding: 8px 4px; font-size: 10px; }
  .settings-form-actions { align-items: stretch; flex-direction: column; }
  .settings-form-actions .button { min-height: 44px; justify-content: center; }
  .settings-save-bar.is-dirty, .settings-form-actions:has(.settings-dirty-message:not([hidden])) { bottom: 0; z-index: 60; margin: 8px -14px -24px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .op-table-wrap, .table-wrap { width: 100%; overflow-x: auto; }
  .op-table { min-width: 620px; }
  .logs-stream { overflow-x: auto; }
  .notice-toast { z-index: 90; max-width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .settings-field, .settings-toggle, .settings-toggle-track, .settings-toggle-thumb,
  .working-day-chip, .notice-toast { transition: none !important; animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   Campaign Setup redesign — claude.ai/design (h/igwKJioXGuBc5NRHYbS1YQ)
   Wizard flow (Setup → Recipients → Review). Prefix: .cs-*
   ────────────────────────────────────────────────────────────────────── */
/* Campaign wizard shell (frames 4a/4b/4c). Full-height column: header,
   step nav, body grid, sticky-feeling footer bar. Prefix: .cs-* */
.cs-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.cs-shell > .page-header { flex: 0 0 auto; }
.cs-header-note { font-size: 12px; color: var(--d-body-muted); margin-top: 3px; }
.cs-kpi-sub { font-size: 13px; font-weight: 400; color: var(--d-muted); }

/* ── Step header ── */
.cs-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--d-ink);
  border-bottom: 1px solid var(--d-ink);
}
.cs-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--d-paper);
  color: var(--d-ink);
  text-decoration: none;
  border-left: 1px solid var(--d-stroke-light);
  border-bottom: 3px solid transparent;
}
.cs-step:first-child { border-left: 0; }
.cs-step.is-upcoming, .cs-step.is-locked { color: var(--d-faint); }
.cs-step.is-done:hover, .cs-step.is-upcoming:hover { background: var(--d-parchment); text-decoration: none; }
.cs-step.is-active {
  background: var(--d-parchment);
  border-bottom-color: var(--d-orange);
}
.cs-step.is-locked { cursor: not-allowed; }
.cs-step-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--d-ink);
  color: var(--d-ink);
  background: var(--d-paper);
}
.cs-step.is-active .cs-step-num { background: var(--d-orange); border-color: var(--d-orange); color: var(--d-paper); }
.cs-step.is-upcoming .cs-step-num, .cs-step.is-locked .cs-step-num { border-style: dashed; border-color: var(--d-stroke); color: var(--d-faint); }
.cs-step-check { font-size: 13px; line-height: 1; }
.cs-step-copy { display: grid; gap: 2px; min-width: 0; }
.cs-step-label { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cs-step.is-upcoming .cs-step-label, .cs-step.is-locked .cs-step-label { color: var(--d-faint); }
.cs-step-sub { font-size: 11px; color: var(--d-muted); }
.cs-step.is-upcoming .cs-step-sub, .cs-step.is-locked .cs-step-sub { color: var(--d-faint); }

/* ── Body grids ── */
.cs-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
}
.cs-body--setup  { grid-template-columns: minmax(0, 1fr) 400px; }
.cs-body--rec    { grid-template-columns: 300px minmax(0, 1fr); }
.cs-body--review { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) {
  .cs-body--setup, .cs-body--rec, .cs-body--review { grid-template-columns: minmax(0, 1fr); }
}

.cs-form-col {
  min-width: 0;
  padding: 20px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-review-col {
  min-width: 0;
  padding: 18px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Right rail (preview / audience / pre-flight) ── */
.cs-rail {
  min-width: 0;
  background: var(--d-oat);
  border-left: 1px dashed var(--d-stroke);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-body--rec .cs-rail { border-left: 0; border-right: 1px dashed var(--d-stroke); }
.cs-rail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cs-rail-note { font-size: 11px; color: var(--d-muted); font-variant-numeric: tabular-nums; }

/* ── Section (form blocks) ── */
.cs-section { display: flex; flex-direction: column; gap: 14px; }
.cs-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dashed var(--d-stroke);
  padding-bottom: 7px;
}
.cs-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-ink);
}
.cs-section-note { font-size: 12px; color: var(--d-muted); margin-right: auto; }

.cs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .cs-grid-2, .cs-grid-3 { grid-template-columns: 1fr; } }

.cs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cs-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.cs-field input[type="text"],
.cs-field input:not([type]),
.cs-field select,
.cs-field textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
  font: 400 13px/1.4 "IBM Plex Sans";
  color: var(--d-ink);
}
.cs-field textarea { line-height: 20px; resize: vertical; }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus {
  border-color: var(--d-ink);
  outline: none;
}
.cs-hint { font-size: 11px; line-height: 16px; color: var(--d-muted); }

.cs-checkgroup { display: flex; flex-direction: column; gap: 6px; }
/* Sender-rotation pool: two-up grid of name + muted email, grouped like a field. */
.cs-checkgroup--identities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  padding: 10px 12px;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
}
.cs-check-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--d-body-muted); font-weight: 400; min-width: 0; }
.cs-check-line input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.cs-check-name { color: var(--d-ink); white-space: nowrap; }
.cs-check-email {
  min-width: 0;
  font-size: 11px;
  color: var(--d-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) { .cs-checkgroup--identities { grid-template-columns: minmax(0, 1fr); } }

.cs-opt { display: flex; gap: 9px; cursor: pointer; }
.cs-opt input { margin-top: 2px; }
.cs-opt-t { display: block; font-size: 13px; font-weight: 500; color: var(--d-ink); }
.cs-opt-d { display: block; font-size: 11px; line-height: 16px; color: var(--d-muted); }

.cs-brief-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Sequence rail ── */
.cs-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-seq-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; }
.cs-seq-step.is-followup .cs-seq-wait { grid-column: 1 / -1; }
.cs-seq-rail { display: flex; justify-content: center; }
.cs-seq-node {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--d-ink); color: var(--d-paper);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cs-seq-node.is-outline { background: var(--d-paper); border: 1px solid var(--d-ink); color: var(--d-ink); font-weight: 500; }
.cs-seq-box {
  border: 1px solid var(--d-stroke-light);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.cs-seq-step.is-initial .cs-seq-box { border: 1px solid var(--d-ink); border-left: 3px solid var(--d-orange); background: var(--d-parchment); }
.cs-seq-step.is-selected.is-followup .cs-seq-box { border-color: var(--d-ink); }
.cs-seq-row { display: flex; align-items: center; gap: 8px; }
.cs-seq-title { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cs-seq-day {
  margin-left: auto;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--d-muted);
}
.cs-seq-step.is-initial .cs-seq-day { color: var(--d-orange); }
.cs-seq-rm {
  border: 0; background: transparent; color: var(--d-faint);
  font-size: 15px; line-height: 1; padding: 0 2px; min-height: 0; cursor: pointer;
}
.cs-seq-rm:hover { background: transparent; color: var(--d-orange-deep); }
.cs-seq-box select {
  width: 100%; padding: 7px 10px;
  background: var(--d-paper); border: 1px solid var(--d-stroke);
  font: 400 13px/1.4 "IBM Plex Sans"; color: var(--d-ink);
}
.cs-seq-subj { font-size: 12px; color: var(--d-body-muted); }
.cs-seq-subj:empty { display: none; }

.cs-seq-wait { display: grid; grid-template-columns: 26px auto auto; align-items: center; column-gap: 14px; padding: 8px 0; }
.cs-seq-connector { display: block; width: 1px; height: 34px; border-left: 1px dashed var(--d-stroke); margin: 0 auto; }
.cs-wait-pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--d-stroke); background: var(--d-paper);
}
.cs-wait-pill .k { padding: 5px 9px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }
.cs-wait-pill button {
  width: 24px; height: 28px; min-height: 0; padding: 0;
  border: 0; border-left: 1px solid var(--d-stroke-light); border-right: 1px solid var(--d-stroke-light);
  background: var(--d-paper); color: var(--d-ink); font-size: 14px; cursor: pointer;
}
.cs-wait-pill button:hover { background: var(--d-oat-deep); }
.cs-wait-pill input[type="number"] {
  width: 34px; text-align: center; border: 0; padding: 0;
  font: 600 13px "IBM Plex Sans"; font-variant-numeric: tabular-nums; color: var(--d-ink);
  background: transparent;
}
.cs-wait-pill input[type="number"]::-webkit-outer-spin-button,
.cs-wait-pill input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-wait-pill input:focus { outline: none; }
.cs-wait-lands { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-muted); }

.cs-seq-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.cs-seq-add {
  padding: 8px 14px; min-height: 0;
  background: var(--d-paper); border: 1px dashed var(--d-ink);
  font: 500 11px "IBM Plex Sans"; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-ink); cursor: pointer;
}
.cs-seq-add:hover { background: var(--d-oat-deep); }
.cs-seq-note { font-size: 12px; color: var(--d-muted); }
.cs-seq-end { display: flex; align-items: center; gap: 14px; padding: 12px 0 0; font-size: 12px; color: var(--d-muted); }
.cs-seq-end-dot { flex: 0 0 26px; display: block; text-align: center; }
.cs-seq-end-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--d-stroke); }
.cs-seq-empty { padding: 24px; text-align: center; color: var(--d-muted); }

/* ── Preview rail (4a) ── */
.cs-avatar {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--d-oat-deep); border: 1px solid var(--d-stroke);
  color: var(--d-body-muted); font-size: 10px; font-weight: 500;
}
.cs-avatar.is-blocked { background: var(--d-orange-wash); border-color: var(--d-orange-deep); color: var(--d-orange-deep); }
.cs-preview-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--d-paper); border: 1px solid var(--d-stroke-light); padding: 9px 11px;
}
.cs-preview-who { min-width: 0; }
.cs-preview-who strong { display: block; font-size: 13px; font-weight: 500; color: var(--d-ink); }
.cs-preview-who span { font-size: 11px; color: var(--d-muted); }
.cs-preview-variant { margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.cs-preview-mail { background: var(--d-paper); border: 1px solid var(--d-stroke); display: flex; flex-direction: column; }
.cs-preview-meta {
  margin: 0; padding: 12px 14px; border-bottom: 1px dashed var(--d-stroke-light);
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; font-size: 12px;
}
.cs-preview-meta dt { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-muted); padding-top: 2px; }
.cs-preview-meta dd { margin: 0; color: var(--d-ink); overflow-wrap: anywhere; }
.cs-preview-body-wrap { padding: 14px; }
.cs-preview-subject { margin: 0; font-size: 15px; font-weight: 600; line-height: 21px; color: var(--d-ink); }
.cs-preview-body {
  margin: 12px 0 0; font: 400 13px/21px "IBM Plex Sans"; color: var(--d-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Callouts ── */
.cs-callout {
  border: 1px solid var(--d-stroke-light); border-left: 3px solid var(--d-ink);
  background: var(--d-paper); padding: 10px 12px;
  font-size: 12px; line-height: 18px; color: var(--d-body-muted); text-wrap: pretty;
}
.cs-callout.is-warn { border-left-color: var(--d-amber); }
.cs-callout-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-amber); }
.cs-callout.is-warn .cs-callout-body { margin-top: 3px; }
.cs-callout a, .cs-hint a, .cs-header-note a { color: var(--d-orange-deep); }

/* ── Audience rail (4b) ── */
.cs-aud-card { background: var(--d-paper); border: 1px solid var(--d-stroke); border-left: 3px solid var(--d-orange); padding: 12px 14px; }
.cs-aud-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs-aud-card-head strong { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cs-aud-kind { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.cs-aud-filters { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--d-body-muted); }
.cs-aud-reach { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--d-stroke-light); }
.cs-aud-reach .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.cs-aud-reach .l { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }

.cs-reach { border-top: 1px dashed var(--d-stroke); padding-top: 16px; }
.cs-reach-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--d-stroke-light);
  font-size: 12px; color: var(--d-body-muted);
}
.cs-reach-row.is-total { border-bottom: 0; }
.cs-reach-row.is-total span:first-child { font-weight: 500; color: var(--d-ink); }
.cs-reach-row .n { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.cs-reach-row .n.is-accent { font-weight: 600; color: var(--d-orange); }
.cs-reach-row .n.is-warn { color: var(--d-orange-deep); }
.cs-reach-row.is-total .n { font-weight: 600; }

/* ── Pool table (4b) ── */
.cs-pool { min-width: 0; display: flex; flex-direction: column; }
.cs-pool-head {
  padding: 16px 26px 12px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px dashed var(--d-stroke);
}
/* Search box + its Search/Clear actions butt together as one segment. */
.cs-pool-search-cluster { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 0; }
.cs-pool-search-cluster .button { border-left: 0; }
.cs-pool-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; background: var(--d-paper); border: 1px solid var(--d-stroke);
}
.cs-pool-search svg { width: 15px; height: 15px; fill: var(--d-muted); flex: 0 0 15px; }
.cs-pool-search input { flex: 1; border: 0; padding: 0; font: 400 13px "IBM Plex Sans"; color: var(--d-ink); background: transparent; }
.cs-pool-search input:focus { outline: none; }
.cs-pool-search input::placeholder { color: var(--d-faint); }
.cs-pool-selectors { display: flex; gap: 0; }
.cs-pool-selectors .button:not(:first-child) { border-left: 0; }

.cs-pool-table-wrap { flex: 1; min-height: 0; padding: 0 26px; overflow-x: auto; }
.cs-pool-table { width: 100%; border-collapse: collapse; }
.cs-pool-table th {
  text-align: left; padding: 10px 10px 8px; border-bottom: 1px solid var(--d-muted);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted);
}
.cs-col-check { width: 34px; text-align: center; }
.cs-col-status { width: 210px; }
.cs-pool-table td { padding: 11px 10px; border-bottom: 1px dashed var(--d-stroke-light); vertical-align: middle; }
.cs-pool-table tr:last-child td { border-bottom: 0; }
.cs-pool-table tbody tr:hover td { background: var(--d-parchment); }
.cs-pool-table tr.is-selected td { background: var(--d-oat-deep); }
.cs-pool-table tr.is-blocked td { color: var(--d-faint); }
.cs-pool-table td.cs-col-check { text-align: center; }
.cs-pool-table input[type="checkbox"] { margin: 0 auto; vertical-align: middle; }
.cs-check-disabled { display: inline-block; width: 15px; height: 15px; border: 1px dashed var(--d-stroke); vertical-align: middle; }
.cs-pool-name { display: flex; align-items: center; gap: 10px; }
.cs-pool-name .cs-avatar { flex: 0 0 26px; width: 26px; height: 26px; }
.cs-pool-name .main { font-size: 13px; font-weight: 500; color: var(--d-ink); }
.cs-pool-name .meta { font-size: 11px; color: var(--d-muted); }
.cs-pool-table tr.is-blocked .cs-pool-name .main,
.cs-pool-table tr.is-blocked .cs-pool-name .meta,
.cs-pool-table tr.is-blocked .main,
.cs-pool-table tr.is-blocked .meta { color: var(--d-faint); }
.cs-pool-table .main { font-size: 12px; color: var(--d-ink); }
.cs-pool-table .meta { font-size: 11px; color: var(--d-muted); }
.cs-col-status { white-space: nowrap; }
.cs-col-status .op-pill { margin-right: 4px; }
.cs-pool-empty { padding: 32px; text-align: center; color: var(--d-muted); }
.cs-pool-foot {
  padding: 12px 26px; border-top: 1px dashed var(--d-stroke);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-body-muted);
}
.cs-pager { display: flex; gap: 0; }
.cs-pager .button:not(:first-child) { border-left: 0; }

/* Status pills specific to the recipient pool */
.op-pill.is-eligible { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-risky { color: var(--d-amber); border-color: var(--d-amber); }
.op-pill.is-suppressed { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.op-pill.is-neutral { color: var(--d-body-muted); border-color: var(--d-stroke); }
.op-pill.is-neutral::before { display: none; }
.op-pill.is-ready { color: var(--d-green); border-color: var(--d-green); }
.op-pill.is-ready::before { display: none; }
.op-pill.is-warn-pill { color: var(--d-amber); border-color: var(--d-amber); }
.op-pill.is-warn-pill::before { display: none; }
.cs-led { width: 5px; height: 5px; background: currentColor; display: inline-block; }

/* ── Review summary card (4c) ── */
.cs-summary {
  border: 1px solid var(--d-ink); background: var(--d-parchment);
  padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.cs-summary-main { min-width: 0; }
.cs-summary-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-orange); }
.cs-summary-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--d-ink); margin-top: 3px; }
.cs-summary-idea { font-size: 12px; line-height: 18px; color: var(--d-body-muted); margin-top: 4px; text-wrap: pretty; }
.cs-summary-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-summary-stats { display: flex; gap: 22px; flex: 0 0 auto; text-align: right; }
.cs-summary-stats .n { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.cs-summary-stats .n.is-accent { color: var(--d-orange); }
.cs-summary-stats .lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }

/* ── Banners (4c) ── */
.cs-banner {
  border: 1px solid var(--d-stroke-light); border-left: 3px solid var(--d-amber);
  background: var(--d-parchment); padding: 9px 13px;
  font-size: 12px; line-height: 18px; color: var(--d-body-muted);
}
.cs-banner.is-fail { border-left-color: var(--d-orange-deep); }
.cs-banner.is-info { border-left-color: var(--d-ink); }
.cs-banner--full { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-banner-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-amber); margin-right: 8px; }
.cs-banner.is-fail .cs-banner-tag { color: var(--d-orange-deep); }
.cs-banner-sub { display: block; font-size: 11px; color: var(--d-muted); font-variant-numeric: tabular-nums; }

/* ── Drafts reader (4c) ── */
.cs-drafts { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--d-stroke-light); background: var(--d-paper); margin: 0; }
.cs-drafts-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px; border-bottom: 1px solid var(--d-ink); background: var(--d-paper);
}
.cs-drafts-head strong { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cs-drafts-sub { font-size: 11px; color: var(--d-muted); }
.cs-drafts-nav { display: flex; align-items: center; }
.cs-drafts-arrow {
  width: 30px; height: 28px; min-height: 0; padding: 0;
  border: 1px solid var(--d-ink); background: var(--d-paper); color: var(--d-ink); font-size: 13px; cursor: pointer;
}
.cs-drafts-arrow:hover { background: var(--d-oat-deep); }
.cs-drafts-counter {
  padding: 0 12px; height: 28px; display: inline-flex; align-items: center;
  border-top: 1px solid var(--d-ink); border-bottom: 1px solid var(--d-ink);
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-ink);
}
.cs-drafts-counter strong { font-weight: 600; }
.cs-drafts-carousel { flex: 1; min-height: 0; }
.cs-draft { display: none; gap: 14px; padding: 16px; background: var(--d-paper); }
.cs-draft.is-active { display: flex; }
.cs-draft.is-excluded { opacity: 0.6; }
.cs-draft-check { flex: 0 0 16px; margin-top: 2px; }
.cs-draft-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cs-draft-who { display: flex; align-items: center; gap: 10px; }
.cs-draft-who .name { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.cs-draft-who .meta { font-size: 12px; color: var(--d-muted); }
.cs-draft-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cs-draft-action { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-orange-deep); background: transparent; border: 0; padding: 0; min-height: 0; cursor: pointer; }
.cs-draft-action:hover { background: transparent; text-decoration: underline; }
.cs-draft-subj { display: flex; gap: 10px; margin-top: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--d-stroke-light); }
.cs-draft-subj .lbl { flex: 0 0 46px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); padding-top: 3px; }
.cs-draft-subj .val { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.cs-draft-preview {
  margin: 12px 0 0; font: 400 13px/21px "IBM Plex Sans"; color: var(--d-ink);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: hidden; cursor: pointer; position: relative;
}
.cs-draft-preview.is-expanded { max-height: none; }
.cs-draft-preview.is-short { cursor: default; }
.cs-draft-sig { color: var(--d-muted); margin-top: 6px; }
.cs-draft-lint { margin-top: 14px; }
.cs-draft-lint summary { cursor: pointer; display: inline-flex; list-style: none; }
.cs-draft-lint summary::-webkit-details-marker { display: none; }
.cs-draft-lint-list { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 18px; color: var(--d-body-muted); }
.cs-personalize-panel { margin-top: 10px; border-top: 1px solid var(--d-stroke-light); padding-top: 10px; }
.cs-drafts-empty { padding: 40px 24px; text-align: center; color: var(--d-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── Pre-flight rail (4c) ── */
.cs-preflight-rail .cs-rail-head { border: 0; }
.cs-preflight { display: flex; flex-direction: column; background: var(--d-paper); border: 1px solid var(--d-stroke-light); }
.cs-pf-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px dashed var(--d-stroke-light); }
.cs-pf-item:last-child { border-bottom: 0; }
.cs-pf-mark {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.cs-pf-item.is-ok .cs-pf-mark { background: var(--d-green); color: var(--d-paper); }
.cs-pf-item.is-warn .cs-pf-mark { border: 1px solid var(--d-amber); color: var(--d-amber); }
.cs-pf-item.is-fail .cs-pf-mark { border: 1px solid var(--d-orange-deep); color: var(--d-orange-deep); }
.cs-pf-item strong { display: block; font-size: 12px; font-weight: 600; color: var(--d-ink); }
.cs-pf-item span { display: block; font-size: 11px; line-height: 16px; color: var(--d-muted); }

.cs-capacity { background: var(--d-paper); border: 1px solid var(--d-stroke-light); padding: 12px; }
.cs-cap-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--d-stroke-light); }
.cs-cap-row:first-child { padding-top: 0; }
.cs-cap-row:last-child { padding-bottom: 0; border-bottom: 0; }
.cs-cap-row span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.cs-cap-row .v { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-ink); letter-spacing: normal; text-transform: none; }

/* ── Footer action bar ── */
.cs-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--d-ink); background: var(--d-parchment); padding: 13px 26px;
}
.cs-footer-left, .cs-footer-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-footer-left { font-size: 12px; color: var(--d-body-muted); }
.cs-footer-left strong { color: var(--d-ink); }
.cs-footer-cadence { font-variant-numeric: tabular-nums; }
.cs-schedule { display: inline-flex; align-items: center; gap: 8px; }
.cs-schedule-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--d-body-muted); cursor: pointer; }
.cs-schedule-input { padding: 6px 8px; border: 1px solid var(--d-stroke); background: var(--d-paper); font: 400 12px "IBM Plex Sans"; }
@media (max-width: 900px) {
  .cs-footer { flex-direction: column; align-items: stretch; }
  .cs-footer-right { justify-content: flex-end; }
}
/* ──────────────────────────────────────────────────────────────────────
   Templates redesign — claude.ai/design (h/iK6_szfduuqBsXNiqfn6jg)
   Card grid + table with subject/body preview, variable highlighting,
   per-template stats.
   ────────────────────────────────────────────────────────────────────── */
.page.is-templates { max-width: 1280px; }

/* Tone tweaks for usage chip dots */
.camp-chip.tpl-chip.is-in-use        .dot { background: var(--accent); }
.camp-chip.tpl-chip.is-with-followup .dot { background: var(--green); }
.camp-chip.tpl-chip.is-unused        .dot { background: var(--gold); }
.camp-chip.tpl-chip.is-draft         .dot { background: #c8d2dd; }


/* Panel chrome */
.dash-panel.tpl-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(23,32,42,0.06); overflow: hidden; }
.dash-panel.tpl-panel .dash-panel-head {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.dash-panel.tpl-panel .dash-panel-head .left { display: inline-flex; align-items: baseline; gap: 10px; }
.dash-panel.tpl-panel .dash-panel-title {
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.dash-panel.tpl-panel .dash-panel-count {
  font-size: 0.84rem; color: var(--muted); font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  background: transparent; padding: 0;
}

/* Card grid */
.tpl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; background: #f5f7fa; }
@media (max-width: 840px) { .tpl-grid { gap: 10px; } }

.tpl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-rows: auto auto auto;
  column-gap: 22px; row-gap: 12px;
  padding: 16px 20px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23,32,42,0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpl-card:hover { border-color: #c8d8de; box-shadow: 0 6px 16px rgba(23,32,42,0.09); }
.tpl-card.is-draft  { background: #fcfbf6; }
.tpl-card.is-unused { background: #fbfcfd; }
.tpl-card > .tpl-card-head    { grid-column: 1 / -1; grid-row: 1; }
.tpl-card > .tpl-card-preview { grid-column: 1;     grid-row: 2; }
.tpl-card > .tpl-card-foot    { grid-column: 2;     grid-row: 2; }
.tpl-card > .tpl-card-vars    { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 760px) {
  /* Selectors must match the per-child placement specificity above, or the
     foot stays pinned to grid-column 2 and the card never collapses. */
  .tpl-card { grid-template-columns: 1fr; }
  .tpl-card > .tpl-card-head,
  .tpl-card > .tpl-card-preview,
  .tpl-card > .tpl-card-foot,
  .tpl-card > .tpl-card-vars { grid-column: 1; grid-row: auto; }
}

.tpl-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.tpl-card-id { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.tpl-card-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.tpl-card-glyph svg { width: 15px !important; height: 15px !important; fill: currentColor; transform: none; }
.tpl-card.is-draft  .tpl-card-glyph { background: #fbe9c9; color: #8a6a14; }
.tpl-card.is-unused .tpl-card-glyph { background: #eef1f6; color: var(--muted); }

.tpl-card-id-text { min-width: 0; }
.tpl-card-name {
  display: block;
  font-size: 1rem; font-weight: 700; color: var(--ink);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-card-name:hover { color: var(--accent-dark); text-decoration: none; }
.tpl-card-name em { font-style: italic; font-weight: 700; color: var(--muted); }
.tpl-card-sub {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.tpl-card-sub .sep { color: #c8d2dd; }

/* Preview area */
.tpl-card-preview {
  display: grid; gap: 10px;
  padding: 12px 14px;
  background: #fcfdfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
}
.tpl-card-subject-line {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline; gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px dashed #e2e8f1;
}
.tpl-card-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.tpl-card-subject {
  font-weight: 700; color: var(--ink);
  font-size: 0.92rem; line-height: 1.35;
  overflow-wrap: anywhere;
}
.tpl-card-body {
  display: grid; gap: 4px;
  color: #2c3a4b; line-height: 1.45;
}
.tpl-card-body-line.is-greet { font-weight: 600; }
.tpl-card-body-line {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-empty { font-style: italic; color: var(--muted); font-weight: 500; }

/* Inline variable token — no braces, no mono font, per Dispatch spec */
.tpl-var {
  display: inline-block;
  padding: 0 5px; margin: 0 1px;
  background: var(--d-orange-wash);
  color: var(--d-orange-deep);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.86em; font-weight: 500; letter-spacing: normal;
}

/* Follow-up snippet inside the preview */
.tpl-card-fu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px; align-items: center;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(47, 157, 143, 0.06);
  border-left: 3px solid var(--green);
}
.tpl-card-fu-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #226e63; white-space: nowrap;
}
.tpl-card-fu-tag svg { width: 12px !important; height: 12px !important; fill: currentColor; transform: none; }
.tpl-card-fu-snippet {
  font-size: 0.82rem; color: #2c3a4b; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Variables row */
.tpl-card-vars { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 22px; }
.tpl-card-vars-empty { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.tpl-card-var {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #d6e8ec;
  border-radius: 4px;
}
.tpl-card-var.is-more {
  background: #eef1f6; border-color: #dde3ec;
  color: var(--muted); font-family: inherit;
}
.tpl-card-var::before { content: "{ "; opacity: 0.6; font-weight: 700; }
.tpl-card-var::after  { content: " }"; opacity: 0.6; font-weight: 700; }
.tpl-card-var.is-more::before, .tpl-card-var.is-more::after { content: none; }

/* Footer stats rail */
.tpl-card-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "spark spark"
    "sent  replies"
    "rate  last";
  column-gap: 14px; row-gap: 12px;
  align-content: start;
  padding: 12px 14px;
  background: #fcfdfe;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tpl-card-foot > .tpl-card-stat:nth-of-type(1) { grid-area: sent; }
.tpl-card-foot > .tpl-card-stat:nth-of-type(2) { grid-area: replies; }
.tpl-card-foot > .tpl-card-stat.is-rate         { grid-area: rate; }
.tpl-card-foot > .tpl-spark                     { grid-area: spark; width: 100%; height: 32px; }
.tpl-card-foot > .tpl-card-last                 { grid-area: last; }

.tpl-card-stat, .tpl-card-last { display: grid; gap: 2px; min-width: 0; }
.tpl-card-stat .lab, .tpl-card-last .lab {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.tpl-card-stat .val, .tpl-card-last .val {
  font-size: 0.98rem; font-weight: 700; color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-card-last .val { font-weight: 600; font-size: 0.84rem; }
.tpl-card-stat.is-rate .val { color: var(--accent-dark); font-size: 1.1rem; }

.tpl-spark svg { width: 100%; height: 100%; overflow: visible; }
.tpl-spark .line {
  stroke: var(--accent); stroke-width: 2; fill: none;
  stroke-linejoin: round; stroke-linecap: round;
}
.tpl-spark .area { fill: rgba(23, 107, 135, 0.10); }
.tpl-spark.is-empty { opacity: 0.6; }

@media (max-width: 760px) {
  .tpl-card-foot {
    grid-template-areas:
      "sent    replies rate"
      "spark   spark   last";
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Draft edit screen — editor beside a live preview, mirroring .template-workspace. */
.draft-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.draft-edit-grid .panel { margin-bottom: 0; }
@media (max-width: 1040px) {
  .draft-edit-grid { grid-template-columns: 1fr; }
}

/* Step/status pill on follow-up draft cards (campaign_followups.html). */
.op-pill.is-muted { background: transparent; color: var(--d-muted); border-color: var(--d-stroke); }

/* ══════════════════════════════════════════════════════════════════════
   Phase 1 — Worklist (3b) + Contacts (6a)
   ══════════════════════════════════════════════════════════════════════ */

/* Shared: a plain (no LED) pill variant for status/reason chips. */
.op-pill.desk-pill-plain::before { display: none; }
.op-pill.desk-pill-plain { gap: 0; }

.desk-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--d-ink);
}

/* ── Worklist header + breaker banner ──────────────────────────────── */
.page-header .page-actions .button.primary { padding-left: 12px; }

.desk-breaker {
  margin: 0 26px 4px;
  background: var(--d-parchment);
  border: 1px solid var(--d-stroke-light);
  border-left: 3px solid var(--d-orange-deep);
  padding: 11px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.desk-breaker-text {
  font-size: 13px; line-height: 19px; color: var(--d-body-muted); text-wrap: pretty;
}
.desk-breaker-text strong { color: var(--d-ink); font-weight: 600; }
.desk-breaker-flag {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-orange-deep); margin-right: 8px;
}

/* ── KPI strip ─────────────────────────────────────────────────────── */
.desk-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin: 16px 26px 0; padding: 18px 0;
  border-top: 1px solid var(--d-ink);
  border-bottom: 1px dashed var(--d-stroke);
}
.desk-kpi-label {
  display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--d-muted);
}
.desk-kpi-figure { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.desk-kpi-value {
  font-size: 30px; font-weight: 500; color: var(--d-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.desk-kpi-value.is-accent { color: var(--d-orange); }
.desk-kpi-note { font-size: 12px; color: var(--d-muted); }
.desk-kpi-note.is-warn { color: var(--d-amber); }
.desk-kpi-spark { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.desk-kpi-spark .desk-kpi-value { margin-top: 2px; }
.desk-spark { width: 96px; height: 34px; color: var(--d-ink); flex: 0 0 auto; }

/* ── Body split: worklist table + right rail ───────────────────────── */
.desk-split {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
.desk-main { min-width: 0; padding: 18px 26px 0; }
.desk-main-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.desk-main-title { display: flex; align-items: baseline; gap: 10px; }
.desk-main-sub { font-size: 12px; color: var(--d-muted); }
.desk-toggle { display: flex; }
.desk-toggle-chip {
  padding: 5px 11px; border: 1px solid var(--d-stroke-light);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-muted); text-decoration: none; font-variant-numeric: tabular-nums;
}
.desk-toggle-chip + .desk-toggle-chip { border-left: 0; }
.desk-toggle-chip.is-active {
  background: var(--d-oat-deep); border-color: var(--d-ink); color: var(--d-ink);
}
.desk-toggle-chip:hover:not(.is-active) { background: var(--d-parchment); }

.desk-table { width: 100%; border-collapse: collapse; }
.desk-table thead th {
  text-align: left; padding: 0 10px 8px; border-bottom: 1px solid var(--d-ink);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--d-muted); font-variant-numeric: tabular-nums;
}
.desk-table thead th:first-child { padding-left: 0; }
.desk-col-delivery { width: 186px; }
.desk-col-reply { width: 74px; text-align: right !important; }
.desk-table tbody tr { border-bottom: 1px dashed var(--d-stroke-light); }
.desk-table tbody tr:last-child { border-bottom: 0; }
.desk-table tbody tr:hover { background: var(--d-parchment); }
.desk-table td { padding: 12px 10px; vertical-align: top; }
.desk-cell-camp { padding-left: 0 !important; }

.desk-camp-name { display: flex; align-items: center; gap: 8px; }
.desk-camp-name a {
  font-size: 14px; font-weight: 500; color: var(--d-ink); text-decoration: none;
}
.desk-camp-name a:hover { color: var(--d-orange-deep); }
.desk-camp-sub {
  font-size: 11px; color: var(--d-muted); margin-top: 2px; font-variant-numeric: tabular-nums;
}
.desk-flag-pill {
  padding: 1px 6px; background: var(--d-orange-wash); border: 1px solid var(--d-orange-deep);
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-orange-deep);
}
.desk-na {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--d-stroke); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-body-muted);
  font-variant-numeric: tabular-nums;
}
.desk-na.is-accent { border-color: var(--d-orange); color: var(--d-orange); }
.desk-na.is-amber { border-color: var(--d-amber); color: var(--d-amber); }
.desk-na.is-green { border-color: var(--d-green); color: var(--d-green); }
.desk-na.is-orange { border-color: var(--d-orange-deep); color: var(--d-orange-deep); background: var(--d-orange-wash); }
.desk-na.is-ink { border-color: var(--d-ink); color: var(--d-ink); }
.desk-na-led { width: 5px; height: 5px; background: currentColor; }
.desk-na-detail { font-size: 12px; color: var(--d-muted); margin-top: 4px; }

.desk-funnel {
  display: flex; height: 6px; background: var(--d-oat-deep); overflow: hidden;
}
.desk-funnel .seg-sent { background: var(--d-ink); }
.desk-funnel .seg-replied { background: var(--d-green); }
.desk-funnel .seg-bounced { background: var(--d-orange-deep); }
.desk-funnel-legend {
  font-size: 11px; color: var(--d-muted); margin-top: 5px; font-variant-numeric: tabular-nums;
}
.desk-cell-reply {
  text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--d-ink);
}
.desk-cell-reply b { font-weight: 500; }
.desk-dash { color: var(--d-stroke); }
.desk-empty { padding: 22px 0; color: var(--d-muted); font-size: 13px; }
.desk-empty a { color: var(--d-orange-deep); }

/* ── Right rail ────────────────────────────────────────────────────── */
.desk-rail {
  border-left: 1px dashed var(--d-stroke); background: var(--d-oat);
  padding: 18px 20px; min-width: 0; align-self: stretch;
}
.desk-rail-section { border-top: 1px dashed var(--d-stroke); padding-top: 16px; margin-top: 20px; }
.desk-rail-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.desk-rail-meta { font-size: 10px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.desk-rail-link {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-orange); text-decoration: none;
}
.desk-rail-empty { font-size: 12px; color: var(--d-muted); }
.desk-rail-empty a { color: var(--d-orange-deep); }

.desk-mbx-list { display: flex; flex-direction: column; gap: 12px; }
.desk-mbx-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.desk-mbx-email {
  font-size: 12px; color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.desk-mbx-quota { font-size: 12px; color: var(--d-body-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.desk-mbx-quota.is-full { color: var(--d-orange-deep); }
.desk-mbx-bar { height: 4px; background: #e4ddcd; margin-top: 5px; }
.desk-mbx-bar > span { display: block; height: 4px; background: var(--d-ink); }
.desk-mbx-note { font-size: 11px; color: var(--d-muted); margin-top: 4px; }

.desk-replies { display: flex; flex-direction: column; }
.desk-reply { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--d-stroke-light); }
.desk-reply:last-child { border-bottom: 0; }
.desk-reply-avatar {
  flex: 0 0 28px; height: 28px; background: var(--d-oat-deep); border: 1px solid var(--d-stroke);
  color: var(--d-body-muted); font-size: 11px; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.desk-reply-avatar.is-blocked { background: var(--d-orange-wash); border-color: var(--d-orange-deep); color: var(--d-orange-deep); font-size: 13px; }
.desk-reply-avatar.is-ooo { background: transparent; font-size: 9px; }
.desk-reply-body { min-width: 0; }
.desk-reply-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.desk-reply-from { font-size: 13px; font-weight: 500; color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-reply-time { font-size: 10px; color: var(--d-faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.desk-reply-intent {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-green); margin: 3px 0;
}
.desk-reply-intent.is-neutral { color: var(--d-muted); }
/* Real replies carry whole quoted threads and signatures, so the rail clamps
   the snippet to three lines rather than letting it run the page long. */
.desk-reply-snippet {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--d-body-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ══ Contacts (6a) ═══════════════════════════════════════════════════ */

/* Status chip row — override the legacy rounded .camp-chip into the
   Dispatch segmented-control recipe (buttons butted together). */
.ctx-chips { padding: 0 26px 14px; display: flex; }
.ctx-chips .camp-chip {
  min-height: 0; border-radius: 0; box-shadow: none;
  padding: 7px 12px; gap: 8px;
  background: var(--d-paper); border: 1px solid var(--d-stroke);
  color: var(--d-body-muted); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ctx-chips .camp-chip + .camp-chip { border-left: 0; }
.ctx-chips .camp-chip:hover { background: var(--d-parchment); color: var(--d-ink); border-color: var(--d-stroke); }
.ctx-chips .camp-chip.is-active {
  background: var(--d-oat-deep); border-color: var(--d-ink); color: var(--d-ink); box-shadow: none;
}
.ctx-chips .camp-chip .dot { display: none; }
.ctx-chip-count {
  font-size: 11px; font-weight: 500; color: var(--d-muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.ctx-chip-count.is-good { color: var(--d-green); }
.ctx-chip-count.is-bad { color: var(--d-orange-deep); }
.ctx-chips .camp-chip.is-active .ctx-chip-count { color: var(--d-ink); }

/* Filter bar */
.ctx-filter {
  padding: 0 26px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--d-muted);
}
.ctx-search {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  background: var(--d-paper); border: 1px solid var(--d-ink); min-width: 0;
}
.ctx-search svg { flex: 0 0 15px; }
.ctx-search svg path { fill: var(--d-muted); }
.ctx-search input {
  flex: 1; min-width: 0; border: 0; padding: 0; min-height: 0; background: transparent;
  font-size: 13px; color: var(--d-ink);
}
.ctx-search input:focus { outline: none; }
.ctx-search-clear {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--d-orange-deep); text-decoration: none;
}
.ctx-select { display: inline-flex; }
.ctx-select select {
  min-height: 0; padding: 8px 11px; border: 1px solid var(--d-stroke);
  background: var(--d-paper); color: var(--d-body-muted); font-size: 12px;
}
.ctx-select.is-set select { border-color: var(--d-ink); background: var(--d-oat-deep); color: var(--d-ink); }
.ctx-save-segment {
  flex: 0 0 auto; padding: 8px 12px; border: 1px dashed var(--d-ink);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-ink); text-decoration: none;
}
.ctx-save-segment:hover { background: var(--d-oat-deep); }

/* Bulk bar */
.ctx-bulk {
  padding: 10px 26px; background: var(--d-oat-deep); border-bottom: 1px solid var(--d-stroke);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ctx-bulk[hidden] { display: none; }
.ctx-bulk-left { display: flex; align-items: center; gap: 14px; }
.ctx-bulk-count { font-size: 13px; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.ctx-bulk-link {
  min-height: 0; padding: 0; border: 0; background: transparent;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d-muted); cursor: pointer;
}
.ctx-bulk-link:hover { background: transparent; color: var(--d-ink); }
.ctx-bulk-actions { display: flex; gap: 8px; }

/* Table */
.ctx-table-wrap { padding: 0 26px; }
.ctx-table { width: 100%; border-collapse: collapse; }
.ctx-table thead th {
  text-align: left; padding: 11px 10px 9px; border-bottom: 1px solid var(--d-muted);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--d-muted);
}
.ctx-table td { padding: 11px 10px; vertical-align: middle; font-size: 13px; }
.ctx-table tbody tr { border-top: 0; border-bottom: 1px dashed var(--d-stroke-light); }
.ctx-table tbody tr:hover { background: var(--d-parchment); }
.ctx-table tbody tr.is-selected { background: var(--d-oat-deep); }
.ctx-col-check { width: 32px; text-align: center; }
.ctx-col-check input { margin: 0 auto; }
.ctx-col-num { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.ctx-col-num.is-strong { font-weight: 600; color: var(--d-ink); }
.ctx-col-num.is-zero { color: var(--d-stroke); }
.ctx-col-status { width: 200px; }
.ctx-col-touch { width: 90px; text-align: right; font-size: 12px; color: var(--d-body-muted); font-variant-numeric: tabular-nums; }
.ctx-identity { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ctx-identity-text { min-width: 0; }
.ctx-status-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.ctx-dash { color: var(--d-stroke); }

/* Audience pill → Dispatch plain bordered chip (no fill, no LED dot). */
.ctx-table .audience-pill {
  padding: 2px 7px; background: transparent; color: var(--d-body-muted);
  border: 1px solid var(--d-stroke); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: none;
}
.ctx-table .audience-pill::before { display: none; }

.ctx-empty { padding: 40px 26px; text-align: center; color: var(--d-muted); }
.ctx-empty strong { display: block; font-size: 15px; color: var(--d-ink); margin-bottom: 6px; }
.ctx-empty a { color: var(--d-orange-deep); }

/* Footer with pagination */
.ctx-footer .pagination { margin: 0; }
.ctx-footer .pagination-info { display: none; }

@media (max-width: 1100px) {
  .desk-split { grid-template-columns: 1fr; }
  .desk-rail { border-left: 0; border-top: 1px dashed var(--d-stroke); }
  .desk-kpis { grid-template-columns: repeat(2, 1fr); }
  .ctx-table-wrap { overflow-x: auto; }
}

/* =========================================================================
   Phase 3 — Replies inbox (5a) two-pane pattern + Handoffs (10a) board.
   Both fill the viewport below the header/filters and scroll internally, so
   the middle grows with content while the header and footer stay put.
   ========================================================================= */

/* --- Replies inbox: two-pane 430px | 1fr ------------------------------- */
/* Bounded to the viewport (not min-height) so the two panes scroll
   independently, as the two-pane design intends — otherwise the page itself
   grows to several thousand pixels and the list foot/paginator ends up
   unreachable below every row. */
.inbox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.inbox .page-header { flex: 0 0 auto; }

.inbox-filters {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 26px 14px;
  border-bottom: 1px solid var(--d-ink);
}
.inbox-selects {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.inbox-selects select {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 12px;
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
  color: var(--d-ink);
}

/* Segmented control / butted filter chips (shared by both filter rows and
   the reading-pane intent control). */
.seg-group { display: inline-flex; }
.seg,
.seg-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--d-stroke);
  background: transparent;
  color: var(--d-body-muted);
  font: 500 11px/1 "IBM Plex Sans";
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.seg + .seg,
.seg-form + .seg-form .seg-button,
.seg-group .seg-form:not(:first-child) .seg-button { border-left: 0; }
.seg-group { }
.seg:hover,
.seg-button:hover { background: var(--d-oat-deep); }
.seg.is-active,
.seg-button.is-active {
  background: var(--d-oat-deep);
  border-color: var(--d-ink);
  color: var(--d-ink);
}
/* Butt the intent segment forms together: kill the left border on all but the
   first form's button. */
.inbox-intent .seg-group .seg-form:not(:first-child) .seg-button { border-left: 0; }
.seg-form { display: inline-flex; margin: 0; }
.seg-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--d-muted);
  text-transform: none;
  letter-spacing: 0;
}
.seg-count.is-work { color: var(--d-orange); }
.seg-count.is-broken { color: var(--d-orange-deep); }
.seg.is-active .seg-count { color: var(--d-ink); }

.inbox-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
}

/* List pane */
.inbox-list {
  border-right: 1px dashed var(--d-stroke);
  background: var(--d-oat);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.inbox-list-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px dashed var(--d-stroke);
}
/* Paginator pinned to the foot of the reply list column (the list body
   scrolls above it), so it is always reachable. */
.inbox-list-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  background: var(--d-parchment);
  border-top: 1px solid var(--d-ink);
}
.inbox-list-foot-info {
  font-size: 11px;
  color: var(--d-body-muted);
  font-variant-numeric: tabular-nums;
}
.inbox-list-foot-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.inbox-list-sort {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-ink);
}
.inbox-list-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--d-muted);
}
.inbox-list-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  background: var(--d-paper);
  border-left: 3px solid transparent;
  border-bottom: 1px dashed var(--d-stroke-light);
  text-decoration: none;
  color: inherit;
}
.inbox-item:hover { background: var(--d-parchment); }
.inbox-item.is-selected {
  background: var(--d-oat-deep);
  border-left-color: var(--d-orange);
}
.inbox-avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.inbox-avatar-tag { font-size: 9px; letter-spacing: 0.02em; }
.inbox-item-body { min-width: 0; flex: 1; }
.inbox-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.inbox-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-item.is-system .inbox-item-name { font-weight: 500; color: var(--d-body-muted); }
.inbox-item-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--d-muted);
}
.inbox-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  flex-wrap: wrap;
}
.inbox-item-campaign {
  font-size: 11px;
  color: var(--d-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-item-preview {
  font-size: 12px;
  line-height: 18px;
  color: var(--d-body-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inbox-item-sys {
  font-size: 12px;
  line-height: 18px;
  color: var(--d-muted);
  margin-top: 5px;
  text-wrap: pretty;
}
.inbox-empty {
  padding: 26px 18px;
  font-size: 13px;
  color: var(--d-muted);
}

/* Reading pane */
.inbox-read {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.inbox-read-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px 12px;
  border-bottom: 1px dashed var(--d-stroke);
  flex-wrap: wrap;
}
.inbox-read-ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
.inbox-read-avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.inbox-read-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--d-ink); }
.inbox-read-sub { font-size: 12px; color: var(--d-muted); }
.inbox-read-context { display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-read-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 26px;
  border-bottom: 1px dashed var(--d-stroke);
}
.inbox-read-actions form { margin: 0; }
.inbox-read-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.inbox-intent { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inbox-intent-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.inbox-intent-conf { font-size: 11px; color: var(--d-muted); }

.inbox-reply-card { border: 1px solid var(--d-ink); background: var(--d-paper); }
.inbox-reply-head {
  padding: 11px 14px;
  border-bottom: 1px dashed var(--d-stroke-light);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inbox-reply-row { display: flex; gap: 10px; font-size: 12px; }
.inbox-reply-label {
  flex: 0 0 60px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-muted);
  padding-top: 1px;
}
.inbox-reply-subject { font-weight: 600; color: var(--d-ink); }
.inbox-reply-received { color: var(--d-body-muted); font-variant-numeric: tabular-nums; }
.inbox-reply-body {
  padding: 16px 14px;
  font-size: 13px;
  line-height: 21px;
  color: var(--d-ink);
  white-space: pre-wrap;
  text-wrap: pretty;
}
.inbox-reply-quote {
  border-top: 1px dashed var(--d-stroke-light);
  background: var(--d-parchment);
  padding: 10px 14px;
  font-size: 11px;
  color: var(--d-muted);
}
.inbox-reply-quote summary {
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-orange-deep);
}
.inbox-reply-quote pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 11px;
  color: var(--d-body-muted);
}

.inbox-suggest { display: flex; flex-direction: column; gap: 10px; }
.inbox-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.inbox-suggest-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-ink);
}
.inbox-suggest-note { font-size: 12px; color: var(--d-muted); margin-left: 10px; }
.inbox-suggest-controls { display: flex; gap: 8px; align-items: center; margin: 0; }
.inbox-suggest-controls select {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}
.inbox-suggest-card {
  border: 1px solid var(--d-stroke-light);
  background: var(--d-paper);
  padding: 12px 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.inbox-suggest-text { min-width: 0; flex: 1; }
.inbox-suggest-text pre {
  margin: 0;
  white-space: pre-wrap;
  text-wrap: pretty;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--d-ink);
}
.inbox-suggest-mode {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.inbox-suggest-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 auto;
  align-items: stretch;
}
.inbox-suggest-actions form { margin: 0; }

.inbox-read-footer { flex: 0 0 auto; }
.inbox-read-nav { font-variant-numeric: tabular-nums; color: var(--d-muted); }
.inbox-read-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 40px;
  text-align: center;
}
.inbox-read-empty p { margin: 0; color: var(--d-body-muted); }
.inbox-read-empty-sub { font-size: 13px; color: var(--d-muted); max-width: 340px; }
.inbox-pagination { padding: 12px 26px; }

/* --- Handoffs board: four columns ------------------------------------- */
.board {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.board .page-header { flex: 0 0 auto; }
.board-banner {
  flex: 0 0 auto;
  padding: 0 26px 14px;
  border-bottom: 1px solid var(--d-muted);
}
.board-banner-note {
  border: 1px solid var(--d-stroke);
  border-left: 3px solid var(--d-ink);
  background: var(--d-parchment);
  padding: 9px 13px;
  font-size: 12px;
  line-height: 18px;
  color: var(--d-body-muted);
  text-wrap: pretty;
}
.board-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}
.board-col {
  border-right: 1px dashed var(--d-stroke);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.board-col:last-child { border-right: 0; }
.board-col-head {
  flex: 0 0 auto;
  padding: 14px 16px 11px;
  background: var(--d-oat);
  border-bottom: 1px solid var(--d-stroke);
}
.board-col-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.board-col-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-ink);
}
.board-col-name.is-quiet { color: var(--d-muted); }
.board-col-count {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--d-ink);
}
.board-col-count.is-work { color: var(--d-orange); }
.board-col-count.is-quiet { color: var(--d-muted); }
.board-col-desc { font-size: 11px; color: var(--d-muted); margin-top: 2px; }
.board-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--d-parchment);
}
.board-col.is-closed .board-col-body { background: var(--d-oat); gap: 9px; }

.board-card {
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
  padding: 12px;
}
.board-card.is-old { border-left: 3px solid var(--d-orange-deep); }
.board-card.is-booked { border-left: 3px solid var(--d-green); }
.board-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.board-card-name { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.board-card-age {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--d-muted);
}
.board-card-age.is-old { color: var(--d-orange-deep); }
.board-card-slot {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--d-green);
}
.board-card-role { font-size: 11px; color: var(--d-muted); margin-top: 2px; }
.board-card-campaign { font-size: 11px; color: var(--d-muted); }
.board-card-quote {
  font-size: 12px;
  line-height: 18px;
  color: var(--d-body-muted);
  margin-top: 9px;
  padding-left: 9px;
  border-left: 2px solid var(--d-stroke-light);
  text-wrap: pretty;
}
.board-note-form { margin: 10px 0 0; }
.board-note {
  width: 100%;
  min-height: 0;
  padding: 6px 9px;
  font-size: 12px;
  background: var(--d-paper);
}
.board-card-actions { display: flex; gap: 7px; margin-top: 9px; }
.board-card-actions form { margin: 0; flex: 0 0 auto; }
.board-advance { flex: 1 1 auto; }
.board-advance-btn { width: 100%; min-height: 28px; padding: 6px 8px; font-size: 10px; }
.board-card-actions .button.tertiary { min-height: 28px; padding: 6px 9px; font-size: 10px; }
.board-openreply {
  display: inline-block;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-orange-deep);
  text-decoration: none;
}
.board-openreply:hover { text-decoration: underline; }

.board-closed-item {
  background: var(--d-paper);
  border: 1px solid var(--d-stroke-light);
  padding: 9px 11px;
}
.board-closed-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.board-closed-name { font-size: 12px; font-weight: 500; color: var(--d-body-muted); }
.board-closed-date { font-size: 10px; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.board-closed-outcome { font-size: 11px; color: var(--d-muted); margin-top: 1px; }
.board-closed-links { margin-top: 4px; }
.board-closed-links form { margin: 0; }
.board-linkbtn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-orange-deep);
  cursor: pointer;
}
.board-linkbtn:hover { background: transparent; text-decoration: underline; }
.board-empty { font-size: 12px; color: var(--d-muted); padding: 6px 2px; text-wrap: pretty; }

/* ── Drag and drop between columns ─────────────────────────────────── */
.board-card[draggable="true"],
.board-closed-item[draggable="true"] { cursor: grab; }
.board-card.is-dragging,
.board-closed-item.is-dragging { opacity: 0.45; }
.board-col.is-drop-target .board-col-body {
  background: var(--d-oat);
  box-shadow: inset 0 0 0 2px var(--d-orange);
}

@media (max-width: 1200px) {
  .board-columns { overflow-x: auto; }
  /* 200px x 5 keeps the board within a 1024px viewport without scrolling;
     narrower than that and the columns scroll horizontally as before. */
  .board-columns { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 4 — Template editor (8a), Templates library (13a),
   Segments (12a), Contact detail (7a)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared header helper: + glyph inside a primary button ── */
.btn-plus { font-size: 14px; line-height: 1; font-weight: 400; margin-right: 2px; }

/* ── 13a Templates library ─────────────────────────────────────────── */
.tpl-lib { display: flex; flex-direction: column; min-height: 0; }
.tpl-best { display: block; font-size: 13px; color: var(--d-ink); margin-top: 2px; }
.tpl-best strong { font-variant-numeric: tabular-nums; font-weight: 600; }

.tpl-chip-row { padding: 0 26px 13px; }

.tpl-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px 14px;
  border-bottom: 1px solid var(--d-muted);
}
.tpl-bar-search {
  flex: 1; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; background: var(--d-paper); border: 1px solid var(--d-stroke);
}
.tpl-bar-search svg { fill: var(--d-muted); flex: 0 0 auto; }
.tpl-bar-search input {
  flex: 1; border: 0; background: transparent; padding: 0;
  font: 400 13px/1.2 "IBM Plex Sans"; color: var(--d-ink); min-height: 0;
}
.tpl-bar-search input::placeholder { color: var(--d-faint); }
.tpl-bar-search input:focus-visible { outline: none; }
.tpl-bar-clear {
  color: var(--d-muted); text-decoration: none; font-size: 15px; line-height: 1;
  padding: 0 2px;
}
.tpl-bar-clear:hover { color: var(--d-ink); }
.tpl-bar-select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border: 1px solid var(--d-stroke); background: var(--d-paper);
  font-size: 12px; color: var(--d-body-muted);
}
.tpl-bar-select.is-active { border-color: var(--d-ink); background: var(--d-oat-deep); color: var(--d-ink); }
.tpl-bar-select > span { white-space: nowrap; }
.tpl-bar-select select {
  border: 0; background: transparent; padding: 0 18px 0 0; min-height: 0;
  font: 500 12px/1 "IBM Plex Sans"; color: inherit; cursor: pointer;
}
.tpl-bar-select select:focus-visible { outline: none; }

.tpl-grid {
  padding: 18px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 16px;
}
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tpl-grid { grid-template-columns: minmax(0, 1fr); } }

.tpl-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--d-stroke); background: var(--d-paper);
}
.tpl-card:hover { border-color: var(--d-ink); }
.tpl-card.is-inuse,
.tpl-card.is-best { border-color: var(--d-ink); }
.tpl-card.is-unused { border-style: dashed; background: var(--d-parchment); }
.tpl-card.is-draft { border-left: 3px solid var(--d-amber); }

.tpl-card-head { padding: 12px 14px; border-bottom: 1px dashed var(--d-stroke-light); }
.tpl-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tpl-card-name { flex: 1 1 60%; min-width: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); overflow-wrap: anywhere; }
.tpl-card.is-unused .tpl-card-name { color: var(--d-body-muted); }
.tpl-card-rate { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); flex: 0 0 auto; }
.tpl-card-rate.is-best { color: var(--d-orange); }
.tpl-card-norate { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted); flex: 0 0 auto; white-space: nowrap; }
.tpl-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tpl-usage-pill { flex: 0 0 auto; }
.op-pill.is-dashed { border-style: dashed; }
.tpl-card-sub, .tpl-card-since { font-size: 11px; color: var(--d-muted); }

.tpl-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tpl-card-subject { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.tpl-card.is-unused .tpl-card-subject { color: var(--d-body-muted); }
.tpl-card-opening { font-size: 12px; line-height: 19px; color: var(--d-body-muted); text-wrap: pretty; }
.tpl-card.is-unused .tpl-card-opening { color: var(--d-muted); }
.tpl-card-dim { color: var(--d-faint); }

.tpl-card-foot {
  margin-top: auto; padding: 10px 14px; border-top: 1px dashed var(--d-stroke-light);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tpl-card-reason { font-size: 11px; color: var(--d-muted); }
.tpl-card-reason.is-warn { color: var(--d-amber); }
.tpl-card-actions { display: flex; gap: 12px; align-items: center; }
.tpl-card-actions form { margin: 0; display: inline-flex; }
.tpl-card-link {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 500 10px/1 "IBM Plex Sans"; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-orange-deep); text-decoration: none; min-height: 0;
}
.tpl-card-link:hover { text-decoration: underline; background: transparent; }
.tpl-card-link.is-quiet { color: var(--d-muted); }

.tpl-empty { padding: 40px 26px; text-align: center; color: var(--d-body-muted); }
.tpl-empty strong { display: block; font-size: 15px; color: var(--d-ink); margin-bottom: 6px; }
.tpl-empty p { margin: 0 0 14px; font-size: 13px; }
.tpl-footer { margin-top: auto; }

/* ── 13a Templates library — expandable table (default view) ─────────
   The card grid moved to ?view=tiles; the default is a scannable table
   where each row expands into the full subject/body. Built on the shared
   .op-table conventions, with a colspan detail row — <details> can't live
   inside a table. */
.tpl-table-wrap { padding: 14px 26px 18px; }
.tpl-table th,
.tpl-table td { vertical-align: top; }
.tpl-table thead th { white-space: nowrap; }
.tpl-col-num { text-align: right; white-space: nowrap; }
/* 14px gutter + 24px button + 6px = a 44px chevron column, so the detail
   panel below can indent to exactly where the name column starts. */
.tpl-col-toggle { width: 44px; }
.tpl-table .tpl-cell-toggle { padding-right: 6px; }
.tpl-col-actions { width: 1%; }

/* Row treatments mirror the card modifiers. */
.tpl-row.is-draft td:first-child { box-shadow: inset 3px 0 0 var(--d-amber); }
.tpl-row.is-unused .op-row-main { color: var(--d-body-muted); }

.tpl-row-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; min-height: 0;
  border: 0; background: transparent; color: var(--d-muted); cursor: pointer;
}
.tpl-row-toggle:hover { background: var(--d-oat-deep); color: var(--d-ink); }
.tpl-row-toggle svg { fill: currentColor; transition: transform 120ms ease; }
.tpl-row.is-expanded .tpl-row-toggle { color: var(--d-ink); }
/* .icon already nudges itself down 1px — keep that while flipping. */
.tpl-row.is-expanded .tpl-row-toggle svg { transform: translateY(1px) rotate(180deg); }

.tpl-row-num,
.tpl-row-rate { font-variant-numeric: tabular-nums; color: var(--d-ink); }
.tpl-row-rate { font-weight: 600; }
.tpl-row.is-best .tpl-row-rate { color: var(--d-orange); }
.tpl-cell-actions .tpl-card-actions { justify-content: flex-end; }

.tpl-detail-row[hidden] { display: none; }
.op-table tbody tr.tpl-detail-row,
.op-table tbody tr.tpl-detail-row:hover { background: transparent; border-top: 0; }
.tpl-detail-row > td { padding: 0 14px 14px 44px; }
.tpl-detail {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 14px;
  background: var(--d-parchment); border: 1px solid var(--d-stroke-light);
}
.tpl-detail-label {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--d-muted);
}
.tpl-detail-subject { font-size: 13px; font-weight: 600; color: var(--d-ink); overflow-wrap: anywhere; }
/* Same typography as the card preview — the body just keeps its line breaks. */
.tpl-detail-body {
  font-size: 12px; line-height: 19px; color: var(--d-body-muted);
  white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty;
}
.tpl-detail-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.tpl-detail-fact { font-size: 12px; color: var(--d-body-muted); }
.tpl-detail-vars { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* The paginator now sits above the bottom-pinned footer — give it the page
   gutter so it lines up with the list it belongs to. */
.tpl-pagination { margin: 8px 26px 14px; }

@media (prefers-reduced-motion: reduce) {
  .tpl-row-toggle svg { transition: none; }
}
/* Below the widths the card grid stepped down at, the table scrolls sideways
   inside .op-table-wrap rather than crushing its columns. */
@media (max-width: 1100px) {
  .tpl-table-wrap { padding: 14px 16px 18px; }
  .tpl-table { min-width: 780px; }
  .tpl-pagination { margin: 8px 16px 14px; }
}
@media (max-width: 760px) {
  .tpl-table-wrap { padding: 12px 0 18px; }
  .tpl-bar .tpl-view-toggle { margin-left: auto; }
}

/* ── 8a Template editor ────────────────────────────────────────────── */
.tpl-editor { display: flex; flex-direction: column; min-height: 0; }
.tpl-editor-header { border-bottom: 0; }
.tpl-editor-header .page-eyebrow a { color: var(--d-muted); }
.tpl-editor-rate { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.tpl-editor-rate-sub { font-size: 12px; font-weight: 400; color: var(--d-muted); }

.tpl-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  border-top: 1px solid var(--d-muted);
  min-height: 0;
}
@media (max-width: 1100px) { .tpl-editor-grid { grid-template-columns: minmax(0, 1fr); } }

.tpl-editor-main { min-width: 0; display: flex; flex-direction: column; padding: 16px 26px 0; gap: 14px; }
.tpl-editor-fields { display: flex; flex-direction: column; gap: 14px; }
.tpl-editor-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; }

.tpl-field { display: flex; flex-direction: column; gap: 5px; }
.tpl-field-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); }
.tpl-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tpl-field-input {
  width: 100%; padding: 9px 11px; background: var(--d-paper); border: 1px solid var(--d-stroke);
  font: 400 13px/1.4 "IBM Plex Sans"; color: var(--d-ink); min-height: 0;
}
.tpl-field-input.is-primary { border-color: var(--d-ink); }
.tpl-field-input[readonly] { background: var(--d-parchment); color: var(--d-body-muted); cursor: default; }
.tpl-field-hint { font-size: 11px; color: var(--d-muted); }
.tpl-field-body { flex: 1; min-height: 0; }
.tpl-body-textarea { min-height: 300px; line-height: 22px; resize: vertical; font-family: "IBM Plex Sans", sans-serif; }

.tpl-insert {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--d-oat); border: 1px dashed var(--d-stroke);
}
.tpl-insert-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }
.tpl-insert-chip {
  padding: 3px 8px; background: var(--d-paper); border: 1px solid var(--d-stroke);
  font: 400 12px/1 "IBM Plex Sans"; color: var(--d-ink); text-transform: none; letter-spacing: 0;
  min-height: 0; cursor: pointer;
}
.tpl-insert-chip:hover { border-color: var(--d-ink); background: var(--d-paper); }
.tpl-insert-block {
  margin-left: auto; padding: 3px 8px; border: 1px solid var(--d-muted); background: transparent;
  font: 500 11px/1 "IBM Plex Sans"; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-body-muted);
  min-height: 0; cursor: pointer;
}
.tpl-insert-block:hover { background: var(--d-oat-deep); }

.tpl-test-strip { display: flex; align-items: flex-end; gap: 10px; padding: 12px 0 16px; }
.tpl-test-strip .tpl-field { flex: 1; }
.tpl-test-strip.is-empty p { font-size: 12px; color: var(--d-muted); margin: 0 0 16px; }
.tpl-test-result { font-size: 12px; color: var(--d-body-muted); align-self: center; }

/* preview */
.tpl-preview { border-left: 1px dashed var(--d-stroke); background: var(--d-oat); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tpl-preview-head {
  padding: 16px 20px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--d-stroke);
}
.tpl-preview-title { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink); }
.tpl-preview-sub { font-size: 11px; color: var(--d-muted); margin-top: 2px; }
.tpl-preview-state {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px;
  border: 1px solid var(--d-green); background: var(--d-paper);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-green);
}
.tpl-preview-state::before { content: ""; width: 5px; height: 5px; background: var(--d-green); }
.tpl-preview-controls { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px dashed var(--d-stroke); }
.tpl-preview-ctl { display: flex; align-items: center; gap: 10px; }
.tpl-preview-ctl > span { flex: 0 0 78px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.tpl-preview-ctl select, .tpl-preview-ctl input {
  flex: 1; padding: 6px 10px; background: var(--d-paper); border: 1px solid var(--d-stroke);
  font: 400 12px/1.2 "IBM Plex Sans"; color: var(--d-ink); min-height: 0;
}
.tpl-preview-scroll { flex: 1; min-height: 0; padding: 14px 20px; overflow-y: auto; }

.tpl-preview-mail { background: var(--d-paper); border: 1px solid var(--d-stroke); }
.tpl-preview-eyebrow { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.tpl-preview-mail-subject { padding: 10px 12px; border-bottom: 1px dashed var(--d-stroke-light); }
.tpl-preview-mail-subject p { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.tpl-preview-mail-body { padding: 12px; }
.tpl-preview-mail-body pre {
  margin: 4px 0 0; font-family: "IBM Plex Sans", sans-serif; font-size: 12px; line-height: 20px; color: var(--d-ink);
  white-space: pre-wrap; word-wrap: break-word;
}
.tpl-preview-error { margin: 10px 0 0; font-size: 12px; color: var(--d-orange-deep); }

.tpl-preview-lint {
  margin-top: 12px; background: var(--d-paper); border: 1px solid var(--d-stroke);
  border-left: 3px solid var(--d-amber); padding: 10px 12px;
}
.tpl-preview-lint strong { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-amber); }
.tpl-preview-lint-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.tpl-lint-item { font-size: 12px; line-height: 18px; color: var(--d-body-muted); }

.tpl-preview-score { margin-top: 12px; background: var(--d-paper); border: 1px solid var(--d-stroke); padding: 10px 12px; }
.tpl-score-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tpl-score-state { font-size: 11px; color: var(--d-muted); }
.tpl-score-meters { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.tpl-score-meter-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--d-ink); }
.tpl-score-num { font-variant-numeric: tabular-nums; }
.tpl-score-track { height: 4px; background: var(--d-oat-deep); margin-top: 3px; }
.tpl-score-fill { height: 4px; background: var(--d-green); }
.tpl-score-fill.is-pass { background: var(--d-green); }
.tpl-score-fill.is-warn { background: var(--d-amber); }
.tpl-score-fill.is-fail { background: var(--d-orange-deep); }
.tpl-score-tip { font-size: 11px; line-height: 16px; color: var(--d-muted); margin-top: 3px; }
.tpl-score-btn { margin-top: 10px; width: 100%; }

.tpl-editor-footer { margin-top: 0; }
.tpl-editor-footer-left { display: flex; align-items: center; gap: 16px; }
.tpl-editor-footer-left span { font-size: 12px; color: var(--d-body-muted); }
.tpl-editor-footer-right { display: flex; align-items: center; gap: 14px; }

/* ── 12a Segments (list + detail split) ────────────────────────────── */
.seg-page { display: flex; flex-direction: column; min-height: 0; }
.seg-split {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  border-top: 1px solid var(--d-muted); min-height: 0; flex: 1;
}
@media (max-width: 1000px) { .seg-split { grid-template-columns: 300px minmax(0, 1fr); } }

.seg-list { border-right: 1px dashed var(--d-stroke); background: var(--d-oat); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.seg-list-head {
  padding: 12px 18px 10px; display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px dashed var(--d-stroke);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink);
}
.seg-list-sub { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--d-muted); }
.seg-list-body { flex: 1; min-height: 0; overflow-y: auto; }
.seg-list-item {
  display: block; padding: 13px 18px; text-decoration: none;
  background: var(--d-paper); border-left: 3px solid transparent; border-bottom: 1px dashed var(--d-stroke-light);
}
.seg-list-item:hover { background: var(--d-parchment); }
.seg-list-item.is-selected { background: var(--d-oat-deep); border-left-color: var(--d-orange); }
.seg-list-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.seg-list-name { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.seg-list-name.is-dim { color: var(--d-body-muted); }
.seg-list-count { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.seg-list-count.is-empty { color: var(--d-orange-deep); font-weight: 500; }
.seg-list-crit { font-size: 11px; color: var(--d-muted); margin-top: 3px; }
.seg-list-used { font-size: 11px; color: var(--d-muted); margin-top: 3px; }
.seg-list-used.is-live { color: var(--d-orange-deep); }
.seg-list-used.is-warn { color: var(--d-amber); }
.seg-list-empty { padding: 22px 18px; font-size: 12px; color: var(--d-muted); }

.seg-detail { min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.seg-detail-head {
  padding: 18px 26px 14px; border-bottom: 1px dashed var(--d-stroke);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.seg-rename-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.seg-rename { width: 300px; font-size: 17px; font-weight: 600; padding: 7px 10px; }
.seg-rename-hint { font-size: 11px; color: var(--d-muted); }
.seg-detail-sub { font-size: 12px; color: var(--d-muted); margin-top: 6px; }
.seg-detail-actions { display: flex; gap: 9px; flex: 0 0 auto; }

.seg-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 0; display: flex; flex-direction: column; gap: 20px; }
.seg-block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px dashed var(--d-stroke); padding-bottom: 7px;
}
.seg-block-title { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink); }
.seg-block-sub { font-size: 11px; color: var(--d-muted); }
.seg-block-sub a { color: var(--d-orange-deep); }
.seg-block-empty { padding: 14px 0; font-size: 12px; color: var(--d-muted); }

.seg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.seg-crit-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px;
  background: var(--d-paper); border: 1px solid var(--d-ink); font-size: 12px; color: var(--d-ink);
}
.seg-crit-chip.is-plain { border-color: var(--d-stroke); color: var(--d-body-muted); }
.seg-crit-remove { display: inline-flex; margin: 0; }
.seg-crit-remove button {
  border: 0; background: transparent; padding: 0; min-height: 0; cursor: pointer;
  color: var(--d-muted); font-size: 13px; line-height: 1; letter-spacing: 0; text-transform: none;
}
.seg-crit-remove button:hover { color: var(--d-orange-deep); background: transparent; }
.seg-crit-add {
  padding: 5px 10px; border: 1px dashed var(--d-ink); font-size: 12px; color: var(--d-ink); text-decoration: none;
}
.seg-crit-add:hover { background: var(--d-oat-deep); }

.seg-resolve { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 22px; padding-top: 13px; }
.seg-resolve-lab { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }
.seg-resolve-num { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); margin-top: 2px; }
.seg-resolve-num.is-orange { color: var(--d-orange); }
.seg-resolve-num.is-green { color: var(--d-green); font-weight: 500; }
.seg-resolve-note { font-size: 11px; color: var(--d-muted); }
.seg-resolve-bar { display: flex; height: 10px; margin-top: 14px; }
.seg-resolve-bar span { display: block; height: 10px; }
.seg-resolve-legend { display: flex; gap: 18px; margin-top: 7px; font-size: 11px; color: var(--d-body-muted); }
.seg-resolve-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: baseline; }

.seg-usage-table td, .seg-members-table td { padding: 12px 10px; }
.seg-usage-name { display: flex; align-items: baseline; gap: 9px; }
.seg-usage-name > span:first-child { font-size: 13px; font-weight: 500; color: var(--d-ink); }
.seg-usage-drift { font-size: 11px; color: var(--d-amber); margin-top: 3px; }
.seg-usage-meta { font-size: 11px; color: var(--d-muted); margin-top: 3px; }
.seg-usage-num { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--d-ink); white-space: nowrap; }
.seg-usage-link { text-align: right; }
.seg-usage-link a { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-orange-deep); text-decoration: none; }

.seg-member { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.seg-member .contact-avatar { flex: 0 0 26px; height: 26px; font-size: 10px; }
.seg-member-name { display: block; font-size: 12px; font-weight: 500; color: var(--d-ink); }
.seg-member-co { display: block; font-size: 11px; color: var(--d-muted); }
.seg-member-reason { font-size: 12px; color: var(--d-body-muted); }
.seg-member-last { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-body-muted); white-space: nowrap; }

.seg-detail-footer { margin-top: auto; }
.seg-detail-footer form { margin: 0; }
.seg-delete-link {
  border: 0; background: transparent; padding: 0; min-height: 0; cursor: pointer;
  font: 500 11px/1 "IBM Plex Sans"; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-orange-deep);
}
.seg-delete-link:hover { background: transparent; text-decoration: underline; }
.seg-detail-empty { padding: 60px 26px; text-align: center; color: var(--d-body-muted); }
.seg-detail-empty strong { display: block; font-size: 15px; color: var(--d-ink); margin-bottom: 6px; }

/* ── 7a Contact detail ─────────────────────────────────────────────── */
.cv-page { display: flex; flex-direction: column; min-height: 0; }
/* Vertical inset only — .breadcrumbs carries the shared 26px page gutter. */
.cv-crumb { padding: 12px 0 0; }

.cv-hero { padding: 12px 26px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cv-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cv-avatar.contact-avatar { flex: 0 0 52px; width: 52px; height: 52px; font-size: 17px; font-weight: 500; }
.cv-hero-title h1 { margin: 0; font-size: 27px; line-height: 31px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.cv-hero-title p { margin: 3px 0 0; font-size: 13px; color: var(--d-body-muted); }
.cv-hero-title p strong { font-weight: 600; color: var(--d-ink); }
.cv-hero-actions { display: flex; gap: 10px; flex: 0 0 auto; }

.cv-ribbon {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 24px;
  padding: 16px 26px; background: var(--d-parchment);
  border-top: 1px solid var(--d-muted); border-bottom: 1px dashed var(--d-stroke);
}
.cv-ribbon-lab { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); }
.cv-ribbon-featrow { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.cv-ribbon-feat { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-orange); }
.cv-ribbon-val { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--d-ink); margin-top: 4px; }
.cv-ribbon-sub { display: block; font-size: 11px; color: var(--d-muted); }

.cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; min-height: 0; }
@media (max-width: 1080px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }

.cv-main { min-width: 0; padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 22px; }
.cv-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--d-stroke); padding-bottom: 7px; }
.cv-block-title { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink); }
.cv-block-sub { font-size: 11px; color: var(--d-muted); }
.cv-block-empty { padding: 14px 0; font-size: 12px; color: var(--d-muted); }

.cv-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
@media (max-width: 620px) { .cv-defs { grid-template-columns: 1fr; } }
.cv-def { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--d-stroke-light); }
.cv-def dt { flex: 0 0 96px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); padding-top: 3px; margin: 0; }
.cv-def dd { margin: 0; font-size: 13px; color: var(--d-ink); min-width: 0; word-break: break-word; }
.cv-def dd a { color: var(--d-orange-deep); }
.cv-def.is-edit dd { width: 100%; }
.cv-input { width: 100%; padding: 7px 10px; background: var(--d-paper); border: 1px solid var(--d-stroke); font: 400 13px/1.4 "IBM Plex Sans"; color: var(--d-ink); min-height: 0; }
.cv-check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-body-muted); }
.cv-provenance { display: flex; padding: 9px 0; font-size: 11px; color: var(--d-muted); }
.cv-prov-src { color: var(--d-body-muted); }

.cv-enrich { border: 0; }
.cv-enrich-summary { cursor: pointer; list-style: none; }
.cv-enrich-summary::-webkit-details-marker { display: none; }

.cv-camp-table td { padding: 11px 10px; }
.cv-camp-name { font-size: 13px; font-weight: 500; color: var(--d-ink); }
.cv-camp-meta { font-size: 11px; color: var(--d-muted); }
.cv-num { text-align: right; width: 70px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.cv-num.is-good { color: var(--d-green); font-weight: 600; }
.cv-num.is-none { color: var(--d-stroke); }
.cv-camp-open { text-align: right; width: 70px; }
.cv-camp-open a { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-orange-deep); text-decoration: none; }

.cv-history-head-left { display: flex; align-items: baseline; gap: 10px; }
.cv-history .cv-block-head { align-items: center; }
.cv-log { list-style: none; margin: 4px 0 0; padding: 0; }
.cv-log-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--d-stroke-light); }
.cv-log-row:last-child { border-bottom: 0; }
.cv-log-date { flex: 0 0 62px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--d-muted); padding-top: 2px; line-height: 15px; }
.cv-log-marker { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 6px; }
.cv-log-marker.is-send { background: var(--d-ink); }
.cv-log-marker.is-reply { background: var(--d-green); }
.cv-log-marker.is-system { border: 1px solid var(--d-stroke); }
.cv-log-body { min-width: 0; }
.cv-log-title { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cv-log-summary { font-size: 12px; line-height: 18px; color: var(--d-body-muted); margin-top: 4px; text-wrap: pretty; }
.cv-log-summary a { color: var(--d-orange-deep); }

/* right rail */
.cv-rail { border-left: 1px dashed var(--d-stroke); background: var(--d-oat); padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cv-rail-block { border-top: 1px dashed var(--d-stroke); padding-top: 16px; }
.cv-rail-block:first-child { border-top: 0; padding-top: 0; }
.cv-rail-title { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink); margin-bottom: 10px; }
.cv-rail-title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cv-rail-title-row .cv-rail-title { margin-bottom: 0; }
.cv-rail-sub { font-size: 11px; color: var(--d-muted); }

.cv-reach { display: flex; flex-direction: column; gap: 8px; }
.cv-reach-card { background: var(--d-paper); border: 1px solid var(--d-stroke); padding: 10px 12px; }
.cv-reach-card.is-good { border-left: 3px solid var(--d-green); }
.cv-reach-card.is-warn { border-left: 3px solid var(--d-amber); }
.cv-reach-head { display: flex; align-items: center; gap: 8px; }
.cv-reach-dot { width: 7px; height: 7px; display: inline-block; }
.cv-reach-dot.is-good { background: var(--d-green); }
.cv-reach-dot.is-warn { background: var(--d-amber); }
.cv-reach-name { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.cv-reach-note { font-size: 11px; line-height: 17px; color: var(--d-muted); margin-top: 3px; }

.cv-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cv-action-grid .button { background: var(--d-paper); }
.cv-delete { width: 100%; margin-top: 8px; background: var(--d-paper); }
.cv-delete-note { font-size: 11px; line-height: 16px; color: var(--d-muted); margin-top: 6px; }

.cv-spark { background: var(--d-paper); border: 1px solid var(--d-stroke); padding: 10px 12px; }
.cv-spark-legend { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); margin-top: 4px; }
.cv-touch-defs { display: flex; flex-direction: column; margin-top: 10px; }
.cv-touch-def { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--d-stroke-light); }
.cv-touch-def:last-child { border-bottom: 0; }
.cv-touch-def span:first-child { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.cv-touch-def span:last-child { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.cv-touch-def span.is-warn { color: var(--d-amber); }

.cv-same { display: flex; flex-direction: column; gap: 8px; }
.cv-same-item { display: flex; align-items: center; gap: 10px; background: var(--d-paper); border: 1px solid var(--d-stroke); padding: 8px 10px; text-decoration: none; }
.cv-same-item:hover { border-color: var(--d-ink); }
.cv-same-avatar.contact-avatar { flex: 0 0 24px; width: 24px; height: 24px; font-size: 10px; }
.cv-same-name { display: block; font-size: 12px; font-weight: 500; color: var(--d-ink); }
.cv-same-state { display: block; font-size: 11px; color: var(--d-muted); }

/* Override the legacy savebar to Dispatch tokens (dark ink bar, square). */
.cv-savebar { background: var(--d-ink); border-radius: 0; box-shadow: none; animation: none; }
.cv-savebar-text { color: var(--d-oat); font-weight: 500; }
.cv-savebar-text strong { color: var(--d-paper); }

/* ─────────────────────────────────────────────────────────────────────────
   Campaign performance (frame 11a): header, headline ribbon, per-step funnel,
   A/B table with verdict sentences, one activity tab strip.
   ───────────────────────────────────────────────────────────────────────── */
.perf-page { display: flex; flex-direction: column; min-height: 100vh; }
.perf-header { align-items: flex-end; }
.perf-crumb { display: flex; align-items: center; gap: 8px; }
.perf-crumb a { color: var(--d-muted); text-decoration: none; }
.perf-crumb a:hover { color: var(--d-orange-deep); }
.perf-crumb .is-current { color: var(--d-ink); }
.perf-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.perf-sub { margin: 4px 0 0; font-size: 12px; color: var(--d-muted); }
.perf-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border: 1px solid;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.perf-status .led { width: 5px; height: 5px; }
.perf-status.is-ok { color: var(--d-green); border-color: var(--d-green); }
.perf-status.is-ok .led { background: var(--d-green); }
.perf-status.is-warn { color: var(--d-amber); border-color: var(--d-amber); }
.perf-status.is-warn .led { background: var(--d-amber); }
.perf-status.is-danger { color: var(--d-orange-deep); border-color: var(--d-orange-deep); background: var(--d-orange-wash); }
.perf-status.is-danger .led { background: var(--d-orange-deep); }
.perf-status.is-muted { color: var(--d-body-muted); border-color: var(--d-stroke); }
.perf-status.is-muted .led { background: var(--d-muted); }
.perf-actions form { margin: 0; }

/* Headline ribbon */
.perf-ribbon {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 24px;
  padding: 15px 26px; background: var(--d-parchment);
  border-top: 1px solid var(--d-muted); border-bottom: 1px dashed var(--d-stroke);
}
.perf-metric-label {
  display: block; font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted);
}
.perf-metric-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.perf-metric-headline {
  font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-orange);
}
.perf-metric-delta { font-size: 12px; }
.perf-metric-delta.is-up { color: var(--d-green); }
.perf-metric-delta.is-down { color: var(--d-orange-deep); }
.perf-metric-value {
  display: block; font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--d-ink); margin-top: 4px;
}
.perf-metric-value.is-warn { color: var(--d-amber); }
.perf-metric-sub { display: block; font-size: 11px; color: var(--d-muted); margin-top: 1px; }
@media (max-width: 960px) { .perf-ribbon { grid-template-columns: repeat(2, 1fr); } }

.perf-body { flex: 1; padding: 18px 26px 0; display: flex; flex-direction: column; gap: 22px; }
.perf-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--d-stroke); padding-bottom: 7px;
}
.perf-section-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-ink);
}
.perf-section-note { font-size: 11px; color: var(--d-muted); }
.perf-section-foot { margin: 8px 0 0; font-size: 11px; line-height: 17px; color: var(--d-muted); }

/* Per-step funnel */
.perf-funnel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; padding-top: 13px;
}
.perf-funnel-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.perf-funnel-step-label { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.perf-funnel-step-sent { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.perf-funnel-bar { display: flex; height: 10px; margin-top: 7px; background: var(--d-oat-deep); }
.perf-funnel-bar > span { display: block; height: 100%; }
.perf-funnel-bar .seg-delivered { background: var(--d-ink); }
.perf-funnel-bar .seg-bounced { background: var(--d-orange-deep); }
.perf-funnel-bar .seg-empty { background: var(--d-oat-deep); }
.perf-funnel-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 11px; color: var(--d-body-muted);
}
.perf-funnel-legend .is-green { color: var(--d-green); }
.perf-funnel-legend .is-red { color: var(--d-orange-deep); }
.perf-funnel-legend .is-muted { color: var(--d-muted); }

/* A/B table */
.perf-ab-table th.num, .perf-ab-table td.num { text-align: right; }
.perf-ab-table td.num.rate { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.perf-ab-table td.num.rate.is-headline { color: var(--d-orange); }
.perf-ab-table td.num.strong { font-weight: 600; }
.perf-ab-table tr.is-winner { background: var(--d-parchment); }
.perf-ab-variant { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.perf-ab-letter { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.perf-ab-name { font-size: 13px; color: var(--d-ink); }
.perf-ab-meta { font-size: 11px; color: var(--d-muted); margin-top: 2px; }
.perf-ab-verdict { font-size: 12px; line-height: 18px; color: var(--d-body-muted); max-width: 280px; }
.perf-ab-verdict strong { color: var(--d-ink); }
.perf-tag {
  padding: 1px 6px; border: 1px solid;
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.perf-tag.is-green { color: var(--d-green); border-color: var(--d-green); }
.perf-tag.is-muted { color: var(--d-body-muted); border-color: var(--d-stroke); }
.perf-inuse { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-faint); }
.button.disabled, a.button.disabled {
  border: 1px solid var(--d-stroke-light); color: var(--d-stroke);
  background: transparent; pointer-events: none; cursor: default;
}

/* Activity tab strip */
.perf-tabstrip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--d-muted);
}
.perf-tabs { display: flex; gap: 0; }
.perf-tab {
  padding: 8px 13px;
  border: 1px solid var(--d-stroke); border-bottom: 0; border-left: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-body-muted); background: var(--d-paper); cursor: pointer;
}
.perf-tab:first-child { border-left: 1px solid var(--d-stroke); }
.perf-tab:hover { background: var(--d-oat-deep); }
.perf-tab.is-active { background: var(--d-oat-deep); border-color: var(--d-ink); color: var(--d-ink); }
.perf-tab-count { font-variant-numeric: tabular-nums; color: var(--d-muted); }
.perf-tab-count.is-accent { color: var(--d-orange); }
.perf-tab.is-active .perf-tab-count { color: var(--d-body-muted); }
.perf-mailbox-split { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.perf-mailbox-split-label { font-size: 11px; color: var(--d-muted); }
.perf-mailbox-split-value { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.perf-tab-panel[hidden] { display: none; }
.op-pill.is-notnow { color: var(--d-body-muted); border-color: var(--d-body-muted); }
.perf-activity-table th.num, .perf-activity-table td.num { text-align: right; }
.perf-footer { margin-top: 18px; }

/* Perf: breadcrumb + about facts + brief */
/* Vertical inset only — .breadcrumbs carries the shared 26px page gutter. */
.perf-crumb-wrap { padding: 16px 0 0; }
.perf-crumb-wrap .breadcrumbs { margin: 0; }
.perf-about .perf-defs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 26px; margin: 13px 0 0;
}
@media (max-width: 720px) { .perf-about .perf-defs { grid-template-columns: 1fr 1fr; } }
.perf-defs > div { min-width: 0; }
.perf-defs dt {
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--d-muted); margin: 0 0 2px;
}
.perf-defs dd { margin: 0; font-size: 13px; color: var(--d-ink); overflow-wrap: anywhere; }
.perf-brief { margin-top: 12px; border-top: 1px dashed var(--d-stroke-light); padding-top: 10px; }
.perf-brief summary { font-size: 12px; font-weight: 500; color: var(--d-body-muted); cursor: pointer; }
.perf-brief pre { white-space: pre-wrap; font-size: 12px; line-height: 18px; color: var(--d-body-muted); margin: 8px 0 0; }

/* ============================================================================
   Phase 6 — remaining unmapped utility pages
   Carries the Dispatch vocabulary onto templates outside the 13 designed
   screens. No new IA: page-header/footer chrome, paper cards, dashed rules,
   Dispatch tokens only. Older off-palette page rules for these templates are
   superseded by the scoped rules below.
   ========================================================================= */

/* --- Standalone pages (login / unsubscribe / error) — no sidebar --------- */
body.standalone {
  background: var(--d-oat);
}
.standalone-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.standalone-card {
  width: 100%;
  max-width: 400px;
  background: var(--d-paper);
  border: 1px solid var(--d-ink);
  padding: 32px 34px 34px;
}
.standalone-card--center {
  text-align: center;
}
.standalone-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--d-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.standalone-card--center .standalone-brand { justify-content: center; }
.standalone-brand img { display: block; }
.standalone-title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--d-ink);
}
.standalone-lede {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d-body-muted);
}
.standalone-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.standalone-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--d-body-muted);
}

/* --- Duplicates: candidate pairs ---------------------------------------- */
.dup-pair {
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.dup-reasons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dup-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.dup-side strong {
  display: block;
  font-size: 14px;
  color: var(--d-ink);
  margin-bottom: 4px;
}
.dup-side .dup-line {
  font-size: 12.5px;
  color: var(--d-body-muted);
  line-height: 1.5;
}
.dup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--d-stroke-light);
}
.dup-actions form { display: inline; margin: 0; }
.dup-empty {
  padding: 20px 0;
  color: var(--d-body-muted);
  font-size: 13px;
}

/* --- Health / advanced cards, audit log — token cleanup ----------------- */
.util-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.util-card {
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
  padding: 15px 17px;
}
.util-card .page-eyebrow { margin-bottom: 8px; }
.util-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--d-body-muted);
}
.util-card p code {
  font-family: inherit;
  background: var(--d-oat);
  padding: 1px 5px;
  color: var(--d-ink);
}
.util-alert { color: var(--d-orange-deep); font-weight: 500; }

.util-log {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}
.util-log-row {
  display: grid;
  grid-template-columns: 168px 140px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 10px 16px;
  border-top: 1px dashed var(--d-stroke-light);
  font-size: 13px;
}
.util-log-row:first-child { border-top: 0; }
.util-log-row.is-error { background: var(--d-orange-wash); }
.util-log-ts {
  color: var(--d-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.util-log-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--d-body-muted);
}
.util-log-row.is-error .util-log-tag { color: var(--d-orange-deep); }
.util-log-msg { color: var(--d-ink); overflow-wrap: anywhere; }

/* --- Audit / util filter bar -------------------------------------------- */
.util-filter {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 26px 16px;
}
.util-filter label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--d-body-muted);
}
.util-log-wrap { padding: 0 26px; }
.util-empty {
  padding: 22px 26px;
  color: var(--d-body-muted);
  font-size: 13px;
}

/* --- Campaign follow-ups: two-column drafts + pipeline rail -------------- */
.fu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) { .fu-grid { grid-template-columns: 1fr; } }

.fu-drafts {
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}
.fu-drafts-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px dashed var(--d-stroke-light);
}
.fu-drafts-hd strong { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.fu-drafts-hd .small { font-size: 11.5px; color: var(--d-muted); margin-top: 3px; max-width: 46ch; }
.fu-drafts-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The tools row mixes .compact-button (30px) with the bespoke 28px arrows.
   Pull the buttons down to the arrow height and match the stroke so the whole
   cluster reads as one control family. */
.fu-drafts-tools .button { min-height: 28px; padding: 5px 9px; }
.fu-drafts-nav { display: flex; align-items: center; gap: 4px; }
.fu-drafts-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  /* min-height beats the base button's 36px floor, keeping the arrow square. */
  width: 28px; height: 28px; min-height: 28px; border: 1px solid var(--d-ink);
  background: var(--d-paper); color: var(--d-body-muted); cursor: pointer;
}
.fu-drafts-arrow:hover { background: var(--d-oat-deep); }
.fu-drafts-arrow svg { width: 14px; height: 14px; fill: currentColor; }
.fu-drafts-counter { font-size: 12px; color: var(--d-body-muted); padding: 0 6px; font-variant-numeric: tabular-nums; }
.fu-empty { padding: 40px 24px; text-align: center; color: var(--d-muted); font-size: 13px; }

.fu-draft { display: none; gap: 14px; padding: 18px 16px; }
.fu-draft.is-active { display: flex; }
.fu-draft.is-excluded { opacity: 0.55; }
.fu-draft .check { flex: 0 0 16px; margin-top: 3px; }
.fu-draft .body { min-width: 0; flex: 1; }
.fu-draft .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fu-draft .who .av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--d-oat-deep);
  color: var(--d-body-muted); border: 1px solid var(--d-stroke);
  font-size: 11px; font-weight: 600;
}
.fu-draft .who .name { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.fu-draft .who .meta { font-size: 12px; color: var(--d-muted); }
.fu-draft-edit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--d-body-muted);
  text-decoration: none; border: 1px solid var(--d-stroke); padding: 3px 8px;
}
.fu-draft-edit:hover { background: var(--d-oat-deep); color: var(--d-ink); }
.fu-draft-edit svg { width: 13px; height: 13px; fill: currentColor; }
.fu-draft .subj { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.fu-draft .subj .lbl {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-muted); flex: 0 0 auto;
}
.fu-draft .subj .val { font-size: 13.5px; font-weight: 500; color: var(--d-ink); }
.fu-draft .preview {
  white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5;
  color: var(--d-body-muted); margin: 0; max-height: 220px; overflow: hidden;
  border-top: 1px dashed var(--d-stroke-light);
  background: transparent; border-radius: 0; padding: 10px 0 0; cursor: pointer;
}
.fu-draft .preview.is-expanded { max-height: none; }
.fu-draft .preview.is-short { cursor: default; }

/* Pipeline rail */
.fu-rail { border: 1px solid var(--d-stroke); background: var(--d-paper); }
.fu-rail-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px dashed var(--d-stroke-light);
}
.fu-rail-hd strong { font-size: 13px; font-weight: 600; color: var(--d-ink); }
.fu-rail-hd .sub { font-size: 11.5px; color: var(--d-muted); margin-top: 3px; }
.fu-rail-ready {
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--d-green); white-space: nowrap;
}
.fu-rail-ready.is-warn { color: var(--d-amber); }
.fu-rail-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 16px; border-top: 1px dashed var(--d-stroke-light);
}
.fu-rail-item:first-of-type { border-top: 0; }
.fu-rail-item .pf-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px;
}
.fu-rail-item .pf-ico svg { width: 16px; height: 16px; fill: currentColor; }
.fu-rail-item.is-ok .pf-ico { color: var(--d-green); }
.fu-rail-item.is-warn .pf-ico { color: var(--d-amber); }
.fu-rail-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--d-ink); }
.fu-rail-item span { font-size: 12px; color: var(--d-body-muted); }
.fu-rail-foot { padding: 12px 16px; border-top: 1px solid var(--d-ink); background: var(--d-parchment); }
.fu-rail-foot .row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 2px 0; }
.fu-rail-foot .l { color: var(--d-muted); }
.fu-rail-foot .v { color: var(--d-ink); font-weight: 500; }

/* Sticky action bar */
.fu-actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px; padding: 14px 26px;
  border-top: 1px solid var(--d-ink); background: var(--d-parchment);
}
.fu-actionbar .left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fu-actionbar .summary { font-size: 13px; color: var(--d-body-muted); }

/* ══════════════════════════════════════════════════════════════════════
   PHASE 7 — Shell pinning · breadcrumb gutter · sidebar footer · /drafts
   Deliberately last in the file: each rule below finishes behaviour an
   earlier layer set up but never resolved. Keep new rules under this
   banner so the cascade stays chronological.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Status bar flush to the viewport bottom ───────────────────────────
   .page is min-height:100vh but laid out as a plain block, so on a short
   page (dashboard, contacts, templates) the .page-footer sat wherever the
   content ended, leaving dead paper below it. Making the content column a
   flex column lets the footer absorb the slack. Pages that already ship
   their own flex shell (.board, .inbox, .cs-shell, .perf-page) were
   compensating for exactly this and keep working unchanged.
   ────────────────────────────────────────────────────────────────────── */
.page {
  display: flex;
  flex-direction: column;
}

/* Inside a flex column this pins the bar to the bottom; in any other
   formatting context margin-top:auto computes to 0, so a footer nested in
   a plain block keeps sitting directly under its content. */
.page-footer { margin-top: auto; }

/* Page shells written as flex columns with `min-height: 0` — i.e. already
   assuming a flex parent — but never told to claim the leftover height, so
   their own `margin-top: auto` footers had nothing to push against. */
.tpl-lib,
.tpl-editor,
.seg-page,
.cv-page { flex: 1 1 auto; }

/* ── Breadcrumbs carry the page gutter themselves ──────────────────────
   breadcrumbs.html is included bare by nine templates, where it rendered
   flush to the viewport edge while .page-header / .page-body inset 26px —
   the crumb icon sat left of everything else on the page. Padding the nav
   itself fixes all of them at once; the two templates that wrapped it in a
   padded div (.cv-crumb, .perf-crumb-wrap) now inset vertically only.
   ────────────────────────────────────────────────────────────────────── */
.breadcrumbs { padding: 0 26px; }

/* ── Sidebar footer — Dispatch pass ────────────────────────────────────
   Was: inline-styled capacity numbers, a text-only Settings link whose
   .active state was invisible (the block-level .sidebar-footer a rule
   zeroed the left border nav rows light up with), a hardcoded "every
   5 min", and inline-styled logout chrome. Now: hairline-separated rows
   using the same vocabulary as the nav groups above.
   ────────────────────────────────────────────────────────────────────── */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: 8px;
  border-top: 1px dashed rgba(244, 241, 234, 0.22);
}

.sidebar-footer > * + * { border-top: 1px dashed rgba(244, 241, 234, 0.16); }

.sidebar-footer-block { padding: 13px 18px 12px 15px; }
.sidebar-footer-block .sidebar-group-label { padding-left: 0; padding-right: 0; }

.sidebar-capacity {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sidebar-capacity-num {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--d-oat);
}

.sidebar-capacity-cap {
  font-size: 11px;
  color: rgba(244, 241, 234, 0.5);
}

.sidebar-capacity-none {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(244, 241, 234, 0.5);
}

/* Match the nav rows above: icon gap, hover wash, and a visible active
   state. Beats the older `.sidebar-footer a` block on order (equal
   specificity), and `.active` outranks both. */
.sidebar-footer-nav { padding: 7px 0; }

.sidebar-footer-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 15px;
  border-left: 3px solid transparent;
  font-size: 13px;
  font-weight: 400;
  color: rgba(244, 241, 234, 0.68);
  text-decoration: none;
}

.sidebar-footer-nav a:hover {
  color: #fffefb;
  background: rgba(244, 241, 234, 0.06);
}

.sidebar-footer-nav a.active {
  border-left-color: var(--d-orange);
  background: rgba(204, 75, 18, 0.14);
  color: #fffefb;
  font-weight: 500;
}

.sidebar-status { padding: 11px 18px 11px 15px; }

.sidebar-logout { margin: 0; padding: 11px 18px 11px 15px; }
.sidebar-logout-button { width: 100%; }

/* ── /drafts — every unsent draft, grouped by campaign ─────────────────
   Panel treatment copied from the follow-ups rail (.fu-rail): paper body,
   hairline stroke, oat header row. The table itself is the shared
   .op-table component.
   ────────────────────────────────────────────────────────────────────── */
.drafts-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 26px 26px;
}

.drafts-group {
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}

.drafts-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--d-oat);
  border-bottom: 1px solid var(--d-stroke);
}

.drafts-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.drafts-group-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink);
  overflow-wrap: anywhere;
}

.drafts-group-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--d-muted);
  font-variant-numeric: tabular-nums;
}

.drafts-group-link { margin-left: auto; }

.drafts-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.drafts-cell-action { text-align: right; }

.drafts-empty {
  padding: 46px 26px;
  text-align: center;
  color: var(--d-body-muted);
}

.drafts-empty strong {
  display: block;
  font-size: 15px;
  color: var(--d-ink);
  margin-bottom: 6px;
}

.drafts-empty p { margin: 0 0 14px; font-size: 13px; }

/* ── Header action menus size to their own trigger ─────────────────────
   `.action-menu` reserved `min-width: 132px` on the <details> box while its
   <summary> shrink-fits (~85px for "More"), so every header carrying one
   showed ~45px of dead space between the trigger and the next button. The
   reservation belongs to the dropdown panel, not the box that anchors it:
   `.action-menu-list` already declares `min-width: 168px` (and the placement
   script in base.html clamps its width measurement to the same 168px floor),
   which is comfortably over the 132px the items need to stay on one line.
   So the box can simply size to its summary. Covers both usages — the
   Contacts "More" menu and the Campaign performance "Actions" menu.
   ────────────────────────────────────────────────────────────────────── */
.action-menu { min-width: 0; }
/* Menu items authored in Title Case must render that way whether they are
   <a> links or <button> submits — the base button recipe's uppercase +
   letter-spacing otherwise splits one menu into two typographic families. */
.action-menu-item,
button.action-menu-item { text-transform: none; letter-spacing: 0; }