/* Walk mode (walk.js). The scroll page's plan-sheet UI steps aside for a small walking HUD. */
html.walk .hero, html.walk .spots, html.walk .ruler, html.walk .count, html.walk .hint, html.walk .veil { display: none !important; }
html.walk .track { height: 100vh !important; touch-action: none; cursor: grab; }
html.walk .file { overscroll-behavior: contain; }
html.walk-drag, html.walk-drag * { cursor: grabbing !important; }

.walk-ui { visibility: hidden; opacity: 0; }
.walk-rooms { position: fixed; z-index: 30; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.walk-rooms .pill { gap: 10px; color: var(--fg); cursor: pointer; }
.walk-rooms .pill:hover { color: var(--bg); }
.walk-tour i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.walk-tour[aria-pressed="true"] i { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.walk-toggle { display: none !important; }
.walk-list { list-style: none; margin: 0; padding: 10px 14px; border-radius: 4px; display: flex; flex-direction: column;
  background: rgba(239, 235, 226, 0.72); backdrop-filter: blur(6px); }
.walk-list button { display: flex; gap: 10px; align-items: baseline; justify-content: flex-end; width: 100%; padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: var(--fg-dim); font: 500 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; text-align: right; transition: color 0.4s var(--ease); }
.walk-list button span { opacity: 0.55; }
.walk-list button:hover, .walk-list button.is-on { color: var(--fg); }
.walk-list button.is-on span { color: var(--accent); opacity: 1; }

.walk-here { position: fixed; z-index: 30; right: var(--gutter); bottom: 18px; max-width: 60vw; padding: 10px 14px; border-radius: 4px; text-align: right;
  background: rgba(239, 235, 226, 0.72); backdrop-filter: blur(6px); }
.walk-here__name { margin: 0; font: 400 30px/1 var(--display); }
.walk-here__meta { margin: 8px 0 0; color: var(--fg-dim); font: 400 10.5px/1.4 var(--label); letter-spacing: 0.08em; text-transform: uppercase; }
.walk-here__meta b { font-weight: 400; opacity: 0.6; }
.walk-here__file { margin: 8px 0 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent); font: 500 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.walk-here__file[hidden] { display: none; }

.walk-help { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; padding: 7px 12px 6px; border-radius: 3px; pointer-events: none; white-space: nowrap;
  background: rgba(239, 235, 226, 0.72); backdrop-filter: blur(6px); font: 500 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; transition: opacity 1.2s var(--ease); }
.walk-help b { font-weight: 500; opacity: 0.5; }
html.walk-known .walk-help { opacity: 0; }

.walk-stick { position: fixed; z-index: 30; left: var(--gutter); bottom: 64px; width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; touch-action: none;
  border: 1px solid var(--line); background: rgba(239, 235, 226, 0.45); backdrop-filter: blur(6px); }
.walk-stick i { width: 42px; height: 42px; border-radius: 50%; background: var(--fg); opacity: 0.8; pointer-events: none; }

@media (max-width: 760px) {
  .walk-rooms { top: 100px; transform: none; }
  .walk-toggle { display: inline-flex !important; }
  .walk-list { display: none; }
  .walk-rooms.is-open .walk-list { display: flex; }
  .walk-here { bottom: 48px; }
  .walk-here__name { font-size: 24px; }
  .walk-help { display: none; }
}