/* Layout: [rail | main]. The rail is always there (icons only on narrow
   windows). Main is the top bar plus a stage that shows one view at a time;
   app.js sets body[data-view] to start | run | task | page. */
.app {
  display: flex;
  width: 100%;
  height: 100vh;
  min-height: 0;
}

.app__rail {
  flex: 0 0 auto;
  display: flex;
}

.app__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top bar: only what applies. Back / forward / address while a page is open;
   in Electron it is also the window's drag area and holds the Windows/Linux
   window buttons, so it stays. In a plain browser with no page it is gone. */
.topbar {
  position: relative;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-element-height);
  padding: 0 var(--space-4);
  background-color: var(--color-elevated);
  border-bottom: var(--border-hairline);
  -webkit-app-region: drag;
}

body[data-view="page"] .topbar,
.in-electron .topbar {
  display: flex;
}

/* Electron with no page open: the bar is only a drag strip, so it blends in. */
.in-electron body:not([data-view="page"]) .topbar {
  background-color: transparent;
  border-bottom-color: transparent;
}

.topbar > * {
  -webkit-app-region: no-drag;
}

.topbar__nav,
.topbar__address {
  display: none;
}

body[data-view="page"] .topbar__nav {
  display: flex;
  flex: 0 0 auto;
}

body[data-view="page"] .topbar__address {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.topbar__window {
  margin-left: auto;
  display: flex;
}

/* The stage: one view at a time. */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--color-ground);
}

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

.view[hidden] {
  display: none;
}

/* The page view is never display:none (Electron's <webview> would lose its
   page); it is just out of sight unless it is the current view. */
.view--page {
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

body[data-view="page"] .view--page {
  visibility: visible;
  pointer-events: auto;
}

/* Shown only in demo mode (api.js puts .is-demo on <html>). */
.demo-only {
  display: none;
}

.is-demo .demo-only {
  display: block;
}