/*
 * base.css: reset, page layout and accessibility basics.
 *
 * Layout in one sentence: the map fills the screen and the info panel floats on top
 * of it (desktop), or sits underneath it (phones, below 47.5rem).
 * CSS variables can't be used inside @media queries, so the breakpoint is written out below.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--map-void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, dl, dd, ul, figure { margin: 0; }
button { font: inherit; color: inherit; }

/* The HTML "hidden" attribute must always win over any display rule below. */
[hidden] { display: none !important; }

/* Keyboard focus: dark ring with a light halo, visible on both the map and the panel. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--sheet);
}

/* ------------------------------------------------------------------ Layout */

.app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.stage { position: absolute; inset: 0; }
.map   { position: absolute; inset: 0; }

/* The HTML holds placeholder text. Never show it: the panel and toolbar stay hidden until
   src/main.js (or src/present.js) has loaded a real plot (it adds .is-ready). If loading fails, only the error shows. */
.app:not(.is-ready) .sheet,
.app:not(.is-ready) .toolbar { visibility: hidden; }

@media (max-width: 47.5rem) {
  .app {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .stage { position: relative; inset: auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}