/* COLLECTIONS·SURFACE (801) — her pins, her sets, ours. (D-578)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 EVERYTHING STRUCTURAL COMES FROM `home-shell.css`. This file adds ONLY what the shell has not
 * got, and it re-declares no card, no row, and no gap.
 *
 *     .nh-mod / .nh-mhead / .nh-mtitle    the card and its head
 *     .nh-mstand                          the standfirst — and the honest empty
 *     .nh-yrow / .nh-ychip / .nh-ymid /   the LOCKED row: chip · name · sub-line · chevron.
 *     .nh-yname / .nh-yval / .nh-ychev    THE CHIP AND THE SUB-LINE CARRY THE HIERARCHY. The type
 *                                         never did that job alone — the lesson 601 cost an evening.
 *
 * Composition (D-435): a BARE header on the cream ground, then a STACK OF THREE CARDS with
 * --rhythm-stack between them. Three, not fifteen. Restraint: calm comes from FEW cards and cream
 * whitespace; "busy" means fewer boxes, not more styling.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.cls { min-height: 100%; padding: var(--rhythm-pad) 0; display: flex; flex-direction: column; }
.cls-stack { display: flex; flex-direction: column; gap: var(--rhythm-stack); }
.cls-inset { padding: 0 var(--rhythm-inset); }
.cls-mod { position: relative; }

/* ── the header: BARE, on the ground. The drill-in pattern (the reader and the phase page too). ── */
.cls-bar { display: flex; padding: 0 var(--rhythm-inset); }
.cls-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; }
.cls-close svg { width: var(--size-18); height: var(--size-18); }
.cls-close:active { opacity: 0.72; }
.cls-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.cls-title { padding: 0 var(--rhythm-inset); margin: var(--space-4) 0 var(--space-20); font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-28); line-height: var(--leading-115); color: var(--text-primary); }

/* ── the rows. The locked `.nh-yrow`, with only the hairline divider added. ─────────────────────── */
.cls-rows { display: flex; flex-direction: column; }
.cls-row { width: 100%; border: 0; border-top: 1px solid var(--border-hairline); background: 0; text-align: left; } /* token-exception: a hairline */
.cls-row:active { background: var(--surface-card-hover); }
.cls-row:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.cls-row .nh-ychip svg { width: var(--size-20); height: var(--size-20); }
.cls-row .nh-ychev svg { width: 100%; height: 100%; display: block; }

/* 🔴 THE CHIP IS TEAL. ALWAYS. (D-379/D-404/D-444: shape says WHAT a thing is; colour says what
 * STATE it is in. An area is NEVER colour-coded — "Sleep is always blue" is forbidden, and the 601
 * bake-off showed exactly what breaking it would cost the rest of the app.)
 *
 * ⚠️ HER OWN COLLECTIONS ARE THE ONE EXCEPTION, AND IT IS A *SHAPE* EXCEPTION, NOT A COLOUR ONE:
 * D-444 gives them a **cream, dashed** chip — the visual grammar of "you made this", the same
 * dashed hairline this app uses everywhere for "not ours / not finished". */
.cls-mine { background: var(--cream-200); color: var(--text-secondary); border: 1px dashed var(--border-hairline); } /* token-exception: the dashed "yours" chip (D-444) */

/* "New collection" — the locked deep-read CTA (`.dpr-read`): a thumb, not a cursor. */
.cls-new { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); margin-left: calc(-1 * var(--space-12)); border: 0; background: 0; font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-700); color: var(--accent); cursor: pointer; }
.cls-new svg { width: var(--size-16); height: var(--size-16); }
.cls-new:active { opacity: 0.72; }
.cls-new:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-card); }

/* the "Curated" badge — TRUE BY CONSTRUCTION (D-436/D-443): the set is READ-ONLY, so a parent's pin
 * can never break the thing the badge asserts. A trust claim you have to police is not a trust claim.
 * It sits in the mhead's right slot, which `justify-content: space-between` was built for. */
.cls-badge { display: inline-flex; align-items: center; gap: var(--space-4); 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); }
.cls-badge svg { width: var(--size-14); height: var(--size-14); }

/* ── 🔴 THE HONEST EMPTY — AND IT IS NOT A NUDGE. (D-452) ───────────────────────────────────────
 * "Start saving!" / "You haven't pinned anything yet — get going!" is the shape this app refuses.
 * A parent who has pinned nothing has not failed at anything. The line states what the section is
 * FOR, in her language, and then stops. */
.cls-empty { color: var(--text-tertiary); }