/* The document is a viewport, not a scroll owner. Lists, editors and the
   authentication surface own their native scrolling, including on iOS. */
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

[data-ui-surface="shell"][data-ui-shell-version="r3"] {
  --arhix-rail-content-width: calc(44 * var(--arhix-ui-unit));
  --arhix-rail-divider-width: 1px;
  /* The accepted reference owns the divider in the navigator surface.
     Rail geometry is 44 base units at the current UI scale, without a border addition. */
  --arhix-rail-width: var(--arhix-rail-content-width);

  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: var(--arhix-canvas);
}

body[data-ui-bootstrap="pending"] > [data-ui-surface="shell"] {
  visibility: hidden;
}

body[data-ui-bootstrap="pending"]
  > [data-ui-surface="shell"][data-ui-workspace] {
  visibility: visible;
}

/* Safari continues the page canvas behind its top/bottom browser chrome.
   Keep it opaque after startup as well as while the workspace is mounting. */
body {
  background: var(--arhix-bootstrap-bg);
}

[data-ui-surface="shell"][data-ui-shell-version="r3"] > [data-ui-layer="canvas"] {
  inset: 0 0 0 var(--arhix-rail-width);
}

[data-ui-surface="shell"][data-ui-shell-version="r3"] .left-panel {
  left: var(--arhix-rail-width);
}

[data-ui-surface="shell"][data-ui-shell-version="r3"][data-ui-navigator-state="expanded"] {
  --arhix-navigator-state: expanded;
}

[data-ui-surface="shell"][data-ui-shell-version="r3"][data-ui-navigator-state="collapsed"] {
  --arhix-navigator-state: collapsed;
}

body.presentation-mode [data-ui-surface="shell"][data-ui-shell-version="r3"] > [data-ui-layer="canvas"],
body[data-role="presentation"] [data-ui-surface="shell"][data-ui-shell-version="r3"] > [data-ui-layer="canvas"] {
  inset-inline-start: 0;
}