/* ============================================================================
   Reference Archive — v2

   DESIGN PLAN

   Colour.  The ground is paper, not chrome: a warm-biased white (hue 85) that
   reads as stock rather than as a UI surface, against ink with a slight cool
   bias (hue 265) so the two neutrals are picked rather than inherited. Dark
   mode is a darkroom, not an inverted dashboard — near-black with the same
   cool bias, and the amber accent gains chroma there the way safelight does.
   One accent, amber, carried over from v1 because it is already this
   project's identity.

     paper   oklch(0.981 0.006 85)      ink     oklch(0.19 0.014 265)
     dark    oklch(0.155 0.010 265)     amber   oklch(0.52 0.11 70) / 0.80 0.13 78

   The six themes are deliberately NOT colour-coded. Six categorical hues
   cannot clear both the contrast floor and the normal-vision separation floor
   against paper, and they would not be earning it: every theme chip carries
   its name and its count, so colour would be decoration on top of a label
   that already says the same thing. The colour budget goes where colour does
   work — a single amber ramp for lift magnitude, and a reserved status trio
   for source health. All measured: every pair below clears WCAG AA in both
   modes (accent 5.6:1 / 8.5:1, live 5.0 / 8.0, slow 4.7 / 8.5, dormant 5.0 /
   5.6).

   Type.  Fraunces for display — a variable optical-size face with real
   character, already used on the source ledger, so the two artifacts read as
   one project. IBM Plex Sans for interface text, IBM Plex Mono for anything
   countable. Counts, dates and lifts are tabular throughout.

   Layout.  A fixed control rail on the left that is a working instrument —
   every facet carries a live count computed against the other active facets,
   so you can see what a filter will cost before you spend it. The main column
   switches between four views over one dataset. The archive itself is a
   contact sheet: uniform frames edge to edge with a caption strip, the way
   you would look at a sheet of negatives, rather than a card grid with
   generous padding — because the job there is scanning a thousand pictures
   fast, not reading forty.
   ============================================================================ */

:root {
  color-scheme: light;

  --paper:      oklch(0.981 0.006 85);
  --surface:    oklch(1 0 0);
  --surface-2:  oklch(0.962 0.006 85);
  --sunk:       oklch(0.940 0.008 85);
  --line:       oklch(0.888 0.007 85);
  --line-2:     oklch(0.780 0.010 85);

  --ink:        oklch(0.190 0.014 265);
  --ink-2:      oklch(0.435 0.014 265);
  --ink-3:      oklch(0.560 0.012 265);

  --accent:     oklch(0.520 0.110 70);
  --accent-sunk: oklch(0.94 0.035 75);
  --on-accent:  oklch(0.99 0.004 85);

  --live:       oklch(0.520 0.110 155);
  --slow:       oklch(0.545 0.110 65);
  --dormant:    oklch(0.560 0.008 285);

  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Fraunces", Georgia, "Times New Roman", serif;

  --rail: 276px;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      oklch(0.155 0.010 265);
    --surface:    oklch(0.195 0.011 265);
    --surface-2:  oklch(0.232 0.012 265);
    --sunk:       oklch(0.255 0.013 265);
    --line:       oklch(0.295 0.013 265);
    --line-2:     oklch(0.410 0.016 265);

    --ink:        oklch(0.945 0.006 265);
    --ink-2:      oklch(0.760 0.012 265);
    --ink-3:      oklch(0.640 0.013 265);

    --accent:     oklch(0.800 0.130 78);
    --accent-sunk: oklch(0.285 0.045 70);
    --on-accent:  oklch(0.16 0.012 265);

    --live:       oklch(0.790 0.130 155);
    --slow:       oklch(0.800 0.130 78);
    --dormant:    oklch(0.640 0.010 285);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      oklch(0.155 0.010 265);
  --surface:    oklch(0.195 0.011 265);
  --surface-2:  oklch(0.232 0.012 265);
  --sunk:       oklch(0.255 0.013 265);
  --line:       oklch(0.295 0.013 265);
  --line-2:     oklch(0.410 0.016 265);

  --ink:        oklch(0.945 0.006 265);
  --ink-2:      oklch(0.760 0.012 265);
  --ink-3:      oklch(0.640 0.013 265);

  --accent:     oklch(0.800 0.130 78);
  --accent-sunk: oklch(0.285 0.045 70);
  --on-accent:  oklch(0.16 0.012 265);

  --live:       oklch(0.790 0.130 155);
  --slow:       oklch(0.800 0.130 78);
  --dormant:    oklch(0.640 0.010 285);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ shell */

.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.app[hidden] { display: none; }

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.35rem 1.15rem 3rem;
}

.brand { display: flex; flex-direction: column; gap: 0.15rem; }
.brand h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.brand .sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-3);
}

.topbar {
  display: flex; align-items: center; gap: 0.7rem;
  position: sticky; top: 0; z-index: 30;
  margin: -1.6rem -1.9rem 1.3rem; padding: 0.6rem 1.9rem;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .spacer { flex: 1; }

.views { display: flex; gap: 2px; }
.views button {
  padding: 0.34rem 0.7rem; border-radius: 999px;
  font-size: 0.84rem; color: var(--ink-2);
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.views button:hover { background: var(--surface-2); color: var(--ink); }
.views button[aria-current="page"] { background: var(--accent-sunk); color: var(--ink); font-weight: 600; }

.layout { display: flex; gap: 2px; }
.layout button {
  width: 1.85rem; height: 1.65rem; border-radius: 5px;
  color: var(--ink-3); font-size: 0.9rem; line-height: 1;
}
.layout button:hover { background: var(--surface-2); color: var(--ink); }
.layout button[aria-pressed="true"] { background: var(--accent-sunk); color: var(--accent); }

.badge {
  font-family: var(--mono); font-size: 0.62rem; font-variant-numeric: tabular-nums;
  background: var(--accent); color: var(--paper);
  border-radius: 999px; padding: 0 0.32rem; margin-left: 0.35rem;
}

.search { position: relative; }
.search input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid transparent;
  border-radius: 6px;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: var(--line-2); background: var(--surface); outline: none; }
.search .depth {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-top: 0.3rem;
  display: block;
}

.facet { border-top: 1px solid var(--line); padding: 0.55rem 0; }
.facet:first-of-type { border-top: 0; }
.facet > summary {
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.2rem 0.1rem 0.45rem;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::before {
  content: "+"; margin-right: 0.45rem; color: var(--ink-3); font-size: 0.7rem;
}
.facet[open] > summary::before { content: "–"; }
.facet > summary > span:first-child { flex: 1; }
.facet > summary:hover { color: var(--ink); }
.clear { font-size: 0.63rem; color: var(--accent); letter-spacing: 0.04em; }
.more-link {
  font-family: var(--mono); font-size: 0.66rem; padding: 0.3rem 0.45rem; color: var(--accent);
}
.more-link.dim { color: var(--ink-3); }
.facet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.facet li button {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.26rem 0.45rem;
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--ink-2);
  text-align: left;
  transition: background 0.1s var(--ease);
}
.facet li button:hover { background: var(--surface-2); color: var(--ink); }
.facet li button[aria-pressed="true"] { background: var(--accent-sunk); color: var(--ink); font-weight: 600; }
.facet li button[aria-pressed="true"]::before { content: "▸"; color: var(--accent); margin-right: -0.2rem; }
.facet li button .n { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.facet li button[disabled] { opacity: 0.38; cursor: default; }
.facet li button[disabled]:hover { background: none; color: var(--ink-2); }

.rail-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; }
.rail-foot .built { font-family: var(--mono); font-size: 0.63rem; color: var(--ink-3); line-height: 1.5; }
.network {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.02em;
  color: var(--ink-3); display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.network a { color: var(--ink-2); }
.network a:hover { color: var(--accent); }
.theme-toggle {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-2); }

/* ------------------------------------------------------------------- main */

.main { min-width: 0; padding: 1.6rem 1.9rem 6rem; }
.view { display: none; }
.view.on { display: block; }

.head { margin-bottom: 1.5rem; }
.head h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.head p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.head .active {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.85rem;
}
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2);
}
.pill button { color: var(--ink-3); line-height: 1; padding: 0 0.1rem; }
.pill button:hover { color: var(--accent); }

/* ------------------------------------------------------- the contact sheet */

.feed.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.frame {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  text-decoration: none;
  min-width: 0;
  transition: background 0.12s var(--ease);
}
.frame:hover, .frame:focus-visible { background: var(--surface-2); }
.frame:focus-visible { outline-offset: -2px; }

.frame .shot {
  aspect-ratio: 4 / 3;
  background: var(--sunk);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s var(--ease);
}
.frame:hover .shot img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .frame:hover .shot img { transform: none; } }

/* Items with no picture get a typographic frame rather than a grey hole —
   on a contact sheet an empty cell reads as a mistake. */
.frame .noshot {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ink-2);
  padding: 0.75rem;
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

.frame .cap {
  padding: 0.42rem 0.55rem 0.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.16rem; min-width: 0;
}
.frame .cap .t {
  font-size: 0.78rem; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.frame .cap .m {
  display: flex; gap: 0.4rem; align-items: baseline; justify-content: space-between;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.frame .cap .m .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame.gone .cap .t { text-decoration: line-through; color: var(--ink-3); }

/* --------------------------------------------------------------- the brief */

.feed.as-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.15rem;
  /* Cards are as tall as their own content. Stretching them to the tallest in
     the row left a column of empty boxes wherever an item had no picture. */
  align-items: start;
}

/* The list is for reading a lot of titles quickly — the layout you want when
   the question is "what has this source published", not "what does it look
   like". One line per item, date first, so the eye can scan the left edge. */
.feed.as-list { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto auto;
  gap: 0.75rem; align-items: baseline;
  padding: 0.42rem 0.5rem; border-bottom: 1px solid var(--line);
}
.row:hover { background: var(--surface-2); }
.row .d { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }
.row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }
.row.gone .t { text-decoration: line-through; color: var(--ink-3); }
@media (max-width: 700px) {
  .row { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .row .tag, .row .s { display: none; }
}

/* The time chips. These carry the counts that used to sit in the rail beside
   a view that could not honour them, so they are deliberately the first thing
   under the topbar. */
.when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.28rem 0.62rem; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 0.8rem; color: var(--ink-2);
}
.chip .n { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-sunk); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.chip[aria-pressed="true"] .n { color: var(--accent); }
.chip.ghost { border-style: dashed; font-family: var(--mono); font-size: 0.7rem; }
.sortby { margin-left: auto; }

.showing { margin: 0 0 0.5rem; color: var(--ink-2); }
.showing b { color: var(--ink); font-weight: 600; }

/* Taking a selection with you: the feed narrows an archive to a set, and the
   set is the point. */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.8rem; }
.tools .ghost {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em;
  padding: 0.28rem 0.55rem; border: 1px dashed var(--line-2); border-radius: 5px; color: var(--ink-2);
}
.tools .ghost:hover { border-color: var(--accent); color: var(--accent); }
.tools .said { font-family: var(--mono); font-size: 0.68rem; color: var(--accent); }
.clear-all { border-style: dashed; color: var(--accent); }
.linkish { color: var(--accent); text-decoration: underline; }
.mixnote {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  line-height: 1.6; margin: 0 0 1.4rem; max-width: 74ch;
}
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
  background: var(--surface); text-decoration: none;
  transition: border-color 0.14s var(--ease), transform 0.14s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card .shot { aspect-ratio: 16 / 10; background: var(--sunk); overflow: hidden; }
.card .noshot {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 0.9rem; text-align: center;
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);
  overflow: hidden;
}
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { padding: 0.8rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.card .meta {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.64rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
}
.card h3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 0.98rem; font-weight: 590; line-height: 1.3;
  letter-spacing: -0.008em; text-wrap: balance;
}
.card p { margin: 0; font-size: 0.83rem; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.1rem; }
.tag {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em;
  padding: 0.1rem 0.34rem; border-radius: 3px;
  background: var(--sunk); color: var(--ink-3);
}

/* -------------------------------------------------------------- the signals */

.registers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0.7rem; margin-bottom: 2.2rem;
}
.register {
  border: 1px solid var(--line); border-radius: 6px; padding: 0.7rem 0.8rem;
  background: var(--surface); display: flex; flex-direction: column; gap: 0.35rem;
}
.register .k {
  font-family: var(--mono); font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-3);
}
.register .v {
  font-family: var(--mono); font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.register.up .v { color: var(--accent); }
.register .bar { height: 3px; border-radius: 2px; background: var(--sunk); overflow: hidden; }
.register .bar i { display: block; height: 100%; background: var(--accent); }
.register .foot { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.terms { display: flex; flex-direction: column; gap: 1.05rem; }
.term { border-left: 2px solid var(--line-2); padding: 0.1rem 0.25rem 0.1rem 0.9rem; }
.term.strong { border-left-color: var(--accent); }
.term .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.term .w { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.01em; }
.term .th { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.term .st { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.term .cari { font-size: 0.78rem; color: var(--ink-2); margin-top: 0.15rem; }
.term ul { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.term ul li { font-size: 0.83rem; line-height: 1.45; }
.term ul a { color: var(--ink-2); text-decoration: none; }
.term ul a:hover { color: var(--ink); text-decoration: underline; }
.term ul .s { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }

/* -------------------------------------------------------------- the sources */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 760px; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3);
  white-space: nowrap; padding: 0;
}
thead th.nosort { padding: 0.5rem 0.75rem; }
/* A real button, not a clickable <th>: the column headers were unreachable
   by keyboard and announced as plain cells. */
.sortbtn {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.75rem; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.sortbtn:hover { color: var(--ink); }
.sortbtn[aria-pressed="true"] { color: var(--accent); }
.sortbtn[aria-pressed="true"]::after { content: " ↕"; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
td.name { font-weight: 560; white-space: nowrap; }
td.name button { text-align: left; font-weight: inherit; }
td.name button:hover { color: var(--accent); }
td.dim { color: var(--ink-2); font-size: 0.85rem; }
td.nowrap { white-space: nowrap; }
td.dim a { color: var(--ink-3); }
td.dim a:hover { color: var(--accent); }

.route {
  font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.05rem 0.3rem;
}

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.42rem; vertical-align: 0.02em; }
.h-live .dot { background: var(--live); }
.h-slow .dot { background: var(--slow); }
.h-dormant .dot { background: var(--dormant); }
.h-live { color: var(--live); }
.h-slow { color: var(--slow); }
.h-dormant { color: var(--dormant); }
.health { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* A source's coverage over time, drawn as one bar per month. Magnitude, one
   hue — the amber ramp — because it answers "how much, when", not "which". */
.spark { display: flex; align-items: flex-end; gap: 1px; height: 22px; min-width: 90px; }
.spark i { flex: 1; background: var(--accent); opacity: 0.75; border-radius: 1px 1px 0 0; min-height: 1px; }
.spark i.zero { background: var(--line); opacity: 1; }

.excluded { margin-top: 2.4rem; }
.excluded h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  margin: 0 0 0.3rem; letter-spacing: -0.01em;
}
.excluded p { margin: 0 0 1rem; color: var(--ink-2); max-width: 68ch; font-size: 0.9rem; }
.excluded ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.excluded li { background: var(--surface); padding: 0.45rem 0.75rem; font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.excluded li b { font-weight: 570; }
.excluded li span { color: var(--ink-2); font-size: 0.82rem; }
.excluded li em {
  font-family: var(--mono); font-style: normal; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 0 0.28rem;
}

/* ------------------------------------------------------------------- misc */

.more {
  display: block; width: 100%; margin-top: 1.2rem; padding: 0.65rem;
  border: 1px dashed var(--line-2); border-radius: 6px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--ink-2); text-align: center;
}
.more:hover { border-color: var(--accent); color: var(--accent); }

.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-2); }
.empty b { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin-bottom: 0.3rem; }

.loading { padding: 4rem 1rem; text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; }

/* --------------------------------------------------------------- responsive */

.rail-open { display: none; }
.topbar .rail-open { order: -1; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 40;
    transform: translateX(-100%); transition: transform 0.22s var(--ease);
    box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0);
  }
  body.rail-on .rail { transform: none; box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.42); }
  .rail[inert] { visibility: hidden; }
  body.rail-on .rail[inert] { visibility: visible; }
  .rail-open {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.66rem; border: 1px solid var(--line-2); border-radius: 999px;
    font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-2);
  }
  .main { padding: 1.6rem 1.1rem 5rem; }
  .topbar { margin: -1.6rem -1.1rem 1.2rem; padding: 0.55rem 1.1rem; gap: 0.5rem; }
  .views button { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
  .feed.as-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sortby { margin-left: 0; }
}

/* An empty signals board still has something to say: what it was looking at,
   and which gate each candidate failed. Styled quieter than a real signal so
   the two can never be confused at a glance. */
.empty.quiet { padding: 2rem 1rem; text-align: left; max-width: 66ch; }
.nearmiss { margin-top: 1.6rem; }
.nearmiss h3 {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  margin: 0 0 0.5rem;
}
.nearmiss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.nearmiss li {
  background: var(--surface); padding: 0.45rem 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; align-items: baseline;
}
.nearmiss .w { font-weight: 600; }
.nearmiss .th {
  font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 0 0.28rem;
}
.nearmiss .st { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.nearmiss .why { color: var(--ink-2); font-size: 0.85rem; margin-left: auto; }
@media (max-width: 700px) { .nearmiss .why { margin-left: 0; flex-basis: 100%; } }