/* COLL·HEADER (201) + COLL·ITEM (202) — THE COLLECTION READER. (D-447 · D-560) * * ═══════════════════════════════════════════════════════════════════════════════════════════════ * 🔴 THE SURFACE IS A READER, NOT AN INDEX. (D-447) * * A stack of tone-lifted item cards, the lead one OPEN, each expanding INLINE when she taps the row. * No page hop. She came here to CONSUME, and every tap-and-load between her and the answer is a tax * on a woman holding a baby. An index is a menu of places to go next; a reader is the thing itself. * * ── 🔴 THE WELL WAS BLANK, FOR EVERY COLLECTION, AND NOBODY KNEW ──────────────────────────────── * `reader.js` said in its own header: "Not one collection in content-items.json has a member list." * That stopped being true. All six carry `items: [ids]`, and every one of the thirty ids resolves. * But `renderItems()` still did `if (!members.length) return ; return '';` — so for EVERY * REAL COLLECTION it rendered a header and then AN EMPTY WELL. Not the honest-empty state. Nothing. * A comment describing a fact that had since become false, load-bearing, in a return statement. * * ── COLOUR IS KIND-FAMILY, AND IT COMES FROM THE CHIP ALONE (D-454) ──────────────────────────── * Read = teal (faq · article · topic) * Do = clay (how-to · checklist) * Watch = gold (animation) * Track = slate (tool) * Titles and body are `--text-primary`. AREA IS NEVER COLOUR-CODED (D-379/D-444): "Sleep is always * blue" is forbidden — shape says what a thing IS, colour says what STATE it is in. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ .crd { min-height: 100%; padding: var(--rhythm-pad); display: flex; flex-direction: column; gap: var(--space-12); } /* ── 201 · THE HEADER. Bare, not boxed (D-435: one level of carding). ───────────────────────── */ .crd-bar { display: flex; align-items: center; justify-content: space-between; } .crd-close { width: var(--dim-40); height: var(--dim-40); border: 0; background: 0; color: var(--text-secondary); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; cursor: pointer; } .crd-close svg { width: var(--size-18); height: var(--size-18); } .crd-close:active { opacity: 0.72; } .crd-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .crd-eyebrow { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-label); font-size: var(--size-11); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); } /* "Curated" is a claim, and D-443 makes it TRUE BY CONSTRUCTION: a curated collection is read-only, * because a parent's own pins in a reviewed set would break the very thing the badge asserts. */ .crd-curated { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--accent); } .crd-curated svg { width: var(--size-14); height: var(--size-14); } .crd-title { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-28); line-height: var(--leading-115); color: var(--text-primary); margin: 0; } .crd-stand { font-family: var(--font-body); font-size: var(--size-15); line-height: var(--leading-150); color: var(--text-secondary); margin: 0; max-width: 34em; } /* token-exception: measure */ /* ── 202 · THE ITEM CARD ────────────────────────────────────────────────────────────────────── */ .crd-well { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); } .crd-item { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } /* 🔴 THE WHOLE ROW IS THE EXPAND AFFORDANCE — THERE IS NO PER-ITEM EXPAND CHEVRON. (D-453 amended) * The chevron means exactly ONE thing app-wide: "reveal Pin · Remind me · Share". If it ALSO meant * "open this item", it would mean two things, and a parent would learn neither. */ /* 🔴 THE ROW AND THE MENU ARE SIBLINGS. (D-561) * I nested the actions