/* The map viewer, from the live site's src/designs/lamplight/maps.css with its .d-lamplight scope taken off (the
   pinned card is appended to <body>, outside any page wrapper). Its colour names point at this site's theme. */
.mv, .mv-card {
  --gold: var(--accent);
  --gold-light: var(--accent-ink);
  --gold-ghost: var(--focus);
  --line: var(--hair);
  --line-soft: var(--hl);
  --bg-deep: var(--field);
  --panel-2: var(--chip);
  --display: var(--head);
  --good: var(--ok);
  --bad: #c4553b;
}

/* The map viewer: a picture with named markers, toggles above, a list of every marker beside it on
   the explorer, and the card a clicked marker pins open. */
.mv {
  --pin-loot: #f0a020;
  --pin-furniture: #4ea3e8;
  --pin-ground: #52c06a;
  --pin-person: #e45bc2;
  --pin-door: #f4efe6;
  --pin-slot: #4fd1a1;
  --pin-slot-locked: #c39bff;
  --pin-tower: #e05a4a;
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.mv-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.mv-layers,
.mv-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mv-layer,
.mv-mode {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: 700 0.78rem var(--body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.mv-layer small {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.mv-layer:hover,
.mv-mode:hover {
  border-color: var(--gold);
}

.mv-layer[aria-pressed="false"] {
  opacity: 0.5;
  text-decoration: line-through;
}

.mv-mode[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-ghost);
  color: var(--gold-light);
}

.mv-dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgb(0 0 0 / 0.55);
  border-radius: 50%;
  background: var(--pin-color);
}

.is-loot {
  --pin-color: var(--pin-loot);
}

.is-furniture {
  --pin-color: var(--pin-furniture);
}

.is-ground {
  --pin-color: var(--pin-ground);
}

.is-person {
  --pin-color: var(--pin-person);
}

.is-slot {
  --pin-color: var(--pin-slot);
}

.is-tower {
  --pin-color: var(--pin-tower);
}

.is-door,
.is-entry,
.is-exit,
.is-stairs {
  --pin-color: var(--pin-door);
}

/* The picture and the list: side by side on a wide screen, the list below on a narrow one. */
.mv-body {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}

.mv-main {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

@media (min-width: 1000px) {
  .mv-body:has(.mv-list) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.mv-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  touch-action: none;
  user-select: none;
}

.mv.is-compact .mv-stage {
  touch-action: auto;
}

.mv.is-zoomed .mv-stage {
  cursor: grab;
}

.mv-canvas {
  --inv: 1;
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.mv-img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The floor space a building spot takes, as the game measures it, drawn under its marker. */
.mv-boxes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mv-box {
  fill: color-mix(in srgb, var(--pin-color) 16%, transparent);
  stroke: var(--pin-color);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.mv-box.is-locked {
  --pin-color: var(--pin-slot-locked);
  fill: color-mix(in srgb, var(--pin-color) 8%, transparent);
  stroke-dasharray: 4px 3px;
}

/* A marker: a dot, or a small picture of the thing, with its name beside it. It keeps the same size
   on screen at every zoom. */
.mv-pin {
  --size: 0.85rem;
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  /* --fan steps people who share a spot apart, a pin and a gap per step. */
  margin: calc(var(--size) / -2 + var(--fan, 0) * (var(--size) + 0.3rem)) 0 0 calc(var(--size) / -2);
  padding: 0;
  border: 2px solid rgb(20 14 8 / 0.85);
  border-radius: 50%;
  background: var(--pin-color);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.25), 0 2px 6px rgb(0 0 0 / 0.45);
  color: inherit;
  font: inherit;
  transform: scale(var(--inv));
  transition: box-shadow 0.12s;
  cursor: pointer;
  appearance: none;
}

.mv-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.mv-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mv-pin.has-icon {
  --size: 1.6rem;
  border: 2px solid var(--pin-color);
  border-radius: 4px;
  background: hsl(24 9% 6% / 0.88);
}

.mv-pin.has-icon.is-portrait {
  border-radius: 50%;
}

.mv-pin.is-portrait .mv-face img {
  object-fit: cover;
  object-position: top;
}

.mv.is-dense .mv-pin.has-icon,
.mv.is-compact .mv-pin.has-icon {
  --size: 1.15rem;
}

.mv-pin:hover,
.mv-pin:focus-visible,
.mv-pin.is-hot,
.mv-pin[aria-expanded="true"] {
  z-index: 3;
  outline: none;
  box-shadow: 0 0 0 3px var(--gold), 0 2px 10px rgb(0 0 0 / 0.5);
}

.mv-pin[aria-expanded="true"] {
  z-index: 4;
  box-shadow: 0 0 0 3px var(--gold-light), 0 0 0 7px var(--gold-ghost), 0 2px 10px rgb(0 0 0 / 0.5);
}

/* The container an item page linked to stays lit after its card closes. */
.mv-pin.is-target {
  z-index: 4;
  animation: mv-target 1.6s ease-out infinite;
}

.mv-pin.is-target .mv-tag {
  display: block;
  color: var(--gold-light);
}

/* While an item page's spots are shown, every other marker steps back so the lit ones stand out. */
.mv.is-finding .mv-pin:not(.is-target) {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.mv.is-finding .mv-pin:not(.is-target) .mv-tag {
  display: none;
}

@keyframes mv-target {
  0% { box-shadow: 0 0 0 3px var(--gold-light), 0 0 0 3px var(--gold-ghost); }
  100% { box-shadow: 0 0 0 3px var(--gold-light), 0 0 0 16px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-pin.is-target {
    animation: none;
    box-shadow: 0 0 0 3px var(--gold-light), 0 0 0 7px var(--gold-ghost);
  }
}

.mv-pin.is-loot:not(.has-icon) {
  --size: 1.05rem;
}

.mv-pin.is-furniture:not(.has-icon) {
  --size: 0.7rem;
}

.mv-pin.is-ground:not(.has-icon) {
  border-radius: 3px;
}

/* Furniture spots: the marker's shape is the kind of spot (S, M and L squares that grow with the size, a bar on the
   wall, a dot on a table, a bed, a door, a window), and its colour says whether it is there from the start (solid
   green) or a survival plan opens it (dashed violet). --w and --h size the shapes that are not square. */
.mv-pin.is-slot {
  --size: 0.75rem;
  --w: var(--size);
  --h: var(--size);
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 3px;
  color: #10241c;
}

.mv-pin.is-slot .mv-face {
  display: grid;
  place-items: center;
  font: 800 var(--glyph, 0.5rem)/1 var(--body);
  letter-spacing: 0;
}

.mv-pin.is-slot.is-locked {
  --pin-color: var(--pin-slot-locked);
  border: 2px dashed var(--pin-color);
  background: hsl(270 30% 10% / 0.82);
  color: var(--pin-color);
}

.mv-pin.is-sz-s { --size: 0.85rem; --glyph: 0.5rem; }
.mv-pin.is-sz-m { --size: 1.1rem; --glyph: 0.62rem; }
.mv-pin.is-sz-l { --size: 1.4rem; --glyph: 0.78rem; border-width: 3px; }
.mv-pin.is-sz-wall { --w: 1.3rem; --h: 0.5rem; background-image: repeating-linear-gradient(135deg, rgb(0 0 0 / 0.28) 0 2px, transparent 2px 5px); }
.mv-pin.is-sz-table { --size: 0.8rem; border-radius: 50%; }
.mv-pin.is-sz-table .mv-face::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: currentColor; }
.mv-pin.is-sz-bed { --w: 1rem; --h: 1.4rem; border-radius: 4px 4px 2px 2px; }
.mv-pin.is-sz-bed .mv-face { align-items: start; padding-top: 2px; }
.mv-pin.is-sz-bed .mv-face::after { content: ""; width: 70%; height: 22%; border-radius: 2px; background: currentColor; opacity: 0.7; }
.mv-pin.is-sz-door { --w: 0.5rem; --h: 1.25rem; border-radius: 2px; }
.mv-pin.is-sz-window { --w: 1.25rem; --h: 0.55rem; border-style: double; border-width: 3px; }
.mv-pin.is-slot.is-locked.is-sz-window { border-style: dotted; }

/* A spot's card while the pointer rests on it: its kind, room and whether it is open or what opens it. */
.mv-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: none;
  gap: 1px;
  width: max-content;
  max-width: 15rem;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-top: 3px solid var(--pin-color);
  border-radius: 6px;
  background: hsl(24 12% 7% / 0.95);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.55);
  color: var(--ink);
  font: 400 12px/1.4 var(--body);
  text-align: left;
  white-space: normal;
  transform: translateX(-50%);
  pointer-events: none;
}

.mv-tip b { font-weight: 700; }
.mv-tip small { color: var(--muted); font-size: 11px; }
.mv-tip em { font-style: normal; font-weight: 600; }
.mv-tip em.is-open { color: var(--pin-slot); }
.mv-tip em.is-locked { color: var(--pin-slot-locked); }

.mv-pin:hover .mv-tip,
.mv-pin:focus-visible .mv-tip,
.mv-pin.is-hot .mv-tip {
  display: grid;
}

.mv-pin[aria-expanded="true"] .mv-tip {
  display: none;
}

.mv-pin.is-tower {
  --size: 0.6rem;
  border-width: 1px;
}

.mv-pin.is-later {
  border-style: dashed;
  opacity: 0.8;
}

.mv-pin.is-entry,
.mv-pin.is-exit,
.mv-pin.is-stairs {
  --size: 1.3rem;
  color: #1d1a16;
  font: 700 0.75rem/1 var(--body);
}

.mv-pin.is-entry .mv-face::after,
.mv-pin.is-exit .mv-face::after,
.mv-pin.is-stairs .mv-face::after {
  display: grid;
  place-items: center;
  height: 100%;
}

.mv-pin.is-entry .mv-face::after {
  content: "\2192";
}

.mv-pin.is-exit .mv-face::after {
  content: "\2190";
}

.mv-pin.is-stairs {
  border-radius: 4px;
}

.mv-pin.is-stairs .mv-face::after {
  content: "\21C5";
}

/* Names: shown with the toggle, and on the marker being pointed at. Zooming in does not override the toggle. */
.mv-tag {
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  display: none;
  max-width: 11rem;
  overflow: hidden;
  padding: 1px 5px;
  border-left: 2px solid var(--pin-color);
  background: hsl(24 9% 6% / 0.86);
  color: var(--ink);
  font: 700 11px/1.35 var(--body);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

.mv.is-labels .mv-tag,
.mv-pin:hover .mv-tag,
.mv-pin:focus-visible .mv-tag,
.mv-pin.is-hot .mv-tag,
.mv-pin[aria-expanded="true"] .mv-tag {
  display: block;
}

.mv-pin:hover .mv-tag,
.mv-pin.is-hot .mv-tag,
.mv-pin[aria-expanded="true"] .mv-tag {
  color: var(--gold-light);
}

.mv.hide-loot [data-layer="loot"]:is(.mv-pin, .mv-group),
.mv.hide-furniture [data-layer="furniture"]:is(.mv-pin, .mv-group),
.mv.hide-ground [data-layer="ground"]:is(.mv-pin, .mv-group),
.mv.hide-person [data-layer="person"]:is(.mv-pin, .mv-group),
.mv.hide-door [data-layer="door"]:is(.mv-pin, .mv-group),
.mv.hide-slot [data-layer="slot"]:is(.mv-pin, .mv-group, .mv-box),
.mv.hide-tower [data-layer="tower"]:is(.mv-pin, .mv-group, .mv-box) {
  display: none;
}

.mv-zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 5;
  display: grid;
  gap: 0.3rem;
}

.mv-zoom button {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: 700 1.1rem/1 var(--body);
  cursor: pointer;
}

.mv-zoom button:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.mv-help {
  margin: 0;
  font-size: 0.8rem;
}

/* The list of every marker, grouped by layer. */
.mv-list {
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: min(50vh, 520px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  overscroll-behavior: contain;
}

@media (min-width: 1000px) {
  .mv-list {
    position: sticky;
    top: 70px;
    max-height: min(80vh, 900px);
  }
}

.mv-list-head {
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
}

.mv-list-head b {
  color: var(--gold);
  font: 700 11px/1.2 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mv-list-head small {
  color: var(--muted);
  font-size: 11.5px;
}

.mv-group summary {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 5px 4px;
  border-bottom: 1px solid var(--line-soft);
  font: 700 12.5px var(--body);
  cursor: pointer;
}

.mv-group summary small {
  margin-left: auto;
  color: var(--gold);
}

.mv-group ul {
  display: grid;
  gap: 1px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}

.mv-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 3px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mv-row:hover,
.mv-row:focus-visible,
.mv-row.is-hot {
  outline: none;
  border-color: var(--gold);
  background: var(--gold-ghost);
}

.mv-row-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--bg-deep);
}

.mv-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mv-row-icon.is-portrait {
  border-radius: 50%;
  overflow: hidden;
}

.mv-row-icon.is-portrait img {
  object-fit: cover;
  object-position: top;
}

.mv-row-text {
  display: grid;
  min-width: 0;
}

.mv-row-text b,
.mv-row-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-row-text b {
  font-size: 12.5px;
}

.mv-row-text small {
  color: var(--muted);
  font-size: 11px;
}

.mv-row em {
  color: var(--gold);
  font: 700 11.5px var(--body);
  font-style: normal;
}

/* The pinned card. It sits under the hover cards, so a link inside it can still show one. */
.mv-card {
  position: fixed;
  z-index: 90;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid hsl(38 60% 42% / 0.7);
  border-top: 3px solid var(--gold);
  background: hsl(24 9% 8% / 0.98);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.65);
  color: var(--ink);
  font: 13px/1.45 var(--body);
  overscroll-behavior: contain;
}

.mv-card[hidden] {
  display: none;
}

.mv-card:focus {
  outline: none;
}

.mv-card-x {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 400 24px/1 var(--body);
  cursor: pointer;
}

.mv-card-x:hover,
.mv-card-x:focus-visible {
  outline: none;
  color: var(--gold-light);
}

.mv-card-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.mv-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 24px;
}

.mv-card-pic {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}

.mv-card-pic:empty {
  display: none;
}

.mv-card-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mv-card-pic.is-portrait {
  border-radius: 50%;
  overflow: hidden;
}

.mv-card-pic.is-portrait img {
  object-fit: cover;
  object-position: top;
}

.mv-card-names {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mv-card-eyebrow {
  color: var(--gold);
  font: 700 10.5px/1.2 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mv-card-name {
  margin: 0;
  font: 19px/1.1 var(--display);
  text-transform: uppercase;
}

.mv-card-alt,
.mv-card-note {
  color: var(--muted);
  font-size: 12px;
}

.mv-card p,
.mv-card blockquote {
  margin: 0;
}

.mv-card-quote {
  padding-left: 10px;
  border-left: 2px solid var(--gold);
  color: var(--muted);
  font-style: italic;
}

.mv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mv-card-facts {
  display: grid;
  gap: 3px;
  margin: 0;
}

.mv-card-facts div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}

.mv-card-facts dt {
  color: var(--muted);
}

.mv-card-facts dd {
  margin: 0;
  text-align: right;
}

.mv-card-facts .is-good dd {
  color: var(--good);
}

.mv-card-facts .is-bad dd {
  color: var(--bad);
}

.mv-card-set h4 {
  margin: 0 0 4px;
  color: var(--muted);
  font: 700 11px/1.2 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mv-card-set ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-card-set li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
}

.mv-card-thing {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--bg-deep);
}

.mv-card-thing img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mv-card-set li > :nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-card-link {
  color: var(--ink);
}

.mv-card-link:hover {
  color: var(--gold-light);
}

.mv-card-set b {
  color: var(--muted);
  font-size: 12px;
}

.mv-card-set em {
  color: var(--gold);
  font: 700 12px var(--body);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.mv-card-more {
  display: inline-block;
  margin-top: 4px;
  color: var(--gold-light);
  font-size: 12px;
}

.mv-card-links {
  margin: 2px 0 0;
}

/* On a phone the card is a sheet along the bottom, so the marker stays in view above it. */
@media (max-width: 640px) {
  .mv-card {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 60vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .mv-pin.has-icon {
    --size: 1.3rem;
  }

  .mv.is-dense .mv-pin.has-icon,
  .mv.is-compact .mv-pin.has-icon {
    --size: 1rem;
  }

  .mv-tag {
    max-width: 8rem;
    font-size: 10px;
  }
}

/* The list of maps and each map's page. */
.mx-scene {
  aspect-ratio: 4 / 3;
}

.mx-scene img {
  object-fit: contain;
}

.mx-scene .mx-who img {
  position: static;
  width: 18px;
  height: 18px;
}

.mx-who {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.mx-who img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

.mx-page {
  display: grid;
  gap: 12px;
  padding-bottom: 40px;
}

.mx-links {
  align-items: center;
}

.mx-siblings a[aria-current] {
  border-color: var(--gold);
  background: var(--gold-ghost);
  color: var(--gold-light);
}

/* This site has a light theme too: the card takes the page's panel, and names drawn over the picture stay light. */
.mv-card { background: var(--panel); border-color: var(--hair); border-top-color: var(--accent); box-shadow: var(--shadow); }
.mv-tag { color: #f2efe6; }
.mv-card-links { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-card .dp-pill { padding: 3px 9px; background: var(--chip); border: 1px solid var(--hair); font-size: 12.5px; color: var(--link); text-decoration: none; }
.mv-card a.dp-pill:hover, .mv-card .dp-pill.is-gold { border-color: var(--accent); color: var(--accent-ink); }

/* A map record's page: who lives here, the place, the other pictures of it. */
.mx-chips, .mx-siblings { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.mx-chips a, .mx-siblings a { display: inline-flex; gap: .35rem; align-items: center; padding: .2rem .6rem; border: var(--chip-border); border-radius: var(--radius); background: var(--chip); color: var(--ink); text-decoration: none; font-size: .9rem; }
.mx-siblings a[aria-current] { border-color: var(--accent); }
.mv-host { margin: 0 0 1.4rem; }

/* The maps outside the viewer: a place's loot map, an item's "find it on the map", the map list and the spots guide.
   Their dots and keys sit outside .mv, so they carry the pin colours too. */
.mz-place, .mz-find, .mz-spots, .mz-maps, .mv-item-banner {
  --pin-loot: #f0a020;
  --pin-furniture: #4ea3e8;
  --pin-ground: #52c06a;
  --pin-person: #e45bc2;
  --pin-slot: #4fd1a1;
  --pin-slot-locked: #c39bff;
  --pin-tower: #e05a4a;
}
.mz-place, .mz-find { margin: 0 0 1.4rem; padding: 14px; border: 1px solid var(--hair); border-top: 3px solid var(--accent); border-radius: var(--radius); background: var(--panel); }
.mz-place h2, .mz-find h2, .mz-spots h2 { margin: 0 0 .4rem; }
.mz-place h3 { margin: .9rem 0 .4rem; font-size: 1rem; }
.mz-place.is-big { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .mz-place.is-big { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.mz-pic { display: block; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--field); overflow: hidden; }
.mz-pic img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.mz-side { display: grid; align-content: start; min-width: 0; }
.mz-side > p { margin: 0 0 .6rem; }
.mz-counts, .mz-finds, .mz-maps, .mz-tabs, .mz-legend, .mz-plans { margin: 0; padding: 0; list-style: none; }
.mz-counts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.mz-counts li, .mz-legend li { display: inline-flex; gap: .4rem; align-items: center; }
.mz-finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mz-finds a { display: flex; gap: .45rem; align-items: center; min-width: 0; padding: 4px 8px; border: var(--chip-border); border-radius: var(--radius); background: var(--chip); color: var(--ink); text-decoration: none; font-size: .9rem; }
.mz-finds a:hover { border-color: var(--accent); }
.mz-finds img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.mz-finds span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-finds small { color: var(--muted); }
.mz-open { display: inline-block; justify-self: start; margin: 1rem 0 0; padding: .7rem 1.4rem; border-radius: var(--radius); background: var(--accent); color: var(--bg); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.mz-open:hover { filter: brightness(1.1); }
.mz-more { margin: .8rem 0 0; color: var(--muted); }
/* Wide enough that a card's lines and its button each sit on one line: three across on a desktop page, not four. */
.mz-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mz-card { position: relative; display: flex; gap: 12px; height: 100%; padding: 10px; border: 1px solid var(--hair); border-left: 3px solid var(--hair); border-radius: var(--radius); background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.mz-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.mz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mz-card-pic { flex: none; width: 112px; height: 112px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--field); object-fit: contain; }
.mz-card-t { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.mz-card-name { color: var(--link); font: 700 1.15rem/1.15 var(--head); letter-spacing: .02em; }
.mz-card-t small, .mz-card-marks { color: var(--muted); font-size: .85rem; }
.mz-card-marks { display: flex; flex-wrap: wrap; gap: 2px 10px; }
/* Counts in the heading face: the body face's bold digits run together at this size. */
.mz-card-marks b, .mz-counts b, .mz-legend b { color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 1.12em; letter-spacing: .02em; }
.mz-card-note { font-weight: 600; color: var(--accent-ink); }
.mz-btn { align-self: flex-start; margin-top: auto; padding: 4px 12px; border: 1px solid var(--accent); border-radius: var(--radius); color: var(--accent-ink); font-size: .85rem; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s; }
.mz-card:hover .mz-btn { background: var(--accent); color: var(--on-accent, var(--bg)); }
@media (prefers-reduced-motion: reduce) {
  .mz-card, .mz-btn { transition: none; }
  .mz-card:hover { transform: none; }
}
.mz-spots-link { margin: 0 0 .7rem; font-weight: 600; }
.mz-who-pic { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; vertical-align: middle; }

/* The spots guide: tabs to each home, then each floor's legend, the plans that open spots, and the map. */
.mz-spots { margin: 0 0 1.8rem; }
.mz-tabs { display: grid; gap: 6px; margin: .6rem 0 1rem; }
.mz-tabs li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mz-tabs a { padding: 3px 10px; border: var(--chip-border); border-radius: var(--radius); background: var(--chip); color: var(--link); text-decoration: none; font-size: .9rem; }
.mz-tabs a:hover { border-color: var(--accent); }
.mz-who { margin: 1.2rem 0 0; }
.mz-who > h3 { margin: 0 0 .4rem; padding-bottom: 4px; border-bottom: 1px solid var(--hair); }
.mz-spot-map { display: grid; gap: 8px; margin: 0 0 1.4rem; scroll-margin-top: 80px; }
.mz-spot-map h4 { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: .4rem 0 0; font-size: 1rem; }
.mz-full { font-size: .9rem; font-weight: 400; }
.mz-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.mz-key { flex: none; width: .8rem; height: .8rem; border: 2px solid var(--pin-slot); border-radius: 2px; background: var(--pin-slot); }
.mz-key.is-locked { border: 2px dashed var(--pin-slot-locked); background: transparent; }
.mz-legend.is-shapes { gap: .5rem 1.1rem; font-size: .9rem; }
.mz-legend .mz-swatch { position: static; flex: none; margin: 0; transform: none; box-shadow: 0 1px 3px rgb(0 0 0 / .4); cursor: default; }
.mz-legend .mv-dot.is-tower { --pin-color: var(--pin-tower); }
.mz-plans { display: grid; gap: 2px; color: var(--muted); font-size: .9rem; }

/* An item page's link lights its spots: this line says how many, and its button shows everything again. */
.mv-item-banner { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; padding: 6px 10px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--focus); color: var(--ink); }
.mv-item-clear { padding: 2px 10px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel); color: var(--accent-ink); font: inherit; font-size: .9rem; cursor: pointer; }

@media (max-width: 640px) {
  .mz-place, .mz-find { padding: 10px; }
  .mz-maps { grid-template-columns: minmax(0, 1fr); }
  .mz-card-pic { width: 72px; height: 72px; }
  .mz-open { justify-self: stretch; text-align: center; }
  .mz-finds { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}