/* cc-lists.css - the shell kit the four release-list pages share.

   Home, the archive, search and the entry page all read as the same object:
   a topline, a table of one-line rows, and a sticky column of context beside
   it. cc.css already carries the parts the whole site uses (the masthead, the
   ticker, .tile, .tbar, .tbl, .ctl, .seg, .peek), and since #526 it carries
   the page kit as well: `.cols`, `.cx`, `.sh`, `.kd`. What is left here is the
   row vocabulary only these four pages have, plus the handful of places where
   they want a different value from the kit's, written under the page class so
   it wins on specificity rather than on load order.
   See docs/mockups/release-refresh/src/pages.css. */

/* ── body bands ─────────────────────────────────────────────────────────── */

.wrap { padding-block: 22px 60px; }
.wrap.tight { padding-block: 14px 60px; }

/* ── kit deltas ─────────────────────────────────────────────────────────── */

/* A plain `.cols` is one column in the kit, because the four short pages ask
   for the rail by name. These four are the rail: the list IS the page. */
@media (min-width: 1380px) {
  .home .cols, .arch .cols, .srch .cols, .epgmain .cols { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* The aside tracks the reader down a 457-row table, and it clears the mast
   the same way .tbl .th does, which is 8px lower than the kit's rail sits. */
.home .cols > aside, .arch .cols > aside, .srch .cols > aside, .epgmain .cols > aside { top: calc(var(--mast-h) + 8px); }

/* `.sub` and `.more` are cc.css's own, at a size a page foot wants; a section
   head shrinks both. Not hoisted with `.sh`, because docs.css shrinks them by
   different numbers and the hoist may not move a page it does not own. */
.home .sh .sub, .arch .sh .sub, .srch .sh .sub, .epgmain .sh .sub {
  font-family: var(--prose); font-size: 13px; color: var(--ink-3);
  margin-bottom: 0; max-width: none; font-weight: 400; line-height: 1.4;
}
.home .sh .more, .arch .sh .more, .srch .sh .more, .epgmain .sh .more {
  margin-left: auto; margin-top: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .06em;
  color: var(--sig); white-space: nowrap; text-transform: none;
}

/* ── row marks ──────────────────────────────────────────────────────────── */

.kk { display: flex; gap: 9px; overflow: hidden; }

/* one entry's tier, as a dot */
.tm { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.tm.use { background: var(--t-use); }
.tm.notice { background: var(--t-notice); }
.tm.soon { background: var(--t-soon); }
.tm.internal { background: var(--t-internal); }
.tm.none { background: var(--ink-4); opacity: .5; }

/* a signed difference against the row above */
.pm { display: inline-flex; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pm b { font-weight: 500; }
.pm .add { color: var(--add); }
.pm .del { color: var(--del); }
.pm .same { color: var(--ink-4); }

/* whether Anthropic wrote their own notes for a build */
.op {
  font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 7px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-4);
}
.op b { font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.op-yes { border-color: var(--sig-dim); color: var(--sig); }
.op-yes b { color: var(--sig); }
.op-no { color: var(--ink-4); }
.op-un { border-color: transparent; }

/* ── inside a table ─────────────────────────────────────────────────────── */

.tbl mark { background: color-mix(in srgb, var(--sig) 30%, transparent); color: var(--ink); border-radius: 2px; }
.tbl .empty { padding: 18px 8px; font-family: var(--prose); font-size: 13px; color: var(--ink-3); }