/* ═══ Nkwata · The back office, reviews, currency and the listing rail ══
   Three screens that did not exist before: a landlord's management view,
   reviews with the provenance shown, and a listing page built the way
   the best-presented competitor on this coast builds theirs — a sticky
   price rail, a details table, a reference number — but carrying the
   things they leave out: a defined verification, structured amenities,
   and reviews that had to be earned.

   No new colours. Everything below is built from the same walnut,
   plaster, brass, ember and moss the rest of the platform uses.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Currency switcher ──────────────────────────────────────────────
   Shown wherever money is. The note underneath is the part nobody else
   publishes: which rate, and when it was taken. */
.curbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0}
.curchip{padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);line-height:1;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.curchip:hover{border-color:var(--line-2);color:var(--ink)}
.curchip.on{background:var(--walnut);border-color:var(--walnut);color:var(--on-dark)}
.curnote{flex:1 1 100%;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.cx{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);
  font-weight:500;margin-top:3px;letter-spacing:.01em}
.curdisclose{font-size:12.5px;color:var(--muted);line-height:1.6;
  border-top:1px solid var(--line);padding-top:14px;margin-top:20px;max-width:64ch}
.curdisclose b{color:var(--ink)}

/* ── The listing page splits in two ─────────────────────────────────
   The place on the left, the price and the way to act on the right. On
   a phone there is no room for two columns, so the rail drops under the
   content and stops being sticky. */
.detwrap{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) 340px;
  align-items:start}
.detmain{min-width:0}
@media (max-width:980px){
  .detwrap{grid-template-columns:1fr;gap:26px}
}

/* ── The listing rail ───────────────────────────────────────────────
   Price, the details table, one action, and the share row — held on
   screen through the whole scroll. */
.rail{position:sticky;top:92px;align-self:start}
.railcard{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;
  padding:20px;box-shadow:var(--sh-1)}
.railcard+.railcard{margin-top:14px}
.rail-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.rail-price{font-family:var(--display);font-size:clamp(28px,3.6vw,38px);font-weight:700;
  letter-spacing:-.02em;line-height:1.05;margin-top:5px;color:var(--ink)}
.rail-price small{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted)}
.rail-price .cx{font-size:13px}

.dtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.dtable th,.dtable td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.dtable th{font-weight:500;color:var(--muted);width:46%}
.dtable td{font-weight:600;color:var(--ink);text-align:right}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
.dtable .ref{font-family:var(--mono);font-size:12px;letter-spacing:.04em}

.sharerow{display:flex;gap:8px;margin-top:4px}
.sharerow button{flex:1;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:9px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.sharerow button:hover{border-color:var(--line-2);color:var(--ink)}

/* ── Verification, defined ──────────────────────────────────────────
   The competitor stamps VERIFIED on a listing and defines it nowhere —
   not in the FAQ, not in the terms, not on a methodology page. In a
   market whose central problem is fake listings, that is claiming the
   high ground and building nothing under it. Ours is a checklist with
   dates on it. */
.verif{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;padding:18px 20px}
.verif h4{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;color:var(--ink)}
.verif h4 .vdot{width:9px;height:9px;border-radius:50%;background:var(--moss)}
.verif ul{list-style:none;margin:12px 0 0;padding:0}
.verif li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:13px;
  color:var(--ink-2);border-bottom:1px solid var(--plaster-2)}
.verif li:last-child{border-bottom:0}
.verif li svg{flex:0 0 auto;margin-top:2px}
.verif li.yes svg{color:var(--moss)}
.verif li.no{color:var(--muted)}
.verif li.no svg{color:var(--line-2)}
.verif li b{color:var(--ink);font-weight:600}
.verif li span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.verif-when{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}

/* ── Reviews ────────────────────────────────────────────────────────── */
.rev-sec{margin-top:34px}
.rev-head{display:grid;gap:26px;grid-template-columns:minmax(150px,200px) 1fr;
  align-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--r-m);
  background:#fff;margin-top:14px}
.rev-score{text-align:center}
.rev-score b{display:block;font-family:var(--display);font-size:46px;font-weight:700;
  line-height:1;color:var(--ink)}
.rev-stars{display:inline-flex;gap:1px;color:var(--honey);margin-top:6px}
.rev-score i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:6px}
.rev-dims{display:grid;gap:9px}
.rev-dim{display:grid;grid-template-columns:1fr 100px 34px;gap:12px;align-items:center;
  font-size:13px;color:var(--ink-2)}
.rev-bar{height:5px;border-radius:999px;background:var(--plaster-2);overflow:clip}
.rev-bar i{display:block;height:100%;background:var(--moss);border-radius:999px}
.rev-dim b{text-align:right;font-size:12px;color:var(--muted)}

.rev-prov{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  margin-top:14px;font-size:12px;color:var(--muted)}
.rev-src{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid var(--line);border-radius:999px;background:#fff}
.rev-src svg{opacity:.7}
.rev-prov a{color:var(--ember);border-bottom:1px solid var(--brass-soft)}

.rev-list{display:grid;gap:14px;margin-top:18px}
.rev{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;padding:18px 20px}
.rev-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.rev-who{font-weight:700;font-size:14px}
.rev-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--moss-wash);color:var(--moss)}
.rev-when{margin-left:auto;font-size:12px;color:var(--muted)}
.rev-rate{display:inline-flex;gap:1px;color:var(--honey);margin-top:8px}
.rev-body{margin-top:9px;font-size:14px;line-height:1.62;color:var(--ink-2)}
.rev-rateonly{color:var(--muted);font-style:italic;font-size:13px}
.rev-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.rev-ph{width:58px;height:58px;border-radius:var(--r-s);background:var(--plaster-2);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--line-2)}
.rev-phnote{flex:1 1 180px;font-size:11.5px;color:var(--muted);line-height:1.5}
.rev-reply{margin-top:13px;padding:12px 14px;border-radius:var(--r-s);
  background:var(--plaster-2);border-left:3px solid var(--brass)}
.rev-reply span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.rev-reply p{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rev-none{margin-top:14px;padding:20px;border:1px dashed var(--line-2);
  border-radius:var(--r-m);color:var(--muted);font-size:14px;line-height:1.6}
.rev-none b{color:var(--ink)}
.rev-none p+p{margin-top:9px}

/* ── The composer ───────────────────────────────────────────────────── */
.revmodal{position:fixed;inset:0;z-index:400;display:none;place-items:center;
  background:rgba(25,19,16,.62);padding:20px;overflow-y:auto}
.revmodal.on{display:grid}
.revmodal>div{width:min(560px,100%);background:var(--plaster);border-radius:var(--r-l);
  padding:28px;box-shadow:var(--sh-3);max-height:92vh;overflow-y:auto}
.rc-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember)}
.revmodal h3{font-size:26px;margin-top:8px}
.rc-lede{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.6}
.rc-overall{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0 4px;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.rc-ov{font-weight:700;font-size:15px;color:var(--ink)}
.starpick{display:inline-flex;gap:3px}
.sp{color:var(--line-2);line-height:0;padding:1px}
.sp.on{color:var(--honey)}
.sp:hover{color:var(--honey)}
.rc-more{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-m);
  background:#fff;padding:14px 16px}
.rc-more summary{font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.rc-more summary i{font-style:normal;font-weight:400;color:var(--muted)}
.rc-dims{display:grid;gap:10px;margin-top:14px}
.rc-dim{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
  align-items:center;font-size:13px;color:var(--ink-2)}
.rc-dim .starpick .sp svg{width:17px;height:17px}
.rc-label{display:block;margin-top:18px;font-size:13px;font-weight:600;color:var(--ink)}
.rc-label i{font-style:normal;font-weight:400;color:var(--muted)}
.rc-text{width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-s);font-family:var(--body);font-size:14px;line-height:1.6;
  background:#fff;color:var(--ink);resize:vertical}
.rc-text:focus{outline:2px solid var(--ember-lift);outline-offset:1px}
.rc-count{display:block;text-align:right;font-size:10.5px;color:var(--muted);margin-top:4px}
.rc-photos{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rc-ph{display:inline-flex;gap:5px}
.rc-ph i{width:34px;height:34px;border-radius:var(--r-s);background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--line-2)}
.rc-phnote{flex:1 1 100%;font-size:11.5px;color:var(--muted);line-height:1.55}
.rc-warn{margin-top:12px;padding:10px 13px;border-radius:var(--r-s);
  background:var(--ember-wash);border:1px solid rgba(184,68,42,.22);
  font-size:12.5px;color:var(--ember-2);line-height:1.5}
.rc-act{display:grid;gap:9px;margin-top:22px}
.rc-act .btn[disabled]{opacity:.42;pointer-events:none}
.rc-fine{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.55;text-align:center}

/* ── The landlord's back office ─────────────────────────────────────── */
.mg-top{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  margin-top:20px}
.mg-stat{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;padding:17px 18px}
.mg-stat span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.mg-stat b{display:block;font-family:var(--display);font-size:30px;font-weight:700;
  line-height:1.1;margin-top:7px;color:var(--ink)}
.mg-stat i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:4px}
.mg-stat.bad b{color:var(--ember)}
.mg-stat.good i{color:var(--moss)}
.mg-stat.warn b{color:var(--brass)}

.mg-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:24px;
  border-bottom:1px solid var(--line)}
.mg-tabs::-webkit-scrollbar{display:none}
.mg-tab{flex:0 0 auto;padding:11px 16px;font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.mg-tab.on{color:var(--ink);border-bottom-color:var(--ember)}
.mg-body{margin-top:22px}

.mg-table{width:100%;border-collapse:collapse;font-size:13.5px;
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#fff}
.mg-table th{text-align:left;padding:11px 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:var(--plaster-2);font-weight:600;border-bottom:1px solid var(--line)}
.mg-table td{padding:13px 14px;border-bottom:1px solid var(--plaster-2);vertical-align:top}
.mg-table tbody tr:last-child td{border-bottom:0}
.mg-table td b{display:block;color:var(--ink);font-weight:600}
.mg-table td span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.mg-table td em{color:var(--muted);font-style:italic}
.mg-table .owes{color:var(--ember);font-weight:700}
.mg-table .r{text-align:right}
.mg-table tr.r-late td{background:rgba(246,229,222,.42)}
.mg-table tr.r-empty td{background:var(--plaster-2)}
.mg-table.tight td{padding:10px 14px}
.mg-table tr.st-net td{border-top:2px solid var(--line);background:var(--moss-wash)}

.mg-note{margin-top:18px;padding:15px 18px;border-radius:var(--r-m);
  background:var(--moss-wash);border-left:3px solid var(--moss);
  font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.mg-note b{color:var(--ink)}

.mg-jobs{display:grid;gap:12px}
.job{border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-m);
  background:#fff;padding:16px 18px}
.job.j-urgent{border-left-color:var(--ember)}
.job.j-soon{border-left-color:var(--brass)}
.job.j-routine{border-left-color:var(--line-2)}
.job.j-done{opacity:.62;border-left-color:var(--moss)}
.job-h{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.job-u{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ember)}
.job.j-soon .job-u{color:var(--brass)}
.job.j-routine .job-u,.job.j-done .job-u{color:var(--muted)}
.job-r{font-size:11px;color:var(--muted)}
.job-s{margin-left:auto;font-size:11px;padding:2px 9px;border-radius:999px;
  background:var(--plaster-2);color:var(--muted);text-transform:capitalize}
.job h4{font-family:var(--body);font-size:15px;font-weight:700;margin-top:9px}
.job p{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.job-f{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:12px;
  font-size:12px;color:var(--muted)}
.job-p{display:inline-flex;align-items:center;gap:5px}
.job-f .btn{margin-left:auto}

.mg-tiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tier{position:relative;border:1px solid var(--line);border-radius:var(--r-m);
  background:#fff;padding:20px}
.tier.on{border-color:var(--walnut);box-shadow:var(--sh-2)}
.tier-flag{position:absolute;top:-10px;left:20px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:3px 10px;
  border-radius:999px;background:var(--walnut);color:var(--on-dark)}
.tier h4{font-family:var(--display);font-size:20px;font-weight:700}
.tier-p{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--ember);margin-top:6px}
.tier-p small{font-family:var(--body);font-size:11px;font-weight:500;color:var(--muted);
  display:block;margin-top:2px}
.tier-s{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.tier ul{list-style:none;margin:14px 0 16px;padding:0}
.tier li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);margin-bottom:7px}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--moss)}

.mg-state{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;padding:20px}
.st-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.st-head h4{font-family:var(--display);font-size:22px;font-weight:700}
.st-small{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:62ch}

.btn.btn-xs{padding:6px 12px;font-size:12px;border-radius:var(--r-s);min-height:0;line-height:1.3}

@media (max-width:760px){
  .rail{position:static}
  .rev-head{grid-template-columns:1fr;gap:18px}
  .rev-dim{grid-template-columns:1fr 70px 30px}
  .mg-table{display:block;overflow-x:auto;white-space:nowrap}
  .mg-table td span{white-space:normal}
}
@media print{.rail{position:static}.revmodal{display:none !important}}

/* ── For sale ────────────────────────────────────────────────────────
   Two questions a Cameroonian buyer should ask first and is almost
   never answered on: what paper is behind this, and what does it really
   cost once the notary and the state have taken theirs. Both are on the
   card and on the page, not buried. */
.hc-paper,.hc-allin{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;margin-top:6px}
.hc-paper{font-weight:600}
.hc-paper.good{color:var(--moss)}
.hc-paper.fair{color:var(--brass)}
.hc-paper.bad{color:var(--ember)}
.hc-paper svg{opacity:.85}
.hc-allin{color:var(--muted);display:flex}
.hc-allin b{color:var(--ink);font-weight:700}
.hc-allin svg{opacity:.6;flex:0 0 auto}

.paperblk{margin-top:14px}
.paperbar{display:flex;gap:4px;margin:10px 0 2px}
.paperbar i{flex:1;height:5px;border-radius:999px;background:var(--line)}
.paperbar i.on{background:var(--moss)}
.paper-why{font-size:13px;line-height:1.6;color:var(--ink-2);margin-top:9px}

.allin{padding:12px 14px;border-radius:var(--r-s);background:var(--plaster-2);
  border:1px solid var(--line);margin-bottom:12px}
.allin span{display:block;font-size:14px;color:var(--ink-2)}
.allin b{font-family:var(--mono);font-size:16px;color:var(--ink)}
.allin i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}

/* The ten checks. The first six are not optional and the list says so
   rather than leaving a buyer to guess which ones matter. */
.ddlist{counter-reset:dd;list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:10px}
.ddlist li{position:relative;padding:13px 16px 13px 46px;border:1px solid var(--line);
  border-radius:var(--r-m);background:#fff}
.ddlist li::before{counter-increment:dd;content:counter(dd);position:absolute;
  left:14px;top:13px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;
  font-weight:700;background:var(--plaster-2);color:var(--muted)}
.ddlist li.ess{border-left:3px solid var(--ember)}
.ddlist li.ess::before{background:var(--ember);color:var(--plaster)}
.ddlist li b{display:block;font-size:14px;color:var(--ink)}
.ddlist li b i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
.ddlist li span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:4px}