/* Varhall's look: plain, calm and readable on phones. Colours as variables, with a dark
   version for devices set to dark mode. */
:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --text: #1f2933;
    --muted: #52606d;
    --accent: #1f4e79;
    --accent-text: #ffffff;
    --border: #cbd2d9;
    --error: #b42318;
    --notice-bg: #e8f1fb;
    --warn-bg: #fff4e5;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111820;
        --card: #1b2530;
        --text: #e4e7eb;
        --muted: #a3b0bd;
        --accent: #7fb3e6;
        --accent-text: #0d1720;
        --border: #3e4c59;
        --error: #ff8a80;
        --notice-bg: #17324d;
        --warn-bg: #3d2e12;
    }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--accent); }

/* Strip on top of the test site's pages (partials/test-site). */
.test-site { margin: 0; padding: .3rem 1rem; background: var(--warn-bg); color: var(--text);
             font-size: .85rem; text-align: center; }
body.auth .test-site { align-self: stretch; margin: -2rem -1rem 1.5rem; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }

/* Sign-up and sign-in pages: one card in the middle. */
body.auth { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; }
.card {
    width: 100%;
    max-width: 26rem;
    background: var(--card);
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.card.wide { max-width: 44rem; }
.card h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.card ul { padding-left: 1.25rem; }
.card li { margin: .35rem 0; }
.brand { margin: 0 0 1.25rem; font-weight: 700; font-size: 1.25rem; }
.brand a, a.brand { color: var(--accent); text-decoration: none; }

/* App pages: a bar at the top and the page below. */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.topbar .company { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar form { margin: 0; }
.page { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem; }

/* Forms */
label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
input[type=email], input[type=password], input[type=text], input[type=tel] {
    width: 100%;
    padding: .65rem .75rem;
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
input[aria-invalid=true] { border-color: var(--error); }
form.narrow { max-width: 26rem; }
form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
form .row { display: flex; gap: .75rem; }
form .row .postal { flex: 0 0 7.5rem; }
form .row .grow { flex: 1; min-width: 0; }
button, a.button {
    display: inline-block;
    width: 100%;
    margin-top: 1.25rem;
    padding: .7rem 1rem;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--accent-text);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
}
button.secondary { color: var(--accent); background: transparent; }
button.link { width: auto; margin: 0; padding: 0; color: var(--accent); background: none; border: 0; font-weight: 400; text-decoration: underline; }
.topbar button.link { white-space: nowrap; }
.or { text-align: center; color: var(--muted); margin: 1rem 0 0; }

/* Messages */
.small { font-size: .9rem; color: var(--muted); }
.error { color: var(--error); margin: .3rem 0 0; font-size: .95rem; }
.notice { background: var(--notice-bg); padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.notice.warn { background: var(--warn-bg); }
.notice.warn p { margin: 0; }
.notice.warn button { width: auto; margin-top: .75rem; }
div.notice p, section.notice p { margin: 0 0 .5rem; }
div.notice p:last-child, section.notice p:last-child { margin-bottom: 0; }

/* Lists of links, page sections and smaller pieces */
h2 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.notice h2 { margin-top: 0; }
ul.links { padding-left: 1.2rem; }
ul.links li { margin: .3rem 0; }
button.inline { width: auto; }
details { margin: 1.25rem 0 0; }
summary { cursor: pointer; color: var(--accent); }

/* Welcome page while Varhall is being built */
.lead { font-size: 1.1rem; }
ul.coming { padding-left: 1.2rem; }
ul.coming li { margin: .35rem 0; }
section.beta {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.5rem;
    margin: 1.5rem 0;
    max-width: 36rem;
}
section.beta h2 { margin-top: 0; }
section.beta button.link { margin-top: .5rem; }
textarea {
    width: 100%;
    padding: .65rem .75rem;
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    resize: vertical;
}
textarea[aria-invalid=true] { border-color: var(--error); }
ul.links.small { color: var(--muted); }
a.button.inline { width: auto; margin-top: 0; }
ol.testers li { margin: .6rem 0; }
ol.testers .note { white-space: pre-line; }

/* Users page and company switch */
ul.people { list-style: none; padding: 0; margin: 0 0 1rem; }
li.person { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; margin: 0 0 .6rem; }
li.person.disabled { opacity: .65; }
li.person form { margin: .5rem 0 0; }
.person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.person-actions form { display: flex; align-items: center; gap: .5rem; }
.person-actions button.inline { margin-top: 0; padding: .45rem .8rem; }
form.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
form.switch-row button.inline { margin-top: 0; }
select {
    padding: .5rem .6rem;
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
form.narrow select { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.company { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }

/* Two-step login: the QR code, the key and the codes */
input.code { font-size: 1.2rem; letter-spacing: .15em; max-width: 14rem; }
ol.steps li { margin: 0 0 1rem; }
.qr { margin: .75rem 0; }
.qr svg { display: block; width: 220px; max-width: 100%; height: auto; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code.secret { font-size: 1.05rem; color: var(--text); }
ol.codes { columns: 2; column-gap: 2rem; font-size: 1.1rem; padding-left: 1.8rem; }
ol.codes li { margin: .2rem 0; }

/* Printing (the recovery codes): only the page content, without buttons and menus. */
.print-only { display: none; }
@media print {
    body { background: #fff; color: #000; }
    .topbar, .languages, .no-print, button, form, p[role=status] { display: none !important; }
    .notice { background: none; padding: 0; }
    .print-only { display: block; }
}

.languages { margin: 1.5rem auto; text-align: center; font-size: .9rem; color: var(--muted); }
.languages a, .languages strong { margin: 0 .5rem; }
nav.languages + p.languages { margin-top: -.75rem; }

/* Audit log (company/audit-log) */
form.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: 0 0 1rem; }
form.filters label { margin-top: 0; }
form.filters button.inline { margin-top: 0; padding: .55rem .9rem; }
ul.log { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.log li { padding: .55rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
p.paging { display: flex; justify-content: space-between; gap: 1rem; }

/* Messages to all users and the two-step login suggestion (layouts/app) */
.notice.announcement { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.notice.announcement p { margin: 0; white-space: pre-line; }
.notice.announcement button.link { margin: 0; white-space: nowrap; }
.notice.suggestion p { margin: 0 0 .6rem; }
.notice.suggestion .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.notice.suggestion a.button { width: auto; margin: 0; padding: .5rem 1rem; }
.notice.suggestion form { margin: 0; }
.notice.suggestion button.link { margin: 0; }