/*
 * Styles of the static entry page before the app module runs. Colours come from the theme (`/theme.css`, linked by
 * the SEO shell) with neutral fallbacks; nothing here carries copy or branding of its own.
 *
 * - `.site-fallback`: the semantic content the SEO shell renders into #root (ADR-0017). It is real page content, so
 *   it is shown readable until the app replaces it.
 * - `.app-shell`: a text-free placeholder for an empty #root (the Vite dev server serves no fallback content).
 */

html {
  background: var(--color-bg, Canvas);
  color: var(--color-text, CanvasText);
}

.site-fallback {
  display: grid;
  max-width: 75rem;
  min-height: 100svh;
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
  gap: 2rem;
  align-content: start;
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.site-fallback header,
.site-fallback footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border, color-mix(in srgb, currentColor 18%, transparent));
}

.site-fallback footer {
  border-top: 1px solid var(--color-border, color-mix(in srgb, currentColor 18%, transparent));
  border-bottom: 0;
  color: var(--color-text-muted, inherit);
  font-size: 0.875rem;
}

.site-fallback header > p {
  margin: 0;
  font-weight: 700;
}

.site-fallback nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-fallback a {
  color: var(--color-link, LinkText);
}

.site-fallback h1,
.site-fallback h2 {
  font-family: var(--font-heading, inherit);
  line-height: 1.2;
}

.site-fallback h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  letter-spacing: -0.02em;
}

.site-fallback h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
}

.site-fallback main {
  max-width: 48rem;
}

.site-fallback dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.site-fallback dt {
  color: var(--color-text-muted, inherit);
}

.site-fallback dd {
  margin: 0;
}

.site-fallback img {
  max-width: 100%;
  height: auto;
}

.app-shell {
  position: absolute;
  inset: 0;
  z-index: 9999;
  min-height: 100svh;
  background: var(--color-bg, Canvas);
}

#root:not(:empty) ~ .app-shell {
  display: none;
}

.app-shell__bar {
  height: 4rem;
  background: var(--color-surface, Canvas);
  border-bottom: 1px solid var(--color-border, color-mix(in srgb, CanvasText 12%, transparent));
}

.app-shell__body {
  display: grid;
  width: min(calc(100% - 2rem), 75rem);
  margin: 4rem auto 0;
  gap: 1.25rem;
}

.app-shell__line {
  display: block;
  width: min(36rem, 90%);
  height: 1rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, CanvasText 8%, transparent);
}

.app-shell__line--short {
  width: min(10rem, 40%);
}

.app-shell__line--title {
  width: min(28rem, 75%);
  height: 3rem;
}