* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---- picker ---- */
body.picker { background: #f6f5f1; color: #2b2b2b; padding: 0 0 3rem; }
.picker header { padding: 1.5rem 1.25rem 0.5rem; }
.picker h1 { margin: 0; font-size: 1.4rem; }
.picker .sub { margin: .35rem 0 0; color: #6b6b6b; font-size: .9rem; }
/* Breadcrumb trail for drill-down navigation. */
.crumbs { max-width: 640px; margin: .8rem auto 0; padding: 0 1.25rem; font-size: .85rem; }
.crumbs:empty { display: none; }
.crumb { color: #1c7ed6; text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.crumb.current { color: #2b2b2b; font-weight: 600; }
.crumb-sep { color: #b7b2a6; margin: 0 .35rem; }

.area-list { list-style: none; margin: 1rem auto 0; padding: 0 1rem; max-width: 640px; }
.area-list li { margin: 0 0 .5rem; }
.area-list li.empty { color: #8a8577; font-size: .85rem; padding: .5rem 1rem; }
.area {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; background: #fff; border: 1px solid #e4e1d9;
  border-radius: 10px; text-decoration: none; color: inherit;
}
.area:hover { border-color: #1c7ed6; }
.area.self { border-color: #1c7ed6; background: #f3f8ff; }
.area-name { font-weight: 600; }
.area-meta { display: flex; align-items: center; gap: .6rem; }
.chevron { color: #b7b2a6; font-size: 1.2rem; line-height: 1; }
.count { font-size: .78rem; color: #8a8577; white-space: nowrap; }
.badge { font-size: .72rem; color: #8a8577; background: #f1efe9; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.badge.offline { color: #1f7a3d; background: #e3f4e8; }
#data-version { max-width: 640px; margin: 1.5rem auto 0; padding: 0 1rem; color: #8a8577; font-size: .78rem; }

/* ---- map ---- */
#map { position: absolute; inset: 0; }
#ui { position: absolute; top: .6rem; left: .6rem; right: .6rem; display: flex; gap: .5rem; align-items: flex-start; z-index: 5; pointer-events: none; }
#ui > * { pointer-events: auto; }
#search-box { flex: 0 1 420px; max-width: 420px; position: relative; margin-left: auto; }
#search {
  width: 100%; height: 48px; padding: 0 2.8rem 0 .8rem; font-size: 1rem;
  border: 1px solid rgba(0,0,0,.35); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* Suppress the browser's native search clear control — we draw our own below. */
#search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#search-clear {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #777;
}
#search-clear:hover { color: #000; }
#search-clear[hidden] { display: none; }
#results { list-style: none; margin: .25rem 0 0; padding: 0; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); overflow-y: auto; max-height: 60vh; -webkit-overflow-scrolling: touch; }
#results li { padding: .55rem .8rem; cursor: pointer; font-size: .9rem; border-bottom: 1px solid #f0eee8; }
#results li:last-child { border-bottom: none; }
#results li:hover { background: #eef6ff; }
#results li.result { display: flex; align-items: center; gap: .5rem; }
.result-text { flex: 1 1 auto; min-width: 0; }
/* Road results: a thin blue rule on the left + faint tint, to set whole-street
   matches apart from individual address rows. */
#results li.road-result { border-left: 3px solid #1971c2; background: #f4f9ff; font-weight: 600; }
#results li.road-result:hover { background: #e7f1ff; }
.report-btn {
  flex: 0 0 auto; font-size: .72rem; padding: .28rem .5rem; cursor: pointer;
  border: 1px solid #e4b9b9; background: #fff5f5; color: #c92a2a;
  border-radius: 6px; white-space: nowrap;
}
.report-btn:hover:not(:disabled) { background: #ffecec; }
.report-btn:disabled { opacity: .55; cursor: default; }
/* Flag-only "wrong place" button (icon, no text). */
.report-btn.flag { padding: .3rem .5rem; font-size: 1rem; line-height: 1; }
#results li.report-missing { padding: .5rem .8rem; }
.report-btn.missing {
  display: block; width: 100%; text-align: center; font-size: .82rem;
  color: #1c7ed6; border-color: #b9d4ee; background: #f3f8ff;
}
.report-btn.missing:hover:not(:disabled) { background: #e7f1fd; }

/* ---- report dialog (near-full-screen explainer + confirm) ---- */
.report-dialog {
  width: min(560px, 94vw); max-width: 94vw; max-height: 90vh; overflow-y: auto;
  border: none; border-radius: 12px; padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.35); color: #2b2b2b;
}
.report-dialog::backdrop { background: rgba(0,0,0,.5); }
.report-dialog h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.report-dialog p { margin: .55rem 0; line-height: 1.45; font-size: .95rem; color: #444; }
.rd-detail {
  margin: .2rem 0 .7rem; padding: .6rem .7rem; border-radius: 8px;
  background: #f3f8ff; border: 1px solid #d3e3f7; font-weight: 600; word-break: break-word;
}
.rd-status { min-height: 1.2em; margin: .4rem 0 0; font-size: .9rem; }
.rd-status.ok { color: #2b8a3e; font-weight: 600; }
.rd-status.err { color: #c92a2a; }
.rd-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .9rem; }
.rd-btn { font-size: .95rem; padding: .6rem 1.1rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.rd-btn.cancel { background: #f1f0ec; border-color: #ddd9cf; color: #333; }
.rd-btn.confirm { background: #1c7ed6; color: #fff; }
.rd-btn:disabled { opacity: .6; cursor: default; }

/* Toggle link between map view and reports view (lives in the area-info pill). */
#reports-link { font-size: 11px; color: #1c7ed6; text-decoration: none; }
#reports-link:hover { text-decoration: underline; }

/* ---- reports view panel ---- */
#reports-panel {
  flex: 0 1 420px; max-width: 420px; margin-left: auto; max-height: 70vh; overflow-y: auto;
  background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  padding: .55rem .8rem; font-size: .85rem; -webkit-overflow-scrolling: touch;
}
#reports-panel h3 { margin: .15rem 0 .4rem; font-size: .9rem; }
#reports-panel .grp { margin: .5rem 0 .15rem; font-weight: 700; color: #444; font-size: .82rem; }
#reports-panel .grp.sub { font-weight: 500; color: #888; margin-left: .2rem; }
#reports-panel .rep { padding: .35rem .25rem; border-bottom: 1px solid #f0eee8; cursor: pointer; }
#reports-panel .rep:hover { background: #eef6ff; }
/* Back arrow + area name + data info share one box (the white "pill"): the back
   arrow sits on the left behind a divider, the name/data stacked beside it. */
#area-info {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: stretch; overflow: hidden;
  background: #fff; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
#back {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 44px; color: #222; text-decoration: none; font-size: 1.4rem;
  border-right: 1px solid rgba(0,0,0,.18);
}
#back:hover { background: #f3f8ff; }
#area-text {
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  padding: .4rem .8rem; min-width: 0;
}
#area-name {
  max-width: 100%; font-weight: 600; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#data-info { font-size: 11px; color: #6b6b6b; white-space: nowrap; }
#attribution { position: absolute; bottom: 0; right: 0; z-index: 5; font-size: 10px; color: #222; background: rgba(255,255,255,.92); padding: 2px 5px; }

/* Lift the bottom-right zoom controls clear of the attribution strip. */
.maplibregl-ctrl-bottom-right { margin-bottom: 22px; }

/* On narrow screens the search box wraps onto its own line below the area pill,
   so it gets the full width. */
@media (max-width: 640px) {
  #ui { flex-wrap: wrap; }
  #search-box, #reports-panel { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  /* Give the pill the full row and flow name + data + reports link horizontally
     (wrapping as needed) so it uses the extra width instead of stacking three
     tall lines — shorter pill, more map visible. */
  #area-info { flex: 1 1 100%; max-width: 100%; }
  #area-text {
    flex-direction: row; flex-wrap: wrap;
    align-items: baseline; column-gap: .5rem; row-gap: .05rem;
  }
  /* Name, data-info and reports link all flow on a single line. */
  #area-name { max-width: none; flex: 0 1 auto; }
  /* Shrink the reports link to a faint, unobtrusive bit of text trailing the
     data-info — still tappable for those who know, but out of the way. */
  #reports-link {
    font-size: 10px; color: #9a9a9a; text-decoration: none;
  }
  #reports-link::before { content: "· "; color: #c4c4c4; }
}

/* ---- "update available" banner (shared; injected by app/sw-update.js) ---- */
#sw-update {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 1000; display: flex; align-items: center; gap: .75rem;
  max-width: calc(100% - 1.5rem);
  padding: .55rem .55rem .55rem 1rem;
  background: #2b2b2b; color: #fff; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .9rem;
}
.sw-update-msg { white-space: nowrap; }
.sw-update-btn {
  flex: none; border: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: .4rem .9rem; border-radius: 999px; background: #1c7ed6; color: #fff;
}
.sw-update-btn:disabled { opacity: .6; cursor: default; }