/* ==========================================================================
   ANBOOST UI — support pages: the signed-out sign-in for /support-tickets (body.au-support, on public-next.css)
   and the "ticket sent" page (body.au-acct, on account-pages.css). Builds on anboost-ui.css.
   ========================================================================== */

/* ---------- Sign-in (signed out) ---------- */
/* One centred column for the hero and the card: the page's .au-wrap (1200px, content at its inline start) is narrowed to
   the card's width, so the content sits in the middle of the viewport in both directions. */
.au-support .au-pb-hero > .au-wrap, .au-support .au-si-body { max-width: calc(560px + 2 * var(--gutter)); }
.au-support .au-si-title { max-width: 22ch; }
.au-support .au-si-body { padding-bottom: clamp(64px, 8vw, 110px); }
.au-support .au-si-card__title { margin-bottom: 18px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.35; }
.au-support .au-si-card__hint { margin: -12px 0 18px; }
.au-support .au-si-form { display: grid; gap: 14px; }
.au-support .au-si-form .au-field + .au-field { margin-top: 0; }
.au-support .au-si-form .au-alert:focus { outline: none; }
.au-support .au-si-form .au-input[aria-invalid="true"] { border-color: #D92D20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .1); }
.au-support .au-si-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; }
.au-support .au-si-row .au-check { align-items: center; padding-block: 0; }
.au-support .au-si-row .au-check input { margin: 0; }
.au-support .au-si-form .au-btn { margin-top: 4px; }
.au-support .au-si-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14.5px; }
.au-support .au-si-alt .au-link { gap: 6px; }
.au-support .au-si-alt .au-link .au-i { font-size: 16px; }

/* ---------- Ticket sent (signed in) ---------- */
.au-acct .au-ts-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.au-acct .au-ts-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #ECFDF3; color: #067647; font-size: 22px; }
.au-acct .au-ts-card .au-kv dd { display: flex; justify-content: flex-end; }
.au-acct .au-ts-card .au-form-actions { margin-top: 22px; }

/* ---------- New ticket (signed in): the hero takes the form column's width (.au-form-page, 880px) ---------- */
.au-acct:has(#supportTicketForm) .au-page-hero > .au-wrap { max-width: 880px; }

@media (max-width: 720px) {
    .au-acct .au-ts-card .au-form-actions .au-btn { flex: 1 1 auto; }
}