/* ==========================================================================
   Poll / Pull Residence 3D Viewport
   Native Three.js canvas, labels, tooltip, and walk controls.
   ========================================================================== */

:root {
  /* Stage fill stays the light-neutral canvas surround. Chrome aliases the instrument tokens. */
  --vp-bg: #e9e7e2;
  --vp-panel: var(--sheet);
  --vp-panel-solid: var(--sheet-solid);
  --vp-ink: var(--ink);
  --vp-muted: var(--ink-mute);
  --vp-faint: var(--ink-3);
  --vp-rule: var(--rule);
  --vp-rule-strong: var(--rule-strong);
  --vp-accent: var(--brass);
  --vp-accent-ink: var(--brass-ink);
  --vp-warn: var(--brass);
  --vp-chip: var(--sheet-raised);
  --vp-shadow: var(--shadow-sheet);
  --vp-sans: var(--font-sans);
  --vp-mono: var(--font-mono);
  --vp-serif: var(--font-serif);
}

/* ============================== VIEWPORT STAGE ============================== */

.three-viewport-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: var(--vp-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.three-viewport-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.three-viewport-stage canvas:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

/* 2D CSS Labels Layer */
.three-viewport-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* ============================== HUD OVERLAY ============================== */

.three-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  padding: 12px 16px 16px calc(max(12px, env(safe-area-inset-left, 0px)) + var(--rail-w, 48px) + 12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Walk touch controls: joystick, look zone, door button. The engine shows the
   root only in Walk view on coarse pointers; a mouse goes straight to the canvas. */
.three-walk-touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: none;
  z-index: 8;
}

.three-walk-look-zone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 72%;
  pointer-events: auto;
  touch-action: none;
}

.three-walk-joystick {
  position: absolute;
  left: calc(var(--rail-w, 48px) + 18px);
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--sheet, var(--vp-panel));
  border: 1px solid var(--rule-strong, var(--vp-rule-strong));
  pointer-events: auto;
  touch-action: none;
}

.three-walk-joystick-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink, var(--vp-ink));
  box-shadow: var(--shadow-sheet, var(--vp-shadow));
  transform: translate(-50%, -50%);
}

.three-walk-door-button {
  position: absolute;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  min-width: 132px;
  height: var(--ctl-h, 40px);
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--brass, var(--vp-accent));
  color: var(--brass-ink, var(--vp-accent-ink));
  font: 600 14px / 1 var(--font-sans, var(--vp-sans));
  box-shadow: var(--shadow-sheet, var(--vp-shadow));
  pointer-events: auto;
  touch-action: none;
}

.three-context-resume {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  height: var(--ctl-h, 32px);
  min-width: var(--ctl-h, 32px);
  min-height: var(--ctl-h, 32px);
  padding: 0 10px;
  border: 1px solid var(--rule, var(--vp-rule));
  border-radius: var(--radius-2, 8px);
  background: var(--sheet, var(--vp-panel));
  color: var(--ink, var(--vp-ink));
  font: 500 12px / 1.2 var(--font-sans, var(--vp-sans));
  box-shadow: var(--shadow-sheet, var(--vp-shadow));
  cursor: pointer;
  touch-action: manipulation;
}

.three-context-resume[hidden] {
  display: none;
}

/* ============================== 2D VIEWPORT LABELS ============================== */

.rl {
  font-family: var(--font-sans, var(--vp-sans));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink, var(--vp-ink));
  background: var(--sheet, var(--vp-panel));
  padding: 3px 6px;
  border-radius: var(--radius-1, 4px);
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--rule, var(--vp-rule));
  box-shadow: var(--shadow-sheet, var(--vp-shadow));
  font-variant-numeric: tabular-nums;
}

.rl small {
  display: block;
  font-family: var(--font-mono, var(--vp-mono));
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute, var(--vp-muted));
}

.three-tip {
  position: absolute;
  pointer-events: none;
  background: var(--sheet, var(--vp-panel));
  border: 1px solid var(--rule-strong, var(--vp-rule-strong));
  border-radius: var(--radius-2, 8px);
  padding: 8px 10px;
  font-size: 13px;
  box-shadow: var(--shadow-sheet, var(--vp-shadow));
  display: none;
  max-width: 280px;
  z-index: 10;
  color: var(--ink, var(--vp-ink));
  font-family: var(--font-sans, var(--vp-sans));
}

.three-tip b {
  font-weight: 600;
}

.three-tip .mono {
  font-family: var(--font-mono, var(--vp-mono));
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-mute, var(--vp-muted));
}