:root {
  --ink: #16181d;
  --ink-2: #4a5160;
  --ink-3: #767f92;
  --rule: #dfe3ea;
  --rule-2: #eef1f5;
  --bg: #fbfbfc;
  --card: #ffffff;
  --accent: #9a2b1f;
  --accent-soft: #fbf1ef;
  --ok: #1c6b4a;
  --ok-soft: #eef6f2;
  --warn: #8a5a00;
  --warn-soft: #fdf5e6;
  --bad: #99231c;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* masthead */
.masthead { border-bottom: 1px solid var(--rule); background: var(--card); }
.masthead .wrap { display: flex; align-items: baseline; gap: 32px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.brand { font-weight: 650; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand span { display: block; font-size: 11.5px; font-weight: 450; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.masthead nav { display: flex; gap: 22px; margin-left: auto; }
.masthead nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 550; }

main { padding: 34px 24px 20px; }
footer { padding: 28px 24px 46px; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--rule-2); margin-top: 40px; }
footer a { color: var(--ink-3); }

h1 { font-size: 25px; letter-spacing: -0.025em; margin: 0 0 6px; font-weight: 650; }
h2 { font-size: 17px; letter-spacing: -0.015em; margin: 34px 0 12px; font-weight: 620; }
h3 { font-size: 14px; margin: 22px 0 8px; font-weight: 620; }
.lede { color: var(--ink-2); margin: 0 0 26px; max-width: 68ch; }
p { max-width: 74ch; }

.flash { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin: 16px 0 0; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #cfe6da; }
.flash.bad { background: var(--accent-soft); color: var(--bad); border: 1px solid #f0d6d2; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); }
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
tr:hover td { background: #fcfcfd; }
td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
td a:hover { border-bottom-color: var(--accent); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.muted { color: var(--ink-3); }

/* pills */
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.pill.open { background: #eef1f5; color: var(--ink-2); }
.pill.awaiting_borrower { background: var(--warn-soft); color: var(--warn); }
.pill.promised { background: var(--ok-soft); color: var(--ok); }
.pill.escalated { background: var(--accent-soft); color: var(--bad); }
.pill.resolved { background: #eef1f5; color: var(--ink-3); }
.pill.review { background: var(--accent-soft); color: var(--bad); }
.pill.kind { background: transparent; border: 1px solid var(--rule); color: var(--ink-3); }

/* cards + panels */
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 20px 22px; margin: 16px 0; }
.panel.tight { padding: 14px 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 15px 17px; }
.stat b { display: block; font-family: var(--mono); font-size: 27px; letter-spacing: -0.03em; font-weight: 550; }
.stat span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.stat.good b { color: var(--ok); }
.stat.warn b { color: var(--warn); }

/* event log */
.log { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.log li { position: relative; padding: 0 0 18px 20px; }
.log li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); border: 2px solid var(--bg); }
.log li.key::before { background: var(--accent); }
.log .k { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.log .t { font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.log .p { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 3px; word-break: break-word; }

/* reply block */
.reply { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; margin: 14px 0; background: var(--card); }
.reply blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--rule); color: var(--ink-2); white-space: pre-wrap; font-size: 14.5px; }
.readout { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.readout div { display: flex; gap: 6px; }
.readout dt { color: var(--ink-3); }
.readout dd { margin: 0; font-family: var(--mono); font-weight: 550; }

/* forms */
button, .btn { font: inherit; font-size: 13.5px; font-weight: 550; padding: 8px 15px; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { border-color: var(--ink-3); }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover { background: #000; }
textarea, input[type=text], select { font: inherit; font-size: 14px; width: 100%; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); }
textarea { font-family: var(--mono); font-size: 13px; min-height: 110px; resize: vertical; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 14px 0 5px; font-weight: 600; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* confusion matrix */
.matrix { font-size: 12.5px; }
.matrix td, .matrix th { padding: 6px 9px; text-align: center; border: 1px solid var(--rule-2); }
.matrix th { border-bottom: 1px solid var(--rule); }
.matrix td:first-child, .matrix th:first-child { text-align: left; font-family: var(--sans); }
.matrix .diag { background: var(--ok-soft); font-weight: 650; }
.matrix .off { background: var(--accent-soft); color: var(--bad); font-weight: 600; }
.matrix .zero { color: #c9cfd9; }
.scroller { overflow-x: auto; }

.prose { max-width: 72ch; }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--rule-2); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 700px) {
  .masthead .wrap { gap: 14px; }
  .masthead nav { margin-left: 0; gap: 16px; flex-wrap: wrap; }
  main { padding-top: 24px; }
}