/* UK Energy Insight — interface layer (September 2026 design refresh).
 * Loaded after style.css and learn.css. */
:root {
  --blue: #1668dc;
  --muted: #53678c;
  --action: #1668dc;
  --action-hover: #0f56bd;
  --header-h: 68px;
  --subbar-h: 46px;
  --surface: #fff;
  --surface-2: #f5f9fd;
  --tint: #eef6ff;
  --text: #071b49;
  --text-2: #3a5379;
  --good: #16804a;
  --good-bg: #e9f8ef;
  --warn: #b77900;
  --warn-bg: #fff6df;
  --bad: #d92d3a;
  --bad-bg: #fdecee;
  --surplus: #1668dc;
  --focus: 0 0 0 3px rgba(30, 123, 255, .38);
  --chart-grid: #e8eef5;
  --chart-muted: #5b6f93;
  --chart-strong: #071b49;
  --chart-tooltip: #071b49;
  --chart-demand: #0b2a66;
}
body { background: var(--surface); color: var(--text); }
:where(button, a, input, select, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.mobile-only { display: none !important; }
[hidden] { display: none !important; }
svg { flex: none; }

/* ---------- Header ---------- */
.header-tools { gap: 8px !important; }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #d3e0ee; border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover { border-color: var(--blue); color: var(--blue); background: var(--tint); }
.icon-button:disabled, .icon-button.is-busy { opacity: .6; cursor: wait; }
.icon-button.is-busy svg, .is-refreshing #refreshButton svg { animation: ukei-spin 1s linear infinite; }
@keyframes ukei-spin { to { transform: rotate(360deg); } }
.search-button { font-size: inherit !important; }
.health-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 10px; border: 1px solid #cfe0ee; border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.health-pill .live-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #93a4bc; box-shadow: 0 0 0 3px rgba(147, 164, 188, .2); }
.health-pill-text { display: grid; line-height: 1.15; }
.health-pill-text strong { font-size: 12px; font-weight: 750; }
.health-pill-text small { color: var(--muted); font-size: 11px; }
.health-pill.good { border-color: #bfe6cf; background: var(--good-bg); }
.health-pill.good .live-dot { background: var(--good); box-shadow: 0 0 0 3px rgba(31, 157, 92, .18); animation: ukei-pulse 2.6s ease-in-out infinite; }
.health-pill.warn { border-color: #efd9a0; background: var(--warn-bg); }
.health-pill.warn .live-dot { background: #f0a500; box-shadow: 0 0 0 3px rgba(240, 165, 0, .2); }
.health-pill.bad { border-color: #f3c0c5; background: var(--bad-bg); }
.health-pill.bad .live-dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(217, 45, 58, .18); }
.health-pill:hover { border-color: var(--blue); }
.health-pill .live-dot.refreshing { animation: ukei-pulse .8s ease-in-out infinite; }
@keyframes ukei-pulse { 50% { box-shadow: 0 0 0 6px rgba(31, 157, 92, 0); } }
.health-pill.compact { min-height: 32px; padding: 3px 10px 3px 8px; font-size: 12px; }
.health-pill.compact strong { font-weight: 750; }
.header-tools .health-pill, .header-tools .icon-button { flex: none; }
@media (min-width: 1121px) and (max-width: 1420px) { .header-tools .health-pill-text small { display: none; } }
@media (min-width: 1121px) and (max-width: 1260px) { .header-tools .health-pill-text { display: none; } .header-tools .health-pill { padding: 0; width: 36px; justify-content: center; } }
@media (min-width: 1121px) {
  .site-header { grid-template-columns: 188px minmax(0, 1fr) auto !important; }
  .primary-nav .nav-link { font-size: 12px !important; padding: 0 8px !important; }
}
@media (min-width: 1121px) and (max-width: 1360px) { .primary-nav .nav-link { font-size: 11.5px !important; padding: 0 6px !important; } }
@media (max-width: 1120px) {
  :root { --header-h: 64px; }
  .header-tools { display: flex !important; }
  .header-tools .health-pill { display: none; }
}
@media (max-width: 640px) {
  .header-tools { gap: 6px !important; }
  .brand img { width: 172px !important; }
}

/* ---------- Sub-bar: live ticker + view controls (sticky) ---------- */
.mobile-utility-bar { display: none !important; }
.sub-bar { position: sticky; top: var(--header-h); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--subbar-h); padding: 5px 24px; border-bottom: 1px solid var(--line); background: rgba(247, 250, 254, .96); backdrop-filter: blur(10px); }
.status-ticker { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .2s, transform .2s; }
.status-ticker::-webkit-scrollbar { display: none; }
.ticker-visible .status-ticker { opacity: 1; transform: none; pointer-events: auto; }
.status-ticker a { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.status-ticker a:hover { background: var(--tint); }
.status-ticker a + a { border-left: 1px solid var(--line); border-radius: 0; }
.status-ticker span { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.status-ticker b { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.status-ticker b .status-dot { width: 8px; height: 8px; margin-right: 5px; vertical-align: 1px; }
.tone-watch b, .tone-tight b { color: #b25e00; }
.tone-surplus b { color: var(--surplus); }
.tone-good b { color: var(--good); }
.status-dot.surplus { background: var(--surplus); }
.view-controls { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.view-controls .health-pill { display: none; }
.toggle-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px 4px 6px; border: 1px solid #d3e0ee; border-radius: 999px; background: var(--surface); color: var(--text); font: 700 12px/1 var(--font); cursor: pointer; }
.toggle-track { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #c9d6e6; transition: background .15s; }
.toggle-track:after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.toggle-chip[aria-pressed="true"] { border-color: #8cbdf8; background: var(--tint); }
.toggle-chip[aria-pressed="true"] .toggle-track { background: var(--blue); }
.toggle-chip[aria-pressed="true"] .toggle-track:after { transform: translateX(12px); }
.segmented { display: inline-flex; padding: 3px; border: 1px solid #d3e0ee; border-radius: 999px; background: var(--surface-2); cursor: pointer; font: 700 12px/1 var(--font); }
.segmented span { padding: 7px 11px; border-radius: 999px; color: var(--muted); transition: background .15s, color .15s; }
.segmented:not([data-mode="analyst"]) [data-seg="learner"], .segmented[data-mode="analyst"] [data-seg="analyst"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(7, 27, 73, .16); }
.view-controls .icon-button { width: 34px; height: 34px; }
.alert-badge[hidden] { display: none; }
.alert-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--blue); color: #fff; font: 800 10px/1 var(--font); font-style: normal; }
.page { scroll-margin-top: calc(var(--header-h) + var(--subbar-h) + 8px); }
@media (max-width: 900px) {
  .sub-bar { padding: 6px 12px; gap: 8px; }
  .status-ticker { display: none; }
  .view-controls { width: 100%; justify-content: space-between; gap: 6px; }
  .view-controls .health-pill { display: inline-flex; margin-right: auto; }
  .mobile-only { display: inline-grid !important; }
}
@media (max-width: 420px) {
  .toggle-chip { padding-right: 9px; }
  .segmented span { padding: 7px 8px; }
  .view-controls .icon-button { width: 32px; height: 32px; }
  #tourButton { display: none; }
}

/* ---------- Hero ---------- */
.hero.hero-compact { height: 132px; }
.hero.hero-compact h1 { font-size: 32px; }
.hero.hero-compact .hero-copy > p:last-child { max-width: 560px; }
@media (max-width: 980px) { .hero.hero-compact { height: 150px; } }
@media (max-width: 640px) {
  .hero.hero-compact { min-height: 0 !important; height: auto; padding: 20px 16px 22px !important; }
  .hero.hero-compact h1 { font-size: 26px; }
}

/* ---------- Section heading + legend ---------- */
.glance-heading { align-items: flex-end; }
.glance-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.kind-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.kind-legend li { display: inline-flex; align-items: center; gap: 5px; }
.kind-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kind-mark.measured { background: var(--blue); }
.kind-mark.calculated, .kind-mark.estimated-mix { background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); border: 1.5px solid var(--blue); }
.kind-mark.forecast { border: 1.5px dashed #8a5cf6; background: transparent; }
.kind-mark.rule { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: #f0a500; }
.tool-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid #cddcea; border-radius: 9px; background: var(--surface); color: var(--text); font: 700 12px/1 var(--font); cursor: pointer; }
.tool-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.tool-button:hover, .tool-button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--tint); }
.customise-hint, .snapshot-note { margin: -4px 2px 12px; color: var(--muted); font-size: 13px; }
.snapshot-note { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--warn-bg); color: #7a5300; font-weight: 600; }
@media (max-width: 980px) { .glance-heading { align-items: flex-start; } .glance-tools { justify-content: flex-start; } .kind-legend { gap: 10px; font-size: 11.5px; } }

/* ---------- KPI cards ---------- */
.kpi-card { container-type: inline-size; position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; padding-bottom: 14px !important; }
.kpi-card:hover { border-color: #a9cbf2; box-shadow: 0 8px 24px rgba(13, 42, 94, .1); transform: translateY(-1px); }
.kpi-card:focus-visible { box-shadow: var(--focus), 0 8px 24px rgba(13, 42, 94, .1); }
.kpi-card .kpi-value { font-size: clamp(19px, 11.5cqi, 27px) !important; white-space: nowrap; overflow: visible; }
.kpi-card .kpi-value.status-value { font-size: clamp(16px, 9cqi, 20px) !important; }
.kpi-card .kpi-meta { font-size: 12px !important; color: var(--text-2); }
.kpi-card .kpi-value.net-import { color: var(--blue) !important; }
.kpi-card .kpi-value.net-export { color: var(--good) !important; }
.kpi-card .kpi-label { font-size: 13px !important; padding-right: 26px; }
.kpi-value.is-loading, .kpi-value.is-loading * { color: transparent !important; }
.kpi-value.is-loading { position: relative; min-width: 9ch; border-radius: 7px; background: linear-gradient(90deg, #eef3f9 0%, #f8fbfe 50%, #eef3f9 100%); background-size: 200% 100%; animation: ukei-shimmer 1.3s ease-in-out infinite; }
@keyframes ukei-shimmer { to { background-position: -200% 0; } }
.from-snapshot .kpi-value { color: var(--muted) !important; }
.kpi-provenance { display: block !important; margin-top: 6px !important; color: var(--muted) !important; font-size: 11.5px !important; line-height: 1.35; }
.kpi-provenance .age-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #aab8cb; vertical-align: 1px; }
.kpi-provenance .why-delayed { margin-left: 5px; }
.kpi-provenance.fresh .age-dot { background: var(--good); }
.kpi-provenance.stale { color: #8a5f00 !important; }
.kpi-provenance.stale .age-dot { background: #f0a500; }
.kpi-provenance.error { color: var(--bad) !important; }
.kpi-provenance.error .age-dot { background: var(--bad); }
.why-delayed { padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px; background: transparent; color: inherit; font: 700 11px/1.5 var(--font); cursor: pointer; }
.why-delayed:hover { background: var(--warn-bg); }
.kpi-card .data-kind { position: absolute !important; top: 12px; right: 12px; bottom: auto !important; display: inline-flex; align-items: center; gap: 5px; padding: 0 !important; background: none !important; color: var(--muted) !important; font-size: 10.5px !important; letter-spacing: .03em; }
.kpi-card .data-kind span { display: none; }
.analyst-view .kpi-card .data-kind span, .explain-mode .kpi-card .data-kind span { display: inline; }
.kpi-card .data-kind .kind-mark { width: 9px; height: 9px; }
.kpi-card .explain-mode-hint { grid-column: 1 / -1 !important; margin: 8px 0 0 !important; padding: 8px 10px; border-radius: 8px; background: var(--tint); color: var(--text-2) !important; font-size: 12.5px !important; }
.explain-mode .kpi-card.understood .explain-mode-hint { display: none !important; }
.explain-button.understood { opacity: .55; }
.explain-mode .kpi-card { min-height: 0 !important; }
.kpi-card > .kpi-pin-controls { display: none; position: absolute; top: 8px; right: 8px; flex-direction: row; gap: 4px; }
.customising .kpi-card > .kpi-pin-controls { display: flex; }
.customising .kpi-card { cursor: default; outline: 2px dashed #b6cde6; outline-offset: -4px; }
.customising .kpi-card .data-kind { display: none !important; }
.kpi-pin-controls button { width: 28px; height: 28px; border: 1px solid #cddcea; border-radius: 8px; background: var(--surface); color: var(--text); font: 700 14px/1 var(--font); cursor: pointer; }
.kpi-pin-controls [data-pin][aria-pressed="true"] { border-color: #f0a500; color: #c98900; background: var(--warn-bg); }
.kpi-card.pinned:before { content: "★"; position: absolute; top: 8px; left: 10px; color: #f0a500; font-size: 12px; }
.glossary-chip { display: none !important; }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .kpi-card { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; padding: 11px 11px 11px !important; }
  .kpi-card .kpi-icon { display: none !important; }
  .kpi-card .kpi-label { margin-bottom: 4px !important; font-size: 12px !important; padding-right: 14px; }
  .kpi-card .kpi-meta { margin-top: 4px !important; font-size: 11px !important; }
  .kpi-provenance { font-size: 10.5px !important; gap: 2px 5px; }
  .kpi-card .kpi-value { font-size: clamp(16px, 12.5cqi, 23px) !important; }
  .kpi-card .kpi-value.status-value { font-size: 15px !important; }
  .kpi-card .data-kind { top: 11px; right: 9px; }
  .kpi-card .explain-button { width: 18px; height: 18px; margin-left: 4px; }
  .kpi-card:hover { transform: none; }
}

/* ---------- Brief + UK Energy Today ---------- */
.brief-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 13px; margin: 4px 0 14px; align-items: stretch; }
.brief-row .overview-intelligence { display: block; margin: 0; }
.brief-row .market-brief-card { height: 100%; align-items: start; }
.brief-row .market-brief-card h2 { font-size: 16.5px !important; line-height: 1.55; font-weight: 650; }
.brief-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.brief-foot p { margin: 0 !important; color: var(--muted); font-size: 12px !important; }
.brief-row .energy-today { margin: 0; }
.brief-row .energy-today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 14px; }
.brief-row .energy-today-grid > div { padding: 2px 12px !important; }
.brief-row .energy-today-grid > div:nth-child(3n + 1) { padding-left: 0 !important; }
.brief-row .energy-today-grid > div:nth-child(3n) { border-right: 0 !important; }
.brief-row .energy-today-grid span { font-size: 11px !important; }
.brief-row .energy-today-grid strong { font-size: 14px !important; }
.pressure-badge.low { background: #e3f6ec !important; color: #13653a !important; }
@media (max-width: 1100px) { .brief-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .brief-row .market-brief-card { grid-template-columns: 1fr !important; }
  .brief-row .brief-mark { display: none; }
  .brief-row .market-brief-card h2 { font-size: 15px !important; font-weight: 560 !important; line-height: 1.55 !important; }
  .brief-row .energy-today-grid { grid-template-columns: 1fr 1fr !important; }
  .brief-row .energy-today-grid > div { padding: 6px 8px !important; border-right: 0 !important; }
}

/* ---------- Learning moment ---------- */
.learning-moment { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 6px; padding: 16px 20px; border: 1px solid #c9def2; border-radius: 14px; background: linear-gradient(120deg, #eef7ff, #f3fbf7); }
.learning-moment.busy { border-color: #efd9a0; background: linear-gradient(120deg, #fff8e8, #f6fbff); }
.learning-moment h2 { margin: 2px 0 4px; font-size: 18px; letter-spacing: -.02em; }
.learning-moment p:last-child { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.learning-moment a { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 40px; padding: 9px 15px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 750; font-size: 13px; text-decoration: none; }
.learning-moment a:hover { background: #0b5fd8; }
@media (max-width: 640px) { .learning-moment { flex-direction: column; align-items: flex-start; padding: 15px; } .learning-moment a { width: 100%; justify-content: center; } }

/* ---------- Key charts ---------- */
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
@media (max-width: 1100px) { .span-7, .span-5 { grid-column: span 12; } }
.chart-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.range-chips { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.range-chips button { min-width: 42px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 700 12px/1 var(--font); cursor: pointer; }
.range-chips button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(7, 27, 73, .15); }
.switch-label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.switch-label input { width: 16px; height: 16px; accent-color: var(--blue); }
.carbon-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding: 9px 12px; border-radius: 9px; background: var(--good-bg); font-size: 12.5px; }
.carbon-line span { color: var(--text-2); font-weight: 650; }
.carbon-line strong { font-variant-numeric: tabular-nums; text-transform: none; }
.panel-status { font-size: 12px !important; }
.panel-footer { font-size: 11px !important; color: var(--muted) !important; }
.panel-header .source-pill { margin-left: auto; }
.chart-menu { position: relative; flex: none; }
.chart-menu-button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: 800 16px/1 var(--font); cursor: pointer; }
.chart-menu-button:hover, .chart-menu-button[aria-expanded="true"] { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.chart-menu-list { position: absolute; right: 0; top: 34px; z-index: 30; display: grid; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 32px rgba(7, 27, 73, .16); }
.chart-menu-list[hidden] { display: none; }
.chart-menu-list button { padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: 600 13px/1.2 var(--font); text-align: left; cursor: pointer; }
.chart-menu-list button:hover, .chart-menu-list button:focus-visible { background: var(--tint); }
.panel { overflow: visible !important; }
.panel .chart, .panel .donut-chart { overflow: hidden; }

/* ---------- Progressive disclosure ---------- */
.home-more { margin: 14px 0 0; border: 1px solid #cfdeec; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.home-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 14px 18px; list-style: none; cursor: pointer; border-radius: 14px; }
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary > span:first-child { display: grid; gap: 4px; }
.home-more > summary strong { font-size: 15.5px; }
.home-more > summary small { color: var(--muted); font-size: 12.5px; }
.summary-icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--tint); }
.summary-icon:before, .summary-icon:after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--blue); transition: transform .2s; }
.summary-icon:after { transform: rotate(90deg); }
.home-more[open] .summary-icon:after { transform: rotate(0); }
.home-more[open] > summary { border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.home-more-body { display: grid; gap: 12px; padding: 14px; }
.home-more-body > * { margin: 0 !important; }
.home-more-body .overview-insights-heading { display: none; }
.home-more-body .page-history { border: 0 !important; box-shadow: none !important; padding: 4px !important; }

/* ---------- History tables ---------- */
.page-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-history-toolbar .page-history-status { margin: 0 !important; }
.page-history-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.sort-button span { color: #9fb0c6; font-size: 10px; }
.sort-button.active span { color: var(--blue); }
.page-history-table th:not(:first-child) .sort-button { margin-left: auto; }
.day-delta { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.day-delta.up { color: #b25e00; }
.day-delta.down { color: var(--good); }

/* ---------- Popovers, alerts, toasts, tour ---------- */
.explain-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.explain-actions button { flex: 1 1 auto; min-height: 36px; padding: 8px 10px; border: 1px solid #cddcea; border-radius: 9px; background: var(--surface); color: var(--text); font: 700 12.5px/1.2 var(--font); cursor: pointer; }
.explain-actions .explain-learn { border-color: var(--blue); background: var(--blue); color: #fff; }
.explain-actions .explain-understood.is-on { border-color: #9ad5b3; background: var(--good-bg); color: #13653a; }
.why-popover, .alerts-panel { position: fixed; z-index: 260; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(7, 27, 73, .22); }
.why-popover[hidden], .alerts-panel[hidden], .tour[hidden], .toast-stack:empty { display: none; }
.why-popover h2 { margin: 2px 0 8px; font-size: 17px; }
.why-popover p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.why-popover .why-status { color: #7a5300; }
.panel-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; }
.alerts-panel { top: calc(var(--header-h) + var(--subbar-h) + 8px); right: 16px; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - var(--header-h) - var(--subbar-h) - 24px); overflow: auto; }
.alerts-panel header { display: flex; justify-content: space-between; }
.alerts-panel h2 { margin: 2px 0 6px; font-size: 19px; }
.alerts-note { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.alert-rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.alert-rule > input { width: 18px; height: 18px; accent-color: var(--blue); }
.alert-input { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 700; }
.alert-input input { width: 72px; min-height: 32px; padding: 4px 8px; border: 1px solid #cddcea; border-radius: 7px; background: var(--surface); color: var(--text); font: 600 13px var(--font); }
.alerts-actions { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.alerts-actions button { min-height: 38px; font-size: 13px; }
.alerts-status { margin: 10px 0 0; color: var(--text-2); font-size: 12.5px; }
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 270; display: grid; gap: 8px; width: min(400px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 34px rgba(7, 27, 73, .2); font-size: 13.5px; line-height: 1.45; animation: ukei-toast .25s ease-out; }
.toast > span { flex: 1; }
.toast > button:last-child { width: 28px; height: 28px; flex: none; border: 0; border-radius: 7px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.toast.success { border-left-color: var(--good); }
.toast.warn { border-left-color: #f0a500; }
.toast.alert { border-left-color: var(--bad); }
.toast .primary-action { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
@keyframes ukei-toast { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 900px) { .toast-stack { right: 12px; left: 12px; width: auto; bottom: 86px; } }
.tour { position: fixed; left: 50%; bottom: 24px; z-index: 280; width: min(460px, calc(100vw - 24px)); transform: translateX(-50%); }
.tour-card { padding: 18px 20px; border: 1px solid #b9d3f0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(7, 27, 73, .3); }
.tour-card h2 { margin: 3px 0 6px; font-size: 19px; }
.tour-card p:not(.eyebrow) { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-actions span { display: flex; gap: 8px; }
.tour-actions button { min-height: 38px; }
.tour-highlight { position: relative; z-index: 3; box-shadow: 0 0 0 4px rgba(30, 123, 255, .55), 0 0 0 9999px rgba(7, 27, 73, .28) !important; border-radius: 14px; transition: box-shadow .25s; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid #cddcea; border-radius: 9px; background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; }
.secondary-action:disabled { opacity: .5; cursor: default; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 700; cursor: pointer; }

/* ---------- Data sources page ---------- */
.feed-health .feed-state { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 750; }
.feed-health.live .feed-state { background: var(--good-bg); color: #13653a; }
.feed-health.stale .feed-state, .feed-health.fallback .feed-state { background: var(--warn-bg); color: #7a5300; }
.feed-health.error .feed-state { background: var(--bad-bg); color: #a3202b; }
.feed-health small { display: block; }
.feed-health .feed-schedule { margin-top: 4px; color: var(--muted); font-size: 12px !important; line-height: 1.45; }

/* ---------- Privacy choices: banner + settings dialog (October 2026 redesign) ----------
   Accept and Reject share one style (equal prominence, as UK ICO guidance expects). */
.consent-banner { position: fixed; left: 24px; right: auto; bottom: 24px; z-index: 240; display: block; width: min(440px, calc(100% - 48px)); margin: 0; padding: 20px 20px 16px; border: 1px solid #d6e2ef; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(7, 27, 73, .06), 0 18px 48px rgba(7, 27, 73, .18); animation: consent-in .28s ease-out; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } }
.consent-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.consent-icon { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--blue); }
.consent-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.consent-banner h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; color: var(--text); }
.consent-banner p { max-width: none; margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-btn { min-height: 42px; padding: 10px 14px; border: 1px solid var(--text); border-radius: 10px; background: var(--text); color: #fff; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s; }
.consent-btn:hover { background: #0b2a66; border-color: #0b2a66; }
.consent-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.consent-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.consent-link { padding: 4px 2px; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.consent-links a { margin: 0; color: var(--blue); font-size: 13px; font-weight: 650; }
.consent-pending .install-app-button-mobile { display: none !important; }

.consent-modal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 20px; background: rgba(7, 27, 73, .55); backdrop-filter: blur(3px); }
.consent-modal-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(7, 27, 73, .32); }
.consent-modal-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.consent-modal-head h2 { flex: 1; margin: 0; font-size: 20px; letter-spacing: -.01em; }
.consent-modal-close { position: static; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; }
.consent-modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.consent-modal-close:hover { border-color: var(--blue); color: var(--blue); }
.consent-intro { margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.consent-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.consent-category { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: #fff; }
.consent-category + .consent-category { border-top: 1px solid var(--line); }
.consent-category strong { display: block; font-size: 15px; color: var(--text); }
.consent-category label { cursor: pointer; }
.consent-category p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.consent-always { padding: 5px 10px; border-radius: 999px; background: var(--good-bg); color: #13653a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.consent-modal-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 18px; }
.consent-btn-save { background: var(--blue); border-color: var(--blue); }
.consent-btn-save:hover { background: var(--action-hover); border-color: var(--action-hover); }
.consent-footnote { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.consent-footnote a { color: var(--blue); font-weight: 650; }
@media (max-width: 700px) {
  .consent-banner { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 16px 16px 12px; border-radius: 16px; }
  .consent-banner p { font-size: 13px; margin-bottom: 12px; }
  .consent-pending .site-footer { padding-bottom: 260px !important; }
  .consent-modal { padding: 0; place-items: end stretch; }
  .consent-modal-card { width: 100%; max-height: 92vh; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .consent-modal-actions { grid-template-columns: 1fr 1fr; }
  .consent-modal-actions .consent-btn-save { grid-column: 1 / -1; }
}

/* ---------- Readability & motion ---------- */
.eyebrow { font-size: 11.5px !important; }
.source-pill, .status-chip, .panel-data-kind { font-size: 11px !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .sub-bar, .toast-stack, .tour, .alerts-panel, .chart-menu { display: none !important; } }

/* Explain banner sits in the page flow under the sticky sub-bar instead of covering it. */
.explain-mode-banner { position: static !important; top: auto !important; font-size: 13px !important; }
.day-delta.up, .day-delta.down { color: var(--muted) !important; }
.offline-banner { top: calc(var(--header-h) + var(--subbar-h)) !important; }
/* overflow-x:hidden on html/body turns them into scroll containers and breaks the sticky header on phones. */
html, body { overflow-x: clip !important; }
@media (max-width: 640px) { .explain-mode .kpi-card .data-kind span, .analyst-view .kpi-card .data-kind span { display: none; } }

/* ---------- What-if sandbox ---------- */
.whatif { display: grid; gap: 12px; padding: 4px; }
.whatif label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; }
.whatif output { color: var(--blue); font-size: 18px; font-variant-numeric: tabular-nums; }
.whatif input[type="range"] { width: 100%; accent-color: var(--blue); }
.whatif-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.whatif-results article { padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.whatif-results span, .whatif-results small { display: block; color: var(--muted); font-size: 12px; }
.whatif-results strong { display: block; margin: 4px 0 2px; font-size: 20px; font-variant-numeric: tabular-nums; }
.whatif-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) { .whatif-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .whatif-results { grid-template-columns: 1fr; } .whatif-sliders { grid-template-columns: 1fr !important; } }

/* Accessible action colour (white text on blue ≥ 4.5:1) */
.learning-home-cta a, .learn-hero-actions a, .primary-action, .learning-moment a, .explain-actions .explain-learn, .history-date-button, .page-history-controls .history-date-button { background: var(--action) !important; border-color: var(--action) !important; color: #fff !important; }
.learning-home-cta a:hover, .learn-hero-actions a:hover, .primary-action:hover, .learning-moment a:hover { background: var(--action-hover) !important; }
.eyebrow { color: var(--blue); }

.history-movement.rise { color: #a54a0b !important; }
.history-movement.fall { color: #1257b8 !important; }

/* Footer credit: "A Pacedall Labs Platform & Product" badge (wide, so it gets more room than the old badge). */
.pacedall-credit img { width: min(220px, 60vw) !important; height: auto; }

/* ======== October 2026: implementation brief ======== */
/* Headline grid: three columns (6 cards in Learner, 9 in Analyst) */
@media (min-width: 981px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.explain-popover { max-height: min(78vh, 640px); overflow: auto; }
.explain-now { margin: 4px 0 12px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: var(--tint); }
.explain-now strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.explain-now p { margin: 4px 0; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.explain-now small { color: var(--muted); font-size: 11.5px; }
.retry-button { margin-left: 6px; padding: 2px 10px; border: 1px solid var(--blue); border-radius: 99px; background: var(--surface); color: var(--blue); font: 700 12px/1.6 var(--font); cursor: pointer; }
.retry-button:hover { background: var(--tint); }
.panel-note { margin: 10px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.55; }

/* Market stage */
.today-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stage-chip { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; color: #dbe7ff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.market-stage { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.stage-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; padding: 0; list-style: none; counter-reset: stage; }
.stage-track li { position: relative; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stage-track li strong { display: block; font-size: 13px; }
.stage-track li small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.stage-track li.now { border-color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); }
.stage-track li.now strong:after { content: " · now"; color: var(--blue); }
.stage-summary { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) { .stage-track { grid-template-columns: 1fr 1fr; } .stage-track li.now { grid-column: 1 / -1; } }

/* Outages */
.outage-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.outage-grid h3 { margin: 0 0 8px; font-size: 14px; }
.outage-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.outage-bar > div { display: flex; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.outage-bar i, .outage-key i { display: inline-block; height: 100%; }
.outage-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
i.planned { background: #8fb3e8; } i.unplanned { background: #f0822e; }
.outage-key { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.outage-key i { width: 12px; height: 10px; border-radius: 3px; margin-left: 8px; }
.outage-row { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.outage-row span { color: var(--text-2); } .outage-row small { color: var(--muted); }
@media (max-width: 800px) { .outage-grid { grid-template-columns: 1fr; } .outage-bar { grid-template-columns: 96px minmax(0, 1fr) 56px; } }

/* European prices + reference cards */
.europe-table { display: grid; margin-top: 10px; }
.europe-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 80px minmax(0, 1.2fr); align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.europe-row.head { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
.europe-row span small { display: block; color: var(--muted); font-size: 11.5px; }
.europe-row b { font-size: 15px; font-variant-numeric: tabular-nums; }
.europe-range { color: var(--text-2); font-variant-numeric: tabular-nums; }
.europe-row.muted b, .europe-row.muted .europe-range { color: var(--muted); }
.europe-table.compact .europe-row { grid-template-columns: minmax(0, 1fr) 64px; }
.europe-table.compact .europe-range, .europe-table.compact small { display: none; }
.reference-prices { margin: 20px 0; }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.reference-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.reference-card h3 { margin: 8px 0 6px; font-size: 16px; }
.reference-card > strong { display: block; font-size: 22px; margin-bottom: 6px; }
.reference-card p { margin: 6px 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.reference-tag { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--good-bg); color: #13653a; font-size: 11.5px; font-weight: 750; }
.reference-tag.muted { background: var(--surface-2); color: var(--muted); }
.reference-links a { margin-right: 12px; color: var(--blue); font-weight: 700; }
@media (max-width: 980px) { .reference-grid { grid-template-columns: 1fr; } }

/* Wind accuracy (home) */
.wind-error-actions { display: grid; gap: 4px; justify-items: end; font-size: 12px; color: var(--muted); max-width: 230px; text-align: right; }

/* Learning: challenge progress + case days */
.challenge-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.challenge-progress > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.challenge-progress span { display: block; color: var(--muted); font-size: 12px; }
.challenge-progress strong { display: block; margin-top: 3px; font-size: 16px; }
.challenge-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.case-day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 13px; }
.case-day { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.case-day h3 { margin: 0; font-size: 16px; }
.case-day dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.case-day dt { color: var(--muted); font-size: 11.5px; } .case-day dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.case-day p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.case-next { padding: 8px 10px; border-radius: 9px; background: var(--surface-2); }
.case-chart { display: none; height: 180px; }
.case-day.chart-open .case-chart { display: block; }
.case-peak a { color: var(--blue); font-weight: 700; }
@media (max-width: 760px) { .challenge-progress { grid-template-columns: 1fr 1fr; } }

/* About page */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.about-card h2 { margin: 0 0 10px; font-size: 19px; }
.about-card p, .about-card li, .about-card dd { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.about-card ul { margin: 0; padding-left: 18px; } .about-card li { margin: 5px 0; }
.about-card a { color: var(--blue); font-weight: 700; }
.about-sources div { padding: 7px 0; border-bottom: 1px solid var(--line); } .about-sources dt { font-weight: 750; } .about-sources dd { margin: 2px 0 0; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rules-table th, .rules-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rules-table tbody th { white-space: nowrap; }
.about-card pre { margin: 8px 0; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); overflow-x: auto; font-size: 13px; }
#rules, #open-api { grid-column: 1 / -1; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* Views panel */
.views-panel .views-list { display: grid; gap: 8px; margin-bottom: 12px; }
.views-subtitle { margin: 6px 0 8px; font-size: 14px; }
.view-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }
.view-item strong { display: block; font-size: 14px; } .view-item small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.view-item > span { display: flex; align-items: center; gap: 6px; flex: none; }
.view-item .secondary-action { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.views-empty { margin: 0; color: var(--muted); font-size: 13px; }
.views-save label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.views-save > div { display: flex; gap: 8px; }
.views-save input { flex: 1; min-height: 38px; padding: 6px 10px; border: 1px solid #cddcea; border-radius: 9px; font: 14px var(--font); }

/* Glossary terms */
.term { padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: none; color: inherit; font: inherit; cursor: help; }
.term:hover, .term:focus-visible { color: var(--blue); }
.term-tip { position: fixed; z-index: 300; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); box-shadow: 0 12px 30px rgba(7, 27, 73, .2); font-size: 13px; line-height: 1.5; }
.term-tip strong { text-transform: capitalize; }

/* History comparison */
.history-compare-strip { display: grid; grid-template-columns: minmax(200px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; padding: 14px; border: 1px dashed #b9cfe6; border-radius: 12px; background: var(--surface-2); }
.history-compare-strip article span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.history-compare-strip article strong { display: block; margin: 3px 0; font-size: 18px; }
.history-compare-strip small { color: var(--text-2); font-size: 12px; font-weight: 500; }
.compare-value { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.page-history-controls select { min-height: 38px; padding: 6px 10px; border: 1px solid #cddcea; border-radius: 9px; background: var(--surface); font: 13px var(--font); }
@media (max-width: 900px) { .history-compare-strip { grid-template-columns: 1fr; } }

[data-timeline].is-now { box-shadow: inset 0 -3px 0 var(--blue); }
[data-timeline].is-now strong:after { content: " · now"; color: var(--blue); font-size: 11px; }
@media (min-width: 1281px) { [data-power-panel="market"] .inner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inline-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
/* Contrast fixes (WCAG AA) */
.tone-watch b, .tone-tight b { color: #9a5000 !important; }
[data-timeline] small { color: var(--muted) !important; }
.market-card-change.down { color: #c8202c !important; }
.market-card-change.up { color: #16804a !important; }
.diagram-link.export .diagram-arrow strong, .diagram-link.export .diagram-arrow i { color: #16804a !important; }
.diagram-link.import .diagram-arrow strong { color: #1257b8 !important; }
.flow-direction.export { color: #c8202c !important; }
.flow-direction.import { color: #1257b8 !important; }
.page-history-table .net-import, .history-change-strip .net-import, .page-history-summary .net-import { color: #c8202c !important; }
.page-history-table .net-export, .history-change-strip .net-export, .page-history-summary .net-export { color: #16804a !important; }
.about-grid > * { min-width: 0; }
.about-card { overflow-wrap: anywhere; }
.rules-table tbody th { white-space: normal; }
@media (max-width: 480px) {
  .view-controls { gap: 4px; }
  .view-controls .health-pill.compact strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .view-controls .health-pill.compact { padding: 0; width: 32px; justify-content: center; }
  .segmented span { padding: 7px 7px; }
  .toggle-chip { gap: 5px; padding: 4px 8px 4px 5px; }
  .toggle-track { width: 26px; height: 16px; } .toggle-track:after { width: 12px; height: 12px; }
  .toggle-chip[aria-pressed="true"] .toggle-track:after { transform: translateX(10px); }
}

/* ======== Grouped navigation (Home + Live data, Markets & analysis, Learn) ======== */
.grouped-nav .nav-sub strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.grouped-nav .nav-sub small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.nav-group-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.nav-caret { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; opacity: .7; }
.nav-group.open .nav-caret { transform: rotate(-135deg); margin-top: 3px; }
@media (min-width: 1121px) {
  .grouped-nav { gap: 4px !important; justify-content: center !important; }
  .grouped-nav > .nav-top, .grouped-nav .nav-group-toggle { position: relative; height: 100%; padding: 0 14px !important; font-size: 13.5px !important; font-weight: 600; }
  .grouped-nav .nav-group { position: relative; display: flex; align-items: stretch; }
  .grouped-nav .nav-group-toggle:hover, .grouped-nav .nav-group.open .nav-group-toggle, .grouped-nav > .nav-top:hover { color: var(--blue); }
  .grouped-nav > .nav-top.active:after, .grouped-nav .nav-group.has-active .nav-group-toggle:after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 9px; background: var(--blue); }
  .grouped-nav .nav-group.has-active .nav-group-toggle { font-weight: 750; }
  .grouped-nav .nav-menu { position: absolute; top: calc(100% - 6px); left: 50%; z-index: 80; display: none; width: 320px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px rgba(7, 27, 73, .16); transform: translateX(-50%); }
  .grouped-nav .nav-group.open .nav-menu { display: grid; gap: 2px; animation: ukei-menu .14s ease-out; }
  .grouped-nav .nav-menu .nav-sub { display: block !important; height: auto !important; padding: 10px 12px !important; border-radius: 10px; font-size: 14px !important; white-space: normal; text-decoration: none; }
  .grouped-nav .nav-menu .nav-sub:hover, .grouped-nav .nav-menu .nav-sub:focus-visible { background: var(--tint); }
  .grouped-nav .nav-menu .nav-sub.active { background: var(--tint); box-shadow: inset 3px 0 0 var(--blue); }
  .grouped-nav .nav-menu .nav-sub.active strong { color: var(--blue); }
  .grouped-nav .nav-menu .nav-sub:after { display: none !important; }
}
@keyframes ukei-menu { from { opacity: 0; transform: translate(-50%, -4px); } }
@media (max-width: 1120px) {
  .site-header.menu-open .grouped-nav { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .grouped-nav .nav-group { display: grid; gap: 6px; }
  .grouped-nav .nav-group-toggle { padding: 4px 2px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: default; pointer-events: none; }
  .grouped-nav .nav-caret { display: none; }
  .grouped-nav .nav-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .grouped-nav .nav-sub { display: block !important; padding: 10px 12px !important; }
  .grouped-nav .nav-sub strong { font-size: 14px; }
  .grouped-nav > .nav-top { font-weight: 700; }
}
@media (max-width: 640px) { .grouped-nav .nav-menu { grid-template-columns: 1fr; } }

/* Homepage hero: link to the UK Power Map (a separate page at /map) */
.hero-side { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.hero-map-button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; border-radius: 10px; background: #1668dc; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(7, 27, 73, .18); transition: background .15s, transform .15s; }
.hero-map-button:hover { background: #0f56bd; transform: translateY(-1px); }
.hero-map-button:focus-visible { outline: 3px solid rgba(30, 123, 255, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hero-map-button { transition: none; } .hero-map-button:hover { transform: none; } }
@media (max-width: 1120px) { .hero-side .uk-focus-card { display: none; } }
@media (max-width: 640px) { .hero-side { margin-top: 16px; } .hero.hero-compact { height: auto; } }

/* October 2026: trust line in the hero, licensed-data tags on carbon cards */
.hero-how { font-weight: 650; white-space: nowrap; }
.carbon-card .reference-tag { margin: 2px 0 6px; }
.server-health { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #dfe8f1); }
.server-health h3 { margin: 0 0 8px; font-size: 15px; }
.server-health h3 small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.server-health ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.server-health li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #dfe8f1); border-radius: 10px; font-size: 13px; }
.server-health li em { grid-column: 2 / -1; font-style: normal; color: var(--muted); font-size: 12px; }
.server-health li > span:not(.server-dot) { color: var(--muted); font-size: 12px; }
.server-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good, #16804a); }
.server-health li.delayed .server-dot { background: var(--warn, #b77900); }
.server-health li.stale .server-dot { background: #c96a00; }
.server-health li.unavailable .server-dot { background: var(--bad, #d92d3a); }

/* October 2026: four-slider scenario sandbox */
.whatif-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; align-items: end; }
.whatif-sliders label { grid-row: auto; margin-top: 4px; }
.whatif-sliders input[type="range"] { margin: 0 0 6px; }
.whatif-pressure { display: grid; gap: 3px; padding: 10px 14px; border-left: 3px solid var(--blue); background: var(--tint); border-radius: 0 10px 10px 0; }
.whatif-pressure:empty { display: none; }
.whatif-pressure strong { font-size: 14px; }
.whatif-pressure small { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.whatif-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Player lenses (Trading Desk Lens tabs) */
.lens-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 2px; }
.lens-tabs button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.lens-tabs button:hover { border-color: var(--blue); color: var(--blue); }
.lens-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.lens-intro { margin: 12px 0 10px; color: var(--text-2); font-size: 13.5px; }
.lens-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lens-rule { display: grid; align-content: start; gap: 6px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.lens-rule h3 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.lens-state { justify-self: start; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 750; background: var(--surface-2); color: var(--muted); }
.lens-rule.on { border-color: #b9d3f4; background: var(--tint); }
.lens-rule.on .lens-state { background: var(--blue); color: #fff; }
.lens-rule.na .lens-state { background: var(--warn-bg); color: #7a5100; }
.lens-nums { margin: 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.45; }
.lens-meaning { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.lens-source { color: var(--muted); font-size: 11.5px; }
.lens-disclaimer { margin: 12px 0 0; padding: 9px 12px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 980px) { .lens-grid { grid-template-columns: 1fr; } }

/* Outage context */
.outage-scale { margin: 10px 0 0; padding: 10px 13px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.outage-scale:empty { display: none; }
.outage-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--warn-bg); color: #7a5100; font-size: 11px; font-style: normal; font-weight: 750; vertical-align: 1px; }

/* Energy calendar */
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.calendar-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-filter { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.cal-filter:hover { border-color: var(--blue); color: var(--blue); }
.cal-filter[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.calendar-ics { text-decoration: none; }
.cal-month { margin: 0 0 18px; }
.cal-month h2 { margin: 0 0 8px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cal-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cal-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cal-date { display: grid; place-items: center; align-self: start; height: 56px; border-radius: 10px; background: var(--tint); color: var(--blue); }
.cal-date b { font-size: 15px; text-align: center; line-height: 1.15; }
.cal-body h3 { margin: 2px 0 2px; font-size: 16px; }
.cal-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.cal-tag { padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 750; }
.cal-tag.confirmed { background: var(--good-bg); color: #13653a; }
.cal-tag.provisional { background: var(--surface-2); color: var(--text-2); }
.cal-tag.indicative { background: var(--warn-bg); color: #7a5100; }
.cal-soon { font-style: normal; color: var(--blue); }
.cal-when { margin: 0 0 6px; color: var(--text-2); font-size: 13px; }
.cal-why { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.cal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0; font-size: 13px; }
.cal-links small { color: var(--muted); }
.cal-recent .cal-item { opacity: .75; }
.calendar-upcoming:empty { display: none; }
.calendar-upcoming { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.learn-upcoming { margin: 18px 0 0; }
.cal-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cal-strip-head .eyebrow { margin: 0; }
.cal-strip-head a { font-size: 13px; font-weight: 650; }
.cal-strip { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cal-strip li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.cal-strip-date { padding: 3px 8px; border-radius: 8px; background: var(--tint); color: var(--blue); font-weight: 750; font-size: 12px; white-space: nowrap; }
.cal-strip strong { display: block; line-height: 1.3; }
.cal-strip small { color: var(--muted); }
.calendar-today { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 760px) { .cal-strip { grid-template-columns: 1fr; } .cal-item { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px; } .cal-date { height: 48px; } }