:root {
    color-scheme: light dark;
    --bg: #f6f7f9;
    --card: #ffffff;
    --ink: #16181d;
    --muted: #616776;
    --line: #e3e6ec;
    /* Interactive boundaries need 3:1 against their background (WCAG 1.4.11).
       --line is decorative and does not meet it, so controls use --edge. */
    --edge: #848da1;
    --accent: #1d4ed8;
    --accent-ink: #ffffff;
    --error-bg: #fdeeee;
    --error-ink: #96242b;
    --error-line: #e7b3b7;
    --notice-bg: #edf6ee;
    --notice-ink: #1f6b34;
    --notice-line: #a8d3b4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1014;
        --card: #171a21;
        --ink: #eef0f4;
        --muted: #9aa2b1;
        --line: #262b35;
        --edge: #667289;
        --accent: #6f92ff;
        --accent-ink: #0e1014;
        --error-bg: #3a1f22;
        --error-ink: #ffb3b8;
        --error-line: #6b3a3f;
        --notice-bg: #1a2f22;
        --notice-ink: #a5e2ba;
        --notice-line: #35603f;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.shell {
    max-width: 27rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}

.brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    flex: none;
}

.brand-name { font-weight: 650; letter-spacing: -0.01em; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

/* A trailing status line reserves space for a message that has nothing below
   it to hold in place, so the card absorbs the reserve instead of gaping. */
.card:has(> .hint:last-child) { padding-bottom: 0; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.375rem; letter-spacing: -0.02em; }
h2 { font-size: 1.0625rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }

.lede { color: var(--muted); margin: 0 0 1.25rem; }

/* 1.55em, not 1.2em: it must reserve a whole inherited line box, or the layout
   still jumps by the difference the moment a message appears. */
.hint { color: var(--muted); font-size: 0.8125rem; margin: 0.625rem 0 0; min-height: 1.55em; }
.hint-error { color: var(--error-ink); }
.hint a, .lede a { color: var(--accent); }

.btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--edge);
    border-radius: 0.625rem;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 550;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.btn:hover { border-color: var(--muted); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
/* An accent ring on an accent button reads as a blur, not a focus indicator. */
.btn-primary:focus-visible { outline-color: var(--ink); }

.btn-provider { margin-bottom: 0.5rem; }

.btn-quiet {
    width: auto;
    /* 44px minimum: this is the button that deletes someone's only way in. */
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
}

.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* The preceding status line already supplies the gap above the rule. */
.hint + .divider { margin-top: -0.625rem; }

.stack { display: grid; gap: 0.5rem; margin: 0; }
.stack label { font-size: 0.8125rem; font-weight: 550; color: var(--muted); }
.stack button { margin-top: 0.25rem; }

.stack input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--edge);
    border-radius: 0.625rem;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    transition: border-color 120ms ease;
}

/* opacity:1 because Firefox dims placeholders by default, undoing the colour. */
.stack input::placeholder { color: var(--muted); opacity: 1; }

.stack input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.alert {
    /* Matches the card's own text inset (24px padding + 1px border) so the
       message lines up with the heading below it instead of sitting proud. */
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.875rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.alert-error { background: var(--error-bg); border-color: var(--error-line); color: var(--error-ink); }
.alert-notice { background: var(--notice-bg); border-color: var(--notice-line); color: var(--notice-ink); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; font-size: 0.875rem; }
.facts dt { color: var(--muted); }
/* Only the opaque id may break mid-token; a timestamp must break on its space. */
.facts dd { margin: 0; overflow-wrap: break-word; }
.facts code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; word-break: break-all; }

.list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }

.list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    font-size: 0.875rem;
}

.list small { display: block; color: var(--muted); font-size: 0.75rem; }
.list form { margin: 0; }

/* A row that holds more than one control needs the buttons kept together, or
   they collapse into the gap the flex row already puts between the two sides. */
.row-actions { display: flex; gap: 0.375rem; flex-shrink: 0; }

/* Label, field and button on one line on a wide screen, stacked on a narrow one.
   The field is the only part allowed to grow. */
.row-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.row-form label { font-size: 0.8125rem; font-weight: 550; color: var(--muted); flex: 0 0 auto; }

/* .btn is full width by design elsewhere; on a one-line form that pushes the
   button onto its own row and makes a small action look like a primary one. */
.row-form button { flex: 0 0 auto; width: auto; }

.row-form input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--edge);
    border-radius: 0.625rem;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    transition: border-color 120ms ease;
}

.row-form input::placeholder { color: var(--muted); opacity: 1; }
.row-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.provider-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
.provider-row .btn { width: auto; }

.plain { margin: 0 0 1rem 1.125rem; padding: 0; font-size: 0.875rem; color: var(--muted); }
.plain li { margin-bottom: 0.25rem; }

/* Destructive actions are named by colour as well as by wording, but the colour
   is never the only signal — the button still says what it will do. */
.btn-danger { border-color: var(--error-line); color: var(--error-ink); }
.btn-danger:hover { background: var(--error-bg); border-color: var(--error-ink); }

/* Permissions are a statement, not a control — the bordered row treatment used
   elsewhere in .list makes them look clickable. */
.scopes li {
    justify-content: flex-start;
    gap: 0.625rem;
    border: none;
    padding: 0.125rem 0;
}

.scopes li::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
}

.foot { color: var(--muted); font-size: 0.8125rem; text-align: center; margin-top: 1.5rem; }
.foot p { margin: 0; }