/* Placemat's tokens, defined once. Base pages (sign-in, /setup, the Lobby, the
   Run page) read the --rer-* names; the app (placemat.css), the floor plan
   (plan.css) and the run site read the --pm-* names. Ink on warm paper for all
   chrome; sea-glass only inside drawings and as the app's small fills. Fonts
   are declared in /fonts/fonts.css. */
:root {
  --pm-paper: #FBFAF6;
  --pm-surface: #FFFFFF;
  --pm-ink: #1F242B;
  --pm-muted: #5B636B;
  --pm-rule: #E2E1DB;
  --pm-head: #F6F5F0;
  --pm-control: #8B9096;
  --pm-plan: #2A3038;
  --pm-sea-soft: #C7E7DE;
  --pm-sea-deep: #8BC1C6;
  --pm-notice: #E4F3EE;
  --pm-shadow: 0 1px 2px rgb(31 36 43 / .06), 0 10px 28px rgb(31 36 43 / .07);
  --pm-display: Gelasio, Georgia, 'Times New Roman', serif;
  --pm-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rer-font-heading: var(--pm-display);
  --rer-font-body: var(--pm-ui);
  --rer-page: var(--pm-paper);
  --rer-surface: var(--pm-surface);
  --rer-text: var(--pm-ink);
  --rer-muted: var(--pm-muted);
  --rer-border: var(--pm-control);
  --rer-focus: var(--pm-ink);
  --rer-link: var(--pm-ink);
  --rer-accent: var(--pm-ink);
  --rer-accent-text: #FFFFFF;
  --rer-radius: 14px;
  --rer-logo: url('/brand/mark.svg');
}

/* Base's no-JavaScript pages (sign-in, /setup) sit over a faint plan of the
   room; the app and the guest page (body[data-page]) do not. */
.rer-themed body:not([data-page]) { position: relative; isolation: isolate; }
.rer-themed body:not([data-page])::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('/brand/room.svg') center / cover no-repeat; opacity: .12;
}
.rer-themed body:not([data-page]) main { position: relative; margin-top: 8vh; border: 1px solid var(--pm-rule); box-shadow: var(--pm-shadow); }
.rer-themed body:not([data-page]) :is(.rer-brand, .brand) { justify-content: center; margin-bottom: 22px; color: var(--pm-ink); font-size: 24px; font-weight: 600; }
.rer-themed body:not([data-page]) h1 { font-weight: 600; text-align: center; }
.rer-themed body:not([data-page]) button { border-radius: 999px; }
.rer-themed body:not([data-page]) input:not([type=checkbox]):not([type=hidden]) { border-color: var(--pm-control); border-radius: 10px; }
.rer-themed body:not([data-page]) h1 { font-size: 36px; }
.rer-themed body:not([data-page]) dl { grid-template-columns: 112px minmax(0, 1fr); gap: 0; border-top: 1px solid var(--pm-rule); }
.rer-themed body:not([data-page]) :is(dt, dd) { padding: 11px 0; border-bottom: 1px solid var(--pm-rule); }
@media (max-width: 480px) { .rer-themed body:not([data-page]) h1 { font-size: 30px; } .rer-themed body:not([data-page]) dl { grid-template-columns: 76px minmax(0, 1fr); } }