/* ============================================================
   PMCK — "What the numbers show".

   The same arrangement as the locations map: one large thing on the
   left, a list beside it that both summarises and drives it. The
   proportions, the sticky column and the 900px break are deliberately
   the SAME NUMBERS as locations.css so the two sections read as one
   family. The one difference is the list on a phone: an address needs
   the full width, a percentage does not, so these cards go two up.

   Nothing here paints a colour of its own. Every value comes from the
   palette variables, so a subsidiary in blue needs no new CSS.
   ============================================================ */

.pmck-esgc__split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:26px;align-items:start;
}

/* ---------- year tabs ---------- */

/* Hidden until the script runs: without it the tabs control nothing and
   each year prints its own heading instead. */
.pmck-esgc__years{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:24px;}
.pmck-esgc__years[hidden]{display:none;}
.pmck-esgc__tab{
  background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:10px 18px 12px;font:inherit;font-size:19px;font-weight:500;
  color:var(--muted);cursor:pointer;
}
.pmck-esgc__tab:hover{color:var(--brand);}
.pmck-esgc__tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.pmck-esgc__tab[aria-selected="true"]{color:var(--brand-ink);font-weight:600;border-bottom-color:var(--brand);}

.pmck-esgc__panel{outline:none;}
/* A display rule on a panel would beat the browser's own [hidden], which is
   how nine slides once rendered at once on the About timeline. Spell it out. */
.pmck-esgc__panel[hidden]{display:none;}

/* The per-year heading is only for a browser with no JavaScript; once the
   tabs work it would say the same thing twice. */
.pmck-esgc__yearhead{margin:0 0 16px;font-size:23px;color:var(--brand-ink);}
.pmck-esgc.is-ready .pmck-esgc__yearhead{display:none;}

/* ---------- the chart ---------- */

.pmck-esgc__stage{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
}
.pmck-esgc__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--brand-soft);
}
.pmck-esgc__bar[hidden]{display:none;}
.pmck-esgc__tag{
  min-width:0;font-size:18px;font-weight:600;color:var(--brand-ink);
  text-transform:uppercase;letter-spacing:.08em;
}
/* margin-left:auto keeps the buttons on the right when the tag wraps. Without
   it a long pillar name pushes the next button off the edge at 390px. */
.pmck-esgc__nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.pmck-esgc__count{
  font-size:18px;color:var(--muted);min-width:64px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.pmck-esgc__arrow{
  width:40px;height:40px;flex:none;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;display:grid;place-items:center;
  color:var(--brand-ink);font:inherit;font-size:20px;line-height:1;
}
.pmck-esgc__arrow:hover{border-color:var(--brand);background:var(--brand);color:#fff;}
.pmck-esgc__arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Pause and play drawn in CSS: two bars, or one triangle. No icon font, no
   SVG file, and it recolours with the button. */
.pmck-esgc__playic{display:block;width:14px;height:14px;position:relative;}
.pmck-esgc__playic::before,
.pmck-esgc__playic::after{
  content:"";position:absolute;top:0;width:4px;height:14px;background:currentColor;
}
.pmck-esgc__playic::before{left:1px;}
.pmck-esgc__playic::after{right:1px;}
.pmck-esgc__play[aria-pressed="false"] .pmck-esgc__playic::before{
  left:2px;width:0;height:0;background:none;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:12px solid currentColor;
}
.pmck-esgc__play[aria-pressed="false"] .pmck-esgc__playic::after{display:none;}

.pmck-esgc__frame{background:var(--brand-pale);}
.pmck-esgc__slide{margin:0;background:#fff;}
.pmck-esgc__slide[hidden]{display:none;}
/* The exports are 2000x1125. Reserving the ratio stops the measures below
   jumping down the page while the first image decodes. */
.pmck-esgc__img{aspect-ratio:16/9;background:var(--brand-pale);}
.pmck-esgc__img img{width:100%;height:100%;display:block;object-fit:cover;}
.pmck-esgc__cap{padding:16px 18px;border-top:1px solid var(--line);}
.pmck-esgc__note{display:block;font-size:18px;line-height:1.55;color:var(--body);}

/* The pillar shows in the bar once the script runs; in the caption when it
   has not, because then every slide is on screen at once. */
.pmck-esgc__slidetag{
  display:inline-block;margin-bottom:8px;background:var(--brand);color:#fff;
  border-radius:999px;padding:5px 14px;font-size:18px;font-weight:600;letter-spacing:.02em;
}
.pmck-esgc.is-ready .pmck-esgc__slidetag{display:none;}

.pmck-esgc__frame .pmck-ph{min-height:220px;}

/* ---------- the measures ---------- */

.pmck-esgc__list{
  list-style:none;margin:0;display:grid;grid-template-columns:1fr;gap:10px;
  max-height:560px;overflow-y:auto;scroll-behavior:smooth;
  /* Room for the focus ring and the selected card's shadow, which a flush
     edge clips off. Same allowance as the locations list. */
  padding:2px 4px 2px 2px;
}
.pmck-esgc__item{margin:0;}
.pmck-esgc__metric{
  width:100%;text-align:left;background:#fff;font:inherit;cursor:pointer;
  border:1px solid var(--line);border-left:4px solid transparent;border-radius:10px;
  padding:11px 16px;display:flex;align-items:baseline;gap:14px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.pmck-esgc__metric:hover{border-color:var(--brand);border-left-color:var(--brand);}
.pmck-esgc__metric:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.pmck-esgc__fig{
  flex:none;min-width:112px;text-align:right;font-size:22px;font-weight:600;
  line-height:1.2;color:var(--brand-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pmck-esgc__lab{flex:1;font-size:18px;line-height:1.3;color:var(--body);}

/* Selected: the soft fill agreed for this section, plus the accent edge and
   the lift the locations list already uses for its active card. */
.pmck-esgc__metric[aria-pressed="true"]{
  background:var(--brand-soft);border-color:var(--brand-pale);
  border-left-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.09);
}
.pmck-esgc__metric[aria-pressed="true"] .pmck-esgc__lab{color:var(--brand-ink);font-weight:500;}

/* ---------- one column ---------- */

/* The map breaks at 900px; this breaks at 1000px on purpose. An address is
   still readable in a narrow column, a chart is not — below 1000 the stage
   would be under 480px wide and the slide's own text unreadable. */
@media (max-width:999.98px){
  /* The list stops being its own scroller here, or a phone gets a scrollbar
     inside a scrollbar. Same reasoning as locations.css. */
  .pmck-esgc__split{grid-template-columns:1fr;gap:20px;}
  .pmck-esgc__list{
    max-height:none;overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  }
  /* Stacked, not side by side: at half the width a figure and a label on one
     line leaves the label two words per line. */
  .pmck-esgc__metric{
    display:block;padding:14px 16px 16px;
    border-left-width:1px;border-top:4px solid transparent;border-radius:10px;
  }
  .pmck-esgc__metric:hover{border-left-color:var(--line);border-top-color:var(--brand);}
  .pmck-esgc__metric[aria-pressed="true"]{border-left-color:var(--brand-pale);border-top-color:var(--accent);}
  .pmck-esgc__fig{display:block;min-width:0;text-align:left;font-size:26px;}
  .pmck-esgc__lab{display:block;margin-top:7px;}
}

@media (max-width:768px){
  .pmck-esgc__tab{padding:10px 14px 12px;}
  .pmck-esgc__bar{padding:10px 12px;}
  .pmck-esgc__cap{padding:14px 12px;}
}

@media (max-width:560px){
  .pmck-esgc__list{gap:10px;}
  .pmck-esgc__metric{padding:12px 12px 14px;}
  .pmck-esgc__fig{font-size:24px;letter-spacing:-.02em;}
}

/* Someone who has asked for less movement gets a still page. The script
   checks the same query, so this is only the belt to its braces. */
@media (prefers-reduced-motion:reduce){
  .pmck-esgc__list{scroll-behavior:auto;}
  .pmck-esgc__metric{transition:none;}
}