/* /week/:n/deep — THE LONG READ. (D-549 · D-567)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 THIS PAGE HAD NO STYLESHEET. AT ALL.
 *
 * `.wdp-title`, `.wdp-stand`, `.wdp-listen` — every class the deep-read view emits — existed ONLY
 * in the JavaScript that wrote them. Not one CSS file in the repo mentioned any of them. The
 * destination behind the "Read the article" button on the home card has been rendering as RAW
 * UNSTYLED HTML: a Times New Roman h1, a blue underlined button, on a white page.
 *
 * ⚠️ AND NO CHECK COULD SEE IT. Check 27 (orphan-class) hunts for CSS rules that match no markup —
 * the exact opposite failure. Nothing anywhere asks whether MARKUP HAS NO RULE. An orphan rule is
 * dead weight; an orphan CLASS is a page with no design.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.wdp { min-height: 100%; padding: var(--rhythm-pad); display: flex; flex-direction: column; gap: var(--space-12); }
.wdp-close { align-self: flex-start; width: var(--dim-40); height: var(--dim-40); border: 0; background: 0; color: var(--text-secondary); font-size: var(--size-18); border-radius: var(--radius-round); cursor: pointer; }
.wdp-close:active { opacity: 0.72; }
.wdp-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.wdp-eyebrow { 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(--kind-watch-icon); }
.wdp-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; }
.wdp-stand { font-family: var(--font-body); font-size: var(--size-16); line-height: var(--leading-150); color: var(--text-secondary); margin: 0; max-width: 34em; } /* token-exception: measure */

.wdp-listen { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; min-height: var(--dim-44); padding: 0 var(--space-20); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-label); font-size: var(--size-14); font-weight: var(--weight-700); cursor: pointer; }
.wdp-listen:active { opacity: 0.8; }
.wdp-listen:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* the honest holes — plain, and they must NOT look like designed content (D-541) */
.wdp-empty, .wdp-owed, .wdp-noaudio { font-family: var(--font-body); font-size: var(--size-14); line-height: var(--leading-150); color: var(--text-tertiary); margin: 0; max-width: 34em; } /* token-exception: measure */

/* ── 🔴 COLLECTIONS FOR THIS WEEK — the link the app has never had. (D-567) ────────────────────
 *
 * Andrew: "the Weeks can be based on layer 5 evidence."
 *
 * The relationship audit found the worst hole in the app: 53 week reads, 42 curated collections,
 * and NOT ONE ROUTE BETWEEN THEM, in either direction. The two halves of the content did not know
 * about each other.
 *
 * It was never an editorial question. All 53 evidence docs already carry `caia_domains` — the areas.
 * The link is DERIVED from the clinical source of truth, and AGE-GATED: matching on area alone
 * offered the WEANING collection to the parent of a NEWBORN (week 0 is, of course, a feeding week). */
.wdp-coll { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-24); padding-top: var(--space-16); border-top: 1px solid var(--border-hairline); } /* token-exception: a hairline */
.wdp-collh { font-family: var(--font-label); font-size: var(--size-12); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--space-4); }
.wdp-colll { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--dim-56, 56px); padding: var(--space-12); border: 0; background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: left; font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-500); color: var(--text-primary); cursor: pointer; }
.wdp-colll:active { background: var(--surface-card-hover); }
.wdp-colll:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.wdp-colll svg { width: var(--size-16); height: var(--size-16); flex: none; color: var(--text-tertiary); }