/* BEDKO sign-in card (kit Pages/Login + Pages/Logout) and the BEDKO mark (Pages/Shared/_BedkoLogo).
   Needs bedko.css (the --bk-* tokens). Moved from Praxis design.css 0.2.7 (kit 0.4.0). */

/* a card on a softly lit slate page; app mark + wordmark + one line, the sign-in, BEDKO at the foot */
.bk-login {
    position: relative; display: flex; flex-direction: column; gap: 14px;
    max-width: 360px; margin: 12vh auto 0; padding: 36px 28px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), var(--bk-surface);
    border: 1px solid var(--bk-line); border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    color: var(--bk-ink); font-family: var(--bk-font-ui);
}
.bk-login::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 45% at 50% 18%, rgba(127, 166, 207, 0.16), transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 85%, rgba(143, 179, 74, 0.07), transparent 70%),
        var(--bk-page);
}
.bk-login-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; text-align: center; }
.bk-login-mark { width: 68px; height: 68px; border-radius: 18px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); margin-bottom: 10px; }
.bk-login h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--bk-ink); }
.bk-login-tagline { margin: 0; color: var(--bk-soft); font-size: 15px; }

/* sign in with Google; the password form below is the LAN-only fallback */
.bk-google-signin {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 24px;
    /* Google's dark button (branding guidelines): fill #131314, 1px #8e918f border, text #e3e3e3, logo in its own colours */
    background: #131314; color: #e3e3e3; border: 1px solid #8e918f; font-weight: 500; font-size: 15px; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background 0.15s, transform 0.15s;
}
.bk-google-signin svg { width: 18px; height: 18px; }
.bk-google-signin:hover, .bk-google-signin:focus-visible { background: #1f1f21; outline: none; transform: translateY(-1px); }

.bk-password-login { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--bk-line); }
.bk-login-muted { text-align: center; color: var(--bk-faint); font-size: 13px; margin: 0 0 4px; }
.bk-password-login label { display: flex; flex-direction: column; gap: 3px; color: var(--bk-soft); font-size: 13px; }
.bk-password-login input { background: var(--bk-page); border: 1px solid var(--bk-line); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--bk-ink); }
.bk-password-login input:focus { outline: none; border-color: var(--bk-green); }
.bk-password-login button, .bk-login-primary {
    min-height: var(--bk-touch); border-radius: 22px; border: 1px solid var(--bk-line); background: var(--bk-page);
    color: var(--bk-ink); font: inherit; font-weight: 500; cursor: pointer;
}
.bk-password-login button:hover, .bk-login-primary:hover { border-color: var(--bk-faint); }
.bk-login-link { background: none; border: none; padding: 6px; color: var(--bk-soft); font: inherit; font-size: 14px; text-align: center; cursor: pointer; text-decoration: none; }
.bk-login-link:hover { color: var(--bk-ink); }
.bk-login-error { text-align: center; color: var(--bk-red); font-weight: 500; font-size: 14px; margin: 4px 0 0; }
.bk-login-foot { margin: 22px -28px 0; padding: 20px 28px 0; border-top: 1px solid var(--bk-line); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bk-login-version { color: var(--bk-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* BEDKO mark: chip in the brand blue, wordmark in the page greys */
.bedko-logo { width: 200px; height: auto; display: block; opacity: 0.92; }
.bedko-logo .bedko-chip { stroke: #4f8fc0; }
.bedko-logo .bedko-chip-dot { fill: #4f8fc0; }
.bedko-logo .bedko-word { fill: #c3c9d1; font-family: var(--bk-font-ui); font-size: 28px; font-weight: 600; }
.bedko-logo .bedko-sub { fill: var(--bk-soft); font-family: var(--bk-font-ui); font-size: 10.5px; font-weight: 500; }