/* COLLECTIONS·MINE (802) — "Your collections". (D-582)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * Surface 1 of the collections split. HER named sets, a scoped search, and ONE honest door out to
 * the curated catalogue (803). Reached from Home → Your Stuff → "See all".
 *
 * 🔴 THIS FILE ADDS ONLY WHAT 802 OWNS. Everything structural — the drill-in bar, the close, the
 * title, the row grammar, the "New collection" CTA, the honest empty — is `.cls-*` (801's
 * surface.css) and `.nh-*` (home-shell.css), and is NOT re-declared here. Check 16 rule 3 forbids
 * one card's CSS styling another card's prefix, and it is right to: one file, imported by both
 * sides, is what makes drift impossible.
 *
 * ⚠️ THE `.cls-*` DEPENDENCY IS DELIBERATE AND IT IS DEBT. 802 and 803 both lean on 801's file for
 * chrome that is not really 801's — it is the drill-in masthead, which belongs to 401 SHARED·CHROME
 * (designed, unbuilt). surface.css says so itself: "collapsing them into one .mast-btn is the 401
 * component build... that build is the next PR". Until 401 lands, 801's CSS must stay shipped even
 * after 801's surface retires. Do not "tidy" it away.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the scoped search. A REAL input, not a picture of one. ─────────────────────────────────────
 * The workbench drew this as a <div> with placeholder text, which is fine for judging a shape and
 * a lie in a shipped app: a search field that cannot be typed into is the "button that lies" this
 * project keeps writing decisions about. It filters her rows as she types. */
.mc-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); }
.mc-search svg { width: var(--size-18); height: var(--size-18); flex: none; }
.mc-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); }
.mc-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.mc-search:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── the door OUT to 803. Styled as content, not as a nav link — it is a destination she chooses. ── */
.mc-door { display: flex; align-items: center; gap: var(--space-12); margin: 0 var(--rhythm-inset); padding: var(--space-16); background: var(--surface-card); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); cursor: pointer; text-align: left; border: 0; width: calc(100% - 2 * var(--rhythm-inset)); } /* token-exception */
.mc-door:active { background: var(--surface-card-hover); }
.mc-door:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.mc-dchip { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round); background: var(--teal-100); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.mc-dchip svg { width: var(--size-20); height: var(--size-20); }
.mc-dmid { flex: 1; min-width: 0; }
.mc-dname { display: block; font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-16); color: var(--text-primary); }
.mc-dsub { display: block; font-family: var(--font-body); font-size: var(--size-13); color: var(--text-secondary); margin-top: var(--space-4); }
.mc-door .nh-ychev { flex: none; width: var(--size-16); height: var(--size-16); color: var(--text-tertiary); }
.mc-door .nh-ychev svg { width: 100%; height: 100%; display: block; }

/* ── no-match, when her search matches none of her sets. Distinct from the honest empty: one says
 * "you have none", the other says "none of yours match THAT". Conflating them is how a parent
 * concludes her collections are gone. ── */
.mc-nomatch { padding: 0 var(--rhythm-inset); margin: 0; font-family: var(--font-body); font-size: var(--size-13); color: var(--text-tertiary); font-style: italic; }