/* Seventh Seal — restrained operations console. All assets are local. */
:root {
  color-scheme: dark;
  --bg: #0c0e16;
  --surface: #121620;
  --raised: #191e2b;
  --border: #2b3142;
  --text: #edf0f7;
  --muted: #a4adbf;
  --accent: #b4a8ff;
  --action: #7462cd;
  --good: #8bd4ac;
  --warn: #ecc681;
  --bad: #f0a0a5;
  --radius: 7px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-padding-top: 100px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
summary,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}
h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
h2 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
}
h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
p {
  margin: 0 0 12px;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.text-bad {
  color: var(--bad);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Permanent shell. Mobile navigation is visible even without JavaScript. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.topbar-inner {
  max-width: 1328px;
  padding: 0 32px;
  min-height: 68px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 36px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: -0.08em;
  font-weight: 750;
}
.nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 24px;
  flex: 1;
}
.nav-link {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--text);
  text-decoration: none;
}
.nav-link.is-active {
  color: var(--text);
}
.nav-link.is-active::after {
  content: '';
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  background: var(--accent);
}
.nav-badge {
  color: var(--accent);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 650;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
.settings-link,
.account-menu summary {
  color: var(--muted);
  font-size: 12px;
}
.settings-link.is-active {
  color: var(--text);
}
.account-menu {
  position: relative;
}
.account-menu summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
}
.account-menu summary::-webkit-details-marker {
  display: none;
}
.account-content {
  position: absolute;
  top: 40px;
  right: 0;
  width: max-content;
  max-width: 80vw;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.account-content .logout-form {
  margin-top: 12px;
}
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.state-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.state-live {
  color: var(--good);
}
.state-paused {
  color: var(--warn);
}
.state-dry {
  color: var(--accent);
}

.page {
  max-width: 1328px;
  padding: 24px 32px 72px;
  margin: auto;
  min-width: 0;
}
.workspace-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
}
.section-heading h2,
.section-heading p {
  margin: 0;
}
.eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card,
.template-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
/* Title plus the control that explains it, on one line. */
.card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-heading h2 {
  margin: 0;
}
.card-narrow {
  max-width: 600px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Counts are a single compact strip, not a wall of cards. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 0 0 16px;
  overflow: hidden;
}
.stat {
  min-width: 0;
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}
.stat:last-child {
  border-right: 0;
}
.stat-value {
  display: block;
  font-size: 28px;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.stat-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}
.stat-warn .stat-value {
  color: var(--bad);
}
.stat-good .stat-value {
  color: var(--good);
}
.queue-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 24px;
}
.queue-progress strong {
  color: var(--text);
  font-weight: 600;
}
/* The separator is text, so it takes a text colour. `--border` is a 1px-line
   token and renders at about 1.5:1 here, which is effectively invisible. */
.queue-progress > span {
  color: var(--muted);
  padding: 0 4px;
}
.action-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 24px;
}
.action-panel-paused {
  border-left: 3px solid var(--warn);
}
.action-status {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-weight: 550;
  margin: 0;
}
.action-note {
  margin: 8px 0 0;
  max-width: 65ch;
  font-size: 13px;
  color: var(--muted);
}
.action-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.overview-timing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 24px;
}
.overview-timing > div {
  padding: 24px 0;
}
.overview-timing > div + div {
  padding-left: 28px;
  border-left: 1px solid var(--border);
}
.overview-timing h2 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 8px;
}
.overview-timing p {
  margin-bottom: 8px;
}

/* Native disclosure and contextual information. */
.disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 12px;
}
.disclosure > summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 550;
}
.disclosure > summary > .count {
  margin-left: 12px;
}
.disclosure[open] > summary {
  border-bottom: 1px solid var(--border);
}
.disclosure-body {
  padding: 20px;
}
.disclosure-body > :last-child {
  margin-bottom: 0;
}
.count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.help {
  position: relative;
  display: inline-block;
  font-weight: 400;
  vertical-align: middle;
}
.help > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  /* The glyph stays 16px and the control still occupies 28px of layout, but
     the hit area is the full 44px a touch target needs. The negative margin
     absorbs the difference, so no heading, card or action row moves, and it
     stays inside the 8px gap its smallest container leaves beside it. */
  width: 44px;
  height: 44px;
  margin: -8px;
  border-radius: var(--radius);
  color: var(--muted);
}
.help > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.help > summary span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
}
.help > summary::-webkit-details-marker {
  display: none;
}
.help[open] > summary {
  color: var(--accent);
}
.help-content {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 34px;
  width: 300px;
  max-width: 76vw;
  padding: 16px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
.section-heading .help-content,
.action-controls .help-content,
.detail-list .help-content {
  left: auto;
  right: 0;
}
.help-content > :last-child {
  margin-bottom: 0;
}
.review-form .help-content,
.disclosure-body > .help .help-content {
  position: static;
  width: auto;
  max-width: 100%;
  margin: 4px 0 12px;
}
.row-details,
.review-details {
  margin-top: 6px;
}
/* Compact to look at, but a full 44px touch target and a visible focus ring
   for keyboard use. The padding widens the target past the short label. */
.row-details > summary,
.review-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 12px;
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.row-details > summary:focus-visible,
.review-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.row-details .detail-list {
  margin-top: 12px;
}
.row-details .detail-list > div {
  display: block;
  padding: 4px 0;
}
.row-details .detail-list dd {
  margin-top: 3px;
}
.review-form {
  min-width: 180px;
  max-width: 360px;
  margin-top: 12px;
}
.review-form > .help {
  margin-right: 8px;
}
.review-form textarea {
  font: inherit;
}
.review-address {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.review-help,
.review-hint {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}

/* Horizontal scroll is contained, keyboard-focusable and never page-wide. */
.table-wrap {
  overflow-x: auto;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
th,
td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
td {
  font-size: 13px;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #151a26;
}
.company-cell {
  width: 30%;
  min-width: 220px;
}
.company-cell strong {
  display: block;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.cell-email {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 12px;
  margin-top: 4px;
}
.cell-step {
  display: block;
  margin-bottom: 4px;
}
.cell-time {
  display: block;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.cell-note {
  max-width: 30ch;
  font-size: 12px;
  color: var(--warn);
  margin: 6px 0;
}
.status-cell {
  min-width: 180px;
}
.review-cell {
  margin-top: 8px;
}
.row-muted td {
  color: var(--muted);
}
.row-new td:first-child {
  border-left: 2px solid var(--accent);
}
.row-actions {
  min-width: 88px;
}
.row-actions .link-button {
  display: block;
  width: max-content;
  margin-bottom: 6px;
}
.reason-cell {
  max-width: 28rem;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.preview-line {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  max-width: 40ch;
}
.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 6px;
}
.pill {
  display: inline;
  font-size: 12px;
  color: var(--muted);
}
.pill-approved,
.pill-sent,
.pill-succeeded,
.pill-published,
.pill-completed,
.pill-official {
  color: var(--good);
}
.pill-failed,
.pill-bounce,
.pill-hard-bounce,
.pill-missing {
  color: var(--bad);
}
.pill-cancelled,
.pill-draft,
.pill-scheduled,
.pill-delivery-delay,
.pill-warning {
  color: var(--warn);
}
.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}
.empty {
  padding: 28px 20px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.notice,
.flash {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  color: var(--warn);
  background: var(--surface);
}
.notice-warn,
.flash-error {
  border-left-color: var(--bad);
  color: var(--bad);
}
.notice-good,
.flash-success {
  border-left-color: var(--good);
  color: var(--good);
}
.flash-info {
  color: var(--text);
  border-left-color: var(--accent);
}
.simulation-note {
  color: var(--muted);
  font-size: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

/* Forms retain native labels, submitted values and no-JS submission. */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover {
  background: #23293a;
  text-decoration: none;
}
.button-primary {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  font-weight: 550;
}
.button-primary:hover {
  background: #6d5abd;
}
.button-large {
  min-height: 40px;
  padding: 10px 20px;
}
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.link-button {
  background: none;
  border: 0;
  color: var(--accent);
  padding: 3px 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.inline-form {
  display: inline;
}
label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  min-height: 36px;
  border: 1px solid #3d455a;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--action);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
textarea {
  resize: vertical;
  line-height: 1.65;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
}
.field {
  margin-bottom: 16px;
  flex: 1;
  min-width: 160px;
}
.field-small {
  flex: 0 1 170px;
  min-width: 130px;
}
.inline-fields {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.filter-bar,
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-bar select {
  max-width: 380px;
}
.filter-row input[type='search'] {
  flex: 1;
  min-width: 160px;
  max-width: 380px;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  margin: 16px 0;
}
.checkbox input {
  margin-top: 3px;
}
.state-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
.radio {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  cursor: pointer;
  margin: 0;
}
.radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--raised);
}
.radio-title {
  color: var(--text);
  font-weight: 550;
  margin-left: 6px;
  font-size: 14px;
}
.radio-help {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 0;
}
.detail-list {
  margin: 0;
}
.detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
}
.detail-list > div:last-child {
  border-bottom: 0;
}
.detail-list dt {
  color: var(--muted);
  font-size: 12px;
}
.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.status-list {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: 12px 20px;
  margin: 0;
}
.status-list dt {
  color: var(--muted);
  font-size: 13px;
}
.status-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plain-list li {
  padding: 6px 0;
  font-size: 13px;
}
.problem-list {
  margin: 0;
  padding-left: 18px;
  color: var(--bad);
}
.problem-list li {
  margin-bottom: 8px;
}

/* Sequence editing and rendered email have separate visual roles. */
.template-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -8px 0 20px;
  color: var(--muted);
  font-size: 12px;
}
.step {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0 0 12px;
  background: var(--bg);
}
.step > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 550;
}
.step > summary::-webkit-details-marker {
  display: none;
}
.step > summary::before {
  content: '+';
  color: var(--muted);
  width: 10px;
}
.step[open] > summary::before {
  content: '−';
}
.step-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-delay {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.step-fields {
  min-width: 0;
  padding: 16px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.variable-list {
  margin: 0;
}
.variable-list dt {
  font-size: 12px;
  color: var(--accent);
}
.variable-list dd {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.preview-step {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.preview-step:first-child {
  padding-top: 0;
}
.preview-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.preview-subject {
  font-weight: 550;
}
.preview-body {
  max-width: 68ch;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.message-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.message-heading p {
  margin: 0;
}
.message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  margin-bottom: 24px;
  align-items: start;
}
.email-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  min-width: 0;
}
.rendered-subject {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 28px;
}
.rendered-body {
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.message-metadata {
  padding-top: 4px;
  min-width: 0;
}
.message-metadata .detail-list > div {
  display: block;
}
.message-metadata dd {
  margin-top: 4px;
  font-size: 12px;
}
.message-metadata .tag {
  margin-left: 8px;
}
.report-body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-wrap {
  width: 100%;
  max-width: 430px;
  padding: 24px;
}
.login-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-card h1 {
  margin-bottom: 24px;
  font-size: 22px;
}
.login-card label {
  margin-top: 16px;
}
.login-card .button {
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .topbar-inner {
    gap: 24px;
  }
  .nav {
    gap: 16px;
  }
  .topbar-right {
    gap: 12px;
  }
  .account-menu summary {
    font-size: 0;
  }
  .account-menu summary::after {
    content: '···';
    font-size: 18px;
  }
  .message-layout {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
  }
}
@media (max-width: 820px) {
  .topbar-inner {
    padding: 12px 20px 0;
    flex-wrap: wrap;
    gap: 12px;
  }
  .topbar-right {
    margin-left: auto;
  }
  .nav {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    gap: 24px;
    overflow-x: auto;
  }
  .nav-link {
    min-height: 44px;
  }
  .page {
    padding: 20px 20px 48px;
  }
  .grid-2,
  .message-layout {
    grid-template-columns: 1fr;
  }
  .message-metadata {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .message-metadata .detail-list > div {
    display: flex;
  }
  .state-options {
    grid-template-columns: 1fr;
  }
  .stat {
    padding: 16px;
  }

  /* Queue becomes stacked cards. The recipient, the status badge and the View
     action are then all reachable without discovering a horizontal swipe. The
     desktop table above this breakpoint, and every other table, is unchanged. */
  .queue-table .table-wrap {
    overflow-x: visible;
    border: 0;
    background: none;
  }
  .queue-table thead {
    /* Each cell carries its own label below, so the header row is redundant
       rather than hidden information. */
    display: none;
  }
  .queue-table table,
  .queue-table tbody,
  .queue-table tr,
  .queue-table td {
    display: block;
    width: 100%;
  }
  /* The desktop table carries min-widths that keep its columns readable while
     it scrolls. Stacked, they would push the page sideways instead. */
  .queue-table table,
  .queue-table .company-cell,
  .queue-table .status-cell,
  .queue-table .row-actions {
    min-width: 0;
  }
  .queue-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .queue-table td {
    flex: 1 1 100%;
    padding: 0;
    border: 0;
  }
  /* The two timings share the last row, which keeps the card short. */
  .queue-table td[data-label='Last sent'],
  .queue-table td[data-label='Next scheduled'] {
    flex: 1 1 calc(50% - 6px);
  }
  /* Recipient first, then state, then the action, then the timings. */
  .queue-table .company-cell {
    order: 1;
  }
  .queue-table .status-cell {
    order: 2;
  }
  .queue-table .row-actions {
    order: 3;
  }
  .queue-table td[data-label='Last sent'] {
    order: 4;
  }
  .queue-table td[data-label='Next scheduled'] {
    order: 5;
  }
  .queue-table td[data-label]:not(.status-cell):not(.row-actions)::before,
  .queue-table .status-cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .queue-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    /* The negative inline margin lets each action's hit area extend sideways
       while its label stays flush with the rest of the card. It reaches into
       the card's own 16px padding, so the page never widens. */
    margin-inline: -8px;
  }
  .queue-table .row-actions .link-button,
  .queue-table .row-actions button {
    min-height: 44px;
    padding-inline: 8px;
    display: inline-flex;
    align-items: center;
  }
  .queue-table .row-muted {
    opacity: 0.72;
  }
}
@media (max-width: 520px) {
  html {
    scroll-padding-top: 130px;
  }
  .topbar-inner {
    padding-inline: 16px;
  }
  .topbar-right {
    gap: 14px;
  }
  .nav {
    gap: 23px;
  }
  .nav-link {
    font-size: 12px;
  }
  .page {
    padding: 20px 16px 48px;
  }
  .workspace-line {
    margin-bottom: 24px;
    font-size: 10px;
  }
  h1 {
    font-size: 22px;
  }
  .page-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .page-head .button {
    flex-shrink: 0;
  }
  .action-panel {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .action-controls {
    justify-content: space-between;
  }
  .action-status {
    font-size: 21px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat {
    border-bottom: 1px solid var(--border);
  }
  .stat:nth-child(even) {
    border-right: 0;
  }
  .stat-value {
    font-size: 26px;
  }
  .stat-label {
    font-size: 11px;
  }
  .overview-timing {
    grid-template-columns: 1fr;
  }
  .overview-timing > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .card,
  .template-form,
  .disclosure-body {
    padding: 16px;
  }
  .disclosure > summary {
    padding: 16px;
  }
  .detail-list > div,
  .message-metadata .detail-list > div {
    display: block;
  }
  .detail-list dd {
    margin-top: 4px;
  }
  .status-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .status-list dd {
    margin-bottom: 12px;
  }
  .field,
  .field-small {
    flex: 1 1 100%;
    min-width: 0;
  }
  .filter-bar select {
    max-width: calc(100% - 70px);
  }
  .step > summary {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .step-summary {
    order: 4;
    flex-basis: 100%;
    padding-left: 20px;
  }
  .step-delay {
    margin-left: auto;
  }
  .email-paper {
    padding: 20px;
  }
  .message-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .help-content,
  .section-heading .help-content,
  .action-controls .help-content,
  .detail-list .help-content {
    position: fixed;
    width: auto;
    max-width: none;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 20px;
    max-height: 55vh;
    overflow-y: auto;
  }
  .review-form .help-content,
  .disclosure-body > .help .help-content {
    position: static;
    width: auto;
    max-width: 100%;
  }
}