/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(var(--safe-top) + var(--space-2)) var(--space-3) 0;
  pointer-events: none; /* map stays draggable between the controls */
}
.topbar > * { pointer-events: auto; }

.topbar__brand {
  position: relative;
  /* Column so the open pill is as wide as its widest line (toggle row or longest link) */
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.2s, padding 0.2s;
}
/* Open: as wide as the longest link, never wider than 280px */
.topbar__brand[data-open="true"] { box-shadow: var(--shadow-md); padding-bottom: var(--space-4); max-width: min(280px, 75vw); }

/* Fills the pill (negative margin cancels the brand padding) so the whole pill is the tap target */
.topbar__toggle {
  display: flex; align-items: center; gap: var(--space-2);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-lg); background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.topbar__hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 24px; height: 24px; padding: 3px;
}
.topbar__hamburger span { display: block; height: 2px; border-radius: 1px; background: var(--color-label); }

.topbar__wordmark { font-size: var(--text-lg); color: var(--color-brand); letter-spacing: -0.01em; }

.alert-me {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  width: 72px; height: var(--alert-me-height); padding: var(--space-3) var(--space-2);
  border: 6px solid var(--color-bg); border-radius: var(--radius-pill);
  background: linear-gradient(var(--color-accent), var(--color-accent-strong));
  color: var(--color-brand); font-size: var(--text-md); line-height: 1.2; text-align: center;
  box-shadow: var(--shadow-sm);
}
.alert-me .icon { color: var(--color-text); }
.alert-me[aria-current="page"], .alert-me.is-active { background: var(--color-row); }
/* Pages that already show the Alert Me / Confirm Email card (body class) */
.hide-alert-me .alert-me { display: none; }

/* ---------- Hamburger menu ---------- */
.menu { display: none; min-width: 0; padding: var(--space-3) var(--space-4) 0 var(--space-5); }
.topbar__brand[data-open="true"] .menu { display: block; }
.menu__list > li + li { margin-top: var(--space-4); }
.menu__link {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--text-lg); color: var(--color-brand); text-align: left;
}
.menu__link--button { font: inherit; font-size: var(--text-lg); }
.menu__meta { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dots + list rows ---------- */
.dot {
  --dot-color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--dot-color); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.dot--sm { width: 14px; height: 14px; }

.list { display: flex; flex-direction: column; gap: var(--space-3); }
.list--plain { gap: var(--space-2); }
.section-title { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: var(--space-5) 0 var(--space-3); }

.list-row { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.list-row--pill {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-row);
  min-height: 72px;
}
a.list-row--pill:active, .list-row--pill.is-active { background: var(--color-row-active); }
.list-row__text { display: flex; flex-direction: column; min-width: 0; }
.list-row__title, .list-row__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__title { font-size: var(--text-lg); line-height: var(--leading-tight); }
.list-row__subtitle { font-size: var(--text-md); color: var(--color-text-muted); }
.list-row--plain { padding: var(--space-1) 0; color: var(--color-text-muted); }
.list-row__text--plain { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); text-transform: none; }
.list-row__code { color: var(--color-text-muted); font-weight: var(--weight-bold); margin-right: var(--space-1); }

/* ---------- Search pill ---------- */
.search {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4);
  border: 1.5px solid var(--color-text); border-radius: var(--radius-pill);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-lg); color: var(--color-brand); }
.search__nearby { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); border: 0; background: none; cursor: pointer; }

/* Search dropdown (place_search_controller): Nearby, then place suggestions */
.search { position: relative; }
.search__menu {
  position: absolute; z-index: 10; top: calc(100% + var(--space-2)); left: 0; right: 0;
  display: flex; flex-direction: column; padding: var(--space-2) 0;
  border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-md);
  max-height: min(60dvh, 420px); overflow-y: auto;
}
.search__menu[hidden] { display: none; }
.search__option {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3) var(--space-4); border: 0; background: none; text-align: left;
  font: inherit; color: var(--color-text); cursor: pointer;
}
.search__option[hidden] { display: none; }
.search__option:hover, .search__option[aria-selected="true"] { background: var(--color-row); }
.search__option-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; background: var(--color-row); color: var(--color-primary);
}
.search__option-icon--place { color: var(--color-text-muted); }
.search__option-text { display: flex; flex-direction: column; min-width: 0; }
.search__option-title { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__option-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }
.search__option.is-busy { opacity: 0.5; }
.search__option.is-error .search__option-title::after { content: " — location unavailable"; color: var(--color-danger); }

/* ---------- Flash ---------- */
.flash-stack {
  position: fixed; z-index: 1100; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-top) + var(--topbar-height) + var(--space-2));
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(calc(100% - var(--space-6)), 420px);
}
.flash {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-text); color: #fff; box-shadow: var(--shadow-md); cursor: pointer;
}
.flash--error { background: var(--color-danger); }

/* ---------- Plain pages (admin, ads) ---------- */
.page {
  max-width: var(--page-max); margin: 0 auto;
  padding: calc(var(--safe-top) + 160px) var(--space-4) calc(var(--safe-bottom) + var(--space-6));
}
.page__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.page__actions { display: flex; gap: var(--space-2); }

.card { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table th { color: var(--color-text-muted); font-weight: var(--weight-semibold); }

.badge {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-row); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: capitalize;
}
.badge--active, .badge--processed { background: #dff3e5; color: var(--color-success); }
.badge--pending, .badge--processing { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--disabled, .badge--failed, .badge--paused { background: #fde8e7; color: var(--color-danger); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
.dl dt { color: var(--color-text-muted); }
.dl dd { margin: 0; }