/* Holding state + no-JS fallback. Rationale, and why this is a file: foot of src/main.tsx. */

/*
 * THE GROUND, and it belongs here rather than only in src/index.css.
 *
 * This is the only stylesheet in <head>, so between first paint and the bundle landing it is
 * the whole of the page's styling — and with scripting off it is the whole of it, forever.
 * Before this rule the page had no background at all: measured with prefers-color-scheme:dark
 * and every other sheet disabled, documentElement's used color-scheme resolved to "normal",
 * html and body backgroundColor both read rgba(0, 0, 0, 0), and the UA switched to dark
 * rendering (its default text went rgb(255,255,255)) — under near-black `--dg-ink` fallback
 * ink. So the boot and no-JS paths now carry the same cream ground the app does. index.html's
 * `<meta name="color-scheme">` said "light dark" for the same reason and now says "light".
 *
 * Written as `html`, not `:root`, and through the tokens with hard fallbacks, so that this
 * rule cannot outrank or contradict src/index.css once that lands: `:root` is a class-level
 * selector and would have beaten index.css's own `html { background: var(--dg-paper-deep) }`,
 * silently repainting the app's deepest layer. Here the selector matches index.css's and the
 * declared value resolves to the identical token, so whichever wins the cascade paints the
 * same pixels. The literals are the current values of `--dg-paper-deep` and `--dg-ink`; they
 * are spelled out only because no token sheet exists yet at this point in the load.
 */
html {
  color-scheme: light;
  background: var(--dg-paper-deep, #fffdf7);
  color: var(--dg-ink, #16140e);
}

.boot,
.nojs {
  box-sizing: border-box;
  max-inline-size: 34rem;
  margin-inline: auto;
  padding: calc(var(--dg-u6, 24px) + env(safe-area-inset-top)) var(--dg-u4, 16px)
    calc(var(--dg-u8, 32px) + env(safe-area-inset-bottom));
  font-family: var(--dg-font, system-ui, sans-serif);
  font-size: var(--dg-lead, 1.0625rem);
  line-height: 1.5;
  color: var(--dg-ink, #16140e);
}

.boot > * + *,
.nojs > * + * {
  margin-block-start: var(--dg-u4, 16px);
}

.boot h1,
.nojs h1 {
  max-inline-size: 22ch;
  font-size: var(--dg-display, 1.375rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.boot-status {
  color: var(--dg-muted, #57534a);
}

/* The 8s swap: boot.js sets body[data-boot="slow"], main.tsx sets "ready" instead. */
.boot-late,
[data-boot='slow'] .boot-wait {
  display: none;
}

[data-boot='slow'] .boot-late {
  display: inline;
}

.boot-retry {
  display: none;
}

[data-boot='slow'] .boot-retry {
  display: inline-block;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--dg-u3, 12px) var(--dg-u5, 20px);
  font: inherit;
  font-weight: 600;
  color: var(--dg-accent-ink, #8a5207);
  background: var(--dg-accent-tint, rgba(224, 145, 42, 0.14));
  border: var(--dg-s-line, 1.5px) solid var(--dg-accent-line, #b87214);
  border-radius: var(--dg-r-md, 8px);
  cursor: pointer;
}