/*
  Boot skeleton styling — see the comment above <div id="boot"> in index.html for why this exists
  and why it does NOT live in src/ as part of global.css.

  It used to be an inline <style> block in the <head>, which is exactly the kind of thing B4's CSP
  cannot allow under `style-src 'self'` without an `unsafe-inline` (or a hash that silently goes
  stale the moment this file is edited without also updating public/_headers). A tiny same-origin
  stylesheet costs one extra request the browser discovers as soon as it starts parsing <head> —
  in practice indistinguishable in timing from inline for a file this size — and keeps CSP free of
  either hole.
*/
html, body { height: 100%; margin: 0; background: #1e1e1e; }
#boot {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 28px 26px 30px minmax(0, 1fr) 22px;
  grid-template-columns: 46px minmax(0, 1fr) 300px;
  grid-template-areas: 'm m m' 't t t' 'o o o' 'l c r' 's s s';
  background: #1e1e1e;
  /* The real chrome draws over this within a frame or two; a slow fade in would only make
     the swap more noticeable, so the skeleton is simply there from the first paint. */
  color: #a8a8a8;
  font: 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}
#boot > * { border: 0 solid #3c3c3c; }
.boot-m { grid-area: m; background: #2b2b2b; border-bottom-width: 1px; }
.boot-t { grid-area: t; background: #252525; border-bottom-width: 1px; }
.boot-o { grid-area: o; background: #2b2b2b; border-bottom-width: 1px; }
.boot-l { grid-area: l; background: #2b2b2b; border-right-width: 1px; }
.boot-r { grid-area: r; background: #2b2b2b; border-left-width: 1px; }
.boot-s { grid-area: s; background: #2b2b2b; border-top-width: 1px; }
.boot-c {
  grid-area: c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.boot-c img { width: 56px; height: 56px; }
/* Indeterminate on purpose: the real figure would be the entry chunk's download, which the
   page cannot see, and a fake percentage that jumps to 100 is worse than no number. */
.boot-bar {
  width: 148px;
  height: 3px;
  border-radius: 2px;
  background: #333;
  overflow: hidden;
}
.boot-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: #2d8cf0;
  animation: boot-slide 1.1s ease-in-out infinite;
}
@keyframes boot-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-bar i { animation: none; width: 100%; opacity: 0.5; }
}