/* Compare Buildings (compare.html): the building and its set, the table, the dropdowns and the Pro paywall. */
.cmp>.cx-steps,.cmp>.cmp-table,.cmp>.cx-body{max-width:none}
.cmp-dek{max-width:70ch!important}
.cx-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px 48px;padding:4px 0 20px;border-bottom:1px solid var(--rule)}
@media (max-width:760px){.cx-steps{grid-template-columns:1fr}}
.cx-step.off{opacity:.5}
.cx-step h2{margin:0 0 8px;padding:0;border:0;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx-k{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cx-k:empty{display:none}
.cx-step h2 .cx-k{margin-left:6px}
.cx-name{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font:700 24px/1.2 var(--display)}
.cx-name a{color:var(--ink)}
.cx-sub{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cx-change{border:0;background:none;padding:0;color:var(--accent);font:500 13px var(--sans);text-decoration:underline;cursor:pointer}
.cmp .cmp-find{max-width:none}
#cx-find2[hidden]{display:none}
.cx-set{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cx-set:empty{display:none}
.cx-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border:1px solid var(--rule-strong);border-radius:999px;font:500 14px var(--sans)}
.cx-chip button{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer}
.cx-chip button:hover{background:var(--chip);color:var(--ink)}
.cx-count{align-self:center;font-size:13px;color:var(--muted);padding-left:4px}
.cx-sugg{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.cx-sugg:empty{display:none}
.cx-add{border:1px dashed var(--rule-strong);border-radius:999px;background:none;color:var(--accent);padding:4px 10px;font:500 13px var(--sans);cursor:pointer}
.cx-add:hover{border-style:solid;border-color:var(--accent)}
.cmp-table{margin-top:0}
.cx-body{margin-top:28px}
.cx-nav a{font-size:14px;padding:7px 12px}
.cx-navlock{color:var(--muted)!important}
.cx-sec th{scroll-margin-top:calc(var(--head-h,77px) + var(--cx-thead,0px) + 8px)}
#sec-pro{scroll-margin-top:calc(var(--head-h,77px) + 16px)}
.cx-table{width:100%;table-layout:fixed}
.cx-table th,.cx-table td{overflow-wrap:anywhere;white-space:normal}
.cx-table .cx-c0{width:auto}
.cx-table .cx-c1,.cx-table .cx-c2{width:24%}
.cx-table .cx-c3{width:104px}
.cx-table th,.cx-table td{padding-top:9px;padding-bottom:9px}
.cx-table .pr-this{padding-right:16px}
.cx-table td:not(.num){font-size:14px}
.cx-table thead th{text-transform:none;letter-spacing:0;color:var(--ink);font:600 14px/1.3 var(--sans);vertical-align:bottom}
.cx-table thead th a{color:inherit}
.cx-table thead .pr-sub{font-weight:400;display:block;white-space:normal}
.cx-table thead .cx-k{display:block;margin-bottom:2px}
.cx-sec th{padding-top:20px!important;font:600 11.5px/1.3 var(--sans)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--muted)!important;border-bottom:1px solid var(--rule-strong)}
.cx-lockwrap{position:relative;min-height:260px}
.cx-blur{filter:blur(2.5px);user-select:none;pointer-events:none}
.cx-paywall{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 24px));box-sizing:border-box;padding:22px 20px 20px;border:1px solid var(--accent);border-radius:6px;background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft),0 12px 32px rgba(19,32,27,.12);text-align:center}
.cx-pw-k{margin:0 0 4px;font:600 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cx-pw-h{margin:0 0 6px;font:700 20px/1.25 var(--display);color:var(--ink)}
.cx-pw-s{margin:0 auto 14px;max-width:440px;font-size:14px;line-height:1.45;color:var(--muted)}
.cx-pw-go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font:600 15px var(--sans);text-decoration:none}
.cx-pw-go:hover{background:var(--accent-hover)}
.cx-pw-in{display:block;margin-top:10px;font-size:13.5px;color:var(--accent)}
.cx-pw-pro{display:block;margin-top:12px;font:600 14.5px var(--sans);color:var(--accent)}
@media (max-width:600px){.cx-table .cx-c0{width:36%}.cx-table .cx-c1,.cx-table .cx-c2{width:auto}.cx-table .cx-c3{width:64px}.cx-table th,.cx-table td{padding:8px 6px;font-size:13px}.cx-table .pr-pill{padding:2px 6px;font-size:11px}.cx-table thead th{font-size:12.5px}.cx-lockwrap{min-height:300px}}
#cx-pick1[hidden],#cx-subject[hidden]{display:none}
.cx-step h2{display:flex;align-items:center;gap:10px}
.cx-clear{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.cx-more{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;border-bottom:1px dashed var(--rule-strong)}
.cx-more:hover,.cx-more[aria-expanded="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.cx-more::after{content:" ▾";font-size:10px;color:var(--muted)}
.cx-more[aria-expanded="true"]::after{content:" ▴"}
.cx-popcell{position:relative}
.cx-pop{position:absolute;z-index:5;right:12px;top:calc(100% - 6px);width:max-content;min-width:240px;max-width:min(360px,80vw);max-height:320px;overflow:auto;padding:6px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);box-shadow:0 10px 28px rgba(19,32,27,.14);text-align:left}
.cx-pop ul{list-style:none;margin:0;padding:0}
.cx-pop li{display:flex;justify-content:space-between;gap:20px;padding:6px 0;border-bottom:1px solid var(--rule);font:400 13.5px/1.35 var(--sans)}
.cx-pop li:last-child{border-bottom:0}
.cx-pop li a{color:var(--ink);text-decoration:none}
.cx-pop li a:hover{text-decoration:underline}
.cx-pop li>span{font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-facts{text-align:right}
.cx-grp{display:block;font-size:13.5px;line-height:1.5}
.cx-grp b{font-weight:600;margin-right:4px}
@media (max-width:600px){.cx-facts{text-align:left}}
.cx-note{margin-left:8px;font:400 12px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
a.cx-note{color:var(--accent)}
.cx-table td.cx-text{white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.4}
.cx-table td.cx-facts{white-space:normal}
.cx-pop li>span{white-space:normal;text-align:right;max-width:60%}
/* Three buildings or fewer: a column each, equal widths. */
.cx-cols .cx-c0{width:30%}
.cx-cols thead .pr-sub{font-size:12px}
/* A cited figure: a dotted underline, and on hover or keyboard focus a note naming the page it's read from (a figure
   with a page links to it). On a phone, and inside a figure's dropdown, the note sits along the bottom of the screen. */
.cx-cite{position:relative;display:inline-block;color:inherit;text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px;text-decoration-thickness:1px;cursor:help;outline-offset:2px}
a.cx-cite{cursor:pointer;text-decoration-style:solid}
.cx-table a.cx-cite.nt::after{content:none} /* the note says it opens the page; no arrow on every figure */
.cx-cite:hover,a.cx-cite:focus-visible{color:var(--accent)}
.cx-cite .cx-abs{text-decoration:none}
.cx-tip{display:none;position:absolute;z-index:8;right:0;bottom:calc(100% + 6px);width:max-content;max-width:280px;padding:8px 11px;border-radius:6px;background:var(--ink);color:var(--ground);box-shadow:0 6px 18px rgba(0,0,0,.18);font:500 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;overflow-wrap:break-word;pointer-events:none}
.cx-tip q{display:block;margin-top:4px;font-weight:400;font-style:italic;opacity:.85}
.cx-tip-go{display:block;margin-top:4px;font-weight:400;opacity:.7}
.cx-cite:hover .cx-tip,span.cx-cite:focus .cx-tip,.cx-cite:focus-visible .cx-tip{display:block}
.cx-pop .cx-tip{position:fixed;left:16px;right:16px;bottom:16px;max-width:none;width:auto}
@media (max-width:600px){.cx-tip{position:fixed;left:16px;right:16px;bottom:72px;max-width:none;width:auto}}
/* A missing figure: the dash, with what it means on hover; the legend under the table says the default. */
.cx-na{color:var(--muted);cursor:help}
.cx-legend{margin:10px 0 0;font-size:13px}
.cx-legend b{font-weight:600;margin-right:2px}
.cx-sources{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;line-height:1.5;color:var(--muted)}
.cx-sources p{margin:0 0 6px;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cx-sources ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px}
.cx-sources li{display:contents}
.cx-sources .cx-sn{color:var(--faint);font-variant-numeric:tabular-nums}
.cx-sources .cx-sb{color:var(--ink);font-weight:500}
.cx-sources a{color:var(--muted)}
.cx-sources a:hover{color:var(--accent)}
.cx-fn{margin-left:2px;font-size:10px;line-height:0;vertical-align:super}
.cx-fn a{color:var(--accent);text-decoration:none;font-weight:600;padding:0 1px}
@media (max-width:600px){.cx-sources ol{grid-template-columns:auto 1fr}.cx-sources li > span:last-child{grid-column:2}}
.cx-cols thead th,.cx-cols thead th a{white-space:normal;overflow-wrap:break-word;word-break:normal}
@media (max-width:600px){.cx-cols .cx-c0{width:25%}.cx-cols thead th{font-size:11.5px!important}.cx-cols th,.cx-cols td{font-size:12.5px;padding-left:4px;padding-right:4px}.cx-cols thead .pr-sub{display:none}.cx-cols tbody th{font-size:12px!important}}
.cx-abs{display:block;font:400 12px var(--sans);color:var(--muted);margin-top:2px}
/* The building names stay in view under the site header as the table scrolls (under the section strip on phones). */
.cx-table thead th{position:sticky;top:var(--head-h,77px);z-index:4;background:var(--ground);box-shadow:inset 0 -1px 0 var(--ink)}

@media (max-width:720px){.cx-table thead th{top:calc(var(--head-h,77px) + 52px)}}
.cx-table tbody th{overflow-wrap:break-word;word-break:normal;hyphens:auto}
/* This building's column: a neutral tint, not the brand's red, so it reads as "yours", not as a warning. */
.cx-table{--cx-this:color-mix(in srgb,var(--ink) 6%,var(--ground))}
.cx-table .pr-this,.cx-table thead th.pr-this{background:var(--cx-this);color:var(--ink)}
.cx-table thead .pr-this a,.cx-table thead .pr-this .cx-k{color:var(--ink)}
/* The left menu starts level with the first row, under the building names, and stays below them when they stick. */
.cx-nav{margin-top:var(--cx-thead,0px);top:calc(var(--head-h,77px) + var(--cx-thead,0px) + 12px)}
@media (max-width:720px){.cx-nav{margin-top:0;top:var(--head-h,77px)}}
.cx-pw-price{margin:0 0 6px!important;font:600 15px var(--sans)!important;color:var(--ink)!important}
.cx-pw-price s{margin-right:4px;font-weight:400;color:var(--muted);text-decoration-thickness:1.5px}
.cx-pw-spots{display:block;margin-top:2px;font:500 12.5px var(--sans);color:var(--accent)}

/* This building's pill: where its figure sits against the others (CmpTable.rank). */
.cx-table td .cx-rank{display:table;margin:4px 0 0 auto;font-size:11px;padding:2px 7px}
.cx-mid{position:absolute;top:12px;width:2px;height:16px;margin-left:-1px;background:var(--ink)}
.cx-mid b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:1px;font:500 11px var(--mono);color:var(--ink);white-space:nowrap}
.cx-rnone{position:absolute;top:9px;left:6px;font:12px var(--sans);color:var(--faint)}
.cx-sax{min-height:0}
.cx-sax .cx-trk{height:16px;border-top:1px solid var(--rule-strong)}
.cx-sax i{position:absolute;top:3px;white-space:nowrap;transform:translateX(-50%);font:400 10.5px var(--mono);color:var(--faint);font-style:normal}
.cx-sax i:first-child{transform:none}
.cx-sax i:last-child{transform:translateX(-100%)}
@media (max-width:600px){.cx-sr,.cx-sax{grid-template-columns:76px 1fr;gap:8px}.cx-srn{font-size:11.5px}.cx-table tr.cx-chartrow td{padding:8px 4px 4px}}