/* THE LAYER GALLERY — see static/js/open_map_gallery.js for what it is and
   why the map grew a second way to be browsed. (The shared time bar that
   shared this file was removed 2026-09-06; its rules went with it.)

   No inline <style> anywhere on this page and none introduced here: the CSP
   is `style-src-elem 'self'`, and this file is how a page-specific rule gets
   onto the open map.

   Every literal colour/background pair below is checked by
   base/tests/test_contrast.py at 4.5:1, which is why the chips are tinted
   backgrounds with deep ink rather than the brand colours at full strength —
   white on #2887b1 is 4.05:1 and would fail. */

/* ========================================================== the gallery === */

/* z-index 2000, which is the house number for "a modal that covers the nav" —
   site.css puts .navbar at 1500 and names the plot modal at 2000 as the thing
   deliberately above it. At the 1200 this was first written with, the dialog's
   own title and its Close button rendered UNDERNEATH the site header, so the
   only way out of it was the Escape key. Caught in the browser, not in the
   markup: the DOM was correct and the page was not. */
.open-gal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 2vw;
  background: rgba(23, 30, 36, 0.55);
}
.open-gal[hidden] { display: none; }

/* The map behind a modal must not scroll under it. */
body.open-gal-open { overflow: hidden; }

.open-gal__dialog {
  display: flex; flex-direction: column;
  width: min(64rem, 100%);
  max-height: 94vh;
  padding: 18px 20px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #2C2A25);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
body.dark-mode .open-gal__dialog { background: #2a3b4a; color: #eef3f7; }

.open-gal__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 2px;
}
.open-gal__title {
  flex: 1 1 auto; margin: 0;
  font-size: 1.15rem; line-height: 1.2;
}
.open-gal__close {
  flex: none;
  border: 1px solid var(--line, #e3e0d7);
  border-radius: 5px;
  padding: 3px 10px;
  background: none; font: inherit; font-size: 0.8rem;
  color: var(--link, #1F6D8F); cursor: pointer;
}
body.dark-mode .open-gal__close { border-color: #4a6076; color: #cfe6f2; }

.open-gal__lede {
  margin: 0 0 10px;
  max-width: 46rem;
  color: var(--ink-3, #746E62);
  font-size: 0.78rem; line-height: 1.45;
}
body.dark-mode .open-gal__lede { color: #b9c9d6; }

/* THE QUESTION BUTTONS. Bigger than the kind chips below them and above the
   search box, because this row is the fast path: press one and seventeen
   layers become two, with nothing typed and nothing scrolled. */
.open-gal__asks {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.open-gal__ask {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line, #e3e0d7);
  border-radius: 999px;
  padding: 4px 12px;
  background: #fff;
  color: var(--ink, #2C2A25);
  font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
}
body.dark-mode .open-gal__ask { background: #22323f; color: #eef3f7; border-color: #41586d; }
.open-gal__ask.is-on {
  border-color: var(--accent-ring, #2887b1);
  background: var(--accent-tint, #E6F0F5);
  color: var(--accent-tint-ink, #175571);
}
.open-gal__askCount {
  color: var(--ink-3, #746E62);
  font-size: 0.68rem; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.open-gal__ask.is-on .open-gal__askCount { color: var(--accent-tint-ink, #175571); }
body.dark-mode .open-gal__askCount { color: #b9c9d6; }

.open-gal__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e3e0d7);
}
.open-gal__search {
  flex: 1 1 15rem; min-width: 0;
  border: 1px solid var(--line, #e3e0d7);
  border-radius: 5px;
  padding: 5px 8px;
  font: inherit; font-size: 0.82rem;
  background: #fff; color: var(--ink, #2C2A25);
}
body.dark-mode .open-gal__search { background: #1f2d39; color: #eef3f7; border-color: #4a6076; }

.open-gal__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.open-gal__chip {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 9px;
  font: inherit; font-size: 0.7rem; font-weight: 600;
  cursor: pointer;
}
/* A chip that IS filtering says so with a ring rather than a colour change —
   the colour is carrying the kind and may not be spent twice. */
.open-gal__chip.is-on { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }

/* WHAT THE KINDS MEAN. A <details>, closed by default: the definitions are a
   reference a reader reaches for once, not a preamble in front of the map
   every time. The colour on each term is the same kind colour the chip and
   the card carry, so the three read as one thing. */
.open-gal__meanings { margin-top: 8px; font-size: 0.78rem; }
.open-gal__meanings-head {
  cursor: pointer;
  font-weight: 600;
  opacity: 0.85;
}
.open-gal__meanings-list { margin: 6px 0 0; }
.open-gal__meanings-term {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.7rem; font-weight: 600;
  margin-top: 6px;
}
.open-gal__meanings-def { margin: 3px 0 0 2px; opacity: 0.9; }

.open-gal__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 12px 2px 4px;
  --nh-cue-surface: #fff;
}
body.dark-mode .open-gal__body { --nh-cue-surface: #2a3b4a; }

.open-gal__group { margin: 0 0 20px; }
.open-gal__groupHead {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0;
  font-size: 0.95rem;
}
.open-gal__groupCount {
  color: var(--ink-3, #746E62);
  font-size: 0.7rem; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .open-gal__groupCount { color: #b9c9d6; }
/* The QUESTION under the label. This is the line that does the work — the
   label is still a category and this is the sentence a stranger recognises. */
.open-gal__groupAsk {
  margin: 1px 0 9px;
  color: var(--ink-3, #746E62);
  font-size: 0.78rem;
}
body.dark-mode .open-gal__groupAsk { color: #b9c9d6; }

.open-gal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 9px;
}

.open-gal__card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px 10px;
  border: 1px solid var(--line, #e3e0d7);
  border-radius: 7px;
  background: #fff;
}
body.dark-mode .open-gal__card { background: #22323f; border-color: #41586d; }
/* A layer that is ON is marked on its left edge, not by a fill: the swatch
   inside the card is already carrying colour and a tinted card would be a
   second colour competing with the layer's own. */
.open-gal__card.is-on {
  border-left: 3px solid var(--accent-ring, #2887b1);
  padding-left: 8px;
}

.open-gal__pick {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
}
.open-gal__check { flex: none; margin: 0; }
.open-gal__swatch { flex: none; display: inline-flex; width: 16px; height: 16px; }
.open-gal__name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; }

.open-gal__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.open-gal__kind, .open-gal__time {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.68rem; font-weight: 600;
  white-space: nowrap;
}

/* THE SEVEN KINDS of base/claims.py. Tint plus deep ink, every pair over
   4.5:1 — the brand hexes at full strength are 4.05:1 (blue) and 3.02:1
   (gold) against white and are used for fills and rings only. */
.open-gal__kind--observed            { background: #E1F0E5; color: #1B5B2C; }
.open-gal__kind--derived             { background: #ECE6F5; color: #4A2E83; }
.open-gal__kind--modelled            { background: #E3ECF3; color: #26495F; }
.open-gal__kind--forecast            { background: #FAEFDB; color: #74490A; }
.open-gal__kind--regulatory          { background: #F7E5E3; color: #8A2C22; }
.open-gal__kind--reference           { background: #E9E6DF; color: #4F4A3B; }
.open-gal__kind--community_reported  { background: #DEEFF1; color: #14555A; }
/* Not a guess and not a gap — a layer that has declared nothing says so. */
.open-gal__kind--undeclared          { background: #ECECEC; color: #55524C; }

/* THE THREE TIME MODES. Deliberately quieter than the kind chips: the kind is
   the map's main claim and the time mode is a caveat on it, so the caveat may
   not shout the claim down. */
.open-gal__time { background: #F1EFE9; color: #55503F; font-weight: 500; }

/* Clamped to three lines. Untruncated, the blurbs ran a card to nine lines
   and the grid to 1,708px, which put the last three questions below a fold
   the reader had no reason to expect — the point of the gallery is that the
   whole map is in view at once. The full sentence is one press away on
   "Full details", and the blurb is a hint rather than the record. */
.open-gal__blurb {
  margin: 0;
  color: var(--ink-2, #57534A);
  font-size: 0.75rem; line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark-mode .open-gal__blurb { color: #c9d7e2; }

.open-gal__more {
  align-self: flex-start;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 0.72rem;
  color: var(--link, #1F6D8F); cursor: pointer; text-decoration: underline;
}
body.dark-mode .open-gal__more { color: #8fd0ee; }

.open-gal__empty, .open-gal__foot {
  margin: 8px 0 0;
  color: var(--ink-3, #746E62);
  font-size: 0.75rem;
}
body.dark-mode .open-gal__empty, body.dark-mode .open-gal__foot { color: #b9c9d6; }
.open-gal__foot {
  padding-top: 8px;
  border-top: 1px solid var(--line, #e3e0d7);
  font-variant-numeric: tabular-nums;
}

/* The opener, in the panel. It leads the two browse controls because it is
   the one that works without knowing the agencies. */
.open-gal__open {
  display: block; width: 100%;
  margin-top: 8px;
  border: 1px solid var(--accent-ring, #2887b1);
  border-radius: 5px;
  padding: 6px 8px;
  background: var(--accent-tint, #E6F0F5);
  color: var(--accent-tint-ink, #175571);
  font: inherit; font-size: 0.78rem; font-weight: 700;
  text-align: left; cursor: pointer;
}
.open-gal__openSub {
  display: block;
  font-size: 0.68rem; font-weight: 400;
}

/* ============================================================== focus ===== */

/* The map has a documented history of contrast failures; a focus ring that is
   only a colour change is one of them. Three solid pixels, offset, on every
   control this file adds. */
.open-gal__close:focus-visible,
.open-gal__search:focus-visible,
.open-gal__chip:focus-visible,
.open-gal__check:focus-visible,
.open-gal__more:focus-visible,
.open-gal__open:focus-visible {
  outline: 3px solid var(--accent-ring, #2887b1);
  outline-offset: 1px;
}
body.dark-mode .open-gal__close:focus-visible,
body.dark-mode .open-gal__search:focus-visible,
body.dark-mode .open-gal__chip:focus-visible,
body.dark-mode .open-gal__check:focus-visible,
body.dark-mode .open-gal__more:focus-visible,
body.dark-mode .open-gal__open:focus-visible {
  outline-color: #7ec8e8;
}

/* ============================================================== narrow ==== */

@media (max-width: 720px) {
  .open-gal { padding: 0; }
  .open-gal__dialog {
    width: 100%; max-height: 100vh; height: 100vh;
    border-radius: 0;
  }
  .open-gal__grid { grid-template-columns: 1fr; }
}