/* ============================================================
   MULTI-BUILDING COMPLEXES (2026-10-20): the complex page /condos/<complex>/
   and the "part of" pieces on its buildings' pages. Loaded after
   building.css, only on those pages (scripts/build-condo-pages.mjs,
   CX_CSS_V). Tokens only, no raw colors.
   .b-cx-link        hero: "Part of <complex> · N buildings" above the H1
   .b-h1-addr        the building's address inside its H1
   .b-sisters        under the strip: every building of the complex, this one marked
   .b-cx-bldgs       complex page: .b-cx-top = the section head | .b-cx-map (satellite +
                     numbered pins), then .b-cx-table (kit .k-table, cards on phones)
   .b-cx-src         complex page read: how the buildings are grouped
   .b-cx-faq         complex page questions (details)
   ============================================================ */

/* ---------- building pages ---------- */
.b-cx-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.86); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.b-cx-link b { color: var(--amber); font-weight: 700; }
.b-cx-link .arr { color: var(--amber); transition: transform .15s ease; }
.b-cx-link:hover, .b-cx-link:focus-visible { border-color: var(--amber); background: rgba(255,255,255,.06); }
.b-cx-link:hover .arr { transform: translateX(3px); }
.b-hero .b-cx-link + h1 { margin-top: 14px; }
.b-h1-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-h1-addr { display: block; margin-top: .22em; font-size: .46em; line-height: 1.15; letter-spacing: -.015em; font-weight: 700; color: rgba(255,255,255,.72); }

.b-sisters { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.b-sisters-in { display: flex; align-items: center; gap: 18px; padding-block: 12px; min-width: 0; }
.b-sisters-k { flex: none; margin: 0; font-size: 13px; font-weight: 700; }
.b-sisters-k a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.b-sisters-k .arr { text-decoration: none; }
.b-sisters-list { display: flex; gap: 8px; margin: 0; padding: 2px 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.b-sisters-list li { flex: none; }
.b-sisters-list a, .b-sisters-list .is-cur { display: grid; gap: 1px; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--k-surface, var(--paper)); color: var(--ink); text-decoration: none; white-space: nowrap; }
.b-sisters-list a:hover, .b-sisters-list a:focus-visible { border-color: var(--amber-deep); }
.b-sisters-list b { font-size: 13px; font-weight: 700; }
.b-sisters-list a > span, .b-sisters-list .is-cur > span { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.b-sisters-list .is-cur { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--amber); }

/* ---------- the complex page: the buildings ---------- */
.b-cx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(20px, 3vw, 40px); align-items: end; margin-bottom: clamp(20px, 2.5vw, 28px); }
.b-cx-top .k-head { margin-bottom: 0; }
.b-cx-map { margin: 0; min-width: 0; }
.b-cx-map-box { --k: .74; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--hairline); border-radius: 14px; background: var(--term-panel); }
.b-cx-map-box .sat { position: absolute; transform: scale(var(--k)); }
.b-cx-map-box .sat img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.b-cx-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--paper), 0 2px 8px rgba(0,0,0,.5); transform: translate(-50%, -50%) scale(calc(1 / var(--k))); }
.b-cx-map .k-note { margin-top: 8px; font-size: 11.5px; }
.b-cx-table .k-table td small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.b-cx-table .k-table tfoot td { border-top: 2px solid var(--hairline); }
.b-cx-bldgs .k-note { margin-top: 14px; }

/* ---------- the complex page: the read's aside, questions ---------- */
.b-cx-src .b-dd-list { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.b-cx-src .b-dd-list li + li { margin-top: 8px; }
.b-cx-src .k-note { margin-top: 12px; font-size: 12px; }
.b-cx-qa { display: grid; gap: 10px; max-width: 54em; }
.b-cx-qa details { border: 1px solid var(--hairline); border-radius: 12px; background: var(--k-surface, var(--paper)); }
.b-cx-qa summary { padding: 14px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.b-cx-qa details[open] summary { border-bottom: 1px solid var(--hairline); }
.b-cx-qa p { margin: 0; padding: 12px 18px 16px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 900px) {
  .b-cx-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .b-cx-map { max-width: 560px; }
  .b-cx-map-box { aspect-ratio: 16 / 11; }
}
@media (max-width: 640px) {
  .b-sisters-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .b-cx-map-box { --k: .5; }
}
/* phones: the kit turns table rows into cards; here each building is one compact card: number, address,
   then residences, for sale, for rent (floors and the sales counts stay on the building's own page) */
@media (max-width: 700px) {
  .b-cx-table .k-table:not(.is-scroll) tfoot { display: block; }
  .b-cx-table .k-table:not(.is-scroll) tr { grid-template-columns: 26px repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 12px; margin-bottom: 6px; }
  .b-cx-table .k-table:not(.is-scroll) td:first-child { grid-column: 1; grid-row: 1 / span 2; font-weight: 800; color: var(--ink); }
  .b-cx-table .k-table:not(.is-scroll) td.k-td-main { grid-column: 2 / -1; }
  .b-cx-table .k-table:not(.is-scroll) td:nth-child(4), .b-cx-table .k-table:not(.is-scroll) td:nth-child(7), .b-cx-table .k-table:not(.is-scroll) td:nth-child(8) { display: none; }
  .b-cx-table .k-table:not(.is-scroll) td::before { font-size: 9.5px; }
  .b-cx-table .k-table tfoot td { border-top: 0; }
}