/* Shared tokens and the full-screen image viewer.
   Both map.html and item.html load this. Page-specific layout stays in the page. */

:root{
  --ground:#1C1C1C; --deep:#0C0C0C;
  --ink:#F9F9F9;                 /* 16.2:1 on --ground */
  --muted:#A8A49F;               /*  6.9:1 */
  --faint:#8A8784;               /*  4.8:1, the faintest text permitted here */
  --accent:#B8A88F;              /*  7.3:1 */
  --rule:rgba(249,249,249,.14);
  --display:'Cinzel',Georgia,serif;
  --text:'Spectral',Georgia,serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* ------------------------------------------------------------- viewer */
.viewer{
  position:fixed;inset:0;z-index:40;background:rgba(6,6,6,.97);
  display:none;opacity:0;transition:opacity .2s ease;
  backdrop-filter:blur(6px);
}
.viewer.open{display:block;opacity:1}
body.viewer-open{overflow:hidden}

.viewer-stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:zoom-in;
}
.viewer.zoomed .viewer-stage{cursor:grab}
.viewer.zoomed .viewer-stage:active{cursor:grabbing}
.viewer-stage img{
  max-width:100vw;max-height:100dvh;
  /* No transition on transform: it would fight the pinch gesture. */
  transform-origin:center center;user-select:none;-webkit-user-drag:none;
  display:block;
}
@supports not (max-height:100dvh){ .viewer-stage img{max-height:100vh} }

.viewer-close{
  position:absolute;top:calc(var(--safe-t) + .75rem);right:.75rem;z-index:2;
  width:2.75rem;height:2.75rem;                 /* 44px, the minimum tap target */
  background:rgba(12,12,12,.8);border:1px solid var(--rule);
  color:var(--ink);cursor:pointer;font-size:1rem;font-family:var(--text);
}
.viewer-close:hover{background:rgba(28,28,28,.95)}
.viewer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* slideshow controls, hidden unless the viewer was opened with a series */
.viewer-nav,.viewer-bar{display:none}
.viewer.hasSeries .viewer-nav{display:grid}
.viewer.hasSeries .viewer-bar{display:flex}

.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:2.75rem;height:4.5rem;place-items:center;
  background:rgba(12,12,12,.55);border:1px solid var(--rule);
  color:var(--ink);cursor:pointer;font-size:1.5rem;line-height:1;font-family:var(--text);
}
.viewer-nav:hover{background:rgba(28,28,28,.9)}
.viewer-nav.prev{left:.5rem}
.viewer-nav.next{right:.5rem}

.viewer-bar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + .75rem);z-index:3;
  align-items:center;gap:.85rem;max-width:calc(100vw - 1.5rem);
  background:rgba(12,12,12,.82);border:1px solid var(--rule);
  padding:.4rem .5rem .4rem .4rem;
}
.viewer-play{
  width:2.25rem;height:2.25rem;flex:0 0 auto;
  background:none;border:1px solid var(--rule);color:var(--ink);
  cursor:pointer;font-size:.75rem;line-height:1;font-family:var(--text);
}
.viewer-play:hover{background:rgba(249,249,249,.1)}
.viewer-count{
  flex:0 0 auto;font-family:var(--text);font-size:.6875rem;letter-spacing:.12em;
  color:var(--faint);white-space:nowrap;
}
.viewer-caption{
  font-family:var(--text);font-size:.75rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.35rem;
}
/* While playing, the side arrows recede so the photographs carry the screen. */
.viewer.playing .viewer-nav{opacity:0;transition:opacity .4s}
.viewer.playing:hover .viewer-nav{opacity:1}

@media (max-width:600px){
  .viewer-nav{width:2.5rem;height:3.5rem;font-size:1.25rem}
  .viewer-caption{display:none}
}

.viewer-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 1rem);z-index:2;
  font-family:var(--text);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  background:rgba(12,12,12,.7);padding:.5rem .85rem;pointer-events:none;
  transition:opacity .3s;
}
.viewer.zoomed .viewer-hint{opacity:0}
/* the series bar occupies the same spot, so the hint stands down */
.viewer.hasSeries .viewer-hint{display:none}

/* ------------------------------------------------------------- shared bits */
.u-hidden{display:none!important}

::selection{background:var(--accent);color:var(--deep)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Scrollbars, so a dark panel does not sprout a light gutter */
*{scrollbar-width:thin;scrollbar-color:rgba(249,249,249,.2) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(249,249,249,.2)}
*::-webkit-scrollbar-track{background:transparent}