/* ==========================================================================
   Grid Pulse - design C ("poster")
   Loaded after style.css on every page. Restyles the whole site and adds the
   components the redesign introduced: the animated logo, grouped menus, the
   phone Menu, the Display and accessibility panel, the donut-first mix chart,
   Show as table, On this page and the country switcher.
   Colours are tokens, redefined for dark mode and high contrast below.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-inset: #eef0f3;
  --panel: #f4f5f7;
  --text: #14181f;
  --text-muted: #3d4350;
  --border: #d5d9df;
  --accent: #0a6e5c;
  --accent-contrast: #ffffff;
  --focus-ring: #1d6fe0;
  --ink: #14181f;
  --brand: #ffd54a;
  --brand-ink: #14181f;
  --header-bg: #14181f;
  --header-ink: #ffffff;
  --btn-bg: #ffffff;
  --btn-border: #14181f;
  --switch-track: #14181f;
  --shadow: none;
  --shadow-pop: 0 18px 40px rgba(20, 24, 31, 0.18);
  --radius: 10px;
  --radius-sm: 6px;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Mix chart: inner ring and group bar */
  --mix-ren: #17734f;   --mix-ren-tint: #b9e3cf; --mix-ren-ink: #17734f;
  --mix-non: #7a4e33;   --mix-non-tint: #e4d3c7; --mix-non-ink: #7a4e33;
  --mix-sto: #0b6e5f;   --mix-sto-tint: #c3e6df; --mix-sto-ink: #0b6e5f;
  --mix-imp: #24588f;   --mix-imp-tint: #cfe0f2; --mix-imp-ink: #24588f;

  /* Figure card tints */
  --tint-price: #fbefcf;
  --tint-emissions: #f6e7dc;
  --tint-demand: #dce8f7;
  --tint-generation: #d8f0e4;
  --tint-transfers: #e6e2fb;
  --tint-plain: #f4f5f7;
}

[data-theme="dark"] {
  --bg: #0e1116;
  --bg-elevated: #161b22;
  --bg-inset: #1d232c;
  --panel: #161b22;
  --text: #eceff3;
  --text-muted: #b3bac5;
  --border: #2c333d;
  --accent: #4fd1b0;
  --accent-contrast: #08110d;
  --focus-ring: #8fb8ff;
  --ink: #eceff3;
  --header-bg: #05070a;
  --btn-bg: #0e1116;
  --btn-border: #eceff3;
  --switch-track: #2a313b;
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.5);
  --mix-ren: #2a8a63;   --mix-ren-tint: #17402f; --mix-ren-ink: #6ee7a8;
  --mix-non: #9a6a4b;   --mix-non-tint: #3f2c20; --mix-non-ink: #ffb08a;
  --mix-sto: #1f9d86;   --mix-sto-tint: #123c35; --mix-sto-ink: #6fe0c8;
  --mix-imp: #4a7fc0;   --mix-imp-tint: #1b2f4d; --mix-imp-ink: #8fb8ff;
  --tint-price: #2e2814;
  --tint-emissions: #2c221c;
  --tint-demand: #18263a;
  --tint-generation: #15302a;
  --tint-transfers: #241f3d;
  --tint-plain: #161b22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116;
    --bg-elevated: #161b22;
    --bg-inset: #1d232c;
    --panel: #161b22;
    --text: #eceff3;
    --text-muted: #b3bac5;
    --border: #2c333d;
    --accent: #4fd1b0;
    --accent-contrast: #08110d;
    --focus-ring: #8fb8ff;
    --ink: #eceff3;
    --header-bg: #05070a;
    --btn-bg: #0e1116;
    --btn-border: #eceff3;
    --switch-track: #2a313b;
    --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.5);
    --mix-ren: #2a8a63;   --mix-ren-tint: #17402f; --mix-ren-ink: #6ee7a8;
    --mix-non: #9a6a4b;   --mix-non-tint: #3f2c20; --mix-non-ink: #ffb08a;
    --mix-sto: #1f9d86;   --mix-sto-tint: #123c35; --mix-sto-ink: #6fe0c8;
    --mix-imp: #4a7fc0;   --mix-imp-tint: #1b2f4d; --mix-imp-ink: #8fb8ff;
    --tint-price: #2e2814;
    --tint-emissions: #2c221c;
    --tint-demand: #18263a;
    --tint-generation: #15302a;
    --tint-transfers: #241f3d;
    --tint-plain: #161b22;
  }
}

/* High contrast (Display panel). Pure black and white, stronger borders. */
html.pref-hc {
  --bg: #ffffff; --bg-elevated: #ffffff; --bg-inset: #ffffff; --panel: #ffffff;
  --text: #000000; --text-muted: #000000; --border: #000000; --accent: #00483b; --ink: #000000;
  --btn-border: #000000; --header-bg: #000000;
  --tint-price: #ffffff; --tint-emissions: #ffffff; --tint-demand: #ffffff; --tint-generation: #ffffff; --tint-transfers: #ffffff; --tint-plain: #ffffff;
}
html.pref-hc[data-theme="dark"] {
  --bg: #000000; --bg-elevated: #000000; --bg-inset: #000000; --panel: #000000;
  --text: #ffffff; --text-muted: #ffffff; --border: #ffffff; --accent: #7cf5d4; --ink: #ffffff; --btn-bg: #000000; --btn-border: #ffffff;
  --tint-price: #000000; --tint-emissions: #000000; --tint-demand: #000000; --tint-generation: #000000; --tint-transfers: #000000; --tint-plain: #000000;
}
@media (prefers-color-scheme: dark) {
  html.pref-hc:not([data-theme="light"]) {
    --bg: #000000; --bg-elevated: #000000; --bg-inset: #000000; --panel: #000000;
    --text: #ffffff; --text-muted: #ffffff; --border: #ffffff; --accent: #7cf5d4; --ink: #ffffff; --btn-bg: #000000; --btn-border: #ffffff;
    --tint-price: #000000; --tint-emissions: #000000; --tint-demand: #000000; --tint-generation: #000000; --tint-transfers: #000000; --tint-plain: #000000;
  }
}
html.pref-hc .panel, html.pref-hc .stat, html.pref-hc .home-card, html.pref-hc .type-card, html.pref-hc .source-card { border: 2px solid var(--border) !important; }

/* Other Display panel options */
html.pref-readable { --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; --font-display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; }
html.pref-readable * { font-stretch: 100% !important; }
html.pref-underline main a:not(.type-card):not(.home-card):not(.btn):not(.copy-btn):not(.source-card), html.pref-underline .site-footer a { text-decoration: underline; text-underline-offset: 3px; }
html:not(.pref-underline) main a:not(:hover), html:not(.pref-underline) .site-footer a:not(:hover) { text-decoration: none; }
.type-card, .home-card, .on-this-page a, .ps-subnav a, .ps-placement-card, .ps-nation-card a.card { text-decoration: none !important; }
html.pref-spacing body { letter-spacing: 0.12em; word-spacing: 0.16em; line-height: 1.8; }
html.pref-spacing p { margin-bottom: 1.6em; }
/* Reduce motion: every animation jumps straight to its finished, still state,
   so nothing that normally fades or draws in is left hidden. */
html.pref-calm *, html.pref-calm *::before, html.pref-calm *::after {
  animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.pref-calm .panel, html.pref-calm .source-card, html.pref-calm .stat, html.pref-calm .type-card, html.pref-calm .hero h1, html.pref-calm .hero p { opacity: 1 !important; transform: none !important; }
html.pref-calm .chart-wrap.is-loading::before, html.pref-calm .chart-wrap.is-loading::after { animation: none !important; }

/* ---------- Base ---------- */
body { font-family: var(--font-body); background: var(--bg); color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.005em; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.wrap { max-width: 1280px; padding: 0 1.5rem; }
[id] { scroll-margin-top: 6.5rem; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 60; }
.site-header { background: var(--header-bg); color: var(--header-ink); border: 0; box-shadow: none; position: relative; }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.site-header .wrap { padding-top: 0; padding-bottom: 0; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--header-ink); flex: none; }
.brand:hover { color: var(--header-ink); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name { display: flex; align-items: center; gap: 8px; height: 28px; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 1.375rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.brand__uk { display: flex; align-items: center; height: 28px; }
.brand__tag { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 26px; padding: 0 8px; background: var(--brand); color: var(--brand-ink); border-radius: 4px; font-size: 1.06rem; line-height: 1; }
.brand__tagline, .brand__mark-pulse, .theme-toggle { display: none !important; }

/* Grid Pulse header mark: the bars rise left to right like a pulse, then the green "live" node pings. */
@keyframes gpBar { 0% { transform: scaleY(.12); opacity: 0; } 55% { transform: scaleY(1.18); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes gpNode { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ugPing { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
@keyframes ugTag { from { transform: translateX(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.gp-bar { transform-box: fill-box; transform-origin: center; animation: gpBar .55s calc(var(--i, 0) * 90ms) cubic-bezier(.2,.8,.2,1) both; }
.gp-node { transform-box: fill-box; transform-origin: center; animation: gpNode .35s .75s cubic-bezier(.2,.8,.2,1.4) both; }
.ug-ping { transform-box: fill-box; transform-origin: center; animation: ugPing 1.4s 1.1s ease-out 3 both; }
.ug-tag { animation: ugTag .5s .8s ease-out both; }
.ug-logo:hover .gp-bar, .ug-logo:focus-visible .gp-bar { animation-name: gpBarAgain; }
@keyframes gpBarAgain { 0% { transform: scaleY(.12); } 55% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .gp-bar, .gp-node, .ug-ping, .ug-tag, .ug-logo:hover .gp-bar { animation: none !important; }
  .ug-ping { opacity: 0; }
}
html.pref-calm .gp-bar, html.pref-calm .gp-node, html.pref-calm .ug-tag, html.pref-calm .ug-logo:hover .gp-bar { animation: none !important; }
html.pref-calm .ug-ping { opacity: 0; animation: none !important; }

.header-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex: none; }
.display-btn, .nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem;
  font: inherit; font-size: .95rem; font-weight: 700; border-radius: var(--radius-sm); cursor: pointer;
}
.display-btn { color: var(--header-ink); background: transparent; border: 2px solid var(--header-ink); }
.display-btn svg { width: 18px; height: 18px; }
.display-btn:hover, .display-btn[aria-expanded="true"] { background: var(--header-ink); color: var(--header-bg); }
.nav-toggle { display: none; color: var(--brand-ink); background: var(--brand); border: 2px solid var(--brand); position: static; }
.nav-toggle__icon { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

/* ---------- Main menu: desktop ---------- */
.site-nav { background: transparent; border: 0; box-shadow: none; flex: 1; position: static; }
.site-nav .wrap { padding: 0; }
.site-nav ul#site-nav-list { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.site-nav > ul#site-nav-list > li, .site-nav ul#site-nav-list > li { position: static; }
.site-nav a, .nav-group__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 .85rem;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--header-ink); background: transparent;
  border: 0; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.site-nav ul#site-nav-list > li > a:hover, .nav-group__toggle:hover { background: rgba(255,255,255,.12); color: var(--header-ink); }
.nav-group__toggle[data-active="true"], .site-nav ul#site-nav-list > li > a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }
.nav-group__toggle[aria-expanded="true"] { background: var(--header-ink); color: var(--header-bg); }
.nav-group__chevron { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-group__toggle[aria-expanded="true"] .nav-group__chevron { transform: rotate(180deg); }

.nav-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-elevated); color: var(--text);
  border-top: 4px solid var(--brand); box-shadow: var(--shadow-pop);
  padding: 1.75rem max(1.5rem, calc((100% - 1280px) / 2 + 1.5rem));
  gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.nav-panel.is-open, .nav-group__menu.is-open { display: grid; }
.nav-panel__heading { margin: 0 0 .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.nav-panel--europe ul, .nav-panel--world ul, .nav-panel--solar ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1rem; }
.nav-panel--europe .nav-panel__col:last-child ul, .nav-panel--world .nav-panel__col:last-child ul { grid-template-columns: 1fr; }
.site-nav .nav-panel a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 0; padding: .45rem .55rem; margin: 0 -.55rem;
  color: var(--text); white-space: normal; border-radius: var(--radius-sm);
}
.site-nav .nav-panel a:hover { background: var(--bg-inset); color: var(--text); }
.site-nav .nav-panel a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }
.nav-panel__name { font-weight: 700; font-size: 1.02rem; }
.nav-panel__desc { font-weight: 400; font-size: .88rem; color: var(--text-muted); }
.site-nav .nav-panel a[aria-current="page"] .nav-panel__desc { color: var(--brand-ink); }

/* ---------- Main menu: phone and narrow screens ---------- */
@media (max-width: 1179px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { flex: 0; }
  .site-nav ul#site-nav-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: .25rem 1.25rem 1.25rem;
    background: var(--bg-elevated); color: var(--text); border-top: 4px solid var(--brand); box-shadow: var(--shadow-pop);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .site-nav ul#site-nav-list.is-open { display: flex; }
  .site-nav ul#site-nav-list > li { border-bottom: 1px solid var(--border); }
  .site-nav ul#site-nav-list.is-open { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .site-nav ul#site-nav-list > li.nav-group { flex: 0 0 100%; }
  .site-nav ul#site-nav-list > li.nav-link { flex: 1 1 0; border: 0; margin-top: .75rem; }
  .site-nav ul#site-nav-list > li.nav-link + li.nav-link { margin-left: 6px; }
  .site-nav ul#site-nav-list > li.nav-link > a { justify-content: center; min-height: 44px; border: 2px solid var(--btn-border); border-radius: var(--radius-sm); font-size: 1rem; }
  .site-nav ul#site-nav-list > li > a, .nav-group__toggle {
    width: 100%; justify-content: space-between; min-height: 50px; padding: 0 .25rem; color: var(--text); font-size: 1.08rem; border-radius: 0;
  }
  .site-nav ul#site-nav-list > li > a:hover, .nav-group__toggle:hover { background: transparent; color: var(--accent); }
  .nav-group__toggle[data-active="true"] { background: transparent; color: var(--accent); }
  .nav-group__toggle[aria-expanded="true"] { background: transparent; color: var(--accent); }
  .site-nav ul#site-nav-list > li > a[aria-current="page"] { background: transparent; color: var(--accent); }
  .nav-panel { position: static; box-shadow: none; border: 0; padding: 0 0 1rem; gap: .75rem; grid-template-columns: 1fr; }
  .nav-panel.is-open { display: grid; }
  .nav-panel ul, .nav-panel--europe ul, .nav-panel--world ul, .nav-panel--solar ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .nav-panel--europe .nav-panel__col:last-child ul, .nav-panel--world .nav-panel__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-panel__heading { margin: .25rem 0 .35rem; }
  .site-nav .nav-panel a { margin: 0; min-height: 42px; justify-content: center; padding: .4rem .75rem; background: var(--bg-inset); }
  .nav-panel { padding-bottom: .75rem; }
  .nav-panel__heading { font-size: .75rem; }
  .nav-panel__desc { display: none; }
}
@media (max-width: 560px) {
  .site-header__bar { gap: .5rem; min-height: 64px; }
  .brand { gap: 8px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 1.05rem; gap: 6px; }
  .brand__tag { height: 22px; font-size: .85rem; padding: 0 6px; }
  .display-btn, .nav-toggle { padding: 0 .7rem; }
  .display-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav ul#site-nav-list { max-height: calc(100vh - 64px); }
}

/* ---------- Announcement banner ---------- */
.preview-banner {
  display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--brand); color: var(--brand-ink); padding: .5rem 1rem; font-size: .95rem; font-weight: 600; text-align: center; border: 0;
}
/* Folds away to a thin yellow line under the menu once the page scrolls
   (html.is-scrolled, set in initBannerFold). Opens again while focused. */
.preview-banner { overflow: hidden; max-height: 8rem; transition: max-height .35s ease, padding .35s ease; }
.preview-banner > * { transition: opacity .2s ease; }
html.is-scrolled .preview-banner:not(:focus-within) { max-height: 4px; padding-top: 0; padding-bottom: 0; }
html.is-scrolled .preview-banner:not(:focus-within) > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .preview-banner, .preview-banner > * { transition: none; } }
.preview-banner a { color: var(--brand-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.preview-banner__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--brand-ink); color: var(--brand); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Display and accessibility panel ---------- */
.display-panel {
  position: fixed; z-index: 80; top: 84px; right: max(16px, calc((100vw - 1280px) / 2 + 1.5rem));
  width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto;
  background: var(--bg-elevated); color: var(--text); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;
}
.display-panel[hidden] { display: none !important; }
.display-panel h2 { margin: 0; font-size: 1.25rem; }
.display-panel fieldset { border: 0; margin: 0; padding: 0; }
.display-panel legend { font-weight: 700; padding: 0; margin-bottom: .5rem; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--bg-inset); border-radius: 10px; padding: 4px; }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 8px; font-weight: 700; font-size: .95rem; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg input:checked + span { color: var(--brand-ink); }
.seg label:has(input:checked) { background: var(--brand); color: var(--brand-ink); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.pref-switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; border-top: 1px solid var(--border); font-weight: 600; cursor: pointer; }
.pref-switch span { display: flex; flex-direction: column; gap: 2px; }
.pref-switch small { font-weight: 400; font-size: .85rem; color: var(--text-muted); }
.pref-switch input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.display-panel__foot { display: flex; justify-content: space-between; gap: .75rem; padding-top: .25rem; }

/* ---------- Buttons ---------- */
.btn, .copy-btn, .chart-toolbar__btn, .mixchart__table-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 .95rem;
  font: inherit; font-size: .95rem; font-weight: 700; color: var(--text); background: var(--btn-bg);
  border: 2px solid var(--btn-border); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
}
.btn:hover, .copy-btn:hover, .chart-toolbar__btn:hover, .mixchart__table-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.copy-btn svg { width: 16px; height: 16px; }
.mixchart__table-btn[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-ink); }
.download-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Page hero ---------- */
main { padding-top: 2rem; padding-bottom: 2.5rem; }
.hero { margin: 0 0 1.75rem; }
.hero h1 { font-weight: 800; font-stretch: 112%; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .75rem; }
.hero p { font-size: 1.12rem; line-height: 1.55; max-width: 72ch; color: var(--text); }

.breadcrumb { margin: 0 0 .9rem; font-size: .95rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); font-weight: 600; }
.breadcrumb span[aria-hidden] { padding: 0 .4rem; }

.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: -0.5rem 0 1.75rem; }
.on-this-page { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.on-this-page__label { font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; }
.on-this-page a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: 999px; background: var(--bg-inset); color: var(--text); font-weight: 600; font-size: .92rem; text-decoration: none; }
.on-this-page a:hover { background: var(--ink); color: var(--bg); }
.country-switch { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.country-switch label { font-weight: 700; font-size: .95rem; }
.country-switch select { font: inherit; font-size: 1rem; min-height: 44px; padding: 0 .75rem; border: 2px solid var(--btn-border); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--text); }
.country-switch a { font-weight: 700; }

/* ---------- Home hero (design C) ---------- */
.home-hero { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; margin-bottom: 1.75rem; }
.home-hero__main { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
.home-hero__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); font-size: .88rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.home-hero__dot { width: 9px; height: 9px; border-radius: 50%; background: #4fd18b; flex: none; }
.home-hero__share { font-weight: 900; font-stretch: 125%; font-size: clamp(3.5rem, 2rem + 4vw, 5.3rem); line-height: .85; letter-spacing: -0.03em; color: var(--mix-ren-ink); font-variant-numeric: tabular-nums; }
.home-hero h1 { margin: 0; font-weight: 800; font-stretch: 112%; font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem); line-height: 1.1; }
.home-hero__card { grid-column: 5; background: var(--tint-plain); border-radius: var(--radius); padding: 18px; }
.home-hero__card p { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero__main, .home-hero__card { grid-column: auto; }
}

/* ---------- Figure cards ---------- */
.status-grid { gap: 10px; margin-bottom: .75rem; }
.stat {
  background: var(--tint-plain); border: 0; border-radius: var(--radius); box-shadow: none; padding: 18px;
}
.stat dt { font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); }
.stat dd { font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.stat dd small { font-size: .95rem; font-weight: 700; font-stretch: 100%; color: var(--text-muted); }
.stat-band { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.stat__spark.chart-wrap { height: 48px; }
.stat--price { background: var(--tint-price); }
.stat--emissions { background: var(--tint-emissions); }
.stat--demand { background: var(--tint-demand); }
.stat--generation { background: var(--tint-generation); }
.stat--transfers { background: var(--tint-transfers); }
.figures-tools { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.figures-tools .chart-caption { margin: 0; }

/* ---------- Panels and sections ---------- */
.panel, .source-card { background: var(--panel); border: 0; border-radius: var(--radius); box-shadow: none; padding: 1.5rem 1.6rem 1.6rem; margin-bottom: 1.25rem; }
.panel > h2, main section > h2, .source-card h2 { font-weight: 800; font-stretch: 112%; font-size: 1.55rem; line-height: 1.15; margin: 0 0 .75rem; }
.panel > h2 { text-transform: uppercase; letter-spacing: 0; font-size: 1.45rem; }
.chart-card { background: var(--bg-elevated); border: 0; border-radius: var(--radius); }
.chart-caption { color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
.range-tabs { background: var(--bg-inset); border-radius: 10px; padding: 4px; gap: 4px; border: 0; display: inline-flex; flex-wrap: wrap; }
.range-tabs [role="tab"] { min-height: 40px; border: 0; border-radius: 8px; font-weight: 700; background: transparent; color: var(--text); }
.range-tabs [role="tab"]:hover { background: var(--bg-elevated); }
.range-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--bg); }
table.mix th, table.mix td { border-color: var(--border); }
table.mix tr.group-row th, table.mix tr.group-row td { font-weight: 800; }
.records-list li { border-color: var(--border); }
.records-list li strong { font-weight: 800; }
.type-card { background: var(--panel); border: 0 !important; border-radius: var(--radius); box-shadow: none; }
.type-card .type-card__value { font-weight: 900; font-stretch: 112%; }
.callout { border-radius: var(--radius); }

.home-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 1.25rem; }
.home-card { border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.home-card--solar { background: var(--brand); color: var(--brand-ink); }
.home-card--solar:hover { color: var(--brand-ink); }
.home-card__eyebrow { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.home-card__title { font-weight: 900; font-stretch: 112%; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.05; }
.home-card--records { background: var(--ink); color: var(--bg); }
.home-card--records h2 { margin: 0; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-stretch: 100%; }
.home-card--records a { color: var(--brand); font-weight: 700; }
.home-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.home-records div { display: flex; flex-direction: column; }
.home-records dt { order: 2; font-size: .95rem; }
.home-records dd { order: 1; margin: 0; font-weight: 900; font-stretch: 112%; font-size: 2rem; }
html[data-theme="dark"] .home-card--records, html.pref-hc .home-card--records { border: 2px solid var(--border); }
@media (max-width: 760px) { .home-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--header-bg); color: #ffffff; border: 0; margin-top: 2rem; }
.site-footer a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--brand); }
.site-footer h2 { color: #ffffff; }
.site-footer .badge { background: #ffffff; color: #14181f; }

/* ---------- Mix chart (donut first, with a Bar switch) ---------- */
.mixchart { display: flex; flex-direction: column; gap: 14px; margin-bottom: 1rem; }
.mixchart__top { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.mixchart__readout { margin: 0; min-height: 1.5em; font-weight: 600; color: var(--text-muted); flex: 1 1 280px; }
.mixchart__readout.is-active { color: var(--text); }
.mixchart__switch { display: inline-flex; gap: 4px; background: var(--switch-track); border-radius: 8px; padding: 3px; flex: none; }
.mixchart__switch button { font: inherit; font-size: .92rem; font-weight: 700; min-height: 38px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: #ffffff; cursor: pointer; }
.mixchart__switch button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.mixchart__donut { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 44px; align-items: center; }
.mixchart__ring { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; }
.mixchart__ring svg { width: 100%; height: 100%; display: block; }
.mixchart__ring circle { cursor: pointer; transition: opacity .15s ease; }
.mixchart__centre { position: absolute; inset: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; text-align: center; }
.mixchart__centre strong { font-weight: 900; font-stretch: 100%; font-size: clamp(.95rem, 7cqi, 1.3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mixchart__centre span { font-size: clamp(.72rem, 4cqi, .85rem); line-height: 1.2; max-width: 40cqi; color: var(--text-muted); }
.mixchart__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; }
.mixchart__group { display: flex; flex-direction: column; gap: 2px; }
.mixchart__legend button { font: inherit; color: inherit; background: none; border: 0; text-align: left; cursor: pointer; transition: opacity .15s ease; border-radius: 4px; }
.mixchart__legend .mixchart__gbtn { display: flex; flex-direction: column; width: 100%; padding: 10px 0 6px; border-top: 6px solid var(--g); border-radius: 0; }
.mixchart__gbtn strong { font-size: 1.05rem; color: var(--gi); }
.mixchart__ibtn { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 36px; padding: 4px 0; min-width: 0; max-width: 100%; }
.mixchart__sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mixchart__val { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.mixchart__note { margin: 0; font-size: .9rem; color: var(--text-muted); }
.mixchart .is-dim { opacity: .25; }
.mixchart__bars { display: flex; flex-direction: column; }
.mixchart__labels { position: relative; font-size: .92rem; line-height: 1.25; }
.mixchart__label { position: absolute; display: flex; flex-direction: column; white-space: nowrap; padding-left: 6px; transition: opacity .15s ease; font-variant-numeric: tabular-nums; }
.mixchart__labels--top .mixchart__label { border-left: 1px solid var(--ink); }
.mixchart__label span { color: var(--text-muted); }
.mixchart__strip { display: flex; overflow: hidden; }
.mixchart__strip--src { height: 44px; border-radius: 6px 6px 0 0; }
.mixchart__strip--grp { height: 40px; margin-top: 6px; border-radius: 0 0 6px 6px; }
.mixchart__strip button { height: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; transition: opacity .15s ease; min-width: 2px; }
.mixchart__strip--src button + button { box-shadow: inset 2px 0 0 var(--panel); }
.mixchart__strip--grp button { border-top: 4px solid var(--g); background: var(--t); }
.mixchart__strip--grp button + button { box-shadow: inset 3px 0 0 var(--panel); }
.mixchart__labels--bottom .mixchart__label strong { color: var(--gi); }
.mixchart__table[hidden] { display: none !important; }
@media (max-width: 720px) {
  .mixchart__donut { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .mixchart__legend { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chart-grid--donuts { display: block; }

/* ---------- Home additions ---------- */
.home-hero h1 { display: flex; flex-direction: column; gap: 14px; }
.home-hero__lead { display: block; }
.home-hero__pill br, .home-hero__pill .stat-time-uk { display: none; }
.home-hero__pill:has(#stat-time.is-loading-text) .home-hero__updated { display: none; }
.home-hero__pill #stat-time { font: inherit; }
.status-grid--home { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .status-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .status-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .status-grid--home { grid-template-columns: 1fr; } }

/* ---------- Header and cards: small screens ---------- */
.site-header .wrap.site-header__bar { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; justify-content: flex-start; }
@media (max-width: 1179px) {
  .site-nav { flex: 0 0 0; width: 0; min-width: 0; }
}
@media (max-width: 640px) {
  .stat { padding: 14px; }
  .stat dd { font-size: 1.6rem; }
  .stat dd small { font-size: .8rem; }
  .home-records { grid-template-columns: 1fr; gap: 12px; }
  .home-records dd { font-size: 1.6rem; }
  .home-card { padding: 20px; }
  .panel, .source-card { padding: 1.1rem 1rem 1.25rem; }
  .figures-tools .download-row .copy-btn { flex: 1 1 auto; }
}

/* Band labels on the tinted figure cards: the word in ink, the dot keeps the colour */
.stat .stat-band { color: var(--text) !important; }
.home-card--records { background: #14181f; color: #ffffff; }
html[data-theme="dark"] .home-card--records { background: #05070a; border: 2px solid #2c333d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-card--records { background: #05070a; border: 2px solid #2c333d; } }
html.pref-hc .home-card--records { background: #000000; }
.home-card--records a { color: #ffd54a; }

/* Large text and narrow screens: the logo keeps its size (a logotype), the header may wrap rather than scroll sideways */
.brand__name { font-size: 22px; }
.brand__tag { font-size: 17px; }
.site-header .wrap.site-header__bar { flex-wrap: wrap; row-gap: .5rem; }
@media (max-width: 560px) { .brand__name { font-size: 17px; } .brand__tag { font-size: 14px; } }
.country-switch { flex-wrap: wrap; }
.page-tools { min-width: 0; }

/* Reflow: nothing scrolls sideways at 175% text on a 390px phone */
main { overflow-wrap: break-word; }
main h1, main h2 { overflow-wrap: anywhere; hyphens: auto; }
main select, main input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; }
main label { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 760px) {
  main table { display: block; max-width: 100%; overflow-x: auto; }
}
.records-list li { flex-wrap: wrap; }
.records-list li > * { min-width: 0; }
.ps-sunbar-labels span { min-width: 0; overflow: hidden; text-overflow: clip; font-size: 11px; }
main p a, main li a { overflow-wrap: anywhere; }
.country-switch select { min-width: 0; flex: 1 1 10rem; }
.chart-grid > *, .panel-grid > *, .source-card, .chart-card { min-width: 0; }
.chart-toolbar { flex-wrap: wrap; }
@media (max-width: 760px) {
  .country-switch { width: 100%; margin-left: 0; }
  .country-switch select { flex: 1 1 0; }
}
.source-card { border-left: 0; }
main p { overflow-wrap: anywhere; }
.chart-toolbar__btn, .copy-btn { white-space: normal; text-align: left; max-width: 100%; }
main h1, main h2 { hyphens: manual; }
@media (max-width: 560px) {
  .wrap { padding: 0 1rem; }
  .site-header__bar { gap: .4rem; }
  .header-controls { gap: .35rem; }
  .nav-toggle { padding: 0 .65rem; }
}
@media (max-width: 380px) {
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 15px; gap: 5px; }
  .brand__tag { font-size: 12px; height: 20px; padding: 0 5px; }
  .nav-toggle { padding: 0 .55rem; font-size: .9rem; }
}


/* ---------- Menu that does not fit ----------
   app.js measures the header. If the full menu and the Display button do not
   fit on one line (big text, a narrow window, a wide font), it first shows
   Display as an icon (html.nav-tight), then switches to the Menu button
   (html.nav-compact), the same layout phones use. */
.site-header .wrap.site-header__bar { flex-wrap: nowrap; }
@media (max-width: 560px) { .site-header .wrap.site-header__bar { flex-wrap: wrap; } }
html.nav-tight .display-btn { padding: 0 .7rem; }
html.nav-tight .display-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.nav-compact .site-header .wrap.site-header__bar { flex-wrap: nowrap; }
html.nav-compact .nav-toggle { display: inline-flex; }
html.nav-compact .site-nav { flex: 0; }
html.nav-compact .site-nav ul#site-nav-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: .25rem 1.25rem 1.25rem;
    background: var(--bg-elevated); color: var(--text); border-top: 4px solid var(--brand); box-shadow: var(--shadow-pop);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
html.nav-compact .site-nav ul#site-nav-list.is-open { display: flex; }
html.nav-compact .site-nav ul#site-nav-list > li { border-bottom: 1px solid var(--border); }
html.nav-compact .site-nav ul#site-nav-list.is-open { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
html.nav-compact .site-nav ul#site-nav-list > li.nav-group { flex: 0 0 100%; }
html.nav-compact .site-nav ul#site-nav-list > li.nav-link { flex: 1 1 0; border: 0; margin-top: .75rem; }
html.nav-compact .site-nav ul#site-nav-list > li.nav-link + li.nav-link { margin-left: 6px; }
html.nav-compact .site-nav ul#site-nav-list > li.nav-link > a { justify-content: center; min-height: 44px; border: 2px solid var(--btn-border); border-radius: var(--radius-sm); font-size: 1rem; }
html.nav-compact .site-nav ul#site-nav-list > li > a, html.nav-compact .nav-group__toggle {
    width: 100%; justify-content: space-between; min-height: 50px; padding: 0 .25rem; color: var(--text); font-size: 1.08rem; border-radius: 0;
  }
html.nav-compact .site-nav ul#site-nav-list > li > a:hover, html.nav-compact .nav-group__toggle:hover { background: transparent; color: var(--accent); }
html.nav-compact .nav-group__toggle[data-active="true"] { background: transparent; color: var(--accent); }
html.nav-compact .nav-group__toggle[aria-expanded="true"] { background: transparent; color: var(--accent); }
html.nav-compact .site-nav ul#site-nav-list > li > a[aria-current="page"] { background: transparent; color: var(--accent); }
html.nav-compact .nav-panel { position: static; box-shadow: none; border: 0; padding: 0 0 1rem; gap: .75rem; grid-template-columns: 1fr; }
html.nav-compact .nav-panel.is-open { display: grid; }
html.nav-compact .nav-panel ul, html.nav-compact .nav-panel--europe ul, html.nav-compact .nav-panel--world ul, html.nav-compact .nav-panel--solar ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html.nav-compact .nav-panel--europe .nav-panel__col:last-child ul, html.nav-compact .nav-panel--world .nav-panel__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.nav-compact .nav-panel__heading { margin: .25rem 0 .35rem; }
html.nav-compact .site-nav .nav-panel a { margin: 0; min-height: 42px; justify-content: center; padding: .4rem .75rem; background: var(--bg-inset); }
html.nav-compact .nav-panel { padding-bottom: .75rem; }
html.nav-compact .nav-panel__heading { font-size: .75rem; }
html.nav-compact .nav-panel__desc { display: none; }
html.nav-compact .site-nav { flex: 0 0 0; width: 0; min-width: 0; }

/* Figure values scale with their card, and the unit drops to its own line if it must */
.stat { container-type: inline-size; }
.stat dd { font-size: clamp(1.35rem, 14.5cqi, 2.2rem); white-space: normal; overflow-wrap: normal; }
.stat dd > span { white-space: nowrap; }
.stat dd small { white-space: nowrap; display: inline-block; }
@media (min-width: 1180px) {
  html.nav-compact .site-nav ul#site-nav-list { left: auto; right: max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem)); width: min(480px, calc(100vw - 2rem)); border-radius: 0 0 12px 12px; }
}

/* Country pages: "Data as of" is a pill on the Switch country line, so the
   figure grid has one card fewer. */
.page-tools .page-pill { margin: 0; align-self: center; }
.page-tools:has(.page-pill) .on-this-page { flex: 1 0 100%; }
.status-grid > .page-pill, .wrap > .page-pill { margin: 0 0 1rem; }
@media (min-width: 960px) {
  .status-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Phone header: one row, whatever the text size ----------
   The logo, Display and Menu sit on one line with a gap above the yellow
   line. Sizes here are in px, so a phone's own large-text setting cannot
   push the buttons onto a second row and the logo out of view. */
@media (max-width: 560px) {
  .site-header .wrap.site-header__bar { flex-wrap: nowrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; gap: 8px; }
  .brand { gap: 7px; min-width: 0; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 16px; gap: 6px; height: 24px; }
  .brand__uk { height: 24px; }
  .brand__tag { font-size: 13px; height: 21px; padding: 0 6px; }
  .header-controls { gap: 6px; }
  .display-btn, .nav-toggle { min-height: 38px; font-size: 15px; line-height: 1; border-width: 2px; }
  .display-btn { width: 38px; padding: 0; justify-content: center; }
  .display-btn svg { width: 17px; height: 17px; }
  .nav-toggle { padding: 0 10px; gap: 8px; }
  .nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { width: 16px; }
  .nav-toggle__icon::before { top: -5px; }
  .nav-toggle__icon::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before, .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; }
}
@media (max-width: 380px) {
  .site-header .wrap.site-header__bar { gap: 6px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 14px; gap: 5px; }
  .brand__tag { font-size: 11.5px; height: 19px; padding: 0 5px; }
  .display-btn { width: 36px; min-height: 36px; }
  .nav-toggle { min-height: 36px; padding: 0 8px; gap: 6px; font-size: 14px; }
}

/* ---------- Open menu tab joins its panel ----------
   On desktop, an open menu button becomes a tab: it takes the panel's
   colour and runs down over the black bar and the yellow line into the
   panel, so there is no gap between the button and its menu. */
@media (min-width: 1180px) {
  html:not(.nav-compact) .nav-group__toggle[aria-expanded="true"] {
    position: relative; z-index: 3;
    background: var(--bg-elevated); color: var(--text);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  html:not(.nav-compact) .nav-group__toggle[aria-expanded="true"]::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: calc((72px - 100%) / 2 + 4px); background: var(--bg-elevated);
  }
  html:not(.nav-compact) .nav-panel { z-index: 2; }
}

/* ---- Error pages (errors/*.html, also used for PHP errors by includes/error_page.php) ---- */
.error-page__code { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.error-page__path code { word-break: break-all; background: var(--bg-inset); border-radius: var(--radius-sm); padding: .1rem .35rem; }
.error-page__detail { border-left: 4px solid var(--brand); background: var(--bg-inset); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 1rem 0; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.error-page__actions .btn { display: inline-flex; align-items: center; text-decoration: none; }
.error-page__links { columns: 2 14rem; margin: 0; padding-left: 1.2rem; }
.error-page__links li { margin: .3rem 0; }
.error-page p { margin: 0 0 .6rem; }

/* One-off "UK Grid: Live+ is now Grid Pulse" notice (initMovedNotice in app.js). */
.moved-notice { background: var(--bg-elevated); color: var(--text); border-bottom: 4px solid var(--brand); }
.moved-notice__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; flex-wrap: wrap; }
.moved-notice__inner p { margin: 0; }
.moved-notice__close { font: inherit; font-weight: 700; padding: .35rem .9rem; border-radius: 6px; border: 2px solid var(--text); background: transparent; color: var(--text); cursor: pointer; }
.moved-notice__close:hover, .moved-notice__close:focus-visible { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-ink); }

/* ==========================================================================
   Country features (assets/areas.js): renewable now, today so far, replay,
   records, flows, yearly history, day archive and day pages.
   ========================================================================== */
.area-now { margin-top: .5rem; }
.area-now__big { margin: 0; display: flex; flex-direction: column; gap: 14px; font-weight: 800; font-stretch: 112%; font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem); line-height: 1.1; }
.area-empty { color: var(--text-muted); margin: .25rem 0; }
.area-note { color: var(--text-muted); font-size: .92rem; margin: .75rem 0 0; }
.area-note .swatch, .area-flows + .area-note .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 8px; }
.area-sub, .panel .area-sub, main .area-sub { margin: 2rem 0 .75rem; font-size: 1.1rem; }

.home-card--today { background: var(--panel); color: var(--text); }
.home-card--today h2 { margin: 0; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-stretch: 100%; }
.home-card--records .area-note { color: inherit; opacity: .85; }
.home-card--records .area-empty { color: inherit; opacity: .85; }
.area-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 0; }
.area-facts div { display: flex; flex-direction: column; }
.area-facts dt { order: 2; font-size: .9rem; color: var(--text-muted); }
.area-facts dd { order: 1; margin: 0; font-weight: 800; font-size: 1.15rem; }

.area-reclist { list-style: none; margin: 0; padding: 0; }
.area-reclist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.home-card--records .area-reclist li { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.area-reclist li strong { font-weight: 800; text-align: right; }
.area-reclist li small { grid-column: 1 / -1; color: var(--text-muted); font-size: .88rem; }
.home-card--records .area-reclist li small { color: inherit; opacity: .8; }
.area-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; }
.area-board h3 { margin: .75rem 0 .25rem; font-size: 1rem; }

.area-table-scroll { overflow-x: auto; max-width: 100%; }
.area-years { border-collapse: collapse; font-size: .9rem; min-width: 100%; }
.area-years th, .area-years td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.area-years td.num, .area-years th.num { text-align: right; }
.area-years td[style] { background: color-mix(in srgb, var(--accent) calc(var(--close) * 40%), transparent); }
.area-years td.area-years__rec { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: 4px; font-weight: 800; }
.area-years__none { color: var(--text-muted); }

.area-replay__label { display: block; font-weight: 700; margin-bottom: .25rem; }
.area-replay__slider { width: 100%; accent-color: var(--accent); margin: .25rem 0 .5rem; min-height: 32px; }
.area-replay__share { margin: 0 0 1rem; color: var(--text-muted); }

.area-flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.area-flow { background: var(--panel); border-radius: var(--radius); padding: 16px; }
.area-flow h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.area-flow__cables { margin: 0 0 .5rem; color: var(--text-muted); font-size: .88rem; }
.area-flow__live { margin: 0; font-weight: 800; }
.area-flow__today { margin: .25rem 0 .5rem; font-size: .92rem; }
.area-flow__chart { height: 70px; }
.area-flow .area-note { margin-top: .5rem; font-size: .85rem; }

.area-daynav { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; font-weight: 700; flex-wrap: wrap; }
.area-years-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.area-years-nav a, .area-years-nav span { padding: .35rem .8rem; border-radius: 999px; border: 2px solid var(--ink); font-weight: 700; text-decoration: none; }
.area-years-nav span[aria-current] { background: var(--ink); color: var(--bg); }
.area-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 1rem 0; }
.area-cal__month h3 { margin: 0 0 .4rem; font-size: 1rem; }
.area-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.area-cal__day, .area-cal__pad { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .78rem; border-radius: 4px; text-decoration: none; }
.area-cal__day { text-decoration: none !important; background: color-mix(in srgb, #1f9d5a calc(var(--ren, 0) * 100%), var(--panel)); color: var(--text); }
a.area-cal__day:hover, a.area-cal__day:focus-visible { outline: 2px solid var(--ink); }
.area-cal__day.is-partial { opacity: .55; }
.area-cal__day.is-empty { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }
.area-month { margin: .5rem 0; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.area-month summary { cursor: pointer; font-weight: 800; padding: .35rem 0; }
.area-daylist { border-collapse: collapse; width: 100%; font-size: .92rem; }
.area-daylist th, .area-daylist td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.area-daylist .num { text-align: right; }
@media (max-width: 700px) {
  .home-cards { grid-template-columns: minmax(0, 1fr); }
  .area-cal { grid-template-columns: minmax(0, 1fr); }
}
.home-cards--one { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Dashboard layout (November 2026): cards, border maps, This year so far,
   neighbours comparison, Explore tiles, folds, Records and Borders pages.
   Filled by assets/areas.js. Sea on the maps is transparent; the home
   country is white.
   ========================================================================== */
:root { --map-home: #ffffff; --map-home-edge: #8d96a2; --map-land: #dde1e6; --map-edge: #c4cad2; --flow-in: #c47f00; --flow-out: #2b6cb0; --dark-card: #14181f; --dark-ink: #ffffff; --dark-muted: #c9d1dc; }
[data-theme="dark"] { --map-home: #ffffff; --map-home-edge: #ffffff; --map-land: #3a414c; --map-edge: #4b5360; --flow-in: #e0a030; --flow-out: #5b9be6; --dark-card: #05070a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-home: #ffffff; --map-home-edge: #ffffff; --map-land: #3a414c; --map-edge: #4b5360; --flow-in: #e0a030; --flow-out: #5b9be6; --dark-card: #05070a; } }

.gp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.25rem; align-items: start; }
@media (max-width: 860px) { .gp-cards { grid-template-columns: minmax(0, 1fr); } }
.gp-card { background: var(--panel); color: var(--text); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-card--dark { background: var(--dark-card); color: var(--dark-ink); }
html[data-theme="dark"] .gp-card--dark { border: 2px solid var(--border); }
.gp-card__h { margin: 0 !important; font-size: .85rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-stretch: 100% !important; }
.gp-card__big { margin: 0; font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.gp-card__link { font-weight: 800; margin-top: auto; }
.gp-card--dark a { color: #ffd54a; }
.gp-card--dark .area-facts dt, .gp-card--dark .area-note, .gp-card--dark .area-empty { color: var(--dark-muted); }
.gp-card--dark .area-facts dd { color: var(--dark-ink); }
.gp-card .area-note { margin-top: 0; font-size: .85rem; }

.gp-curve { width: 100%; height: 90px; display: block; color: var(--dark-ink); }
.gp-curve__line { stroke: #7fb3f0; }
.gp-curve__label { fill: var(--dark-muted); }

.gp-ico { width: 34px; height: 34px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #14181f; }
.gp-ico--wind { background: #cdebdc; } .gp-ico--solar { background: #fbecb4; } .gp-ico--leaf { background: #dbe8d2; }
.gp-ico--bolt { background: #d6e4f5; } .gp-ico--coin { background: #ece4f7; } .gp-ico--atom { background: #ece4f7; }
.gp-rec { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.gp-rec__top { display: flex; align-items: center; gap: 10px; }
.gp-rec__label { flex: 1; line-height: 1.25; min-width: 0; }
.gp-rec__label small { display: block; color: var(--text-muted); font-size: .82rem; }
.gp-rec__top strong { font-size: 1.05rem; white-space: nowrap; }
.gp-rec__today { color: var(--text-muted); font-size: .85rem; }
.gp-bar { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.gp-bar__fill { display: block; height: 100%; border-radius: 4px; transform-origin: left center; animation: gpGrow .9s cubic-bezier(.2,.8,.2,1) both; }
.gp-bar--row { grid-column: 1 / -1; margin: 4px 0 2px; height: 6px; }
@keyframes gpGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.gpmap { width: 100%; height: auto; max-height: 260px; display: block; }
.gpmap--big { max-height: 520px; }
.gpmap-home { fill: var(--map-home); stroke: var(--map-home-edge); stroke-width: 1; }
.gpmap-land { fill: var(--map-land); stroke: var(--map-edge); stroke-width: .6; }
.gpmap-in, .gpmap-out, .gpmap-idle { fill: none; stroke-linecap: round; }
.gpmap-in { stroke: var(--flow-in); }
.gpmap-out { stroke: var(--flow-out); }
.gpmap-idle { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.gpmap-dash { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 10; opacity: .95; animation: gpFlow 1.4s linear infinite; }
.gpmap-dash.is-in { animation-direction: reverse; }
@keyframes gpFlow { to { stroke-dashoffset: -24; } }
.gpmap-tag rect { fill: #14181f; }
.gpmap-tag text { fill: #ffffff; font-size: 11px; font-weight: 800; }
.gpmap-homelabel { fill: #14181f; font-size: 14px; font-weight: 900; paint-order: stroke; stroke: var(--map-home); stroke-width: 3px; }
.gpmap-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; margin: 0; }
.gpmap-key span { display: inline-flex; align-items: center; gap: 6px; }
.gpmap-key i { display: inline-block; width: 18px; height: 5px; border-radius: 3px; }
.gpmap-key__in { background: var(--flow-in); } .gpmap-key__out { background: var(--flow-out); }
.gp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.gp-list li { display: flex; justify-content: space-between; gap: 10px; }
.gp-list small { color: var(--text-muted); }
.gp-list .is-in { color: #8a5a00; } .gp-list .is-out { color: #2b6cb0; }
html[data-theme="dark"] .gp-list .is-in { color: #f0b545; } html[data-theme="dark"] .gp-list .is-out { color: #8bbcf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gp-list .is-in { color: #f0b545; } :root:not([data-theme="light"]) .gp-list .is-out { color: #8bbcf2; } }

.gp-yr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.gp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.gp-badge.is-up { background: #cdebdc; color: #0b5a3c; } .gp-badge.is-down { background: #f6dccf; color: #7a2e12; }
.gp-pill { margin: 0; align-self: flex-start; font-size: .85rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #ece4f7; color: #2e2466; }
.gp-sbars { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 8px; align-items: center; font-size: .82rem; font-weight: 700; }
.gp-sbar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; }
.gp-sbar span { transform-origin: left center; animation: gpGrow .9s cubic-bezier(.2,.8,.2,1) both; }
.gp-sbar.is-faded { opacity: .7; }
.gp-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .82rem; }
.gp-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.gp-sub { display: flex; flex-direction: column; gap: 2px; }
.gp-sub > span { font-size: .82rem; font-weight: 700; }
.gp-months { width: 100%; height: auto; display: block; }
.gp-col { fill: #2fa876; } .gp-col.is-partial { fill: #cdebdc; stroke: #2fa876; stroke-dasharray: 3 2; }
.gp-base { stroke: var(--border); } .gp-avg { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.gp-axis { fill: var(--text-muted); }
.gp-dark .gp-axis { fill: var(--dark-muted); }
.gp-grid { stroke: var(--border); }
.gp-mini { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.gp-mini div { background: var(--bg); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column-reverse; }
.gp-mini dt { font-size: .75rem; color: var(--text-muted); }
.gp-mini dd { margin: 0; font-weight: 800; font-size: .92rem; }

.gp-replay { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1rem; }
.gp-replay h3 { margin: 0 0 .25rem; font-size: 1.05rem; }

.panel.gp-dark { background: var(--dark-card); color: var(--dark-ink); }
html[data-theme="dark"] .panel.gp-dark { border: 2px solid var(--border); }
.panel.gp-dark a { color: #ffd54a; }
.panel.gp-dark .area-note, .panel.gp-dark .area-empty { color: var(--dark-muted); }
.gp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: .75rem; }
.gp-head h2 { margin: 0; }
.gp-cmp-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.gp-cmp h3 { margin: 0 0 .5rem; font-size: 1rem; }
.gp-cmp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-cmp__list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: .92rem; }
.gp-cmp__list li strong { text-align: right; }
.gp-cmp__list li.is-me a { font-weight: 900; }
.gp-dark .gp-bar { background: #2a313b; }

.gp-explore { margin: 0 0 1.25rem; }
.gp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gp-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 72px; border-radius: var(--radius); background: var(--panel); color: var(--text); text-decoration: none !important; }
.gp-tile strong { font-size: 1.1rem; }
.gp-tile span { font-size: .9rem; color: var(--text-muted); }
.gp-tile:hover, .gp-tile:focus-visible { outline: 2px solid var(--ink); }
.gp-tile--brand { background: var(--brand); color: var(--brand-ink); }
.gp-tile--brand span { color: var(--brand-ink); }

.gp-fold { background: var(--panel); border-radius: var(--radius); padding: 0 20px; margin: 0 0 10px; }
.gp-fold > summary { cursor: pointer; padding: 16px 0; list-style-position: inside; }
.gp-fold > summary .gp-fold__h { display: inline; margin: 0; font-size: 1.15rem; }
.gp-fold > section { background: transparent; padding: 0 0 16px; margin: 0; box-shadow: none; }
.gp-fold > section > h2:first-child { display: none; }

.gp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.gp-cols > .panel { margin: 0 0 10px; }
.gp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-pills button { font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; min-height: 40px; }
.gp-pills button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.gp-step { width: 100%; height: auto; display: block; background: var(--bg); border-radius: 10px; }
.gp-draw { stroke-dasharray: 3000; animation: gpDraw 1.6s ease-out both; }
@keyframes gpDraw { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
.gp-ping { animation: gpPing 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gpPing { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .gp-bar__fill, .gp-sbar span, .gpmap-dash, .gp-draw, .gp-ping { animation: none !important; }
  .gp-ping { opacity: 0; }
}
html.pref-calm .gp-bar__fill, html.pref-calm .gp-sbar span, html.pref-calm .gpmap-dash, html.pref-calm .gp-draw, html.pref-calm .gp-ping { animation: none !important; }
html.pref-calm .gp-ping { opacity: 0; }
@media (max-width: 560px) {
  .gp-cmp__list li { grid-template-columns: 96px minmax(0, 1fr) 40px; }
}
.gp-card > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-months { max-width: 440px; }
.gp-curve { max-width: 440px; }
.gpmap { max-width: 520px; }