/* BLX BUILDING DOSSIER: "Headline & Rail"
 *
 * The building-data block used to be five stacked slabs, each with its own
 * background, column width and padding, ~1,000px tall and all one flat weight,
 * so nothing stood out. This gives it a hierarchy instead:
 *
 *   a dark banner carries the two figures a buyer actually opens the page for
 *   (median closing, median rent), and everything else sits quietly beneath it
 *   in three columns.
 *
 * Nothing is hidden, so the per-building content that earns these pages their
 * indexing stays fully visible.
 *
 * Layout is set up by blx-dossier-c.js (it moves the stats block above the rest
 * and wraps the remaining sections in .blx-rail). !important is needed
 * throughout because the original markup carries inline styles.
 */

/* ============ 1 · THE BANNER ============ */
.blx-stats.blx-banner {
  background: var(--blx-ink-deep) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blx-stats.blx-banner .blx-stats-in {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px 40px 22px !important;
  box-sizing: border-box;
}
.blx-stats.blx-banner .blx-stats-h {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--blx-accent-soft) !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
}
/* THE FIGURES ARE A LEDGER ROW, NOT A SENTENCE.
   They used to be `flex: 0 0 auto`, so every cell was exactly as wide as its own
   text and the whole set bunched against the left edge with a ragged right one.
   With six figures that read as a line; with eight it read as a pile.
   Now every cell GROWS to share the width, so the row is divided evenly and
   reaches both edges however many figures a building has, which is between three
   and eight depending on which samples clear MIN_N. The two headline numbers
   take a double share, so they stay the loudest thing in the banner without
   being pinned to a fixed width. */
.blx-stats.blx-banner .blx-stats-grid {
  /* A GRID OF FIXED TRACKS, NOT A FLEX ROW.
     Flexed cells grew to fill whatever line they landed on, so a second row
     holding two figures stretched each of them across half the banner while the
     six above sat in narrow columns. A table does not do that. Six equal tracks
     mean every figure in row two lines up under a figure in row one, which is
     what makes eight numbers read as one instrument rather than a pile.
     A short last row leaves empty tracks, and that is correct: it is a table,
     and buildings carry between three and eight figures depending on which
     samples clear MIN_N. */
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: start !important;
  /* the column gap is the divider now, so it has to be generous enough to read
     as one: 34px is the same rhythm the rail columns use. */
  gap: 24px 34px !important;
  border: 0 !important;
}
.blx-stats.blx-banner .blx-stat {
  background: none !important;
  border: 0 !important;
  /* the headline figures are pulled to the front visually */
  order: 2;
  min-width: 0;
  padding: 0 !important;
}
/* the two headline figures take a double track and lead the row */
.blx-stats.blx-banner .blx-stat.hr-big { order: 1; grid-column: span 2; }
/* NO VERTICAL RULES. I tried them and took them out. `order` moves cells
   visually but :nth-child still counts DOM order, so the rule meant to be
   suppressed on whichever cell opens a row landed on an arbitrary one instead.
   The even tracks and the column gap already do the dividing; a rule that is
   right five times out of eight is worse than no rule. */
.blx-stats.blx-banner .blx-stat-l {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(243, 238, 228, .5) !important;
  font-weight: 500 !important;
  margin: 0 0 3px !important;
}
.blx-stats.blx-banner .blx-stat-v {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  color: var(--blx-panel) !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums;
}
.blx-stats.blx-banner .blx-stat.hr-big .blx-stat-v {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  color: #FFFFFF !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em;
}
.blx-stats.blx-banner .blx-stat-s {
  font-size: .7rem !important;
  color: rgba(243, 238, 228, .45) !important;
  margin-top: 3px !important;
}

/* ============ 2 · THE RAIL ============ */
/* Flex, not grid: a grid reserves a track for a column that renders nothing,
   which left a dead third of the page on buildings whose rental policy has too
   little data to show. Flex lets the remaining columns share the full width. */
.blx-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--blx-line);
  border-bottom: 1px solid var(--blx-line);
}
/* the rental mount is always in the DOM; it only fills in when the API returns
   something trustworthy, so drop it from the row while it is still empty */
#blx-rentpol.blx-railcol:empty { display: none !important; }
.blx-railcol {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--blx-panel) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}
/* every column shares one inner rhythm */
.blx-railcol .blx-spec-wrap,
.blx-railcol > div,
.blx-railcol > .rp-card {
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  box-sizing: border-box;
}

/* one eyebrow for every column */
.blx-railcol .blx-spec-head .k,
.blx-railcol .rp-eyebrow,
.blx-railcol .bld-facts-title {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--blx-accent) !important;
  font-weight: 500 !important;
  margin: 0 0 10px !important;
}
.blx-railcol .blx-spec-head {
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
}
.blx-railcol .blx-spec-head .status { display: none !important; } /* banner already says it */
.blx-railcol .blx-spec-foot { display: none !important; }

/* Building Facts opens with a centred eyebrow ("The rules & the numbers") plus a
   big heading carrying the building name. Drop the eyebrow, collapse the heading
   to its emphasised half, and the column label reads "Building facts" like the
   others. NOTE the compound selector: .bld-facts IS the rail column, so
   ".blx-railcol .bld-facts" (a descendant) never matches. */
.blx-railcol.bld-facts > div > div:first-child {
  text-align: left !important;
  margin: 0 0 10px !important;
}
.blx-railcol.bld-facts > div > div:first-child > div:first-child { display: none !important; }
.blx-railcol.bld-facts h2 { font-size: 0 !important; margin: 0 !important; text-align: left !important; }
.blx-railcol.bld-facts h2 span { font-size: 0 !important; }
.blx-railcol.bld-facts h2 em {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--blx-accent) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: inline-block;
}

/* rows inside a column: label left, value right, dotted rule between */
.blx-railcol .blx-spec-grid,
.blx-railcol .bld-facts-grid,
.blx-railcol .rp-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.blx-railcol .blx-spec-cell,
.blx-railcol .bld-facts-grid > div,
.blx-railcol .rp-cell {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 14px;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px dotted rgb(var(--blx-ink-rgb) / .18) !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}
.blx-railcol .blx-spec-cell:last-child,
.blx-railcol .bld-facts-grid > div:last-child,
.blx-railcol .rp-cell:last-child { border-bottom: 0 !important; }

.blx-railcol .blx-spec-cell .lbl,
.blx-railcol .bld-facts-grid .bfl,
.blx-railcol .rp-l {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgb(var(--blx-ink-rgb) / .6) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.blx-railcol .blx-spec-cell .val,
.blx-railcol .bld-facts-grid .bfv,
.blx-railcol .rp-v {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--blx-ink) !important;
  line-height: 1.35 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* the small print under a facts card is noise in a narrow column */
.blx-railcol .bld-facts-grid .bfs { display: none !important; }
.blx-railcol.bld-facts > div > p { display: none !important; }

/* rental policy: card chrome off, verdict pill up next to the eyebrow */
.blx-railcol > .rp-card {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: none !important;
}
.blx-railcol .rp-top {
  padding: 0 !important; margin: 0 0 10px !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 10px;
}
.blx-railcol .rp-h { display: none !important; }
.blx-railcol .rp-pill { font-size: 10.5px !important; padding: 4px 10px !important; white-space: nowrap; }

/* ============ 3 · THE LINKS LINE ============ */
.bld-links {
  background: var(--blx-panel-3) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--blx-line) !important;
  max-width: none !important;
  text-align: left !important;
  font-size: .86rem !important;
  color: rgb(var(--blx-ink-rgb) / .62) !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  padding-left: max(22px, calc((100% - 1120px) / 2 + 40px)) !important;
  padding-right: max(22px, calc((100% - 1120px) / 2 + 40px)) !important;
}

/* ============ 3b . THE LINKS STRIP, REDESIGNED ============
 * It used to be one sentence of middot-separated links, and the three Walk
 * Score figures sat inside it as bare numbers behind icons, so a reader had to
 * know that a bus glyph means transit. Now the figures are labelled and grouped
 * behind a brass rule on the left, and the three destinations are pills on the
 * right, which is the same label-left value-right logic the spec sheet above
 * already uses.
 *
 * The Redfin attribution stays visible and linked in every state. That is a
 * licence condition, not a design choice, so no rule here may hide it. */
.bld-links.blx-bl {
  background: var(--blx-panel) !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  text-align: left !important;
}
.bld-links.blx-bl .blx-bl-in {
  display: flex;
  /* The two groups sit together in the middle rather than pinned to opposite
     edges. Pushed apart they read as two unrelated strips with a hole between
     them, which is what a 380px gap on a wide screen actually looked like. */
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 56px;
}
.blx-bl-scores {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px 22px;
  border-left: 2px solid var(--blx-accent);
  padding-left: 16px;
}
.blx-bl-sc { display: block; text-decoration: none; }
.blx-bl-scl {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--blx-ink-rgb) / .5);
  margin-bottom: 2px;
}
.blx-bl-scv {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  color: var(--blx-ink);
  font-variant-numeric: tabular-nums;
}
.blx-bl-sc:hover .blx-bl-scv { color: var(--blx-accent); }
.blx-bl-attr {
  align-self: flex-end;
  font-size: .74rem;
  line-height: 1.3;
  color: var(--blx-accent);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--blx-accent-rgb) / .45);
  white-space: nowrap;
}
.blx-bl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.blx-bl-pill {
  border: 1px solid var(--blx-line-2);
  background: #FFFFFF;
  border-radius: 6px;
  padding: 9px 15px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--blx-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease;
}
.blx-bl-pill:hover { border-color: var(--blx-accent); background: var(--blx-panel-11); }

/* Six buildings sit in a neighbourhood that has no page, so their strip names
   it as text rather than linking somewhere wrong. Given the same white pill it
   looked exactly as tappable as the two real destinations beside it, which is
   worse than the old underlined word it replaced: a control that does nothing
   is a broken control. It keeps the row's alignment and loses the chrome. */
span.blx-bl-pill {
  background: transparent;
  border-color: transparent;
  color: rgb(var(--blx-ink-rgb) / .58);
  padding-left: 0;
  padding-right: 4px;
}

/* PHONE. The strip's own phone rule below centres .bld-links and hides its
   direct span children, both written for the old sentence. Neither is wanted
   here, so the redesigned strip opts out and stacks instead: figures first,
   then the pills, each group left aligned on its own row. */
@media (max-width: 640px) {
  .bld-links.blx-bl {
    display: block !important;
    text-align: left !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .bld-links.blx-bl .blx-bl-in {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .blx-bl-scores { gap: 4px 20px; padding-left: 13px; }
  .blx-bl-scv { font-size: 1.42rem; }
  .blx-bl-attr { flex-basis: 100%; white-space: normal; }
  .blx-bl-acts { gap: 7px; }
  /* 10px put the tap target at 41px measured at 386px wide, under the 44px
     the rest of the phone layout holds to. 12px lands it at 45px and the row
     still fits without wrapping. */
  .blx-bl-pill { padding: 12px 13px; font-size: .78rem; }
}

/* ============ 4 · MOBILE ============ */
@media (max-width: 900px) {
  .blx-stats.blx-banner .blx-stats-in { padding: 16px 22px 18px !important; }
  /* a tablet fits four tracks, so the two headline figures fill the first row
     between them and the rest sit two rows of four underneath */
  .blx-stats.blx-banner .blx-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px 24px !important;
  }
  .blx-railcol .blx-spec-wrap,
  .blx-railcol > div,
  .blx-railcol > .rp-card { padding: 15px 22px 16px !important; }
  .bld-links { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ============ 5 · PHONE ============
 * On a 390px screen the banner ran ~250px, and most of that was repetition:
 * six stats each carrying a sub-line ("Last 12 months", "From 30 sales
 * reporting size"). Three changes, no content removed from the page:
 *   a. sub-lines stay only under the two headline figures, where they say
 *      what the median is drawn from; the four secondary stats drop theirs.
 *   b. secondary stats go three-up instead of two-up.
 *   c. tighter padding and row height throughout.
 */
@media (max-width: 640px) {
  .blx-stats.blx-banner .blx-stats-in { padding: 12px 20px 13px !important; }
  .blx-stats.blx-banner .blx-stats-h { margin-bottom: 8px !important; font-size: 10px !important; }
  /* A TWO-COLUMN GRID, not flex. Flexed cells sized themselves to their content,
     so the wide "Price range" pushed the row out of step and left "Closed leases"
     stranded alone on a line. A grid gives every cell the same width and lines
     the rows up, which is the symmetry the page was missing on a phone. */
  .blx-stats.blx-banner .blx-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 11px 18px !important;
    align-items: start !important;
  }
  /* the vertical rule is a desktop device. At two columns it would draw a line
     down the middle of a phone screen, which reads as a table nobody asked for. */
  .blx-stats.blx-banner .blx-stat {
    order: 2;
    padding: 0 !important;
    border-left: 0 !important;
  }

  /* a. THE TWO HEADLINE FIGURES SIT SIDE BY SIDE, one column each.
        They used to inherit the desktop `grid-column: span 2`, so on a phone
        each one took a whole row and the banner ran to 332px measured at 386px
        wide, with most of that height being air above and below two numbers.
        Sharing one row removes a 62px row and its gap. The value drops to
        1.35rem so a seven figure median still fits in half the width, and it is
        allowed to wrap rather than overflow, which is what a long range like
        the asking spread on a new building needs. */
  .blx-stats.blx-banner .blx-stat.hr-big {
    order: 1;
    grid-column: auto !important;
    margin: 0 !important;
  }
  .blx-stats.blx-banner .blx-stat.hr-big .blx-stat-v {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  /* the four secondary stats: same width, no sub-line */
  .blx-stats.blx-banner .blx-stat:not(.hr-big) .blx-stat-s { display: none !important; }
  .blx-stats.blx-banner .blx-stat:not(.hr-big) .blx-stat-v { font-size: .9rem !important; }
  .blx-stats.blx-banner .blx-stat-l { font-size: 9px !important; letter-spacing: .12em !important; }

  /* c. the rail columns: shorter rows, no wasted side padding */
  .blx-railcol .blx-spec-wrap,
  .blx-railcol > div,
  .blx-railcol > .rp-card { padding: 13px 20px 14px !important; }
  .blx-railcol .blx-spec-cell,
  .blx-railcol .bld-facts-grid > div,
  .blx-railcol .rp-cell { padding: 5px 0 !important; }
  .blx-railcol .blx-spec-cell .lbl,
  .blx-railcol .bld-facts-grid .bfl,
  .blx-railcol .rp-l { font-size: 12px !important; }
  .blx-railcol .blx-spec-cell .val,
  .blx-railcol .bld-facts-grid .bfv,
  .blx-railcol .rp-v { font-size: 12.5px !important; }
  /* The links row is written as a sentence ("<Building> is in <hood> · View
     rentals at <Building> · Walk Score"). At 390px that sentence wraps mid
     phrase and the underlines break across lines, which is what made it look
     crooked. On a phone, drop the connecting prose and the middots (every
     direct-child span) and give each link its own line. The links themselves
     are <a> children, so they are untouched, as is the desktop sentence. */
  .bld-links {
    font-size: .82rem !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    gap: 9px;
  }
  .bld-links > span { display: none !important; }
  .bld-links > a { display: block; }
}

/* ============ 6 · THE UNITS BLOCK GETS THE WIDE MEASURE ============
   Measured on a 1512px viewport before this rule: the banner and the similar
   buildings block both ran 196..1316, and the units block ran 156..1356. Forty
   pixels wider on each side is not a decision, it reads as a mistake, and it
   was the only thing on the page that broke the column.

   The fix is not to pull the listings back to 1120. The dossier above is a spec
   sheet, dense tabular data that wants a narrow measure. The units block is
   photography, and it is the commercial point of the page, so it gets the
   generous one. At 1400 the difference from 1120 is large enough to read as
   intentional, and the grid inside lands four cards of ~348px instead of 280.

   The 1200px cap is an inline style on 276 pages, so this has to win on
   specificity. :has() targets the wrapper, which carries no class of its own. */
div:has(> .blx-utabs) {
  max-width: min(1400px, calc(100vw - 96px)) !important;
}
@media (max-width: 900px) {
  div:has(> .blx-utabs) { max-width: none !important; }
}

/* ============================================================
   THE UNITS TOOLBAR (2026-07-31, Naor: "don't like it off to the
   side, make it almost the full width of the page, clean,
   symmetric and designed")

   What was wrong, measured on a 1512px viewport: the column is
   1400px wide and the listing cards below use all of it, but the
   three control rows each hugged the left edge and stopped around
   x=790, so the right half of the block was empty and the section
   read as unfinished next to the cards.

   The fix is layout, not chrome. The tab row becomes four EQUAL
   segments spanning the whole column, so it is symmetric by
   construction rather than by luck, and the two rows under it use
   both edges: counts pinned right against the eyebrow's left, and
   the sort control pushed to the far right of the filter bar.

   CSS only, and deliberately so: the filter bar is rendered by
   blx-building-listings.js after an API call, and the tab panels
   are rewritten by the weekly bake. Touching the DOM here would
   race both of them.
   ============================================================ */
@media (min-width: 901px) {

  /* four equal segments across the full column */
  div:has(> .blx-utabs) > .blx-utabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
  }
  div:has(> .blx-utabs) > .blx-utabs .blx-utab {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 10px !important;
    width: 100%;
    /* a hairline between segments, not around each one, so the row
       reads as one control instead of four floating buttons */
    box-shadow: inset -1px 0 0 var(--line);
  }
  div:has(> .blx-utabs) > .blx-utabs .blx-utab:last-child { box-shadow: none; }
  div:has(> .blx-utabs) > .blx-utabs .blx-utab.on { box-shadow: none; }

  /* The header stays CENTRED (Naor, 2026-07-31: "Units at SLS
     Brickell, put it in the middle"). An earlier version of this
     block left-aligned it, which was fine on the pages where that
     div holds only the small UNITS eyebrow, but many building pages
     put a full headline in the same div and left-aligning threw the
     whole section off balance. Centred heading over a symmetric
     full-width control bar is the balanced reading. */
  div:has(> .blx-utabs) > div[style*="text-align:center"]:first-child {
    margin-bottom: 18px !important;
  }

  /* the counts sit centred under the bar, on the page's axis */
  div:has(> .blx-utabs) > div[style*="text-align:center"]:not(:first-child) {
    text-align: center !important;
    margin: 14px 0 22px !important;
  }

  /* The filter row echoes the tab bar directly above it: one full
     width row split into hairline-divided cells, so the two read as
     a single designed control stack rather than two unrelated rows.

     space-between was tried first and rejected (Naor: "they are
     still far from each other"). It fixes the left-bunching but
     opens two holes in the middle instead, because three groups of
     very different widths cannot distribute evenly on their own.
     Cells solve it because the DIVIDER carries the rhythm, not the
     gap between the controls. */
  .blx-lv-fbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    align-items: center;
    border: 1px solid var(--line, rgb(var(--blx-ink-rgb) / .12));
    border-radius: 999px;
    padding: 0 !important;
    margin-bottom: 22px;
  }
  .blx-lv-fbar > .blx-lv-fg {
    padding: 12px 22px !important;
    /* hairline between cells, none on the outside, same treatment as
       the tab bar */
    box-shadow: inset -1px 0 0 var(--line, rgb(var(--blx-ink-rgb) / .12));
    min-width: 0;
  }
  .blx-lv-fbar > .blx-lv-fg:last-child {
    box-shadow: none;
    /* the sort sits at the right of its own cell so the row ends on
       the column edge, the way the tab bar does */
    justify-content: flex-end;
  }
  .blx-lv-fbar > .blx-lv-fg:nth-child(2) { justify-content: center; }
}

/* Phones keep the centred stack. There the tabs are a 2x2 grid and
   a four-across row would be unreadable, so none of the above
   applies below 901px. */


/* ============================================================
   THE UNITS BLOCK ON A PHONE (2026-08-28, Naor: "this whole part
   does not look professional")

   Measured before anything changed, at 386px: 401 pixels sit
   between the UNITS heading and the first listing card. Half a
   screen of interface before a single home. Three faults, and
   only one of them is height:

   1. THE SAME TWO FACTS ARE STATED THREE TIMES IN A ROW. The tabs
      say For Sale and For Rent. The line under them says "32 for
      sale, 22 for rent". The line under THAT says "32 active
      listings in this building".

   2. THE HIERARCHY IS FLAT. Four identical pills in a 2x2 grid,
      104px of them, and two of the four are archive. Past Sales
      carries exactly the visual weight of the inventory that is
      actually for sale today.

   3. IT IS A DIFFERENT DESIGN LANGUAGE FROM THE REST OF THE PAGE.
      Directly above sits the black banner: flat, edge to edge,
      cells divided by hairlines. Then, with no transition, four
      floating rounded pills. The desktop was given the segmented
      treatment in July and the phone was excluded in as many
      words ("Phones keep the centred stack"), so what is on a
      phone today is simply the older design that nobody revisited.

   The fix is the July desktop language brought down, adapted to
   two columns. One bordered block, hairline dividers, no gaps, so
   the row reads as one control rather than four buttons that
   happen to be near each other.

   CSS ONLY for the frame. The counts inside the tabs are added by
   blx-dossier-c.js, because they have to come from live data.
   ============================================================ */
/* THE DESKTOP TOOLBAR DOES NOT MOVE. Naor approved that layout in July and it
   is not what he asked about. The count and the sub-label are injected into the
   markup at every width, so they are hidden here and shown only on a phone,
   which keeps the desktop tab labels byte for byte what they were. */
.blx-utab-n, .blx-utab-s { display: none; }

@media (max-width: 900px) {
  /* The page's own rule is `@media(max-width:700px){.blx-utabs{...!important}}`,
     inline on every building page. `div:has(> .blx-utabs) > .blx-utabs` is a
     more specific selector, which is how the desktop block above already wins
     against the same inline stylesheet. */
  div:has(> .blx-utabs) > .blx-utabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    border: 1px solid var(--blx-accent);
    border-radius: 10px;
    overflow: hidden;
  }

  div:has(> .blx-utabs) > .blx-utabs .blx-utab {
    border: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    padding: 11px 6px !important;
    font-size: 11px !important;
    letter-spacing: .09em !important;
    line-height: 1.25;
    /* A TAB WITHOUT A COUNT MUST STILL BE COMFORTABLE TO HIT. Only two of the
       335 buildings have no view links to seed a count from, Cloisters on the
       Bay and Palazzo Del Sol, and on those the tabs carry one line instead of
       two. Measured on Palazzo: 36px, where the old floating pill was 47. That
       is a tap target going backwards, and under the 44px guideline. The
       min-height only ever binds on those two. */
    min-height: 44px;
    /* the hairline is BETWEEN cells, never around them */
    box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
  }
  /* right-hand column has nothing to its right */
  div:has(> .blx-utabs) > .blx-utabs .blx-utab:nth-child(2n) {
    box-shadow: inset 0 -1px 0 var(--line);
  }
  /* bottom row has nothing under it. `n+3` is correct for both shapes in the
     tree, counted: 326 pages carry four tabs and 9 carry three. */
  div:has(> .blx-utabs) > .blx-utabs .blx-utab:nth-child(n+3) {
    box-shadow: inset -1px 0 0 var(--line);
  }
  div:has(> .blx-utabs) > .blx-utabs .blx-utab:nth-child(2n):nth-child(n+3),
  div:has(> .blx-utabs) > .blx-utabs .blx-utab.on { box-shadow: none !important; }

  /* THE NINE PAGES WITH THREE TABS GET A FULL WIDTH THIRD CELL rather than a
     hole beside it. An empty half-cell in a two column block is the bento fault
     of leaving a tile blank because the content ran out. */
  div:has(> .blx-utabs) > .blx-utabs .blx-utab:nth-child(3):last-child {
    grid-column: 1 / -1;
    box-shadow: none !important;
  }

  /* THE COUNT, injected by blx-dossier-c.js. It carries .blx-vn, so the live
     widget's own syncCounts finds and refreshes it with no extra code: that
     function already rewrites every .blx-vn for its mode. */
  div:has(> .blx-utabs) .blx-utab-n {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--blx-accent);
  }
  div:has(> .blx-utabs) .blx-utab.on .blx-utab-n { color: #fff; }
  /* the archive sub-label, quieter than a count on purpose: those two tabs are
     reference, not inventory */
  div:has(> .blx-utabs) .blx-utab-s {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .05em;
    color: rgb(var(--blx-ink-rgb) / .42);
  }
  div:has(> .blx-utabs) .blx-utab.on .blx-utab-s { color: rgb(255 255 255 / .62); }

  /* THE VIEW LINKS ROW. Its -14px top margin was written to pull it up under a
     tab grid that had a 30px bottom margin; the block above now ends flush, so
     the negative margin would drag it into the tabs. */
  div:has(> .blx-utabs) > div:has(> a[href$="/for-sale/"]),
  div:has(> .blx-utabs) > div:has(> a[href$="/for-rent/"]) {
    margin: 13px 0 4px !important;
  }
}

/* ============================================================
   LIVING HERE (2026-08-29)

   Written after the first lead this site produced came through
   ChatGPT and the client told us her brief: resort-like
   amenities, a map region around a named members club, and a
   building that "promotes community". Two of her three criteria
   were qualitative and 335 building pages answered neither.

   IT CARRIES ITS OWN CLASS NAMES AND THAT WAS PAID FOR. The first
   version reused the .blx-stats cell classes so the type would
   match the market banner, and three separate scripts key off
   those names: blx-dossier-c.js paints the first .blx-stats as
   the dark banner, bannerEmpty() reads the first one to decide
   whether the banner still needs building, and
   blx-lease-history.js appends its sold-vs-asking and
   list-to-close cells into the first .blx-stats-grid it finds.
   That last one shipped for one deploy, with those two cells
   rendering inside Living here. Matching a look is not a reason
   to share a hook, so the type is restated here instead.

   It sits on the light panel, so the page keeps one dark bar and
   not two.
   ============================================================ */
.blx-lh {
  background: var(--blx-panel);
  border-top: 1px solid var(--blx-rule);
  border-bottom: 1px solid var(--blx-rule);
}
.blx-lh-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 40px 22px;
  box-sizing: border-box;
}
.blx-lh-h {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blx-accent-soft);
  font-weight: 500;
  margin: 0 0 14px;
}
.blx-lh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
}
.blx-lh-cell {
  min-width: 0;
  padding-right: 26px;
  margin-right: 26px;
  box-shadow: inset -1px 0 0 var(--blx-rule);
}
.blx-lh-cell:last-child { box-shadow: none; margin-right: 0; padding-right: 0; }
.blx-lh-l {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--blx-ink-rgb) / .5);
  font-weight: 500;
  margin: 0 0 5px;
}
.blx-lh-v {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blx-ink);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.blx-lh-s {
  font-size: .74rem;
  color: rgb(var(--blx-ink-rgb) / .5);
  margin-top: 4px;
  line-height: 1.45;
}
/* The reading. It reads the ratio printed beside it and says nothing about who
   lives in the building, which is a legal line rather than a style one. */
.blx-lh-note {
  margin: 15px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--blx-rule);
  font-size: .88rem;
  line-height: 1.6;
  color: rgb(var(--blx-ink-rgb) / .72);
  max-width: 70ch;
}

@media (max-width: 900px) {
  .blx-lh-in { padding: 15px 22px 17px; }
}
@media (max-width: 640px) {
  .blx-lh-in { padding: 13px 20px 15px; }
  .blx-lh-h { margin-bottom: 10px; font-size: 10px; }
  /* two up, and the vertical rule goes: at this width it would draw a line down
     the middle of a phone screen, which is the same call the banner makes */
  .blx-lh-grid { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .blx-lh-cell { padding-right: 0; margin-right: 0; box-shadow: none; }
  /* Three figures in two columns leave the third alone with an empty half
     beside it, which is the bento fault of keeping a tile the content ran out
     for. It takes the width instead. */
  .blx-lh-cell:nth-child(3):last-child { grid-column: 1 / -1; }
  .blx-lh-v { font-size: 1rem; }
  .blx-lh-note { margin-top: 13px; padding-top: 11px; font-size: .82rem; }
}


/* Living here as a rail column: the same label-left, value-right dotted rows
   as Specification, with the basis line small underneath each figure. The
   column is three rows tall, shorter than the rail already is, so the block
   costs no scroll at all. */
.blx-railcol.blx-lh { border: 0 !important; }
.blx-railcol.blx-lh .blx-lh-note { display: none !important; }
.blx-railcol.blx-lh .blx-lh-h {
  font-size: 10.5px; letter-spacing: .22em; color: var(--blx-accent);
  margin: 0 0 10px;
}
.blx-railcol.blx-lh .blx-lh-grid { display: block; }
.blx-railcol.blx-lh .blx-lh-cell {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0 14px; padding: 6px 0; margin: 0; box-shadow: none;
  border-bottom: 1px dotted rgb(var(--blx-ink-rgb) / .18);
}
.blx-railcol.blx-lh .blx-lh-cell:last-child { border-bottom: 0; }
.blx-railcol.blx-lh .blx-lh-l {
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: rgb(var(--blx-ink-rgb) / .6); margin: 0; flex: 0 0 auto;
}
.blx-railcol.blx-lh .blx-lh-v { font-size: 13px; font-weight: 500; line-height: 1.35; text-align: right; }
.blx-railcol.blx-lh .blx-lh-s { flex-basis: 100%; margin-top: 1px; font-size: .7rem; line-height: 1.35; }
@media (max-width: 640px) {
  .blx-railcol.blx-lh .blx-lh-grid { display: block; }
  .blx-railcol.blx-lh .blx-lh-cell { padding: 6px 0; }
}

/* deploy nudge 2026-07-31T13:45:05Z */