/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-md);
  font: 500 14px var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:focus-visible { box-shadow: var(--ring-focus); }
.btn-primary   { background: var(--ink-800); color: var(--pearl); }
.btn-primary:hover { background: var(--ink-700); box-shadow: var(--shadow-soft); color: var(--pearl); }
.btn-secondary { background: var(--pearl); color: var(--char-900); border-color: var(--line-200); }
.btn-secondary:hover { border-color: var(--ink-700); color: var(--ink-800); }
.btn-ghost     { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-50); }
.btn-danger    { background: var(--pearl); color: var(--bad); border-color: rgba(156,43,43,0.3); }
.btn-danger:hover { background: rgba(156,43,43,0.05); border-color: var(--bad); }
.btn-gold      { background: var(--gold-600); color: var(--pearl); }
.btn-gold:hover { background: var(--gold-700); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }

/* === Inputs === */
.input, select, textarea {
  width: 100%; padding: 10px 14px; border: var(--border-input); border-radius: var(--r-md);
  background: var(--pearl); font: 400 15px var(--font-ui); color: var(--char-900);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink-700); box-shadow: var(--ring-focus); }
.input:disabled, select:disabled, textarea:disabled { background: var(--line-100); color: var(--char-500); cursor: not-allowed; }
.input.error, select.error, textarea.error { border-color: var(--bad); }
.input-sm { padding: 6px 10px; font-size: 13px; min-height: 0; }
textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A8578' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer;
  text-overflow: ellipsis;
}
select:hover:not(:disabled) { border-color: var(--line-300, #E2DBCC); background-color: #FCFBF9; }
/* Polished filter dropdown — apply .select-filter to any status/category filter.
   A subtle warm tint (vs white text fields) reads as a "control", it fits its
   content instead of stretching, and it lights up on hover. Consistent everywhere. */
.select-filter {
  width: auto; min-width: 150px; max-width: 240px;
  font-size: 14px; font-weight: 500; color: var(--char-800);
  background-color: var(--ivory);
}
.select-filter:hover:not(:disabled) { background-color: var(--line-100); border-color: var(--line-300, #E2DBCC); }
.select-filter:focus { background-color: var(--pearl); }

.field { margin-bottom: var(--s-4); }
.field label,
.field > label {
  display: block; font: 600 12px var(--font-ui); color: var(--char-700);
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.field .req { color: var(--pastel-rose-600); margin-left: 2px; font-weight: 600; }
.field .helper { margin: 6px 0 0; font-size: 12px; color: var(--char-500); line-height: 1.45; }
.field .error,
.field .err   { margin: 6px 0 0; font-size: 12px; color: var(--bad); font-weight: 500; }
.field .input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink-700); box-shadow: 0 0 0 3px rgba(30,58,107,0.10);
}
.field:last-child { margin-bottom: 0; }

/* Two-column field row inside a form section */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* === Premium form sections — replacement for plain .card inside forms === */
.form-card {
  position: relative;
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6) var(--s-5);
  margin-bottom: var(--s-4);
  box-shadow: 0 1px 2px rgba(14,31,58,0.04);
}
.form-card .form-section-head {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-100);
}
.form-card .fs-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--pastel-sky-50); color: var(--pastel-sky-600);
}
.form-card.tone-blush      .fs-icon { background: var(--pastel-blush-50);      color: var(--pastel-blush-600); }
.form-card.tone-periwinkle .fs-icon { background: var(--pastel-periwinkle-50); color: var(--pastel-periwinkle-600); }
.form-card.tone-mauve      .fs-icon { background: var(--pastel-mauve-50);      color: var(--pastel-mauve-600); }
.form-card.tone-peach      .fs-icon { background: var(--pastel-peach-50);      color: var(--pastel-peach-600); }
.form-card.tone-amber      .fs-icon { background: var(--pastel-amber-50);      color: var(--pastel-amber-600); }
.form-card.tone-rose       .fs-icon { background: var(--pastel-rose-50);       color: var(--pastel-rose-600); }
.form-card .fs-text { flex: 1; min-width: 0; }
.form-card .fs-eyebrow {
  font: 600 11px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--char-500); margin: 0 0 4px;
}
.form-card .fs-title {
  font-weight: 600; font-size: 18px; color: var(--char-900);
  letter-spacing: -0.01em; margin: 0;
}
.form-card .fs-lede {
  font-size: var(--t-sm); color: var(--char-500); margin: 4px 0 0; line-height: 1.5;
}

/* Sticky form action bar at the bottom of long forms */
.form-actions {
  position: sticky; bottom: 0;
  background: var(--ivory); border-top: 1px solid var(--line-200);
  padding: var(--s-4) 0;
  margin: var(--s-5) calc(var(--s-6) * -1) 0;
  padding-left: var(--s-6); padding-right: var(--s-6);
  display: flex; gap: var(--s-3); align-items: center;
  z-index: 10;
}
.form-actions .grow { flex: 1; }
.form-actions .form-status {
  font-size: var(--t-sm); color: var(--char-500);
}

@media (max-width: 720px) {
  .form-card {
    padding: var(--s-5) var(--s-4) var(--s-4);
  }
  .form-card .form-section-head {
    margin-bottom: var(--s-4);
  }
  .form-actions {
    flex-wrap: wrap;
    margin-left: calc(var(--s-4) * -1);
    margin-right: calc(var(--s-4) * -1);
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }
}

.input-group { position: relative; }
.input-group .icon-left {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--char-500); pointer-events: none;
}
.input-group .input { padding-left: 38px; }

/* === Card === */
.card {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--shadow-card);
}
.card-flat { box-shadow: none; }
.card-tight { padding: var(--s-4); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-5); gap: var(--s-3);
}
.card-title { font: 500 18px var(--font-display); margin: 0; color: var(--char-900); }

/* === Badge — pastel palette, distinct hue per status === */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font: 600 11px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-pending  { background: var(--pastel-amber-50);      color: var(--pastel-amber-600); }
.badge-sent     { background: var(--pastel-sky-50);        color: var(--pastel-sky-600); }
.badge-delivered{ background: var(--pastel-periwinkle-50); color: var(--pastel-periwinkle-600); }
.badge-read     { background: var(--pastel-mauve-50);      color: var(--pastel-mauve-600); }
.badge-failed   { background: var(--pastel-blush-50);      color: var(--pastel-blush-600); }
.badge-neutral  { background: var(--line-100);             color: var(--char-700); }
.badge-gold     { background: var(--gold-100);             color: var(--gold-700); }
.badge-rose     { background: var(--pastel-rose-50);       color: var(--pastel-rose-600); }
.badge-peach    { background: var(--pastel-peach-50);      color: var(--pastel-peach-600); }

/* === Table === */
.table-wrap {
  background: var(--pearl); border: 1px solid var(--line-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  /* Pearl (#fff) vs the ivory page is a near-imperceptible contrast, so a soft
     elevation is what makes every table read as a distinct surface. */
  /* NEVER overflow:hidden here — it silently amputates trailing columns when a
     table outgrows the container (the events Archive button vanished this way).
     Wide tables must scroll inside their own container instead. */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
table.data {
  width: 100%; border-collapse: collapse;
}
/* Table header: dark navy with light text — gives the table card a clear
   anchor and stops the table from blending into the warm ivory page bg. */
.data th {
  background: var(--ivory); color: var(--char-700);
  font: 600 11px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  padding: 11px 18px; text-align: left;
  border-bottom: 1.5px solid var(--char-400);
  /* Headers must never wrap — keeps the spine of the table calm and predictable. */
  white-space: nowrap;
}
.data td.cell-nowrap, .data th.cell-nowrap { white-space: nowrap; }
.data th a { color: inherit; }
.data th a:hover { color: var(--char-900); }

/* Per-table pastel tones. Subtle background tint + saturated underline + darker
   text from the same family. One tone per list type — adds variety without
   noise. Assigned via class="data tone-X" on each table.
   Cream (default), sky, mauve, periwinkle, blush, rose, peach, amber. */
.data.tone-sky        th { background: var(--pastel-sky-50);        color: #2D5A88; border-bottom-color: var(--pastel-sky-600); }
.data.tone-mauve      th { background: var(--pastel-mauve-50);      color: #6F4575; border-bottom-color: var(--pastel-mauve-600); }
.data.tone-periwinkle th { background: var(--pastel-periwinkle-50); color: #4F518E; border-bottom-color: var(--pastel-periwinkle-600); }
.data.tone-blush      th { background: var(--pastel-blush-50);      color: #8E3F32; border-bottom-color: var(--pastel-blush-600); }
.data.tone-rose       th { background: var(--pastel-rose-50);       color: #8C2F4F; border-bottom-color: var(--pastel-rose-600); }
.data.tone-peach      th { background: var(--pastel-peach-50);      color: #8B5C2F; border-bottom-color: var(--pastel-peach-600); }
.data.tone-amber      th { background: var(--pastel-amber-50);      color: #6E5616; border-bottom-color: var(--pastel-amber-600); }

/* === Chevron-expand row pattern (shared by Sent log + event detail Sent tab) === */
.row-chev {
  background: transparent; border: 0; cursor: pointer;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--char-500); transition: transform 0.18s ease, color 0.18s ease;
  border-radius: 4px;
}
.row-chev:hover { color: var(--char-900); background: var(--ivory); }
.row-chev[aria-expanded="true"] { transform: rotate(90deg); color: var(--char-900); }
.sent-row-detail td { background: var(--ivory); padding: 18px 22px 20px; border-top: 0; }
.sent-detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 880px) { .sent-detail-grid { grid-template-columns: 1fr; } }
.sent-detail-h { font: 600 10.5px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase; color: var(--char-500); margin: 0 0 10px; }
.sent-detail-h.sub-h { margin-top: 12px; font-size: 10px; }

/* Collapsible JSON / response blocks (payload modal). */
.json-details { margin-top: 10px; border: 1px solid var(--line-200); border-radius: var(--r-md); overflow: hidden; }
.json-details > summary {
  cursor: pointer; list-style: none; padding: 9px 12px; user-select: none;
  font: 600 11px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--char-600);
  background: var(--ivory); display: flex; align-items: center;
}
.json-details > summary::-webkit-details-marker { display: none; }
.json-details > summary::before {
  content: ''; width: 7px; height: 7px; margin-right: 9px; flex: 0 0 auto;
  border-right: 1.6px solid var(--char-500); border-bottom: 1.6px solid var(--char-500);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.json-details[open] > summary::before { transform: rotate(45deg); }
.json-details > summary:hover { background: var(--line-100); }
.json-pre {
  margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto;
  background: #1c1d22; color: #d7dae0; border: 0;
  font: 12px/1.55 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre;
}
.jd-body { padding: 12px 14px; background: var(--pearl); }
.jd-body .json-pre { margin-top: 10px; border-radius: 8px; }
.resp-row { font-size: 13px; margin-bottom: 6px; }
.resp-k { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--char-500); margin-right: 8px; }
.resp-timeline { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0; }
.resp-step { font-size: 12px; color: var(--char-700); display: inline-flex; align-items: center; gap: 5px; }
.resp-fail { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(199,109,94,0.08); color: var(--bad); font-size: 12.5px; }
.json-pre .jk { color: #9cdcfe; } .json-pre .js { color: #ce9178; }
.json-pre .jn { color: #b5cea8; } .json-pre .jb, .json-pre .jnull { color: #569cd6; }
.sub-data { width: 100%; border-collapse: collapse; }
.sub-data td { padding: 7px 0; font-size: 13px; border-bottom: 0.5px dashed var(--line-200); vertical-align: middle; }
.sub-data tr:last-child td { border-bottom: 0; }
.sub-data .sub-status { font-weight: 500; color: var(--char-900); width: 32%; white-space: nowrap; }
.sub-data .sub-time { color: var(--char-500); width: 32%; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.sub-data .sub-meta { color: var(--char-500); font-size: 12px; }
.sub-data .sub-fail .dot { background: var(--pastel-blush-600); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot-sent      { background: var(--char-400); }
.dot-delivered { background: var(--pastel-sky-600); }
.dot-read      { background: var(--pastel-periwinkle-600); }
.dot-failed    { background: var(--pastel-blush-600); }
.sent-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.sent-dl dt { font: 500 10px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--char-500); margin-top: 2px; }
.sent-dl dd { margin: 0; word-break: break-word; }
.sent-payload summary {
  cursor: pointer; user-select: none;
  color: var(--char-500); font-size: 12px; font-weight: 500;
  padding: 8px 0; border-top: 0.5px dashed var(--line-200);
}
.sent-payload[open] summary { color: var(--char-900); }
.sub-pre {
  background: #1f1d1a; color: #e8dec5;
  padding: 12px 14px; font: 11.5px/1.55 ui-monospace, monospace;
  max-height: 280px; overflow: auto; margin: 6px 0 0; border-radius: 4px;
}
.data thead tr:first-child th:first-child { border-top-left-radius: var(--r-lg); }
.data thead tr:first-child th:last-child  { border-top-right-radius: var(--r-lg); }
.data td {
  padding: 14px 18px; border-bottom: var(--border-hair);
  font: 400 14px var(--font-ui); color: var(--char-900); vertical-align: middle;
  /* Default: each cell sizes to fit its content. The browser distributes any
     remaining width across columns. No artificial max-width — that was wrong:
     it forced every column to share width equally, hiding dates and hosts.
     Cells that hold genuinely long content (event names, error messages) opt in
     to truncation explicitly via .cell-2lines or inline max-width + ellipsis. */
}
.data td.num,
.data th.num { white-space: nowrap; }

.data td.cell-2lines {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.8em;
}
.data td.cell-wrap { white-space: normal; }
.data td.cell-truncate {
  /* Single-line ellipsis. Pair with an inline style="max-width: NNNpx;" on the cell. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.data tr:last-child td { border-bottom: none; }
.data tbody tr { transition: background var(--dur-fast) var(--ease); }
/* Rows live on the pearl card surface; hover warms to ivory (the page family)
   instead of a cool grey — per the table-surface analysis: white reading
   surface, tone only on header, hover and status rows. */
.data tbody tr:hover { background: var(--line-100); }
.data tbody tr:hover .row-actions { opacity: 1; }
.data .num { font-variant-numeric: tabular-nums; text-align: right; }
/* Row actions are persistently visible (slightly muted) so users don't have to
   guess they exist or hunt for them. Keep every action group on one line: a
   trailing icon should never wrap underneath its neighbours or be mistaken for
   an action belonging to the next row. */
.data .row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease);
}
.data .row-actions > a,
.data .row-actions > button,
.data .row-actions > form {
  flex: 0 0 auto;
}
.data .row-actions > form { display: inline-flex !important; }
.data .row-actions a, .data .row-actions button {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; color: var(--char-500);
}
.data .row-actions a:hover, .data .row-actions button:hover { background: var(--ink-100); color: var(--ink-800); opacity: 1; }

.data.compact th, .data.compact td { padding: 8px 14px; }

/* === Dense data tables — for high-volume guest lists.
     Design principles applied:
       - Readable body type (14px) — never go below this for table data
       - Tighter row vertical (10px padding) — denser than default 14px but still breathing
       - Header row uses var(--pearl) so the table card stands out from the ivory page
       - Strong bottom border on header for separation
       - Row hover uses one neutral ink-50 surface across every status
       - Coloured status pills remain the primary status signal */
.data.dense {
  font-size: 14px;
  background: var(--pearl);
}

/* Replies are operational text, not document content. Unpredictable guest
   names, event names and message bodies must yield to the available viewport
   instead of widening the table. Full values remain available through each
   cell's native title tooltip. */
.replies-table { table-layout: fixed; }
.replies-table .replies-col-from    { width: 17%; }
.replies-table .replies-col-mobile  { width: 13%; }
.replies-table .replies-col-event   { width: 88px; }
.replies-table .replies-col-type    { width: 132px; }
.replies-table .replies-col-when    { width: 106px; }
.replies-table .replies-col-handled { width: 138px; }
.replies-table .replies-col-action  { width: 58px; }
.replies-table td,
.replies-table td > a,
.replies-table .reply-copy-cell,
.replies-table .reply-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replies-table td > a,
.replies-table .reply-copy {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}
.replies-event-cell,
.replies-when-cell { white-space: nowrap; }
.replies-table td.replies-type-cell { text-overflow: clip; }
.replies-table td > a.reply-event-pill {
  display: inline-flex; width: auto; max-width: 100%; align-items: center;
  padding: 3px 8px; border: 1px solid var(--line-200); border-radius: 999px;
  background: var(--ink-50); color: var(--ink-700);
  font: 650 11px/1.2 var(--font-ui); letter-spacing: .025em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.replies-table td > a.reply-event-pill:hover {
  border-color: var(--ink-700); background: var(--pearl); color: var(--ink-900);
}
.replies-table td > a.reply-event-pill:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px;
}
.replies-toolbar { flex-wrap: nowrap; }
.replies-toolbar .search { flex-basis: 240px; }
.replies-toolbar .handling-filter { min-width: 174px; max-width: 190px; }
.replies-handled-cell { white-space: nowrap; }
.reply-handled {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  min-height: 28px; padding: 4px 8px 4px 6px; border: 1px solid transparent;
  border-radius: 999px; background: transparent; color: var(--char-500);
  font: 600 10.5px/1.15 var(--font-ui); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.reply-handled svg {
  width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor;
  stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
.reply-handled-auto { color: #367E66; background: rgba(61,143,110,.08); }
.reply-handled-concierge { color: #9A762D; background: rgba(190,144,53,.10); }
.reply-handled-staff { color: #76527C; background: rgba(140,94,145,.09); }
.reply-handled-needs { color: var(--char-500); border-color: var(--line-200); }
.reply-handled-failed { color: #AA4A43; background: rgba(190,78,68,.08); }
.reply-handled:hover,
.reply-handled[aria-expanded="true"] { border-color: currentColor; background: #fff; }
.reply-handled-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-handling-detail[hidden] { display: none; }
.reply-handling-detail > td { padding: 0 !important; border-top: 0; }
.reply-handling-inner {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: start; gap: 14px;
  margin: 0 16px 12px; padding: 12px 14px; border: 1px solid var(--line-200);
  border-left: 3px solid var(--char-300); border-radius: var(--r-md); background: var(--pearl);
}
.reply-handling-auto { border-left-color: #3D8F6E; }
.reply-handling-concierge { border-left-color: #BE9035; }
.reply-handling-staff { border-left-color: #8C5E91; }
.reply-handling-failed { border-left-color: #BE4E44; }
.reply-handling-kicker {
  padding-top: 2px; color: var(--char-500); font: 600 10px/1.4 var(--font-ui);
  letter-spacing: .07em; text-transform: uppercase;
}
.reply-handling-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.reply-handling-copy { min-width: 0; color: var(--char-800); font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
/* Who sent it + when — an audit signature, so it sits bottom-right under the
   message rather than crowding the kind label up top. */
.reply-handling-byline {
  align-self: flex-end; color: var(--char-500); font: 600 11px/1.3 var(--font-ui);
  letter-spacing: .01em; white-space: nowrap;
}
.reply-detail-action { white-space: nowrap; }
.replies-table th.replies-col-action,
.replies-table td.replies-action-cell { padding-right: 16px; }
.reply-row-action {
  display: inline-grid; width: 30px; height: 30px; padding: 0; place-items: center;
  border: 1px solid transparent; border-radius: 50%; background: transparent;
  cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.reply-row-action svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round;
}
.reply-row-action-quiet { color: var(--char-400); }
.reply-row-action-attention { color: #2E6F8F; background: rgba(74,133,166,.08); }
.reply-row-action:hover { border-color: currentColor; background: #fff; transform: translateX(-1px); }
.reply-row-action:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (max-width: 900px) {
  .replies-table { min-width: 940px; }
  .reply-handled-label { display: none; }
  .replies-table .replies-col-handled { width: 54px; }
  .reply-handling-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .reply-handling-kicker { grid-column: 1 / -1; }
  .reply-handling-byline { align-self: flex-start; }
}

/* Error messages and request metadata are unbounded diagnostic strings. Keep
   the operating grid inside its card, use ellipsis at desktop widths, and leave
   the complete values in title tooltips and the existing context popup. */
.error-log-table { table-layout: fixed; }
.error-log-table .error-col-when     { width: 136px; }
.error-log-table .error-col-severity { width: 106px; }
.error-log-table .error-col-where    { width: 150px; }
.error-log-table .error-col-user     { width: 132px; }
.error-log-table .error-col-url      { width: 180px; }
.error-log-table td,
.error-log-table .error-message-copy,
.error-log-table .error-where code,
.error-log-table .error-user,
.error-log-table .error-user-copy,
.error-log-table .error-user-ip,
.error-log-table td:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.error-log-table .error-message-copy,
.error-log-table .error-where code,
.error-log-table .error-user-copy,
.error-log-table .error-user-ip {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}
.error-log-table .error-message-copy {
  color: var(--char-900);
  font-weight: 500;
}
@media (max-width: 900px) {
  .error-log-table { min-width: 900px; }
}
.data.dense th {
  padding: 10px 14px;
  /* Inherits dark bg + light text from .data th — only override what's specific to dense */
}
.data.dense td {
  padding: 10px 14px; font-size: 14px; line-height: 1.4;
  border-bottom: 1px solid var(--line-100);
  vertical-align: middle;
  background: var(--pearl);
}
.data.dense tr:hover td { background: var(--line-100); }

/* 2026-08-01: Status colour belongs in the pill when a grid already exposes
   status. For grids where the outcome is intentionally absent, opt in with
   row-accent-status to retain a quiet, scan-friendly cue at the left edge. */
.data.dense tr.row-accent-status > td:first-child {
  box-shadow: inset 3px 0 var(--line-300, #E2DBCC);
}
.data.dense tr.row-accent-status.row-status-delivered > td:first-child { box-shadow: inset 3px 0 var(--pastel-periwinkle-600); }
.data.dense tr.row-accent-status.row-status-read      > td:first-child { box-shadow: inset 3px 0 var(--pastel-mauve-600); }
.data.dense tr.row-accent-status.row-status-sent      > td:first-child { box-shadow: inset 3px 0 var(--pastel-sky-600); }
.data.dense tr.row-accent-status.row-status-failed    > td:first-child { box-shadow: inset 3px 0 var(--pastel-blush-600); }
.data.dense tr.row-accent-status.row-status-pending   > td:first-child { box-shadow: inset 3px 0 var(--pastel-amber-600); }

/* Slightly tighter badges + avatars in dense tables — but still legible. */
.data.dense .badge { font-size: 10.5px; padding: 3px 8px; white-space: nowrap; }
.data.dense .avatar { width: 26px; height: 26px; font-size: 12px; }
.data.dense .row-actions a, .data.dense .row-actions button { width: 26px; height: 26px; }
.data.dense .row-actions a svg, .data.dense .row-actions button svg { width: 13px; height: 13px; }

/* All badges should nowrap by default — short labels are a design choice, not optional. */
.badge { white-space: nowrap; }

/* Sortable column headers */
.sort-h {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.sort-h:hover { color: var(--ink-800); }

/* === Role permission matrix === */
.role-matrix .role-col { text-align: center; min-width: 130px; }
.role-matrix .role-col .role-name { font-weight: 600; color: var(--char-900); font-size: var(--t-sm); }
.role-matrix .role-cell { text-align: center; padding: 10px 14px; }
.perm-pill {
  display: inline-block; min-width: 22px; padding: 2px 6px;
  margin: 0 1px; border-radius: var(--r-sm);
  font: 600 11px var(--font-ui); letter-spacing: 0.04em; text-align: center;
}
.perm-pill.on  { background: var(--pastel-sky-50);    color: var(--pastel-sky-600); }
.perm-pill.off { background: var(--line-100);         color: var(--char-400); }
.perm-pill.all { background: var(--gold-100);         color: var(--gold-700); padding: 2px 10px; letter-spacing: 0.18em; }

.role-edit-grid th .col-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.role-edit-grid th .col-toggle input { cursor: pointer; }

/* Guest table inline edit */
.guest-table .g-cell { transition: background var(--dur-fast) var(--ease); }
.guest-table tr.editing { background: var(--pastel-sky-50); }
.guest-table tr.editing .g-cell { padding-top: 8px; padding-bottom: 8px; }
.guest-table .g-input { width: 100%; min-width: 80px; }
.g-actions-view, .g-actions-edit { display: inline-flex; align-items: center; gap: 4px; }

/* === Stat tile === */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1080px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stat-grid { grid-template-columns: 1fr; } }

.stat {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-5);
}
.stat-eyebrow {
  font: 600 11px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--char-500); margin-bottom: var(--s-2);
}
.stat-number {
  font-family: var(--font-display); font-weight: 600;
  font-size: 40px; line-height: 1; color: var(--char-900);
  font-variant-numeric: tabular-nums;
}
.stat-trend { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--char-500); }
.stat-trend.up   { color: var(--ok); }
.stat-trend.down { color: var(--bad); }

/* === Empty state === */
.empty {
  text-align: center; padding: var(--s-8) var(--s-5);
  color: var(--char-500);
}
.empty .icon { width: 40px; height: 40px; color: var(--char-400); margin: 0 auto var(--s-4); }
.empty h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-xl); color: var(--char-700); margin: 0 0 var(--s-2); }
.empty p { font-size: var(--t-sm); margin-bottom: var(--s-5); }

/* === Tabs === */
.tabs {
  display: flex; gap: var(--s-5); border-bottom: var(--border-hair); margin-bottom: var(--s-5);
  max-width: 100%; overflow-x: auto; scrollbar-width: thin;
}
.tabs a {
  flex: 0 0 auto;
  padding: var(--s-3) 0; color: var(--char-500); font: 500 14px var(--font-ui);
  border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease);
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--char-900); }
.tabs a.active { color: var(--ink-800); border-bottom-color: var(--ink-800); }

/* === Toolbar === */
.toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }
.toolbar .grow { flex: 1; }
.toolbar .search {
  flex: 1; max-width: 360px;
}

/* === Data toolbar ===
   Search, facets and date ranges belong to one compact control surface on
   desktop. This class is deliberately opt-in: print toolbars and form action
   rows also use .toolbar and must retain their existing layout. */
.data-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 2px rgba(14,31,58,0.035);
}
.data-toolbar .search {
  flex: 1 1 260px;
  min-width: 180px;
  max-width: none;
}
.data-toolbar > .input,
.data-toolbar > select {
  width: auto;
  flex: 0 1 auto;
}
.data-toolbar > .select-filter {
  min-width: 128px;
  max-width: 178px;
}
.data-toolbar > input[type="date"] {
  width: 142px;
  flex: 0 0 142px;
  font-variant-numeric: tabular-nums;
}
.data-toolbar > input[name="u"] {
  width: 116px !important;
  flex: 0 1 116px;
}
.data-toolbar > .btn,
.data-toolbar > .chip {
  flex: 0 0 auto;
}
.data-toolbar .row {
  min-width: 0;
  flex-wrap: nowrap;
}
.data-toolbar .toolbar-spacer {
  flex: 1 1 12px;
  min-width: 0;
}

/* === Page-size segmented control ===
   Sits at the end of a data toolbar. A segmented control rather than a third
   dropdown: the values are few and fixed, so showing them costs one glance
   instead of a click, and the row keeps a deliberate right edge. Reads as one
   quiet object — a single hairline frame, dividers between segments, and only
   the active segment carrying ink. */
.per-page {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  /* Match whatever the tallest control on the row is (the search input) instead
     of hard-coding a height that would drift the moment .input changes. */
  align-self: stretch;
  margin-left: 4px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--pearl);
  overflow: hidden;
}
.per-page-label {
  display: inline-flex;
  align-items: center;
  padding: 0 9px 0 10px;
  color: var(--char-400);
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--pearl, #FAF8F3);
  border-right: 1px solid var(--line-200);
  user-select: none;
}
.per-page-opt {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: var(--char-600);
  font: 500 12.5px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-left: 1px solid var(--line-100, var(--line-200));
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.per-page-opt:first-of-type { border-left: 0; }
.per-page-opt:hover { color: var(--char-900); background: var(--pearl, #FAF8F3); }
.per-page-opt:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.per-page-opt.is-on {
  color: var(--ink-800);
  font-weight: 700;
  background: var(--gold-100);
  box-shadow: inset 0 -2px 0 var(--gold-500);
}
/* Below the desktop breakpoint the toolbar is already tight — drop the word
   "Show" and let the numbers speak. */
@media (max-width: 1100px) {
  .per-page-label { display: none; }
  .per-page-opt { padding: 0 9px; }
}

/* Audit carries two facets more than the error log. Its controls tighten just
   enough to remain a single calm line at ordinary desktop content widths. */
.data-toolbar.log-toolbar .search { flex-basis: 220px; }
.data-toolbar.log-toolbar > .select-filter { min-width: 116px; max-width: 144px; }
.data-toolbar.error-toolbar { flex-wrap: nowrap; }

/* Chip-rich directories deliberately preserve their useful pills. They may use
   a second row inside the same surface rather than leaking outside it. */
.data-toolbar.faceted-toolbar { flex-wrap: wrap; }

@media (max-width: 1120px) {
  .data-toolbar { flex-wrap: wrap; }
  .data-toolbar .search { flex: 1 1 280px; }
  .data-toolbar .toolbar-spacer { display: none; }
}

@media (max-width: 820px) {
  .data-toolbar.error-toolbar { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .data-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 8px;
  }
  .data-toolbar .search,
  .data-toolbar > .row {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
  .data-toolbar > .input,
  .data-toolbar > select,
  .data-toolbar > .select-filter,
  .data-toolbar > input[type="date"],
  .data-toolbar > input[name="u"] {
    width: 100% !important;
    min-width: 0;
    max-width: none;
  }
  .data-toolbar > .row {
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: thin;
  }
  .data-toolbar > .btn { min-height: 40px; }
  .data-toolbar > .chip { justify-self: start; }
  .replies-toolbar { display: grid; }
}

/* === Pagination === */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); color: var(--char-500); font-size: var(--t-sm);
  border-top: var(--border-hair); background: var(--pearl);
}
.pagination .links { display: flex; gap: var(--s-2); }
.pagination .links a, .pagination .links span {
  padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-200);
  background: var(--pearl); color: var(--char-700); font-size: var(--t-sm);
}
.pagination .links a:hover { border-color: var(--ink-700); color: var(--ink-800); }
.pagination .links .disabled { opacity: 0.4; pointer-events: none; }

@media (max-width: 560px) {
  .pagination {
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
  }
  .pagination .links {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* === Toast === */
.toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); z-index: 9999; }
.toast {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-lifted); padding: var(--s-4) var(--s-5); min-width: 280px;
  display: flex; align-items: flex-start; gap: var(--s-3);
  animation: slideUp var(--dur-base) var(--ease);
}
.toast.ok   { border-left: 3px solid var(--ok); }
.toast.warn { border-left: 3px solid var(--warn); }
.toast.bad  { border-left: 3px solid var(--bad); }
.toast.info { border-left: 3px solid var(--info); }

@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === Modal === */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,22,40,0.4);
  backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 9000;
  padding: var(--s-5); overflow-y: auto; overscroll-behavior: contain;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: min(520px, 92vw); max-height: calc(100dvh - 48px); padding: var(--s-6);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(226,219,204,.86); border-radius: var(--r-lg);
  background: var(--pearl); box-shadow: var(--shadow-lifted);
}
.modal h2 { margin-top: 0; }
.modal-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); }

@media (max-width: 640px) {
  .modal-backdrop { place-items: end stretch; padding: 0; }
  .modal {
    width: 100%; max-width: none; max-height: 94dvh;
    padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
  }
  .modal-actions { position: sticky; bottom: 0; margin: var(--s-5) -18px -16px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line-200); }
  .modal-actions .btn { min-height: 42px; }
}

/* === Avatar === */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-700);
  display: inline-grid; place-items: center;
  font: 600 13px var(--font-ui);
}
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }

/* === Chip / filter pill === */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-200); background: var(--pearl);
  font-size: var(--t-sm); color: var(--char-700); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-700); }
.chip.active { background: var(--ink-100); border-color: var(--ink-700); color: var(--ink-800); }

.search-page-toolbar { max-width: 720px; margin-bottom: var(--s-6); }
.search-page-toolbar .search { max-width: none; }

.pill-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.badge-dismiss {
  display: inline-grid; width: 17px; height: 17px; padding: 0; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.62);
  color: inherit; font: 600 13px/1 var(--font-ui); cursor: pointer;
}
.badge-dismiss:hover { background: var(--pearl); }
.inline-compact-form { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inline-compact-form select { min-width: 0; }
.page-note { margin: 14px 0 0; color: var(--char-500); font-size: var(--t-sm); line-height: 1.55; }
.context-note { margin: 0 0 var(--s-4); color: var(--char-500); font-size: var(--t-sm); line-height: 1.55; }
.notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line-200); border-radius: var(--r-md);
  background: var(--pearl); color: var(--char-700); font-size: var(--t-sm); line-height: 1.5;
}
.notice p { margin: 0; }
.notice-success { border-color: rgba(45,122,95,.28); background: rgba(45,122,95,.06); color: var(--ok); }
.notice-error { border-color: rgba(156,43,43,.25); background: rgba(156,43,43,.06); color: var(--bad); }
.notice-warning { border-color: rgba(186,130,40,.30); background: var(--pastel-amber-50); color: #76591f; }
.notice-block { display: block; }
.cell-primary { color: var(--char-900); font-weight: 500; }
.cell-link-primary { color: var(--char-900); font-weight: 500; text-decoration: none; }
.cell-link-primary:hover { color: var(--ink-700); text-decoration: underline; text-underline-offset: 3px; }
.cell-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.clickable-row { cursor: pointer; }
.clickable-row:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.fs-active-label { margin-right: 6px; }
.fs-reset { margin-top: var(--s-2); }
.fs-checks-clear { margin: 0; font-size: 11px; }

@media (max-width: 560px) {
  .toasts { right: 12px; bottom: 12px; left: 12px; }
  .toast { width: 100%; min-width: 0; padding: 12px 14px; }
  .inline-compact-form { align-items: stretch; flex-direction: column; }
  .inline-compact-form .btn { width: 100%; }
}

@media (max-width: 720px) {
  .input, select, textarea { font-size: 16px; }
}

/* === Divider with text === */
.divider-text {
  display: flex; align-items: center; gap: var(--s-3); color: var(--char-500);
  font-size: var(--t-sm); margin: var(--s-5) 0;
}
.divider-text::before, .divider-text::after {
  content: ''; flex: 1; border-top: var(--border-hair);
}

/* === Selection (checkboxes on data tables) === */
.data .sel-col { width: 36px; padding-right: 0; }
.data .sel-col input[type="checkbox"] { cursor: pointer; }
.guest-row.row-selectable { cursor: default; }
.guest-row .sel { display: inline-flex; align-items: center; }

/* Floating selection action bar */
.selection-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--ink-900); color: var(--pearl);
  padding: 10px 12px 10px 18px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-lifted); z-index: 8500;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  opacity: 0; pointer-events: none;
}
.selection-bar.show {
  transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto;
}
.selection-bar .count {
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.selection-bar .count::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500);
}
.selection-bar .sep {
  width: 1px; height: 22px; background: rgba(255,255,255,0.15);
  margin: 0 4px;
}
.selection-bar .btn-sel {
  background: var(--pearl); color: var(--ink-900); border: none;
  padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  font: 600 13px var(--font-ui); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.selection-bar .btn-sel:hover { background: var(--gold-100); transform: translateY(-1px); }
.selection-bar .btn-sel.ghost {
  background: transparent; color: var(--pearl); border: 1px solid rgba(255,255,255,0.20);
}
.selection-bar .btn-sel.ghost:hover { background: rgba(255,255,255,0.08); }
.selection-bar .btn-sel.ghost.danger { color: var(--pastel-blush-50); border-color: rgba(199,109,94,0.40); }
.selection-bar .btn-sel.ghost.danger:hover { background: rgba(199,109,94,0.15); border-color: var(--pastel-blush-600); }
.selection-bar .btn-sel svg { width: 14px; height: 14px; }

/* Send modal — extends existing .modal */
.send-modal { width: min(520px, 92vw); }
.send-modal h2 {
  font-size: 20px; font-weight: 600; margin: 0 0 var(--s-2);
  color: var(--char-900); letter-spacing: -0.01em;
}
.send-modal .lede { color: var(--char-500); font-size: var(--t-sm); margin: 0 0 var(--s-5); }
.send-modal .field { margin-bottom: var(--s-5); }
.send-modal .field > label.field-label {
  display: block; font: 600 11px var(--font-ui); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--char-500); margin-bottom: var(--s-3);
}
.send-modal .opt-list { display: flex; flex-direction: column; gap: 6px; }
.send-modal .opt {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 14px; border: 1px solid var(--line-200); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.send-modal .opt:hover { border-color: var(--ink-700); }
.send-modal .opt input { margin: 0; }
.send-modal .opt input:checked ~ .opt-body { color: var(--char-900); }
.send-modal .opt:has(input:checked) { border-color: var(--ink-800); background: var(--ink-50); }
.send-modal .opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.send-modal .opt-body .opt-title { font-weight: 500; color: var(--char-900); font-size: 14px; }
.send-modal .opt-body .opt-meta { font-size: 12px; color: var(--char-500); }
.send-modal .opt.danger:has(input:checked) {
  border-color: rgba(156,43,43,0.4); background: rgba(156,43,43,0.04);
}
.send-modal .opt.danger:has(input:checked) .opt-title { color: var(--bad); }
.send-modal .footnote {
  font-size: 12px; color: var(--char-500); padding: 10px 12px;
  background: var(--ink-50); border-radius: var(--r-sm); line-height: 1.5;
  margin-bottom: var(--s-4);
}
.send-modal .modal-actions { margin-top: var(--s-2); }
.send-modal .send-status {
  margin-top: var(--s-3); font-size: var(--t-sm); color: var(--char-500); min-height: 18px;
}
.send-modal .send-status.bad { color: var(--bad); }
.send-modal .send-status.ok  { color: var(--ok); }

/* Shared WhatsApp reply composer. All reply entry points render this component;
   keep its optional actions quiet until the operator explicitly expands them. */
.reply-composer-heading {
  display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5);
}
.reply-composer-heading .lede { margin-bottom: 0; }
.reply-composer-mark {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  color: var(--ink-700); background: var(--ink-50); border: 1px solid var(--line-200);
  border-radius: var(--r-md);
}
.reply-composer-mark svg,
.reply-choices-toggle-icon svg,
.reply-choices-chevron {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.55;
  stroke-linecap: round; stroke-linejoin: round;
}
.reply-window-warn {
  margin: 0 0 var(--s-4); padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--pastel-amber-600, #B08B30);
  background: var(--pastel-amber-50, #FBF6E0); color: #7a6127;
  font-size: 12.5px; line-height: 1.5;
}
.reply-composer-body { min-height: 108px; resize: vertical; line-height: 1.55; }
.reply-choices-field {
  overflow: hidden; border: 1px solid var(--line-200); border-radius: var(--r-md);
  background: var(--warm-white, #fbfaf7);
}
.reply-choices-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 0; background: transparent; color: var(--char-700); text-align: left;
  cursor: pointer; font-family: var(--font-ui);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.reply-choices-toggle:hover { background: var(--ink-50); color: var(--ink-800); }
.reply-choices-toggle:focus-visible { outline: 2px solid var(--ink-700); outline-offset: -2px; }
.reply-choices-toggle > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.reply-choices-toggle strong { font-size: 12.5px; font-weight: 600; }
.reply-choices-toggle small { color: var(--char-500); font-size: 11.5px; line-height: 1.35; }
.reply-choices-toggle-icon {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pearl); border: 1px solid var(--line-200);
}
.reply-choices-chevron { margin-left: auto; transition: transform var(--dur-fast) var(--ease); }
.reply-choices-toggle[aria-expanded="true"] .reply-choices-chevron { transform: rotate(180deg); }
.reply-choices {
  padding: 12px; border-top: 1px solid var(--line-200); background: var(--pearl);
}
.reply-choices > p { margin: 0 0 10px; color: var(--char-500); font-size: 11.5px; line-height: 1.45; }
.reply-choices-field .reply-choice-input {
  /* Higher specificity than the generic .field label rule: each choice is a
     horizontal control row, not a conventional label stacked above an input. */
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px; align-items: center;
  gap: 10px; margin: 7px 0 0;
}
.reply-choice-input > span {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink-50); color: var(--ink-700); font-size: 10px; font-weight: 600;
}
.reply-choice-input .input { min-width: 0; height: 36px; padding: 7px 10px; font-size: 12.5px; }
.reply-choice-input > small { color: var(--char-400); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .reply-composer-mark { display: none; }
  .reply-choices-toggle small { display: none; }
  .reply-choices-field .reply-choice-input { grid-template-columns: 22px minmax(0, 1fr); }
  .reply-choice-input > small { display: none; }
}

/* === Filter side-sheet (right-anchored slide-in) === */
.filter-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--pearl); color: var(--char-700);
  border: 1px solid var(--line-200); cursor: pointer;
  font: 500 13px var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-trigger:hover { border-color: var(--ink-700); color: var(--ink-800); }
.filter-trigger .filter-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--pastel-sky-50); color: var(--pastel-sky-600);
  border-radius: var(--r-pill); font: 600 11px var(--font-ui);
}

.filter-chips-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 0; margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-100);
}
.filter-chips-active .fc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: var(--r-pill);
  background: var(--pastel-sky-50); color: var(--pastel-sky-600);
  font: 500 12px var(--font-ui); text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-chips-active .fc-chip:hover { border-color: var(--pastel-sky-600); }
.filter-chips-active .fc-lbl { color: var(--char-500); font-weight: 500; }
.filter-chips-active .fc-val { color: var(--char-900); font-weight: 600; }
.filter-chips-active .fc-x {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(74,133,166,0.15); color: var(--pastel-sky-600);
  font-size: 14px; line-height: 1; font-weight: 600;
}
.filter-chips-active .fc-clear {
  font-size: 12px; color: var(--char-500); margin-left: auto;
  text-decoration: none; padding: 4px 8px;
}
.filter-chips-active .fc-clear:hover { color: var(--ink-800); text-decoration: underline; }

.filter-sheet-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,22,40,0.4); backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end;
}
.filter-sheet {
  width: min(420px, 92vw); height: 100vh; background: var(--pearl);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 220ms var(--ease);
  box-shadow: -8px 0 32px rgba(14,31,58,0.12);
}
.filter-sheet-backdrop.open .filter-sheet { transform: translateX(0); }
.filter-sheet .fs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--line-200);
}
.filter-sheet .fs-head h2 {
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--char-900); margin: 0;
}
.filter-sheet .fs-close {
  background: transparent; border: none; cursor: pointer; padding: 4px;
  color: var(--char-500); border-radius: var(--r-sm);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-sheet .fs-close:hover { background: var(--ink-50); color: var(--char-900); }

.filter-sheet .fs-body {
  flex: 1; overflow-y: auto;
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.filter-sheet .fs-block { display: flex; flex-direction: column; gap: 8px; }
.filter-sheet .fs-label {
  font: 600 11px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--char-500);
}
.filter-sheet .fs-row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.filter-sheet .fs-checks { display: flex; flex-direction: column; gap: 4px; }
.filter-sheet .fs-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--char-700); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.filter-sheet .fs-check:hover { background: var(--ink-50); }
.filter-sheet .fs-check input { cursor: pointer; }

.filter-sheet .fs-actions {
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-200);
  background: var(--pearl);
}

/* === Upload zone (drag-drop file uploader) === */
.upload-zone {
  position: relative;
  border: 1.5px dashed var(--line-200);
  border-radius: var(--r-md);
  background: var(--ivory);
  padding: var(--s-5);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
}
.upload-zone:hover { border-color: var(--ink-700); background: var(--pearl); }
.upload-zone.drag { border-color: var(--pastel-sky-600); background: var(--pastel-sky-50); }
.upload-zone .uz-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: var(--s-3) 0;
  color: var(--char-500);
}
.upload-zone .uz-empty svg { color: var(--char-400); }
.upload-zone .uz-title {
  margin: 4px 0 0;
  font-size: 14px; font-weight: 500; color: var(--char-900);
}
.upload-zone .uz-title .uz-browse {
  background: none; border: 0; padding: 0;
  color: var(--ink-700); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.upload-zone .uz-title .uz-browse:hover { color: var(--ink-800); }
.upload-zone .uz-hint { font-size: 12px; color: var(--char-500); margin: 0; }
.upload-zone .uz-or  { font-size: 12px; color: var(--char-500); margin: 4px 0 0; }
.upload-zone .uz-or .uz-paste { color: var(--ink-700); }

.upload-zone .uz-filled {
  display: flex; align-items: center; gap: var(--s-3);
}
.upload-zone .uz-preview {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--ink-50);
  display: grid; place-items: center;
}
.upload-zone .uz-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-zone .uz-preview .uz-doc { font-size: 28px; }
.upload-zone .uz-info { flex: 1; min-width: 0; }
.upload-zone .uz-name {
  font-size: 13.5px; font-weight: 500; color: var(--char-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-zone .uz-link {
  font-size: 11.5px; color: var(--char-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.upload-zone .uz-remove {
  flex-shrink: 0;
  background: transparent; border: 1px solid var(--line-200);
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  color: var(--char-500);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.upload-zone .uz-remove:hover { color: var(--bad); border-color: var(--bad); }

.upload-zone .uz-progress {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--char-700);
  padding: 4px 0;
}
.upload-zone .uz-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line-200);
  border-top-color: var(--ink-700);
  border-radius: 50%;
  animation: uz-spin 0.7s linear infinite;
}
@keyframes uz-spin { to { transform: rotate(360deg); } }

/* === Inline link-button — used in table cells / cards to open a popup or expand a row.
   Looks like an underlined link, behaves like a button. Centralised so the 5 pages
   that previously rolled their own copy stay visually identical. */
.link-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-700); font: 500 12px var(--font-ui);
  padding: 0; margin-top: 6px; display: inline-block;
  text-decoration: underline; text-decoration-color: var(--char-300);
  text-underline-offset: 3px;
}
.link-btn:hover         { color: var(--ink-900); text-decoration-color: var(--char-700); }
.link-btn:focus-visible { outline: none; color: var(--ink-900); text-decoration-color: var(--ink-700); }

/* === Filter side-sheet: searchable checkbox list ===
   Auto-enabled when a checkbox group has 8+ options. The search input filters
   labels in place; selected items stay checked even if hidden, so typing to find
   more never loses prior picks. */
.fs-checks-searchable { display: flex; flex-direction: column; gap: 8px; }
.fs-checks-search { font-size: 13px; padding: 8px 12px; }
.fs-checks-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--char-500);
  padding: 0 2px;
}
.fs-checks-list { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.fs-checks-searchable .fs-checks-list {
  border: 0.5px solid var(--ivory);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  background: var(--pearl);
}

/* === Skeleton / shimmer === */
.skeleton {
  background: linear-gradient(90deg, var(--line-100), var(--ink-50), var(--line-100));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* === Flow responses + 2026-06 polish === */
.badge-periwinkle {
  background: var(--pastel-periwinkle-50);
  color: var(--pastel-periwinkle-600);
}

/* Structured WhatsApp Flow response — collapsed one-liner, expands to label/value rows */
.flow-response summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--char-900);
}
.flow-response summary::-webkit-details-marker { display: none; }
.flow-response summary::after {
  content: '▾'; font-size: 10px; color: var(--char-400);
  transition: transform var(--dur-fast) var(--ease);
}
.flow-response[open] summary::after { transform: rotate(180deg); }
.flow-response .fr-body {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: var(--pastel-periwinkle-50);
  border-left: 3px solid var(--pastel-periwinkle-600);
  border-radius: var(--r-sm);
  display: grid; gap: 4px;
}
.flow-response .fr-row {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 12.5px;
}
.flow-response .fr-k {
  flex: 0 0 140px;
  color: var(--char-500);
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
.flow-response .fr-v { color: var(--char-900); font-weight: 500; }

/* Mobile sidebar backdrop — tap outside the drawer to close */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, 0.4);
  backdrop-filter: blur(2px);
  z-index: 90;
}

/* Modal entrance — subtle fade + rise so dialogs feel placed, not slapped */
.modal-backdrop .modal {
  animation: modalIn 0.22s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Conversation timeline (invitee directory + event guest expansion) ===
   A ledger of the whole exchange, newest first. Direction reads three ways at
   once: rail side (left = we sent, right = the guest), a slight chat-like
   indent, and the icon dot naming the source. Rows are one line tall until
   "view" opens the reconstructed message. */
.conversation-table { background: var(--conversation-row); }
table.conversation-table tbody > tr.conversation-summary-row > td {
  background: var(--conversation-row);
  transition: background var(--dur-fast) var(--ease);
}
table.conversation-table tbody > tr.conversation-summary-row:hover > td { background: var(--conversation-row-hover); }
table.conversation-table tbody > tr.conversation-summary-row[aria-expanded="true"] > td { background: var(--conversation-row-open); }
table.conversation-table tbody > tr.conversation-detail-row > td {
  background: var(--conversation-detail);
  border-top-color: var(--conversation-border);
  box-shadow: inset 0 1px 0 var(--conversation-border), inset 0 -1px 0 var(--conversation-border);
}
.conversation-detail-surface {
  padding: 12px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.86);
  box-shadow: 0 1px 3px rgba(48,40,31,.035);
}
.conversation-detail-eyebrow { color: var(--conversation-accent); }
.conversation-expand[aria-expanded="true"] {
  border-color: var(--conversation-accent);
  background: var(--pearl);
  color: var(--conversation-accent);
}
.tl { padding: 2px 0; }
.tl-loading { font-size: 12.5px; color: var(--char-500); padding: 8px 2px; }
.tl-row { display: flex; align-items: stretch; margin-bottom: 6px; }
.tl-row.tl-out { margin-right: 34px; }
.tl-row.tl-in  { flex-direction: row-reverse; margin-left: 34px; }
/* Same-group sibling rows: present for context, visually receded. Hover
   restores full strength so a dimmed row is never hard to actually read. */
.tl-row.tl-dim { opacity: .45; transition: opacity .15s ease; }

/* One-shot highlight for the messages behind the sent-count circle. It sweeps
   a warm wash across the bubble and settles — enough to say "these are the
   three", not enough to distract on a long thread. Honours reduced-motion. */
@keyframes tl-flash-sweep {
  0%   { background: transparent; box-shadow: none; }
  18%  { background: var(--gold-100); box-shadow: 0 0 0 3px var(--gold-100); }
  100% { background: transparent; box-shadow: none; }
}
.tl-row.tl-flash { animation: tl-flash-sweep 1.4s var(--ease) 1; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .tl-row.tl-flash { animation: none; box-shadow: 0 0 0 2px var(--gold-500); border-radius: var(--r-md); }
}
.tl-row.tl-dim:hover, .tl-row.tl-dim:focus-within { opacity: 1; }
.tl-rail { flex: 0 0 3px; border-radius: 2px; }
.tl-dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid; display: grid; place-items: center;
  align-self: center; margin: 0 7px; background: var(--pearl);
}
.tl-card {
  flex: 1; min-width: 0; background: var(--pearl);
  border: 0.5px solid var(--line-200); border-radius: var(--r-md);
  padding: 7px 12px;
}
.tl-line { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.tl-title {
  flex: 1; min-width: 0; font-size: 13px; color: var(--char-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-title strong { font-weight: 600; }
.tl-sub { color: var(--char-500); font-weight: 400; }
.tl-right { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tl-when { font-size: 11px; color: var(--char-500); }
.tl-gap  { font-size: 11px; color: var(--gold-700, #8a6d2b); }
.tl-chip {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid;
  display: inline-grid; place-items: center;
  font: 600 9.5px var(--font-ui); letter-spacing: 0;
  cursor: default;
}
.tl-chip-f { color: var(--pastel-blush-600); background: var(--pastel-blush-50); border-color: var(--pastel-blush-600); }
.tl-view {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: 0; cursor: pointer;
  font: 500 11px var(--font-ui); color: var(--ink-800);
  padding: 3px 8px; border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease);
}
.tl-view:hover { background: var(--line-100); }
.tl-open .tl-view svg { transform: rotate(180deg); }
.tl-compose {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pearl); border: 0.5px dashed var(--line-300, #E2DBCC);
  border-radius: var(--r-pill); cursor: pointer;
  font: 500 12px var(--font-ui); color: var(--char-700);
  padding: 6px 14px; margin: 0 0 10px 32px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tl-compose:hover { border-color: var(--ink-700); color: var(--ink-800); }
/* Reconstructed message bubble */
.tl-bubble {
  margin: 8px 0 2px; max-width: 430px;
  background: var(--ivory); border: 0.5px solid var(--line-200);
  border-radius: var(--r-md); padding: 10px 12px;
}
.tl-bubble-cap {
  font: 600 9.5px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-700, #8a6d2b); margin-bottom: 6px;
}
.tl-bubble-header { font-weight: 600; font-size: 12.5px; color: var(--char-900); margin-bottom: 4px; }
.tl-bubble-media {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--char-500);
  background: var(--pearl); border: 0.5px solid var(--line-200);
  border-radius: var(--r-sm); padding: 4px 10px; margin-bottom: 6px;
}
.tl-bubble-body { font-size: 12.5px; color: var(--char-900); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.tl-bubble-rows { margin-top: 8px; border-top: 0.5px solid var(--line-200); }
.tl-bubble-row { font-size: 12px; color: var(--char-700); padding: 5px 2px; border-bottom: 0.5px solid var(--line-100); }
.tl-bubble-row:last-child { border-bottom: 0; }
.tl-bubble-footer { margin-top: 6px; font-size: 11px; color: var(--char-500); }
.tl-bubble-btns { display: flex; gap: 6px; margin-top: 8px; border-top: 0.5px solid var(--line-200); padding-top: 8px; }
.tl-bubble-btn {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--pastel-sky-600);
  background: var(--pearl); border: 0.5px solid var(--line-200);
  border-radius: var(--r-sm); padding: 5px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-muted { color: var(--char-500); }

/* Expanded view = reconstructed bubble + (for failed sends) the "why it failed"
   card side by side; the card takes the whitespace beside the bubble and wraps
   below it on narrow screens. Blush palette = the app's failed colour. */
.tl-expand { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.tl-expand .tl-bubble { flex: 0 1 430px; min-width: 240px; }
.tl-fail {
  flex: 1 1 240px; min-width: 240px; max-width: 430px;
  margin: 8px 0 2px;
  background: var(--pastel-blush-50); border: 0.5px solid rgba(190, 78, 68, 0.25);
  border-radius: var(--r-md); padding: 10px 12px;
}
.tl-fail-cap {
  font: 600 9.5px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--pastel-blush-600); margin-bottom: 6px;
}
.tl-fail-stage { font-size: 11px; color: var(--char-500); margin-bottom: 6px; }
.tl-fail-head { font-size: 12.5px; font-weight: 600; color: var(--char-900); line-height: 1.45; }
.tl-fail-code {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  font: 600 10.5px var(--font-mono, ui-monospace, monospace);
  color: var(--pastel-blush-600); background: rgba(190, 78, 68, 0.10);
  border-radius: var(--r-sm); vertical-align: 1px;
}
.tl-fail-details { margin-top: 6px; font-size: 12px; color: var(--char-700, #4a4a45); line-height: 1.5; word-break: break-word; }
.tl-fail-trace { margin-top: 8px; font: 500 10px var(--font-mono, ui-monospace, monospace); color: var(--char-500); }
.tl-legend {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 10px; padding-top: 8px; border-top: 0.5px solid var(--line-200);
  font-size: 11px; color: var(--char-500);
}
.tl-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tl-legend-note { margin-left: auto; color: var(--char-400, #B4B2A9); }
@media (max-width: 720px) {
  .tl-row.tl-out { margin-right: 10px; }
  .tl-row.tl-in  { margin-left: 10px; }
  .tl-sub { display: none; }
}

/* Read-only notice — shown to org admins on pages they can see but not change. */
.ro-note {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--s-3); padding: 9px 13px;
  border-radius: var(--r-md);
  background: rgba(90, 122, 168, 0.08);
  border: 1px solid rgba(90, 122, 168, 0.26);
  color: #3d5a80;
  font-size: 0.8125rem; line-height: 1.45;
}
.ro-note svg { flex: 0 0 auto; opacity: .75; }