/* Agency UI. No external stylesheet, no font service, nothing to whitelist in the CSP. */
:root {
    --ink: #1a1d21;
    --muted: #5c6470;
    --line: #dfe3e8;
    --bg: #f7f8fa;
    --panel: #ffffff;
    --accent: #1f5f8b;
    --warn: #8a5a00;
    --bad: #97231f;
    --good: #1f6b3a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); }

header.bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

header.bar nav a { margin-right: 1rem; }

main { max-width: 64rem; margin: 0 auto; padding: 1.5rem; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }

section.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }

.muted { color: var(--muted); }
/* The policy allows no style attributes, so even display:inline lives here. */
.inline-block { display: inline; }
.token { padding: .75rem; background: var(--panel); border: 1px dashed var(--line); border-radius: 4px; user-select: all; word-break: break-all; }
.hash { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .85rem; }
.actions { display: flex; gap: .5rem; margin-top: 1rem; }
.tag { display: inline-block; padding: .1rem .45rem; border-radius: 3px; font-size: .8rem; border: 1px solid currentColor; }
.tag.good { color: var(--good); }
.tag.warn { color: var(--warn); }
.tag.bad { color: var(--bad); }

form.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
input[type="email"], input[type="text"], select {
    padding: .45rem .55rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font: inherit;
    min-width: 18rem;
}
td select { min-width: 7rem; }
.field { margin-bottom: 1.25rem; }
.field .muted { margin: .35rem 0 0; }
input[type="number"] { padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; width: 8rem; }
button {
    padding: .5rem .9rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}
button.quiet { background: transparent; color: var(--accent); }

.notice { padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid; }
.notice.bad { color: var(--bad); background: #fdf3f2; }
.notice.good { color: var(--good); background: #f1f8f3; }

.signin { max-width: 26rem; margin: 6rem auto; text-align: center; }