/* Deliberately plain. This is an operations tool: legibility and density matter, decoration does not. */
:root {
    --ink: #1b1f23;
    --muted: #57606a;
    --line: #d0d7de;
    --surface: #ffffff;
    --page: #f6f8fa;
    --accent: #0b5cad;
    --bad: #a40e26;
    --warn: #8a6100;
    --good: #1a7f37;
}

* { box-sizing: border-box; }

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

.masthead {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.masthead nav { display: flex; gap: 1rem; }
.masthead nav a { color: var(--accent); text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.sign-out { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.signed-in-as { color: var(--muted); font-size: .875rem; }

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

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

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f0f4f8; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .875rem; }
.card .label { font-size: .8125rem; color: var(--muted); }
.card .value { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.card.attention .value { color: var(--bad); }

form.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
form.filters label { display: flex; flex-direction: column; font-size: .8125rem; color: var(--muted); gap: .25rem; }
input, select, textarea { font: inherit; padding: .375rem .5rem; border: 1px solid var(--line); border-radius: 4px; }
button { font: inherit; padding: .375rem .875rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.notice { padding: .625rem .875rem; border-radius: 4px; border: 1px solid; }
.notice-success { background: #eaf6ec; border-color: var(--good); color: var(--good); }
.notice-warning { background: #fdf6e3; border-color: var(--warn); color: var(--warn); }
.validation { color: var(--bad); }

.status { font-size: .8125rem; padding: .125rem .5rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.status-good { color: var(--good); border-color: var(--good); }
.status-bad { color: var(--bad); border-color: var(--bad); }
.status-warn { color: var(--warn); border-color: var(--warn); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 12rem 16rem 1fr; gap: .75rem; }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .metadata { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; word-break: break-all; }

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

.sign-in { max-width: 22rem; margin: 4rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem; }
.sign-in label { display: block; margin-bottom: .75rem; }
.sign-in input { width: 100%; }

footer { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 3rem; color: var(--muted); font-size: .8125rem; }

.pagination { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.empty { color: var(--muted); padding: 1.5rem; background: var(--surface); border: 1px dashed var(--line); border-radius: 6px; }