/* ============================================================================
   Proplist — DENSITY pass (2026-08-26)
   The "Clean & Official" theme was tuned deliberately big & spacious ("BIG
   CLEAR buttons"). Abigail: "everything on proplist feels so big." This layer
   loads LAST and dials the whole app to a tighter, more professional density
   WITHOUT changing the design language (same emerald, same layout, same fonts)
   — just less air. One global lever (root font-size) + trims on the chunkiest
   components. Reversible: delete this file + its <link> to restore.
   ========================================================================= */

/* 1) The big lever: ~6% smaller everything rem-based (fonts, rem gaps/padding).
      The app uses rem widely, so this tightens uniformly in one line. */
:root { font-size: 15px; }

/* 2) Slightly crisper corners (less "bubbly") */
:root { --r-sm: 7px; --r-md: 10px; --r-lg: 13px; }

/* 3) Buttons — less chunky, still clearly tappable */
.btn, button.btn, .button { padding: 8px 14px; font-weight: 620; }
.btn-sm, .btn.btn-sm { padding: 6px 11px; font-size: 0.82rem; }
.btn-xs, .btn.btn-xs { padding: 3px 9px; font-size: 0.76rem; }

/* 4) Inputs — tighter fields */
input, textarea, select { padding: 8px 11px; }

/* 5) Page frame — reclaim margin around the content */
main { padding: 22px 30px 80px; }

/* 6) Sidebar nav — smaller items + logo, shorter top bar */
.nav-inner > button[data-page] { padding: 9px 12px; font-size: 14px; }
.nav .logo { font-size: 19px; padding: 4px 10px 14px; }
.app-header-inner { height: 56px; }

/* 7) Headings / section labels — trim the vertical gaps */
.section-label { margin-top: 14px; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }

/* 8) FB group picker — the densest screen, tighten rows + info cards + chips */
.fb-group-row { padding: 4px 10px; }
.check-row { gap: 10px; }
#composer-fb-groups .sop-remark { padding: 10px 13px; font-size: 0.82rem; }
#composer-packs .pack-chip { padding: 5px 10px; }
#composer-packs .chip-row { gap: 6px; }

/* 9) Cards — a touch less internal air on the common panels */
.card, [class*="card"], .panel { border-radius: var(--r-lg); }

/* ============================================================================
   DENSITY v2 (2026-08-27) — still felt "so damn big". Decisive tightening:
   lower the base scale + trim the chunkiest paddings/sizes across screens.
   This block loads last so it wins over the v1 values above.
   ======================================================================== */
:root { font-size: 13.5px; }

/* Page frame */
main { padding: 20px 28px 70px; }
.section-label { font-size: 0.9rem; margin-top: 12px; }

/* Home hero — was 30px padding / 2rem heading */
#page-home .hero, #page-home .hero-compact { padding: 19px 24px; }
#page-home .hero h2, #page-home .hero #home-greeting { font-size: 1.5rem; }
#page-home .hero p { font-size: 0.9rem; }
#page-home .hero .hero-eyebrow { font-size: 0.66rem; }
#page-home .hero .card-actions { margin-top: 13px !important; }
#page-home .hero .btn-peach, #page-home .hero .btn-outline { padding: 10px 18px; font-size: 0.9rem; }

/* Stat cards — was 26px padding */
#page-home .stat-card { padding: 15px 17px; }
#page-home .stat-num, .stat-num { font-size: 1.7rem; }
#page-home .stat-label { font-size: 0.72rem; }
#page-home .stat-row { gap: 12px; }

/* Getting-started / onboarding + pulse feed */
#page-home .pulse-feed, .onboarding-card { padding: 14px 18px; }

/* Listings — was 30px gap */
#listings-list { gap: 18px; }
#page-listings .page-head { margin-bottom: 14px; }
#page-listings .page-head h2 { font-size: 1.5rem; }
#listings-list .condo-block { padding: 12px 14px; }
#listings-list .unit-row { padding: 9px 10px; }
.unit-thumb, .listing-thumb { width: 56px; height: 56px; }

/* Connections — was 20-22px padding, 26px icon */
#page-connections .conn-card, #page-connections .conn-card-wrap { padding: 13px 16px; }
#page-connections .conn-icon { width: 40px; height: 40px; font-size: 18px; }
#page-connections .conn-info h3 { font-size: 1.02rem; }
#page-connections .conn-sub { font-size: 0.84rem; }

/* Page-detail + composer headers a touch tighter */
.page-head h2 { font-size: 1.5rem; }

/* ============================================================================
   DENSITY v3 (2026-08-27) — "words so tiny, box so big, setting so kek".
   The v2 13.5px made TEXT too small while boxes stayed big → bad proportion.
   Fix: bring text back to a readable size, and tighten the BOXES instead.
   ======================================================================== */
:root { font-size: 14.5px; }

/* Connections — boxes were oversized for the text. Tighten the box, not the text. */
#page-connections .conn-card, #page-connections .conn-card-wrap { padding: 11px 14px; }
#page-connections .conn-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 9px; }
#page-connections .conn-info h3 { font-size: 1rem !important; }
#page-connections .conn-sub { font-size: 0.82rem !important; }
#page-connections .conn-status { font-size: 0.8rem; padding: 4px 10px; }
#page-connections .conn-card .btn,
#page-connections .conn-card button:not(.conn-status) { padding: 7px 14px; font-size: 0.82rem; }
#page-connections .page-head h2 { font-size: 1.5rem; }

/* Section labels across screens a touch bigger so they don't read as tiny */
.section-label { font-size: 0.95rem; }

/* ============================================================================
   CO-BROKE board (2026-08-28) — was one giant single-column photo card.
   Make it a proper grid of compact cards (cover photo on top, price-hero),
   consistent with the Listings/premium card language.
   ======================================================================== */
#cobroke-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#cobroke-list .cobroke-card { padding: 0; overflow: hidden; display: block; }
#cobroke-list .cobroke-card .listing-thumb {
  width: 100%; height: 152px; border-radius: 0; object-fit: cover; display: block; border: none;
  border-bottom: 1px solid var(--line);
}
#cobroke-list .cobroke-card .listing-thumb.placeholder { height: 152px; font-size: 2rem; }
#cobroke-list .cobroke-card .listing-body { padding: 12px 15px 15px; display: flex; flex-direction: column; gap: 5px; }
#cobroke-list .cobroke-card h3 { font-size: 1rem; margin: 2px 0 0; line-height: 1.25; }
#cobroke-list .cobroke-card .listing-meta { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
#cobroke-list .listing-price {
  font-family: var(--serif) !important; font-weight: 560; font-size: 1.35rem; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px;
}
#cobroke-list .pr-rm { color: var(--coral-deep) !important; font-size: 0.6em; font-weight: 600; }
#cobroke-list .pr-mo { color: var(--ink-faint); font-size: 0.5em; font-family: var(--sans); }
#cobroke-list .cobroke-agent { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
#cobroke-list .cobroke-card .badge { align-self: flex-start; }
#cobroke-list .cobroke-card .card-actions { margin-top: 8px; }
#cobroke-list .cobroke-card .card-actions .btn { width: 100%; }

/* ============================================================================
   WIDE-SCREEN BALANCE (2026-08-28) — on a big monitor the content hugged the
   left with a large empty void on the right (reads unbalanced). Centre the
   content column in the space right of the sidebar so margins are even.
   Only kicks in when there's real extra width; narrow screens keep their pad.
   ======================================================================== */
@media (min-width: 1280px) {
  main {
    max-width: none;
    padding-left:  max(32px, calc((100vw - var(--side-w) - 1120px) / 2));
    padding-right: max(32px, calc((100vw - var(--side-w) - 1120px) / 2));
  }
}

/* ============================================================================
   HERO fixes (2026-08-29) — Abigail: "spacing need to be so big???"
   (1) .card-actions was matching [class*="card"] → got a white card bg/shadow
       (the odd white box behind the New-listing button). Strip it.
   (2) Tighten the hero — earlier density rule kept it at 19px. This wins (last).
   ======================================================================== */
.card-actions { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; }
#page-home .hero, #page-home .hero-compact { padding: 13px 22px; }
#page-home .hero .card-actions { margin-top: 0 !important; }

/* .card-menu (kebab wrapper) also matched [class*="card"] → white pill. Strip. */
.card-menu { background: transparent; border: none; box-shadow: none; }

/* .conn-card-main also matched [class*="card"] → nested border/bg = overlapping
   lines inside the connection card. Strip it (2026-08-30). */
#page-connections .conn-card-main { background: transparent; border: none; box-shadow: none; border-radius: 0; }