/* Eclipse Mapper — map fills the viewport, panels float above it. */

:root {
  --bg: #ffffff;
  --bg-sunk: #f1f5f9;
  --ink: #0f172a;
  --ink-dim: #64748b;
  --line: #e2e8f0;
  --accent: #4c1d95;
  --focus: #2563eb;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .12);
  --radius: 12px;
  --total: #4c1d95;
  --annular: #c2410c;
  --penumbra: #64748b;
  --greatest: #dc2626;
  --panel-w: 21rem;
  /* What shows around the globe: the map canvas is transparent past the sphere,
     so this is the sky the globe hangs in. Invisible on the flat map. */
  --space: #dfeaf3;
  /* MapLibre's zoom glyphs are baked-in dark images; this flips them to match. */
  --ctrl-icon-filter: none;
}

/* Dark twice over: once for the system setting, once for the in-map toggle, which
   has to win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --bg-sunk: #1e293b;
    --ink: #e2e8f0;
    --ink-dim: #94a3b8;
    --line: #334155;
    --accent: #a78bfa;
    --focus: #60a5fa;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    --total: #a78bfa;
    --annular: #fb923c;
    --penumbra: #94a3b8;
    --greatest: #f87171;
    --space: #05080f;
    --ctrl-icon-filter: invert(1);
  }
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --bg-sunk: #1e293b;
  --ink: #e2e8f0;
  --ink-dim: #94a3b8;
  --line: #334155;
  --accent: #a78bfa;
  --focus: #60a5fa;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --total: #a78bfa;
  --annular: #fb923c;
  --penumbra: #94a3b8;
  --greatest: #f87171;
  --space: #05080f;
  --ctrl-icon-filter: invert(1);
}

* { box-sizing: border-box; }

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

#map { position: absolute; inset: 0; background: var(--space); }

/* The view from the pinned place while the shadow runs: a small disc of sky in
   the corner, clear of the zoom controls. The canvas draws its own circle, so
   the box only has to sit still and cast the shadow. */
.eye {
  position: absolute;
  z-index: 3;
  top: .75rem;
  right: 3.5rem;
  display: grid;
  justify-items: center;
  gap: .3rem;
  pointer-events: none;
}
.eye canvas {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.eye__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  padding: .1rem .55rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.eye__label:empty { display: none; }
.eye__label--time { font-weight: 500; font-size: .68rem; color: var(--ink-dim); }
.eye[hidden] { display: none; }   /* display:grid above would beat the UA rule */
@media (max-width: 46rem), (max-height: 34rem) {
  .eye canvas { width: 5.5rem; height: 5.5rem; }
}

/* The picked place, docked bottom-right clear of the scale and attribution.
   When the timeline is up it steps over that too. */
.place {
  position: absolute;
  z-index: 3;
  right: .75rem;
  bottom: 3.6rem;
  width: 15.5rem;
  max-width: calc(100vw - 1.5rem);
  max-height: 45vh;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .65rem .8rem .7rem;
}
body.has-timeline .place { bottom: 6.4rem; }
.place__close {
  position: absolute;
  top: .25rem; right: .3rem;
  width: 1.5rem; height: 1.5rem;
  border: 0; border-radius: 6px;
  background: none; color: var(--ink-dim);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.place__close:hover { background: var(--bg-sunk); color: var(--ink); }
.pop__link {
  font: inherit; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.pop__link:hover { text-decoration-style: solid; }

/* The city-by-city rows in the details panel. Each city is a button that pins
   it, so the row doubles as a way into the card and the corner disc. */
.facts__cities-title {
  margin: .8rem 0 .25rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-dim);
}
ul.facts__cities {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .18rem;
  font-size: .8rem;
}
ul.facts__cities li {
  display: flex; justify-content: space-between; gap: .6rem;
  align-items: baseline;
}
.facts__citytime {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Word from a button press: floats above the timeline, minds its own business. */
.toast {
  position: absolute;
  left: 50%; bottom: 7.6rem;
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(30rem, calc(100vw - 2rem));
  overflow-wrap: anywhere;
  background: var(--ink); color: var(--bg);
  font-size: .8rem; font-weight: 500;
  padding: .45rem .95rem; border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.toast.is-on { opacity: 1; }
@media (max-width: 46rem), (max-height: 34rem) {
  /* The sheet owns the bottom of a phone; the card moves to the top left and is
     capped to the strip the sheet leaves free (it can take 68vh, plus the
     timeline below it), scrolling inside itself rather than lying over the
     sheet's own header. */
  .place, body.has-timeline .place {
    top: .5rem; left: .5rem; right: auto; bottom: auto;
    width: min(15rem, calc(100vw - 4.5rem));
    max-height: clamp(4.5rem, calc(32vh - 7.6rem), 12rem);
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- panels */

.rail {
  position: absolute;
  z-index: 2;
  top: .75rem;
  left: .75rem;
  bottom: .75rem;
  width: var(--panel-w);
  max-width: calc(100vw - 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;   /* the gaps stay part of the map */
}

.panel {
  pointer-events: auto;
  min-height: 0;          /* flex children default to min-height:auto and refuse to shrink */
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel--main { flex: 1 1 auto; min-height: 0; }
.panel.is-collapsed { flex: 0 0 auto; max-height: none; min-height: 0; }

/* One panel, two scroll areas: the list, and the details beneath it. The header
   keeps the stepper, so an eclipse can be changed without opening anything. */
.panel--main .panel__body {
  gap: 0; padding: 0;
  overflow: hidden;        /* the two regions inside do their own scrolling */
}

.picker {
  flex: 1 1 auto;
  min-height: 6rem;        /* enough for the controls; the list takes what is left */
  display: flex; flex-direction: column; gap: .55rem;
  padding: .7rem .9rem .6rem;
}

.details {
  flex: 0 0 auto;
  max-height: 42%;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding: .7rem .9rem .8rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.details.is-busy { opacity: .5; }

.panel__head {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .5rem .5rem .55rem;
  border-bottom: 1px solid var(--line);
}

.panel.is-collapsed .panel__head { border-bottom: none; }
.panel.is-collapsed .panel__body { display: none; }

.panel__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel__range {
  font-size: .75rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.panel__toggle {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-dim);
  cursor: pointer; display: grid; place-items: center;
}
.panel__toggle:hover { background: var(--bg-sunk); color: var(--ink); }
.panel__toggle span[aria-hidden]::before { content: "▾"; font-size: .8rem; }
.panel__toggle[aria-expanded="false"] span[aria-hidden]::before { content: "▸"; }

.panel__body {
  padding: .75rem .9rem .9rem;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 0;
}

/* --------------------------------------------------------------- stepper */

.stepper__btn {
  flex: none; width: 2rem; height: 1.9rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { background: var(--bg-sunk); }
.stepper__btn:disabled { opacity: .35; cursor: default; }

.stepper__now {
  flex: 1; display: grid; place-items: center;
  border-radius: 8px; background: var(--bg-sunk);
  font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .3rem .5rem; text-align: center; min-width: 0;
}

/* ---------------------------------------------------------- search, chips */

.search input {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .85rem;
}
.search input::placeholder { color: var(--ink-dim); }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.chip {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-dim);
  font: inherit; font-size: .74rem; font-weight: 500;
  padding: .18rem .55rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
}
.chip:hover { border-color: var(--ink-dim); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip__dot { width: .5rem; height: .5rem; border-radius: 50%; }

/* ------------------------------------------------------------------ list */

.list__count { margin: 0; font-size: .72rem; color: var(--ink-dim); }

.list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px;
  min-height: 6rem;
  flex: 1;
}

.list button {
  width: 100%; display: flex; align-items: baseline; gap: .5rem;
  padding: .38rem .55rem;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: inherit;
  font: inherit; font-size: .82rem; text-align: left; cursor: pointer;
}
.list li:last-child button { border-bottom: 0; }
.list button:hover { background: var(--bg-sunk); }
.list button[aria-current="true"] { background: var(--accent); color: #fff; }
.list button[aria-current="true"] .badge { background: rgba(255, 255, 255, .22); color: #fff; }

.list__date { font-variant-numeric: tabular-nums; flex: 1; }

.badge {
  font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .08rem .35rem; border-radius: 4px; flex: none;
}
.badge--total    { background: color-mix(in srgb, var(--total) 18%, transparent); color: var(--total); }
.badge--annular  { background: color-mix(in srgb, var(--annular) 20%, transparent); color: var(--annular); }
.badge--hybrid   { background: color-mix(in srgb, var(--greatest) 18%, transparent); color: var(--greatest); }
.badge--partial  { background: var(--bg-sunk); color: var(--ink-dim); }

/* ----------------------------------------------------------------- facts */

.facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; font-size: .8rem; }
.facts dt { color: var(--ink-dim); white-space: nowrap; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts__code { color: var(--ink-dim); font-size: .78em; }
.facts__series {
  font: inherit; color: inherit; padding: 0; border: 0; background: none;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px;
  text-decoration-color: var(--ink-dim);
}
.facts__series:hover { color: var(--accent); text-decoration-color: currentColor; }
.facts .facts__note { grid-column: 1 / -1; color: var(--ink-dim); font-size: .76rem; margin-top: .3rem; }

/* ---------------------------------------------------------------- legend */

.legend__title {
  margin: .1rem 0 0; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim);
}

.legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .8rem;
  font-size: .76rem;
}
.legend li { display: flex; align-items: center; gap: .4rem; }
.legend li[hidden] { display: none; }

.sw { width: 1.1rem; height: .7rem; border-radius: 3px; flex: none; }
.sw--total    { background: color-mix(in srgb, var(--total) 32%, transparent); border: 1.2px solid var(--total); }
.sw--annular  { background: color-mix(in srgb, var(--annular) 32%, transparent); border: 1.2px solid var(--annular); }
.sw--penumbra { background: color-mix(in srgb, var(--penumbra) 14%, transparent); border: 1.2px dashed var(--penumbra); }
.sw--central  { height: 0; border-top: 2.5px solid var(--ink); border-radius: 0; }
.sw--greatest { height: .7rem; width: .7rem; border-radius: 50%; border: 2.5px solid var(--greatest); margin: 0 .2rem; }
.sw--marks    { height: .45rem; width: .45rem; border-radius: 50%; background: var(--ink); margin: 0 .32rem; }


/* --------------------------------------------------------------- controls */

.map-btn {
  display: grid; place-items: center;
  width: 29px; height: 29px;
  background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: #333;
}
@media (prefers-color-scheme: dark) { .map-btn { color: #ddd; } }

/* Stock MapLibre paints this bar translucent white while the text inherits the
   theme's ink -- in dark mode that was light-on-light. Both now follow the
   theme. Doubled selector: the vendor rule carries two classes, so one loses. */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
  font-size: 10px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--ink-dim);
}
.maplibregl-ctrl-attrib a { color: inherit; }

/* --------------------------------------------------------------- loading */



/* --------------------------------------------------------- narrow screens */

/* Narrow screens: the rail becomes a pair of bottom sheets, and JS keeps only
   one of them open so they never take the map with them. */
@media (max-width: 46rem), (max-height: 34rem) {
  .rail {
    top: auto;
    left: .5rem; right: .5rem; bottom: .5rem;
    width: auto; max-width: none;
    max-height: 68vh;
    gap: .5rem;
  }
  .panel--main { flex: 1 1 auto; min-height: 0; }

  /* The sheet is sized by its content and then capped at 68vh, so its height is
     never definite -- which means a percentage cap on the details resolves to
     nothing and was silently dropped. With no cap and shrinking switched off it
     kept its full content height, squeezed the list below its own minimum, and
     the list spilled out and painted over it.

     So the list keeps its size and the details gives way instead: it is the one
     that scrolls, and it is the half you read rather than navigate. */
  .picker { flex: 0 0 auto; min-height: 0; overflow: hidden; }
  .details { flex: 1 1 auto; min-height: 0; max-height: none; }
  .list { max-height: 34vh; }
}

/* ------------------------------------------------ local circumstances popup */

.sw--band {
  background: linear-gradient(90deg,
    color-mix(in srgb, #93c5fd 45%, transparent),
    color-mix(in srgb, #1e3a8a 55%, transparent));
  border: 1px solid color-mix(in srgb, #1e40af 60%, transparent);
}

.hint {
  margin: .1rem 0 0;
  font-size: .72rem;
  color: var(--ink-dim);
  border-left: 2px solid var(--line);
  padding-left: .5rem;
}

.maplibregl-popup-content {
  padding: .6rem .75rem .5rem;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow);
  font: inherit;
}
.maplibregl-popup-tip { border-top-color: var(--bg) !important;
                        border-bottom-color: var(--bg) !important; }
.maplibregl-popup-close-button { color: var(--ink-dim); font-size: 1.1rem; padding: 0 .3rem; }

.pop__head {
  margin: 0 0 .4rem; font-size: .9rem; font-weight: 650; letter-spacing: -.01em;
}
.pop__head--total   { color: var(--total); }
.pop__head--annular { color: var(--annular); }
.pop__head--none    { color: var(--ink-dim); font-weight: 600; }

.pop__facts {
  display: grid; grid-template-columns: auto 1fr; gap: .08rem .6rem;
  margin: 0; font-size: .78rem;
}
.pop__facts dt { color: var(--ink-dim); white-space: nowrap; }
.pop__facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.pop__note  { margin: .4rem 0 0; font-size: .72rem; color: var(--ink-dim); }
.pop__where { margin: .35rem 0 0; font-size: .7rem; color: var(--ink-dim);
              font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ settings panel */

.settings {
  position: absolute;
  z-index: 4;
  top: .75rem;
  right: 3.25rem;                 /* clear of the map controls */
  width: 17.5rem;
  max-width: calc(100vw - 4.5rem);
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.settings[hidden] { display: none; }

.settings__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .5rem .6rem .9rem;
  border-bottom: 1px solid var(--line);
}
.settings__head h2 { margin: 0; font-size: .9rem; font-weight: 600; flex: 1; }

.settings__close {
  width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-dim); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.settings__close:hover { background: var(--bg-sunk); color: var(--ink); }

.settings__body {
  padding: .75rem .9rem .9rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .7rem;
}

.field { border: 0; margin: 0; padding: 0; }
.field legend {
  padding: 0 0 .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-dim);
}
.field--row { display: flex; align-items: center; gap: .55rem; }
.field--row label {
  flex: none; width: 4.2rem;
  font-size: .78rem; color: var(--ink-dim);
}
.field--row output {
  flex: none; width: 2.2rem; text-align: right;
  font-size: .74rem; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.field--row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.field--row input[type="color"] {
  flex: none; width: 2rem; height: 1.6rem; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: none; cursor: pointer;
}

.chips--tight { gap: .25rem; }
.chips--tight .chip { font-size: .72rem; padding: .16rem .5rem; }

.swatches { display: flex; gap: .25rem; flex: 1; }
.swatches button {
  width: 1.15rem; height: 1.6rem;
  border: 1px solid var(--line); border-radius: 5px;
  padding: 0; cursor: pointer;
}
.swatches button:hover { outline: 2px solid var(--focus); outline-offset: 1px; }

.settings__note { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--ink-dim); }
.settings__note[hidden] { display: none; }
.settings__warn {
  margin-top: .5rem; padding: .4rem .5rem; border-radius: .35rem;
  background: var(--bg-sunk); border-left: 2px solid var(--accent);
}

.settings__reset {
  align-self: flex-start;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink-dim);
  font: inherit; font-size: .75rem; padding: .25rem .6rem; cursor: pointer;
}
.settings__reset:hover { background: var(--bg-sunk); color: var(--ink); }

@media (max-width: 46rem) {
  .settings { right: .5rem; left: .5rem; width: auto; max-width: none; }
}

/* ------------------------------------------------------- map control buttons */

/* Stock MapLibre paints the group white; the buttons read var(--ink), so the
   two have to agree about which theme they are in. */
.maplibregl-ctrl-group { background: var(--bg); }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: var(--ctrl-icon-filter); }
.maplibregl-ctrl-group .map-btn {
  width: 30px; height: 30px;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.maplibregl-ctrl-group .map-btn svg { width: 17px; height: 17px; display: block; }
.maplibregl-ctrl-group .map-btn:hover { background: var(--bg-sunk); }
.maplibregl-ctrl-group .map-btn[aria-pressed="true"] { color: #fff; background: var(--accent); }

/* --------------------------------------------------- what is visible here */

.panel--place { flex: 1 1 auto; min-height: 7rem; }
.panel--place[hidden] { display: none; }

.panel__clear {
  flex: none; width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-dim); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.panel__clear:hover { background: var(--bg-sunk); color: var(--ink); }

.list--place button { align-items: center; }
.list__when { font-variant-numeric: tabular-nums; flex: 1; }
.list__much {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); flex: none; margin-right: .35rem;
}
.list button[aria-current="true"] .list__much { color: rgba(255, 255, 255, .8); }
.list__much--central { color: var(--total); font-weight: 600; }
.list button[aria-current="true"] .list__much--central { color: #fff; }

.place__empty { margin: .4rem 0; font-size: .78rem; color: var(--ink-dim); }

.pin-marker {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--greatest); border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.pop__actions { margin: .45rem 0 0; display: flex; gap: .4rem; }
.pop__action {
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .74rem; padding: .22rem .55rem; cursor: pointer;
}
.pop__action:hover { background: var(--bg-sunk); }

.place__why { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--ink-dim); }

/* ------------------------------------------------- filtering by a place */

.pinbar { display: flex; align-items: center; gap: .4rem; }
.pinbar[hidden] { display: none; }

.pinbar__use {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .78rem; padding: .3rem .6rem; cursor: pointer;
}
.pinbar__use:hover { background: var(--bg-sunk); }
.pinbar__use:disabled { opacity: .6; cursor: default; }

.pinbar__at {
  flex: 1; min-width: 0;
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pinbar__at[hidden] { display: none; }

.pinbar__clear {
  flex: none; width: 1.5rem; height: 1.5rem;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-dim); font-size: 1rem; line-height: 1; cursor: pointer;
}
.pinbar__clear:hover { background: var(--bg-sunk); color: var(--ink); }
.pinbar__clear[hidden] { display: none; }

#place-threshold[hidden] { display: none; }

/* Short values pair up two to a row so the details fit without scrolling. */
.facts--pairs { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.facts--pairs dd { margin-right: .4rem; }

.facts__more { font-size: .78rem; }
.facts__more summary {
  cursor: pointer; color: var(--ink-dim); font-size: .74rem;
  padding: .15rem 0; list-style-position: outside;
}
.facts__more summary:hover { color: var(--ink); }
.facts__more[open] summary { margin-bottom: .2rem; }
.facts__more .facts { font-size: .76rem; }

/* ------------------------------------------------------- shadow timeline */

.timeline {
  position: absolute;
  z-index: 3;
  /* Centred in the space beside the rail rather than in the viewport. Centring
     on the viewport put it under the rail on a narrow desktop or a portrait
     tablet, where half of a centred bar reaches further left than the rail's
     right edge. */
  left: calc(var(--panel-w) + 2.25rem);
  right: 1.5rem;
  margin-inline: auto;
  /* Clear of the attribution, which is two lines wherever the map is narrow
     enough to wrap it. It has to stay legible: it is the condition the map
     data comes under. */
  bottom: 3rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: auto;
  max-width: 30rem;
  padding: .4rem .7rem;
  background: var(--bg);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.timeline[hidden] { display: none; }

.timeline__play {
  flex: none; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
}
.timeline__play svg { width: 15px; height: 15px; fill: currentColor; }
.timeline__play:hover { filter: brightness(1.1); }
/* display:grid above would otherwise win over the attribute */
.timeline__play[hidden] { display: none; }
/* the stop button is the way back, not the main action */
#tl-stop {
  background: var(--bg-sunk);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* The track is drawn by hand so it can carry the pin's marks: the stretch of
   the crossing that place actually sees, painted into --tl-marks as a gradient
   (partial phase in a wash, totality in full accent). No pin, plain track. */
.timeline input[type="range"] {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 18px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: var(--tl-marks, var(--line));
}
.timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -4px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg);
}
.timeline input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: var(--tl-marks, var(--line));
}
.timeline input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg);
}

.timeline__speed {
  flex: none; min-width: 2.1rem;
  padding: .16rem .35rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-dim);
  font: inherit; font-size: .72rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.timeline__speed:hover { border-color: var(--ink-dim); color: var(--ink); }

.timeline__time {
  flex: none; min-width: 6.2rem; text-align: right;
  font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Same breakpoint as the rail above: wherever that becomes a bottom sheet, the
   timeline has to be laid out around it. A short landscape phone is wide enough
   to miss a width-only rule and still tall enough to collide. */
@media (max-width: 46rem), (max-height: 34rem) {
  .timeline {
    left: .5rem; right: .5rem; transform: none;
    width: auto;
  }
  /* The timeline floats over the map, and on a phone the open sheet reaches
     the bottom of the screen, so the two were sitting on top of each other.
     The sheet stops above it instead -- but only when there is one, since a
     partial eclipse has no shadow to play. */
  body.has-timeline .rail { bottom: 6.2rem; }
}

/* A phone on its side has barely any height to divide. The list keeping its
   size, which is right in portrait, leaves the details nothing at all and it
   spills out of the sheet -- so here the list gives way instead, and both
   halves keep a floor to stand on. */
@media (max-height: 34rem) {
  .rail { max-height: 88vh; }
  .picker { flex: 1 1 auto; min-height: 0; }
  .details { flex: 0 1 auto; min-height: 3.5rem; max-height: 8rem; }
  .list { min-height: 3rem; max-height: none; }
}

/* The rail runs down the left; the attribution sits bottom-right. On a narrow
   desktop the attribution text is long enough to reach back under the rail and
   be covered by it. Holding it inside the column beside the rail costs nothing,
   where raising the rail off the bottom would cost panel height at every size.
   Only above the breakpoint: below it the rail is a bottom sheet spanning the
   full width, and there is no column to hold it in. */
@media (min-width: 46.0625rem) {
  .maplibregl-ctrl-bottom-right { max-width: calc(100vw - var(--panel-w) - 2.5rem); }
}

/* ------------------------------------------------------------------- intro */

.intro {
  max-width: 30rem;
  margin: auto;
  padding: 1.1rem 1.25rem 1rem;
  border: 0; border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow);
}
.intro::backdrop { background: rgba(8, 15, 30, .45); }
.intro h2 { margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: -.01em; }
.intro__lead { margin: 0 0 .7rem; font-size: .82rem; color: var(--ink-dim); line-height: 1.45; }
.intro__list { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.intro__list li { font-size: .82rem; line-height: 1.45; }
.intro__list b { font-weight: 600; }
.intro kbd {
  font: inherit; font-size: .78em; padding: 0 .28em;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-sunk);
}
.intro__note { margin: 0 0 .45rem; font-size: .72rem; color: var(--ink-dim); line-height: 1.4; }
.intro__credit { margin: 0 0 .9rem; font-size: .72rem; color: var(--ink-dim); line-height: 1.4; }
.intro__credit a { color: inherit; }
.intro__go {
  width: 100%;
  border: 0; border-radius: 8px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .5rem; cursor: pointer;
}
.intro__go:hover { filter: brightness(1.08); }

@media (max-height: 34rem) {
  .intro { max-height: 88vh; overflow-y: auto; }
}

/* Present for a reader or a crawler, absent on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}