/* WDJF §3.1 layout fix + §3.3 glass treatment
   Palette: navy #0c1220, amber #f5a623, kraft #f2e9d8 */

/* §3.1 — track view claims full height; save action is a flush strip, not a floating button */
.track-view { display: flex; flex-direction: column; height: 100dvh; background: #0c1220; }
.track-map   { flex: 0 0 32dvh; min-height: 0; }
.track-photo { flex: 1 1 auto; position: relative; overflow: hidden; background: #0a0e18; }
.track-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.save-strip {
  flex: none; height: calc(52px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: center;
  background: #f5a623; color: #0c1220; border: 0; width: 100%;
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 3px;
}

/* §3.3 — glass, applied as three overlay children of .track-photo (all pointer-events:none) */
.glass-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,15,.55) 0%, rgba(5,8,15,0) 22%, rgba(5,8,15,0) 72%, rgba(5,8,15,.6) 100%); }
.glare-streak { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.15) 47%, rgba(255,255,255,0) 56%); }
.rivet-line { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(242,233,216,.25) 0 3px, transparent 3px 16px); }

/* §3.4 — THE CAPTION. These rules did not exist anywhere, in any stylesheet.
   wdjf-caption.js documents them in its header comment ("CSS: .caption-overlay { position:absolute
   ... }") and that comment was the only place they ever lived, so the caption shipped as an
   unstyled static div: position:static, padding:0, opacity:1, no gradient. Measured on a real
   shared journey at 375px -- left:0, width:375 -- i.e. both lines flush to the screen edges with
   the first character clipped, sitting at the TOP of the photo area rather than over its lower
   third, which is also why it collided with an in-app browser's chrome. Reported from WhatsApp;
   it reproduces in every browser.
   Restored verbatim from the component's own documentation, with one addition: the horizontal
   padding takes the larger of 20px and the safe-area inset, because an in-app browser (WhatsApp,
   Instagram) and a notched phone in landscape both put chrome inside the viewport. .save-strip in
   this file already does the same for the bottom inset. */
.caption-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg, rgba(5,8,15,0), rgba(5,8,15,.78));
}
.caption-place   { font-size: 20px; font-weight: 800; color: #f2e9d8; letter-spacing: .3px; }
.caption-context { font-size: 12.5px; color: rgba(242,233,216,.75); margin-top: 3px; }

/* A JOURNEY WITH NO PHOTOS SAYS SO. Photos never travel: journey-link.js encodes positions, times
   and readings, and the blobs are not encodable there even in principle. That is the right design
   and it is not changing -- but the photo slot was simply left empty, so a recipient opening a
   shared link saw an unexplained dark gradient where a picture should be and reasonably read it as
   a broken image. Everything else on this codebase's surfaces discloses rather than omits; this is
   the one place that did not. */
/* THE [hidden] GUARD IS NOT OPTIONAL, and this is the second time in one day the same trap has
   been walked into -- the landing page's hero card had it too. `hidden` is only display:none
   because a UA stylesheet says so, at the lowest possible precedence. Any `display` declaration on
   the element beats it, so a .photo-absent[hidden] would still be display:flex and the panel would
   sit permanently over every photograph in a journey that has them. */
.photo-absent[hidden] { display: none; }
.photo-absent {
  /* Stops ABOVE the caption rather than filling the frame: the caption is bottom-anchored over the
     lower ~100px and the two overlapped when this was inset:0. A fixed inset rather than a flex
     gap because the caption fades in and out, and a panel that re-centres itself every few seconds
     would be worse than one that sits slightly high while the caption is hidden. */
  position: absolute; top: 0; left: 0; right: 0; bottom: 104px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 0 max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left));
  text-align: center; pointer-events: none;
}
.photo-absent .pa-mark { font-size: 22px; opacity: .5; }
.photo-absent .pa-head {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 2px;
  color: rgba(242,233,216,.75);
}
.photo-absent .pa-body { font-size: 13px; line-height: 1.55; color: rgba(242,233,216,.5); max-width: 30em; }