/* The platform's front doors: /login on the platform's own address (three doors, drawn by tenant.js
   drawFindYourClub) and /start (sign up, name the club, pick a sport). Also loaded by a club's /login,
   where only the shared card polish below applies. Tokens only; light and dark come from tokens.css.
   base.css styles #tenant-missing for the public club site with a white card; these rules win on the
   app pages (body.login-page) so the doors follow the theme. */

/* ---- shared: the sign-in card ---- */
body.login-page .login-card { border-radius: var(--r-xl); box-shadow: var(--sh-3); }
body.login-page .login-card h1 { font-size: 2rem; margin: 0 0 var(--s-1); }
body.login-page .login-card > .muted { margin-top: 0; }
/* The links wrap as a group with gaps instead of middots (a dot left dangling at a line end on phones),
   and each is tall enough to tap. */
body.login-page .login-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
body.login-page .login-links a { display: inline-flex; align-items: center; min-height: 32px; }
body.login-page .login-links a[hidden] { display: none; }
.door-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--c-ink) !important; text-decoration: none; margin-bottom: var(--s-5); }
.door-brand img { width: 32px; height: 32px; border-radius: var(--r-sm); }

/* ---- /start: progress steps ---- */
.steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; gap: var(--s-1); counter-reset: none; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-small); color: var(--c-muted); font-weight: 600; }
.steps li::before { content: ""; display: block; height: 4px; border-radius: var(--r-pill); background: var(--c-border); }
.steps li.done::before, .steps li[aria-current="step"]::before { background: var(--c-brand); }
.steps li[aria-current="step"] { color: var(--c-ink); }
.steps li.done { color: var(--c-ink); }
.steps .step-num { display: none; }
body.login-page .start-card { max-width: 480px; }
body.login-page .start-card .sport-grid { gap: var(--s-2); }
body.login-page .start-card .sport-card { min-height: var(--tap); border-radius: var(--r-md); }
body.login-page .start-card .sport-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--c-brand); }
body.login-page .start-card .check { align-items: flex-start; font-size: .95rem; }
body.login-page .start-card .check input { margin-top: 2px; }
body.login-page .start-card #done-msg { font-size: 1.05rem; color: var(--c-ink); margin-top: 0; }

/* ---- /login on the platform's address: three doors ---- */
html[data-front-door] body.login-page { display: block; }
body.login-page #tenant-missing { padding: 56px var(--gutter) 64px; text-align: center; max-width: 1040px; margin: 0 auto; }
body.login-page #tenant-missing h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin: 0 0 var(--s-2); }
body.login-page #tenant-missing .door-lead { color: var(--c-muted); font-size: 1.1rem; margin: 0; }
body.login-page #tenant-missing .doors { max-width: none; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--s-4); margin: var(--s-8) 0 var(--s-6); align-items: stretch; }
body.login-page #tenant-missing .door { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-1); }
body.login-page #tenant-missing .door-main { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand), var(--sh-2); }
body.login-page #tenant-missing .door h2 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: 0; }
body.login-page #tenant-missing .door p { margin: 0; color: var(--c-muted); }
body.login-page #tenant-missing .door .btn { margin: var(--s-2) 0 0; }
body.login-page #tenant-missing .door .hint { font-size: var(--t-small); margin-top: auto; padding-top: var(--s-2); }
.door-icon { width: 44px; height: 44px; padding: 10px; border-radius: var(--r-md); background: var(--c-brand-soft); stroke: var(--c-link); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.login-page #tenant-missing .find-club { width: 100%; margin-top: var(--s-2); }
body.login-page #tenant-missing .find-club .field-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--s-1); }
/* The address box: the typed part, then the platform's domain as a fixed suffix inside the same outline. */
.slug-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
.slug-group:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
body.login-page .slug-group input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0; box-shadow: none; background: transparent; min-height: var(--tap); padding: 0 12px; }
body.login-page .slug-group input:focus-visible { outline: none; }
.slug-suffix { display: flex; align-items: center; padding: 0 12px; background: var(--c-surface-alt); color: var(--c-muted); border-left: 1px solid var(--c-border); font-size: .95rem; white-space: nowrap; }
.slug-group:has(input[aria-invalid="true"]) { border-color: var(--c-danger); }
body.login-page #tenant-missing .door-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
body.login-page #tenant-missing .door-actions .btn { margin: 0; }
body.login-page #tenant-missing .field-error:empty { display: none; }
body.login-page #tenant-missing .field-error { color: var(--c-danger); font-size: var(--t-small); margin: var(--s-1) 0 0; }
body.login-page #tenant-missing .door-more { color: var(--c-muted); }
@media (max-width: 900px) {
  body.login-page #tenant-missing .doors { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  /* On a phone the sign-in door comes first: most people here are families looking for their club. */
  body.login-page #tenant-missing .door-main { order: -1; }
}
@media (max-width: 480px) {
  body.login-page #tenant-missing { padding-top: 32px; }
  .slug-suffix { font-size: .85rem; padding: 0 8px; }
}
/* Done-for-you setup offer on the last /start step. */
body.login-page .start-card :is(.start-setup, .start-look) { border-top: 1px solid var(--c-border); margin-top: var(--s-5); padding-top: var(--s-4); }
body.login-page .start-card :is(.start-setup, .start-look) h2 { font-size: var(--t-h3); margin: 0 0 var(--s-2); }