/*
 * Pages of passkey-access. Shape, font and building blocks (buttons, fields, card, lists) come from the shared design,
 * /design/css/design.css (repo app-design-system); this file holds the module's default colours and what only these pages
 * need.
 *
 * The app sets its colours in /access-theme.css with the colour names of the design (--color-*, README "Aussehen").
 * An app that still sets the --access-* variables keeps its colours: they fill the names below until the app moves on.
 * Light or dark follows the device, or the app's own choice (js/theme.mjs sets data-theme on the root element).
 */
:root {
    --color-background: var(--access-background, light-dark(#f5f6f8, #121417));
    --color-surface: var(--access-surface, light-dark(#ffffff, #1d2126));
    --color-text: var(--access-text, light-dark(#1c2024, #e8eaed));
    --color-muted: var(--access-muted, light-dark(#5b636b, #a4abb3));
    --color-accent: var(--access-accent, light-dark(#1f5fbf, #6ea2f2));
    --color-on-accent: var(--access-on-accent, light-dark(#ffffff, #0d1117));
    --color-border: var(--access-border, light-dark(#d5d9de, #353b42));
    --color-danger: var(--access-danger, light-dark(#b42318, #f08679));
    /* The optional colours fall back as the design's contract says */
    --color-primary: var(--access-primary, var(--color-accent));
    --color-on-primary: var(--access-on-primary, var(--color-on-accent));
    --color-secondary: var(--access-secondary, transparent);
    --color-on-secondary: var(--access-on-secondary, var(--color-accent));
    --color-secondary-border: var(--access-secondary-border, var(--color-border));
    --color-field: var(--access-field, var(--color-background));
    --color-field-border: var(--access-field-border, var(--color-border));
}

* {
    box-sizing: border-box;
}

/* The pages switch what they show with hidden; the design has the same rule, this one holds without it */
[hidden] {
    display: none !important;
}

.access-card .access-hint {
    margin: var(--space-4) 0 0;
}

/* The test accounts of the login page: buttons one below the other, no hairlines */
.access-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.access-message {
    margin: var(--space-4) 0 0;
}

.access-status,
.access-account-name,
.access-passkey-device,
.access-session-device {
    font-size: 1.125rem;
    font-weight: 600;
}

/* The check code on the waiting page, to read out; the code field on the recovery page keeps the page's size */
.access-card p.access-code {
    margin: var(--space-2) 0 1.25rem;
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    text-align: center;
}

.access-section + .access-section {
    margin-top: var(--space-6);
}

/* What the operator had better know before he decides, e.g. that the account was active a moment ago */
.access-request {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

/* The entries of the lists (accounts, passkeys, sessions, audit) are not cards in the card; the design draws the hairlines */
.access-card .access-request p,
.access-card .access-account p,
.access-card .access-passkey p,
.access-card .access-session p {
    margin: 0;
}

/* The access audit: closer together than the other lists */
.access-audit-entry {
    display: grid;
    gap: 0.125rem;
    padding: var(--space-2) 0;
}

.access-card .access-audit-entry p {
    margin: 0;
}

.access-audit-entry .access-note {
    font-size: 0.875rem;
}

/* Recovery codes: to read off and type in, character by character */
.access-code,
.access-codes {
    font-family: var(--font-mono);
}

.access-codes {
    margin: 0 0 var(--space-4);
    line-height: 1.6;
}