:root { --ink: #0b0b0b; --ink2: #52514e; --muted: #898781; --line: #e1e0d9; --page: #f9f9f7; --surface: #fff;
  --brand: #0B1F3A; --accent: #2a78d6; --good: #0a7d0a; --warn: #b87700; --bad: #c63131; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--page); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header.top { display: flex; align-items: center; gap: 24px; padding: 12px 28px; background: var(--brand); color: #fff; flex-wrap: wrap; }
header.top a { color: #fff; } .brand { font-weight: 700; } nav a { margin-right: 16px; opacity: .85; } nav a:hover { opacity: 1; }
.who { margin-left: auto; font-size: 13px; opacity: .85; }
.banner { background: #fff6dd; border-bottom: 1px solid #f0dca0; padding: 8px 28px; font-size: 13px; }
main { padding: 24px 28px 64px; max-width: 1400px; }
h1 { font-size: 22px; margin: 0 0 6px; } h2 { font-size: 16px; margin: 28px 0 10px; } h3 { font-size: 14px; margin: 0 0 8px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .ok { color: var(--good); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
table { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12px; color: var(--ink2); background: #fbfbf9; } .num { text-align: right; font-variant-numeric: tabular-nums; }
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font: inherit; cursor: pointer; }
.btn:hover { filter: brightness(1.05); text-decoration: none; } .btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: 3px 9px; font-size: 12px; }
input, select, textarea { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; }
textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.stack { display: flex; flex-direction: column; gap: 10px; } .stack label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); }
.narrow { max-width: 560px; } .filters { display: flex; gap: 10px; margin: 10px 0 14px; align-items: center; } .filters select { width: auto; }
form.inline { display: flex; gap: 6px; align-items: center; } form.inline input, form.inline select { width: auto; }
label.chk { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; font-size: 13px; color: var(--ink); } label.chk input { width: auto; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; } .flash.ok { background: #e7f5e7; } .flash.error { background: #fde8e8; }
.note { background: #f3f6fb; border-left: 3px solid var(--accent); padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; color: var(--ink); }
.card .label { color: var(--ink2); font-size: 13px; } .card .big { font-size: 32px; font-weight: 600; } .card .of { font-size: 16px; color: var(--muted); }
.meter { height: 8px; border-radius: 4px; background: var(--line); margin: 6px 0 8px; } .meter span { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #eee; font-size: 12px; white-space: nowrap; }
.pill.tiny { font-size: 11px; padding: 0 7px; }
.pill.approved { background: #e2f3e2; color: var(--good); } .pill.awaiting-approval { background: #fff3d6; color: var(--warn); }
.pill.partly-approved { background: #eaf5ea; color: var(--good); } .pill.changes-requested { background: #fde3e3; color: var(--bad); } .pill.sent, .pill.published { background: #e3eefc; color: var(--accent); }
.approval-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0; flex-wrap: wrap; }
.tabs a { padding: 8px 12px; color: var(--ink2); border-bottom: 2px solid transparent; } .tabs a.on { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.dot.err { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } @media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
ul.checks { padding-left: 18px; } ul.checks li.error { color: var(--bad); } ul.checks li.warn { color: var(--warn); }
.send { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pv { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-width: 560px; }
.pv img { width: 100%; border-radius: 6px; margin-top: 10px; display: block; } .pv img.portrait { max-width: 320px; }
.pre { white-space: pre-wrap; } .li-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.li-body { white-space: pre-wrap; } .li-body .more { color: var(--muted); cursor: pointer; } .li-actions { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.li-comment { background: #f3f2ef; border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 13px; white-space: pre-wrap; }
.pv.article { max-width: 680px; font-size: 15px; line-height: 1.6; } .pv.article h2 { font-size: 22px; margin: 0 0 6px; } .standfirst { font-size: 16px; color: var(--ink2); }
.pv.mail .mail-head { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; display: grid; gap: 2px; font-size: 13px; }
.pv.mail .pre { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; max-height: 560px; overflow: auto; }
.pv.reddit { border-left: 3px solid #ff4500; }
details.mailbox { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.mail-render { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
ul.people { list-style: none; padding: 0; } ul.people li { padding: 8px 0; border-bottom: 1px solid var(--line); }

.connections td { vertical-align: top; line-height: 1.35; }
.dot-state { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #bbb; }
.connections .ok .dot-state { background: var(--good); } .connections .expiring .dot-state, .connections .unknown .dot-state, .connections .pending .dot-state { background: var(--warn); }
.connections .broken .dot-state, .connections .missing .dot-state { background: var(--bad); } .connections .manual .dot-state { background: #9aa4b2; }
.connections .broken, .connections .missing { color: var(--bad); }