/* ==================================================================================================
 * contact.css — /contact and /contact/thanks in Candidate B ("the living board").
 * Uses b-foundation.css tokens (--b-*) and primitives (.b-btn, .b-board, .b-wash, .b-tab) only.
 *
 *   /contact  — wash head; [form | help board] from 1024. The form is light, ruled, unboxed-feeling
 *               (one hairline panel); the ONE dark object is the "How we can help" board of topic rows.
 *               Red: once — "Send message". Required asterisks are navy here: red is spent.
 *   /thanks   — the ticket number is the dark object, set like a departure-board flap.
 *
 * Width: .container (1200), not .container--prose — /contact is a two-column form plus a scannable
 * support directory; at 820 the directory would fall under the form and lose the "pick your topic
 * before you type" affordance. /contact/thanks — just reading — uses .container--narrow.
 * ================================================================================================= */

/* ---------- head (shared by both pages) ---------- */
.ct-head { padding: 28px 0 32px; border-bottom: var(--b-hair); }
.ct-crumb { margin-bottom: 18px; font-size: var(--b-t-md); }
.ct-crumb a { color: var(--b-ink-2); }
.ct-eyebrow.eyebrow { font: 700 var(--b-t-sm)/1 var(--b-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--b-ink-3); margin: 0 0 14px; }
.ct-head h1 { margin: 0; font-size: var(--b-t-h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--b-navy); }
.ct-lead { margin: 14px 0 0; max-width: 60ch; font-size: var(--b-t-body); line-height: 1.6; color: var(--b-ink-2); }
@media (min-width: 768px) { .ct-head { padding: 40px 0 44px; } .ct-lead { font-size: var(--b-t-lead); } }

.ct-body { padding: 32px 0 56px; }
@media (min-width: 768px) { .ct-body { padding: 48px 0 72px; } }

/* ---------- layout ---------- */
.contact-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; } }
.contact-main { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* ---------- the form ---------- */
.contact-form { border: var(--b-hair); border-radius: var(--b-r); background: #fff; padding: 20px 16px; }
@media (min-width: 640px) { .contact-form { padding: 28px; } }
.contact__h2 { margin: 0 0 18px; font-size: var(--b-t-h2); font-weight: 800; letter-spacing: -.026em; color: var(--b-navy); }
.contact-form .form { display: grid; gap: 18px; }
.contact-form .form-row { gap: 18px; }
.contact-form .field label { font-size: var(--b-t-base); font-weight: 600; color: var(--b-ink); }
.contact-form .req { color: var(--b-navy); }
.contact-form .input {
  min-height: 48px; padding: 0 14px; border: var(--b-hair-2); border-radius: var(--b-r-md);
  background: #fff; color: var(--b-ink); font: 400 var(--b-t-body)/1.4 var(--b-sans);
  transition: border-color .16s var(--b-e), box-shadow .16s var(--b-e);
}
.contact-form textarea.input { padding: 12px 14px; line-height: 1.55; }
.contact-form .input::placeholder { color: var(--b-ink-3); }
.contact-form .input:hover { border-color: #AFC0D4; }
.contact-form .input:focus { outline: none; border-color: var(--b-navy); box-shadow: 0 0 0 3px rgba(31,58,95,.16); }
.contact-form .input:focus-visible { outline: 2px solid var(--b-navy); outline-offset: 1px; }
.contact-form .input[readonly] { background: var(--b-bg-2); color: var(--b-ink-2); }
.contact-form .input[aria-invalid="true"] { border-color: var(--kds-danger); }
.contact-form .hint { color: var(--b-ink-3); }
.contact__message { min-height: 168px; resize: vertical; }
.contact__account { margin: 0; border: var(--b-hair-2); border-radius: var(--b-r-md); min-height: var(--b-tap); align-items: flex-start; }
.contact__account input { margin-top: 2px; }
.contact__account span { font-size: var(--b-t-base); color: var(--b-ink-2); }
.contact__account strong { color: var(--b-ink); }
.contact-form .form-actions { gap: 12px 16px; padding-top: 18px; border-top: var(--b-hair); margin-top: 4px; }
.contact-form .form-actions .muted { color: var(--b-ink-3); }
@media (max-width: 559px) { .contact-form .form-actions .b-btn { width: 100%; } }

/* honeypot: off-screen, not display:none (some bots skip hidden inputs) */
.hp { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* the error summary keeps danger colours — an error is exactly where red carries meaning */
.contact-alert { background: var(--cc-red-100); border: 1px solid #f3b1b1; color: #8a1b1b; border-radius: var(--b-r-md); padding: 12px 16px; margin-bottom: 18px; }
.contact-alert p { margin: 0 0 6px; }
.contact-alert ul { margin: 0; padding-left: 20px; }
.contact-alert a { color: inherit; }
.contact-alert li { margin: 0 0 6px; line-height: 1.45; }

/* ---------- the promise: a quiet ruled note under the form ---------- */
.contact__promise { padding: 18px 20px; border: var(--b-hair); border-radius: var(--b-r); background: var(--b-bg-2); }
.contact__promise h3 { margin: 0 0 6px; font-size: var(--b-t-h3); color: var(--b-navy); }
.contact__promise p { margin: 0 0 8px; font-size: var(--b-t-base); line-height: 1.55; color: var(--b-ink-2); }
.contact__promise p strong { color: var(--b-ink); }
.contact__promise p:last-child { margin-bottom: 0; }

/* ---------- the help board: the one dark object ---------- */
.contact-side.b-board { min-width: 0; }
@media (min-width: 1024px) { .contact-side.b-board { position: sticky; top: calc(var(--cc-header-h) + 24px); } }
.contact-side .b-board__h.contact__h2 { margin: 0; font-size: var(--b-t-ui); font-weight: 700; letter-spacing: -.008em; color: var(--b-bd-fg); }
.help-cards { list-style: none; margin: 0; padding: 0; }
.help-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; transition: background .16s var(--b-e); }
.help-card + .help-card { border-top: var(--b-hair-on); }
.help-card:hover { background: var(--b-bd-2); }
/* the leading-edge keyline from the job row: the row lights up on its own edge */
.help-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--b-bd-fg-2); transform: scaleY(0); opacity: 0; transition: transform .2s var(--b-e), opacity .2s var(--b-e); }
.help-card:hover::before, .help-card:focus-within::before { transform: scaleY(1); opacity: .5; }
.help-card__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--b-r-md); background: rgba(255,255,255,.06); border: 1px solid var(--b-bd-line-2); color: var(--b-bd-fg-2); }
.help-card__icon svg { display: block; }
.help-card > div { min-width: 0; }
.help-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.help-card__head h3 { margin: 0; font: 600 var(--b-t-body)/1.3 var(--b-sans); letter-spacing: -.011em; color: var(--b-bd-fg); }
/* "Most common" — the words carry the emphasis, never the tint alone. Teal is the arrangement-tag
   treatment from the board (.b-tagi), not an audience use. */
.help-card__badge.badge { font-size: var(--b-t-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #BFE6EA; background: rgba(53,168,176,.14); border: 1px solid rgba(53,168,176,.45); padding: 2px 7px; border-radius: 5px; }
.help-card p { margin: 0 0 2px; font-size: var(--b-t-base); line-height: 1.55; color: var(--b-bd-fg-2); }
.help-card p strong { color: var(--b-bd-fg); font-weight: 600; }
.help-card__link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--b-tap); font-weight: 600; font-size: var(--b-t-base); color: var(--b-bd-fg); text-decoration: none; }
.help-card__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .help-card { padding: 18px 24px; } .contact-side .b-board__bar { padding-left: 24px; padding-right: 24px; } }

/* ---------- thanks ---------- */
.ct-narrow { display: grid; gap: 20px; }
.contact-ticket { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.contact-ticket__l { font: 600 var(--b-t-xs)/1 var(--b-sans); letter-spacing: var(--b-track-caps); text-transform: uppercase; color: var(--b-bd-fg-3); }
.contact-ticket__n { font: 800 clamp(1.75rem, 6vw, 2.25rem)/1 var(--b-disp); letter-spacing: -.01em; color: var(--b-bd-fg); }
.contact-thanks__ref { color: var(--b-navy); font-family: var(--b-disp); }
.contact-thanks { padding: 24px; border: var(--b-hair); border-radius: var(--b-r); background: #fff; }
.contact-thanks p { margin: 0 0 10px; color: var(--b-ink-2); line-height: 1.6; }
.contact-thanks p strong { color: var(--b-ink); }
.contact-thanks__check { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--cc-green-100); color: #2f5d11; }
.contact-thanks .form-actions { margin-top: 18px; padding-top: 18px; border-top: var(--b-hair); }
@media (max-width: 479px) { .contact-thanks .form-actions .b-btn { flex: 1 1 auto; } }