/* Modernised side panel for map.html. Loaded after mapstyles.css; remove the <link> to revert. */
div#holRightBox {
  top: 4.25rem;
  right: 0.75rem;
  width: 21rem;
  max-height: calc(100% - 5rem);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
}
div#holRightBox.hidden { right: -22rem; }

/* top bar: slim, light, with a round close button */
div#navCloseDiv {
  background: rgba(248, 250, 252, 0.55);
  border-bottom: 1px solid #e5e9f0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.35rem 0.6rem;
  line-height: 1;
}
div#navCloseDiv span.closeBtn {
  background: #e8ecf2;
  color: #475569;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}
div#navCloseDiv span.closeBtn:hover { background: #334155; color: #fff; }

/* header: title, master checkbox, search */
nav#holNav h2 {
  height: auto;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.45);
  position: sticky;
  top: 0;
  z-index: 2;
}
nav#holNav h2 span#navCaption {
  text-align: left;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #1e293b;
}
button#btnNavSearch {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transition: background 0.15s;
}
button#btnNavSearch:hover { background: #e2e8f0; }
button#btnNavSearch > img { width: 1.1rem; height: 1.1rem; }
input#inpNavSearch {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input#inpNavSearch:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

/* category rows: soft tinted pills, colour accent bar, easy to hit */
nav#holNav ul { margin: 0.4rem 0.5rem; padding: 0; }
nav#holNav > ul > li {
  margin: 0.3rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border-left: 4px solid currentColor;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
nav#holNav > ul > li > span { font-weight: 550; font-size: 0.93rem; line-height: 1.3; }
nav#holNav > ul > li:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }
nav#holNav > ul > li > span:before { font-size: 0.7em; opacity: 0.7; transition: transform 0.15s; }

/* sub-items */
nav#holNav > ul > li > ul { font-size: 0.9rem; margin-top: 0.6rem; }
nav#holNav > ul > li > ul > li {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 0.35rem 0.4rem;
}
ul#holCategories > li > ul > li:hover { background-color: rgba(255, 255, 255, 0.75); border-bottom-color: transparent; }
nav#holNav > ul > li > ul > li.selected span { outline: 2px solid rgba(255, 255, 255, 0.95); border-radius: 6px; }

/* checkboxes: larger, rounded, in the page's accent colour */
nav#holNav input[type="checkbox"] {
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  transition: background 0.12s;
}
nav#holNav input[type="checkbox"]::after {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.12s;
}
nav#holNav input[type="checkbox"]:checked { background: currentColor; }
nav#holNav input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
nav#holNav input[type="checkbox"]:indeterminate { background: currentColor; }
nav#holNav input[type="checkbox"]:indeterminate::after {
  height: 0; width: 0.55rem; border-left: 0; border-bottom: 2px solid #fff; transform: none;
}
nav#holNav h2 input#chkShowAll { color: #334155; }
nav#holNav input[type="checkbox"]:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; }

/* slim scrollbar */
nav#holNav { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* description panel below the list */
div#holInfo { border-radius: 0; border-top: 1px solid rgba(15, 23, 42, 0.1); background-color: rgba(255, 255, 255, 0.6); }
div#infoCloseDiv { background: rgba(248, 250, 252, 0.55); border-radius: 0; }

/* Timeline box: same translucent card as the side panel */
div.timeline {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  color: #1e293b;
  transition: background 0.2s;
}
div.timeline.enabled { background: rgba(255, 255, 255, 0.85); }
div.timeline > label { font-weight: 650; font-size: 0.95rem; }
#lblTimeline { text-shadow: none; }
#popCount { text-shadow: none; font-weight: 600; color: #334155; }

div.timeline #chkTimeline {
  transform: none;
  appearance: none;
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  border: 2px solid #334155;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background 0.12s;
}
div.timeline #chkTimeline::after {
  content: "";
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.12s;
}
div.timeline #chkTimeline:checked { background: #334155; }
div.timeline #chkTimeline:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
div.timeline #chkTimeline:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; }

/* round, soft transport buttons */
div.timeline button {
  background: rgba(241, 245, 249, 0.85);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  padding: 0.25rem;
  transition: background 0.15s, transform 0.1s;
}
div.timeline button:not(:disabled) { cursor: pointer; }
div.timeline button:not(:disabled):hover { background: #e2e8f0; }
div.timeline button:not(:disabled):active { transform: scale(0.94); }
div.timeline button:disabled { background: rgba(241, 245, 249, 0.45); }

/* Timeline layout: five evenly spaced transport buttons, and a taller population graph */
div.timeline {
  height: auto;
  grid-template-columns: max(10%, 3.4rem) 1fr; /* controls take a tenth of the box (never narrower than two buttons) */
  align-items: center;
}
div.timeline #tlButtons {
  display: grid;
  grid-template-columns: repeat(2, 1.5rem);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 0.35rem 0.4rem;
  width: 100%;
}
/* play on top, step back / forward in the middle, jump to start / next event underneath */
div.timeline #btnPlayTimeline { grid-area: 1 / 1 / 2 / 3; justify-self: center; width: 1.9rem; height: 1.9rem; max-width: 1.9rem; max-height: 1.9rem; }
div.timeline #btnStepBTimeline { grid-area: 2 / 1; }
div.timeline #btnStepFTimeline { grid-area: 2 / 2; }
div.timeline #jumpBack { grid-area: 3 / 1; }
div.timeline #jumpAhead { grid-area: 3 / 2; }
div.timeline #tlButtons button,
div.timeline #jumpAhead,
div.timeline #jumpBack {
  position: static;
  justify-self: center;
  margin: 0;
  width: 1.5rem;
  height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  flex: none;
}
div.timeline #jumpAhead img,
div.timeline #jumpBack img { width: 100%; height: 100%; }
div.timeline #tlButtons button { padding: 0.1rem; }
div.timeline #tlButtons button > img { width: 100%; height: 100%; }
div.timeline #inputContainer { height: 5.75rem; } /* graph + a strip for the event flags */
div.timeline #inputContainer img {
  height: 4.5rem;
  object-fit: fill; /* stretch the graph to the full height of the box */
}
div.timeline #inputContainer input { bottom: auto; top: 0; height: 4.5rem; margin: 0; background: transparent; }

/* Lato throughout (icon glyphs keep their own "ui-font"). */
html, body, button, input, select, textarea, #holNav, #holInfo, #holDocDisplay, div.timeline,
ul.holMenu > li > ul li, .ol-control button, .ol-zoom button, #splash, #lblTimeline, #popCount, #tlTooltip {
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
}
div#holToolbar select, #holRightBox select { font-family: "Lato", "Segoe UI", Arial, sans-serif; }

/* Major-events popup (#nonGeo): same card as the side panel */
div#nonGeo {
  width: min(22rem, 40vw);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  color: #1e293b;
}
div#nonGeo.hidden { display: none; }
div#nonGeo #hideNonGeo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: rgba(248, 250, 252, 0.55);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0;
  box-shadow: none;
  padding: 0.35rem 0.6rem;
  line-height: 1;
  cursor: default;
}
div#nonGeo #hideNonGeo span.closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  background: #e8ecf2;
  color: #475569;
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
div#nonGeo #hideNonGeo span.closeBtn:hover { background: #334155; color: #fff; }
div#nonGeo #nonGeoContent {
  width: auto;
  max-height: 58vh;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.25rem 0.5rem 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
div#nonGeo #nonGeoContent h3 {
  margin: 0;
  padding: 0.6rem 0.5rem 0.2rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1e293b;
}
div#nonGeo #nonGeoContent p {
  margin: 0;
  padding: 0.3rem 0.5rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}

/* Welcome splash: same card as the side panel, timeline and event popups */
div#splash {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(36rem, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.4rem 1.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.28), 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
  color: #334155;
  text-align: left;
  line-height: 1.5;
  z-index: 10000;
  cursor: pointer;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
div#splash br { display: none; }
div#splash h1 {
  margin: 0 0 0.6rem;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1e293b;
}
div#splash h3,
div#splash p.lead {
  margin: 0 0 1rem;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  color: #475569;
}
div#splash h3 img,
div#splash p.lead img { vertical-align: -4px; }
div#splash h2,
div#splash h2#underline {
  margin: 1.1rem 0 0.4rem;
  padding-bottom: 0.3rem;
  text-align: left;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e293b;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
div#splash li.note { list-style: none; margin-left: -1.1rem; color: #475569; }
div#splash ul { margin: 0; padding-left: 1.1rem; }
div#splash li { margin: 0 0 0.55rem; font-size: 0.9rem; }
div#splash li::marker { color: #64748b; }
div#splash p { margin: 0.4rem 0 0.2rem; font-size: 0.9rem; color: #475569; }
div#splash::after {
  content: "Click anywhere to close";
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
}

/* =====================================================================================
   Responsive layout.  Breakpoints: phone (<=640px wide, or a short landscape phone),
   tablet (641-1024px), laptop/desktop (above), large screens (>=1600px).
   js/responsive.js adds the helper classes/variables used here.
   ===================================================================================== */
html, body { height: 100vh; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
html, body { overflow: hidden; -webkit-text-size-adjust: 100%; }
#map { touch-action: none; }

/* ---- Large screens: a little more room and larger type ---- */
@media (min-width: 1600px) {
  div#holRightBox { width: 24rem; }
  div.timeline { width: 44vw; max-width: 60rem; }
  div#nonGeo { width: 26rem; }
  nav#holNav > ul > li > span { font-size: 1rem; }
  div#holToolbar select { font-size: 1rem; }
}

/* ---- Tablet ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  div#holRightBox { width: 19rem; right: 0.5rem; }
  div#holRightBox.hidden { right: -21rem; }
  div.timeline { box-sizing: border-box; width: min(34rem, calc(100vw - 21rem - 2vw)); }
  div#nonGeo { width: min(20rem, 34vw); top: 14vh; }
}

/* ---- Phones (portrait) and short landscape screens ---- */
@media (max-width: 640px), (max-height: 480px) {
  /* side panel: a sheet above the timeline, closed until the menu button is pressed */
  div#holRightBox {
    top: auto;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    bottom: calc(var(--tl-h, 9.5rem) + 1rem);
    max-height: min(52dvh, 28rem);
    z-index: 5;
  }
  div#holRightBox.hidden { right: 0.5rem; left: 0.5rem; transform: translateY(130%); opacity: 0; pointer-events: none; }
  div#holRightBox { transition: transform 0.3s ease-in-out, opacity 0.25s; }
  div#holRightBox div#holInfo { display: none !important; } /* the description lives in its own card, below */

  /* description card (moved out of the panel by responsive.js) */
  body > div#holInfo {
    position: fixed;
    top: 4rem;
    left: 3.4rem;
    right: 0.5rem;
    max-height: 34dvh;
    overflow: auto;
    z-index: 6;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
    font-size: 0.92rem;
  }

  /* timeline: full width along the bottom */
  div.timeline {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    padding: 0.55rem 0.65rem;
    grid-template-columns: max(10%, 3.4rem) 1fr;
    z-index: 4;
  }
  div.timeline #inputContainer { height: 5rem; }
  div.timeline #inputContainer img { height: 3.7rem; }
  div.timeline #inputContainer input { height: 3.7rem; }
  #popCount { font-size: 0.85rem; }

  /* map furniture */
  .ol-zoom { top: 4.2rem; }
  div#nonGeo {
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    bottom: calc(var(--tl-h, 9.5rem) + 1rem);
    width: auto;
    z-index: 7;
  }
  div#nonGeo #nonGeoContent { max-height: 32dvh; }
  div#splash { width: 94vw; padding: 1.1rem 1.1rem 1rem; max-height: 88dvh; }
  div#splash h1 { font-size: 1.3rem; }
}

/* Touch screens: bigger targets, no hover tooltips */
@media (pointer: coarse) {
  nav#holNav > ul > li { padding: 0.8rem 0.8rem; }
  nav#holNav input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  div#navCloseDiv span.closeBtn, div#nonGeo #hideNonGeo span.closeBtn { width: 2.1rem; height: 2.1rem; }
  div.timeline button { width: 2rem; height: 2rem; max-width: 2rem; max-height: 2rem; }
  div.timeline #tlButtons { grid-template-columns: repeat(2, 2rem); }
  div.timeline #chkTimeline { width: 1.7rem; height: 1.7rem; }
  .ol-zoom button { width: 2.2rem; height: 2.2rem; font-size: 1.4rem; }
  button#btnNavSearch { width: 2.75rem; height: 2.75rem; }
}

/* description card close button: same round button as the panel */
div#holInfo span.closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  background: #e8ecf2;
  color: #475569;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}
div#holInfo span.closeBtn:hover { background: #334155; color: #fff; }
div#infoCloseDiv { justify-content: flex-start; padding: 0.35rem 0.6rem; }
@media (pointer: coarse) { div#holInfo span.closeBtn { width: 2.1rem; height: 2.1rem; } }

/* Short, wide screens (phones held sideways): compact timeline, panel on the right edge */
@media (max-height: 480px) and (min-width: 641px) {
  div.timeline {
    right: auto;
    width: min(32rem, calc(100vw - 21rem));
    padding: 0.4rem 0.6rem;
  }
  div.timeline #inputContainer { height: 3.6rem; }
  div.timeline #inputContainer img, div.timeline #inputContainer input { height: 2.5rem; }
  div#holRightBox, div#holRightBox.hidden {
    top: 3.75rem;
    bottom: 0.5rem;
    left: auto;
    right: 0.5rem;
    width: 19rem;
    max-height: none;
  }
  div#holRightBox.hidden { transform: translateX(120%); }
  body > div#holInfo { left: auto; width: 19rem; max-height: 40dvh; top: 3.75rem; }
  div#nonGeo { right: auto; width: min(20rem, 40vw); }
  div#splash { max-height: 92dvh; }
}


/* =====================================================================================
   Consistency pass: every remaining control uses the same soft, rounded look
   ===================================================================================== */

/* any close button not styled above (the library marks them all span.closeBtn) */
span.closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  background: #e8ecf2;
  color: #475569;
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
span.closeBtn:hover { background: #334155; color: #fff; }
@media (pointer: coarse) { span.closeBtn { width: 2.1rem; height: 2.1rem; } }

/* "See more" document panel */
div#holDocDisplay {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  color: #1e293b;
}
div#holDocDisplay span.closeBtn { margin: 0.5rem 0 0 0.6rem; font-size: 1rem; padding: 0; }
div#holDocDisplay iframe#holDocDisplayFrame { margin: 0.25rem 0 0; width: 100%; border: 0; }

/* top bar controls: light rounded buttons and dropdown on the dark bar */
div#holToolbar select,
div#holToolbar button {
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 10px;
  color: #1e293b;
  box-shadow: none;
  transition: background 0.15s;
  cursor: pointer;
}
div#holToolbar select { padding: 0.35rem 0.6rem; }
div#holToolbar button:hover, div#holToolbar select:hover { background: #fff; }
div#holToolbar button#mobileMenuToggle.menuHidden { background: rgba(255, 255, 255, 0.92); }

/* zoom buttons */
.ol-zoom { background: transparent; }
.ol-zoom button, .ol-control button {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #1e293b;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  margin: 2px 0;
}
.ol-zoom button:hover, .ol-control button:hover { background: #fff; }

/* "Read more" document panel on phones and tablets: the library's width (100% - 50rem) comes out
   negative on narrow screens, so the panel opened with no width. Make it a full-width sheet. */
@media (max-width: 900px), (max-height: 480px) {
  div#holDocDisplay {
    top: 3.75rem;
    margin: 0 0.5rem;
    width: calc(100% - 1rem);
    max-width: none;
    min-width: 0;
    height: calc(100dvh - 4.25rem);
    resize: none;
    z-index: 9;
  }
  div#holDocDisplay iframe#holDocDisplayFrame { height: calc(100% - 2.6rem); }
}

/* "Open in new tab" link in the document panel */
a#holDocOpenTab {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #e8ecf2;
  color: #1e293b;
  font: 600 0.8rem/1 "Lato", "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
a#holDocOpenTab:hover { background: #334155; color: #fff; }

/* Close buttons, final word. The library has hover rules like
   `div#holDocDisplay span.closeBtn:hover` (black background) that outrank the simple rules above,
   so the doubled class here gives these enough weight to win in every state. */
div#holInfo span.closeBtn.closeBtn,
div#holDocDisplay span.closeBtn.closeBtn,
div#navCloseDiv span.closeBtn.closeBtn,
div#nonGeo span.closeBtn.closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e8ecf2;
  color: #475569;
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
div#holInfo span.closeBtn.closeBtn:hover,
div#holDocDisplay span.closeBtn.closeBtn:hover,
div#navCloseDiv span.closeBtn.closeBtn:hover,
div#nonGeo span.closeBtn.closeBtn:hover {
  background: #334155;
  color: #fff;
}
div#holDocDisplay span.closeBtn.closeBtn { position: relative; margin: 0.55rem 0 0 0.65rem; }
@media (pointer: coarse) {
  div#holInfo span.closeBtn.closeBtn, div#holDocDisplay span.closeBtn.closeBtn,
  div#navCloseDiv span.closeBtn.closeBtn, div#nonGeo span.closeBtn.closeBtn { width: 2.1rem; height: 2.1rem; }
  /* no sticky "hover" after a tap */
  div#holInfo span.closeBtn.closeBtn:hover, div#holDocDisplay span.closeBtn.closeBtn:hover,
  div#navCloseDiv span.closeBtn.closeBtn:hover, div#nonGeo span.closeBtn.closeBtn:hover { background: #e8ecf2; color: #475569; }
}

/* The library hides the document panel with an inline `left: -50rem`. Now that the panel can be
   wider than 50rem on mid-size screens, that left a strip showing; push it fully off screen. */
div#holDocDisplay[style*="-50rem"] { margin-left: -100vw; }

/* Icon font: show text straight away and swap the icons in when the font arrives */
@font-face {
  font-family: "ui-font";
  src: url("../fonts/ui.woff2") format("woff2"), url("../fonts/ui.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Only slide the document panel by its own position; hiding it (margin) should be instant */
div#holDocDisplay { transition: left 0.3s ease-in-out; }

/* ==========================================================================================
   "Read more" panel sizing. Sized from the screen and the kind of document (js/doc_links.js sets
   data-kind = video | pdf | page on the panel). It never covers the category panel on the right
   (about 22rem) or the timeline at the bottom. "Expand" widens it to the free space; "Fit page" lays a
   web page out at 1280px and scales it down to the panel instead of cutting it off.
   ========================================================================================== */
div#holDocDisplay {
  --doc-top: 7rem;
  --doc-avail-h: calc(100dvh - var(--doc-top) - var(--tl-h, 9.5rem) - 1.5rem);
  display: flex;
  flex-direction: column;
}
/* the tools bar sits top right; the close button stays top left */
div#holDocTools {
  position: absolute;
  top: 0.45rem;
  right: 0.7rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
a#holDocOpenTab { position: static; }
button.holDocBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.7rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: #e8ecf2;
  color: #1e293b;
  font: 600 0.8rem/1 "Lato", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button.holDocBtn:hover, button.holDocBtn[aria-pressed="true"] { background: #334155; color: #fff; }
button.holDocBtn:focus-visible, a#holDocOpenTab:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.5); outline-offset: 2px; }
/* "Fit page" only makes sense for ordinary web pages (video and PDF scale themselves) */
div#holDocDisplay[data-kind="video"] #holDocFit, div#holDocDisplay[data-kind="pdf"] #holDocFit { display: none; }

div#holDocDisplay #holDocFrameWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.25rem;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
div#holDocDisplay #holDocFrameWrap iframe#holDocDisplayFrame {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}
/* Fit page: lay the page out at --fit-w wide, scale it to the panel */
div#holDocDisplay[data-fit="true"] #holDocFrameWrap iframe#holDocDisplayFrame {
  width: var(--fit-w, 1280px);
  height: var(--fit-h, 100%);
  max-width: none;
  transform: scale(var(--fit-scale, 1));
  transform-origin: 0 0;
}
/* The close button is the first row; the frame fills the rest */
div#holDocDisplay span.closeBtn.closeBtn { flex: 0 0 auto; align-self: flex-start; }

/* video: a 16:9 box, panel height follows */
div#holDocDisplay[data-kind="video"] #holDocFrameWrap { flex: 0 0 auto; aspect-ratio: 16 / 9; height: auto; }

/* ---- desktop and large tablets ---- */
@media (min-width: 901px) and (min-height: 481px) {
  div#holDocDisplay {
    top: var(--doc-top);
    width: clamp(30rem, 46vw, 56rem);
    max-width: none;
    min-width: 0;
    height: var(--doc-avail-h);
    max-height: none;
  }
  div#holDocDisplay[data-kind="pdf"] { width: clamp(32rem, 52vw, 60rem); }
  div#holDocDisplay[data-kind="video"] {
    width: min(clamp(30rem, 60vw, 64rem), calc((var(--doc-avail-h) - 3rem) * 16 / 9));
    height: auto;
  }
  div#holDocDisplay[data-expanded="true"] { width: calc(100vw - 24rem); }
  div#holDocDisplay[data-kind="video"][data-expanded="true"] {
    width: min(calc(100vw - 24rem), calc((var(--doc-avail-h) - 3rem) * 16 / 9));
  }
}

/* ---- phones and short landscape: full-width sheet (rules above in this file); Expand is not needed ---- */
@media (max-width: 900px), (max-height: 480px) {
  div#holDocDisplay { --doc-top: 3.75rem; height: calc(100dvh - 4.25rem); }
  div#holDocDisplay[data-kind="video"] { height: auto; }
  div#holDocDisplay iframe#holDocDisplayFrame { height: 100%; }
  div#holDocDisplay[data-fit="true"] #holDocFrameWrap iframe#holDocDisplayFrame { height: var(--fit-h, 100%); }
  #holDocExpand { display: none; }
  button.holDocBtn .lbl { display: none; }
  button.holDocBtn { width: 1.9rem; padding: 0; justify-content: center; }
}

/* "Fit page" would shrink text to a few pixels on a phone; pages are responsive there anyway */
@media (max-width: 640px) { #holDocFit { display: none; } }

/* ==========================================================================================
   Side panel header: when the list is scrolled down, "Features by category" shrinks to a slim bar and
   becomes mostly opaque, so rows passing underneath are only a soft blur of colour, not readable
   (js/responsive.js adds .scrolled to nav#holNav).
   ========================================================================================== */
nav#holNav h2 {
  transition: min-height 0.2s ease, padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
nav#holNav h2 span#navCaption { transition: font-size 0.2s ease; }
nav#holNav.scrolled h2 {
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
nav#holNav.scrolled h2 span#navCaption { font-size: 0.8rem; }
nav#holNav.scrolled button#btnNavSearch { width: 1.75rem; height: 1.75rem; border-radius: 8px; }
nav#holNav.scrolled button#btnNavSearch > img { width: 0.9rem; height: 0.9rem; }
nav#holNav.scrolled h2 input#inpNavSearch { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  nav#holNav h2, nav#holNav h2 span#navCaption { transition: none; }
}

/* ==========================================================================================
   Side panel: minimize to a slim edge tab and maximize again (like a reader's navigation panel).
   The close button at the panel's left edge is now the handle: a chevron that points the way the panel will move.
   Minimized, the panel keeps a ~2.4rem tab with that handle (its contents are hidden), so the three-line menu
   button in the top bar is no longer needed and is hidden. The library already toggles .hidden on #holRightBox
   when the handle is clicked; js/responsive.js labels the handle and moves the description card out while minimized.
   ========================================================================================== */
button#mobileMenuToggle, button#mobileMenuToggle.menuHidden { display: none !important; }

/* the handle: the "x" glyph is replaced by a chevron */
div#navCloseDiv span.closeBtn.closeBtn { font-size: 0; }
div#navCloseDiv span.closeBtn.closeBtn::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg); /* points right: "tuck the panel away to the right" */
  margin-right: 0.18rem;
  transition: transform 0.25s ease;
}
div#holRightBox.hidden div#navCloseDiv span.closeBtn.closeBtn::before {
  transform: rotate(-135deg); /* points left: "bring it back" */
  margin-right: 0;
  margin-left: 0.18rem;
}

/* minimized: only the tab shows; the list and the description fade out */
div#holRightBox > nav#holNav, div#holRightBox > div#holInfo { transition: opacity 0.2s ease 0.1s; }
div#holRightBox.hidden > nav#holNav, div#holRightBox.hidden > div#holInfo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

/* desktop and tablet: the panel slides right until about 2.4rem of it is left, and shrinks to a short tab */
@media (min-width: 641px) and (min-height: 481px) {
  div#holRightBox { --nav-right: 0.75rem; }
  div#holRightBox.hidden {
    right: var(--nav-right);
    max-height: 3rem;
    overflow: hidden;
    transform: translateX(calc(100% + var(--nav-right) - 2.4rem));
  }
  /* the description card, moved out of the panel while it is minimized */
  body > div#holInfo {
    position: fixed;
    top: 4.25rem;
    right: 3.4rem;
    left: auto;
    width: min(22rem, calc(100vw - 4.5rem));
    max-height: min(60dvh, 34rem);
    overflow: auto;
    z-index: 6;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    border-top: 0;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.12);
    font-size: 0.92rem;
  }
}
@media (min-width: 641px) and (max-width: 1024px) and (min-height: 481px) {
  div#holRightBox { --nav-right: 0.5rem; }
}

/* phones held sideways: the full-height sidebar also folds to the same tab */
@media (max-height: 480px) and (min-width: 641px) {
  div#holRightBox.hidden {
    bottom: auto;
    max-height: 3rem;
    overflow: hidden;
    transform: translateX(calc(100% + 0.5rem - 2.4rem));
  }
}

/* phones in portrait: the sheet folds down to a slim bar above the timeline, with the chevron pointing up */
@media (max-width: 640px) {
  div#holRightBox.hidden {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-height: 2.9rem;
    overflow: hidden;
  }
  div#holRightBox { transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.25s; }
  div#navCloseDiv span.closeBtn.closeBtn::before { transform: rotate(135deg); margin-right: 0; margin-bottom: 0.18rem; }
  div#holRightBox.hidden div#navCloseDiv span.closeBtn.closeBtn::before { transform: rotate(-45deg); margin-left: 0; margin-bottom: 0; margin-top: 0.18rem; }
  div#holRightBox.hidden div#navCloseDiv::after {
    content: "Features by category";
    margin-left: 0.6rem;
    align-self: center;
    font: 650 0.9rem/1 "Lato", "Segoe UI", Arial, sans-serif;
    color: #1e293b;
  }
}

/* ==========================================================================================
   Description card (#holInfo) when it sits on the map instead of inside the side panel: on small screens, and
   on larger ones while the panel is minimized. Long entries were cut off: the card was capped at about a third
   of the screen while its text, in a second scroll area of its own, wanted far more, and "Read more" sat out of
   reach. Now there is ONE scroll area, the card may use the space between the top bar and the bottom controls,
   the close bar stays pinned at the top and "Read more" stays pinned at the bottom.
   ========================================================================================== */
body > div#holInfo {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body > div#holInfo #infoContent { max-height: none; overflow: visible; }
body > div#holInfo > div#infoCloseDiv {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc; /* solid, so text scrolling underneath does not ghost through */
  border-radius: 14px 14px 0 0;
}
/* "Read more..." is a list item inside its own one-item list at the end of the text; the list is what sticks */
body > div#holInfo #infoContent > ul:has(> li.holShowDoc) {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  list-style: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 10px -8px rgba(15, 23, 42, 0.18); /* soft edge where the text slides under */
}
@media (max-width: 640px) {
  /* from under the top bar down to the minimized panel bar above the timeline */
  body > div#holInfo { max-height: calc(100dvh - 4rem - var(--tl-h, 9.5rem) - 5.5rem); }
}
@media (max-height: 480px) and (min-width: 641px) {
  /* phones held sideways: the card is on the right, clear of the timeline on the left */
  body > div#holInfo { max-height: calc(100dvh - 3.75rem - 1rem); right: 3.4rem; /* leave the minimized tab uncovered */ }
}

/* ---- Timeline population label: "Estimated ENP gray whale population: N" ----------------------------------------
   The label is anchored top right above the graph. It is long enough that on narrow timelines (phones, small tablets) it
   ran left under the date, so there it starts to the right of the date, wraps onto two lines, and the graph sits a little
   lower to make room. Wide timelines keep it on one line. */
@media (max-width: 860px) {
  /* "div.timeline #popCount": map.html has its own inline #popCount rule (top: -1.5rem) that comes later in the cascade */
  div.timeline #popCount {
    top: -2.45rem;
    left: 4.9rem;
    right: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: right;
  }
  div.timeline #inputContainer { margin-top: 1.2rem; }
}
@media (max-width: 360px) {
  div.timeline #popCount { left: 4.4rem; font-size: 0.7rem; }
}