/* support — the public help page + intake form. Shares the lg-* legal layout with
   privacy/terms (duplicated per page scoping, same as those pages do), and adds the sup-*
   form. Semantic tokens only: every colour here re-binds in dark mode. */

[data-cmp="support"] .lg, [data-cmp="support"].lg { background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base)); }
[data-cmp="support"] .lg-head, [data-cmp="support"].lg-head { background: var(--surface-base); border-bottom: 1px solid var(--border-default); }
[data-cmp="support"] .lg-head-inner, [data-cmp="support"].lg-head-inner { max-width: 48rem; margin-inline: auto; padding: var(--space-6); }
[data-cmp="support"] .lg-head-inner h1, [data-cmp="support"].lg-head-inner h1 { margin: 0; font-size: 1.875rem; font-weight: 700; }
[data-cmp="support"] .lg-head-inner p, [data-cmp="support"].lg-head-inner p { margin: var(--space-2) 0 0; color: var(--text-muted); }
/* Mobile-first padding. The legal pages' prose padding (space-6 page + space-8 card) plus a
   NESTED form card (space-5) stacks 76px of gutter per side: on a 390px screen that left a
   234px content column — 39% of the viewport spent on padding, with the form crammed into
   what was left. Base is tightened for phones; the roomier legal-page look is restored at
   >=768px in the media block at the bottom. */
[data-cmp="support"] .lg-main, [data-cmp="support"].lg-main { max-width: 48rem; margin-inline: auto; padding: var(--space-8) var(--space-4); }
[data-cmp="support"] .lg-card, [data-cmp="support"].lg-card { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--asio-shadow-soft); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-8); }
[data-cmp="support"] .lg-card section h2, [data-cmp="support"].lg-card section h2 { margin: 0 0 var(--space-3); font-size: 1.25rem; font-weight: 700; }
[data-cmp="support"] .lg-card section h3, [data-cmp="support"].lg-card section h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.125rem; font-weight: 600; }
[data-cmp="support"] .lg-card section p, [data-cmp="support"].lg-card section p { margin: 0 0 var(--space-3); line-height: 1.7; color: var(--text-secondary); }
[data-cmp="support"] .lg-card section p:last-child, [data-cmp="support"].lg-card section p:last-child { margin-bottom: 0; }
/* space-2 rather than the legal pages' space-1: this list is a checklist someone SCANS while
   something is broken, not a wall of policy prose. Deliberate, and the only spacing deviation
   from the /privacy + /terms factura. */
[data-cmp="support"] .lg-card section ul, [data-cmp="support"].lg-card section ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-2); color: var(--text-secondary); line-height: 1.7; list-style: disc; }
/* Links use --accent-active (#12873d, 4.61:1 on white), NOT --accent (#21c45d, 2.30:1 —
   below the WCAG AA 4.5:1 floor for body text). Same brand green, one stop darker: it is
   the theme's own pressed-state token, so this stays in-vocabulary and needs no brand call.
   ⚠ The bright --accent fails contrast SITE-WIDE (the shell nav CTA, the cookie banner,
   and every link on /privacy + /terms measure 2.30:1) — that is a pre-existing theme-level
   issue, flagged separately; this page just refuses to add to it. */
/* overflow-wrap: long unbroken strings here are email addresses — let them break rather than
   push the prose column wide on a narrow phone. */
[data-cmp="support"] .lg-card a, [data-cmp="support"].lg-card a { color: var(--accent-active); text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { [data-cmp="support"] .lg-card a:hover, [data-cmp="support"].lg-card a:hover { color: var(--accent-hover); }}

/* ── the intake card ───────────────────────────────────────────────────────── */

/* On phones the inner card is FLAT — it sits inside .lg-card, so a second border + padding
   only narrows the form. It becomes a real card again at >=768px. */
[data-cmp="support"] .sup-card, [data-cmp="support"].sup-card { background: none; border: 0; border-radius: 0; padding: 0; }

/* position:relative so the off-screen honeypot below is positioned against THIS form
   rather than escaping to the nearest positioned ancestor. */
/* Between-field spacing must clearly EXCEED within-field spacing or the grouping reads
   backwards: at gap space-5 the "We only use this to answer you." hint sat 24px under its
   own input but just 20px above the NEXT field's label, so it visually belonged to the
   wrong field. space-7 restores the proximity order. */
[data-cmp="support"] .sup-form, [data-cmp="support"].sup-form { position: relative; display: flex; flex-direction: column; gap: var(--space-7); }
[data-cmp="support"] .sup-field, [data-cmp="support"].sup-field { display: flex; flex-direction: column; gap: var(--space-2); }

[data-cmp="support"] .sup-label, [data-cmp="support"].sup-label { font-size: var(--font-sm); font-weight: 700; color: var(--text-primary); }
[data-cmp="support"] .sup-label span, [data-cmp="support"].sup-label span { color: var(--danger); }

[data-cmp="support"] .sup-form input, [data-cmp="support"].sup-form input, [data-cmp="support"] .sup-form select, [data-cmp="support"].sup-form select, [data-cmp="support"] .sup-form textarea, [data-cmp="support"].sup-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;                              /* tap target */
  padding: var(--space-3);
  font: inherit;
  font-size: max(16px, var(--font-base));        /* < 16px makes iOS Safari zoom on focus */
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
[data-cmp="support"] .sup-form textarea, [data-cmp="support"].sup-form textarea { resize: vertical; line-height: 1.6; min-height: 140px; }
[data-cmp="support"] .sup-form select, [data-cmp="support"].sup-form select { appearance: none; padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-5) center, right var(--space-4) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; }

/* --accent-active, not --accent: a focus ring is a non-text UI indicator and needs 3:1;
   the bright accent measures 2.30:1 on white and would fail that too. */
[data-cmp="support"] .sup-form input:focus-visible, [data-cmp="support"].sup-form input:focus-visible, [data-cmp="support"] .sup-form select:focus-visible, [data-cmp="support"].sup-form select:focus-visible, [data-cmp="support"] .sup-form textarea:focus-visible, [data-cmp="support"].sup-form textarea:focus-visible {
  outline: 2px solid var(--accent-active);
  outline-offset: 1px;
  border-color: var(--accent-active);
}

/* able-validator sets data-invalid on the watched input and unhides its own .aval-error;
   the blueprint ships no CSS of its own, so both live here. */
[data-cmp="support"] .sup-form [data-invalid="true"], [data-cmp="support"].sup-form [data-invalid="true"] { border-color: var(--danger); }
[data-cmp="support"] .sup-form .aval-error, [data-cmp="support"].sup-form .aval-error { margin: 0; color: var(--danger); font-size: var(--font-sm); line-height: 1.5; }
[data-cmp="support"] .sup-form .aval-error[hidden], [data-cmp="support"].sup-form .aval-error[hidden] { display: none; }

[data-cmp="support"] .sup-hint, [data-cmp="support"].sup-hint { margin: 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.5; }

/* honeypot: out of view and out of the tab order, still in the DOM for bots */
[data-cmp="support"] .sup-hp, [data-cmp="support"].sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The theme's .asio-btn--hero paints background:var(--accent) with white text — 2.30:1,
   below AA. Repaint with the theme's own darker accent (4.61:1) so the page's primary CTA
   is legible. Page CSS is scoped [data-cmp="support"] (0,2,0) so it wins over the theme
   class (0,1,0) without !important. */
[data-cmp="support"] .sup-submit, [data-cmp="support"].sup-submit { width: 100%; background: var(--accent-active); color: var(--on-accent); }
/* Hover goes DARKER, never lighter: --accent-hover is a lighter green (3.33:1) and would
   drop the CTA back under AA on hover. */
@media (hover: hover) and (pointer: fine) {
  [data-cmp="support"] .sup-submit:hover, [data-cmp="support"].sup-submit:hover { background: color-mix(in srgb, var(--accent-active) 88%, black); }}
[data-cmp="support"] .sup-fine, [data-cmp="support"].sup-fine { margin: 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.6; text-align: center; }

[data-cmp="support"] .sup-thanks, [data-cmp="support"].sup-thanks { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); padding: var(--space-6) var(--space-2); }
[data-cmp="support"] .sup-thanks svg, [data-cmp="support"].sup-thanks svg { color: var(--accent-active); }   /* --success is 2.54:1 — under the 3:1 non-text floor */
[data-cmp="support"] .sup-thanks h3, [data-cmp="support"].sup-thanks h3 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
[data-cmp="support"] .sup-thanks p, [data-cmp="support"].sup-thanks p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
[data-cmp="support"] .sup-thanks-alt, [data-cmp="support"].sup-thanks-alt { font-size: var(--font-sm); color: var(--text-muted); }

@media (min-width: 768px) {
  [data-cmp="support"] .lg-head-inner, [data-cmp="support"].lg-head-inner { padding: var(--space-8) var(--space-6); }
  [data-cmp="support"] .lg-head-inner h1, [data-cmp="support"].lg-head-inner h1 { font-size: 2.25rem; }
  /* restore the legal-page proportions + the nested form card once there is room for them */
  [data-cmp="support"] .lg-main, [data-cmp="support"].lg-main { padding: var(--space-12) var(--space-6); }
  [data-cmp="support"] .lg-card, [data-cmp="support"].lg-card { padding: var(--space-8); }
  [data-cmp="support"] .sup-card, [data-cmp="support"].sup-card { background: var(--surface-base); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-6); }
  [data-cmp="support"] .sup-submit, [data-cmp="support"].sup-submit { width: auto; align-self: flex-start; min-width: 14rem; }
  [data-cmp="support"] .sup-fine, [data-cmp="support"].sup-fine { text-align: left; }}