/* The furniture of the page — the rail, the toolbar, the well between them — drawn from the
 * HTML itself, before the bundle has been parsed and before `/api/me` has answered.
 *
 * The chrome only, and deliberately nothing inside it. A reload used to be three unrelated
 * pictures: a blank page, a centred spinner on an empty background, then the dashboard; and
 * the cure is not a fourth picture of grey blocks standing in for content, which is still
 * something rendered first and then replaced. What is here is what is the same on every
 * panel and stays put when the real one takes over. The page then arrives in one piece, in
 * a frame that was already on screen.
 *
 * Geometry from `AppShell` in @nextleap-al/admin-ui: 260px rail from `lg`, 64px toolbar.
 * `App.tsx` removes this node in a layout effect, so it goes in the same paint as its
 * replacement rather than a frame later.
 *
 * A stylesheet from this host rather than a `<style>` block, for the reason given in
 * index.html: the site has to keep working under a CSP that allows `'self'` only.
 */

:root {
  --boot-bg: #f6f8fc;
  --boot-surface: #ffffff;
  --boot-border: #e3e8f3;
}

/* Set by public/theme-boot.js before first paint, from the same values as the library's
   tokens — which are not loaded yet at the moment this paints. */
[data-theme='dark'] {
  --boot-bg: #0b1120;
  --boot-surface: #141d33;
  --boot-border: #1e2941;
}

/* Hidden unless the previous visit ended signed in. Somebody about to be handed the
   sign-in form should not first be shown the frame of a dashboard they are not in — and an
   absent attribute (no JavaScript, storage blocked) means exactly that. */
#boot {
  display: none;
}

[data-boot='app'] #boot {
  display: block;
  min-height: 100vh;
  background: var(--boot-bg);
}

.boot-rail {
  display: none;
}

@media (min-width: 1024px) {
  .boot-rail {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    display: block;
    width: 260px;
    height: 100vh;
    background: var(--boot-surface);
    border-right: 1px solid var(--boot-border);
  }

  .boot-body {
    padding-left: 260px;
  }
}

/* The rail's own header, whose bottom border lines up with the toolbar's. */
.boot-rail-head {
  height: 64px;
  border-bottom: 1px solid var(--boot-border);
}

.boot-top {
  height: 64px;
  background: var(--boot-surface);
  border-bottom: 1px solid var(--boot-border);
}