/* COLLECTIONS·ALL (803) — the curated catalogue. (D-582)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * Surface 2 of the split. Read-only, "Curated by BabyWeeks" (D-436 — true by construction: a
 * parent cannot pin INTO one, so the badge cannot be falsified). Reached from Home → Collections →
 * "See all", and from 802's door.
 *
 * 🔴 803 IS A **CONTENT** SURFACE, NOT A DOOR. (Andrew, 2026-08-17.) The 2026-08-16 filing left
 * this explicitly open — "803 is the sharper case and is NOT settled by this ruling... Andrew's
 * call, not inferred here". It is now ruled: the list IS the thing.
 *
 * ⚠️ WHAT THAT DOES **NOT** MEAN. The 2026-08-16 "CONTENT BESIDE INDEX" note listed the chevron as
 * an index-vs-content tell ("no content row does"). The chevrons STAY here, ruled 2026-08-17. The
 * same day's surface standard is the finer cut: `chev` is for "anything that reveals or leads on
 * tap", and D-453 forbids the INERT chevron — a mark on a row that is not the thing you press. An
 * 803 row IS pressed and DOES lead, to the reader. It keeps its arrow. The open lead, the pills and
 * the row rhythm are what separate content from index here; the chevron never was.
 *
 * Structural chrome (.cls-*, .nh-*) is NOT re-declared — see the note in mine.css.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.c2-badge { display: inline-flex; align-items: center; gap: var(--space-4); margin: 0 var(--rhythm-inset) var(--space-8); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--accent); }
.c2-badge svg { width: var(--size-14); height: var(--size-14); }
.c2-stand { padding: 0 var(--rhythm-inset); margin: 0 0 var(--space-16); font-family: var(--font-body); font-size: var(--size-15); color: var(--text-secondary); line-height: var(--leading-140); }

/* the search — a REAL input (see mine.css: a field that cannot be typed into is a lie) */
.c2-search { display: flex; align-items: center; gap: var(--space-8); margin: 0 var(--rhythm-inset); min-height: var(--dim-44); padding: 0 var(--space-16); background: var(--surface-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); color: var(--text-tertiary); }
.c2-search svg { width: var(--size-18); height: var(--size-18); flex: none; }
.c2-search input { flex: 1; min-width: 0; border: 0; background: 0; outline: 0; font-family: var(--font-body); font-size: var(--size-15); color: var(--text-primary); }
.c2-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.c2-search:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* the area chips */
.c2-chips { display: flex; gap: var(--space-8); overflow-x: auto; padding: 0 var(--rhythm-inset); scrollbar-width: none; }
.c2-chips::-webkit-scrollbar { display: none; }
.c2-chip { flex: 0 0 auto; min-height: var(--dim-32); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); background: 0; color: var(--text-secondary); cursor: pointer; white-space: nowrap; } /* token-exception: a hairline */
.c2-chip.on { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.c2-chip:active { opacity: 0.72; }
.c2-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* the row's standfirst — two lines, clamped */
.c2-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-body); font-size: var(--size-13); color: var(--text-secondary); line-height: var(--leading-135); margin-top: var(--nudge-2); } /* token-exception */

/* ── the phase spine. Teal header; a teal "Now" marker on the phase she is in. ──────────────────
 * 🔴 COLOUR = STATE, NEVER AREA (D-404/D-379). The teal on "Now" says WHICH phase is current; it
 * does not encode which phase it is. There is no per-phase colour and there must never be one. */
.c2-phase { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--rhythm-inset) var(--space-8); margin: 0; }
.c2-phase-name { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--accent); }
.c2-now { display: inline-flex; align-items: center; padding: var(--nudge-2) var(--space-8); border-radius: var(--radius-pill); background: var(--teal-100); color: var(--accent); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; } /* token-exception */

/* nothing matched the search/chip. NOT the same sentence as "there are none". */
.c2-empty { padding: 0 var(--rhythm-inset); margin: 0; font-family: var(--font-body); font-size: var(--size-13); color: var(--text-tertiary); font-style: italic; }