/* Native post video, scoped to the existing cards and composer. */
.post-video { margin-block: 1rem; min-inline-size: 0; }
.post-video__heading > span { display: inline-flex; align-items: center; gap: .4rem; color: var(--ft-muted); font-size: .8125rem; }
.post-video__heading .ft-icon { inline-size: 1rem; block-size: 1rem; }
.post-video__stage { position: relative; display: grid; place-items: center; inline-size: 100%; block-size: min(300px, calc(100vw - 3rem)); overflow: hidden; margin-block-start: .5rem; border-radius: var(--ft-radius-medium); background: #24202b; isolation: isolate; }
.post-video__poster, .post-video__media { inline-size: 100%; block-size: 100%; min-block-size: 0; object-fit: contain; }
.post-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .65rem; inline-size: 100%; block-size: 100%; border: 0; background: linear-gradient(transparent 35%, rgb(0 0 0 / .45)); color: white; font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer; }
.post-video__play > span:first-child { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .5); background: rgb(20 14 28 / .7); }
.post-video [hidden], .composer-video [hidden] { display: none !important; }
.post-video__play:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: -5px; }
.post-video__status { font-size: .8125rem; line-height: 1.6; color: var(--ft-muted); margin-block: .5rem 0; }
.post-video__status:empty { display: none; }
.post-video__retry, .post-video__edit { margin-block-start: .5rem; }
.post-video__edit { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; font-size: .875rem; }
.post-video__transcript { margin-block-start: .5rem; font-size: .875rem; line-height: 1.6; }
.post-video__transcript summary { min-block-size: 44px; padding-block: .6rem; cursor: pointer; }
.post-video__transcript p { overflow-wrap: anywhere; }
.post-video__waiting { border: 1px solid var(--ft-border); border-radius: var(--ft-radius-medium); padding: 1rem; font-size: .875rem; background: var(--ft-canvas); }
.discover-video-label { display: inline-flex; align-items: center; gap: .35rem; margin-block: 0 .5rem; color: var(--ft-muted); font-size: .75rem; }
.discover-video-label .ft-icon { inline-size: 1rem; block-size: 1rem; }
.composer-video { border: 1px solid var(--ft-border); border-radius: var(--ft-radius-medium); background: var(--ft-canvas); padding: .9rem; margin-block: 1rem; min-inline-size: 0; }
.composer-video__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.composer-video__heading h2 { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; margin: 0; }
.composer-video__heading button { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding: .5rem; border: 0; border-radius: var(--ft-radius-pill); color: var(--ft-muted); background: transparent; cursor: pointer; }
.composer-video__limits, .composer-video__safety { margin-block: .35rem .75rem; font-size: .8125rem; color: var(--ft-muted); line-height: 1.6; }
.composer-video__audience { font-size: .8125rem; line-height: 1.6; background: var(--ft-lilac); border-radius: .65rem; padding: .6rem .7rem; }
.composer-video__picker { display: grid; gap: .5rem; font-size: .875rem; font-weight: 550; }
.composer-video__picker input { inline-size: 100%; min-inline-size: 0; min-block-size: 44px; font-size: .8125rem; }
.composer-video__local { margin-block: .8rem; }
.composer-video__local video { display: block; inline-size: 100%; max-block-size: 260px; border-radius: .75rem; background: #24202b; object-fit: contain; }
.composer-video__file { font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.composer-video__transfer { display: grid; gap: .35rem; font-size: .8125rem; margin-block: .75rem; }
.composer-video__transfer progress { inline-size: 100%; block-size: .65rem; accent-color: var(--ft-primary); }
.composer-video__status { font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.composer-video__status:empty { display: none; }
.composer-video__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.composer-video__actions .ft-button { min-block-size: 44px; padding: .6rem .75rem; font-size: .8125rem; }
.composer-video__posters { padding: 0; margin-block: 1rem; border: 0; min-inline-size: 0; }
.composer-video__posters legend { font-size: .875rem; font-weight: 650; }
.composer-video__posters > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.composer-video__posters label { position: relative; display: grid; gap: .4rem; padding: .3rem; border: 2px solid transparent; border-radius: .65rem; font-size: .75rem; cursor: pointer; }
.composer-video__posters label:has(:checked) { border-color: var(--ft-primary); background: var(--ft-pink); }
.composer-video__posters label:has(:focus-visible) { outline: 3px solid var(--ft-focus); outline-offset: 2px; }
.composer-video__posters img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: .4rem; background: #24202b; }
.composer-video__more { margin-block: .75rem; }
.composer-video__more summary { cursor: pointer; min-block-size: 44px; padding-block: .65rem; font-size: .875rem; }
.composer-video__more .ft-field { padding-block-start: .4rem; }
.question-create-form:has([data-composer-video]:not([hidden])) .composer-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.question-create-form:has([data-composer-video]:not([hidden])) .composer-toolbar > [data-composer-video-trigger] { color: var(--ft-primary); background: var(--ft-pink); }
.composer-toolbar:has(> [data-composer-video-trigger]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.composer-video-confirm { inline-size: min(28rem, calc(100% - 2rem)); padding: 1.25rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-large); background: var(--ft-surface); color: var(--ft-ink); box-shadow: var(--ft-shadow-card); }
.composer-video-confirm::backdrop { background: rgb(30 20 40 / .4); }
.composer-video-confirm h2 { font-size: 1.125rem; margin-block: 0 .5rem; }
.composer-video-confirm p { font-size: .875rem; line-height: 1.6; }
.composer-video-confirm > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1rem; }
.video-drafts { padding-block: .75rem; }
.video-drafts h2 { font-size: 1rem; }
.video-drafts ul { display: grid; gap: .65rem; padding: 0; list-style: none; }
.video-drafts li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-medium); background: var(--ft-canvas); }
.video-drafts li > div { min-inline-size: 0; }
.video-drafts strong { font-size: .875rem; overflow-wrap: anywhere; }
.video-drafts p { margin: .2rem 0 0; font-size: .75rem; color: var(--ft-muted); }
.video-drafts a { display: inline-flex; align-items: center; gap: .25rem; min-block-size: 44px; font-size: .8125rem; }
@media (min-width: 48rem) { .post-video__stage { block-size: 360px; } .post-video--single .post-video__stage { block-size: min(600px, 65dvh); } }
@media (prefers-reduced-motion: reduce) { .post-video *, .composer-video * { scroll-behavior: auto; } }

.composer-toolbar > [data-composer-video-trigger] { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-block-size: 44px; border: 0; border-radius: var(--ft-radius-small); background: transparent; color: var(--ft-muted); font: inherit; cursor: pointer; }
.composer-toolbar > [data-composer-video-trigger]:disabled { opacity: .55; cursor: not-allowed; }
.composer-toolbar > [data-composer-video-trigger]:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; }