/* Sign in page (sign-in.html), October 15, 2026 (Fable, round 74). The Members login chooser and the hero login
   pills on every page land here. The System and Find us language: navy and court blue surfaces, lime actions, heavy
   Outfit headings with the curvy lime underline on the key words, lime line icons on navy tiles, cards with the
   16 px radius and the inset hairline. Three doors, Academy members, Ambassadors and Clubs, each with its own anchor
   (#academy, #ambassadors, #clubs) so the chooser opens the right one. sign-in.js switches the web button and the
   store badges on only when assets/data/app-links.json holds a live address. Without JavaScript the fallback lines
   and the club portal button show, because they are in the markup. Width caps are in em, never ch: ch follows the
   zero of whichever face is drawing, so a ch cap gave the fallback face a different box until Outfit arrived.
   Loaded after styles.css. */
.sign-in-page { --court: #111d36; --card: #0f192f; --tile: #0b1226; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.sign-in-page main { overflow: clip; }
.sign-in-page .icon { flex-shrink: 0; }

/* The curved stroke sits in its own space below the words. Under 861 px mobile-layout-r36.css draws the same stroke
   as a background on the inline words instead, so a wrapped heading keeps it on every line. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 14px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }

/* 1. Hero: the headline with the curvy underline and one line that says who signs in where. The heading caps its
   width in em (12.08 em is 18ch of Outfit 800, 38.05 em is 58ch of Outfit 400). */
.sign-in-page .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(36px, 4.5vw, 56px); background: linear-gradient(180deg, #121d38 0%, #0c1220 42%, var(--navy) 100%); }
.hero-intro { max-width: 1250px; margin-top: 72px; margin-inline: auto; text-align: center; }
.hero h1 { max-width: 12.08em; margin-inline: auto; font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: clamp(14px, 1.4vw, 20px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero-line { margin: 14px auto 0; max-width: 38.05em; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: balance; }

/* 2. The three doors, on court blue. Three equal cards on the site's 1280 px shell, one under the other on narrower
   screens, so every button keeps one line. */
.signin-band { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px); background: var(--court); border-top: 1px solid var(--line); }
.signin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.signin-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(22px, 2.2vw, 30px); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; scroll-margin-top: 112px; transition: box-shadow 0.2s; }
/* The door the chooser opened (sign-in.html#academy, #ambassadors or #clubs) carries the lime edge. */
.signin-card:target { box-shadow: inset 0 0 0 1.5px var(--lime), 0 24px 60px #0006; }
/* The icon system: the site's 24 grid line icons in lime on a 48 px navy tile with a soft lime halo. */
.signin-tile { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; background: var(--tile); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; color: var(--lime); }
.signin-tile .icon { width: 24px; height: 24px; flex-basis: 24px; }
.signin-card h2 { margin-top: 8px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.signin-copy { margin: 0; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; text-wrap: pretty; }
/* The actions block holds the web button and the store badges. It takes no room while every control is hidden. */
.signin-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
.signin-actions:not(:has(> :not([hidden]))) { display: none; }
.signin-card .button-dark { width: 100%; justify-content: center; gap: 12px; min-height: 52px; padding-inline: 22px; font-size: 15px; text-align: center; }
.signin-card .button-dark .arrow { width: 20px; height: 20px; flex-basis: 20px; }
/* The store badges, as the System page draws them. */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 12px; border-radius: 12px; background: #fff; color: #0b1226; text-decoration: none; box-shadow: 0 10px 30px #0004; transition: transform 0.2s ease; }
.store-button svg { flex: none; fill: currentColor; }
.store-button span { display: flex; flex-direction: column; line-height: 1.1; }
.store-button small { font-size: 11px; font-weight: 600; opacity: 0.7; }
.store-button strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.store-button:hover { transform: translateY(-1px); }
/* The fallback: where to sign in until the web address is live. A quiet panel with the phone glyph, so the two player
   cards carry an action of their own weight beside the club button. */
.signin-fallback { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff14; color: var(--soft); font-size: 15px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.signin-glyph { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The note under a door sits on a hairline at the foot of the card, so the feet of the three cards align. */
.signin-note { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.signin-note a, .signin-help a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.signin-note a:hover, .signin-help a:hover { color: var(--lime); }
.signin-help { margin: clamp(28px, 3.5vw, 44px) auto 0; max-width: 40em; color: var(--muted); font-size: 15px; line-height: 1.6; text-align: center; text-wrap: balance; }
.signin-card .button-dark:focus-visible, .store-button:focus-visible, .signin-note a:focus-visible, .signin-help a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Calm under reduced motion: nothing lifts and nothing fades. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sign-in-page *, .sign-in-page *::before, .sign-in-page *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .store-button:hover, .signin-card .button-dark:hover { transform: none; }
}

/* Below 1200 px three columns would break the club portal button onto two lines, so the doors stack in one centred
   column of the Find us page's reading width. */
@media (max-width: 1199px) {
  .signin-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
  .signin-card { scroll-margin-top: 96px; }
}
@media (max-width: 700px) {
  .hero h1 { max-width: none; font-size: clamp(33.6px, 9.44vw, 57.6px); }
  .hero h1 .hl-mark { padding-bottom: 12px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .signin-card { padding: 20px; border-radius: 12px; }
  /* The store badges stack, each the width of the card, so neither label breaks. */
  .store-row { flex-direction: column; }
  .store-button { width: 100%; justify-content: center; }
}
@media (max-width: 430px) {
  /* Under about 365 px the heading wraps after the highlighted words. The phone stroke hangs below their line
     (mobile-layout-r36.css), so the next line needs the room or its ascenders cross the lime. */
  .hero h1 { line-height: 1.2; }
  .signin-card { padding: 18px; }
  .signin-fallback { padding: 12px 14px; }
}