/* Missionary Lane 3D walk (js/walk.js). Chrome uses the church tokens from brand.css. */
.mlw {
  position: absolute; inset: 0; overflow: hidden;
  background: #F2EFEA; color: var(--brand-text);
  font-family: var(--font-body);
  -webkit-user-select: none; user-select: none;
}
.mlw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.mlw-canvas:active { cursor: grabbing; }
.mlw-canvas:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: -3px; border-radius: 0; }

.mlw-fade { position: absolute; inset: 0; background: #F7F6F2; opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
.mlw-fade.on { opacity: 1; }

.mlw-loading {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1);
  font: 500 .95rem/1.2 var(--font-display); color: var(--brand-primary-deep);
}
.mlw-loading[hidden] { display: none; }
.mlw-spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--brand-primary-tint); border-top-color: var(--brand-primary); animation: mlw-spin 1s linear infinite; }
@keyframes mlw-spin { to { transform: rotate(360deg); } }

/* First-visit touch hint */
.mlw-hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: rgba(10, 30, 38, .28); }
.mlw-hint[hidden] { display: none; }
.mlw-hint-card {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  margin: 0 16px 140px; padding: 22px 28px; border-radius: var(--radius-xl);
  background: #fff; box-shadow: var(--shadow-2); color: var(--brand-ink);
}
.mlw-hint-card svg { width: 44px; height: 44px; color: var(--brand-primary); animation: mlw-tap 1.6s var(--ease) infinite; }
.mlw-hint-card strong { font: 600 1.25rem/1.25 var(--font-body); }
.mlw-hint-card span { color: var(--brand-muted); font-size: .95rem; }
@keyframes mlw-tap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(4px) scale(.92); } }

/* Bottom: caption card + control bar */
/* Entrance aisle chooser (more than one aisle) */
.mlw-aisles {
  pointer-events: auto; width: min(860px, calc(100% - 32px)); padding: 14px 16px 16px;
  background: #fff; border-radius: var(--radius-xl); box-shadow: inset 0 6px 0 var(--brand-primary), var(--shadow-2);
}
.mlw-aisles[hidden], .mlw-caption[hidden] { display: none; }
.mlw-aisles-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px 4px 12px; }
.mlw-aisles-h b { font: 600 1.25rem/1.2 var(--font-body); color: var(--brand-ink); }
.mlw-aisles-h span { color: var(--brand-muted); font-size: .95rem; line-height: 1.35; }
.mlw-aisles-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
}
.mlw-aisle-btn { min-height: 64px; flex-direction: column; gap: 2px; padding: .5em .8em; line-height: 1.15; }
.mlw-aisle-btn b { font: 700 1.15rem/1.15 var(--font-display); }
.mlw-aisle-btn span { font-size: .85rem; font-weight: 500; opacity: .9; }

.mlw-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.mlw-caption {
  --k-edge: var(--brand-primary);
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 16px;
  width: min(760px, calc(100% - 32px)); padding: 14px 18px 14px 22px;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: inset 6px 0 0 var(--k-edge), var(--shadow-2);
}
.mlw-greet {
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--radius-lg);
  background: var(--k); color: var(--k-on);
  font: 700 1.2rem/1.1 var(--font-display);
}
.mlw-cap-main { min-width: 0; flex: 1; }
.mlw-cap-name { font: 600 1.25rem/1.2 var(--font-body); color: var(--brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlw-cap-place { color: var(--brand-muted); font-size: .95rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mlw-cap-meta { flex: none; display: grid; justify-items: end; gap: 6px; }
.mlw-cap-count { font: 500 .85rem/1 var(--font-display); color: var(--brand-muted); white-space: nowrap; }
.mlw-cap-count b { font-weight: 700; color: var(--brand-primary-deep); }
.mlw-status-furlough { background: #FFF4D6; color: #7A5200; }
.mlw-status-preparing { background: #E8F1FF; color: #1F4E9C; }
.mlw-status-retired { background: #EFEFEF; color: #4F4F4F; }
.mlw-touring {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 4px; border-radius: 999px; background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-1);
  font: 500 .78rem/1.3 var(--font-display); letter-spacing: .02em; white-space: nowrap;
}
.mlw-touring i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent-on-dark); animation: mlw-pulse 1.2s ease-in-out infinite; }
@keyframes mlw-pulse { 50% { opacity: .3; } }

.mlw-bar {
  pointer-events: auto; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--brand-line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
}
.mlw-nav, .mlw-extra { display: flex; gap: 10px; align-items: center; }
.mlw-bar .btn { min-height: 56px; white-space: nowrap; }
.mlw-open { min-width: 170px; }
.mlw-tour-on { --b-bg: var(--brand-primary-deep); --b-fg: #fff; }
.mlw-jump { width: auto; min-width: 210px; max-width: 320px; min-height: 56px; font-weight: 500; cursor: pointer; }

@media (max-width: 720px) {
  .mlw-bottom { gap: 8px; }
  .mlw-caption { gap: 12px; padding: 10px 12px 10px 16px; width: calc(100% - 20px); }
  .mlw-greet { font-size: 1rem; padding: 6px 10px; max-width: 36%; }
  .mlw-cap-name { font-size: 1.02rem; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mlw-cap-place { font-size: .85rem; -webkit-line-clamp: 1; }
  .mlw-cap-meta .chip { display: none; }
  .mlw-cap-count { text-align: right; line-height: 1.25; }
  .mlw-cap-count b { display: block; }
  .mlw-cap-sep { display: none; }
  .mlw-bar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .mlw-nav, .mlw-extra { width: 100%; gap: 8px; }
  .mlw-nav .btn, .mlw-extra > * { flex: 1 1 0; min-width: 0; padding-left: .5em; padding-right: .5em; font-size: 1rem; }
  .mlw-open { min-width: 0; }
  .mlw-jump { max-width: none; min-width: 0; font-size: 1rem; }
  .mlw-aisles { width: calc(100% - 20px); padding: 10px 10px 12px; }
  .mlw-aisles-h { margin: 4px 4px 10px; }
  .mlw-aisles-h b { font-size: 1.05rem; }
  .mlw-aisles-h span { font-size: .85rem; }
  .mlw-aisles-list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 32vh; }
  .mlw-aisle-btn { min-height: 58px; padding: .4em .3em; }
  .mlw-aisle-btn b { font-size: 1.05rem; }
}

/* No-WebGL fallback */
.mlw-nogl { display: grid; place-items: center; background: var(--brand-surface-2); padding: 16px; }
.mlw-fallback { max-width: 560px; padding: 32px; text-align: center; }
.mlw-fallback h2 { color: var(--brand-primary-deep); }
.mlw-fallback-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .mlw-hint-card svg, .mlw-touring i, .mlw-spinner { animation: none; }
}