/* ContactDesk correspondence system.
   Group with space first, filled control zones second, and hairline separators
   only for dense records or persistent navigation rails. */
:root {
  --desk-canvas: #f4f1e9;
  --desk-sheet: #fdfbf6;
  --desk-control: #fffdf8;
  --desk-subtle: #f8f5ed;
  --desk-ink: #202d32;
  --desk-muted: #68777b;
  --desk-line: #d7d0c3;
  --desk-line-soft: #e5dfd4;
  --desk-accent: #245f9f;
  --desk-accent-hover: #194d81;
  --desk-coral: #b96558;
  --desk-space-1: 8px;
  --desk-space-2: 12px;
  --desk-space-3: 16px;
  --desk-space-4: 24px;
  --desk-space-5: 32px;
  --desk-space-6: 48px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--desk-ink);
  background-color: var(--desk-canvas);
  background-image: radial-gradient(#ffffff9c .65px, transparent .75px);
  background-size: 5px 5px;
}

a {
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;
}

:focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.muted,
.notice,
.empty p,
.page-heading p {
  text-wrap: pretty;
}

.main {
  margin-left: 0;
  margin-inline-start: 224px;
  background: transparent;
}

.topbar {
  height: 62px;
  padding-inline: 38px;
  background: #fdfbf5e8;
  border-color: var(--desk-line);
  color: #3c4a4b;
}

.sidebar {
  left: auto;
  right: auto;
  inset-inline-start: 0;
  inset-inline-end: auto;
  background-color: #172530;
  background-image: radial-gradient(#ffffff18 .6px, transparent .8px);
  background-size: 5px 5px;
  border-inline-end: 1px solid #ffffff14;
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.38rem;
  letter-spacing: -.7px;
}

.brand-icon {
  border-radius: 5px;
  background: #4266cd;
  box-shadow: inset 0 1px #ffffff66;
}

.workspace-label,
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .625rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sidebar nav a {
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  letter-spacing: .02em;
}

.sidebar nav a.active {
  background: #295277;
  box-shadow: none;
  border-inline-start: 2px solid #f6d9b1;
}

.sidebar nav a:hover {
  background: #243e52;
}

.page {
  width: 100%;
  max-width: 1640px;
  padding: 42px 38px 56px;
}

.page-heading {
  align-items: flex-start;
  margin-block-end: var(--desk-space-6);
}

.page-heading > div:first-child {
  max-width: 72ch;
}

.page-heading h1 {
  color: #1e2d33;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.55rem;
  font-weight: 500;
  letter-spacing: -1.8px;
  line-height: 1.05;
}

.page-heading h1::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin-block-start: var(--desk-space-3);
  background: var(--desk-coral);
}

.page-heading p {
  max-width: 65ch;
  color: var(--desk-muted);
}

.back {
  margin-block-end: var(--desk-space-3);
}

.button {
  border-radius: 3px;
  font-weight: 650;
}

.button.primary {
  background: var(--desk-accent);
  border-color: var(--desk-accent);
  box-shadow: none;
}

.button.primary:hover {
  background: var(--desk-accent-hover);
  border-color: var(--desk-accent-hover);
}

.button.secondary {
  background: var(--desk-control);
  border-color: #bfc4bc;
  color: #31434a;
}

.count {
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.notice {
  border-radius: 3px;
}

/* These sections are layout groups, not cards. */
.contacts-surface .panel,
.templates-surface .template-layout > .panel,
.inbox-surface .inbox-list,
.inbox-surface .conversation-layout > .panel,
.import-surface .import-grid > .panel,
.import-surface .import-guide,
.import-surface .import-review-panel,
.settings-surface .connection-card,
.settings-surface .add-business,
.compose-surface .compose-workspace,
.compose-surface .compose-sheet,
.compose-surface .delivery-rail {
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Contacts: controls stay shaped; records use table separators. */
.contacts-surface .summary {
  gap: var(--desk-space-6);
  margin-block-end: var(--desk-space-6);
}

.contacts-surface .summary > div {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contacts-surface .summary strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.contacts-surface .stat-icon {
  border-radius: 50%;
}

.contacts-surface .filters {
  gap: var(--desk-space-2);
  padding: 0 0 var(--desk-space-4);
  border: 0;
  background: transparent;
}

.contacts-surface .filters::before {
  content: "Filter contacts";
  flex-basis: 100%;
  color: #718087;
  font: 600 .59rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.contacts-surface .filters input,
.contacts-surface .filters select {
  background: var(--desk-control);
  border-color: var(--desk-line);
}

.contacts-surface .selection-bar {
  margin-block-end: var(--desk-space-3);
  border: 1px solid #cddbe3;
  border-radius: 3px;
  background: #e9f0f4;
}

.contacts-surface .contact-actions-legend {
  justify-content: flex-end;
  padding: var(--desk-space-2) 0;
  border: 0;
  border-block-end: 1px solid var(--desk-line);
  background: transparent;
}

.contacts-surface .table-scroll {
  background: transparent;
}

.contacts-surface thead {
  background: transparent;
  color: #66716f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .67rem;
  letter-spacing: .04em;
}

.contacts-surface th,
.contacts-surface td {
  border-color: var(--desk-line-soft);
}

.contacts-surface tbody tr:hover {
  background: #ffffff66;
}

.contacts-surface .table-footer {
  padding-inline: 0;
  border-color: var(--desk-line);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
}

/* Templates: a navigation rail and a writing area, not two cards. */
.templates-surface .template-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--desk-space-6);
  align-items: stretch;
}

.templates-surface .template-layout > .panel {
  padding: 0;
}

.templates-surface .template-library {
  padding-inline-end: var(--desk-space-5) !important;
  border-inline-end: 1px solid var(--desk-line) !important;
}

.templates-surface .template-library > h2 {
  color: #56686c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.templates-surface .template-card {
  padding: var(--desk-space-3) var(--desk-space-2);
  border: 0;
  border-block-end: 1px solid var(--desk-line-soft);
  border-radius: 0;
  background: transparent;
}

.templates-surface .template-card:hover {
  background: #ffffff70;
}

.templates-surface .template-card.selected {
  border-inline-start: 2px solid var(--desk-accent);
  background: #e9f0f2;
}

.templates-surface .template-card h3,
.templates-surface .template-layout > .panel:last-child > h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.templates-surface .template-layout > .panel:last-child > h2 {
  font-size: 1.75rem;
  letter-spacing: -.6px;
}

.templates-surface .template-layout > .panel:last-child > h2::before {
  content: "Draft message";
  display: block;
  margin-block-end: var(--desk-space-2);
  color: #697a7e;
  font: 600 .61rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.templates-surface .template-layout > .panel:last-child > .stack-form {
  padding: var(--desk-space-4) 0 0;
  gap: var(--desk-space-2);
}

.templates-surface .template-layout input,
.templates-surface .template-layout select {
  background: var(--desk-control);
  border-color: var(--desk-line);
}

.templates-surface .template-attachments {
  padding: var(--desk-space-4) 0 0;
  border: 0;
  border-block-start: 1px solid var(--desk-line);
  border-radius: 0;
  background: transparent;
}

/* Inbox and detail: dense records keep hairlines, not outer shells. */
.inbox-surface .mailbox-identity {
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.inbox-surface .sync-state {
  margin-block-end: var(--desk-space-5);
  font-size: .75rem;
}

.inbox-surface .inbox-row {
  position: relative;
  padding: var(--desk-space-4) 0;
  border-color: var(--desk-line-soft);
}

.inbox-surface .inbox-row:hover {
  background: #ffffff50;
}

.inbox-surface .inbox-row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -16px;
  width: 2px;
  background: transparent;
}

.inbox-surface .inbox-row:hover::before {
  background: var(--desk-accent);
}

.inbox-surface .inbox-contact {
  width: clamp(190px, 22vw, 280px);
  min-width: 0;
}

.inbox-surface .inbox-contact strong,
.inbox-surface .inbox-preview strong {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inbox-surface .inbox-contact strong,
.inbox-surface .message h3,
.inbox-surface .contact-aside h2 {
  font-family: Georgia, "Times New Roman", serif;
}

.inbox-surface .conversation-layout {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: var(--desk-space-6);
}

.inbox-surface .contact-aside {
  padding: 0 var(--desk-space-5) 0 0;
  border-inline-end: 1px solid var(--desk-line) !important;
  background: transparent;
}

.inbox-surface .history .panel-heading,
.inbox-surface .history-toolbar,
.inbox-surface .status-form {
  padding-inline: 0;
  border-color: var(--desk-line);
  background: transparent;
}

.inbox-surface .history-toolbar {
  gap: var(--desk-space-4);
}

.inbox-surface .timeline {
  padding: var(--desk-space-2) 0 0;
}

.inbox-surface .message {
  margin: 0;
  padding: var(--desk-space-4) 0;
  border: 0;
  border-block-start: 1px solid var(--desk-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inbox-surface .message.outbound {
  margin: 0;
  padding-inline-start: var(--desk-space-3);
  border-inline-start: 2px solid var(--desk-accent);
  background: transparent;
}

.inbox-surface .delivery-history {
  margin-inline: 0;
}

/* Import: the upload target is a control; surrounding content stays open. */
.import-surface .import-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
  gap: 64px;
}

.import-surface .import-grid > .panel,
.import-surface .import-guide {
  padding: 0;
}

.import-surface .upload-zone {
  border: 1px dashed #aebec8;
  border-radius: 3px;
  background: #f8f6ef;
}

.import-surface .upload-zone input,
.import-surface textarea {
  background: var(--desk-control);
  border-color: var(--desk-line);
}

.import-surface .import-guide {
  padding-inline-start: var(--desk-space-6);
  border-inline-start: 1px solid var(--desk-line) !important;
}

.import-surface .import-guide h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 500;
}

.import-surface .import-review-heading {
  margin: 0 0 var(--desk-space-4);
  padding: 0;
  border: 0;
  background: transparent;
}

.import-surface .import-review-panel {
  padding: 0;
}

.import-surface .preview-table th,
.import-surface .preview-table td {
  border-color: var(--desk-line-soft);
}

.import-surface .import-footer {
  padding-inline: 0;
  border-color: var(--desk-line);
  background: transparent;
}

/* Settings: connection sections use space and one quiet leading rule. */
.settings-surface .settings-grid {
  gap: var(--desk-space-6);
}

.settings-surface .connection-card {
  min-width: 0;
  padding: var(--desk-space-4) 0 0;
  border-block-start: 2px solid #597d96 !important;
}

.settings-surface .connection-card:nth-child(2) {
  border-block-start-color: #9a7255 !important;
}

.settings-surface .connection-card .panel-heading {
  padding: 0 0 var(--desk-space-3);
}

.settings-surface .connection-card .panel-heading h2,
.settings-surface .add-business h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.settings-surface .connection-details {
  border-color: var(--desk-line);
}

.settings-surface .add-business {
  margin-block-start: 64px;
  padding: var(--desk-space-5) 0 0;
  border-block-start: 1px solid var(--desk-line) !important;
}

.settings-surface .add-business .stack-form {
  padding-inline: 0;
}

.settings-surface .add-business input {
  background: var(--desk-control);
}

/* Compose: open three-column correspondence desk with no containing box. */
.compose-surface .compose-page-heading {
  margin-block-end: var(--desk-space-5);
}

.compose-surface .compose-page-heading .back {
  margin-block-end: var(--desk-space-2);
}

.compose-surface .compose-draft-state {
  margin-block-start: var(--desk-space-5);
  padding-block: var(--desk-space-1);
  color: var(--desk-muted);
  font: 600 .63rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.compose-surface .compose-workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 294px;
  align-items: stretch;
  min-height: 660px;
}

.compose-surface .compose-template-rail {
  min-width: 0;
  padding: var(--desk-space-5) var(--desk-space-4) var(--desk-space-5) 0;
  border-inline-end: 1px solid var(--desk-line);
  background: transparent;
}

.compose-surface .compose-rail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--desk-space-2);
  padding: 0 var(--desk-space-1) var(--desk-space-3);
}

.compose-surface .compose-rail-heading .eyebrow {
  margin: 0;
}

.compose-surface .compose-rail-heading a {
  font: 500 .65rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}

.compose-surface .compose-template-list {
  display: flex;
  flex-direction: column;
}

.compose-surface .compose-template-item {
  position: relative;
  width: 100%;
  padding: var(--desk-space-3) var(--desk-space-2);
  border: 0;
  border-block-start: 1px solid var(--desk-line-soft);
  background: transparent;
  color: #2e3e42;
  text-align: start;
}

.compose-surface .compose-template-item:hover {
  background: #ffffff70;
}

.compose-surface .compose-template-item.is-selected {
  border-inline-start: 2px solid var(--desk-accent);
  background: #e5edf3;
}

.compose-surface .compose-template-item strong {
  display: block;
  margin-block-end: var(--desk-space-1);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

.compose-surface .compose-template-item span {
  display: block;
  color: var(--desk-muted);
  font-size: .75rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.compose-surface .compose-rail-empty {
  padding: var(--desk-space-4) var(--desk-space-2);
}

.compose-surface .compose-canvas {
  container-name: compose-canvas;
  container-type: inline-size;
  min-width: 0;
  padding: var(--desk-space-5) clamp(30px, 4vw, 70px) var(--desk-space-6);
}

.compose-surface .compose-form.stack-form {
  padding: 0;
  gap: 0;
}

.compose-surface .compose-setup {
  padding: 0 0 var(--desk-space-4);
}

.compose-surface .compose-setup legend,
.compose-surface .compose-field-label,
.compose-surface .template-picker label,
.compose-surface .compose-subject-field label,
.compose-surface .compose-attachments legend {
  color: #50666c;
  font: 600 .62rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.compose-surface .compose-setup-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr);
  gap: var(--desk-space-3);
}

@container compose-canvas (max-width: 650px) {
  .compose-surface .compose-setup-grid {
    grid-template-columns: 1fr;
  }
}

.compose-surface .compose-sheet .from-identity,
.compose-surface .compose-sheet .template-picker select,
.compose-surface .compose-subject-field input {
  border-radius: 2px;
  border-color: var(--desk-line);
  background: var(--desk-control);
}

.compose-surface .compose-sheet .from-identity {
  min-height: 47px;
  height: auto;
}

.compose-surface .compose-sheet .template-picker {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--desk-space-1) var(--desk-space-2);
}

.compose-surface .compose-message-section {
  padding: var(--desk-space-5) 0 0;
}

.compose-surface .compose-subject-field {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: var(--desk-space-2);
  margin-block-end: var(--desk-space-4);
}

.compose-surface .compose-subject-field label {
  margin: 0;
}

.compose-surface .compose-subject-field input {
  min-height: 46px;
}

.compose-surface .compose-sheet .document-editor {
  border-radius: 2px;
  border-color: var(--desk-line);
  background: var(--desk-control);
  box-shadow: none;
}

.compose-surface .compose-sheet .editor-toolbar {
  min-height: 50px;
  gap: var(--desk-space-1);
  padding: var(--desk-space-1) var(--desk-space-2);
  border-color: var(--desk-line);
  background: var(--desk-subtle);
}

.compose-surface .compose-sheet .editor-toolbar button {
  border: 0;
  border-radius: 2px;
  background: transparent;
}

.compose-surface .compose-sheet .editor-toolbar button:hover,
.compose-surface .compose-sheet .editor-toolbar button.ql-active {
  background: #e7eef0;
  color: #1f597f;
}

.compose-surface .compose-sheet .ql-editor {
  min-height: 390px;
  padding: var(--desk-space-4);
  color: #314146;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.75;
}

.compose-surface .compose-attachments {
  margin-block-start: var(--desk-space-4);
  padding: var(--desk-space-3) 0;
  border: 0;
  border-block-start: 1px solid var(--desk-line);
  border-block-end: 1px solid var(--desk-line);
  background: transparent;
}

.compose-surface .compose-attachment-list {
  flex-flow: row wrap;
  gap: var(--desk-space-2);
}

.compose-surface .compose-attachment {
  min-width: 210px;
  border-radius: 2px;
  background: var(--desk-control);
}

.compose-surface .compose-foot {
  padding: var(--desk-space-3) 0 0;
  border: 0;
  background: transparent;
}

.compose-surface .compose-foot strong,
.compose-surface .recipient strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.compose-surface .delivery-rail {
  min-width: 0;
  padding: var(--desk-space-5) 0 var(--desk-space-5) var(--desk-space-4) !important;
  border-inline-start: 1px solid var(--desk-line) !important;
}

.compose-surface .recipient-panel-heading {
  padding-block-end: var(--desk-space-3);
  border-color: var(--desk-line);
}

.compose-surface .recipient-panel-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
}

.compose-surface .recipient-status,
.compose-surface .recipient small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
}

.compose-surface .recipient {
  padding: var(--desk-space-3) 0;
  border-color: var(--desk-line-soft);
}

.compose-surface .recipient-policy {
  margin-block-start: var(--desk-space-4);
}

.compose-surface .delivery-actions {
  display: flex;
  flex-direction: column;
  gap: var(--desk-space-2);
  margin-block-start: var(--desk-space-4);
  padding-block-start: var(--desk-space-4);
  border-block-start: 1px solid var(--desk-line);
}

.compose-surface .delivery-actions .button {
  width: 100%;
  min-height: 52px;
}

.compose-surface .delivery-actions .primary {
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
}

/* Supporting form/results pages inherit the same open canvas. */
.contacts-surface .panel.narrow,
.inbox-surface .panel:not(.history):not(.contact-aside),
.error-page {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contacts-surface .panel.narrow .stack-form,
.error-page {
  padding-inline: 0;
}

.inbox-surface .panel > table {
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  button {
    transition-property: transform, background-color, border-color, color;
    transition-duration: 120ms;
    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  }

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

@media (max-width: 1200px) {
  .main {
    margin-inline-start: 195px;
  }

  .page {
    padding-inline: 24px;
  }

  .compose-surface .compose-workspace {
    grid-template-columns: 226px minmax(0, 1fr) 260px;
  }

  .compose-surface .compose-template-rail {
    padding-inline-end: var(--desk-space-3);
  }

  .compose-surface .compose-canvas {
    padding-inline: var(--desk-space-5);
  }

  .compose-surface .delivery-rail {
    padding-inline-start: var(--desk-space-3) !important;
  }

  .compose-surface .compose-setup-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .main {
    margin-inline-start: 0;
  }

  .page {
    padding: 30px 20px 44px;
  }

  .page-heading {
    margin-block-end: var(--desk-space-5);
  }

  .page-heading h1 {
    font-size: 2.18rem;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .contacts-surface .summary {
    gap: var(--desk-space-4);
  }

  .templates-surface .template-layout,
  .inbox-surface .conversation-layout,
  .import-surface .import-grid,
  .settings-surface .settings-grid {
    grid-template-columns: 1fr;
  }

  .templates-surface .template-library,
  .inbox-surface .contact-aside,
  .import-surface .import-guide {
    padding: 0 0 var(--desk-space-5) !important;
    border-inline-end: 0 !important;
    border-inline-start: 0 !important;
    border-block-end: 1px solid var(--desk-line) !important;
  }

  .compose-surface .compose-workspace {
    display: block;
    min-height: 0;
  }

  .compose-surface .compose-template-rail {
    padding: 0 0 var(--desk-space-4);
    border-inline-end: 0;
    border-block-end: 1px solid var(--desk-line);
  }

  .compose-surface .compose-template-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-padding-inline: 20px;
  }

  .compose-surface .compose-template-item {
    flex: 0 0 min(78%, 260px);
    border-block-start: 1px solid var(--desk-line-soft);
    border-inline-end: 1px solid var(--desk-line-soft);
  }

  .compose-surface .compose-canvas {
    padding: var(--desk-space-5) 0;
  }

  .compose-surface .delivery-rail {
    padding: var(--desk-space-5) 0 0 !important;
    border-inline-start: 0 !important;
    border-block-start: 1px solid var(--desk-line) !important;
  }

  .compose-surface .compose-subject-field {
    grid-template-columns: 1fr;
  }

  .compose-surface .compose-sheet .ql-editor {
    min-height: 300px;
  }
}

@media (max-width: 650px) {
  .contacts-surface .summary {
    grid-template-columns: 1fr;
  }

  .contacts-surface .summary > div {
    justify-content: flex-start;
  }

  .contacts-surface .filters::before {
    display: none;
  }

  .contacts-surface .filters select,
  .contacts-surface .filters .button {
    flex: 1 1 150px;
  }

  .inbox-surface .inbox-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--desk-space-2);
  }

  .inbox-surface .inbox-contact {
    width: auto;
  }

  .inbox-surface .inbox-preview {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .inbox-surface .inbox-meta {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 500px) {
  .page {
    padding: 26px 14px 36px;
  }

  .page-heading h1 {
    font-size: 2rem;
  }

  .page-heading h1::after {
    margin-block-start: var(--desk-space-2);
  }

  .contacts-surface .contact-actions-legend {
    justify-content: flex-start;
  }

  .compose-surface .compose-draft-state {
    display: none;
  }

  .compose-surface .compose-sheet .ql-editor {
    min-height: 260px;
    padding: var(--desk-space-3);
  }

  .compose-surface .compose-attachment-list {
    flex-direction: column;
  }

  .compose-surface .compose-attachment {
    width: 100%;
    min-width: 0;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }
}