/* Comparison on the deal stage (7 Oct): a flywheel seen from a little above. The properties stand on its rim in order
   of nightly rate; the one at the front is the live 3D model. Click another and the whole wheel turns until that
   one is at the front, then its picture melts into the live model. Loaded after displays.css and rel.css. */
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.cp-view { --mt: 84px; position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent calc(var(--mt) - 14px), #000 var(--mt), #000 calc(100% - 80px), transparent calc(100% - 66px)); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent calc(var(--mt) - 14px), #000 var(--mt), #000 calc(100% - 80px), transparent calc(100% - 66px)); -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 1439px) { .cp-view { --mt: 122px; } }  /* below that width the deal's title sits on its own line */
.cp { position: absolute; left: 50%; top: calc(50% + 4px); width: 0; height: 0; }
.cp-dot { --a: var(--a1); position: absolute; left: -2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #c9c5b9; transform: translate(calc(sin(var(--a)) * var(--rx)), calc((cos(var(--a)) - 1) * var(--ry))); opacity: clamp(0, cos(var(--a)) * 2.4 + .35, 1); animation: cpturn .9s cubic-bezier(.3, .7, .15, 1) both; }
.cp-t { --a: var(--a1); --c: max(0, cos(var(--a))); --f: calc(12.5 * max(0, cos(var(--a)) - .92)); --b: calc(.36 + .6 * var(--c)); --s: calc(var(--b) + (var(--s0) - .96) * var(--f));  /* --f is 1 at the front and 0 from the first neighbour on: the front picture grows to the live model's size */ position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink, #0c1d33); text-align: left; cursor: pointer; pointer-events: auto;
  transform: translate(calc(sin(var(--a)) * var(--rx)), calc((cos(var(--a)) - 1) * var(--ry))); opacity: clamp(0, cos(var(--a)) * 2.4 + .6, 1); animation: cpturn .9s cubic-bezier(.3, .7, .15, 1) both; }
@keyframes cpturn { from { --a: var(--a0); } to { --a: var(--a1); } }
.cp-t.far { pointer-events: none; }
.cp-t:focus-visible .cp-lab { outline: 2px solid var(--blue, #1439c6); outline-offset: 3px; }
.cp-img { position: absolute; left: calc(var(--pw) * -.5); top: calc(var(--pw) * -.34); width: var(--pw); height: calc(var(--pw) * .68); transform: scale(var(--s)); }
/* A picture has wide empty margins: only the building itself (and the label) takes the click, so a big picture never swallows a neighbour's */
.cp-img, .cp-img img { pointer-events: none; }
.cp-hit { position: absolute; left: 22%; right: 22%; top: 18%; bottom: 12%; pointer-events: auto; }
.cp-t.mid .cp-hit, .cp-t.far .cp-hit { pointer-events: none; }
.cp-img::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 34%; background: radial-gradient(ellipse at center, rgba(28, 34, 48, .14), rgba(28, 34, 48, 0) 70%); }
.cp-img img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.25); transition: transform .2s; }
.cp-t:not(.mid):hover .cp-img img { transform: scale(1.25) translateY(-3%); }
.cp-lab { position: absolute; left: -104px; top: 0; width: 208px; box-sizing: border-box; display: grid; gap: 3px; padding: 11px 14px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); transform: translateY(calc((var(--pw) * .34 * var(--b) + 12px) * (1 - var(--f)) + var(--ld) * var(--f)));  /* under its picture; at the front, under the live model */ opacity: clamp(0, (cos(var(--a)) - .6) * 6, 1); transition: box-shadow .15s; }
.cp-t:not(.mid):hover .cp-lab { box-shadow: inset 0 0 0 1px var(--ink-2, #3c4a5c); }
.cp-lab em { font: 500 15.5px/1.25 var(--serif, Georgia, serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-lab > span { font-size: 12.5px; color: var(--ink-2, #3c4a5c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-lab > span b { font-weight: 600; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; }
.cp-lab i { justify-self: start; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 8px; border-radius: 6px; background: #f1efe8; color: var(--ink-2, #3c4a5c); }
.cp-lab i.up { background: #fbf1df; color: #8a5200; } .cp-lab i.dn { background: var(--blue-soft, #eef1ff); color: var(--blue, #1439c6); } .cp-lab i.me { background: var(--blue, #1439c6); color: #fff; }
/* The front of the wheel: the live model stands here. Its picture covers it while the wheel turns and while the
   model loads, then melts away to show the model underneath: one dissolve, never two half-faded things at once. */
.cp-t.mid { cursor: default; }
.cp-t.mid .cp-img::before { opacity: 0; }
.cp-t.mid .cp-img img { opacity: 0; transition: opacity .7s ease .1s; }
#mappane.cp-turn .cp-t.mid .cp-img img, #mappane:has(#ddStage model-viewer.swap) .cp-t.mid .cp-img img { opacity: 1; transition: none; }
.cp-t.mid .cp-lab { box-shadow: inset 0 0 0 1px var(--ink-2, #3c4a5c); }
#mappane:has(.dd[data-view="cmp"]) #ddStage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) #ddStage model-viewer, #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: scale(.56) !important; transition: none !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap, #mappane.cp-turn:has(.dd[data-view="cmp"]) .dd-stage model-viewer { opacity: 0 !important; transform: scale(.56) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage::before { opacity: 0; }

/* With the map behind instead of the model: the same properties as one ranked list in a card */
.cq { position: absolute; z-index: 2; top: 96px; right: 24px; bottom: 80px; width: min(540px, calc(100% - 48px)); display: flex; flex-direction: column; pointer-events: auto; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); color: var(--ink, #0c1d33); overflow: hidden; }
.cq header { display: grid; gap: 3px; padding: 20px 24px 16px; }
.cq header small { font-size: 12px; letter-spacing: .01em; color: var(--ink-2, #3c4a5c); }
.cq header strong { font: 500 34px/1.1 var(--serif, Georgia, serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cq header span { font-size: 13px; color: var(--ink-2, #3c4a5c); }
.cq-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; }
.cq-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) 52px 62px; gap: 12px; align-items: center; height: 34px; padding: 0 12px; border-radius: 9px; }
.cq-row.on { background: #f4f2ec; }
.cq-row span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-row.me span { font-weight: 600; }
.cq-row i { height: 6px; border-radius: 3px; background: #f1efe8; overflow: hidden; }
.cq-row i u { display: block; height: 100%; border-radius: 3px; background: #d5d1c6; }
.cq-row.plan i u { background: #b9c3d6; } .cq-row.me i u { background: var(--blue, #1439c6); }
.cq-row b { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cq-row em { font-style: normal; font-size: 12px; color: var(--mute, #6b7584); text-align: right; white-space: nowrap; }
.cq footer { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 13px 24px 15px; box-shadow: inset 0 1px 0 var(--line, #e4e2da); font-size: 12px; color: var(--ink-2, #3c4a5c); }
.cq footer span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; background: #d5d1c6; }
.cq footer .plan::before { background: #b9c3d6; } .cq footer .me::before { background: var(--blue, #1439c6); }
@media (max-width: 1180px) { .cp-lab { left: -84px; width: 168px; padding: 9px 12px 10px; } .cp-lab em { font-size: 14px; } .cp-lab > span { font-size: 12px; } }  /* a narrow stage: slimmer labels, so they clear the model in the middle */
@media (prefers-reduced-motion: reduce) { .cp-t, .cp-dot { animation: none; } .cp-t.mid .cp-img img { transition: none; } }

/* Account foot of the sidebar: your name and Sign out. */
.side-out { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 2px 0 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.side-out span { min-width: 0; font-weight: 600; }
.side-out button { flex: none; border: 0; border-radius: 8px; background: none; padding: 7px 10px; font: 600 13px/1 Manrope, system-ui, sans-serif; color: var(--mute); cursor: pointer; }
.side-out button:hover { background: rgba(28, 34, 48, .05); color: var(--ink); }
body.member [data-share-open], body.member .cc-desk { display: none !important; }

/* Relationships: the type tabs sit beside the "who to show" tabs; search stays on the right. */
.r2-filters .r2-kinds { margin-right: auto; }
.r2-filters .r2-kinds[hidden] { display: none; }
@media (max-width: 1180px) { .r2-filters { flex-wrap: wrap; } }
/* One tab is not a choice: the "who to show" row is only there when there is more than Everyone. */
.r2-filters .r2-tabs[hidden] { display: none; }
/* Who this is and why we are contacting them: two quiet lines under the name. */
.r2-panel .r2-brief { margin: 14px 0 2px; max-width: 68ch; font: 400 14.5px/1.55 var(--sans, Manrope, sans-serif); color: var(--ink-2); }
/* Phone: when there are more markets than fit, the switch scrolls sideways inside the card instead of running off it. */
@media (max-width: 820px) { .r2-markets:not([hidden]) { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .r2-markets::-webkit-scrollbar { display: none; } .r2-markets button { flex: 1 0 auto; } }