/* The shell's outline, painted by index.html before the application bundle arrives and
   kept by WorkspaceShellFrame.vue until the account is known, so the rail and sidebar
   stay in place from the first frame. Before the app stylesheet loads, the fallbacks
   below stand in for its tokens; afterwards the real tokens apply. The fallbacks mirror
   tokens.css and shell.css (.icon-rail), and a unit test keeps them equal. */
:root {
  --boot-background: #ffffff;
  --boot-border: #e5e5e5;
  --boot-rail: #262626;
  --boot-rail-border: #292929;
}
:root.dark {
  --boot-background: #0a0a0a;
  --boot-border: #292929;
}
html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
}
html, body {
  background: var(--background, var(--boot-background));
}
.boot-frame {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background, var(--boot-background));
}
.boot-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail-width, 72px);
  height: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  border-right: 1px solid var(--boot-rail-border);
  background: var(--boot-rail);
}
.boot-rail-brand {
  display: flex;
  height: var(--bar-height, 44px);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.boot-rail-brand img {
  width: 20px;
  height: 20px;
}
.boot-sidebar {
  width: var(--sidebar-width, 208px);
  height: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  border-right: 1px solid var(--border, var(--boot-border));
  background: var(--background, var(--boot-background));
}
.boot-main {
  min-width: 0;
  flex: 1;
}
/* The Vue frame names its layout; the static one takes it from boot.js. */
.boot-frame[data-layout='rail'] .boot-sidebar,
:root[data-boot-frame='rail'] .boot-frame:not([data-layout]) .boot-sidebar,
.boot-frame:is([data-layout='minimal'], [data-layout='none']) :is(.boot-rail, .boot-sidebar),
:root:is([data-boot-frame='minimal'], [data-boot-frame='none']) .boot-frame:not([data-layout]) :is(.boot-rail, .boot-sidebar) {
  display: none;
}
/* The shell moves the sidebar into a drawer on compact screens. */
@media (max-width: 1023px) {
  .boot-sidebar {
    display: none;
  }
}