/* River Black edition of the tour interface. Tokens and fonts are copied from the website at build time (scripts/tour-build.mjs). */
@import './tokens.css';

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/Montserrat-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Roboto-var-latin.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--coal); color: var(--snow); color-scheme: dark; }
body { font-family: var(--font-body); font-size: 14.5px; line-height: 1.35; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pano { position: fixed; inset: 0; }
/* The layer itself lets the drag through to the panorama; only the controls take the pointer. */
.ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.ui > * { pointer-events: auto; }
.surface { border: 1px solid var(--line); background: rgba(10, 11, 14, 0.62); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); box-shadow: var(--shadow-glass); }

.top { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; pointer-events: none; }
.top > * { pointer-events: auto; }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.seg button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; font-weight: 500; color: rgba(238, 240, 234, 0.78); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg button span { color: var(--muted); font-weight: 400; }
.seg button:hover { color: var(--snow); background: rgba(255, 255, 255, 0.06); }
.seg button[aria-pressed='true'] { background: var(--snow); color: var(--coal); }
.seg button[aria-pressed='true'] span { color: rgba(10, 11, 14, 0.62); }

.rooms { position: relative; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 16px; border-radius: 999px; font-weight: 500; }
.chip svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--dur-short) var(--ease-out); }
.chip[aria-expanded='true'] svg { transform: rotate(180deg); }
.chip:hover { border-color: rgba(255, 255, 255, 0.22); }
.menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: var(--radius-m); background: rgba(10, 11, 14, 0.9); }
.menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-s); background: none; text-align: left; color: rgba(238, 240, 234, 0.82); }
.menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--snow); }
.menu button[data-on] { background: rgba(255, 255, 255, 0.09); color: var(--snow); }
.menu button[data-on]::after { content: ''; float: right; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--accent); }

.plan { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: clamp(150px, 17vw, 210px); padding: 8px 8px 10px; border-radius: var(--radius-m); }
.plan__map { aspect-ratio: 454 / 737; overflow: hidden; border-radius: 10px; }
.plan__sheet { position: relative; aspect-ratio: 454 / 800; }
.plan__sheet img { display: block; width: 100%; height: auto; }
.plan__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border: 2px solid var(--coal); border-radius: 50%; background: var(--accent); transition: transform var(--dur-micro) var(--ease-out); }
.plan__dot::before { content: ''; position: absolute; inset: -10px; }
.plan__dot:hover { transform: scale(1.25); }
.plan__dot[data-on] { background: var(--snow); box-shadow: 0 0 0 3px rgba(226, 199, 69, 0.9); }
.plan__cone { position: absolute; width: 56px; height: 46px; margin: -46px 0 0 -28px; transform-origin: 50% 100%; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(to top, rgba(226, 199, 69, 0.85), rgba(226, 199, 69, 0)); pointer-events: none; }
.plan__title { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; padding: 9px 4px 0; font-size: 13px; }
.plan__title strong { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.plan__title span { color: var(--muted); }

.tools { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.icon:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(10, 11, 14, 0.8); }
.icon[aria-pressed='true'] { background: var(--snow); color: var(--coal); border-color: transparent; }

.hint { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; font-weight: 500; white-space: nowrap; pointer-events: none; }

.help { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; border-radius: 999px; }
.help ul { display: flex; gap: 22px; }
.help li { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: rgba(238, 240, 234, 0.88); }
.help li svg { color: var(--accent); flex: none; }
.help__x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.help__x:hover { background: rgba(255, 255, 255, 0.14); }
.help__x svg { width: 16px; height: 16px; }
@media (hover: none) { .help__keys { display: none !important; } }

@media (max-width: 900px) {
  .help { left: 14px; right: 14px; bottom: 68px; transform: none; align-items: flex-start; padding: 12px 10px 12px 16px; border-radius: var(--radius-m); }
  .help ul { flex: 1; flex-direction: column; gap: 9px; }
  .help li { white-space: normal; }
  .hint { bottom: 68px; }
}
@media (max-width: 560px) {
  .seg button { padding: 8px 12px; }
  .seg button span { display: none; }
  .plan { top: auto; bottom: 68px; transform: none; width: 150px; }
}