/* Cataterra — site pages (error + legal), BLUEPRINT direction.
   Deliberately separate from app.css: these pages are served to strangers and,
   in 500.html's case, rendered by Django with no request, no context
   processors and no database (docs/plans/gate-opening-plan.md locked decisions
   2 and 3). Coupling them to the game shell's stylesheet would drag the whole
   authenticated layout — sidebar, chat dock, topbar chips — into a page that
   must render from static assets alone. Keep this file small.
   Tokens are copied, not imported, from app.css :root for the same reason.
   See docs/ui-ux/site-pages-screen.md. */

:root{
  --bg:#121a20; --panel:#19232b; --sink:#0e151a;
  --line:#2e3e48; --rule:#3b4f5b;
  --text:#eef3f6; --muted:#b8c7d0; --faint:#90a1ab;
  --accent:#5fb0c2; --accent-ink:#06141a;
  --radius:0.125rem;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
}

* { box-sizing: border-box; }
/* Same baked ~110% rem base as the game, reset on phones (mobile-web.md §1). */
html { font-size: 110%; }
html, body { margin: 0; }
body {
  font-family: var(--ui);
  color: var(--text); background: var(--bg); line-height: 1.5; font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(a, button, summary):focus-visible {
  outline: 0.125rem solid var(--accent); outline-offset: 0.125rem;
}
h1, h2 { font-family: var(--ui); font-weight: 650; margin: 0; }

/* Header: the wordmark alone. No navigation, no player state — an error page
   is served to strangers in every access mode. */
.site-top {
  display: flex; align-items: center;
  background: var(--panel); border-bottom: 0.0625rem solid var(--rule);
  padding: 0.5625rem 1rem;
}
.site-top .brand { font-weight: 700; font-size: 1.0625rem; color: var(--text); letter-spacing: .02em; }
.site-top .brand .logo {
  display: inline-block; width: 0.875rem; height: 0.875rem;
  background: var(--accent); vertical-align: -0.125rem; margin-right: 0.5rem;
}

.site-main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.site-card {
  background: var(--panel); border: 0.0625rem solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.25rem 1.5rem;
}
/* The status code is coded data, so it is the one mono thing on the page
   (design-direction.md §Type; anti-slop.md Part 1). */
.site-card .code {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; letter-spacing: .14em; color: var(--faint);
  display: block; margin-bottom: 0.25rem;
}
.site-card h1 { font-size: 1.375rem; }
.site-card h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.site-card p { color: var(--muted); margin: 0.75rem 0; }
.site-card p.lead { color: var(--text); }

/* One working way back — a 44px touch target (mobile-web.md G4). */
.site-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.site-btn {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.5rem 1rem; border: 0.0625rem solid var(--line);
  border-radius: var(--radius); background: var(--sink); color: var(--text);
}
.site-btn:hover { text-decoration: none; border-color: var(--rule); }
.site-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Tables scroll inside their own container; the body never scrolls sideways. */
.site-tablewrap { overflow-x: auto; margin: 0.75rem 0; }
table.site-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.875rem; }
table.site-table th, table.site-table td {
  border: 0.0625rem solid var(--line); padding: 0.4375rem 0.625rem;
  text-align: left; vertical-align: top;
}
table.site-table th { background: var(--sink); color: var(--text); font-weight: 600; }
table.site-table td { color: var(--muted); }

.site-foot {
  max-width: 44rem; margin: 0 auto; padding: 0 1rem 2rem;
  color: var(--faint); font-size: 0.8125rem;
}
.site-foot a { color: var(--muted); }


@media (max-width: 760px) {
  html { font-size: 100%; }
  .site-main { padding: 1.25rem 0.875rem 2rem; }
  .site-card { padding: 1rem; }
}