/* =========================================================
   energymix.v2.css — site-specific overrides (clean + robust)
   grid.css remains upstream/base.
   ========================================================= */

/* ---------- Global basics ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Remove top site header completely */
header.site-header { display: none !important; }

/* grid.css has a generic header padding; remove empty space */
body > header{
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* Prevent horizontal overflow */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

main{
  width: 100%;
  max-width: 100%;
}

/* Media never exceed viewport */
img, svg, canvas{
  max-width: 100%;
  height: auto;
}

/* Canvas sometimes needs explicit width */
canvas{ width: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ---------- Introduction title + logo ---------- */
#introduction{
  text-align: center;
  padding: 0.75rem 0;
}

#introduction .site-title{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.05;
  flex-wrap: nowrap; /* prevents logo jumping above */
}

/* Logo: hard caps so it cannot dominate */
#introduction .site-title-logo{
  width: auto;
  height: 1em;        /* ties logo to text size */
  max-height: 36px;
  max-width: 36px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.12em;
  object-fit: contain;
}

/* Title text */
#introduction .site-title-text{
  display: inline;
  white-space: normal; /* allow wrap on narrow widths */
}

/* LIVE badge */
.live-badge{
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.35em;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
  color: #fff;
  background: #c33;
  line-height: 1;
}

/* Small screens: tighten logo */
@media (max-width: 700px){
  #introduction .site-title{
    flex-wrap: wrap; /* allow wrapping on narrow phones */
  }
  #introduction .site-title-logo{
    max-height: 28px;
    max-width: 28px;
  }
}


/* ---------- Optional: columns stack on mobile ---------- */
@media (max-width: 700px){
  .columns{ display: block !important; }
  .columns > section{
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px 0 !important;
  }
}


/* ---------- Footer wrapping ---------- */
.site-footer span{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}


/* ---------- Status + Equation row ---------- */
.status-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.status-row > section{
  width: 100%;
  margin: 0;
}

@media (max-width: 700px){
  .status-row{ grid-template-columns: 1fr; }
}


/* ---------- Mobile overflow guardrail (MOBILE ONLY) ---------- */
@media (max-width: 700px) {
  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Let flex/grid children shrink instead of forcing overflow */
  main, section, .columns, .graph, .pie-chart-container{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Common offenders */
  table{ max-width: 100% !important; }
  img, svg, canvas{ max-width: 100% !important; height: auto !important; }

  /* Graph SVGs sometimes keep their width attribute unless forced */
  .graph svg{ width: 100% !important; }
}


/* ---------- Panel headers + turbine ---------- */

/* Generic header style (if you use panel-title/wind-title) */
.panel-title,
.wind-title{
  position: relative;
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  min-height: 56px;           /* consistent depth */
  padding: 10px 56px 10px 16px; /* space reserved for icon */
  margin: 0 0 12px 0;
  box-sizing: border-box;
}

.panel-title > span,
.wind-title > span{
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

/* Make the heading a positioning context */
.wind-title{
  position: relative;
  padding-left: 52px; /* reserve space for turbine */
}

/* Turbine next to the text, facing the viewer */
.wind-title .turbine{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1); /* flip horizontally */
  width: 48px;
  height: 62px;
}


/* Spin animation */
@keyframes turbine-spin{
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Apply animation to the rotating element */
.panel-header__turbine.is-animated{
  animation: turbine-spin 1.2s linear infinite;
}

/* WIND header: centered title + turbine on right */
#wind-records > h2.wind-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 64px 10px 16px; /* space for turbine on right */
  box-sizing: border-box;
}

#wind-records > h2.wind-title > span{
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

#wind-records > h2.wind-title > svg.turbine{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #cfd3d6; /* force turbine grey on all viewports */
}

/* Ensure turbine fills use currentColor */
#wind-records > h2.wind-title > svg.turbine .turbine-tower,
#wind-records > h2.wind-title > svg.turbine .turbine-nacelle,
#wind-records > h2.wind-title > svg.turbine .turbine-hub,
#wind-records > h2.wind-title > svg.turbine .turbine-blades path{
  fill: currentColor;
}

/* Slightly softer blades (optional) */
#wind-records > h2.wind-title > svg.turbine .turbine-blades path{
  fill: rgba(207, 211, 214, 0.85);
}


/* ---------- Tablet: non-destructive graph containment ---------- */
/* IMPORTANT: does NOT change tab-panel grid/columns. Only prevents runaway width. */
@media (min-width: 700px) and (max-width: 1024px){
  .graph,
  .graph svg,
  .graph canvas{
    min-width: 0;
    max-width: 100%;
  }
}
/* Equalise header block heights for editorial + wind panels */
.panel-title,
.wind-title {
  min-height: 64px;          /* adjust if you want slightly taller/shorter */
  display: flex;
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
  box-sizing: border-box;
}
h2.panel-title,
h2.wind-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;

  padding: 10px 64px 10px 16px;
  margin: 0 0 12px 0;

  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}
/* Center introductory text under Wind records heading */
#wind-records > p {
  text-align: center;
}
/* Prevent first column from expanding and squashing others */
#tab-panel-all dl {
  min-width: 0;
}
svg.turbine {
  transform: scaleX(-1);
  transform-origin: center;
}
.site-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;     /* prevents logo dropping above/below */
}

.site-header .logo {
  flex: 0 0 auto;
}

.site-header h1 {
  margin: 0;
  min-width: 0;          /* allows h1 to shrink instead of forcing wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* keeps it on one line */
}
.site-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;     /* prevents logo dropping above/below */
}

.site-header .logo {
  flex: 0 0 auto;
}

.site-header h1 {
  margin: 0;
  min-width: 0;          /* allows h1 to shrink instead of forcing wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* keeps it on one line */
}
.live-badge {
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .live-badge { animation: none; }
}
/* Mobile: force LIVE pulse (overrides any mobile breakpoint disabling it) */
@media (max-width: 600px) {
  .live-badge {
    display: inline-block;
    animation: livePulse 1.2s ease-in-out infinite !important;
  }
}
/* Keep H1 logo + text + LIVE on one line and stable on mobile */
.site-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}

.site-title-logo{
  flex:0 0 auto;
}

.site-title-text{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}
/* --- Mobile: force title row + visible LIVE pulse --- */
@media (max-width: 600px) {

  /* Keep logo + title text + LIVE badge on one line */
  h1.site-title {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap !important;
  }

  /* Logo should never become a block that forces wrapping */
  h1.site-title > .site-title-logo {
    display: block;
    flex: 0 0 auto;
  }

  /* Text container can shrink instead of forcing a new line */
  h1.site-title > .site-title-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    white-space: nowrap;   /* keeps "National Grid Live" + LIVE together */
  }

  /* Ensure the badge can actually animate (transform works reliably) */
  h1.site-title .live-badge {
    display: inline-block;
    will-change: transform;
    animation: livePulse 1.2s ease-in-out infinite !important;
  }
}

/* Use a unique keyframes name so we don't depend on existing 'pulse' */
@keyframes livePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
.graph {
  -webkit-text-size-adjust: 70%;
  text-size-adjust: 70%;
}
/* 1) Stop mobile browsers auto-inflating text sizes (common cause of “2x bigger on iPhone”) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2) Tooltip overlay inside .graph is the div with an inline left: ... style */
.graph {
  position: relative;
}

/* The tooltip element: usually the only child div with inline style="left: ...px" */
.graph > div[style*="left:"] {
  position: absolute;
  z-index: 10;
  top: 0.75rem;

  /* center on the cursor/year */
  transform: translateX(-50%);

  /* ONE shared box */
  padding: 0.6rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);

  /* make legend + values sit as two neat columns in one box */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: 0.35rem;

  /* important: don't let it become huge on mobile */
  font-size: 0.85rem;
  line-height: 1.2;

  /* prevent it from pushing layout / capturing touch */
  pointer-events: none;

  /* keep it inside the viewport */
  max-width: calc(100vw - 1.5rem);
}

/* left column (labels) */
.graph > div[style*="left:"] > div:first-child {
  display: grid;
  row-gap: 0.35rem;
}

/* right column (numbers) */
.graph > div[style*="left:"] > div:last-child {
  display: grid;
  row-gap: 0.35rem;
  text-align: right;
  white-space: nowrap;
}

/* a little smaller on narrow phones */
@media (max-width: 420px) {
  .graph > div[style*="left:"] {
    font-size: 0.75rem;
    column-gap: 0.75rem;
    padding: 0.5rem 0.6rem;
  }
}
/* ===== All Data graphs: mobile layout fixes ===== */
@media (max-width: 600px) {

  /* A) Fix x-axis year label strip (2nd div inside .graph) */
  #tab-panel-all .graph > div:nth-child(2) {
    width: 100%;
    display: flex;
    justify-content: space-between; /* spread years evenly */
    align-items: flex-start;
    padding: 0 8px;                 /* small inset like Kate’s */
    margin: 0;
  }

  /* If each year is a <div> inside that strip, center each label */
  #tab-panel-all .graph > div:nth-child(2) > div {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
  }

  /* Reduce the wasted space under the x-axis labels */
  #tab-panel-all .graph {
    margin-bottom: 0.5rem;
  }

  /* B) Keep tooltip on-screen: center it in viewport on mobile */
  #tab-panel-all .graph > div[style*="left:"] {
    left: 50% !important;
    transform: translateX(-50%) !important;

    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  /* Shrink text only — do NOT change box model */
  .graph div[style*="translateX("][style*="left:"] > div,
  .graph div[style*="translateX("][style*="left:"] table.sources,
  .graph div[style*="translateX("][style*="left:"] table.sources td {
    font-size: 11px;
    line-height: 1.15;
  }
}
/* Tooltip header (x-axis / time value) */
.graph div[style*="translateX("][style*="left:"] > div:first-child{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 13px;     /* desktop/tablet heading size */
  line-height: 1.2;
  margin: 0 0 6px 0;   /* small, controlled gap before table */
}
@media (max-width: 700px){
  /* Reduce tooltip padding on mobile */
  .graph div[style*="translateX("][style*="left:"]{
    padding: 4px 6px;
  }

  /* Table text compact on mobile */
  .graph div[style*="translateX("][style*="left:"] table.sources,
  .graph div[style*="translateX("][style*="left:"] table.sources td{
    font-size: 11px;
    line-height: 1.15;
  }

  /* Tighten row spacing */
  .graph div[style*="translateX("][style*="left:"] table.sources td{
    padding: 1px 4px;
  }
}

/* === Tooltip time / x-axis header (FINAL) === */
.graph div:has(> table.sources) > div:first-child{
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* reset any inherited layout */
  float: none;
  margin-left: 0;
  margin-right: 0;

  text-align: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;

  margin-top: 0;
  margin-bottom: 6px;
}
/* Tooltip time header: target the actual injected tooltip div */
.graph div[style*="translateX(calc(-100% - 8px))"][style*="left:"] > div:first-child{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin: 0 0 6px 0 !important;
}
.graph div[style*="translateX(-50%)"][style*="left:"] > div:first-child{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin: 0 0 6px 0 !important;
}
/* Center header by centering the tooltip container */
.graph div[style*="left:"][style*="transform:"]{
  text-align: center;
}

/* But keep the data table left/right aligned as expected */
.graph div[style*="left:"][style*="transform:"] table.sources{
  text-align: left;
}
.graph div[style*="left:"][style*="transform:"] table.sources td:last-child{
  text-align: right;
}
/* Center the time line (and anything else inline) */
.graph div[style*="left:"]{
  text-align: center;
}

/* But keep the table rows aligned normally */
.graph div[style*="left:"] table.sources{
  text-align: left;
}
.graph div[style*="left:"] table.sources td:last-child{
  text-align: right;
}
.graph div[style*="left:"] > div:first-of-type{
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  margin: 0 0 6px 0;
}
/* Tooltip time/x-axis header (only the FIRST div in the tooltip) */
.graph div[style*="translateX("][style*="left:"] > div:first-of-type{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  margin: 0 0 6px 0;
}
/* Desktop/tablet: keep tooltip high */
.graph .graph-tooltip{
  top: 8px;
  bottom: auto;
}

/* Header centered + heading style */
.graph .graph-tooltip__time{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  margin: 0 0 6px 0;
}

/* Mobile: compact */
@media (max-width: 700px){
  .graph .graph-tooltip{
    padding: 4px 6px;
  }
  .graph .graph-tooltip__time{
    font-size: 11px;
    margin-bottom: 4px;
  }
  .graph .graph-tooltip table.sources,
  .graph .graph-tooltip table.sources td{
    font-size: 11px;
    line-height: 1.15;
  }
  .graph .graph-tooltip table.sources td{
    padding: 1px 4px;
  }
}
/* === TOOLTIP OVERRIDES (force) === */
.graph .graph-tooltip{
  position: absolute !important;
  top: 8px !important;
  bottom: auto !important;
  outline: 2px #12fd1d !important; /* TEMP: should be obvious */
}

.graph .graph-tooltip__time{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 0 0 6px 0 !important;
}
/* === Tooltip time header (final) === */
.graph .graph-tooltip__time{
  /* make it behave like a proper header row */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* center and emphasize */
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;

  /* remove weird inherited spacing */
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* Prevent the table from “stealing” spacing that looks like blank space under time */
.graph .graph-tooltip table.sources{
  margin: 0 !important;
}
.graph .graph-tooltip{ display: block !important; }
/* Tooltip time / x-axis heading */
.graph .graph-tooltip__time{
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  font-weight: 600 !important;
  font-size: 14px !important;   /* ⬅ larger than rows */
  line-height: 1.25 !important;

  margin: 0 0 6px 0 !important;
}
/* Tooltip table text */
.graph .graph-tooltip table.sources,
.graph .graph-tooltip table.sources td{
  font-size: 13px !important;   /* ⬅ smaller than time */
  line-height: 1.25 !important;
}
/* Desktop & tablet: tighten tooltip padding */
.graph .graph-tooltip{
  padding: 5px 7px;   /* was likely 8px 10px or larger */
}
/* Desktop/tablet: slightly tighter rows */
.graph .graph-tooltip table.sources td{
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Wind records header: keep existing layout, just reserve space for the icon */
.wind-title{
  position: relative;        /* anchor the absolute SVG to this h2 */
  padding-left: 68px;        /* = left(12) + width(48) + gap(8) */
}

/* Turbine next to the text, facing the viewer */
.wind-title > svg.turbine{
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 48px;
  height: 62px;
}
.wind-title > svg.turbine{
  transform: translateY(-50%) scaleX(-1) !important;
  transform-origin: center;
}
.wind-column {
  display: grid;
  gap: 1rem;
}
@media (max-width: 640px) {
  .site-footer {
    display: none;
  }
}
/* Make links visible on dark backgrounds */
a {
  color: #4da3ff;          /* accessible blue */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus {
  color: #7bb8ff;
  text-decoration-thickness: 2px;
}
.site-title{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.site-title-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.share-icons{
  display:flex;
  align-items:center;
  gap:10px;
}

.share-icons a{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#666;
  text-decoration:none;
}

.share-icons a:hover{ color:#111; }

.share-icons svg{
  width:100%;
  height:100%;
  fill:currentColor;
  display:block;
}
.site-title{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Share icons column */
.share-icons{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:24px;   /* ← THIS creates real separation */
  position:relative;
  z-index:10;          /* ← critical: above header overlay */
}

/* Icon appearance */
.share-icons a{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#9aa0a6;       /* light grey, clearly visible */
  cursor:pointer;
}

.share-icons a:hover{
  color:#5f6368;       /* darker on hover */
}

.share-icons svg{
  width:100%;
  height:100%;
  fill:currentColor;
  display:block;
}
/* FORCE share icons to be visible */
.share-icons a{
  color: #c0c4c9 !important;     /* light grey */
  opacity: 1 !important;
  visibility: visible !important;
}

.share-icons svg{
  fill: currentColor !important; /* uses the link color above */
  opacity: 1 !important;
  visibility: visible !important;
}

/* If something is inverting/overlaying */
.share-icons, .share-icons *{
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* Hard override: make sure the actual SVG paths are filled */
.share-icons svg,
.share-icons path {
  fill: #c9cdd2 !important;   /* light grey for dark background */
  stroke: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Also ensure the clickable boxes exist and are visible */
.share-icons a{
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Put them above any overlays */
.share-icons{
  position: relative !important;
  z-index: 9999 !important;
}
/* INTRO SECTION AS POSITIONING CONTEXT */
#introduction{
  position: relative;
}

/* Desktop & tablet */
@media (min-width: 641px){

  /* Icons float independently on the left */
  .share-icons{
    position: absolute;
    left: 100;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* Title stays truly centred */
  .site-title{
    justify-content: center;
  }
}
@media (max-width: 640px){

  .share-icons{
    position: static;
    transform: none;
    margin-top: 10px;
  }
}
/* Make #introduction a positioning context */
#introduction{
  position: relative;
}

/* Keep title truly centered */
.site-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* Icon styling */
.share-icons{
  display:flex;
  gap:12px;
}

.share-icons a{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.share-icons svg{
  width:16px;
  height:16px;
  fill:#c9cdd2; /* light grey for dark mode */
  display:block;
}

.share-icons a:hover svg{
  fill:#ffffff;
}

/* Desktop/tablet: pin icons to the left WITHOUT moving the title */
@media (min-width: 641px){
  .share-icons{
    position:absolute;
    left: 0;
    top: 0.2rem;     /* tweak if you want: aligns with title */
    margin: 0;
  }
}

/* Mobile: put icons after the tagline */
@media (max-width: 640px){
  .share-icons{
    position: static;
    margin-top: 10px;
    order: 3;
  }

  /* Ensure the order is: H1 -> tagline -> icons */
  #introduction{
    display:flex;
    flex-direction:column;
  }

  .site-title{ order: 1; }
  .intro-tagline{ order: 2; }
  .share-icons{ order: 3; }
}
@media (max-width: 640px){
  .share-icons{
    justify-content: center;
    width: 100%;
  }
}
/* FOOTER SHARE ICONS — BRUTE FORCE VISIBILITY FIX */
.share-icons--footer{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;

  width: 100% !important;
  margin-top: 32px !important;
  padding: 16px 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  position: relative !important;
  z-index: 10 !important;
}

.share-icons--footer a{
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  align-items: center !important;
  justify-content: center !important;

  color: #c9cdd2 !important;
  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;
}

.share-icons--footer svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.share-icons--footer svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;

  filter: none !important;
  mix-blend-mode: normal !important;
}

.share-icons--footer a:hover{
  color: #ffffff !important;
}
.share-icons{
  display:flex;
  gap:12px;
}

.share-icons svg{
  width:16px;
  height:16px;
  fill:#c9cdd2;
  display:block;
}

.share-icons a:hover svg{
  fill:#ffffff;
}

/* Footer spacing + centering */
.share-icons--footer{
  justify-content:center;
  width:100%;
  margin-top:32px;
  padding:16px 0;
}
/* Base (header) share icons */
.share-icons{
  display: flex;
  gap: 12px;
}

/* Footer share icons – override header behaviour */
.share-icons--footer{
  justify-content: center;   /* center icons */
  width: 100%;
  margin-top: 32px;          /* space from text above */
  padding-top: 16px;
}
.share-icons--footer{
  border-top: 1px solid rgba(255,255,255,0.08);
}
.share-icons--footer{
  justify-content: center;
  width: 100%;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* Fuel Mix panel */
.panel-fuelmix .table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table base */
.panel-fuelmix .fuelmix-table{
  width: 100%;
  table-layout: fixed;           /* equal-width numeric columns */
  border-collapse: collapse;

  font-size: 11.7px;             /* ~1pt smaller than 13px */
  line-height: 1.2;
}

.panel-fuelmix .fuelmix-table th,
.panel-fuelmix .fuelmix-table td{
  padding: 6px 8px;
  vertical-align: middle;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Supplier + Source fixed widths */
.panel-fuelmix .fuelmix-table th:first-child,
.panel-fuelmix .fuelmix-table td:first-child{
  width: 220px;
  text-align: left;
}

.panel-fuelmix .fuelmix-table th:last-child,
.panel-fuelmix .fuelmix-table td:last-child{
  width: 90px;
  text-align: left;
}

/* Numeric columns */
.panel-fuelmix .fuelmix-table th:not(:first-child):not(:last-child),
.panel-fuelmix .fuelmix-table td:not(:first-child):not(:last-child){
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Supplier cell (logo + name) */
.panel-fuelmix .supplier-cell{
  display: inline-flex;          /* better inside table cells than flex */
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.panel-fuelmix .supplier-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;

  background: rgba(255,255,255,.92); /* dark theme support */
  border-radius: 6px;
  padding: 2px;
}

/* Mobile: force scroll instead of squashing */
@media (max-width: 860px){
  .panel-fuelmix .fuelmix-table{
    min-width: 980px;
  }

  .panel-fuelmix .fuelmix-table th:first-child,
  .panel-fuelmix .fuelmix-table td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(20,20,20,.98);
  }

  .panel-fuelmix .fuelmix-table thead th{
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(20,20,20,.98);
  }
}
/* ================================
   Fuel Mix table: compact + stable
   (override-only; loads last)
================================== */

/* 1) Scroll container (mobile + small screens) */
.panel-fuelmix .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

/* 2) Table layout + density */
.panel-fuelmix .fuelmix-table{
  width:100%;
  table-layout:fixed;           /* enables equal-width numeric columns */
  border-collapse:collapse;
  font-size:11.7px;             /* ~13px - 1pt */
  line-height:1.18;             /* slightly tighter than 1.2 */
}

/* Cells */
.panel-fuelmix .fuelmix-table th,
.panel-fuelmix .fuelmix-table td{
  padding:6px 8px;              /* compact */
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 3) Column sizing
   - Supplier fixed
   - Source fixed
   - Every intermediate numeric column equal width
*/
.panel-fuelmix .fuelmix-table th:first-child,
.panel-fuelmix .fuelmix-table td:first-child{
  width:240px;                  /* enough for logo + longer names */
  text-align:left;
}

.panel-fuelmix .fuelmix-table th:last-child,
.panel-fuelmix .fuelmix-table td:last-child{
  width:96px;                   /* Source */
  text-align:left;
}

/* There are 15 intermediate columns: make them equal */
.panel-fuelmix .fuelmix-table th:not(:first-child):not(:last-child),
.panel-fuelmix .fuelmix-table td:not(:first-child):not(:last-child){
  width:calc((100% - 240px - 96px) / 15);
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Optional: keep headers readable without wrapping */
.panel-fuelmix .fuelmix-table thead th{
  font-weight:600;
}

/* 4) Supplier cell + logo */
.panel-fuelmix .supplier-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;                  /* enables ellipsis on name if needed */
}

.panel-fuelmix .supplier-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  flex:0 0 auto;
  border-radius:6px;
  padding:2px;

  /* dark-theme friendly backing */
  background:rgba(255,255,255,.90);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

/* If your dark theme uses a data attr or class, this strengthens contrast safely */
@media (prefers-color-scheme: dark){
  .panel-fuelmix .supplier-logo{
    background:rgba(255,255,255,.92);
    box-shadow:0 0 0 1px rgba(255,255,255,.08);
  }
}

/* 5) Scannability: subtle zebra + hover */
.panel-fuelmix .fuelmix-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.03);
}
.panel-fuelmix .fuelmix-table tbody tr:hover{
  background:rgba(255,255,255,.06);
}

/* 6) Mobile: force scroll + sticky header + sticky first column */
@media (max-width: 860px){
  .panel-fuelmix .fuelmix-table{ min-width: 980px; } /* ensures scroll */

  /* Sticky header */
  .panel-fuelmix .fuelmix-table thead th{
    position:sticky;
    top:0;
    z-index:5;
    background:rgba(20,20,20,.98);
    backdrop-filter:saturate(1.1) blur(6px);
  }

  /* Sticky first column (supplier) */
  .panel-fuelmix .fuelmix-table th:first-child,
  .panel-fuelmix .fuelmix-table td:first-child{
    position:sticky;
    left:0;
    z-index:6; /* above other cells */
    background:rgba(20,20,20,.98);
    backdrop-filter:saturate(1.1) blur(6px);
  }

  /* Fix header/first-column overlap corner */
  .panel-fuelmix .fuelmix-table thead th:first-child{
    z-index:7;
  }
}

/* 7) Guardrails: if a base stylesheet forces center alignment or padding */
.panel-fuelmix .fuelmix-table td,
.panel-fuelmix .fuelmix-table th{
  box-sizing:border-box;
}
/* =========================================
   Fuel Mix (FINAL OVERRIDE) — CSS only
   Uses #fuelmix for specificity to beat grid.css
========================================= */

#fuelmix .table-wrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain;
}

/* Table layout + density */
#fuelmix table.fuelmix-table{
  width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  font-size:11.7px !important;
  line-height:1.18 !important;
}

#fuelmix table.fuelmix-table th,
#fuelmix table.fuelmix-table td{
  padding:6px 8px !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-sizing:border-box !important;
}

/* Fixed first/last columns */
#fuelmix table.fuelmix-table th:first-child,
#fuelmix table.fuelmix-table td:first-child{
  width:240px !important;
  text-align:left !important;
}

#fuelmix table.fuelmix-table th:last-child,
#fuelmix table.fuelmix-table td:last-child{
  width:96px !important;
  text-align:left !important;
}

/* Numeric columns */
#fuelmix table.fuelmix-table th:not(:first-child):not(:last-child),
#fuelmix table.fuelmix-table td:not(:first-child):not(:last-child){
  text-align:right !important;
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1 !important;
}

/* Supplier cell + logo */
#fuelmix .supplier-cell{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

#fuelmix .supplier-logo{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  border-radius:6px !important;
  padding:2px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.12) !important;
}

/* Scannability */
#fuelmix table.fuelmix-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.03);
}
#fuelmix table.fuelmix-table tbody tr:hover{
  background:rgba(255,255,255,.06);
}

/* Mobile: scroll + sticky header + sticky first column */
@media (max-width: 860px){
  #fuelmix table.fuelmix-table{ min-width:980px !important; }

  #fuelmix table.fuelmix-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    background:rgba(20,20,20,.98) !important;
  }

  #fuelmix table.fuelmix-table th:first-child,
  #fuelmix table.fuelmix-table td:first-child{
    position:sticky !important;
    left:0 !important;
    z-index:6 !important;
    background:rgba(20,20,20,.98) !important;
  }

  #fuelmix table.fuelmix-table thead th:first-child{
    z-index:7 !important;
  }
}
/* =========================================
   Fuel Mix – branded fuel headers
   White text on category colours
========================================= */

#fuelmix table.fuelmix-table thead th{
  color:#fff;
  font-weight:600;
}

/* Gas (%) */
#fuelmix table.fuelmix-table thead th:nth-child(2){
  background:#e94; /* gas */
}

/* Coal (%) */
#fuelmix table.fuelmix-table thead th:nth-child(3){
  background:#a35; /* coal */
}

/* Nuclear (%) */
#fuelmix table.fuelmix-table thead th:nth-child(4){
  background:#09c; /* nuclear */
}

/* Renewables (%) */
#fuelmix table.fuelmix-table thead th:nth-child(5){
  background:#2f7d3e; /* renewables */
}

/* Other (%) */
#fuelmix table.fuelmix-table thead th:nth-child(6){
  background:#27c; /* others */
}

/* Slight rounding so it feels intentional */
#fuelmix table.fuelmix-table thead th{
  border-radius:4px 4px 0 0;
}
/* Reset all header cells to neutral first */
#fuelmix table.fuelmix-table thead th{
  background:rgba(255,255,255,.06);
  color:#eee;
}
/* Gas (%) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(2){
  background:#e94;
}

/* Coal (%) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(3){
  background:#a35;
}

/* Nuclear (%) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(4){
  background:#09c;
}

/* Renewables (%) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(5){
  background:#2f7d3e;
}

/* Other (%) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(6){
  background:#27c;
}
/* Emissions */
#fuelmix table.fuelmix-table thead tr:first-child th.emissions,
#fuelmix table.fuelmix-table thead tr:first-child th[data-metric="emissions"]{
  background:#c45;
  color:#fff;
}

/* Nuclear waste */
#fuelmix table.fuelmix-table thead tr:first-child th.nuclear,
#fuelmix table.fuelmix-table thead tr:first-child th[data-metric="nuclear-waste"]{
  background:#09c;
  color:#fff;
}
/* Year subheaders must remain neutral */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th{
  background:rgba(255,255,255,.06) !important;
  color:#eee !important;
  font-weight:500;
}
/* Metric header row only */
#fuelmix table.fuelmix-table thead tr:first-child > th{
  color:#fff !important;
}
/* Emissions header (fossils red) */
#fuelmix table.fuelmix-table thead tr:first-child > th:nth-child(X){
  background:#c45 !important;
}

/* Nuclear waste header (nuclear blue) */
#fuelmix table.fuelmix-table thead tr:first-child > th:nth-child(Y){
  background:#09c !important;
}
/* =========================================
   FuelMix: branded metric header backgrounds
   (top header row only; years remain neutral)
========================================= */

/* Neutral base for all header cells */
#fuelmix table.fuelmix-table thead th{
  background: rgba(255,255,255,.06);
  color: #eee;
  font-weight: 600;
}

/* Keep YEAR row neutral (2nd thead row) */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th{
  background: rgba(255,255,255,.06) !important;
  color: #eee !important;
  font-weight: 500 !important;
}

/* Top header row: white text */
#fuelmix table.fuelmix-table thead tr:first-child th{
  color: #fff !important;
}

/* Metric group headers (first header row) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(2){ background:#e94 !important; }      /* Gas */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(3){ background:#a35 !important; }      /* Coal */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(4){ background:#09c !important; }      /* Nuclear */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(5){ background:#2f7d3e !important; }   /* Renewables */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(6){ background:#27c !important; }      /* Other */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(7){ background:#c45 !important; }      /* Emissions */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(8){ background:#09c !important; }      /* Nuclear waste */

/* Optional: keep Supplier/Source neutral on the top row */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(1),
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(9){
  background: rgba(255,255,255,.06) !important;
  color: #eee !important;
}
/* =========================================
   FuelMix: header wrapping + nuclear waste width + year alignment
========================================= */

/* 1) Let ONLY the top header row (metric labels) wrap */
#fuelmix table.fuelmix-table thead tr:first-child th{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Keep Supplier + Source in top row single-line */
#fuelmix table.fuelmix-table thead tr:first-child th[rowspan="2"]{
  white-space: nowrap !important;
}

/* 2) Year subheadings: force consistent right alignment */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th{
  white-space: nowrap !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* But Supplier/Source header cells are rowspans, so year row only contains numeric years.
   This ensures any accidental left-align from grid.css is beaten. */

/* 3) Give Nuclear waste group more room (top header group cell) */
#fuelmix table.fuelmix-table thead tr:first-child th:nth-child(8){
  min-width: 170px;             /* nuclear waste group header */
}

/* 4) Give the two Nuclear waste year columns a touch more width */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(13),
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(14){
  min-width: 80px;
}

/* Optional: slightly shrink Supplier column so long headers get space on desktop */
#fuelmix table.fuelmix-table th:first-child,
#fuelmix table.fuelmix-table td:first-child{
  width: 220px !important;
}
/* =========================================
   FuelMix: vertical brand dividers
   Line on the right of each 2024 column
   (apply to year row + body only)
========================================= */

/* --- YEAR HEADER ROW (14 cells) --- */
/* Gas 2024 = 2 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(2){ border-right:1px solid #e94; }
/* Coal 2024 = 4 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(4){ border-right:1px solid #a35; }
/* Nuclear 2024 = 6 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(6){ border-right:1px solid #09c; }
/* Renewables 2024 = 8 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(8){ border-right:1px solid #2f7d3e; }
/* Other 2024 = 10 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(10){ border-right:1px solid #27c; }
/* Emissions 2024 = 12 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(12){ border-right:1px solid #c45; }
/* Nuclear waste 2024 = 14 */
#fuelmix table.fuelmix-table thead tr:nth-child(2) th:nth-child(14){ border-right:1px solid #09c; }


/* --- BODY ROWS (16 cells incl Supplier + Source) --- */
/* Gas 2024 = 3 */
#fuelmix table.fuelmix-table tbody td:nth-child(3){ border-right:1px solid #e94; }
/* Coal 2024 = 5 */
#fuelmix table.fuelmix-table tbody td:nth-child(5){ border-right:1px solid #a35; }
/* Nuclear 2024 = 7 */
#fuelmix table.fuelmix-table tbody td:nth-child(7){ border-right:1px solid #09c; }
/* Renewables 2024 = 9 */
#fuelmix table.fuelmix-table tbody td:nth-child(9){ border-right:1px solid #2f7d3e; }
/* Other 2024 = 11 */
#fuelmix table.fuelmix-table tbody td:nth-child(11){ border-right:1px solid #27c; }
/* Emissions 2024 = 13 */
#fuelmix table.fuelmix-table tbody td:nth-child(13){ border-right:1px solid #c45; }
/* Nuclear waste 2024 = 15 */
#fuelmix table.fuelmix-table tbody td:nth-child(15){ border-right:1px solid #09c; }
/* =========================================
   FuelMix: hide on mobile (temporary decision)
========================================= */
@media (max-width: 860px){
  #fuelmix .table-wrap{
    display:none !important;
  }

  /* Insert an explanatory note below the header */
  #fuelmix .panel-header::after{
    content:"Fuel Mix Disclosure is available on desktop due to table width. Mobile view coming soon.";
    display:block;
    margin-top:10px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    color:#eee;
    font-size:12px;
    line-height:1.25;
  }
}
/* =========================================
   FuelMix: heading alignment
========================================= */
#fuelmix .panel-header h2{
  text-align: center;
}
/* Fuelmix explainer “popup” (details/summary) */
#fuelmix .fuelmix-explainer{
  margin-top:10px;
}

#fuelmix .fuelmix-explainer > summary{
  display:inline-block;
  cursor:pointer;
  user-select:none;
  color:#eee;
  text-decoration:underline;
  text-underline-offset:2px;
}

#fuelmix .fuelmix-explainer[open] > summary{
  text-decoration:none;
}

#fuelmix .fuelmix-explainer__body{
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#eee;
  max-width: 70ch;
}
#generation-map-panel .panel-header h2 {
  text-align: center;
}