/* Phase 05 — documentary studio and dual-aspect playback. Uses DESIGN.md tokens. */
.media-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;border-left:3px solid var(--accent)}
.media-intro h2{font-size:clamp(1.5rem,2.8vw,2.4rem);margin-bottom:8px}.media-intro p{margin:0;max-width:680px}
.media-toolbar,.media-pagination,.video-save-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.media-filter{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(135px,1fr) minmax(135px,1fr) auto;gap:12px;align-items:end}
.media-filter>.btn-h{min-height:42px}.media-counter{font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--muted);margin:20px 0}
.media-table-wrap{overflow:auto;max-width:100%}.media-table{min-width:690px;vertical-align:middle}.media-table th{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:15px 8px}
.media-table td{font-size:.78rem;padding:15px 8px}.media-table td:last-child{white-space:nowrap}.media-table .btn-h{padding:8px 14px}.media-film{display:flex;gap:13px;align-items:center;min-width:190px}
.media-film-thumb{width:42px;height:66px;border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center;flex-shrink:0;color:var(--accent);font-weight:900}
.media-film-thumb img{width:100%;height:100%;object-fit:contain}.media-film>div:last-child{min-width:0}.media-film strong{display:block;font-size:.84rem;line-height:1.3}.media-film small{display:block;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}
.media-status,.format-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;padding:7px 10px;white-space:nowrap;border:1px solid var(--line);border-radius:50px;background:var(--bg-2);color:var(--text)}
.media-status-published{border-color:color-mix(in srgb,var(--accent),transparent 50%);color:var(--accent)}.media-status-archived{opacity:.6}.format-both{background:color-mix(in srgb,var(--accent),transparent 90%)}
.media-editor-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:21px}.media-editor-top p{font-size:.84rem;margin:6px 0}.media-back{color:var(--accent);font-weight:800;font-size:.81rem}.video-editor-form>section,.video-editor-form>.video-variant-grid{margin-bottom:24px}
.video-editor-form .form-control,.video-editor-form .form-select,.media-filter .form-control,.media-filter .form-select,.media-library-form .form-select,.media-library-form .form-control{background:var(--bg);border:1px solid var(--line);border-radius:3px;color:var(--text);min-height:43px}
.video-editor-form textarea.form-control{min-height:115px}.video-editor-form .form-control:focus,.video-editor-form .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent),transparent 72%)}
.video-editor-form .form-control::placeholder{color:var(--muted)}.video-editor-form .form-label,.media-filter .form-label,.media-library-form .form-label{font-size:.78rem;font-weight:750;margin-bottom:7px;color:var(--text)}
.media-hint{display:block;font-size:.74rem;line-height:1.5;color:var(--muted);margin-top:8px}.video-mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:25px}
.video-mode-tile{display:grid;grid-template-rows:auto auto 1fr;gap:7px;cursor:pointer;position:relative;border:1px solid var(--line);background:var(--bg-2);padding:23px 18px;min-height:190px;transition:transform .2s,border-color .2s}
.video-mode-tile:hover{transform:translateY(-2px);border-color:var(--accent)}.video-mode-tile:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent),var(--bg-2) 93%)}
.video-mode-tile input{position:absolute;top:17px;right:17px;accent-color:var(--accent)}.video-mode-tile strong{font-size:1rem;line-height:1.2}.video-mode-tile small{color:var(--muted);font-size:.75rem;line-height:1.5}
.video-mode-diagram{height:67px;display:flex;align-items:end;gap:7px}.mini-portrait,.mini-landscape{display:block;background:linear-gradient(155deg,var(--accent),#262029);border:1px solid var(--accent);border-radius:2px}.mini-portrait{width:34px;height:59px}.mini-landscape{width:73px;height:41px}
.video-variant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.video-variant-panel{min-width:0}.variant-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:130px;border-bottom:1px solid var(--line);margin-bottom:23px}
.variant-heading .eyebrow{margin-bottom:6px}.variant-heading h2{margin:0 0 8px}.variant-heading p{font-size:.8rem;margin:0 0 15px}.ratio-outline{flex:none;background:linear-gradient(130deg,var(--accent),#2a2932);border:2px solid var(--line);box-shadow:inset 0 0 0 4px rgba(0,0,0,.4)}.ratio-outline-vertical{width:50px;aspect-ratio:9/16}.ratio-outline-landscape{width:82px;aspect-ratio:16/9}
.media-variant-preview{max-height:240px;margin-top:17px;background:#121212;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}.media-variant-preview img{width:100%;height:auto;max-height:240px;object-fit:contain}.media-variant-preview-vertical{max-width:140px;aspect-ratio:9/16}.media-variant-preview-landscape{aspect-ratio:16/9;max-width:320px}
.video-publish-bar{display:flex;justify-content:space-between;gap:24px;align-items:end;border-top:2px solid var(--accent)}.video-publish-bar .form-select{max-width:230px}.video-publish-bar h2{margin:0 0 6px}.video-publish-bar p{max-width:580px}
.media-asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.media-asset-item{border:1px solid var(--line);background:var(--bg-2);min-width:0}.media-asset-image{aspect-ratio:4/3;display:grid;place-items:center;background:#171718;color:var(--accent);font-weight:800;overflow:hidden}
.media-asset-image img{height:100%;width:100%;object-fit:contain}.media-asset-meta{padding:12px}.media-asset-meta strong{display:block;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-asset-meta small{display:block;font-size:.7rem;color:var(--muted);margin:7px 0}
.media-pagination{margin-top:24px;justify-content:flex-end}.video-layout--responsive{align-items:start}.video-layout--responsive .video-viewer{width:100%;max-width:630px;min-width:0;justify-self:center}
.video-player-shell{background:#09090a;overflow:hidden;border-radius:5px;border:1px solid var(--line);margin:0 auto}.video-player-shell.ratio-9x16{aspect-ratio:9/16;max-width:395px}.video-player-shell.ratio-16x9{aspect-ratio:16/9;max-width:none}
.video-player-shell .video-frame{width:100%;height:100%;border:0;object-fit:contain;background:#070708}.video-switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--bg-2);border:1px solid var(--line);margin-top:15px;border-radius:4px}
.video-format-choice{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--text);font-size:.82rem;font-weight:800;min-height:46px;border:1px solid var(--line);border-radius:3px}.video-format-choice>span{font-size:1.35rem}.video-format-choice:hover,.video-format-choice.is-selected{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 93%)}
.player-mode-label{margin-top:15px}.story-card-landscape .story-poster{aspect-ratio:16/9}.story-card-landscape .story-poster img{object-fit:contain}.story-card-landscape .story-poster{display:grid;place-items:center;background:#111}
.poster-orientation{position:absolute;bottom:10px;right:10px;color:#fff;background:#000b;padding:4px 8px;border-radius:30px;font-weight:800;font-size:.6rem}.snack-stage-landscape .snack-art img{object-fit:contain;background:#060606}
@media(max-width:1100px){.media-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.video-variant-grid{gap:13px}}
@media(max-width:900px){.media-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.video-variant-grid{grid-template-columns:1fr}.media-asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.media-intro,.video-publish-bar,.media-editor-top{flex-direction:column;align-items:stretch}.media-toolbar{width:100%}.video-layout--responsive .video-viewer{max-width:100%}.video-player-shell.ratio-9x16{max-width:min(100%,360px)}}
@media(max-width:580px){.video-mode-options{grid-template-columns:1fr}.video-mode-tile{grid-template-columns:95px 1fr;grid-template-rows:auto 1fr;min-height:112px;gap:3px}.video-mode-diagram{grid-row:1/3;grid-column:1}.media-filter{grid-template-columns:1fr}.media-asset-grid{grid-template-columns:1fr 1fr;gap:9px}.media-table{min-width:670px}}
@media(prefers-reduced-motion:reduce){.video-mode-tile{transition:none}}
/* Bootstrap ratio utility uses its own padding pseudo-element; set the same ratio there. */
.video-player-shell.ratio-9x16{--bs-aspect-ratio:177.777778%}
.video-player-shell.ratio-16x9{--bs-aspect-ratio:56.25%}

@media(min-width:768px){.story-grid>.story-card-landscape{grid-column:span 2}}