/* Host composition for the studies. Native PUDL controls keep their surfaces. */
.host-study { margin: 0; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--bg); }
.host-bar { gap: var(--space-3); padding: var(--space-2) var(--space-3); flex-wrap: wrap; justify-content: flex-start; }
.host-bar .study-switcher { margin-inline-start: auto; flex: none; }
.host-bar [data-menubar] { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.study-switcher .brand { margin-inline-end: var(--space-3); }
.study-switcher { justify-content: flex-start; }
.host-frame { --split-a: var(--host-pane-size, 620px); --split-target-size: 12px; min-height: 0; overflow: hidden; }
.launcher-slot { display: flex; min-height: 0; }
.workspace-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.workspace-empty { position: absolute; max-width: 42rem; padding: var(--space-6); color: var(--text-muted); }
.workspace-empty h1 { color: var(--text); font-size: var(--text-xl); }
.study-windows { position: relative; flex: 1; min-height: 0; width: 100%; height: auto; }
.desktop-guide { box-sizing: border-box; height: 100%; overflow: auto; padding: clamp(20px, 4vw, 56px); }
.desktop-guide-inner { max-width: 64rem; margin-inline: auto; }
.desktop-guide header { max-width: 65ch; margin-block-end: var(--space-6); }
.desktop-guide h1 { margin-block: var(--space-2); font-size: var(--text-2xl); }
.desktop-guide p { line-height: 1.6; }
.desktop-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-6); }
.desktop-guide h2 { margin-block: 0 var(--space-3); font-size: var(--text-lg); }
.desktop-sections > section { border-block-start: 1px solid var(--border); padding-block-start: var(--space-3); }
.desktop-sections ul { padding: 0; margin: 0; list-style: none; }
.desktop-sections li { margin-block-end: var(--space-4); }
.desktop-sections a { font-weight: 600; }
.desktop-sections li p { margin-block: var(--space-1) 0; color: var(--text-muted); font-size: var(--text-sm); }
.desktop-hint { border-block-start: 1px solid var(--border); padding-block-start: var(--space-4); margin-block-start: var(--space-4); max-width: 80ch; }
.desktop-hint p { color: var(--text-muted); font-size: var(--text-sm); }
.host-launcher .start-header { display: flex; align-items: center; gap: var(--space-2); }
.host-launcher .launcher-actions { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.host-study .host-launcher .start-content { --split-a: 128px; --split-target-size: 12px; }
.host-launcher .catalog-entries { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.host-launcher .size-options { margin-inline-start: auto; }
.host-launcher .size-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.size-fields label { display: grid; gap: var(--space-1); }
.size-fields input { width: 100%; box-sizing: border-box; }
.catalog-entries.editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--space-4); padding: var(--space-3); }
.study-story { min-width: 0; padding-block-end: var(--space-3); border-bottom: 1px solid var(--border); }
.study-story:first-child { grid-column: 1 / -1; }
.study-story h3 { margin-block: 0 var(--space-2); font-size: var(--text-lg); line-height: 1.4; }
.study-story p { margin-block: var(--space-2); }
.catalog-entries.editorial > .md-row { grid-column: 1 / -1; }
[data-catalog-view="list"] .catalog-entries.editorial { display: block; }
[data-catalog-view="list"] .study-story h3 { font-size: var(--text-sm); }
[data-catalog-view="list"] .story-excerpt { display: none; }
.reading-sample { max-width: 68ch; margin-inline: auto; }
.reading-sample p { line-height: 1.7; }
.draft { width: 100%; height: auto; min-height: 12rem; resize: vertical; }
.diagram-sample { display: block; width: 100%; max-height: 420px; }
.colour-sample { height: 120px; margin: var(--space-3) 0; background: var(--sample-colour, #4477bb); border: 1px solid var(--border); }
.sample-notification { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.sample-notification > button { margin-inline-start: auto; }
.demo-hub { max-width: 72rem; margin-inline: auto; padding: var(--space-5); }
.demo-hub > header { margin-block-end: var(--space-6); }
.demo-hub p { max-width: 72ch; }
.demo-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.demo-choices article { border-block-start: 1px solid var(--border); padding-block: var(--space-3); }
.demo-hub section { margin-block: var(--space-6); }
@media (max-width: 700px) {
 .host-study[data-presentation="pane"] .launcher-slot { width: 100% !important; }
 .host-study[data-presentation="pane"] .workspace-pane, .host-study[data-presentation="pane"] .outer-divider { display: none; }
 .catalog-entries.editorial { display: block; }
 .host-study .host-launcher .start-content { --split-a: 104px; }
}