/* r3-sec: passkeys and sign-in links on the sign-in page, signed-in devices, the updated-terms dialog and the admin
   page for terms versions and data retention. Colours come from the theme variables only. */

/* Sign-in page: passkey and emailed link */
.pwless { display: grid; gap: 8px; margin-top: 10px; }
.pwless__form { display: grid; gap: 8px; }
.pwless__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Profile → security: passkeys and devices */
.secpanel__table td { vertical-align: middle; }
.secpanel__rename { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.secpanel__rename .fld__input { max-width: 220px; }
.secpanel__devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.secpanel__device {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
}
.secpanel__device--current { border-color: var(--brand); }
.secpanel__device-icon { font-size: 22px; line-height: 1; }
.secpanel__device-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.secpanel__device-text .chip { margin-left: 6px; }

/* Updated terms: a dialog over the whole app */
.termsgate {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center; padding: 16px;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.termsgate__card {
    width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    display: grid; gap: 12px; padding: 22px;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-radius: 14px;
}
.termsgate__title { font-size: 20px; }
.termsgate__intro { color: var(--muted); }
.termsgate__docs { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.termsgate__doc { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.termsgate__note { margin-top: 6px; white-space: pre-line; }
.termsgate__note-label { font-weight: 600; }
.termsgate__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.termsgate__other { font-size: 13px; }

/* Admin: terms versions and retention */
.secadmin__form { display: grid; gap: 10px; max-width: 760px; }
.secadmin__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.secadmin__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.secadmin__unit { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.secadmin__note { max-width: 420px; white-space: pre-line; overflow-wrap: anywhere; }
.secadmin__withdrawn td { color: var(--muted); }
.secadmin__report { margin-top: 12px; max-width: 760px; }

@media (max-width: 600px) {
    .secpanel__device { flex-wrap: wrap; }
    .termsgate__card { padding: 16px; }
}