/* Line models (10/20): the model (line-model.js) with its places listed beside it, on 甲級商廈 and
   家居保安. A name opens to its line when it is shown; without the model (no WebGL, no script) every
   line stays open. From ../building-lab, where five text columns under the model looked untidy to
   the user. */
.lm{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:clamp(32px,4vw,72px);align-items:center;margin-top:clamp(40px,4vw,64px)}

/* No frame: the model stands on the page ground under a soft light that fades before the edges,
   and the picture dissolves at all four sides, so a close view never ends on a cut. */
.ml-stage{position:relative;aspect-ratio:4/3;isolation:isolate;
  background:radial-gradient(closest-side,rgba(40,55,68,.5),rgba(40,55,68,0));
  cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ml-stage.is-dragging{cursor:grabbing}
.ml-stage canvas,.ml-fallback{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.ml-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.ml-stage.is-ready canvas{opacity:1}
/* the render only shows if the model has not come up after a while (no WebGL, script failed) */
.ml-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:lm-fallback .8s ease 3s forwards}
.ml-stage.is-ready .ml-fallback{animation:none;opacity:0}
@keyframes lm-fallback{to{opacity:1}}

/* pins: zero-size anchors moved by line-model.js; the dot sits on the point, the label beside it */
.ml-pins{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s ease .5s}
.ml-stage.is-ready .ml-pins{opacity:1}
.ml-pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;color:#f6f5ef;cursor:pointer;
  pointer-events:auto;transition:opacity .5s ease}
.ml-pin__dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(239,181,46,.9);background:rgba(14,24,32,.78);color:var(--gold);font:500 12px/1 var(--sans,system-ui);
  transition:background-color .4s ease,color .4s ease,scale .4s ease}
.ml-pin__dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(239,181,46,.45);opacity:0}
.ml-stage.is-ready .ml-pin__dot::after{animation:lm-ping 2.4s ease-out 1.6s 2}
@keyframes lm-ping{0%{opacity:.9;scale:.7}100%{opacity:0;scale:1.35}}
.ml-pin__label{position:absolute;left:20px;top:-13px;padding:0 10px;border-radius:999px;white-space:nowrap;font-size:13px;line-height:26px;letter-spacing:.04em;
  background:rgba(14,24,32,.78);transition:opacity .4s ease}
.ml-pin:hover .ml-pin__dot,.ml-pin:focus-visible .ml-pin__dot,.ml-pin.is-hover .ml-pin__dot{background:rgba(239,181,46,.22)}
.ml-pin.is-hidden{opacity:.3}
.ml-stage[data-active] .ml-pin:not(.is-active){opacity:.4}
.ml-stage[data-active] .ml-pin:not(.is-active) .ml-pin__label{opacity:0}
.ml-pin.is-off,.ml-stage[data-active] .ml-pin.is-off{opacity:0;pointer-events:none}
.ml-pin.is-active .ml-pin__dot{background:var(--gold);color:#111e28;scale:1.1}

.ml-reset{position:absolute;right:12px;top:12px;z-index:2;padding:9px 16px;border:1px solid rgba(246,245,239,.22);border-radius:999px;
  background:rgba(14,24,32,.7);color:#f6f5ef;font-size:13px;letter-spacing:.06em;cursor:pointer}
.ml-reset:hover{border-color:var(--gold);color:var(--gold)}

/* the five locations: number and name in a row; the one shown opens to its line */
.lm-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(246,245,239,.12)}
.lm-item{border-bottom:1px solid rgba(246,245,239,.12)}
.lm-item h3{margin:0;font-size:clamp(20px,1.55vw,23px);line-height:1.35}
.lm-item__go{display:flex;align-items:baseline;gap:18px;width:100%;padding:20px 0;border:0;background:none;color:#e9ecef;font:inherit;text-align:left;cursor:pointer;transition:color .3s ease,opacity .4s ease,padding .45s ease}
.lm-item.is-active .lm-item__go,.lm:not(.is-live) .lm-item__go{padding-bottom:12px}
html body .lm-item__no{flex:none;width:20px;font-family:var(--mono)!important;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gold)}
.lm-item__name{flex:1}
/* a small cross that turns into an x when open */
.lm-item__go::after{content:"";flex:none;align-self:center;width:11px;height:11px;color:#7f8b97;
  background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
  transition:rotate .4s ease,color .3s ease}
.lm-item__go:hover,.lm-item.is-hover .lm-item__go{color:#fff}
.lm-item__go:hover::after{color:#f6f5ef}
.lm-item.is-active .lm-item__go{color:var(--gold)}
.lm-item.is-active .lm-item__go::after{rotate:45deg;color:var(--gold)}
.lm.has-active .lm-item:not(.is-active) .lm-item__go{opacity:.55}
.lm-item__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.25,.6,.25,1)}
.lm-item__more>div{overflow:hidden;padding-left:38px}
.lm-item.is-active .lm-item__more,.lm:not(.is-live) .lm-item__more{grid-template-rows:1fr}
/* no negative margin here: the panel clips what overflows it, which cut the tops off this line (user, 10/20) */
.lm-item__kicker{margin:0 0 6px;font-size:12px;letter-spacing:.04em;color:#8d99a5}
.lm-item__more>div>:first-child{padding-top:2px}
/* v3 zeroes the last paragraph's margin in a section; keep room under the open line so nothing sits on the rule */
html body .lm-item__more>div>:last-child{margin-bottom:22px!important}
.lm-item__lead{margin:0 0 22px;font-size:15px;line-height:1.75;color:#b4bdc7}
.lm-item__more .text-link{display:inline-flex;margin:-8px 0 22px}
.lm-note{margin:20px 0 0;font-size:13px;line-height:1.7;color:#8d98a4}

@media(max-width:900px){
  .lm{grid-template-columns:1fr;gap:28px}
  .ml-stage{aspect-ratio:1/1}
}
@media(max-width:650px){
  .ml-pin__label{display:none}
  .ml-reset{right:8px;top:8px}
}
@media(prefers-reduced-motion:reduce){
  .ml-stage.is-ready .ml-pin__dot::after{animation:none}
  .lm-item__more{transition:none}
}