:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #1d1d1b;
  --muted: #6b6a66;
  --border: #e2e0da;
  --accent: #3a5bd9;
  --accent-text: #ffffff;
  --warm: #c2410c;
  --warm-bg: #fff1e6;
  --cold: #3f5f7f;
  --cold-bg: #e8eef5;
  --vip: #7c3aed;
  --vip-bg: #f1e9ff;
  --ok: #15803d;
  --ok-bg: #e7f6ec;
  --bad: #b91c1c;
  --bad-bg: #fdecec;
  --warn: #a16207;
  --warn-bg: #fdf6e3;
  --code-bg: #f0efea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615;
    --surface: #1f1f1d;
    --text: #ecebe6;
    --muted: #9a9993;
    --border: #34332f;
    --accent: #7c95f0;
    --accent-text: #0f0f0e;
    --warm: #fb923c;
    --warm-bg: #3a2414;
    --cold: #93b4d6;
    --cold-bg: #1d2a38;
    --vip: #c4a5ff;
    --vip-bg: #2c2140;
    --ok: #4ade80;
    --ok-bg: #15301f;
    --bad: #f87171;
    --bad-bg: #3a1a1a;
    --warn: #facc15;
    --warn-bg: #3a3214;
    --code-bg: #2a2a27;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: 0.4em 0; }
h2 { font-size: 1.1rem; margin: 0 0 0.6em; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--code-bg); padding: 10px; border-radius: 6px; font-size: 0.85rem; max-height: 400px; overflow: auto; }
blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--border); color: var(--muted); font-style: italic; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.top nav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.top nav a { text-decoration: none; color: var(--text); }
.top .brand { font-weight: 700; }
.me { display: flex; gap: 12px; align-items: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 14px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 0.85rem; }

input, select, textarea, button, .button {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px;
}
textarea { width: 100%; }
button, .button { cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { border-color: var(--accent); }
.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.link { border: none; background: none; color: var(--accent); padding: 0; }
button.small, .small { font-size: 0.8rem; }
button.small { padding: 2px 8px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
form.stack { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
form.stack label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters input { flex: 1 1 200px; }

.muted { color: var(--muted); }
.error { color: var(--bad); }
.ok { color: var(--ok); }
.retired { opacity: 0.55; text-decoration: line-through; }
tr.dnc { opacity: 0.6; }

.tag, .tier, .vip, .badge, .status {
  display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--code-bg); color: var(--muted); vertical-align: middle; text-decoration: none;
}
.tier.warm { background: var(--warm-bg); color: var(--warm); }
.tier.cold { background: var(--cold-bg); color: var(--cold); }
.vip { background: var(--vip-bg); color: var(--vip); }
.v-verified, .s-done, .s-accepted { background: var(--ok-bg); color: var(--ok); }
.v-not_found, .v-gone, .v-fetch_failed, .s-failed, .s-rejected { background: var(--bad-bg); color: var(--bad); }
.v-pending, .s-queued, .s-running { background: var(--warn-bg); color: var(--warn); }

/* Deadlines: the closer, the louder. */
.dl-overdue, .dl-soon { color: var(--bad); font-weight: 600; }
.dl-upcoming { color: var(--warn); font-weight: 600; }
.deadlines .when { white-space: nowrap; }
.dl-banner { padding: 8px 10px; border-radius: 8px; margin: 6px 0; font-weight: normal; }
.dl-banner.dl-overdue, .dl-banner.dl-soon { background: var(--bad-bg); }
.dl-banner.dl-upcoming { background: var(--warn-bg); }
.dl-banner.dl-later { background: var(--code-bg); color: var(--text); }

.summary .hint { background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; }
.timeline { list-style: none; padding-left: 0; }
.timeline li { margin: 4px 0; }
.date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; white-space: nowrap; }
a.src { font-size: 0.72rem; text-decoration: none; background: var(--code-bg); border-radius: 4px; padding: 0 4px; margin-left: 2px; }

.proposal { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: var(--surface); }
.proposal header { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proposal .diff { margin: 6px 0; }
.proposal del { color: var(--bad); }
.proposal ins { color: var(--ok); text-decoration: none; }
.proposal .rationale { color: var(--muted); margin: 4px 0; }
.proposal form.decide { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.proposal form.decide input { flex: 1 1 200px; }
.evidence { margin: 6px 0; font-size: 0.9rem; word-break: break-all; }

details.msg { border-bottom: 1px solid var(--border); padding: 4px 0; }
details.msg summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.msg.inbound .dir { color: var(--ok); }
details.msg.outbound .dir { color: var(--accent); }
details.msg.automated { opacity: 0.6; }
details.msg:target { background: var(--warn-bg); }
.log { list-style: none; padding: 0; margin: 0; }
.log li { padding: 3px 0; border-bottom: 1px solid var(--border); }

.login { max-width: 360px; margin: 15vh auto; text-align: center; }

@media (max-width: 640px) {
  .top nav { gap: 10px; }
  th, td { padding: 5px 4px; }
}

/* Email sending: test mode must be impossible to miss. */
.badge.mode-test { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.badge.mode-live { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.mode-note { padding: 8px 10px; border-radius: 6px; }
.mode-note.test { background: var(--warn-bg); }
.mode-note.live { background: var(--bad-bg); }
fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
legend { color: var(--muted); font-size: 0.85rem; }
label.check { display: flex; gap: 6px; align-items: baseline; flex-direction: row; color: var(--text); }
h3 { font-size: 1rem; margin: 1em 0 0.4em; }

/* Structure page: summaries, conversations, internal comments. */
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.facts { margin: 4px 0; }
.profile-sentences { padding-left: 1.1em; margin: 6px 0; }
.profile-sentences li { margin: 4px 0; }
.profile-sentences li.unconfirmed { color: var(--muted); }
details.conv { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
details.conv > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.conv .msg { border-left: 3px solid var(--border); padding: 4px 0 4px 10px; margin: 8px 0; }
details.conv .msg.inbound { border-left-color: var(--ok); }
details.conv .msg.outbound { border-left-color: var(--accent); }
details.conv .msg.automated { opacity: 0.6; }
details.conv .msg:target { background: var(--warn-bg); }
.msg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.comments { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 6px; }
.comment { background: var(--vip-bg); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.comment:target { outline: 2px solid var(--vip); }
.comment-body { white-space: pre-wrap; }
.inline-checks { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 0.9rem; color: var(--muted); }

/* Structures list: one-line summary under each name, full presentation on hover. */
.brief { color: var(--muted); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brief.unconfirmed { font-style: italic; }