@keyframes ui-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

:root {
  /* Tells the browser to render its own controls for a dark interface: the
     date picker icon, the select arrow, scrollbars and the picker panel.
     Without it the calendar glyph is drawn near black on a near black field. */
  color-scheme: dark;

  --fade: 320ms;
  --ink: #0B0B0C;
  --ink-soft: #17171A;
  --paper: #F2F2F0;
  --accent: #DEFE0A;
  --line: rgba(242,242,240,0.16);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* Everything that appears does so the same way, matching the fade the landing
   already used on the way out. The reduced-motion block at the end of this
   file switches all of it off. */
#size-gate:not([hidden]),
#chrome:not([hidden]),
#exits:not([hidden]),
#space-panel:not([hidden]),
#booking:not([hidden]),
#video:not([hidden]),
#map-label:not([hidden]) {
  animation: ui-fade-in var(--fade) ease-out both;
}

/* ---------- Viewer ---------- */

#viewer { position: fixed; inset: 0; }

/* ---------- Landing + gate ---------- */

#landing, #size-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
}

#landing-pano { position: absolute; inset: 0; }

#size-gate { background: var(--ink); }

.landing-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 20%, rgba(11,11,12,0.82) 100%),
    /* Lightened toward the bottom so the roof mark the camera lands on is
       actually legible through it. */
    linear-gradient(to bottom, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.30) 78%, rgba(11,11,12,0.15) 100%);
}

.landing-inner {
  position: relative;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 60rem;
  width: 100%;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

#landing h1, #size-gate h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(3rem, 11vw, 7.5rem);
}

#size-gate h2 { font-size: clamp(2rem, 6vw, 3.5rem); }

.lede {
  margin: 1.5rem auto 3rem;
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(242,242,240,0.72);
}

/* The signature: two panels that split apart like the garage doors */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  max-width: 46rem;
  margin: 0 auto 1.75rem;
}

.door {
  background: rgba(11,11,12,0.55);
  backdrop-filter: blur(6px);
  /* each button carries its own outline, rather than one box drawn around
     the pair of them */
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 2.25rem 1.5rem;
  text-align: left;
  display: block;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), background 200ms;
}

.door:first-child:hover { transform: translateX(-10px); }
.door:last-child:hover  { transform: translateX(10px); }
.door:hover { background: rgba(222,254,10,0.14); }
.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.door-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
}

.door-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(242,242,240,0.6);
}

/* This is a real call to action now, not a footnote, and it lands on whatever
   part of the photograph the camera happens to stop on. It needs its own
   plate to stay legible. */
.ghost {
  background: rgba(11,11,12,0.72);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
}
.ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* ---------- Logo ---------- */

/* The mark is 253.92 x 235.3, so height is set and width follows. */
.logo {
  display: block;
  width: auto;
  height: auto;
}

.logo-hero {
  height: clamp(3.25rem, 7vw, 5rem);
  margin: 0 auto 1.5rem;
}

.logo-gate {
  height: clamp(2.5rem, 5vw, 3.5rem);
  margin: 0 auto 1.25rem;
}

/* replaces the UNION wordmark in the tour chrome, so it carries the alt text */
.logo-chrome { height: 1.9rem; }

.sheet-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sheet-head h2 { margin: 0; }
.video-sheet .sheet-head { margin: 0 0 1rem; }
.logo-sheet { height: 1.6rem; flex-shrink: 0; }

/* ---------- Chrome ---------- */

#chrome {
  position: fixed;
  z-index: 10;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(to bottom, rgba(11,11,12,0.72), transparent);
  pointer-events: none;
}

.chrome-left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }

.room {
  /* it is an h1, so the user agent margins would knock it off the mark's line */
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-right { display: flex; gap: 0.5rem; flex-shrink: 0; }

#chrome button {
  pointer-events: auto;
  /* No backdrop-filter here on purpose. Blurring the live canvas behind these
     buttons every frame cost roughly half the frame rate while dragging on
     integrated graphics. The plate is more opaque instead. */
  background: rgba(11,11,12,0.78);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
#chrome button:hover { border-color: rgba(242,242,240,0.4); }
#chrome button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--ink) !important;
  font-weight: 500;
}

/* ---------- Walkthrough video ---------- */

#video {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11,11,12,0.88);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.video-sheet {
  position: relative;
  width: min(64rem, 100%);
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 2rem 1.5rem 1.5rem;
}

.video-sheet h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

#video-player {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}

#video-missing {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(242,242,240,0.7);
  border-left: 2px solid var(--accent);
  padding-left: 0.7rem;
}

/* ---------- Booking ---------- */

#booking {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(11,11,12,0.86);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(38rem, 100%);
  max-height: min(86vh, 46rem);
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 0;
}

/* header, progress and footer stay put; only the fields scroll */
.sheet > .sheet-head {
  gap: 0.85rem;
  padding: 1.35rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sheet-headings { min-width: 0; flex: 1; }

.sheet h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  margin: 0;
}

.sheet-note {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(242,242,240,0.6);
}

.sheet .close {
  position: static;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 1.5rem;
}

.sheet-progress {
  display: flex;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.sheet-progress li {
  height: 3px;
  flex: 1;
  background: rgba(242,242,240,0.12);
  transition: background 220ms ease;
}
.sheet-progress li.done { background: rgba(222,254,10,0.45); }
.sheet-progress li.current { background: var(--accent); }

#booking-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.sheet-step {
  margin: 0;
  padding: 1rem 1.5rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

#booking-fields {
  overflow-y: auto;
  padding: 1rem 1.5rem 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* rhythm comes from the grid, not from margins on the fields, so the last
     row cannot leave a doubled gap above the footer */
  gap: 1.1rem 0.9rem;
  align-content: start;
}

.sheet-foot {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.sheet-foot .primary { min-width: 11rem; padding: 0.8rem 1.2rem; border: 0; font-size: 0.9rem; }

.ghost-btn {
  background: none;
  border: 1px solid var(--line);
  color: rgba(242,242,240,0.75);
  padding: 0.8rem 1.2rem;
  font-size: 0.85rem;
  margin-right: auto;
}
.ghost-btn:hover { color: var(--paper); border-color: rgba(242,242,240,0.4); }
.ghost-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Fields ---------- */

.field { margin: 0; grid-column: 1 / -1; min-width: 0; }
.field-half { grid-column: span 1; }

/* direct children only: the space cards and the checkbox rows are labels too,
   and this rule was overriding their layout on specificity */
.field > label,
.field > legend {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.55);
  margin-bottom: 0.45rem;
  padding: 0;
}

/* checkboxes are excluded: width 100% was stretching each box across the row
   and shoving its label to the far edge */
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 0.75rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 160ms ease;
}
.field input:not([type="checkbox"]):hover,
.field select:hover,
.field textarea:hover { border-color: rgba(242,242,240,0.32); }
.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.field input:not([type="checkbox"]):invalid:not(:placeholder-shown) { border-color: rgba(255,120,90,0.8); }

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 0.7;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.checks input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.checks input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.checks-field, .spaces-field { border: 0; padding: 0; margin: 0; min-width: 0; }

.checks { display: grid; gap: 0.45rem; }
.checks label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  margin: 0;
}

/* ---------- Space picker ---------- */

.spaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.5rem;
}

/* the checkbox itself is hidden, the card is the control */
.space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--ink);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 160ms ease, background 160ms ease;
}
.space-card:hover { border-color: rgba(242,242,240,0.4); }

.space-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.space-card-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--paper);
}
.space-card-size {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.space-card-hint {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(242,242,240,0.5);
}

.space-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(222,254,10,0.10);
}
.space-card:has(input:checked) .space-card-name { color: var(--accent); }
.space-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.fineprint {
  font-size: 0.72rem;
  color: rgba(242,242,240,0.52);
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  flex-shrink: 0;
}

.close {
  background: none;
  border: 0;
  color: rgba(242,242,240,0.6);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.close:hover { color: var(--paper); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  #exits { padding: 0.7rem 0.9rem; gap: 0.5rem; }
  #exits-label { display: none; }
  .exit { padding: 0.55rem 0.75rem; font-size: 0.75rem; }
  #viz-badge { top: 3.75rem; font-size: 0.65rem; }
  #rooms-menu { min-width: 11rem; max-height: 50vh; }
  #space-panel {
    top: 3.6rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: 45vh;
    padding: 0.7rem 0.9rem 0.8rem;
  }
  #space-summary { font-size: 0.82rem; margin: 0.5rem 0 0.7rem; }
  #tune { left: 0.5rem; right: 0.5rem; width: auto; top: 3.75rem; }

  .doors { grid-template-columns: 1fr; }
  .door:first-child:hover, .door:last-child:hover { transform: none; }
  /* Hidden from the narrow chrome but kept in the accessibility tree: it is
     the only h1 once the landing is gone, and it is the focus target when the
     landing tears down. display:none would break both. */
  .room {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #chrome button { padding: 0.55rem 0.75rem; font-size: 0.75rem; }
}

/* ---------- Accessibility plumbing ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#room-name:focus { outline: none; }
#room-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.ghost:focus-visible,
.close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.fatal code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(222,254,10,0.16);
  color: var(--accent);
  padding: 0.15rem 0.4rem;
  margin: 0.15rem 0;
  font-size: 0.85em;
}

.fatal {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 60;
  background: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------- Exits ---------- */

/* The 3D link arrows are WebGL meshes. They have no DOM node, so they cannot
   be focused or named. This row is the keyboard and screen reader route
   between nodes, and it doubles as thumb-reachable navigation on a phone.
   Offset by the height of the Photo Sphere Viewer navbar so the two do not
   sit on top of each other. */
#exits {
  position: fixed;
  z-index: 10;
  left: 0; right: 0;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* right padding clears the floor plan, which sits in that corner */
  padding: 0.9rem 21rem 0.9rem 1.25rem;
  background: linear-gradient(to top, rgba(11,11,12,0.78), transparent);
  pointer-events: none;
  overflow-x: auto;
  scrollbar-width: none;
}
#exits::-webkit-scrollbar { display: none; }

#exits-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

#exits-list { display: flex; gap: 0.5rem; }

.exit {
  pointer-events: auto;
  flex-shrink: 0;
  /* same reasoning as #chrome button, see above */
  background: rgba(11,11,12,0.78);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: border-color 200ms, background 200ms;
}
.exit:hover { border-color: rgba(242,242,240,0.4); background: rgba(222,254,10,0.14); }
.exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Space panel ---------- */

#space-panel {
  position: fixed;
  z-index: 11;
  top: 4.5rem;
  left: 1.25rem;
  width: 19rem;
  max-width: calc(100vw - 2.5rem);
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  background: rgba(11,11,12,0.82);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.1rem 1.1rem;
}

.space-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#space-heading {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
  font-family: var(--body);
}

#space-toggle {
  background: none;
  border: 0;
  color: rgba(242,242,240,0.6);
  padding: 0.2rem 0.3rem;
  line-height: 1;
  font-size: 0.9rem;
}
/* U+2212 minus sign, deliberately not a dash of any kind */
#space-toggle::before { content: "\2212"; }
#space-toggle[aria-expanded="false"]::before { content: "+"; }
#space-toggle:hover { color: var(--paper); }
#space-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#space-summary {
  margin: 0.7rem 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(242,242,240,0.82);
}

#space-features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#space-features li {
  border: 1px solid var(--line);
  color: rgba(242,242,240,0.78);
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#space-cta { margin-top: 0; font-size: 0.85rem; padding: 0.7rem; }

/* ---------- Rooms menu ---------- */

.rooms-wrap { position: relative; }

#rooms-btn[aria-expanded="true"] { border-color: var(--accent); }

#rooms-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 12;
  min-width: 13rem;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--ink-soft);
  border: 1px solid var(--line);
}

#rooms-menu li { margin: 0; }

.room-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--paper);
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.room-item:hover { background: rgba(222,254,10,0.16); }
.room-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the room you are standing in */
.room-item[aria-current="true"] {
  color: var(--accent);
  cursor: default;
  opacity: 1;
}
.room-item[aria-current="true"]::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.5rem;
  background: var(--accent);
  vertical-align: middle;
}

/* ---------- Viewer navbar ---------- */

/* The last piece still wearing the plugin's own look. Same plate, same rule,
   same accent on hover as everything else. */
.psv-navbar {
  background: rgba(11,11,12,0.86);
  border-top: 1px solid var(--line);
}
.psv-navbar .psv-button { color: rgba(242,242,240,0.72); }
.psv-navbar .psv-button:hover { color: var(--accent); }
.psv-navbar .psv-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* ---------- Floor plan map ---------- */

/* The map sits bottom right, so stop the exits row sliding underneath it.
   Its hotspots are drawn on a canvas and cannot be focused or named, so the
   Rooms menu and the exits row remain the keyboard and screen reader route. */
.psv-map { z-index: 9; }

/* The plugin ships a rounded, shadowed, grey translucent widget with pill
   shaped controls. Nothing else here looks like that, which is what made the
   map read as a separate piece of software sitting on top of the tour. Bring
   it into the same system: square, same border, same plate, same type. */
.psv-map--square {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  /* so the label below can sit outside the frame */
  overflow: visible;
}

/* Titled like the other panels, and anchored to the widget so it follows it
   rather than relying on hardcoded offsets. */
.psv-map--square::before {
  content: "Floor plan";
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.45rem;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* dark plate behind a light plan, so the edges of the drawing read */
.psv-map__container { background: var(--ink); }

.psv-map__toolbar {
  background: rgba(11,11,12,0.86);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  padding: 0.3rem 0.45rem;
  bottom: 0.7em;
}

.psv-map__button {
  background: rgba(11,11,12,0.86);
  border: 1px solid var(--line);
  border-radius: 0;
  color: rgba(242,242,240,0.75);
  width: 30px;
}
.psv-map__button:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.psv-map__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) {
  #exits { padding-right: 1.25rem; }
  /* a 260px map eats a phone screen, and the Rooms menu already covers this.
     The map button in the navbar brings it back. */
  .psv-map { display: none; }
}

/* ---------- Visualization badge ---------- */

/* Shown whenever a generated panorama is the one on screen. Hard rule, see
   CLAUDE.md. It labels the whole viewport, so it sits over the middle of it. */
#viz-badge {
  position: fixed;
  z-index: 15;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- Tune mode (dev only, ?tune=1) ---------- */

#tune {
  position: fixed;
  z-index: 50;
  top: 4.5rem;
  left: 1rem;
  width: 19rem;
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(11,11,12,0.92);
  border: 1px solid var(--accent);
  padding: 0.9rem 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#tune h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
#tune h3 {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.55);
  margin: 0.9rem 0 0.35rem;
}
#tune dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  margin: 0;
}
#tune dt { color: rgba(242,242,240,0.55); }
#tune dd { margin: 0; }
#tune ul { margin: 0; padding-left: 1rem; color: rgba(242,242,240,0.72); }
#tune .tune-help { margin: 0 0 0.4rem; font-size: 0.7rem; line-height: 1.45; color: rgba(242,242,240,0.55); }
#tune code { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#tune button {
  margin-top: 0.7rem;
  width: 100%;
  background: var(--accent);
  border: 0;
  color: var(--ink);
  padding: 0.5rem;
  font-size: 0.75rem;
}
#tune button:disabled { background: rgba(242,242,240,0.18); color: rgba(242,242,240,0.5); cursor: default; }
#tune button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
#tune #tune-copied { margin: 0.4rem 0 0; color: var(--accent); font-size: 0.72rem; }
#tune #tune-warn {
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.6rem;
  background: rgba(222,254,10,0.16);
  border-left: 2px solid var(--accent);
  color: var(--paper);
  font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}