/* DUMBAI: The loading screen the document ships in its body (src/app.html), on screen from the first frame until
   the root layout removes it once the app has its first page of data. It paints from the app's tokens, which the
   built document links in its head, with each token's dark and light value as a fallback for the dev server, where
   the app's stylesheet arrives with the bundle. The geometry copies the shell it stands in for -- the sidebar's
   250px column, its 44px brand row and 7px band device, the stream's 8px top gap and row boxes -- so the app lands
   exactly on top of it rather than beside it. The mobile layout keeps the brand as a bar across the top, where the
   phone's title bar goes. No animation: the style guide has nothing loop for ambience. */
.boot {
  --boot-bg: var(--app-bg, #101316);
  --boot-side: var(--app-bg-side, #121619);
  --boot-line: var(--app-line, #3a4351);
  --boot-line-soft: var(--app-line-soft, #263242);
  --boot-well: var(--app-well-raised, #0e1d2c);
  --boot-ink: var(--app-ink-strong, #ffffff);
  --boot-bands: var(
    --app-bands,
    linear-gradient(
      90deg,
      #28d6e1 0 25%,
      #219dd9 25% 50%,
      #356de3 50% 72%,
      #8b57e9 72%
    )
  );
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 250px 1fr;
  background: var(--boot-bg);
  font-family: Inter, "Helvetica Neue", sans-serif;
}
html[data-theme="light"] .boot {
  --boot-bg: var(--app-bg, #f4e9d0);
  --boot-side: var(--app-bg-side, #eee2c6);
  --boot-line: var(--app-line, #cfc09b);
  --boot-line-soft: var(--app-line-soft, #e2d5b5);
  --boot-well: var(--app-well-raised, #e2d3ae);
  --boot-ink: var(--app-ink-strong, #171713);
}
.boot-side {
  border-right: 1px solid var(--boot-line);
  background: var(--boot-side);
}
.boot-brand {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--boot-ink);
  font-family: "Darumadrop One", Inter, sans-serif;
  font-size: 28px;
  line-height: 1;
}
.boot-brand img {
  position: relative;
  top: 4px;
  width: 32px;
  height: 32px;
}
.boot-spectrum {
  height: 7px;
  background: var(--boot-bands);
}
.boot-main {
  padding-top: 8px;
  overflow: hidden;
}
.boot-ghost {
  padding: 2px 18px 3px 20px;
  border-left: 5px solid transparent;
}
.boot-ghost.head {
  min-height: 46px;
  padding-top: 6px;
  display: grid;
  grid-template-columns: 36px 88px 1fr;
  grid-template-rows: 36px;
  align-items: center;
  column-gap: 12px;
}
.boot-ghost.head + .boot-ghost.head {
  margin-top: 2px;
  border-top: 1px solid var(--boot-line-soft);
}
.boot-ghost:not(.head) + .boot-ghost.head {
  margin-top: 2px;
  border-top: 1px solid var(--boot-line-soft);
}
.boot-ghost i,
.boot-ghost b,
.boot-ghost s {
  display: block;
  background: var(--boot-line-soft);
}
/* DUMBAI: The avatar square, dithered at 50% in the line colour as the stream's own ghost rows draw it; the tile
   is the texture palette's `dither-50`, inlined here because the palette's stylesheet ships with the bundle. */
.boot-ghost i {
  width: 36px;
  height: 36px;
  color: var(--boot-line);
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E")
    0 0 / 8px 8px;
}
.boot-ghost b {
  height: 12px;
}
.boot-ghost s {
  height: 10px;
  margin: 6px 0 0 48px;
}
.boot-ghost.head s {
  grid-column: 1 / -1;
}
.boot-ghost.head s:first-of-type {
  margin-top: 3px;
}
.boot-ghost s.long {
  width: min(62%, 520px);
}
.boot-ghost s.mid {
  width: min(41%, 340px);
}
.boot-ghost s.short {
  width: min(23%, 190px);
}
/* DUMBAI: The account pages and every other route: the brand alone, centred, on the same ground. */
html[data-boot="page"] .boot {
  grid-template-columns: 1fr;
  place-items: center;
}
html[data-boot="page"] .boot-side {
  border: 0;
  background: none;
}
html[data-boot="page"] .boot-brand {
  justify-content: center;
}
html[data-boot="page"] .boot-main {
  display: none;
}
@media (max-width: 850px) {
  .boot {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .boot-side {
    border-right: 0;
    border-bottom: 1px solid var(--boot-line);
  }
}