/* The location lens. Shared by the main page, the goals page and /where, so the
   switcher in the top right and the two data blocks look the same everywhere and
   are described in one place rather than three.

   Both data sources are credited in the markup, not just here, because one of
   them requires it and the other deserves it:

   - Country Overshoot Days are Global Footprint Network's, copyright theirs, all
     rights reserved. Dates and a published formula are facts and we state them
     with a link back. We do not copy their graphics.
   - The warming stripes are Professor Ed Hawkins, University of Reading, and are
     CC BY 4.0, which allows the image itself to be shown as long as he is
     credited. Every stripes block carries his name and a link.

   Colours are the site's own variables where the page defines them, with
   fallbacks so this file still works if it is ever loaded somewhere that does
   not. Nothing here relies on colour alone to carry meaning. */

/* ---------- the switcher, top right ---------- */

.lens-switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
}
.lens-switch-lab {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted-on-dark, #BFD2E0);
}
.lens-switch select {
  font: inherit;
  font-weight: 600;
  color: var(--accent-bright, #F0B345);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(240, 179, 69, .45);
  border-radius: 999px;
  padding: .3rem 1.6rem .3rem .7rem;
  max-width: 14rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23F0B345' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: .6rem;
}
.lens-switch select:hover,
.lens-switch select:focus-visible { color: #fff; border-color: #F0B345; }
.lens-switch select option { color: #152430; background: #F8F4ED; }
/* a guess is labelled as a guess, never presented as though we know */
.lens-guess {
  font-size: 11px;
  color: var(--muted-on-dark, #BFD2E0);
  opacity: .8;
}

/* on a light header the same control has to flip */
.lens-switch.on-light .lens-switch-lab,
.lens-switch.on-light .lens-guess { color: var(--ink-soft, #41525E); }
.lens-switch.on-light select {
  color: var(--accent-ink, #86560D);
  background-color: rgba(21, 36, 48, .04);
  border-color: rgba(134, 86, 13, .4);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2386560D' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.lens-switch.on-light select:hover,
.lens-switch.on-light select:focus-visible { color: var(--ink, #152430); }

/* ---------- shared block shell ---------- */

/* min-width:0 because a grid or flex item defaults to min-content width, which
   means an overflow-x box inside it stretches the item instead of scrolling,
   and the whole page ends up scrolling sideways. The wide chart on a phone is
   exactly that case. */
.lens-block {
  background: var(--parchment, #F8F4ED);
  border: 1px solid rgba(21, 36, 48, .12);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  margin: 0 0 1.6rem;
  min-width: 0;
}
.lens-block:last-child { margin-bottom: 0; }
.lens-block h3 {
  font-size: 1.25rem;
  margin: 0 0 .35rem;
  color: var(--ink, #152430);
}
.lens-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft, #41525E);
  margin: 0 0 .6rem;
}
.lens-say {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink, #152430);
  margin: 0 0 .8rem;
  max-width: 34ch;
}
.lens-say b { font-weight: 700; }
.lens-p {
  font-size: 15.5px;
  color: var(--ink-soft, #41525E);
  max-width: 62ch;
  margin: 0 0 .8rem;
}
.lens-src {
  font-size: 13px;
  color: var(--ink-soft, #41525E);
  margin: 1rem 0 0;
  max-width: 66ch;
}
.lens-src a {
  color: var(--accent-ink, #86560D);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(134, 86, 13, .4);
}
.lens-src a:hover, .lens-src a:focus-visible { color: var(--ink, #152430); }

/* the go-deeper link, deliberately bigger than the credit line under it */
.lens-deeper {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-ink, #86560D);
  text-decoration: none;
  border-bottom: 1px solid rgba(134, 86, 13, .45);
  margin: .2rem 0 0;
}
.lens-deeper:hover, .lens-deeper:focus-visible { color: var(--ink, #152430); }

/* ---------- overshoot ---------- */

/* The bar is the year. The filled part is the share of the year before the
   country has used a year's worth. It is decorative: the sentence above it
   already carries the fact, and the bar is hidden from screen readers.

   The first pair of colours here was a red and a green that measured 1.09:1
   against each other. Both are perfectly visible on their own and the bar was
   one flat shape to anybody with the commonest form of colour blindness, which
   is most of the point of a bar gone. So the two halves now differ three ways
   and not one: a dark red against a pale green at 4.75:1, a hatch on the
   borrowed half, and a hard line at the date itself. Any one of the three is
   enough to read it. */
.lens-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #A9CCB8;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(23, 82, 54, .32) 0 3px,
    rgba(23, 82, 54, 0) 3px 7px
  );
  border: 1px solid rgba(23, 82, 54, .45);
  overflow: hidden;
  margin: 1rem 0 .5rem;
}
.lens-bar-used {
  position: absolute;
  inset: 0 auto 0 0;
  background: #8F2B19;
  border-right: 2px solid #4A1408;
  border-radius: 999px 0 0 999px;
}
.lens-bar-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, #41525E);
  margin: 0 0 .9rem;
}
.lens-key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  font-size: 12.5px;
  color: var(--ink-soft, #41525E);
  margin: 0 0 .9rem;
}
.lens-key span { display: flex; align-items: center; gap: .4rem; }
/* the key repeats the bar exactly, hatch included, so the swatch and the thing
   it stands for are the same object rather than two things that merely match */
.lens-key i {
  width: .8rem; height: .8rem; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(23, 20, 8, .35);
}
.lens-key .k-used { background: #8F2B19; }
.lens-key .k-left {
  background: #A9CCB8;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(23, 82, 54, .32) 0 3px,
    rgba(23, 82, 54, 0) 3px 7px
  );
}

/* the good case: no overshoot day at all */
.lens-block.is-below { border-color: rgba(31, 111, 74, .5); }
.lens-block.is-below .lens-say { color: #175236; }

/* ---------- stripes ---------- */

/* The barslabel graphic arrives with its own dark grey ground, its own title
   and its own axis baked into the picture. So it is framed as a chart dropped
   into the card rather than bled to the edges like the plain stripes were, and
   there is no year caption underneath any more: the picture already prints the
   years, and a second set below it just said the same thing twice.

   aspect-ratio matches the source, 3780 by 2126, so the card does not jump
   about while a 100KB image is still on its way down. */
.lens-stripes-img {
  width: 100%;
  aspect-ratio: 3780 / 2126;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  background: #595959;          /* the graphic's own ground, so no flash of cream */
}

/* The axis is the whole reason for choosing this cut of the graphic over the
   plain stripes, and on a narrow phone a fit-to-width chart puts the degree
   labels at about four pixels, which is the context thrown away again.

   So below 640px the chart keeps a readable width and scrolls sideways inside
   its own box, which is what the site already does with any wide content. The
   page itself never scrolls sideways. Above 640px there is room and it simply
   fits. */
.lens-stripes-hold { margin: 0 0 .9rem; }
@media (max-width: 639px) {
  .lens-stripes-hold {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .lens-stripes-img { min-width: 640px; }
  .lens-stripes-hint {
    font-size: 12.5px;
    color: var(--ink-soft, #41525E);
    margin: .45rem 0 .9rem;
  }
}
@media (min-width: 640px) {
  .lens-stripes-hint { display: none; }
}
.lens-none {
  font-size: 15px;
  color: var(--ink-soft, #41525E);
  background: var(--sand, #EDE4D6);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 0 0 .9rem;
  max-width: 62ch;
}

/* ---------- the expanding search ---------- */

.find { margin: 0 0 2rem; max-width: 34rem; }
.find-lab {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft, #41525E);
  margin: 0 0 .5rem;
}
.find-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.find-in {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; font-size: 16px;            /* 16px or iOS zooms the page on focus */
  color: var(--ink, #152430);
  background: var(--parchment, #F8F4ED);
  border: 1.5px solid rgba(21, 36, 48, .25);
  border-radius: 10px;
  padding: .7rem .9rem;
}
.find-in:focus-visible {
  outline: none;
  border-color: var(--accent-ink, #86560D);
  box-shadow: 0 0 0 3px rgba(192, 124, 18, .18);
}
.find-go {
  font: inherit; font-size: 15px; font-weight: 600;
  color: #12202B; background: var(--accent, #C07C12);
  border: none; border-radius: 999px;
  padding: .7rem 1.6rem; cursor: pointer;
  transition: background .2s ease;
}
.find-go:hover, .find-go:focus-visible { background: var(--accent-lift, #D6891A); }

/* The worked example under the box. A button rather than a link because it runs
   a search rather than going anywhere, styled to read as a suggestion and not
   as the main action, which is the box above it. */
.find-eg-line {
  font-size: 14.5px;
  color: var(--ink-soft, #41525E);
  margin: .9rem 0 0;
  max-width: 54ch;
}
.find-eg {
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink, #86560D);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(134, 86, 13, .45);
  padding: 0;
  cursor: pointer;
}
.find-eg:hover, .find-eg:focus-visible { color: var(--ink, #152430); border-bottom-color: currentColor; }

.find-where { font-size: 16px; color: var(--ink, #152430); margin: 0 0 .3rem; }
.find-guess { color: var(--ink-soft, #41525E); }
.find-count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft, #41525E); margin: 0 0 1.8rem;
}
.find-busy, .find-none { font-size: 16px; color: var(--ink-soft, #41525E); max-width: 60ch; }
.find-none a { color: var(--accent-ink, #86560D); font-weight: 600; }

.find-pick { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.find-pick-b {
  font: inherit; font-size: 15px; text-align: left; width: 100%;
  color: var(--accent-ink, #86560D); background: var(--parchment, #F8F4ED);
  border: 1.5px solid rgba(134, 86, 13, .35); border-radius: 10px;
  padding: .6rem .9rem; cursor: pointer;
}
.find-pick-b:hover, .find-pick-b:focus-visible {
  color: var(--ink, #152430); border-color: var(--accent-ink, #86560D);
}

/* the feedback form at the foot of the goal pages and /where */
.fb-band { background: var(--sand, #EDE4D6); padding: clamp(2.6rem, 6vw, 4rem) 0; }
.fb-band h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink, #152430); margin: 0 0 .6rem;
}
.fb-lede { font-size: 16px; color: var(--ink-soft, #41525E); max-width: 58ch; margin: 0 0 1.6rem; }
.fb { max-width: 40rem; display: grid; gap: 1rem; }
.fb-text { width: 100%; resize: vertical; min-height: 7rem; }
.fb-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fb-row { grid-template-columns: 1fr 1fr; } }
.fb-row .find-in { width: 100%; }
.fb .find-go { justify-self: start; }
.fb-optin { display: flex; align-items: center; gap: .55rem; font-size: 15.5px; font-weight: 600; color: var(--ink, #152430); cursor: pointer; }
.fb-optin input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent-ink, #86560D); margin: 0; }
.fb-consent { font-size: 12.5px; color: var(--ink-soft, #41525E); max-width: 62ch; margin: -.5rem 0 0; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-msg { font-size: 15px; color: var(--ink, #152430); margin: 0; }
.fb-msg.fb-bad { color: #8A2A1B; }

/* widening the ring from its default */
.find-mi { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.find-mi-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft, #41525E); margin-right: .2rem;
}
.find-mi-b {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--accent-ink, #86560D); background: var(--parchment, #F8F4ED);
  border: 1.5px solid rgba(134, 86, 13, .35); border-radius: 999px;
  padding: .3rem .85rem; cursor: pointer;
}
.find-mi-b:hover, .find-mi-b:focus-visible { color: var(--ink, #152430); border-color: var(--accent-ink, #86560D); }
.find-mi-b[aria-pressed="true"] { color: #12202B; background: var(--accent, #C07C12); border-color: var(--accent, #C07C12); }

/* one group per band, tightest first */
.fg { margin: 0 0 2.4rem; }
.fg:last-child { margin-bottom: 0; }
.fg-h {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink, #152430);
  margin: 0 0 .3rem;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(21, 36, 48, .12);
}
.fg-n {
  font-family: var(--sans, sans-serif);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-soft, #41525E);
  background: var(--sand, #EDE4D6);
  border-radius: 999px; padding: .15rem .55rem;
}
.fg-note { font-size: 13.5px; color: var(--ink-soft, #41525E); margin: .6rem 0 1.2rem; max-width: 60ch; }

.fg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .fg-list { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; } }

/* On a goal page, the groups working only in their own area sit closed under
   their country group and open by country, then county. */
.fg-more { margin: 1.6rem 0 0; }
.fg-more > summary, .fg-level > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-weight: 600; color: var(--accent-ink, #86560D);
  padding: .55rem 0;
}
.fg-more > summary::-webkit-details-marker, .fg-level > summary::-webkit-details-marker { display: none; }
.fg-more > summary::before, .fg-level > summary::before {
  content: "+"; display: inline-block; width: 1.1em; text-align: center; font-weight: 700;
}
.fg-more[open] > summary::before, .fg-level[open] > summary::before { content: "\2212"; }
.fg-more > summary:hover, .fg-level > summary:hover,
.fg-more > summary:focus-visible, .fg-level > summary:focus-visible { color: var(--ink, #152430); }
.fg-more > summary { font-size: 15.5px; border-bottom: 1px solid rgba(134, 86, 13, .35); }
.fg-level { margin-left: 1.1rem; padding-left: .9rem; border-left: 2px solid rgba(21, 36, 48, .12); }
.fg-level > summary { font-size: 15px; color: var(--ink, #152430); }
.fg-level > .orgs { margin: .8rem 0 1.4rem; }

.fr { border-left: 3px solid var(--accent, #C07C12); padding-left: 1.2rem; min-width: 0; }
.fr h4 { font-size: 1.2rem; margin: 0 0 .35rem; color: var(--ink, #152430); }
.fr-where {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft, #41525E); margin: 0 0 .5rem;
}
.fr-reach { font-size: 14px; color: var(--ink-soft, #41525E); margin: -.3rem 0 .5rem; }
.fr-sum { font-size: 15.5px; color: var(--ink-soft, #41525E); margin: 0 0 .6rem; max-width: 56ch; }
.fr-dates { font-size: 13.5px; color: var(--ink-soft, #41525E); margin: -.2rem 0 .6rem; max-width: 56ch; }
.fr-goals { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0 0 .6rem; }
.fr-goal {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-ink, #86560D); text-decoration: none;
  border: 1px solid rgba(134, 86, 13, .35); border-radius: 999px;
  padding: .12rem .5rem;
}
.fr-goal:hover, .fr-goal:focus-visible { color: var(--ink, #152430); border-color: var(--accent-ink, #86560D); }
.fr-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; font-size: 14px; margin: 0; }
.fr-link {
  color: var(--accent-ink, #86560D); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(134, 86, 13, .45);
}
.fr-link:hover, .fr-link:focus-visible { color: var(--ink, #152430); }
.fr-nolink, .fr-reg { color: var(--ink-soft, #41525E); }

/* ---------- the goal filter, shared by /dates and /where ---------- */

.goal-filter { margin: 1.8rem 0 .6rem; }

.goal-filter-lab {
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft, #41525E); margin: 0 0 .8rem;
}
.goal-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.goal-chip {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left;
  color: var(--accent-ink, #86560D); background: var(--parchment, #F8F4ED);
  border: 1.5px solid var(--accent-ink, #86560D); border-radius: 99px;
  padding: .35rem .85rem; cursor: pointer;
}
.goal-chip-n { font-weight: 800; }
.goal-chip[aria-pressed="true"] { background: var(--accent-ink, #86560D); color: #fff; }
.goal-chip:focus-visible { outline: 3px solid var(--accent-ink, #86560D); outline-offset: 2px; }

/* A goal's own chip wears that goal's colours, so it matches the goal page it
   leads to. Selected, it is filled exactly like that page's header. The "All"
   chip has no goal and keeps the accent above. Values and their contrast
   checks are in goal-meta.js. */
.goal-chip[style] { color: var(--gt); border-color: var(--gb); }
.goal-chip[style][aria-pressed="true"] { background: var(--gc); border-color: var(--gc); color: var(--go); }
.goal-chip[style]:focus-visible { outline-color: var(--gt); }

/* ---------- two blocks side by side where there is room ---------- */

.lens-pair { display: grid; gap: 1.4rem; }
.lens-pair > * { min-width: 0; }
@media (min-width: 900px) {
  .lens-pair { grid-template-columns: 1fr 1fr; }
  .lens-pair .lens-block { margin-bottom: 0; }
}

/* ---------- the strip that sits above the goal tiles ---------- */

.lens-strip {
  background: var(--sand, #EDE4D6);
  padding: clamp(2rem, 5vw, 3rem) 0 0;
}
.lens-strip .lens-strip-h {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 .6rem;
  color: var(--ink, #152430);
}
.lens-strip .lens-strip-lede {
  font-size: 16px;
  color: var(--ink-soft, #41525E);
  max-width: 62ch;
  margin: 0 0 1.6rem;
}
.lens-strip-more { margin: 1.4rem 0 0; font-size: 15px; font-weight: 600; padding-bottom: clamp(2rem, 5vw, 3rem); }
.lens-strip-more a {
  color: var(--accent-ink, #86560D);
  text-decoration: none;
  border-bottom: 1px solid rgba(134, 86, 13, .45);
}
.lens-strip-more a:hover { color: var(--ink, #152430); }

@media (prefers-reduced-motion: reduce) {
  .lens-switch select { transition: none; }
}