/* /lab/altstadt/: a full-screen pan, zoom and turn stage under the top bar, a text panel and a small group of buttons.
   The frame (bar, fonts, colours) comes from lab.css; every class here starts with alt-. */
:root { --alt-bg: #E2DCCC; }   /* the render's own background colour, so the edges of the picture melt into the stage */

body.viewer { overflow: hidden; }

#alt-viewer {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  overflow: clip;   /* where known: not even the Tab key can scroll the stage to a pin */
  background: var(--alt-bg);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#alt-viewer:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* Without script the whole picture is shown, fitted; script switches the stage on with alt-ready. */
#alt-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
#alt-viewer.alt-ready {
  cursor: grab;   /* the hand: take hold of the old town to turn it or to move it; zooming leaves the cursor alone */
  touch-action: none;
}
#alt-viewer.alt-ready.alt-dragging,
#alt-viewer.alt-ready.alt-turning { cursor: grabbing; }   /* the closed hand while the button is down */

/* Two layers (alt-layer) lie on top of each other: the view on screen and, for the length of a short crossfade, the one
   before it. The script sets each layer's size and transform. */
#alt-viewer.alt-ready .alt-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: none;
  object-fit: fill;
  transform-origin: 0 0;   /* no will-change: a promoted layer would be scaled as a bitmap and blur the pixels */
  image-rendering: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
  -webkit-user-drag: none;
}
#alt-viewer.alt-ready .alt-layer.alt-top { z-index: 2; }
#alt-viewer.alt-ready .alt-layer.alt-in {   /* the new view at the start of the crossfade: there, but still clear */
  opacity: 0;
  transition: none;
}
#alt-viewer.alt-ready .alt-layer.alt-snap {   /* a fade cut short by the next change: the picture on screen is whole at once */
  opacity: 1;
  transition: none;
}
#alt-viewer.alt-ready .alt-layer.alt-gone { visibility: hidden; }
/* Zoomed in past the screen's own pixels: show the pixels as they are. Zoomed out the browser smooths them. */
#alt-viewer.alt-ready .alt-layer.alt-pixels {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: reduce) {
  #alt-viewer.alt-ready .alt-layer { transition: none; }
}

/* Labelled pins lie over the picture, one for each marker in views.json (the script makes them and moves each one to its
   building with a translate). The point of a drop is on its roof; the label next to it is a link to the building's own
   site. A pin keeps its size whatever the zoom: only its place changes. The layer sits inside the viewer, above both
   picture layers, and has no size of its own, so a press anywhere else still reaches the viewer. */
.alt-pins {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 0;
}
.alt-pin {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-drag: none;
}
.alt-pin.alt-off { visibility: hidden; }   /* outside the visible area: not seen and not reachable with the Tab key */
.alt-pin-dot {   /* a drop turned so that its point is down: the point is the corner at the pin's own position */
  position: absolute;
  top: -17px;
  left: -7px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--panel);
  border-radius: 50% 50% 50% 0;
  background: var(--orange);
  box-shadow: 0 1px 3px rgba(26, 14, 0, 0.45);
  transform: rotate(-45deg);
}
.alt-pin-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--panel);
}
.alt-pin-label {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(26, 14, 0, 0.3);
  font: 600 12px/1.2 var(--font);
  white-space: nowrap;
  transform: translateY(-50%);
}
.alt-pin:hover .alt-pin-label,
.alt-pin:focus-visible .alt-pin-label {
  border-color: var(--orange);
  color: var(--orange);
}
.alt-pin:focus-visible { outline: none; }
.alt-pin:focus-visible .alt-pin-label {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

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

/* The mouse and the fingers do the work (drag to turn, right-drag or Shift-drag to move, wheel and pinch to zoom); the
   buttons are one small, quiet group in the bottom left corner, clear of the panel: the name of the view, turn left
   and right, zoom out, in and reset. A button shows a glyph; its words (both languages) sit in alt-tip, which screen
   readers read and which shows as a tooltip on hover and focus. The turn buttons show once the script has the list of
   views (alt-spin). */
.alt-corner {
  position: fixed;
  z-index: 3;
  left: 16px;
  bottom: 16px;
  max-width: calc(100vw - 420px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.alt-corner:hover,
.alt-corner:focus-within { opacity: 1; }
.alt-hint {
  margin: 0;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}
.alt-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .alt-hint-mouse { display: none; }
  .alt-hint-touch { display: block; }
}
.alt-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alt-view {
  margin: 0;
  color: var(--ink2);
  font: 600 12px/1.2 var(--font);
}
.alt-turn { display: none; }
#alt-viewer.alt-spin ~ .alt-corner .alt-turn { display: flex; }
.alt-turn,
.alt-zoom {
  gap: 3px;
}
.alt-zoom { display: flex; }
.alt-tools button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink2);
  font: 600 15px/1 var(--font);
  cursor: pointer;
}
.alt-tools button:hover { border-color: var(--orange); color: var(--orange); }
.alt-tip {   /* clear, not removed: screen readers still read it */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  padding: 5px 8px;
  background: var(--ink);
  color: var(--panel);
  font: 600 12px/1 var(--font);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.alt-tools button:focus-visible .alt-tip { opacity: 1; }
@media (hover: hover) {
  .alt-tools button:hover .alt-tip { opacity: 1; }   /* not on touch screens: a tap would leave the tooltip standing */
}

/* The panel: text on top (it scrolls), the two credit lines below it, always in view. */
.alt-dock {
  position: fixed;
  z-index: 3;
  top: calc(var(--bar-h) + 16px);
  right: 16px;
  width: 340px;
  max-height: calc(100vh - var(--bar-h) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
}
.alt-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 8px;
}
.alt-dock h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.alt-lead {
  margin: 0 0 10px;
  color: var(--ink2);
  font-size: 13px;
}
.alt-how summary {
  padding: 4px 0;
  cursor: pointer;
}
.alt-how summary h2 {
  display: inline;
  margin: 0;
}
.alt-how p,
.alt-how li {
  color: var(--ink2);
  font-size: 13px;
}
.alt-how p { margin: 8px 0; }
.alt-how h3 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.alt-list {
  margin: 0 0 6px;
  padding-left: 18px;
}
.alt-list li { margin: 0 0 6px; }
.alt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.alt-links a {
  font-size: 12px;
  font-weight: 600;
}
.alt-how p.alt-stand {
  color: var(--ink3);
  font-size: 11px;
}
.alt-credits {
  flex: none;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--line);
}
.alt-credit {
  margin: 0 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink2);
  overflow-wrap: anywhere;
}
.alt-credit:last-child { margin-bottom: 0; }
.alt-credit a { font-weight: 600; }

@media (max-width: 700px) {
  /* The panel becomes a sheet at the bottom; the small group moves to the top left under the bar, tooltips below. */
  .alt-corner {
    top: calc(var(--bar-h) + 12px);
    right: auto;
    bottom: auto;
    left: 12px;
    max-width: calc(100vw - 24px);
  }
  .alt-tip {
    top: calc(100% + 8px);
    bottom: auto;
  }
  .alt-dock {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 52vh;
    border-width: 1px 0 0;
  }
  .alt-scroll { padding: 12px 14px 6px; }
  .alt-credits { padding: 8px 14px 10px; }
}