/* signup.css — signup.jsp. Builds on site.css tokens (shared header/footer, .h1, .skip-link). */
.ie-pg.su-pg { background: #fff; }
.su-wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter) 8px; }
.su-hero { padding-top: 26px; }
.su-hero .h1 { font-size: 2rem; font-size: clamp(2rem, 1.4rem + 1.9vw, 2.75rem); }
.su-lead { margin-top: 8px; max-width: 40em; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.su-lead a { color: var(--accent); }
.su-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; margin-top: 24px; }
.su-form { max-width: 580px; }
.su-group { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.su-legend { padding: 0; margin-bottom: 12px; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.su-field { margin-bottom: 14px; }
@media (max-width: 480px) { .su-field { margin-bottom: 12px; } .su-group { margin-bottom: 18px; } .su-hero .h1 { font-size: 1.9rem; } }
.su-field label, .su-label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.su-field input[type=text], .su-field input[type=email], .su-field input[type=password] {
  width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px #c9d1dc; font: inherit; font-size: 16px; color: var(--ink); }
.su-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px rgba(51,102,153,.14); }
.su-field input[aria-invalid=true] { box-shadow: inset 0 0 0 2px #c2413b; }
.su-hint { margin-top: 6px; font-size: .84rem; line-height: 1.45; color: var(--ink-3); }
.su-url { margin-top: 6px; font-size: .88rem; color: var(--ink-2); }
.su-url strong { color: var(--accent-ink); font-weight: 650; }
.su-status { display: flex; align-items: center; gap: 6px; min-height: 0; margin-top: 6px; font-size: .86rem; font-weight: 600; }
.su-status:empty { display: none; }
.su-status--ok { color: #1f7a45; }
.su-status--bad { color: #b3332d; }
.su-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.su-submit { display: block; width: 100%; max-width: 580px; height: 50px; margin-top: 6px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 650; cursor: pointer; }
.su-submit:hover { background: var(--accent-ink); }
.su-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.su-legal { margin-top: 12px; font-size: .84rem; line-height: 1.5; color: var(--ink-3); }
.su-legal a, .su-login a { color: var(--accent); }
.su-login { margin-top: 14px; font-size: .95rem; color: var(--ink-2); }
.su-aside { position: -webkit-sticky; position: sticky; top: 20px; border-radius: var(--r-lg); background: var(--soft); padding: 20px 22px; }
.su-aside h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.su-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; }
.su-steps li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: .92rem; line-height: 1.45; color: var(--ink-2); counter-increment: s; }
.su-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .8rem; font-weight: 650; line-height: 24px; text-align: center; color: var(--accent-ink); }
.su-steps strong { color: var(--ink); }
.su-tips { margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--line); font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.su-tips p + p { margin-top: 8px; }
.su-err-list { margin: 6px 0 0 18px; padding: 0; }
.su-fielderr { margin-top: 6px; font-size: .86rem; font-weight: 600; color: #b3332d; }
@media (max-width: 860px) {
  .su-layout { grid-template-columns: 1fr; gap: 22px; }
  .su-aside { position: static; padding: 18px 20px; }
  .su-hero { padding-top: 18px; }
}
@media (max-width: 340px) {
  .su-two { grid-template-columns: 1fr; }
  .su-steps li { margin-bottom: 8px; }
}

/* alerts + notes */
.su-alert { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #fff4f2; box-shadow: inset 0 0 0 1px #f0c9c3; color: #7d2a22; font-size: .93rem; line-height: 1.45; max-width: 580px; }
.su-alert strong { color: #6b1f18; }
.su-alert a { color: #7d2a22; text-decoration: underline; }
.su-err-list { margin: 6px 0 0 18px; padding: 0; }
.su-err-list li { margin-top: 2px; }
.su-note { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: .92rem; max-width: 580px; }
.su-hint--tight { margin-top: -6px; }
.su-fielderr + .su-hint--tight { margin-top: 4px; }
.su-two + .su-fielderr { margin-top: -6px; margin-bottom: 8px; }
/* username availability (classes set by the page script) */
.username-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .86rem; font-weight: 600; color: var(--ink-3); }
.username-status:empty { display: none; }
.username-status.available { color: #1f7a45; }
.username-status.taken { color: #b3332d; }
.username-status.unknown { color: var(--ink-2); font-weight: 500; }
.username-status-icon { flex: none; }
/* Turnstile widget wrapper (from <ie:turnstile>) */
.signup-turnstile { margin-top: 2px; max-width: 100%; }
.signup-turnstile .cf-turnstile { display: inline-block; }
#su_turnstile:focus { outline: none; }
input.su-submit { -webkit-appearance: none; appearance: none; }
input.su-submit:disabled { opacity: .7; cursor: default; }

/* flexbox gap fallback (Safari < 14.1, Chrome < 84, Samsung < 14); skipped by current browsers */
@supports not (inset: 0) {
  .su-status > svg:first-child, .username-status > svg:first-child { margin-right: 6px; }
}