/*
 * newzoom_226.css
 * Date: 2026-07-30
 * Changes: Split the scale-bar and zoom-% readout styling from ids into shared
 *          classes (.nz-scalebar / .nz-scalebar-canvas / .nz-scalebar-label /
 *          .nz-zoom-display) so the side-by-side right pane can reuse the same
 *          look, mirroring the id->class approach used for the navigators in _225.
 *          Visual rules now live on the classes; positioning stays on the ids, with
 *          new #nz-scalebar2 / #zoom-display2 rules for the right pane (children of
 *          #nz-viewer2, so the same offsets place them below the right navigator).
 *          Left-pane appearance and the mobile media-query overrides are unchanged.
 *          Paired with index_nz_108, which builds the right scale bar + zoom readout
 *          and wires them into the idle-fade system.
 */



/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  max-width: 100%;
}

body {
  font-family: adobe-caslon-pro, verdana, arial, helvetica, sans-serif;
  background-color: #cecdc1;  /* warm grey-beige matching renlyon.org */
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Top-center logo — fading chrome over the viewer ─────────────────────── */
#nz-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  max-width: 50%;
  height: auto;
  z-index: 20;
  pointer-events: none;
}

/* First-view (solid) logo — twice the subtle size. 800px source gives
   good retina coverage at this display width. */
#nz-logo.nz-logo-first {
  width: 360px;
}

/* Hide the logo in real fullscreen only. iOS "fake" fullscreen keeps it,
   since that mode is just the viewer filling the screen within the browser.
   The .nz-real-fullscreen class is toggled by JS on fullscreenchange and is
   the reliable cross-browser hook; the pseudo-class rules are belt-and-braces.
   Separate rules so an unrecognised pseudo-class can't drop the others. */
#nz-viewer-wrapper.nz-real-fullscreen #nz-logo { display: none !important; }
#nz-viewer-wrapper:fullscreen #nz-logo { display: none; }
#nz-viewer-wrapper:-webkit-full-screen #nz-logo { display: none; }

/* ── Viewer wrapper — full width, full height ───────────────────────────── */
#nz-viewer-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 100vh;
  min-height: 300px;
  background-color: #666666;
}

#viewer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* full height — toolbar floats over */
  background-color: #666666;
}

/* ── OSD navigator override ───────────────────────────────────────────────── */
.navigator {
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 4px !important;
  background-color: #555555 !important; /* !important beats OSD's inline background shorthand */
}

/* ── Zoom display — below navigator, inside viewer ───────────────────────── */
/* Zoom % readout — shared visual styling for both panes; position is per-id below.
   Left pane anchors within #nz-viewer-wrapper; the right pane's #zoom-display2 is
   a child of #nz-viewer2, so the same left:10px/top offset lands it below the
   right navigator. */
.nz-zoom-display {
  position: absolute;
  font-size: 12px;
  color: #cccccc;
  background: rgba(0,0,0,0.45);
  padding: 3px 4px 0 4px;
  border-radius: 3px;
  z-index: 110;
  pointer-events: none;
  text-align: center;
  line-height: 1;
}
#zoom-display  { left: 10px; top: 220px; }   /* left pane; top refined in JS */
#zoom-display2 { left: 10px; top: 220px; }   /* right pane; anchored to #nz-viewer2 */

/* ── Bottom toolbar — anchored to bottom of viewer wrapper ───────────────── */
#nz-toolbar {
  position: absolute;   /* absolute within #nz-viewer-wrapper */
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: rgba(236,236,236,0.7);
  border-top: 1px solid rgba(204,204,204,0.8);
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 100;
  overflow: visible;
}

/* Minimized — collapse to just Z logo and arrows */
#nz-toolbar.minimized {
  width: auto;
  right: auto;
}

#nz-toolbar.minimized #nz-toolbar-buttons {
  display: none;
}

/* ── Toolbar buttons container ────────────────────────────────────────────── */
#nz-toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow: visible;
}

/* ── Z logo button ────────────────────────────────────────────────────────── */
#btn-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 25px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
}
#btn-logo:hover { opacity: 1; }
#btn-logo img   { width: 29px; height: 25px; display: block; }

/* ── Divider between button groups ───────────────────────────────────────── */
.nz-divider {
  width: 1px;
  height: 23px;
  background: rgba(0,0,0,0.18);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Individual toolbar buttons ───────────────────────────────────────────── */

/* Pan and zoom controls hidden globally — mouse drag/scroll and touch handle these */
#btn-zoomout, #nz-slider-wrap, #btn-zoomin,
#btn-panleft, #btn-panup, #btn-pandown, #btn-panright { display: none !important; }

.nz-btn {
  width: 27px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
  position: relative;
}
/* Toolbar button tooltips + panel detach button tooltips */
.nz-btn[data-tip]::after,
#nz-panel-detach-btn[data-tip]::after,
#nz-panel-sources-detach-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(30, 30, 30, 0.68);
  color: #fff;
  font-size: 10px;
  font-family: adobe-caslon-pro, serif;
  padding: 2px 5px 0px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.nz-btn[data-tip]:hover::after,
#nz-panel-detach-btn[data-tip]:hover::after,
#nz-panel-sources-detach-btn[data-tip]:hover::after {
  opacity: 1;
}
.nz-btn:hover    { opacity: 1; }
.nz-btn.inactive {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.nz-btn img {
  width: 20px; height: 20px;
  display: block;
  pointer-events: none;
}

/* ── Minimize button ──────────────────────────────────────────────────────── */
#btn-minimize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 25px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
#btn-minimize:hover { opacity: 1; }
#btn-minimize img   { width: 20px; height: 20px; display: block; }

/* ── Zoom slider ──────────────────────────────────────────────────────────── */
#nz-slider-wrap {
  display: flex;
  align-items: center;
  width: 120px;
  flex-shrink: 0;
  margin: 0 2px;
}
#nz-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  background: transparent;
  cursor: pointer;
}
#nz-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
}
#nz-slider::-moz-range-track {
  height: 3px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
}
#nz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #888;
  margin-top: -5px;
  cursor: grab;
}
#nz-slider::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #888;
  border: none;
  cursor: grab;
}

#loading {
  position: absolute;   /* absolute within #nz-viewer-wrapper */
  inset: 0;
  background: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 200;
  transition: opacity 0.5s;
}
#loading.hidden { opacity: 0; pointer-events: none; }
#loading p {
  /* override body text styles for loading message */
  font-size: 14px !important;
  color: #8a7f68 !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  text-align: center !important;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(212,201,168,0.15);
  border-top-color: #d4c9a8;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error message ────────────────────────────────────────────────────────── */
#error-msg {
  display: none;
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(180,40,40,0.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 300;
  max-width: 480px;
  text-align: center;
}

/* ── Scale bar ────────────────────────────────────────────────────────────── */
/* Scale bar — shared visual styling for both panes; position is per-id below.
   The right pane's #nz-scalebar2 is a child of #nz-viewer2, so the same
   top:202px/left:5px lands it below the right navigator. */
.nz-scalebar {
  position: absolute;
  pointer-events: none;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 2px 0 2px;
  border-radius: 3px;
}
#nz-scalebar  { top: 202px; left: 5px; }   /* left pane; NAV_TOP(10)+NAV_HEIGHT(200)+2 gap −10 */
#nz-scalebar2 { top: 202px; left: 5px; }   /* right pane; anchored to #nz-viewer2 */

.nz-scalebar-canvas {
  display: block;
}

.nz-scalebar-label {
  font-family: adobe-caslon-pro, verdana, sans-serif;
  font-size: 10px;
  color: #cccccc;
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,1),
    1px  1px 0 rgba(0,0,0,1),
    -1px -1px 0 rgba(0,0,0,1),
    1px -1px 0 rgba(0,0,0,1),
    -1px  1px 0 rgba(0,0,0,1);
  margin-top: 1px;
  margin-bottom: -1px;
  line-height: 1;
  white-space: nowrap;
}

/* ── Fake fullscreen — iOS Safari fallback ────────────────────────────────── */
/* requestFullscreen() is rejected on iOS. JS toggles this class instead,      */
/* which covers the entire viewport. Toolbar stays functional inside.          */
#nz-viewer-wrapper.nz-fake-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100svh !important; /* svh = small viewport, most conservative — reliable on iOS */
  padding-bottom: env(safe-area-inset-bottom) !important; /* clear iPhone home indicator */
  z-index: 9000 !important;
  margin: 0 !important;
}

/* ── Mobile adjustments ───────────────────────────────────────────────────── */
@media screen and (max-width: 599px) {
  .navigator {
    display: none !important;
  }
  #nz-viewer-wrapper {
    height: 100vh;   /* fallback */
    height: 100svh; /* svh = small viewport, excludes browser chrome */
    height: 100dvh; /* dvh = dynamic, best option if supported */
  }
  #nz-logo {
    width: 108px;   /* subtle mobile logo (subtitle-less) */
    max-width: 65%; /* a touch more room for the wider splash on small screens */
  }
  #nz-logo.nz-logo-first {
    width: 200px;   /* mobile splash — adjust to taste */
  }

  /* No navigator on mobile — stack ruler and zoom display above toolbar.
     top:auto !important overrides the JS-set inline style.top values. */
  #nz-scalebar {
    top: auto !important;
    bottom: 57px;   /* above zoom display + 2px extra gap */
    left: 5px;
  }
  #zoom-display {
    top: auto !important;
    bottom: 34px;   /* 2px lower than before to clear ruler box */
    left: 5px !important;
  }
  #nz-scalebar-label   { font-size: 16px; margin-top: 2px; }
     shorter screen. Pan buttons are replaced by touch drag; rotation and all
     inactive placeholder buttons (tour, help) are hidden entirely.
     Dividers are also hidden — removing groups leaves orphaned 1px lines. */
  #btn-zoomout   { display: none !important; }
  #nz-slider-wrap { display: none !important; }
  #btn-zoomin    { display: none !important; }

  #zoom-display        { font-size: 18px; }

  .nz-btn.inactive,
  #btn-panleft, #btn-panup, #btn-pandown, #btn-panright,
  #btn-rotateccw, #btn-rotatecw {
    display: none !important;
  }
  #nz-toolbar .nz-divider,
  #nz-toolbar-buttons .nz-divider {
    display: none !important;
  }
  #nz-slider-wrap { width: 70px; }
}

/* ── Landscape phone — same treatment as portrait mobile ─────────────────── */
/* max-height:500px catches phones in landscape without touching tablets/desktops */
@media screen and (orientation: landscape) and (max-width: 926px) and (max-height: 500px) and (pointer: coarse) {
  .navigator {
    display: none !important;
  }
  #nz-viewer-wrapper {
    min-height: 0 !important;      /* override base 300px — was clamping calc() */
    height: calc(100vh - 59px);   /* fallback */
    height: calc(100svh - 59px);
    height: calc(100dvh - 59px);
  }
  #nz-scalebar {
    top: auto !important;
    bottom: 57px;
    left: 5px;
  }
  #zoom-display {
    top: auto !important;
    bottom: 34px;
    left: 5px !important;
    font-size: 18px;
  }
  #nz-scalebar-label { font-size: 16px; margin-top: 2px; }
  #btn-zoomout    { display: none !important; }
  #nz-slider-wrap { display: none !important; }
  #btn-zoomin     { display: none !important; }
  .nz-btn.inactive,
  #btn-panleft, #btn-panup, #btn-pandown, #btn-panright,
  #btn-rotateccw, #btn-rotatecw {
    display: none !important;
  }
  #nz-toolbar .nz-divider,
  #nz-toolbar-buttons .nz-divider {
    display: none !important;
  }
}

/* ── Small desktop window — hide navigator, reposition ruler + zoom ───────── */
/* pointer:fine = mouse-driven desktop. Ruler/zoom move to bottom (same as    */
/* mobile) since navigator is gone. JS positionZoomDisplay() bails out too.   */
@media screen and (pointer: fine) and (max-height: 370px) {
  .navigator { display: none !important; }
  #nz-viewer-wrapper {
    min-height: 0 !important;  /* allow viewer to shrink below base 300px */
  }
  #nz-scalebar {
    top: auto !important;
    bottom: 57px;
    left: 5px;
  }
  #zoom-display {
    top: auto !important;
    bottom: 34px;
    left: 5px !important;
  }
}

/* ── Hotspot label visibility toggle (info button) ────────────────────────── */
#nz-viewer-wrapper.nz-labels-hidden .nz-hotspot-label { display: none !important; }

/* ── Hotspot labels ───────────────────────────────────────────────────────── */
/* Text labels placed on the map via OSD overlays.                            */
/* No background box — just the text with a soft glow outline.                */
/* Glow uses 4 cardinal 1px offsets for solid ring + 2 soft 2px blur layers  */
/* at #ebebeb — matches the settled configuration from the Zoomify project.  */
/* Hidden state — applied via JS based on zoom range.                        */
/* !important ensures OSD's overlay system cannot override this during        */
/* pan/zoom animations.                                                        */
.nz-hotspot.nz-hotspot-hidden {
  display: none !important;
  pointer-events: none !important;
}

.nz-hotspot {
  position: absolute;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.nz-hotspot-label {
  font-family: adobe-caslon-pro, serif;
  font-size: 11px;
  font-weight: bold;
  max-width: none;
  white-space: pre;
  color: #222222;
  background: none;
  border: none;
  padding: 0;
  line-height: 0.9;
  text-shadow:
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #fff,
    0 0 12px #fff,
    1px 1px 3px #fff,
    -1px -1px 3px #fff,
    1px -1px 3px #fff,
    -1px 1px 3px #fff;
}

.nz-hotspot:hover .nz-hotspot-label {
  color: #111111;
}

.nz-hotspot-icon {
  display: block;
  width: 12px;
  height: 12px;
  cursor: pointer;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff);
}

/* Custom tooltip — exactly matches .nz-hotspot-label style */
.nz-hotspot-label[data-tooltip] {
  position: relative;
}
.nz-hotspot-label[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: auto;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  white-space: pre-wrap;
  width: max-content;
  max-width: 500px;
  background: none;
  border: none;
  color: #222222;
  font-size: 11px;
  font-weight: bold;
  font-family: adobe-caslon-pro, serif;
  line-height: 12px;
  padding: 0;
  pointer-events: none;
  text-shadow:
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #fff,
    0 0 12px #fff,
    1px  1px 3px #fff,
    -1px -1px 3px #fff,
    1px -1px 3px #fff,
    -1px  1px 3px #fff;
  display: none;
  z-index: 9999;
}
.nz-hotspot-label[data-tooltip]:hover::after {
  display: block;
}

/* ── Hotspot popup image ──────────────────────────────────────────────────── */
/* Floating image panel that appears on hover near the hotspot label.         */
/* Positioned absolutely relative to the hotspot div via JS offset values.   */
.nz-hotspot-popup {
  position: absolute;
  display: none;          /* hidden by default — shown on hover via JS */
  z-index: 500;
  pointer-events: none;   /* doesn't block map interaction */
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  background: white;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

.nz-hotspot-popup img {
  display: block;
  max-width: 400px;
  height: auto;
}

.nz-hotspot:hover .nz-hotspot-popup {
  display: block;
}

/* ── Hotspot info panel ───────────────────────────────────────────────────── */
/* Slides in from the right when a hotspot is clicked.                        */
/* Contains an image gallery and an optional text/links page.                 */

#nz-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 80vh;
  max-height: 80vh;
  background: none;
  color: #2a2a2a;
  font-family: adobe-caslon-pro, serif;
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  border: 1px solid rgba(80,70,60,0.5);
  box-shadow: -4px 0 16px rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
}

#nz-panel.nz-panel-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel close button (header removed; close floats over top-right) ──────── */
#nz-panel-close {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: rgba(0,0,0,0.75);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding-bottom: 0;
  border-radius: 3px;
  background: rgba(0,0,0,0.12);
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,0.9),
    0 0 9px rgba(255,255,255,0.6);
  transition: color 0.15s, background 0.15s;
  z-index: 10;
}
#nz-panel-close:hover {
  color: #000;
  background: rgba(0,0,0,0.25);
}

/* ── Gallery view ─────────────────────────────────────────────────────────── */
#nz-panel-gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(210,207,202,0.70);
  box-sizing: border-box;
}

#nz-panel-image-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;  /* needed for overlay arrows */
  background: rgba(210,207,202,0.70);
}

#nz-panel-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
}

/* ── Gallery navigation — arrows overlay the image ───────────────────────── */
/* image-wrap must be position:relative (already set above) */
.nz-panel-arrow {
  cursor: pointer;
  color: rgba(0,0,0,0.5);
  font-size: 16px;
  padding: 2px 4px;
  background: none;
  border: none;
  transition: color 0.15s;
  user-select: none;
}
.nz-panel-arrow:hover {
  color: #000;
}

/* ── Panel footer ─────────────────────────────────────────────────────────── */
#nz-panel-footer {
  padding: 2px 8px;
  background: rgba(210,207,202,0.70);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.nz-footer-zone {
  flex: 1;
  display: flex;
  align-items: center;
}

.nz-footer-center {
  justify-content: center;
  gap: 24px;
}

.nz-footer-right {
  justify-content: flex-end;
}

.nz-panel-btn {
  font-family: adobe-caslon-pro, serif;
  font-size: 14px;
  color: #2a2a2a;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  padding: 4px 6px 2px 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}
.nz-panel-btn:hover { color: #000; background: rgba(0,0,0,0.2); }

/* ── Text/more page ───────────────────────────────────────────────────────── */
#nz-panel-info {
  display: flex;
  flex-direction: column;
  background: rgba(210,207,202,0.92);
  box-sizing: border-box;
  overflow: hidden;
  flex: 1;
}

/* Info page header — fixed, never scrolls */
#nz-panel-info-header {
  padding: 3px 14px 0 14px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

#nz-panel-info-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#nz-panel-info-header-left {
  flex: 1;
  min-width: 0;
}

/* Info page scrollable body — styled as rounded box matching buttons */
#nz-panel-info-body {
  flex: 1;
  overflow-y: auto;
  margin: 0 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  min-height: 0;
  font-size: 17px;
}

/* Info page button row — fixed at bottom, never scrolls */
#nz-panel-info-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 8px 14px 14px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Label image (crop from original map) shown above panel title */
#nz-panel-label-img {
  max-height: 40px;
  width: auto;
  height: auto;
  flex-shrink: 0;
  display: block;
}

#nz-panel-info-title {
  font-size: 15px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 0.9;
  margin-bottom: 1px;
}

#nz-panel-info-subtitle {
  font-size: 13px;
  color: #1a3a5c;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

/* ── Sources page ─────────────────────────────────────────────────────────── */
#nz-panel-sources {
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  background: rgba(210,207,202,0.92);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

#nz-panel-sources.visible {
  display: flex;
}

/* Sources header row */
#nz-panel-sources-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 14px 5px 14px;
  flex-shrink: 0;
}

#nz-panel-sources-title {
  font-size: 13px;
  font-weight: bold;
  color: #1a1a1a;
  flex: 1;
}

/* Detach button shared styles */
#nz-panel-detach-btn,
#nz-panel-sources-detach-btn {
  width: 15px;
  height: 15px;
  cursor: pointer;
  opacity: 0.6;
  flex-shrink: 0;
  margin-top: 3px;
  margin-left: 6px;
  transition: opacity 0.2s;
  position: relative;
}
#nz-panel-detach-btn:hover,
#nz-panel-sources-detach-btn:hover {
  opacity: 1;
}

#nz-panel-sources-list {
  list-style: none;
  padding: 8px 10px;
  margin: 0 14px;
  display: block;
  overflow-y: auto;
  flex: 1;
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  min-height: 0;
  line-height: 0.9;
}

#nz-panel-sources-list li {
  margin: 0 0 8px 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.3;
}

#nz-panel-sources-list li:last-child {
  margin-bottom: 0;
}

#nz-panel-sources-list li a {
  font-size: 14px;
  color: #1a3a5c;
  text-decoration: underline;
  word-break: break-word;
  line-height: 1.3;
  display: inline;
}

#nz-panel-sources-list li a:hover {
  color: #000;
}

#nz-panel-sources-list li.nz-source-nolink {
  color: #555;
}

#nz-panel-sources-footer {
  padding: 4px 14px 10px 14px;
  border-top: 1px solid rgba(0,0,0,0.10);
  flex-shrink: 0;
}

#nz-panel-more-text {
  font-size: 14px;
  line-height: 1.3em;
  color: #2a2a2a;
  margin-bottom: 0;
}

#nz-panel-more-text p {
  margin: 0 0 8px 0;
  padding: 0;
}

#nz-panel-more-text p:last-child {
  margin-bottom: 0;
}

.nz-today {
  display: block;
  font-size: 11px;
  line-height: 1.3em;
  color: #2a2a2a;
  margin-top: 6px;
}

.nz-gis-link {
  display: inline-block;
  font-size: 11px;
  color: #1a3a5c;
  text-decoration: underline;
  margin-top: 4px;
}
.nz-gis-link:hover {
  color: #2a5a8c;
}

#nz-panel-more-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

/* ── Mobile — panel goes full width ──────────────────────────────────────── */
@media screen and (max-width: 599px) {
  #nz-panel {
    width: 100%;
  }
}

/* ── Idle-hide animation ───────────────────────────────────────────────────── */
/* CSS animations override inline styles, so this wins over OSD/hover-hide.    */
/* 'to' only (no 'from') means animation starts from current computed opacity. */
@keyframes nz-idle-fade-out {
  to { opacity: 0; }
}

.nz-idle-out {
  animation: nz-idle-fade-out 1.3s ease forwards;
  pointer-events: none !important;
}

/* ── Navigator background — JS-injected div covers tile canvas ───────────────── */
/* #nz-nav-bg is created by JS in the open handler with background set inline.  */
/* OSD sets navEl.style.background = rgba(0,0,0,0) making the navigator         */
/* transparent — countered in JS with background-color !important.              */
.nz-nav-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Raise the red rect container above the image overlay */
.navigator .displayregioncontainer {
  position: relative;
  z-index: 2;
}

/* Hide tile canvas so it doesn't bleed above #nz-nav-bg */
.navigator .openseadragon-container {
  visibility: hidden;
}

/* displayregion kept visible (OSD needs it) but we draw our own rect on top */
.navigator .displayregion {
  visibility: visible !important;
}

/* Our custom viewport rectangle — position:absolute paints above floats */
.nz-viewport-rect {
  position: absolute;
  border: 2px solid rgba(220, 60, 60, 0.95);
  pointer-events: none;
  z-index: 999;
  box-sizing: content-box;
  display: none; /* shown by JS once position is known */
}