/*  styles/cp.css — /cp (RBN99 member ka apna hisaab) ka dhaancha
    ===========================================================================
    ⚠️ EK BHI RANG YAHAN CHUNA NAHI GAYA. Har `var(--…)` `yard.css` ka apna
       token hai, aur wo file ise se PEHLE chadhti hai.

       Card `f-card` hai aur galti `f-err` -- dono yard.css ke apne class
       hain, wahi jo `/login` aur `/join` par chalte hain. Un dono ki nakal
       yahan banana ek din do alag login-form jaisi shakl deta, aur wahi
       galti 9 Sep 2026 ko login-page.js me pakdi gayi thi (do file, do
       "halke theme", dono site se alag).

       Yahan sirf wo dhaancha hai jo site par pehle se tha hi nahi: ank ki
       patti aur soochi ki lakeerein.

    ⚠️ Yeh file SIRF `/cp` par chadhti hai. `yard.css` me daalne ka matlab
       hota har page par wo CSS jo sirf ek page ke kaam ka hai.
    =========================================================================== */

.cp-head-r { margin-left: auto; }

.cp-wrap { padding: 26px 0 64px; display: grid; gap: 16px; }
.cp-sec { padding: 18px 16px; }

.cp-who { padding: 6px 2px 0; }
.cp-h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800; letter-spacing: -.6px; line-height: 1.15;
  color: var(--ink);
}
.cp-sub { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.cp-lede { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

.cp-h2 {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 700; letter-spacing: -.3px;
  color: var(--ink);
}
.cp-note { margin: 0 0 12px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.cp-empty { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }
.cp-fine { margin: 14px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.cp-foot { text-align: center; }
.cp-go { margin-top: 18px; display: block; text-align: center; }

/* ── ank ─────────────────────────────────────────────────────────────────── */
/*  auto-fit isliye ki ginti badal sakti hai; phone par yeh apne aap do
    column par aa jaata hai aur kahin `@media` likhna nahi padta. */
.cp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cp-stat { background: var(--surface-2); padding: 14px 12px; }
.cp-stat-n {
  font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cp-stat-l { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.cp-stat-h { margin-top: 2px; font-size: 11px; color: var(--ink-3); }

/* ── soochi ──────────────────────────────────────────────────────────────── */
/*  `minmax(0, 1fr)` (2 Oct 2026): soochi ki row me "Manage" ka panel aur
    CRM ka form khulta hai; `auto` column uski min-content chaudai maan leta
    aur 320px par row card se bahar nikal jaati (Chromium me naapa). */
.cp-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.cp-row:first-child { border-top: 0; }
.cp-row-main { flex: 1 1 auto; min-width: 0; }
.cp-row-t {
  color: var(--ink); font-size: 14px; font-weight: 600;
  overflow-wrap: anywhere;
}
.cp-row-s { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
/*  Galti ka rang `--warn` se nahi: wo "dhyaan do" hai, "gira" nahi.
    yard.css me `.f-err` hi ek jagah hai jahan gir'ne ka rang tay hua hai,
    aur wo poora block hai -- ek akela token nahi. Isliye posting ke
    FAILED ka matn `--ink-2` par rehta hai aur uski patti `f-err` hoti hai
    jahan wo poori line ki baat ho. */
.cp-row-bad { margin-top: 4px; color: var(--warn); font-size: 12.5px; }
.cp-row-amt {
  flex: 0 0 auto;
  color: var(--ink); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── chhota button ───────────────────────────────────────────────────────── */
.cp-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* ── listing ka card (24 Sep 2026) ───────────────────────────────────────── */
/*  Photo aur ginti. Rang yahan bhi ek nahi chuna -- sab yard.css ke token. */
.cp-row-wide { align-items: flex-start; }
.cp-thumb {
  flex: 0 0 auto;
  width: 84px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
/*  Photo na ho to jagah wahi rehti hai -- warna list har row par hilti hai
    aur padhna mushkil ho jaata. */
.cp-thumb-none {
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 11px; text-align: center;
}
/*  Ginti ki lakeer. Wrap hoti hai, isliye phone par apne aap do line. */
.cp-facts {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--ink-2); font-size: 12.5px;
}
.cp-facts span { white-space: nowrap; }
.cp-facts span + span::before {
  content: "·"; color: var(--ink-3); margin-right: 10px;
}

/* ── paid listing (99Broker patch 593, 26 Sep 2026) ─────────────────────── */
/*  Payment se laut kar ka sandesh galti nahi hai -- `f-err` ka laal yahan
    jhooth hota. Wahi shakl, rang yard.css ke token se. */
.cp-info {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--a1);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px; line-height: 1.55;
}
.cp-pay {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.cp-pay .cp-note { margin: 0 0 10px; }
/*  `.btn` ka `white-space: nowrap` lamba daam-wala matn 390px par bahar
    dhakel deta tha (browser me naapa: page 471px). Yahan button poori
    chaudai par, aur matn tootne diya jaata hai. */
.cp-pay .cp-go { margin-top: 0; display: flex; width: 100%; white-space: normal; text-align: center; }
.cp-pay .cp-fine { margin-top: 8px; }
.cp-pay-t { color: var(--ink); font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cp-vis { display: grid; gap: 6px; }
/*  Naam, number, din -- phone par number apni lakeer par gir jaata hai,
    kat'ta nahi. */
.cp-vis-r {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-size: 13px; color: var(--ink-2);
}
.cp-vis-n { color: var(--ink); font-weight: 500; }
.cp-vis-r a { color: var(--a1); }
.cp-vis-s { color: var(--ink-3); font-size: 12px; }

/* Payment link to share (26 Sep 2026) -- CP kisi aur se bharwa sake. */
.cp-share { display: grid; gap: 6px; margin-top: 8px; }
.cp-share-url { font-size: 12px; word-break: break-all; }

/* ── apni listing badalna (99Broker patch 604, 2 Oct 2026) ──────────────── */
/*  "Open" aur "Manage" ek dabbe me -- phone par ek ke neeche ek, kat'te nahi. */
/*  ═══ PHONE PAR BUTTON APNI LAKEER PAR (maalik, 3 Oct 2026) ════════════
    Maalik, is panne ka screenshot bhej kar: "mobile view mein listing kaise
    dikh rahi hai kutch bhi aligned nahin hai".

    ⚠️ ★ NAAP (99Lease par liya gaya, dhaancha yahan wahi hai): 375px par
    listing ki row 309px ki hai. Thumb 84 + gap 12 + "Open/Manage" ka
    khamba 79 + gap 12 -- beech ka khaana (`.cp-row-main`) sirf 118px ka
    bachta tha. Usme sirlekh do lakeer me, byora chaar lakeer me, aur paise
    wala pill-button itne tang khaane me ek GOLA bankar baith jaata tha.

    Ab phone par dono button poori lakeer par apne aap aa jaate hain, aur
    beech ke khaane ko 209px mil jaate hain. 560px se upar wahi purana
    khamba daayein. Lakeer todne ka kaam `.cp-row-wide` ka `flex-wrap`
    pehle se karta hai.

    99Lease par jodidaar hai -- dono ek saath badlo. */
.cp-row-acts {
  flex: 1 1 100%;
  display: flex; flex-direction: row; gap: 6px; align-items: stretch;
}
.cp-row-acts .cp-btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 561px) {
  .cp-row-acts { flex: 0 0 auto; flex-direction: column; }
  .cp-row-acts .cp-btn { flex: 0 0 auto; }
}

.cp-man {
  margin-top: 10px;
  /*  Base sabse tang phone ka -- 381px se upar wapas 12px (neeche). */
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid; gap: 10px;
  /*  Wahi `minmax(0, 1fr)` -- andar ka form apni chaudai se panel na kheenche. */
  grid-template-columns: minmax(0, 1fr);
}
.cp-man .cp-note { margin: 0; }
.cp-man .cp-fine { margin: 4px 0 0; }
.cp-man .cp-row-bad { margin: 0; }
.cp-man-note { display: grid; gap: 8px; justify-items: start; }
.cp-man-st { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cp-man-st .cp-row-s { margin: 0; }
/*  Haal ka nishaan -- rang nahi, lakeer. Haal shabd me likha hai; rang akela
    kabhi khabar nahi hota. */
.cp-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 12px; font-weight: 600;
}
.cp-man-vis { display: grid; gap: 6px; }
.cp-man-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-man-btns .cp-go { margin-top: 0; display: inline-flex; width: auto; white-space: normal; }
.cp-man-ask { display: grid; gap: 10px; }
.cp-man-l { display: grid; gap: 4px; color: var(--ink-2); font-size: 12.5px; }
.cp-man-why {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
  resize: vertical;
}
/*  Hatane ka button doosron jaisa hi -- bas lakeer `--warn` ki, taaki
    dabane se pehle aankh ruk jaaye. Sawaal phir bhi poochha jaata hai. */
.cp-btn-off { border-color: var(--warn); }
/*  CRM ka form apne gehre roop me chalta hai (`<html class="dark">`); yahan
    sirf uska dabba apni jagah me. */
/*  Nayi listing ke do chhote sawaal (3 Oct 2026): kya daal rahe ho, aur maalik
    ne haan kaise kahi. Naap aur rang `cp-man-why` (textarea) jaise hi -- do
    khaane ek hi dabbe me alag na dikhein. `appearance` chhua nahi jaata: teer
    browser ka apna rehta hai, aur usi se pata chalta hai ki yeh soochi hai.

    ⚠️ Yeh is panne ka pehla `select` hai, aur `cp-gate.test.js` is panne par
       PIN jaisa koi khaana nahi hone deta. Wo jaanch sahi hai: yahan jo bhi
       type hota hai wo maalik ka naam-number aur ek soochi ka chunaav hai --
       koi raaz nahi, aur PIN aaj bhi sirf RBN99 par type hota hai. */
.cp-add-sel {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.cp-edit { margin-top: 2px; overflow-x: auto; }
/*  Panel ki gaddi ke UPAR phail kar form ko utni hi jagah deta hai jitni
    /post-property par milti hai. Base sabse tang phone ka; bade naap neeche
    `min-width` me. ⚠️ Yeh lakeer un block se PEHLE honi chahiye -- same
    specificity par baad wala jeet-ta hai (CLAUDE.md §23). */
.cp-man .cp-edit { margin-left: -9px; margin-right: -9px; }
/*  320px ke phone par CRM ke form ki ek-do qataar (99Lease ka "Rental
    Details": do pakki chaudai ke khaane) jagah se lambi hai -- wahi jo
    /list-property par bhi 4px nikalti hai, aur wo bani hui file ki baat hai
    (ghar 99Broker), yahan ki nahi. Isliye: panel ki gaddi us chaudai par kam,
    aur jo phir bhi na samaaye wo SIRF form ke andar khiskta hai -- poora
    panna kabhi bagal me nahi (naapa: 320 / 360 / 390, dono portal). */
/*  Phone par form sirf panel ki apni gaddi ke upar phailta hai (13 = gaddi 12
    + lakeer 1), taaki wo row ke baaki matn ki seedh me rahe. Yahan ka card
    phone par kinare-se-kinare hai, isliye card ki gaddi ke upar phailna form
    ko screen ke kinare se chipka deta (Chromium me dekha). 99Lease me card
    ke bahar page ki gaddi hai, aur wahan ka kiraye wala form chauda hai --
    isliye wahan yeh ank alag hai. */
/*  ⚠️ 3 Oct 2026: yeh teen seedhiyan ULTI kar di gayin -- base ab PHONE ka
    hai aur badi screen apwaad (CLAUDE.md §23). Naap ek bhi nahi badla,
    sirf kram. Us din `cp.css` chhoot gayi thi; `mobile-first.test.js` ab
    styles/ ki HAR file dekhti hai, sirf mukhya file nahi. */
@media (min-width: 381px) {
  .cp-man { padding: 12px; }
  .cp-man .cp-edit { margin-left: -13px; margin-right: -13px; }
}
@media (min-width: 561px) {
  .cp-man .cp-edit { margin-left: 0; margin-right: 0; }
}
/*  Panel listing ki row me apni poori lakeer par. `flex-basis: 0` beech ke
    khaane par isliye ki wrap chalu hone par lamba sirlekh khud nayi lakeer
    na pakad le. */
.cp-row-wide { flex-wrap: wrap; }
.cp-row-wide > .cp-row-main { flex: 1 1 0; }
.cp-row-wide > .cp-man { flex: 1 1 100%; min-width: 0; }