/* The one stylesheet that must work when the bundle does not.
 *
 * WHY THIS IS NOT IN `src/`. Everything under `src/` compiles into one
 * content-hashed stylesheet beside the content-hashed script. The failure
 * this panel exists to report is "the hashed assets are not there" — a
 * browser holding yesterday's `index.html` after a deploy asks for both and
 * gets two 404s. A failure page styled from the file that failed is a failure
 * page with no styles, so this one is served unhashed from `public/`, is
 * asked for by name, and depends on nothing that can be rebuilt out from
 * under it.
 *
 * WHY THE COLOURS ARE LITERAL. `--board`, `--sheet`, `--ink` and the rest are
 * declared in `src/tokens.generated.css`, which is in that same bundle. A
 * `var(--ink)` here resolves to nothing precisely when this file is being
 * read, and the panel renders as black on black. The values below are copied
 * from `docs/design/v3/tokens.css` — the verified ramp, byte for byte — and
 * `reliability.test.ts` asserts they still equal the generated tokens, so
 * this copy cannot drift silently. It is the one place in the product where a
 * hex is written by hand, and the reason is that it must survive the ramp's
 * own delivery failing.
 *
 * Measured, both schemes, against the 4.5:1 floor:
 *   The exact colours are checked against the generated, contrast-verified
 *   token ramp by `reliability.test.tsx`.
 *
 * A system font stack, because the seven vendored faces are declared by the
 * bundle's stylesheet too. This page is set in whatever the machine has, and
 * that is the correct answer rather than a compromise.
 *
 * NO ANIMATION, and not as a nod to `prefers-reduced-motion`: a panel that
 * fades in is a panel whose stalled-clock state is invisible, which is the
 * failure mode this whole file is about.
 */

#boot-failure {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;

  background: #090d12; /* --board, plate */
  color: #b8c2cc; /* --ink-2, plate */

  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
}

/* `hidden` is how this starts, and the attribute has to beat `display: grid`.
   Without this rule the panel is on screen on every healthy page load, which
   is the one thing it must never be. */
#boot-failure[hidden] {
  display: none;
}

#boot-failure .boot-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  padding: 24px;
  border: 1px solid #273340; /* --line, plate */
  border-radius: 8px;
  background: #10161d; /* --sheet, plate */
}

/* The one mark that carries the fault, so no sentence has to be coloured to
   say something is wrong. A rule and not a word: at 3:1 a non-text mark is
   allowed the tone that a 4.5:1 word is not. */
#boot-failure .boot-rule {
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: #dd624e; /* --fault, plate */
}

#boot-failure h1 {
  margin: 0 0 8px;
  color: #f4f7fa; /* --ink, plate */
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

#boot-failure p {
  margin: 0 0 12px;
  max-width: 46ch;
}

#boot-failure #boot-reason {
  margin: 16px 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #0b1016; /* --sunk, plate */
  color: #8d9aa8; /* --ink-3, plate */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  /* The reason is a URL or an exception message. It scrolls inside its own
     box; it does not widen the document. */
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Nothing to say and nothing drawn. An empty grey box under a failure is a
   reader wondering what should have been in it. */
#boot-failure #boot-reason:empty {
  display: none;
}

#boot-failure a {
  color: #66a3ff; /* --accent, plate */
  text-decoration: underline;
  text-underline-offset: 2px;
}

#boot-failure a:focus-visible {
  outline: 2px solid #66a3ff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* The light scheme, by both routes the rest of the product honours: the
   machine's preference, and a pin written by `scheme.js` — which runs before
   this is read and in both of the two vocabularies this deployment uses. */
@media (prefers-color-scheme: light) {
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure {
    background: #eef2f6; /* --board, paper */
    color: #344454; /* --ink-2, paper */
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure .boot-panel {
    border-color: #d5dde6;
    background: #f8fafc;
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure .boot-rule {
    background: #c33a2a;
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure h1 {
    color: #111820;
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure #boot-reason {
    background: #e9eef3;
    color: #5d6b79;
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure a {
    color: #175fcc;
  }
  :root:not([data-scheme="dark"]):not([data-scheme="plate"]) #boot-failure a:focus-visible {
    outline-color: #175fcc;
  }
}

:root[data-scheme="light"] #boot-failure,
:root[data-scheme="paper"] #boot-failure {
  background: #eef2f6;
  color: #344454;
}
:root[data-scheme="light"] #boot-failure .boot-panel,
:root[data-scheme="paper"] #boot-failure .boot-panel {
  border-color: #d5dde6;
  background: #f8fafc;
}
:root[data-scheme="light"] #boot-failure .boot-rule,
:root[data-scheme="paper"] #boot-failure .boot-rule {
  background: #c33a2a;
}
:root[data-scheme="light"] #boot-failure h1,
:root[data-scheme="paper"] #boot-failure h1 {
  color: #111820;
}
:root[data-scheme="light"] #boot-failure #boot-reason,
:root[data-scheme="paper"] #boot-failure #boot-reason {
  background: #e9eef3;
  color: #5d6b79;
}
:root[data-scheme="light"] #boot-failure a,
:root[data-scheme="paper"] #boot-failure a {
  color: #175fcc;
}
:root[data-scheme="light"] #boot-failure a:focus-visible,
:root[data-scheme="paper"] #boot-failure a:focus-visible {
  outline-color: #175fcc;
}