/* Destination GUIDE companion panel — WCAG 2.1 AA styling (reusable across GUIDEs) */
:root {
  --ink: #1a1a1a;
  --muted: #4a4a4a;
  --bg: #ffffff;
  --panel-bg: #ffffff;
  --rule: #c9c9c9;
  --brand: #0b5f3f;       /* green, 7.4:1 on white */
  --brand-dark: #08452d;
  --action: #0b4a73;      /* blue, 9.4:1 on white */
  --action-dark: #07334f;
  --focus: #cc5500;       /* burnt orange, 4.6:1 on white */
  --focus-ring: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.47 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: #fff; color: var(--ink); padding: 10px 14px; border: 2px solid var(--ink);
  border-radius: 4px; font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* Layout: viewer beside the panel on wide iframes, panel below on narrow ones */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); height: 100vh; min-height: 480px; }
.guide[data-panel="closed"] { grid-template-columns: minmax(0, 1fr); }
.guide-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 3px 12px; background: #f3f6f4; border-bottom: 2px solid var(--rule); }
.btn.guide-toggle { text-align: left; min-height: 36px; padding: 4px 12px; flex: 0 0 auto; }
.guide-hint kbd { font: inherit; font-weight: 700; color: var(--ink); white-space: nowrap; padding: 0 4px; border: 1px solid var(--rule); border-radius: 4px; background: #f3f3f3; }
.guide-hint { flex: 1 1 280px; font-size: 0.875rem; line-height: 1.3; color: var(--muted); }
.guide-toggle .chevron { display: inline-block; width: 1.1em; }
.panel[hidden] { display: none; }
.viewer-wrap { position: relative; background: #000; min-height: 320px; }
/* Soft blurred picture of the scene while the 360 engine starts, so the view never opens on plain black. */
.viewer-loading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483647; pointer-events: none;
  background-repeat: no-repeat; background-position: 0 0; background-size: 600% 100%; filter: blur(8px); transform: scale(1.08); opacity: 1; transition: opacity 0.5s; }
.viewer-loading.done { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .viewer-loading { transition: none; } }
.viewer { position: absolute; inset: 0; }
.panel { position: relative; overflow-y: auto; border-left: 2px solid var(--rule); padding: 0 20px 20px; background: var(--panel-bg); }
.panel:focus { outline: none; }

@media (max-width: 899px) {
  .guide, .guide[data-panel="closed"] { display: block; height: auto; }
  .guide-bar { padding: 4px 16px; }
  .viewer-wrap { height: 62vh; min-height: 300px; max-height: 560px; }
  .panel { overflow: visible; border-left: 0; border-top: 2px solid var(--rule); padding: 0 16px 32px; }
}

h1 { font-size: 1.4rem; line-height: 1.25; margin: 0; padding: 14px 0 8px; color: var(--brand-dark); }
/* Panel title stays visible while the panel scrolls */
#panel-main { scroll-padding-top: 64px; }
#panel-main > h1 { position: sticky; top: 0; z-index: 5; background: var(--panel-bg); border-bottom: 1px solid var(--rule); }
h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 8px; color: var(--brand-dark); }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 14px 0 6px; color: var(--brand-dark); }
h2:focus, h3:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lead { margin: 0 0 8px; color: var(--muted); }
.block { padding: 13px 0; border-top: 1px solid var(--rule); }
.block[hidden] { display: none; }
p { margin: 0 0 8px; }
.facing { color: var(--muted); }

/* Buttons */
.btn {
  appearance: none; font: inherit; font-weight: 600; cursor: pointer;
  min-height: 36px; padding: 4px 14px; border-radius: 6px;
  color: #fff; background: var(--action); border: 2px solid var(--action);
  text-align: center;
}
.btn:hover { background: var(--action-dark); border-color: var(--action-dark); }
.btn[aria-pressed="true"] { background: #fff; color: var(--action); }
.btn-list { text-align: left; width: 100%; }

.dpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". up ." "left . right" ". down ."; gap: 6px; max-width: 320px; margin: 0 auto 8px; }
.dpad[hidden] { display: none; }
.dpad { margin-top: 10px; }
.dpad .btn { padding: 4px 4px; white-space: nowrap; }
#btn-up { grid-area: up; } #btn-left { grid-area: left; } #btn-right { grid-area: right; } #btn-down { grid-area: down; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.controls .btn-wide { grid-column: 1 / -1; }
.display-controls { margin-top: 6px; }
/* Map/Info sit side by side; either one fills the full row when its partner is hidden (no map, or no infobox, on this scene) */
.display-controls #btn-map:has(+ #btn-msg[hidden]) { grid-column: 1 / -1; }
.display-controls #btn-map[hidden] + #btn-msg { grid-column: 1 / -1; }

.scene-list, .poi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scene-list .btn, .poi-list .btn { width: 100%; text-align: left; }
.panel .poi-list .btn { text-align: center; }
.scene-list .btn[aria-current="true"] { background: var(--brand); border-color: var(--brand); }
.scene-list .btn[aria-current="true"]::after { content: " (current)"; font-weight: 400; }
/* Dialog action button (e.g. "I understand and agree.") stays centered, overriding .btn-list's left alignment */
.btn-center { text-align: center; }

/* Focus: visible 3:1+ against every background used */
a:focus-visible, button:focus-visible, audio:focus-visible, dialog:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus);
}

a { color: var(--action); text-decoration: underline; }
a:hover { color: var(--action-dark); }

audio { width: 100%; margin: 4px 0 8px; }
.transcript { border-left: 4px solid var(--brand); padding: 6px 12px; background: #f3f6f4; margin: 8px 0; }
.transcript p + p { margin-top: 8px; }
.btn-toggle { margin-top: 6px; display: block; width: 100%; }
#scene-desc { margin-top: 10px; }
#scene-desc[hidden], .transcript[hidden] { display: none; }
.transcript p { margin: 0; }
.status-note { color: var(--muted); font-style: italic; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

/* Dialog */
dialog { border: 2px solid var(--ink); border-radius: 8px; padding: 0; width: min(92vw, 520px); max-height: 88vh; color: var(--ink); background: #fff; }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.dialog-body { padding: 20px; overflow-y: auto; max-height: 86vh; }
.dialog-body h2 { margin-top: 0; }
.dialog-actions { margin-top: 16px; text-align: right; }
.dialog-sub { font-weight: 600; color: var(--muted); margin: 0 0 8px; }
.dialog-links { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }

/* Trunk<->branch "excursion" transition notice (Excursion to / Return from Excursion dialogs) */
.excursion-notice { font-weight: 600; color: var(--brand-dark); border-left: 4px solid var(--brand); padding: 6px 12px; background: #f3f6f4; margin: 0 0 10px; }

/* Accessibility description of the native visual marker (e.g. "A running-arrow marker..."), shown with a leading info icon */
.accessibility-note { color: var(--muted); margin: 0 0 10px; }
.a11y-note-icon { margin-right: 2px; }

.noscript { color: #fff; background: #7a0019; padding: 12px; margin: 16px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  a:focus-visible, button:focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

/* Video player inside the pop-up */
dialog.has-video { width: min(96vw, 760px); }
.video-item { display: block; }
.video-slot { margin-top: 12px; display: grid; gap: 8px; }
.video-slot:empty { display: none; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.scene-position { margin: 0 0 8px; font-weight: 600; }
#scene-dialog { width: min(92vw, 460px); }

/* Scene heading with Get directions right-justified on the same line */
.scene-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; }
.scene-head h2 { margin: 0; }
.where-link[hidden] { display: none; }