/* Palimplace reference viewer — Apache-2.0.
   Brand-skinned: an ink "fog" base so attested vantages read as islands of light.
   Ember (#ffb13d) = attested evidence, signal (#52cdf5) = inference; the seam is
   legible at a glance. Tokens, type and the mark match the locked brand. */

/* Design tokens come from ../brand/theme.css. Local override only: panels are
   translucent here so the map blurs through them (the theme's --panel is solid). */
:root { --panel: rgba(13, 19, 26, 0.92); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text);
  font: 14px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
#map { position: absolute; inset: 0; }

/* Header */
#title { position: absolute; top: 14px; left: 16px; z-index: 5; max-width: 348px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px;
  backdrop-filter: blur(8px); }
#title .title-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#title .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
#title .brand svg { width: 26px; height: 26px; }
.t-toggle { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 5px;
  border-radius: 6px; transition: transform .2s, color .15s; }
.t-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
#title.collapsed .t-toggle { transform: rotate(-90deg); }
#title.collapsed .title-body { display: none; }
/* Search now lives in the panel, next to the mark — frees the top-centre for the map. */
.title-search { display: flex; align-items: center; gap: 8px; margin: 9px 0 8px; padding: 7px 12px;
  background: #0c1219; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.title-search:focus-within { border-color: var(--signal); }
.title-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font-family: var(--body); font-size: 13px; }
.title-search input::placeholder { color: var(--muted); }
#title .wm { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
#title .wm .a { color: var(--ember); } #title .wm .b { color: var(--paper); }
#title p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
#title .place { color: var(--text); font-weight: 500; font-size: 13px; }
#title .place-pick { position: relative; margin-bottom: 6px; }
#title .place-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--text); text-align: left; }
#title .place-btn .caret { color: var(--muted); font-size: 10px; flex: none; }
#title .place-btn:hover .place { color: var(--paper); }
#title .place-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 264px;
  background: #0c1219; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 38px rgba(0,0,0,.62); overflow: hidden; }
#title .place-menu.open { display: block; }
#title .place-filter { display: block; width: 100%; box-sizing: border-box; background: #0c1219; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); padding: 9px 11px; font-size: 12.5px; font-family: var(--body); outline: none; }
#title .place-filter::placeholder { color: var(--muted); }
#title .place-list { list-style: none; margin: 0; padding: 5px; max-height: 300px; overflow-y: auto; }
#title .place-list li { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.35; color: var(--text); cursor: pointer; }
#title .place-list li:hover { background: rgba(255,255,255,.05); }
#title .place-list li.sel { color: var(--ember); }
#title .hint { margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 8px; }
#title .hint b { color: var(--text); font-weight: 500; }

/* Search */
#q-count { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; flex: none; }

/* North compass — a fixed orientation reference, top-right. The rose rotates so the ember
   needle always points to true north; click to face north (reset bearing). */
#compass { position: absolute; top: 14px; right: 16px; z-index: 5; width: 46px; height: 46px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  backdrop-filter: blur(8px); display: grid; place-items: center; }
#compass:hover { border-color: var(--hair); }
#compass-rose { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
#compass-rose polygon { fill: var(--ember); }
#compass-rose polygon.s { fill: var(--fog); }
#compass-rose text { fill: var(--paper); font-family: var(--mono); font-size: 8px; font-weight: 600; }

/* Legend — a compact key folded into the title panel, freeing the top-right corner */
#title .key { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
#title .key .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 11px; color: var(--muted); }
#title .key .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sw.ev { background: var(--ember); }
.sw.inf { background: var(--signal); }
.sw.fog { background: var(--fog); }
.sw.test { background: var(--ember); border-radius: 50%; }

/* Vantage / testimony markers (billboards) */
/* Only the visible glyph + year are clickable, never the transparent box around them —
   otherwise an overlapping marker's empty area steals clicks from the one behind it
   (you'd aim at 1936 and select 1981). pointer-events still bubble to .mk's listener. */
.mk { cursor: pointer; transition: opacity .25s; pointer-events: none; }
.mk .glyph, .mk .yr { pointer-events: auto; cursor: pointer; }
.mk .glyph { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; border: 2px solid; background: rgba(11,15,20,.85); }
.mk.ev .glyph { border-color: var(--ember); color: var(--ember); }
.mk.inf .glyph { border-color: var(--signal); color: var(--signal); }
.mk .yr { text-align: center; font-family: var(--mono); font-size: 11px; margin-top: 3px; color: var(--text);
  text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.mk .glyph { transition: transform .2s, box-shadow .2s; }
.mk.sel .glyph { box-shadow: 0 0 0 3px rgba(255,255,255,.35); transform: scale(1.25); }

/* Info panel */
#info { position: absolute; bottom: 120px; right: 16px; width: 322px; z-index: 6;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  backdrop-filter: blur(8px); display: none; max-height: calc(100vh - 152px); overflow-y: auto; }
#info.show { display: block; }
#info h2 { margin: 0 0 3px; font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--paper); letter-spacing: -.01em; }
#info .when { color: var(--muted); font-family: var(--mono); font-size: 11.5px; margin-bottom: 11px; }
.badge { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .13em; border: 1px solid; }
.badge.ev { background: rgba(255,177,61,.1); color: var(--ember); border-color: rgba(255,177,61,.4); }
.badge.inf { background: rgba(82,205,245,.1); color: var(--signal); border-color: rgba(82,205,245,.4); }
#info .desc { font-size: 12.5px; color: var(--text); margin: 11px 0; line-height: 1.55; }
#info .axes { margin: 11px 0; }
#info .axis { display: grid; grid-template-columns: 64px 1fr 34px; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 10.5px; margin: 4px 0; color: var(--muted); }
#info .bar { height: 6px; background: #1b2430; border-radius: 4px; overflow: hidden; }
#info .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3a4a5e, var(--signal)); }
#info .meta { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; margin-top: 9px; }
#info .meta b { color: var(--text); font-weight: 600; }
#info a { color: var(--signal); text-decoration: none; }
#info a:hover { text-decoration: underline; }
#info .close { position: absolute; top: 11px; right: 13px; cursor: pointer; color: var(--muted); font-size: 16px; }
.i-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.share { font-family: var(--body); font-weight: 500; font-size: 12.5px; color: var(--ember);
  background: rgba(255,177,61,.09); border: 1px solid var(--ember); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.share:hover { background: rgba(255,177,61,.18); }
/* Stand-here is the headline action: a filled ember button so it reads as the primary
   invitation, the photo's frustum is where you step in. */
.stand { font-family: var(--body); font-weight: 600; font-size: 12.5px; color: #17110a;
  background: var(--ember); border: 1px solid var(--ember); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.stand:hover { filter: brightness(1.08); }

/* Journeys — listed in the title panel; an authored narrative path is its own kind of
   thing, so it reads in ember (the warm, human side), not as another data row. */
#title .journeys { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
#title .jr-head { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); margin-bottom: 6px; }
#title .jr { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(255,177,61,.06);
  border: 1px solid rgba(255,177,61,.25); border-radius: 9px; padding: 7px 10px; margin: 4px 0; cursor: pointer; color: var(--text); font-family: var(--body); }
#title .jr:hover { background: rgba(255,177,61,.13); border-color: var(--ember); }
#title .jr-play { color: var(--ember); font-size: 10px; flex: none; }
#title .jr-t { font-size: 12.5px; line-height: 1.3; }

/* Tour overlay — the teller's narration, in the display serif so the authored voice is
   unmistakably distinct from the evidence panel and the machine data. Sits beside the
   info panel, above the scrubber. */
/* Tour transitions dip the scene to ink and cut — never a swing across the city.
   Over the map+frustum canvas (z 0-2), under every panel (z 4+). */
#tour-fade { position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: 0;
  pointer-events: none; transition: opacity .3s ease; }
#tour-fade.on { opacity: 1; }
.tour { position: absolute; left: 16px; right: 354px; bottom: 120px; z-index: 7;
  background: var(--panel); border: 1px solid var(--ember); border-radius: var(--r); padding: 14px 18px 12px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.5); display: none; }
.tour.show { display: block; animation: tourin .4s ease; }
@keyframes tourin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tour-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tour-title { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ember); }
.tour-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.tour-x { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0 2px; }
.tour-x:hover { color: var(--text); }
.tour-narr { font-family: var(--display); font-weight: 500; font-style: italic; font-size: 17px; line-height: 1.45; color: var(--paper); margin: 0 0 12px; }
.tour-nav { display: flex; gap: 8px; }
.tour-nav button { flex: 1; background: #16202c; color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px; cursor: pointer; font-family: var(--body); font-size: 12.5px; font-weight: 500; }
.tour-nav button:hover:not(:disabled) { border-color: var(--ember); color: var(--paper); }
.tour-nav button:disabled { opacity: .4; cursor: default; }
.tour-share { background: none; border: 0; color: var(--ember); font-family: var(--body); font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tour-share:hover { background: rgba(255,177,61,.16); }
/* During a guided story the journey drives time, so the scrubber is redundant — hide it
   to free the map, and drop the narration into the space it leaves. */
body.touring #scrubber { display: none; }
body.touring .tour { bottom: 28px; }
.i-photo { width: 100%; border-radius: 6px; margin: 8px 0; display: block; cursor: zoom-in; }
.i-video { width: 100%; border-radius: 6px; margin: 8px 0; display: block; background: #000; }
#lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(6,9,13,.95); backdrop-filter: blur(5px); cursor: zoom-out; padding: 4vh 4vw; }
#lightbox.show { display: flex; }
#lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.75);
  animation: fallin .35s ease; }
@keyframes fallin { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* Time scrubber */
#scrubber { position: absolute; left: 16px; right: 16px; bottom: 28px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 14px 12px;
  backdrop-filter: blur(8px); }
#scrubber .head { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
#scrubber .year { color: var(--text); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; min-width: 48px; }
#scrubber button { background: #16202c; color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 13px; cursor: pointer; font-size: 12px; font-family: var(--body); font-weight: 500; }
#scrubber button:hover { border-color: var(--muted); }
#scrubber .head .skip { padding: 4px 9px; font-size: 13px; line-height: 1; }
#scrubber .head #play { min-width: 78px; }
.win { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.win input { width: 78px; accent-color: var(--ember); cursor: pointer; }
.win b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 16px; text-align: right; }
/* The timeline reads as an AXIS — a baseline near the bottom with density ticks rising
   from it (evidence in ember, gaps left as fog), the thumb running along the line, and
   the first/last dates labelled beneath the ends. */
#track { position: relative; height: 30px; margin-top: 6px; }
#track::before { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--line); border-radius: 2px; }
#hist { position: absolute; inset: 0; pointer-events: none; }
#hist .tick { position: absolute; bottom: 7px; width: 2px; height: 16px; background: var(--muted); opacity: .35;
  border-radius: 1px; transform-origin: bottom center; transition: opacity .1s, transform .1s; }
#hist .tick.ev { background: var(--ember); }
#hist .tick.inf { background: var(--signal); }
#range { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%;
  height: 30px; background: transparent; margin: 0; cursor: pointer; }
#range::-webkit-slider-runnable-track { height: 30px; background: transparent; }
#range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: 14px; border-radius: 50%;
  background: #fff; cursor: grab; box-shadow: 0 0 10px rgba(255,255,255,.7), 0 0 0 5px rgba(255,255,255,.14); }
#range:active::-webkit-slider-thumb { cursor: grabbing; }
#range::-moz-range-track { height: 30px; background: transparent; }
#range::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff;
  cursor: grab; box-shadow: 0 0 10px rgba(255,255,255,.7); transform: translateY(7px); }
#axis-ends { display: flex; justify-content: space-between; margin-top: 1px; padding: 0 1px;
  font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Sit clear above the full-width scrubber (one rule — an earlier duplicate set a
   second `bottom` that silently won the cascade and pulled the credit behind the
   scrubber). */
#attrib { position: absolute; bottom: 118px; left: 16px; z-index: 4; font-size: 10.5px; color: var(--muted);
  max-width: 360px; text-shadow: 0 1px 2px #000; }
#attrib a { color: var(--muted); }
/* The viewer carries its own attribution (#attrib), so hide MapLibre's default
   controls — otherwise the bottom-right attribution/logo collides with and clips
   behind the scrubber (the "timeline/viewport" snag). */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { display: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 9; color: var(--muted);
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; background: var(--ink); transition: opacity .4s; }
#loading.hide { opacity: 0; pointer-events: none; }

/* Responsive — narrow windows and phones: stack the chrome so the player,
   year slider and map stay usable and nothing overlaps. */
@media (max-width: 760px) {
  #title { top: 10px; left: 10px; right: 10px; max-width: none; padding: 11px 14px; }
  #title .lead, #title .hint, #title .key { display: none; }
  /* The detail panel becomes a capped bottom sheet, so the map (and the frustum) stay
     visible above it rather than the panel swallowing the whole phone screen. */
  #info { left: 8px; right: 8px; width: auto; bottom: 100px; max-height: 48vh; padding: 14px 15px; }
  .tour { left: 8px; right: 8px; bottom: 100px; }
  body.touring .tour { bottom: 12px; }
  /* On a phone a story is a full-screen modal: just the place and the narration — no
     title, no detail panel, no scrubber. (Standing at the vantage is a desktop thing for
     now.) The journey leads; everything else gets out of the way. */
  body.touring #info, body.touring #title { display: none; }
  #compass { display: none; } /* the top-right is too cramped on phones */
  #attrib { left: 8px; right: 8px; bottom: 88px; max-width: none; font-size: 9px; line-height: 1.3; opacity: .85; }
  body.touring #attrib { display: none; } /* the story takes over; attribution returns on exit */
  #scrubber { left: 10px; right: 10px; bottom: 10px; height: auto; padding: 9px 13px 11px; }
  #scrubber .head { flex-wrap: wrap; row-gap: 7px; gap: 10px; }
  .win, #scrub-note { display: none; }
}
@media (max-width: 420px) {
  #title .place { font-size: 12px; }
  #scrubber .head { font-size: 11px; }
}
/* Very short viewports (landscape phones, tiny windows) only: the full title panel
   fits comfortably down to ~460px, so trim its prose just below that, where it would
   otherwise crowd the scrubber. Keep brand + place. Composes with the width queries. */
@media (max-height: 460px) {
  #title .lead, #title .hint, #title .key { display: none; }
  #title { padding: 11px 14px; }
}