:root { color-scheme: light; --ink: #1d1d1b; --muted: #6b6b66; --bg: #faf9f6; --line: #e4e2dc; --live: #b4432c; }
body { margin: 0; padding: 0 16px; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main, header.top, footer { max-width: 760px; margin: 0 auto; }
header.top { padding: 20px 0 8px; }
header.top h1 { margin: 0; font-size: 22px; font-weight: 600; }
header.top h1 a { color: inherit; text-decoration: none; }
.tagline { margin: 4px 0 0; color: var(--muted); }
#controls { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
#controls[hidden] { display: none; }
#controls fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
#controls legend { padding: 0; margin-right: 6px; color: var(--muted); }
.banner { background: #fff4e5; border: 1px solid #f0c98a; padding: 8px 12px; border-radius: 6px; }
h2.group { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px; }
ul.rows { list-style: none; margin: 0; padding: 0; }
li.row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
li.row .when { font-variant-numeric: tabular-nums; }
li.row .rel { display: block; color: var(--muted); font-size: 13px; }
li.row .channel { font-weight: 600; overflow-wrap: anywhere; }
li.row .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
li.row .tags, li.row .checked { display: block; color: var(--muted); font-size: 13px; }
li.row .evidence { display: block; font-size: 13px; }
li.row[data-state="live"] .evidence { color: var(--live); font-weight: 600; }
li.row .yt { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
li.row .yt img { height: 38px; width: auto; display: block; }  /* the mark is 579 of the PNG's 1075 px, so about 20 px tall (spec §6.4) */
.empty { padding: 24px 0; color: var(--muted); }
footer { padding: 28px 0 40px; color: var(--muted); font-size: 13px; }
.disclosure { border-left: 3px solid var(--line); padding-left: 10px; }
.prose h2 { margin-top: 28px; }
@media (max-width: 480px) { li.row { grid-template-columns: minmax(0, 1fr) auto; } li.row .when { grid-column: 1 / span 2; } li.row .yt { grid-column: 2; grid-row: 2; } }