/* ═══ Nkwata · The vertical bar, and what the new listings need ═════════
   Four tabs above search: rent, stay, flats, spaces. They sit above the
   city bar because the question "what am I looking for" comes before
   "where", and because a hall in Limbe and a room in Limbe have nothing
   in common except the town.

   Colour discipline: nothing new is introduced. The bar is built out of
   the same walnut, plaster, brass and ember the rest of the platform
   uses. A fifth colour would be a fifth thing to remember.
   ═══════════════════════════════════════════════════════════════════ */

.vertbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 0 4px;
  scroll-snap-type: x proximity;
}
.vertbar::-webkit-scrollbar { display: none; }

.vertchip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background .18s var(--ease);
}
.vertchip svg { opacity: .62; }
.vertchip:hover { border-color: var(--line-2); color: var(--ink); }

.vertchip.on {
  background: var(--walnut);
  border-color: var(--walnut);
  color: var(--on-dark);
}
.vertchip.on svg { opacity: 1; color: var(--brass-2); }

/* A count, not a claim. */
.vertchip u {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tint, var(--plaster-2));
  color: var(--muted);
}
.vertchip.on u { background: rgba(255,255,255,.14); color: var(--on-dark-2); }

/* A tab with nothing behind it says so rather than looking identical to
   one that is full. */
.vertchip.empty { opacity: .55; }
.vertchip.empty.on { opacity: 1; }

/* One line under the bar: what this tab is, and how the money moves.
   The money sentence is there on every tab, every time, because the
   single reason people do not book online in this country is that they
   do not know where their money goes. */
.vertlead {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 2px 0 14px;
  font-size: 14px;
  color: var(--muted);
}
.vertlead b { color: var(--ink); font-weight: 600; }
.vertlead span { color: var(--moss); }

/* ── On the card ──────────────────────────────────────────────────── */
.hc-cap,
.hc-util {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.hc-cap svg,
.hc-util svg { opacity: .7; }
.hc-util {
  gap: 12px;
  color: var(--moss);
  font-weight: 600;
}
.hc-util svg { color: var(--moss); opacity: .85; }

/* The price unit, never dropped. */
.hc-price b { font-size: 17px; }
.hc-price small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ── How the money moves, stated on the listing page ──────────────── */
.moneyflow {
  display: grid;
  gap: 2px;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: clip;
  background: var(--line);
}
.moneyflow > div {
  background: var(--plaster);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.moneyflow .mf-n {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--walnut);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.moneyflow h4 { font-family: var(--body); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.moneyflow p  { font-size: 13px; color: var(--muted); line-height: 1.5; }
.moneyflow .mf-amt { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ── Capacity, the three numbers ──────────────────────────────────── */
.capgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: clip;
  margin: 18px 0;
}
.capgrid div { background: var(--plaster); padding: 16px 14px; text-align: center; }
.capgrid b { display: block; font-family: var(--mono); font-size: 22px; color: var(--ink); }
.capgrid span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── A flood warning, because Kumba's council publishes which quarters
      flood and no rental platform in this country repeats it ────────── */
.floodnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-s);
  background: var(--ember-wash);
  border: 1px solid rgba(184,68,42,.22);
  font-size: 13px;
  color: var(--ember-2);
  line-height: 1.5;
  margin: 14px 0;
}
.floodnote b { font-weight: 700; }

@media (max-width: 560px) {
  .vertchip { padding: 10px 13px; font-size: 13px; }
  .vertchip span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
}