/*
 * Dark only, no switch - same decision as the task manager, so the two look like
 * one system when a person is bounced from one to the other mid-flow.
 *
 * Colours as custom properties, in one place.
 */
:root {
    --bg: #101214;
    --surface: #191c1f;
    --border: #2a2f34;
    --text: #e6e8ea;
    --muted: #9aa3ab;
    --accent: #7cc4ff;
    --accent-ink: #06243b;
    --danger: #ff8f8f;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Prose pages - a sign-in form wants 26rem, a privacy policy is unreadable in it. */
.card--wide { max-width: 42rem; }
.card--wide li { margin-bottom: .4rem; }
.card--wide code {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}

h1 { margin: 0 0 1rem; font-size: 1.4rem; }
h2 { margin: 2rem 0 .5rem; font-size: 1rem; color: var(--muted); font-weight: 600; }

.note { margin: 0 0 1.5rem; color: var(--muted); }
.fine { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); }
.footer { font-size: .8rem; color: var(--muted); }

/*
 * Az do uvodni stranky a pravnich textu nemel zadny sablona odkaz v textu -
 * chodilo se sem jen pres tlacitka - takze prohlizec kreslil vychozi tmavou
 * modrou, ktera je na tomhle pozadi neprectitelna. .btn si barvu resi sam.
 */
a:not(.btn) { color: var(--accent); }
a:not(.btn):hover { text-decoration: none; }

.error {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: var(--radius);
    background: rgba(255, 143, 143, .12);
    border: 1px solid rgba(255, 143, 143, .35);
    color: var(--danger);
}

.btn {
    display: inline-block;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--danger { background: transparent; border-color: rgba(255,143,143,.4); color: var(--danger); }
.btn:hover { filter: brightness(1.08); }

.actions { display: flex; gap: .75rem; margin-top: 1.25rem; }
.actions--stacked { flex-direction: column; margin-top: 2rem; }

/* The one-time code field: wide letter spacing so six digits are checkable at a glance. */
.code-input {
    width: 100%;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 1.3rem;
    letter-spacing: .35em;
    text-align: center;
}
.code-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/*
 * The white field and the rounded corner belong to the WRAPPER, not to the SVG.
 * With box-sizing: border-box a padding on the SVG shrinks the drawing itself, and
 * a QR code has a floor below which it stops being readable - around 4 screen pixels
 * per module. At 12rem with padding it was down to 3.1 and marginal.
 *
 * Letting the SVG take the full width of the card puts it near 6 px per module,
 * and height: auto keeps it square from the viewBox.
 */
.qr {
    margin: 0 0 1.25rem;
    padding: .75rem;
    background: #fff;
    border-radius: var(--radius);
}
.qr svg { display: block; width: 100%; height: auto; }

.secret, .codes code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
}

/*
 * Jedno klepnuti oznaci cely klic. Bez toho se na telefonu tahaji uchytka pres
 * retezec s mezerami po ctyrech a clovek si uskrizne kus - a uriznuty klic se
 * pozna az tim, ze autentikator dava spatne kody.
 */
.secret {
    -webkit-user-select: all;
    user-select: all;
}

.codes { list-style: none; margin: 1rem 0; padding: 0; columns: 2; }
.codes li { margin-bottom: .35rem; break-inside: avoid; }

.scopes { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.scopes li { margin-bottom: .6rem; }
.scopes label, .checkbox { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; }

.backup { margin-top: 2rem; }
.backup summary { color: var(--muted); cursor: pointer; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.sessions { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.sessions li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.sessions .where { color: var(--muted); margin-left: .5rem; }
.badge {
    margin-left: .5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .75rem;
}

/* Tlacitko "Odhlasit" u jedne relace na /account - v radku seznamu, ne pod nim. */
.sessions form.inline { display: inline; margin-left: .5rem; }
.btn--small { padding: .15rem .6rem; font-size: .8rem; }

/*
 * The hidden attribute loses to any display rule on the same element, and .btn sets
 * one - so a passkey button the script hides on a browser without WebAuthn would
 * stay visible. !important is what the attribute needs to mean what it says.
 */
[hidden] { display: none !important; }

/* Between the two ways of signing in on /login. */
.divider { margin: 1rem 0; text-align: center; color: var(--muted); font-size: .85rem; }

/* A free-text field (the name of a key) - like .code-input without the letter spacing. */
.field { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.text-input {
    width: 100%;
    margin-top: .35rem;
    padding: .7rem .9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
}
.text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The list of keys on /account, the same shape as the list of sessions. */
.keys { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.keys li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.keys .where { color: var(--muted); margin-left: .5rem; }
.keys form.inline { display: inline; margin-left: .5rem; }

/* While the browser is talking to the authenticator. */
.btn:disabled { opacity: .6; cursor: wait; }

/*
 * The administrator's pages (/admin). The only ones with a table on them, so the
 * card is wider still than the prose one, and the table scrolls sideways inside it
 * on a phone rather than pushing the page wide.
 */
.card--admin { max-width: 64rem; }
.card--admin code {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}
.table-scroll { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
.grid th, .grid td { padding: .45rem .75rem .45rem 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.grid th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.grid tr.is-bad td:nth-last-child(3) { color: var(--danger); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.badge--bad { background: rgba(255, 143, 143, .15); color: var(--danger); }
.fine--top { margin: 0 0 1rem; }

/* The answer to a button on /admin - the same box as .error, in the other colour. */
.notice {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: var(--radius);
    background: rgba(124, 196, 255, .1);
    border: 1px solid rgba(124, 196, 255, .35);
}

/* One line per thing that can be done for a person: the button, then what it is for. */
.help { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.help li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.help form.inline { display: inline; margin-right: .5rem; }
.card--admin .btn--small { width: auto; }

.invite-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; }
.invite-form .field { margin-bottom: 0; }
.invite-form .btn { width: auto; }
@media (max-width: 40rem) { .invite-form { grid-template-columns: 1fr; } }

/* An invitation link is long and has no spaces; it must wrap, and one tap selects it all. */
.invite-link {
    padding: .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
    letter-spacing: 0;
}