@keyframes spin{to{transform:rotate(360deg)}}
/* Skip-to-content link for keyboard / screen-reader users. Hidden off-screen
   until focused, then reveals at top-left so the user can bypass the nav. */
.skip-link{position:absolute;left:8px;top:-40px;z-index:99999;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s ease}
.skip-link:focus,.skip-link:focus-visible{top:8px;outline:2px solid var(--coral);outline-offset:2px}
/* Keyboard focus rings for interactive controls that previously had none —
   :focus-visible only, so mouse/touch taps stay ring-free. Teal matches the
   existing post-tip-close ring. */
.pw-toggle:focus-visible,.chip:focus-visible,.pill-btn:focus-visible,.role-card:focus-visible,.prop-card:focus-visible,.carousel-arrow:focus-visible,.testimonials-arrow:focus-visible,.chat-phone-btn:focus-visible,.chat-overflow-btn:focus-visible,.message-tab:focus-visible,.subtab:focus-visible,.bottom-nav-item:focus-visible,.profile-modal-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#admin-password-form input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* New design tokens */
  --paper:#FBFAF7;--paper-2:#F2EFE8;--paper-3:#E8E4D9;
  --ink:#0E0F12;--ink-2:#2A2D33;--ink-3:#5A6068;--ink-4:#8E949C;--ink-5:#BFC4CB;
  --line:#E1DCCD;--line-2:#EBE6D6;
  --teal:#0E5C56;--teal-2:#0B4944;--teal-3:#127870;
  --lime:#F4D35E;--lime-2:#E5C64E;
  --coral:#FF7A5A;--coral-2:#FF8E73;--coral-3:#E55F40;
  --butter:#F4D35E;--rose:#F2C4B5;--mint:#B8E6D4;--sky:#9DC9D9;
  --danger:#D04A3F;
  /* Text/icon color on FIXED accent fills (lime/butter/mint/rose). These stay
     near-black in BOTH themes — the accents don't flip in dark mode, so their
     text must not either. -2 is the secondary tint (≡ --ink-2 in light). */
  --on-accent:#0E0F12;--on-accent-2:#2A2D33;
  --shadow:0 1px 0 rgba(14,15,18,.04), 0 8px 22px -10px rgba(14,15,18,.18);
  --shadow-md:0 2px 0 rgba(14,15,18,.05), 0 28px 48px -20px rgba(14,15,18,.4);
  --shadow-pop:0 12px 32px -8px rgba(14,92,86,.5);
  /* Aliases — old names mapped to new palette so existing references keep working */
  --blue:var(--ink);--blue-mid:var(--teal-3);--blue-light:var(--paper-2);
  --green:var(--teal);--green-light:var(--mint);
  --green-pin:var(--teal-3);--blue-pin:var(--teal);--orange-pin:var(--coral);--purple-pin:var(--coral-3);
  --white:var(--paper);
  --gray-50:var(--paper);--gray-100:var(--paper-2);--gray-200:var(--line-2);--gray-300:var(--line);
  --gray-400:var(--ink-4);--gray-500:var(--ink-3);--gray-600:var(--ink-2);--gray-700:var(--ink);
  --text:var(--ink);
}
html{scroll-behavior:smooth}
body{font-family:'Inter','SF Pro Text',system-ui,sans-serif;color:var(--text);background:var(--paper);overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11";}
/* Form controls don't inherit the page font by default — without this, buttons/inputs fall back to OS Arial/Roboto. */
button,input,select,textarea{font-family:inherit}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(14,15,18,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:64px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Instrument Serif',serif;font-size:22px;font-style:italic;color:var(--paper);cursor:pointer;line-height:1;letter-spacing:-.02em;text-decoration:none}
.nav-logo:hover,.nav-logo:focus,.nav-logo:visited{text-decoration:none;color:var(--paper)}
.nav-wordmark{color:var(--paper);font-style:normal}
.nav-wordmark span{color:var(--lime)}
.nav-logo .nav-logomark{width:38px;height:38px;display:grid;place-items:center;flex-shrink:0}
/* RoomPin logo mark colors. Defaults: lime pentagon house + ink eye-dots.
   Inverted on light backgrounds (setup/about/footer): ink pentagon + lime dots. */
.rp-mark{width:100%;height:100%;display:block}
.rp-pin{fill:var(--lime)}
.rp-house{fill:var(--ink)}
.setup-logomark .rp-pin,
.about-logomark .rp-pin,
.footer-logomark .rp-pin{fill:var(--ink)}
.setup-logomark .rp-house,
.about-logomark .rp-house,
.footer-logomark .rp-house{fill:var(--lime)}
/* Mobile nav action buttons (search + grid) — hidden on desktop */
.nav-actions-mobile{display:none;gap:6px;align-items:center}
.nav-icon-btn{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--ink-5);font-size:14px;cursor:pointer;transition:all .15s;font-family:inherit}
.nav-icon-btn:hover{background:rgba(255,255,255,.15);color:var(--paper)}
.nav-icon-badge{position:absolute;top:-3px;right:-3px;background:var(--coral);color:var(--paper);font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:14px}
.nav-icon-badge.show{display:flex}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-5);text-decoration:none;padding:6px 13px;border-radius:8px;cursor:pointer;transition:all .15s}
.nav-links a:hover{color:var(--paper);background:rgba(255,255,255,.1)}
.nav-badge-inline{background:var(--coral);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;margin-left:4px;display:none}
.nav-badge-inline.show{display:inline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:inherit;line-height:1;text-decoration:none}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink-2)}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{background:var(--paper-2)}
.btn-lime{background:var(--lime);color:var(--on-accent);border:none}
.btn-lime:hover{background:var(--lime-2)}
.btn-coral{background:var(--coral);color:var(--on-accent);border:none;box-shadow:0 8px 20px rgba(232,93,69,.25)}
.btn-coral:hover{background:var(--coral-3)}
/* .nav-links a (0,1,1) outranks .btn-coral (0,1,0): without this, the nav
   "Log in" pill renders --ink-5 gray on coral (~1.5:1). Coral is a fixed
   accent, so its ink must be the fixed --on-accent in every theme/scope. */
.nav-links a.btn-coral{color:var(--on-accent)}
.nav-links a.btn-coral:hover{color:var(--on-accent);background:var(--coral-3)}
.btn-ghost{background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--paper-3)}
.btn-danger{background:var(--rose);color:var(--danger);border:none}
.btn-danger:hover{background:var(--coral-2)}
.btn-disabled{background:var(--paper-3);color:var(--ink-4);border:none;cursor:default;pointer-events:none}
.btn-sm{font-size:12px;padding:8px 14px;border-radius:10px}
.btn.full{width:100%}
.profile-icon{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:inherit;flex-shrink:0}
.page{display:none; flex:1;}
.page.active{display:block}
#page-setup{background:var(--paper);display:none;flex-direction:column;align-items:center;justify-content:center;padding:92px 20px 40px;flex:1;}
#page-setup.active{display:flex}
body.logged-out #page-setup.active{justify-content:center;flex:1}
body.logged-out #topnav-explore,
body.logged-out #topnav-matches,
body.logged-out #topnav-messages,
body.logged-out #topnav-create,
body.logged-out .nav-links .profile-icon{display:none !important}
body:not(.logged-out) #topnav-login,
body:not(.logged-out) #topnav-signup{display:none !important}
/* Logged-out visitors can now browse the public Explore map, so the hero's
   "Browse Listings" button is shown to them too (alongside "Get Started Free")
   and routes straight to #/explore. Owner names + Connect stay locked. */
/* Logged-in visitors can revisit the marketing landing via the logo. The
   "Get Started Free" signup CTA is meaningless to them — hide it and let
   #hero-cta-explore (Browse Listings) carry the primary CTA slot. */
body:not(.logged-out) #hero-cta-signup{display:none !important}
body.logged-out .bottom-nav{display:none !important}
/* The final CTA band ("Ready to find your room? Join hundreds…") pitches
   JOINING — show it to logged-out visitors (its actual audience; the buttons
   route through the auth gate, see wireLanding) and hide it for members, who
   reach the landing only via the logo and already have the bottom nav. */
body:not(.logged-out) .landing-final-cta{display:none !important}
.setup-card{max-width:440px;width:100%;margin:20px;padding:40px 36px;background:var(--paper);border-radius:18px;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.setup-logo{font-family:'Instrument Serif',serif;font-size:24px;font-style:italic;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.setup-wordmark{color:var(--ink);font-style:italic}
.setup-wordmark span{color:var(--teal)}
.setup-logo .setup-logomark{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
.about-logo{font-family:'Instrument Serif',serif;font-size:24px;font-style:italic;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.about-logo .about-logomark{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
.about-wordmark{color:var(--ink);font-style:italic}
.about-wordmark span{color:var(--teal)}
.setup-sub{font-size:14px;color:var(--gray-600);margin-bottom:32px;line-height:1.5}
.setup-step{display:none}
.setup-step.active{display:block}

/*
  Slide-transition between sub-steps. Each .setup-step is laid out
  inside .setup-slides; we don't actually translate them — switching
  the .active class fades+slides via the CSS below. Kept minimal so
  it works on low-end mobile without jank.
*/
.setup-step{opacity:0;transform:translateX(20px);transition:opacity .25s ease, transform .25s ease;pointer-events:none;position:absolute;width:100%;left:0;top:0;}
.setup-step.active{opacity:1;transform:translateX(0);pointer-events:auto;position:relative;}
.setup-step.exit-left{opacity:0;transform:translateX(-20px);pointer-events:none;position:absolute;}
.setup-slides{position:relative;overflow:hidden;}
.setup-label{font:600 16px 'Inter',sans-serif;color:var(--ink-2);letter-spacing:normal;margin-bottom:18px}
.setup-input{width:100%;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:12px;font-size:14px;color:var(--ink);font-family:inherit;outline:none;margin-bottom:12px;transition:border-color .15s; height:46px; box-sizing:border-box;background:var(--paper)}
.setup-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime)}

/* OTP code entry — a taller, recessed mono field so the 6-digit code reads as
   intentional rather than a generic text box. Scoped via #setup-step-1b purely to
   raise specificity above the blanket "all mobile inputs → 16px" iOS auto-zoom guard
   (an input:not(...) chain at specificity (0,4,1); the ID scope gives us (1,1,0)).
   The !important is still required because that guard is itself !important. 20px ≥
   16px so this never re-triggers zoom — it just sizes the code legibly on both
   mobile and desktop instead of falling back to the cramped 16px. */
#setup-step-1b .otp-input{height:54px;background:var(--paper-2);text-align:center;font-family:'JetBrains Mono','Inter',monospace;font-size:20px !important;font-weight:500;letter-spacing:.4em}
#setup-step-1b .otp-input::placeholder{color:var(--ink-5);font-weight:400}

/* Password toggle (show/hide eye icon) */
.pw-wrap{position:relative;margin-bottom:12px;}
.pw-wrap .setup-input{margin-bottom:0;width:100%;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);padding:4px;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.pw-toggle:hover{color:var(--gray-700);}

/* Notifications settings (Profile → Notifications) ------------------------ */
.notif-pref-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--gray-100,#F0EDE6);}
.notif-pref-row:first-of-type{border-top:none;padding-top:4px;}
.notif-pref-text{flex:1;min-width:0;}
.notif-pref-label{font-size:14px;font-weight:600;color:var(--ink-1,#0E0F12);margin-bottom:3px;}
.notif-pref-desc{font-size:12px;line-height:1.5;color:var(--ink-3,#6B7280);}
/* iOS-style on/off switch */
.rp-switch{position:relative;display:inline-block;flex:none;width:46px;height:28px;cursor:pointer;}
.rp-switch input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.rp-switch .rp-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--gray-300,#CFCABA);transition:background .18s ease;}
.rp-switch .rp-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s ease;}
.rp-switch input:checked + .rp-switch-track{background:var(--teal,#0FB5A6);}
.rp-switch input:checked + .rp-switch-track::after{transform:translateX(18px);}
.rp-switch input:focus-visible + .rp-switch-track{outline:2px solid var(--teal,#0FB5A6);outline-offset:2px;}
.rp-switch input:disabled + .rp-switch-track{opacity:.5;}
.notif-blocked{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--danger,#D14343);background:var(--danger-bg,rgba(209,67,67,.07));border-radius:10px;padding:10px 12px;margin:2px 0 6px;}
.notif-fix-link{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--danger,#D14343);text-decoration:underline;cursor:pointer;}

/* Admin notification-log modal (Admin → Users → Notifications) */
.admin-modal-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px;}
.admin-modal{background:var(--paper,#FBF8F1);color:var(--ink-1,#0E0F12);border-radius:14px;width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;}
.admin-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--gray-100,#E9E7DF);}
.admin-modal-title{font-size:15px;font-weight:700;}
.admin-modal-close{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-3,#6B7280);padding:4px;}
.admin-modal-body{padding:8px 14px 16px;overflow-y:auto;}
.admin-notif-row{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-top:1px solid var(--gray-100,#F0EDE6);}
.admin-notif-row:first-child{border-top:none;}
.admin-notif-ch{flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:6px;font-family:'JetBrains Mono',monospace;}
.admin-notif-ch-push{background:rgba(15,181,166,.14);color:var(--teal,#0FB5A6);}
.admin-notif-ch-email{background:rgba(29,78,216,.12);color:var(--blue,#1d4ed8);}
.admin-notif-main{min-width:0;flex:1;}
.admin-notif-title{font-size:13px;font-weight:600;color:var(--ink-1,#0E0F12);}
.admin-notif-sub{font-size:11px;color:var(--ink-3,#6B7280);margin-top:2px;}
.admin-notif-status{margin-left:8px;font-size:10px;font-weight:700;color:var(--danger,#D14343);text-transform:uppercase;}

/* Phone input with inline +91 prefix */
.phone-input-wrap{position:relative;margin-bottom:12px;}
.phone-input-wrap .setup-input{margin-bottom:0;width:100%;}
.phone-prefix{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--gray-500);pointer-events:none;z-index:1;}

.role-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
/* Grid (icon | title over desc) instead of a 3-column flex row — the old
   layout squeezed the h3 into a sliver and "Owner / Broker" broke across
   three lines with a lone "/" on its own line. */
.role-card{border:2px solid var(--line-2);border-radius:18px;padding:18px;text-align:left;cursor:pointer;transition:all .2s;display:grid;grid-template-columns:48px 1fr;column-gap:14px;row-gap:2px;align-items:start;position:relative}
.role-card .icon{grid-row:1 / span 2}
.role-card:hover{border-color:var(--ink-4)}
.role-card.selected{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime)}
.role-card .icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex-shrink:0;background:var(--paper-2);color:var(--ink)}
.role-card.selected .icon{background:var(--lime);color:var(--on-accent)}
.role-card h3{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.role-card p{font-size:12px;color:var(--ink-3);line-height:1.5}
.setup-btn{width:100%;padding:14px;background:var(--ink);color:var(--paper);border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.setup-btn:hover{background:var(--ink-2)}
.setup-btn:disabled{opacity:.4;cursor:not-allowed}
#page-landing{padding-top:72px}
.hero{padding:64px 24px 52px;max-width:740px;margin:0 auto;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--lime);color:var(--on-accent);font:600 12px 'Inter';padding:5px 14px;border-radius:999px;margin-bottom:20px}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--teal);border-radius:50%;flex-shrink:0}
.hero h1{font-family:'Instrument Serif',serif;font-size:42px;font-weight:400;color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.hero h1 em{font-style:italic;color:var(--coral)}
.hero p{font-size:15px;color:var(--ink-3);max-width:440px;margin:0 auto 26px;line-height:1.65}
.hero-social-proof{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:10px 20px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;width:fit-content;margin-left:auto;margin-right:auto}

/* Landing hero CTAs */
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:8px 0 4px}
.hero-ctas .btn{padding:12px 22px;font-size:15px;font-weight:600;border-radius:12px}
.hero-ctas .btn-lg{padding:13px 24px;font-size:15px}
@media(max-width:600px){
  .hero-ctas{flex-direction:column;width:100%;max-width:280px;margin:8px auto 4px}
  .hero-ctas .btn{width:100%;justify-content:center}
}
.hero-proof-number{font-family:'Instrument Serif',serif;font-size:24px;font-weight:400;color:var(--teal);line-height:1}
.hero-proof-label{font-size:13px;color:var(--ink-3)}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{font-size:14px;padding:11px 24px}
.map-preview-wrap{max-width:840px;margin:0 auto;padding:0 24px 64px}
/* Subtle map-grid placeholder painted behind #preview-map (z-index 1):
   the real Google map covers it in prod; on slow-load/failure the box
   reads as an intentional map placeholder, not a dead rectangle. */
.map-preview-box{border-radius:14px;overflow:hidden;border:1px solid var(--gray-200);box-shadow:var(--shadow-md);position:relative;height:290px;background:repeating-linear-gradient(0deg,transparent 0 39px,var(--line-2) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--line-2) 39px 40px),var(--paper-2)}
.map-preview-box::before{content:"";position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;color:var(--ink-4);opacity:.6}
.map-preview-box::before{background:no-repeat center/42px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' fill='none' stroke='%238E949C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
#preview-map{width:100%;height:100%;z-index:1;pointer-events:none}
.map-preview-fade{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,rgba(251,250,247,.95));z-index:2;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.map-preview-fade span{font-size:13px;color:var(--gray-500)}
.section{padding:48px 24px}
.section-inner{max-width:880px;margin:0 auto}
.section-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:7px}
.section-title{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;color:var(--ink);margin-bottom:28px;line-height:1.2;letter-spacing:-.01em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper-2);border:1px solid var(--line-2);border-radius:18px;padding:24px 20px}
.step-num{width:32px;height:32px;border-radius:11px;background:var(--ink);color:var(--lime);font:600 13px 'Inter';display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font:600 15px 'Inter';color:var(--ink);margin-bottom:6px}
.step p{font-size:13px;color:var(--ink-3);line-height:1.6}
.pain-points{display:flex;flex-direction:column;gap:16px}
.pain-point{display:flex;gap:16px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line-2);border-radius:16px;padding:24px 20px}
.pain-icon{font-size:28px;flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;background:var(--paper);border-radius:14px;border:1px solid var(--line);color:var(--ink-3)}
.pain-text h3{font:600 15px 'Inter';color:var(--ink);margin-bottom:4px}
.pain-text p{font-size:13px;color:var(--ink-3);line-height:1.6}
.why{background:var(--ink);padding:64px 24px;border-radius:24px;margin:0 16px}
.why-inner{max-width:740px;margin:0 auto}
.why .section-label{color:var(--lime)}
.why .section-title{color:var(--paper);margin-bottom:32px}
.why-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:540px){.why-stats{grid-template-columns:1fr}}
.why-stat{border-left:2px solid var(--lime);padding-left:16px}
.why-stat .num{font-family:'Instrument Serif',serif;font-size:28px;color:var(--paper);line-height:1}
.why-stat .lbl{font-size:12px;color:var(--ink-4);margin-top:6px}

.testimonials-section{padding-bottom:0!important;position:relative}
/* Mask fade regions shrunk from 24px/60px down to 8px on each side so the
   new prev/next arrow buttons positioned at left:6px / right:6px aren't
   semi-transparent (the larger right-fade put the next button at ~10-77%
   opacity across its width — looked broken). 8px is enough fade to avoid
   sharp card edges; the buttons themselves visually anchor the carousel. */
.testimonials-track-wrap{overflow:hidden;margin:0 -24px;padding:0 24px;-webkit-mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);position:relative}
/* Right-edge "swipe to see more" hint — appears as a soft pulsing arrow
   so users know the testimonials carousel is scrollable. Hidden once the
   user starts scrolling (handled inline by a small JS listener below). */
.testimonials-track-wrap::after{content:'';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:36px;line-height:1;color:var(--ink-3);pointer-events:none;opacity:.7}
.testimonials-track-wrap.scrolled::after{display:none}
/* Real clickable arrows over the testimonial track. The legacy ::after pulse
   was decorative (pointer-events:none) and desktop users had no way to
   scroll. These overlay buttons take pointer events; the prev arrow stays
   hidden until the user scrolls past the start. */
.testimonials-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:opacity .18s ease,transform .18s ease}
.testimonials-arrow:hover{transform:translateY(-50%) scale(1.08)}
.testimonials-arrow-prev{left:6px}
.testimonials-arrow-next{right:6px;animation:rp-pulse 1.6s ease-in-out infinite}
.testimonials-arrow-hidden{opacity:0;pointer-events:none}
@keyframes rp-pulse{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(4px)}}
.testimonials-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 0 24px;scrollbar-width:none}
.testimonials-track::-webkit-scrollbar{display:none}
.testimonial-card{flex:0 0 320px;scroll-snap-align:start;background:var(--paper-2);border:1px solid var(--line-2);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transition:transform .2s,box-shadow .2s}
.testimonial-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.testimonial-quote{font-family:'Instrument Serif',serif;font-size:17px;font-style:italic;color:var(--ink);line-height:1.55;flex:1}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--lime);font:700 15px 'Inter';display:grid;place-items:center;flex-shrink:0}
.testimonial-name{font:600 13px 'Inter';color:var(--ink)}
.testimonial-role{font-size:11px;color:var(--ink-3);margin-top:2px}

.landing-final-cta{background:var(--ink);padding:64px 24px;margin-top:48px;text-align:center}
.landing-final-cta-inner{max-width:540px;margin:0 auto}
.landing-final-cta h2{font-family:'Instrument Serif',serif;font-size:36px;font-weight:400;color:var(--paper);margin-bottom:12px}
.landing-final-cta p{font-size:15px;color:var(--ink-4);margin-bottom:28px;line-height:1.6}
#global-footer{border-top:1px solid var(--line-2);padding:48px 24px; background:var(--paper); margin-top: auto;}
.footer-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-logo{font-family:'Instrument Serif',serif;font-size:20px;color:var(--ink);line-height:1;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.footer-wordmark{color:var(--ink);font-style:italic}
.footer-wordmark span{color:var(--teal)}
.footer-logo .footer-logomark{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
.footer-sub{font-size:13px;color:var(--ink-4)}
.footer-links{display:flex;gap:20px}
/* Both <a> (legacy) and <button> (a11y conversion). Button-reset properties */
/* keep the visual identical while making them keyboard-focusable + properly */
/* announced by screen readers as activatable controls. */
.footer-links a,.footer-links button{font-size:13px;font-weight:500;color:var(--ink-3);text-decoration:none;cursor:pointer;transition:color .15s;background:none;border:none;padding:0;font-family:inherit}
.footer-links a:hover,.footer-links button:hover{color:var(--ink)}
.footer-links button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
/* Hinjewadi rent-guide teaser section (landing) */
.rentguide-sub{max-width:620px;margin:0 0 24px;color:var(--ink-3);font-size:16px;line-height:1.6}
.rentguide-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 28px;max-width:680px}
.rentguide-chips .rg-chip{display:flex;flex-direction:column;padding:14px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px}
.rentguide-chips .rg-amt{font-family:'Instrument Serif',serif;font-style:italic;font-size:30px;line-height:1;color:var(--ink)}
.rentguide-chips .rg-lbl{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);font-weight:500;margin-top:6px}
.footer-bottom{max-width:880px;margin:20px auto 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-4);text-align:center}

#page-explore.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-top: 64px; overflow: hidden; }
/* No z-index / isolation here on purpose: either one makes .map-area a
   stacking context that TRAPS the floating #mobile-filter-bar (z-index:1500)
   below its sibling #mobile-filter-backdrop (z-index:1400). When a filter
   dropdown is open the backdrop then covers the filter bar, so tapping a
   second filter hits the backdrop (closes everything) and the user must tap
   twice. Keep position:relative — it positions the absolute filter bar,
   map-legend and listing-count without forming a z-index stacking context. */
.map-area { flex: 1; min-height: 0; position: relative; width: 100%; height: 100%; }
#map { width: 100%; height: 100%; min-height: calc(100vh - 72px); }

.filters-panel {
  position: absolute; top: 16px; left: 16px; width: 280px;
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: rgba(251,250,247,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(14,15,18,0.08); border-radius: 18px;
  box-shadow: 0 2px 0 rgba(14,15,18,.05),0 28px 48px -20px rgba(14,15,18,.4); z-index: 500; display: flex; flex-direction: column;
}
/* Hide mobile-only chrome on desktop. Pulled mobile-listing-count out of
   the filter bar so it now needs its own desktop-hide rule. */
.mobile-filter-bar, .mobile-filter-backdrop, .mobile-listing-count, .mobile-filter-reset { display: none; }
/* Dropdowns are hidden by default — shown via .open class on mobile */
#page-explore > .filter-inline-dropdown { display: none; }


.explore-search { position: absolute; top: 16px; left: 360px; z-index: 500; display: flex; gap: 8px; width: 320px; max-width: calc(100vw - 380px); }
.explore-search input { width: 100%; padding: 0 16px; height: 44px; border: 1px solid var(--line); border-radius: 14px; font: 500 14px 'Inter',sans-serif; box-shadow: 0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18); outline: none; background:var(--paper); color:var(--ink); }
.explore-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }

.filters-header{padding:14px 16px 10px;border-bottom:1px solid var(--line-2)}
.filters-header h2{font:600 14px 'Inter';color:var(--ink)}
.filters-header p{font:500 12px 'Inter',sans-serif;color:var(--ink-4);margin-top:2px;letter-spacing:normal}
.listing-count{font-weight:700;color:var(--teal)}
.filter-section{padding:12px 16px;border-bottom:1px solid var(--line-2)}
.filter-label{font:500 11px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.type-tabs{display:flex;background:var(--paper-2);border:1px solid var(--line-2);border-radius:11px;padding:3px}
.type-tab{flex:1;padding:5px 4px;font:600 12px 'Inter';text-align:center;cursor:pointer;border-radius:8px;color:var(--ink-3);transition:all .15s;border:none;background:none}
.type-tab.active{background:var(--ink);color:var(--paper);box-shadow:none}
.range-display{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.range-display span{font-weight:600;color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--teal)}
.filter-chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:5px 12px;border-radius:999px;font:500 12px 'Inter';cursor:pointer;border:1px solid var(--line);color:var(--ink-2);background:var(--paper);transition:all .15s;font-family:inherit}
.chip.active{border-color:var(--ink);color:var(--paper);background:var(--ink)}
.chip.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
/* Smooth hide/show animation utility */
.hide-smooth{opacity:0!important;max-height:0!important;max-width:0!important;padding:0!important;margin:0!important;border-width:0!important;font-size:0!important;overflow:hidden!important;pointer-events:none!important;transition:all 0.25s ease-out}
/* Completely remove element from flow (for filter wrappers) */
.hide-collapse{display:none!important}

/* Lock body scroll when mobile filter dropdowns are open */
body.modal-open { overflow: hidden; position: fixed; width: 100%; }


/* Ensure elements have a transition even when the class is removed (for the expand animation) */
.filter-section,#mf-bhk-wrapper,.chip,.dropdown-option{transition:all 0.25s ease-out}
/* Set natural max-height on filter sections/chips so transition works on removal */
.filter-section{max-height:200px;opacity:1}
#mf-bhk-wrapper{max-height:60px;opacity:1}
.chip{max-height:40px;opacity:1}
.dropdown-option{max-height:50px;opacity:1}
input[type=date]{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:14px;font:500 13px 'Inter',sans-serif;color:var(--ink);font-family:inherit;outline:none;box-sizing:border-box;max-width:100%;background:var(--paper)}
input[type=date]:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime)}
.filter-reset{padding:10px 16px 13px}
.btn-reset{width:100%;padding:8px;font:500 12px 'Inter',sans-serif;color:var(--ink-3);background:var(--paper-2);border:1px solid var(--line-2);border-radius:14px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-reset:hover{background:var(--paper-3);color:var(--ink)}


.map-legend:empty{display:none}
.map-legend{position:absolute;bottom:18px;right:18px;z-index:500;background:rgba(251,250,247,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(14,15,18,0.08);border-radius:14px;padding:8px 14px;box-shadow:0 4px 12px -2px rgba(14,15,18,.18)}
/* Demand nudge shown in the owner create flow */
.demand-nudge{display:flex;align-items:center;gap:10px;background:var(--mint,#E1F5EE);border:1px solid var(--teal-3,#B2DDD9);border-radius:14px;padding:11px 14px;margin-bottom:14px;font-size:13px;color:var(--on-accent,#0E5C56);line-height:1.4}
.demand-nudge-dot{width:8px;height:8px;border-radius:50%;background:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,.18);flex:none}
/* Explore demand signal — sidebar (desktop) and mobile strip */
.explore-demand-inner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--teal,#1D9E75);margin-top:6px;line-height:1.4}
.explore-demand-inner .demand-dot{width:7px;height:7px;border-radius:50%;background:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,.18);flex:none}
/* Mobile: full-width strip below the search bar (listing count now bottom-left, no conflict) */
@media(max-width:980px){
  #explore-demand-mobile{position:absolute;top:112px;left:8px;right:8px;z-index:1200;border-radius:10px;box-shadow:0 2px 8px -2px rgba(14,15,18,.18)}
  #explore-demand-mobile .explore-demand-inner{background:var(--mint,#E1F5EE);border:1px solid var(--teal-3,#B2DDD9);border-radius:10px;padding:8px 12px;margin:0;font-size:12.5px;color:var(--on-accent,#0E5C56)}
}
@media(min-width:981px){#explore-demand-mobile{display:none!important}}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}
.legend-dot.owner{background:var(--ink);border:1.5px solid var(--paper)}
.legend-dot.tenant{background:var(--coral);border:1.5px solid var(--paper)}
.legend-dot.mine{background:var(--lime);border:1.5px solid var(--lime-2)}
.legend-dot.search-area{background:#B8E6D4;border:1.5px solid #0E5C56;width:12px;height:12px}
.legend-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gray-600);margin-bottom:4px}
.legend-row:last-child{margin-bottom:0}

.ldot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid var(--paper);box-shadow:0 0 0 1.5px rgba(0,0,0,.12)}
.ldot.g{background:var(--blue)}.ldot.b{background:var(--blue-pin)}
.ldot.o{background:var(--orange-pin)}.ldot.p{background:var(--purple-pin)}

/* Price bubble markers */
.price-marker{background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 4px 8px -2px rgba(14,15,18,.25);border:1.5px solid var(--paper);cursor:pointer;font-family:'Inter',sans-serif;line-height:1.2;text-align:center;position:relative;transition:transform .12s}
.price-marker:hover{transform:scale(1.08)}
.price-marker::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--ink)}
.price-marker.mine{background:var(--lime);color:var(--on-accent);border-color:var(--lime-2)}
.price-marker.mine::after{border-top-color:var(--lime)}
.cluster-marker{display:flex;align-items:center;gap:5px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;padding:5px 9px;border-radius:18px;white-space:nowrap;box-shadow:0 4px 8px -2px rgba(14,15,18,.25);border:1.5px solid var(--paper);cursor:pointer;font-family:'Inter',sans-serif;line-height:1.2;transition:transform .12s}
.cluster-marker .cm-ico{flex:none;opacity:.9}
.cluster-marker .cm-chev{flex:none;margin-left:1px;opacity:.65}
.cluster-marker .cm-label{font-variant-numeric:tabular-nums}
.cluster-marker:hover{transform:scale(1.1)}
.cluster-marker.mine{background:var(--lime);color:var(--on-accent);border-color:var(--lime-2)}
/* Map <-> List view controls — hidden by default; shown only on mobile (full
   rules live in the max-width:980px block). Keeps desktop explore untouched. */
.explore-view-toggle,.explore-list-view{display:none}

.my-search-boundary{opacity:.6}

.buddy-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;padding:14px;margin-bottom:10px;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.buddy-card .buddy-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.buddy-card .buddy-name{font:600 14px 'Inter';color:var(--ink)}
.buddy-card .buddy-budget{font-family:'Instrument Serif',serif;font-size:20px;color:var(--ink)}
.buddy-card .buddy-meta{font:500 11px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);margin-bottom:8px;letter-spacing:.04em}
.buddy-overlap{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:8px;background:var(--paper-2);color:var(--teal)}



/* Detail panel */
.detail-panel {
  position: absolute; top: 16px; right: 16px; bottom: 16px; width: 360px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--shadow-lg,0 2px 0 rgba(14,15,18,.05), 0 28px 48px -20px rgba(14,15,18,.4));
  z-index: 600; transform: translateX(120%);
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; display: flex; flex-direction: column;
}
.detail-panel.open { transform: translateX(0); }
.dp-close{position:sticky;top:12px;align-self:flex-end;margin:12px 12px -44px 0;width:36px;height:36px;border-radius:11px;border:none;background:rgba(251,250,247,.92);cursor:pointer;font-size:18px;color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:background 0.15s;flex-shrink:0;backdrop-filter:blur(4px)}
.dp-close:hover{background:var(--paper)}
.dp-photo {
  height: 200px; background: linear-gradient(135deg,var(--rose),var(--butter)); display: flex; align-items: center; justify-content: center;
  font-size: 50px; color: rgba(0,0,0,.12); border-radius: 17px 17px 0 0; flex-shrink: 0; overflow: hidden;
  position:relative;
}
.dp-body{padding:18px;flex:1}
.dp-role{display:inline-flex;align-items:center;gap:4px;font:500 10px 'JetBrains Mono','Inter',monospace;padding:4px 10px;border-radius:8px;margin-bottom:10px;letter-spacing:.08em;text-transform:uppercase}
.dp-role.owner{background:var(--paper-2);color:var(--teal)}
.dp-role.tenant{background:var(--paper-2);color:var(--coral)}
.dp-role.mine{background:var(--butter);color:var(--on-accent)}
.dp-name{font:600 18px 'Inter';color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.dp-verified{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--lime);color:var(--on-accent);font-size:10px;font-weight:800;flex-shrink:0}
.dp-rent{font-family:'Instrument Serif',serif;font-size:28px;color:var(--ink);margin-bottom:6px;line-height:1;letter-spacing:-.01em}
.dp-rent small{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-3)}
.dp-posted{font:500 11px 'JetBrains Mono','Inter',monospace;color:var(--ink-4);margin-bottom:14px;letter-spacing:.04em}
.dp-match-banner{padding:10px 14px;border-radius:14px;margin-bottom:14px;font-size:12px;font-weight:600}
.dp-match-banner.yes{background:var(--lime);color:var(--on-accent)}
.dp-match-banner.soft{background:var(--butter);color:var(--on-accent)}
.dp-match-banner.no{background:var(--paper-2);color:var(--ink-3)}
.dp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.dp-field{background:var(--paper-2);border:1px solid var(--line-2);border-radius:13px;padding:10px 12px}
.dp-field-lbl{font:500 10px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.dp-field-val{font:600 13px 'Inter';color:var(--ink);margin-top:2px}
.dp-field.span-2{grid-column:span 2}
.dp-desc{font-size:13px;color:var(--ink-2);line-height:1.55;background:transparent;border-radius:0;padding:0;margin-bottom:18px}
.dp-section-title{font:600 11px 'JetBrains Mono','Inter',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:18px 0 10px}
.contact-btn{width:100%;padding:0;height:48px;border-radius:14px;font:600 14px 'Inter';cursor:pointer;border:none;font-family:inherit;transition:all .15s;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.005em}
.contact-btn:hover{background:var(--ink-2)}
.contact-revealed{font-size:14px;font-weight:600;color:var(--teal);text-align:center;padding:12px;background:var(--paper-2);border-radius:14px;border:1px solid var(--line-2)}
.own-listing-banner{background:var(--butter);border:none;border-radius:14px;padding:12px 14px;font-size:12px;color:var(--on-accent);margin-bottom:14px}

/* Listing cards (multi-detail / editorial) */
.listing-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;cursor:pointer;transition:all .18s;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.listing-card:hover{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime),0 12px 24px -10px rgba(14,15,18,.3)}
.listing-card.active{border:2px solid var(--ink);box-shadow:0 0 0 3px var(--lime),0 14px 28px -10px rgba(14,15,18,.3)}
.lc-photo{width:100%;height:140px;position:relative;background:linear-gradient(135deg,var(--rose),var(--butter))}
.lc-photo .lc-price-tag{position:absolute;left:10px;bottom:10px;background:var(--lime);color:var(--on-accent);font:700 12px 'Inter';padding:4px 10px;border-radius:8px}
.lc-photo .lc-top-tag{position:absolute;right:10px;top:10px;background:rgba(14,15,18,.7);color:var(--paper);padding:3px 8px;font:600 10px 'JetBrains Mono','Inter',monospace;border-radius:8px;letter-spacing:.08em}
.lc-photo .lc-top-tag.pending{background:var(--butter);color:var(--on-accent)}
.lc-photo .lc-top-tag.connected{background:var(--teal);color:var(--paper)}
.lc-body{padding:14px;display:flex;flex-direction:column;gap:5px}
.lc-price-display{font-family:'Instrument Serif',serif;font-size:22px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.lc-price-display small{font:500 11px 'Inter';color:var(--ink-3);margin-left:4px}
.lc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px}
.lc-name{font:600 14px 'Inter';line-height:1.25;letter-spacing:-.005em;color:var(--ink);display:flex;align-items:center}
.lc-badge{font:600 10px 'JetBrains Mono','Inter',monospace;padding:3px 8px;border-radius:8px;letter-spacing:.06em;text-transform:uppercase}
.lc-badge.owner{background:var(--paper-2);color:var(--teal)}
.lc-badge.tenant{background:var(--paper-2);color:var(--coral)}
.lc-badge.mine{background:var(--butter);color:var(--on-accent)}
.lc-badge.paused{background:var(--paper-3);color:var(--ink-3)}
.lc-area{font-size:11px;color:var(--ink-3)}
.lc-rent{font-family:'Instrument Serif',serif;font-size:18px;font-weight:400;color:var(--ink)}
.lc-meta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;font:500 10px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* Match cards (.mcard) — editorial direction */
.mcard{background:var(--paper);border-radius:18px;border:1px solid var(--line-2);padding:14px;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18);margin-bottom:10px;transition:border-color .18s}
.mcard:hover{border-color:var(--ink)}
.mcard-hd{display:flex;align-items:flex-start;gap:10px}
.mcard-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font:700 14px 'Inter'}
.mcard-name{font:600 14px 'Inter';color:var(--ink);display:flex;align-items:center;gap:5px}
.mcard-role{font:500 9px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.mcard-score{margin-left:auto;flex-shrink:0;padding:6px 10px;border-radius:999px;font:700 12px 'Inter';display:flex;align-items:center;gap:4px}
.mcard-score.high{background:var(--mint);color:var(--on-accent)}
.mcard-score.mid{background:var(--butter);color:var(--on-accent)}
.mcard-score.low{background:var(--rose);color:var(--danger)}
.mcard-deets{font:500 11px 'JetBrains Mono','Inter',monospace;color:var(--ink-2);margin-top:10px;letter-spacing:.04em}
.mcard-why{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mcard-actions{margin-top:12px}

#page-matches {background: var(--paper);padding-top: 72px;flex: 1;overflow-y: auto;}

#page-create{background:var(--paper);padding-top:72px}
.create-inner{max-width:640px;margin:0 auto;padding:32px 20px 80px}
.create-hd{margin-bottom:24px}
.create-hd h2{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;color:var(--ink);margin-bottom:6px;line-height:1.2;letter-spacing:-.01em}
.create-hd p{font-size:14px;color:var(--ink-3)}
.form-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;padding:24px;margin-bottom:16px;overflow:hidden;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.form-card input,.form-card select,.form-card textarea{max-width:100%;box-sizing:border-box}
.form-card-title{font:600 13px 'Inter',sans-serif;color:var(--ink-3);letter-spacing:.01em;margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
/* On mobile, fall back to a plain block stack so each .fg flows by its own
   margin only — no grid stretching, no phantom rows from empty placeholders. */
@media(max-width:480px){.form-row{display:block}}
/* Empty placeholder cells (used to keep desktop grid alignment) shouldn't
   take any vertical space on mobile or carry margins anywhere. */
.form-row .fg:empty{margin:0}
@media(max-width:480px){.form-row .fg:empty{display:none}}
.fg{margin-bottom:16px}
.fg:last-child{margin-bottom:0}
@media(max-width:480px){
  .fg{margin-bottom:14px}
  /* Ensure last fg in form-row still has spacing since next form-row follows */
  .form-row .fg:last-child{margin-bottom:14px}
  /* Only remove margin from the very last fg in the entire form-card */
  .form-card > .fg:last-child,
  .dynamic-fields > .fg:last-child,
  .edit-section > .fg:last-child{margin-bottom:0}
}
.fg label{display:block;font:500 11px 'JetBrains Mono','Inter',monospace;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.fg label::after{content:" *";color:var(--coral);font-weight:700}
.fg label.optional::after,.fg label.immediate-label::after,.fg label.safety-opt::after{content:""}
.fg input.field-error,.fg select.field-error,.fg textarea.field-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(208,74,63,.12)}
.fg input:not([type="file"]), .fg select { width:100%; padding:0 16px; height:50px; border:1px solid var(--line); border-radius:14px; font:500 14px 'Inter',sans-serif; color:var(--ink); background:var(--paper); font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; box-sizing:border-box;}
.fg textarea { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:14px; font:500 14px 'Inter',sans-serif; color:var(--ink); background:var(--paper); font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; box-sizing:border-box; resize:vertical; min-height:80px; line-height:1.5;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime)}
.fg-hint{font-size:11px;color:var(--ink-4);margin-top:4px;margin-bottom:8px;line-height:1.4}
/* The signup email-error slot reserved an empty 14px line (its inline
   min-height), doubling the email→password gap. Collapse it until it has
   a message; auth-ui.js writes textContent so :empty round-trips cleanly. */
#setup-email-help:empty{display:none}
/* handleImmediateCheck() disables + clears the date when "Immediate" is
   ticked, but a disabled date input looked identical to an enabled one —
   users read it as a still-required empty field. */
input[type="date"]:disabled{opacity:.45;cursor:not-allowed;background:var(--paper-2)}
.immediate-label{display:flex!important;width:fit-content;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink-3);cursor:pointer;margin-top:6px;margin-bottom:0!important;line-height:1}
.immediate-label input[type="checkbox"]{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--teal)}
/* Mono diet: the move-in "Immediate" toggle is a readable label, not a field
   label — keep it Inter sentence-case even inside a .fg, where .fg label would
   otherwise impose uppercase mono (higher specificity than bare .immediate-label). */
.fg label.immediate-label{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal}
/* #6b owner-stated safety features — selectable checkbox chips in the
   create/edit forms. Mirrors the .immediate-label specificity trick
   (.fg label.safety-opt) so chip text stays Inter sentence-case instead of
   inheriting .fg label's uppercase mono. */
.safety-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fg label.safety-opt{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ink-2);background:var(--paper-2);border:1px solid transparent;border-radius:999px;padding:7px 13px;margin:0;cursor:pointer;line-height:1;transition:border-color .12s ease,background .12s ease}
.fg label.safety-opt:hover{border-color:var(--teal-3)}
.fg label.safety-opt input[type="checkbox"]{width:15px;height:15px;margin:0;flex-shrink:0;accent-color:var(--teal)}
.fg label.safety-opt:has(input:checked){border-color:var(--teal-3);background:var(--mint);color:var(--on-accent)}
.prop-type-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:4px}
@media(max-width:460px){.prop-type-cards{grid-template-columns:1fr}}
.prop-card{border:2px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .18s}
.prop-card:hover{border-color:var(--ink);background:var(--paper-2)}
.prop-card.selected{border-color:var(--ink);background:var(--paper-2);box-shadow:0 0 0 3px var(--lime)}
.prop-card .picon{font-size:24px;margin-bottom:6px;color:var(--teal);display:flex;justify-content:center}
.prop-card h4{font:600 13px 'Inter';color:var(--ink);line-height:1.3}
.prop-card p{font-size:11px;color:var(--ink-4);margin-top:4px;line-height:1.3}
.dynamic-fields{display:none}
.dynamic-fields.show{display:block}
.map-picker-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;margin-bottom:16px;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
/* Map tiles still need to respect the rounded card corners — clip the
   inner #map-picker element instead of the whole card. The card itself
   stays overflow:visible so the autocomplete dropdown can spill below
   the search input on mobile without being cut off. */
.map-picker-card #map-picker{border-radius:0;overflow:hidden;}

.map-picker-title{padding:14px 16px 10px;font:600 14px 'Inter',sans-serif;color:var(--ink-2);letter-spacing:normal; border-bottom:1px solid var(--line-2)}
.map-search-bar{padding:12px 16px; border-bottom:1px solid var(--line-2); gap:8px; background:var(--paper-2);}
.map-search-bar input{flex:1; width: 100%; padding:0 14px; height:40px; border:1px solid var(--line); border-radius:14px; font:500 14px 'Inter',sans-serif; outline:none; font-family:inherit;color:var(--ink);background:var(--paper);}
.map-search-bar input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime);}
#map-picker{height:440px}
.map-picker-info{padding:10px 16px;background:var(--paper-2);font-size:13px;color:var(--teal);display:flex;gap:5px;align-items:center;font-weight:500;border-top:1px solid var(--line-2)}
.map-expand-btn{background:var(--paper);border:none;border-radius:11px;width:36px;height:36px;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(14,15,18,.15);margin:8px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.map-expand-btn:hover{background:var(--paper-2)}
#map-picker.map-expanded{height:640px}
.map-picker-area{padding:12px 16px 14px;border-top:1px solid var(--line-2);}
.map-picker-area input{width:100%;padding:0 14px;height:44px;border:1px solid var(--line);border-radius:14px;font:500 14px 'Inter',sans-serif;outline:none;font-family:inherit;background:var(--paper);color:var(--ink);}
.map-picker-area input:focus{border-color:var(--ink);background:var(--paper);box-shadow:0 0 0 3px var(--lime);}
.map-picker-area-hint{font-size:11px;color:var(--ink-4);margin-top:6px;line-height:1.4;}
.submit-btn{width:100%;padding:0;height:54px;font:600 15px 'Inter',sans-serif;background:var(--ink);color:var(--paper);border:none;border-radius:14px;cursor:pointer;font-family:inherit;transition:all .18s;margin-top:8px;letter-spacing:-.005em}
.submit-btn:hover{background:var(--ink-2)}
.already-listed-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;padding:32px 24px;text-align:center;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.already-listed-card h3{font-family:'Instrument Serif',serif;font-size:22px;font-weight:400;color:var(--ink);margin-bottom:8px}
.already-listed-card p{font-size:13px;color:var(--ink-3);margin-bottom:24px;line-height:1.55}
.already-listed-card .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/*
  Mobile-only multi-step wizard for the create-listing flow.
  
  On desktop (>768px), #listing-form renders as a long single-page form —
  this is intentional and stays as-is. On mobile, the same form gets
  divided into steps using a [data-wizard-step] attribute on each
  form-card (set in HTML below). JS adds .wizard-active to the form
  container, which triggers the step-hiding rules here. The current
  step is set on the container as a data-step attribute, e.g.
  data-step="2".
  
  Submit button moves to the final step. Back/Next/Publish controls live
  in a sticky footer rendered separately via JS.
*/
.wizard-progress { display: none; }
.wizard-footer { display: none; }

@media(max-width: 768px) {
  /* Editorial step header above the form (mobile only): a row of discrete segment
     ticks — one per step, inked once reached — over a mono counter + serif title.
     Ticks are rendered by setWizardStep() so the count tracks the dynamic total
     (tenants skip the Photos step → 4 ticks; owners → 5). */
  .wizard-active .wizard-progress {
    display: block;
    margin-bottom: 16px;
  }
  .wizard-active .wizard-progress-ticks {
    display: flex;
    gap: 5px;
    margin-bottom: 9px;
  }
  .wizard-active .wpt {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--paper-3);
    transition: background-color 0.25s ease;
  }
  .wizard-active .wpt.done {
    background: var(--ink);
  }
  .wizard-active .wizard-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .wizard-active .wizard-progress-counter {
    font: 500 11px 'JetBrains Mono','Inter',monospace;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .wizard-active .wizard-progress-title {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.1;
    color: var(--ink);
    text-align: right;
  }
  
  /* Visibility of step cards is managed by JS in setWizardStep() —
     it sets inline display:'block' or 'none' on every [data-wizard-step]
     element based on the current step and per-step rules (role match,
     dynamic-fields .show, etc.). Keeping visibility JS-driven avoids
     conflicts with applyProfileToUI's inline styles. */
  
  /* In wizard mode, hide the inline .submit-btn — the wizard footer
     renders its own Publish control. The submit-btn is nested inside
     #create-map-section, so we use a descendant selector. */
  .wizard-active .submit-btn { display: none !important; }
  
  /* Sticky footer with Back / Next / Publish. Sits above the bottom nav.
     The footer ALWAYS shows in wizard mode (irrespective of step), but
     individual buttons are toggled by JS based on current step. */
  .wizard-footer.wizard-footer-visible {
    display: flex;
    position: fixed;
    bottom: 64px; /* above bottom nav */
    bottom: calc(64px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px 16px;
    background: rgba(251,250,247,0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--gray-200);
    gap: 10px;
  }
  .wizard-footer .btn {
    flex: 1;
    justify-content: center;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
  }
  .wizard-footer .btn-back {
    background: var(--gray-100);
    color: var(--gray-600);
  }
  .wizard-footer .btn-back:hover { background: var(--gray-200); }
  .wizard-footer .btn-next, .wizard-footer .btn-publish {
    background: var(--blue);
    color: var(--paper);
  }
  .wizard-footer .btn-next:hover, .wizard-footer .btn-publish:hover { background: var(--ink-2); }
  .wizard-footer .btn-publish { background: var(--green); }
  .wizard-footer .btn-publish:hover { background: var(--teal-2); }
  
  /* When the keyboard is open, hide the sticky footer (it sits where the
     keyboard would push it anyway, and on iOS the position:fixed layout
     gets weird inside the visualViewport). */
  body.keyboard-open .wizard-footer { display: none !important; }
  
  /* Add bottom padding to the create-inner so the last step's content
     isn't hidden under the sticky footer AND the bottom nav. The bottom
     nav is ~68px and the wizard footer sits ~70px above it; together with
     the iPhone home-indicator safe area we need ~150px of clearance.
     Previous value of 80px only cleared the nav, not the footer. */
  .wizard-active {
    padding-bottom: calc(150px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  }
}

#page-profile{padding-top:72px;background:var(--paper); flex:1;}
.profile-inner{max-width:640px;margin:0 auto;padding:32px 20px 80px}
.profile-hd{margin-bottom:24px}
.profile-hd h2{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;color:var(--blue);margin-bottom:6px}
.profile-hd p{font-size:14px;color:var(--gray-600)}
.profile-card{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;padding:24px;margin-bottom:16px;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.profile-card-title{font:600 14px 'Inter',sans-serif;color:var(--ink-2);letter-spacing:normal;margin-bottom:16px}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--blue);color:var(--paper);font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.profile-name{font:600 20px 'Inter';color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.profile-phone{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.profile-role-badge{display:inline-flex;align-items:center;gap:4px;font:600 10px 'JetBrains Mono','Inter',monospace;padding:4px 10px;border-radius:8px;letter-spacing:.08em;text-transform:uppercase}
.profile-role-badge.owner{background:var(--paper-2);color:var(--teal)}
.profile-role-badge.tenant{background:var(--paper-2);color:var(--coral)}
.listing-item{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:16px;margin-bottom:10px;cursor:pointer;transition:all .18s}
.listing-item:hover{border-color:var(--ink);background:var(--paper-2)}
.listing-item.paused{opacity:0.7;background:var(--paper-2);border-color:var(--butter)}
.listing-item.paused:hover{border-color:var(--ink-3);background:var(--paper-3)}
.listing-item:last-child{margin-bottom:0}
.listing-item-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.listing-item-title{font:600 14px 'Inter';color:var(--ink)}
.listing-item-rent{font-family:'Instrument Serif',serif;font-size:18px;color:var(--ink);margin-bottom:4px}
.listing-item-meta{font-size:12px;color:var(--gray-600)}
.listing-item-actions{display:flex;gap:8px;margin-top:12px}
.listing-item-hint{font-size:11px;color:var(--blue);margin-top:8px;font-weight:500}
.listing-item-area{font-size:12px;color:var(--ink-3);margin:2px 0 4px;line-height:1.4;display:flex;align-items:center;gap:4px}
.no-listings{text-align:center;padding:40px 24px;color:var(--gray-500);font-size:14px;line-height:1.6;background:var(--gray-100);border-radius:12px}
.no-listings .icon{font-size:44px;margin-bottom:12px;opacity:.5}
.no-listings strong{display:block;font-size:16px;color:var(--gray-700);margin-bottom:6px}

/* When the in-profile listing edit view is open, hide all other profile
   chrome (heading, avatar card, Account Details, etc.) so the user sees
   only the edit form. The 4 cards that have IDs are already hidden inline
   by profile.js — this rule catches the unidded ones too. */
body.listing-edit-active #page-profile .profile-hd,
body.listing-edit-active #page-profile .profile-card{display:none!important}

/* Explore listing cards */
.explore-listing-card{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.explore-listing-card:hover{box-shadow:0 2px 12px rgba(14,15,18,.1);border-color:var(--gray-300)}
.explore-card-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.explore-card-type{font:600 13px 'Inter',sans-serif;color:var(--ink)}
.explore-card-price{font:700 14px 'Inter',sans-serif;color:var(--teal)}
.explore-card-area{font-size:12px;color:var(--gray-500);margin-bottom:6px}
.explore-card-chips{display:flex;flex-wrap:wrap;gap:4px}
.explore-card-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:var(--paper-2);color:var(--ink-2)}
.explore-card-chip-warn{background:#fff1f1;color:#b42318;border:1px solid #fecdca}
.explore-card-chip-owner{background:#E3F3EC;color:var(--teal-2);border:1px solid var(--mint)}
.explore-card-chip-broker{background:#F6EFD8;color:#7A6420;border:1px solid var(--lime-2)}
.explore-listing-card-dimmed{opacity:.55;background:repeating-linear-gradient(135deg,var(--paper) 0,var(--paper) 12px,var(--paper-2) 12px,var(--paper-2) 13px)}
.explore-listing-card-dimmed:hover{opacity:.85}

/* Listing Detail/Edit View in Profile */
.listing-detail-view{display:none}
.listing-detail-view.active{display:block}
.listing-detail-back{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;margin-bottom:16px;padding:8px 0;border:none;background:none}
.listing-detail-back:hover{text-decoration:underline}
.listing-detail-photos{height:180px;background:var(--gray-100);border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.listing-detail-photos img{width:100%;height:100%;object-fit:cover}

/* No-photo placeholder — replaces the giant emoji that looked goofy at scale. */
.listing-photo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-4);width:100%;height:100%}
.listing-photo-empty svg{width:56px;height:56px;opacity:.55}
.listing-photo-empty-label{font:500 12px 'JetBrains Mono','Inter',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.listing-detail-header{margin-bottom:16px}
.listing-detail-type{font-size:11px;font-weight:700;color:var(--gray-400);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.listing-detail-price{font-family:'Instrument Serif',serif;font-size:28px;color:var(--text);line-height:1}
.listing-detail-price small{font-family:'Inter',sans-serif;font-size:14px;color:var(--gray-600)}
/* Listing-detail MODAL (buildBody in js/pages/listing-detail.js). Brings the
   tenant-search variant up to the brand typography system — serif price echoing
   the owner listing-detail view (.listing-detail-price), Inter meta — WITHOUT
   touching the owner rendering: owners keep .ld-price-line, byte-for-byte the
   old inline 16px/600 Inter. F4 from the 2026-06-12 font audit. */
.ld-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:2px}
.ld-price-line{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.ld-price-wrap{margin-bottom:4px;line-height:1.15}
.ld-budget-label{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--gray-600)}
.ld-price{font-family:'Instrument Serif',serif;font-size:24px;color:var(--ink);line-height:1.05}
.ld-price small{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--gray-600);margin-left:1px}
.ld-price-meta{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--gray-500)}
/* Listing-detail fact chips + area line (was inline-styled flat gray pills +
   a 📍 emoji). Outlined hairline chips read crisper/more editorial than a
   solid gray fill. */
.ld-area{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.ld-area svg{flex-shrink:0;color:var(--ink-4)}
.ld-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.ld-chip{font:600 11.5px 'Inter',sans-serif;padding:5px 11px;border-radius:100px;background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.ld-report-link{background:none;border:none;color:var(--gray-500);font-size:12px;cursor:pointer;text-decoration:underline;padding:6px}
.edit-section{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
.edit-section-title{font-size:11px;font-weight:700;color:var(--gray-400);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.edit-section-title .icon{font-size:14px}
.locked-section{background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:11px;padding:20px;margin-bottom:16px}
.locked-section-title{font-size:11px;font-weight:700;color:var(--gray-400);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.locked-field{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-200)}
.locked-field:last-child{border-bottom:none}
.locked-field-label{font-size:12px;color:var(--gray-600)}
.locked-field-value{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:4px}
.locked-field-value .lock-icon{font-size:12px;color:var(--gray-400)}
.edit-actions{display:flex;gap:10px;margin-top:8px}
.edit-actions .btn{flex:1;justify-content:center;padding:12px}
/* Three buttons with multi-line labels ("Found a place? Close search") can't
   share one 393px row — they wrapped to ragged 2–3 line pills. Stack them. */
@media(max-width:560px){.edit-actions{flex-direction:column}.edit-actions .btn{width:100%}}

.success-overlay{display:none;position:fixed;inset:0;background:#0E0F12;z-index:10500;align-items:center;justify-content:center;flex-direction:column}
.success-overlay.show{display:flex}
.success-card{background:transparent;border-radius:0;padding:32px 24px;text-align:center;max-width:400px;width:100%;position:relative;overflow:visible}
.success-glow{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-20%);width:280px;height:280px;background:radial-gradient(circle,rgba(232,255,106,.18) 0%,rgba(232,255,106,.06) 40%,transparent 70%);pointer-events:none;z-index:0}
.success-check{width:80px;height:80px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 28px;position:relative;z-index:1;box-shadow:0 0 40px rgba(232,255,106,.3)}
.success-card h3{font-family:'Instrument Serif',serif;font-size:32px;color:var(--paper);margin-bottom:10px;font-weight:400;position:relative;z-index:1}
.success-card h3 em{font-style:italic}
.success-sub{font-size:14px;color:var(--ink-4);line-height:1.6;margin-bottom:28px;position:relative;z-index:1}
.success-notify-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;margin-bottom:28px;text-align:left;position:relative;z-index:1}
.success-notify-title{font-size:13px;font-weight:600;letter-spacing:normal;color:var(--ink-4);margin-bottom:10px;font-family:'Inter',sans-serif}
.success-notify-row{display:flex;align-items:center;gap:12px}
.success-notify-badge{width:36px;height:36px;border-radius:10px;background:var(--lime);color:var(--on-accent);font-weight:700;font-size:14px;display:grid;place-items:center;flex-shrink:0}
.success-notify-main{font-size:14px;font-weight:600;color:var(--paper);display:block}
.success-notify-detail{font-size:12px;color:var(--ink-4);display:block;margin-top:1px}
.success-btns{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.success-btn-primary{width:100%;padding:15px 24px;border-radius:14px;border:none;background:var(--lime);color:var(--on-accent);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}
.success-btn-primary:active{transform:scale(.98);opacity:.9}
.success-btn-outline{padding:12px 24px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:var(--paper);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s}
.success-btn-outline:active{background:rgba(255,255,255,.05)}
/* Live "Uploading photos 2 of 4…" line while publishing — shown/driven by
   _setOverlayPublishing in create.js; sits between the sub-copy and the CTAs. */
.success-progress{font-size:13px;color:var(--ink-4);margin:-14px 0 22px;min-height:18px;position:relative;z-index:1}
.success-btn-primary:disabled,.success-btn-outline:disabled{opacity:.4;cursor:default;pointer-events:none}

.profile-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14,15,18,.5);
  z-index: 2500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.profile-modal-overlay.show { display: flex; }
.profile-modal {
  background: var(--paper);
  border-radius: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 28px 48px -20px rgba(14,15,18,.4);
  position: relative;
}
.profile-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: none;
  background: rgba(251,250,247,.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
}
.profile-modal-close:hover {
  background: var(--paper);
}
.profile-modal-photo {
  height: 200px;
  background: linear-gradient(135deg,var(--rose),var(--butter));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: rgba(0,0,0,.08);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.profile-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-modal-body {
  padding: 20px;
}
.cluster-picker-body{padding:24px 20px 20px}
.cluster-picker-title{font:700 17px 'Inter',sans-serif;color:var(--ink);margin:0 0 4px;padding-right:36px}
.cluster-picker-sub{font-size:13px;color:var(--gray-500);margin:0 0 16px}
.cluster-picker-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.cluster-picker-row{display:flex;gap:12px;align-items:stretch;padding:10px;background:var(--paper);border:1.5px solid var(--paper-2);border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,transform .1s;width:100%}
.cluster-picker-row:hover{border-color:var(--ink)}
.cluster-picker-row:active{transform:scale(.98)}
.cluster-picker-thumb{width:60px;height:60px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--rose),var(--butter));display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(0,0,0,.15);overflow:hidden}
.cluster-picker-thumb img{width:100%;height:100%;object-fit:cover}
.cluster-picker-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.cluster-picker-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cluster-picker-price{font:700 15px 'Inter',sans-serif;color:var(--ink)}
.cluster-picker-price small{font-weight:500;font-size:11px;color:var(--gray-500)}
.cluster-picker-type{font-size:12px;color:var(--gray-500);flex-shrink:0}
.cluster-picker-chips{display:flex;gap:6px;flex-wrap:wrap}
.cluster-picker-chips span{font-size:11px;color:var(--gray-500);background:var(--paper-2);padding:2px 7px;border-radius:6px}

/*
  Mobile bottom-sheet override for centered-card modals.
  
  On desktop, .profile-modal-overlay and .area-request-overlay render as
  centered cards on a dimmed backdrop — fine on a mouse-driven screen.
  On mobile, the same pattern wastes vertical space (gaps above and
  below the card), puts the close X in a hard-to-reach top-right
  corner, and offers no swipe-to-dismiss affordance — all of which
  clash with the rest of the app where the listing detail panel
  already uses a bottom sheet.
  
  This block converts those modals into bottom sheets on mobile only.
  The X close button stays as a fallback. Swipe-to-dismiss is wired
  in JS via initSheetSwipe() inside the open* functions for each modal.
  
  The .sheet-handle pseudo-element (drag pill) is rendered via ::before
  on .profile-modal / .area-request-modal / .success-card.
*/
@media(max-width: 768px) {
  /* Anchor overlays to the bottom of the viewport. */
  .profile-modal-overlay,
  .area-request-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .success-overlay {
    align-items: center;
    padding: 0;
  }

  /* Stretch the modal full-width and round only the top corners. */
  .profile-modal,
  .area-request-modal {
    max-width: 100% !important;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0 !important;
    border-radius: 16px 16px 0 0;
    /* slide up from below; respects the global .show class on overlay */
    animation: sheetSlideUp .25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Honor iPhone home-indicator inset so content isn't cut off. */
    padding-bottom: max(16px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    /* Allow swipe-to-dismiss only along the Y axis. */
    touch-action: pan-y;
    position: relative;
  }

  /* Drag-handle pill at the top of every sheet. Same shape/position as
     the detail-panel handle so the affordance is consistent. */
  .profile-modal::before,
  .area-request-modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: var(--gray-300);
    border-radius: 3px;
    z-index: 11;
    pointer-events: none;
  }

  /* The profile-modal-photo is rounded top-only on desktop already
     (16/16/0/0); reaffirm in case of cascade order issues. Also nudge
     the photo down slightly to leave room for the drag handle. */
  .profile-modal-photo {
    border-radius: 16px 16px 0 0;
  }

  /* Ensure the close X clears the drag handle visually. The X already
     sits at top:12px which is below the 8px+5px handle, so it's fine. */
}

@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.area-request-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2600;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.area-request-overlay.show { display: flex; }
.area-request-modal {
  background: var(--paper);
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  position: relative;
  text-align: center;
}
.area-request-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--paper);
  cursor: pointer;
  font-size: 18px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.area-request-close:hover {
  background: var(--gray-100);
  color: var(--text);
}
.area-request-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.area-request-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--blue);
  margin-bottom: 8px;
}
.area-request-text {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 20px;
}
.area-request-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.area-request-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.area-request-input:focus {
  border-color: var(--blue);
}
.area-request-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Clickable name styles */
.clickable-name {
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clickable-name:hover {
  color: var(--blue-mid);
  text-decoration: underline;
}
.clickable-name::after {
  content: '›';
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--blue-mid);
}
.clickable-name:hover::after {
  opacity: 1;
}

/* Adjust existing name styles to work with clickable */
.profile-card .profile-name.clickable-name,
.buddy-card .buddy-name.clickable-name,
.connection-card .connection-name.clickable-name,
.chat-user-name.clickable-name {
  cursor: pointer;
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:4px}

.flex-col-gap8{display:flex;flex-direction:column;gap:8px}
.flex-gap8{display:flex;gap:8px}
.flex-center{display:flex;align-items:center}
.w-full{width:100%}
.w-full-center{width:100%;justify-content:center}
.text-center{text-align:center}
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mb-16{margin-bottom:16px}
.emoji-lg{display:flex;justify-content:center;margin-bottom:14px;color:var(--ink-4)}
.span-2{grid-column:span 2}
.connected-status{text-align:center;font:600 12px 'JetBrains Mono','Inter',monospace;color:var(--teal);margin-top:8px;letter-spacing:.06em}
.connect-prompt{text-align:center;margin-bottom:12px;font-size:13px;color:var(--ink-3)}
.owner-only-msg{text-align:center;padding:14px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:14px;font-size:13px;color:var(--ink-3)}
/* Clickable carousel — one image per page, arrows + dots for navigation.
   Supports swipe (native scroll-snap) on touch and arrow keys when focused. */
/* Outer wrapper holds arrows/dots/counter so they stay fixed while images scroll.
   Class names match the HTML emitted by buildCarouselHTML in ui-helpers.js
   (.carousel-container / .carousel-scroll / .carousel-slide); without these the
   arrows had no positioning context and the image stretched the modal. */
.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-scroll {
  display: flex;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-scroll::-webkit-scrollbar { display: none; }
.carousel-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
  /* On touch devices, extend the tap target without changing the visual
     size — a 36px visible control with a 44px hit area is the Apple HIG
     sweet spot. */
  -webkit-tap-highlight-color: transparent;
}
.carousel-arrow::before {
  content: '';
  position: absolute;
  inset: -6px; /* 6px * 2 + 36 = 48px tap target */
}
.carousel-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
  pointer-events: auto;
  /* Soft dark pill behind the dots — white dots vanished on bright photos
     (windows / pale walls) without it. */
  background: rgba(14, 15, 18, 0.38);
  border-radius: 999px;
  padding: 5px 8px;
}
.carousel-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* Extend the tap area for dots without inflating the visual — important
   for accessibility on touch devices where 7px circles are unhittable. */
.carousel-dots .dot::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.carousel-dots .dot.active {
  background: var(--paper);
  width: 18px;
  border-radius: 4px;
}
.carousel-dots .dot:hover { background: var(--paper); }

/* Read-only map preview shown in place of photos for tenant listings.
   Fills the parent (dp-photo or profile-modal-photo) completely. */
.tenant-map-preview {
  width: 100%;
  height: 100%;
  min-height: 140px;
  background: var(--gray-100);
  border-radius: inherit;
  /* Map tiles load above this color; kill pointer events so the preview
     feels static (clicks pass through to the card). */
  pointer-events: none;
}

.hidden-input{display:none;margin-top:8px;width:100%;padding:0 12px;height:44px;border:1.5px solid var(--gray-200);border-radius:14px;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box}

.autocomplete-wrapper { position: relative; display: flex; flex: 1; width: 100%; }
.autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-md); max-height: 200px; overflow-y: auto; z-index: 2000; display: none; margin-top: 4px; text-align: left; }
.autocomplete-item { padding: 10px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--gray-100); color: var(--text); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--blue-light); color: var(--blue); }

.search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--gray-100); color: var(--text); transition: background 0.15s; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--blue-light); color: var(--blue); }
.search-result-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-subtitle { font-size: 11px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

@media(max-width: 768px) {
  /* Make map picker card scroll into view properly */
  .map-picker-card {
    scroll-margin-top: 70px;
  }
  
  /* Mobile autocomplete dropdown — absolute-positioned relative to the
     input wrapper, NOT viewport-fixed. Viewport-fixed dropdowns break
     when the mobile keyboard opens and reflows the viewport. Anchored
     to the wrapper, the dropdown moves naturally with the input.
     
     z-index needs to clear: bottom nav (1000), modals (~2000), and
     map controls — 9999 is safe everywhere. */
  .autocomplete-wrapper {
    position: relative;
  }
  .autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    max-height: 50vh;
    z-index: 9999;
    /* Larger tap targets on mobile so users don't fat-finger neighbors. */
    -webkit-overflow-scrolling: touch;
  }
  .autocomplete-item {
    padding: 14px 12px;  /* extra height for thumb-friendly taps */
    font-size: 14px;
  }
  .search-result-item {
    padding: 14px 12px;
  }
  .search-result-title { font-size: 14px; }
  .search-result-subtitle { font-size: 12px; }

  /* When keyboard is open, ensure create page scrolls properly */
  body.keyboard-open #page-create {
    padding-bottom: 20px;
  }
  
  body.keyboard-open #page-create .create-inner {
    padding-bottom: 20px;
  }
}

/* --- NEW MOBILE HELPER CLASSES --- */
.two-col-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.match-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:12px; }

/* ── Bottom Navigation ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  height: 68px;
  background: var(--ink);
  border-top: none;
  box-shadow: 0 -4px 24px rgba(14,15,18,.25);
  z-index: 1000;
  padding: 0 4px;
  padding-bottom: max(6px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  /* Square top corners — the previous 22 px radius exposed two cream-coloured
     triangles in the bottom corners of the screen (the body bg showing
     through the rounded curves), which read as "half-black, half cream" on
     light-themed pages like the landing. */
  border-radius: 0;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-4);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  padding: 6px 2px;
  border-radius: 8px;
  transition: all 0.15s ease;
  position: relative;
}

.bnav-icon {
  font-size: 18px;
  line-height: 1;
}

.bnav-pill {
  display: none;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
  position: absolute;
  top: 0;
}

.bottom-nav-item.active {
  color: var(--paper);
}

.bottom-nav-item.active .bnav-pill {
  display: block;
}

/* Post button — lime circle, raised */
.bnav-post {
  flex: none !important;
  width: 52px;
  gap: 2px;
}
.bnav-post-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 300;
  margin-top: -14px;
  box-shadow: 0 4px 16px rgba(232,255,106,.3);
  transition: transform .15s, box-shadow .15s;
}
.bnav-post:hover .bnav-post-btn {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(232,255,106,.45);
}

/* Legacy: keep .nav-icon hidden for old SVG icons that might still be in DOM */
.bottom-nav-item .nav-icon { display:none; }
.bottom-nav-item.special { position: relative; }
.bottom-nav-item.special .nav-icon-wrapper { display:none; }

/* Badge for nav items */
.nav-badge {
  display: none;
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translateX(16px);
  min-width: 16px;
  height: 16px;
  background: var(--teal);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  line-height: 16px;
  text-align: center;
}

.nav-badge.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Messages nav item needs relative positioning for badge */
#bnav-messages {
  position: relative;
}

/* Badge positioning fix */
#bnav-messages .nav-badge {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(18px);
}

#page-messages {
  background: var(--paper);
  padding-top: 72px;
  flex: 1;
  overflow-y: auto;
}
.messages-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 100px;
}

.messages-hd {
  margin-bottom: 20px;
}

.messages-hd h2 {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.messages-hd p {
  font-size: 13px;
  color: var(--ink-3);
}

.message-tabs {
  display: flex;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 16px;
}

.message-tab {
  flex: 1;
  padding: 10px 8px;
  font: 600 13px 'Inter',sans-serif;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  color: var(--ink-3);
  transition: all 0.15s;
  border: none;
  background: none;
  position: relative;
}

.message-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--coral);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  margin-left: 6px;
  padding: 0 5px;
}

.message-tab.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  cursor: default;
}

/* Connection sub-tabs (Incoming / Sent / Archived inside Connections) */
.connection-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.connection-subtab {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font: 500 12px 'Inter',sans-serif;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.connection-subtab:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.connection-subtab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* Disabled sub-tab: empty count and not currently active. Visible for layout
   stability but non-interactive so users don't land on an empty view. We
   don't use :disabled alone because we need to reserve the "currently
   active but now empty" state as still-visible (the user's choice trumps
   the empty signal). */

.connection-subtab .subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 700;
}
.connection-subtab.active .subtab-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}
.connection-subtab .subtab-count.highlight {
  background: var(--danger);
  color: white;
}
.subtab-empty {
  padding: 52px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
}
.subtab-empty .empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--ink-4);
}
.subtab-empty strong {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Multi-listing owner filter (Matches / Connections / Chats) */
.listing-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.listing-filter-bar::-webkit-scrollbar {
  display: none;
}
.listing-filter-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  background: var(--paper);
  color: var(--gray-700);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.listing-filter-chip:hover {
  border-color: var(--gray-300);
}
.listing-filter-chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

/* Connection Request Card */
.connection-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.18s;
  box-shadow: 0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18);
}

.connection-card:hover {
  border-color: var(--ink);
}

.connection-card.pending {
  border-left: 3px solid var(--butter);
}

.connection-card.accepted {
  border-left: 3px solid var(--teal);
}

.connection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.connection-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--mint),var(--teal-3));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px 'Inter';
  flex-shrink: 0;
  margin-right: 12px;
}

.connection-info {
  flex: 1;
}

.connection-name {
  font: 600 15px 'Inter';
  color: var(--ink);
  margin-bottom: 2px;
}

.connection-meta {
  font: 500 11px 'JetBrains Mono','Inter',monospace;
  color: var(--ink-4);
  letter-spacing: .04em;
}

.connection-status {
  font: 600 10px 'JetBrains Mono','Inter',monospace;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.connection-status.pending {
  background: var(--butter);
  color: var(--on-accent);
}

.connection-status.accepted {
  background: var(--lime);
  color: var(--on-accent);
}

.connection-status.declined {
  background: var(--rose);
  color: var(--danger);
}

.view-profile-btn {
  font: 600 12px 'Inter';
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
  margin-left: 8px;
}

.view-profile-btn:hover {
  background: var(--blue-light);
  border-color: var(--blue-mid);
}

.view-profile-btn:active {
  transform: scale(0.97);
}

.connection-listing {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--gray-600);
}

.connection-listing strong {
  color: var(--text);
}

.connection-actions {
  display: flex;
  gap: 8px;
}

.connection-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 12px;
  padding: 10px 12px;
}

/* Chat Thread */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  height: calc(100dvh - 140px); /* dvh: respects mobile URL bar show/hide */
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper);
}

.chat-back {
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  margin-right: 8px;
  padding: 6px 8px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chat-back:hover { background: var(--paper-2); color: var(--ink); }

.chat-user-info {
  flex: 1;
  min-width: 0; /* let the name column actually shrink so ellipsis can kick in */
}

.chat-user-name {
  font: 600 15px 'Inter';
  color: var(--ink);
  display: flex;
  align-items: center;
  min-width: 0;
}

/* One-line name with ellipsis — the header also carries the match badge,
   Share-number pill / phone button and ⋮, so long names were wrapping to
   two cramped lines ("Priya / Sharma"). messages.js wraps the name text. */
.chat-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.chat-user-meta {
  font: 500 11px 'JetBrains Mono','Inter',monospace;
  color: var(--ink-4);
  letter-spacing: .04em;
}

.chat-phone-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--lime);
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
}

.chat-phone-btn:hover {
  background: var(--lime-2);
  color: var(--ink);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
}

.chat-message.sent {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.chat-message.received {
  align-self: flex-start;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(14,15,18,.05);
}

.chat-message .time {
  font: 500 10px 'JetBrains Mono','Inter',monospace;
  opacity: 0.6;
  margin-top: 4px;
  letter-spacing: .04em;
}

/* Links inside chat bubbles (renderMessageBody in messages.js) — inherit the
   bubble's text color so they stay readable on both the dark sent bubble and
   the light received bubble; underline carries the affordance. */
.chat-message a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* "Today / Yesterday / 12 Jun" day separators between message groups. */
.chat-day-sep { align-self: center; text-align: center; margin: 14px 0 6px; }
.chat-day-sep span {
  display: inline-block;
  font: 600 10px 'JetBrains Mono','Inter',monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 100px;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 14px 'Inter',sans-serif;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s,box-shadow .15s;
  color: var(--ink);
  background: var(--paper);
}

.chat-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime);
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--paper);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.chat-send-btn:hover {
  background: var(--ink-2);
}

.chat-send-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

/* Interested Button Styles */
.interested-btn {
  width: 100%;
  padding: 0;
  height: 54px;
  border-radius: 14px;
  font: 600 15px 'Inter',sans-serif;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.18s;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -.005em;
}

.interested-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(14,15,18,.4);
}

.interested-btn.sent {
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: default;
  border: 1px solid var(--line-2);
}

.interested-btn.sent:hover {
  transform: none;
  box-shadow: none;
}

.interested-btn.accepted {
  background: var(--lime);
  color: var(--on-accent);
}

/* Phone Reveal in Chat */
.phone-reveal-card {
  background: var(--lime);
  border: 1px solid var(--lime-2);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 12px;
}

.phone-reveal-card .phone-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--on-accent);
  margin-bottom: 4px;
}

.phone-reveal-card .phone-hint {
  font-size: 12px;
  color: var(--on-accent-2);
}

/* Connected Actions (Call + Message buttons) */
.connected-actions {
  display: flex;
  gap: 10px;
}
.connected-actions .btn {
  flex: 1;
}

/* Empty State for Messages */
.messages-empty {
  text-align: center;
  padding: 48px 24px;
}

.messages-empty .icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink-4);
}

.messages-empty h3 {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 23px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.messages-empty p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Direct Contact Card (for Matches/Buddy) */
.direct-contact-card {
  background: var(--blue-light);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.direct-contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.direct-contact-info .phone-icon {
  width: 36px;
  height: 36px;
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.direct-contact-info .phone-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}

.message-btn {
  background: var(--blue);
  color: var(--paper);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.message-btn:hover {
  background: var(--ink-2);
}

@media(max-width: 768px) {
  #page-messages { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom: 0; }
  .messages-inner { padding: 16px 12px 90px; }
  .messages-hd h2 { font-size: 24px; }
  
  .chat-container { 
    /* 140px = 56px top nav + 16px page padding above the container + 68px
       bottom tab bar (.bottom-nav height). The old 120px assumed a 64px tab
       bar and ignored the page padding, so the composer's bottom ~10px sat
       underneath the tab bar and the send button rendered clipped. */
    height: calc(100vh - 140px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    height: calc(100dvh - 140px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); /* dvh: respects mobile URL bar show/hide */
    border-radius: 0; 
    border: none;
    position: relative;
  }
  
  /* Fix chat input area to stay above bottom nav and handle keyboard */
  .chat-input-area {
    position: sticky;
    bottom: 0;
    padding: 10px 12px;
    padding-bottom: max(10px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    z-index: 100;
  }
  
  /* When keyboard is open, hide bottom nav and adjust chat */
  body.keyboard-open .bottom-nav {
    display: none !important;
  }
  
  body.keyboard-open #page-messages .chat-container {
    height: calc(100vh - 56px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    height: calc(100dvh - 56px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  }
  
  body.keyboard-open .chat-input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 10px;
  }
}

/* More prominent match tabs toggle */
.match-tabs {
  display: flex;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
}

.match-tab {
  flex: 1;
  padding: 12px 8px;
  font: 600 13px 'Inter',sans-serif;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  color: var(--ink-3);
  transition: all 0.2s ease;
  border: none;
  background: none;
}

.match-tab:hover {
  color: var(--ink);
}

.match-tab.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  cursor: default;
}

/* ── Match Card (Property Matches + Buddy Up) ── */
.match-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.18s;
  box-shadow: 0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18);
}

.match-card:hover { border-color: var(--ink); }

.match-card.requested {
  opacity: 0.7;
  background: var(--paper-2);
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.match-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.match-avatar,
.match-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.match-avatar-placeholder {
  background: linear-gradient(135deg,var(--mint),var(--teal-3));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px 'Inter',sans-serif;
}

.match-user-info {
  flex: 1;
  min-width: 0;
}

.match-user-name {
  font: 600 15px 'Inter',sans-serif;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-user-meta {
  font: 500 11px 'JetBrains Mono','Inter',monospace;
  color: var(--ink-4);
  letter-spacing: .04em;
}

.match-score {
  font: 700 12px 'Inter',sans-serif;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--mint, #D8F0E7);
  /* --mint is a fixed light tint; --ink flips near-white in dark mode and
     vanished against it (~1.1:1). Fixed-accent surfaces take --on-accent. */
  color: var(--on-accent, #0E0F12);
  white-space: nowrap;
  flex-shrink: 0;
}

.match-body { margin-bottom: 12px; }

.match-for-listing{font-size:11px;color:var(--ink-3);margin:2px 0 0;font-weight:500}
/* Chat-list last-message snippet */
.connection-preview{display:flex;align-items:baseline;gap:8px;margin-top:3px;min-width:0}
.connection-preview-text{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.connection-preview-time{font:500 10px 'JetBrains Mono','Inter',monospace;color:var(--ink-4);flex-shrink:0}
.match-listing-title {
  font: 600 14px 'Inter',sans-serif;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.match-listing-price {
  font: 700 17px 'Inter',sans-serif;
  color: var(--ink);
}

.match-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.match-actions .btn { flex: 0 0 auto; }

@media(max-width: 600px) {
  .match-card { padding: 14px; }
  .match-header { gap: 10px; }
  .match-user { gap: 10px; }
  .match-avatar,
  .match-avatar-placeholder { width: 40px; height: 40px; font-size: 15px; }
  .match-user-name { font-size: 14px; }
  .match-listing-price { font-size: 16px; }
  .match-score { font-size: 11px; padding: 4px 9px; }
  .match-actions { flex-wrap: wrap; }
  .match-actions .btn { flex: 1 1 auto; min-width: 110px; }
}

@media(min-width: 900px) {
  .hero { max-width: 800px; padding-top: 80px; padding-bottom: 40px; }
  .hero h1 { font-size: 52px; line-height: 1.15; }
  .hero p { max-width: 500px; font-size: 17px; margin-bottom: 32px; }
  .map-preview-wrap { max-width: 900px; }
  .map-preview-box { height: 400px; }
  .section-inner { max-width: 900px; }
  .section-title { font-size: 38px; line-height: 1.2; }
  .why-inner { max-width: 900px; }
  .why-stats { grid-template-columns: repeat(3,1fr); gap: 32px 40px; }
  .footer-inner { max-width: 900px; }
  .pain-point { padding: 28px 24px; }
  .pain-text h3 { font-size: 16px; }
  .pain-text p { font-size: 14px; }
  .testimonial-card { flex: 0 0 360px; padding: 32px 28px; }
  .testimonial-quote { font-size: 18px; }
  .landing-final-cta h2 { font-size: 42px; }
  .landing-final-cta p { font-size: 17px; }
  .create-inner, .profile-inner { max-width: 720px; padding-top: 48px; }
  .create-hd h2, .profile-hd h2 { font-size: 38px; }
  .prop-type-cards { gap: 16px; }
  .form-card, .map-picker-card, .profile-card, .setup-card { box-shadow: 0 4px 20px rgba(0,0,0,0.04); padding: 32px; margin-bottom: 24px; }
}

@media(max-width: 768px) {
  /* iOS auto-zooms the whole page when a focused input has font-size < 16px.
     Force 16px on every focusable form field on mobile so the page does not
     zoom on tap. This is the single most important rule for mobile layout
     stability — without it the fixed bottom nav, map viewport and chat input
     all get pushed out of place whenever an input receives focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Touch-target bump on mobile — desktop's compact .btn (8px/13px = ~29px
     tall) is too small for thumb taps. Bumping vertical padding gives
     ~40px total height. We DON'T touch desktop sizing — density there is
     intentional. */
  .btn { padding: 11px 18px; font-size: 14px; }
  /* Connection accept/decline buttons — these have higher specificity
     than .btn so they need an explicit mobile bump. */
  .connection-actions .btn { padding: 12px 14px; font-size: 13px; }
  /* Bottom-sheet/modal close buttons — keep visible size modest but
     give them a hit-area pad via padding so 40px stays the tap target. */
  .dp-close, .profile-modal-close, .area-request-close {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  /* Chat back/phone buttons need the same treatment. */
  .chat-back { padding: 8px 10px; min-width: 40px; min-height: 40px; }
  .chat-phone-btn { width: 40px; height: 40px; }

  /* Top nav - logo + icon buttons */
  /* Edge-to-edge (Android targetSdk 36 / iOS notch): the WebView draws behind the
     system status bar, so the fixed top nav reserves the top safe-area inset — else
     the logo + Sign up/Log in buttons collide with the clock & signal icons. The
     var(--safe-area-inset-*) values are injected natively by Capacitor SystemBars
     (reliable on all Android WebView versions, incl. Chromium <140 where env()
     wrongly returns 0); they fall back to env() on web/iOS, then 0. */
  nav:not(.bottom-nav) { padding: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) 16px 0; height: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .nav-logo { font-size: 20px; }
  .nav-actions-mobile { display: flex; }
  .nav-links { display: none; }
  body.logged-out .nav-links { display: flex; }
  body.logged-out .nav-links #topnav-login { font-size: 14px; }

  /* Show bottom nav */
  .bottom-nav { 
    display: flex !important; 
    top: auto !important; 
    bottom: 0 !important; 
  }
  
  /* Add padding for bottom nav on all pages. Include env(safe-area-inset-bottom)
     because notched iPhones reserve ~34 px there — without it, the last card
     in the page gets cut off behind the bottom-nav. */
  #page-landing { padding-bottom: calc(74px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  /* That 74px clears the bottom tab bar — logged-out visitors have no tab
     bar (and no final CTA), so it just read as a dead band above the footer. */
  body.logged-out #page-landing { padding-bottom: 0; }
  #page-create { padding-bottom: calc(74px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  #page-profile { padding-bottom: calc(74px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  #page-matches { padding-bottom: calc(74px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  #page-admin { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  #global-footer { margin-bottom: calc(64px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  
  #page-setup { padding: calc(66px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 40px; }
  .setup-card { padding: 28px 20px; margin: 16px; }
  .setup-logo { font-size: 24px; }
  .setup-sub { font-size: 13px; margin-bottom: 24px; }
  .setup-label { font-size: 15px; margin-bottom: 14px; }
  .role-card { padding: 14px 10px; }
  .role-card .icon { font-size: 24px; margin-bottom: 6px; }
  .role-card h3 { font-size: 13px; }
  .role-card p { font-size: 11px; }
  
  /* Pin the explore page into a fixed frame between the top nav (56px) and
     bottom nav (64px). Using position:fixed with explicit top/bottom anchors
     means the map area is always exactly the space between the two nav bars,
     no matter what the browser does with 100vh / 100dvh, URL-bar show/hide,
     or on-screen keyboard. The map can pan and zoom internally but it can
     never push the bottom nav off-screen or reveal matches/messages below it. */
  #page-explore.active {
    position: fixed;
    top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    left: 0;
    right: 0;
    bottom: 64px;
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Safe-area: lift the explore frame above the home-indicator area on notched
     devices so it aligns with the bottom nav which already honors safe-area. */
  @supports (padding: max(0px)) {
    #page-explore.active {
      bottom: calc(64px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }
  }

  /* Reclaim the top bar ON THE EXPLORE TAB for signed-in users. The map is the
     product here and the bar holds only the logo — which still appears on every
     OTHER tab, so RoomPin→landing access is preserved without touching index.html.
     Logged-out visitors keep the bar (it carries Sign up / Log in). The explore
     frame then starts at just the status-bar inset, so the map begins right below
     the notch and gains the full ~56px the bar used to occupy. */
  body:not(.logged-out):has(#page-explore.active) #main-nav { display: none; }
  body:not(.logged-out):has(#page-explore.active) #page-explore.active {
    top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  }


  /* Hide the old sliding filter panel on mobile */
  .filters-panel {
    display: none !important;
  }
  /* Mobile listing count badge */
  .mobile-listing-count {
    /* Floats below the filter bar, top-right corner of the map area, so
       the count stays visible while the user scrolls the filter chips
       horizontally. (Used to live inside the filter bar and scrolled
       away with it.) */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 8px;
    z-index: 499;
    padding: 5px 10px;
    background: rgba(14, 92, 86, 0.95);
    color: var(--paper);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    pointer-events: none;
  }
  /* Hidden when detail panel is open (more space for the panel) */
  #page-explore:has(.detail-panel.open) .mobile-listing-count { display: none; }
  
  /* Floating Clear-all pill — appears top-right below the listing count
     when at least one filter is active. JS toggles .show on it from
     updateMobileFilterButtons(). Hidden by default. */
  .mobile-filter-reset {
    display: none;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 136px;  /* below the listing count (shifted +8 with the search bar) */
    right: 8px;
    z-index: 499;
    padding: 6px 11px;
    background: var(--paper);
    color: var(--teal);
    border: 1.5px solid var(--teal-3);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.15s;
  }
  .mobile-filter-reset.show { display: inline-flex; }
  .mobile-filter-reset:active { transform: scale(0.96); background: var(--blue-light); }
  /* Hidden when detail panel is open */
  #page-explore:has(.detail-panel.open) .mobile-filter-reset { display: none !important; }
  #page-explore:has(.detail-panel.open) .mobile-filter-bar { display: none !important; }

  /* Mobile horizontal filter bar */
  .mobile-filter-bar {
    display: flex;
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 1500;
    gap: 6px;
    overflow-x: auto;
    padding: 4px;
    background: rgba(251,250,247,0.95);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: translateZ(0);
    -ms-overflow-style: none;
  }
  .mobile-filter-bar::-webkit-scrollbar { display: none; }
  
  .filter-dropdown-wrapper {
    flex-shrink: 0;
  }
  
  .mobile-filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1.5px solid var(--gray-200);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    white-space: nowrap;
    /* ~38px visual chip; ::after below stretches the tap target to ≥44px
       without moving the layout (same trick as .carousel-arrow::before). */
    position: relative;
    transition: all 0.15s;
    font-family: inherit;
  }
  .mobile-filter-item:active { transform: scale(0.96); }
  .mobile-filter-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -4px;
  }
  .mobile-filter-item.has-value {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue);
  }
  .mobile-filter-item.dropdown-open {
    border-color: var(--blue);
    background: var(--blue-light);
  }
  .mobile-filter-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .mobile-filter-item .arrow {
    font-size: 8px;
    margin-left: 2px;
    transition: transform 0.2s;
  }
  .mobile-filter-item.dropdown-open .arrow {
    transform: rotate(180deg);
  }
  
  #page-explore > .filter-inline-dropdown {
    display: none;
    position: fixed;
    top: calc(120px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    left: 12px;
    right: 12px;
    max-height: calc(100vh - 120px - 80px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    overflow-y: auto;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    z-index: 10000;
    transform: translateZ(0);
  }
  #page-explore > .filter-inline-dropdown.open {
    display: block;
  }
  
  .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 0;
    background: var(--paper);
    border-radius: 16px 16px 0 0;
  }
  .dropdown-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue);
  }
  .dropdown-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dropdown-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--gray-100);
  }
  .dropdown-option:last-of-type {
    border-bottom: none;
  }
  .dropdown-option:active {
    background: var(--gray-100);
  }
  .dropdown-option.active {
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 600;
  }
  .dropdown-option.disabled {
    opacity: .35;
    pointer-events: none;
  }
  .dropdown-option .check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: transparent;
  }
  .dropdown-option.active .check {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--paper);
  }
  
  .dropdown-hint {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
  }
  
  .dropdown-apply-btn {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100);
    background: var(--paper);
    position: sticky;
    bottom: 0;
  }
  .dropdown-apply-btn .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Backdrop - covers entire screen when dropdown is open */
  .mobile-filter-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1400;
    transform: translateZ(0);
  }
  .mobile-filter-backdrop.open { display: block; }
  
  /* (Removed dead .active-filters-bar / .active-filter-tag CSS — the
     active-filters bar is no longer rendered. The JS function
     updateActiveFiltersBar() is kept as a no-op since it's called from
     many places.) */
  
  
  
  .explore-search {
    display: flex !important;
    position: absolute;
    /* 64px (not 56) leaves an ~8px gap below the filter bar, which ends at
       ~56px (top:8 + ~48px tall). Keeps the bar and search visually distinct. */
    top: 64px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    z-index: 1300;
  }
  .explore-search input {
    height: 40px;
    /* font-size is forced to 16px by the iOS auto-zoom rule above. */
    border-radius: 8px;
  }



  .detail-panel {
    top: auto; right: 0; bottom: 0; left: 0;
    width: 100%; max-height: calc(80vh);
    border-radius: 24px 24px 0 0;
    transform: translateY(110%);
    border: none;
    box-shadow: 0 -12px 48px -10px rgba(14,15,18,.35);
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    touch-action: pan-y;
  }
  .detail-panel.open { transform: translateY(0); }
  .detail-panel::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 5px; background: var(--gray-300); border-radius: 3px; z-index: 10;
    cursor: grab;
  }
  .dp-photo { height: 140px; border-radius: 0; margin-top: 6px; }
  .dp-body { padding: 12px 16px; }
  .dp-grid { gap: 6px; }
  .dp-field { padding: 6px 8px; }

  .map-legend { bottom: 10px; right: 10px; padding: 6px 8px; }
  .legend-row { font-size: 10px; }
  .price-marker { font-size: 12px; padding: 4px 8px; min-width: 44px; }

  /* ---- Map <-> List toggle + list panel (mobile only) ---- */
  .explore-view-toggle{
    display:flex;align-items:center;gap:6px;
    position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    z-index:1300;padding:10px 16px;
    background:var(--ink);color:var(--paper);
    border:1.5px solid var(--paper);border-radius:100px;
    font:700 13px 'Inter',sans-serif;cursor:pointer;
    box-shadow:0 6px 18px -6px rgba(14,15,18,.5);transition:transform .12s;
  }
  .explore-view-toggle svg{flex:none}
  .explore-view-toggle:active{transform:translateX(-50%) scale(.95)}
  .explore-list-view{
    display:none;position:absolute;top:112px;left:0;right:0;bottom:0;
    z-index:600;background:var(--paper-2);border-top:1px solid var(--line-2);
  }
  .map-area.list-open .explore-list-view{display:block}
  .explore-list-scroll{
    position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:12px 12px calc(84px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  }
  /* In list mode, drop the map-only floating chrome that would overlap. */
  .map-area.list-open .mobile-listing-count,
  .map-area.list-open #explore-demand-mobile,
  .map-area.list-open .mobile-filter-reset{display:none !important}
  /* Hide the view chrome while a filter sheet or a listing detail is open. */
  body.rp-sheet-open .explore-view-toggle{display:none !important}
  #page-explore:has(.detail-panel.open) .explore-view-toggle,
  #page-explore:has(.detail-panel.open) .explore-list-view{display:none !important}
  
  #page-landing { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .hero { padding: 32px 16px 28px; }
  .hero-badge { font-size: 11px; padding: 4px 12px; margin-bottom: 16px; }
  .hero h1 { font-size: 28px; margin-bottom: 12px; }
  .hero p { font-size: 13px; margin-bottom: 20px; line-height: 1.6; }
  .hero-social-proof { margin-top: 18px; padding: 8px 16px; gap: 6px; }
  .hero-proof-number { font-size: 20px; }
  .hero-proof-label { font-size: 12px; }
  .hero-cta { gap: 8px; }
  .hero-cta .btn { font-size: 13px; padding: 10px 16px; width: 100%; justify-content: center; }
  .map-preview-wrap { padding: 0 16px 40px; }
  .map-preview-box { height: 240px; border-radius: 10px; }
  .map-preview-fade span { font-size: 12px; }
  
  .section { padding: 36px 16px; }
  .section-title { font-size: 26px; margin-bottom: 20px; }
  .step { padding: 20px 16px; }
  .step h3 { font-size: 14px; }
  .step p { font-size: 12px; }
  
  .pain-point { padding: 16px 14px; gap: 12px; border-radius: 12px; }
  .pain-icon { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
  .pain-text h3 { font-size: 14px; }
  .pain-text p { font-size: 12px; }

  .why { padding: 40px 16px; margin: 0 8px; }
  .why .section-title { font-size: 26px; }
  .why-stat .num { font-size: 22px; }
  .why-stat .lbl { font-size: 11px; }

  .testimonial-card { flex: 0 0 280px; padding: 22px 18px; border-radius: 14px; }
  .testimonial-quote { font-size: 15px; }
  .testimonial-avatar { width: 34px; height: 34px; font-size: 13px; }
  .testimonial-name { font-size: 12px; }
  .testimonial-role { font-size: 10px; }
  .testimonials-track-wrap { margin: 0 -16px; padding: 0 16px; }

  .landing-final-cta { padding: 48px 16px; margin-top: 32px; }
  .landing-final-cta h2 { font-size: 28px; }
  .landing-final-cta p { font-size: 13px; margin-bottom: 24px; }

  #global-footer { padding: 32px 16px; }
  .footer-inner { flex-direction: column; text-align: center; gap: 16px; }
  .footer-links { justify-content: center; gap: 16px; }
  
  #page-create { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .create-inner { padding: 20px 16px 100px; }
  .create-hd { margin-bottom: 20px; }
  .create-hd h2 { font-size: 24px; }
  .create-hd p { font-size: 13px; }
  .form-card { padding: 16px 14px; margin-bottom: 12px; }
  .form-card-title { margin-bottom: 12px; }
  .fg { margin-bottom: 14px; }
  .fg label { font-size: 12px; margin-bottom: 4px; }
  .fg input:not([type="file"]), .fg select { height: 42px; font-size: 14px; }
  .fg input[type=date] { height: 42px; font-size: 13px; padding: 0 10px; }
  .fg textarea { padding: 10px; font-size: 14px; }
  #map-picker { height: min(58vh, 460px); }
  #map-picker.map-expanded { height: calc(100vh - 180px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .map-picker-info { font-size: 12px; padding: 8px 12px; }
  .map-picker-area { padding: 10px 12px 12px; }
  .map-picker-area input { height: 38px; font-size: 13px; padding: 0 10px; }
  .map-picker-area-hint { font-size: 10px; margin-top: 4px; }
  .submit-btn { padding: 14px; font-size: 14px; }
  
  #page-profile { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .profile-inner { padding: 20px 16px 100px; }
  .profile-hd h2 { font-size: 26px; }
  .profile-card { padding: 20px 16px; }
  .profile-avatar { width: 72px !important; height: 72px !important; font-size: 28px !important; }
  .profile-name { font-size: 18px; }
  .listing-item { padding: 14px; }
  .listing-item-actions { flex-wrap: wrap; }
  .listing-item-actions .btn { flex: 1; min-width: 100px; justify-content: center; font-size: 11px !important; padding: 10px 10px !important; }
  
  #page-matches { padding-top: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .match-tab { font-size: 13px; padding: 10px 8px; }
  .buddy-card { padding: 16px; }
  .buddy-name { font-size: 15px; }
  .buddy-budget { font-size: 18px; }
  
  .already-listed-card { padding: 24px 20px; }
  .already-listed-card h3 { font-size: 16px; }
  .already-listed-card p { font-size: 13px; margin-bottom: 20px; }
  .already-listed-card .btn-row { flex-direction: column; gap: 8px; }
  .already-listed-card .btn-row .btn { width: 100%; justify-content: center; }
  
  .success-card { padding: 24px 20px; margin: 0; }
  .success-card h3 { font-size: 28px; }
}

@media(max-width: 480px) {
  /* Fallbacks for narrow screens */
  .two-col-grid { grid-template-columns: 1fr; }
  /* Role cards stay 2 columns — they're a one-tap binary choice (Owner /
     Tenant) and should fit above the fold. Stacking them forces a scroll
     to discover the second option. */
  /* (intentionally no .role-cards single-column rule) */
  
  /* Detail panel grid: switch to single column at narrow widths so long
     values like "Mixed Group (Friends)" don't wrap to 3+ lines in a
     ~155px-wide cell. */
  .dp-grid { grid-template-columns: 1fr; gap: 6px; }
  
  .match-card-head { flex-direction: column; gap: 8px; }
  .match-card-head .match-card-right { text-align: left !important; }
  /* Compact match cards keep header horizontal even on mobile — score pill is small */
  .match-card-compact .match-card-head { flex-direction: row; gap: 12px; }
  .match-card-compact .match-card-head .match-card-right { text-align: right !important; }
  .buddy-header { flex-direction: column; gap: 8px; }
  .buddy-header > div:last-child { text-align: left !important; }
  /* Compact buddy cards keep header horizontal even on mobile */
  .buddy-card .buddy-header { flex-direction: row; gap: 12px; }
  .buddy-card .buddy-header > div:last-child { text-align: right !important; }
  
  /* Extra small screen fixes */
  .nav-links a { font-size: 10px; padding: 5px 6px; }
  .profile-icon { width: 30px; height: 30px; font-size: 12px; }
  
  .hero h1 { font-size: 24px; }
  .hero-badge { font-size: 10px; padding: 4px 10px; }
  .hero-cta .btn { font-size: 12px; padding: 10px 14px; }
  
  .map-preview-box { height: 220px; }
  
  .setup-card { padding: 24px 16px; }
  .setup-input { height: 42px; /* font-size forced to 16px by mobile rule above to prevent iOS auto-zoom */ }
  
  /* Match the filter bar's edges (8px both sides) — the previous 54px left
     offset was leftover space from a button that no longer exists. */
  .explore-search { left: 8px; right: 8px; }
  .explore-search input { height: 40px; /* font-size forced to 16px by mobile rule above to prevent iOS auto-zoom */ }
  
  /* Hide search bar when a listing detail is open (mobile only) */
  #page-explore:has(.detail-panel.open) .explore-search { display: none !important; }
  
  .dp-rent { font-size: 20px; }
  .dp-name { font-size: 14px; }
  .contact-btn { font-size: 12px; padding: 10px; }
  
  .prop-type-cards { gap: 8px; }
  .prop-card { padding: 12px 10px; }
  .prop-card .picon { font-size: 20px; }
  .prop-card h4 { font-size: 12px; }
  .prop-card p { font-size: 10px; }
  
  .section-title { font-size: 22px; }
  .why .section-title { font-size: 22px; }
  .why-stat .num { font-size: 22px; }
  
  .profile-hd h2 { font-size: 22px; }
  .create-hd h2 { font-size: 22px; }
  
  .filter-section { padding: 10px 14px; }
  .filter-label { font-size: 10px; }
  /* Don't shrink chips below comfortable tap size — keeping them at the
     768px breakpoint values (which are already on the small side). The
     marginal space saving wasn't worth fat-finger taps on neighbors. */
  /* .chip kept at the parent breakpoint values intentionally. */
  
  .listing-item-actions { gap: 6px; }
  /* Keep listing-item-actions buttons readable: 11px font, ~36px tall.
     The previous 10px was below the comfortable readable threshold for
     critical actions like Pause / Delete / Edit. */
  .listing-item-actions .btn { min-width: 84px; font-size: 11px !important; padding: 9px 10px !important; }
}

@media(max-width: 360px) {
  /* Ultra small screens (iPhone SE, etc.) */
  nav { padding: 0 8px; }
  .nav-logo { font-size: 18px; }
  .nav-links { gap: 1px; }
  .nav-links a { font-size: 9px; padding: 4px 5px; }
  .profile-icon { width: 28px; height: 28px; font-size: 11px; }
  
  .hero { padding: 24px 12px 20px; }
  .hero h1 { font-size: 22px; }
  .hero p { font-size: 12px; }
  
  .map-preview-box { height: 200px; }
  
  .setup-card { margin: 12px; padding: 20px 14px; }
  
  .section { padding: 28px 12px; }
  .why { padding: 32px 12px; }
  
  .form-card { padding: 14px 12px; }
  .profile-card { padding: 16px 12px; }
  .edit-section { padding: 14px 12px; }
  .locked-section { padding: 14px 12px; }
  
  .footer-links { gap: 12px; }
  .footer-links a, .footer-links button { font-size: 12px; }
}

/* Toast notifications — anchored above the bottom nav on mobile (and its safe-area inset on iPhones). */
.toast-container{position:fixed;bottom:calc(80px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(92vw,420px);transition:bottom .15s ease-out}
/* When the global footer is scrolled into view (landing/profile/setup), lift
   the toast above its visible portion so it doesn't occlude the copyright
   line. --footer-visible-px is set by wireFooterToastOffset() in main.js. */
body.footer-in-view .toast-container{bottom:calc(var(--footer-visible-px, 0px) + 16px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}
/* Keyboard open: a bottom toast (e.g. the create wizard's "Please select a
   property type" validation) would be hidden BEHIND the on-screen keyboard —
   the keyboard is an OS overlay, so z-index can't save it. Pin toasts to the
   top, just under the nav, so validation/feedback stays visible while typing.
   Placed after the footer-in-view rule so this wins when both states apply. */
body.keyboard-open .toast-container{top:calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 70px);bottom:auto}
/* Profile-defaults badge: desktop copy lives in the sidebar (uses inline
   styles in index.html); mobile twin is a floating banner below the
   mobile-filter-bar. Each is shown/hidden by JS via the shared
   .profile-defaults-badge class — these rules just enforce that only one
   variant is ever visible at a given breakpoint. */
.profile-defaults-badge-mobile{display:none !important}
@media(max-width:980px){
  .profile-defaults-badge-desktop{display:none !important}
  /* Override only when JS sets display:block. Sits below the row that holds
     mobile-listing-count (top:100, h:~23) AND mobile-filter-reset
     (top:128, h:~30, right-aligned). Anchoring at top:170 puts the badge
     below both so the "Show all" pill doesn't visually collide with the
     filter-reset's "Clear all" pill on the right. */
  .profile-defaults-badge-mobile[style*="display:block"],
  .profile-defaults-badge-mobile[style*="display: block"]{
    display:block !important;
    position:absolute;top:170px;left:8px;right:8px;z-index:498;
    padding:8px 14px;background:var(--paper);border:1px solid var(--line-2);
    border-radius:12px;box-shadow:0 2px 6px rgba(14,15,18,.1);
    font:500 12px 'Inter',sans-serif;color:var(--ink-3);text-align:center;
    line-height:1.4;
  }
  .profile-defaults-badge-mobile .profile-defaults-clear{
    background:none;border:none;padding:0;margin-left:4px;font:inherit;
    font-weight:600;color:var(--teal);cursor:pointer;text-decoration:underline;
  }
}
.toast{background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font:500 13px 'Inter',sans-serif;box-shadow:0 12px 32px -8px rgba(14,15,18,.5);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;pointer-events:auto;max-width:100%;line-height:1.4}
.toast.show{opacity:1;transform:translateY(0)}
.toast .toast-icon{flex-shrink:0;font-size:16px}
.toast .toast-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast.toast-success{background:var(--teal)}
.toast.toast-error{background:var(--danger)}
.toast.toast-warning{background:var(--butter);color:var(--on-accent)}
@media(min-width:769px){.toast-container{bottom:24px}}

/* Photo lightbox */
#photo-lightbox{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;}
#photo-lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.94);z-index:0;}
#photo-lb-close{position:absolute;top:calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));left:50%;transform:translateX(-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:white;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
#photo-lb-close:hover{background:rgba(255,255,255,.35);}
#photo-lb-prev,#photo-lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:white;font-size:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
#photo-lb-prev:hover,#photo-lb-next:hover{background:rgba(255,255,255,.35);}
#photo-lb-prev{left:16px;}
#photo-lb-next{right:16px;}
#photo-lb-counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:14px;font-weight:600;letter-spacing:1px;z-index:3;}
#photo-lb-img{position:relative;z-index:2;max-width:88vw;max-height:78vh;object-fit:contain;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,0.5);user-select:none;-webkit-user-select:none;}
@media(max-width:768px){
  #photo-lb-prev,#photo-lb-next{width:40px;height:40px;font-size:24px;}
  #photo-lb-prev{left:8px;}
  #photo-lb-next{right:8px;}
  #photo-lb-close{top:calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));width:40px;height:40px;font-size:26px;}
  #photo-lb-img{max-width:94vw;max-height:75vh;}
}

/* Pill button groups — replaces select dropdowns in listing forms */
.pill-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
/* Inline validation marks — painted by markMissingFields() in create.js on a
   failed Publish/Next, cleared as the user fixes each field. Inputs get a
   red border; pill groups (which have no border) get a soft red ring. */
#listing-form input.field-error,#listing-form textarea.field-error,#listing-form select.field-error{border-color:var(--danger) !important;box-shadow:0 0 0 2px rgba(208,74,63,.18)}
#listing-form .pill-group.field-error{box-shadow:0 0 0 2px rgba(208,74,63,.4);border-radius:12px}
/* Photos step: wizardNext adds .field-error to the upload card when an owner
   taps Next with zero photos — the toast alone vanished before slow readers
   saw it. Cleared by renderPropertyPhotoPreview on the first added photo. */
#photo-upload-card.field-error{box-shadow:0 0 0 2px rgba(208,74,63,.4);border-radius:14px}
.pill-btn{padding:8px 18px;border-radius:100px;border:1.5px solid var(--gray-300);background:var(--white);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;user-select:none;white-space:nowrap;line-height:1.3;font-family:inherit;}
.pill-btn:active{transform:scale(.96);}
.pill-btn.selected{background:var(--lime);color:var(--on-accent);border-color:var(--lime-2);}
select.pillified{position:absolute!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;}

/* ===== LISTING ACTIONS EXPLAINER =====
   Used in two places:
   - Profile listing-detail-view, above the Pause / Close buttons (both roles)
   - Create page review step, for tenants only (the compact variant)
   Explains what Pause and Close actually do so users don't have to guess. */
.listing-actions-explainer{background:var(--paper-2);border:1px solid var(--line-2);border-radius:14px;padding:16px;margin:0 0 16px;display:flex;flex-direction:column;gap:14px}
.listing-actions-explainer .lae-heading{font:500 12px 'Inter',sans-serif;color:var(--ink-3);letter-spacing:normal;margin-bottom:-2px}
.listing-actions-explainer .lae-row{display:flex;gap:12px;align-items:flex-start}
.listing-actions-explainer .lae-icon{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:var(--paper);display:grid;place-items:center;font-size:14px;line-height:1;color:var(--teal);border:1px solid var(--line-2);font-weight:700}
.listing-actions-explainer .lae-text{flex:1;min-width:0}
.listing-actions-explainer .lae-text strong{display:block;font:600 13px 'Inter',sans-serif;color:var(--ink);margin-bottom:3px;letter-spacing:-.005em}
.listing-actions-explainer .lae-text p{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0}
.listing-actions-explainer-compact{padding:12px 14px;gap:10px}
.listing-actions-explainer-compact .lae-icon{width:28px;height:28px;font-size:13px}
.listing-actions-explainer-compact .lae-text strong{font-size:12.5px}
.listing-actions-explainer-compact .lae-text p{font-size:12px}

/* ===== POST-SIGNUP "+" TIP =====
   Shown to fresh signups on their first Explore visit. The dim backdrop
   blocks every interaction with the rest of the app until the user clicks
   the X — forcing acknowledgement of where to post a listing. */
.post-tip-overlay{position:fixed;inset:0;z-index:10000;background:rgba(14,15,18,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:postTipFadeIn .25s ease}
@keyframes postTipFadeIn{from{opacity:0}to{opacity:1}}
.post-tip-card{position:relative;width:100%;max-width:380px;background:var(--paper);border-radius:20px;padding:28px 24px 26px;box-shadow:0 28px 48px -12px rgba(14,15,18,.4);text-align:center;animation:postTipPop .32s cubic-bezier(.18,.89,.32,1.28)}
@keyframes postTipPop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.post-tip-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:var(--paper-2);border:none;border-radius:10px;color:var(--ink-3);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;font-family:inherit;line-height:1}
.post-tip-close:hover{background:var(--paper-3);color:var(--ink)}
.post-tip-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.post-tip-icon{font-size:36px;margin-bottom:10px;line-height:1}
.post-tip-headline{font-family:'Instrument Serif',serif;font-size:24px;font-style:italic;color:var(--ink);line-height:1.2;letter-spacing:-.01em;margin:0 0 10px}
.post-tip-body{font-size:14px;color:var(--ink-3);line-height:1.55;margin:0}
.post-tip-body strong{color:var(--on-accent);font-weight:700;background:var(--lime);padding:1px 6px;border-radius:5px}
@media(max-width:480px){
  .post-tip-card{padding:24px 20px 20px}
  .post-tip-headline{font-size:21px}
  .post-tip-body{font-size:13px}
}

/* ─── Archived Listings Banner ─────────────────────────────────────────── */
.archived-banner{position:fixed;top:0;left:0;right:0;padding-top:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));z-index:9999;background:var(--butter);border-bottom:2px solid var(--lime-2);animation:archiveBannerSlide .35s ease-out}
@keyframes archiveBannerSlide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.archived-banner-content{max-width:520px;margin:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;position:relative}
.archived-banner-icon{font-size:24px;flex-shrink:0}
.archived-banner-text{flex:1;font-size:13px;color:var(--on-accent-2);line-height:1.4}
.archived-banner-text strong{display:block;font-size:14px;color:var(--on-accent);margin-bottom:2px}
.archived-banner-btn{flex-shrink:0;background:var(--on-accent);color:var(--butter);border:none;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.archived-banner-btn:hover{opacity:.85}
.archived-banner-close{position:absolute;top:calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));right:8px;background:none;border:none;font-size:16px;color:var(--on-accent-2);cursor:pointer;padding:4px;line-height:1}

/* Paused listing card in profile */
.listing-item-paused{opacity:.75;border:1.5px dashed var(--ink-4)!important;background:var(--paper-2)!important}
.listing-paused-badge{font-size:10px;font-weight:600;color:var(--ink-3);background:var(--paper-3);padding:2px 8px;border-radius:6px;margin-left:auto}

/* Inactivity-warning listing (cron has sent inactivity email) — softer than paused */
.listing-item-inactivity-warning{border:1px solid var(--coral-2)!important;background:var(--paper)!important}
.listing-inactivity-warning-badge{font-size:10px;font-weight:600;color:var(--danger);background:var(--rose);padding:2px 8px;border-radius:6px;margin-left:auto}
.listing-item-hint--warn{color:var(--coral-3)!important;font-weight:600}

/* Restore section at top of listings */
.paused-restore-section{background:var(--paper-2);border:1.5px solid var(--line-2);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.paused-restore-header{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink)}
.paused-restore-hint{font-size:12px;color:var(--ink-3);margin:4px 0 0}

/* ─── Impersonation pill ──────────────────────────────────────────────── */
#impersonation-banner{position:fixed;bottom:80px;left:12px;z-index:10000;background:rgba(14,15,18,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:6px 10px 6px 8px;display:flex;align-items:center;gap:8px;font:500 11px/1.3 'Inter',sans-serif;border-radius:20px;box-shadow:0 2px 12px rgba(0,0,0,.3);max-width:260px}
#impersonation-banner .imp-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#impersonation-banner .imp-exit{background:#fff;color:#111;border:none;padding:3px 8px;border-radius:12px;font:600 10px 'Inter',sans-serif;cursor:pointer;flex-shrink:0}
#impersonation-banner .imp-exit:hover{background:#e5e5e5}

/* ─── Admin Console ────────────────────────────────────────────────────── */
/* Surfaces ride two local vars so dark mode gets a proper elevation step
   (page < card < row) instead of the old hardcoded #fff/#fafafa, which left
   light cards stranded on the dark page and flipped --ink-* text unreadable
   inside them. Everything else inherits the global token system. */
/* 88px top = 72px fixed-nav clearance (same convention as #page-matches /
   #page-profile) + 16px breathing room; the old 32px left the "Admin Console"
   title clipped under the nav on desktop. The mobile media query below
   (≈line 2429) still re-pins to 56px + safe-area. */
#page-admin{--admin-card:#fff;--admin-row:var(--paper);padding:88px 16px 80px;background:var(--paper);min-height:100vh}
@media (prefers-color-scheme: dark){
  #page-admin{--admin-card:var(--paper-2);--admin-row:var(--paper-3)}
}
/* Shared icon baseline — inline line-icons used throughout the console. */
#page-admin .ai{display:inline-block;vertical-align:-.18em;flex:none}
.admin-muted{color:var(--ink-3);font-size:12px}
.admin-error{color:var(--danger);font:500 13px 'Inter',sans-serif;margin:8px 0}
.admin-soft{color:var(--ink-4)}
.admin-deleted{color:var(--ink-4);font-style:italic}

/* ── Pre-auth gate cards (centered) ──────────────────────────────────────── */
.admin-shell{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.admin-gate-card{background:var(--admin-card);border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:var(--shadow);text-align:center}
.admin-gate-icon{width:48px;height:48px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--admin-row);border:1px solid var(--line);color:var(--ink-3)}
.admin-gate-icon svg{width:24px;height:24px}
.admin-gate-card h2{margin:0 0 6px;font:400 26px 'Instrument Serif',serif;letter-spacing:-.01em;color:var(--ink)}
.admin-gate-card p{margin:0 0 16px;font:500 13px 'Inter',sans-serif;color:var(--ink-2);line-height:1.5}
.admin-gate-card .admin-error{min-height:18px}
#admin-password-form{display:flex;flex-direction:column;gap:10px}
#admin-password-form input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:500 14px 'Inter',sans-serif;background:var(--admin-card);color:var(--ink);text-align:center}
#admin-password-form input:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 3px rgba(18,120,112,.18)}
#admin-password-form button{padding:12px;font-size:14px;justify-content:center}

/* ── Console shell ───────────────────────────────────────────────────────── */
.admin-console{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start}
.admin-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--admin-card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.admin-brand{display:flex;align-items:center;gap:10px}
.admin-brand-mark{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--on-accent);flex:none}
.admin-brand-mark svg{width:19px;height:19px}
.admin-brand-text{display:flex;flex-direction:column;line-height:1.1}
.admin-brand-text strong{font:700 15px 'Inter',sans-serif;color:var(--ink);letter-spacing:-.01em}
.admin-brand-text span{font:500 11px 'Inter',sans-serif;color:var(--ink-4)}
/* Sidebar nav is a <div role=navigation> (NOT <nav>) so it can't inherit the
   global `nav{position:fixed;height:64px}` app-header rule. The resets below
   are belt-and-suspenders in case anything ever targets the class. */
.admin-nav{display:flex;flex-direction:column;gap:2px;position:static;height:auto;width:auto;z-index:auto}
.admin-nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:none;border-radius:10px;font:600 13px 'Inter',sans-serif;color:var(--ink-2);cursor:pointer;text-align:left;transition:background .12s ease,color .12s ease}
.admin-nav-item .admin-nav-ic{width:17px;height:17px;flex:none;color:var(--ink-4);transition:color .12s ease}
.admin-nav-item span{flex:1;min-width:0}
.admin-nav-item:hover{background:var(--admin-row);color:var(--ink)}
.admin-nav-item:hover .admin-nav-ic{color:var(--ink-3)}
.admin-nav-item.is-active{background:rgba(18,120,112,.12);color:var(--teal-3)}
.admin-nav-item.is-active .admin-nav-ic{color:var(--teal-3)}
.admin-nav-item:focus-visible{outline:2px solid var(--teal-3);outline-offset:1px}
.admin-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);color:var(--on-accent);font:700 10px 'Inter',sans-serif;flex:none}
.admin-sidebar-foot{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.admin-session-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:10px;border:1px solid var(--line);background:var(--admin-row);color:var(--ink-2);font:600 12px ui-monospace,'JetBrains Mono',monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-session-chip svg{width:14px;height:14px;color:var(--ink-4)}
.admin-session-chip.admin-session-low{border-color:var(--danger);color:var(--danger)}
.admin-session-chip.admin-session-low svg{color:var(--danger)}
.admin-icon-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--admin-card);color:var(--ink-2);font:600 12px 'Inter',sans-serif;cursor:pointer;transition:border-color .12s ease,color .12s ease}
.admin-icon-btn svg{width:15px;height:15px}
.admin-icon-btn:hover{border-color:var(--danger);color:var(--danger)}

/* ── Main column ─────────────────────────────────────────────────────────── */
.admin-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.admin-mobile-bar{display:none}
.admin-section{display:none;flex-direction:column;gap:16px}
.admin-section.is-active{display:flex;animation:adminFade .18s ease}
@keyframes adminFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-section-title h2{margin:0;font:400 27px 'Instrument Serif',serif;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.admin-section-title p{margin:3px 0 0;font:500 12.5px 'Inter',sans-serif;color:var(--ink-3)}
.admin-section-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-count{font:600 13px 'Inter',sans-serif;color:var(--ink-4)}

/* Cards & generic controls */
.admin-card{background:var(--admin-card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.admin-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.admin-card-head h3{margin:0;font:700 14px 'Inter',sans-serif;color:var(--ink)}
.admin-card-sub{font:500 11.5px 'Inter',sans-serif;color:var(--ink-4)}
.admin-select{font:600 12px 'Inter',sans-serif;padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:var(--admin-card);color:var(--ink-2);cursor:pointer}
.admin-select:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 3px rgba(18,120,112,.18)}
.admin-ghost-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--admin-card);color:var(--ink-3);cursor:pointer;transition:border-color .12s ease,color .12s ease}
.admin-ghost-btn svg{width:15px;height:15px}
.admin-ghost-btn:hover{border-color:var(--teal-3);color:var(--teal-3)}
.admin-loadmore{align-self:flex-start;padding:8px 16px;border:1px solid var(--line);border-radius:10px;background:var(--admin-card);color:var(--ink-2);font:600 12.5px 'Inter',sans-serif;cursor:pointer}
.admin-loadmore:hover{border-color:var(--ink-4)}
.admin-empty{padding:26px 16px;text-align:center;color:var(--ink-3);font:500 13px 'Inter',sans-serif;background:var(--admin-row);border:1px dashed var(--line);border-radius:12px}
.admin-empty-sm{padding:12px;font-size:12px}
.admin-footnote{font-size:11px;margin-top:8px;color:var(--ink-4)}

/* ── Overview: KPIs ──────────────────────────────────────────────────────── */
.admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-kpi{background:var(--admin-card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px}
.admin-kpi-top{display:flex;align-items:center;gap:8px}
.admin-kpi-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--admin-row);color:var(--ink-4);flex:none}
.admin-kpi-ic svg{width:15px;height:15px}
.admin-kpi-label{font:600 11px 'Inter',sans-serif;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.admin-kpi-value{font:400 30px 'Instrument Serif',serif;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.admin-kpi-sub{font:500 11.5px 'Inter',sans-serif;color:var(--ink-4)}
.admin-kpi-sub .kpi-up{color:var(--teal-3);font-weight:700}
.admin-kpi.tone-good .admin-kpi-ic{background:rgba(18,120,112,.13);color:var(--teal-3)}
.admin-kpi.tone-win .admin-kpi-ic{background:var(--lime);color:var(--on-accent)}
.admin-kpi.tone-warn .admin-kpi-ic{background:var(--coral);color:var(--on-accent)}
.admin-kpi.tone-warn .admin-kpi-value{color:var(--coral-3)}
.admin-kpi.is-link{cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.admin-kpi.is-link:hover{transform:translateY(-2px);border-color:var(--teal-3)}
.admin-kpi.is-link:focus-visible{outline:2px solid var(--teal-3);outline-offset:2px}

/* ── Overview: chart + online ────────────────────────────────────────────── */
.admin-overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px}
.admin-chart{position:relative}
.admin-chart-legend{display:flex;gap:14px;margin-bottom:6px}
.acl-item{display:inline-flex;align-items:center;gap:6px;font:600 11.5px 'Inter',sans-serif;color:var(--ink-3)}
.acl-dot{width:9px;height:9px;border-radius:3px;flex:none}
.acl-dot.ac-c-signups{background:var(--coral)}
.acl-dot.ac-c-logins{background:var(--teal-3)}
.admin-chart-svg{width:100%;height:auto;display:block;overflow:visible}
.admin-chart-svg .ac-grid{stroke:var(--line);stroke-width:1}
.admin-chart-svg .ac-ylab,.admin-chart-svg .ac-xlab{fill:var(--ink-4);font:500 9px 'Inter',sans-serif}
.admin-chart-svg .ac-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.admin-chart-svg .ac-line-signups{stroke:var(--coral)}
.admin-chart-svg .ac-line-logins{stroke:var(--teal-3)}
.admin-chart-svg .ac-area{stroke:none}
.admin-chart-svg .ac-area-signups{fill:var(--coral);opacity:.1}
.admin-chart-svg .ac-area-logins{fill:var(--teal-3);opacity:.1}
.admin-chart-svg .ac-dot-signups{fill:var(--coral)}
.admin-chart-svg .ac-dot-logins{fill:var(--teal-3)}
.admin-online-dot-key{display:inline-flex;align-items:center;gap:5px;font:500 11px 'Inter',sans-serif;color:var(--ink-4)}
.admin-online-stats{display:flex;gap:10px;margin-bottom:12px}
.admin-online-stats>div{flex:1;background:var(--admin-row);border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column}
.admin-online-stats b{font:400 22px 'Instrument Serif',serif;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.admin-online-stats span{font:600 10px 'Inter',sans-serif;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.admin-online-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.admin-online-row{display:flex;align-items:center;gap:10px}
.admin-online-info{flex:1;min-width:0}
.admin-online-name{font:600 13px 'Inter',sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-online-meta{font:500 11px 'Inter',sans-serif;color:var(--ink-4)}
.admin-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:none}
.admin-dot.is-live{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}

/* ── Avatars ─────────────────────────────────────────────────────────────── */
.admin-av{width:34px;height:34px;border-radius:50%;background-color:var(--paper-3);flex:none;background-size:cover;background-position:center;border:1px solid var(--line)}
.admin-av-lg{width:42px;height:42px}
.admin-av-fallback{display:flex;align-items:center;justify-content:center;font:700 13px 'Inter',sans-serif;color:var(--ink-3)}
.admin-av-lg.admin-av-fallback{font-size:16px}

/* ── Pills / tags ────────────────────────────────────────────────────────── */
.admin-pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:700 10px 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.admin-pill-accent{background:var(--lime);border-color:var(--lime-2);color:var(--on-accent)}
.admin-role-tag{font:600 10px 'Inter',sans-serif;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.admin-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:700 10.5px 'Inter',sans-serif;border:1px solid var(--line);background:var(--admin-row);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.admin-tag svg{width:11px;height:11px}
.admin-tag.tag-login{background:rgba(18,120,112,.12);border-color:transparent;color:var(--teal-3)}
.admin-tag.tag-signup{background:var(--lime);border-color:transparent;color:var(--on-accent)}
.admin-tag.tag-open,.admin-tag.tag-warn{background:rgba(214,90,52,.13);border-color:transparent;color:var(--coral-3)}
.admin-tag.tag-reviewed,.admin-tag.tag-actioned{background:rgba(18,120,112,.12);border-color:transparent;color:var(--teal-3)}
.admin-tag.tag-dismissed,.admin-tag.tag-closed{background:var(--admin-row);color:var(--ink-4)}
.admin-tel{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--teal-3);text-decoration:none}
.admin-tel:hover{text-decoration:underline}
.admin-tel svg{width:13px;height:13px}

/* ── Users list ──────────────────────────────────────────────────────────── */
.admin-search-wrap{position:relative}
.admin-search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-4);pointer-events:none}
#admin-user-search{width:100%;box-sizing:border-box;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:11px;font:500 14px 'Inter',sans-serif;background:var(--admin-card);color:var(--ink)}
#admin-user-search::placeholder{color:var(--ink-4)}
#admin-user-search:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 3px rgba(18,120,112,.18)}
.admin-user-list{display:flex;flex-direction:column;gap:8px}
.admin-user-row{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--admin-card);transition:border-color .12s ease}
.admin-user-row:hover{border-color:var(--ink-4)}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font:600 14px 'Inter',sans-serif;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-user-meta{font:500 12px 'Inter',sans-serif;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.admin-user-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.admin-user-stats span{display:inline-flex;align-items:center;gap:4px;font:500 11.5px 'Inter',sans-serif;color:var(--ink-4)}
.admin-user-stats span svg{color:var(--ink-4)}
.admin-act-btn{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:var(--admin-card);color:var(--ink-2);font:600 12px 'Inter',sans-serif;cursor:pointer;transition:border-color .12s ease,color .12s ease}
.admin-act-btn:hover{border-color:var(--teal-3);color:var(--teal-3)}

/* ── Feed rows (sign-ins, waiting, reports, fraud) ───────────────────────── */
.admin-feed{display:flex;flex-direction:column;gap:8px}
.admin-feed-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--admin-card);color:var(--ink-2);line-height:1.5}
.admin-feed-row.col{flex-direction:column;align-items:stretch;gap:9px}
.admin-feed-main{flex:1;min-width:0;overflow-wrap:anywhere}
.admin-feed-row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.admin-feed-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.admin-feed-name{font:700 13.5px 'Inter',sans-serif;color:var(--ink)}
.admin-feed-sub{font:500 12px 'Inter',sans-serif;color:var(--ink-3);margin-top:2px}
.admin-feed-tech{display:inline-flex;align-items:center;gap:5px;font:500 11px 'Inter',sans-serif;color:var(--ink-4);margin-top:3px}
.admin-feed-tech svg{color:var(--ink-4)}
.admin-feed-quote{font:500 12px 'Inter',sans-serif;color:var(--ink-3);margin-top:4px;font-style:italic}
.admin-feed-note{font:500 12px 'Inter',sans-serif;color:var(--ink-3);margin-top:4px}
.admin-feed-time{font:500 11px 'Inter',sans-serif;color:var(--ink-4);white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:3px}
.admin-feed-row.login-row .admin-feed-time{align-self:flex-start}
.admin-feed-row.wait-pending{border-left:3px solid var(--coral)}
.admin-feed-row.wait-awaiting{border-left:3px solid var(--danger)}
.admin-feed-row.wait-nochat{border-left:3px solid var(--butter)}
.admin-subsection{margin-top:4px}
.admin-subhead{display:flex;align-items:center;gap:7px;font:700 12px 'Inter',sans-serif;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 7px}
.admin-subcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--admin-row);border:1px solid var(--line);color:var(--ink-3);font:700 10px 'Inter',sans-serif}
.admin-subsection .admin-feed-row{margin-bottom:7px}
.admin-btn-row{display:flex;gap:7px;flex-wrap:wrap}
.admin-chip-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:var(--admin-card);color:var(--ink-2);font:600 11.5px 'Inter',sans-serif;cursor:pointer;transition:border-color .12s ease,color .12s ease}
.admin-chip-btn:hover{border-color:var(--teal-3);color:var(--teal-3)}
.admin-code{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-3);background:var(--admin-row);padding:1px 5px;border-radius:5px}
.admin-acct-list{margin:6px 0 0;padding:0 0 0 18px;font:500 12px 'Inter',sans-serif;color:var(--ink-3)}

/* ── Audit log ───────────────────────────────────────────────────────────── */
.admin-audit-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--admin-card);color:var(--ink-2);line-height:1.5;border-left:3px solid transparent}
.admin-audit-row .audit-main{flex:1;min-width:0;overflow-wrap:anywhere;font:500 12.5px 'Inter',sans-serif}
.admin-audit-row .audit-icon{display:inline-flex;align-items:center;margin-right:5px;color:var(--ink-4);vertical-align:-.18em}
.admin-audit-row .audit-action{font-weight:700;color:var(--ink);margin-right:3px}
.admin-audit-row .audit-time{color:var(--ink-4);font-size:11px;white-space:nowrap;flex:none}
.admin-audit-row .audit-changes{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.admin-audit-row .audit-field{font-weight:600;color:var(--ink-2)}
.audit-ip{opacity:.7;font-family:ui-monospace,monospace;font-size:11px}
.audit-view-link{border:none;background:none;color:var(--teal-3);font:600 11px 'Inter',sans-serif;cursor:pointer;padding:0 2px;text-decoration:underline;text-underline-offset:2px}
.audit-view-link:hover{color:var(--teal)}
/* Feed family accents — instant visual grouping of the activity stream. */
.audit-f-create{border-left-color:var(--teal-3)}
.audit-f-auth{border-left-color:var(--sky)}
.audit-f-edit{border-left-color:var(--butter)}
.audit-f-delete{border-left-color:var(--danger)}
.audit-f-lifecycle{border-left-color:var(--sky)}
.audit-f-win{border-left-color:var(--lime)}
.audit-f-admin{border-left-color:var(--ink-5)}
.audit-f-security{border-left-color:var(--danger)}

/* ── Responsive: collapse to single column + top nav strip ───────────────── */
@media (max-width:980px){
  .admin-console{grid-template-columns:1fr;gap:14px}
  .admin-sidebar{position:sticky;top:calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));z-index:30;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;overflow-x:auto}
  .admin-brand{display:none}
  .admin-nav{flex-direction:row;gap:4px;flex:1}
  .admin-nav-item{width:auto;flex:none;padding:8px 12px;white-space:nowrap}
  .admin-sidebar-foot{flex-direction:row;align-items:center;border-top:none;padding-top:0;border-left:1px solid var(--line);padding-left:10px;flex:none}
  .admin-icon-btn span{display:none}
  .admin-overview-grid{grid-template-columns:1fr}
  .admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .admin-section-title h2{font-size:23px}
  .admin-feed-row.login-row,.admin-user-row{flex-wrap:wrap}
}

/* Custom confirm modal — replaces native confirm() for destructive actions */
.rp-confirm-overlay{position:fixed;inset:0;background:rgba(14,15,18,0.55);z-index:11000;display:flex;align-items:center;justify-content:center;padding:20px;animation:rpConfirmFade 0.15s ease-out}
@keyframes rpConfirmFade{from{opacity:0}to{opacity:1}}
.rp-confirm-card{background:var(--paper,#fff);border-radius:14px;max-width:380px;width:100%;padding:22px 22px 16px;box-shadow:0 24px 48px rgba(0,0,0,0.25);animation:rpConfirmPop 0.18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rpConfirmPop{from{transform:translateY(20px) scale(0.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.rp-confirm-title{font-family:'Instrument Serif',serif;font-size:20px;color:var(--ink,#0E0F12);margin-bottom:8px;line-height:1.2}
.rp-confirm-message{font-size:14px;color:var(--ink-3,#4b5563);line-height:1.5;margin-bottom:18px;white-space:pre-wrap}
.rp-confirm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.rp-confirm-actions button{flex:1;min-width:110px;padding:10px 16px;border-radius:10px;font:600 14px 'Inter',sans-serif;cursor:pointer;border:none;transition:transform 0.08s ease,filter 0.12s ease}
.rp-confirm-actions button:hover{filter:brightness(1.05)}
.rp-confirm-actions button:active{transform:translateY(1px)}
.rp-confirm-cancel{background:var(--gray-100,#f3f4f6);color:var(--ink,#0E0F12);border:1px solid var(--gray-200,#e5e7eb)!important}
.rp-confirm-ok{background:var(--teal,#0E5C56);color:#FBFAF7}
/* rpConfirm({danger:true}) toggles .btn-danger on the OK button, but this
   block sits later in the file and used to win the cascade — destructive
   confirms rendered in brand teal. Danger confirms get a solid danger fill. */
.rp-confirm-ok.btn-danger{background:var(--danger,#D04A3F);color:#FBFAF7}
.rp-confirm-ok.danger{background:var(--danger,#D04A3F)}
.rp-confirm-overlay.alert-only .rp-confirm-cancel{display:none}
.rp-confirm-overlay.alert-only .rp-confirm-ok{flex:1}
@media (max-width:480px){
  .rp-confirm-actions{flex-direction:column-reverse}
  .rp-confirm-actions button{width:100%}
}

/* ── Close-listing flow (#close-listing-overlay, js/pages/profile.js) ──
   Reuses the rp-confirm overlay/card shell; the rules below style only the
   flow's innards. Colors are tokens (or fixed accents paired with
   --on-accent-2), so dark mode needs no re-pin. */
.close-listing-card{max-width:430px}
.close-outcome-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.close-outcome-btn{display:block;width:100%;text-align:left;padding:12px 14px;border:1.5px solid var(--line,#E9E7DF);border-radius:12px;background:var(--paper,#fff);color:var(--ink,#0E0F12);font:600 14px 'Inter',sans-serif;cursor:pointer;transition:border-color .12s ease}
.close-outcome-btn:hover{border-color:var(--teal,#0E5C56)}
.close-outcome-hint{display:block;font-weight:400;font-size:12px;color:var(--ink-3,#4b5563);margin-top:2px}
.close-partner-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;margin-bottom:14px}
.close-partner-group{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4,#6b7280);margin:4px 0 0}
.close-partner-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1.5px solid var(--line,#E9E7DF);border-radius:12px;background:var(--paper,#fff);cursor:pointer;text-align:left;font:600 14px 'Inter',sans-serif;color:var(--ink,#0E0F12)}
.close-partner-row:hover{border-color:var(--teal,#0E5C56)}
.close-partner-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.close-partner-initial{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--teal,#0E5C56);color:#FBFAF7;font-size:15px;flex-shrink:0}
.close-partner-meta{display:block;font-weight:400;font-size:12px;color:var(--ink-3,#4b5563)}
.close-done-emoji{font-size:44px;text-align:center;margin:4px 0 10px}
/* "Closed" state on My Listings cards — terminal, kept as a record. */
.listing-item-closed{opacity:.85;background:var(--paper-2,#F7F5EF)!important}
.listing-closed-badge{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--on-accent-2,#2A2D33);background:var(--mint,#B8E6D4);padding:2px 8px;border-radius:6px;margin-left:auto}
/* Deal-confirmation card (top of the Inbox lists, js/pages/messages.js). */
.deal-confirm-card{background:var(--paper,#fff);border:1.5px solid var(--teal,#0E5C56);border-radius:14px;padding:14px;margin-bottom:14px}
.deal-confirm-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.deal-confirm-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.deal-confirm-title{font-weight:700;font-size:14px;color:var(--ink,#0E0F12);line-height:1.35}
.deal-confirm-meta{font-size:12px;color:var(--ink-3,#4b5563);margin-top:2px}
.deal-confirm-sub{font-size:12.5px;color:var(--ink-3,#4b5563);line-height:1.45;margin-bottom:10px}
.deal-confirm-actions{display:flex;gap:8px}
.deal-confirm-actions .btn{flex:1;justify-content:center;font-size:12.5px;padding:8px 12px}

/* ============================================================
   MICRO-INTERACTIONS — tactile press, hover lift, skeletons, entrance.
   Added 2026-06-13 (design polish). Transform/shadow/opacity only, so
   this sits above the dark-mode block without disturbing token flips.
   Honors prefers-reduced-motion. */
.btn:active,.interested-btn:active{transform:scale(.97)}
.chip:active,.connection-subtab:active,.match-tab:active,.message-tab:active,.listing-filter-chip:active{transform:scale(.985)}
/* Cards that only recolored their border on hover now lift, matching the
   elevation language .listing-card already uses. */
.mcard{transition:transform .18s,box-shadow .18s,border-color .18s}
.mcard:hover,.connection-card:hover,.match-card:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(14,15,18,.05),0 16px 30px -16px rgba(14,15,18,.26)}
.mcard:active,.connection-card:active,.match-card:active{transform:translateY(0);box-shadow:0 1px 0 rgba(14,15,18,.04),0 8px 22px -10px rgba(14,15,18,.18)}
/* Skeleton placeholders (shimmer) for list/detail loading — pair .skeleton
   with a sizing class, e.g. <div class="skeleton skeleton-card">. */
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skeleton{background:linear-gradient(100deg,var(--paper-2) 28%,var(--paper-3) 50%,var(--paper-2) 72%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:8px}
.skeleton-card{height:104px;border-radius:18px;margin-bottom:12px}
.skeleton-line{height:12px;margin-bottom:8px}
.skeleton-line.sk-sm{width:40%}.skeleton-line.sk-md{width:65%}.skeleton-line.sk-lg{width:85%}
/* Opt-in entrance for freshly rendered cards. */
@keyframes cardEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.anim-enter{animation:cardEnter .28s cubic-bezier(.18,.89,.32,1.28) both}
@media(prefers-reduced-motion:reduce){
  .skeleton,.skeleton-card,.skeleton-line,.anim-enter{animation:none}
  .btn:active,.interested-btn:active,.chip:active,.connection-subtab:active,.match-tab:active,.message-tab:active,.listing-filter-chip:active,
  .mcard:hover,.connection-card:hover,.match-card:hover,.mcard:active,.connection-card:active,.match-card:active{transform:none}
}

/* ============================================================
   DARK MODE — "Same ink, after dark".
   One token flip: the page world goes deep ink-gray with a warm
   bone text scale; teal brightens for contrast; lime/butter/
   coral/mint/rose/sky and --on-accent(-2) stay untouched.
   Surfaces that are ALREADY ink-dark in the light theme re-pin
   the light-theme tokens locally (custom props cascade to their
   descendants), so they render pixel-identical to light mode.
   Kept at the END of the file so the non-token rules below win
   the cascade over their light-theme definitions.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#15171C;--paper-2:#1C1F25;--paper-3:#262A31;
    --ink:#EDEBE3;--ink-2:#CFCDC4;--ink-3:#A2A29B;--ink-4:#75756F;--ink-5:#4C4D52;
    --line:#2B2E36;--line-2:#23262D;
    --teal:#2E9C92;--teal-2:#23857C;--teal-3:#49B7AC;
    --shadow:0 1px 0 rgba(0,0,0,.45), 0 8px 22px -10px rgba(0,0,0,.7);
    --shadow-md:0 2px 0 rgba(0,0,0,.5), 0 28px 48px -20px rgba(0,0,0,.85);
    --shadow-pop:0 12px 32px -8px rgba(10,80,74,.55);
  }
  /* Inverse-brand surfaces: keep today's exact ink+paper+lime look.
     #main-nav ONLY — the .bottom-nav tab bar must flip with the page.
     Map-floating elements (markers, audience tip) stay dark because the
     Google Map tiles themselves stay light for now. */
  #main-nav,.bottom-nav,.why,.landing-final-cta,.success-overlay,.step-num,.testimonial-avatar,
  .price-marker,.cluster-marker,.explore-view-toggle,.skip-link,.legend-dot.owner{
    --paper:#FBFAF7;--paper-2:#F2EFE8;--paper-3:#E8E4D9;
    --ink:#0E0F12;--ink-2:#2A2D33;--ink-3:#5A6068;--ink-4:#8E949C;--ink-5:#BFC4CB;
    --line:#E1DCCD;--line-2:#EBE6D6;
    --teal:#0E5C56;--teal-2:#0B4944;--teal-3:#127870;
  }
  /* The #0E0F12 chips would melt into the #15171C page — give them a
     hairline ring (box-shadow, not border, so layout is identical). */
  .step-num,.testimonial-avatar{box-shadow:0 0 0 1px #2B2E36}
  /* Photo top-tag: fixed dark scrim, so the label must stay paper-white. */
  .lc-photo .lc-top-tag{color:#FBFAF7}
  /* Listed-by chips: hardcoded light tints in the light theme — re-tint
     to dark equivalents (same hue story, readable on dark cards). */
  .explore-card-chip-warn{background:#3A1713;color:#FF9C8F;border-color:#5A241E}
  .explore-card-chip-owner{background:#11302C;color:#5BC3B8;border-color:#1E4B45}
  .explore-card-chip-broker{background:#332B11;color:#DCBE4F;border-color:#4A4220}
  /* Soft-danger buttons (Delete Account, Close listing) kept their light
     salmon fill in dark mode — a loud bright slab. Same dark re-tint recipe
     as the warn chip above. rpConfirm's solid-red OK keeps its own override
     (.rp-confirm-ok.btn-danger wins on specificity). */
  .btn-danger{background:#3A1713;color:#FF9C8F}
  .btn-danger:hover{background:#54201A}
  /* Hardcoded paper-glass surfaces flip to ink-glass. */
  .map-preview-fade{background:linear-gradient(to bottom,transparent,rgba(21,23,28,.95))}
  .filters-panel{background:rgba(21,23,28,.85);border-color:rgba(255,255,255,.08)}
  .wizard-footer.wizard-footer-visible{background:rgba(21,23,28,.97)}
  .dp-close,.profile-modal-close{background:rgba(38,42,49,.92)}
  /* Active connection subtab inverts to a light pill in dark mode, so its
     count chip flips to an ink-tint with dark text. */
  .connection-subtab.active .subtab-count{background:rgba(14,15,18,.15);color:var(--paper)}
  /* Explore chrome: more paper-glass → ink-glass (mobile filter bar, map
     legend). The two map loading pills + tile skeleton are inline-styled in
     index.html, hence the !important. */
  #mobile-filter-bar{background:rgba(21,23,28,.95)}
  .map-legend{background:rgba(21,23,28,.88);border-color:rgba(255,255,255,.08)}
  #map-loading-indicator,#map-tiles-loading>div{background:rgba(38,42,49,.92) !important}
  #map-tiles-loading{background:repeating-linear-gradient(45deg,#1B1E24 0 18px,#212530 18px 36px) !important}
  /* The setup/about/footer logomarks are the INVERTED variant (ink pentagon
     + lime dots), designed for light surfaces. In dark mode those surfaces
     are dark, so revert to the primary mark — lime pentagon, ink dots —
     exactly like the nav. (.rp-pin = the pentagon path, .rp-house = the dots.) */
  .setup-logomark .rp-pin,.about-logomark .rp-pin,.footer-logomark .rp-pin{fill:var(--lime)}
  .setup-logomark .rp-house,.about-logomark .rp-house,.footer-logomark .rp-house{fill:var(--on-accent)}
  /* …and their wordmarks' "Pin" goes lime on dark surfaces too (teal is the
     light-surface pairing; the nav is the dark-surface reference). */
  .setup-wordmark span,.about-wordmark span,.footer-wordmark span{color:var(--lime)}
  /* Same bug class: the hero badge's teal dot sits on the FIXED lime pill,
     so it keeps the light-theme teal rather than the brightened dark teal. */
  .hero-badge::before{background:#0E5C56}
}