@layer modules {
  .dock { position: absolute; left: var(--gap); right: var(--gap); bottom: var(--gap); z-index: 7; display: none; grid-template-rows: var(--bar) minmax(0, 1fr); height: var(--dock-height); max-height: calc(100% - 7.2rem); border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); box-shadow: var(--shadow-float); }
  .workspace.has-dock .dock { display: grid; }
  .workspace.has-phone .dock { right: calc(var(--phone-width) + 2 * var(--gap)); }
  .workspace.is-resizing .dock { transition: none; }
  .dock-handle { position: absolute; left: 50%; top: -.7rem; z-index: 2; width: 9.6rem; height: 1.4rem; margin-left: -4.8rem; cursor: ns-resize; touch-action: none; }
  .dock-handle::before { content: ""; position: absolute; left: 2.8rem; right: 2.8rem; top: .5rem; height: .4rem; border-radius: 999px; background: var(--line-strong); }
  .dock-handle:hover::before, .workspace.is-resizing .dock-handle::before { background: var(--ink-3); }
  .dock-bar { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; padding: 0 .6rem 0 .8rem; border-bottom: 1px solid var(--line); }
  .dock-close, .phone-close { align-self: center; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; }
  .phone-close { position: absolute; top: .8rem; right: .8rem; z-index: 3; }
  .dock-tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
  .dock-tab { display: inline-flex; align-items: center; gap: .6rem; padding: 0 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.4rem; font-weight: 550; white-space: nowrap; cursor: pointer; }
  .dock-tab:hover { color: var(--ink); }
  .dock-tab.is-active { color: var(--ink); border-bottom-color: var(--focus); }
  .dock-tab .icon { color: var(--ink-3); }
  .dock-tab.is-active .icon { color: var(--focus); }
  .dock-panes { min-height: 0; overflow: hidden; }
  .dock-pane { container: panel / inline-size; display: none; height: 100%; overflow: auto; padding: 1.2rem 1.4rem 1.4rem; overscroll-behavior: contain; }
  /* The shown pane, active tab and phone follow classes set before first paint (flows/_workspace_state), so nothing moves when scripts load. */
  .workspace[data-tab-shown="checks"] .dock-pane[data-tab="checks"], .workspace[data-tab-shown="screens"] .dock-pane[data-tab="screens"], .workspace[data-tab-shown="network"] .dock-pane[data-tab="network"], .workspace[data-tab-shown="scenarios"] .dock-pane[data-tab="scenarios"], .workspace[data-tab-shown="versions"] .dock-pane[data-tab="versions"], .workspace[data-tab-shown="traffic"] .dock-pane[data-tab="traffic"], .workspace[data-tab-shown="yaml"] .dock-pane[data-tab="yaml"] { display: block; }
  .workspace.has-dock[data-tab-shown="checks"] .dock-tab[data-tab="checks"], .workspace.has-dock[data-tab-shown="screens"] .dock-tab[data-tab="screens"], .workspace.has-dock[data-tab-shown="network"] .dock-tab[data-tab="network"], .workspace.has-dock[data-tab-shown="scenarios"] .dock-tab[data-tab="scenarios"], .workspace.has-dock[data-tab-shown="versions"] .dock-tab[data-tab="versions"], .workspace.has-dock[data-tab-shown="traffic"] .dock-tab[data-tab="traffic"], .workspace.has-dock[data-tab-shown="yaml"] .dock-tab[data-tab="yaml"] { color: var(--ink); border-bottom-color: var(--focus); }
  .workspace.has-dock[data-tab-shown="checks"] .launcher[data-launcher="checks"], .workspace.has-dock[data-tab-shown="screens"] .launcher[data-launcher="screens"], .workspace.has-dock[data-tab-shown="network"] .launcher[data-launcher="network"], .workspace.has-dock[data-tab-shown="scenarios"] .launcher[data-launcher="scenarios"], .workspace.has-dock[data-tab-shown="versions"] .launcher[data-launcher="versions"], .workspace.has-dock[data-tab-shown="traffic"] .launcher[data-launcher="traffic"], .workspace.has-dock[data-tab-shown="yaml"] .launcher[data-launcher="yaml"] { background: var(--surface-2); color: var(--focus); }
  .workspace:not(.has-phone) .workspace-phone { display: none; }
  .dock-pane.is-yaml { padding: 0; }
  .source-frame { display: block; height: 100%; }
  .source-loading { padding: 1.2rem 1.4rem; }
  @media (max-width: 979px) {
    .workspace.has-phone .dock, .workspace.has-phone .journey-float.is-bottom { right: var(--gap); }
    .workspace.has-phone .journey-float.is-bottom, .workspace.has-phone .island.is-left-rail { visibility: hidden; }
    .dock-handle { display: none; }
  }
  @media (max-width: 879px) {
    .workspace.has-dock .dock { top: 7.2rem; height: auto; max-height: none; }
    .workspace.has-dock .launchers, .workspace.has-dock .journey-float.is-bottom { visibility: hidden; }
  }
}