/* The campground site map (site/site-map.js, 2026-10-01): shared by the
   camping map's detail panel and the drive page's listing sheet. Plain
   colours of its own, since the two pages' tokens differ; a light sheet
   on both (the drive page's listing sheet is white too). */
.po-sitemap-fold {
  margin: 10px 0 14px;
  border: 1px solid #d9dfda;
  border-radius: 10px;
  background: #f4f7f4;
}

.po-sitemap-fold > summary {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #163b25;
  list-style: none;
}

.po-sitemap-fold > summary::-webkit-details-marker {
  display: none;
}

.po-sitemap-fold > summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1.1em;
  color: #5b7a66;
}

.po-sitemap-fold[open] > summary::before {
  content: "\25BE";
}

.po-sitemap-fold > summary small {
  font-weight: 400;
  color: #5b7a66;
}

.po-sitemap {
  padding: 0 10px 10px;
}

.po-sitemap-lead,
.po-sitemap-credit,
.po-sitemap-facts {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #4a5a50;
}

.po-sitemap-credit {
  margin: 8px 0 0;
  font-size: 11px;
}

.po-sitemap-map {
  height: 300px;
  border-radius: 8px;
  background: #cfd8d2;
  overflow: hidden;
}

@media (min-width: 900px) {
  .po-sitemap-map {
    height: 380px;
  }
}

/* Larger (2026-10-02): the block fills the screen, the map takes the
   room, the sheet docks under it and scrolls on its own. */
.po-sitemap.po-full {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #fff;
}

.po-sitemap.po-full .po-sitemap-lead,
.po-sitemap.po-full .po-sitemap-credit {
  margin: 0 0 6px;
  font-size: 11px;
}

.po-sitemap.po-full .po-sitemap-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.po-sitemap.po-full .po-sitemap-sheet {
  flex: 0 0 auto;
  max-height: 42vh;
  overflow-y: auto;
}

/* On a computer (2026-10-02, the owner: the sheet took the whole bottom
   of the screen) the site's sheet is a column at the right of the map
   instead, scrolling on its own; with no sheet open the map has it all. */
@media (min-width: 900px) and (min-height: 600px) {
  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    column-gap: 12px;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-lead {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-map {
    grid-column: 1;
    grid-row: 2;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-here {
    grid-column: 1;
    grid-row: 3;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-queue {
    grid-column: 1;
    grid-row: 4;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-sheet {
    grid-column: 2;
    grid-row: 2 / 5;
    margin-top: 0;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
  }

  .po-sitemap.po-full:has(.po-sitemap-sheet:not([hidden])) .po-sitemap-credit {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}

body.po-sitemap-full-open {
  overflow: hidden;
}

/* The block sits inside the detail panel's own stacking context, which
   the page header and the map's chips stand above; while it is open the
   panel is lifted over both, and the whole screen is the site map. */
body.po-sitemap-full-open #detail-panel {
  z-index: 3000;
}

.po-sitemap-full-ctl a,
.po-sitemap-locate-ctl a {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  color: #111;
}

/* Where the phone is (2026-10-02): the blue dot, the site under it
   with a pulsing ring, and the line under the map. */
.po-sitemap-locate-ctl a.on {
  background: #1976d2;
  color: #fff;
}

.po-me {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1976d2;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.po-site-pin.po-site-here {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1976d2, 0 1px 3px rgba(0, 0, 0, 0.5);
  animation: po-here-pulse 1.6s ease-in-out infinite;
}

@keyframes po-here-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1976d2, 0 1px 3px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(25, 118, 210, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .po-site-pin.po-site-here {
    animation: none;
  }
}

.po-sitemap-here {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #e3f0fb;
  color: #0d3c6e;
  font-size: 13px;
}

.po-sitemap-here-btn {
  padding: 0 2px;
  border: 0;
  background: none;
  color: #0d3c6e;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* The site pins: a small disc with the site number, coloured by type;
   a thumbs-up turns it green with a ring, a thumbs-down grey and
   struck, a note adds a corner mark. */
.po-site-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3b6fb6;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font: 700 10px/22px Inter, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
}

.po-site-pin span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.po-site-electric { background: #3b6fb6; }
.po-site-tent { background: #2f7d4f; }
.po-site-group { background: #8a5a2b; }
.po-site-cabin { background: #7d3b2e; }
.po-site-horse { background: #6b4f2f; }
.po-site-other { background: #55606b; }

.po-site-pin.po-site-up {
  background: #1f9d55;
  border-color: #ffd54a;
  box-shadow: 0 0 0 2px #1f9d55, 0 1px 3px rgba(0, 0, 0, 0.5);
}

.po-site-pin.po-site-down {
  background: #8d9399;
  color: #e9ecef;
  text-decoration: line-through;
  opacity: 0.85;
}

.po-site-pin.po-site-noted::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd54a;
  border: 1px solid #fff;
}

.po-own-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8e3fb8;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: grab;
}

.po-own-pin.po-site-up { background: #1f9d55; border-color: #ffd54a; }
.po-own-pin.po-site-down { background: #8d9399; }

/* The sheet under the map. */
.po-sitemap-sheet {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d9dfda;
  border-radius: 8px;
  background: #fff;
}

/* The operator's own words and photos for a site. */
.po-site-features {
  margin: 4px 0;
  font-size: 13px;
  color: #33423a;
}

.po-site-opnotes {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid #c9d6cd;
  background: #f5f8f6;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #26332b;
}

.po-site-opnotes summary {
  cursor: pointer;
  font-weight: 600;
  color: #163b25;
}

.po-site-opnotes p {
  margin: 6px 0 2px;
  white-space: pre-line;
}

.po-site-opphotos {
  margin: 6px 0 8px;
}

.po-site-opphotos > span {
  display: block;
  font-size: 11px;
  color: #5b6a60;
  margin-bottom: 4px;
}

.po-site-opphotos-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.po-site-opphotos-strip img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #dfe6e1;
  display: block;
}

.po-sitemap-sheet-head {
  font-size: 15px;
  color: #163b25;
  margin-bottom: 4px;
}

.po-sitemap-sheet-head span {
  font-weight: 400;
  color: #4a5a50;
}

.po-sitemap-rate {
  display: flex;
  gap: 8px;
  margin: 6px 0 8px;
}

.po-rate {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid #b7c3bb;
  border-radius: 999px;
  background: #fff;
  color: #163b25;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.po-rate.on[data-rate="up"] {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}

.po-rate.on[data-rate="down"] {
  background: #55606b;
  border-color: #55606b;
  color: #fff;
}

.po-sitemap-note,
.po-sitemap-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #b7c3bb;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.po-sitemap-note {
  resize: vertical;
}

.po-sitemap-actions {
  display: flex;
  gap: 8px;
}

.po-sitemap-done,
.po-sitemap-remove {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid #1f6f3f;
  border-radius: 999px;
  background: #1f6f3f;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.po-sitemap-remove {
  background: #fff;
  color: #8a2a2a;
  border-color: #c9a3a3;
}

/* Photos (2026-10-02): a camera mark on a pin with pictures, the strip
   of thumbnails on the sheet, the queue line, the full-size viewer. */
.po-site-pin.po-site-photo::before,
.po-own-pin.po-site-photo::before {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #3b6fb6;
  box-shadow: inset 0 0 0 2px #3b6fb6;
}

.po-sitemap-queue {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff4d6;
  color: #6b4b00;
  font-size: 12px;
}

.po-photos {
  margin: 0 0 8px;
}

.po-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.po-photo-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #b7c3bb;
  border-radius: 8px;
  overflow: hidden;
  background: #e6ebe7;
  cursor: pointer;
}

.po-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.po-photo-waiting {
  align-self: center;
  font-size: 12px;
  color: #6b4b00;
}

.po-photo-add {
  display: inline-block;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #1f6f3f;
  border-radius: 999px;
  background: #fff;
  color: #1f6f3f;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.po-photo-signin {
  font-size: 12px;
  color: #4a5a50;
}

.po-photo-view {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.86);
}

/* The box scrolls when the picture and the share block together are
   taller than the phone; the × and the arrows stay put. */
.po-photo-view-box {
  width: min(96vw, 1100px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 44px 0 8px;
}

.po-photo-view-box img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
  align-self: center;
  -webkit-user-drag: none;
  user-select: none;
}

/* A sideways swipe is ours (previous / next); up and down still scroll. */
.po-photo-view {
  touch-action: pan-y;
}

.po-photo-view-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 16px;
  cursor: pointer;
}

.po-photo-view-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 56px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  font-size: 34px;
  line-height: 56px;
  cursor: pointer;
}

.po-photo-view-prev { left: 6px; }
.po-photo-view-next { right: 6px; }

.po-photo-view-count {
  margin: 0;
  text-align: center;
  color: #cfd8d2;
  font-size: 12px;
}

.po-photo-view-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Sharing (round two): the switch in the viewer, the status badge on a
   thumbnail, everyone's strip with its captions. */
.po-photo-share {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #163b25;
  font-size: 13px;
}

.po-photo-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.po-photo-share-row input {
  width: 20px;
  height: 20px;
}

.po-photo-share-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}

.po-photo-share-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #b7c3bb;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

.po-photo-share-status {
  margin: 4px 0;
  font-weight: 600;
  color: #1f6f3f;
}

.po-photo-share-rights {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #4a5a50;
}

.po-photo-thumb {
  position: relative;
}

.po-photo-thumb[class*="po-photo-share-"]::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #d98c1f;
}

.po-photo-thumb.po-photo-share-public::after {
  background: #1f9d55;
}

.po-photo-thumb.po-photo-share-declined::after,
.po-photo-thumb.po-photo-share-reported::after {
  background: #8d9399;
}

.po-photo-public {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d9dfda;
}

.po-photo-public-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b7a66;
}

.po-photo-thumb-public {
  width: 92px;
  height: 84px;
  display: flex;
  flex-direction: column;
}

.po-photo-thumb-public img {
  height: 64px;
}

.po-photo-by {
  display: block;
  font-size: 10px;
  line-height: 20px;
  color: #4a5a50;
  background: #f4f7f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.po-photo-view-caption {
  margin: 0;
  text-align: center;
  color: #e6ebe7;
  font-size: 13px;
}

/* Clips (round three): the play mark on a thumbnail, the two Add
   buttons side by side, the player in the viewer. */
.po-photo-thumb.po-photo-clip::before {
  content: "\25B6";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  pointer-events: none;
}

.po-photo-thumb-public.po-photo-clip::before {
  top: 32px;
}

.po-photo-adds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.po-photo-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #4a5a50;
}

.po-photo-view-box video {
  max-width: 100%;
  max-height: 62vh;
  border-radius: 8px;
  background: #000;
  align-self: center;
}