/* postMessage's specialized layout uses the same palette and type scale. */
body {
  background: var(--background);
  font: 0.9375rem/1.7 var(--font-geist-sans);
}
button {
  background: var(--secondary);
  color: var(--foreground);
  border-color: var(--input);
  border-radius: 2rem;
  font-family: var(--font-geist-sans);
}
button:hover {
  background: var(--control-hover);
  border-color: var(--primary);
}
input,
textarea {
  background: var(--code-background);
  color: var(--code-foreground);
  border-color: var(--input);
}
textarea::placeholder {
  color: var(--muted-foreground);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--ring);
}
.auditor-nav {
  background: var(--background);
  border-color: var(--border);
  min-height: 5.5rem;
}
.lab-brand img {
  width: 2.7rem;
  height: 2.7rem;
}
.lab-brand strong {
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}
.lab-brand strong span,
.nav-label {
  color: var(--muted-foreground);
}
.nav-label {
  border-color: var(--border);
}
.auditor-nav > div {
  color: var(--body-copy);
  font-size: 0.8rem;
}
.auditor-nav a:hover,
.auditor-nav a > span[aria-hidden] {
  color: var(--primary);
}
.auditor-heading {
  padding: 4.5rem 0 3rem;
}
.auditor-heading h1 {
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.06em;
}
.auditor-heading h1 > span {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--lavender);
}
.auditor-heading p {
  font-size: 1rem;
  color: var(--body-copy);
}
.eyebrow {
  font-size: 0.65rem;
  color: var(--primary);
  letter-spacing: 0.11em;
}
.research-link {
  font-size: 0.85rem;
  color: var(--primary);
}
.target-bar,
.composer-panel,
.preview-panel,
.traffic-empty,
.traffic-entry {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}
.target-bar > label,
.delivery-settings label,
.delivery-settings summary {
  color: var(--body-copy);
}
.target-bar > label,
.target-feedback p,
.target-feedback > button {
  font-size: 0.75rem;
}
.primary-button,
.send-button {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  font-size: 0.8rem;
}
.primary-button:hover,
.send-button:hover {
  background: var(--primary-hover);
  color: var(--primary-foreground);
}
.target-feedback > button {
  color: var(--primary);
}
.panel-heading,
.message-editor > div,
.composer-note {
  background: var(--secondary);
  border-color: var(--border);
}
.panel-indicator,
.field-label,
.message-editor > div,
.preview-footer {
  color: var(--muted-foreground);
  font-size: 0.65rem;
}
.composer-body > p,
.composer-note p,
.delivery-settings p {
  font-size: 0.8rem;
}
.payload-presets button {
  background: var(--secondary);
  border-color: var(--input);
  border-radius: var(--radius-control);
  font-size: 0.8rem;
}
.payload-presets button:hover {
  background: var(--control-hover);
  border-color: var(--primary);
}
.payload-presets code {
  color: var(--lavender);
  font-size: 0.65rem;
}
.message-editor {
  border-color: var(--input);
}
.message-editor textarea {
  font-size: 0.8rem;
}
.message-editor textarea::placeholder {
  color: var(--muted-foreground);
}
.delivery-settings summary,
.delivery-settings label,
.delivery-settings input {
  font-size: 0.8rem;
}
.composer-note > span {
  color: var(--lavender);
}
#iframe-container {
  background: var(--code-background);
}
#frame-placeholder > strong {
  color: var(--foreground);
}
#frame-placeholder button,
.workspace-jump {
  background: var(--secondary);
  color: var(--foreground);
  border-color: var(--border);
}
.workspace-jump a {
  color: var(--body-copy);
}
.preview-footer {
  border-color: var(--border);
}
.preview-footer a {
  color: var(--primary);
}
.preview-footer i,
.status-dot {
  background: var(--primary);
}
.traffic-heading h2 > span {
  color: var(--primary);
  border-color: var(--border);
}
.traffic-toolbar {
  background: var(--secondary);
  border-color: var(--border);
}
.traffic-actions button,
.traffic-toolbar button {
  color: var(--body-copy);
  border-color: var(--border);
  font-size: 0.75rem;
}
.traffic-toolbar button[aria-pressed="true"] {
  background: var(--control-hover);
  color: var(--primary);
  border-color: var(--input);
}
.traffic-toolbar button > span {
  color: var(--lavender);
  font-size: 0.65rem;
}
#logs {
  background: var(--code-background);
  border-color: var(--border);
}
#logs-status,
.logs-empty > small,
.log-heading time,
.traffic-foot,
.auditor-footer {
  color: var(--muted-foreground);
  font-size: 0.65rem;
}
.logs-empty > p,
.log-heading {
  color: var(--body-copy);
}
.log-entry {
  border-color: var(--border);
}
.log-entry pre {
  color: var(--code-foreground);
  font-size: 0.8rem;
}
.log-direction {
  color: var(--lavender);
  background: var(--secondary);
  border-color: var(--border);
}
.log-entry[data-direction="received"] .log-direction {
  color: var(--cyan);
  background: var(--secondary);
  border-color: var(--border);
}
.auditor-footer {
  border-color: var(--border);
}
.auditor-footer a {
  color: var(--primary);
}
@media (max-width: 700px) {
  .auditor-heading {
    padding-top: 3rem;
  }
  .auditor-nav > div {
    font-size: 0.75rem;
    gap: 1rem;
  }
  .target-bar > label {
    font-size: 0.65rem;
  }
}