/* ============================================================
   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;
  /* Text tokens meet WCAG AA (4.5:1) on every page ground (paper, parchment,
     oat, oat-deep); scripts/check_contrast.py verifies them. */
  --d-muted: #635e55;
  --d-body-muted: #57534a;
  --d-faint: #706a5d;
  --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, [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-kpi-value.is-accent { color: var(--d-orange-deep); }

.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;
}

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

.breadcrumbs {
  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);
}

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 {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
}

.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, .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-toggle {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  color: var(--accent-dark);
  background: #ffffff;
  border: 1px solid #bddbe0;
  
}

.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);
}

.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);
  
}

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

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

.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);
  
}

.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);
  
}

.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. */

.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);
  
  
}

.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;
}

.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;
}

.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;
}

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 {
  color: var(--d-muted);
  font-size: 13px;
  font-weight: 400;
}

/* 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 {
  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;
  
  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);
  
  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;
}

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;
  
}

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

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

.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-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-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;
}

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

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

.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);
  
  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);
  
  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;
  
}

.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;
}

.settings-icon-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.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);
  
}

.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);
  
}

.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%;
}

.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);
  
  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;
  
  transform: translateY(-1px);
}

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

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

.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;
}

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

 .row input {
  width: auto;
}

.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);
  
}

.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);
  
  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;
}

.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);
  
  background: #ffffff;
  
}

.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;
  
  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;
}

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

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

@media (max-width: 700px) {
  

  .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-preview-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;
  }

  
}

@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;
  }

  

  

  

  .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);
  
}

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

.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-*`.
   ────────────────────────────────────────────────────────────────────── */

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

/* KPI tiles */

/* Two-column status grid (about + rail) */

/* Tabbed panel */

.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. */

/* Buttons used inside the rail. Re-skin existing `.button` is risky, so we
   add a local class. */

/* Responsive */

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

/* ── Hero ─────────────────────────────────────────────────────────── */

/* ── Stat ribbon ──────────────────────────────────────────────────── */

/* ── Slim page header ─────────────────────────────────────────────── */

/* ── Triage bar (action-first: what needs you, then a compact trend) ─ */

/* ── Lower grid: campaigns + side cards ──────────────────────────── */

.dash-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  
  
  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;
  
}
.dash-panel-actions { display: flex; gap: 8px; align-items: center; }

/* ── Campaign worklist: status-spine action cards ───────────────────── */

/* state → spine colour */
        /* urgent amber */
  /* teal */
        /* muted red */
        /* slate */
 /* green */
        /* faint grey */

/* urgent: faint warm wash bleeding from the spine */

/* hover */

/* 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; } }

/* identity column: name headline over sender */

/* reply-rate column: figure over label, right-aligned */

/* sender line */

/* action column: next-action pill over muted detail */

/* 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) */

/* the bar already encodes the colours, so drop the redundant legend dots to save width */

/* Campaign performance: per-stage sequence funnel */

/* chevron — appears on hover, vertically centred on the card's right edge */

/* Sender mailboxes — one compact line per identity (email · sent/limit) */

/* Worklist empty state */

/* Recent replies */

/* Responsive */

/* ──────────────────────────────────────────────────────────────────────
   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; }

/* Status filter chip row */

.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); 
  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;
  
}
.camp-chip .dot {
  width: 7px; height: 7px; 
  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; }

/* 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);
  
  
}
.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;
  
  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;
  outline: 2px solid var(--d-orange);
  outline-offset: 2px;
}
.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;
   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);
  
  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;
   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 */

.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; }

/* 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-row.is-open > td { background: #f7f9fb; }

.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 .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;
  
  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;
  
  background: #9aa7b5;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Expand-recipients picker table */
.expand-table-scroll {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  
  background: var(--panel);
  
}
.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 */

@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; }
}

/* ──────────────────────────────────────────────────────────────────────
   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-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);
  
  
}
.cv-hero-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px; min-width: 0;
}
.cv-avatar {
  width: 64px; height: 64px;
  
  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;
  
  user-select: none;
}
.cv-hero-title { min-width: 0; }

.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-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;
}

/* Reusable card chrome to mirror .dash-card across the detail page */

/* Identity defs grid */
.cv-defs {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cv-input {
  width: 100%;
  padding: 8px 12px;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  
  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);
  
}
.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;
}

/* Campaign history table */

/* 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%);
  
}

.cv-log-marker {
  width: 30px; height: 30px;
  
  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-body { min-width: 0; }

.cv-log-title { font-size: 0.92rem; font-weight: 800; color: var(--ink); }

/* Status + quick actions side card */

/* Engagement card */

/* Source card */

/* 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;
  
  
  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-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;
  
  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);
  
  
}
.settings-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  
  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);
  
}
.settings-tabs a svg { width: 14px; height: 14px; fill: currentColor; }

/* Senders panel */

/* ── 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: 1px solid var(--line);
  font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.deliv-risk-dot { width: 10px; height: 10px;  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); 
}
.deliv-dot { width: 8px; height: 8px;  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;  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); 
  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); }

.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);
  
  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);
  
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-field:focus-within {
  background: #fff;
  border-color: #bddbe0;
  
}
.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; 
  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);
  
  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);
  
  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;
  
  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;
  
  background: #fff;
  
  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: 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;
  
  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;
  
  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);
  
  padding: 16px 18px;
  
  display: grid; gap: 10px;
}
.settings-side-card.is-muted { background: #fbfcfd;  }
.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);
  
}
.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; 
  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);
  
}
.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;
  
  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;
  
}
.logs-filter .dot {
  width: 7px; height: 7px;  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; 
  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;
  
  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);
  
}
.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);
  
  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;  background: #c8d3df;
}
.advanced-list-dot.is-ok { background: var(--green); }
.advanced-list-dot.is-muted { background: #c8d3df; }

.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);
  
}
.settings-section-picker { display: none; }
/* The overview carries no inset of its own: every block under the settings
   header shares the page inset below, so it lines up with the header text.
   The top inset moves to the shared header-gap rule below. */
.settings-overview { padding: 0 0 42px; }

/* ── One left edge for header and content ───────────────────────────────
   The rest of the app insets page headers and bodies by 26px. Settings used
   28px for its header and nothing for the blocks under it, so the overview,
   banners and panels started 28px left of the title and ran to the edge.
   Header and every block under it now share the app's 26px inset (14px on
   phones, below), so content boxes start exactly where the title text does. */
.settings-page-header { padding-left: 26px; padding-right: 26px; }
.settings-content.page.is-settings > :not(.settings-page-header) { margin-left: 26px; margin-right: 26px; }
.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;  }
.mailbox-list { padding: 0 0 12px; gap: 12px; }

.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);  }
.settings-field input, .settings-field select, .settings-field textarea { min-height: 40px;  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 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;  }
.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); }

.op-table-wrap { overscroll-behavior-inline: contain; }
.logs-stream { border: 1px solid var(--d-stroke);  }
.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;  }
  .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-content.page.is-settings > :not(.settings-page-header) { margin-left: 14px; margin-right: 14px; }
  .settings-page-header h1 { font-size: 26px; }
  .page-actions { width: 100%; }
  .page-actions .button { width: 100%; justify-content: center; min-height: 44px; }
  /* 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 { 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);
}
.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-pill:focus-within { outline: 2px solid var(--d-orange); outline-offset: 2px; }
.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:focus-within { outline: 2px solid var(--d-orange); outline-offset: 2px; }
.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 */

/* Panel chrome */

/* 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);
  
  
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpl-card:hover { border-color: #c8d8de;  }
.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-foot { grid-column: 2;     grid-row: 2; }

@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-foot { 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-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-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-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 */

/* Variables row */

/* 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);
  
}

@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;  
  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); 
}
.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:focus-within { outline: 2px solid var(--d-orange); outline-offset: 2px; }
.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: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; }

/* --- 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);
  
}

@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-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-search:focus-within { outline: 2px solid var(--d-orange); outline-offset: 2px; }
.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-bar-select:focus-within { outline: 2px solid var(--d-orange); outline-offset: 2px; }

.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-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-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.cv-delete { width: 100%; 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);   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-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,
.perf-concluded { 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);
}

/* Login: the card is painted onto a faint strata ground — parchment on oat,
   hairline border instead of the ink frame. Scoped so the recipient-facing
   unsubscribe page keeps the plain standalone look. */
body.standalone--login {
  background: var(--d-oat) url("strata.svg") center / cover no-repeat;
}
.standalone--login .standalone-card {
  background: var(--d-parchment);
  border-color: var(--d-stroke-light);
}
.standalone--login .page-eyebrow {
  color: #6f6a60; /* darker than --d-muted: 10px text needs the contrast */
}
.standalone--login .standalone-form input {
  height: 40px;
  font-size: 14px;
  border-color: var(--d-stroke);
}
.standalone--login .standalone-form button {
  min-height: 44px;
  margin-top: 6px;
}

/* Login-family pages (2FA, invitation, password reset): a wider card for
   setup keys and backup codes, full-width submits, a quiet link row. */
.standalone-card--wide { max-width: 520px; }
.standalone-submit { width: 100%; justify-content: center; }
.standalone-links {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--d-body-muted);
}
.standalone-steps {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d-body-muted);
}
.standalone-code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke-light);
  font-size: 15px;
  letter-spacing: 0.06em;
  word-break: break-all;
  color: var(--d-ink);
}
.standalone-code-link {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  word-break: break-all;
  color: var(--d-body-muted);
}
.standalone-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.standalone-codes code {
  display: block;
  padding: 8px 10px;
  background: var(--d-paper);
  border: 1px solid var(--d-stroke-light);
  font-size: 14px;
  text-align: center;
  color: var(--d-ink);
}

/* Account and members pages: settings-style panels in a responsive grid. */
.account-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.account-panel-body { padding: 16px 22px 20px; }
/* One notification form per workspace, ruled off from the one before. */
.account-notify-form + .account-notify-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.account-workspaces {
  margin: 8px 0 14px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
}

.members-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.members-invites {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.members-invites li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --- 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; }
.util-log-meta { color: var(--d-muted); font-size: 0.85em; }

/* --- 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;  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; }

/* Workspace (tenant) switcher: the current workspace and role; other
   workspaces in a disclosure, each a one-button POST form. */
.sidebar-tenant-current {
  font-size: 13px;
  font-weight: 500;
  color: #fffefb;
  overflow-wrap: anywhere;
}
.sidebar-tenant-meta {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(244, 241, 234, 0.5);
}
.sidebar-tenant-picker summary {
  cursor: pointer;
  list-style: none;
}
.sidebar-tenant-picker summary::-webkit-details-marker { display: none; }
.sidebar-tenant-picker summary::after {
  content: " ▾";
  color: rgba(244, 241, 234, 0.5);
}
.sidebar-tenant-list {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.sidebar-tenant-list form { margin: 0; }
.sidebar-tenant-option {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid rgba(244, 241, 234, 0.16);
  background: transparent;
  color: rgba(244, 241, 234, 0.8);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}
.sidebar-tenant-option:hover { color: #fffefb; background: rgba(244, 241, 234, 0.06); }

.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; }

/* Keyboard users can jump past the sidebar navigation; hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--d-paper);
  color: var(--d-ink);
  outline: 2px solid var(--d-orange);
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

/* ── /campaigns/all — every campaign of the workspace ──────────────────
   Built from the Contacts vocabulary (.ctx-chips, .ctx-filter, .ctx-table)
   and the worklist's next-action tag (.desk-na). One left edge: the header
   text, the chip row, the search box, the table and the empty state all
   start at the page inset (26px, 14px on phones). The first column drops
   its cell padding so the campaign names sit on that edge too. The table
   scrolls inside its wrapper instead of widening the page.
   ────────────────────────────────────────────────────────────────────── */
.clist { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Nine chips wrap rather than scroll: butted borders overlap by a pixel
   (instead of the row's border-left: 0) and only to the right, so every
   wrapped row starts on the page inset with its left border intact. */
.clist-chips { flex-wrap: wrap; padding-bottom: 15px; }
.clist-chips .camp-chip { flex: 0 0 auto; white-space: nowrap; margin: 0 -1px -1px 0; }
.clist-chips .camp-chip + .camp-chip { border-left: 1px solid var(--d-stroke); }
.clist-chips .camp-chip.is-active { position: relative; z-index: 1; }
.clist .ctx-filter { border-bottom: 0; }
/* The inset is a margin, not padding, so the scrollbar spans the table only. */
.clist-table-wrap { padding: 0; margin: 0 26px; overflow-x: auto; overscroll-behavior-inline: contain; }
.clist-table { min-width: 1040px; border-top: 1px solid var(--d-muted); }
.clist-table thead th:first-child,
.clist-table tbody td:first-child { padding-left: 0; }
.clist-table thead th { white-space: nowrap; }
.clist-table .ctx-col-num { width: 74px; }
.clist-cell-name { min-width: 180px; }
.clist-name { font-weight: 600; color: var(--d-ink); text-decoration: none; overflow-wrap: anywhere; }
.clist-name:hover { color: var(--d-orange-deep); }
.clist-links { display: flex; gap: 12px; margin-top: 3px; font-size: 11px; }
.clist-links a { color: var(--d-body-muted); }
.clist-links a:hover { color: var(--d-ink); }
.clist-cell-text { min-width: 120px; max-width: 200px; color: var(--d-body-muted); }
.clist-cell-sender { white-space: nowrap; color: var(--d-body-muted); }
.clist-cell-action { min-width: 150px; }
.clist-cell-action .desk-na { text-decoration: none; }
.clist-pagination { margin: 14px 26px; }

@media (max-width: 720px) {
  .clist .page-header { flex-wrap: wrap; padding: 18px 14px 14px; gap: 12px; }
  .clist .ctx-chips,
  .clist .ctx-filter,
  .clist .page-footer { padding-left: 14px; padding-right: 14px; }
  .clist-table-wrap { margin: 0 14px; }
  .clist .ctx-empty { padding: 32px 14px; }
  .clist .page-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .clist-pagination { margin: 14px; }
}

/* ============================================================
   Commercial layer: billing, plans, onboarding checklist, sender
   wizard (F7/F8). Hairlines and tokens only, like everything else.
   ============================================================ */

.billing-banner {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-10) var(--sp-14);
  color: var(--d-ink);
  background: var(--d-oat);
  border: 1px solid var(--d-stroke);
  border-left: 3px solid var(--d-amber);
}

.billing-banner.is-blocked {
  background: var(--d-orange-wash);
  border-left-color: var(--d-orange-deep);
}

.billing-banner a {
  color: var(--d-ink);
  font-weight: 600;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-22);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-16);
  background: var(--d-paper);
  border: 1px solid var(--d-stroke);
}

.plan-card.is-current {
  border-color: var(--d-ink);
  border-width: 2px;
}

.plan-card-price {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.plan-card-price small {
  color: var(--d-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.plan-card-features {
  margin: 0;
  padding-left: var(--sp-18);
  color: var(--d-body-muted);
}

.plan-card form {
  margin-top: auto;
}

.usage-list {
  display: grid;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-22);
}

.usage-row-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-10);
}

.usage-meter {
  height: 6px;
  margin-top: var(--sp-5);
  background: var(--d-oat-deep);
  border: 1px solid var(--d-stroke-light);
}

.usage-meter-fill {
  height: 100%;
  background: var(--d-ink);
}

.usage-meter-fill.is-full {
  background: var(--d-orange-deep);
}

.seller-block {
  margin: 0;
  padding: var(--sp-16) var(--sp-22);
  color: var(--d-body-muted);
  font-style: normal;
}

.plan-card-note {
  margin: 0;
  color: var(--d-body-muted);
  font-size: 0.9rem;
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-item {
  display: flex;
  gap: var(--sp-12);
  align-items: flex-start;
  padding: var(--sp-12) var(--sp-22);
  border-top: 1px solid var(--d-stroke-light);
}

.checklist-item:first-child {
  border-top: 0;
}

.checklist-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--d-stroke);
  background: var(--d-paper);
}

.checklist-item.is-done .checklist-mark {
  background: var(--d-green);
  border-color: var(--d-green);
}

.checklist-item.is-done .checklist-label {
  color: var(--d-muted);
  text-decoration: line-through;
}

.checklist-body {
  display: grid;
  gap: var(--sp-3);
}

.checklist-hint {
  margin: 0;
  color: var(--d-body-muted);
  font-size: 0.9rem;
}

.dns-result {
  padding: var(--sp-12) var(--sp-22);
  border-top: 1px solid var(--d-stroke-light);
}

.dns-result-head {
  display: flex;
  gap: var(--sp-10);
  align-items: center;
}

.dns-result pre {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-8) var(--sp-10);
  overflow-x: auto;
  background: var(--d-parchment);
  border: 1px solid var(--d-stroke-light);
  white-space: pre-wrap;
  word-break: break-all;
}

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-16);
  padding: 0;
  list-style: none;
  color: var(--d-muted);
}

.wizard-steps li.is-current {
  color: var(--d-ink);
  font-weight: 600;
}

.empty-state {
  display: grid;
  gap: var(--sp-8);
  justify-items: start;
  padding: var(--sp-22);
  background: var(--d-parchment);
  border: 1px dashed var(--d-stroke);
}

.empty-state p {
  margin: 0;
  color: var(--d-body-muted);
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.standalone-check {
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
}

.standalone-check input {
  width: auto;
  margin-top: var(--sp-3);
}