/* community — page-local rules (★#59 M6). Moved verbatim from community.html's inline <style>. Token-only; shared components live in chrome.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Hero map link */
.hero-map-link { display: inline-block; margin-top: 18px; font-size: var(--fs-3); font-weight: 600; }
.section { margin-top: 40px; }
/* R4 dossier: lifted section headings + a quiet kicker (numbered index label) */
.section-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-6); font-weight: 700; letter-spacing: -.025em; color: var(--text); margin: 0 0 8px; }
.section-intro { color: var(--text-muted); font-size: var(--fs-3); line-height: 1.65; margin: 0 0 16px; max-width: 60ch; }
/* R4 materiality: tinted elevation + top light-catch on every card */
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow), var(--highlight); }

/* KPIs — elevated cards, numbers promoted to the display tier (numbers are the hero) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; margin-top: 4px; }
.kpi-box { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 18px 20px 16px; box-shadow: var(--shadow), var(--highlight); }
.kpi-label { font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 13px; }
.kpi-value { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--num-hero); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: var(--fs-1); color: var(--text-muted); margin-top: 11px; }
/* Trend pills — disciplined pos/neg semantics (retires purple-for-up + the off-brand red) */
.trend-up, .trend-dn, .trend-muted { display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-6); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.trend-up { color: var(--pos); }
.trend-dn { color: var(--neg); }
.trend-muted { color: var(--text-muted); font-size: var(--fs-5); }

/* F5 — Price-trajectory card */
.traj-card { display: flex; flex-direction: column; gap: 12px; }
.traj-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.traj-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-4); letter-spacing: -.01em; padding: 7px 16px; border-radius: var(--radius-pill); }
.traj-rising  { color: var(--pos); background: var(--pos-bg); }
.traj-cooling { color: var(--neg); background: var(--neg-bg); }
.traj-steady, .traj-nocall { color: var(--text-muted); background: var(--surface-alt); }
.traj-conf { font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.traj-line { font-size: var(--fs-4); line-height: 1.65; color: var(--text); }
.traj-note { font-size: var(--fs-2); line-height: 1.6; color: var(--text-muted); }
.traj-disc { font-size: var(--fs-1); line-height: 1.55; color: var(--text-subtle); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }

/* F6 — Off-plan vs ready comparator */
.op-card { padding: 0; overflow: hidden; }
/* F16 rents card (★#55, 13 Sep): its 4th column is a gross-yield PERCENT under a two-word header — wider than the
   comparator's 68px "Gap" slot, and neutral rather than the accent (the accent marks the launch-vs-resale gap, a
   different claim). The header may wrap on narrow screens instead of clipping. */
/* R6-4 rent-or-buy arithmetic, inside the rents card */
.rent-or-buy { border-top: 1px solid var(--border); padding: 14px 20px 0; }
.rent-or-buy .op-sub-title { font-size: var(--fs-2); font-weight: 600; margin: 0 0 6px; color: var(--text); }
.rent-or-buy p { margin: 0 0 10px; line-height: 1.55; }
.rent-or-buy .op-foot { border-top: 0; padding: 0 0 12px; }
/* F6 follow-up — By-building breakdown: each building groups its own op-rows under a subheading.
   Separators come from .op-building's border-top + the base .op-row border-top; no :first-of-type
   resets here — .op-head/.op-building-name are the first div of their type, so such a rule would
   never match (it's type-based, not class-based) and the borders it looked like it removed are
   the ones that make the header→building and name→row seams read correctly. */
.op-building { border-top: 1px solid var(--border); }
.op-building-name { font-size: var(--fs-2); font-weight: 700; letter-spacing: .02em; color: var(--text); background: var(--surface-alt); padding: 9px 20px; }
@media (max-width: 560px) {
  .op-building-name { padding: 8px 12px; font-size: var(--fs-1); }
  .kpi-box { padding: 16px 14px 14px; }   /* tighter sides so the affixed hero number clears the card edge in the 2-col grid */
}

/* Community profile */
.prof-desc { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 20px 22px; font-size: var(--fs-3); line-height: 1.72; color: var(--text); margin-bottom: 14px; box-shadow: var(--shadow), var(--highlight); }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prof-tile { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 18px 20px; box-shadow: var(--shadow), var(--highlight); }
.prof-lab { font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.prof-bar { height: 11px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; display: flex; margin-top: 12px; }
.prof-bar > span { display: block; height: 100%; }
.prof-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-2); color: var(--text-muted); margin-top: 12px; }
.prof-big { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--num-lg); font-weight: 700; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prof-sub { font-size: var(--fs-1); color: var(--text-muted); margin-top: 3px; }
/* min-height (was a fixed height): the bar + its 2-line cap can exceed 84px, and a
   fixed height made the overflow ride UP into the "Bedroom mix" label. */
.bed-cols { display: flex; align-items: flex-end; gap: 14px; min-height: 84px; margin-top: 14px; }
.bed-col { flex: 1; text-align: center; }
.bed-fill { border-radius: 4px 4px 0 0; }
.bed-cap { font-size: var(--fs-1); color: var(--text-muted); margin-top: 7px; line-height: 1.3; }
.prof-foot { margin-top: 12px; font-size: var(--fs-1); color: var(--text-subtle); }
@media (max-width: 560px) { .prof-grid { grid-template-columns: 1fr; } }

/* Most-active-buildings league table (promoted to its own dossier section) */
.league { padding: 6px 0; }
.lg-row { display: grid; grid-template-columns: 30px 1fr 1fr auto; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid var(--border); transition: background var(--transition); }
.lg-row:first-child { border-top: none; }
.lg-row:hover { background: var(--surface-alt); }
.lg-rank { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-4); color: var(--accent); font-variant-numeric: tabular-nums; }
.lg-name { font-size: var(--fs-3); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-alt); overflow: hidden; }
.lg-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.lg-count { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-3); font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-count span { color: var(--text-subtle); font-weight: 400; font-size: var(--fs-1); }
@media (max-width: 560px) { .lg-row { grid-template-columns: 26px 1fr auto; padding: 11px 16px; } .lg-bar { display: none; } }

/* Recent transactions */
.tx-list { display: grid; gap: 10px; }
.tx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.tx-card:hover { border-color: var(--accent); box-shadow: var(--shadow), var(--highlight); }
/* Each .tx-card is wrapped by an <a> (see community.js), so the anchor is
   what actually receives keyboard focus; :focus-within on the anchor
   matches the same hover affordance onto its child .tx-card. */
.tx-list a:focus-within .tx-card { border-color: var(--accent); }
.tx-project { font-weight: 600; font-size: var(--fs-3); color: var(--text); }
.tx-meta { font-size: var(--fs-1); color: var(--text-muted); margin-top: 3px; }
.tx-price { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-4); font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tx-ppsf { font-size: var(--fs-1); color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }

/* Dark CTA card (lime action — the lime law) */
.cta-card { background: var(--chrome); border-radius: var(--radius-xl); padding: 30px 28px; text-align: center; box-shadow: var(--shadow-lg); }
.cta-card h3 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-5); font-weight: 700; letter-spacing: -.02em; color: var(--chrome-ink); margin-bottom: 8px; }
.cta-card p { color: var(--chrome-sub); font-size: var(--fs-3); margin-bottom: 20px; }
/* .cta-btn (lime pill) moved to chrome.css — shared with the alerts widget so it
   also styles on results.html (was page-local here → unstyled on results). */

/* Loading-state skeleton (UIUX #31) — approximates the section-title + KPI-row
   layout the real content renders into, instead of a bare text line. */

.community-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; }
.hero-bg-map { position: absolute; inset: 0; z-index: 0; }
.hero-bg-map .leaflet-container { background: var(--surface-alt); filter: contrast(1.04); }
.community-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 22%, color-mix(in srgb, var(--bg) 55%, transparent) 42%, transparent 58%); }
/* Dark: the Esri tiles are darkened by the global tile filter, but they still read
   lighter than --bg, so the scrim carries further right to keep the title + chips
   legible across the full width while the map stays visible on the right. */
:root[data-theme="dark"] .community-hero::before {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, color-mix(in srgb, var(--bg) 72%, transparent) 64%, color-mix(in srgb, var(--bg) 34%, transparent) 84%, transparent 100%); }
.community-hero-inner { position: relative; z-index: 2; }
/* Hero trust chips — solid --surface pills so they read over the map in either theme */
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.htrust-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); font-weight: 600;
  padding: 5px 11px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); box-shadow: var(--shadow-sm); }
.htrust-chip svg { width: 13px; height: 13px; flex: none; }
.htrust-ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, var(--border)); }
@media (max-width: 760px) { .htrust-chip { font-size: var(--fs-1); padding: 4px 9px; } }
.hero-loc-note { position: absolute; right: 14px; bottom: 10px; z-index: 2; font-size: var(--fs-1); color: var(--text-subtle);
  background: color-mix(in srgb, var(--bg) 66%, transparent); padding: 2px 7px; border-radius: 4px; }
@media (max-width: 760px) { .community-hero { min-height: 290px; } }

/* ★#59 M6 — classes that replace this page's static style="" attributes (values unchanged). */
.verify-cta-wrap { max-width: var(--page-max); margin: 0 auto; padding: 14px 20px 0; }
/* ★#59 M6 — classes for the static style="" this page's JS used to build (values unchanged). */
.league-more { margin-top: 14px; font-size: .9rem; }
.prof-bar.is-type { margin-top: 11px; }
.bed-cap b { color: var(--text); }