/* =========================================================
   ENHOUZ MARKETPLACE — design system
   Ink navy / paper white / brass, ledger green for figures.
   Display: Source Serif 4 · UI: Libre Franklin · Figures: IBM Plex Mono
   ========================================================= */
:root{
  --ink:#16283C;
  --ink-soft:#24384E;
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --line:#E3E1DA;
  --text:#2E3A46;
  --muted:#6B7684;
  --brass:#B08D3E;
  --brass-soft:#F3ECDD;
  --ledger:#1F7A4D;
  --danger:#A83232;
  --radius:6px;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Libre Franklin", -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);font-size:16px;line-height:1.55}
a{color:var(--ink);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1360px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
/* position+z-index so the header (and the mobile drawer nested inside it)
   stays fully opaque and clickable above the .nav-backdrop dimmer, the
   same way crexi.com keeps its top bar crisp while its off-canvas menu
   is open instead of dimming the whole page including the header. */
.site-head{background:var(--ink);color:#fff;position:relative;z-index:63}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;color:#fff}
.brand-mark{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.14em}
.brand-mark.small{font-size:18px;color:var(--ink)}
.brand-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#B9C4D0}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{color:#D8DFE7;font-size:14px;font-weight:500}
.nav a:hover{color:#fff}
.nav-cta{background:var(--brass);color:#fff !important;padding:8px 14px;border-radius:var(--radius);font-weight:600}
.nav-cta:hover{background:#9c7c33}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;border-top:1px solid var(--ink-soft);min-height:560px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--ink) center/cover no-repeat;background-image:url('/assets/img/hero-photo.jpg')}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(22,40,60,.24) 0%, rgba(22,40,60,.14) 45%, rgba(22,40,60,.46) 100%)}
.hero-content{position:relative;z-index:2;padding:64px 20px 56px;width:100%}
.hero h1{font-family:var(--serif);font-size:clamp(30px,4.5vw,44px);font-weight:700;margin:0 0 10px;max-width:640px;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4)}
.hero p{color:#F1EEE6;max-width:560px;margin:0 0 28px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.search-bar{display:grid;grid-template-columns:2fr 1.4fr 1fr auto;gap:10px;background:#fff;padding:10px;border-radius:8px}
.search-bar input,.search-bar select{border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;font:inherit;font-size:15px;width:100%;background:#fff;color:var(--text)}
.search-bar button{white-space:nowrap}
.hero-links{margin-top:16px;font-size:13px;color:#F1EEE6;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hero-links a{color:#F3E3B8;margin-right:14px}
.hero-links a:hover{color:#fff}

/* home.php's markup already used hero-compact as a modifier class, but
   nothing defined it, so the hero always fell back to the full 560px
   height — same class-name mismatch pattern as the gallery-frame arrows.
   ~50% shorter than the base .hero. */
.hero.hero-compact{min-height:280px}
.hero.hero-compact .hero-content{padding:40px 20px 36px}
@media (max-width:560px){
  .hero.hero-compact{min-height:0}
}

/* Centered hero (home page only — scoped to .hero-compact so this
   doesn't affect .hero on any other page): headline, search bar, and
   the "Popular:" links line all center as one balanced block instead of
   a lone centered heading over a left-hugging form. */
.hero.hero-compact .hero-content{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero.hero-compact .hero-content h1{max-width:760px;margin-left:auto;margin-right:auto}
.hero.hero-compact .search-bar{width:100%;max-width:760px}
.hero.hero-compact .hero-links{text-align:center}

/* ---------- buttons / forms ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:var(--radius);padding:11px 18px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--ink-soft)}
.btn.brass{background:var(--brass)}
.btn.brass:hover{background:#9c7c33}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.danger{background:var(--danger)}
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:15px;background:#fff;color:var(--text)}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus{outline:2px solid var(--brass);outline-offset:1px}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form-grid .full{grid-column:1/-1}
.checkline{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:14px}
.checkline input{width:auto;margin-top:3px}

/* ---------- sections ---------- */
.section{padding:44px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.section-head h2{font-family:var(--serif);font-size:26px;margin:0;color:var(--ink)}
.section-head a{font-size:14px;font-weight:600;color:var(--brass)}
.section-head a.btn{color:#fff}

/* ---------- listing cards & the deal strip ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s, box-shadow .15s}
.card:hover{border-color:var(--brass);box-shadow:0 2px 12px rgba(22,40,60,.07)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px}
.card .ind{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.card h3{font-family:var(--serif);font-size:19px;line-height:1.3;margin:2px 0 0;color:var(--ink)}
.card .loc{font-size:13.5px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--brass-soft);color:#7d6320}
.badge.sold{background:#EEE;color:#666}
.badge.pending{background:#FFF3D6;color:#8a6400}
.badge.rejected{background:#F7E2E2;color:var(--danger)}

/* price — bold sans-serif, Marketplace-style */
.price-line{margin:0 0 6px}
.price-figure{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.price-figure.na{font-weight:600;font-size:15px;color:var(--muted)}

/* secondary figures — cash flow / revenue, single-line labels, never wrap/overlap */
.deal{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.deal div{min-width:0}
.deal .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal .v{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ledger);overflow-wrap:anywhere}
.deal .v.na{color:var(--muted);font-weight:500}

/* photo + featured ribbon */
.card-photo{aspect-ratio:16/9;background:#EDEBE4;position:relative;overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card-photo.no-photo{background:linear-gradient(135deg,#EDEBE4,#E3E1DA)}
.ribbon-stack{position:absolute;top:10px;left:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ribbon{background:var(--ink);color:#E8D9B4;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px 4px 10px;border-radius:0 4px 4px 0}
.ribbon.lease-ribbon{background:var(--ledger);color:#fff}
.ribbon.forsale-ribbon{background:var(--brass);color:#fff}
.ribbon.sold-ribbon{background:#3a3a3a;color:#fff}

/* ---------- listing detail ---------- */
.detail{display:grid;grid-template-columns:1.7fr 1fr;gap:32px;align-items:start}
.detail-main h1{font-family:var(--serif);font-size:32px;color:var(--ink);margin:6px 0 4px;line-height:1.2}
.meta-line{color:var(--muted);font-size:14.5px;margin-bottom:20px}
/* align-items was "end" — with the Tenant column often taller than
   Landlord/Status (invite badge + resend button wrapping), bottom-aligning
   pushed the shorter columns' labels down so LANDLORD/TENANT/STATUS never
   lined up across the row. Top-aligning keeps the labels flush regardless
   of how much each column's value wraps. */
.deal.big{grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin:0 0 26px;border-top:1px solid var(--line);align-items:start}
.deal.big > div{min-width:0}
.deal.big .v{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.deal.big .price-cell .v-price{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);line-height:1.15;overflow-wrap:anywhere}
.deal.big .price-cell .v-price.na{font-size:20px;font-weight:800;color:var(--muted)}
.desc{white-space:pre-line;font-size:16.5px}
.facts{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 20px;margin-top:26px}
.facts dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0}
.facts .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts .row:nth-last-child(-n+2){border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.aside-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px;position:sticky;top:20px}
.aside-card h2{font-family:var(--serif);font-size:20px;margin:0 0 4px;color:var(--ink)}
.aside-card .sub{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.conf-note{background:var(--brass-soft);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:#6f5a20;margin:12px 0}

/* ---------- filters ---------- */
.filters{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;grid-template-columns:1.6fr 1fr 1.3fr 0.9fr 0.9fr 0.9fr auto;gap:10px;align-items:end;margin-bottom:24px}
.filters label{margin:0 0 4px;font-size:12px}
.count-line{font-size:14px;color:var(--muted);margin:0 0 16px}
.count-line strong{color:var(--ink)}

/* ---------- tables (dashboard/admin) ---------- */
table.data{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:14.5px}
table.data th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);background:#FCFBF8}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
.mono{font-family:var(--mono);font-size:13.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form{display:inline}
.status-select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);cursor:pointer}

/* ---------- auth / narrow ---------- */
.narrow{max-width:460px;margin:0 auto}
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px}
.panel h1{font-family:var(--serif);font-size:26px;margin:0 0 6px;color:var(--ink)}
.panel .sub{color:var(--muted);font-size:14.5px;margin:0 0 10px}
.flash{background:#EAF4EE;border:1px solid #BFDCCB;color:#1E5B3C;border-radius:var(--radius);padding:11px 14px;margin:18px 0 0;font-size:14.5px}
.error{background:#F9ECEC;border:1px solid #E3BFBF;color:var(--danger);border-radius:var(--radius);padding:11px 14px;margin:0 0 14px;font-size:14.5px}
.empty{border:1px dashed var(--line);border-radius:8px;padding:40px;text-align:center;color:var(--muted)}
.empty a{color:var(--brass);font-weight:600}

/* ---------- value strip (home) ---------- */
.value-strip{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.value-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:34px 20px}
.value-inner h3{font-family:var(--serif);font-size:17px;color:var(--ink);margin:0 0 6px}
.value-inner p{font-size:14px;color:var(--muted);margin:0}
.value-inner .num{font-family:var(--mono);color:var(--brass);font-size:13px;font-weight:600;letter-spacing:.1em}

/* ---------- footer ---------- */
.site-foot{margin-top:60px;background:var(--card);border-top:1px solid var(--line)}
.foot-inner{display:flex;justify-content:space-between;gap:24px;padding:32px 20px;flex-wrap:wrap}
.foot-note{font-size:13px;color:var(--muted);max-width:420px;margin:8px 0 0}
.foot-links{display:flex;flex-direction:column;gap:8px;font-size:14px}
.foot-legal{padding:0 20px 26px;font-size:12px;color:var(--muted)}

/* ---------- pagination ---------- */
.pager{display:flex;gap:8px;justify-content:center;margin-top:30px}
.pager a,.pager span{padding:8px 13px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;background:var(--card)}
.pager .on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
  .aside-card{position:static}
  .search-bar{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
  .value-inner{grid-template-columns:1fr}
  .facts dl{grid-template-columns:1fr}
  .facts .row:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .facts .row:last-child{border-bottom:0}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .search-bar{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .head-inner{justify-content:center;text-align:center}
  .hero{min-height:0}
  .hero-content{padding:44px 20px 40px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ---------- v2: photos ---------- */
/* .gallery-frame is the wrapper actually used in listing.php's markup —
   .gallery is kept too in case an older template still references it.
   The frame needs position:relative so the absolutely-positioned arrows
   below anchor to the photo, not to the page (that mismatch — arrows
   styled against a class name the markup never used — is why they were
   floating off in the page corners instead of sitting on the image). */
.gallery, .gallery-frame{margin:0 0 24px;position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
/* The clip (overflow:hidden) and the transform must live on DIFFERENT
   elements. Putting both on .gallery-track (as an earlier fix did) looked
   right but doesn't work: translateX() moves the element's own box, clip
   region included, right along with its content — so the "window" moves
   in lockstep with the photo behind it and never actually crops anything.
   One click and the whole strip drifts off past the (also-moved) frame,
   leaving the visible area blank. .gallery-frame is the fixed viewport
   that clips; only .gallery-track (the flex row of slides) moves.
   overflow:hidden here also replaces the old overflow-x:auto + scroll-snap
   setup — that let the browser natively scroll this element at the same
   time the JS was moving it with translateX(), and the two fought each
   other. Touch swipe is handled by the track's own touchstart/touchend
   listeners below, so native scrolling isn't needed for that either. */
.gallery-track{display:flex;transition:transform .3s ease}
.gallery-slide{flex:0 0 100%;aspect-ratio:16/10;background:#EDEBE4}
.gallery-slide img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-frame{cursor:zoom-in}

/* ---------- v18: click-to-enlarge lightbox ---------- */
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(10,14,20,.94);z-index:1000;align-items:center;justify-content:center}
.lightbox-overlay.open{display:flex}
.lightbox-img-wrap{max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.lightbox-img-wrap img{max-width:92vw;max-height:88vh;object-fit:contain;display:block;border-radius:4px}
.lightbox-close{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1002}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
.lightbox-arrow{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1002}
.lightbox-arrow:hover{background:rgba(255,255,255,.22)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-counter{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(255,255,255,.12);padding:5px 14px;border-radius:20px;z-index:1002}
@media (max-width:640px){
  .lightbox-arrow{width:38px;height:38px;font-size:20px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-close{top:10px;right:14px}
}
.g-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(22,40,60,.65);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.g-arrow:hover{background:rgba(22,40,60,.85)}
.g-prev{left:10px}
.g-next{right:10px}
.g-counter{position:absolute;bottom:12px;right:14px;background:rgba(22,40,60,.65);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;z-index:2}
.g-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.g-dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--line);padding:0;cursor:pointer}
.g-dot.on{background:var(--brass);width:20px;border-radius:4px;transition:width .2s}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:none;width:76px;height:56px;flex-shrink:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.on{border-color:var(--brass)}
.photo-manage{display:flex;gap:14px;flex-wrap:wrap}
.photo-tile{width:150px;position:relative}
.photo-tile img{width:150px;height:100px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block;margin-bottom:6px}

/* ---------- v2: featured ---------- */
.badge.feat{background:var(--ink);color:#E8D9B4}

/* ---------- v2: alert box ---------- */
.alert-box{margin-top:34px;background:var(--ink);border-radius:8px;padding:26px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.alert-box h3{font-family:var(--serif);color:#fff;margin:0 0 6px;font-size:20px}
.alert-box p{color:#B9C4D0;font-size:14px;margin:0}
.alert-form{display:flex;gap:10px}
.alert-form input[type=email]{flex:1;border:0}
@media (max-width:900px){.alert-box{grid-template-columns:1fr}.alert-form{flex-direction:column}}

/* ---------- v3: legal pages ---------- */
.legal-h2{font-family:var(--serif);color:var(--ink);font-size:19px;margin:30px 0 8px}

/* ---------- v3: newsletter box ---------- */
.newsletter-box{margin:44px 0 0;background:var(--brass-soft);border-radius:8px;padding:24px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center}
.newsletter-box h3{font-family:var(--serif);color:var(--ink);margin:0 0 4px;font-size:18px}
.newsletter-box p{color:#6f5a20;font-size:13.5px;margin:0}
@media (max-width:900px){.newsletter-box{grid-template-columns:1fr}}

/* ---------- v3: admin subnav ---------- */
.admin-subnav{background:var(--ink-soft);border-bottom:1px solid #33475D}
.admin-subnav .wrap{display:flex;gap:20px;padding:10px 20px}
.admin-subnav a{color:#C7D1DB;font-size:13.5px;font-weight:500}
.admin-subnav a:hover{color:#fff}

/* ---------- v3: AI insights panel ---------- */
.insights{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;margin-top:20px}
.insights h2{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 4px}
.insights .sub{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.insights .block{margin-bottom:14px}
.insights .block:last-child{margin-bottom:0}
.insights .block h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin:0 0 5px}
.insights .block p{font-size:14px;margin:0;color:var(--text);line-height:1.6}

/* ---------- v3: similar listings ---------- */
.similar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px}
@media (max-width:640px){.similar-grid{grid-template-columns:1fr}}

/* ---------- v17: similar listings as a full-width scroll carousel ---------- */
.similar-wrap{position:relative;margin-top:16px}
.similar-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px}
.similar-track::-webkit-scrollbar{display:none}
.similar-track > *{flex:0 0 280px;scroll-snap-align:start;min-width:0}
.similar-arrow{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(22,40,60,.14);z-index:2}
.similar-arrow:hover{background:var(--brass-soft)}
.similar-prev{left:-16px}
.similar-next{right:-16px}
@media (max-width:900px){
  .similar-track > *{flex-basis:240px}
  .similar-prev{left:-8px}
  .similar-next{right:-8px}
}

/* ---------- v3: extended facts ---------- */
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--brass-soft);color:#7d6320}

/* ---------- v6.1: real chart dashboard ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:30px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px}
.stat-num{font-family:var(--sans);font-weight:800;font-size:30px;color:var(--ink);line-height:1}
.stat-label{font-size:12.5px;color:var(--muted);margin-top:6px}

.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px}
.chart-card.wide{grid-column:1/-1}
.chart-card h3{font-family:var(--serif);font-size:16px;color:var(--ink);margin:0 0 18px}

.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.chart-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:160px}
.legend-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:9px;align-items:center;font-size:13.5px}
.legend-dot{width:10px;height:10px;border-radius:50%}
.legend-label{color:var(--text)}
.legend-value{font-family:var(--sans);font-weight:700;color:var(--ink)}
.legend-pct{color:var(--muted);font-size:12px;min-width:34px;text-align:right}

@media (max-width:900px){
  .stat-cards{grid-template-columns:1fr 1fr}
  .chart-grid{grid-template-columns:1fr}
  .chart-card.wide{grid-column:auto}
}

/* ---------- v9: trademark ---------- */
.tm{font-family:var(--sans);font-size:.36em;font-weight:400;vertical-align:super;margin-left:1px;letter-spacing:0}

/* ---------- v9: share button row ---------- */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.meta-row .meta-line{margin:0}

/* ---------- v9: listed-by (merged into contact card) ---------- */
.listed-by{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.listed-by h3{font-family:var(--serif);font-size:15px;color:var(--ink);margin:0 0 8px}

/* ---------- v9: mobile hardening ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width:640px){
  .deal.big{grid-template-columns:1fr;gap:14px;align-items:start}
  .deal.big .price-cell{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:2px}
  .price-line{word-break:break-word}
  .nav{gap:14px}
  .nav a{font-size:13.5px}
  .head-inner{gap:10px 14px}
  .g-arrow{width:32px;height:32px;font-size:18px}
  .aside-card{overflow-wrap:anywhere}
}

/* ---------- v11: bulk action bar ---------- */
.bulk-bar{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}

/* ---------- v11: NDA box ---------- */
.nda-box{max-height:220px;overflow-y:auto;background:#FCFBF8;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:13px;line-height:1.6;color:var(--text);margin:6px 0 12px;white-space:pre-line}

/* ---------- v11: listing wizard ---------- */
.wizard-tabs{display:flex;gap:8px;margin:16px 0 18px;border-bottom:1px solid var(--line)}
.wizard-tab{background:none;border:none;padding:10px 4px;font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.wizard-tab.on{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------- v13: nav browse dropdown ---------- */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{background:none;border:0;color:#D8DFE7;font:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:8px 10px;margin:-8px -10px;border-radius:7px;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s}
.nav-dropdown-trigger:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-dropdown.open .nav-dropdown-trigger{color:#fff;background:rgba(255,255,255,.1)}
.nav-dropdown .caret{color:#B9C4D0;transition:transform .18s ease}
.nav-dropdown.open .caret{transform:rotate(180deg);color:#fff}
.nav-dropdown-menu{position:absolute;top:100%;left:-10px;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(22,40,60,.2);min-width:230px;padding:8px;z-index:50;opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
/* "Commercial" is the rightmost dropdown, and 210px anchored at
   left:-10px under its trigger was running off the edge of the screen
   (then getting silently clipped by the site's overflow-x:hidden) — the
   .align-right flip is applied by JS in header.php once it measures that
   a menu would overflow, whichever item that ends up being. */
.nav-dropdown.align-right .nav-dropdown-menu{left:auto;right:-10px}
.nav-dropdown.open .nav-dropdown-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-dropdown-menu a{display:block;padding:11px 14px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink) !important;transition:background .12s}
.nav-dropdown-menu a:hover{background:var(--brass-soft)}

/* ---------- v13: admin market insights editor ---------- */
.insight-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:14px}
.insight-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.insight-form textarea{font-size:14px;line-height:1.6}

/* ---------- v13.1: flag broken/empty-scope insight entries ---------- */
.insight-broken{border-left:4px solid var(--danger)}

/* ---------- v15: auth panel + social sign-in ---------- */
.auth-panel{padding:34px 30px}
.auth-panel h1{text-align:center}
.auth-panel .sub{text-align:center}
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0 18px;color:var(--muted);font-size:13px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.oauth-row{display:flex;justify-content:center;gap:14px}
.oauth-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff;transition:border-color .15s,box-shadow .15s}
.oauth-btn:hover{border-color:var(--ink);box-shadow:0 2px 8px rgba(22,40,60,.1)}

/* ---------- v16: broker directory ---------- */
.broker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.broker-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;gap:14px;transition:border-color .15s,box-shadow .15s}
.broker-card:hover{border-color:var(--brass);box-shadow:0 2px 12px rgba(22,40,60,.07)}
.broker-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.broker-avatar-fallback{background:var(--brass-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;color:var(--brass)}
.broker-card-body h3{font-family:var(--serif);font-size:17px;margin:0;color:var(--ink)}
.broker-firm{font-size:13px;color:var(--muted);margin:2px 0}
@media (max-width:900px){.broker-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.broker-grid{grid-template-columns:1fr}}

/* ---------- v24: dashboard sidebar nav ---------- */
.dash-layout{display:flex;gap:32px;align-items:flex-start}
.dash-sidebar{width:220px;flex:0 0 220px;position:sticky;top:20px}
.dash-nav{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px}
.dash-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:6px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.dash-nav a:hover{background:var(--brass-soft)}
.dash-nav a.active{background:var(--ink);color:#fff}
.dash-nav a .count{font-size:11.5px;font-weight:700;color:var(--muted)}
.dash-nav a.active .count{color:#B9C4D0}
.dash-content{flex:1 1 auto;min-width:0}
@media (max-width:900px){
  .dash-layout{flex-direction:column}
  .dash-sidebar{width:100%;flex:none;position:static}
  .dash-nav{flex-direction:row;flex-wrap:wrap}
  .dash-nav a{flex:1 1 auto;justify-content:center}
}

/* ---------- v24: transactions list on dashboard ---------- */
.txn-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:var(--card)}
.txn-row.cancelled{opacity:.55}
.txn-row .txn-addr{font-weight:600;color:var(--ink)}

/* ---------- v24: more-visible "no guarantor" CTA ---------- */
.guarantor-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--brass-soft);border:1px solid #E2CE9A;border-radius:8px;padding:14px 18px;margin:-2px 0 24px}
.guarantor-cta p{margin:0;font-size:14px;color:#6f5a20}
.guarantor-cta a.btn{flex-shrink:0}

/* ---------- v24: shared deal document uploads ---------- */
.upload-list{display:flex;flex-direction:column;gap:0;margin:0 0 14px}
.upload-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.upload-row:last-child{border-bottom:0}
.upload-row .upload-name{font-weight:600;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.upload-row .upload-meta{font-size:12px;color:var(--muted);margin-top:2px}
.upload-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.upload-form input[type=file]{font-size:13px}

/* ---------- v24: inline tenant-edit form ---------- */
.tenant-edit-toggle{font-size:11px;padding:2px 8px;border:1px solid #ccc;background:#fff;border-radius:5px;cursor:pointer;margin-left:6px}
.tenant-edit-form{display:none;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.tenant-edit-form.open{display:flex}
.tenant-edit-form input[type=text],.tenant-edit-form input[type=email]{width:auto;flex:1 1 180px;padding:6px 8px;font-size:13px}

/* ---------- v27: home page Featured Listings (admin-curated) ---------- */
/* Plain white, same as the rest of the page — a tinted band read as too
   promotional/off-brand. A thin hairline top/bottom still marks it as
   its own section without breaking the site's otherwise all-white look.
   Reuses render_listing_card()/.grid as-is for visual consistency. */
.featured-section{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.featured-section .section-head h2{color:var(--ink)}

/* ---------- v26: mobile off-canvas menu (Crexi-style) ---------- */
/* Reference: crexi.com's mobile/app menu — a hamburger to the LEFT of the
   logo opens a white drawer that slides in from the left over a dimmed
   backdrop, with icon+label rows grouped under small section labels.
   Hidden entirely on desktop; .nav renders inline as before above 900px. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:0;padding:0;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* .nav-row is applied directly to real links (Brokers, Dashboard,
   Profile, Log out, Log in, Join) for the mobile drawer's row layout —
   it must NOT be hidden here, or those links vanish entirely on desktop
   (that was the actual bug: this used to read
   ".nav-section-label,.nav-row,.nav-icon{display:none}", which switched
   display:none on the links themselves, not just the mobile-only
   decoration). Only the purely-decorative mobile-only elements
   (section captions, icons) get hidden by default. */
.nav-section-label,.nav-icon{display:none}

.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,32,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:61}
.nav-backdrop.open{display:block;opacity:1;pointer-events:auto}
body.nav-locked{overflow:hidden}

@media (max-width:900px){
  .nav-toggle{display:flex;order:-1}
  .head-inner{justify-content:flex-start;gap:14px}

  .nav{
    display:flex;
    /* top is set inline by JS to the real header height right before
       opening (see header.php) — this is just a same-ballpark fallback
       for the instant before that runs. */
    position:fixed;top:64px;bottom:0;left:0;
    width:84vw;max-width:320px;
    background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 24px;
    box-shadow:0 0 40px rgba(0,0,0,.3);
    z-index:62;
    transform:translateX(-100%);
    transition:transform .22s ease;
    overflow-y:auto;
  }
  .nav.open{transform:translateX(0)}

  .nav-section-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:16px 18px 6px}
  .nav-section-label:first-child{padding-top:6px}

  .nav-icon{display:block;flex-shrink:0;color:var(--brass)}
  /* ".nav a" (base rule, desktop dark-header text color) beats a bare
     single-class selector on specificity even though it's declared
     earlier — matching the "a" type here keeps these wins deterministic. */
  .nav a.nav-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text) !important;font-size:15px;font-weight:500}
  .nav a.nav-row-cta{color:var(--brass) !important;font-weight:700}

  .nav-dropdown{width:100%}
  .nav-dropdown-trigger{
    width:100%;justify-content:flex-start;gap:14px;
    padding:13px 18px;margin:0;border-bottom:1px solid var(--line);border-radius:0;
    color:var(--text);
  }
  .nav-dropdown-trigger .nav-label{flex:1 1 auto;text-align:left}
  .nav-dropdown-trigger .caret{color:var(--muted);flex-shrink:0}
  .nav-dropdown.open .nav-dropdown-trigger{background:var(--brass-soft);color:var(--ink)}
  .nav-dropdown.open .nav-dropdown-trigger .caret{color:var(--brass)}
  /* The submenu floats absolutely on desktop; on mobile it needs to sit
     in normal flow, indented under its row, inside the drawer. */
  .nav-dropdown-menu{
    position:static;opacity:1;transform:none;pointer-events:auto;
    background:var(--brass-soft);border:0;box-shadow:none;border-radius:0;
    padding:2px 18px 10px 52px;margin:0;min-width:0;
  }
  .nav-dropdown-menu a{color:var(--text) !important;padding:9px 0;font-size:14px;display:block}
  .nav-dropdown-menu a:hover{background:none;color:var(--ink) !important}
}

/* ---------- v25: general mobile polish ---------- */
@media (max-width:700px){
  /* Dashboard/admin tables: rather than squeezing 5-6 columns into a
     phone width (which either truncates every cell or breaks out of the
     page), let the table scroll horizontally on its own row so the rest
     of the page layout stays intact. */
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table.data td, table.data th{white-space:normal}
}
@media (max-width:900px){
  .stat-cards{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:30px 0}
  .section-head{align-items:flex-start;flex-direction:column;gap:10px}
  .section-head .btn{width:100%;text-align:center}
  .stat-cards{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px}
  .stat-num{font-size:24px}
  .filters{grid-template-columns:1fr;padding:14px}
  .dash-nav{flex-direction:column}
  .dash-nav a{justify-content:space-between}
  .txn-row{flex-direction:column;align-items:flex-start;gap:8px}
  .txn-row > div:last-child{text-align:left;align-self:stretch}
  .upload-row{flex-direction:column;align-items:flex-start;gap:8px}
  .upload-form{flex-direction:column;align-items:stretch}
  .actions{gap:6px}
  .btn.small{padding:8px 12px}
  table.data th,table.data td{padding:10px}
  .panel{padding:22px 18px}
  .facts{padding:2px 16px}
  .hero .search-bar button{width:100%}
}
@media (max-width:400px){
  .brand-tag{display:none}
  .stat-cards{grid-template-columns:1fr}
}