/* =========================================
   PASSKEY LOGIN BLOCK — self-contained styles
   Loaded by accounts/passkey_login_block.html itself (<link>) so the
   block carries its own .pk-* styling wherever it is included
   (registration/login.html + landing.html). Token-only (Liquid Glass
   canon): every color/radius/font resolves via var(--*) which both
   workspaces/liquid_style.css (landing) and workspaces/login.css (login)
   define identically — so the block adapts to whichever surface hosts it.
   Extracted from workspaces/login.css (single source of truth moved here).
   ========================================= */
.pk-block { margin-top: 1.25rem; text-align: center; }
.pk-sep { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--text-light); font-size: .78rem; }
.pk-sep span.line { flex: 1; height: 1px; background: var(--glass-border); }
.pk-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font: 600 .95rem var(--font-body);
    border-radius: var(--radius-pill);
    padding: .8rem 1.5rem;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-solid);
    color: var(--text-muted);
    transition: all .2s ease;
}
.pk-btn:hover { transform: translateY(-1px); background: var(--glass-highlight); }
.pk-btn svg { width: 17px; height: 17px; stroke: var(--text-muted); }
.pk-hint { margin-top: 1rem; font-size: .78rem; color: var(--text-light); }
.pk-err { color: var(--error-dark); font-size: .8rem; margin-top: .6rem; min-height: 1em; }