:root {
  --ink: #1a1f1c;
  --ink-soft: #4b544e;
  --paper: #f6f4ee;
  --surface: #ffffff;
  --line: #e1ddd0;
  --forest: #1b4332;
  --forest-dark: #11291f;
  --sage: #84a98c;
  --sage-light: #e7efe9;
  --clay: #c9743f;
  --clay-dark: #a85c2d;
  /* The brand green: the "free" in the wordmark, and every accent that used to
     be clay. Clay stays on for-sale pins and badges, where it means something. */
  --brand: #1f8f4e;
  --brand-dark: #16703d;
  --rent-pin: #3a6ea5;
  --sale-pin: #c9743f;
  --shadow: 0 10px 30px rgba(17, 41, 31, 0.14);
  --radius: 14px;
  --rail-w: 52px;
  /* The home page keeps the left of the screen; the map keeps the right. */
  --home-w: 560px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  text-wrap: balance;
}

#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #d8e2d8;
}

/* ---------- Sticky header ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above the rail (650) and the panel (700): the filter menu hangs out of
     this header, and a dropdown that is painted under the rail loses its
     first 52px of labels. Nothing else overlaps the header itself, which
     stops where both of those start. */
  z-index: 800;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(17, 41, 31, 0.08);
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

/* One row only: brand, sub-tabs, search, active filters, count, user. */
.topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  min-width: 0;
}

/* The logo, then the promise under it: each term sitting directly above
   the thing it promises, separated by a rule that spans both lines. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-right: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.brand .mark { font-size: 25px; font-weight: 600; color: var(--forest); line-height: 1.05; letter-spacing: -0.015em; }
.brand .mark em { font-style: normal; color: var(--brand); }
.brand .tag { font-size: 11px; color: var(--ink-soft); display: none; }

/* Sized in em off a base font-size the script sets, so the whole block can be
   scaled down in one place until it fits inside 1.1x the wordmark. */
.promise { display: grid; grid-template-columns: repeat(3, auto); font-size: 10px; }
.promise .pr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0.6em 0 0;
  margin-right: 0.6em;
  border-right: 1px solid var(--line);
  line-height: 1.2;
}
.promise .pr:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.promise .pr b { font-size: 1em; font-weight: 700; color: var(--forest); letter-spacing: 0.01em; }
.promise .pr i { font-style: normal; font-size: 0.88em; color: var(--ink-soft); white-space: nowrap; }

select, .price-input, .search-input {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}
select:focus, .price-input:focus, .search-input:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.search-input { flex: 1; min-width: 120px; max-width: 520px; }

.count-pill {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-left: auto;
  padding-left: 4px;
}

/* ---------- Where the reader is ---------- */
/* Two lines, the second one carrying the weight: a reader scanning the header
   is looking for the place, not for the sentence around it. */
.place-wrap { position: relative; flex: 0 0 auto; margin-left: auto; }
.place-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 3px 9px 3px 7px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.place-pill:hover, .place-pill[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--surface);
}
.lp-pin { width: 16px; height: 16px; flex: 0 0 16px; color: var(--brand); }
.lp-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lp-top { font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }
.lp-main {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 30;
  display: none;
  width: 310px;
  max-width: calc(100vw - 24px);
  background: #fff;                /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
}
.place-menu.open { display: block; }
.pm-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.pm-field { position: relative; }
.pm-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
}
.pm-field input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.pm-hits {
  display: none;
  margin-top: 6px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.pm-hits.open { display: block; }
.pm-hit {
  display: block;
  width: 100%;
  border: none;
  background: #fff;
  text-align: left;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.pm-hit + .pm-hit { border-top: 1px solid var(--line); }
.pm-hit:hover, .pm-hit.on { background: var(--sage-light); }
.pm-hit i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.pm-locate {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}
.pm-locate svg { width: 16px; height: 16px; }
.pm-locate:hover { background: var(--sage-light); }
.pm-locate[disabled] { opacity: .6; cursor: default; }
.pm-cap {
  margin: 12px 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pm-cities { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-city {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.pm-city:hover { border-color: var(--sage); background: var(--surface); }
.pm-city.on { background: var(--forest); border-color: var(--forest); color: #fff; }


/* ---------- Short filter menu (per tab) ---------- */

.filter-menu {
  position: absolute;
  top: 100%;
  margin-top: -1px;
  z-index: 10;
  display: none;
  /* One line a question now, so the sheet is a column rather than a
     spreadsheet. Wide enough that an open block's options still lay out
     several to a line. */
  width: 460px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--header-h, 92px) - 20px);
  overflow-y: auto;
  background: #fff;           /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 0 12px 12px 12px;
  box-shadow: var(--shadow);
  padding: 12px 14px 10px;
}
.filter-menu.open { display: block; }

/* ---------- The Filters panel, one dropdown a question ---------- */
/* Every block is a line that says its own name and its own answer and opens
   on a click. The controls inside are unchanged — still radios and
   checkboxes, still every option on screen the moment the line is open — but
   the panel is a tenth as tall, so "what else can I narrow by" is one screen
   rather than three. A block the reader opened or shut by hand stays that
   way; the rest follow whether they are answering something. */
.fm-acc { border-bottom: 1px solid var(--line); padding: 0; }
.fm-acc:last-of-type { border-bottom: 0; }
.filter-menu .fm-label[data-acc] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  margin: 0;
  padding: 9px 2px;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink);
}
.filter-menu .fm-acc.answered > .fm-label[data-acc] { color: var(--forest); }
.filter-menu .fm-label[data-acc]:hover { color: var(--forest); }
.fm-ans {
  flex: 1 1 auto;
  min-width: 0;
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm-caret {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--ink-soft);
  transition: transform .14s ease;
}
.fm-acc.open .fm-caret { transform: rotate(180deg); }

/* The controls themselves: shut unless the line is open — or unless the
   block has been lent to a filter-row popover, which opens because the
   reader pressed the button that opens it. */
.fm-acc:not(.open) > .opts,
.fm-acc:not(.open) > .chips,
.fm-acc:not(.open) > .seg,
.fm-acc:not(.open) > .rng { display: none; }
.fm-acc.open > .opts,
.fm-acc.open > .chips { padding-bottom: 9px; }
.fm-acc.open > .opts.cols { display: grid; }
.fm-acc.open > .rng { padding-bottom: 7px; }
/* A range block is a row, so its label and its slider sit side by side when
   it is open and the label alone is the whole line when it is shut. */
.fm-row.fm-acc { flex-wrap: wrap; }
.fm-row.fm-acc > .fm-label[data-acc] { flex: 1 1 100%; }
.fm-row.fm-acc > .rng,
.fm-row.fm-acc > .seg { flex: 1 1 100%; }

#tfPopBody .fm-acc > .opts,
#tfPopBody .fm-acc > .chips,
#tfPopBody .fm-acc > .seg,
#tfPopBody .fm-acc > .rng { display: flex; }
#tfPopBody .fm-acc > .opts.cols { display: grid; }
#tfPopBody .fm-acc > .rng { display: block; }
#tfPopBody .fm-label[data-acc] { display: none; }
#tfPopBody .fm-acc { border: 0; }

.fm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.fm-label {
  flex: 0 0 56px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.fm-row select { flex: 1; }
.fm-row .price-range { flex: 1; }

.seg {
  display: flex;
  background: var(--sage-light);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: none;
  background: transparent;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.seg button.active { background: var(--forest); color: #fff; }

.price-range { display: flex; align-items: center; gap: 6px; }
.price-range .price-input { width: 0; flex: 1; min-width: 70px; }
.price-range span { color: var(--ink-soft); font-size: 12px; }

.beds-select { min-width: 88px; }

/* ---------- Geometric dual-handle range slider ---------- */

.fm-row-rng { align-items: center; }

.rng { flex: 1; min-width: 0; padding: 2px 0; }
.rng-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.rng-track { position: relative; height: 20px; }
.rng-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.rng-fill {
  position: absolute;
  top: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--forest);
}
.rng-track input[type="range"] {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;   /* only the thumbs are grabbable */
}
.rng-track input[type="range"]:focus { outline: none; }
.rng-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--forest);
  box-shadow: 0 1px 3px rgba(17, 41, 31, 0.3);
  cursor: grab;
}
.rng-track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.rng-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--forest);
  box-shadow: 0 1px 3px rgba(17, 41, 31, 0.3);
  cursor: grab;
}
.rng-track input[type="range"]::-moz-range-track { background: transparent; border: none; }
.rng-track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sage); outline-offset: 2px; }

.fm-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.fm-clear {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.fm-clear:hover { background: var(--sage-light); }

/* Empty state for a tab with nothing to plot */
.tab-empty {
  position: fixed;
  top: calc(var(--header-h, 92px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.tab-empty.show { display: block; }

@media (max-width: 560px) {
  .brand .mark { font-size: 21px; }
  .place-pill { max-width: 150px; }
  .lp-top { display: none; }
  .filter-menu { left: 10px; right: 10px; width: auto; }
  .fab-menu { min-width: 190px; }
}

/* ---------- Search + autosuggest ---------- */

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 560px;
  display: flex;
  align-items: center;
}
.search-ico {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--ink-soft);
  pointer-events: none;
}
.search-wrap .search-input {
  width: 100%;
  padding-left: 32px;           /* only the glass sits in here now */
  padding-right: 28px;
}

.search-clear {
  position: absolute;
  right: 8px;
  display: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
  line-height: 1;
}
.search-clear:hover { background: var(--sage-light); color: var(--ink); }
.search-wrap.has-text .search-clear { display: block; }

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 760px;
  max-width: calc(100vw - 24px);
  z-index: 20;
  display: none;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.suggest.open { display: block; }

.sg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.sg-cols.one { grid-template-columns: 1fr; }
.sg-cols .sg-col { min-width: 0; }   /* a long title must ellipsize, not widen its column */
.sg-cols .sg-col + .sg-col { border-left: 1px solid var(--line); padding-left: 6px; }
.sg-glyph { width: 17px; flex: 0 0 17px; text-align: center; font-size: 13px; line-height: 1; }
.sg-xhead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
}
.sg-xhead .sg-xn {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.sg-group {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 8px 10px 4px;
}
.sg-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.sg-item:hover, .sg-item.active { background: var(--sage-light); }
.sg-item .sg-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--forest);
  opacity: 0.75;
}
.sg-item .sg-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-item .sg-sub { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.sg-item mark { background: #fdf0c8; color: inherit; border-radius: 3px; padding: 0 1px; }
.sg-empty { padding: 14px 10px; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Breadcrumb ---------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.crumbs:empty { display: none; }
.crumbs::-webkit-scrollbar { display: none; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--sage-light);
  border: none;
  font-family: inherit;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: default;
}
.crumb.root { background: transparent; color: var(--forest); padding-left: 2px; }
.crumb.removable { cursor: pointer; }
.crumb.removable:hover { background: #dbe7de; color: var(--ink); }
.crumb .x { font-size: 11px; opacity: 0.6; }
.crumb-sep { flex: 0 0 auto; color: var(--line); font-size: 12px; }

/* ---------- Alerts ---------- */

.bell-wrap { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.bell-btn:hover { background: var(--sage-light); }
.bell-btn[aria-expanded="true"] { border-color: var(--forest); }
.bell-btn svg { width: 17px; height: 17px; }
/* The count sits on the bell, not beside it: a number in the header that is
   not touching the thing it counts is a number nobody reads. */
.bell-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0 3px;
}
.bell-dot[hidden] { display: none; }

.bell-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #fff;                /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.bell-menu.open { display: block; }
.bm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.bm-read {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}
.bm-read:hover { text-decoration: underline; }
.bm-read[hidden] { display: none; }
.bm-list { max-height: 60vh; overflow-y: auto; }
.bm-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.bm-item:hover { background: var(--sage-light); }
.bm-item i { font-style: normal; font-size: 15px; line-height: 1.2; flex: 0 0 18px; }
.bm-text { min-width: 0; }
.bm-what { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.bm-sub {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Unread is a mark, not a second colour scheme. */
.bm-item.unread .bm-what::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--brand);
}
.bm-none { padding: 14px 10px 16px; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- User menu ---------- */

.user-wrap { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }

/* Only the admin account ever sees this, and only it can get past the gate. */
.admin-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.admin-pill:hover { background: var(--brand); color: #fff; }
.admin-pill[hidden] { display: none; }

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 13px 5px 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.user-btn:hover { background: var(--sage-light); }
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  flex: 0 0 26px;
}
.user-avatar svg { width: 15px; height: 15px; }
.user-name { white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.wish-dot {
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.user-menu.open { display: block; }

.um-head { padding: 10px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.um-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.um-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

.um-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.um-item:hover { background: var(--sage-light); }
.um-item[hidden] { display: none; }
.um-item svg { width: 16px; height: 16px; color: var(--forest); flex: 0 0 16px; }
.um-badge {
  margin-left: auto;
  background: var(--sage-light);
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
}

/* ---------- Filter-menu chips + facts ---------- */

.fm-block { padding: 8px 0 2px; }
.fm-block .fm-label { display: block; margin-bottom: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--sage-light); color: var(--ink); }
.chip.active { background: var(--forest); border-color: var(--forest); color: #fff; }

/* ---------- Radio / checkbox option groups ---------- */
/* Every choice is on screen and one click away — no dropdowns anywhere. */

.opts { display: flex; flex-wrap: wrap; gap: 5px; }

/* Two class names deep so the generic `.field label` rule in the modal forms
   can't turn an option pill back into a block-level caption. */
.opts .opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 4px 8px 4px 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.opts .opt:hover { border-color: var(--sage); color: var(--ink); }
.opts .opt.on { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.opts .opt input {
  width: 12px;
  height: 12px;
  margin: 0;
  flex: 0 0 12px;
  accent-color: var(--forest);
  cursor: pointer;
}
.opts .opt:focus-within { outline: 2px solid var(--sage); outline-offset: 1px; }

/* A long leaf list (property types, job roles) reads better in columns. */
.opts.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px;
}
.opts.cols .opt { white-space: normal; }

.fm-fact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  background: #fbf7ec;
  border: 1px solid #efe4c9;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #6d5a2e;
}
.fm-fact::before { content: '\2726'; flex: 0 0 auto; color: var(--brand); font-size: 12px; line-height: 1.45; }

/* ---------- Wishlist ---------- */

.wish-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.wish-btn svg { width: 16px; height: 16px; }
.wish-btn:hover { background: var(--sage-light); color: var(--ink); }
.wish-btn.saved { background: #fdecef; border-color: #f3c3cd; color: #b02a46; }
.wish-btn.saved svg { fill: #b02a46; stroke: #b02a46; }

.gallery-wish {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 41, 31, 0.2);
}
.gallery-wish svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.gallery-wish.saved { color: #b02a46; }
.gallery-wish.saved svg { fill: #b02a46; stroke: #b02a46; }

.wish-list { display: flex; flex-direction: column; gap: 8px; }
.wish-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.wish-row:hover { background: var(--sage-light); }
.wish-thumb {
  width: 54px; height: 44px; flex: 0 0 54px;
  border-radius: 7px; object-fit: cover; background: var(--sage-light);
}
.wish-meta { flex: 1; min-width: 0; }
.wish-meta .wt { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-meta .wa { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-price { font-size: 13px; font-weight: 700; color: var(--forest); white-space: nowrap; }
.wish-remove {
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.wish-remove:hover { background: #fdecef; color: #b02a46; }
.wish-empty { padding: 22px 6px; text-align: center; font-size: 13px; color: var(--ink-soft); }

.modal-sm { max-width: 420px; }

/* ---------- Add button + its 3-action menu ---------- */

.fab-wrap {
  position: fixed;
  right: 20px;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.fab-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: #fff;              /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 206px;
}
.fab-menu.open { display: flex; }

.fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.fab-item:hover { background: var(--sage-light); }
.fab-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--forest); }
.fab-item.wa svg { color: #25D366; }

.add-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(201, 116, 63, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.add-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201, 116, 63, 0.5); }
.add-btn svg { width: 24px; height: 24px; }

.placing-banner {
  position: fixed;
  top: calc(var(--header-h, 92px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  background: var(--forest);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  display: none;
  align-items: center;
  gap: 10px;
}
.placing-banner.show { display: flex; }
.placing-banner button {
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- Right sidebar (property details) ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--surface);
  z-index: 700;
  box-shadow: 14px 0 40px rgba(17, 41, 31, 0.18);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sidebar.open { transform: translateX(0); }

/* Wide enough for a column: the panel IS the right of the screen. The map
   stops where it starts, so nothing is ever hidden underneath it. */
/* The rail is the screen’s left edge, so the sheet starts where it ends. */
@media (min-width: 721px) {
  .sidebar { left: var(--rail-w); }
}

@media (min-width: 1000px) {
  :root { --detail-w: 392px; }
  #map { left: calc(var(--rail-w) + var(--detail-w)); }
  .sidebar {
    left: var(--rail-w);
    width: var(--detail-w);
    transform: none;
    /* A column of the page, so it sits under the header and whatever the
       header opens — not over them the way the sliding sheet did. */
    z-index: 400;
    border-right: 1px solid var(--line);
    box-shadow: none;
    top: var(--header-h, 92px);
  }
  .sidebar .sidebar-close { display: none; }
  .sidebar.open .sb-idle { display: none; }
  body.on-home #map { left: var(--home-w); }
  body.on-home .sidebar { display: none; }
}

/* Nothing open yet: the column says what it is for rather than sitting blank. */
.sb-idle {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-soft);
  background: var(--surface);
  pointer-events: none;
}
.sb-idle .sbi-glyph { font-size: 26px; opacity: 0.7; }
.sb-idle .sbi-text { font-size: 12.5px; }
@media (min-width: 1000px) {
  .sb-idle { display: flex; }
  .sidebar.open .sb-idle { display: none; }
}

.sidebar-scroll {
  overflow-y: auto;
  flex: 1;
}

.sidebar-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(26, 31, 28, 0.55);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery[hidden] { display: none; }
.gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sage-light);
  overflow: hidden;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.gallery-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.gallery-dots span.active { background: #fff; }

.sidebar-body { padding: 20px 22px 28px; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge.sale { background: #fbe9dc; color: var(--clay-dark); }
.badge.rent { background: #e1ecf5; color: #2c5a85; }
.badge.ptype { background: var(--sage-light); color: var(--forest); }
.badge.job { background: #e4efe6; color: var(--forest); }

.sb-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.sb-address { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.sb-price { font-size: 26px; font-weight: 600; color: var(--forest); margin: 0 0 18px; }
.sb-price .unit { font-size: 13px; color: var(--ink-soft); font-weight: 500; font-family: 'Inter', sans-serif; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.stat .num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.sb-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 8px;
}
.sb-desc { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 20px; white-space: pre-wrap; }

.contact-card {
  background: var(--sage-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.contact-card .cname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
/* Owner, builder, dealer or a named business — and whether anybody here has
   actually rung the number and found them on it. */
.contact-card .who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #f1efe8;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: help;
}
.contact-card .who.ok { background: #e3f2e9; color: var(--brand-dark); }
.contact-card .who .vtick-svg { width: 12px; height: 12px; fill: var(--brand); }
.contact-card a {
  display: block;
  font-size: 13.5px;
  color: var(--forest);
  text-decoration: none;
  margin-bottom: 2px;
}
.contact-card a:hover { text-decoration: underline; }

.posted-note { font-size: 11.5px; color: var(--ink-soft); text-align: right; }

/* ---------- Modal (add property) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 41, 31, 0.45);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: 18px;
  width: 980px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
}

.modal-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.modal-head h2 { font-size: 20px; margin: 0; }
.modal-head button {
  border: none; background: var(--paper);
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 15px; color: var(--ink-soft);
}

.modal-body { padding: 18px 24px 26px; }

.loc-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sage-light);
  color: var(--forest);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.loc-pill svg { width: 15px; height: 15px; flex-shrink: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 70px; }
.field .opts { margin-top: 2px; }

.photo-drop {
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  background: var(--paper);
}
.photo-drop:hover { border-color: var(--sage); }
.photo-preview {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.photo-preview img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line);
}

.submit-row {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--forest);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.form-error {
  color: #b3261e;
  font-size: 12.5px;
  margin-top: 10px;
  display: none;
}
.form-error.show { display: block; }

/* ---------- Leaflet pin styling ---------- */

/* One pin shape for all three tabs: a white chip led by the category's own
   icon, outlined in that category's colour. A pin with nothing to say but its
   kind collapses to the icon alone, which is what keeps 300 job pins legible. */
.price-pin {
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 11.5px;
  font-family: 'Inter', sans-serif;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
  /* Light, because three hundred overlapping shadows compound into a smudge. */
  box-shadow: 0 2px 5px rgba(17, 41, 31, 0.18);
  border: 2px solid var(--forest);
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
}
.price-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fff;
}
.price-pin .pp-glyph { font-size: 13px; line-height: 1; }
.price-pin .pp-name,
.price-pin .pp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-pin.bare { padding: 4px; width: 26px; height: 26px; justify-content: center; }
.price-pin.bare .pp-glyph { font-size: 14px; }
.price-pin .pp-jobs {
  background: var(--forest);
  color: #fff;
  border-radius: 20px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}
.price-pin.sale { border-color: var(--sale-pin); }
.price-pin.rent { border-color: var(--rent-pin); }
.price-pin.job  { border-color: var(--forest); }
.price-pin.place.school     { border-color: var(--rent-pin); }
.price-pin.place.hospital   { border-color: #b3443c; }
.price-pin.place.hotel      { border-color: #7a5ea8; }
.price-pin.place.restaurant { border-color: var(--clay); }
.price-pin.selected { background: var(--forest); color: #fff; border-color: #fff; z-index: 500; }
.price-pin.selected::after { border-top-color: var(--forest); }
.price-pin.selected .pp-jobs { background: #fff; color: var(--forest); }

/* ---------- Category rails (left: property, right: jobs) ---------- */

.rail {
  position: fixed;
  top: var(--header-h, 92px);
  bottom: 0;
  width: var(--rail-w);
  z-index: 650;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 14px;
  overflow: hidden;
}
.rail-left  { left: 0;  border-right: 1px solid var(--line); }

/* Only the icon list scrolls. */
.rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rail-scroll::-webkit-scrollbar { width: 0; }
.rail-scroll[hidden] { display: none; }

/* The panel’s own switch, pinned above the filters. */
.rail-panel { color: var(--ink-soft); }
.rail-panel svg { width: 19px; height: 19px; }
.rail-panel[aria-pressed="true"] { background: var(--sage-light); color: var(--forest); }
/* The home page is the directory itself: no map furniture, so no rail. */
body.on-home .rail { display: none; }

/* A heading for the filter block under it, so two kinds of icon don’t read
   as one list. Letters only — it is never a button. */
.rail-cap {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
  margin: 2px 0 1px;
}

.rail-btn {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-btn:hover { background: var(--paper); }
.rail-btn.active { background: var(--sage-light); border-color: var(--forest); }
.rail-btn.all { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.rail-btn.active.all { color: var(--forest); }
.rail-sep { width: 24px; height: 1px; background: var(--line); margin: 4px 0; flex: 0 0 auto; }

/* The name lives in a hover label, so the rail stays icons only. The label is
   a fixed element rather than an ::after: inside a scrolling rail the bar’s
   own overflow clipped it, which is why the titles never showed. */
.rail-tip {
  position: fixed;
  z-index: 900;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 6px 18px rgba(17, 41, 31, 0.22);
}
.rail-tip.show { opacity: 1; }

/* The rails own the screen edges, so the map furniture steps inside them. */
.leaflet-bottom.leaflet-left { left: var(--rail-w); }
body.on-home .leaflet-bottom.leaflet-left { left: 0; }
/* Wide screens move the map itself past the rail and the panel, so its own
   controls are already inside them — offsetting again would push them into
   the middle of the map. */
@media (min-width: 1000px) {
  .leaflet-bottom.leaflet-left { left: 0; }
}
.tab-empty { z-index: 450; }

@media (max-width: 720px) {
  .rail { display: none; }
  .leaflet-bottom.leaflet-left { left: 0; }
  .fab-wrap { right: 20px; }
}


/* ---------- Place card: links + the openings read off their own site ---------- */

.ent-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ent-links .btn-ghost { padding: 7px 12px; font-size: 12.5px; text-decoration: none; }
.ent-links .btn-ghost:hover { border-color: var(--forest); color: var(--forest); }

.ent-jobs { display: flex; flex-direction: column; gap: 6px; }
.ent-job {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  font-family: inherit;
}
.ent-job:hover { border-color: var(--forest); background: var(--sage-light); }
.ent-job.none { background: transparent; border-style: dashed; cursor: default; color: var(--ink-soft); font-size: 13px; }
.ent-job .ej-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ent-job .ej-meta { font-size: 11.5px; color: var(--ink-soft); }

.sb-price.muted { color: var(--ink-soft); font-weight: 600; }

.leaflet-div-icon { background: transparent; border: none; }

/* ---------- Category badge ---------- */

.badge.cat { background: #f1ece0; color: var(--ink-soft); }
.badge.closed { background: #f6e3e3; color: #8d3b3b; }

/* The same facts as icons: one line instead of two, and each says itself in
   full on hover. The words are not gone, they are behind the icon — which is
   where an explanation belongs on a panel this narrow. */
.badge.ico {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 9px;
  cursor: default;
}
.badge-row { gap: 6px; }

/* A vacancy notice is a list of labelled lines, so it reads as one. */
.stat-row.two { grid-template-columns: repeat(2, 1fr); }

.kv {
  display: grid;
  grid-template-columns: minmax(84px, 29%) 1fr;
  gap: 3px 10px;
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.45;
}
.kv dt {
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  padding-top: 2px;
}
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Modal tabs (profile: you / locations / requirement) ---------- */

.modal-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 24px 0;
  position: sticky;
  top: 65px;
  background: var(--surface);
  z-index: 1;
}
.modal-tabs .mt {
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.modal-tabs .mt:hover { background: var(--sage-light); color: var(--ink); }
.modal-tabs .mt.active { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }

.ptab-pane[hidden] { display: none; }

/* ---------- Profile: sections down the left, sub-tabs across the top ------- */
/* Sections down the left and the fields beside them. The sections that hold a
   set per category — Needs, Listings, Enquiries — carry those categories as a
   strip of sub-tabs across the top of the fields, which is where a tab bar
   belongs: it reads left to right like every other tab bar here, and it leaves
   the fields the full width instead of paying a column for a menu. */
.modal-wide { width: 1060px; }
.modal-split {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: stretch;
}
.modal-split .modal-body { padding: 16px 20px 6px; min-width: 0; }
.pcol { display: flex; flex-direction: column; min-width: 0; }

.psubs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 10px 20px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.psubs::-webkit-scrollbar { display: none; }
.psubs[hidden] { display: none; }
.psub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 11px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.psub i { font-style: normal; font-size: 13px; line-height: 1; }
.psub b {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--sage-light);
  color: var(--forest);
  border-radius: 999px;
  padding: 1px 6px;
}
.psub:hover { background: var(--sage-light); color: var(--ink); }
.psub.active { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); font-weight: 700; }
.psub.active b { background: #fff; }

.ps-item .ps-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--clay);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
}

/* The one explanation icon this app allows: hover-only, through the delegated
   [data-tip] popup, never a caption under the field. */
.ihint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.ihint:hover { border-color: var(--sage); color: var(--forest); }

.pside {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
}
.pside[hidden] { display: none; }
.pside-left { border-right: 1px solid var(--line); }
.pside-right { border-left: 1px solid var(--line); width: 168px; }

.ps-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.ps-item i { font-style: normal; font-size: 13px; line-height: 1; }
.ps-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-item:hover { background: var(--sage-light); color: var(--ink); }
.ps-item.active { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); font-weight: 700; }

.needs-block[hidden] { display: none; }
#profileForm .form-error { padding: 0 24px; }
#profileForm .submit-row { padding: 0 24px 22px; margin-top: 14px; }

@media (max-width: 860px) {
  /* A menu column will not fit a phone, so the sections become a strip across
     the top with the categories in their own strip beneath. */
  .modal-split { grid-template-columns: 1fr; }
  .pside { flex-direction: row; overflow-x: auto; padding: 10px 14px; border: none; }
  .pside-left { border-bottom: 1px solid var(--line); }
  .ps-item { width: auto; flex: 0 0 auto; }
  .ps-item .ps-badge { margin-left: 4px; }
  .psubs { padding: 8px 14px 0; }
}

.ptab-pane .fm-block { padding: 10px 0 2px; }
.ptab-pane .needs-block .field { margin-top: 14px; }
.ptab-pane .fm-row-rng { padding: 0 0 14px; }
.ptab-pane .fm-row-rng .fm-label { flex-basis: 112px; width: 112px; }

/* ---------- Profile: CV ---------- */

.cv-drop {
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  background: var(--paper);
}
.cv-drop:hover { border-color: var(--sage); }
.cv-drop[hidden], .cv-row[hidden] { display: none; }

.cv-row {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--paper);
}
.cv-ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--forest); }
.cv-link {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-remove {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
.cv-remove:hover { color: var(--clay); }

/* ---------- Profile: multiple locations ---------- */

.loc-list { display: flex; flex-direction: column; gap: 8px; }

.loc-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.loc-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
}
.loc-row input:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
  background: var(--surface);
}
.loc-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 9px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.loc-pick svg { width: 13px; height: 13px; flex: 0 0 13px; }
.loc-pick:hover { border-color: var(--sage); color: var(--ink); }
.loc-pick.set { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.loc-del {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
}
.loc-del:hover { color: var(--clay); }

.loc-add { margin-top: 10px; padding: 8px 14px; font-size: 13px; }

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

@media (max-width: 900px) {
  .crumbs { display: none; }
}

@media (max-width: 720px) {
  .loc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .loc-row .loc-address { grid-column: 1 / -1; }
  .modal-tabs { top: 60px; }
  .brand .tag { display: none; }
  .topbar { padding: 8px 12px; gap: 6px; }
  .search-input { min-width: 90px; }
  .count-pill { display: none; }
  .brand { margin-right: 0; }
  .sidebar { width: 100%; max-width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .user-name { display: none; }
  .user-btn { padding: 5px; }
}


/* ---------- Categories in the header (main domain) ---------- */

.sitenav { display: flex; gap: 3px; flex: 0 1 auto; min-width: 0; overflow-x: auto; margin-right: auto; }
.sitenav::-webkit-scrollbar { display: none; }

.sn-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sn-btn:hover { background: var(--sage-light); color: var(--ink); }
.sn-btn.active { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.sn-glyph { font-size: 15px; line-height: 1; }

/* ---------- The category name, and the toggle that switches microsite ---------- */

.site-wrap { position: relative; flex: 0 0 auto; }

.site-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cfe0d4;
  background: var(--sage-light);
  color: var(--forest);
  border-radius: 10px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.site-pill:hover { border-color: var(--sage); }
.site-pill .sp-glyph { font-size: 15px; line-height: 1; }
.site-pill .caret { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; }
.site-pill[aria-expanded="true"] .caret { transform: rotate(180deg); }

.site-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #fff;              /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 212px;
  z-index: 620;
}
.site-menu.open { display: flex; }

.sm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
}
.sm-item:hover { background: var(--sage-light); }
.sm-item.on { background: var(--sage-light); color: var(--forest); }
.sm-glyph { font-size: 15px; width: 18px; text-align: center; line-height: 1; }


/* ---------- Home page: every category, every subcategory ---------- */

.home {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h, 92px);
  bottom: 0;
  z-index: 400;
  background: var(--paper);
  overflow-y: auto;
}
.home-inner { max-width: 1240px; margin: 0 auto; padding: 24px 22px 70px; }

/* Foot of the home page: where to find us. */
.home-foot {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; align-items: center;
  margin-top: 34px; padding: 18px 0 0; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.home-foot a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.home-foot a:hover { color: var(--ink); text-decoration: underline; }
.home-foot svg { width: 13px; height: 13px; }

/* What we are for, then what we will never do, then the directories. */
.home-head { margin-bottom: 16px; }
.home-head h1 { font-size: 32px; line-height: 1.1; margin: 0; color: var(--forest); }
.home-say {
  margin: 10px 0 0;
  max-width: 48ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.home-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.home-keys span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid #cfe0d4;
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--forest);
  font-size: 11.5px;
  font-weight: 700;
}
.home-keys svg { width: 13px; height: 13px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Wide enough for both: the note and the directories stand in a column on the
   left, and the map keeps everything to the right of it. */
@media (min-width: 1000px) {
  .home {
    right: auto;
    width: var(--home-w);
    border-right: 1px solid var(--line);
    box-shadow: 1px 0 0 rgba(17, 41, 31, 0.03);
  }
  .home-inner { max-width: none; padding: 20px 20px 46px; }
  .home-grid { grid-template-columns: 1fr; }
  .home-foot { justify-content: flex-start; }
}

.home-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 13px 13px;
}

.hc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 4px 0 2px;
  cursor: pointer;
  text-align: left;
}
.hc-glyph { font-size: 19px; line-height: 1; }
.hc-name { font-size: 17px; font-weight: 700; color: var(--forest); font-family: 'Fraunces', Georgia, serif; }
.hc-host { font-size: 10.5px; color: var(--ink-soft); }
.hc-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.hc-head:hover .hc-name { text-decoration: underline; }

.hc-sub { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 8px; }

.hc-group {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: baseline;
  padding: 3px 0;
  border-top: 1px solid var(--line);
}
.hc-gname {
  display: flex;
  align-items: baseline;
  gap: 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  padding: 3px 0;
  cursor: pointer;
  text-align: left;
}
.hc-gname:hover { color: var(--forest); text-decoration: underline; }

.hc-leaves { display: flex; flex-wrap: wrap; gap: 3px; }
.hc-leaf {
  border: 1px solid transparent;
  background: var(--paper);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.hc-leaf:hover { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }

/* ---------- Bottom-right widget: the add actions, then the feedback link ---------- */


/* ---------- Compact tables ---------- */
/* Dense on purpose: 3px of padding, one line a row, numbers right-aligned
   and text left, and a sort that drops blanks to the bottom either way. */

.ctable-wrap {
  overflow: auto;
  max-height: 54vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.ctable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ctable th, .ctable td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctable th {
  position: sticky;
  top: 0;
  background: var(--paper);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  z-index: 1;
}
.ctable th:hover { color: var(--forest); }
.ctable th.num, .ctable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ctable th.sorted::after { content: ' ▲'; font-size: 7px; }
.ctable th.sorted.desc::after { content: ' ▼'; }
.ctable tbody tr:nth-child(even) { background: #fcfbf7; }
.ctable tbody tr:hover { background: var(--sage-light); }
.ctable tbody tr:last-child td { border-bottom: none; }

.ct-empty { padding: 16px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }

.modal-lg { max-width: 1060px; }
#adminOverlay .modal-body { padding: 14px 18px 20px; }
#adminSiteOpts { margin-bottom: 8px; }
#myListings { margin-top: 2px; }

/* ---------- Pins for the two newer microsites ---------- */

.price-pin.matri { border-color: #b5558a; }
.price-pin.matri.groom { border-color: var(--rent-pin); }
.price-pin.pro { border-color: #6b7f3a; }
.price-pin.stay { border-color: #3f7d8c; }

/* A hidden element is hidden, whatever its display rule says. */
[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .promise { display: none; }
}

@media (max-width: 820px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-head h1 { font-size: 23px; }
  .hc-group { grid-template-columns: 1fr; }
}

/* ---------- admin.freebroker.app ---------- */
/* Full screen, no map: a tab bar, filters on top, and one dense table. */

body.admin-page {
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.adm-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(17, 41, 31, 0.07);
}
.adm-brand {
  font-size: 19px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: -0.015em;
  flex: 0 0 auto;
}
.adm-brand em { font-style: normal; color: var(--brand); }
.adm-brand span {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  vertical-align: 3px;
}

.adm-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 9px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.adm-tab:hover { background: var(--sage-light); color: var(--ink); }
.adm-tab.active { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }

.adm-who { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.adm-signout {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 6px 11px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.adm-signout:hover { border-color: var(--sage); color: var(--forest); }

.adm-main { flex: 1; padding: 12px 16px 28px; min-width: 0; }

/* Filters on top of every table, radios and checkboxes only. */
.adm-filters[hidden] { display: none; }
.adm-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.adm-frow { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.adm-flabel {
  flex: 0 0 86px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding-top: 4px;
}
.adm-search {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
}
.adm-search:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.adm-count { font-size: 11.5px; color: var(--ink-soft); padding: 0 2px 5px; }
.adm-table { max-height: calc(100vh - 230px); background: #fff; }
.adm-count.warn { color: var(--clay); font-weight: 600; }

/* The Map tab: a form where every other tab has a table. */
.adm-settings { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.map-list { display: flex; flex-direction: column; }
.map-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.map-row:last-child { border-bottom: none; }
.map-row.on { background: var(--sage-light); border-radius: 8px; }
.map-row.off .opt { opacity: 0.55; }
.map-row .opt { min-width: 190px; }
.map-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid #cfe0d4;
  background: var(--sage-light);
  color: var(--forest);
}
.map-kind.key { border-color: #e4d8c6; background: #faf2e4; color: #8a6a34; }
.map-kind.unavailable { border-color: var(--line); background: #f4f4f2; color: var(--ink-soft); }
.map-key { flex: 1 1 220px; min-width: 150px; margin-left: auto; }
.map-saved { font-size: 11px; color: var(--ink-soft); min-width: 86px; text-align: right; }
.map-save { padding: 5px 10px; font-size: 11.5px; }

/* The one explanation anywhere on this screen, and it stays behind the icon. */
.adm-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid var(--sage);
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  font-style: italic;
  color: var(--forest);
  cursor: help;
}
.adm-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: -4px;
  width: 290px;
  background: var(--forest-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  padding: 7px 9px;
  border-radius: 8px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 40;
}
.adm-info:hover::after { opacity: 1; }
.ctable tbody tr.clickable { cursor: pointer; }

/* The gate: nobody but the admin account gets past it. */
.adm-gate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.adm-gate-card {
  width: 340px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 22px 24px;
}
.adm-gate-card h1 { font-size: 20px; margin: 0 0 14px; color: var(--forest); }
.adm-gate-card .field { margin-bottom: 12px; }
.adm-gate-card .btn-primary { width: 100%; }

@media (max-width: 720px) {
  .adm-flabel { flex-basis: 64px; }
  .adm-who { display: none; }
}

/* ===========================================================================
   Free is the word that does the work, the panel the reader can size or fold
   away, the counts that stand in for pins, and the last column of every
   listing table. Appended as one block so it reads in one piece.
   =========================================================================== */

/* ---------- The wordmark ---------- */
.brand .mark em { font-weight: 800; letter-spacing: -0.02em; }
.adm-brand em { font-weight: 800; }

/* ---------- The right panel: hideable, and the reader's width ---------- */
/* The handle is the panel's own left edge, two pixels of colour that widen
   under the pointer rather than a bar taking up room of its own. */
.sb-resize { display: none; }
.sb-hide { display: none; }

@media (min-width: 1000px) {
  .sb-resize {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    width: 7px;
    cursor: col-resize;
    z-index: 3;
    background: transparent;
  }
  .sb-resize::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 3px;
    width: 1px;
    background: var(--line);
    transition: background 0.15s, width 0.15s;
  }
  .sb-resize:hover::after,
  .sb-resize:focus-visible::after,
  body.resizing-panel .sb-resize::after { width: 3px; right: 2px; background: var(--sage); }
  .sb-resize:focus-visible { outline: none; }

  .sb-hide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 4;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .sb-hide:hover { background: var(--sage-light); color: var(--forest); }

  /* Folded away: the map takes the whole screen and one tab brings it back. */
  body.detail-off #map { left: var(--rail-w); }
  body.detail-off .sidebar { display: none; }

  /* A drag must not fight the map's own pointer handling, or select text. */
  body.resizing-panel { cursor: col-resize; user-select: none; }
  body.resizing-panel .sidebar,
  body.resizing-panel #map { transition: none; }
}

/* ---------- What the panel says before a pin is picked ---------- */
.sb-idle { pointer-events: auto; overflow-y: auto; }
.sb-idle .sbi-inner {
  width: 100%;
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  align-items: stretch;
}
.sbi-head { display: flex; align-items: center; gap: 9px; }
.sbi-head .sbi-glyph { font-size: 22px; opacity: 1; }
.sbi-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--forest);
}

.sbi-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sbi-benefits li { display: flex; gap: 9px; align-items: flex-start; }
.sbb-glyph {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.sbb-text { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-soft); }
.sbb-text b { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* The one thing worth doing before a search. */
.sbi-cta, .sbi-you {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sbi-cta-head {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--forest);
}
.sbi-cta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sbi-cta-list li { font-size: 11.5px; color: var(--ink-soft); padding-left: 13px; position: relative; }
.sbi-cta-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sage);
  font-size: 10px;
  font-weight: 700;
}
.sbi-cta .btn-primary, .sbi-you .btn-ghost { align-self: flex-start; }
.sbi-you-head { font-size: 13px; color: var(--ink-soft); }
.sbi-you-head b { color: var(--ink); }
.sbi-you-where {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.sbi-you-where svg { width: 12px; height: 12px; fill: var(--sage); }
.sbi-foot { font-size: 11.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 11px; }

/* ---------- Counts, where the map is too far out to read a pin ---------- */
.count-bubble {
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--forest);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(17, 41, 31, 0.18);
  padding: 5px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}
.count-bubble:hover { border-color: var(--brand); }
.count-bubble .cb-n {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
  font-size: 13px;
}
.count-bubble .cb-name {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.count-bubble.md { padding: 7px 13px; }
.count-bubble.md .cb-n { font-size: 15px; }
.count-bubble.lg { padding: 9px 16px; }
.count-bubble.lg .cb-n { font-size: 18px; }
.count-bubble.lg .cb-name { font-size: 10px; max-width: 140px; }

/* ---------- Tables: a clickable value, and the column of actions ---------- */
.ctable th.nosort { cursor: default; }
.ctable th.nosort:hover { color: inherit; }
.ctable th.acts, .ctable td.acts { width: 1%; white-space: nowrap; text-align: right; }

.ct-link {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border-bottom: 1px dotted var(--sage);
}
.ct-link:hover { color: var(--forest); border-bottom-color: var(--forest); }

.adm-sub { color: var(--ink-soft); font-size: 10px; }
.adm-unclaimed { color: var(--ink-soft); font-style: italic; }
.adm-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfe0d4;
  background: var(--sage-light);
  color: var(--forest);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.adm-pick b { font-weight: 700; }
.adm-pick span { color: var(--ink-soft); font-size: 11px; }
.adm-pick:hover { border-color: var(--forest); }

.fba-row { display: inline-flex; gap: 3px; }
.fba-btn {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1;
  cursor: pointer;
}
.fba-btn:hover { background: var(--sage-light); border-color: var(--sage); color: var(--forest); }
/* A real tooltip rather than the browser's, which truncates and often never
   fires at all on a dense table. */
.fba-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--forest-dark);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}
.fba-btn:hover::after { opacity: 1; }

.fba-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid #cfe0d4;
  background: var(--sage-light);
  color: var(--forest);
}
.fba-pill.archived { border-color: #e4d8c6; background: #faf2e4; color: #8a6a34; }

/* ---------- The popover a button opens ---------- */
.fba-pop {
  position: fixed;
  z-index: 1200;
  min-width: 206px;
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 14px 34px rgba(17, 41, 31, 0.20);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fba-pop-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.fba-pop-item:hover { background: var(--sage-light); }
.fba-pop-item.on { background: var(--sage-light); }
.fba-pop-item.on .fp-label::after { content: ' ✓'; color: var(--forest); }
.fba-pop-item.danger .fp-label { color: #a8322c; }
.fba-pop-item.danger:hover { background: #fbeceb; }
.fba-pop-item .fp-label { font-weight: 600; }
.fba-pop-item .fp-sub { font-size: 10.5px; color: var(--ink-soft); }
.fba-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* ---------- Edit, message and comment modals ---------- */
.fba-modal.fba-wide { max-width: 640px; }
.fba-muted { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; }
.fba-confirm p { margin: 0 0 8px; font-size: 12.5px; }
.fba-confirm p:last-child { color: var(--ink-soft); }
.btn-primary.fba-danger { background: #a8322c; }
.btn-primary.fba-danger:hover { background: #8d2823; }

.fba-thread, .fba-commentlist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.fba-thread-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fba-commentlist { max-height: 240px; overflow-y: auto; }
.fba-msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 8px 10px;
}
.fba-msg .fm-who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.fba-msg .fm-who span { font-weight: 500; color: var(--ink-soft); }
.fba-msg .fm-body { font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }
.fba-del {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
}
.fba-del:hover { color: #a8322c; }

/* ---------- A hundred photos ---------- */
.photo-preview .pp-cell { position: relative; width: 56px; height: 56px; }
.photo-preview .pp-cell img { width: 56px; height: 56px; }
.photo-preview .pp-x {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.photo-preview .pp-x:hover { color: #a8322c; border-color: #a8322c; }
.photo-preview .pp-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(17, 41, 31, 0.72);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0 0 8px 8px;
  z-index: 1;
}
/* Past half a dozen the grid scrolls rather than pushing the form off screen. */
.photo-preview.many { max-height: 198px; overflow-y: auto; padding-right: 4px; }

.gallery-of {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 41, 31, 0.68);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Fixes that have to come after the blocks they correct. */

/* The idle panel is a column of copy now, not a centred line, so it starts at
   the top and scrolls rather than being clipped from both ends. */
.sb-idle { justify-content: flex-start; align-items: stretch; }

/* The table scrolls, so a tooltip sitting above the first row would be cut
   off by the wrapper. On the top row it drops below the button instead. */
.ctable tbody tr:first-child .fba-btn::after,
.ctable tbody tr:nth-child(2) .fba-btn::after { bottom: auto; top: calc(100% + 6px); }

/* ===========================================================================
   Cashback on a homestay. Booked direct, so the night is cheaper to begin
   with and a tenth of it comes back — which is the one number that decides
   between two stays, so it is on the pin as well as in the panel.
   =========================================================================== */
.badge.cash { background: #e8f3ea; color: #1f6b43; }

.price-pin .pp-cb {
  background: #1f6b43;
  color: #fff;
  border-radius: 20px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.02em;
}
.price-pin.selected .pp-cb { background: #fff; color: #1f6b43; }

.cb-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -10px 0 18px;
  font-size: 13px;
  color: #1f6b43;
}
.cb-note b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-note span { color: var(--ink-soft); }

/* ---------- Row two: the main filters ---------- */
/* The question each category is searched by first, as toggles across the top:
   lit means on, clicking the lit one clears it. One row, scrolled sideways on
   a narrow screen rather than wrapped into a third. */
.toprow-filters {
  gap: 8px;
  row-gap: 6px;
  min-height: 0;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
}
.toprow-filters[hidden] { display: none; }

/* Thirteen questions for property once a group is picked, and a header that
   must stay two rows. So the strip scrolls sideways rather than wrapping
   into a third and fourth band: every question is still one gesture away,
   and the rows above it never move. */
.tf-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 1px;
  -webkit-overflow-scrolling: touch;
  /* A question clipped mid-word reads as a bug; faded, it reads as "there
     is more this way", which is what it is. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.tf-main::-webkit-scrollbar { display: none; }

/* The chips sit at the end of the same band, so every live filter is in one
   place with the one button that drops them all. */
.toprow-filters .crumbs { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; overflow: visible; }
.tf-clear {
  flex: 0 0 auto;
  margin-left: auto;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 2px;
}
.tf-clear:hover { color: var(--brand-dark); text-decoration: underline; }
.tf-clear[hidden] { display: none; }

.tf-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tf-toggle:hover { border-color: var(--sage); background: var(--surface); }
.tf-toggle.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* The filters open from the row they live in, directly under the bar they
   narrow — so the search box is one control that does one thing, and every
   filter is in the same band as the chips that show which are on. */
.tf-filters {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tf-filters svg { width: 15px; height: 15px; }
.tf-filters:hover { border-color: var(--sage); background: var(--surface); }
.tf-filters[aria-expanded="true"] {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.tf-fcount {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tf-filters[aria-expanded="true"] .tf-fcount { background: #fff; color: var(--forest); }
.tf-fcount[hidden] { display: none; }

/* ---------- Every sub-filter, as a button in the row ---------- */
/* A category asks six or seven questions and the row used to show two of
   them. Each question is now its own button, saying its own answer once one
   is given, and dropping the whole set of choices when it is opened. The set
   is still radios and checkboxes — the popover is a door, not a <select>. */
.tf-facet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 5px 8px 5px 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tf-facet:hover { border-color: var(--sage); }
.tf-facet[aria-expanded="true"] { border-color: var(--forest); }
.tf-facet.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* The answer stands alone on an answered button, so it gets the room the
   question used to take: wide enough for "Hotels & hospitality" whole. */
.tf-fval {
  font-weight: 600;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-caret { width: 13px; height: 13px; flex: 0 0 13px; opacity: .6; transition: transform .15s; }
.tf-facet.on .tf-caret { opacity: .85; }
.tf-facet[aria-expanded="true"] .tf-caret { transform: rotate(180deg); }

.tf-pop {
  position: absolute;
  z-index: 40;
  width: 330px;
  max-width: calc(100vw - 24px);
  background: #fff;                /* opaque, never translucent */
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 11px 13px 13px;
}
.tf-pop[hidden] { display: none; }
.tf-pop-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
/* The block is on loan from the Filters panel, so it arrives wearing that
   panel's spacing and its own heading — both of which this popover supplies. */
.tf-pop-body .fm-block,
.tf-pop-body .fm-row { padding: 0; margin: 0; }
.tf-pop-body .fm-label { display: none; }
.tf-pop-body .opts,
.tf-pop-body .chips { max-height: 44vh; overflow-y: auto; }
.tf-pop-body .seg,
.tf-pop-body .rng { flex: 1; width: 100%; }

/* How many survived, at the far end of the band the filters live in. */
.toprow-filters .count-pill { flex: 0 0 auto; margin-left: 0; }

/* Homestay or hotel, on the stay itself. */
.badge.kind { background: #e1ecf5; color: #2c5a85; }

/* ---------- What the review sites say ---------- */
/* A score, how many reviews it is from, and which site — in that order,
   because the number decides and the source qualifies it. */
.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.rating .rt-star { color: #e8a33d; font-size: 13px; }
.rating b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rating .rt-n { font-variant-numeric: tabular-nums; }
.rating .rt-src { color: var(--ink-soft); }
.rating .rt-src::before { content: '· '; color: var(--line); }

/* The header is never allowed past two rows, and a phone has no room for the
   whole band side by side — so it scrolls sideways rather than wrapping. */
@media (max-width: 720px) {
  .toprow-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toprow-filters::-webkit-scrollbar { display: none; }
  .tf-main, .toprow-filters .crumbs { flex-wrap: nowrap; }
  .tf-clear { margin-left: 4px; }
}

/* ==========================================================================
   The open web beside a listing
   Verification tags and ticks, review scores, the price comparison, the links
   out, the contact row, the map's summary card, and the four-page flow every
   category ends in.
   ========================================================================== */

/* ---------- One tooltip for the whole page ----------
   Delegated from app.js rather than ::after, so it is never clipped by a
   panel that scrolls and never raced by the browser's own. */
.fb-tip {
  position: fixed;
  z-index: 4000;
  max-width: 310px;
  background: var(--forest-dark);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(17, 41, 31, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.fb-tip.show { opacity: 1; pointer-events: auto; }

/* ---------- Verified / Approx. / Unverified ---------- */
.vtag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
  border: 1px solid transparent;
}
.vtag.v-verified { background: #e3f2e8; color: #156d38; border-color: #b9dfc6; }
.vtag.v-approx { background: #fdf2e3; color: #8a5a17; border-color: #ecd9b4; }
.vtag.v-unverified { background: #f1f0ec; color: var(--ink-soft); border-color: var(--line); }
.vtag .vtick-svg { width: 12px; height: 12px; }

.vtick {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 7px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.vtick .vtick-svg { width: 19px; height: 19px; }
.vtick-svg { fill: currentColor; }
.vtick-svg .vtick-mark { fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.vtick.v-verified { color: #1f8f4e; }
.vtick.v-approx { color: #c99a3f; }
.vtag.v-verified .vtick-svg { fill: #1f8f4e; }

/* The tick's own sheet: every check, and the ones that failed shown as
   plainly as the ones that passed. */
.vsheet-head {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #f4f7f4;
}
.vsheet-head .vtick-svg { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 1px; }
.vsheet-head.v-verified { color: #1f8f4e; }
.vsheet-head.v-approx { color: #c99a3f; }
.vsheet-head.v-unverified { color: var(--ink-soft); }
.vsheet-head div { display: flex; flex-direction: column; gap: 3px; }
.vsheet-head b { font-size: 14px; color: var(--ink); }
.vsheet-head span { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.vk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
}
.vk-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.vk-yes .vk-mark { background: #e3f2e8; color: #156d38; }
.vk-some .vk-mark { background: #fdf2e3; color: #8a5a17; }
.vk-no .vk-mark { background: #f1f0ec; color: var(--ink-soft); }
.vk-text { display: flex; flex-direction: column; gap: 2px; }
.vk-text b { font-size: 12.5px; font-weight: 600; }
.vk-no .vk-text b { color: var(--ink-soft); font-weight: 500; }
.vk-text i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }
.vsheet-foot { margin-top: 10px; font-size: 11px; color: var(--ink-soft); }

/* ---------- The sheet every small popup borrows ---------- */
.fb-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 41, 31, 0.34);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3200;
  padding: 20px;
}
.fb-sheet-overlay.open { display: flex; }
.fb-sheet {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(520px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
.fb-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.fb-sheet-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.fb-sheet-x { border: 0; background: none; font-size: 15px; cursor: pointer; color: var(--ink-soft); }
.fb-sheet-body { padding: 14px 16px 18px; overflow-y: auto; }

/* ---------- Review scores ---------- */
.rate-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.rate-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
a.rate-cell:hover { border-color: var(--sage); background: var(--sage-light); }
.rate-cell .rt-stars { color: #e8a33d; font-size: 11px; letter-spacing: -0.5px; }
.rate-cell b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.rate-cell .rt-src { font-weight: 600; color: var(--forest); }
.rate-cell .rt-out { color: var(--sage); }

/* ---------- Best price ---------- */
.bp {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px 12px;
  margin: 12px 0;
  background: #fbfaf7;
}
.bp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.bp-i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  color: var(--forest);
  text-transform: none;
  letter-spacing: 0;
}
.bp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.bp-row:first-of-type { border-top: 0; }
.bp-row.ours { background: #fff; border-radius: 9px; padding: 9px 10px; border: 1px solid #cfe6d7; }
.bp-who { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 600; }
.bp-who i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.bp-amt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-amt s { font-weight: 500; font-size: 11.5px; color: var(--ink-soft); margin-left: 5px; }
.bp-go { font-size: 11.5px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.bp-go.muted { color: var(--ink-soft); font-weight: 500; }
a.bp-go:hover { text-decoration: underline; }
.bp-win {
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #e3f2e8;
  color: #156d38;
  font-size: 12px;
  font-weight: 600;
}
.bp-win.even { background: #fdf2e3; color: #8a5a17; font-weight: 500; line-height: 1.45; }
.bp-none { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- Links out ---------- */
.ow-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.ow-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.ow-chip span { color: var(--sage); font-weight: 400; }
.ow-chip:hover { border-color: var(--sage); background: var(--sage-light); }
.ow-chip.own { border-color: var(--brand); color: var(--brand-dark); }
.ow-area .ow-chip { background: #fbfaf7; font-weight: 500; }

/* ---------- The action row under the price ---------- */
.act-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.act span { font-size: 13px; line-height: 1; }
/* An action whose name is on hover is a square, not a pill with a gap in it. */
.act.ico { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 10px; }
.act.ico svg { width: 16.5px; height: 16.5px; }
.act svg { width: 15px; height: 15px; flex: 0 0 auto; }
.act:hover { border-color: var(--sage); background: var(--sage-light); }
.act.on { border-color: #f3c3cd; background: #fdecef; color: #b02a46; }
.act-cta {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  padding-inline: 16px;
}
.act-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* ---------- Contact ---------- */
.contact-card .cnum {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
/* Withheld, said out loud. A number that is simply absent reads as a listing
   nobody finished; this is a decision, and it names the door still open. */
.contact-card .cnum.withheld {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-variant-numeric: normal;
  line-height: 1.4;
}
.contact-card .cnum.withheld svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.cbtns { display: flex; flex-wrap: wrap; gap: 7px; }
.cbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.cbtn:hover { border-color: var(--sage); background: var(--sage-light); text-decoration: none; }
.cbtn svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* The one thing a reader who will not write a message still does. */
.cbtn.cb { border-color: #e7d7bb; background: #fdf8ee; color: #7a5f22; }
.cbtn.cb:hover { border-color: #d9c197; background: #fbf1dd; }

/* ---------- Request a call back ---------- */
.cb-wrap { display: flex; flex-direction: column; gap: 9px; }
.cb-for { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.cb-wrap input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
}
.cb-wrap input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.cbtn.wa { color: #0f7a46; border-color: #bfe3cf; background: #effaf3; }
.cbtn.wa:hover { background: #dff3e7; }
.cbtn span { font-size: 13px; line-height: 1; }

/* Amenities as chips rather than one comma-spliced line. */
.amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.amen span {
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--sage-light);
  color: var(--forest);
  font-size: 11.5px;
  font-weight: 500;
}

/* ---------- Gallery ---------- */

.gallery-all {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 41, 31, 0.18);
}
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pgrid button { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; }
.pgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.share-box { display: flex; gap: 8px; margin-bottom: 10px; }
.share-box input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
}
.share-row { display: flex; gap: 7px; }

/* ---------- The card a pin opens ---------- */
.mcard-pop .leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(17, 41, 31, 0.22);
}
.mcard-pop .leaflet-popup-content { margin: 0; width: 268px !important; }
.mcard-pop .leaflet-popup-tip { background: #fff; }
.mcard { font-family: inherit; }
.mc-cover {
  height: 118px;
  background: linear-gradient(140deg, #eef3ee 0%, #e4ece6 55%, #dfe8e2 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-text { padding: 9px 11px 11px; }
.mc-tags { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.mc-cat { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.mc-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mc-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.mc-rate { display: flex; gap: 9px; margin-top: 6px; font-size: 11.5px; color: var(--ink); }
.mc-rate i { font-style: normal; color: var(--ink-soft); margin-left: 4px; }
.mc-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.mc-cb { font-size: 11px; font-weight: 600; color: #156d38; }
.mc-more {
  margin-top: 9px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 8px;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.mc-more:hover { background: var(--brand-dark); }

/* ---------- The four-page flow ---------- */
.flow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 41, 31, 0.38);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3400;
  padding: 20px;
}
.flow-overlay.open { display: flex; }
.flow-modal {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(620px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 11px;
}
.flow-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.flow-x { border: 0; background: none; font-size: 15px; cursor: pointer; color: var(--ink-soft); }
.flow-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 12px;
}
/* The unfilled rail sits behind; the fill rides on top of it. */
.flow-bar::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 76px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  z-index: 0;
}
.flow-fill {
  position: relative;
  z-index: 1;
  height: 4px;
  width: 25%;
  max-width: calc(100% - 76px);
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.18s;
}
.flow-of { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); position: relative; z-index: 1; }
.flow-body { padding: 4px 18px 10px; overflow-y: auto; }
.flow-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}
.flow-who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 12px;
  background: #f6f8f6;
  margin-bottom: 14px;
}
.fw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.flow-who div { display: flex; flex-direction: column; gap: 2px; }
.flow-who b { font-size: 14px; }
.flow-who span { font-size: 11.5px; color: var(--ink-soft); }
.flow-q {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 7px;
  font-size: 13px;
}
.flow-q b { font-weight: 600; }
.flow-q em, .flow-body label em { font-style: normal; color: var(--clay); }
.fq-i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--forest);
  cursor: help;
}
.flow-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.flow-opts .opt {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}
.flow-opts .opt:hover { border-color: var(--sage); background: var(--sage-light); }
.flow-opts .opt.on { background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 600; }
.flow-note { margin-top: 9px; font-size: 11.5px; color: var(--ink-soft); }
.flow-review .fr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 15px 0 6px;
}
.flow-review .fr-head b { font-size: 13px; }
.fr-edit {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}
.fr-edit:hover { text-decoration: underline; }
.fr-file a { font-size: 12.5px; color: var(--brand); }
.fr-file .muted, .flow-review .muted { color: var(--ink-soft); font-size: 12.5px; }
.fr-to {
  margin-top: 16px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f6f8f6;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.flow-done { text-align: center; padding: 26px 10px 18px; }
.fd-tick {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3f2e8;
  color: #156d38;
  font-size: 22px;
  font-weight: 700;
}
.flow-done b { display: block; font-size: 15px; margin-bottom: 5px; }
.flow-done span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 640px) {
  .bp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bp-go { grid-column: 2; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Admin: which categories the public is shown ---------- */
.cat-list { display: grid; gap: 12px; }
.cat-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.cat-block.off { background: #faf9f6; }
.cat-block.off .cat-head b { color: var(--ink-soft); }
.cat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}
.cat-head b { font-size: 14px; }
.cat-count { font-size: 11.5px; color: var(--ink-soft); }
.cat-head .cat-switch { margin-left: auto; }
.cat-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 18px;
  padding: 8px 13px 12px;
}
.cat-block.off .cat-groups { opacity: 0.45; pointer-events: none; }
.cat-group {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
.cg-name { font-size: 12.5px; }
.cat-group.off .cg-name { color: var(--ink-soft); text-decoration: line-through; }
.cg-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cat-group .cat-switch { flex: 0 0 auto; }
.cat-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #156d38;
  cursor: pointer;
  user-select: none;
}
.cat-switch.off { color: var(--ink-soft); }
.cat-switch input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
.cat-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-soft); }
.adm-table .vtag { font-size: 9.5px; padding: 2px 7px; }

/* ---------- The desk: listings and enquiries ---------- */
/* One strip of controls above each desk table: what to do with this view
   (post into it) or how to read it (received / sent). */
.desk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 20px 0;
}
.desk-bar[hidden] { display: none; }
.desk-btn {
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
}
.desk-btn:hover { border-color: var(--sage); color: var(--ink); }
.desk-btn.on { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.desk-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.desk-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.desk-note { font-size: 12px; color: var(--ink-soft); }

/* A whole enquiry, in the same sheet the Verifications list uses. */
.enq-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.enq-kind {
  font-size: 11px;
  font-weight: 700;
  background: var(--sage-light);
  color: var(--forest);
  border-radius: 999px;
  padding: 2px 9px;
}
.enq-site, .enq-about { font-size: 12.5px; color: var(--ink-soft); }
.enq-about { font-weight: 600; color: var(--ink); }
.enq-who { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.enq-body { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; }
.enq-answers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.enq-a {
  display: flex;
  gap: 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.enq-a b { flex: 0 0 46%; color: var(--ink-soft); font-weight: 600; }
.enq-a span { color: var(--ink); font-weight: 600; }
.enq-file { display: inline-block; font-size: 13px; font-weight: 600; color: var(--forest); margin-bottom: 10px; }
.enq-reply { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.enq-states { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.enq-state {
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.enq-state:hover { border-color: var(--sage); color: var(--ink); }
.enq-state.on { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.enq-when { font-size: 11.5px; color: var(--ink-soft); }

/* ---------- The business behind a listing ---------- */
.posted-by {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 7px 10px;
  margin: 10px 0 2px;
  cursor: pointer;
  font-family: inherit;
}
.posted-by:hover { border-color: var(--sage); }
.posted-by img, .pb-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: 0 0 28px;
  object-fit: cover;
}
.pb-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-light);
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
}
.pb-text { display: flex; flex-direction: column; min-width: 0; }
.pb-text b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-text i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.pb-go { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--forest); flex: 0 0 auto; }

.biz-wait { font-size: 13px; color: var(--ink-soft); }
.biz-top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.biz-logo { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: 0 0 42px; }
.biz-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.biz-kind { font-size: 12.5px; color: var(--ink-soft); }
.biz-about { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.biz-lines { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.biz-lines a { color: var(--forest); font-weight: 600; }
.biz-group { margin-bottom: 12px; }
.biz-group > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 5px; }
.biz-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  padding: 7px 10px;
  margin-bottom: 4px;
  cursor: pointer;
}
.biz-row:hover { border-color: var(--sage); }
.biz-row span { font-size: 13px; font-weight: 600; color: var(--ink); }
.biz-row i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }

/* ---------- A business's logo, on its own form ---------- */
.logo-row { display: flex; align-items: center; gap: 10px; }
.logo-img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); }
.logo-note { font-size: 12px; color: var(--ink-soft); }

.um-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: 1px;
}

/* ---------- Admin: which kind of account ---------- */
.atag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.atag.a-personal { background: #eef0ec; color: var(--ink-soft); }
.atag.a-business { background: var(--sage-light); color: var(--forest); }
.adm-acc {
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.adm-acc:hover { border-color: var(--sage); color: var(--forest); }

/* ---------- What readers here score a listing ---------- */
/* Kept visually apart from .rate-row above: that one carries scores copied
   off Google and TripAdvisor, this one is ours and is the only one published
   as an aggregate rating. */
.fb-rate {
  display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0;
  background: #fffaf0; border: 1px solid #f0e3c8; border-radius: 999px;
  padding: 4px 11px 4px 9px; cursor: pointer; font: inherit; color: var(--ink);
}
.fb-rate:hover { border-color: #e2a033; background: #fff6e6; }
.fb-rate.none { background: var(--surface); border-color: var(--line); }
.fb-rate b { font-size: 13.5px; }
.fb-rate i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.fr-stars { color: #e2a033; letter-spacing: .5px; font-size: 12.5px; }
.mc-ours i { color: #a8822f; }

/* The score sheet: the live aggregate, then the radios, then the notes. */
.rv-wrap { display: grid; gap: 14px; }
.rv-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  background: var(--sage-light); border-radius: 12px; padding: 11px 13px;
}
.rv-live b { font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1; }
.rv-live i { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.rv-live dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 2px 14px; margin: 5px 0 0; width: 100%; font-size: 12px;
}
.rv-live dl > div { display: flex; gap: 8px; justify-content: space-between; }
.rv-live dt { color: var(--ink-soft); }
.rv-live dd { margin: 0; font-weight: 600; }

.rv-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13.5px; color: var(--ink-soft);
}
/* Radios, so every score is visible at once; reversed so hovering a star
   lights the ones below it rather than above. */
.rv-set { display: flex; flex-direction: row-reverse; flex: none; }
.rv-set label { cursor: pointer; }
.rv-set input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-set span { font-size: 21px; line-height: 1; color: #dcd8cb; padding: 0 1px; }
.rv-set label:hover span,
.rv-set label:hover ~ label span,
.rv-set label:has(input:checked) span,
.rv-set label:has(input:checked) ~ label span { color: #e2a033; }
.rv-set input:focus-visible ~ span { outline: 2px solid var(--brand); border-radius: 3px; }

.rv-form textarea, .rp-wrap textarea, .rp-wrap input[type="email"] {
  width: 100%; margin-top: 8px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; resize: vertical;
}
.rv-form textarea:focus, .rp-wrap textarea:focus, .rp-wrap input:focus {
  outline: none; border-color: var(--brand);
}
.rv-foot { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.rv-msg { font-size: 12.5px; color: var(--ink-soft); }
.rv-msg.bad { color: #b4452c; }
.rv-msg.good { color: var(--brand-dark); }

.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rv-list b { margin: 0 6px; }
.rv-who { font-weight: 600; }
.rv-list time { color: var(--ink-soft); font-size: 11.5px; margin-left: 6px; }
.rv-list p { margin: 3px 0 0; color: var(--ink-soft); }

/* ---------- Reporting an error ---------- */
.rp-opts { display: grid; gap: 1px; }
.rp-opts label {
  display: flex; gap: 9px; align-items: center; padding: 7px 9px;
  border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.rp-opts label:hover { background: var(--sage-light); }
.rp-opts input { accent-color: var(--brand); }
.rp-done { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* The last line of every panel: the listing's own page, and how to say it is
   wrong. One place rather than inside all five renderers. */
.sb-foot {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--line);
}
.sbf-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 12px 'Inter', sans-serif; color: var(--ink-soft); text-decoration: underline;
}
.sbf-link:hover { color: var(--clay); }

/* Four underlined phrases wrapped onto two lines at the foot of every panel.
   The same four gestures as line icons are one row, and each still says
   itself in full on hover — the words are not lost, they are just not
   spending an inch of a 420px panel. */
.sb-foot { gap: 8px; }
.sbf-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.sbf-ico svg { width: 16px; height: 16px; }
.sbf-ico:hover { border-color: var(--sage); background: var(--sage-light); color: var(--ink); }
.sbf-ico.on { border-color: #e7cf9a; background: #fdf7e7; color: #8a6d23; }

/* ---------- Admin: a note's listing and its state ---------- */
.adm-listing {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: 500 12.5px 'Inter', sans-serif; color: var(--brand-dark); text-decoration: underline;
}
.adm-listing:hover { color: var(--forest); }
.adm-state {
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font: 600 11px 'Inter', sans-serif; padding: 3px 10px; background: var(--surface);
  color: var(--ink-soft);
}
.adm-state:hover { border-color: var(--brand); }
.adm-state.s-sent { background: #fdf1e4; border-color: #f0d9bd; color: var(--clay-dark); }
.adm-state.s-seen { background: var(--sage-light); border-color: #cfe0d4; color: var(--forest); }
.adm-state.s-shortlisted { background: #e8f1fb; border-color: #cbddf0; color: #2b5d8f; }
.adm-state.s-closed { background: #f2f0e9; color: var(--ink-soft); }

/* ---------- The poster's own profiles ---------- */
/* Icons rather than four more labelled chips: the glyph is recognised faster
   than the word is read, and these belong beside the phone number because
   they are one more way of reaching the same person. */
.soc-row { display: flex; gap: 8px; margin-top: 10px; }
.soc {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-soft); text-decoration: none;
  transition: color .12s, border-color .12s, transform .12s;
}
.soc svg { width: 17px; height: 17px; }
.soc:hover { color: var(--forest); border-color: var(--sage); transform: translateY(-1px); }

/* The same four in the posting form: the icon is the label, so the row costs
   one line instead of four. */
.soc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field .soc-field, .soc-field { display: flex; align-items: center; gap: 8px; }
.soc-field > svg { width: 17px; height: 17px; flex: none; color: var(--ink-soft); }
.soc-field input { flex: 1; min-width: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- A profile, read as a grid ---------- */
/* Nobody scrolls a profile: they run an eye down the same parameters on every
   one they open, so they are all in one place, in one order, every time. */
.mp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 12px 0 16px; background: var(--line);
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
}
.mp-grid > div { background: var(--surface); padding: 7px 10px; min-width: 0; }
/* An odd number of parameters would otherwise leave the grid's own background
   showing as a stray empty cell, so the last one takes the whole row. */
.mp-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mp-grid dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); font-weight: 700;
}
.mp-grid dd {
  margin: 1px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- A note to yourself ---------- */
.sb-note {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 11px;
  background: #fffbea; border: 1px solid #efe0ad;
}
.sbn-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #8a6d1f; font-weight: 700;
}
.sbn-edit {
  background: none; border: 0; padding: 0; cursor: pointer; text-transform: none;
  letter-spacing: 0; font: 500 11.5px 'Inter', sans-serif; color: #8a6d1f;
  text-decoration: underline;
}
.sb-note p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.sbf-link.on { color: var(--clay); font-weight: 600; }

.nt-wrap { display: flex; flex-direction: column; gap: 10px; }
.nt-top {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); font-weight: 700;
}
.nt-i {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: help;
  font: 700 9px 'Inter', sans-serif; line-height: 1; padding: 0; text-transform: none;
}
.nt-wrap textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px;
  font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--ink); background: var(--surface);
  resize: vertical;
}
.nt-hide { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* ---------- Everything written down or put away ---------- */
.nl-empty { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0; }
.nl-list { list-style: none; margin: 0; padding: 0; }
.nl-list li { padding: 11px 0; border-top: 1px solid var(--line); }
.nl-list li:first-child { border-top: 0; }
.nl-list li.gone { opacity: 0.62; }
.nl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nl-head b { font-size: 14px; }
.nl-cat { font-size: 11px; color: var(--ink-soft); }
.nl-hid {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--clay-dark); background: #f7e9df; border-radius: 6px; padding: 2px 6px;
}
.nl-addr { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.nl-list p {
  margin: 6px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  padding-left: 9px; border-left: 2px solid #efe0ad;
}
.nl-acts { display: flex; gap: 14px; margin-top: 7px; }
.nl-acts button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 12px 'Inter', sans-serif; color: var(--ink-soft); text-decoration: underline;
}
.nl-acts button:hover { color: var(--clay); }

/* ---------- One line at the foot of the window ---------- */
/* Only ever shown where the thing that just happened can be undone. */
.fb-flash {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  z-index: 3000; display: flex; align-items: center; gap: 14px;
  background: var(--forest-dark); color: #f3f6f3; border-radius: 11px;
  padding: 10px 15px; font-size: 13px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.fb-flash.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fb-flash button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 13px 'Inter', sans-serif; color: var(--sage); text-decoration: underline;
}

/* ---------- The searches, one ⌕ away ---------- */
/* A chip that looks exactly like the ones beside it would be saying the same
   thing they say — "the listing is here" — which a constructed search cannot
   promise. So it is drawn as what it is: an offer to go and look. */
.ow-chip.find {
  cursor: pointer; font-family: inherit; color: var(--ink-soft);
  border-style: dashed;
}
.ow-chip.find:hover { color: var(--forest); border-color: var(--forest); border-style: solid; }
.fd-list { display: grid; gap: 2px; }
.fd-list a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 11px;
  border-radius: 10px; color: var(--ink); font-size: 13.5px; text-decoration: none;
}
.fd-list a:hover { background: var(--sage-light); }
.fd-list b { flex: none; min-width: 96px; color: var(--forest); }
.fd-list i { font-style: normal; font-size: 12px; color: var(--ink-soft); }

/* ==========================================================================
   Projects: the registered development behind a listing
   A second layer on the same map, a card that answers "is this legal and who
   is behind it", and the filing itself in the left panel.
   ========================================================================== */

/* The toggle that puts the layer on, beside the filters it is not one of. */
.tf-proj { display: inline-flex; align-items: center; gap: 6px; }
.tf-proj svg { width: 15px; height: 15px; }
.tf-proj[hidden] { display: none; }

/* A project pin is deliberately unlike a listing pin: a filing is a different
   kind of object and must not read as another flat for sale. */
.proj-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 50% 50% 4px;
  background: #d2622f;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .12s;
}
.proj-pin:hover { transform: translate(-50%, -100%) scale(1.12); }
.proj-pin svg { width: 16px; height: 16px; }

.pcard-pop .leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: #fff;                /* opaque, never translucent */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.pcard-pop .leaflet-popup-content { margin: 0; width: 304px !important; }
.pcard-pop .leaflet-popup-tip { background: #fff; }

.pcard { position: relative; padding: 14px 14px 12px; }
.pc-x {
  position: absolute;
  top: 8px; right: 8px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}
.pc-x:hover { background: var(--surface); color: var(--ink); }
.pc-top { display: flex; gap: 11px; padding-right: 20px; }
.pc-mark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #fbeadf;
  color: #d2622f;
}
.pc-mark svg { width: 22px; height: 22px; }
.pc-head { min-width: 0; }
.pc-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pc-dev { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.pc-where {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pc-where svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--ink-soft); }

.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.pc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
}
.pc-tag.cat { background: #fcf4dc; border-color: #ecdca8; color: #7a6220; }
.pc-tag.doc { color: var(--ink); }
.pc-ico { width: 12px; height: 12px; flex: 0 0 12px; }

.pc-rera {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.pc-rera b { color: var(--ink); font-weight: 700; }
.pc-rera i { font-style: normal; }

.pc-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.pc-go {
  flex: 1 1 auto;
  border: none;
  border-radius: 9px;
  background: #d2622f;
  color: #fff;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.pc-go:hover { background: #b9521f; }
.pc-call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
  background: #1f9d55;
  color: #fff;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.pc-call:hover { background: #188346; }
.pc-call svg { width: 14px; height: 14px; }

/* ---------- The filing in the panel ---------- */

.badge.proj { background: #fbeadf; color: #a8471c; }
.sb-dev { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }

.rera-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 12px;
  color: var(--ink-soft);
}
.rera-strip b { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.rera-strip i { font-style: normal; }
.rera-strip a { color: var(--brand); }

/* Three tabs, never more: a filing read in a narrow column has to be scanned,
   and nine stacked sub-sections cannot be. */
.ptabs {
  display: flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface);
}
.ptab {
  flex: 1 1 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  padding: 7px 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.ptab:hover { color: var(--ink); }
.ptab.on { background: #fff; color: var(--forest); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.sbt-n {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pblk {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px 2px;
  margin: 0 0 10px;
  background: #fff;
}
.pblk-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
  text-transform: capitalize;
}
.pblk .kv { margin-bottom: 9px; }
.pstate {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pstate.p-valid { background: #e3f3e8; color: #1f6b3c; }
.pstate.p-expired, .pstate.p-revoked { background: #fbe4e1; color: #a3301f; }

/* A promise the filing makes, folded until asked for. */
.pq {
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.pq summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.pq summary::-webkit-details-marker { display: none; }
.pq summary::before {
  content: '+';
  flex: 0 0 13px;
  color: var(--ink-soft);
  font-weight: 700;
}
.pq[open] summary::before { content: '–'; }
.pq.na summary { color: var(--ink-soft); }
.pq p { margin: 0 0 10px 21px; color: var(--ink-soft); line-height: 1.55; }
.pq-state {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pq + .sb-section-title { margin-top: 18px; }

.pdocs { list-style: none; margin: 0 0 16px; padding: 0; }
.pdocs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink);
}
.pdocs li span { flex: 0 0 auto; color: var(--ink-soft); font-size: 11.5px; }
.pdocs a { color: var(--brand); text-decoration: none; }
.pdocs a:hover { text-decoration: underline; }

.plist { list-style: none; margin: 0 0 16px; padding: 0; }
.plist button {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.plist button:hover { border-color: var(--sage); background: var(--surface); }
.plist b { font-weight: 600; }
.plist span { flex: 0 0 auto; color: var(--forest); font-weight: 700; }

/* On a flat's own panel: the one line that opens the development behind it. */
.proj-line {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 7px 9px 7px 11px;
  margin: 0 0 18px;
  font-family: inherit;
  text-align: left;
}
.proj-line:hover { border-color: #e7b899; background: #fdf6f1; }
.pl-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 2px 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
/* The development's own page: the whole filing, the questions asked about
   it and what people who bought in it say. */
.pl-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #f0d6c3;
  color: #d2622f;
  background: #fff;
}
.pl-page svg { width: 15px; height: 15px; }
.pl-page:hover { background: #fbeadf; }
/* The place in an address is a page too. */
.sb-place { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.sb-place:hover { color: var(--forest); }
.pc-name a { color: inherit; text-decoration: none; }
.pc-name a:hover { text-decoration: underline; }
.pc-page {
  flex: 0 0 auto;
  font: 600 12px 'Inter', sans-serif;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 2px;
  white-space: nowrap;
}
.pc-page:hover { color: var(--forest); text-decoration: underline; }
.pl-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fbeadf;
  color: #d2622f;
}
.pl-mark svg { width: 17px; height: 17px; }
.pl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pl-text b { font-size: 13px; font-weight: 700; color: var(--ink); }
.pl-text i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-go {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #d2622f;
}