/* StackSight 3D engine styles (owner: 3D engine). Linked by the app shell; scene3d.js adds a
   <link> to this file itself when the page has not linked it. No inline styles are used, so a
   strict CSP (style-src 'self') works. Every class is prefixed "ss3d-". */

.ss3d-wrap {
  position: absolute; inset: 0; overflow: hidden;
  /* no overscroll-behavior: contain here (decision 19): with it a mouse wheel over the model could
     not scroll the page. Touch never scrolls the page from here (touch-action: none). */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ss3d-wrap canvas {
  display: block; width: 100%; height: 100%; outline: none;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ss3d-wrap canvas.ss3d-pointer { cursor: pointer; }
.ss3d-host-rel { position: relative; }

.ss3d-ovl {
  position: absolute; inset: 0; pointer-events: none; font: inherit; font-size: 12px; line-height: 1.2; contain: strict;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ss3d-ovl * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* labels */
.ss3d-lab {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; visibility: hidden; color: #2a2f36;
  padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .86); box-shadow: 0 1px 2px rgba(15, 20, 30, .14);
  font-weight: 500; letter-spacing: .01em;
}
.ss3d-lab.ss3d-on { visibility: visible; }
/* a label over a highlighted facility's pin or under its caption steps aside (overlay.js); hidden
   rather than faded: a ghost of its text over a pin still reads as clutter */
.ss3d-lab { transition: opacity .18s ease-out; }
.ss3d-lab.ss3d-fade { opacity: 0; pointer-events: none; }
.ss3d-still .ss3d-lab { transition: none; }
.ss3d-lab.k-block { background: var(--navy, #092b55); color: #fff; font-weight: 600; padding: 4px 8px; }
.ss3d-lab.k-road {
  background: none; box-shadow: none; color: #6b7280; font-style: italic; font-weight: 500; padding: 0 2px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
.ss3d-lab.k-mrt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: #d42e12; margin-right: 5px; vertical-align: 0; }
.ss3d-lab.k-poi::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6b7280; margin-right: 5px; vertical-align: 1px; }
.ss3d-lab.k-green::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5d9a4a; margin-right: 5px; vertical-align: 0; }
.ss3d-lab.k-ctx { color: #39414b; }
.ss3d-dark .ss3d-lab { background: rgba(24, 28, 34, .86); color: #d8dde3; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ss3d-dark .ss3d-lab.k-block { background: #e6c56e; color: #10213a; }
.ss3d-dark .ss3d-lab.k-road { background: none; color: #9aa3ad; text-shadow: 0 0 3px #11151a, 0 0 3px #11151a; }

/* round buttons: compass, full screen */
.ss3d-btn {
  position: absolute; min-width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0; margin: 0; cursor: pointer;
  pointer-events: auto; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(15, 20, 30, .18);
  display: grid; place-items: center; color: #1c2127; font: inherit; font-size: 12px; font-weight: 600; touch-action: manipulation;
}
.ss3d-btn:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.ss3d-btn svg { width: 38px; height: 38px; display: block; }
.ss3d-dark .ss3d-btn { background: rgba(28, 33, 39, .92); color: #e6e9ed; }
.ss3d-fs { display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.ss3d-fs svg { width: 18px; height: 18px; }
.ss3d-fs[aria-pressed="false"] .ss3d-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss3d-fs[aria-pressed="false"] { padding: 0; width: 44px; justify-content: center; }
.p-top-right { top: 12px; right: 12px; } .p-top-left { top: 12px; left: 12px; }
.p-bottom-right { bottom: 12px; right: 12px; } .p-bottom-left { bottom: 12px; left: 12px; }
/* a second button in the same corner sits beside the compass */
.p-top-right.ss3d-2 { right: 64px; } .p-top-left.ss3d-2 { left: 64px; }
.p-bottom-right.ss3d-2 { right: 64px; } .p-bottom-left.ss3d-2 { left: 64px; }

/* unit-view window frame */
.ss3d-frame { position: absolute; inset: 0; display: none; pointer-events: none; }
.ss3d-frame.on { display: block; }
.ss3d-frame::before {
  content: ""; position: absolute; inset: 10px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(20, 24, 30, .22), inset 0 0 0 1px rgba(20, 24, 30, .12), inset 0 0 60px rgba(20, 24, 30, .22);
}
.ss3d-cap {
  position: absolute; left: 20px; top: 20px; display: flex; gap: 10px; align-items: center; pointer-events: auto;
  background: rgba(9, 43, 85, .86); color: #fff; border-radius: 14px; padding: 6px 6px 6px 12px; font-size: 12px;
  max-width: calc(100% - 96px); box-sizing: border-box; min-height: 44px;
}
.ss3d-cap.ss3d-noback { padding-right: 12px; }
.ss3d-cap span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss3d-cap b, .ss3d-cap i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss3d-cap b { font-weight: 600; } .ss3d-cap i { font-style: normal; opacity: .8; font-size: 11px; }
.ss3d-cap button {
  pointer-events: auto; min-height: 44px; min-width: 44px; border: 0; border-radius: 10px; padding: 0 12px; background: #fff; color: var(--navy, #092b55);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; touch-action: manipulation;
}
.ss3d-cap button:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.ss3d-hint {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); color: #fff; background: rgba(20, 24, 30, .6);
  border-radius: 999px; padding: 4px 10px; font-size: 11px; white-space: nowrap;
}
.ss3d-hint.ss3d-off { display: none; }
.ss3d-sim {
  position: absolute; right: 20px; bottom: 20px; color: #fff; background: rgba(20, 24, 30, .55); border-radius: 6px;
  padding: 3px 7px; font-size: 10px; letter-spacing: .02em; white-space: nowrap;
}

/* long-press unit tooltip */
.ss3d-tip {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; max-width: 240px; box-sizing: border-box;
  background: var(--navy, #092b55); color: #fff; border-radius: 10px; padding: 7px 10px; font-size: 12px; line-height: 1.3;
  box-shadow: 0 4px 14px rgba(9, 20, 40, .28); will-change: transform;
}
.ss3d-tip.on { display: block; }
.ss3d-tip b { display: block; font-weight: 700; font-size: 13px; }
.ss3d-tip span { display: block; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss3d-dark .ss3d-tip { background: #e6c56e; color: #10213a; }

/* facility caption (hover, tap, Facilities tab): "11 Island Pool" / "Island Club, 2nd storey" */
.ss3d-fcap {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; max-width: 260px; box-sizing: border-box;
  background: #fff; color: #1c2127; border-radius: 10px; padding: 7px 10px 7px 12px; font-size: 12px; line-height: 1.3;
  box-shadow: 0 4px 16px rgba(9, 20, 40, .22); border-left: 3px solid var(--navy, #092b55); will-change: transform;
}
.ss3d-fcap.on { display: block; }
/* spoken only: tap and Facilities tab choices (the caption itself is aria-hidden) */
.ss3d-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss3d-fcap b { display: block; font-weight: 700; font-size: 13px; color: var(--navy, #092b55); }
.ss3d-fcap span { display: block; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss3d-dark .ss3d-fcap { background: rgb(24, 28, 34); color: #e6e9ed; border-left-color: #e6c56e; }
.ss3d-dark .ss3d-fcap b { color: #e6c56e; }
.ss3d-dark .ss3d-fcap span { color: #aab3bd; }

@media (prefers-reduced-motion: reduce) { .ss3d-lab, .ss3d-fcap { will-change: auto; } .ss3d-lab { transition: none; } }