/* Civic Memory. Archival, not editorial: quiet surface, loud evidence.
   Status is always icon-or-word plus colour, never colour alone. */
:root {
  color-scheme: dark light;
  --page:    #0e1013;
  --surface: #171a1f;
  --raised:  #1e222a;
  --line:    #2a2f38;
  --ink:     #eef1f5;
  --ink-2:   #b9c1cd;
  --muted:   #7e8797;
  --accent:  #6ea8fe;
  /* event-type colours, carried forward from v0.1. Colour is keyed to the TYPE
     of event, not its severity, because severity collapses four meanings into
     three and leaves most of the timeline grey. The label is always present, so
     colour is never carrying the meaning on its own. */
  --t-first:  #72d7a0;
  --t-change: #ffc76b;
  --t-gone:   #ff7d7d;
  --t-recov:  #72b7ff;
  --t-unavail:#c58af9;
  --good:    #3fb950;
  --warn:    #d29922;
  --crit:    #f85149;
  --add:     #2ea04326;
  --del:     #f8514926;
  --radius:  10px;
  --wrap:    68rem;
}
@media (prefers-color-scheme: light) {
  :root {
    --page:#f7f8fa; --surface:#fff; --raised:#f0f2f6; --line:#dde1e8;
    --ink:#12151a; --ink-2:#414b59; --muted:#6a7382; --accent:#0b5ed7;
    --add:#2ea04322; --del:#f8514922;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page); color: var(--ink-2);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: var(--wrap); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }

/* header */
header.site {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.mark { width: 34px; height: 34px; }
.mark .ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .55; }
.mark .hand { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.mark .arc  { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.wordmark { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.wordmark .thin { font-weight: 300; color: var(--ink-2); }
header nav { margin-left: auto; display: flex; gap: 1.15rem; flex-wrap: wrap; }
header nav a { color: var(--ink-2); font-size: .95rem; }
header nav a.api { color: var(--muted); font-family: ui-monospace, monospace; font-size: .85rem; }

/* hero */
.hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--line); }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 46rem; }
.claim { max-width: 46rem; padding: .9rem 1.1rem; background: var(--surface);
         border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.button {
  display: inline-block; padding: .6rem 1.15rem; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-weight: 600; font-size: .95rem;
}
.button:hover { text-decoration: none; filter: brightness(1.1); }
.button.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }

/* stats */
.stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         background: var(--line); border: 1px solid var(--line);
         border-radius: var(--radius); overflow: hidden; margin: 2rem 0; }
.stat { background: var(--surface); padding: 1.1rem 1.25rem; }
.stat .n { display: block; font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat .l { display: block; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat.critical .n { color: var(--t-gone); }
.stat.change .n   { color: var(--t-change); }
.stat.good .n     { color: var(--t-first); }
.stat.info .n     { color: var(--t-recov); }

/* events */
ol.events { list-style: none; margin: 0; padding: 0; }
.event { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .6rem; }
.event > a { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; color: var(--ink); }
.event .what { font-weight: 600; }
.event .agency, .event .when { color: var(--muted); font-size: .85rem; }
.event .when { margin-left: auto; font-family: ui-monospace, monospace; }
.event .sum { margin: .45rem 0 0; font-size: .92rem; color: var(--ink-2); }
.event.disappeared { border-left: 3px solid var(--t-gone); }
.event.changed     { border-left: 3px solid var(--t-change); }
.event.recovered   { border-left: 3px solid var(--t-recov); }
.event.first_seen  { border-left: 3px solid var(--t-first); }
.event.unavailable { border-left: 3px solid var(--t-unavail); }

.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px;
         font-size: .72rem; font-weight: 700; text-transform: uppercase;
         letter-spacing: .04em; border: 1px solid var(--line); color: var(--ink-2); }
.badge::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 50%; margin-right: .4rem; vertical-align: baseline;
  background: currentColor;
}
.badge.archive::before, .derived-tag::before { display: none; }
.badge.info { color: var(--ink-2); }
.badge.warning { color: var(--warn); border-color: var(--warn); }
.badge.critical { color: var(--crit); border-color: var(--crit); }

/* by event type */
.badge.t-first_seen  { color: var(--t-first);   border-color: var(--t-first); }
.badge.t-changed     { color: var(--t-change);  border-color: var(--t-change); }
.badge.t-disappeared { color: var(--t-gone);    border-color: var(--t-gone); }
.badge.t-recovered   { color: var(--t-recov);   border-color: var(--t-recov); }
.badge.t-unavailable { color: var(--t-unavail); border-color: var(--t-unavail); }

/* filters */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0 1.5rem; }
.filters input, .filters select, .filters button {
  padding: .5rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: .92rem;
}
.filters input { flex: 1 1 18rem; }
.filters button { background: var(--accent); color: #fff; border-color: transparent;
                  font-weight: 600; cursor: pointer; }
.filters .clear { align-self: center; color: var(--muted); font-size: .85rem; }

/* tables */
table.kv, table.grid { width: 100%; border-collapse: collapse; margin: 1rem 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.kv th, table.kv td, table.grid th, table.grid td {
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: .92rem;
}
table.kv th { width: 12rem; color: var(--muted); font-weight: 600; }
table.grid th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
table tr:last-child th, table tr:last-child td { border-bottom: none; }
tr.failed td { color: var(--muted); }
tr.disabled { opacity: .55; }
.err { color: var(--crit); }
.hash { word-break: break-all; color: var(--ink); }
.hash.short { color: var(--ink-2); }
.dl { font-size: .82rem; margin-right: .6rem; white-space: nowrap; }

/* derived */
.derived-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .5rem; border: 1px dashed var(--muted); border-radius: 999px;
  color: var(--muted); vertical-align: middle; margin-left: .4rem; }
.derived-note { font-size: .88rem; color: var(--muted); background: var(--raised);
  border: 1px dashed var(--line); border-radius: var(--radius); padding: .75rem .95rem; }

pre.diff { overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem; font-size: .82rem; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: .8rem 0; }
pre.diff span { display: block; white-space: pre; padding: 0 .3rem; }
pre.diff span.add { background: var(--add); color: var(--good); }
pre.diff span.del { background: var(--del); color: var(--crit); }
pre.diff span.hunk { color: var(--accent); }

/* misc */
.cols { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cols > div { background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 1.1rem; }
.cols p { margin: 0; font-size: .92rem; }
.crumb { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; }
.empty { color: var(--muted); font-style: italic; }
.record .sum { font-size: 1.02rem; color: var(--ink-2); }

footer.site { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
footer .invariant { color: var(--ink-2); }
footer strong { color: var(--ink); }

/* third-party provenance. an imported row must never read as one of ours. */
.badge.archive { color: var(--accent); border-color: var(--accent); border-style: dashed; }
.muted-inline { color: var(--muted); font-size: .85em; }
.thirdparty { background: var(--raised); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: .8rem 1rem; font-size: .9rem; color: var(--ink-2); }
.thirdparty strong { color: var(--ink); }

.resultline { color: var(--muted); font-size: .9rem; margin: -.5rem 0 1.25rem; }
.resultline strong { color: var(--ink); }
.resultline .badge { margin: 0 .25rem; }
.api-table td:first-child { white-space: nowrap; }
.api-table code { color: var(--ink); }