/* election.my — the index is a reference work, so it reads like one:
   a text column, identifiers in monospace, and no chrome that competes with
   the data. The one piece of deliberate emphasis is provenance — the matched
   string, method and score sit ON the card, because that is the product. */

:root {
  color-scheme: light dark;
  --bg:        #fbfaf7;
  --panel:     #ffffff;
  --ink:       #16150f;
  --ink-soft:  #57544a;
  --ink-faint: #8b8779;
  --rule:      #e2ded2;
  --accent:    #8c2f1f;   /* oxide red — the seat identifier */
  --accent-bg: #f6ece8;
  --ok:        #2f5d3f;
  --warn:      #8a6d1f;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12120f; --panel:#1b1a16; --ink:#eceadf; --ink-soft:#a8a496;
    --ink-faint:#726e62; --rule:#2e2c25; --accent:#e0836c; --accent-bg:#2a1c17;
    --ok:#7fb28e; --warn:#d3b25c;
  }
}

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

/* ---- masthead ---- */
header.top { border-bottom:1px solid var(--rule); background:var(--panel); }
header.top .wrap { display:flex; align-items:baseline; gap:22px; padding-block:16px; flex-wrap:wrap; }
.brand { font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.01em;
         text-decoration:none; white-space:nowrap; }
.brand span { color:var(--accent); }
.tagline { color:var(--ink-faint); font-size:13px; flex:1 1 auto; min-width:180px; }
nav.top a { font-size:14px; color:var(--ink-soft); text-decoration:none; margin-left:16px; }
nav.top a:hover { color:var(--accent); }

/* ---- generic ---- */
h1 { font-family:var(--serif); font-size:30px; line-height:1.2; margin:26px 0 6px; font-weight:600; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
     margin:34px 0 12px; font-weight:600; }
.lede { color:var(--ink-soft); margin:0 0 4px; max-width:62ch; }
.code { font-family:var(--mono); font-size:.86em; }
.eid  { font-family:var(--mono); font-size:12px; color:var(--accent);
        background:var(--accent-bg); padding:1px 6px; border-radius:3px;
        text-decoration:none; white-space:nowrap; }
.muted { color:var(--ink-faint); }

/* ---- stat strip ---- */
.stats { display:flex; flex-wrap:wrap; gap:2px; margin:20px 0 8px;
         border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--rule); }
.stat { flex:1 1 130px; background:var(--panel); padding:12px 14px; }
.stat b { display:block; font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.02em; }
.stat span { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); }

/* ---- article cards ---- */
.feed { list-style:none; padding:0; margin:0; }
.feed li { border-top:1px solid var(--rule); padding:16px 0; }
.feed li:last-child { border-bottom:1px solid var(--rule); }
.art-title { font-family:var(--serif); font-size:19px; line-height:1.32; margin:0 0 5px;
             font-weight:600; }
.art-title a { text-decoration:none; }
.art-title a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.art-snip { margin:0 0 9px; color:var(--ink-soft); font-size:14.5px; max-width:66ch; }
.art-meta { font-size:12px; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap;
            align-items:center; }
.art-meta .dot::before { content:"·"; margin-right:10px; }

/* provenance — the point of the whole thing */
.prov { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
        border:1px solid var(--rule); border-radius:999px; padding:2px 9px;
        background:var(--panel); text-decoration:none; color:var(--ink-soft); }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip b { font-family:var(--mono); font-weight:600; color:var(--accent); font-size:11px; }
.chip i { font-style:normal; color:var(--ink-faint); }

/* ---- seat grids ---- */
.grid { display:grid; gap:2px; background:var(--rule); border:1px solid var(--rule);
        border-radius:6px; overflow:hidden;
        grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.cell { background:var(--panel); padding:10px 12px; text-decoration:none; display:block; }
.cell:hover { background:var(--accent-bg); }
.cell .n { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.cell .nm { display:block; font-weight:600; font-size:14.5px; margin:1px 0; }
.cell .c  { font-family:var(--mono); font-size:12px; color:var(--accent); }
.cell.empty .c { color:var(--ink-faint); }
.cell.empty .nm { font-weight:500; color:var(--ink-soft); }

/* ---- search ---- */
form.q { display:flex; gap:8px; margin:18px 0 6px; flex-wrap:wrap; }
form.q input[type=text] { flex:1 1 260px; font:inherit; padding:10px 12px;
  border:1px solid var(--rule); border-radius:5px; background:var(--panel); color:var(--ink); }
form.q select { font:inherit; padding:10px; border:1px solid var(--rule);
  border-radius:5px; background:var(--panel); color:var(--ink); }
form.q button { font:inherit; font-weight:600; padding:10px 20px; border:0; border-radius:5px;
  background:var(--accent); color:#fff; cursor:pointer; }

.verdict { border:1px solid var(--rule); border-left:3px solid var(--rule);
           border-radius:5px; background:var(--panel); padding:14px 16px; margin:16px 0; }
.verdict.matched  { border-left-color:var(--ok); }
.verdict.no_match { border-left-color:var(--warn); }
.verdict.stopped  { border-left-color:var(--ink-faint); }
.verdict h3 { margin:0 0 6px; font-size:15px; }
.verdict p { margin:0; color:var(--ink-soft); font-size:14px; max-width:64ch; }
.verdict ul { margin:10px 0 0; padding-left:0; list-style:none; }
.verdict li { padding:7px 0; border-top:1px solid var(--rule); font-size:14px; }

table.kv { border-collapse:collapse; width:100%; font-size:14px; }
table.kv td { padding:7px 10px 7px 0; border-top:1px solid var(--rule); vertical-align:top; }
table.kv td:first-child { color:var(--ink-faint); width:150px; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em; }

.pager { display:flex; gap:12px; margin:22px 0; font-size:14px; }
.pager a { color:var(--accent); }

.note { font-size:13px; color:var(--ink-faint); border-top:1px solid var(--rule);
        margin-top:34px; padding-top:14px; max-width:70ch; }
footer.bot { margin-top:44px; border-top:1px solid var(--rule); background:var(--panel); }
footer.bot .wrap { padding:20px; font-size:12.5px; color:var(--ink-faint); }
footer.bot p { margin:0 0 6px; max-width:78ch; }
.warnbar { background:var(--warn); color:#12120f; font-size:13px; padding:7px 0; }