/* Pawel's S3 mockup overrides. Kate's grid.css stays unchanged. */
/* ===== Font (S20): Proza Libre, SIL Open Font License (OFL.txt ships next to the files). Replaces Kate's commercial
   Proza, whose files are no longer in this copy. Libre has no Light, so the page's two weights map one step up:
   300 (body) -> Regular file, 400 (strong) -> Medium file. grid.css stays unedited; this rule wins by coming later. ===== */
@font-face { font-family: "Proza Libre"; font-weight: 300; font-display: swap; src: url("proza-libre-400.woff2") format("woff2"); }
@font-face { font-family: "Proza Libre"; font-weight: 400; font-display: swap; src: url("proza-libre-500.woff2") format("woff2"); }
html { font-family: "Proza Libre", sans-serif; }
/* ===== Fixed route-badge colours (S20). Defined once here; never derived from data or row order,
   never reused for fuels. Light first, dark in the media query. ===== */
:root {
  --badge-ie: #0b6b5c;   /* Ireland: deep teal */
  --badge-sco: #1f56a8;  /* Scotland: blue */
  --badge-wal: #8e1f3d;  /* Wales: wine */
  --badge-ni: #4d5560;   /* Northern Ireland: slate */
  --badge-fr: #5b3c9b;   /* France: violet */
  --badge-text: #fff;
  --stale-clock: #b86e00; /* darker amber: 4.0:1 on the white panels */
}
@media (prefers-color-scheme: dark) {
  :root { --badge-ie: #107563; --badge-sco: #2f6bc4; --badge-wal: #b02a52; --badge-ni: #5f6875; --badge-fr: #7351b8; --stale-clock: #e90; } /* #e90: 7.0:1 on #222 */
}
/* ?theme=dark|light sets data-theme on <html> and overrides the system setting. These repeat grid.css's own
   light and dark values (grid.css itself only follows prefers-color-scheme and stays unedited). */
:root[data-theme="dark"] {
  --background: #111; --content-background: #222; --content-text: #eee; --heading-background: #444;
  --selected-background: #222c; --help-background: #444; --graph-axis: #444; --graph-line: #2a2a2a;
  --graph-highlight: #fff1; --key-line: #666; --unit-opacity: 0.6; --table-stripe: #181818;
  --badge-ie: #107563; --badge-sco: #2f6bc4; --badge-wal: #b02a52; --badge-ni: #5f6875; --badge-fr: #7351b8;
  --stale-clock: #e90;
  --link-strong: var(--accent);
}
:root[data-theme="dark"] :is(.generation, .transfers) { color: #888; }
:root[data-theme="dark"] :is(.price, .emissions, .demand) { color: #eee; }
:root[data-theme="light"] {
  --background: #eee; --content-background: #fff; --content-text: #000; --heading-background: #aaa;
  --selected-background: #fffc; --help-background: #aaa; --graph-axis: #ddd; --graph-line: #f4f4f4;
  --graph-highlight: #0001; --key-line: #999; --unit-opacity: 0.4; --table-stripe: #f8f8f8;
  --badge-ie: #0b6b5c; --badge-sco: #1f56a8; --badge-wal: #8e1f3d; --badge-ni: #4d5560; --badge-fr: #5b3c9b;
  --stale-clock: #b86e00;
  --link-strong: #456f45;
}
:root[data-theme="light"] :is(.generation, .transfers) { color: #aaa; }
:root[data-theme="light"] :is(.price, .emissions, .demand) { color: #000; }
.gas-est { color: #e94; }
.greenlink { color: #2cb; }
.moyle { color: #c66; }
.ewic { color: #817; }
.sources.gwh tr :nth-child(3)::after { content: 'GWh'; }
.sources .na tr :nth-child(3)::after, .sources .na tr :nth-child(4)::after { content: none; }
.sources .na td:nth-child(2) { opacity: 0.55; }
.est { opacity: 0.55; font-size: 0.8em; }
.stale { color: var(--stale-clock); }
.mixbar { display: flex; height: 2rem; margin: 0 0 1rem; border-radius: 4px; overflow: hidden; }
.mixbar div { height: 100%; }
section.mix .sources { max-width: 520px; margin: 0 auto; }
section.mix p { text-align: center; margin-bottom: 1rem; }
.empty { padding: 3rem 1rem; text-align: center; opacity: 0.7; }
footer ul { margin: 0; padding-left: 1.1rem; }
footer li + li { margin-top: 0.5rem; }
@media (min-width: 840px) and (max-width: 1219px), (min-width: 1360px) { #live .sources .interconnectors { grid-area: 1 / 5 / 4 / 9; } }
@media (min-width: 1360px) { #live .sources .interconnectors { border-radius: var(--rounding); } }

/* Small functional additions, without changing Kate's live grid, type,
   row heights, borders, spacing, colour scheme or pie positioning. */
.sources tr :nth-child(3)::after, .sources tr :nth-child(4)::after { content: attr(data-unit); }
[data-help]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* S8: Kate's help icon with the graph-key hover/focus interaction. */
.fuel-help { position: relative; font-size: 1rem; }
.fuel-help [role="tooltip"] { display: none; position: absolute; z-index: 1; top: 100%; left: 50%; transform: translateX(-50%); width: min(18rem, 70vw); padding: 0.75rem; border-radius: var(--rounding); background: var(--content-background); color: var(--content-text); box-shadow: 0 2px 8px #0004; font-size: 0.75rem; font-variant: normal; line-height: 1.4; cursor: auto; }
.fuel-help:hover [role="tooltip"], .fuel-help:focus [role="tooltip"] { display: block; }
.flag { white-space: nowrap; }
svg.mixbar { display: block; width: 100%; }
.mixbar rect { fill: currentColor; }
.pie-chart .pie-unavailable { max-width: 45%; margin-top: 0.5em; font-size: 0.7em; }

/* S4: keep Kate's historical grid and axes. Named graph areas let config
   order change without coupling a graph's layout to its child index. */
[role="tabpanel"][hidden], .graph [hidden] { display: none; }
[role="tabpanel"]:not([hidden]) { display: grid; }
[role="tab"]:focus-visible, .graph rect:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.graph.stacked path { fill: currentColor; stroke: var(--content-background); stroke-width: 1; }
.graph svg circle { fill: currentColor; pointer-events: none; }
.graph rect:focus { fill: var(--graph-highlight); }
/* S9: half-rem spacing steps around history controls and panel content. */
#history { margin-top: 0.5rem; }
#history > [role="tablist"] { gap: 0.5rem; margin-bottom: 1.5rem; }
#history [role="tab"] { padding-block: 1rem; }
#history > [role="tabpanel"] { row-gap: 1.5rem; }
#history [data-graph] > h3 { margin-bottom: 1.5rem; }
.graph-key p { max-width: 20rem; line-height: 1.3; font-size: 0.7rem; }
@media (min-width: 768px) {
  [role="tabpanel"] > [data-graph="price"] { grid-area: price; }
  [role="tabpanel"] > [data-graph="emissions"] { grid-area: emissions; }
  [role="tabpanel"] > [data-graph="demand"] { grid-area: demand; }
  [role="tabpanel"] > [data-graph="generation"] { grid-area: generation; }
  [role="tabpanel"] > [data-graph="transfers"] { grid-area: transfers; }
}

/* ===== S20: final edits to page A ===== */
:root { --link-strong: #456f45; }
@media (prefers-color-scheme: dark) { :root { --link-strong: var(--accent); } }
/* --link-strong is darker than --accent (#696) in light mode, for 4.5:1 text contrast. */

/* Attribution strip above the title. Overrides grid.css's header a:last-child pill. */
header .credit { margin: -0.5rem 0 1rem; font-size: 0.8rem; line-height: 1.4; }
header .credit a { margin: 0; padding: 0; border-radius: 0; background: none; color: var(--link-strong); font-weight: 300; }
header .credit a:focus-visible { outline: 2px solid var(--link-strong); outline-offset: 2px; }

/* Interconnectors (live card): link name on the left; route group (source badge, flow line, landing badge) on the right. */
#live #interconnectors td:nth-child(1)::before { content: none; }
#live #interconnectors tbody td:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; }
#live #interconnectors .ic-flow { order: 1; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; white-space: nowrap; }
/* The link name never shrinks or clips: its own unbreakable item; the route group wraps to a new line first. */
#live #interconnectors .ic-name { flex: none; white-space: nowrap; }
/* Name, help and clock stay together on one line; only the route group may wrap below them. */
#live #interconnectors .ic-label { flex: none; white-space: nowrap; }
/* Day and week tables: the clock stays on the same line as its name. */
[role="tabpanel"] .sources td:nth-child(2) { white-space: nowrap; }
/* Live tables: a row's name keeps its help and clock on one line. */
#live .sources td:nth-child(2):has(> button.stale) { white-space: nowrap; }
@media (min-width: 1360px) {
  /* Right-aligned beside the pie. "safe" sends any overflow to the right, never over the start of the name. */
  /* Plain inline content on the row's 30 px line, like the other cells: no flex box to sit lower or wrap in Firefox.
     The route group is in the last cell at this width, so nothing here needs to wrap. */
  #live #interconnectors tbody td:nth-child(2) { display: block; white-space: nowrap; text-align: right; }
  /* The pie overlaps the inner end of this table from 1360 px. Keep row content clear of its full radius plus its
     2rem border, so a wider font or engine wraps the route group to a second line instead of sliding under the pie. */
  #live #interconnectors tbody td:nth-child(2) { padding-left: calc(var(--pie-chart-radius) + 2.5rem); }
  #live #interconnectors .ic-flow { margin-left: 0.4rem; }
}
#live #interconnectors .ic-flow svg { display: block; }
#live #interconnectors .badge { display: inline-block; min-width: 2.2em; padding: 0 0.3em; border-radius: 3px; font: 600 11px/16px sans-serif; letter-spacing: 0.03em; text-align: center; color: var(--badge-text); }
.badge--ie { background: var(--badge-ie); }
.badge--sco { background: var(--badge-sco); }
.badge--wal { background: var(--badge-wal); }
.badge--ni { background: var(--badge-ni); }
.badge--fr { background: var(--badge-fr); }
#live #interconnectors .ic-flow__line { width: 40px; height: 10px; overflow: visible; }
#live #interconnectors .ic-flow__track { stroke: var(--content-text); stroke-width: 1.5; opacity: 0.3; }
#live #interconnectors .ic-flow__head { fill: var(--content-text); }
/* Dots in a fixed order, yellow, orange, green: the pie's own .solar, .gas and .wind colours via currentColor. */
#live #interconnectors .ic-flow__dots { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 18; }
#live #interconnectors .ic-flow__dots--2 { stroke-dashoffset: -6; }
#live #interconnectors .ic-flow__dots--3 { stroke-dashoffset: -12; }
#live #interconnectors .ic-flow--import .ic-flow__dots--1 { animation: ic-right-1 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--import .ic-flow__dots--2 { animation: ic-right-2 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--import .ic-flow__dots--3 { animation: ic-right-3 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--export .ic-flow__dots--1 { animation: ic-left-1 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--export .ic-flow__dots--2 { animation: ic-left-2 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--export .ic-flow__dots--3 { animation: ic-left-3 var(--ic-dur, 1.4s) linear infinite; }
#live #interconnectors .ic-flow--slow { --ic-dur: 2.4s; }
#live #interconnectors .ic-flow--mid { --ic-dur: 1.6s; }
#live #interconnectors .ic-flow--fast { --ic-dur: 1s; }
/* A falling dash offset moves the dots towards the end of the line (right); each colour keeps its 6-unit lag. */
@keyframes ic-right-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -18; } }
@keyframes ic-right-2 { from { stroke-dashoffset: -6; } to { stroke-dashoffset: -24; } }
@keyframes ic-right-3 { from { stroke-dashoffset: -12; } to { stroke-dashoffset: -30; } }
@keyframes ic-left-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 18; } }
@keyframes ic-left-2 { from { stroke-dashoffset: -6; } to { stroke-dashoffset: 12; } }
@keyframes ic-left-3 { from { stroke-dashoffset: -12; } to { stroke-dashoffset: 6; } }
/* Wide layout (1360 px and up): the route group sits at the far right of its row, after the GW and % figures.
   It lives in the row's first cell, which grid.css places last at this width. Only this table uses that column here,
   so no other table moves. Below 1360 px that cell is the left swatch column, so the inline copy is used instead. */
#live #interconnectors .ic-flow--wide { display: none; }
@media (min-width: 1360px) {
  #live #interconnectors .ic-flow--wide { display: inline-flex; margin: 0; align-self: center; }
  #live #interconnectors .ic-flow--wide > * { flex: none; }
  /* The inline copy stays for screen readers; the wide copy is aria-hidden. */
  #live #interconnectors .ic-flow--inline { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
}
/* Narrow screens: a smaller route group, so the table does not widen. */
@media (max-width: 459px) {
  #live #interconnectors .ic-flow { gap: 2px; }
  #live #interconnectors .badge { font-size: 10px; line-height: 14px; }
  #live #interconnectors .ic-flow__line { width: 26px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) { #live #interconnectors :is(.ic-flow--import, .ic-flow--export) .ic-flow__dots { animation: none; } }
/* Celtic: planned, no data. Dimmed; 0.6 keeps text at 4.5:1 or more in both themes. */
#live #interconnectors .ic-future { opacity: 0.6; }

/* Stale: a small clock in the stale colour; "Updated x ago" on hover (title), focus and tap (bubble). */
/* Colour comes from the existing .stale rule (#e90). The ::before gives a 44 px touch target. */
button.stale { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; vertical-align: -0.12em; cursor: help; }
button.stale::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; }
button.stale .stale__icon { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.stale:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.age-tip { position: fixed; z-index: 30; max-width: 16rem; padding: 0.35rem 0.6rem; border-radius: var(--rounding); background: var(--heading-background); color: var(--heading-text); font-size: 0.8rem; line-height: 1.3; pointer-events: none; }

/* Fuel sources: the scope note under the heading. */
section.mix .mix-scope { margin: -0.25rem 0 1rem; font-size: 0.85rem; opacity: 0.75; }

/* Records: two tidy blocks. (No <dl>: grid.css styles every dl as the equation grid.) */
footer .records__intro { font-size: 0.9rem; opacity: 0.8; }
footer .records__list { display: grid; gap: 0.75rem; }
@media (min-width: 460px) { footer .records__list { grid-template-columns: 1fr 1fr; } }
footer .record { display: grid; align-content: start; gap: 0.15rem; padding: 0.75rem 1rem; border-radius: var(--rounding); background: var(--background); }
/* Record blocks take the pie's wind and solar colours (.wind/.solar set color; the block paints it as background). */
footer .record:is(.wind, .solar) { background: currentColor; }
footer .record:is(.wind, .solar) > *, footer .record:is(.wind, .solar) a { color: #111; }
footer .record:is(.wind, .solar) a { text-decoration-color: currentColor; }
footer .record p { margin: 0; }
footer .record__label { font-weight: 400; }
footer .record__value { font-size: 1.5rem; line-height: 1.15; }
footer .record__value abbr { margin-left: 0.2em; font-size: 0.65em; text-decoration: none; opacity: 0.7; }
footer .record__meta { font-size: 0.85rem; }
footer .record__note { font-size: 0.8rem; opacity: 0.8; }
footer .records__attribution { font-size: 0.85rem; }

/* About the data: sources only. */
footer .data-sources { display: grid; gap: 0.5rem; }
footer .data-sources p { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; margin: 0; }
footer .data-sources__label { font-weight: 400; }
footer :is(.records, .about) a { color: var(--link-strong); text-decoration-color: currentColor; }