/* ══════════════════════════════════════════════════════════════════════════════════════════════ 1125 SHARED·DOTILE — the Do tile: the clip door on a guide card. ────────────────────────────────────────────────────────────────────────────────────────────── SETTLED WITH ANDREW over ~8 rounds on 2026-09-11, in the guide drafts (~/BabyWeeks-inbox/guide-drafts/ — solids-std.html · bf-502.html · bottle-502.html · sleep-502.html: four decks, four byte-identical copies of this CSS, hand-resolved; those pages are TEMPLATES, not code). Four of the nine decks open a technique clip through this tile: Solids · Breastfeeding · Bottle · Sleep. THE SHAPE: a 150px square. The poster still full-bleed under a scrim; a solid clay play disc top-left; the technique title bottom-left ON the still; a duration badge bottom-right. No kind label, no surrounding card, no description. Left-aligned in the deck body, directly under the last box on its card. THE ANCESTRY — the collections Watch tile's GEOMETRY wearing Do's clay, NOT a 408 variant. (home/collections.css `.hcol-tile.hcol-anim`: full-bleed media under a scrim, title anchored on the media. 408 SHARED·ACARD is a media GRID — a 120px 16:10 thumb beside a three-line explainer under a type·title head and an actions chevron; it shares this tile's badge values and play glyph and nothing else — no chassis rule is common, so a variant would have been one prefix wearing two unrelated shapes.) D-734 SUPERSEDES D-454: there is no Watch kind — a technique video is a clay DO card whose media happens to be a recording, and gold means safety only. The clay disc says what the tile is; no label is carried. THE TITLE INK IS CREAM-50, RULED, NOT CLAY. Measured on the scrim over the ruled generation ground #fdfaf3 (animations/MANIFEST.md): cream-50 ≈7.5:1, white ≈7.8:1, clay-700 ≈1.2:1 — clay as INK disappears. Andrew tried it, saw it, and ruled cream-50 (2026-09-11). THE SCRIM IS A COMPONENT FIX, NOT A ONE-OFF. The collections stops (.62/.18@48%/.46) were tuned for the original artwork; every NEW clip generates on #fdfaf3, and the title measured 3.0:1 at a .46 stop on that ground — below the 4.5:1 a 15px label needs. The settled gradient keeps the collections three-stop form (lightest through the middle, darkened at both ends) with the title stop at .74: cream-50 reads ≈7.5:1 there. ⚠️ The collections tile's OWN eyebrow still sits over a .46 top stop — measured 3.03:1 on this artwork class (see REPORT-do-tile-2026-09-11.md): the same fix is owed there, as its own look decision (D-758 — the eye rules the collections tile's look, not this file). 🔴 NO CLIP EXISTS. All ten assets in web/assets/animations/ are unassigned and eight are the same gentle-observation scene — NONE is a recording of one of the five techniques. The tile is built and exhibited against a poster still as a placeholder; the subject is wrong until real clips are commissioned. SELF-CONTAINED under .dtl (D-470 corollary): every element the tile renders is styled here, under its own root class — zero reliance on page or user-agent defaults. That is what makes the WB→app port mechanical. The CONSUMER owns placement: the deck body is a column flex, and the tile's align-self:flex-start (below) is what left-aligns it under the last box. ══════════════════════════════════════════════════════════════════════════════════════════════ */ .dtl { position: relative; width: 150px; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; padding: var(--space-12); background: #e6dfca; align-self: flex-start; margin: 0 0 var(--space-16); } /* token-exception */ /* 150px square, settled in the drafts — no --dim-150 exists; #e6dfca is the drafts' no-poster ground, carried verbatim */ .dtl > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dtl-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,22,.74), rgba(20,24,22,.22) 45%, rgba(20,24,22,.30)); } /* token-exception */ /* the collections three-stop form, title stop moved to .74 for the #fdfaf3 artwork class — see header */ .dtl-play { position: relative; width: 36px; height: 36px; flex: none; border-radius: var(--radius-round); background: var(--clay-700); display: flex; align-items: center; justify-content: center; } /* token-exception */ /* solid clay FILL — the clay here is the disc, not ink; 36px settled in the drafts, no --dim-36 exists */ .dtl-play svg { width: var(--dim-16); height: var(--dim-16); fill: var(--white); margin-left: var(--nudge-2); } /* the title reserves TWO LINES, ALWAYS (D-545's lesson): margin-top:auto bottom-anchors it, and min-height is the collections tile's own calc form — a short title cannot collapse upward. The settled size is 15px (drafts, ruled): no --text-* role exists at 15 — D-463 re-anchored --text-body to 16 — so the step is carried verbatim on an exception, the same step the collections tile's .hcol-c carries as grandfathered debt. O-row owed: mint the role or move the title to --text-body when Andrew's eye rules. */ .dtl-ti { position: relative; font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-15); /* token-exception */ line-height: var(--leading-115); color: var(--cream-50); margin-top: auto; min-height: calc(2 * var(--leading-115) * var(--size-15)); } .dtl-dur { position: absolute; right: var(--space-8); bottom: var(--space-8); background: rgba(26,26,26,.78); color: var(--cream-50); font-family: var(--font-label); font-size: var(--text-micro); font-weight: var(--weight-600); line-height: 1; padding: var(--nudge-2) var(--space-4); border-radius: var(--radius-6); } /* token-exception */ /* the badge values are 408's .dur verbatim: rgba(26,26,26,.78) · cream-50 · 10px/600 · 2px 4px · r6 */ /* press feedback (D-422 floor) — the tile opens the clip player; pressing dims it, as the collections tile does. focus-visible takes the house ring (actions.css's form). */ .dtl:active { opacity: 0.9; } .dtl:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }