/* SHARED·ACARD (408) — the Do/Watch action card + how-to accordion. (D-454 · D-619 Card form)
 *
 * EXTRACTED from `web/css/cards/weeks/read.css` (.wkr-acard) as part of the week-read
 * component library (the masthead pipeline). Values VERBATIM — the surface is design-locked;
 * only the prefix changed (wkr-acard → acd). ⚠️ THE LIVE READ STILL RENDERS ITS OWN .wkr-acard
 * COPY — deliberate transient duplication, exactly 401's life before D-722: the reviewed
 * migration pass swaps the read's builders onto this component and deletes the wkr rules.
 *
 * Do = clay · Watch = gold (D-454). Deep escalates: full card → + how-to accordion. The how-to
 * row DISCLOSES BY TAPPING — label only, no glyph (AFFORDANCE-SPEC §1: disclosure has no glyph;
 * the chevron is spoken for). The 502 extent-cue machinery (act-lit fills, the D-615.2 chevron
 * axis) is SURFACE composition, not the part — it stays with the consumer. */
.acd { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: var(--dim-4) solid var(--kind-do-icon); border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
.acd .head { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-4); }
.acd .head .act-wrap { margin-left: auto; }
.acd .badge { font-family: var(--font-label); font-size: var(--size-9); /* token-exception */ /* the locked badge size — no --text-* role at 9 */ font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--white); border-radius: var(--radius-4); padding: var(--space-4) var(--space-8); background: var(--kind-do-icon); }
.acd .ti { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--text-body); }
.acd .mini { font-family: var(--font-label); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); margin-bottom: var(--space-8); }
.acd .clip { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-6); overflow: hidden; background: linear-gradient(135deg, var(--clay-100), var(--clay-200)); margin-bottom: var(--space-12); display: flex; align-items: center; justify-content: center; }
.acd .clip .play { width: var(--dim-44); height: var(--dim-44); border-radius: var(--radius-round); background: var(--kind-do-icon); display: flex; align-items: center; justify-content: center; }
.acd .clip .play svg { width: var(--dim-16); height: var(--dim-16); fill: var(--white); margin-left: var(--nudge-2); }
.acd .lead { font-size: var(--text-caption); line-height: var(--leading-150); color: var(--text-secondary); }
.acd .steps-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--surface-sunken); border: 1px solid var(--border-hairline); border-radius: var(--radius-6); padding: var(--space-8) var(--space-12); margin-top: var(--space-8); cursor: pointer; font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--weight-600); color: var(--text-primary); } /* token-exception */
.acd .steps-toggle:active { transform: scale(0.99); }
.acd .steps-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.acd .steps { max-height: 0; overflow: hidden; transition: max-height var(--duration-300) var(--ease-standard); }
.acd.open .steps { max-height: 22rem; } /* token-exception */
.acd .steps ol { margin: var(--space-12) 0 var(--space-4); padding-left: var(--space-20); font-size: var(--text-caption); line-height: var(--leading-160); }
.acd.watch { border-left-color: var(--kind-watch-icon); }
.acd.watch .badge { background: var(--kind-watch-icon); }
.acd.watch .clip { background: linear-gradient(135deg, var(--kind-watch-fill), var(--gold-200)); }
.acd.watch .clip .play { background: var(--kind-watch-icon); }