/* =====================================================================
   Map Making page
   Desktop: the same "T" of lines as every other page (black line and red line cross
   at the same spot); the tab buttons sit just right of the red line, the picture of
   the selected tab to the right of the buttons, the text underneath.
   ===================================================================== */
.mm {
  --mm-in: calc(3 * var(--u));         /* red line: as far in from the black line's start as on the other pages */
  --mm-menu: calc(14.4 * var(--u));    /* width of the tab-button column (right of the red line) */
  --mm-red: #c8102e;
  position: absolute; z-index: 3;
  left: 15%; top: 20cqh; width: calc(68 * var(--u));   /* black line: same place and length as on the other pages */
  display: grid; grid-template-columns: var(--mm-in) var(--mm-menu) 1fr; grid-template-rows: auto auto 1fr;
}
.mm__title {
  grid-column: 2 / -1; grid-row: 1;
  margin: 0; padding: 0 0 calc(.4 * var(--u)) calc(1.4 * var(--u));
  font-weight: normal; font-size: calc(3.3 * var(--u)); color: #945429;
  border-left: 1px solid var(--mm-red);
  position: relative;
}
.mm__title::after {           /* horizontal rule, crossing the red line like the logo */
  content: ""; position: absolute; bottom: 0; right: 0;
  left: calc(-1 * var(--mm-in)); height: 1px; background: #5a3a20;
}
.mm__tabs {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(.7 * var(--u));
  padding: calc(1 * var(--u)) 0 calc(.6 * var(--u)) calc(1.4 * var(--u));
  border-left: 1px solid var(--mm-red);           /* the red line runs on down beside the buttons */
  position: relative; z-index: 2;
}
.mm__tab {
  width: calc(12 * var(--u)); padding: calc(.35 * var(--u)) calc(.9 * var(--u));
  border: 0; border-radius: 1px; cursor: pointer;
  background: rgba(255, 68, 0, .09); color: #222;
  font-size: calc(1.45 * var(--u)); text-align: left;
  transition: background-color .2s;
}
.mm__tab:hover { background: rgba(255, 208, 0, .45); }
.mm__tab[aria-selected="true"] { background: #FFD000; }
.mm__tab:focus-visible, .mm__example:focus-visible, .mm__close:focus-visible { outline: 2px solid var(--mm-red); outline-offset: 2px; }

/* the selected panel: picture to the right of the buttons, text below */
.mm__panel {
  grid-column: 1 / -1; grid-row: 2 / 4;
  display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; align-content: start;
  pointer-events: none;             /* the panel box lies over the buttons */
}
.mm__panel[hidden] { display: none; }
.js .mm:not(.mm--ready) .mm__panel ~ .mm__panel { display: none; }   /* until the script has picked the tab: no flash of all six */

/* ---------- JavaScript off: no tabs or pop-ups; the six sections one below the other, each with its name ---------- */
html:not(.js) .mm__tabs, html:not(.js) .mm__example { display: none; }
html:not(.js) .mm {
  grid-template-rows: auto;
  max-height: calc(72cqh - 2 * var(--u)); overflow-y: auto;   /* scrolls inside the board, like the Terms */
  scrollbar-width: thin; scrollbar-color: rgba(90, 58, 32, .45) transparent;
}
html:not(.js) .mm__panel { grid-row: auto; margin-top: calc(1.5 * var(--u)); }
html:not(.js) .mm__panel::before {      /* the tab's name, where the buttons would be */
  content: attr(data-label);
  grid-column: 2; grid-row: 1; align-self: start;
  margin: calc(1 * var(--u)) 0 0 calc(1.4 * var(--u)); width: calc(12 * var(--u));
  padding: calc(.35 * var(--u)) calc(.9 * var(--u)); background: #FFD000; color: #222;
  font-size: calc(1.45 * var(--u));
}
.mm__panel > * { pointer-events: auto; }
.mm__pic {
  grid-column: 3; grid-row: 1;
  margin: calc(1 * var(--u)) 0 0 calc(1 * var(--u));
  width: auto; height: calc(19 * var(--u)); max-width: calc(40 * var(--u)); object-fit: contain; object-position: left top;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,.25));
  animation: mm-in .5s ease-out;
}
.mm__text {
  grid-column: 2 / -1; grid-row: 2;     /* starts in line with the title, as on the other pages */
  margin-top: calc(2 * var(--u)); padding-left: calc(1.4 * var(--u));
  max-width: calc(min(68 * var(--u), 69.5cqw - 18.25 * var(--u)) - var(--mm-in));   /* to the end of the black line (or short of the compass) */
  font-size: calc(1.5 * var(--u)); line-height: 1.38; color: #333;
  animation: mm-in .5s ease-out;
}
.mm__text p { margin: 0 0 .75em; text-align: justify; }
.mm__text a { color: var(--link); font-weight: bold; }
@keyframes mm-in { from { opacity: 0; } to { opacity: 1; } }

.mm__example {
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--link); font-weight: bold; text-decoration: underline; text-underline-offset: 2px;
  margin-right: 1.2em;
}
.mm__example:hover { color: var(--rust); }

/* ---------- Example pop-ups ---------- */
.mm__dialog {
  width: min(94vw, 1150px); max-height: 92vh; padding: 0; border: 0;
  background: #EAE0BA; color: #222; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  overflow: auto;
}
.mm__dialog::backdrop { background: rgba(10, 25, 50, .4); }
.mm__dialog[open] { animation: mm-in .4s ease-out; }
.mm__close {
  position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
}
.mm__close img { width: 100%; height: 100%; }
.mm__ex {
  display: grid; grid-template-columns: minmax(220px, 30%) 1fr; gap: 24px; align-items: end;
  padding: 24px 24px 24px;
}
.mm__ex-pic { grid-column: 2; grid-row: 1; justify-self: center; max-height: calc(92vh - 60px); width: auto; object-fit: contain; }
.mm__ex-text {
  grid-column: 1; grid-row: 1;
  background: #fff; padding: 12px 16px; font-size: 15px; line-height: 1.4;
}
.mm__ex-text h2 { margin: 0 0 .4em; font-size: 17px; }
.mm__ex-text h3 { margin: 1em 0 .3em; font-size: 15px; }
.mm__ex-text p { margin: 0 0 .7em; }
.mm__downloads { margin: 0; padding-left: 1.1em; }
.mm__downloads a { color: var(--link); font-weight: bold; }

@media (max-width: 760px) {
  .mm__ex { grid-template-columns: 1fr; }
  .mm__ex-pic, .mm__ex-text { grid-column: 1; grid-row: auto; }
}

/* ---------- Phones (same switch as the rest of the site) ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .mm {
    position: relative; left: auto; top: auto; width: auto;
    display: block; margin-top: 4cqw;
  }
  /* phones: a short red line crosses the title's rule, like the logo */
  .mm__title { margin-left: 4cqw; padding: 0 0 1.5cqw 2.5cqw; font-size: 8cqw; }
  .mm__title::after { left: -4cqw; }
  .mm__title::before { content: ""; position: absolute; left: -1px; top: 100%; width: 1px; height: 4cqw; background: var(--mm-red); }
  .mm__tabs { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 2cqw; border-left: 0; padding: 4cqw 0; }
  .mm__tab { width: auto; flex: 1 1 26cqw; text-align: center; font-size: 4.2cqw; padding: 1.6cqw 2cqw; }
  .mm__panel { display: block; }
  html:not(.js) .mm { max-height: none; overflow: visible; }
  html:not(.js) .mm__panel::before { display: block; width: auto; margin: 6cqw 0 3cqw; padding: 1.6cqw 2cqw; font-size: 4.2cqw; text-align: center; }
  .mm__pic { margin: 0 auto 4cqw; height: auto; width: auto; max-width: 100%; max-height: 60cqw; object-position: center; }
  .mm__text { padding: 0 0 0 6.5cqw; max-width: none; margin: 0; font-size: 4.3cqw; }   /* in line with the title, as on the other pages */
}