/* CBS -- the "Confirm it is you" dialog (step-up.js) and the Passkeys card
 * (settings-passkeys.html), DK-103. Colours, spacing and radii come from
 * tokens.css; nothing here hard-codes a brand value. */

.cbs-stepup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cbs-space-4, 16px);
    background: rgba(0, 0, 0, 0.45);
}

.cbs-stepup {
    width: 100%;
    max-width: 26rem;
    max-height: calc(100vh - 2 * var(--cbs-space-4, 16px));
    overflow-y: auto;
    padding: var(--cbs-space-5, 20px);
    background: var(--cbs-surface-raised, #fff);
    color: var(--cbs-ink, #111);
    border-radius: var(--cbs-radius-lg, 12px);
    box-shadow: var(--cbs-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.25));
    font-family: var(--cbs-font, inherit);
    line-height: var(--cbs-leading, 1.5);
}

.cbs-stepup__title { margin: 0 0 var(--cbs-space-2, 8px); font-size: 1.25rem; }
.cbs-stepup__msg { margin: 0 0 var(--cbs-space-4, 16px); color: var(--cbs-ink-muted, #444); }

.cbs-stepup__passkey,
.cbs-stepup__verify,
.cbs-stepup__cancel { width: 100%; min-height: 48px; margin-top: var(--cbs-space-2, 8px); }

.cbs-stepup__or { margin: var(--cbs-space-4, 16px) 0 var(--cbs-space-2, 8px); color: var(--cbs-ink-muted, #444); }
.cbs-stepup__label { display: block; margin-bottom: var(--cbs-space-1, 4px); font-weight: 600; }

.cbs-stepup__row { display: flex; gap: var(--cbs-space-2, 8px); align-items: stretch; }
.cbs-stepup__code {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    font-size: 1.4rem;
    letter-spacing: 0.25em;
    font-family: var(--cbs-font-mono, monospace);
    border: 1px solid var(--cbs-line, #ccc);
    border-radius: var(--cbs-radius-sm, 6px);
    padding: 0 var(--cbs-space-3, 12px);
}
.cbs-stepup__mic { flex: 0 0 auto; min-height: 48px; }
.cbs-stepup__mic[hidden] { display: none; }

.cbs-stepup__status { min-height: 1.5em; margin: var(--cbs-space-3, 12px) 0 0; color: var(--cbs-alert-ink, #8a1c1c); }
.cbs-stepup__note,
.cbs-stepup__lost { margin: var(--cbs-space-2, 8px) 0 0; font-size: 0.9rem; color: var(--cbs-ink-muted, #444); }

.cbs-stepup-suggest {
    position: fixed;
    left: 50%;
    bottom: var(--cbs-space-4, 16px);
    transform: translateX(-50%);
    z-index: 999;
    max-width: calc(100vw - 2 * var(--cbs-space-4, 16px));
    margin: 0;
    padding: var(--cbs-space-2, 8px) var(--cbs-space-4, 16px);
    background: var(--cbs-info-tint, #eef5ff);
    color: var(--cbs-ink, #111);
    border: 1px solid var(--cbs-info, #2563eb);
    border-radius: var(--cbs-radius-pill, 999px);
    box-shadow: var(--cbs-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
}

/* ---- Passkeys card (Settings > Account) ---------------------------------- */

.cbs-passkeys { margin-top: var(--cbs-space-4, 16px); }
.cbs-passkeys__title { margin: 0 0 var(--cbs-space-2, 8px); font-size: 1.05rem; }
.cbs-passkeys__add { display: grid; gap: var(--cbs-space-2, 8px); margin: var(--cbs-space-3, 12px) 0; }
.cbs-passkeys__label { font-weight: 600; }
.cbs-passkeys__input { min-height: 44px; }
.cbs-passkeys__button { min-height: 48px; }
.cbs-passkeys__list { list-style: none; margin: 0; padding: 0; }
.cbs-passkeys__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cbs-space-2, 8px) var(--cbs-space-3, 12px);
    padding: var(--cbs-space-3, 12px) 0;
    border-top: 1px solid var(--cbs-line-soft, #eee);
}
.cbs-passkeys__item .st-note { flex: 1 1 12rem; }
.cbs-passkeys__remove { min-height: 44px; }
.cbs-passkeys__status { min-height: 1.5em; margin: var(--cbs-space-2, 8px) 0 0; }

.cbs-passkey-signin { margin-top: var(--cbs-space-3, 12px); }
.cbs-passkey-signin__button { width: 100%; min-height: 48px; }
.cbs-passkey-signin__error { margin: var(--cbs-space-2, 8px) 0 0; color: var(--cbs-alert-ink, #8a1c1c); }