/* Sign-in, verification, two-factor setup and the security screens. The approved artboards' structure (a centred card, six digit cells, three-step
   setup, method cards, recovery-code grid) in the application's own tokens, type scale and buttons. Every class is prefixed sec- so nothing else is touched. */

.sec-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: start center;
    padding: var(--ck-space-6) var(--ck-space-4);
    background: linear-gradient(135deg, var(--ck-primary-soft), var(--ck-canvas) 55%, var(--ck-primary-soft));
    border-radius: var(--ck-radius-lg);
    min-height: min(34rem, 75vh);
}

.sec-card {
    width: min(100%, 28.75rem);
    padding: var(--ck-space-6);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: 0 1.25rem 3.5rem rgb(18 61 63 / 12%);
    color: var(--ck-ink);
    font-family: var(--ck-font);
    font-size: 0.875rem;
    line-height: 1.45;
}
.sec-card *, .sec-card *::before, .sec-card *::after { box-sizing: border-box; }
.sec-card.sec-wide { width: min(100%, 40rem); }
.sec-card h1 { margin: 0 0 var(--ck-space-1); text-align: center; font-size: 1.4rem; font-weight: 650; letter-spacing: normal; }
.sec-card h2 { margin: 0 0 var(--ck-space-1); font-size: 1rem; font-weight: 650; letter-spacing: normal; }
.sec-eyebrow { text-align: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ck-primary-hover); }
.sec-lead { margin: 0 0 var(--ck-space-4); text-align: center; color: var(--ck-slate); }
.sec-hint { font-size: 0.75rem; color: var(--ck-slate); }
.sec-center { text-align: center; }
.sec-stack > * + * { margin-top: var(--ck-space-3); }

.sec-field { margin: var(--ck-space-3) 0; }
.sec-field label { display: block; margin-bottom: var(--ck-space-1); font-size: 0.75rem; font-weight: 700; }
.sec-input {
    width: 100%; min-height: var(--ck-control-md); padding: 0 var(--ck-space-3); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md);
    background: var(--ck-surface); color: var(--ck-ink); font: inherit;
}
.sec-input:focus-visible { outline: none; border-color: var(--ck-primary); box-shadow: var(--ck-focus-ring); }
.sec-check { display: flex; align-items: center; gap: var(--ck-space-2); margin: var(--ck-space-3) 0; font-size: 0.8125rem; }
.sec-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ck-primary); }

.sec-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: calc(var(--ck-control-md) + 4px); margin-top: var(--ck-space-3); padding: 0 var(--ck-space-4);
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink);
    font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
.sec-btn:hover:not(:disabled) { border-color: var(--ck-primary); color: var(--ck-primary-hover); }
.sec-btn.sec-primary { background: var(--ck-primary); border-color: var(--ck-primary); color: #fff; }
.sec-btn.sec-primary:hover:not(:disabled) { background: var(--ck-primary-hover); border-color: var(--ck-primary-hover); color: #fff; }
.sec-btn.sec-danger { color: var(--ck-critical-text); border-color: #e7bcbc; }
.sec-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sec-btn:focus-visible, .sec-link:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.sec-btn.sec-inline { display: inline-flex; width: auto; margin-top: 0; }
.sec-link { display: block; margin-top: var(--ck-space-3); text-align: center; color: var(--ck-primary-hover); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.sec-link:hover { text-decoration: underline; }

.sec-or { display: flex; align-items: center; gap: var(--ck-space-3); margin: var(--ck-space-4) 0; color: var(--ck-slate); font-size: 0.6875rem; letter-spacing: 0.08em; }
.sec-or::before, .sec-or::after { content: ""; flex: 1; height: 1px; background: var(--ck-border); }

.sec-alert { margin: var(--ck-space-3) 0; padding: var(--ck-space-3); border-radius: var(--ck-radius-md); background: var(--ck-critical-soft); color: var(--ck-critical-text); font-size: 0.8125rem; }
.sec-alert.sec-info { background: var(--ck-primary-soft); color: var(--ck-ink); }
.sec-alert.sec-warn { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.sec-alert.sec-good { background: var(--ck-success-soft); color: var(--ck-success-text); }

.sec-lockline { display: flex; gap: var(--ck-space-3); align-items: flex-start; margin-top: var(--ck-space-4); padding-top: var(--ck-space-3); border-top: 1px solid var(--ck-border); color: var(--ck-slate); font-size: 0.75rem; }
.sec-lockline strong { display: block; color: var(--ck-ink); font-size: 0.8125rem; }
.sec-icon { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--ck-radius-md); background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 700; }

/* Six digit cells over one real input. Without scripting the input shows as it is; with it the input is invisible and the cells show what was typed. */
.sec-otp { display: block; position: relative; margin: var(--ck-space-4) 0; }
.sec-otp-cells { display: none; grid-template-columns: repeat(6, 1fr); gap: var(--ck-space-2); pointer-events: none; }
.sec-otp-cell {
    min-width: 0; display: grid; place-items: center; height: 3.25rem; border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface);
    font-family: var(--ck-font-mono, "Geist Mono", monospace); font-size: 1.45rem; font-variant-numeric: tabular-nums;
}
.sec-otp-input { width: 100%; min-height: 3.25rem; padding: 0 var(--ck-space-3); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); font-family: var(--ck-font-mono, "Geist Mono", monospace); font-size: 1.35rem; letter-spacing: 0.35em; text-align: center; }
.sec-otp-input:focus-visible { outline: none; border-color: var(--ck-primary); box-shadow: var(--ck-focus-ring); }
.sec-otp.sec-otp-js .sec-otp-cells { display: grid; }
.sec-otp.sec-otp-js .sec-otp-input { position: absolute; inset: 0; opacity: 0; border: 0; cursor: text; }
.sec-otp.sec-otp-js .sec-otp-input:focus-visible { box-shadow: none; }
.sec-otp.sec-otp-js:focus-within .sec-otp-cell.sec-on { border: 2px solid var(--ck-primary); }
.sec-otp.sec-otp-js:has(.sec-otp-input:focus-visible) .sec-otp-cells { outline: 2px solid transparent; }

/* Setup wizard */
.sec-steps { display: flex; margin: var(--ck-space-4) 0; }
.sec-step { flex: 1; padding: var(--ck-space-2); border-bottom: 3px solid var(--ck-border); font-size: 0.75rem; color: var(--ck-slate); }
.sec-step.sec-done, .sec-step.sec-current { border-color: var(--ck-primary); color: var(--ck-primary-hover); font-weight: 700; }
.sec-methods { display: grid; gap: var(--ck-space-3); margin: var(--ck-space-3) 0; }
.sec-method { display: flex; gap: var(--ck-space-3); align-items: flex-start; padding: var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); color: inherit; text-decoration: none; background: var(--ck-surface); text-align: left; font: inherit; width: 100%; cursor: pointer; }
.sec-method:hover { border-color: var(--ck-primary); }
.sec-method.sec-selected { border: 2px solid var(--ck-primary); padding: calc(var(--ck-space-4) - 1px); }
.sec-method:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.sec-method-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--ck-radius-lg); background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 700; }
.sec-method strong { display: block; }
.sec-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--ck-space-3); margin-top: var(--ck-space-4); }
.sec-actions .sec-btn { width: auto; margin-top: 0; }
.sec-qr { display: block; width: 9.5rem; height: 9.5rem; margin: var(--ck-space-3) auto; padding: var(--ck-space-2); background: #fff; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); }
.sec-secret { display: block; margin: var(--ck-space-2) 0; padding: var(--ck-space-2); border-radius: var(--ck-radius-md); background: var(--ck-canvas); font-family: var(--ck-font-mono, "Geist Mono", monospace); font-size: 0.8125rem; letter-spacing: 0.08em; text-align: center; user-select: all; }
.sec-codes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-2); margin: var(--ck-space-4) 0; padding: var(--ck-space-4); border-radius: var(--ck-radius-lg); background: var(--ck-canvas); font-family: var(--ck-font-mono, "Geist Mono", monospace); font-size: 0.9rem; }
.sec-codes span { font-variant-numeric: tabular-nums; }
.sec-once { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ck-warning-soft); color: var(--ck-warning-text); font-size: 0.6875rem; font-weight: 700; }

/* Tables and rows on the Security pages */
.sec-badge { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.sec-badge.sec-warn { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.sec-badge.sec-bad { background: var(--ck-critical-soft); color: var(--ck-critical-text); }

@media (max-width: 30rem) {
    .sec-card { padding: var(--ck-space-4); }
    .sec-otp-cell { height: 2.75rem; font-size: 1.15rem; }
    .sec-otp-cells { gap: var(--ck-space-1); }
    .sec-codes { grid-template-columns: 1fr; }
    .sec-actions { flex-direction: column-reverse; align-items: stretch; }
    .sec-actions .sec-btn { width: 100%; }
}

@media print {
    body * { visibility: hidden; }
    .sec-printable, .sec-printable * { visibility: visible; }
    .sec-printable { position: absolute; inset: 0 auto auto 0; }
}

/* My account */
.sec-account { max-width: 62rem; margin: 0 auto; }
.sec-account-title { margin: 0 0 var(--ck-space-4); font: var(--ck-text-section-title); }
.sec-account-grid { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--ck-space-6); align-items: start; }
.sec-account-menu { list-style: none; margin: 0; padding: 0; position: sticky; top: var(--ck-space-4); }
.sec-account-menu a { display: block; padding: 0.4rem var(--ck-space-3); border-radius: var(--ck-radius-md); color: var(--ck-ink); text-decoration: none; font-weight: 500; }
.sec-account-menu a:hover { background: var(--ck-primary-soft); }
.sec-account-menu a.active { background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 650; box-shadow: inset 3px 0 0 var(--ck-primary); }
.sec-page-title { margin: 0 0 var(--ck-space-1); font-size: 1.25rem; font-weight: 650; }
@media (max-width: 40rem) {
    .sec-account-grid { grid-template-columns: 1fr; gap: var(--ck-space-3); }
    .sec-account-menu { position: static; display: flex; flex-wrap: wrap; gap: var(--ck-space-1); }
}

/* Screen lock additions */
.lock-eyebrow { margin-top: var(--ck-space-3); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ck-primary-hover); }
.lock-label { display: block; margin-top: var(--ck-space-3); font-size: 0.75rem; font-weight: 700; }
.lock-or { display: flex; align-items: center; gap: var(--ck-space-3); margin: var(--ck-space-3) 0; color: var(--ck-slate); font-size: 0.6875rem; letter-spacing: 0.08em; }
.lock-or::before, .lock-or::after { content: ""; flex: 1; height: 1px; background: var(--ck-border); }
.lock-note { margin: var(--ck-space-3) 0 0; padding-top: var(--ck-space-3); border-top: 1px solid var(--ck-border); font-size: 0.75rem; color: var(--ck-slate); }

/* Shown while an entered code is being checked. */
.sec-otp-status { display: block; margin-top: var(--ck-space-2); color: var(--ck-slate); font-size: 0.875rem; text-align: center; }
.sec-otp-status:empty { margin: 0; }