/* Shared by both maps: index.html (Wikipedia) and voyage/index.html. */

:root {
  color-scheme: light;
  --surface: #f8f8f6;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --hairline: #e1e0d9;
  --ring: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --shadow: 0 2px 12px rgba(11, 11, 11, 0.12);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0e0e0e;
  --panel: rgba(26, 26, 25, 0.92);
  --panel-solid: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --ink-3: #898781;
  --hairline: #2c2c2a;
  --ring: rgba(255, 255, 255, 0.12);
  --accent: #3987e5;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  /* No rubber-band on the page itself: a drag that starts on the map and
     ends past its edge should move the map, not bounce the document. */
  overscroll-behavior: none;
}
body {
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
}
/* A long press on a map is a pan, not a text selection or a callout menu. */
#map {
  position: absolute; inset: 0;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
button, label, a, .result { -webkit-tap-highlight-color: transparent; }

.panel {
  position: absolute;
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ring);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ---- left control panel ---- */
/* dvh, not vh: on a phone `vh` is the *large* viewport, so a panel sized to
   it runs on under the browser's own chrome and its last rows cannot be
   reached. The vh line stays as the fallback for browsers without dvh. */
#controls {
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  width: min(306px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column;
  z-index: 10;
}
#controls header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
}
#controls h1 {
  font-size: 13px; font-weight: 600; margin: 0; flex: 1;
  letter-spacing: -0.01em;
}
.icon-btn {
  border: 1px solid var(--ring); background: transparent; color: var(--ink-2);
  border-radius: 6px; width: 26px; height: 24px; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
  flex: none;
}
.icon-btn:hover { background: var(--hairline); color: var(--ink); }
a.icon-btn { text-decoration: none; }

/* The way across to the other map, in the header so it survives collapsing. */
.site-link {
  flex: none; font-size: 11px; line-height: 1; color: var(--accent);
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--ring); border-radius: 6px; padding: 5px 7px;
}
.site-link:hover { background: var(--hairline); }

#collapse-btn { transition: transform .15s; }
#controls.collapsed #collapse-btn { transform: rotate(-90deg); }
/* Collapsed: only the header bar (title + buttons) remains visible, so
   the panel reads as a small pill instead of covering the map. */
#controls.collapsed .search-wrap,
#controls.collapsed .scroll {
  display: none;
}

.attribution {
  margin: 14px 0 0; font-size: 11px; color: var(--ink-3);
  padding-top: 10px; border-top: 1px solid var(--hairline);
}
.attribution a {
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
}
.attribution a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.search-wrap { padding: 0 12px 10px; position: relative; }
#search {
  width: 100%; padding: 7px 9px; font: inherit;
  color: var(--ink); background: var(--panel-solid);
  border: 1px solid var(--hairline); border-radius: 7px;
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#results {
  position: absolute; left: 12px; right: 12px; top: 100%;
  background: var(--panel-solid); border: 1px solid var(--ring);
  border-radius: 8px; box-shadow: var(--shadow);
  max-height: 320px;
  max-height: min(320px, 45dvh);
  overflow-y: auto; overscroll-behavior: contain;
  display: none; z-index: 20;
}
#results.open { display: block; }
.result {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--hairline);
}
.result:last-child { border-bottom: 0; }
.result:hover, .result[aria-selected="true"] { background: var(--hairline); }
.result .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .cat { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* Everything below the search scrolls, so the panel fits any screen it is
   given - a phone in landscape has room for the header and about four rows.
   `overscroll-behavior: contain` keeps a flick that reaches the end of the
   list from being handed to the page underneath.
   The scrollbar is a fixed 8px gutter with a thumb that only appears while
   the pointer is over the panel: it never takes space it did not already
   take, so a desktop showing the whole list shows no furniture at all.
   Phones overlay their own scrollbar and ignore all of this. */
.scroll {
  overflow-y: auto;
  padding: 0 12px 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#controls:hover .scroll, .scroll:focus-within {
  scrollbar-color: var(--ink-3) transparent;
}
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
#controls:hover .scroll::-webkit-scrollbar-thumb,
.scroll:focus-within::-webkit-scrollbar-thumb { background: var(--ring); }

.section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  margin: 12px 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.section-title button {
  margin-left: auto; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0;
  cursor: pointer; padding: 0;
}

.cat-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.cat-row .twisty {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  width: 14px; padding: 0; font-size: 9px; line-height: 1;
}
.cat-row label { display: flex; align-items: center; gap: 7px; flex: 1; cursor: pointer; min-width: 0; }
.cat-row .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .count { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.subs { margin: 2px 0 6px 27px; display: none; }
.subs.open { display: block; }
.subs label {
  display: flex; align-items: center; gap: 6px; padding: 1px 0;
  color: var(--ink-2); cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--accent); margin: 0; }

.slider-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 8px 0; }
.slider-row label { font-size: 12px; color: var(--ink-2); }
.slider-row output { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.slider-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.hint { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; }

/* ---- status bar ---- */
#status {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  padding: 6px 10px;
  font-size: 11px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 10px; align-items: center; z-index: 10;
}
#status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  opacity: 0; transition: opacity .15s;
}
#status.busy .dot { opacity: 1; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---- detail panel ---- */
#detail {
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  display: none; z-index: 10;
}
#detail.open { display: block; }
#detail .close {
  position: absolute; top: 8px; right: 8px;
}
#detail .body { padding: 12px 14px; }
#detail h2 { font-size: 15px; margin: 0 6px 2px 0; padding-right: 22px; line-height: 1.3; }
#detail .meta { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
#detail img {
  width: 100%; border-radius: 7px; margin: 6px 0 8px; display: block;
  background: var(--hairline);
}
#detail .extract { color: var(--ink-2); margin: 0 0 10px; }
#detail dl {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  margin: 0 0 10px; font-size: 12px;
}
#detail dt { color: var(--ink-3); }
#detail dd { margin: 0; }
.links { display: flex; flex-wrap: wrap; gap: 6px; }
.links a {
  font-size: 12px; text-decoration: none; color: var(--accent);
  border: 1px solid var(--ring); border-radius: 6px; padding: 3px 8px;
}
.links a:hover { background: var(--hairline); }

#tooltip {
  position: absolute; pointer-events: none; z-index: 30;
  background: var(--panel-solid); border: 1px solid var(--ring);
  border-radius: 7px; box-shadow: var(--shadow);
  padding: 6px 10px; font-size: 12px; max-width: 280px; display: none;
}
/* A touch screen cannot hover, so the same box is opened by a tap instead -
   and then it has to be tappable itself, which is the one thing a tooltip
   normally must not be. `.touch` is added by src/ui.js for exactly that
   tap: the popup takes the pointer, and a tap on it opens the full panel. */
#tooltip.touch {
  pointer-events: auto; cursor: pointer;
  padding: 9px 12px; max-width: min(300px, calc(100vw - 24px));
  border-color: var(--ring); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}
#tooltip .t-more {
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid var(--hairline);
  color: var(--accent); font-size: 11.5px; font-weight: 600;
  display: flex; gap: 8px;
}
#tooltip .t-more .t-dismiss { margin-left: auto; color: var(--ink-3); font-weight: 400; }
#tooltip .t-name { font-weight: 600; }
#tooltip .t-meta { color: var(--ink-3); font-size: 11px; }
#tooltip .t-descr { color: var(--ink-2); font-size: 11.5px; margin: 3px 0 2px; }
#tooltip .t-rank {
  color: var(--ink-3); font-size: 10.5px; margin-top: 3px;
  padding-top: 3px; border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

#loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--surface); z-index: 50; font-size: 13px; color: var(--ink-2);
}
#loading.hidden { display: none; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* ---- touch ----------------------------------------------------------
   Sizing, not layout: a finger is about 9 mm across and every hit target
   here was cut for a mouse cursor. Keyed on the pointer rather than on the
   width, because a small window on a desktop still has a mouse and a large
   tablet does not. */
@media (pointer: coarse) {
  .icon-btn { width: 34px; height: 31px; font-size: 15px; }
  /* 16px is the threshold under which iOS Safari zooms the whole page when
     a field takes focus - which leaves the map at the wrong scale after. */
  #search { font-size: 16px; padding: 9px 11px; }
  .result { padding: 10px; }
  .cat-row { padding: 5px 0; }
  .cat-row .twisty { width: 22px; padding: 6px 0; font-size: 10px; }
  .subs label { padding: 4px 0; }
  input[type="checkbox"] { width: 17px; height: 17px; }
  .slider-row { margin: 12px 0; }
  .slider-row input { height: 24px; }
  .links a { padding: 7px 11px; font-size: 13px; }
  .site-link { padding: 9px 9px; font-size: 12px; }
  .section-title button { padding: 4px 0; }
}

/* ---- small screens --------------------------------------------------- */
@media (max-width: 640px) {
  /* The status line is five diagnostics in a row: it needs about 380px to
     say anything and it covers the map to do it. On a phone only the
     loading pulse survives, which is the one part that is not a number. */
  #status {
    padding: 7px; gap: 0; opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  #status.busy { opacity: 1; }
  #status-text { display: none; }

  #controls {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px));
  }

  /* A 320px card in the top right corner would sit on top of the control
     panel and cover most of the map besides. A bottom sheet is the shape
     that works: it rises from the edge the thumb is already at, and it
     leaves the tapped dot visible above it. */
  #detail {
    top: auto; left: 8px; right: 8px; width: auto;
    bottom: 0;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    max-height: 70vh;
    max-height: min(70dvh, calc(100dvh - 88px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #detail .body { padding: 14px 16px; }
}

/* ---- travel map: month row and season charts ---- */
.section-out {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.when-bar { padding: 0 12px 10px; }
.when-bar .section-title { margin-top: 0; }
.months {
  display: grid; grid-template-columns: 2.4fr repeat(12, 1fr); gap: 2px;
  margin: 2px 0 4px;
}
.month {
  border: 1px solid var(--ring); background: transparent; color: var(--ink-2);
  border-radius: 5px; padding: 4px 0; font: inherit; font-size: 11px;
  cursor: pointer; min-width: 0;
}
.month:hover { background: var(--hairline); color: var(--ink); }
.month.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.month:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.slider-row input:disabled { opacity: 0.4; }

.season-chart { display: block; }
.season-chart .bar { fill: var(--ink-3); opacity: 0.55; }
.season-chart .bar.on { fill: var(--accent); opacity: 1; }
.season-chart .lbl { fill: var(--ink-3); font-size: 8.5px; }
.season-chart .lbl.on { fill: var(--accent); font-weight: 600; }
#tooltip .t-rank .season-chart { margin: 2px 0 3px; }
#detail .season-chart { margin: 0 0 10px; width: 100%; height: auto; }

@media (pointer: coarse) {
  .month { padding: 9px 0; font-size: 12px; }
}