/* The multi-page sign-up flow (/sign-up/*). Loaded after the mirrored Netiva
   stylesheets, tokens.css and site.css. Every value is a token from
   tokens.css (--az-res-*) or the mirrored site (--hx-*, --az-state-*);
   the column width is the one local custom property. */

.az-su-col { --az-su-col: 32.5rem; max-width: var(--az-su-col); margin-inline: auto; display: flex; flex-direction: column; gap: var(--az-res-gap); }
.az-su-card { display: flex; flex-direction: column; gap: var(--az-res-gap); }
.az-su-card > form { display: flex; flex-direction: column; gap: var(--az-res-gap); }
.az-su-card > form > .mt-7 { margin-top: 0; }
.az-su-fine { display: flex; flex-direction: column; gap: var(--az-res-gap-s); }
.az-su-fine p, .az-su-links p { margin: 0; }
.az-su-links { display: flex; flex-direction: column; gap: var(--az-res-gap-s); }

/* Role chooser: three link cards, one column. */
.az-su-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--az-res-gap-m); }
.az-su-role { flex-direction: row; align-items: center; gap: var(--az-res-gap-m); min-height: var(--az-res-tap-min); padding: var(--az-res-gap) var(--az-res-gap); text-decoration: none; }
.az-su-role-text { display: flex; flex-direction: column; gap: var(--az-res-gap-xs); flex: 1 1 auto; min-width: 0; }
.az-su-role-go { width: var(--az-res-icon-s); height: var(--az-res-icon-s); flex: none; color: var(--hx-blue-on-light); }

/* StepProgress. */
.az-su-progress { display: flex; flex-direction: column; gap: var(--az-res-gap-s); }
.az-su-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--az-res-gap-s); }
.az-su-progress-head p, .az-su-progress-note { margin: 0; }
.az-su-progress-bar { display: flex; gap: var(--az-res-gap-xs); }
.az-su-progress-bar span { flex: 1 1 0; height: var(--az-res-progress-h); border-radius: var(--az-res-radius-pill); background: var(--az-res-border); }
.az-su-progress-bar span.is-on { background: var(--hx-blue-on-light); }

/* Callouts: info, success, warning, error. The icon carries the tone too. */
.az-su-callout { display: flex; gap: var(--az-res-gap-m); align-items: flex-start; padding: var(--az-res-gap-m) var(--az-res-gap); border: var(--az-res-hairline) solid var(--az-res-reps-border); border-radius: var(--az-res-radius-sm); background: var(--az-res-reps-tint); color: var(--az-res-ink); font-size: var(--az-res-size-small); line-height: var(--az-res-prose-lh); }
.az-su-callout[hidden] { display: none; }
.az-su-callout-icon { width: var(--az-res-icon-s); height: var(--az-res-icon-s); flex: none; margin-top: var(--az-res-gap-xs); color: var(--hx-blue-on-light); }
.az-su-callout-body { display: flex; flex-direction: column; gap: var(--az-res-gap-s); min-width: 0; }
.az-su-callout-body p { margin: 0; }
.az-su-callout-title { font-weight: var(--az-res-strong-weight); }
.az-su-callout--info .az-su-callout-icon { color: var(--hx-blue-on-light); }
.az-su-callout--success { border-color: color-mix(in srgb, var(--hx-state-success-on-light) 40%, transparent); background: color-mix(in srgb, var(--hx-state-success-on-light) 8%, var(--hx-canvas-light)); }
.az-su-callout--success .az-su-callout-icon { color: var(--hx-state-success-on-light); }
.az-su-callout--warning { border-color: color-mix(in srgb, var(--hx-state-watch-on-light) 45%, transparent); background: var(--az-state-watch-surface); }
.az-su-callout--warning .az-su-callout-icon { color: var(--hx-state-watch-on-light); }
.az-su-callout--error { border-color: color-mix(in srgb, var(--hx-state-critical-on-light) 45%, transparent); background: color-mix(in srgb, var(--hx-state-critical-on-light) 6%, var(--hx-canvas-light)); }
.az-su-callout--error .az-su-callout-icon { color: var(--hx-state-critical-on-light); }
.az-su-summary-list { margin: 0; padding-left: var(--az-res-gap); display: flex; flex-direction: column; gap: var(--az-res-gap-xs); }
.az-su-summary-list a { color: var(--hx-state-critical-on-light); font-weight: var(--az-res-strong-weight); text-decoration: underline; text-underline-offset: var(--az-res-rule-thin); }

/* Checkbox row inside the coverage notice. */
.az-su-check { display: flex; align-items: center; gap: var(--az-res-gap-s); min-height: var(--az-res-tap-min); cursor: pointer; font-weight: var(--az-res-strong-weight); }
.az-su-check input { width: var(--az-res-icon-s); height: var(--az-res-icon-s); accent-color: var(--hx-blue-on-light); flex: none; }

/* Chips and radio cards: 44px targets; a tick or a filled dot shows the
   choice without relying on colour. */
.az-su-chip { display: inline-flex; align-items: center; gap: var(--az-res-gap-xs); min-height: var(--az-res-tap-min); }
.az-su-chip[hidden] { display: none; }
.az-su-tick { display: none; width: var(--az-res-icon-xs); height: var(--az-res-icon-xs); flex: none; }
.az-su-chip:has(input:checked) .az-su-tick { display: inline-block; }
.az-su-radio { flex-direction: row; align-items: center; gap: var(--az-res-gap-s); min-height: var(--az-res-tap-min); }
.az-su-dot { width: var(--az-res-icon-s); height: var(--az-res-icon-s); flex: none; border-radius: var(--az-res-radius-pill); border: var(--az-res-stroke) solid currentColor; opacity: .6; }
.az-su-radio:has(input:checked) .az-su-dot { opacity: 1; background: radial-gradient(circle, currentColor 0 40%, transparent 45%); }
.az-su-more { align-self: flex-start; margin-top: var(--az-res-gap-s); }
.az-su-textarea { min-height: calc(var(--az-res-tap-min) * 2); resize: vertical; }

.az-su-actions { display: flex; flex-direction: column; align-items: center; gap: var(--az-res-gap-s); }
.az-su-back { min-height: var(--az-res-tap-min); }

/* The "request received" timeline. */
.az-su-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--az-res-gap); }
.az-su-step { display: flex; gap: var(--az-res-gap-m); align-items: flex-start; }
.az-su-step[hidden] { display: none; }
.az-su-step-mark { width: var(--az-res-icon); height: var(--az-res-icon); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--az-res-radius-pill); border: var(--az-res-stroke) solid var(--az-res-border-strong); }
.az-su-step-icon { width: var(--az-res-icon-xs); height: var(--az-res-icon-xs); }
.az-su-step--done .az-su-step-mark { border-color: var(--hx-state-success-on-light); background: var(--hx-state-success-on-light); color: var(--hx-canvas-light); }
.az-su-step--current .az-su-step-mark { border-color: var(--hx-blue-on-light); background: radial-gradient(circle, var(--hx-blue-on-light) 0 35%, transparent 40%); }
.az-su-step--warning .az-su-step-mark { border-color: var(--hx-state-watch-on-light); color: var(--hx-state-watch-on-light); }
.az-su-step-text { display: flex; flex-direction: column; gap: var(--az-res-gap-xs); color: var(--az-res-ink); }
.az-su-step-title { font-weight: var(--az-res-strong-weight); }
.az-su-step--upcoming .az-su-step-title { color: var(--az-res-ink-muted); }