/* Contact form and request thread (src/pages/support.js). Tokens only.
   Mobile first: the base rules are the 360px layout. */

.support-page {
  padding-block: var(--space-16) var(--space-32);
  min-width: 0;
}

.support-page h1,
.support__facts,
.support__body {
  overflow-wrap: anywhere;
}

.support__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
  margin: 0;
  color: var(--c-ink-2);
}

.support__form,
.support__reply {
  position: relative;
  min-width: 0;
}

.support__form .c-btn,
.support__reply .c-btn {
  align-self: flex-start;
  max-width: 100%;
}

/* Same clip pattern as .auth__hp (docs/specs/support.md §6). */
.support__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.support__thread {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.support__message {
  min-width: 0;
  padding-block: var(--space-12);
  border-top: var(--border-hairline) solid var(--c-line);
}

.support__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin: 0;
}

.support__body {
  margin: var(--space-6) 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.support__message--system,
.support__message--system .support__byline {
  color: var(--c-ink-3);
}

.support__alert,
.support__status,
.support__note {
  margin: 0;
}

.support__alert,
.support__status {
  padding: var(--space-12);
  border-radius: var(--radius-m);
  background: var(--c-fill);
}

.support__alert {
  border: var(--border-hairline) solid var(--c-line-strong);
}

@media (min-width: 720px) {
  .support-page {
    padding-block: var(--space-32) var(--space-48);
  }
}