/* Dynasty Library — the Library Map.

   The map is a wayfinding tool, not a chapter of the homepage, so it does
   not take a section of its own. It rides in the sticky navigation as a
   small chip: a reader who gets lost reaches for it, everyone else never
   notices it. The chip is a real download link, and the viewer it opens
   carries the download too.  */

.nav-map {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  color: var(--bone);
  white-space: nowrap;
}

.nav-map::before {
  /* A folded-map mark, drawn rather than shipped, so the chip reads as a map
     at a glance without another request or an emoji. */
  content: "";
  width: 13px;
  height: 11px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .8;
  clip-path: polygon(0 14%, 33% 0, 66% 14%, 100% 0, 100% 86%, 66% 100%, 33% 86%, 0 100%);
}

.nav-map:hover { border-color: var(--amber); color: var(--amber); }
.nav-map:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.nav-map .nm-short { display: none; }

@media (max-width: 600px) {
  /* Room is scarce next to a thumb, so the chip keeps the mark and drops to
     one word. It stays visible when Return Desk does not — a lost reader
     needs the map more than the desk. */
  .nav-map { padding: 6px 9px; }
  .nav-map .nm-word { display: none; }
  .nav-map .nm-short { display: inline; }

  /* A fifth item is one too many for one phone row, and a label that breaks
     mid-word ("HOW IT / WORKS") reads as a bug. So the bar wraps by whole
     labels into two right-aligned rows instead of squeezing each one. Scoped
     with :has() to the bar that carries the map chip, so interior pages and
     their back chip keep the spacing they already had. */
  .nav-links:has(.nav-map) { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
  .nav-links:has(.nav-map) a { white-space: nowrap; }
}

/* Focus has to be visible on a dark plate — the default ring disappears. */
.libmap-modal button:focus-visible,
.libmap-modal a:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- lightbox */

.libmap-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(4, 7, 14, .96);
}
.libmap-modal[open],
.libmap-modal.is-open { display: flex; flex-direction: column; }

.libmap-modal-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(201, 162, 39, .3);
  background: #080d18;
}

.libmap-modal-title {
  font-family: 'BarlowCondensed';
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9a227;
}

.libmap-modal-tools { display: flex; align-items: center; gap: 8px; }

.libmap-icon {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 2px;
  color: #efe7d4;
  font-family: 'BarlowCondensed';
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  cursor: pointer;
}
.libmap-icon:hover { border-color: #c9a227; color: #c9a227; }

.libmap-zoomlevel {
  font-family: 'BarlowCondensed';
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--mute);
  min-width: 52px;
  text-align: center;
}

.libmap-stage {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.libmap-stage img {
  display: block;
  margin: 0 auto;
  width: var(--libmap-zoom, 100%);
  max-width: none;
  height: auto;
  transition: width .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .libmap-stage img { transition: none; }
  html:has(.libmap-modal.is-open) { scroll-behavior: auto; }
}

@media (max-width: 600px) {
  /* On a phone the viewer's own bar has to fit the thumb, not the label. The
     title is dropped (the dialog is already named for a screen reader), the
     controls keep their 40px targets, and nothing is allowed to push Close
     off the edge. */
  .libmap-modal-bar { justify-content: flex-end; gap: 8px; padding: 10px 12px; }
  .libmap-modal-title { display: none; }
  .libmap-modal-tools { gap: 6px; flex: 1 1 auto; justify-content: space-between; }
  .libmap-icon { min-width: 38px; padding: 0 8px; font-size: 14px; }
  .libmap-stage { padding: 12px; }
}