/* In globe projection the void around the globe is this element's own
   background (the style's "background" layer does not paint there), so the page
   and the guide share one surface. Dark is the default palette; the on-map
   ThemeControl button switches to the light one by setting
   <html data-theme="light">. */
:root {
  --backdrop: #0d1b2a;
  --text: #dfe8f2;
  --border: #3a5170;
  --code-bg: #08121d;
  --code-fg: #cbd6e2;
  --pre-bg: #08121d;
  --pre-fg: #cbd6e2;
  --th-bg: #08121d;
  --zebra: rgba(255, 255, 255, 0.03);
}

:root[data-theme="light"] {
  --backdrop: #f0f0f0;
  --text: #333;
  --border: #ddd;
  --code-bg: #f3f3f3;
  --code-fg: #333;
  --pre-bg: #333;
  --pre-fg: #ccc;
  --th-bg: #f6f6f6;
  --zebra: #fafafa;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--backdrop);
  color: var(--text);
}

body {
  display: flex;
  flex-flow: row nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #39c;
}

a {
  color: #e83;
}

p {
  line-height: 1.5;
}

pre {
  background-color: var(--pre-bg);
  color: var(--pre-fg);
  border-radius: 3px;
  padding: 1em;
  white-space: pre-break;
  word-break: break-all;
}

pre.shell::before {
  content: "$ ";
}

code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background-color: var(--code-bg);
  color: var(--code-fg);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

ul {
  padding-left: 1.2em;
}

li {
  margin: 0.35em 0;
  line-height: 1.5;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.9em;
}

th,
td {
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}

th {
  background-color: var(--th-bg);
  color: #39c;
}

tbody tr:nth-child(even) {
  background-color: var(--zebra);
}

small {
  color: #888;
  font-weight: normal;
}

/* Svelte mounts the map in here. display:contents keeps #map a direct flex item
   of body; the MapLibre controls (incl. the language and style pickers) live
   inside #map. */
#app {
  display: contents;
}

#map {
  background: var(--backdrop);
  position: relative;
  width: 60vw;
  height: 100vh;
}

/* Pickers (language, style variation): MapLibre controls (src/lib/create-*-
   control.ts) whose button borrows the control-group look, with the options as a
   flyout panel beside it. These styles live here rather than in the component
   because `make app` only copies dist/main.js - a component <style> block would
   be emitted as dist/app.css and never reach the deployed page. */
.map-control {
  position: relative;
}

.map-control .control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #333;
}

.map-control .control-button:hover,
.map-control .control-button.open {
  background-color: #f2f2f2;
}

.control-flyout {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  min-width: 11em;
  max-width: 16em;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}

.control-flyout button {
  display: block;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #333;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.control-flyout button:hover {
  background: #f2f2f2;
}

.control-flyout button.selected {
  background: #e3f1fa;
  font-weight: 600;
}

/* second, explanatory line of an option (currently: the style variations) */
.control-flyout button small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
}

#guide {
  box-sizing: border-box;
  width: 40vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 0 1em;
}

@media (max-width: 600px) {
  body {
    flex-flow: column nowrap;
  }

  #map {
    height: 60vh;
    width: 100vw;
  }

  #guide {
    height: 40vh;
    width: 100vw;
    overflow-y: scroll;
  }
}