/* ──────────────────────────────────────────────
   MANOR — Consolidated page styles (all sub-pages)
────────────────────────────────────────────── */

/* ===== Shared form utilities ===== */

/* the longest form on the site — fields need room to breathe between them */
.form-group { margin-bottom: 30px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.required-star { color: var(--accent); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width: 100%; padding: 12px 2px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--bronze);
  border-radius: 0; outline: none; -webkit-appearance: none;
  transition: border-color var(--trans-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-bottom-color: var(--ink); box-shadow: none; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted); opacity: 0.55; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.form-error { font-size: 12px; color: var(--danger); font-weight: 500; margin-top: 6px; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23807D7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
}

/* Date/time inputs — keep the native picker but match the line style */
input[type="date"].form-input, input[type="time"].form-input { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; padding: 2px; border-radius: 2px;
  transition: opacity var(--trans-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }
input[type="date"]::-webkit-datetime-edit { color: var(--ink); }
input[type="date"]:invalid::-webkit-datetime-edit { color: var(--muted); }

/* Shared success state */
.success-state { display: none; text-align: center; padding: 48px 16px; }
.success-state.show { display: block; }
.success-icon {
  width: 76px; height: 76px; border-radius: 2px;
  background: var(--teal-bg); border: 1px solid var(--teal-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--teal-ink);
}
.success-icon svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 2; }
.success-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 30px; color: var(--ink); margin-bottom: 12px; }
.success-desc { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 480px; margin: 0 auto 32px; }
.success-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.success-actions .btn { margin: 0 !important; }

/* ===== pages/browse.html ===== */
/* ── Density ──
   Gutters are clamped rather than fixed at 40px so a phone gets real margins
   instead of the page pressing against both edges, and the desktop gets more
   air than it used to. Vertical padding grew across the board — the site read
   as cramped because every band was doing the same tight 36–40px. */
.page-hero {
  background: transparent;
  padding: calc(var(--nav-h-rest) + 60px) clamp(22px, 5vw, 48px) 64px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.page-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.page-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 64px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 14px;
}
.page-title em { font-style: italic; color: var(--accent); }
.page-subtitle { font-size: 16px; color: var(--muted); font-weight: 400; line-height: 1.6; }

/* Filter bar — every control shares one 42px line so nothing floats above.
   Deliberately NOT sticky: it used to pin under the navbar and the two bars
   spent a third of a laptop screen on chrome before the first listing, with
   a seam between them that opened and closed as the navbar condensed. It now
   scrolls away and the header takes over (css/search-dock.css), so there is
   one band of chrome at any moment, never two. */
.filter-bar {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px clamp(22px, 5vw, 48px);
  position: relative;
  z-index: 10;
}
/* One row, one baseline. Every control in it is exactly 42px tall and
   vertically centred, so the labels sit on a single line across the bar
   whether the control is a dropdown, a toggle or the budget field. It does
   not wrap: a filter bar that grows a second line as the window narrows
   moves the listings underneath it. */
.filter-bar-inner {
  /* The same width the navbar gives it (css/search-dock.css) — deliberately,
     so the row is identical in both seats and the handover changes nothing
     but its vertical position. When the two widths differed, one seat centred
     while the other start-aligned and the controls jumped 103px sideways. */
  max-width: min(1240px, calc(100vw - 360px));
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  /* Centred, and the same size as the docked row, on purpose: at the moment
     the header takes the controls they must not appear to jump. Left-aligned
     in this column they used to leap 213px sideways and shrink 6px in a
     single frame, which read as a snap rather than a handover. */
  /* `safe` matters: a centred flex row that overflows spills equally off BOTH
     ends, and the start is then unreachable — you cannot scroll left past the
     container edge, so the first filter is permanently half-cut. `safe center`
     centres while it fits and falls back to start-aligned when it does not. */
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }
.filter-bar-inner > * { flex: 0 0 auto; }

/* `hidden` has to actually hide. The UA rule behind the attribute is
   `[hidden] { display: none }`, which any class rule setting a display beats
   — and .kd-wrap sets `display: inline-block`. So a ward control switched off
   in JS stayed fully visible in the row. */
.filter-bar-inner [hidden],
.nd-adopted [hidden] { display: none !important; }

/* The controls share one spec so nothing in the row is a pixel out: same
   height, same corner, same hairline, same text size, same padding. */
.filter-bar-inner .kd-trigger,
.filter-bar-inner .filter-select,
.filter-bar-inner .filter-toggle,
.filter-bar-inner .sort-select,
.filter-bar-inner .pr-btn,
.filter-bar-inner .mp-trigger {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.filter-select {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--trans-fast);
  outline: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23807D7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.filter-select:focus { border-color: var(--bronze); }
body.dv .filter-select { background-position: left 12px center; padding-right: 16px; padding-left: 32px; }

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--trans-fast);
  font-family: inherit;
}
.filter-toggle.active { border-color: var(--bronze); background: rgba(126,123,120,0.14); color: var(--ink); }

/* "Near me" — the browser gives a coordinate, js/islands.js turns it into an
   island. It reports what it found in its own label (the island name, or why
   it could not), because a location button that silently does nothing is
   indistinguishable from one that is broken. */
.loc-btn { gap: 7px; white-space: nowrap; }
.loc-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
.loc-btn:hover svg { opacity: 1; }
.loc-btn:disabled { opacity: 0.6; cursor: progress; }
.loc-btn.loc-on {
  border-color: var(--teal-border);
  background: var(--teal-bg);
  color: var(--ink);
}
.loc-btn.loc-on svg { opacity: 1; color: var(--teal-ink); }
.filter-toggle:hover { border-color: var(--bronze); color: var(--ink); }

.toggle-dot {
  width: 18px; height: 10px;
  border-radius: 10px;
  background: var(--hairline);
  position: relative;
  transition: background var(--trans-fast);
  flex-shrink: 0;
}
.toggle-dot::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform var(--trans-fast);
}
.filter-toggle.active .toggle-dot { background: #009999; }
.filter-toggle.active .toggle-dot::after { transform: translateX(8px); }

.filter-results {
  /* Inline with the controls, not shoved to the far edge — the docked row
     reads the same way, so the two rows hold identical content. */
  order: 99;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  color: var(--bronze);
  align-self: center;
}


/* ── Price range filter ── */
.pr-wrap { position: relative; }

.pr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px; cursor: pointer;
  white-space: nowrap; font-size: 14px; font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline); border-radius: 2px;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  font-family: inherit;
}
.pr-btn svg { opacity: 0.55; flex-shrink: 0; transition: opacity var(--trans-fast); }
.pr-btn .pr-chevron { opacity: 0.4; transition: transform var(--trans-fast), opacity var(--trans-fast); }
.pr-btn:hover { border-color: var(--bronze); color: var(--ink); }
.pr-btn:hover svg { opacity: 0.8; }
.pr-wrap.pr-active .pr-btn { border-color: var(--bronze); background: rgba(126,123,120,0.14); color: var(--ink); }
.pr-wrap.pr-active .pr-btn svg { opacity: 1; }
.pr-wrap.pr-active .pr-btn .pr-chevron { transform: rotate(180deg); }

.pr-panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  padding: 28px 26px 24px; width: 360px; z-index: 200;
  opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pr-panel.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }

.pr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pr-header-label { font-size: 10.5px; font-weight: 600; color: var(--bronze); text-transform: uppercase; letter-spacing: 0.26em; }
.pr-clear {
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: none; border: none; padding: 4px 8px; border-radius: 2px;
  transition: color var(--trans-fast), background var(--trans-fast);
  font-family: inherit;
}
.pr-clear:hover { color: var(--ink); background: rgba(126,123,120,0.14); }

.pr-wrap[hidden] { display: none; }
.pr-context {
  font-size: 13px; color: var(--muted); line-height: 1.6; margin: -8px 0 20px;
}
.pr-context[hidden], .pr-note[hidden] { display: none; }
.pr-note { font-size: 12.5px; color: var(--teal-ink); line-height: 1.55; margin: 12px 0 0; }

/* The two figures are the editor — tap either and type an exact amount */
.pr-vals { display: flex; align-items: stretch; gap: 10px; margin-bottom: 26px; }
.pr-val-box {
  flex: 1; background: transparent; cursor: text;
  border: 1px solid var(--hairline); border-radius: 2px; padding: 14px 16px;
  transition: border-color var(--trans-fast);
}
.pr-val-box:focus-within { border-color: var(--bronze); }
.pr-val-lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; }
.pr-val-field { display: flex; align-items: baseline; gap: 6px; }
.pr-cur { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--bronze); flex-shrink: 0; }
.pr-val-input {
  width: 100%; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.1;
}
.pr-val-sep { color: var(--bronze); font-size: 18px; align-self: center; flex-shrink: 0; line-height: 1; }
.pr-slider-wrap[hidden] { display: none; }

/* Dual-handle range slider */
.pr-slider-wrap { position: relative; height: 48px; margin-bottom: 22px; }
.pr-track-bg {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 0; right: 0; height: 4px;
  background: var(--hairline);
}
.pr-track-fill {
  position: absolute; top: 0; height: 100%;
  background: var(--accent);
  left: 0; width: 100%;
}
.pr-range {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 100%; margin: 0; padding: 0; height: 5px;
  -webkit-appearance: none; appearance: none;
  background: none; outline: none; pointer-events: none;
}
.pr-range#prMin { z-index: 3; }
.pr-range#prMax { z-index: 4; }
.pr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: all; cursor: grab;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pr-range::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transform: scale(1.08);
}
.pr-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.pr-range::-moz-range-thumb {
  pointer-events: all; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Shortcuts built from the live listings — each one has homes behind it */
.pr-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-presets[hidden] { display: none; }
.pr-presets button {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 2px; padding: 6px 12px;
  cursor: pointer; font-family: inherit;
  transition: all var(--trans-fast); line-height: 1.4;
}
.pr-presets button:hover { border-color: var(--bronze); color: var(--ink); background: rgba(126,123,120,0.14); }
.pr-count { color: var(--bronze); font-weight: 500; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ── Which currency the renter is budgeting in ─────────────────────
   Not a converter. It chooses which set of landlord-entered prices the
   whole panel is drawn from, so it sits above everything it governs. */
.pr-curbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.pr-curbar-lbl {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.pr-curseg { flex-shrink: 0; }
.pr-body[hidden], .pr-empty[hidden] { display: none; }

/* Homes exist, none of them priced in this currency. */
.pr-empty { text-align: left; }
.pr-empty-title {
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 500;
  font-size: 19px; color: var(--ink); line-height: 1.3; margin-bottom: 8px;
}
.pr-empty-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.pr-empty-btn { width: 100%; justify-content: center; }

/* Active filters — what is narrowing the list, each removable on its own */
.active-filters {
  max-width: 1100px; margin: 12px auto 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.active-filters[hidden] { display: none; }
.afchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: rgba(126,123,120,0.14); border: 1px solid var(--hairline);
  border-radius: 2px; padding: 5px 10px; cursor: pointer; font-family: inherit;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}
.afchip:hover { border-color: var(--bronze); }
.afchip-x { font-size: 15px; line-height: 1; color: var(--bronze); }
.afchip:hover .afchip-x { color: var(--ink); }

@media (max-width: 768px) {
  /* js/popover.js places and clamps this against the viewport, so it needs a
     width it can measure rather than one that stretches to whatever box it
     happens to be in. */
  .pr-panel { width: min(360px, calc(100vw - 24px)); }
}

/* Sort */
.sort-select {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23807D7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Browse content */
.browse-content {
  background: transparent;
  padding: 46px clamp(22px, 5vw, 48px) 92px;
}
.browse-inner { max-width: 1100px; margin: 0 auto; }


/* Empty state */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
.empty-state[hidden] { display: none; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-title { font-family: 'Newsreader', serif; font-size: 24px; color: var(--ink); margin-bottom: 8px; }
.empty-desc { font-size: 15px; max-width: 460px; margin: 0 auto; line-height: 1.7; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
/* Nothing listed yet is a beginning, not a fault — give it the room a
   headline deserves rather than the tone of a failed search. */
.empty-first { padding: 96px 20px 104px; }
.empty-first .empty-title { font-size: clamp(26px, 4vw, 34px); margin-bottom: 12px; }

/* Load more */
.load-more-wrap { text-align: center; margin-top: 48px; }

/* Responsive */
/* The filter breakpoint is the navbar's, not the page's: past 900px the nav
   links become a hamburger and the filters take that seat, so the two have to
   change hands at the same width or they disagree in between. */
@media (max-width: 900px) {
  /* Identical to the desktop row, only smaller — the same controls in the
     same order, scrolling sideways instead of hiding behind a button. */
  .filter-bar-inner { gap: 8px; }
  .filter-bar-inner .kd-trigger,
  .filter-bar-inner .filter-select,
  .filter-bar-inner .filter-toggle,
  .filter-bar-inner .sort-select,
  .filter-bar-inner .pr-btn,
  .filter-bar-inner .mp-trigger {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    padding-inline: 12px;
  }
  .filter-bar-inner .kd-wrap { width: auto; }
  .filter-bar-inner .kd-trigger { width: auto; }
  .filter-results { margin: 0 !important; }
}
@media (max-width: 768px) {
  /* phones were the worst of it — 20px gutters and tight bands */
  .page-hero { padding: calc(var(--nav-h-rest) + 40px) 22px 52px; }
  .filter-bar { padding: 14px 22px; }
  .browse-content { padding: 36px 22px 84px; }
}
@media (max-width: 480px) {
  .page-title { font-size: clamp(32px, 10vw, 50px); }
  .listings-grid { grid-template-columns: 1fr; }
}

/* ===== pages/post-listing.html ===== */
.post-page {
  padding-top: var(--nav-h-rest);
  min-height: 100vh;
  background: transparent;
}

.post-hero {
  background: transparent;
  padding: 44px 40px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.post-hero-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.post-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.post-title em { font-style: italic; color: var(--accent); }
.post-sub { font-size: 15px; color: var(--muted); font-weight: 400; }

/* Progress steps */
.progress-bar {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 40px;
  position: sticky;
  top: var(--nav-h);
  transition: top var(--trans-med);
  z-index: 50;
}
.progress-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.progress-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  z-index: 0;
}
.progress-step:last-child::after { display: none; }
.progress-dot {
  width: 32px; height: 32px;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  z-index: 1;
  transition: all var(--trans-med);
}
.progress-step.active .progress-dot { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.progress-step.done .progress-dot { border-color: var(--bronze); background: transparent; color: var(--bronze); }
.progress-step.done::after { background: var(--bronze); }
.progress-label { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 6px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.progress-step.active .progress-label { color: var(--ink); }

/* Draft bar — says where the unfinished listing went, so quitting the form
   isn't a leap of faith. The draft lives on the account, not this device. */
.draft-bar {
  max-width: 640px;
  margin: 22px auto -14px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--muted);
}
.draft-bar[hidden] { display: none; }
.draft-msg { flex: 1; min-width: 180px; }
.draft-discard {
  font-size: 12px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--hairline); padding-bottom: 1px;
}
.draft-discard:hover { color: var(--accent); border-bottom-color: var(--accent); }
.draft-link {
  font-size: 12px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--bronze); padding-bottom: 1px;
}
.draft-link:hover { border-bottom-color: var(--ink); }

/* Draft chooser — shown on arrival when an unfinished listing is waiting */
.draft-chooser {
  display: none; position: fixed; inset: 0; z-index: 950;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dc-panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); max-width: 440px; width: 100%;
  padding: 28px 26px; text-align: center;
}
.dc-eyebrow {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bronze); margin-bottom: 12px;
}
.dc-panel h3 {
  font-family: 'Newsreader', serif; font-weight: 500; font-size: 23px;
  color: var(--ink); margin-bottom: 16px;
}
.dc-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 14px; text-align: left;
}
.dc-summary { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.dc-summary:empty::before { content: 'Only just started'; color: var(--muted); }
.dc-when { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.dc-more { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.dc-more:empty { display: none; }
.dc-actions { display: flex; flex-direction: column; gap: 9px; }
.dc-actions .btn { justify-content: center; }
.dc-discard {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 6px 0; background: none; border: none;
}
.dc-discard:hover { color: var(--danger); }
.dc-foot { font-size: 11.5px; color: var(--muted); margin-top: 14px; }

/* Form */
.post-content { padding: 50px clamp(22px, 5vw, 48px) 96px; }
.post-form { max-width: 640px; margin: 0 auto; }

.form-step { display: none; }
.form-step.active { display: block; }

.step-heading {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 6px;
}
.step-subheading { font-size: 14px; color: var(--muted); margin-bottom: 32px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-grid.single { grid-template-columns: 1fr; }

.mvr-input { position: relative; }
.mvr-input .currency-label {
  position: absolute;
  left: 2px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 500; color: var(--bronze);
  pointer-events: none;
}
body.dv .mvr-input .currency-label { left: auto; right: 2px; }
.mvr-input .form-input { padding-left: 38px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
body.dv .mvr-input .form-input { padding-left: 2px; padding-right: 38px; }

/* Location pin picker (post-listing) */
/* Own stacking context so Leaflet's internal z-indexes stay inside the map */
.map-picker { border-radius: 2px; overflow: hidden; border: 1px solid var(--hairline); cursor: crosshair; position: relative; z-index: 0; }
.post-map { width: 100%; height: 220px; background: var(--surface); }
.map-picker-tag {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  margin-top: 10px;
}
.map-picker-tag svg { width: 15px; height: 15px; stroke: var(--bronze); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.map-picker-tag.tagged { color: var(--ink); font-weight: 600; }
.map-picker-tag.tagged svg { stroke: var(--ink); }
.post-map .leaflet-tile-pane,
.detail-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.88) sepia(0.14); }

/* Checkbox group */
.checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--trans-fast);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.checkbox-item:hover { border-color: var(--bronze); }
.checkbox-item:has(input:checked) { border-color: #009999; background: rgba(0,153,153,0.10); color: var(--ink); }
.checkbox-item input { display: none; }
.checkbox-box {
  width: 18px; height: 18px;
  border-radius: 2px;
  border: 1px solid var(--bronze);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--trans-fast);
  font-size: 11px;
  color: transparent;
}
.checkbox-item:has(input:checked) .checkbox-box { border-color: #009999; background: #009999; color: #04211F; }

/* Photo upload */
.photo-upload-area {
  border: 1px dashed var(--bronze);
  border-radius: 2px;
  padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--trans-fast), background var(--trans-fast);
  background: transparent;
}
.photo-upload-area:hover { border-color: var(--ink); background: rgba(126,123,120,0.08); }
.upload-icon { font-size: 40px; margin-bottom: 12px; color: var(--bronze); }
.upload-title { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.upload-sub { font-size: 13px; color: var(--muted); }

/* Segmented control — replaces on/off toggles where there are 3 states */
.seg { display: flex; border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; }
.seg button {
  flex: 1; padding: 11px 10px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--muted); background: transparent; cursor: pointer;
  border: none; border-right: 1px solid var(--hairline);
  transition: background var(--trans-fast), color var(--trans-fast);
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--teal-bg); color: var(--teal-ink); font-weight: 600; }
@media (max-width: 560px) { .seg { flex-direction: column; } .seg button { border-right: none; border-bottom: 1px solid var(--hairline); } .seg button:last-child { border-bottom: none; } }

/* A compact pair of choices that has to sit inside a control rather than
   across a form row — the budget panel's currency, and anywhere else two
   short words are the whole question. Stays horizontal on a phone: two
   three-letter options never need a column. */
.seg-xs button { padding: 7px 14px; font-size: 12px; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  .seg-xs { flex-direction: row; }
  .seg-xs button { border-right: 1px solid var(--hairline); border-bottom: none; }
  .seg-xs button:last-child { border-right: none; }
}
/* Two long options read better stacked than squeezed side by side. */
@media (min-width: 561px) { .seg-stack button { flex: 1; } }

/* Selectable chips — tenants, rules, pets, amenities */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px;
  transition: border-color var(--trans-fast), background var(--trans-fast), color var(--trans-fast);
}
.chip:hover { border-color: var(--bronze); }
.chip.on { border-color: var(--teal-border); background: var(--teal-bg); color: var(--teal-ink); }
.chip .ic, .bill-name .ic { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.chip.on .ic { opacity: 1; }

/* Room Arrangement — only for a room let inside a shared apartment, so it
   is set apart from the fields every listing answers. */
.room-arrange {
  border: 1px solid var(--hairline); border-left: 2px solid var(--teal-border);
  border-radius: 2px; padding: 22px 22px 6px; margin-bottom: 30px;
}
.room-arrange[hidden] { display: none; }
.room-arrange-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.room-arrange-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.room-arrange-preview {
  margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--hairline); border-radius: 2px;
  font-size: 13.5px; color: var(--teal-ink); background: var(--teal-bg);
}
.room-arrange-preview[hidden] { display: none; }
@media (max-width: 560px) { .room-arrange { padding: 18px 16px 4px; } }

/* Bills — one responsibility per row */
.bills { display: flex; flex-direction: column; }
.bill-row {
  display: grid; grid-template-columns: 1fr 190px; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.bill-row:last-child { border-bottom: none; }
.bill-name { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.bill-row .kd-form .kd-trigger { padding: 8px 2px; font-size: 14px; }
@media (max-width: 560px) { .bill-row { grid-template-columns: 1fr; gap: 2px; } }

/* Quiet hours — only appears once the rule is picked */
.quiet-hours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 2px; }
.quiet-hours .qh-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.quiet-hours input[type="time"] { width: auto; flex: 0 0 auto; padding: 6px 2px; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; }
.quiet-hours .qh-sep { font-size: 13px; color: var(--muted); }

/* Deposit breakdown — the number a renter actually has to find on day one */
/* ── Pricing rows on the listing form ─────────────────────────────
   One row per amount, one column per currency, so the pair can be read
   across instead of hunted for in two mirrored blocks. The USD column
   only exists on a listing that carries USD — a MVR-only landlord
   is never shown a USD field, an empty one included. */
.price-rows {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
  padding: 4px 20px 18px;
  margin-bottom: 18px;
  /* label + one column per currency the listing carries */
  --pay-cols: minmax(0, 1.1fr) minmax(0, 1fr);
}
.price-rows.has-mvr.has-usd { --pay-cols: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
/* A currency the listing isn't priced in has no column at all — an empty
   field would read as one the landlord still has to fill in. */
.price-rows .pay-mvr, .price-rows .pay-usd { display: none; }
.price-rows.has-mvr .pay-cell.pay-mvr, .price-rows.has-usd .pay-cell.pay-usd { display: flex; }
.price-rows.has-mvr .pay-head-cur.pay-mvr,
.price-rows.has-usd .pay-head-cur.pay-usd { display: block; }
/* One currency and the column heading says nothing the label doesn't */
.price-rows:not(.has-mvr) .pay-head, .price-rows:not(.has-usd) .pay-head { display: none; }
.price-rows.has-mvr.has-usd .pay-head { display: grid; }

.pay-head, .pay-row {
  display: grid;
  grid-template-columns: var(--pay-cols);
  gap: 10px 16px;
  align-items: end;
}
.pay-head {
  padding: 16px 0 2px;
  align-items: baseline;
}
.pay-head-cur {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--bronze);
}
/* One currency and the column headings say nothing the labels don't */
.price-rows:not(.has-usd) .pay-head { display: none; }

.pay-row { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.pay-row:last-child { border-bottom: none; }
.pay-row-head { grid-column: 1; align-self: center; }
.pay-row-label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
}
.pay-row-note {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin: 4px 0 0;
}
.pay-row-select { margin-top: 10px; }

/* One currency's amount: its code, then the field. */
.pay-cell { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pay-cur {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--bronze); flex-shrink: 0;
}
.pay-cell .form-input {
  flex: 1; min-width: 0; padding-left: 0;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}

/* ── A figure the form worked out ─────────────────────────────────
   Deliberately NOT an input. A greyed-out box with digits in it reads as an
   empty field somebody has to fill in; this reads as an answer. */
.pay-auto {
  flex: 1; min-width: 0; padding: 8px 0 9px;
  font-family: var(--font-num); font-size: 17px; font-weight: 500;
  color: var(--ink); border-bottom: 1px dashed var(--hairline);
}
.pay-auto[hidden] { display: none; }
/* Where the figures came from, said once for the whole row */
.pay-auto-note {
  margin: 6px 0 0; font-size: 11.5px; color: var(--teal-ink); line-height: 1.5;
}
.pay-auto-note[hidden] { display: none; }
.pay-edit {
  grid-column: 2 / -1; justify-self: start;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.pay-edit:hover { color: var(--ink); }
.pay-edit[hidden] { display: none; }

/* "optional" beside a label, so a blank field is plainly allowed */
.opt-tag {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bronze); margin-left: 6px;
}

/* ── Day-one summary ──────────────────────────────────────────────
   Same currencies, same order and same amounts as the rows above it. */
.dep-preview {
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 2px 18px 6px; margin-bottom: 24px;
  --dep-cols: 1;
}
.dep-head, .dep-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(var(--dep-cols), minmax(0, 1fr));
  gap: 12px; align-items: baseline;
}
.dep-head {
  padding: 14px 0 10px; border-bottom: 1px solid var(--hairline);
  font-size: 12px; color: var(--muted);
}
.dep-head b {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--bronze); text-align: right;
}
.dep-row { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted); }
.dep-row:last-child { border-bottom: none; }
.dep-row b {
  font-family: var(--font-num); font-weight: 500; color: var(--ink); text-align: right;
}
.dep-row.dep-total { font-weight: 600; color: var(--ink); }
.dep-row.dep-total b { color: var(--teal-ink); font-size: 15px; }

/* Phones: the label takes its own line and the currencies sit side by side
   underneath, so neither amount is squeezed into a few characters. */
@media (max-width: 640px) {
  .price-rows { padding: 4px 16px 16px; }
  .pay-head { display: none; }
  /* Label on its own line, the currencies side by side underneath */
  .pay-row { grid-template-columns: minmax(0, 1fr); }
  .price-rows.has-mvr.has-usd .pay-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-row-head { grid-column: 1 / -1; }
  .pay-edit { grid-column: 1 / -1; }
  .dep-head, .dep-row { grid-template-columns: minmax(0, 1.2fr) repeat(var(--dep-cols), minmax(0, 1fr)); }
  .dep-head span, .dep-row span { font-size: 12.5px; }
}

/* Uploaded photo previews */
.photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.photo-thumb {
  position: relative; flex-shrink: 0;
  width: 80px; height: 80px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Remove control: a fixed 30px disc, 8px in from the corner, the same on
   every screen. min-height undoes the site-wide 44px touch minimum, which
   stretched this into an oval on phones — the tap target is widened by the
   invisible box below instead, so the disc itself never grows. */
.photo-thumb-remove {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background var(--trans-fast), transform var(--trans-fast);
}
body.dv .photo-thumb-remove { right: auto; left: 8px; }
.photo-thumb-remove svg { width: 13px; height: 13px; display: block; }
.photo-thumb-remove:hover { background: rgba(0, 0, 0, 0.82); }
.photo-thumb-remove:active { background: rgba(0, 0, 0, 0.82); transform: scale(0.95); }
/* 44 × 44 of tappable area around a 30px disc, centred on it and still
   inside the thumbnail, so a thumb-sized finger never misses. */
.photo-thumb-remove::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* Char counter */
.char-count { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--bronze); text-align: right; margin-top: 6px; }

/* Property snapshot (listing detail) */
.snap { display: flex; flex-direction: column; }
.snap-row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.snap-row:last-child { border-bottom: none; }
.snap-k { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.snap-v { font-size: 14.5px; color: var(--ink); }

/* Bills read as a small table — label left, who pays right */
.snap-bills { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 28px; }
.sb { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.sb span { font-size: 13px; color: var(--muted); }
.sb b { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }

/* Lists become chips so items stay separable at a glance */
.snap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.snap-chips span {
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 4px 10px; font-size: 12.5px; color: var(--ink);
}
.snap-note { font-size: 15px; color: var(--muted); line-height: 1.8; margin-top: 18px; }
@media (max-width: 560px) { .snap-row { grid-template-columns: 1fr; gap: 4px; } }

/* Toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  margin-bottom: 12px;
  cursor: pointer;
}
.toggle-label-group {}
.toggle-label-group strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle-label-group span { font-size: 12px; color: var(--muted); }
.toggle-switch {
  width: 44px; height: 24px;
  border-radius: 24px;
  background: var(--hairline);
  position: relative;
  flex-shrink: 0;
  transition: background var(--trans-fast);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform var(--trans-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-row.on .toggle-switch { background: #009999; }
.toggle-row.on .toggle-switch::after { transform: translateX(20px); }

/* Form nav */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  margin-top: 32px;
  gap: 12px;
}
.form-nav-right { display: flex; gap: 10px; }

@media (max-width: 768px) {
  .post-hero { padding: 46px 20px 34px; }
  .progress-bar { padding: 14px 20px; }
  .post-content { padding: 34px 20px 72px; }
  .form-grid { grid-template-columns: 1fr; }
  .checkbox-group { grid-template-columns: 1fr; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav-right { width: 100%; flex-direction: column; }
  .form-nav .btn { width: 100%; justify-content: center; }
  .progress-label { display: none; }
}

/* ===== pages/get-verified.html ===== */
.verify-page { padding-top: var(--nav-h-rest); }

.verify-hero {
  background: transparent;
  padding: 60px 40px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.verify-hero-inner { max-width:700px; margin:0 auto; position:relative;z-index:1; }
.verify-badge-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-bg);
  border: 1px solid var(--teal-border);
  color: var(--teal-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 2px;
  margin-bottom: 28px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.verify-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 60px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.verify-title em { font-style:italic; color:var(--accent); }
.verify-sub { font-size:17px; color:var(--muted); font-weight:400; max-width:480px; margin:0 auto; line-height:1.7; }

/* What it means */
.verify-means { background: transparent; padding:52px 40px; position: relative; }
.verify-means-inner { max-width:1100px; margin:0 auto; }
.means-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.means-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 36px 30px;
  text-align: center;
  transition: transform var(--trans-med), border-color var(--trans-med);
}
.means-card:hover { transform: translateY(-4px); border-color: var(--bronze); }
.means-icon { font-size: 36px; margin-bottom: 16px; color: var(--bronze); }
.means-title { font-family:'Newsreader',serif; font-weight:500; font-size:20px; color:var(--ink); margin-bottom:10px; }
.means-desc { font-size:14px; color:var(--muted); line-height:1.75; }

/* Form */
.verify-form-section { background:var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding:52px 40px; }
.verify-form-inner { max-width:600px; margin:0 auto; }
.verify-form-title { font-family:'Newsreader',serif; font-weight:500; font-size:32px; color:var(--ink); margin-bottom:6px; }
.verify-form-sub { font-size:15px; color:var(--muted); margin-bottom:36px; }

.upload-box {
  border:1px dashed var(--bronze);
  border-radius:2px;
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  transition:all var(--trans-fast);
  background:transparent;
}
.upload-box:hover { border-color:var(--ink); background:rgba(126,123,120,0.08); }
.upload-box .upload-title { font-weight:600; font-size:15px; color:var(--ink); margin:10px 0 4px; }
.upload-box .upload-sub { font-size:12px; color:var(--muted); }

/* Chosen files listed inside the upload box */
.upload-box .upload-files { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.upload-box .upload-files span {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size:12px; color:var(--ink);
  border:1px solid var(--teal-border); background:var(--teal-bg);
  border-radius:2px; padding:6px 12px; word-break:break-all;
}

/* Phone fields — fixed +960 prefix, 7 local digits in the input */
.phone-wrap { display:flex; align-items:stretch; }
.phone-wrap .phone-prefix {
  display:flex; align-items:center; padding:0 13px;
  border:1px solid var(--hairline); border-right:none; border-radius:2px 0 0 2px;
  background:rgba(126,123,120,0.08); color:var(--muted);
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size:13.5px; letter-spacing:.04em;
  user-select:none;
}
.phone-wrap .form-input { flex:1; border-radius:0 2px 2px 0; }

/* "You're verified" / "under review" — replaces the application form */
.verified-state { display:none; text-align:center; padding:48px 16px; }
.verified-state.show { display:block; animation: vsIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes vsIn { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
.vs-badge {
  width:88px; height:88px; border-radius:50%;
  background:var(--teal-bg); border:1px solid var(--teal-border); color:var(--teal-ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
  animation: vsPop .8s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.vs-badge svg { width:40px; height:40px; stroke:currentColor; fill:none; }
.vs-badge.pending { background:transparent; border:1px dashed var(--bronze); color:var(--bronze); animation:none; }
@keyframes vsPop { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
.vs-title { font-family:'Newsreader', serif; font-weight:500; font-size:clamp(28px,4vw,40px); color:var(--ink); margin-bottom:12px; }
.vs-title em { color:var(--accent); font-style:italic; }
.vs-sub { font-size:16px; color:var(--muted); line-height:1.7; max-width:480px; margin:0 auto 24px; }
.vs-row { display:flex; justify-content:center; }
@media (prefers-reduced-motion: reduce) {
  .verified-state.show, .vs-badge { animation:none; }
}

.note-box {
  background:transparent;
  border:1px solid var(--hairline);
  border-left:2px solid var(--bronze);
  border-radius:2px;
  padding:16px 20px;
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
  margin-top:20px;
}
.note-box strong { color: var(--ink); }

/* Status section */
.verify-status { background: transparent; padding:48px 40px; }
.verify-status-inner { max-width:700px; margin:0 auto; }
.status-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
.status-card {
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:24px 20px;
  text-align:center;
}
.status-icon { font-size:28px; margin-bottom:10px; color: var(--bronze); }
.status-name { font-weight:700; font-size:14px; color:var(--ink); margin-bottom:6px; }
.status-desc { font-size:12px; color:var(--muted); line-height:1.5; }

@media (max-width:768px) {
  .verify-hero { padding:54px 20px 44px; }
  .verify-means, .verify-form-section, .verify-status { padding:52px 20px; }
  .means-grid { grid-template-columns:1fr; margin-top: 32px; }
  .status-cards { grid-template-columns:1fr; }
}

/* ===== pages/how-it-works.html ===== */
.hiw-page { padding-top: var(--nav-h-rest); }

.hiw-hero {
  background: transparent;
  padding: 96px 40px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hiw-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.hiw-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 22px;
}
.hiw-eyebrow::before, .hiw-eyebrow::after {
  content: ''; display: block; width: 28px; height: 1px; background: var(--bronze); opacity: 0.6;
}
.hiw-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 76px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-bottom: 20px;
}
.hiw-title em { font-style: italic; color: var(--accent); }
.hiw-sub {
  font-size: 17px; color: var(--muted); font-weight: 400; line-height: 1.75;
  max-width: 520px; margin: 0 auto;
}

/* Why section */
.why-section {
  background: transparent;
  padding: 56px 40px;
  position: relative;
}
.why-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.why-quote {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 48px 56px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.why-quote::before {
  content: '"';
  position: absolute;
  top: -20px; left: 32px;
  font-family: 'Newsreader', serif;
  font-size: 200px;
  color: rgba(126,123,120,0.12);
  line-height: 1;
  pointer-events: none;
}
.why-quote-text {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  line-height: 1.55;
  position: relative;
  z-index: 1;
  max-width: 700px;
}
.why-quote-text em { color: var(--accent); font-style: normal; }

/* The rules in detail */
.rules-section {
  background: transparent;
  padding: 48px 40px;
  position: relative;
}
.rules-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.rule-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.rule-row:first-child { padding-top: 0; }
.rule-row:last-child { border-bottom: none; }
.rule-num-big {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bronze);
  -webkit-text-stroke: 0;
}
.rule-content-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
}
.rule-content-desc { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 600px; }

/* For tenants & landlords */
.for-section {
  background: transparent;
  padding: 52px 40px;
  position: relative;
}
.for-inner { max-width: 1100px; margin: 0 auto; }
.for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.for-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.for-card-header {
  padding: 32px 32px 28px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.for-card-header.dark {
  background: var(--bg);
}
.for-card-header.gold {
  background: var(--bg);
}
.for-card-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 6px;
  color: var(--ink);
}
.for-card-header.dark .for-card-title,
.for-card-header.gold .for-card-title { color: var(--ink); }
.for-card-sub { font-size: 14px; color: var(--muted); }
.for-card-header.dark .for-card-sub,
.for-card-header.gold .for-card-sub { color: var(--muted); opacity: 1; }
.for-card-body { padding: 28px 32px; }
.for-list { display: flex; flex-direction: column; gap: 14px; }
.for-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.for-check {
  width: 22px; height: 22px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bronze);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CTA band */
.hiw-cta { background: var(--surface); border-top: 1px solid var(--hairline); padding: 60px 40px; text-align: center; }
.hiw-cta-inner { max-width: 600px; margin: 0 auto; }
.hiw-cta-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 12px 0 16px;
}
.hiw-cta-title em { font-style: italic; color: var(--accent); }
.hiw-cta-sub { font-size: 16px; color: var(--muted); margin-bottom: 36px; line-height: 1.7; }
.hiw-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .hiw-hero { padding: 56px 20px; }
  .why-section, .rules-section, .for-section, .hiw-cta { padding: 52px 20px; }
  .why-quote { padding: 32px 26px; }
  .rule-row { grid-template-columns: 52px 1fr; gap: 18px; }
  .rule-num-big { font-size: 26px; }
  .for-grid { grid-template-columns: 1fr; }
}

/* ===== pages/listing-detail.html ===== */
.detail-page {
  padding-top: var(--nav-h-rest);
  position: relative;
}

/* Gallery — main frame + thumbnail strip */
.gallery {
  background: transparent;
  padding: 28px 40px 0;
}
.gallery-inner { max-width: 1100px; margin: 0 auto; }

.gallery-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  display: block;
  padding: 0;
  cursor: zoom-in;
}
.gallery-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.gallery-frame:hover img { transform: scale(1.02); }
.gallery-count {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 12px; color: #F4F1EC;
  background: rgba(13,11,11,0.75);
  border: 1px solid var(--hairline);
  padding: 4px 10px; border-radius: 2px;
  pointer-events: none;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bronze) transparent;
  /* centred like the lightbox strip; "safe" keeps the first thumbs
     reachable when there are enough photos to overflow */
  justify-content: center;
  justify-content: safe center;
}
.gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
  transition: opacity var(--trans-fast), border-color var(--trans-fast);
  background: var(--surface);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 0.9; }
.gallery-thumb.active { opacity: 1; border-color: var(--ink); }

/* Legacy gallery grid (kept for safety) */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 280px 180px;
  gap: 8px;
  border-radius: 2px;
  overflow: hidden;
}
.gallery-main { grid-row: 1 / 3; }
.gallery-main, .gallery-grid > div { overflow: hidden; }
.gallery-cell {
  position: relative; width: 100%; height: 100%; padding: 0; border: none;
  display: block; cursor: pointer; overflow: hidden; background: var(--surface);
}
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.gallery-cell:hover img { transform: scale(1.05); }
.gallery-more-badge {
  position: absolute; inset: 0; background: rgba(13,11,11,0.55);
  display: flex; align-items: center; justify-content: center;
  color: #F4F1EC; font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 9000; display: none;
  align-items: center; justify-content: center; padding: 40px;
  background: rgba(13,11,11,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  flex-direction: column; gap: 14px;
}
.lightbox.open { display: flex; }
.lightbox > img.zoomed { cursor: zoom-out; transform: scale(2.2); }
.lightbox > img { cursor: zoom-in; transition: transform .35s var(--ease); max-width: 92vw; max-height: 72vh; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lb-close, .lb-nav { position: absolute; background: var(--surface); border: 1px solid var(--hairline); color: var(--ink); width: 46px; height: 46px; border-radius: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--trans-fast); }
.lb-close { top: 24px; right: 24px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 24px; } .lb-next { right: 24px; }
.lb-close:hover, .lb-nav:hover { border-color: var(--bronze); }
.lb-close svg, .lb-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Lightbox thumbnails */
.lb-thumbs {
  display: flex; gap: 8px; max-width: min(92vw, 760px);
  overflow-x: auto; padding: 4px; flex-shrink: 0;
  scrollbar-width: thin; scrollbar-color: var(--bronze) transparent;
}
.lb-thumb {
  flex: 0 0 auto; width: 78px; aspect-ratio: 4 / 3; padding: 0;
  border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden;
  background: var(--surface); cursor: pointer; opacity: 0.5;
  transition: opacity var(--trans-fast), border-color var(--trans-fast);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.active { opacity: 1; border-color: var(--ink); }
@media (max-width: 560px) { .lb-thumb { width: 58px; } }

/* Breadcrumb — items share one baseline; links must not stretch taller */
.breadcrumb {
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: nowrap;
  overflow: hidden;
}
.breadcrumb a,
.breadcrumb span {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}
.breadcrumb a { cursor: pointer; color: var(--muted); transition: color var(--trans-fast); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { color: var(--bronze); }
.breadcrumb-current { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout */
.detail-layout {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 40px 72px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

/* Left col */
.detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.detail-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.detail-island {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Room in Apartment: the arrangement, said once, next to the title */
.detail-room-line { font-size: 15.5px; color: var(--teal-ink); margin: 0 0 14px; line-height: 1.5; }
.detail-room-line[hidden] { display: none; }
.detail-section[hidden] { display: none; }

.detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }

.detail-price-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 28px;
  display: grid;
  /* Amounts don't wrap, so the columns have to be able to drop to one
     rather than push a long figure past the edge of a clipped box. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.price-item label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 8px;
}
/* ── An amount, in every currency the listing carries ─────────────
   One line per currency, stacked: the price the home is advertised at,
   then the amount the landlord takes in the other currency underneath it,
   quieter. Never side by side — two amounts on one line wrap at whatever
   character the column happens to end on and read as one long number. */
.price-item .price-val {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.price-item .price-amt {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.12;
  white-space: nowrap;          /* an amount never breaks mid-figure */
}
.price-item .price-amt.is-alt {
  font-size: 19px;
  color: var(--muted);
}
.price-item .price-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.price-item-pay .price-pay {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
/* The one line that stops a pair of prices reading as a conversion. */
.price-manual-note {
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  margin: -22px 0 32px;
}
.price-manual-note[hidden] { display: none; }

.detail-section { margin-bottom: 36px; }
.detail-section-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.detail-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.chip-icon { font-size: 16px; color: var(--bronze); }

.detail-desc { font-size: 15px; color: var(--muted); line-height: 1.85; }

/* Location map tag */
.detail-map-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid var(--hairline);
  padding: 7px 14px; border-radius: 2px; margin-bottom: 14px;
}
.detail-map-tag svg { width: 15px; height: 15px; stroke: var(--bronze); fill: none; stroke-width: 1.8; flex-shrink: 0; }
/* z-index 0 is load-bearing, not decoration. Leaflet stacks its own panes at
   400–700 (tiles, markers, popups), and without a stacking context here those
   numbers are measured against the whole page — so the map painted straight
   over the sticky contact bar (200) and the insight cards (60) whenever it
   scrolled past them. Same guard as .map-picker and .mp-map. */
.detail-map {
  position: relative; z-index: 0;
  width: 100%; height: 260px; border-radius: 2px;
  border: 1px solid var(--hairline); overflow: hidden; background: var(--surface);
}
.detail-map-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
.detail-map-link:hover { text-decoration: underline; }

/* Right sticky col */
.detail-sidebar { position: sticky; top: calc(var(--nav-h) + 12px); transition: top var(--trans-med); }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--trans-med);
}
.contact-card:hover { border-color: var(--bronze); }
/* Featured — a gold edge on the contact card, and nothing else. The card is
   where the reader acts, so the promotion is marked once at that moment
   rather than tinting the whole page gold. Subtle by design: enough to
   register, not enough to compete with the price above it.

   Drawn as a strip inside the card rather than as border-left, because a
   gradient border would have to be border-image, and border-image paints all
   four sides and discards the radius. The card already clips to its own
   corners (overflow: hidden), so the strip picks them up for free. */
.contact-card { position: relative; }
.contact-card.is-featured::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #F2DFA4 0%, #C8A75A 50%, #6E5A22 100%);
  z-index: 1; pointer-events: none;
}
/* The title-row badge. flex-shrink so a long title never squeezes it. */
.detail-featured { flex-shrink: 0; padding-top: 6px; }
.detail-featured[hidden] { display: none; }
.contact-card-header {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-price-big {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* The MVR the landlord accepts, under the USD price rather than
   instead of it. Both are theirs; neither was worked out from the other. */
.contact-price-alt {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--muted);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.contact-price-alt[hidden] { display: none; }
.contact-price-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.contact-price-note {
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
  margin: 12px 0 0; text-align: center;
}
.contact-price-note[hidden] { display: none; }
.contact-deposit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex-wrap: wrap;
}
/* Two deposits stack under the pill rather than running on past it */
.contact-deposit-row > span:last-child {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.contact-deposit-amt { white-space: nowrap; }
.contact-deposit-amt.is-alt { font-size: 12.5px; opacity: 0.8; }
.contact-card-body { padding: 24px; }
.landlord-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  margin-bottom: 20px;
}
.landlord-big-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(126,123,120,0.2);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.landlord-info-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.landlord-info-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.contact-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--accent);
  color: #F4F1EC;
  border: none;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--trans-fast);
  position: relative; overflow: hidden;
}
.btn-whatsapp:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-call {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--trans-fast);
}
.btn-call:hover { border-color: var(--bronze); color: var(--ink); }
.report-link {
  display: block;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  margin-top: 14px;
  padding: 6px 0;
  cursor: pointer;
  transition: color var(--trans-fast);
}
.report-link:hover { color: var(--danger); }

/* Mobile sticky CTA */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(13,11,11,0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  padding: 14px 20px;
  z-index: 200;
  gap: 10px;
}
.mobile-cta-price { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 20px; color: var(--ink); }
.mobile-cta-sub { font-size: 12px; color: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; margin-top: 20px; padding: 0 20px 110px; }
  .detail-sidebar { display: none; }
  .mobile-cta { display: flex; align-items: center; }
  .gallery { padding: 24px 20px 0; }
  .gallery-frame { aspect-ratio: 4 / 3; max-height: 320px; }
  .gallery-thumb { width: 84px; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 220px; }
  .gallery-main { grid-row: 1; }
  .gallery-img.g2, .gallery-img.g3 { display: none; }
  .breadcrumb { padding: 0 20px; margin-top: 14px; }
}


/* ---- Report an issue (public end of the Property Record) ---- */
.report-modal {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.report-modal[hidden] { display: none; }
.report-panel {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; padding: 28px 26px 24px;
}
.report-panel h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.report-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.report-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; min-height: 0;
  font-size: 22px; line-height: 1; color: var(--muted); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}
.report-close:hover { color: var(--ink); background: rgba(126,123,120,0.14); }
body.dv .report-close { right: auto; left: 12px; }
.report-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; margin-bottom: 20px; }
.report-check input { width: 17px; height: 17px; min-height: 0; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }
.report-actions { display: flex; gap: 10px; align-items: center; }
.report-actions .btn { flex: 1; justify-content: center; }
.report-done {
  position: absolute; inset: 0; background: var(--surface); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 30px;
}
.report-done[hidden] { display: none; }
.report-done p { font-size: 14.5px; color: var(--ink); line-height: 1.65; margin: 0; max-width: 300px; }
.report-done-icon {
  width: 46px; height: 46px; border-radius: 9999px; background: var(--teal-bg);
  border: 1px solid var(--teal-border); color: var(--teal-ink);
  display: flex; align-items: center; justify-content: center;
}
.report-done-icon svg { width: 20px; height: 20px; }

/* ============================================================
   AUTH (login) + SUPPORT
   ============================================================ */

/* ---- Login / Signup ---- */
.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: transparent; padding: 96px 24px 56px; }
.auth-left { display: flex; align-items: center; justify-content: center; width: 100%; }
.auth-card { width: 100%; max-width: 396px; }
.auth-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; }
.auth-h1 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(30px,4vw,42px); letter-spacing: -.02em; color: var(--ink); margin-bottom: 10px; }
.auth-sub { font-size: 15px; color: var(--muted); margin-bottom: 30px; }
.auth-field { margin-bottom: 20px; }
.auth-field .form-label { margin-bottom: 8px; display: block; }
/* Wraps instead of squashing: on a narrow phone "Remember me" and
   "Forgot password?" used to be pressed against each other on one line. */
.auth-rowx {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px;
  margin: 6px 0 24px; font-size: 13px;
}
.auth-rowx label {
  display: flex; align-items: center; gap: 9px;
  color: var(--muted); cursor: pointer;
  min-height: 40px;                     /* a real tap target, not a 13px line */
}
/* One checkbox treatment for both pages — sized, aligned and on-brand when
   checked. The default tick was tiny and sat off the text baseline. */
.auth-rowx input[type="checkbox"],
.auth-terms input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.auth-link { color: var(--accent); font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-btn { width: 100%; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.auth-social { width: 100%; justify-content: center; gap: 10px; background: transparent; border: 1px solid var(--hairline); color: var(--ink); }
.auth-social:hover { border-color: var(--bronze); }
.auth-social svg { width: 18px; height: 18px; }
.auth-foot { text-align: center; font-size: 14px; color: var(--muted); margin-top: 26px; }
.auth-right { position: relative; overflow: hidden; background: var(--surface); }
.auth-right img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.auth-right::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,11,11,.82), transparent 55%); }
.auth-quote { position: absolute; left: 44px; right: 44px; bottom: 48px; z-index: 2; }
.auth-quote .aq-mark { font-family: 'Newsreader', serif; font-size: 24px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.auth-quote .aq-by { margin-top: 14px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-right { display: none; } }
@media (max-width: 480px) {
  /* More air on a phone, not less — this screen was the most cramped one. */
  .auth { padding: 92px 22px 48px; }
  .auth-left { padding: 0; }
  .auth-h1 { font-size: clamp(26px, 8vw, 36px); margin-bottom: 12px; }
  .auth-sub { margin-bottom: 32px; }
  .auth-card { max-width: 100%; }
  .auth-field { margin-bottom: 22px; }
  .auth-foot { margin-top: 30px; }
  /* stack the two so neither gets clipped or crushed */
  .auth-rowx { justify-content: flex-start; gap: 2px 16px; }
  .auth-rowx .auth-link { min-height: 40px; display: inline-flex; align-items: center; }
}

/* Google GIS button container */
.g-signin-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

/* Two-column form row */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form-row-2 { grid-template-columns: 1fr; } }

/* Auth password field with toggle */
.pw-field { position: relative; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; display: flex; align-items: center; min-height: 0;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pw-field .form-input { padding-right: 36px; }

/* ---- Support ---- */
.sup { padding: 0 24px; }
.sup-block { max-width: 920px; margin: 0 auto; padding: 52px 0; }
.sup-block.tight { max-width: 760px; }
.sup-block + .sup-block { border-top: 1px solid var(--hairline); }
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.faq-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; transition: border-color var(--trans-fast); }
.faq-item:hover { border-color: var(--bronze); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.faq-chev { transition: transform var(--trans-fast); color: var(--bronze); flex-shrink: 0; }
.faq-item.open .faq-chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 22px 20px; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.faq-item.open .faq-a { max-height: 260px; }
.sup-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
/* Column, so the two buttons sit on one line however long the description
   above them runs — the WhatsApp one wraps to two lines and the Email one
   doesn't, and the buttons were landing at different heights because of it. */
.sup-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; padding: 28px; display: flex; flex-direction: column; }
.sup-card-ico { width: 46px; height: 46px; border-radius: 2px; background: transparent; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sup-card-ico svg { width: 22px; height: 22px; stroke: var(--bronze); fill: none; stroke-width: 1.8; }
.sup-card h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.sup-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; flex: 1 1 auto; }
/* .btn carries no border and .btn-ghost adds 1px, so a filled button and an
   outlined one are 2px apart in height. Both cards here hold one of each, side
   by side — a transparent border on the filled one makes them the same box and
   the pair line up exactly. */
.sup-card .btn { border: 1px solid transparent; }
.sup-report { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; padding: clamp(24px,4vw,40px); margin-top: 28px; }
.sup-report .form-group { margin-bottom: 16px; }
@media (max-width: 680px) { .sup-cards { grid-template-columns: 1fr; } .sup-block { padding: 48px 0; } }


/* ============================================================
   LEGAL (privacy / terms) + CONTACT
   ============================================================ */
/* Legal pages — hotel-register ledger: numbered clauses on hairlines.
   The hero and the clauses share one column (see .legal-hero) so the title
   sits directly above the text instead of on a wider, separate grid. */
.legal { max-width: 868px; margin: 0 auto; padding: 8px 24px 32px; counter-reset: clause; }

/* Legal hero — a title block, not a section: no screen-deep padding. */
.page-hero.legal-hero {
  max-width: 868px;
  margin: 76px auto 0 !important;
  padding: 44px 24px 20px !important;
}
.page-hero.legal-hero .page-hero-inner { max-width: none; }
.legal-updated {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 28px;
}
/* Intro paragraph (right after the updated line) reads bigger, like a preamble */
.legal > .legal-updated + p {
  font-family: 'Newsreader', serif;
  font-size: 19px; line-height: 1.7; color: var(--ink);
  padding-bottom: 26px; border-bottom: 1px solid var(--hairline);
}
.legal h2 {
  counter-increment: clause;
  display: flex; align-items: baseline; gap: 14px;
  font-family:'Newsreader',serif; font-weight:500; font-size: 23px; color: var(--ink);
  margin: 40px 0 12px; padding-top: 26px;
  border-top: 1px solid var(--hairline);
  letter-spacing:-.01em;
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h2::before {
  content: counter(clause, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: 12px; color: var(--bronze);
  flex-shrink: 0;
}
.legal p, .legal li { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 14px; }
.legal li { padding: 10px 0; margin-bottom: 0; border-bottom: 1px solid var(--hairline); }
.legal li:last-child { border-bottom: none; }
.legal li strong { color: var(--ink); font-weight: 600; }
.legal ul { padding-left: 0; list-style: none; margin-bottom: 14px; }
/* A list inside one item — what "usage information" actually means. It has to
   read as subordinate to the item above it, so it takes bullets and an indent
   and drops the row separator the top-level items use. */
.legal li ul { margin: 10px 0 2px; padding-left: 20px; list-style: disc; }
.legal li ul li { padding: 2px 0; margin: 0; border-bottom: none; font-size: 14.5px; line-height: 1.7; }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }

.contact-layout { max-width: 1080px; margin: 0 auto; padding: 40px 24px 56px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
.contact-methods { display:flex; flex-direction:column; gap: 14px; }
.contact-row { display:flex; gap:14px; align-items:center; padding: 18px; border:1px solid var(--hairline); border-radius: 2px; background: var(--surface); transition: border-color var(--trans-fast), transform var(--trans-fast); }
.contact-row:hover { border-color: var(--bronze); transform: translateY(-2px); }
.contact-row .cr-ico { width:44px;height:44px;border-radius:2px;background:transparent;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.contact-row .cr-ico svg { width:20px;height:20px;stroke:var(--bronze);fill:none;stroke-width:1.8; }
.contact-row h4 { font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px; }
.contact-row p { font-size:13.5px;color:var(--muted); }
.contact-form { background: var(--surface); border:1px solid var(--hairline); border-radius: 2px; padding: clamp(24px,4vw,38px); }
.contact-form .form-group { margin-bottom: 16px; }
@media (max-width: 820px){ .contact-layout { grid-template-columns: 1fr; padding: 44px 20px 56px; } }