/* Spec 037 — /support/ page components (page-scoped sheet).
   The page shell, form fields, errors, and Turnstile box come
   from the global stylesheet (styles.*.css) and the site form
   standard; only the intake-specific pieces live here. */

/* The intake column: one aligned column, editorial width. */
.support-wrap { max-width: 760px; margin: 0 auto; text-align: left; }

/* The global sheet sets display on the form and field components,
   which would otherwise override the hidden attribute the page
   script toggles. On this page, hidden always means hidden
   (spec 037 red-team finding, caught in local proof 2026-10-27:
   the bug form stayed visible under a steering panel). */
[hidden] { display: none !important; }
.support-step { margin-top: 44px; }
.support-step:first-child { margin-top: 0; }
.support-step-head { margin-bottom: 18px; }
.support-step-head h2 { margin: 0 0 8px; }
.support-help { color: var(--muted); line-height: 1.65; margin: 0; }

/* Step 1 — the category list: full-row radio targets. */
.support-cats { display: grid; gap: 10px; }
.support-cat {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer; background: rgba(247, 252, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.support-cat:hover { border-color: rgba(0, 222, 246, 0.45); }
.support-cat:focus-within { border-color: var(--cyan); outline: 2px solid rgba(0, 222, 246, 0.28); outline-offset: 1px; }
.support-cat input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cyan); flex: none; }
.support-cat-text { line-height: 1.5; }
.support-cat-text strong { display: block; font-size: 16.5px; }
.support-cat-text span { color: var(--muted); font-size: 14.5px; }
.support-cat:has(input:checked) { border-color: var(--cyan); background: rgba(0, 222, 246, 0.06); }

/* Step 2 — panels and the form card. */
.support-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; background: rgba(247, 252, 255, 0.02); text-align: left;
}
.support-panel h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.35; }
.support-panel h3:focus { outline: 2px solid var(--cyan); outline-offset: 3px; }
.support-panel p { color: var(--muted); line-height: 1.7; margin: 0 0 1em; }
.support-panel p:last-child { margin-bottom: 0; }
.support-panel ul { color: var(--muted); line-height: 1.7; margin: 0 0 1em; padding-left: 1.4em; }
.support-panel strong { color: var(--ink); }
.support-panel .btn { margin-top: 6px; }

/* The privacy warning block — above the description field, always. */
.support-warning {
  border: 1px solid rgba(0, 222, 246, 0.4); border-radius: 10px;
  background: rgba(0, 222, 246, 0.07);
  padding: 16px 18px; line-height: 1.65; font-size: 15px;
}
.support-warning p { margin: 0 0 0.7em; }
.support-warning p:last-child { margin-bottom: 0; }
.support-warning ul { margin: 0 0 0.7em; padding-left: 1.4em; }
.support-warning li { margin-bottom: 0.3em; }

/* Pattern-check interrupts. */
.support-interrupt {
  border-radius: 10px; padding: 16px 18px; line-height: 1.65; font-size: 15px;
}
.support-interrupt p { margin: 0 0 0.7em; }
.support-interrupt p:last-child { margin-bottom: 0; }
.support-interrupt-hard { border: 1px solid rgba(255, 138, 128, 0.6); background: rgba(255, 90, 80, 0.09); }
.support-interrupt-soft { border: 1px solid rgba(255, 213, 128, 0.55); background: rgba(255, 193, 7, 0.07); }
.support-interrupt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Small print under fields: counters, no-uploads, helpers. */
.support-fine { color: var(--faint); font-size: 13.5px; line-height: 1.55; margin: 0; }
.support-counter { color: var(--faint); font-size: 13px; text-align: right; margin: 0; }
.support-locked { color: var(--muted); font-size: 15px; margin: 0; }
.support-locked strong { color: var(--ink); }
.support-startover { color: var(--faint); font-size: 14.5px; }
.support-startover a { color: var(--muted); }

/* What happens next — the standing strip. */
.support-next {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; background: rgba(8, 31, 50, 0.55); line-height: 1.7;
  color: var(--muted);
}
.support-next strong { color: var(--ink); }
.support-next p { margin: 0; }

/* Triage choices. */
.support-triage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

@media (max-width: 640px) {
  .support-panel { padding: 22px 20px; }
  .support-cat { padding: 14px 15px; }
}