/* ============================================================
   diazordonez.com — base styles
   Plain CSS, no framework, no build step.
   Edit the tokens in :root to restyle the whole site at once.
   ============================================================ */

:root {
  /* Color */
  --bg:           #ffffff;
  --bg-alt:       #f6f5f2;
  --text:         #1c1b19;
  --text-muted:   #5e5b56;
  --accent:       #8a5a34;
  --accent-text:  #ffffff;
  --border:       #e3e0da;
  --danger:       #b3261e;

  /* Type */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-head: ui-serif, Georgia, "Times New Roman", serif;

  /* Layout */
  --wrap:    68rem;
  --narrow:  42rem;
  --radius:  10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14130f;
    --bg-alt:      #1c1a16;
    --text:        #f0ede7;
    --text-muted:  #a8a29a;
    --accent:      #d29a63;
    --accent-text: #14130f;
    --border:      #302d27;
    --danger:      #f2887f;
  }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Anything marked hidden stays hidden, even if a class gives it a display */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap.narrow { max-width: var(--narrow); }

.section { padding-block: clamp(3rem, 8vw, 6rem); }

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

/* Brand hard left, Log in hard right, links (when added) centered between them */
.header-inner > .nav {
  margin-inline: auto;
}

/* An empty nav shouldn't eat layout space */
.nav:empty { display: none; }

.brand {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}

.nav { display: flex; gap: 1.75rem; }

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.nav a:hover { color: var(--text); }

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  margin-inline: auto;
  background: var(--text);
}

@media (max-width: 40rem) {
  .nav-toggle { display: flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .nav.is-open { display: flex; }

  .nav a { padding-block: 0.7rem; font-size: 1.05rem; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(4rem, 12vw, 8rem); }

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 { max-width: 18ch; }

.lede {
  max-width: 52ch;
  font-size: 1.15rem;
  color: var(--text-muted);
}

/* ---------- Buttons ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.btn--primary:hover {
  filter: brightness(1.08);
  color: var(--accent-text);
}

/* Compact variant — used by the header buttons */
.btn--sm {
  padding: 0.45rem 1.05rem;
  font-size: 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* Marks the button for the page you're already on */
.btn.is-current {
  border-color: var(--accent);
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shorten header button labels on small screens */
.sm-only { display: none; }

@media (max-width: 34rem) {
  .lg-only { display: none; }
  .sm-only { display: inline; }
  .btn--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
  .brand { font-size: 1rem; }
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.tab:hover { color: var(--text); }

.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.section--panel { padding-block: 2.5rem clamp(3rem, 8vw, 5rem); }

/* ---------- Review cards ---------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
}

.review {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.review__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.review__name {
  margin: 0;
  font-size: 1.15rem;
}

.rating {
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.review__meta {
  margin: 0.4rem 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.review__body { margin-bottom: 1rem; }

.review__by {
  margin: auto 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.card {
  padding: 1.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card p { margin-bottom: 0; color: var(--text-muted); }

/* ---------- Our Map (/map) ---------- */

/* The map page fills the screen under the header, like an app */
.page-map {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.map-app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 22rem 1fr;
}

.map-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.map-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 0.75rem;
  padding: 1.25rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.map-panel__title { margin: 0; font-size: 1.6rem; }

.map-panel__count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.map-search {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.map-search:focus { outline: none; border-color: var(--accent); }

/* One scrollable row of filters, like Mapstr */
.chips {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chips[hidden] { display: none; }

/* Second row: the # labels — smaller and quieter than the main filters */
.chips--labels { margin-top: 0.45rem; }

.chips--labels .chip {
  padding: 0.2rem 0.65rem;
  background: var(--bg-alt);
  font-size: 0.8rem;
}

.chip {
  padding: 0.3rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

/* Hover only where there's a mouse; on iPhones it sticks after a tap */
@media (hover: hover) {
  .chip:hover { border-color: var(--accent); color: var(--text); }
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.place-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  overflow-y: auto;
}

.place {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .place:hover { background: var(--bg-alt); }
}

.place.is-selected {
  background: color-mix(in srgb, var(--pin) 16%, var(--bg));
}

.place__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--pin);
  border: 2px solid var(--pin);
  border-radius: 50%;
  font-size: 1.1rem;
}

/* "Want to go" places are hollow until we've been */
.place--want .place__badge {
  background: var(--bg);
  border-style: dashed;
}

.place__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.place__name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place__meta { color: var(--text-muted); font-size: 0.83rem; }

.place__rating { flex: none; font-size: 0.8rem; }

/* Stars that can be partly filled (4.5 = four and a half) */
.stars {
  position: relative;
  display: inline-block;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.stars::before { content: "☆☆☆☆☆"; }

.stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fill);
  overflow: hidden;
}

.place-list__empty {
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.map-canvas {
  min-height: 0;
  background: var(--bg-alt);
  isolation: isolate; /* keeps Leaflet's layers under the header */
}

/* Dark mode: turn the light map tiles into a dim, dark map */
@media (prefers-color-scheme: dark) {
  .map-canvas .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.85) saturate(0.6);
  }
}

/* Map/List switch — phones only */
.view-toggle { display: none; }

/* Pins: a teardrop in the category color with its emoji inside */
.pin-wrap { background: none; border: 0; }

.pin {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--pin);
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.pin-wrap:hover .pin { transform: rotate(-45deg) scale(1.12); }

.pin--want {
  background: #ffffff;
  border: 3px solid var(--pin);
}

/* Bubbles: nearby pins grouped together, showing how many */
.bubble-wrap { background: none; border: 0; }

.bubble {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--pin);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pin) 35%, transparent),
              0 2px 8px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.bubble-wrap:hover .bubble { transform: scale(1.1); }

.pin__emoji {
  font-size: 17px;
  line-height: 1;
  transform: rotate(45deg);
}

/* Leaflet, restyled to match the site */
.leaflet-container { font-family: var(--font-body); }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--bg);
  color: var(--text);
}

.leaflet-popup-content-wrapper { border-radius: var(--radius); }

.leaflet-popup-content {
  max-height: var(--popup-max, none);
  margin: 1rem 1.1rem;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); }

.popup p { margin: 0 0 0.45rem; }

.popup__cat {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.popup__name { margin: 0; font-size: 1.25rem; }

.popup .popup__city { color: var(--text-muted); font-size: 0.85rem; }

.popup .popup__rating {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem 0 0.55rem;
  font-size: 1.05rem;
}

.popup__score { color: var(--text-muted); font-size: 0.85rem; }

.popup .popup__note { white-space: pre-line; }

/* Photos: a swipeable row at the top of the popup */
.popup__gallery {
  position: relative;
  margin: -0.2rem 0 0.75rem;
}

.popup__photos {
  display: flex;
  gap: 0.4rem;
  height: 150px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 8px;
}

.popup__photos::-webkit-scrollbar { display: none; }

.popup__photo {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.popup__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-alt);
}

.popup__photo-count {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.55rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.75rem;
  pointer-events: none;
}

.tag {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.popup .popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.popup .btn { color: var(--text); }
.popup .btn:hover { color: var(--accent); }
.popup .btn--primary,
.popup .btn--primary:hover { color: var(--accent-text); }

.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--bg);
  border-bottom-color: var(--border);
  color: var(--text);
}

.leaflet-bar a:hover { background: var(--bg-alt); }

.locate-btn { font-size: 1.15rem; }

.leaflet-container .leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text-muted);
}

.leaflet-control-attribution a { color: var(--text-muted); }

@media (max-width: 48rem) {
  /* Phones: search + filters on top, then either the map or the list */
  .map-app { display: flex; flex-direction: column; }

  .map-panel { flex: none; border-right: 0; }

  .map-panel__head { padding: 0.85rem 1rem 0.7rem; }
  .map-panel__title { font-size: 1.3rem; }
  .map-search { margin-top: 0.6rem; }

  .chips { margin-top: 0.6rem; }

  .map-app[data-view="map"] .place-list { display: none; }
  .map-app[data-view="map"] .map-canvas { flex: 1; }

  .map-app[data-view="list"] .map-panel { flex: 1; min-height: 0; }
  .map-app[data-view="list"] .place-list { padding-bottom: 5rem; }
  .map-app[data-view="list"] .map-canvas { display: none; }

  .view-toggle {
    display: block;
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 1000;
    padding: 0.7rem 1.4rem;
    background: var(--text);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    color: var(--bg);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: pre;
    transform: translateX(-50%);
    cursor: pointer;
  }

  /* Out of the way while a place's card is open */
  .map-app.has-popup .view-toggle { display: none; }
}

/* ---------- Our Map: exploring nearby places ---------- */

/* Other places: small round dots, quieter than our own pins */
.dot-wrap { background: none; border: 0; }

.dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  line-height: 1;
  opacity: 0.92;
}

/* A place picked from "Search the map" */
.dot--found {
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent);
  font-size: 17px;
  opacity: 1;
}

.map-hint {
  padding: 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.map-app.has-popup .map-hint { display: none; } /* out of the card's way */

.popup .popup__hours {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.popup .popup__links { display: flex; gap: 1rem; font-size: 0.9rem; }

.leaflet-container .popup__links a { color: var(--accent); }

.place-list__more { padding: 0.75rem 0.5rem 0.25rem; }

.place-list__found { margin: 0.25rem -0.5rem 0; padding: 0; list-style: none; }

.place__badge--found {
  background: var(--bg-alt);
  border-color: var(--border);
}

/* ---------- Our Map: edit mode ---------- */

.editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.editor-bar__who { flex: 1; margin: 0; font-size: 0.85rem; font-weight: 600; }

.editor-bar__link { font-size: 0.85rem; }

.editor-bar__notice {
  width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.editor-bar__notice:empty { display: none; }
.editor-bar__notice.is-error { color: var(--danger); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }

/* While the form is open it takes over the panel */
.map-panel.is-editing .map-panel__head,
.map-panel.is-editing .place-list { display: none; }

.place-editor {
  position: relative; /* keeps the hidden photo picker inside the form */
  flex: 1;
  min-height: 0;
  padding: 1.1rem 1.25rem 2rem;
  overflow-y: auto;
}

.place-editor.is-busy { cursor: progress; }

.place-editor__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.place-editor__title { margin: 0; font-size: 1.5rem; }

.field { margin-top: 1.1rem; }

.field__label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.field__hint {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px+ stops phones zooming in on tap */
}

.input:focus { outline: none; border-color: var(--accent); }

textarea.input { resize: vertical; line-height: 1.5; }

.choice-row,
.label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.label-row--suggest { margin-top: 0.4rem; }

.chip--on,
.chip--on:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.where__search,
.label-add {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.label-add { margin-top: 0.6rem; }

.where__results {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.where__result {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.where__result:hover { background: var(--bg-alt); }

.where__result-name { font-weight: 600; }

.where__result-addr { color: var(--text-muted); font-size: 0.8rem; }

.where__empty {
  padding: 0.5rem 0.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.where__tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

.where__see { display: none; } /* phones only */

.where__spot {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--bg-alt);
  border-radius: 8px;
  font-size: 0.9rem;
}

.where__spot.is-empty { color: var(--text-muted); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.photo-grid[hidden] { display: none; }

.photo-thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.photo-thumb.is-new img { outline: 2px dashed var(--accent); outline-offset: -2px; }

.photo-thumb__remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.65);
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
}

.photo-add { cursor: pointer; }

.place-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.place-editor__actions .btn--danger { margin-left: auto; }

.place-editor__status { margin: 0.75rem 0 0; font-size: 0.9rem; }
.place-editor__status:empty { display: none; }
.place-editor__status.is-error { color: var(--danger); }

/* The pin being placed or moved */
.leaflet-marker-draggable .pin { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 40%, transparent), 0 3px 10px rgba(0, 0, 0, 0.4); }

/* While editing, tapping the map drops the pin */
.map-app.is-editing .map-canvas .leaflet-container { cursor: crosshair; }

@media (max-width: 48rem) {
  .map-app[data-view="map"] .place-editor { display: none; }
  .where__see { display: inline-block; }
}

/* ---------- Log in (GitHub key) ---------- */

.signin {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.signin ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.signin li { margin-bottom: 0.4rem; }

.signin__status { margin: 0.9rem 0 0; }
.signin__status:empty { display: none; }
.signin__status.is-error { color: var(--danger); }

/* ---------- Misc ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-line { margin-top: 1.5rem; }

.fine { font-size: 0.875rem; color: var(--text-muted); }

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.footer-inner p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}