/* ============================================================
   THE DROP — SPLASH / ONBOARDING (index.html)
   On-brand cover built from the existing system: dark page, big
   Archivo wordmark, orange "Drop" lockup, category dots, CTA.
   ============================================================ */

.splash { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 64px var(--gutter) calc(40px + env(safe-area-inset-bottom)); }
.splash__top { display: flex; flex-direction: column; align-items: flex-start; }
.splash__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 22px; }
.splash__logo { width: 64px; height: 64px; border-radius: 18px; object-fit: contain; margin-bottom: 26px; }
.splash__wordmark { font-size: 64px; font-weight: 900; letter-spacing: -.04em; line-height: .92; margin: 0; color: var(--text); }
.splash__wordmark .accent { color: var(--accent); }
.splash__tagline { font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--text2); margin: 18px 0 0; max-width: 22ch; }

.splash__dots { display: flex; gap: 9px; margin: 34px 0; }
.splash__dot { width: 13px; height: 13px; border-radius: 50%; }
.splash__dot--world  { background: var(--cWorld); }
.splash__dot--nation { background: var(--cNation); }
.splash__dot--sports { background: var(--cSport); }
.splash__dot--people { background: var(--cPeople); }
.splash__dot--tech   { background: var(--cTech); }

.splash__cta { display: flex; flex-direction: column; gap: 14px; }
.splash__signin { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text3); }
.splash__signin a { color: var(--accent); }

/* ============================================================
   AUTH (auth.html) — login / register
   ============================================================ */
.auth { min-height: 100vh; display: flex; flex-direction: column; padding: 56px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.auth__logo { width: 46px; height: 46px; border-radius: 13px; object-fit: contain; margin-bottom: 22px; }
.auth__title { font-size: 34px; font-weight: 900; letter-spacing: -.03em; margin: 0 0 6px; }
.auth__sub { font-size: 14px; color: var(--text3); margin: 0 0 26px; }

/* tab toggle (login / register) */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--seg); border: 1px solid var(--segBorder); border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.auth-tab { text-align: center; padding: 10px 0; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--text2); border: none; background: none; }
.auth-tab--active { background: var(--accent); color: var(--onAccent); }

/* form fields */
.field { margin-bottom: 14px; }
.field__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); margin-bottom: 7px; }
.field__label .field__optional { color: var(--text3); font-weight: normal; text-transform: none; letter-spacing: 0; }
.field__input { width: 100%; height: 48px; background: var(--surface); border: 1px solid var(--surfaceBorder); border-radius: var(--radius-btn); padding: 0 14px; color: var(--text); font-size: 15px; font-family: var(--font); outline: none; }
.field__input:focus { border-color: var(--accentBorder); }
.field__input::placeholder { color: var(--text3); }
select.field__input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%), linear-gradient(135deg, var(--text3) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field__hint { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; color: var(--text3); margin: 5px 2px 0; }

/* inline error banner */
.auth-error { background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.3); color: #FF6B6B; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }

/* forgot link */
.auth__forgot { text-align: right; margin: -4px 0 6px; font-size: 12.5px; }
.auth__forgot a { color: var(--text3); }
.auth__forgot a:hover { color: var(--accent); }

.auth__submit { margin-top: 8px; }
.auth__legal { font-size: 11.5px; line-height: 1.5; color: var(--text3); text-align: center; margin-top: 18px; }
.auth__legal a { color: var(--accent); }

.hidden { display: none !important; }