/* Live demo only (release/tools/demo-overlay): the "Explore the demo" sign-in buttons. Loaded by DemoReadOnly. */
.lb-demo-login {
    display: grid;
    gap: var(--lb-s-2);
    margin-block-start: var(--lb-s-6);
    padding: var(--lb-s-4);
    border: 1px dashed color-mix(in srgb, var(--lb-accent) 40%, var(--lb-line));
    border-radius: var(--lb-r-card);
    background: color-mix(in srgb, var(--lb-accent) 4%, var(--lb-surface));
}

.lb-demo-login__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lb-s-2); }
.lb-demo-login__head h2 { margin: 0; font-size: var(--lb-fs-16); }
.lb-demo-login__pass { color: var(--lb-ink-3); font-size: var(--lb-fs-13); }
.lb-demo-login__pass code { padding: 2px 6px; border-radius: 6px; background: var(--lb-sunken); color: var(--lb-ink); font-family: var(--lb-font-head); }
.lb-demo-login__group { margin: var(--lb-s-2) 0 0; color: var(--lb-ink-3); font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.lb-demo-login form { margin: 0; }

.lb-demo-login__btn {
    display: flex;
    align-items: center;
    gap: var(--lb-s-3);
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r-sm);
    background: var(--lb-surface);
    color: var(--lb-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--lb-dur-micro) ease, box-shadow var(--lb-dur-micro) ease;
}

.lb-demo-login__btn:hover { border-color: var(--lb-accent); box-shadow: var(--lb-shadow-1); }
.lb-demo-login__btn:focus-visible { outline: none; box-shadow: var(--lb-ring); }
.lb-demo-login__btn > .lb-i { flex: none; width: 16px; height: 16px; margin-inline-start: auto; color: var(--lb-ink-3); }
.lb-demo-login__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--lb-accent-soft); color: var(--lb-accent); }
.lb-demo-login__icon .lb-i { width: 18px; height: 18px; }
.lb-demo-login__body { display: grid; min-width: 0; line-height: 1.35; }
.lb-demo-login__body strong { font-size: var(--lb-fs-14); }
.lb-demo-login__body span { color: var(--lb-ink-3); font-size: 12px; }