/* ===========================================================================
   map-page.css — /map, where the map is the page.

   The map fills the window and everything else floats over it: the way home,
   the credit, and the line that admits when there is nothing to show yet.
   =========================================================================== */

body.mappage {
  margin: 0;
  overflow: hidden;                 /* nothing to scroll to; the map pans */
  background: var(--color-1);
}

.mappage__canvas {
  position: fixed;
  inset: 0;
  width: auto;
  /* dvh, so the map still reaches the bottom when a phone's toolbars slide
     away and 100vh no longer means what it says. */
  height: 100vh;   /* for browsers without dvh */
  height: 100dvh;
  border: 0;
  /* The panel does not sit on top of the map; the map gives up the width. */
  transition: right 0.25s ease;
}

/* With a painting open, the map ends where the panel begins. map-page.js
   watches the element and tells MapLibre it has been resized — left alone it
   would go on drawing at the old width and centre on the wrong point. */
.mappage.is-panel .mappage__canvas { right: 400px; }
.mappage.is-panel .mappage__credit { right: 414px; }

/* --------------------------------------------------------------- the way out */

/* Over the map, which MapLibre gives a stacking context of its own. No box
   around it — the words sit straight on the map. */
.mappage__back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  color: var(--color-5);
  text-decoration: none;
}
.mappage__back:hover { text-decoration: underline; }

/* The artwork page's chevron, scaled up to match the larger words. */
.mappage__chev {
  width: 10px;
  height: 10px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}

/* ------------------------------------------------------------------ notices */

.mappage__credit {
  position: fixed;
  right: 14px;
  bottom: 10px;
  z-index: 10;
  margin: 0;
  font-family: var(--font-family-1);
  font-size: 11px;
  color: var(--color-4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.mappage__empty,
.mappage__fallback {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 26em;
  margin: 0;
  padding: 22px 26px;
  text-align: center;
  font-family: var(--font-family-1);
  font-size: var(--font-size-4);
  color: var(--color-2);
  background: var(--color-8);
  border: 1px solid var(--color-3);
}

/* ------------------------------------------------------------- the painting */

/* A column down the right, beside the map rather than on top of it: the map
   gives up the width, and the painting just opened is eased into what is
   left. */
.mappanel {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100%;
  height: 100dvh;
  overflow-y: auto;
  padding: 16px 18px 24px;
  /* The map's own ground, so the panel reads as the same surface rather than
     as a card laid on it — and its edge is the colour of the coastline. */
  background: var(--color-1);
  border-left: 1px solid var(--map-stroke);
}
.mappanel[hidden] { display: none; }

.mappanel__close {
  /* Its own line at the top right, not floated: a float plus sticky leaves the
     content below it clearing to the wrong edge, and the gap collapses. Sticky
     so it is still there to press part-way down a long essay — with the
     panel's own background, so the painting does not scroll through it. */
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  margin-left: auto;
  background: var(--color-1);
  /* A little larger than MapLibre's 29px + and −, and boxed like them: the
     three are the only buttons on the page and read as a set. */
  width: 34px;
  height: 34px;
  padding: 0;
  margin: -2px -4px 0 auto;
  line-height: 1;
  color: #fff;
  border: 1px solid var(--color-2);
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mappanel__close svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* currentColor on the stroke would need the path to ask for it; simpler to
   move the whole button, border and cross together. */
.mappanel__close:hover { border-color: var(--color-5); }
.mappanel__close:hover svg path { stroke: var(--color-5); }
/* No ring when it is clicked — the panel opening is answer enough. Keyboard
   focus keeps one, or there would be no way to see where you are. */
.mappanel__close:focus { outline: none; }
.mappanel__close:focus-visible { outline: 1px solid var(--color-4); outline-offset: 2px; }

.mappanel__figure {
  /* Room between the close button and the painting under it. */
  margin: 18px 0 20px;
}
.mappanel__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.mappanel__title {
  margin: 0 0 14px;
  /* Smaller than a page heading: it names one painting in a column, not the
     page you are on. */
  font-size: var(--font-size-5);
  /* global.css sets h2 colour with !important, so this has to answer in kind */
  color: var(--color-2) !important;
}

.mappanel__essay {
  color: var(--color-2);
  font-size: var(--font-size-2);
  line-height: 1.45em;
}
.mappanel__essay p { margin: 0 0 1em; }

.mappanel__shop {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 30px;
  border: 1px solid var(--color-2);
  border-radius: 4px;
  color: var(--color-2);
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  text-decoration: none;
}
.mappanel__shop:hover {
  background: var(--color-2);
  color: var(--color-1);
}

/* Clear of a notch and of the home bar, now the page runs under both. */
.mappage__back {
  top: calc(18px + env(safe-area-inset-top));
  left: calc(18px + env(safe-area-inset-left));
}
.mappage .maplibregl-ctrl-top-right {
  margin-top: env(safe-area-inset-top);
  margin-right: env(safe-area-inset-right);
}
.mappage__credit { bottom: calc(10px + env(safe-area-inset-bottom)); }

/* The words sit over land as often as sea, and a town name — Kapalua, on the
   opening view — can run straight through them; a backing keeps them legible
   either way, and the padding makes them a target a thumb can find. */
.mappage__back {
  padding: 8px 14px;
  background: rgba(11, 21, 30, 0.82);
  border: 1px solid var(--color-3);
  border-radius: 4px;
}

@media (max-width: 700px) {
  .mappage__back {
    top: calc(10px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    padding: 9px 13px;
    font-size: var(--font-size-4);
  }
  .mappage__chev { width: 7px; height: 7px; }
  .mappage__credit { right: 10px; font-size: 10px; }
}

/* Below the width where a 400px column would leave the map a sliver, the panel
   comes up from the bottom instead and takes two thirds of the screen — and
   the map gives up height rather than width. */
@media (max-width: 860px) {
  /* 60 rather than two thirds: the map left above is where the pin just
     tapped sits, and at a third of a phone it was too little to see where it
     was. The essay scrolls; the map cannot. */
  .mappanel {
    --sheet: 60dvh;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 60vh;
    height: var(--sheet);
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid var(--map-stroke);
    border-radius: 12px 12px 0 0;
    /* A pull past the end of the essay should not drag the page behind. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: mappanel-up 0.22s ease-out;
  }

  /* The handle: says the sheet can be pulled down, which map-page.js lets it
     be. Sticky with the close button, so it is there at any depth. */
  .mappanel::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto -4px;
    border-radius: 2px;
    background: var(--color-3);
    z-index: 2;
  }

  .mappanel__close {
    top: 6px;
    width: 40px;
    height: 40px;
  }
  .mappanel__figure { margin: 10px 0 16px; }
  .mappanel__figure img {
    /* A tall painting at full width would fill the sheet before a word of
       the essay appeared. */
    max-height: 34dvh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .mappanel__shop {
    display: block;
    text-align: center;
  }

  .mappage__canvas { transition: bottom 0.25s ease; }

  .mappage.is-panel .mappage__canvas {
    right: 0;
    bottom: 60dvh;
    /* height and bottom cannot both hold; below, bottom is the one that
       matters, so the height set for the full-screen case is released. */
    height: auto;
  }
  .mappage.is-panel .mappage__credit { display: none; }
}

@keyframes mappanel-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mappanel { animation: none; }
  .mappage__canvas { transition: none; }
}

/* The photographer of a place's picture, under its description. */
.mappanel__essay .mappanel__credit {
  font-size: var(--font-size-4);
  color: var(--color-4);
}
.mappanel__shop[hidden] { display: none; }