/*
 * Totemia GIS — the place panel (gis-place-panel.js, gis-place-sheet.js).
 *
 * The familiar map layout — search top left, the selected place in a column
 * beneath it, the map whole beside it — on Totemia's flat surfaces: 2px rules,
 * portal tokens, no glass and no depth shadows (AGENTS.md Rule 1.6).
 */

:root {
  --gis-place-width: 408px;
  /* The band between sections has to read as a break against white paper;
     the ivory used for fills is too close to white to do that job. */
  --gis-place-band: #e6e9ec;
  --gis-place-search-top: 12px;
  /* Search field (48) + its top gap + breathing room before the content. */
  --gis-place-head-room: 76px;
}

.gis-place {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--gis-place-width);
  max-width: 100%;
  /* The shell spans the column so its children can be placed in it, but the
     empty parts must not swallow clicks meant for the map. */
  pointer-events: none;
  font-family: var(--gis-font);
  color: var(--gis-ink);
}

/* The panel, the Layers control, and the photo viewer are controls, not a
   document: a drag across them must not paint a text selection, a press-and-
   hold on a phone must not open the copy callout, and a photo must not lift
   off as a draggable image. Copying has its own buttons (Coordinates, Share).
   Fields people type into stay selectable. */
.gis-place,
.gis-layers,
.gis-photo-viewer {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.gis-place img,
.gis-photo-viewer img {
  -webkit-user-drag: none;
}
.gis-place input,
.gis-place textarea,
.gis-place [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

.gis-place > * {
  pointer-events: auto;
}

.gis-place-searchhost {
  position: absolute;
  top: var(--gis-place-search-top);
  left: 16px;
  right: 16px;
  z-index: 3;
}

/* ── The column ─────────────────────────────────────────────────────────── */

.gis-place-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--gis-place-head-room);
  box-sizing: border-box;
  background: var(--gis-paper);
  border-right: 2px solid var(--gis-line);
  /* Slides from the edge it lives on and leaves the same way, so the motion
     says where it belongs. visibility waits for the slide to finish before
     hiding, so the exit is seen and the closed panel is out of tab order. */
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--duration) var(--ease-drawer),
    visibility 0s linear var(--duration);
}

.gis-place.has-place .gis-place-panel {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--duration) var(--ease-drawer),
    visibility 0s;
}

.gis-place.has-place.is-collapsed .gis-place-panel {
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--duration) var(--ease-drawer),
    visibility 0s linear var(--duration);
}

.gis-place-grabber {
  display: none;
}

.gis-place-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Edge tab: hide the column, keep the place. */
.gis-place-tab {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 2px solid var(--gis-line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--gis-paper);
  color: var(--gis-ink);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-drawer);
}

.gis-place.has-place .gis-place-tab {
  display: flex;
}

.gis-place.has-place.is-collapsed .gis-place-tab {
  transform: translateX(calc(-1 * var(--gis-place-width)));
}

.gis-place-tab:active {
  background: var(--gis-ivory);
}

/* ── Content ────────────────────────────────────────────────────────────── */

.gis-place-hero {
  position: relative;
  height: 236px;
  background: var(--gis-ivory);
  border-bottom: 1px solid var(--gis-line);
}

.gis-place-hero-track {
  display: flex;
  gap: 2px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gis-place-hero-track::-webkit-scrollbar {
  display: none;
}

/* The next image peeks in, so a reader can see there is more than one
   without a counter or arrows. A lone image takes the full width. */
.gis-place-slide {
  position: relative;
  flex: 0 0 86%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  background: var(--gis-ivory);
}

.gis-place-hero.is-single .gis-place-slide {
  flex-basis: 100%;
}

.gis-place-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flags and arms are drawings with edges that matter; never crop them. */
.gis-place-slide.is-contain img {
  box-sizing: border-box;
  padding: 18px;
  object-fit: contain;
}

.gis-place-slide figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px;
  background: rgba(20, 23, 26, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.gis-place-slide.is-openable {
  cursor: zoom-in;
}

/* Arrows for a pointer; touch swipes the track natively. */
.gis-place-hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--gis-ink);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.gis-place-hero-arrow.is-prev { left: 10px; }
.gis-place-hero-arrow.is-next { right: 10px; }

.gis-place-hero-arrow:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .gis-place-hero.has-many .gis-place-hero-arrow {
    display: flex;
  }
}

/* "See photos" — sits on the images it opens. */
.gis-place-hero-action {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(20, 23, 26, 0.8);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.gis-place-hero-action:active {
  transform: scale(0.97);
}

.gis-place-hero.is-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gis-place-hero-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.gis-place-hero.is-fallback svg {
  display: block;
  width: 72%;
  height: 80%;
}

.gis-place-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 8px;
}

.gis-place-seal {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.gis-place-headtext {
  min-width: 0;
}

.gis-place-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gis-ink);
  overflow-wrap: anywhere;
}

.gis-place-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gis-muted);
}

/* Round labelled actions under the name. */
.gis-place-actions {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 16px 14px 20px;
  border-bottom: 1px solid var(--gis-line);
}

.gis-place-action {
  display: flex;
  flex: 0 1 76px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gis-green);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gis-place-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--gis-line);
  border-radius: 50%;
  background: var(--gis-paper);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.gis-place-action-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .gis-place-action:hover .gis-place-action-icon {
    border-color: var(--gis-green);
    background: var(--gis-ivory);
  }
}

.gis-place-action:active .gis-place-action-icon {
  transform: scale(0.95);
}

.gis-place-action:focus-visible {
  outline: 0;
}

.gis-place-action:focus-visible .gis-place-action-icon {
  border-color: var(--gis-gold);
  box-shadow: 0 0 0 3px rgba(196, 152, 31, 0.28);
}

.gis-place-text {
  margin: 0;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gis-ink);
  border-bottom: 1px solid var(--gis-line);
}

/* Icon-led facts. */
.gis-place-facts {
  padding: 8px 0 10px;
}

.gis-place-facts:empty {
  display: none;
}

.gis-place-fact {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 22px;
  border: 0;
  background: transparent;
  color: var(--gis-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

button.gis-place-fact,
a.gis-place-fact {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  button.gis-place-fact:hover,
  a.gis-place-fact:hover {
    background: var(--gis-ivory);
  }
}

button.gis-place-fact:active,
a.gis-place-fact:active {
  background: var(--gis-ivory);
}

.gis-place-fact-icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--gis-green);
}

.gis-place-fact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gis-place-fact-text {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gis-place-fact-sub {
  font-size: 12px;
  color: var(--gis-muted);
}

.gis-place-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.gis-place-person img,
.gis-place-person .gis-place-person-initial {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.gis-place-person-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gis-ivory);
  color: var(--gis-muted);
  font-size: 11px;
  font-weight: 800;
}

.gis-place-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  font-size: 14px;
}

.gis-place-crumb {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gis-green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .gis-place-crumb:hover {
    text-decoration: underline;
  }
}

.gis-place-crumb-sep {
  color: var(--gis-muted);
}

/* Sections are split by a thick ivory band, not a hairline — at panel width a
   hairline between two long blocks does not read as a break. */
.gis-place-section,
.gis-place-manage {
  padding: 22px 22px 26px;
  border-top: 10px solid var(--gis-place-band);
}

.gis-place-heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gis-ink);
}

/* One chart and its title, on its own tinted block, so consecutive graphs read
   as separate figures instead of one long run of bars. */
.gis-place-figure {
  margin-top: 14px;
  padding: 16px 14px 10px 16px;
  border-radius: 10px;
  background: var(--gis-ivory);
}

.gis-place-figure-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--gis-ink);
}

.gis-place-figure-note {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--gis-muted);
}

.gis-place-muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gis-muted);
}

/* Headline figures as separate tiles: three numbers side by side on plain
   paper ran together into one line of digits. */
.gis-place-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin: 0;
}

.gis-place-stats > div {
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: var(--gis-ivory);
}

.gis-place-stats dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--gis-muted);
}

.gis-place-stats dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: proportional-nums;
  color: var(--gis-ink);
}

/* Rows that open something (divisions). */
.gis-place-rows {
  display: flex;
  flex-direction: column;
  margin: 0 -22px;
}

.gis-place-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 22px;
  border: 0;
  background: transparent;
  color: var(--gis-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gis-place-row:hover {
    background: var(--gis-ivory);
  }
}

.gis-place-row:active {
  background: var(--gis-ivory);
}

.gis-place-row-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--gis-ivory);
}

.gis-place-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gis-place-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.gis-place-row-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gis-place-row-meta {
  font-size: 12px;
  color: var(--gis-muted);
}

.gis-place-row-value {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Horizontal cards (places nearby / inside). */
.gis-place-strip {
  display: flex;
  gap: 12px;
  margin: 0 -22px;
  padding: 0 22px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Snap to the padding, not the scroller's edge, so the first card keeps
     the same inset as the heading above it. */
  scroll-padding-inline: 22px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gis-place-strip::-webkit-scrollbar {
  display: none;
}

.gis-place-card {
  display: flex;
  flex: 0 0 148px;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gis-ink);
  font: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.gis-place-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 100px;
  margin-bottom: 3px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gis-ivory);
  transition: transform var(--duration-fast) var(--ease-out);
}

.gis-place-card:active .gis-place-card-media {
  transform: scale(0.97);
}

.gis-place-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gis-place-card-media.is-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.gis-place-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gis-place-card-meta {
  font-size: 12px;
  color: var(--gis-muted);
}

.gis-place-chart {
  width: 100%;
  margin: 6px 0 0;
}

.gis-place-manage .gis-region-edit {
  margin: 0 8px 8px 0;
}

.gis-place-toast {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gis-ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.gis-place-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Phone: a sheet from the bottom ─────────────────────────────────────── */

@media (max-width: 720px) {
  .gis-place {
    width: 100%;
  }

  .gis-place-searchhost {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  /* gis-place-sheet.js owns the height and position; a transition here would
     fight the spring. Closed, the sheet sits below the bottom edge. */
  .gis-place-panel {
    inset: auto 0 0 0;
    height: calc(100% - var(--gis-place-head-room));
    padding-top: 0;
    border-top: 2px solid var(--gis-line);
    border-right: 0;
    border-radius: 14px 14px 0 0;
    transform: translate3d(0, 110%, 0);
    transition: visibility 0s linear var(--duration);
    touch-action: none;
  }

  .gis-place.has-place .gis-place-panel,
  .gis-place.has-place.is-collapsed .gis-place-panel {
    transition: visibility 0s;
    visibility: visible;
  }

  .gis-place-grabber {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 26px;
    cursor: grab;
  }

  .gis-place-grabber span {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #c7ccd1;
  }

  .gis-place-scroll {
    touch-action: pan-y;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Below full height the content does not scroll: a drag on it moves the
     sheet instead, which is what a half-open sheet is for. */
  .gis-place-scroll.is-locked {
    overflow: hidden;
    touch-action: none;
  }

  .gis-place-tab {
    display: none !important;
  }

  .gis-place-hero {
    height: 180px;
  }

  .gis-place-toast {
    bottom: auto;
    top: calc(var(--gis-place-head-room) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gis-place-panel,
  .gis-place.has-place .gis-place-panel,
  .gis-place.has-place.is-collapsed .gis-place-panel,
  .gis-place-tab,
  .gis-place-toast,
  .gis-place-action-icon,
  .gis-place-card-media {
    transition: none;
  }

  .gis-place-action:active .gis-place-action-icon,
  .gis-place-card:active .gis-place-card-media {
    transform: none;
  }
}

/* The parcel record page embeds a one-parcel map that states its facts beside
   the map, and the parcel drawing page is a drawing surface with the registry
   form beside it: neither gets search or the place panel. */
body.map-viewer-solo .gis-place,
body.map-viewer-parcel-draw .gis-place {
  display: none;
}