/* CPM Lift — the site's scrollbar (see cpm-lift.js). Native bar hidden site-wide, so scroll locks never shove the page. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

#cpm-lift{--ink:#111617; --soft:rgba(17,22,23,.42); --card:rgba(255,255,255,.94); --cardInk:#111617; --red:#d71120;
  position:fixed; right:14px; top:50%; height:min(54vh,480px); width:44px; transform:translateY(-50%); z-index:9990;
  font-family:Poppins,system-ui,sans-serif; opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); -webkit-user-select:none; user-select:none}
#cpm-lift.is-ready{opacity:1}
#cpm-lift.is-off{display:none}
#cpm-lift.is-dark{--ink:#fff; --soft:rgba(255,255,255,.4); --card:rgba(17,19,21,.9); --cardInk:#fff}
#cpm-lift *{box-sizing:border-box}

/* the shaft */
.cpm-lift__shaft{position:absolute; right:0; top:0; bottom:0; width:44px; cursor:ns-resize; touch-action:none}
.cpm-lift__line{position:absolute; right:12px; top:0; bottom:0; width:1px; background:var(--soft); opacity:.55; transition:opacity .3s}
.cpm-lift__fill{position:absolute; right:12px; top:0; width:1px; height:calc(var(--p,0) * 100%); background:var(--red); opacity:.75}
.cpm-lift__car{position:absolute; right:7.5px; top:calc(var(--p,0) * 100%); width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 3px rgba(215,17,32,.14); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; pointer-events:none}
#cpm-lift:hover .cpm-lift__car,#cpm-lift.is-drag .cpm-lift__car{transform:scale(1.25); box-shadow:0 0 0 5px rgba(215,17,32,.16)}
.cpm-lift__car.is-settle{animation:cpmLiftSettle .55s cubic-bezier(.16,1,.3,1)}
@keyframes cpmLiftSettle{0%{transform:scale(1.25) translateY(0)}35%{transform:scale(1.1,1.35) translateY(2px)}70%{transform:scale(1.3,1.05) translateY(-1px)}100%{transform:scale(1.25)}}

/* floor ticks: true positions on the shaft */
.cpm-lift__floors{position:absolute; inset:0}
.cpm-lift__floor{position:absolute; right:0; width:26px; height:12px; margin-top:-6px; cursor:pointer}
.cpm-lift__floor::after{content:""; position:absolute; right:9px; top:5.5px; width:7px; height:1px; background:var(--soft); transition:width .3s cubic-bezier(.16,1,.3,1),background .3s}
.cpm-lift__floor.is-on::after{width:11px; background:var(--red)}
.cpm-lift__floor.is-g::after{width:11px; height:2px; top:5px; background:var(--ink); opacity:.55}
.cpm-lift__floor.is-hot::after{width:14px; background:var(--red); opacity:1}

/* the directory card: a lift panel beside the shaft, opens as the cursor nears the edge */
.cpm-lift__dir{position:absolute; right:40px; top:50%; transform:translate(10px,-50%); width:max-content; max-width:min(340px,40vw); max-height:84vh; overflow:auto; scrollbar-width:none;
  padding:6px; border-radius:16px; background:var(--card); color:var(--cardInk); box-shadow:0 18px 50px rgba(0,0,0,.14),0 0 0 1px rgba(127,127,127,.12);
  -webkit-backdrop-filter:saturate(1.4); backdrop-filter:saturate(1.4);
  opacity:0; visibility:hidden; transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .25s}
#cpm-lift:hover .cpm-lift__dir,#cpm-lift:focus-within .cpm-lift__dir{opacity:1; visibility:visible; transform:translate(0,-50%); transition-delay:0s}
.cpm-lift__head{padding:8px 12px 8px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.5; white-space:nowrap}
.cpm-lift__rows{display:flex; flex-direction:column; gap:1px}
.cpm-lift__row{display:flex; align-items:center; gap:12px; width:100%; margin:0 !important; padding:7px 14px 7px 12px !important; border:0 !important; border-radius:10px !important;
  background:transparent !important; color:inherit !important; font:500 13px/1.25 Poppins,system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
  text-align:left; text-decoration:none !important; cursor:pointer; box-shadow:none !important; min-height:0 !important; transition:background .18s,color .18s}
.cpm-lift__row span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cpm-lift__row small{flex:none; width:16px; font-size:10px; font-weight:700; letter-spacing:.04em; opacity:.4; font-variant-numeric:tabular-nums; position:relative}
.cpm-lift__row.is-on small{color:var(--red); opacity:1}
.cpm-lift__row.is-on small::before{content:""; position:absolute; left:-8px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--red)}
.cpm-lift__row.is-hot,.cpm-lift__row:focus-visible{background:rgba(127,127,127,.12) !important}
.cpm-lift__row.is-g{margin-top:5px !important; background:var(--red) !important; color:#fff !important}
.cpm-lift__row.is-g small{opacity:.8}
.cpm-lift__row.is-g.is-hot{background:#b80e1b !important}
/* hover catchment: a wider invisible strip so it opens as you approach the edge */
#cpm-lift::before{content:""; position:absolute; right:-14px; top:-30px; bottom:-30px; width:70px}

/* the lift display: level + direction, shows while moving or on hover */
.cpm-lift__disp{position:absolute; right:0; bottom:calc(100% + 14px); display:flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:99px;
  background:var(--card); color:var(--cardInk); box-shadow:0 6px 18px rgba(0,0,0,.08); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(4px); transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.16,1,.3,1); pointer-events:none}
#cpm-lift.is-moving .cpm-lift__disp{opacity:1; transform:none}
#cpm-lift:hover .cpm-lift__disp{opacity:0}
.cpm-lift__arw{font-size:8px; color:var(--red); font-weight:400}
.cpm-lift__lvl{font-size:12px; font-weight:700; letter-spacing:.04em; min-width:15px; text-align:center}
.cpm-lift__info{display:none; font-style:normal; font-size:10px; font-weight:500; letter-spacing:.03em; opacity:.6; white-space:nowrap; max-width:0; overflow:hidden; transition:max-width .4s cubic-bezier(.16,1,.3,1)}
#cpm-lift:hover .cpm-lift__info{max-width:220px; margin-left:2px}

/* phones / tablets: a hairline shaft with the car, nothing to aim at */
@media (max-width:1024px),(pointer:coarse){
  #cpm-lift{right:3px; top:20vh; height:60vh; transform:none; width:8px; pointer-events:none}
  .cpm-lift__shaft{width:8px; cursor:default}
  .cpm-lift__line,.cpm-lift__fill{right:3px}
  .cpm-lift__car{right:0; width:7px; height:7px; margin-top:-3.5px; box-shadow:none}
  .cpm-lift__floors,.cpm-lift__disp,.cpm-lift__dir,#cpm-lift::before{display:none}
  #cpm-lift .cpm-lift__line{opacity:0; transition:opacity .4s}
  #cpm-lift .cpm-lift__car,#cpm-lift .cpm-lift__fill{opacity:0; transition:opacity .4s}
  #cpm-lift.is-moving .cpm-lift__line{opacity:.5}
  #cpm-lift.is-moving .cpm-lift__car,#cpm-lift.is-moving .cpm-lift__fill{opacity:1}
}
@media (prefers-reduced-motion:reduce){ .cpm-lift__car{transition:none} .cpm-lift__car.is-settle{animation:none} }
@media print{#cpm-lift{display:none}}

/* Jamie: "just the visual dots" — no directory card, no level display. A dot per section on a hairline; the red car rides it. */
.cpm-lift__dir{display:none !important}
#cpm-lift::before{width:40px; right:-10px}
.cpm-lift__floor{width:20px; height:14px; margin-top:-7px; right:2px}
.cpm-lift__floor::after,.cpm-lift__floor.is-on::after,.cpm-lift__floor.is-g::after,.cpm-lift__floor.is-hot::after{right:7.5px; top:5px; width:4px; height:4px; border-radius:50%; background:var(--soft); opacity:1;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s}
.cpm-lift__floor.is-on::after{background:var(--ink); opacity:.7}
.cpm-lift__floor.is-hot::after{background:var(--red); transform:scale(1.6)}
.cpm-lift__floor.is-g::after{background:transparent; box-shadow:inset 0 0 0 1px var(--soft)}
.cpm-lift__line{opacity:.35}
/* numbers: 01 at the top counting down; all show on hover, the current one always (faint) */
.cpm-lift__floor::before{content:attr(data-n); position:absolute; right:22px; top:50%; transform:translate(4px,-50%); font:700 9px/1 Poppins,system-ui,sans-serif; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--ink); opacity:0; transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.16,1,.3,1),color .2s; pointer-events:none}
.cpm-lift__floor.is-on::before{opacity:.45; transform:translate(0,-50%); color:var(--red)}
#cpm-lift:hover .cpm-lift__floor::before{opacity:.5; transform:translate(0,-50%)}
#cpm-lift:hover .cpm-lift__floor.is-on::before{opacity:1}
.cpm-lift__floor.is-hot::before{opacity:1 !important; color:var(--red)}
#cpm-lift:hover::before{width:56px}
#cpm-lift:hover .cpm-lift__disp{opacity:0}
.cpm-lift__floor.t-dark{--ink:#fff; --soft:rgba(255,255,255,.45)}
.cpm-lift__floor.t-light{--ink:#111617; --soft:rgba(17,22,23,.4)}
.cpm-lift__line{background:rgba(128,128,128,.55) !important}
