/* SunLine — a low sun at dusk, so the interface sits dark and lets the
   magma ramp carry the only real colour on the page. */

:root {
  --ink: #f2ece4;
  --ink-dim: #a49c92;
  --bg: #14100e;
  --panel: rgba(24, 19, 16, 0.92);
  --edge: rgba(242, 236, 228, 0.14);
  --warm: #f0a04b;
  --panel-w: 286px;   /* one width for the whole left column */
  --radius: 10px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a UA default (`display: none`) and loses to
   any class that sets `display` — which .gate (flex) and .slider (block) do.
   Without this rule, "hidden" elements render anyway and JS toggles look
   broken. Must outrank every display declaration, hence !important. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#map { position: absolute; inset: 0; }

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

/* ── title ── */
.panel--title { top: 14px; left: 14px; padding: 14px 18px; width: var(--panel-w); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seg--lang { flex: 0 0 auto; }
.seg--lang button { padding: 3px 8px; font-size: 10.5px; }
.panel--title h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.02em;
}
.panel--title h1::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--warm), transparent);
}
.sub { margin: 8px 0 0; font-size: 13px; color: var(--ink-dim); }
.warn {
  margin: 11px 0 0;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #f5d9a8;
  background: rgba(240, 160, 75, 0.10);
  border: 1px solid rgba(240, 160, 75, 0.45);
  border-left-width: 3px;
  border-radius: 6px;
}
.warn strong { color: var(--warm); }
.when { color: var(--warm); font-variant-numeric: tabular-nums; }

/* ── legend ── */
/* 86px, not 52: the footer below is bottom-anchored in the same column and runs
   ~64px tall once its licence line wraps, so 52 put the last note underneath it. */
.panel--legend { bottom: 86px; left: 14px; padding: 13px 15px; width: var(--panel-w); }
.legend-head-btns { display: flex; align-items: center; gap: 6px; }
#legend-toggle {
  display: none;          /* desktop has the room; the phone gets the control */
  width: 21px; height: 21px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
#legend-toggle:hover { color: var(--warm); border-color: var(--warm); }
#legend-toggle:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 9px;
}
#guide-open {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink-dim);
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
#guide-open:hover { color: var(--warm); border-color: var(--warm); }

/* Sampled from matplotlib magma so the key matches the raster exactly. */
.ramp {
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #000004 0%, #180f3d 15%, #440f76 30%, #721f81 45%,
    #9e2f7f 60%, #cd4071 72%, #f1605d 82%, #fd9668 91%, #fecf92 100%);
}
.ramp-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--ink-dim);
}

.slider { display: block; margin-top: 13px; font-size: 12px; color: var(--ink-dim); }
.slider input { width: 100%; margin-top: 5px; accent-color: var(--warm); }

.basemap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-dim);
}
.seg {
  display: flex;
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
}
.seg button {
  border: 0;
  padding: 4px 10px;
  font-size: 11.5px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--edge); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--warm); color: #1a1108; font-weight: 600; }

.beta {
  font-style: normal;
  font-size: 9.5px;
  padding: 1px 5px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  opacity: 0.75;
  vertical-align: 1px;
}

.note {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--edge);
  font-size: 11.5px;
  color: var(--ink-dim);
}

/* ── landing gate: description + eye-safety warning, once per session ── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(6px);
}
.gate-card {
  width: min(500px, 100%);
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid rgba(240, 160, 75, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gate-card h2 {
  margin: 0 0 10px;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.gate-card h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--warm), transparent);
}
.gate-card p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink); }
.gate-card .warn { font-size: 12.5px; }
#gate-ok {
  display: block;
  margin: 16px 0 0;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: var(--warm);
  color: #1a1108;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
#gate-ok:hover { filter: brightness(1.08); }

/* ── guided hints ── */
.hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 28px));
  padding: 15px 17px;
  background: var(--panel);
  border: 1px solid rgba(240, 160, 75, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.hint p { margin: 0 0 12px; }
.hint-foot { display: flex; align-items: center; justify-content: space-between; }
#hint-step { font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hint button {
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--warm);
  color: #1a1108;
  font-weight: 600;
}
.hint .ghost {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--edge);
  margin-right: 6px;
}
.hint .ghost:hover { color: var(--ink); }

/* ── footer ── */
.panel--foot {
  bottom: 14px; left: 14px;
  padding: 6px 12px;
  width: var(--panel-w);
  font-size: 11.5px;
  color: var(--ink-dim);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;   /* the licence line + links share a narrow column */
}
.panel--foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--edge); }
.panel--foot a:hover { color: var(--warm); border-color: var(--warm); }
/* Place search. Sits in the title panel because "where am I" is the first
   question someone opens this with, before any of the layer controls. */
.search { position: relative; margin-top: 10px; }
.search input {
  width: 100%;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: inherit;
}
.search input::placeholder { color: var(--ink-dim); }
.search input:focus { outline: none; border-color: var(--warm); }
.search input::-webkit-search-cancel-button { display: none; }
#q-clear {
  position: absolute;
  top: 5px; right: 6px;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
#q-clear:hover { color: var(--warm); }
.search-results {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 5;
  margin: 0;
  padding: 4px;
  max-height: 46vh;
  overflow-y: auto;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-results button {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-results button:hover,
.search-results button:focus-visible { background: rgba(240, 160, 75, 0.15); outline: none; }
.search-results .hit-sub { display: block; font-size: 11.5px; color: var(--ink-dim); }
.search-note { margin: 6px 0 0; font-size: 11.5px; color: var(--warm); }

.dot { opacity: 0.4; }

/* The donation link is the one place this interface asks for anything, so it
   gets a shape instead of sitting third in a row of grey links. The mark is the
   subject itself: an amber disc with a bite out of its western limb — what the
   sun actually looks like at 20:12 on the day this map is for. It appears
   nowhere else on the page. */
#kofi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid rgba(240, 160, 75, 0.45);
  border-radius: 999px;
  color: var(--warm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#kofi::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: inset -3.5px 0 0 rgba(24, 19, 16, 0.9);
}
#kofi:hover,
#kofi:focus-visible {
  background: rgba(240, 160, 75, 0.14);
  border-color: var(--warm);
  color: var(--warm);
}
#kofi:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* Subordinate by construction: a hairline above it, dimmed text, and it comes
   after the safety button in both DOM and tab order. Outranks `.gate-card p`
   (0,1,1) with its two classes (0,2,0), or the card's body styles would win. */
.gate-card .gate-support {
  margin: 15px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.gate-card .gate-support a {
  color: var(--warm);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 160, 75, 0.4);
  white-space: nowrap;
}
.gate-card .gate-support a:hover { border-bottom-color: var(--warm); }
.gate-card .gate-support a:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* MapLibre's own chrome, restyled to match. */
.maplibregl-ctrl-attrib { font-size: 10px !important; }
.maplibregl-ctrl-group { background: var(--panel) !important; border: 1px solid var(--edge) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--edge) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) !important; }

@media (max-width: 620px) {
  :root { --panel-w: calc(100vw - 28px); }

  /* MapLibre stacks zoom, compass and geolocate down the top-right corner.
     A full-width title panel lands straight on top of them, so give the panel
     a 46 px right-hand column to breathe into — enough for a 29 px control
     plus its margin. The other panels stay full width: nothing overlaps them. */
  .panel--title {
    padding: 11px 14px;
    width: calc(var(--panel-w) - 46px);
  }

  /* Expanded, this panel is ~394px of ramp, five control groups and two notes.
     On a 390x844 phone that left a 257px strip of map and still ran under the
     footer; on a 667px-tall phone, ~80px. So: collapsed by default, capped at
     half the viewport when open, and scrolling inside itself rather than
     growing into the map. */
  .panel--legend {
    bottom: 76px;
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .panel--legend.collapsed { max-height: none; overflow: visible; }
  .panel--legend.collapsed .legend-body { display: none; }
  #legend-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .hint { bottom: auto; top: 50%; transform: translate(-50%, -50%); }

  /* Every edge is spoken for by a panel that carries more than a scale bar
     does, and at bottom-left it lands under the footer. The basemap's own
     labels give enough sense of scale on a phone. */
  .maplibregl-ctrl-scale { display: none; }
}