/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: system-ui, -apple-system, sans-serif; }
body { display: flex; flex-direction: column; background: #f0f0f0; }

/* Header */
#header {
  background: #1a3a6a;
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* The logo doubles as the admin button - see index.html */
#adminToggle {
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
#adminToggle img { height: 56px; width: auto; display: block; }
#adminToggle:hover { background: #e8eef8; }

#titleBlock { flex: 0 1 auto; min-width: 0; }
#titleBlock h1 { font-size: 22px; line-height: 1.15; }
#titleBlock p  { font-size: 13px; opacity: 0.9; margin-top: 2px; }

/* AB Cemetery Apps logo, sized to sit inside the bar height */
/* The logo box takes up all the leftover space between the title and the nav
   buttons, and object-fit centres the image inside it - so the logo floats in
   the middle of that gap instead of sitting hard against a button. */
#appLogo {
  flex: 1 1 0;
  min-width: 0;
  height: 72px;
  object-fit: contain;
  display: block;
  background: none;   /* transparent PNG - no white card behind it */
}

/* Square buttons, banner right. Contact Us ends up furthest right. */
#headerNav { display: flex; gap: 8px; flex-shrink: 0; }
.navBtn {
  width: 84px; height: 84px;
  background: #fff;
  color: #1a3a6a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 6px 4px;
}
.navBtn:hover { background: #e8eef8; }
.navBtn .navIcon { font-size: 22px; line-height: 1; }

@media (max-width: 1100px) {
  .navBtn { width: 68px; height: 68px; font-size: 10px; }
  .navBtn .navIcon { font-size: 18px; }
  #adminToggle img { height: 46px; }
  #titleBlock h1 { font-size: 18px; }
}
@media (max-width: 768px) {
  #header { flex-wrap: wrap; }
  #headerNav { width: 100%; justify-content: space-between; }
  .navBtn { flex: 1; width: auto; }
}

/* Main Layout */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* Map Container */
#mapContainer {
  flex: 1;
  position: relative;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#mapWrap {
  flex: 1;
  min-height: 0;
  /* hidden, not auto: zooming now changes the viewBox, so nothing overflows
     and there are no scrollbars to run out of before you reach the edge. */
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
}
#mapSvg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Map Controls - sit just under the header, left side, in a row */
#mapControls {
  position: absolute;
  top: 12px;
  left: 20px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
}
#mapControls button {
  width: 44px;
  height: 44px;
  background: #1a3a6a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}
#mapControls button:hover { background: #0d1f42; }

/* Sidebar */
#sidebar {
  width: 380px;
  background: #eaf2fb;
  border-left: 2px solid #1a3a6a;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}
#sidebarHeader {
  padding: 6px 10px 0 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}
#sidebarToggle {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

#buttonGroup {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.sideBtn {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d4c8a8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1a3a6a;
}
.sideBtn:hover { background: #f5f0e8; }

#searchSection {
  padding: 12px;
  border-top: 1px solid #d4c8a8;
  flex-shrink: 0;
}
#searchSection h3 { font-size: 14px; margin-bottom: 8px; }
#searchSection input {
  width: 100%;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #c9b380;
  border-radius: 4px;
  font-size: 12px;
}
/* Search and Clear sit side by side and fill the panel width between them,
   so together they occupy exactly the space Search used to have on its own.
   No extra height is taken from the panel. */
#searchButtons {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
#searchButtons button {
  flex: 1 1 0;
  /* Double height. A thumb lands on a target by area, not by width - a long
     thin strip is easy to slip off vertically on a phone. */
  min-height: 76px;
  padding: 10px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}
#searchBtn { background: #1a3a6a; color: #fff; font-size: 15px; }
#searchBtn:hover { background: #24508f; }
#clearBtn  { background: #e6dcc4; color: #1a3a6a; }
#clearBtn:hover { background: #dbcfb0; }

#resultsSection {
  flex: 1;
  padding: 12px;
  border-top: 1px solid #d4c8a8;
  overflow-y: auto;
}
#resultsList { }
.resultItem {
  padding: 8px;
  background: #fff;
  border: 1px solid #d4c8a8;
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
}
.resultItem:hover { background: #f9f5f0; }

.hidden { display: none !important; }

/* Tour Bar (left side) */
#tourBar {
  /* In the flow above the map (mapContainer is a column), so the map
     shrinks to make room instead of being covered. Fixed height so the
     map does not jump about as the stop text changes length. */
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: #1a3a6a;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 6;
}
#tourInfo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
#tourControls { flex: 0 0 auto; }
#tourControls button { flex: 0 0 auto; white-space: nowrap; }
#tourControls button#tourAudio.off {
  background: #2d4d7c;
  color: #cfe0f7;
  border: 1px solid #6f8fbf;
}
@media (max-width: 768px) {
  #tourBar { flex-direction: column; align-items: stretch; gap: 6px; }
  #tourControls { display: flex; }
  #tourControls button { flex: 1; }
}
#tourStop {
  font-size: 11px;
  opacity: 0.8;
  display: block;
  margin-bottom: 4px;
}
#tourText {
  font-size: 14px;
  line-height: 1.5;
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tourControls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#tourControls button {
  flex: 1;
  min-width: 55px;
  padding: 8px;
  background: #fff;
  color: #1a3a6a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
#tourControls button:hover { background: #f0f0f0; }

/* Admin Console */
#adminConsole {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#adminPanel {
  background: #f2e6c8;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
#adminPanel h2 {
  padding: 16px;
  border-bottom: 1px solid #d4c8a8;
  font-size: 18px;
  color: #1a3a6a;
}
#adminClose {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

#adminTabs {
  display: flex;
  border-bottom: 1px solid #d4c8a8;
  background: #e8dcc8;
}
.adminTab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  border-bottom: 3px solid transparent;
}
.adminTab.active {
  color: #1a3a6a;
  border-bottom-color: #1a3a6a;
}

.adminTab-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
.adminTab-content textarea {
  width: 100%;
  height: 200px;
  padding: 8px;
  border: 1px solid #c9b380;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  margin-bottom: 12px;
}
.adminTab-content button {
  padding: 10px 16px;
  background: #1a3a6a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.adminTab-content button:hover { background: #0d1f42; }

/* Contact Modal */
#contactModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#contactBox {
  background: #f2e6c8;
  border-radius: 8px;
  padding: 32px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}
#contactBox h2 {
  font-size: 20px;
  color: #1a3a6a;
  margin-bottom: 16px;
}
#contactBox p {
  font-size: 14px;
  margin-bottom: 12px;
}
#contactBox a {
  color: #1a3a6a;
  text-decoration: none;
  font-weight: 600;
}
#contactBox a:hover { text-decoration: underline; }
#contactClose {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* Footer — the acknowledgement bar.
   This was display:none, which meant the copyright notice inside it had never
   been seen by anyone. It is on now: the Marist Brothers' mark sits here,
   acknowledged beside the Society, rather than in the masthead where it read
   as the app's publisher. */
#footer {
  background: #1a3a6a;
  color: #fff;
  padding: 10px 16px;
  font-size: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}
#footerMarist {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
}
@media (max-width: 768px) {
  #footer { flex-direction: column; text-align: center; gap: 8px; padding: 12px; }
}

/* Responsive */
@media (max-width: 768px) {
  #main { flex-direction: column; }
  #sidebar { width: 100%; max-height: 45vh; }
  #mapControls { top: 10px; left: 10px; }
  #appLogo { height: 44px; }
}

/* ── History pages ─────────────────────────────────────── */
.histPanel {
  background: #fff;
  border: 1px solid #d4c8a8;
  border-radius: 6px;
  padding: 14px;
  color: #2b2b2b;
  line-height: 1.55;
  font-size: 14px;
}
.histPanel h3 {
  margin: 0 0 2px 0;
  font-size: 17px;
  color: #1a3a6a;
}
.histSub {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #7a6f57;
  font-style: italic;
}
.histIntro p { margin: 0 0 10px 0; }
.histIntro {
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e6dcc4;
}
.histTimeline { border-left: 2px solid #d4c8a8; margin-left: 4px; }
.histRow {
  position: relative;
  padding: 0 0 14px 14px;
}
.histRow::before {
  content: "";
  position: absolute;
  left: -6px; top: 5px;
  width: 10px; height: 10px;
  background: #1a3a6a;
  border: 2px solid #fff;
  border-radius: 50%;
}
.histYear {
  font-weight: 700;
  color: #1a3a6a;
  font-size: 13px;
  letter-spacing: .3px;
}
.histText { margin-top: 2px; }

/* ── Tour intro / location / unavailable screens ────────
   These sit INSIDE the sidebar, below the search, rather than floating over
   the middle of the screen. The map is the thing a visitor is trying to
   understand; covering it to tell them about a walking tour of it was
   self-defeating, and the panel was tall enough to push its own buttons off
   the bottom of the window. */

#tourSell, #tourIntro, #tourLocation, #tourUnavailable {
  display: block;
  margin: 0 10px 10px 10px;
  /* The sidebar is a flex column, so without this the panel gets squashed
     instead of scrolling, and the text turns into a two-line letterbox. */
  flex-shrink: 0;
}

#tourIntroBox {
  background: #fff;
  width: auto;
  border-radius: 6px;
  border-top: 5px solid #1a3a6a;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* On a phone the sidebar is the whole screen, so the panel can breathe. */
@media (max-width: 700px) {
  #tourIntroBox { padding: 16px; }
}
#tourIntroBox h2 {
  margin: 0 0 10px 0; color: #1a3a6a; font-size: 17px;
}
#tourIntroBody p {
  margin: 0 0 9px 0; line-height: 1.45; color: #2b2b2b; font-size: 13px;
}
#tourIntroBody .introNote {
  background: #f2e6c8; border-left: 3px solid #1a3a6a;
  padding: 8px 10px; border-radius: 3px;
}
#tourIntroBody .introReady { font-size: 13px; margin-top: 12px; }

/* The buttons must never scroll out of reach - the panel body scrolls, the
   controls stay put. That was the actual fault in the screenshot: "Yes, take
   me round" had been pushed to the bottom edge of the window.
   The scrollbar only appears when there is genuinely more to read. */
#tourIntroBody {
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
#tourIntroBody::-webkit-scrollbar { width: 8px; }
#tourIntroBody::-webkit-scrollbar-thumb {
  background: #c9bd9c; border-radius: 4px;
}

/* And the sidebar as a whole scrolls, so a long panel plus a long result
   list can never trap content below the fold. */
#sidebar { -webkit-overflow-scrolling: touch; }
#buttonGroup, #searchSection { flex-shrink: 0; }
/* Square-ish buttons, side by side.
   A thumb lands on a target by area, not by width. A long thin bar is easy
   to miss vertically on a phone; a chunky near-square is far harder to slip
   off. Minimum 64px tall keeps every control above the 48px touch guideline
   with room to spare. */
#tourIntroControls {
  display: flex; gap: 8px; margin-top: 12px;
}
#tourIntroControls button {
  /* Each button is the footprint of Search and Clear put together: the same
     half-width, but deep enough to be a block rather than a strip. */
  flex: 1 1 0;
  min-height: 86px;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* On a phone the sidebar is full width, so they can be squarer still. */
@media (max-width: 768px) {
  #tourIntroControls button { min-height: 96px; font-size: 16px; }
}
#tourIntroNext { background: #1a3a6a; color: #fff; }
#tourIntroEnd, #tourUnavailableClose { background: #e6dcc4; color: #1a3a6a; }

/* ── Record card, results, photos ──────────────────────── */
.plotHead {
  font-weight: 700; color: #1a3a6a; font-size: 13px;
  padding: 4px 2px 8px; border-bottom: 1px solid #d4c8a8; margin-bottom: 8px;
}
.noHits { color: #7a6f57; font-style: italic; }
.recCard {
  background: #fff; border: 1px solid #d4c8a8; border-radius: 6px;
  padding: 14px; font-size: 14px; line-height: 1.55; color: #2b2b2b;
}
.recCard h3 { margin: 0 0 10px 0; color: #1a3a6a; font-size: 17px; }
.recCard p { margin: 0 0 7px 0; }
.recWarn {
  background: #fdf3e0; border-left: 4px solid #e1b146;
  padding: 8px 10px; border-radius: 3px; font-size: 13px;
}
.recStone { margin: 10px 0; }
.recStone pre {
  background: #f4f0e4; border: 1px solid #e0d8c0; border-radius: 4px;
  padding: 9px 11px; margin: 5px 0 0 0;
  font-family: Georgia, 'Times New Roman', serif; font-size: 13px;
  white-space: pre-wrap; letter-spacing: .5px; color: #3a3428;
}
.recObit { margin: 10px 0; }
.recObit summary { cursor: pointer; font-weight: 700; color: #1a3a6a; }
.recObit p { margin-top: 8px; font-size: 13px; }
.recPhotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.recPhoto {
  width: 88px; height: 88px; object-fit: cover;
  border: 1px solid #d4c8a8; border-radius: 4px; cursor: pointer;
}
.recBack {
  margin-top: 14px; padding: 9px 16px; background: #1a3a6a; color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-weight: 700;
}

/* Collapse the search box while a record is open, so the card is visible */
#searchSection.collapsed input,
#searchSection.collapsed #searchButtons { display: none; }
#searchSection.collapsed h3::after {
  content: " — open"; font-weight: 400; font-size: 11px; color: #7a6f57;
}
#resultsSection { scroll-margin-top: 0; }

/* ── Guided tour stops ─────────────────────────────────── */
.tourStop {
  background: #fff; border: 1px solid #d4c8a8; border-radius: 6px;
  border-top: 5px solid #1a3a6a; padding: 14px;
  font-size: 14px; line-height: 1.65; color: #2b2b2b;
}
.tourStopNo {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #7a6f57; font-weight: 700;
}
.tourStop h3 { margin: 2px 0 4px 0; color: #1a3a6a; font-size: 18px; }
.tourPlot {
  font-size: 12px; color: #7a6f57; margin: 0 0 12px 0 !important;
  border-bottom: 1px solid #e6dcc4; padding-bottom: 8px;
}
.tourStop p { margin: 0 0 11px 0; }
.tourGuide {
  margin-top: 14px; background: #f2e6c8; border-left: 4px solid #1a3a6a;
  padding: 10px 12px; border-radius: 3px; font-size: 13px;
}
.tourGuide strong { display: block; color: #1a3a6a; margin-bottom: 6px; }
.tourGuide p { margin: 0 0 7px 0; }

/* ── Guided tour narration ──────────────────────────────────────────
   .speaking  = the line the voice is reading right now
   .ready     = Next button, once the narration for this stop has ended  */

.tourStop p.speaking {
  background: #fff6d8;
  border-left: 3px solid #c8a02a;
  padding: 6px 10px;
  margin-left: -13px;
  border-radius: 0 4px 4px 0;
  transition: background 0.25s ease;
}

.tourGuide p.speaking {
  background: #e8eff9;
  border-left-color: #1a3a6a;
}

#tourControls button:disabled {
  opacity: 0.4;
  cursor: default;
}

#tourControls button#tourNext.ready {
  background: #1a3a6a;
  color: #fff;
  animation: tourNextPulse 1.6s ease-in-out infinite;
}

@keyframes tourNextPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #tourControls button#tourNext.ready { animation: none; }
  .tourStop p.speaking { transition: none; }
}

/* The opening line of the sell screen. It is the hook, so it is allowed to
   look like one rather than like another paragraph of instructions. */
.sellLead {
  font-size: 19px;
  line-height: 1.45;
  color: #1a3a6a;
  font-weight: 600;
  margin-bottom: 14px;
}

#tourSellYes {
  background: #1a3a6a;
  color: #fff;
}

/* Shown under the result count when the map is not showing every match. */
.plotNote {
  font-size: 12px;
  color: #6a4a1a;
  background: #fff8e6;
  border-left: 3px solid #c8a02a;
  padding: 6px 9px;
  margin: 0 0 8px 0;
  border-radius: 0 4px 4px 0;
}

/* Tour lines that move the map when tapped. Marked so a reader knows they can. */
.tourStop p.tapStep {
  cursor: pointer;
  padding: 8px 10px 8px 30px;
  margin-left: -10px;
  border-radius: 5px;
  background: #f4f0e4;
  border-left: 3px solid #c9b380;
  position: relative;
}
.tourStop p.tapStep::before {
  content: "\25B8";
  position: absolute; left: 11px; top: 8px;
  color: #1a3a6a; font-size: 13px;
}
.tourStop p.tapStep:hover { background: #ece6d4; }
.tourStop p.tapStep.atStep {
  background: #fdf3e0;
  border-left-color: #e00000;
}
.tourStop p.tapStep.atStep::before { content: "\25B8"; color: #e00000; }

/* ── Reveal engine: one beat at a time ──────────────────────────────────
   Reading position drives the tour, so the panel needs to show three things
   it never had to before: what is still hidden, how to move on, and how far
   through the visitor actually is. */

.tourStop p.veiled,
.tourStop .tourGuide.veiled { display: none; }

.tourStopHead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.tourStepCount {
  font-size: 11px; letter-spacing: 0.6px; color: #7a6f57;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The tap target. Big, obvious, and the full width of the panel - this is
   being used one-handed, in sunlight, on uneven ground. */
.tourContinue {
  margin-top: 14px;
  padding: 13px 12px;
  text-align: center;
  font-size: 14px; font-weight: 600; color: #1a3a6a;
  background: #f2e6c8;
  border: 1px dashed #c9b380;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.tourContinue::after {
  content: "\25BE";
  margin-left: 8px;
  animation: tourNudge 1.8s ease-in-out infinite;
  display: inline-block;
}
.tourContinue:hover { background: #ece0be; }
.tourContinue.atEnd {
  background: #eef3fa;
  border-style: solid; border-color: #1a3a6a;
  color: #1a3a6a; cursor: default;
}
.tourContinue.atEnd::after { content: ""; animation: none; }

@keyframes tourNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* For readers who would rather have the page than the beats. */
.tourReadAll {
  margin-top: 8px; text-align: center;
  font-size: 12px; color: #7a6f57; text-decoration: underline;
  cursor: pointer; user-select: none;
}
.tourReadAll:hover { color: #1a3a6a; }

/* The last beat of every stop: the one that draws the route onward. */
.tourStop p.wayStep {
  margin-top: 14px;
  padding: 10px 12px;
  background: #eef3fa;
  border-left: 3px solid #1a3a6a;
  border-radius: 0 4px 4px 0;
  font-weight: 600; color: #1a3a6a;
}

/* How much of the whole tour has been read. Beats revealed, not stops opened. */
.tourProgress {
  margin-top: 14px; height: 5px; border-radius: 3px;
  background: #e6dcc4; overflow: hidden;
}
.tourProgressFill {
  height: 100%; width: 0%;
  background: #1a3a6a;
  transition: width 0.35s ease;
}
.tourProgressLabel {
  margin-top: 5px; text-align: right;
  font-size: 11px; color: #7a6f57;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .tourContinue::after { animation: none; }
  .tourProgressFill { transition: none; }
}

/* ── Copyright notice ───────────────────────────────────────────────────
   Wording lives in credits.js and is stamped into anything carrying
   data-credit. Never type it into the markup - that is how the app ended up
   with four different versions of it. */

#footer {
  line-height: 1.5;
}

.creditNote {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e6dcc4;
  font-size: 11px;
  line-height: 1.5;
  color: #7a6f57;
}

/* "Also recorded as ..." — for a visitor who arrived searching one of the
   eight other names this ground goes by. */
.akaNote {
  font-size: 11px;
  line-height: 1.5;
  color: #7a6f57;
  font-style: italic;
  margin: 6px 0 12px 0;
}

/* ── Tour stop list ──────────────────────────────────────────────────
   Between the map and the stories. It replaces three separate jobs the
   buttons used to do badly: how far through am I, what is coming, and
   how do I get back to the one I missed. */
#tourStops {
  width: 210px;
  flex-shrink: 0;
  background: #122c52;
  border-left: 2px solid #1a3a6a;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#tourStops.hidden { display: none; }

#tourStopsHead {
  padding: 14px 16px 10px;
  color: #cfe0f7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

#tourStopsList {
  list-style: none;
  margin: 0;
  padding: 6px 0 18px;
}

/* Whole row is the target, not the text - a thumb on a phone lands on an
   area. 44px minimum, which is the accessible floor for a touch target. */
#tourStopsList button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  color: #dce8f8;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
#tourStopsList button:hover { background: rgba(255,255,255,0.07); }
#tourStopsList button:focus-visible { outline: 2px solid #7fb2ff; outline-offset: -2px; }

#tourStopsList .stopNo {
  flex-shrink: 0;
  width: 22px;
  color: #8fb4e6;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Where you are now. Colour alone is not enough - the bar and the weight
   carry it too, for anyone who cannot separate the two blues. */
#tourStopsList .current {
  background: rgba(255,255,255,0.13);
  border-left-color: #e00000;
  font-weight: 700;
  color: #ffffff;
}
#tourStopsList .current .stopNo { color: #ffffff; }

/* Already read. Dimmed, never hidden - going back is the whole point. */
#tourStopsList .visited { color: #93aacb; }
#tourStopsList .visited .stopNo { color: #6d87ab; }

/* On a phone the list becomes a strip across the top of the stories, so it
   costs height instead of the width the map cannot spare. */
@media (max-width: 820px) {
  #tourStops {
    width: 100%;
    order: 3;
    max-height: 132px;
    border-left: none;
    border-top: 2px solid #1a3a6a;
  }
  #tourStopsHead { padding: 8px 12px 6px; }
  #tourStopsList { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; }
  #tourStopsList li { flex: 0 0 auto; }
  #tourStopsList button {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 148px;
    border-left: none;
    border-bottom: 4px solid transparent;
    white-space: normal;
  }
  #tourStopsList .current { border-left-color: transparent; border-bottom-color: #e00000; }
}

/* ── "Coming soon" on a tour that is not built yet ───────────────────
   Said on the button, not after the tap. Being told a thing is
   unavailable only once you have asked for it wastes your time and
   reads like a fault rather than a plan. */
.navBtn.comingSoon {
  position: relative;
  overflow: hidden;
  cursor: default;
}
.navBtn.comingSoon .navIcon,
.navBtn.comingSoon .navLabel { opacity: 0.42; }
.navBtn.comingSoon:hover { background: #fff; }

.comingSoonFlag {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Rotated to the button's own diagonal so it reads as a stamp across
     the face rather than a label that happens to sit on top of it. */
  transform: translate(-50%, -50%) rotate(-13deg);
  width: 132%;
  padding: 3px 0;
  background: #c8102e;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .comingSoonFlag { font-size: 8.5px; }
}

/* ── Virtual Tour: the film sits where the map sits ──────────────────
   Over the map rather than beside it. On a phone there is only room
   for one of them, and half a map is not a compromise, it is clutter. */
#tourVideoPane {
  position: absolute;
  inset: 0;
  background: #0d1b2f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
#tourVideoPane.hidden { display: none; }

#tourVideo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #000;
}
#tourVideo.hidden { display: none; }

/* Said when a stop has no film. The tour carries on either way, so this
   is a note, not an error. */
#tourVideoNone {
  max-width: 30ch;
  margin: 0;
  padding: 0 24px;
  color: #cfe0f7;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
#tourVideoNone.hidden { display: none; }

/* The map controls belong to the map. Hide them while film is playing
   rather than leaving three dead buttons floating over it. */
body.virtualTour #mapControls { display: none; }

/* The descent. While the map is flying down into the stop, the film pane
   steps aside - it does not fade, it gets out of the way entirely, so the
   map underneath is being looked at rather than glimpsed through. */
#tourVideoPane{ transition:opacity .45s ease }
#tourVideoPane.descending{ opacity:0; pointer-events:none }


/* ── Virtual Tour film ─────────────────────────────────────────────── */
#filmModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 12px;
}
#filmModal.hidden { display: none; }
#filmBox {
  width: min(100%, 1280px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#filmHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f2e6c8;
  font-size: 16px;
}
#filmClose {
  background: #f2e6c8;
  color: #1a3a6a;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#filmVideo {
  width: 100%;
  max-height: calc(100vh - 70px);
  background: #000;
  border-radius: 6px;
}