/* login.css — the dedicated /login account page. Layout only; the form controls
   (.acct-*, .settings-btn*) are reused from settings.css, which /login also links.
   Design tokens only (site.css :root) so light/dark + custom palette track. */

.login-page {
    max-width: 42rem;
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 5rem) 1.1rem 4rem;
}

.login-card {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg, 8px);
    padding: 2rem 2.2rem 2.2rem;
    box-shadow: var(--shadow-md, 0 4px 18px rgba(0, 0, 0, 0.4));
}

.login-head { margin-bottom: 1.2rem; }
.login-head h1 { margin: 0 0 0.4rem; font-size: var(--text-2xl, 22px); color: var(--fg); }
.login-lead { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.55; }

/* Make the single primary button (Sign in / Create account) fill the card width
   — clear primary CTA on both /login and /register. */
.login-page .acct-actions { margin-top: 0.2rem; }
.login-page .acct-form .acct-actions .settings-btn-primary { flex: 1 1 auto; justify-content: center; }

/* Below the primary Sign in: a quiet recovery link, then the create-account
   option on its own line — each its own concern, not crammed onto one row. */
.login-forgot {
    margin: 0.85rem 0 0;
    font-size: var(--text-sm);
}
.login-alt {
    margin: 0.5rem 0 0;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.login-link {
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.login-link:hover { text-decoration: underline; }

/* Cloud projects manager (edet-cloud.js) — listed under the signed-in view. */
.acct-cloud { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.acct-cloud[hidden] { display: none; }
.acct-cloud-h { margin: 0 0 0.3rem; font-size: var(--text-base); color: var(--fg); }
.acct-cloud-h2 { margin: 1.3rem 0 0.3rem; font-size: var(--text-sm); color: var(--fg-soft); }
/* Removed-from-cloud rows read as dimmed/secondary vs the live ones. */
.acct-cloud-row-removed { opacity: 0.72; }
.acct-cloud-row-removed .acct-cloud-name { color: var(--fg-soft); }
.acct-cloud-lead { margin: 0 0 0.8rem; color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.5; }
.acct-cloud-list { display: flex; flex-direction: column; gap: 0.4rem; }
.acct-cloud-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-radius: var(--radius, 6px);
}
.acct-cloud-name { flex: 1 1 auto; color: var(--fg); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-cloud-meta { flex: 0 0 auto; color: var(--fg-dim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.acct-cloud-row .settings-btn { flex: 0 0 auto; height: 30px; padding: 0 0.6rem; font-size: var(--text-xs); }