/* PHASE·MILESTONE-CARD (604) — card 2 of the Phases tab, the door into 603. D-653.
 *
 * EXTRACTED 2026-07-26 from workbench/phase/milestone-card.html's inline <style>, verbatim.
 * One definition: the WB card page, the composed tab frame (WBAppFrame.phases) and the app
 * all link it.
 *
 * ⚠️ WHAT DID NOT COME ACROSS: the `.pmc-herotail` block (a static stub of 602's bars +
 * anchor + door, drawn so the card could be judged in its own rhythm before the tab existed
 * as one thing). It is DELETED, not moved — the frame now renders the REAL hero above this
 * card, and a stub that survives alongside the real thing is a second definition of the
 * hero waiting to drift from it. That is the whole reason this file exists.
 *
 * ⚠️ TOKENISATION OWED (unchanged from the card page, so the debt travels with the code):
 * the 6px trail stroke, pebble radii, glyph sizes and window heights are ENGINE numbers in
 * JS, not CSS; the 2px focus outlines and 1px hairline here are marked token-exception.
 */
.pmc { margin: 0 var(--space-16); background: var(--surface-card); border-radius: var(--radius-card-lg); overflow: hidden; }
.pmc-hd { padding: var(--space-16) var(--space-16) var(--space-12); }
.pmc-eb { font-family: var(--font-label); font-size: var(--text-micro); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--accent-hover); } /* token-exception */
.pmc-ttl { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--text-subtitle); line-height: var(--leading-120, 1.2); margin-top: var(--space-4); } /* token-exception */
.pmc-ttl i { font-style: normal; color: var(--accent); }
/* ⚠️ --text-body-sm, matching .nh-mstand. The two cards on this tab were setting their
   standfirst at DIFFERENT sizes (12 here, 14 there), so the same role changed size as you
   scrolled — the kind of drift no linter catches because both values are legal tokens. */
.pmc-intro { font-size: var(--text-body-sm); line-height: var(--leading-140); color: var(--text-secondary); margin-top: var(--space-8); }

/* the window onto the checkpoint's river */
/* 🔴 THE DRAWING BLOCK — same fix as `.mtl-cw` on 603, same reason (Gate 2, 2026-07-30).
   `milestone-card.render.js:104` draws at `W = 338` in absolute coordinates while `.pmc-lab`
   is positioned against this box. The two only meet when this box is ACTUALLY 338 wide. It
   never was — so the labels slid under the pebbles at every width, exactly as they did on 603.
   Pin it and centre it; everything else on the card keeps reflowing.
   ⚠️ The margin is calc'd, not auto, for ONE case 603 does not have: this window lives inside
   a PADDED, overflow:hidden card (.pmc), whose interior is 328px at a 360 viewport — narrower
   than the pin. Auto margins floor at 0, so the whole 10px overflow fell on the RIGHT and the
   card edge clipped the last 2px of "Holds head steady…". The calc goes negative symmetrically,
   so the overflow splits 5/5, the trail stays on the card's centre and every label stays inside
   the clip. At any width ≥338 it resolves exactly as auto did. Measured at 360/390/1440. */
.pmc-win { position: relative; overflow: hidden; width: 338px; margin-inline: calc((100% - 338px) / 2); } /* token-exception */ /* = milestone-card.render.js W */
.pmc-win svg { display: block; }
.pmc-fade { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, var(--surface-card)); pointer-events: none; }
.pmc-lab { position: absolute; font-size: var(--text-label); line-height: var(--leading-140); font-weight: var(--weight-500); color: var(--text-primary); }
/* G6 micro-states — the pebble is the marking affordance, so it needs both */
.pmc-peb { cursor: pointer; }
/* ⚠️ DEPTH = STATE (2026-07-26). A MARKED pebble sits on a second plane; an unmarked one
   stays flat on the page. This is D-404's colour-is-state rule extended to elevation, not
   a decorative shadow — and it earns its place because marked-vs-not was carried by FILL
   ALONE, which is the whole reason the teal-400 legibility floor had to be invented.
   drop-shadow, not box-shadow: an SVG <circle> has no box. */
.pmc-peb.is-met { filter: drop-shadow(0 2px 3px rgba(26, 58, 48, 0.18)); } /* token-exception */
.pmc-peb:active { opacity: 0.72; }
.pmc-peb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* token-exception */

/* ⚠️ --teal-700, NOT --green-900. Forest measures 12.02:1 against cream-50 — so dark it
   stopped reading as a door and started reading as the end of the screen. teal-700 is
   5.87:1: comfortably past AA, visibly lighter, and a different step from the hero door's
   --accent (4.27:1) so the two filled buttons are not the same object twice.
   (Measured, not eyeballed: teal-500 is 3.22:1 and fails with white.)
   THE DOOR — the cream half of the F1t pair (2026-07-26). Same band, same type, same
 * padding and the same ARROW as the hero's door above it: equal weight, and the TINT is
 * the only thing telling the two apart. The hairline rule it used to carry is gone — the
 * band's own edge does that work now, and a rule plus a fill is the same line twice.
 * See web/css/cards/phase/hero.css for why the pair exists at all. */
/* 🔴 TOP CORNERS ROUNDED, MATCHING .phz-door (2026-07-26). D-659's ramp is a TAB decision,
 * so the door SHAPE is one too — change the hero's and this must follow or the tab has two
 * door grammars. Radius is --radius-card-lg for the same reason given in phase/hero.css: the
 * bottom corners belong to the card, not to this element.
 * 🔴 AND THE BOX MODEL IS THE OPPOSITE OF .phz-door's — DO NOT SHARE A DECLARATION WITH IT.
 * `.phz-card` supplies 20px of side padding so its door must ESCAPE with a negative margin;
 * `.nh-mod` is `padding: var(--rhythm-pad) 0` — ZERO horizontal, each child supplying its
 * own inset — so this one has nothing to escape and needs no negative margin at all. Reusing
 * the hero's rule here hung the band 20px off BOTH edges, measured. That seam has now bitten
 * three times (D-659, the inset round, the rounded-top round). They will always want
 * opposite fixes. */
.pmc-door { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); box-sizing: border-box; width: 100%; text-align: left; margin: var(--space-16) 0 0; padding: var(--space-16) var(--space-20); border: 0; border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0; background: var(--teal-700); font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600); color: var(--text-on-accent); cursor: pointer; }
.pmc-door svg { width: var(--dim-16); height: var(--dim-16); }
.pmc-door:active { opacity: 0.72; }
.pmc-door:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* token-exception */

/* the honest empty — a brand-new baby has nothing marked and is told so plainly,
   never "0 of 13" and never a nudge (D-541 honest empty, D-452 calm) */
.pmc-empty { font-size: var(--text-meta); line-height: var(--leading-140); color: var(--text-secondary); padding: 0 var(--space-16) var(--space-12); }