* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #2b2620;
}

.layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.panel {
  background: #faf7f2;
  padding: 24px 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.panel-left {
  width: 400px;
  border-right: 1px solid #ddd4c4;
  display: flex;
  flex-direction: column;
}

.panel-cta {
  font-weight: 600;
  color: #7a5c3e !important;
}

.panel-left h1 {
  font-size: 1.3rem;
  margin: 12px 0 16px;
  line-height: 1.3;
}

.panel-left p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #4a4238;
}

.panel-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #ddd4c4;
}

.panel-footer p {
  font-size: 0.85rem;
  color: #7a7062;
}

.org-credit {
  margin-top: 2px;
  font-size: 0.85rem;
}

.org-credit a {
  color: #7a5c3e;
  text-decoration: underline;
}

.admin-link {
  margin-top: 6px;
}

.admin-link a {
  font-size: 0.72rem;
  color: #b0a690;
  text-decoration: underline;
}

.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-btn {
  border: 1px solid #ccc0a8;
  background: #fff;
  padding: 5px 10px;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  color: #4a4238;
}

.lang-btn.active {
  background: #7a5c3e;
  border-color: #7a5c3e;
  color: #fff;
}

.map-wrap {
  flex: 1;
  position: relative;
}

#map {
  height: 100%;
  width: 100%;
}

.panel-right {
  width: 400px;
  border-left: 1px solid #ddd4c4;
  position: relative;
  transform: translateX(0);
  transition: none;
}

.panel-right.empty #closeDetail {
  display: none;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #7a7062;
}

#selectPointHint {
  font-size: 0.9rem;
  color: #8a8072;
  margin-top: 40px;
  text-align: center;
}

.detail-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 8px 0 4px;
  padding-right: 24px;
}

.detail-meta {
  font-size: 0.85rem;
  color: #6a6152;
  margin: 2px 0;
}

.detail-meta strong {
  color: #2b2620;
}

.detail-location-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.detail-location-link:hover {
  color: #2b2620;
}

.detail-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 14px 0;
  color: #3a342c;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}

.photo-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd4c4;
}

.no-photos {
  font-size: 0.85rem;
  color: #8a8072;
  font-style: italic;
}

.loading {
  font-size: 0.9rem;
  color: #8a8072;
  margin-top: 40px;
  text-align: center;
}

/* --- research heading + intro image --- */

.research-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.25;
}

.panel-left h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px;
  color: #4a4238;
}

.intro-image-wrap {
  margin: 10px 0 16px;
}

.intro-image-wrap img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ddd4c4;
  cursor: zoom-in;
  display: block;
}

.intro-image-caption {
  font-size: 0.75rem;
  color: #8a8072;
  margin-top: 4px;
  line-height: 1.4;
}

.intro-image-caption a {
  color: #7a5c3e;
}

/* --- photos are zoomable --- */

.photo-grid img {
  cursor: zoom-in;
}

/* --- add point button + hint banner --- */

.add-btn {
  width: 100%;
  border: 1px solid #7a5c3e;
  background: #7a5c3e;
  color: #fff;
  padding: 9px 10px;
  font-size: 0.88rem;
  border-radius: 4px;
  cursor: pointer;
  margin: 14px 0 4px;
}

.add-btn:hover {
  background: #664c34;
}

#map.placing {
  cursor: crosshair;
}

.hint-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2b2620;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* --- add point modal --- */

/* The add/edit panel is docked to the left edge, matching the width of
   .panel-left, so the map (and the pending/selected marker on it) stays
   visible to the right at all times - no dark backdrop over the map. */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 100vh;
  background: #faf7f2;
  box-shadow: 2px 0 14px rgba(0,0,0,.18);
  z-index: 1600;
  overflow-y: auto;
}

/* [hidden] must win over the .modal-overlay/.lightbox-overlay display rules
   above - without this, both stay visible even while the `hidden` attribute
   is set, because an author-stylesheet class selector always beats the
   browser's default [hidden] rule. */
.modal-overlay[hidden],
.lightbox-overlay[hidden] {
  display: none;
}

.modal-box {
  background: transparent;
  border-radius: 0;
  padding: 20px;
  width: 100%;
  max-width: none;
  min-height: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

.modal-box h2 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  padding-right: 20px;
}

.modal-box label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 12px 0 4px;
  color: #4a4238;
}

.modal-box input[type="text"],
.modal-box input[type="email"],
.modal-box input[type="number"],
.modal-box input[type="file"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.modal-actions button {
  padding: 8px 16px;
  font-size: 0.86rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ccc0a8;
  background: #fff;
}

.modal-actions button[type="submit"] {
  background: #7a5c3e;
  border-color: #7a5c3e;
  color: #fff;
}

.modal-note {
  font-size: 0.78rem;
  color: #8a8072;
  margin-top: 14px;
  line-height: 1.4;
}

/* --- lightbox --- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2000;
  cursor: zoom-out;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox-caption {
  color: #f0ece2;
  font-size: 0.85rem;
  margin-top: 12px;
  text-align: center;
  max-width: 80vw;
}

.lightbox-caption a {
  color: #f0ece2;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #f0ece2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-close {
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  font-size: 1.6rem;
}

.lightbox-nav {
  top: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.8rem;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 12px;
}

.lightbox-next {
  right: 12px;
}

@media (max-width: 768px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}

/* --- right panel: points list + year filter --- */

.panel-right {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#pointsListView {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Same bug pattern as the modal/lightbox overlay earlier: an ID selector
   with display:flex beats the browser's default [hidden] rule, so without
   this override the points list stays visible even while its `hidden`
   attribute is set - which is exactly why list and detail looked jumbled
   together instead of being two separate screens. */
#pointsListView[hidden],
#pointDetailView[hidden] {
  display: none;
}

#pointsListView h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  padding: 20px 20px 4px;
}

.recent-photos {
  padding: 4px 20px 14px;
  border-bottom: 1px solid #ddd4c4;
  flex-shrink: 0;
}

.recent-photos h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6a6152;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.recent-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.recent-photos-grid img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd4c4;
  cursor: pointer;
}

.year-filter {
  padding: 10px 20px 14px;
  border-bottom: 1px solid #ddd4c4;
  flex-shrink: 0;
}

.year-filter-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.year-filter-inputs label {
  color: #6a6152;
}

.year-filter-inputs input[type="number"] {
  width: 72px;
  padding: 5px 6px;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}

.range-reset {
  background: none;
  border: none;
  color: #7a5c3e;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.range-slider {
  position: relative;
  height: 26px;
  margin-top: 10px;
}

.range-slider-track {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 4px;
  background: #ddd4c4;
  border-radius: 2px;
}

.range-slider-fill {
  position: absolute;
  top: 11px;
  height: 4px;
  background: #7a5c3e;
  border-radius: 2px;
}

.range-input {
  position: absolute;
  width: 100%;
  top: 8px;
  left: 0;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #7a5c3e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #7a5c3e;
  cursor: pointer;
  margin-top: -6px;
}

.range-input::-moz-range-track {
  height: 4px;
  background: transparent;
}

.range-input::-moz-range-thumb {
  pointer-events: all;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #7a5c3e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #7a5c3e;
  cursor: pointer;
}

.range-input-max {
  z-index: 2;
}

.points-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.points-list li {
  padding: 10px 20px;
  border-bottom: 1px solid #eee6d8;
  cursor: pointer;
}

.points-list li:hover {
  background: #f0e9dc;
}

.points-list .list-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2b2620;
}

.points-list .list-item-meta {
  font-size: 0.78rem;
  color: #7a7062;
  margin-top: 2px;
}

.list-empty {
  font-size: 0.85rem;
  color: #8a8072;
  font-style: italic;
  padding: 14px 20px;
}

#pointDetailView {
  position: relative;
  padding: 24px 20px;
  overflow-y: auto;
  height: 100%;
  border-top: 3px solid #ddd4c4;
}

/* --- dating: exact year vs century --- */

.dating-toggle {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 400;
  color: #4a4238;
}

.dating-toggle label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  margin: 0;
}

.modal-box select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
  background: #fff;
}

/* the three dating modes (year / range / century) share the same field
   below the toggle - give the number input and the select an identical
   explicit height, since browsers render a native <select> with a
   slightly different intrinsic height than <input> even with matching
   padding/border/font-size. */
.modal-box input[type="number"],
.modal-box select {
  height: 34px;
  line-height: 1.2;
}

.modal-box textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

.field-hint {
  font-size: 0.75rem;
  color: #8a8072;
  margin: 3px 0 0;
}

.field-hint.field-success {
  color: #4a7a4a;
}

.field-hint.field-error-text {
  color: #b3402a;
}

.lang-tabs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.lang-tab-btn {
  flex: 1;
  border: 1px solid #ccc0a8;
  background: #fff;
  color: #4a4238;
  padding: 6px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.lang-tab-btn.active {
  background: #7a5c3e;
  border-color: #7a5c3e;
  color: #fff;
}

.lang-tab-panel {
  border: 1px solid #eee6d8;
  border-radius: 4px;
  padding: 4px 10px 10px;
  margin-top: 8px;
}

.location-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.location-edit-row input[type="text"] {
  flex: 1;
}

.location-edit-row button {
  flex-shrink: 0;
  border: 1px solid #ccc0a8;
  background: #fff;
  color: #4a4238;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}

.location-edit-row button:hover {
  background: #f0e9dc;
}

.location-suggestions {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.location-suggestions[hidden] {
  display: none;
}

.location-suggestions li {
  padding: 7px 9px;
  font-size: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid #eee6d8;
}

.location-suggestions li:last-child {
  border-bottom: none;
}

.location-suggestions li:hover {
  background: #f0e9dc;
}

.dating-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* no margin-top here - the plain year input and the century select that
     replace this row in the other two dating modes don't have one either
     (they rely on the label's own bottom margin), so this row would
     otherwise sit slightly lower/more indented than the other two modes. */
}

/* [hidden] must win over the display:flex rule above - same class-vs-
   attribute specificity issue fixed elsewhere for #pointsListView etc. */
.dating-range-row[hidden] {
  display: none;
}

.dating-range-row input[type="number"] {
  flex: 1;
  width: auto;
}

.dating-range-sep {
  color: #6a6152;
  font-size: 0.9rem;
}

.photo-dropzone {
  margin-top: 4px;
  padding: 10px;
  border: 2px dashed #ccc0a8;
  border-radius: 6px;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}

.photo-dropzone.drag-over {
  border-color: #7a5c3e;
  background: #f5efe2;
}

.photo-dropzone input[type="file"] {
  width: 100%;
}

.photo-dropzone-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #8a8172;
  pointer-events: none;
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
  margin-top: 8px;
}

/* [hidden] must win over the display:grid rule above - same class-vs-
   attribute specificity issue as .dating-range-row/.lightbox-overlay. */
.photo-preview-grid[hidden] {
  display: none;
}

.photo-preview-item {
  position: relative;
}

.photo-preview-item img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd4c4;
}

.photo-preview-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #d99a86;
  border-radius: 50%;
  background: #fff;
  color: #a5432c;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview-remove:hover {
  background: #a5432c;
  color: #fff;
}

.photo-preview-item[draggable="true"] {
  cursor: grab;
}

.photo-preview-item.dragging {
  opacity: 0.4;
}

.photo-preview-item.drag-over {
  outline: 2px dashed #7a5c3e;
  outline-offset: 2px;
}

/* --- marker group picker (multiple points at the same map location) --- */

.marker-group-popup {
  min-width: 160px;
  max-width: 240px;
}

.marker-group-item {
  padding: 6px 4px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #eee6d8;
  color: #2b2620;
}

.marker-group-item:last-child {
  border-bottom: none;
}

.marker-group-item:hover {
  background: #f0e9dc;
}

.marker-group-municipality {
  color: #8a8072;
  font-size: 0.8em;
}

/* Red teardrop pin (pure CSS) marking the geocoded "original location"
   while adding/editing a point - see originalLocationPinIcon in app.js. */
.original-location-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: #a5432c;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: rotate(-45deg);
}

/* The "focused point" highlight now uses a red version of the standard
   Leaflet marker-icon.png (see highlightPinIcon in app.js) instead of a
   custom CSS pin, so no dedicated highlight styling is needed here. */

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 400 !important;
  font-size: 0.82rem;
  margin: 8px 0 0 !important;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
}

/* --- captcha --- */

.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.captcha-row span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a4238;
  white-space: nowrap;
}

.captcha-row input[type="number"] {
  width: 70px;
  padding: 7px 8px;
  border: 1px solid #ccc0a8;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
}

.field-error {
  font-size: 0.78rem;
  color: #b3402a;
  margin: 4px 0 0;
}

/* --- map search --- */

.map-search {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 260px;
  max-width: calc(100% - 24px);
}

.map-search-inner {
  display: flex;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  border-radius: 4px;
  overflow: hidden;
}

.map-search input[type="text"] {
  flex: 1;
  border: none;
  padding: 9px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.map-search button {
  border: none;
  background: #7a5c3e;
  color: #fff;
  padding: 0 14px;
  cursor: pointer;
  font-size: 0.9rem;
}

.map-search-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  max-height: 220px;
  overflow-y: auto;
}

.map-search-results li {
  padding: 8px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px solid #eee6d8;
}

.map-search-results li:last-child {
  border-bottom: none;
}

.map-search-results li:hover {
  background: #f0e9dc;
}

/* --- language tag badge on user-submitted descriptions --- */

.lang-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #7a5c3e;
  border: 1px solid #ccb894;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}

/* --- edit / delete own point --- */

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ddd4c4;
}

.detail-actions button {
  padding: 7px 14px;
  font-size: 0.82rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ccc0a8;
  background: #fff;
  color: #4a4238;
}

.detail-actions .btn-delete {
  border-color: #d99a86;
  color: #a5432c;
}

.admin-edit-link {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed #ddd4c4;
  font-size: 0.72rem;
}

.admin-edit-link a {
  color: #9a9184;
}

/* --- responsive / mobile layout --- */

.panel-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hamburger-btn {
  display: none;
  border: 1px solid #ccc0a8;
  background: #fff;
  color: #4a4238;
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.mobile-add-btn {
  display: none;
  border: 1px solid #7a5c3e;
  background: #7a5c3e;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    height: 100vh;
    width: 100vw;
  }

  .panel-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd4c4;
    flex-shrink: 0;
    max-height: 60vh;
  }

  /* collapsed panel shrinks to just its header, so the max-height cap from
     above should not hold back the map from filling the rest of the screen */
  .panel-left.collapsed {
    max-height: none;
  }

  .hamburger-btn {
    display: inline-block;
  }

  /* collapsed: header (lang switch + hamburger + add-point button) stays,
     body hides so the map below gets almost the whole screen */
  .panel-left.collapsed .panel-left-body {
    display: none;
  }

  .panel-left:not(.collapsed) .panel-left-body {
    display: block;
  }

  /* the add-point shortcut only makes sense once the panel is collapsed and
     the map is the thing in view */
  .panel-left.collapsed .mobile-add-btn {
    display: inline-block;
  }

  .map-wrap {
    flex: 1;
    min-height: 0;
  }

  .panel-right {
    width: 100%;
    border-left: none;
    display: none;
  }

  /* right panel becomes a fullscreen overlay only once a point is opened */
  .panel-right.mobile-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1500;
    height: 100vh;
    width: 100vw;
  }

  /* add/edit panel overlays just the left-panel area on mobile, so the map
     underneath stays visible with the pending marker on it */
  .modal-overlay {
    width: 100%;
    height: 60vh;
    top: 0;
    left: 0;
    border-bottom: 1px solid #ddd4c4;
  }
}