/* Longevity Residence (tur.html · concept): painted floor plan under the panorama, longevity element markers, info card. 30 Sep 2026. */

/* ---------- panorama: longevity element markers (gold-outlined diamond + glow; different from the round glass navigation dots) */
.tr-el{display:block;width:44px;height:44px;padding:0;border:0;background:none;color:#fff6dc;-webkit-tap-highlight-color:transparent}
.tr-gem{position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:6px;transform:rotate(45deg);border:1.5px solid #e2c98f;
  background:radial-gradient(circle at 40% 35%,#ffe9b559,#3a2a0e8f 85%);
  box-shadow:0 0 0 1px #171106a6,0 0 12px 2px #e2c98f80,inset 0 0 7px #ffe3a04d;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .22s ease,box-shadow .22s ease}
.tr-gem::after{content:"";position:absolute;inset:-4px;border-radius:9px;border:1px solid #e2c98f8c;opacity:0;animation:tr-glow 4.2s ease-in-out infinite;animation-delay:var(--pd,0s);pointer-events:none}
.tr-gem-i{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg)}
.tr-gem-i svg{width:14px;height:14px;stroke-width:1.6;filter:drop-shadow(0 1px 1.5px #150e03b3)}
@keyframes tr-glow{0%,100%{opacity:0;transform:scale(1)}45%{opacity:.85;transform:scale(1.1)}}
.tr-el:hover .tr-gem,.tr-el:focus-visible .tr-gem,.tr-el[aria-expanded=true] .tr-gem{transform:rotate(45deg) scale(1.12);box-shadow:0 0 0 1px #171106bf,0 0 18px 4px #e2c98fa6,inset 0 0 9px #ffe3a073}
.tr-el:focus-visible{outline:none}
.tr-el:focus-visible .tr-gem{outline:2px solid #fff;outline-offset:4px}
.tr-eltag{position:absolute;left:50%;top:calc(100% - 3px);margin-left:var(--lx,0px);transform:translate(-50%,-3px);opacity:0;pointer-events:none;white-space:nowrap;
  font-size:13px;line-height:1;font-weight:600;letter-spacing:.07em;font-variant-caps:all-small-caps;color:#f8ebc7;background:#2b200cdb;padding:6px 11px 7px;border-radius:6px;
  border:1px solid #e2c98f8f;box-shadow:0 3px 12px #08141959;transition:opacity .18s ease,transform .18s ease}
.tr-el.is-label .tr-eltag{opacity:1;transform:translate(-50%,0)}
.tr-el.is-above .tr-eltag{top:auto;bottom:calc(100% - 3px);transform:translate(-50%,3px)}
.tr-el.is-above.is-label .tr-eltag{transform:translate(-50%,0)}

/* ---------- info card (one at a time, always inside the stage / viewport) */
.tr-elcard{position:absolute;z-index:9;left:0;top:0;width:min(330px,calc(100% - 20px));padding:14px 16px 14px;border-radius:14px;background:#fffefaf5;color:#234759;border:1px solid #e2c98f;
  box-shadow:0 14px 40px #08141973,0 0 0 1px #ffffff40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:14px;line-height:1.45;cursor:default;touch-action:auto;user-select:text;-webkit-user-select:text}
.tr-elcard:focus{outline:none}
.tr-elcard-top{display:flex;align-items:center;gap:10px;margin:0 -4px 6px 0}
.tr-elcard-gem{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;transform:rotate(45deg) scale(.82);border:1.5px solid #b08d4f;background:linear-gradient(135deg,#fff3cf,#f1dca6);color:#6d4f1c}
.tr-elcard-gem svg{width:17px;height:17px;transform:rotate(-45deg);stroke-width:1.7}
.tr-elcard-kind{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7a5a24;padding:3px 9px;border:1px solid #d8bd85;border-radius:999px;background:#fbf3dd}
.tr-elcard-x{margin-left:auto;width:44px;height:44px;margin-top:-8px;margin-right:-10px;border:0;border-radius:50%;background:transparent;color:#234759;display:grid;place-items:center}
.tr-elcard-x:hover{background:#2347590f}
.tr-elcard-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;fill:none}
.tr-elcard h3{margin:0 0 6px;font:400 19px/1.2 Georgia,'Times New Roman',serif;color:#234759}
.tr-elcard p{margin:0}
.tr-elcard-desc{color:#2d4e5e}
.tr-elcard-why{margin-top:8px!important;padding:8px 11px;border-left:3px solid #d8bd85;background:#f8f2e2;border-radius:0 8px 8px 0;color:#2d4e5e;font-size:13px}
.tr-elcard-why b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7a5a24;margin-bottom:2px}
.tr-elcard-fine{margin-top:8px!important;font-size:11.5px;color:#5d7079}
@media (max-width:700px){
  .tr-elcard{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;max-height:calc(100% - 16px);overflow:auto}
}

/* ---------- floor plan section */
.tr-lp{min-width:0;display:grid;gap:14px;padding:clamp(14px,1.8vw,24px);border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tr-lp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 28px;flex-wrap:wrap;min-width:0}
.tr-lp-titles{min-width:0}
.tr-lp-eyebrow{margin:0 0 4px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#426274}
.tr-lp h2{margin:0;font:400 clamp(21px,2.1vw,29px)/1.15 Georgia,'Times New Roman',serif;color:var(--ink)}
.tr-lp-sub{margin:4px 0 0;font-size:13.5px;color:#2d4e5e}
.tr-lp-elrow{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0}
.tr-lp-elhead{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tr-lp-els{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
body[data-site=tour] .tr-lp-els button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:1px solid #d8bd85;border-radius:999px;background:#fbf5e6;color:var(--ink);font-size:13px;text-align:left}
body[data-site=tour] .tr-lp-els button:hover{background:#f6ecd0}
body[data-site=tour] .tr-lp-els button[aria-expanded=true]{background:#efdfb4;border-color:#b08d4f}
.tr-lp-n{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:#4f3a12;color:#fff3cf;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tr-lp-approx{font-weight:400;color:#8a5a12;letter-spacing:.04em}
body[data-site=tour] .tr-lp-legend button[aria-current=location] .tr-lp-approx{color:#f0d79c}
.tr-lp-gem{width:22px;height:22px;flex:none;display:grid;place-items:center;border:1.5px solid #b08d4f;border-radius:6px;transform:rotate(45deg) scale(.78);background:linear-gradient(135deg,#fff3cf,#f1dca6);color:#6d4f1c}
.tr-lp-gem svg{width:14px;height:14px;transform:rotate(-45deg);stroke-width:1.8}
.tr-lp-body{display:grid;grid-template-columns:minmax(0,1100px) minmax(250px,320px);justify-content:center;gap:clamp(14px,2vw,30px);align-items:start;min-width:0}
.tr-lp-figure{margin:0;min-width:0;display:grid;gap:8px}
.tr-lp-plan{min-width:0;width:100%;max-width:1100px}
.tr-lp-figure figcaption{font-size:12.5px;color:var(--muted);max-width:110ch}
.tr-lp-side{display:grid;gap:10px;min-width:0}
.tr-lp-legendhead{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tr-lp-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px}
body[data-site=tour] .tr-lp-legend button{width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:4px 12px 4px 10px;border:1px solid #e1ddd0;border-radius:10px;background:#fbf9f3;color:var(--ink);text-align:left;font-size:13.5px}
body[data-site=tour] .tr-lp-legend button:hover{border-color:#9fb0b4}
body[data-site=tour] .tr-lp-legend button[aria-current=location]{background:var(--ink);border-color:var(--ink);color:#fff}
.tr-lp-sw{width:22px;height:22px;border-radius:6px;border:1px solid #2347592e}
.tr-lp-legend span:nth-child(2){min-width:0}
.tr-lp-legend strong{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-lp-legend small{font-size:12px;opacity:.75;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-lp-legend em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rows that add the concept rooms up to the gross (other spaces + total); not buttons */
.tr-lp-legend .tr-lp-sum{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 12px 5px 42px;font-size:12.5px;color:var(--muted)}
.tr-lp-legend .tr-lp-sum span{min-width:0}
.tr-lp-legend .tr-lp-sum strong,.tr-lp-legend .tr-lp-sum em{display:inline;white-space:normal;font-style:normal;letter-spacing:0;opacity:1}
.tr-lp-legend .tr-lp-sum small{opacity:1}
.tr-lp-legend .tr-lp-sum.is-total{border-top:1px solid #e1ddd0;color:var(--ink);font-size:13.5px;padding-top:8px}
.tr-lp-legend .tr-lp-sum.is-total strong{font-weight:600}
.tr-lp-key{margin:0;font-size:12.5px;color:var(--muted);display:grid;gap:6px}
.tr-lp-key span{display:flex;align-items:center;gap:8px}
.tr-lp-key i{width:18px;height:18px;flex:none;display:inline-grid;place-items:center}
@media (max-width:900px){
  .tr-lp-body{grid-template-columns:minmax(0,1fr)}
  .tr-lp-plan{max-width:none}
  .tr-lp-legend{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .tr-lp{padding:12px;border-radius:12px}
  .tr-lp-legend{grid-template-columns:1fr}
  .tr-lp-head{align-items:flex-start}
}

/* ---------- the SVG plan */
.lp-svg{display:block;width:100%;height:auto;overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none}
.lp-paper{fill:#fbf8f0;stroke:#e3ddcd;stroke-width:.05}
.lp-wall{fill:#33444f}
.lp-win-out{fill:none;stroke:#86bad7;stroke-width:.3}
.lp-win{fill:none;stroke:#f2fbff;stroke-width:.1}
.lp-door{fill:none;stroke:#33444f;stroke-width:.05;stroke-linejoin:round}
.lp-rail{fill:none;stroke:#5d7079;stroke-width:.07;stroke-dasharray:.28 .2}
.lp-zone{cursor:pointer;outline:none}
.lp-zone path{transition:filter .18s ease}
.lp-zone:hover path{filter:brightness(.95) saturate(1.15)}
.lp-zone:focus-visible path{stroke:#1f3340;stroke-width:.16}
.lp-zone.is-current path{stroke:#b08d4f;stroke-width:.2;filter:saturate(1.12)}
.lp-name{fill:#1f3340;paint-order:stroke;stroke:#ffffffa6;stroke-width:.14;stroke-linejoin:round}
.lp-area{fill:#1f3340;opacity:.78;paint-order:stroke;stroke:#ffffffa6;stroke-width:.12;stroke-linejoin:round}
.lp-lab.is-current .lp-name{font-weight:700}
.lp-svc-lab .lp-name{fill:#5d7079}
.lp-entry path{fill:none;stroke:#1f3340;stroke-width:.11;stroke-linecap:round;stroke-linejoin:round}
.lp-entry text{fill:#1f3340;letter-spacing:.12em}
.lp-el{cursor:pointer;color:#6d4f1c;outline:none}
.lp-gem{fill:#fff3cf;stroke:#b08d4f;stroke-width:.1;filter:drop-shadow(0 0 .18px #b08d4f)}
.lp-num{fill:#4f3a12;font-weight:700;pointer-events:none;paint-order:stroke;stroke:#fff3cf;stroke-width:.05}
.lp-el:hover .lp-gem{fill:#ffe9a8}
.lp-el:focus-visible .lp-gem{stroke:#1f3340;stroke-width:.22}
.lp-you-dot{fill:#0f6a86;stroke:#fff;stroke-width:.13}
.lp-you-pulse{fill:#0f6a86;opacity:.28;transform-box:fill-box;transform-origin:center;animation:lp-pulse 2.6s ease-out infinite}
.lp-you.is-approx .lp-cone{stroke-dasharray:.3 .22}
.lp-cone{fill:url(#lp-cone-g);stroke:#0f6a86;stroke-opacity:.55;stroke-width:.06;stroke-linejoin:round}
@keyframes lp-pulse{0%{transform:scale(.7);opacity:.4}100%{transform:scale(2.4);opacity:0}}
.lp-compass circle{fill:#fffefa;fill-opacity:.92;stroke:#1f3340;stroke-width:.07}
.lp-needle-n{fill:#1f3340}
.lp-needle-s{fill:#d8bd85}
.lp-north{fill:#1f3340;font-weight:700}
.lp-scale path{fill:none;stroke:#1f3340;stroke-width:.08}
.lp-scale text{fill:#3e5563}
@media (prefers-reduced-motion:reduce){.lp-you-pulse,.tr-gem::after,.tr-dot::after{animation:none!important}}
.tr-lp-legend .tr-lp-sum small strong{white-space:nowrap}