/* m24.10-ui.4: Layout Modes -- Standard + Studio See dev_prompts/research/epic_1/m24/10-ui/m24.10-ui_research.md Section 3.2 Studio-Compact rules arrive in m24.10-ui.5 and PiP rules in m24.10-ui.6. Loaded globally via base.html; rules are scoped to , so they no-op on pages where the layout controller never initializes. */ /* ============================================ Standard Mode (default; today's behavior) ============================================ */ html[data-layout="standard"] .detail-wrapper { max-width: 80rem; /* matches today's max-w-7xl */ margin-left: auto; margin-right: auto; } html[data-layout="standard"] .layout-row { display: flex; flex-direction: column; gap: 1.5rem; /* matches Tailwind space-y-6 */ } /* ============================================ Studio Mode (60/40 split, sticky player) ============================================ */ /* Studio fills the viewport: release BOTH the page-shell cap (max-w-[1800px]) and the inner detail-wrapper cap (max-w-7xl) so the player + highlights split uses the full screen width. lg:px-8 horizontal padding from Tailwind stays. */ html[data-layout="studio"] .detail-page-shell { max-width: none; } html[data-layout="studio"] .detail-wrapper { max-width: none; } html[data-layout="studio"] .layout-row { display: grid; grid-template-columns: 2fr 1fr; /* ~67/33 -- player gets 2/3, highlights 1/3 */ gap: 1.5rem; align-items: start; } html[data-layout="studio"] .player-card { position: sticky; top: 88px; /* nav (~64px) + breathing room */ max-height: calc(100vh - 104px); overflow-y: auto; } /* ============================================ Layout Mode Toggle (Segmented Control) ============================================ */ #layout-mode-toggle .layout-mode-btn.is-active { background-color: rgb(38 38 38); /* neutral-700 */ color: rgb(245 245 245); /* neutral-100 */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } #layout-mode-toggle .layout-mode-btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* ============================================ Studio-Compact Mode (m24.10-ui.5) ============================================ */ html[data-layout="studio-compact"] .detail-page-shell { max-width: none; } html[data-layout="studio-compact"] .detail-wrapper { max-width: 1800px; margin-left: auto; margin-right: auto; } html[data-layout="studio-compact"] .layout-row { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; align-items: start; } /* Sticky player -- shared rule for both studio and studio-compact */ html[data-layout="studio-compact"] .player-card { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; } /* Highlights section header wraps gracefully in the wider right column */ html[data-layout="studio-compact"] .highlights-section-header { flex-wrap: wrap; gap: 0.5rem; } /* Job config grid inside the player card reflows to single column (both studio modes) */ html[data-layout="studio"] .player-card .job-config-grid-wrapper, html[data-layout="studio-compact"] .player-card .job-config-grid-wrapper { grid-template-columns: 1fr !important; border-left: 0 !important; border-right: 0 !important; } html[data-layout="studio"] .player-card .job-config-grid-wrapper > * + *, html[data-layout="studio-compact"] .player-card .job-config-grid-wrapper > * + * { border-left: 0 !important; padding-left: 0 !important; } /* ============================================ Compact Card Density (driven by data-density="compact") ============================================ */ html[data-density="compact"] .highlight-card-description { display: none; } html[data-density="compact"] .highlight-card-actions { gap: 0.25rem; } html[data-density="compact"] .highlight-card-actions .download-clip-btn, html[data-density="compact"] .highlight-card-actions .download-vertical-btn { font-size: 0; width: auto; padding-left: 0.5rem; padding-right: 0.5rem; } html[data-density="compact"] .highlight-card-actions .download-clip-btn svg, html[data-density="compact"] .highlight-card-actions .download-vertical-btn svg { font-size: 14px; width: 14px; height: 14px; } /* ============================================ PiP Mode (m24.10-ui.6 -- floating player) ============================================ */ html[data-layout="pip"] .detail-wrapper { max-width: 1800px; } html[data-layout="pip"] .layout-row { display: block; } html[data-layout="pip"] .player-card { position: fixed; top: 64px; left: 16px; z-index: 40; width: 360px; aspect-ratio: 16 / 9; background: rgb(23 23 23); border-radius: 0.75rem; border: 1px solid rgb(38 38 38); padding: 0.5rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); margin: 0; overflow: visible; } html[data-layout="pip"][data-pip-size="small"] .player-card { width: 240px; } html[data-layout="pip"][data-pip-size="medium"] .player-card { width: 360px; } html[data-layout="pip"][data-pip-size="large"] .player-card { width: 480px; } html[data-layout="pip"] .pip-hidden { display: none !important; } html[data-layout="pip"] .highlights-section { margin-top: 1.5rem; } /* PiP mode: highlights get full width -- let expanded players use the space. !important required because EHP JS sets inline style height: 400px on mount. Vertical keeps default 400px (225px wide at 9:16 fills ~400px naturally). */ html[data-layout="pip"] .ehp-player-container.ehp-landscape { height: 600px !important; } /* PiP-injected toolbar (rendered by pip-panel.js) */ .pip-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: rgb(38 38 38); border-radius: 0.375rem; } .pip-toolbar .pip-size-btn, .pip-toolbar .pip-expand-btn { padding: 0.25rem 0.5rem; background: transparent; color: rgb(163 163 163); border: 0; cursor: pointer; border-radius: 0.25rem; transition: background 0.15s; } .pip-toolbar .pip-size-btn:hover, .pip-toolbar .pip-expand-btn:hover { background: rgb(64 64 64); color: rgb(245 245 245); } .pip-toolbar .pip-size-btn.is-active { background: rgb(64 64 64); color: rgb(245 245 245); }