/* The account's only stylesheet.
 *
 * It uses the exchange's palette (web-market/src/theme.ts) so the page a person
 * signs in on and the products it leads to read as one service. There is no web
 * font: the system face renders before anything loads, which matters most on
 * the one page everybody sees first. */
:root {
    color-scheme: light dark;
    --surface: #ffffff;
    --surface-sunken: #f7f9fb;
    --ink: #17212b;
    --ink-muted: #55636f;
    --border: #e3e8ed;
    --accent-soft: #eaf4fc;
    --accent: #1b6fb5;
    --accent-ink: #ffffff;
    --radius: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface: #17212b;
        --surface-sunken: #131c25;
        --ink: #e7edf3;
        --ink-muted: #a3b1bf;
        --border: #24303d;
        --accent-soft: #14283a;
        --accent: #4ea3e8;
        --accent-ink: #0d1620;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--surface-sunken);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 650;
}

.mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 700;
}

.page {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}

h1 {
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.01em;
}

.lead {
    margin: 0 0 24px;
    color: var(--ink-muted);
}

.notice {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.card + .card {
    margin-top: 16px;
}

.products {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.products a {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.products a:hover {
    border-color: var(--accent);
}

.action {
    display: inline-block;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.quiet {
    color: var(--accent);
    text-decoration: none;
}

.hint {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
}

.widget {
    min-height: 48px;
    margin: 4px 0 12px;
}