/* Inside Space 360 tour page. Shared by every client tour at /<slug>/ */
:root {
  --ink: #172528;
  --teal: #24474A;
  --wall: #E5ECEA;
  --gold: #F4C150;
  --gold-soft: #F7D47E;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; font: 400 1rem/1.5 var(--body); overflow: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

#tour { position: fixed; inset: 0; }
#tour .pnlm-load-box { background: rgba(23,37,40,.85); border-radius: 14px; font-family: var(--body); }
#tour .pnlm-about-msg, #tour .pnlm-orientation-button, #tour .pnlm-panorama-info { display: none !important; }

/* top bar */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 40px;
  background: linear-gradient(180deg, rgba(23,37,40,.75), rgba(23,37,40,0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.biz h1 { margin: 0; font: 800 clamp(1.3rem, 3.4vw, 2rem)/1.1 var(--display); letter-spacing: -0.02em; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.biz p { margin: 2px 0 0; font-size: .9375rem; opacity: .9; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 .9375rem/1 var(--body);
  background: rgba(23,37,40,.6); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill:hover { background: rgba(23,37,40,.8); }
.pill.gold { background: var(--gold); color: var(--ink); }
.pill.gold:hover { background: var(--gold-soft); }
.pill svg { width: 18px; height: 18px; flex: none; }

/* room switcher */
.rooms {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 40px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(23,37,40,.75), rgba(23,37,40,0));
}
.rooms::-webkit-scrollbar { display: none; }
.rooms button { flex: none; }
.rooms button[aria-current="true"] { background: #fff; color: var(--ink); }
.rooms:empty { display: none; }

/* credit badge */
.credit {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 11;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: 700 .8125rem/1 var(--body); opacity: .9;
  background: rgba(23,37,40,.6); padding: 8px 12px 8px 8px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.credit svg { width: 20px; height: 20px; }
.credit span b { color: var(--gold); }
@media (min-width: 701px) { .has-rooms .rooms { padding-right: 220px; } }
@media (max-width: 700px) { .has-rooms .credit { display: none; } }

/* doorway hotspots */
.door { cursor: pointer; }
.door .door-tag {
  display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -50%);
  padding: 9px 14px 9px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--gold); color: var(--ink); font: 700 .9375rem/1 var(--body);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform .15s;
}
.door:hover .door-tag { transform: translate(-50%, -50%) scale(1.06); }
.door-tag i { width: 14px; height: 22px; border-radius: 2px; background: var(--ink); display: block; position: relative; }
.door-tag i::after { content: ""; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 0; background: var(--gold-soft); border-radius: 1px; }

/* embed mode: tighter, and on touch screens a tap-to-explore shield so the host page still scrolls */
.embed .top { padding: 10px 12px 30px; }
.embed .biz h1 { font-size: 1.15rem; }
.embed .biz p, .embed .actions .hide-embed { display: none; }
.embed .rooms { padding: 30px 12px 12px; }
.shield { position: fixed; inset: 0; z-index: 5; display: none; touch-action: pan-y; }
.look { display: none; }
@media (pointer: coarse) {
  .embed .shield { display: block; }
  .embed .look { display: inline-flex; position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .embed.exploring .shield, .embed.exploring .look { display: none; }
}
.done { display: none; }
.embed.exploring .done { display: inline-flex; }

/* edit mode: shows yaw/pitch so doorways can be placed */
.coords {
  position: fixed; left: 50%; top: 50%; z-index: 20; transform: translate(-50%, -50%);
  pointer-events: none; display: none;
}
.edit .coords { display: block; }
.coords::before, .coords::after { content: ""; position: absolute; background: var(--gold); }
.coords::before { left: -14px; width: 28px; top: -1px; height: 2px; }
.coords::after { top: -14px; height: 28px; left: -1px; width: 2px; }
.edit-panel {
  position: fixed; left: 16px; right: 16px; bottom: 90px; z-index: 20; display: none;
  background: var(--ink); border: 2px solid var(--gold); border-radius: 14px; padding: 12px 14px;
  font: 400 .875rem/1.45 ui-monospace, Menlo, Consolas, monospace;
}
.edit .edit-panel { display: block; }
.edit-panel b { font-family: var(--body); color: var(--gold); }