/* ============================================================================
 * 1114 PHASE·YEARGLYPH — the stacked-bar mark that stands for the whole first year
 * ============================================================================
 * Five rows, one per developmental phase, stacked bottom-to-top and widened in
 * proportion to the real week count each phase covers — 9/8/9/13/13 of 52
 * (D-660: at this scale "the SHAPE OF THE YEAR becomes readable, which is the
 * whole reason the widths are proportional"). It draws a shape. It holds
 * nothing, reads nothing and does nothing.
 *
 * EXTRACTED 2026-09-05 (brief 853) from TWO independent, geometrically identical
 * private rule sets — `.phz-glyph` in phase/hero.css and `.yglyph` in
 * phase/article.css. Both are deleted; both consumers now call this card.
 *
 * ⚠️ BUILT FROM THE ARTICLE'S CONSTRUCTION, and the reason is structural, not
 * stylistic. The article's version wraps the flex column in an inline-block so
 * the glyph's own BASELINE is its bottom edge — which is what lets a consumer
 * sit the foot of the stack exactly where a digit's baseline lands. The hero's
 * version had no such wrapper. Carrying the weaker one forward would have thrown
 * the capability away.
 *
 *   overflow:hidden IS LOAD-BEARING, NOT TIDYING. Without it the inline-block
 *   does not use its bottom edge as its baseline: the inner flex container
 *   propagates a baseline of its own (its first flex item's, and an empty span's
 *   baseline is that span's bottom) — so the stack hangs off its TOP row and
 *   sits 44px low. CSS2.1 §10.8.1: an inline-block with overflow other than
 *   `visible` takes its bottom MARGIN EDGE as its baseline. Nothing overflows;
 *   the property is doing structural work.
 *
 *   THE FLEX COLUMN MUST STAY ON THE INNER ELEMENT. Make the root inline-flex
 *   and the baseline becomes the first flex item's, and the stack hangs off its
 *   top row instead.
 *
 * ⚠️ min-height, NOT height alone. The hero's kept markup carried an INLINE
 * `flex:9` (etc) on each span. Inline beats stylesheet, and `flex:9` expands to
 * `flex-basis:0%` — which in a COLUMN is the main-axis size and outranks
 * `height`. Every row resolves to ZERO and the glyph measures 24px: four gaps
 * and five invisible rows. min-height is not a main-size property, so it
 * survives. The renderer no longer emits those inline flex values, but the guard
 * stays: it costs nothing and it is the exact defect that was found here once.
 *
 * ⚠️ THE BASELINE BOX IS NOT THIS CARD'S. Both consumers wrap the glyph in a box
 * of their own (`.phz-yglyphbox`, `.yglyphbox`) that decides where on the
 * surface the stack sits. That is arrangement — the consumer's, not the card's.
 * See REPORT-853-year-glyph.md: the two boxes do NOT agree with each other, and
 * that divergence is reported, not silently resolved here.
 *
 * Self-contained (D-470/D-475): every element the card renders is styled under
 * `.ygl`, with no reliance on page or user-agent defaults.
 * ============================================================================ */

.ygl { display: inline-block; vertical-align: baseline; overflow: hidden; width: 9rem; } /* token-exception */
.ygl i { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0; line-height: 0; font-style: normal; } /* token-exception */
.ygl span { display: block; min-height: 6px; height: 6px; border-radius: var(--radius-pill); } /* token-exception */

/* proportional by real week count — 9/8/9/13/13 of 52 */
.ygl span:nth-child(1) { width: 17.3%; }
.ygl span:nth-child(2) { width: 15.4%; }
.ygl span:nth-child(3) { width: 17.3%; }
.ygl span:nth-child(4) { width: 25%; }
.ygl span:nth-child(5) { width: 25%; }