/*
 * The boot screen of index.html, public.html and setup.html (FR-015-090, FR-015-151): the skeleton that
 * paints before the bundle, so a refresh shows the frame the app is about to mount rather than
 * nothing or a message. It is a static file from the app's own origin, linked in the head
 * before the module script, and it needs no script and no inline style.
 *
 * The token stylesheet ships inside the bundle and is not loaded yet, so every value here is a
 * literal copy of the token named beside it (packages/tokens, contracts/design-system.md). A
 * token change that moves the frame changes this file with it:
 *   #171717 --color-chrome-canvas        #1c1c1c --color-chrome-surface
 *   #2e2e2e --color-chrome-active        #363636 --color-chrome-active-border
 *   #3a3a3a --color-chrome-tile-border   #2c2c2c --color-chrome-border
 *   #f7f7f7 --color-work-surface         #d6d9de --color-work-border, --color-border-subtle
 *   #e8eaec --color-bg-active            #ffbd7a --color-workspace-mark
 *   #23272b --color-work-text   #ededed --color-work-text, dark   #ffffff --color-chrome-text-strong
 *   16px/24px 600 --text-h3-size, --text-h3-line, --text-h3-weight   the --font-sans stack
 *   #2a2a2a --color-bg-backdrop   #202020 --color-work-surface, dark   #373737 --color-work-border, dark   #272727 --color-bg-active, dark
 *   72px --rail-width   260px --sidebar-width   40px --control-height-lg, --sidebar-card-height
 *   36px --sidebar-row-height   44px the top bar: 8px --space-3 above and below a 28px --control-height-sm   16px --icon-sm, --surface-radius
 *   24px --page-padding   12px --radius-lg, --sidebar-padding-x   10px --sidebar-card-radius,
 *   --sidebar-row-padding-x, --sidebar-row-gap   8px --surface-inset, --radius-md   5px --radius-sm
 *   20px --sidebar-section-space-before   6px --sidebar-section-space-after
 *   400px --login-width   32px --space-7   28px --text-h2-line   48px --space-8   40px --control-height-md
 *   640px --bp-sm   24px --login-radius (16px --surface-radius + 8px --surface-inset)   1200ms --skeleton-loop
 *   cubic-bezier(0.4, 0, 0.2, 1) --ease-in-out   1024px --bp-lg   768px --bp-md
 *   28px --brand-mark-size, --brand-logo-height
 *
 * The product's marks are written into each document by the web build from `@baton/brand` as inline
 * SVG in `currentColor` (`apps/web/vite.config.ts`), so they paint with the skeleton and need no request.
 *
 * The app replaces #root's content when it mounts, so nothing here outlives the boot.
 */

body {
  margin: 0;
}

/* The authenticated document's ground is the chrome surface from the first byte, so any gap before or after mount shows the dark frame and the light colour stays inside the sheet; public.html carries no data-document and keeps its own surface. */
html[data-document="app"] {
  background: #1c1c1c;
}

.b-boot__status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The bars share one slow opacity pulse; nothing moves, and reduced motion leaves them still. */
.b-boot__bar {
  display: block;
  border-radius: 5px;
  background: #e8eaec;
  animation: b-boot-pulse 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.b-boot__bar[data-chrome] {
  background: #2e2e2e;
}

@keyframes b-boot-pulse {
  to {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-boot__bar {
    animation: none;
  }
}

/* The authenticated frame: the rail, the sidebar, and the sheet inset on the sidebar's ground. */
.b-boot__shell {
  display: grid;
  grid-template-columns: 72px 260px minmax(0, 1fr);
  block-size: 100dvh;
  background: #1c1c1c;
}

.b-boot__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding-block: 16px;
  border-inline-end: 1px solid #2c2c2c;
  background: #171717;
}

.b-boot__rail-head {
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding-block-end: 16px;
  margin-block-end: 4px;
  border-block-end: 1px solid #2c2c2c;
}

/* The rail's B mark, the app's `.b-rail__mark` centred in its 40 px home link (2026-09-28). */
.b-boot__mark {
  display: block;
  inline-size: 28px;
  block-size: 28px;
  margin-block: 6px;
  color: #ffffff;
}

.b-boot__sidebar {
  box-sizing: border-box;
  padding-block: 16px;
  padding-inline: 12px;
  background: #1c1c1c;
}

.b-boot__switcher {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 40px;
  padding-inline: 12px;
  border: 1px solid #363636;
  border-radius: 10px;
  background: #2e2e2e;
}

.b-boot__switcher-mark {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 6px;
  background: #ffbd7a;
  opacity: 0.35;
}

.b-boot__section {
  inline-size: 72px;
  block-size: 10px;
  margin-block: 20px 6px;
}

.b-boot__row {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  block-size: 36px;
  padding-inline: 10px;
}

.b-boot__row > .b-boot__bar:first-child {
  inline-size: 16px;
  block-size: 16px;
}

.b-boot__row > .b-boot__bar:last-child {
  inline-size: 55%;
  block-size: 12px;
}

.b-boot__row:nth-child(odd) > .b-boot__bar:last-child {
  inline-size: 40%;
}

.b-boot__sheet {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  margin: 8px;
  border: 1px solid #d6d9de;
  border-radius: 16px;
  background: #f7f7f7;
  overflow: hidden;
}

.b-boot__topbar {
  display: flex;
  align-items: center;
  block-size: 44px;
  padding-inline: 24px;
  border-block-end: 1px solid #d6d9de;
}

.b-boot__crumbs {
  inline-size: 180px;
  block-size: 12px;
}

.b-boot__page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.b-boot__title {
  inline-size: 220px;
  block-size: 24px;
  margin-block-end: 12px;
}

.b-boot__line {
  inline-size: 100%;
  block-size: 28px;
}

.b-boot__line:nth-child(3n) {
  inline-size: 72%;
}

.b-boot__line:nth-child(3n + 1) {
  inline-size: 86%;
}

/*
 * The public frame, as LoginCard lays it out (2026-09-27): a card that is a small copy of the shell
 * on the owner's #2a2a2a backdrop, the sidebar's chrome at the concentric card radius, with the work
 * sheet inset in it holding the logo, the heading and the methods. The sheet is the authenticated frame's own
 * boot piece; the chrome's foot under the sheet depends on the screen and arrives with the app.
 * The stored theme preference is not readable before the bundle, so the sheet follows the system's
 * scheme, which is the preference's default; the page and the card are the same in both.
 */
.b-boot__public {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-block-size: 100dvh;
  padding: 48px 16px;
  background: #2a2a2a;
}

.b-boot__public-card {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 400px;
  border-radius: 24px;
  background: #1c1c1c;
}

.b-boot__public-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
}

/* The card's logo, `LoginCard`'s, 16 px above the heading: the column's 12 px gap and 4 px more. */
.b-boot__logo {
  display: block;
  inline-size: auto;
  block-size: 28px;
  margin-block-end: 4px;
  color: #23272b;
}

.b-boot__public .b-boot__title {
  inline-size: 60%;
  block-size: 28px;
  margin-block-end: 12px;
}

.b-boot__control {
  inline-size: 100%;
  block-size: 40px;
}

@media (width >= 640px) {
  .b-boot__public-column {
    padding-inline: 32px;
  }
}

@media (prefers-color-scheme: dark) {
  .b-boot__public .b-boot__sheet {
    border-color: #373737;
    background: #202020;
  }

  .b-boot__public .b-boot__bar {
    background: #272727;
  }

  .b-boot__logo {
    color: #ededed;
  }
}

/* The card keeps its sheet inset at every width; the shell's sheet alone goes full-bleed on a phone. */
@media (width < 768px) {
  .b-boot__public .b-boot__sheet {
    margin: 8px;
    border: 1px solid #d6d9de;
    border-radius: 16px;
  }
}

@media (width < 768px) and (prefers-color-scheme: dark) {
  .b-boot__public .b-boot__sheet {
    border-color: #373737;
  }
}

@media (width < 1024px) {
  .b-boot__shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .b-boot__sidebar {
    display: none;
  }
}

@media (width < 768px) {
  .b-boot__sheet {
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

/* The unsupported-browser message stays hidden unless the engine lacks the baseline below. */
.b-unsupported {
  display: none;
}

/*
 * The capability baseline of the supported matrix (spec.md § Assumptions: the last two
 * versions of Chrome, Edge, Firefox and Safari). Both features are ones the app's own
 * stylesheets depend on: the shell selects with :has() and sizes its frame in dvh. :has()
 * was the last of the two to reach every engine (Chrome and Edge 105, Safari 15.4, Firefox
 * 121 in December 2023) and the dynamic viewport units shipped earlier (Safari 15.4, Firefox
 * 101, Chrome and Edge 108), so every release in the matrix passes and an engine that fails
 * cannot lay the app out. The test is not the es2022 syntax check the bundle needs: Safari
 * 15.4 to 16.3 pass here yet cannot parse class static blocks, and there the bundle fails to
 * load and the skeleton stays.
 */
@supports not (selector(:has(a)) and (block-size: 100dvh)) {
  .b-boot {
    display: none;
  }

  .b-unsupported {
    display: block;
    max-inline-size: 76ch;
    margin-block: 64px;
    margin-inline: auto;
    padding-inline: 16px;
    color: #23272b;
    font-family: system-ui, sans-serif;
  }

  .b-unsupported__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
  }
}