/* Mockup layout only. Component appearance comes from pudl.css. */
body { margin: 0; min-height: 100dvh; background: var(--bg); }
.study-header { gap: var(--space-3); padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
.study-title { color: var(--tb-chrome-fg); font-size: var(--text-sm); }
.study-header .topbar-chrome { margin-inline-start: auto; }
.study-context { padding: var(--space-6); }
.study-context h1 { font-size: var(--text-xl); }
.desktop-bar { position: fixed; inset: auto 0 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--surface); border-top: 1px solid var(--border); }
.desktop-caption { margin-inline-start: auto; font-size: var(--text-sm); color: var(--text-muted); }
/* The new launcher supplies geometry to the existing menu surface. */
.start-panel { inset: auto auto calc(var(--space-6) + var(--space-6)) var(--space-3); margin: 0; padding: 0; width: 42rem; max-width: calc(100vw - var(--space-5)); height: min(36rem, calc(100dvh - 9rem)); max-height: none; overflow: hidden; }
.start-panel:popover-open { display: flex; flex-direction: column; }
.launcher-header { margin: 0; top: 0; padding: var(--space-2) var(--space-3); flex: none; }
.search-tools { display: flex; align-items: stretch; gap: var(--space-2); padding: var(--space-3); flex: none; }
.search-form { flex: 1; min-width: 0; }
.launcher-content { --split-a: calc(100% - 12rem); --split-target-size: 12px; flex: 1; min-height: 0; border-top: 1px solid var(--border); }
.application-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); flex: none; }
#result-count { font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.application-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; }
.app-entry { display: flex; align-items: center; gap: var(--space-2); }
.app-entry > .glyph { flex: none; }
.app-copy { min-width: 0; flex: 1; }
.app-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-nav { overflow-y: auto; }
.category-list { list-style: none; margin: 0; padding: 0; }
.category { display: flex; align-items: center; gap: var(--space-2); }
.category > .glyph { flex: none; }
.category > span:not(.glyph):not(.category-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-category-side="left"] .launcher-content { --split-a: 12rem; }
.category-count { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-size: var(--text-2xs); }
.launcher-footer { position: static; margin: 0; padding: var(--space-3); border-top: 1px solid var(--border); flex: none; justify-content: flex-start; align-items: center; }
.launcher-footer a { display: inline-flex; gap: var(--space-1); align-items: center; }
.key-hint { margin-inline-start: auto; color: var(--text-muted); font-size: var(--text-2xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.fallback-catalog { margin: var(--space-5); display: grid; gap: var(--space-3); }
@media (max-width: 650px) {
 .study-header .topbar-chrome { order: 3; width: 100%; margin: 0; }
 .study-title, .desktop-caption { display: none; }
 .study-header #theme { margin-inline-start: auto; }
 .start-panel { inset: var(--space-2) var(--space-2) 4rem; width: auto; height: auto; max-width: none; }
 .launcher-content { --split-a: calc(100% - 8rem); --split-target-size: 20px; }
 body[data-category-side="left"] .launcher-content { --split-a: 8rem; }
 .category-count { display: none; }
 .application-pane { flex: 1; }
 .key-hint { display: none; }
 .launcher-footer { justify-content: space-between; }
}