/* The OnlyBoosts Charts boards: a weekly Top 10 beside its Weeks at #1
   companion, on the Shows and Artists feeds of the homepage (charts-block.js)
   and in the share cards (/charts/<key>/card/<kind>). Markup comes from
   assets/js/chart-board.js, two-sided. The /charts page these were written
   for was torn down on 2026-09-04.

   ⚠️ THE .cb-* GRAMMAR RESTATES .hpw-* (assets/css/hpw-board.css), IT DOES NOT
   IMPORT IT — the same seam as .mb-shell restating .bs-shell. The boards must
   look like the 40 HPW boards (Reed's spec) without the members' stylesheet
   growing content-row rules: shell fill, radius, hairlines, the centred
   Playfair title with its left-aligned caption, and the stepper are copied
   values and MUST STAY IN STEP with hpw-board.css by hand.

   Reads --cream, --cream-d, --white, --border, --ink, --muted, --brand,
   --accent-d, --accent-dd and --tint; the page supplies the accent family
   (brand) the way /hpw does. */

/* The page-only rules (.cb-masthead, .cb-nav-wrap, .cb-section*, .cb-pairs,
   .cb-formula) went with the /charts page on 2026-09-04; git has them. The
   homepage block uses hpw-board.css's .hpw-boards grid for the pair. */

/* ── the board shell ── same fill, hairline and radius as .hpw-board.
   `position: relative` anchors the share button (.hpw-share, absolute in
   the corner) since the boards joined the homepage feeds (2026-09-03). */
.cb-board {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}
/* Centred title, left-aligned caption — the hpw title's own split. */
.cb-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 0.6rem;
  text-align: center;
}
.cb-head small {
  display: block; margin-top: 0.15rem; text-align: left;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.72rem; font-weight: 400; color: var(--muted);
}
/* The column head over the weekly rows' rank triplet: one right-aligned
   string in the triplet's own order, read by position the way the values
   under it are. "rank in" is load-bearing — without it the triplet reads as
   counts. */
.cb-colhead {
  text-align: right; padding: 0 0.4rem 0.15rem;
  font-size: 0.62rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* The head's ⓘ to /about#charts — the feed note's own explainer control
   (.feed-note-info in index.html), restated at this size: bold and
   accent-colored so it reads as a control rather than as a stray character. */
.cb-colhead-info {
  color: var(--accent-d);
  font-weight: 700;
  font-size: 0.7rem;
  text-decoration: none;
}
.cb-colhead-info:hover,
.cb-colhead-info:focus-visible { text-decoration: underline; }

/* ── the rows ── */
.cb-list { list-style: none; margin: 0; padding: 0; }
.cb-empty { font-size: 0.82rem; color: var(--muted); margin: 0; }
.cb-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.4rem;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
}
.cb-row:first-child { border-top: 0; }
/* Wide enough for a T10; the hpw column plus the T. */
.cb-pos { width: 1.7rem; text-align: right; font-size: 0.78rem; color: var(--muted); flex: none; }
/* Square with a soft corner, not the members' circle: this art is show and
   episode covers, square by specification. */
.cb-art {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  object-fit: cover; background: var(--cream-d);
}
.cb-art--none {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.cb-who { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.cb-name {
  font-weight: 700; font-size: 0.86rem; color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.cb-name:hover { color: var(--accent-d); text-decoration: underline; }
.cb-sub {
  font-size: 0.68rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On Weeks at #1 the sub-line is the most recent #1 week — a LINK to that
   week's page on /charts, a jump BUTTON on the homepage (the picker's own
   `data-hpw-goweek`, since 2026-09-03) — dressed the same way either way: the
   Proof of #40HPW board's discovery idiom. The button carries `.cb-sub` and
   hpw-board.css's `.hpw-week-jump` reset; this only keeps the sub-line's
   size and ellipsis on it, which that reset's `font-size` would otherwise
   override. */
.cb-week-jump {
  align-self: flex-start; max-width: 100%;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--border); text-underline-offset: 2px;
}
button.cb-sub.hpw-week-jump { font-size: 0.68rem; color: var(--muted); }
.cb-week-jump:hover { color: var(--accent-d); text-decoration-color: currentColor; }
.cb-week-jump:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.cb-fig { font-weight: 700; font-size: 0.92rem; color: var(--accent-d); flex: none; }
.cb-unit { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
/* The weekly row's component-rank triplet (sats/boosters/boosts), under the
   .cb-colhead labels. Compact by design — it replaced the raw figures, which
   took too much of the row (Reed, 2026-08-31). */
.cb-ranks {
  flex: none; font-weight: 700; font-size: 0.86rem; color: var(--accent-d);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}