/* Startup-only copies of @flow/ui semantic token values before app CSS loads. */
:root {
  --flow-startup-page-primary: #fafaf9;
  --flow-startup-page-secondary: #ffffff;
  --flow-startup-sidebar-surface: #fafaf9;
  --flow-startup-border-subtle: #1c19171a;
  --flow-startup-sidebar-width: 280px;
  --flow-startup-right-panel-width: 0px;
  /* SidebarLayout の本文列は Web では背景を持たず、ページの地がトップバーに見える */
  --flow-startup-window-surface: var(--flow-startup-page-primary);
  --flow-startup-main-surface: transparent;
  --flow-startup-sidebar-border: var(--flow-startup-border-subtle);
}

:root[data-theme='dark'] {
  --flow-startup-page-primary: #151515;
  --flow-startup-page-secondary: #171717;
  --flow-startup-sidebar-surface: #1f1f1f;
  --flow-startup-border-subtle: #ffffff24;
}

/* macOS のデスクトップ版は globals.css の tauri-mac-window-effects と同じく地を透かして
   vibrancy を見せ、左サイドバーは .desktop-glass-sidebar、本文列は page-secondary で塗る */
:root.tauri-mac-window-effects {
  --flow-startup-window-surface: transparent;
  --flow-startup-main-surface: var(--flow-startup-page-secondary);
  --flow-startup-sidebar-surface: rgb(255 255 253 / 0.72);
  --flow-startup-sidebar-border: rgb(0 0 0 / 0.1);
}

:root.tauri-mac-window-effects[data-theme='dark'] {
  --flow-startup-sidebar-surface: rgb(17 18 18 / 0.72);
  --flow-startup-sidebar-border: rgb(255 255 255 / 0.12);
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--flow-startup-window-surface);
}

#root {
  min-height: 100vh;
  overflow: hidden;
}

.flow-startup-shell,
.flow-startup-shell * {
  box-sizing: border-box;
}

.flow-startup-shell {
  position: fixed;
  inset: 0;
  display: flex;
  overflow: hidden;
  background: var(--flow-startup-window-surface);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.flow-startup-sidebar {
  flex: 0 0 var(--flow-startup-sidebar-width);
  max-width: var(--flow-startup-sidebar-width);
  min-width: 0;
  overflow: hidden;
  background: var(--flow-startup-sidebar-surface);
  border-right: 1px solid var(--flow-startup-sidebar-border);
  opacity: 1;
}

:root[data-flow-startup-sidebar-open='false'] .flow-startup-sidebar {
  flex-basis: 0;
  max-width: 0;
  border-right-width: 0;
  opacity: 0;
}

.flow-startup-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  background: var(--flow-startup-main-surface);
}

.flow-startup-topbar {
  height: 40px;
  min-height: 40px;
  border-bottom: 1px solid var(--flow-startup-border-subtle);
  background: transparent;
}

.flow-startup-content {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--flow-startup-page-secondary);
}

.flow-startup-right-panel {
  display: none;
  flex: 0 0 var(--flow-startup-right-panel-width);
  border-left: 1px solid var(--flow-startup-border-subtle);
  background: var(--flow-startup-page-secondary);
}

:root[data-flow-startup-right-panel-reserved='true'] .flow-startup-right-panel {
  display: block;
}

@media (max-width: 900px) {
  .flow-startup-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1;
    width: var(--flow-startup-sidebar-width);
    max-width: var(--flow-startup-sidebar-width);
  }
}