/* The new page's own CSS (src/LAYOUT.md: beside app.js): the
   map's place, the boot message, the map's credits. Colours come from
   look/tokens.css, the shell's look from ui/shell.css. */

/* The page never scrolls: the map fills it, and what slides in from an edge
   (the drawer, 5e-1) must not widen it while it sits off the edge.
   Hiding the overflow isn't enough for that. The drawer is placed by the
   window, not the body, so the body's overflow never held it, and a phone's
   browser widened the page to take in the closed drawer: 720 px of screen
   laid out 1110 wide, a drag on the panel panning the screen across it
   (issue 093). The body is the box everything is placed in, then, and it
   clips: nothing placed can reach past it. */
html { height: 100%; overflow: hidden; background: var(--backdrop); }
body { position: relative; height: 100%; margin: 0; overflow: clip; background: var(--backdrop); }
#map { position: absolute; inset: 0; }

/* What the boot reporter in map.html writes into. Empty until something goes
   wrong; and once the page has booted it is hidden for good, so the deadline's
   "taking long" can never sit over a map that did start. The one thing that
   outlasts a boot is a file of ours that didn't load (data-boot-failed).

   If look/tokens.css itself is what didn't load, every var() here is empty,
   and an empty background and colour would leave black text on the dark map:
   the one message that must be read, unreadable. So these three fall back to
   the browser's own system colours (Canvas, CanvasText), which are not ours
   to name and so are no copy of a token. */
#boot {
  position: absolute; z-index: 2000; left: 50%; top: 40%; transform: translate(-50%, -50%);
  max-width: min(34rem, 86vw); padding: 14px 18px; border-radius: 8px;
  background: var(--surface, Canvas); color: var(--text-bright, CanvasText);
  border: 1px solid var(--hairline-strong, CanvasText);
  font: 13px/1.55 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
#boot:empty, html[data-booted]:not([data-boot-failed]) #boot { display: none; }

/* The bench box (issue 024, step 2f-3; ARCHITECTURE.md section 14): made by
   src/bench/bench.js under ?bench only, so the page carries nothing of it
   otherwise. At the bottom left (user, 2026-09-24; it sat at the top right
   from step 2i-2, and under the panel's header before that, until the
   controls made the panel tall). The panel only reaches the bottom when it fills
   the window's height; the box then sits over its last lines, above it by
   z-index, and collapsing the panel clears it. The credits hold the bottom
   right. Monospace, a diagnostic and not a design item: live fps during a
   run, the table of results after. */
.bench {
  position: absolute; z-index: 1500; left: 12px; bottom: 12px; max-width: min(64rem, 92vw);
  padding: 8px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text);
  border: 1px solid var(--hairline-strong);
  font: 400 10.5px/1.5 var(--mono, 'JetBrains Mono', ui-monospace, Consolas, monospace);
}
.bench-title { color: var(--text-dim); letter-spacing: .08em; }
.bench-live { color: var(--live); }
.bench-watch { margin-top: 2px; color: var(--text); }
.bench-table { margin: 4px 0 0; white-space: pre; font: inherit; color: var(--text-bright); }
.bench-table:empty { display: none; }
/* The bench's one button (4f-3a): arms the chime, then starts a grown run. Big enough to hit from a headset. */
.bench-button {
  display: block; margin-top: 4px; padding: 6px 12px; border-radius: 4px; cursor: pointer;
  background: var(--surface); color: var(--live); border: 1px solid var(--live); font: inherit;
}
.bench-button[hidden] { display: none; }

/* The map's credits: small and dim, as the old page has them. MapLibre's own
   selector, and this sheet loads after MapLibre's, so nothing needs
   !important. Under 640 px MapLibre folds the control into an (i) button,
   whose white pill and dark icon are restyled to match. */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--backdrop) 60%, transparent); color: var(--credit);
  font: 9px/1.5 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
.maplibregl-ctrl-attrib a { color: var(--credit-link); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: color-mix(in srgb, var(--backdrop) 60%, transparent); }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
  background-color: color-mix(in srgb, var(--white) 35%, transparent);
}