/* ==========================================================================
   SKTED — Interactive map (traveler + creator)
   Depends on theme.css for tokens, header chrome, buttons, inputs & badges.
   ========================================================================== */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The map is the canvas here — the grain would sit over live tiles. */
.grain {
  display: none;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Keep MapLibre controls clear of the fixed header */
.maplibregl-ctrl-top-right {
  top: calc(var(--header-h) + 12px);
}

/* --------------------------------------------------------------------------
   Creator profile widget
   -------------------------------------------------------------------------- */

.profile-widget-container {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: var(--gutter);
  z-index: 850;
}

.profile-avatar-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ember);
  border: 1px solid rgba(255, 217, 196, 0.7);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(232, 98, 44, 0.14);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.profile-avatar-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 10px rgba(232, 98, 44, 0.2);
}

/* app.js opens this by setting inline `display: block` — keep the default here
   as `none` and do not rely on a state class. */
.profile-dropdown-menu {
  display: none;
  position: absolute;
  top: 54px;
  left: 0;
  width: 260px;
  padding: 1.2rem;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  animation: reveal-up 0.3s var(--ease-out);
}

.profile-username {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.profile-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0.4rem 0;
}

.stat-label,
.stat-label-bold {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.stat-label-bold {
  color: var(--paper-dim);
}

.stat-value,
.stat-revenue {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.revenue-row {
  margin-top: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline-soft);
}

.stat-revenue {
  font-size: 1.5rem;
  color: var(--ember);
}

.profile-dropdown-menu .logout-btn {
  width: 100%;
  margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Place search

   Sits to the right of the profile avatar, which owns the top-left corner, and
   above the filter dropdown in the stack so its results are never clipped by it.
   -------------------------------------------------------------------------- */

.place-search {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: calc(var(--gutter) + 58px);
  width: min(380px, 46vw);
  z-index: 860;
}

.place-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(6, 8, 11, 0.82);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-md);
  transition: border-color 0.3s var(--ease-out);
}

.place-search-field:focus-within {
  border-color: var(--ember);
}

.place-search-icon {
  display: grid;
  place-items: center;
  color: var(--paper-faint);
  flex-shrink: 0;
}

.place-search-field:focus-within .place-search-icon {
  color: var(--ember);
}

/* Not covered by the global input rules — those skip `type="search"`, and the
   pill here wants a borderless field inside it either way. */
.place-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.72rem 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.92rem;
  appearance: none;
  -webkit-appearance: none;
}

.place-search-input::placeholder {
  color: var(--paper-faint);
}

/* The browser's own clear affordance would sit next to ours. */
.place-search-input::-webkit-search-cancel-button {
  display: none;
}

.place-search-clear {
  flex-shrink: 0;
  padding: 4px;
  background: none;
  border: none;
  color: var(--paper-faint);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.place-search-clear:hover {
  color: var(--ember);
}

/* Hidden by the `hidden` attribute until there is something to show. */
.place-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 56vh;
  overflow-y: auto;
  padding: 0.35rem;
  list-style: none;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  animation: reveal-up 0.24s var(--ease-out);
}

.place-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.6rem 0.65rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 0.18s var(--ease-out);
}

.place-result.is-active {
  background: var(--ink-700);
}

.place-result-icon {
  font-size: 0.95rem;
  line-height: 1.35;
}

.place-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.place-result-name {
  color: var(--paper);
  font-size: 0.9rem;
  line-height: 1.35;
}

.place-result-address {
  color: var(--paper-faint);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-result-credit {
  padding: 0.5rem 0.65rem 0.3rem;
  border-top: 1px solid var(--hairline-soft);
  margin-top: 0.25rem;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.place-search-status {
  margin-top: 8px;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  background: rgba(6, 8, 11, 0.82);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--paper-dim);
  font-size: 0.78rem;
}

/* Where the searched place is, until it becomes a pin or the search is cleared. */
.search-result-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  animation: pulse-ring 2.2s var(--ease-out) infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Category filter dropdown
   -------------------------------------------------------------------------- */

.filter-dropdown-container {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  right: var(--gutter);
  z-index: 850;
}

.filter-toggle-btn {
  padding: 0.66rem 1.05rem;
  border-radius: var(--r-pill);
  background: rgba(6, 8, 11, 0.82);
  border: 1px solid var(--hairline);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.filter-toggle-btn:hover {
  border-color: var(--ember);
  color: var(--ember);
}

/* Same contract as the profile menu: app.js sets inline `display: block`. */
.filter-menu {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  width: 240px;
  max-height: 54vh;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  animation: reveal-up 0.28s var(--ease-out);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r-xs);
  font-size: 0.88rem;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.filter-item:hover {
  background: var(--ink-700);
  color: var(--paper);
}

.category-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--ember);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Map markers
   -------------------------------------------------------------------------- */

.custom-marker-pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--paper);
  border: 1px solid var(--ember);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.custom-marker-pin:hover {
  transform: rotate(-45deg) scale(1.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(232, 98, 44, 0.2);
  z-index: 10;
}

.marker-icon {
  transform: rotate(45deg);
  font-size: 1rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Bottom sheets
   -------------------------------------------------------------------------- */

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
  background: var(--ink-800);
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
}

.bottom-sheet.sheet-open {
  transform: translateY(0);
}

/* An ember rule along the top edge, in place of a grab handle bar. */
.bottom-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ember);
}

.bottom-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 1.4rem;
  /* The sheet scrolls once its form is taller than the screen, and the close
     button lives up here. Sticky keeps it reachable instead of stranding
     someone inside a form they cannot leave. The negative offsets let it span
     the sheet's own padding, so nothing shows through beside it. */
  position: sticky;
  top: calc(-1.5rem - 1px);
  z-index: 2;
  margin-inline: calc(var(--gutter) * -1);
  padding: 1.5rem var(--gutter) 0.9rem;
  background: var(--ink-800);
}

.sheet-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Which real-world address the form is about to pin, when it came from search. */
.pin-location-hint {
  margin: -0.8rem 0 1.2rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  background: var(--ink-700);
  border: 1px solid var(--hairline-soft);
  color: var(--paper-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Traveler sheet */
.traveler-sheet-img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 1.2rem;
  border: 1px solid var(--hairline-soft);
  filter: saturate(0.92);
}

/* Traveler photo gallery — a scroll-snap track, so the swipe is the
   browser's own momentum rather than a JS carousel. */
.traveler-gallery {
  position: relative;
  margin: 0 0 1.2rem;
}

.traveler-gallery-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-sm);
  -webkit-overflow-scrolling: touch;
}

.traveler-gallery-track::-webkit-scrollbar {
  display: none;
}

.traveler-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 240px;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
  filter: saturate(0.92);
  background: var(--ink-700);
}

.traveler-gallery.is-single .traveler-gallery-track {
  gap: 0;
}

.traveler-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.traveler-gallery-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.traveler-gallery-dot.is-active {
  background: var(--ember);
  transform: scale(1.4);
}

/* Creator photo uploader */
.photo-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1.1rem 1rem;
  background: var(--ink-900);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

.photo-dropzone:hover,
.photo-dropzone:focus-visible,
.photo-dropzone-active {
  border-color: var(--ember);
  background: var(--ink-800);
  color: var(--paper);
  outline: none;
}

.photo-dropzone-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* The input covers the whole zone so the entire card is the click target,
   which also gets the native file picker on mobile for free. */
.photo-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.photo-dropzone-icon {
  display: block;
  color: currentColor;
}

.photo-dropzone-label {
  font-size: 0.9rem;
  color: inherit;
}

.photo-dropzone-hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.photo-thumb {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-700);
  cursor: grab;
}

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

.photo-thumb-uploading img {
  opacity: 0.4;
}

.photo-thumb-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.photo-thumb-error {
  border-color: var(--signal-bad);
}

.photo-thumb-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--ember);
  transition: width 0.2s linear;
}

.photo-thumb-failed,
.photo-thumb-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.photo-thumb-failed {
  background: var(--signal-bad);
  color: var(--ink-900);
}

.photo-thumb-cover {
  background: rgba(6, 8, 11, 0.78);
  color: var(--paper-dim);
}

.photo-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(6, 8, 11, 0.8);
  color: var(--paper);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
}

.photo-thumb-remove:hover {
  background: var(--signal-bad);
  color: var(--ink-900);
}

.photo-error {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--signal-bad);
}

.traveler-sheet-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0.6rem 0 0.9rem;
}

.traveler-sheet-desc {
  font-size: 0.98rem;
  color: var(--paper-dim);
  line-height: 1.65;
  max-width: 62ch;
  margin-bottom: 1.5rem;
}

.traveler-sheet-links {
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}

.traveler-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 1rem 1.1rem;
  background: var(--ink-800);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out),
    padding-left 0.35s var(--ease-out);
}

.traveler-link-btn:hover {
  background: var(--ember);
  color: var(--ink-900);
  padding-left: 1.4rem;
}

/* --------------------------------------------------------------------------
   Creator pin form
   -------------------------------------------------------------------------- */

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.creator-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Twenty-six categories is more than a dropdown should ask anyone to hold
   open over the rest of the form, so the field is a list box: eight rows,
   always visible, scrolling inside its own frame. `size` sets the row count;
   the height here keeps that honest across browsers that measure rows
   differently. */
.category-select {
  height: auto;
  max-height: 13.5rem;
  padding: 0.35rem;
  overflow-y: auto;
  /* theme.css paints a chevron on every select and reserves 36px for it. A
     list box has nothing to drop down, so both go. */
  background-image: none;
  padding-right: 0.35rem;
}

.category-select option {
  padding: 0.42rem 0.55rem;
  border-radius: var(--r-xs);
  color: var(--paper);
  background: var(--ink-800);
}

.category-select option:checked {
  background: var(--ember);
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Street tracing
   -------------------------------------------------------------------------- */

.draw-street-btn {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.draw-street-btn:hover {
  border-color: var(--ember);
  color: var(--ember);
}

/* Sits opposite the filter dropdown while a trace is in progress, so it never
   covers the stretch of map being drawn on. */
.street-draw-panel {
  position: fixed;
  left: var(--gutter);
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 870;
  width: min(340px, calc(100vw - var(--gutter) * 2));
  padding: 1.1rem 1.2rem;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  animation: reveal-up 0.28s var(--ease-out);
}

.street-draw-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.5rem;
}

.street-draw-status {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--paper-dim);
  margin-bottom: 0.9rem;
}

.street-draw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.street-draw-actions button {
  flex: 1 1 auto;
  padding: 0.6rem 0.9rem;
  font-size: 0.6rem;
}

.street-draw-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* In the pin form, when the pin being named is a traced street. */
.pin-street-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.pin-street-actions button {
  flex: 1 1 auto;
  padding: 0.6rem 0.9rem;
  font-size: 0.6rem;
}

/* The note sits directly above the buttons that act on it, so its own bottom
   margin would only push them away from what they belong to. */
.pin-street-note {
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--ember);
  background: rgba(232, 98, 44, 0.08);
  color: var(--paper-dim);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Sits under a field that needs a sentence of explanation — the area size, so
   far, which is the one control whose effect is on the map rather than in the
   form. */
.field-hint {
  margin-top: 7px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--paper-faint);
  max-width: 46ch;
}

/* app.js toggles this between `none` and `block` when "Other" is selected */
.custom-category-input {
  margin-top: 6px;
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 0.4rem;
  border-top: 1px solid var(--hairline-soft);
  margin-top: 0.2rem;
}

.form-actions > * {
  margin-top: 1rem;
}

.save-pin-btn {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Publish sheet

   Narrower than the pin form: this one is read before it is filled in, and a
   listing is four short fields, not two columns of them.
   -------------------------------------------------------------------------- */

.publish-sheet {
  max-width: 620px;
  margin: 0 auto;
}

.publish-summary {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.publish-hint {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--paper-faint);
}

.publish-success-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.6rem;
}

.publish-success-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--paper);
  margin-bottom: 0.7rem;
}

.publish-success-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 46ch;
  margin-bottom: 1.4rem;
}

.publish-success-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 6px;
}

.publish-status {
  min-height: 1.3em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--paper-dim);
}

.publish-status.success {
  color: var(--moss);
}

.publish-status.error {
  color: var(--signal-bad);
}

.publish-map-btn {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ember);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.publish-map-btn:hover {
  background: var(--ember);
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .creator-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .app-header .guide-subtitle {
    display: none;
  }
}

@media (max-width: 560px) {
  .mode-btn {
    padding: 0.55rem 0.7rem;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .mode-btn span:first-child {
    display: none;
  }

  .filter-toggle-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.58rem;
  }

  /* On a phone the avatar would collide with the filter button, so it moves
     to the opposite corner of the screen. */
  .profile-widget-container {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
  }

  .profile-dropdown-menu {
    top: auto;
    bottom: 54px;
  }

  .filter-dropdown-container {
    right: 16px;
  }
}

/* The category button and the zoom controls both want the top-right corner,
   and on a narrow screen the button is wide enough to sit under them. Drop
   the controls below it rather than shrinking either one. */
@media (max-width: 700px) {
  .maplibregl-ctrl-top-right {
    top: calc(var(--header-h) + 66px);
  }

  /* Share the row with the category button instead of running under it —
     the reserved strip is that button's width plus a gap. */
  .place-search {
    right: calc(var(--gutter) + 144px);
    width: auto;
  }
}

/* Kept after the 700px block: both widths match on a phone, and these are the
   values that must win there. The avatar has moved to the bottom corner by
   this point, so the search box takes the whole left side of the row. */
@media (max-width: 560px) {
  .place-search {
    left: 16px;
    right: 136px;
  }
}