/* ══════════════════════════════════════════════════════════════════════════════════════════════
   1025 SHARED·CONTENTROW — one row of a content list: chip, name, kind-in-the-meta.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   EXTRACTED 2026-09-03 (BUILDER, brief 310) from workbench/shared/_bakeoffs/content-row.html —
   the CONTENT-family row standard Andrew ruled 2026-08-16 ("1B kind in the meta line · 2A
   colour-coded pills · 3B chips only"). The chosen design is the drawing; nothing redesigned.
   The row was built twice in the app and never owned:
     · 202 COLL·ITEM  — .crd-row/.crd-chip/.crd-ititle/.crd-imeta (collection/reader.css)
     · 303 TECH·LIBRARY — .tl-row/.tl-row-btn/.tl-name/.tl-meta (technique/library.css)
   Same anatomy, two class families, drifting — the 1014 COLLECTIONROW situation one level down.
   Consumers adopt in their own surface passes (D-698); this file owns the row so that when they
   do, it is one definition and not a third copy.

   WHAT IS NOT HERE, on purpose:
   · .ct-head (eyebrow · title · standfirst) — 201 COLL·HEADER's, not the row's.
   · .ct-pills / .ct-sel / .ct-find (the filter controls, bake-off decisions 2A/2B/2C) — controls,
     not rows; 1018 SHARED·FINDFILTER is the find-and-filter half. ⚠️ The 2A colour-coded pill
     band has NO row and NO brief today — flagged in REPORT-310, not built here.
   · .ct-kindline and the .t-* colours — bake-off decision 1A, REJECTED by the 1B ruling. Not
     carried: a rejected option is not a state.
   · The provenance footrow — 402 SHARED·PROVENANCE draws it (D-723, check 54: exactly one CSS
     file styles a footrow, exactly one JS file emits it). The bake-off drew it inline with the
     REVIEWER on the left; 402 and the live reader both draw SOURCE left · REVIEWER right
     (D-439/D-465). The row composes renderProvenance() and styles no footrow of its own — the
     bake-off's own 8px/centre footrow spacing yields to 402's. REPORT-310 carries the delta.

   LEVEL: molecule, not organism (D-747) — a row repeated N times inside an already-registered
   surface, by the 1014 COLLECTIONROW ruling. STATUS: PROVISIONAL (built, unblessed — the
   907/1014/1021/1023 convention; checks 16/18/19 arm at draft+).

   🔴 TWO LOAD-BEARING NOTHINGS, carried and documented (the 2026-09-02 font:inherit lesson —
   an extraction dropped one from a <button> and three surfaces shifted):
   · `.ct-row { font: inherit }` — the row is a <button>; without this line it takes the UA
     default (13.3333px / line-height normal) and every line inside it re-flows. Every line-height
     this card does NOT set explicitly is the button's inherited `normal`.
   · `.ct-row { color: inherit }` and `background: 0; border-*-width: 0` — a button's UA colours
     and borders are not a div's. The hairline between rows is `border-top` ONLY; the other three
     edges are explicitly zeroed so no UA default survives.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the list wrap — one card holding the rows, hairline between them ────────────────────────── */
.ct-wrap {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 0 var(--space-16);
  margin: 0 var(--space-16);
}

/* ── THE WHOLE ROW IS THE TARGET. (D-453) The chevron means ONE thing app-wide — the actions
 * reveal — so there is NO per-item expand chevron; a tap discloses inline (reader) or navigates
 * (a technique opens the player). ── */
.ct-row {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-hairline); /* token-exception: a hairline */
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  background: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;                                 /* 🔴 load-bearing — see the header */
  color: inherit;                                /* 🔴 load-bearing — see the header */
}
.ct-row:active { opacity: 0.72; }
.ct-row:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ct-row:first-child { border-top: 0; }

.ct-mid { flex: 1; min-width: 0; }

/* the two lines. The meta line is 1B — the kind word lives HERE, in text, and the colour appears
 * once, on the chip (D-454: colour is the family, the words are the exact kind). */
.ct-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-body);   /* was --size-16 raw in the bake-off; the 1014 row's same swap */
  font-weight: var(--weight-600);
  line-height: var(--leading-120);
}
.ct-meta {
  display: block;
  font-size: var(--text-meta);   /* = --size-12, the role name for this line (check 25) */
  /* ⚠️ NOT the bake-off's --text-tertiary: D-740 retired it for app use (text is --ink-600,
   * marks are --ink-400), the token file's own comment says so, and it measured 3.34:1 here —
   * a NEW WCAG failure the contrast gate refuses. Both sibling rows already read --ink-600
   * (202's .crd-imeta, 1014's .crow-sub). The surroundings changed; the line did not. */
  color: var(--ink-600);
  margin-top: var(--space-4);
  /* line-height unset on purpose: the row button's inherited UA `normal`, exactly as shipped */
}

/* ── the chip — 40px, kind-family fill, the exact-kind glyph ─────────────────────────────────── */
.ct-chip {
  width: var(--dim-40);
  height: var(--dim-40);
  border-radius: var(--radius-6);
  flex: none;
  display: grid;
  place-items: center;
}
.ct-chip svg { width: var(--size-20); height: var(--size-20); }

/* ── 🔴 THE MEDIA ROW TAKES THE SAME CHIP AS EVERY OTHER ROW. (Andrew, 2026-09-09) ────────────
 *
 * Andrew, on the video row in this list: "This animated thumbnail looks weird." → shown three
 * options → "same chip as every other row".
 *
 * So `.ct-media` / `.ct-play` — the 112px 16:9 inline still and its play disc — are GONE, and
 * with them the bake-off's SHAPE rule ("a 16:9 block when the item has a still"). Two reasons,
 * and only one of them was design:
 *   1. IT BROKE THE COLUMN. Every other row is a chip. A 112px 16:9 block beside 40px chips
 *      means nothing in the left column lines up, which is the one job that column has.
 *   2. THE PICTURE WAS A PLACEHOLDER. The only still in the corpus is gentle-obs-160.jpg, from
 *      the clip set already established as unusable. There is no real thumbnail to show yet.
 *
 * ⚠️ THE POSTER IS PARKED, NOT REJECTED. The third option — a FULL-WIDTH poster ABOVE the row —
 * is the better answer for video, because a video genuinely is a different kind of thing and
 * deserves to break the list's rhythm. It comes back when real clips exist. It shares no
 * declaration with what was removed here (that was a 112px block INSIDE the row), so nothing
 * below makes it harder to build.
 *
 * ⚠️ `item.poster` is still carried by the data and by the renderer's documented item shape —
 * the collection reader draws it full-width in the OPEN body (.crd-poster), and the parked
 * option is where it returns. The ROW simply does not draw it. ── */

/* ── kind-family colour. Scoped under the card's own prefix on purpose: a bare `.k-read` in a
 * card file would be a second owner of a global class (reader.css already styles `.k-read
 * .crd-chip`). Same declarations as the bake-off's, one scoping level deeper. ── */
.ct-chip.k-read  { background: var(--kind-read-fill);  color: var(--kind-read-icon); }
.ct-chip.k-do    { background: var(--kind-do-fill);    color: var(--kind-do-icon); }
/* .ct-chip.k-watch retired 2026-09-16 — D-734. Animation rows now ride .ct-chip.k-do (clay). */
.ct-chip.k-track { background: var(--kind-track-fill); color: var(--kind-track-icon); }

/* ── the open lead. 🔴 D-447 CLAUSE 1: THE LEAD ITEM IS OPEN. A stack of closed rows is an
 * index; the open lead is the single property that makes this a READER. Its body unfolds in
 * place under the row it belongs to, indented past the chip column. ── */
.ct-open {
  padding: 0 0 var(--space-12) calc(var(--dim-40) + var(--space-12));
}
.ct-stand2 {
  font-family: var(--font-display);
  /* 15px has NO role in the ladder (D-463 re-anchored body to 16) — the 1021 lane's 17px
   * precedent: moving it is a DESIGN ruling owed to Andrew, not taken. Shipped value stays. */
  font-size: var(--size-15); /* token-exception */
  font-weight: var(--weight-500);
  color: var(--text-primary);
  margin: 0 0 var(--space-8);
  line-height: var(--leading-120);
}
.ct-body {
  font-size: var(--text-body-sm);   /* = --size-14, "secondary / meta" (check 25) */
  color: var(--text-primary);
  line-height: var(--leading-150);
  margin: 0 0 var(--space-12);
}
/* the footrow under the body is 402's (.prov-row), composed by the renderer — the card styles no
 * footrow of its own (check 54 / D-723: exactly one CSS file styles a footrow). 402's own
 * margin-top --space-16 + padding-top --space-12 is what ships; the bake-off's tighter 8px was
 * its own re-drawing of the component and is NOT carried. See the header for the delta. */