/* Public auth pages (apply, sign in, reset). Loaded AFTER base.css so the slim field
   sizing wins. One file so the three pages can never drift apart.
   Fields are 34px tall on desktop with a hairline border; phones get 44px and a 16px
   font because iOS zooms the page when a field's text is smaller than that. */

/* ── Shared page frame ── */
.auth-wrap { max-width: 440px; margin: 0 auto; padding: 48px 16px 64px; }
.auth-head, .ap-head { text-align: center; }
.auth-head { margin-bottom: 20px; }
.auth-head .brand, .ap-head .brand { display: inline-block; margin-bottom: 18px; text-decoration: none; }
.foot-links { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }

.alert { border-radius: 9px; padding: 11px 13px; font-size: 13.5px; margin: 0 0 14px; }
.alert.err { background: var(--bad-soft); color: var(--bad); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.info { background: var(--info-soft); color: var(--info); }
.alert a { font-weight: 600; }

/* ── Slim fields ── */
.auth-wrap .label, .ap .label { font: 600 12px/1.3 var(--font); color: var(--ink-2); margin: 13px 0 4px; }
.auth-wrap .input, .auth-wrap .select, .auth-wrap .textarea,
.ap .input, .ap .select, .ap .textarea {
  padding: 6px 10px; border-radius: 7px; border-color: var(--line);
  font-size: 14px; line-height: 1.35;
}
.auth-wrap .input, .auth-wrap .select, .ap .input, .ap .select { height: 34px; }
.auth-wrap .textarea, .ap .textarea { height: auto; padding: 8px 10px; }
.auth-wrap .input:hover, .auth-wrap .select:hover, .auth-wrap .textarea:hover,
.ap .input:hover, .ap .select:hover, .ap .textarea:hover { border-color: var(--line-2); }
.auth-wrap .hint, .ap .hint { font-size: 12px; margin-top: 3px; }
.auth-wrap .btn-block, .ap .btn-block { min-height: 40px; border-radius: 9px; }

@media (max-width: 640px) {
  .auth-wrap .input, .auth-wrap .select, .auth-wrap .textarea,
  .ap .input, .ap .select, .ap .textarea { font-size: 16px; padding: 10px 12px; }
  .auth-wrap .input, .auth-wrap .select, .ap .input, .ap .select { height: 44px; }
  .auth-wrap .btn-block, .ap .btn-block { min-height: 46px; }
}

/* ── Apply page ── */
.ap { max-width: 620px; margin: 0 auto; padding: 0 20px 40px; }
.ap-head { padding: 38px 0 4px; }
.ap-head h1 { font-size: clamp(24px, 4.2vw, 30px); letter-spacing: -.025em; margin: 0 0 8px; }
.ap-head p { color: var(--muted); max-width: 44ch; margin: 0 auto; font-size: 14px; }

/* Step rail: shows where you are in a long form without splitting it into pages. */
.ap-rail { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.ap-fill { height: 2px; width: 0; background: var(--accent); transition: width .25s ease; }
.ap-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 6px 12px; }
.ap-step { border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 5px 10px;
           font: 600 12px/1 var(--font); color: var(--muted); white-space: nowrap; }
.ap-step:hover, .ap-step.on { color: var(--ink); background: var(--hover); }
.ap-step .dot { display: inline-block; width: 5px; height: 5px; border-radius: 999px;
                background: var(--line-2); margin-right: 6px; vertical-align: 1px; }
.ap-step.on .dot, .ap-step.done .dot { background: var(--accent); }

/* Section head: numbered chip, label, hairline. No panel border, no shouty blue. */
.sect { display: flex; align-items: center; gap: 10px; margin: 28px 0 4px; }
.sect::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sect .n { flex: none; width: 19px; height: 19px; border-radius: 999px; background: var(--ink); color: var(--paper);
           font: 700 10.5px/19px var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.sect .t { font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }

/* Buyer type: a compact segmented control in place of two large cards. */
.btype { border: 0; padding: 0; margin: 0; }
.btype legend { padding: 0; }
.btype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--hover);
              border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.btype-card { position: relative; display: block; border-radius: 8px; padding: 6px 12px; cursor: pointer;
              text-align: center; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.btype-card input { position: absolute; opacity: 0; pointer-events: none; }
.btype-card .t { display: block; font-weight: 600; font-size: 13.5px; color: var(--muted); }
.btype-card .s { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.btype-card.selected { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.btype-card.selected .t { color: var(--ink); }
.btype-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Read-only mirror of the country picked above. */
#shipCountryBox { display: flex; align-items: center; background: var(--hover);
                  border-color: transparent; color: var(--muted); font-size: 13px; }

.social-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.social-row .social-platform { flex: 0 0 124px; }
.social-row .social-url { flex: 1 1 auto; min-width: 0; }
.social-row .social-remove { flex: 0 0 auto; padding: 5px 10px; min-height: 34px; }

/* Multi-picks read as chips, not a stacked list of boxes. */
.check-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.check-row { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer;
             border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 9px; background: var(--card); }
.check-row:hover { border-color: var(--line-2); }
.check-row input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.check-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
/* "Other" free text: drops to its own line under the chips once Other is ticked. */
.other-in { flex: 1 1 100%; margin-top: 2px; }

.samebill { display: flex; gap: 8px; align-items: center; cursor: pointer; margin: 14px 0 0;
            font: 500 13.5px/1.3 var(--font); color: var(--ink); }
.samebill input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }

/* Sticky submit, always in reach on a long form. Bleeds to the card edges. */
.ap-actions { position: sticky; bottom: 0; z-index: 30; background: var(--card);
              border-top: 1px solid var(--line); margin: 22px -20px -20px; padding: 11px 20px 13px; }
.ap-actions .btn { width: 100%; min-height: 40px; font-size: 14.5px; border-radius: 9px; }
.ap-note { text-align: center; color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.consent { text-align: center; margin: 18px 0 0; line-height: 1.55; }
@media (max-width: 640px) { .ap-actions .btn { min-height: 46px; } }

/* Honeypot: humans never see or fill this. */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Outcome panels (application sent, reset done, link expired). */
.success-panel, .panel { text-align: center; padding: 8px 4px; }
.success-panel { padding: 30px 4px 16px; }
.success-panel .tick, .panel .mark { width: 50px; height: 50px; border-radius: 999px; font-size: 24px;
                                     display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.success-panel .tick, .panel .mark.ok { background: var(--ok-soft); color: var(--ok); }
.panel .mark.bad { background: var(--bad-soft); color: var(--bad); }
.success-panel p { max-width: 42ch; margin-left: auto; margin-right: auto; }

@media (max-width: 480px) {
  .btype-card .s { display: none; }
  .ap-step { padding: 5px 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .ap-fill { transition: none; } }