/* Project map, in the style of an Admiralty chart. Loaded after site.css and leaflet.css. */

:root {
  --mag: #B0006E;      /* Admiralty magenta */
  --ink: #14212B;
  --paper: #FBFAF5;
  --c-w: #B0006E; --c-p: #1A5F80; --c-e: #2C8A5B; --c-h: #B8740A; --c-r: #6A3D9A; --c-t: #56626B;
}

/* full page: header on top, the chart fills the rest */
html, body.fullmap { height: 100%; }
body.fullmap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.fullmap .top { flex: none; }
body.fullmap main { flex: 1; position: relative; min-height: 360px; }
#map { position: absolute; inset: 0; background: #CFE3F2; font: 13px/1.45 Verdana, Geneva, "DejaVu Sans", sans-serif; }
.leaflet-container a { color: var(--c-p); }
.leaflet-container:focus-visible { outline: 2px solid var(--c-p); outline-offset: -4px; }

/* the chart border, drawn on a canvas above the chart, below the controls */
.chart-frame { position: absolute; inset: 0; z-index: 450; pointer-events: none; }
.leaflet-top.leaflet-left { top: 14px; left: 14px; }
.leaflet-top.leaflet-right { top: 14px; right: 14px; }
.leaflet-bottom.leaflet-right { bottom: 14px; right: 14px; }
.leaflet-bottom.leaflet-left { bottom: 14px; left: 14px; }
.leaflet-control-attribution { background: rgba(251, 250, 245, .85) !important; font-size: 10px; }
.leaflet-control-scale-line { border-color: var(--ink); color: var(--ink); background: rgba(251, 250, 245, .85); font-size: 10px; }
.leaflet-bar a { color: var(--ink); }

/* ---------- dots: colour = type of project ---------- */
.pdot { display: inline-block; border-radius: 50%; border: 1.5px solid #fff; background: var(--dc, var(--mag));
  box-shadow: 0 0 0 1px var(--dc, var(--mag)), 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer; }
.leaflet-marker-icon.pdot { width: 14px; height: 14px; }
.leaflet-marker-icon.pdot:hover, .leaflet-marker-icon.pdot:focus-visible { transform-origin: center; outline: none; box-shadow: 0 0 0 3px var(--dc), 0 1px 4px rgba(0, 0, 0, .4); }
.pdot--w { --dc: var(--c-w); } .pdot--p { --dc: var(--c-p); } .pdot--e { --dc: var(--c-e); }
.pdot--h { --dc: var(--c-h); } .pdot--r { --dc: var(--c-r); } .pdot--t { --dc: var(--c-t); }
.pdot--k { width: 12px; height: 12px; vertical-align: -1px; margin: 0 .3rem 0 .1rem; cursor: default; }

.pclu { display: flex !important; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 2px solid var(--mag); box-shadow: 0 0 0 3px rgba(176, 0, 110, .22), 0 1px 3px rgba(0, 0, 0, .3);
  color: var(--mag); font: 600 12px/1 Verdana, Geneva, sans-serif; cursor: pointer; }
.pclu:hover, .pclu:focus-visible { background: var(--mag); color: #fff; outline: none; }

/* ---------- popups: chart notes ---------- */
.pnote .leaflet-popup-content-wrapper { border-radius: 0; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink), 0 8px 22px rgba(0, 10, 20, .3); }
.pnote .leaflet-popup-tip { background: var(--paper); border: 1px solid var(--ink); box-shadow: none; }
.pnote .leaflet-popup-content { margin: 14px 18px 12px; font-size: 12.5px; line-height: 1.55; }
.pnote a.leaflet-popup-close-button { color: var(--ink); top: 6px; right: 6px; font-size: 20px; }
.pn h3 { margin: .1rem 0 .4rem; font: 500 17px/1.25 Spectral, Georgia, serif; color: var(--ink); }
.pn p { margin: 0 0 .45rem; }
.pn__meta { font: italic 13px/1.3 Spectral, Georgia, serif; color: #4D5A63; }
.pn__cat { font-size: 11px; color: #4D5A63; border-top: 1px solid #D9DDE0; padding-top: .4rem; }
.pn__key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: 0; background: var(--kc); }
.pn__key--w { --kc: var(--c-w); } .pn__key--p { --kc: var(--c-p); } .pn__key--e { --kc: var(--c-e); }
.pn__key--h { --kc: var(--c-h); } .pn__key--r { --kc: var(--c-r); } .pn__key--t { --kc: var(--c-t); }
.pn-list .pn { padding-top: .6rem; margin-top: .6rem; border-top: 1px solid var(--ink); }
.pn-list .pn:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pn-list__n { margin: 0 0 .5rem; font: italic 13px/1 Spectral, Georgia, serif; color: var(--mag); }

/* ---------- cartouche ---------- */
.cart { max-width: 330px; }
.cart__box { background: rgba(251, 250, 245, .86); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(251, 250, 245, .86), 0 0 0 4px var(--ink), 0 8px 22px rgba(0, 10, 20, .2); padding: .7rem 1rem .55rem; }
.cart__box summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; }
.cart__box summary::-webkit-details-marker { display: none; }
.cart__t { font: 500 20px/1.15 Spectral, Georgia, serif; letter-spacing: .01em; }
.cart__t::after { content: " \25BE"; font-size: 13px; color: #6E7880; }
.cart__box[open] .cart__t::after { content: " \25B4"; }
.cart__n { font: italic 13px/1.4 Spectral, Georgia, serif; color: var(--mag); margin-top: .15rem; }
.cart__lede { margin: .5rem 0 .6rem; font-size: 12px; line-height: 1.5; color: #3E4A52; }
.cart fieldset { border: 0; border-top: 1px solid #C9CED2; margin: 0; padding: .45rem 0 .35rem; }
.cart legend { padding: 0 .3rem 0 0; font: italic 13px/1 Spectral, Georgia, serif; color: #4D5A63; }
.cart label { display: block; font-size: 12px; line-height: 1.4; padding: .18rem 0; cursor: pointer; }
.cart input { margin: 0 .2rem 0 0; vertical-align: -2px; accent-color: var(--ink); }
.cart__note { margin: .35rem 0 0; font: italic 11px/1.4 Spectral, Georgia, serif; color: #6E7880; }

@media (max-width: 760px) {
  .cart { max-width: calc(100vw - 90px); }
  .cart__box { padding: .55rem .8rem .5rem; }
  .cart__t { font-size: 17px; }
  .cart__box[open] { max-height: 62vh; overflow-y: auto; }
  .leaflet-control-scale { display: none; }
  .pnote .leaflet-popup-content { margin: 12px 14px 10px; }
}

.cart__c { color: #6E7880; font-size: 11px; }
.cart__lim { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--mag); vertical-align: 3px; margin: 0 .3rem 0 .1rem; }
.dom-tip { background: rgba(251, 250, 245, .95); border: 1px solid var(--mag); border-radius: 0; box-shadow: none;
  color: var(--mag); font: italic 13px/1.2 Spectral, Georgia, serif; padding: 2px 7px; }
.dom-tip::before { display: none; }
.leaflet-bottom.leaflet-left { bottom: 22px; left: 22px; }

/* ---------- two transparent legends: project types upper left, hindcast models lower left ---------- */
.cart__box { background: rgba(251, 250, 245, .78); }
.cart--models { max-width: 270px; }
.cart--models .cart__t { font-size: 18px; }
.cart__all { border-top: 1px solid #C9CED2; margin-top: .45rem; padding-top: .4rem !important; }
.cart__models { list-style: none; margin: .25rem 0 0; padding: 0 .2rem 0 0; max-height: 32vh; overflow-y: auto; }
.cart__models button { display: flex; align-items: center; width: 100%; padding: .16rem 0; border: 0; background: none;
  color: var(--ink); font: 12px/1.35 Verdana, Geneva, sans-serif; text-align: left; cursor: pointer; }
.cart__models button:hover, .cart__models button:focus-visible { text-decoration: underline; outline: none; }
.cart__lim { flex: none; display: inline-block; width: 24px; height: 0; border-top: 2px dashed var(--lc, var(--mag)); margin: 0 .5rem 0 .1rem; }
.cart__lim--0 { --lc: #6A1B9A; } .cart__lim--1 { --lc: #C2185B; } .cart__lim--2 { --lc: #1565C0; } .cart__lim--3 { --lc: #00796B; }
.cart__lim--4 { --lc: #D84315; } .cart__lim--5 { --lc: #5D4037; } .cart__lim--6 { --lc: #2E7D32; }
.dom-tip { border-color: var(--ink); color: var(--ink); }
.pn__t { border-collapse: collapse; margin: .2rem 0 .2rem; font-size: 12px; }
.pn__t th { text-align: left; font-weight: normal; color: #4D5A63; padding: .15rem .8rem .15rem 0; vertical-align: top; white-space: nowrap; }
.pn__t td { padding: .15rem 0; }
@media (max-width: 760px) {
  .cart--models { max-width: calc(100vw - 90px); }
  .cart__models { max-height: 40vh; }
}

/* ---------- round 3: square markers for hindcasts, equal transparency, projection menu ---------- */
.leaflet-marker-icon.pdot--h, .pdot--h.pdot--k, .pn__key--h { border-radius: 2px; }
.cart__box, .cart--models .cart__box, .cart--legend .cart__box {
  background: rgba(251, 250, 245, .6); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 3px rgba(251, 250, 245, .6), 0 0 0 4px var(--ink), 0 8px 22px rgba(0, 10, 20, .14); }
.cart__lim { border-top-style: solid; border-top-width: 2px; }
.projsel { background: rgba(251, 250, 245, .6); border: 1px solid var(--ink); padding: .3rem .5rem; }
.projsel label { display: flex; flex-direction: column; gap: .15rem; font: italic 12px/1.2 Spectral, Georgia, serif; color: #4D5A63; }
.projsel select { font: 12px/1.3 Verdana, Geneva, sans-serif; color: var(--ink); background: #fff; border: 1px solid #9AA4AB; padding: .15rem .25rem; max-width: 210px; }
#map.globe, .globe { background: var(--paper); }
@media (max-width: 760px) { .projsel select { max-width: 150px; } }