/* The league picker (#gate) shown before the dashboard. Colors come from app/app.css's tokens;
   everything here is scoped to #gate so it can't touch the dashboard. */
body:not(.acct-on) [data-acct] { display: none !important; } /* Share buttons: no accounts on this site */

#gate .gate-top { border-bottom: 1px solid var(--grid); background: var(--surface); }
#gate .gate-top .wrap { height: 52px; display: flex; align-items: center; }
#gate .mark { font-family: "Barlow Condensed", Barlow, system-ui, sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

#gate .start { max-width: 560px; margin: 48px auto 64px; }
#gate h1 { font-family: "Barlow Condensed", Barlow, system-ui, sans-serif; font-size: clamp(32px, 6vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; }
#gate .lede { color: var(--ink-2); font-size: 17px; margin: 0 0 24px; }
#gate .form { padding: 20px; display: grid; gap: 16px; }
#gate .row { display: flex; gap: 12px; }
#gate .field { display: grid; gap: 6px; min-width: 0; }
#gate .field.grow { flex: 1; }
#gate .field span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
#gate input:not([type]), #gate input[inputmode], #gate select {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--page); color: var(--ink);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming in on focus */
}
#gate input:focus-visible, #gate select:focus-visible, #gate summary:focus-visible, #gate .btn:focus-visible, #gate .check input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#gate .private { border: 1px solid var(--grid); border-radius: 10px; }
#gate .private summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 14px; }
#gate .private-body { padding: 4px 12px 12px; display: grid; gap: 12px; }
#gate .how { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; display: grid; gap: 2px; }
#gate kbd { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
#gate .check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
#gate .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
#gate .btn {
  height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 16px;
}
#gate .btn:hover { filter: brightness(1.06); }
#gate .btn:active { transform: translateY(1px); }
#gate .error { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad-text) 12%, transparent); color: var(--bad-text); font-size: 14px; font-weight: 600; }
#gate .fine { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#gate .fine a { color: inherit; }

#gate .working { display: grid; justify-items: center; gap: 14px; padding: 96px 0; color: var(--ink-2); text-align: center; }
#gate .working p { margin: 0; }
#gate .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--grid); border-top-color: var(--accent); animation: gate-spin 0.8s linear infinite; }
@keyframes gate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #gate .spinner { animation-duration: 2.4s; } }

@media (max-width: 720px) {
  #gate .start { margin-top: 28px; }
  #gate .row { flex-direction: column; }
}

/* Shown on the dashboard when ESPN kept part of the league to members (start.js noteGaps). */
.gap-note { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); }
.gap-note a { color: var(--accent); font-weight: 600; }