/* The standard featured-figure embed (docs/superpowers/specs/2026-09-04-featured-figure-design.md). */
.ph-featured { --ph-ui: 1; position: relative; width: 100%; margin: 0 0 1.2rem; }
/* The embed reserves its frame before the viewer mounts: no layout shift, and the lazy
   mount sees a real box (a zero-area target never intersects). */
.ph-featured:not(.ph-featured--mounted) { aspect-ratio: 16 / 9; }
.ph-featured__view { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;
                     background: var(--lf-bg, var(--bg, #F7F9FB)); }
.ph-featured__view canvas { display: block; }
.ph-featured__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
                       display: block; margin: 0; }
.ph-featured--mounted .ph-featured__poster { pointer-events: none; }
.ph-featured__label { font: calc(12.5px * var(--ph-ui)) / 1.2 Helvetica, Arial, sans-serif; color: #0D1117; white-space: nowrap;
                      pointer-events: none; text-shadow: 0 0 3px #F7F9FB, 0 0 3px #F7F9FB, 0 0 3px #F7F9FB; }
.ph-featured__label--port { font-weight: 600; }
.ph-featured__label--dim { color: #5B6572; }
.ph-featured__caption { position: absolute; right: 14px; bottom: 10px; font: calc(12px * var(--ph-ui)) Helvetica, Arial, sans-serif;
                        color: #5B6572; pointer-events: none; }
.ph-featured--dark .ph-featured__label { color: #EFF2F6; text-shadow: 0 0 3px #0A0C10, 0 0 3px #0A0C10, 0 0 3px #0A0C10; }
.ph-featured--dark .ph-featured__label--dim, .ph-featured--dark .ph-featured__caption { color: #8A94A6; }
.ph-featured__bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 8px; font-size: 13px;
                    color: var(--lf-text-2, var(--text-2, #5B6572)); }
.ph-featured__play { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor;
                     border-radius: 6px; padding: 6px 10px; min-height: 44px; cursor: pointer; }
.ph-featured__play:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ph-featured__bar label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin: 0; }
.ph-featured__bar input { margin: 0; }