/* css/boot-shell.css — the light shell index.html holds in #screen-outlet until the first screen is drawn (round 46,
   «Speed»). A phone opening the app for the first time waited on a blank page while the app's modules and the first
   answers came; this shows at once that the app is on its way, shaped like the home (B1): the header's buttons and the
   strip under it, then the sheet with the search and the launcher's grid of tiles. Only blocks: no text, no name, no
   number (CLAUDE.md rule 1), and every colour a token of css/tokens.css, so it is right in the dark and in «Ljus» once
   js/core/theme.js has set the look. The first mount replaces it (js/stitch/stitch-runtime.js mountScreen), and
   js/core/nav.js takes it away when an overlay is drawn first. It is never a screen: no [data-screen], nothing to tap. */

.boot-shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.boot-shell-block {
  display: block;
  flex: none;
  background: var(--sys-film-strong);
}

/* the header: the menu's round button, the brand, the notices' and the profile's buttons */
.boot-shell-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
}
.boot-shell-round {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.boot-shell-brand {
  width: 132px;
  height: 28px;
  margin-inline: auto;
  border-radius: 999px;
}

/* the strip of filters under the header */
.boot-shell-strip {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  overflow: hidden;
}
.boot-shell-pill {
  width: 88px;
  height: 36px;
  border-radius: 999px;
}
.boot-shell-pill:nth-child(even) { width: 104px; }

/* the sheet at the bottom: its handle, the search, the launcher's four columns of squircles */
.boot-shell-sheet {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border-top: 1px solid var(--sys-edge);
  background: var(--sys-glass-strong);
}
.boot-shell-handle {
  align-self: center;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: var(--sys-label-3);
}
.boot-shell-search {
  height: 48px;
  border-radius: 16px;
}
.boot-shell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 16px;
  justify-items: center;
}
.boot-shell-tile {
  width: min(64px, 100%);
  aspect-ratio: 1;
  border-radius: 18px;
}

/* a slow breath while it waits, as B1's own skeleton (B1.laddar); still on a phone that asks for less motion, and under
   the person's own choice of it (P7, html.a11y-calm) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-calm) .boot-shell-block { animation: bootShellPulse 1.4s ease-in-out infinite; }
}
@keyframes bootShellPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}