/* static/css/topps/auth.css — TOPPS for sign-in and account creation: auth/_shell.html (forgot / reset password,
   check your inbox), auth/login.html (sign in · create account · invite), mobile_login.html, auth/invite_wizard.html.
   Object: the FRONT OFFICE PASS — the form is a '75 card (two-tone border → cream frame) with a namebar on top;
   the invite is a ticket/coupon; the fact strips are a card-back stat row. Chrome (top nav, footer) is the slab.
   Restyles the pages' own class hooks; everything scoped to html.tp. Prefix for new pieces: au-. */

html.tp, html.tp body { background-color: var(--tp-paper); background-image: var(--tp-grain); color: var(--tp-ink); }
html.tp body { font-family: var(--tp-body); }
html.tp body::before { display: none; }                 /* the old subway-line top rule */

/* ── chrome: slab nav + footer ────────────────────────────────────────────────────── */
html.tp .nav { background: var(--tp-slab); border-bottom: 3px solid var(--tp-gold-fill); -webkit-backdrop-filter: none; backdrop-filter: none; height: 54px; }
html.tp .nav-logo { color: var(--tp-slab-ink); font: 700 19px/1 var(--tp-display); letter-spacing: .04em; }
html.tp .nav-back { color: rgba(243,235,214,.75); font: 700 10px/1 var(--tp-label); min-height: 44px; display: inline-flex; align-items: center; }
html.tp .footer { background: var(--tp-slab); border-top: 0; }
html.tp .footer-logo { color: var(--tp-gold-fill); font-family: var(--tp-display); }
html.tp .footer-sys { color: rgba(243,235,214,.6); font-family: var(--tp-label); }

/* ── the pass: a card front holding the form ──────────────────────────────────────── */
html.tp .auth-wrap, html.tp .wizard, html.tp .panel {
  border: 7px solid transparent; border-radius: var(--tp-r-lg); padding: 22px 18px 20px; color: var(--tp-ink);
  background: linear-gradient(var(--tp-card), var(--tp-card)) padding-box,
              linear-gradient(135deg, var(--tc) 0 50%, var(--tc2) 50% 100%) border-box;
  box-shadow: var(--tp-lift-2); }
html.tp .auth-wrap::before, html.tp .panel::before {        /* the namebar strip across the top of the pass */
  content: "Front office pass"; display: block; margin: -22px -18px 18px; padding: 8px 12px;
  background: var(--tc); color: var(--tc-ink); font: 700 9px/1 var(--tp-label); letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 2px solid var(--tp-ink); }
html.tp .main { padding: 28px 16px 36px; }

html.tp .auth-eyebrow, html.tp .eyebrow { color: var(--tp-muted); font: 700 9.5px/1.2 var(--tp-label); letter-spacing: .18em; }
html.tp .eyebrow::before, html.tp .eyebrow::after { background: var(--tp-gold); }
html.tp .auth-h1 { color: var(--tp-ink); font: 700 40px/.95 var(--tp-display); }
html.tp .auth-h1 .accent { color: var(--tc); }
html.tp .auth-sub { color: var(--tp-ink-2); font: 13.5px/1.5 var(--tp-type); margin-bottom: 22px; }
html.tp .email-badge { color: var(--tp-ink); background: var(--tp-back); padding: 1px 5px; border-radius: 2px; }
html.tp .hero-icon { color: var(--tp-gold); }

/* folder tabs */
html.tp .tabs { border-bottom: 2px solid var(--tp-ink); gap: 4px; margin: 0 0 20px; }
html.tp .tab { min-height: 42px; border: 1px solid var(--tp-rule-2); border-bottom: 0; border-radius: 7px 7px 0 0; margin: 0;
  background: var(--tp-paper-2); color: var(--tp-muted); font: 600 13px/1 var(--tp-display); letter-spacing: .04em; }
html.tp .tab.active { background: var(--tp-card); color: var(--tp-ink); border-color: var(--tp-ink); position: relative; top: 2px; box-shadow: inset 0 3px 0 var(--tc); }

/* fields: boxed card-stock inputs */
html.tp .field { margin-bottom: 16px; border: 0; padding: 0; }
html.tp .field-lbl, html.tp .field-label, html.tp .form-label { color: var(--tp-ink-2); font: 700 9.5px/1.2 var(--tp-label); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
html.tp .field.focus .field-label { color: var(--tp-ink); }
html.tp .field-in, html.tp .input, html.tp .form-input {
  min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--tp-rule-2); border-radius: var(--tp-r); background: #FFFDF6;
  color: var(--tp-ink); font: 500 16px/1.3 var(--tp-body); letter-spacing: 0; }
html.tp .field-in::placeholder, html.tp .input::placeholder, html.tp .form-input::placeholder { color: var(--tp-faint); font-family: var(--tp-type); }
html.tp .field-in:focus, html.tp .input:focus, html.tp .form-input:focus { border-color: var(--tp-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-gold-fill) 40%, transparent); outline: none; }
html.tp .field-in:-webkit-autofill, html.tp .input:autofill { -webkit-text-fill-color: var(--tp-ink); -webkit-box-shadow: 0 0 0 1000px #FFFDF6 inset; caret-color: var(--tp-ink); }
html.tp .forgot-row { margin: -6px 0 16px; }
html.tp .forgot-row a { color: var(--tp-ink-2); font: 600 11px/1 var(--tp-label); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 32px; align-items: center; }

/* buttons */
html.tp .cta, html.tp .btn-submit, html.tp .btn-primary {
  min-height: 50px; border: 2px solid var(--tp-ink); border-radius: var(--tp-r); background: var(--tp-gold-fill); color: var(--tp-ink);
  font: 700 12px/1 var(--tp-label); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 3px 0 var(--tp-ink); }
html.tp .cta:active, html.tp .btn-submit:active, html.tp .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tp-ink); background: var(--tp-gold-fill); }
html.tp .btn-primary:hover { background: var(--tp-gold-fill); }
html.tp .btn-primary:disabled { opacity: .5; box-shadow: none; }
html.tp a.cta, html.tp a.btn-primary { display: flex !important; align-items: center; justify-content: center; }
html.tp .cta-secondary, html.tp .cta-ghost { min-height: 46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--tp-rule-2); border-radius: var(--tp-r);
  background: transparent; color: var(--tp-ink-2); font: 700 11px/1 var(--tp-label); }
html.tp .foot-note { color: var(--tp-muted); font: 12px/1.5 var(--tp-type); letter-spacing: 0; }
html.tp .foot-note a { color: var(--tp-ink); text-decoration: underline; text-decoration-color: var(--tp-gold-fill); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* notices */
html.tp .auth-error, html.tp .error, html.tp .error-msg { background: var(--tp-back); border: 0; border-left: 4px solid var(--tp-red); border-radius: 0 4px 4px 0; color: var(--tp-red);
  font: 700 12px/1.4 var(--tp-type); text-transform: none; letter-spacing: 0; }
html.tp .error::before { border-color: var(--tp-red); }
html.tp .auth-ok { background: var(--tp-back); border-left: 4px solid var(--tp-green); color: var(--tp-green); font: 700 12px/1.4 var(--tp-type); }

/* invite: a ticket for the league */
html.tp .invite-receipt { position: relative; border: 2px dashed var(--tc); border-radius: var(--tp-r); background: var(--tp-back); padding: 14px 12px; margin-bottom: 22px; }
html.tp .invite-receipt-lbl { color: var(--tp-muted); font: 700 9px/1 var(--tp-label); }
html.tp .invite-league-name { color: var(--tp-ink); font: 700 24px/1 var(--tp-display); }
html.tp .invite-team-line { color: var(--tp-ink-2); font: 12px/1.4 var(--tp-type); }
html.tp .invite-team-line strong { color: var(--tc); }

/* stat strips → a card-back row */
html.tp .status-strip, html.tp .facts-strip { border: 0; border-radius: var(--tp-r); background: var(--tp-back); margin-top: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--tp-rule-2); }
html.tp .sc, html.tp .fact { border-right: var(--tp-dot); }
html.tp .sc:last-child, html.tp .fact:last-child { border-right: 0; }
html.tp .sc-val, html.tp .fact-val { color: var(--tp-ink); font-family: var(--tp-display); }
html.tp .sc-val.gold, html.tp .fact-val { color: var(--tp-gold); }
html.tp .sc-val.green { color: var(--tp-green); }
html.tp .sc-lbl, html.tp .fact-lbl { color: var(--tp-muted); font: 700 8px/1.2 var(--tp-label); }

/* ── mobile_login: masthead over the pass ─────────────────────────────────────────── */
html.tp .wrap { background: transparent; }
html.tp .masthead { margin-bottom: 22px; }
html.tp .wordmark { background: none; -webkit-text-fill-color: var(--tp-ink); color: var(--tp-ink); filter: none; font: 700 44px/1 var(--tp-display); text-shadow: 0 2px 0 rgba(28,26,20,.12); }
html.tp .bullet { width: 58px; height: 58px; border: 3px solid var(--tp-ink); box-shadow: 0 4px 0 rgba(0,0,0,.28); transform: rotate(8deg);
  background: radial-gradient(circle at 35% 30%, #F08A4B 0%, var(--tp-orange) 55%, #8E3A12 100%); }
html.tp .station-title { color: var(--tp-ink); font: 700 12px/1 var(--tp-label); border-bottom: var(--tp-dot); }
html.tp .station-title::after { background: var(--tp-gold-fill); height: 3px; bottom: -2px; }
html.tp .panel::before { content: "Sign in"; }
html.tp .btn-submit { margin-top: 18px; }
html.tp .footer:not(:has(*)) { background: transparent; }      /* mobile_login's back link is an <a class="footer"> */
html.tp a.footer { background: transparent; color: var(--tp-ink-2); font: 700 11px/1 var(--tp-label); min-height: 44px; }
html.tp a.footer::before { color: var(--tp-gold); }
html.tp .legal { color: var(--tp-muted); }
html.tp .legal-line::before, html.tp .legal-line::after { background: var(--tp-rule-2); }

/* ── invite wizard (SMS invites) ──────────────────────────────────────────────────── */
html.tp .wizard { padding: 0; overflow: hidden; }
html.tp .wizard-header { padding: 18px 18px 0; }
html.tp .wizard-logo { color: var(--tp-ink); font: 700 24px/1 var(--tp-display); text-transform: uppercase; }
html.tp .wizard-body { padding: 18px; }
html.tp .progress-dots .dot { width: 10px; height: 10px; background: var(--tp-rule-2); border-radius: 2px; }
html.tp .progress-dots .dot.active { background: var(--tp-gold-fill); box-shadow: 0 0 0 1.5px var(--tp-ink); transform: rotate(45deg); }
html.tp .progress-dots .dot.done { background: var(--tp-green); }
html.tp .invite-badge { border: 2px dashed var(--tc); border-radius: var(--tp-r); background: var(--tp-back); }
html.tp .invite-badge .league-name { color: var(--tp-ink); font: 700 24px/1.05 var(--tp-display); text-transform: uppercase; }
html.tp .invite-badge .greeting { color: var(--tp-ink); font-weight: 600; }
html.tp .invite-badge .team-name, html.tp .wizard [style*="#9898B0"], html.tp .success-sub, html.tp .expired-box p, html.tp .hint { color: var(--tp-ink-2) !important; }
html.tp .invite-badge strong, html.tp .wizard [style*="#F0EFF8"] { color: var(--tp-ink) !important; }
html.tp .wizard [style*="#E8A020"] { color: var(--tp-ink) !important; font-family: var(--tp-display) !important; text-transform: uppercase; }
html.tp .wizard [style*="#55556A"] { color: var(--tp-muted) !important; }
html.tp .success-title { color: var(--tp-green); font: 700 26px/1.1 var(--tp-display); text-transform: uppercase; }
html.tp .expired-box h2 { color: var(--tp-red); font-family: var(--tp-display); text-transform: uppercase; }