/* Login fills the available space and centres the card; the footer stays pinned below. */
.login {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.login-card {
    width: min(94%, 860px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    padding: 0;
}

/* Navy brand panel — mirrors the dashboard/portal aesthetic. */
.login-card__brand {
    background: linear-gradient(160deg, var(--primary-container) 0%, #1e293b 100%);
    color: #fff;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xl);
}

/* The brand line is the shared _BrandLockup partial (components/brand.css) — white on this dark panel. */
.login-card__eyebrow {
    color: var(--gold-bright);
    font: var(--text-label-md);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: var(--space-xs);
}

.login-features { list-style: none; margin: 0; padding: 0; }

.login-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.82);
    font: var(--text-body-sm);
    margin-bottom: var(--space-md);
}

.login-feature .material-symbols-outlined { color: var(--secondary-container); font-size: 18px; }

.login-card__version { font: var(--text-label-md); color: var(--secondary-container); opacity: 0.5; }

/* Form side. */
.login-card__form { padding: var(--space-xl); }
.login-card__intro { margin: var(--space-xs) 0 var(--space-lg); }

.login-card__hint {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--outline-variant);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

@media (max-width: 720px) {
    .login-card { grid-template-columns: 1fr; }
    .login-card__brand { display: none; }
}

/* Sign-up club picker: federations as disclosures, each holding its clubs as checkboxes. */
.register-clubs {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.register-fed > summary { cursor: pointer; font-weight: 600; padding: var(--space-xs) 0; }
.register-fed__clubs { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-xs) 0 var(--space-sm) var(--space-md); }
.register-club { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }