/* The browser's layout (product owner, 23 Oct 2026): the top bar, its menus, and the docked panels
   (dock.ts, Dockview), styled only from the theme's variables, light and dark (DEV-10). */

/* --- The top bar: the plot, the menus, Reset layout. It wraps on a narrow screen, never scrolls sideways. --- */
.topbar { grid-row: 1; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; padding: 3px 10px; background: var(--vscode-sideBar-background); border-bottom: 1px solid var(--vscode-panel-border); }
.topbar-plot { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 260px; }
.topbar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--vscode-sideBarSectionHeader-foreground); }
.topbar select { min-width: 0; max-width: 240px; flex: 0 1 auto; background: var(--vscode-dropdown-background); color: var(--vscode-foreground); border: 1px solid var(--vscode-dropdown-border); padding: 2px; font: inherit; }
.topbar-title:not(.read-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar-title.read-only { color: var(--vscode-editorWarning-foreground); }
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.topbar-actions button { margin: 0; }
.menu-arrow::after { content: " ▾"; }
.menu-button[aria-expanded="true"] { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
@media (max-width: 600px) {
  .topbar-title { display: none; }
}

/* --- The top bar's menus: Export, Try, Import, each a box under its button, over the page. --- */
.menu-panel { position: fixed; z-index: 10000; box-sizing: border-box; width: min(360px, calc(100vw - 8px)); overflow-y: auto; padding: 6px 12px 12px; background: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); border: 1px solid var(--vscode-editorWidget-border); box-shadow: 0 2px 8px var(--vscode-widget-shadow, transparent); }
.menu-panel > h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; color: var(--vscode-sideBarSectionHeader-foreground); }
.menu-panel select { width: 100%; background: var(--vscode-dropdown-background); color: var(--vscode-foreground); border: 1px solid var(--vscode-dropdown-border); padding: 3px; font: inherit; }
.catalogue-actions { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.catalogue-actions button { margin: 0; }

/* --- Docked (900 px and wider): the layout fills the page between the top bar and the status line. --- */
body.docked .app { grid-template-columns: minmax(0, 1fr); }
body.docked #side { display: none; }
.dock { grid-row: 2; grid-column: 1 / -1; min-width: 0; min-height: 0; position: relative; overflow: clip; } /* clip: never scrolled, even by focus() */
/* The map and the form beside it, laid over the map's place (host.ts sets where). */
body.docked main { position: absolute; z-index: 2; grid-row: auto; grid-column: auto; }
.map-slot { width: 100%; height: 100%; }
/* A tool's form beside the map takes a third of the map's place, 260 to 380 px; where that place is
   narrower than 640 px (from 900 to about 1280 px wide with the default columns), the form goes
   under the map instead, as in the narrow layout, so the map is never squeezed (panel review,
   23 Oct 2026; host.ts sets form-under from the place's width). */
body.docked .side-frame { width: clamp(260px, 34%, 380px); }
body.docked main.form-under { flex-direction: column; }
body.docked main.form-under .frame-map { flex: 1; height: auto; min-height: 160px; }
body.docked main.form-under .side-frame { width: auto; height: min(440px, 55%); border-left: 0; border-top: 1px solid var(--vscode-panel-border); }
/* While a panel is dragged the map lets it through, faded, so the drop places over it show. */
body.dock-dragging main { pointer-events: none; opacity: .3; }
/* The notes over the map, not over the right-hand panels. */
body.docked .toasts { right: calc(var(--map-right, 0px) + 12px); }

/* Each docked panel scrolls on its own; its heading is its tab, so the heading and its fold button
   are the narrow layout's only (tabs replace them). History keeps Undo and Redo, at its top. */
.dock-panel { height: 100%; overflow-y: auto; box-sizing: border-box; border-right: 0; }
.dock-panel.dock-map { overflow: hidden; }
.dock-panel > section.panel { border-bottom: 0; min-height: 100%; box-sizing: border-box; }
body.docked .dock-panel > .panel > h2, body.docked .dock-panel > .panel > .panel-head > h2 { display: none; }
body.docked .dock-panel > .panel > .panel-head { justify-content: flex-end; }
/* The Outline, docked: its toolbar above, its list scrolling below it to the panel's foot; what can
   be done to a row is on its context menu (PAR-07). */
.dock-panel:has(> #panel-outline) { overflow: hidden; }
body.docked .dock-panel > #panel-outline { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 4px; }
body.docked #body-outline { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.docked #body-outline > #outline { flex: 1 1 48px; min-height: 40px; overflow-y: auto; }
/* Docked, lists use the panel's height, not a fixed one. */
body.docked .dock-panel .list, body.docked .dock-panel .items { max-height: none; }
body.docked .dock-panel #timeline { height: calc(100% - 4px); }
body.docked .dock-panel > #panel-timeline { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 4px; }
body.docked .dock-panel > #panel-timeline > .panel-body { flex: 1; min-height: 0; }
.dock-panel:has(> #panel-timeline) { overflow: hidden; }
/* Bearings fill their group: the plots and the list share its height, the plots first (TMA, CAP-21). */
body.docked .dock-panel #bearings { height: calc(100% - 4px); }
body.docked .dock-panel > #panel-bearings { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 4px; }
body.docked .dock-panel > #panel-bearings > .panel-body { flex: 1; min-height: 0; }
.dock-panel:has(> #panel-bearings) { overflow: hidden; }

/* --- Dockview, in the theme's colours: tabs as VS Code's panel tabs, sashes as its borders. --- */
.dockview-theme-debrief {
  --dv-group-view-background-color: var(--vscode-sideBar-background);
  --dv-tabs-and-actions-container-background-color: var(--vscode-sideBarSectionHeader-background, var(--vscode-sideBar-background));
  --dv-tabs-and-actions-container-height: 28px;
  --dv-tabs-and-actions-container-font-size: 11px;
  --dv-activegroup-visiblepanel-tab-background-color: var(--vscode-sideBar-background);
  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
  --dv-inactivegroup-visiblepanel-tab-background-color: var(--vscode-sideBar-background);
  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
  --dv-activegroup-visiblepanel-tab-color: var(--vscode-panelTitle-activeForeground, var(--vscode-foreground));
  --dv-activegroup-hiddenpanel-tab-color: var(--vscode-panelTitle-inactiveForeground, var(--vscode-descriptionForeground));
  --dv-inactivegroup-visiblepanel-tab-color: var(--vscode-panelTitle-activeForeground, var(--vscode-foreground));
  --dv-inactivegroup-hiddenpanel-tab-color: var(--vscode-panelTitle-inactiveForeground, var(--vscode-descriptionForeground));
  --dv-tab-divider-color: transparent;
  --dv-separator-border: var(--vscode-panel-border);
  --dv-paneview-header-border-color: var(--vscode-panel-border);
  --dv-paneview-active-outline-color: var(--vscode-focusBorder);
  --dv-drag-over-background-color: color-mix(in srgb, var(--vscode-focusBorder) 30%, transparent);
  --dv-drag-over-border-color: var(--vscode-focusBorder);
  --dv-drag-over-border: 2px solid var(--vscode-focusBorder);
  --dv-tabs-container-scrollbar-color: var(--vscode-descriptionForeground);
  --dv-scrollbar-background-color: var(--vscode-descriptionForeground);
  --dv-icon-hover-background-color: var(--vscode-toolbar-hoverBackground);
  --dv-sash-color: transparent;
  --dv-active-sash-color: var(--vscode-focusBorder);
  --dv-active-sash-transition-duration: .1s;
  --dv-active-sash-transition-delay: .3s;
  --dv-overlay-z-index: 999;
  --dv-tab-font-size: 11px;
  --dv-border-radius: 0px;
  --dv-tab-margin: 0;
  --dv-spacing-padding: 0px;
  --dv-tab-border-radius: 0px;
  --dv-sash-border-radius: 0px;
  --dv-dropdown-border-radius: 0px;
  --dv-tab-close-icon-size: inherit;
  --dv-transition-duration: 0ms;
  height: 100%;
  color: var(--vscode-foreground);
}
.dockview-theme-debrief .dv-groupview { border-right: 1px solid var(--vscode-panel-border); border-bottom: 1px solid var(--vscode-panel-border); box-sizing: border-box; }
.dockview-theme-debrief .dv-tab { text-transform: uppercase; letter-spacing: .03em; padding: 0 8px; border-bottom: 1px solid transparent; }
.dockview-theme-debrief .dv-tab.dv-active-tab { border-bottom-color: var(--vscode-panelTitle-activeBorder, var(--vscode-focusBorder)); }
.dockview-theme-debrief .dv-tab:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
/* Every panel stays: no tab closes. */
.dockview-theme-debrief .dv-tab .dv-default-tab .dv-default-tab-action { display: none; }
/* The walkthroughs keep the guidance accent on their tab (style guide, Theme; product owner, 22 Oct 2026). */
/* !important: over Dockview's own tab colours, whose selectors are longer. */
.dockview-theme-debrief .dv-tab[data-panel="panel-tour"] { box-shadow: inset 3px 0 0 var(--debrief-guide-accent); background-color: var(--debrief-guide-tint) !important; color: var(--vscode-foreground) !important; }
.dockview-theme-debrief .dv-tab[data-panel="panel-tour"].dv-active-tab { border-bottom-color: var(--debrief-guide-accent); }
/* Each group's ⋯: the menu to move the panel in front, or reset the layout. */
.dock-actions { display: flex; align-items: center; height: 100%; padding: 0 2px; }
.dock-menu-button { margin: 0; padding: 0 6px; line-height: 18px; background: none; border: 1px solid transparent; color: var(--vscode-icon-foreground, var(--vscode-foreground)); }
.dock-menu-button:hover:not(:disabled) { background: var(--vscode-toolbar-hoverBackground); }
.dock-menu-button:focus-visible { outline: 1px solid var(--vscode-focusBorder); }
/* Over Dockview's sashes and drop places (z-index up to 9999): the menus, the outline's and the notes. */
.context-menu, .dock-menu { z-index: 10001; }
/* By touch (pointer: coarse), docked too (product owner, 23 Oct 2026): targets of 24 px or more,
   a tab strip of 32, the sashes a 24 px grip (their 4 px and 10 px either side), and panels moved
   from the ⋯ menu as well as by dragging. */
@media (pointer: coarse) {
  .dockview-theme-debrief { --dv-tabs-and-actions-container-height: 32px; }
  .dockview-theme-debrief .dv-tab { min-width: 44px; min-height: 32px; }
  .dock-menu-button { min-width: 32px; min-height: 32px; font-size: 16px; }
  .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; }
  .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
  .context-menu button { min-height: 32px; }
}
.toasts { z-index: 10000; }
.dockview-theme-debrief .dv-sash { background: transparent; }
/* Time's title menu (⋯) floats at the panel's top right, docked: a row of its own would cost the controller its height. */
body.docked #panel-time { position: relative; }
body.docked #panel-time > .panel-head { position: absolute; top: 2px; right: 4px; z-index: 2; }