/* Support page (/support/): the Stop trading now box, FAQ groups, the no-secrets warning and
   the contact form, including the Worker's error re-render of the same page. Tokens, details/
   summary and .button come from site.css. Control borders use --control-border (L 0.62, 3:1
   against the page, WCAG 1.4.11); targets are at least 24x24 px (WCAG 2.5.8). */

/* Cap the children, not the container, so the column stays left-aligned like .prose pages. */
.support > * {
  max-width: 72ch;
}

.support h2 {
  margin: 48px 0 16px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
}

.support h3 {
  margin: 32px 0 4px;
  font-size: 17px;
  font-weight: 600;
}

/* Stop trading now: the mockup's kill-switch red tint. Ink on L 0.95 is well above 4.5:1,
   and so is the link blue (about 5:1). */
.stop-box {
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid oklch(0.85 0.06 28);
  border-radius: 14px;
  background: oklch(0.95 0.035 28);
}

.stop-box h2 {
  margin-top: 0;
  color: oklch(0.3 0.06 28);
}

.stop-box ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.stop-box li {
  margin-bottom: 10px;
}

.support details p {
  margin: 0 0 16px;
}

/* Amber, like the legal DRAFT banner: a warning, not an error. */
.no-secrets {
  padding: 14px 18px;
  border-left: 4px solid oklch(0.62 0.12 75);
  background: oklch(0.95 0.05 85);
}

form .field {
  margin: 0 0 20px;
}

form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

form input,
form select,
form textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

form textarea {
  resize: vertical;
}

button.button {
  font-family: inherit;
  cursor: pointer;
}

.form-help {
  font-size: 14px;
  color: var(--muted);
}

/* Shown only on the Worker's re-render; :not([hidden]) keeps the hidden attribute in force. */
#contact-error:not([hidden]) {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid oklch(0.5 0.19 28);
  background: oklch(0.96 0.03 28);
  color: oklch(0.35 0.1 28);
  font-weight: 500;
}

/* Honeypot: off-screen for people (aria-hidden, tabindex -1), still in the form for bots. */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}