/* Styling for the documentation page and the example pages. The library ships no CSS. */

:root {
  --ink: #1a1a1a;
  --muted: #666;
  --rule: #ddd;
  --accent: #2a6496;
}

* { box-sizing: border-box; }

body {
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

nav { margin-bottom: 1rem; font-size: 0.9rem; }
nav a { color: var(--accent); text-decoration: none; }
nav a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin-top: 1.5rem; }
h4 { font-size: 0.95rem; margin-top: 1.25rem; color: var(--muted); }

p { margin: 0.75rem 0; }

a { color: var(--accent); }

#map {
  margin: 1rem 0 0.5rem;
  /* A checkerboard, so it is obvious where the canvas is transparent rather than white. */
  background-image:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%),
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  display: inline-block;
  line-height: 0;
}

/* Responsive variant: the container spans the column and the widget is told to fill it, with
   `aspectRatio` deriving the height. The width MUST come from the container rather than from the
   canvas, so this cannot be `inline-block` -- an inline-block shrink-wraps its content, the widget
   would measure its own canvas, and the size would never change.

   Note what is deliberately NOT done here: no `max-width: 100%` on the canvas. That would make CSS
   scale it, so its rect would stop matching the pixel size the library thinks it has, and every
   pointer position would be off by the ratio. The canvas is resized for real instead. */
#map.fill {
  display: block;
  width: 100%;
}

#map canvas { cursor: grab; }
#map canvas:active { cursor: grabbing; }

.note {
  font-size: 0.9rem;
  color: var(--muted);
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
}

.controls { margin: 0.5rem 0; font-size: 0.9rem; }
.controls label { margin-right: 1rem; white-space: nowrap; }

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

code {
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f5f5f5;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* A code block is one gray slab. The `code` inside it must drop the inline pill styling, or every
   block would be a box inside a box. Long lines scroll rather than wrap: these are lines of
   JavaScript and JSON meant to be copied, and a soft wrap makes them harder to read and to trust. */
pre {
  background: #f5f5f5;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.45;
}
pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}