/* halfhourly.uk — design system
 *
 * Tokens taken verbatim from the design handoff. Dark is the default; the
 * .light class on <html> swaps the palette. Both are also driven by
 * prefers-color-scheme so a first-time visitor gets the right one before any
 * JavaScript runs.
 */

@import url('/assets/fonts/fonts.css');

/* ---------------------------------------------------------------- tokens */

:root {
  --bg: #0e1015;
  --panel: #151824;
  --panel2: #1a1d29;
  --side: #12141b;
  --border: #23273a;
  --border2: #1f2330;
  --rowLine: #1f2330;

  --text: #e7e9ee;
  --muted: #8b90a3;
  --faint: #5c6172;

  --accent: #818cf8;
  --accentSolid: #4f46e5;
  --accentSolidHover: #4338ca;
  --accentBg: #1e2130;
  --accentText: #c7cbff;
  --onAccent: #ffffff;

  --good: #a3e635;
  --goodDim: #2e3b1d;
  --goodPanel: #1a2410;
  --bad: #f87171;
  --badDim: #3b1d1d;
  --plunge: #60a5fa;
  --plungeDim: #17263c;

  --ci-verylow: #34d399;
  --ci-verylowDim: #10291f;
  --ci-low: #a3e635;
  --ci-lowDim: #22300f;
  --ci-moderate: #fbbf24;
  --ci-moderateDim: #332612;
  --ci-high: #fb923c;
  --ci-highDim: #331e10;
  --ci-veryhigh: #f87171;
  --ci-veryhighDim: #3b1d1d;

  --barCheap: #a3e635;
  --barTyp: #3a4056;
  --barPeak: #f87171;
  --barPlunge: #60a5fa;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rCard: 14px;
  --rPanel: 18px;
  --rBtn: 10px;
  --rPill: 99px;

  --sidebar: 216px;
  --wrap: 1120px;
}

.light {
  --bg: #f2f3f7;
  --panel: #ffffff;
  --panel2: #eef0f6;
  --side: #ffffff;
  --border: #e3e5ef;
  --border2: #eceef4;
  --rowLine: #eceef4;

  --text: #191c28;
  --muted: #666c80;
  --faint: #9aa0b0;

  --accent: #4f46e5;
  --accentBg: #e9e8fc;
  --accentText: #4338ca;

  --good: #65a30d;
  --goodDim: #e7f0d3;
  --goodPanel: #eef6df;
  --bad: #dc2626;
  --badDim: #fbe3e3;
  --plunge: #3b82f6;
  --plungeDim: #dbe8fd;

  --ci-verylow: #059669;
  --ci-verylowDim: #d6f3e7;
  --ci-low: #65a30d;
  --ci-lowDim: #e7f0d3;
  --ci-moderate: #b45309;
  --ci-moderateDim: #fdeed3;
  --ci-high: #c2410c;
  --ci-highDim: #fde4d3;
  --ci-veryhigh: #dc2626;
  --ci-veryhighDim: #fbe3e3;

  --barCheap: #84cc16;
  --barTyp: #d4d7e2;
  --barPeak: #ef4444;
  --barPlunge: #3b82f6;
}

/* Respect the OS preference until the visitor picks a theme themselves. */
@media (prefers-color-scheme: light) {
  :root:not(.dark):not(.light) {
    --bg: #f2f3f7;
    --panel: #ffffff;
    --panel2: #eef0f6;
    --side: #ffffff;
    --border: #e3e5ef;
    --border2: #eceef4;
    --rowLine: #eceef4;
    --text: #191c28;
    --muted: #666c80;
    --faint: #9aa0b0;
    --accent: #4f46e5;
    --accentBg: #e9e8fc;
    --accentText: #4338ca;
    --good: #65a30d;
    --goodDim: #e7f0d3;
    --goodPanel: #eef6df;
    --bad: #dc2626;
    --badDim: #fbe3e3;
    --plunge: #3b82f6;
    --plungeDim: #dbe8fd;
    --ci-verylow: #059669;
    --ci-verylowDim: #d6f3e7;
    --ci-low: #65a30d;
    --ci-lowDim: #e7f0d3;
    --ci-moderate: #b45309;
    --ci-moderateDim: #fdeed3;
    --ci-high: #c2410c;
    --ci-highDim: #fde4d3;
    --ci-veryhigh: #dc2626;
    --ci-veryhighDim: #fbe3e3;
    --barCheap: #84cc16;
    --barTyp: #d4d7e2;
    --barPeak: #ef4444;
    --barPlunge: #3b82f6;
  }
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accentText); }

h1, h2, h3, .display { font-family: var(--display); letter-spacing: -0.02em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--mono); }

.micro {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accentSolid); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--rBtn);
  border: 1px solid transparent;
  background: var(--accentSolid);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--accentSolidHover); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { background: #2a2e40; color: var(--faint); cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--panel2); color: var(--text); }

.btn-lg { font-size: 15px; padding: 13px 22px; border-radius: 12px; }

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--rPill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { background: var(--panel2); color: var(--text); }
.chip[aria-current="true"], .chip.is-active {
  background: var(--accentBg);
  border-color: var(--accent);
  color: var(--accentText);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--rPill);
}
.pill-good   { background: var(--goodDim);   color: var(--good); }
.pill-bad    { background: var(--badDim);    color: var(--bad); }
.pill-plunge { background: var(--plungeDim); color: var(--plunge); }
.pill-typ    { background: var(--panel2);    color: var(--muted); }
.pill-accent { background: var(--accentBg);  color: var(--accentText); }

/* Grid carbon intensity, on NESO's five-step index. */
.pill-ci-very-low  { background: var(--ci-verylowDim);  color: var(--ci-verylow); }
.pill-ci-low       { background: var(--ci-lowDim);      color: var(--ci-low); }
.pill-ci-moderate  { background: var(--ci-moderateDim); color: var(--ci-moderate); }
.pill-ci-high      { background: var(--ci-highDim);     color: var(--ci-high); }
.pill-ci-very-high { background: var(--ci-veryhighDim); color: var(--ci-veryhigh); }

/* ----------------------------------------------------------------- brand */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accentSolid);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  flex: none;
}
.brand-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand-word .tld { color: var(--accent); }

/* --------------------------------------------------------------- surfaces */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
}

.panel-lg { border-radius: var(--rPanel); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px 0;
}
.panel-title { font-size: 15px; font-weight: 600; margin: 0; }
.panel-title .sub { font-weight: 400; color: var(--muted); }

.notice {
  padding: 12px 16px;
  border-radius: var(--rCard);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 14px;
  margin: 0 0 14px;
}
.notice-good { border-left: 3px solid var(--good); }
.notice-warn { border-left: 3px solid var(--bad); }
.notice-error { border-left: 3px solid var(--bad); background: var(--badDim); }

/* -------------------------------------------------------------- KPI cards */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
  padding: 16px;
  min-width: 0;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 10px;
}
.kpi-value {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.kpi-unit { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.kpi-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kpi-peak .kpi-value { color: var(--bad); }
.kpi-peak .kpi-note { color: var(--bad); }
.kpi-good { border-color: var(--good); }
.kpi-good .kpi-label, .kpi-good .kpi-value { color: var(--good); }
.kpi-plunge .kpi-value { color: var(--plunge); }

.kpi-ci-very-low  .kpi-value { color: var(--ci-verylow); }
.kpi-ci-low       .kpi-value { color: var(--ci-low); }
.kpi-ci-moderate  .kpi-value { color: var(--ci-moderate); }
.kpi-ci-high      .kpi-value { color: var(--ci-high); }
.kpi-ci-very-high .kpi-value { color: var(--ci-veryhigh); }
.kpi-ci-very-high { border-color: var(--ci-veryhigh); }

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

.chart-wrap { padding: 16px 18px 18px; }
.chart-scroll { overflow-x: auto; }

.chart-svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.chart-svg .bar-typ    { fill: var(--barTyp); }
.chart-svg .bar-cheap  { fill: var(--barCheap); }
.chart-svg .bar-peak   { fill: var(--barPeak); }
.chart-svg .bar-plunge { fill: var(--barPlunge); }
.chart-svg .bar-accent { fill: var(--accent); }
.chart-svg .bar.is-current { stroke: var(--text); stroke-width: 2; paint-order: stroke; }
.chart-svg .axis {
  fill: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.chart-svg .zero { stroke: var(--border); stroke-width: 1; }

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.legend .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend .sw-cheap  { background: var(--barCheap); }
.legend .sw-typ    { background: var(--barTyp); }
.legend .sw-peak   { background: var(--barPeak); }
.legend .sw-plunge { background: var(--barPlunge); }

/* ------------------------------------------------------------------ table */

.table-scroll { overflow: auto; max-height: 560px; }

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}
.dtable caption { text-align: left; }
.dtable th, .dtable td {
  padding: 9px 18px;
  text-align: left;
  border-top: 1px solid var(--rowLine);
  white-space: nowrap;
}
.dtable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  border-top: none;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.dtable tbody tr:hover { background: var(--panel2); }
.dtable tbody th { font-weight: 500; color: var(--text); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .is-current { background: var(--accentBg); }
.dtable .is-current th, .dtable .is-current td { color: var(--accentText); font-weight: 600; }

/* ------------------------------------------------------------------ forms */

label.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 6px;
}

input[type="text"], input[type="number"], input[type="email"],
input[type="password"], select {
  font-family: var(--mono);
  font-size: 14px;
  width: 100%;
  padding: 11px 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rBtn);
}
select { font-family: var(--sans); }
input:focus, select:focus { border-color: var(--accent); outline: none; }

.field-help { font-size: 12px; color: var(--faint); margin: 6px 0 0; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 27px; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================== LANDING == */

.landing { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.land-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
}
.land-nav { display: flex; gap: 26px; }
.land-nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.land-nav a:hover { color: var(--text); }

/* The mobile drawer, hidden until the viewport is narrow enough to need it.
   Both renderings live in the markup and CSS picks one, which is why neither
   can be reached by a crawler twice: the hidden one is display:none, so it is
   out of the accessibility tree and out of the rendered text. */
.land-menu { display: none; }

.land-menu > summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--rBtn);
  color: var(--muted);
  cursor: pointer;
  /* Both are needed: the standard property, and the WebKit pseudo-element
     that Safari still uses to draw the disclosure triangle. */
  list-style: none;
}
.land-menu > summary::-webkit-details-marker { display: none; }
.land-menu > summary:hover { color: var(--text); border-color: var(--accent); }
.land-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.land-menu[open] > summary { color: var(--text); border-color: var(--accent); }

.bars { position: relative; }
.bars,
.bars::before,
.bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.bars::before,
.bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }

.land-drawer {
  position: absolute;
  z-index: 40;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
  box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}
.land-drawer a {
  padding: 12px 14px;
  border-radius: var(--rBtn);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.land-drawer a:hover { background: var(--panel2); }

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 72px;
}

.hero-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--good);
  background: var(--goodPanel);
  border-radius: 12px;
  padding: 10px 16px;
  margin: 0 0 26px;
}

.hero h1 {
  font-size: 54px;
  line-height: 1.04;
  margin: 0 0 20px;
  font-weight: 700;
}
.hero-sub { font-size: 17px; color: var(--muted); margin: 0 0 28px; max-width: 46ch; }
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-trust { font-size: 12.5px; color: var(--faint); margin: 22px 0 0; }

.hero-widget {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rPanel);
  padding: 20px;
}
.hero-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hero-price {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}
.hero-price-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 8px 0 18px; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-callout {
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: var(--rBtn);
  background: var(--goodPanel);
  color: var(--good);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section { padding: 64px 0; }
.section-kicker {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 12px;
}
.section h2 { font-size: 32px; margin: 0 0 12px; }
.section-lede { color: var(--muted); margin: 0 0 34px; max-width: 60ch; }

.step-grid, .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.step-card, .feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
  padding: 22px;
}
.step-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}
.step-card h3, .feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.step-card p, .feature-card p { font-size: 14px; color: var(--muted); margin: 0; }

.feature-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accentBg);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 17px;
  margin-bottom: 14px;
}

.faq { border-top: 1px solid var(--border); }
.faq-row { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-row h3 { font-size: 16px; margin: 0 0 8px; }
.faq-row p { color: var(--muted); margin: 0; font-size: 14.5px; }

.final-cta {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rPanel);
  padding: 48px 32px;
  text-align: center;
  margin-bottom: 56px;
}
.final-cta h2 { font-size: 30px; margin: 0 0 12px; }
.final-cta p { color: var(--muted); margin: 0 0 24px; }

.land-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 48px;
  font-size: 13px;
  color: var(--faint);
}
.land-footer p { margin: 0 0 8px; max-width: 78ch; }
.land-footer a { color: var(--muted); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 32px 0 48px; }
  .hero h1 { font-size: 38px; }
  /* Swap the bar for the drawer. The links used to be hidden outright and
     only Log in survived, which left a phone arriving on a guide from a
     search result with no way to reach the rest of the site except the
     footer, at the bottom of a long page. */
  .land-header { position: relative; }
  .land-nav { display: none; }
  /* space-between would strand the button in the middle once the nav goes,
     so the free space is claimed here instead: brand left, menu and call to
     action together on the right. */
  .land-menu { display: block; margin-left: auto; }
  .step-grid, .feature-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  .section h2 { font-size: 26px; }
}

.land-login { white-space: nowrap; }

@media (max-width: 400px) {
  .land-header { gap: 10px; }
  .land-header .btn { padding: 9px 12px; font-size: 13px; }
  /* The full label will not sit beside the brand and the menu button on a
     small phone. It shortens to "Get started"; the strapline directly under
     the hero still says free, and so does the pill above it. */
  .land-header .btn .btn-tail { display: none; }
}

/* ============================================================ DASHBOARD == */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.side {
  background: var(--side);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--rBtn);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.side-nav a:hover { background: var(--panel2); color: var(--text); }
.side-nav a[aria-current="page"] { background: var(--accentBg); color: var(--accentText); font-weight: 600; }

.side-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
  padding: 14px;
  font-size: 13px;
}
.side-card h2 { font-size: 13px; margin: 0 0 6px; }
.side-card p { margin: 0; color: var(--muted); font-size: 12.5px; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.side-meta {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  line-height: 1.6;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--rBtn);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--panel2); color: var(--text); }

.main { padding: 20px 26px 56px; min-width: 0; }

.main-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.main-head h1 { font-size: 26px; margin: 0; }

.switcher { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.switcher + .switcher {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.live-stamp {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.stack { display: flex; flex-direction: column; gap: 18px; }
/* Flex/grid children refuse to shrink below their content's min-width (the
   charts carry one), which blows the page width on phones instead of letting
   the chart scroll inside its own container. */
.stack > * { min-width: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

.win-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--rowLine);
}
.win-row:first-child { border-top: none; }
.win-price {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--good);
  min-width: 76px;
}
.win-label { font-family: var(--mono); font-size: 13px; }
.win-dur { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }

.glance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 18px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
}
.glance dt { color: var(--muted); }
.glance dd { margin: 0; text-align: right; font-weight: 500; }

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--rPanel);
  padding: 48px 28px;
  text-align: center;
  color: var(--muted);
}
.empty-state h2 { color: var(--text); margin: 0 0 10px; font-size: 20px; }
.empty-state p { margin: 0 auto; max-width: 52ch; font-size: 14px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* Wrap rather than clip: every destination stays visible and tappable —
     an overflow scroller here silently hid Alerts and Account. */
  .side-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; gap: 4px; }
  .side-nav a { white-space: nowrap; padding: 8px 10px; }
  .side-card { display: none; }
  .side-foot { margin: 0; flex-direction: row; align-items: center; gap: 12px; }
  .side-meta { display: none; }
  .main { padding: 18px 16px 48px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  /* Chip rows (period picker, fuel switch) wrap instead of running off-screen. */
  .switcher { flex-wrap: wrap; }
  .live-stamp { margin-left: 0; flex-basis: 100%; }
}

.chart-compact { min-width: 0; }
.band-text-cheap   { color: var(--good); }
.band-text-typical { color: var(--text); }
.band-text-peak    { color: var(--bad); }
.band-text-plunge  { color: var(--plunge); }

/* Small utilities. Inline style attributes would need CSP 'unsafe-inline'. */
.mt-20 { margin-top: 20px; }
.list-pad { padding-top: 12px; padding-bottom: 6px; }
.panel-foot { padding: 0 18px 16px; margin: 0; }

.hero-axis {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* ================================================================ PROSE == */

.prose { max-width: 72ch; padding: 40px 0 24px; }
.prose h1 { font-size: 38px; margin: 0 0 10px; }
.prose .updated {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin: 0 0 32px;
}
.prose h2 { font-size: 21px; margin: 36px 0 10px; }
.prose h3 { font-size: 16px; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--muted); font-size: 15px; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose .lede { font-size: 17px; color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.prose th, .prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rowLine);
  vertical-align: top;
}
.prose th { color: var(--text); font-weight: 600; }
.prose td { color: var(--muted); }
.prose .callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--good);
  border-radius: var(--rCard);
  background: var(--panel);
  padding: 16px 18px;
  margin: 20px 0;
}
.prose .callout p:last-child { margin-bottom: 0; }

/* ============================================================ ONBOARDING == */

.onboarding-body { min-height: 100vh; }

.onboarding {
  max-width: min(560px, 100%);
  margin-inline: auto;
  padding: 40px 20px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper li { display: flex; align-items: center; gap: 9px; }
.step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--muted);
  flex: none;
}
.stepper .is-active .step-dot { background: var(--accentSolid); border-color: var(--accentSolid); color: #fff; }
.stepper .is-done .step-dot { background: var(--goodDim); border-color: var(--good); color: var(--good); }
.step-name { font-size: 13px; color: var(--muted); font-weight: 500; }
.stepper .is-active .step-name { color: var(--text); font-weight: 600; }

.onboarding-card {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rPanel);
  padding: 30px 32px 28px;
}
.onboarding-card h1 { font-size: 26px; margin: 0 0 8px; }
.card-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }
.tick { color: var(--good); }

.form-field { margin-bottom: 18px; }
.form-field.has-error input { border-color: var(--bad); }

.btn-block { width: 100%; justify-content: center; }

.security-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.6;
}

/* The reassurance block on the connect form. Deliberately quiet: it is a
   list of facts, not a trust badge, so it should read as information rather
   than as marketing shouting about security. */
.assure {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--rowLine);
  border-radius: 10px;
  background: var(--panel2);
}

.assure-head {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.assure ul {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
}

.assure li {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}

.assure li strong { color: var(--text); font-weight: 600; }

.assure-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rowLine);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}

.detected { margin: 0 0 16px; }
.detected > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--rowLine);
  font-size: 14px;
}
.detected > div:first-child { border-top: none; }
.detected dt { color: var(--muted); font-weight: 500; }
.detected dd { margin: 0; overflow-wrap: anywhere; }

.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.done-tile {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accentBg);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 16px;
}

.onboarding-foot { font-size: 13.5px; }
.onboarding-brand { align-self: center; }

@media (max-width: 700px) {
  .onboarding-card { padding: 24px 20px; }
  .stepper { gap: 18px; }
  .step-name { display: none; }
  .btn-row { flex-direction: column-reverse; align-items: stretch; }
  .btn-row form { display: contents; }
}

.connection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.connection-bar form { margin: 0; }

/* ============================================================== ACCOUNT == */

.auth-alt { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.push-right { margin-left: auto; }
.account-stack { max-width: 760px; }
.panel-body-text { padding: 0 18px; color: var(--muted); font-size: 14px; }
.panel-foot-form { padding: 0 18px 16px; }
.panel-form { padding: 4px 18px 18px; max-width: 420px; }
.danger-panel { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.btn-danger { background: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 85%, black); }

/* ============================================================== COMPARE == */

.filter-panel {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.filter-panel .form-field { margin: 0; flex: 0 1 220px; }
.filter-panel .filter-kwh { flex: 0 1 130px; }
.filter-panel select, .filter-panel input { width: 100%; }
.filter-panel .filter-note { flex: 1 0 100%; margin: 0; color: var(--faint); }

.compare-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.compare-name a:hover { color: var(--accent); }
.compare-code {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.compare-daily { font-weight: 700; font-size: 14px; }
.compare-diff { color: var(--bad); }
.compare-save { color: var(--good); font-weight: 600; }
.dtable .pill { vertical-align: 1px; margin-left: 6px; }

/* ---------- prose extras (about page) ---------- */

.prose .api-list dt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  margin-top: 14px;
}
.prose .api-list dd { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.prose pre.code, .prose .code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rBtn);
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}

/* =============================================================== ALERTS == */

.alerts-stack { max-width: 760px; }

.alert-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--rowLine);
}
.alert-row:first-child { border-top: none; }

.alert-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accentBg);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: none;
}
.alert-body { min-width: 0; }
.alert-body h3 { font-size: 15px; margin: 0 0 2px; }
.alert-body p { margin: 0; color: var(--muted); font-size: 13.5px; }

.switch { margin-left: auto; flex: none; position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--panel2);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 99px;
  transition: background 0.15s;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .track { background: var(--accentSolid); border-color: var(--accentSolid); }
.switch input:checked + .track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

.threshold-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.threshold-field input { width: 90px; }
.threshold-field .unit { color: var(--muted); font-size: 13px; }

/* ============================================================== CONTENT == */
/* Guides, tariff pages and the indexes. Reuses .landing for the page frame
   and .prose for the body, so only the new components are defined here. */

.content-page .prose { max-width: 74ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 20px 0 0;
  font-size: 13px;
  color: var(--faint);
}
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }

/* Index grids: guides, tariffs, regions. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 8px 0 56px;
}
.index-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rCard);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.index-card:hover { border-color: var(--accent); }
.index-card h2 {
  font-family: var(--display);
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.index-card p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.index-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.index-more { font-size: 13px; color: var(--accent); }

/* Live numbers on an otherwise editorial page. */
.live-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rPanel);
  padding: 20px 22px;
  margin: 26px 0;
}
.live-panel-title { font-family: var(--display); font-size: 16px; margin: 0 0 14px; }
.live-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px 20px;
  margin: 0;
}
.live-facts div { margin: 0; }
.live-facts dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 3px;
}
.live-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--text);
}
.live-facts dd.mono { font-size: 13px; }
/* A tariff code is one long token. In a narrow auto-fit column it breaks
   mid-code, which is unreadable, so it takes the whole row instead. */
.live-facts .wide { grid-column: 1 / -1; }
.live-panel-foot { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

.faq-list h3 { margin-top: 22px; }

/* Region context under a price page. */
.region-notes { padding: 20px 22px 22px; }
.region-notes p { color: var(--muted); font-size: 14px; max-width: 78ch; }
.region-notes h3 { font-size: 13px; margin: 20px 0 8px; }
.region-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
}

/* Landing: the three link columns above the FAQ. */
.explore-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px 32px;
}
.explore-cols h3 { font-family: var(--display); font-size: 15px; margin: 0 0 10px; }
.explore-cols ul { list-style: none; margin: 0 0 10px; padding: 0; }
.explore-cols li { margin-bottom: 5px; font-size: 14px; }
.explore-cols a { color: var(--muted); text-decoration: none; }
.explore-cols a:hover { color: var(--text); }
.explore-cols p a { color: var(--accent); font-size: 13px; }

/* Footer link columns. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 28px;
  padding: 8px 0 24px;
}
.foot-cols h2 {
  font-family: var(--display);
  font-size: 13px;
  color: var(--text);
  margin: 0 0 10px;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 5px; }
.foot-cols a { color: var(--faint); text-decoration: none; }
.foot-cols a:hover { color: var(--text); }
.foot-legal { border-top: 1px solid var(--border2); padding-top: 16px; }
/* Fourteen regions in one column is a scroll on its own; two keeps the
   footer the same height as its neighbours. */
.foot-regions { columns: 2; column-gap: 18px; }

@media (max-width: 640px) {
  /* Four columns of links is a wall of text on a phone; two is browsable. */
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ ALL RATES == */
/* The reference table: every tariff on sale, grouped by how it prices a day.
   Not .table-scroll — that caps its height at 560px, which is right for a
   48-row half-hourly table inside a panel and wrong for a page whose whole
   job is to show everything at once. */

.region-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 4px 0 28px;
}
.region-switch .micro { margin-right: 4px; color: var(--faint); }

.rate-group { padding: 0 0 34px; }
.rate-group h2 { font-family: var(--display); font-size: 21px; margin: 26px 0 6px; }
.rate-group-blurb { color: var(--muted); font-size: 14px; max-width: 74ch; margin: 0 0 16px; }

.rate-scroll { overflow-x: auto; }
.rate-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}
.rate-table th, .rate-table td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rowLine);
  vertical-align: top;
}
.rate-table thead th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  border-bottom-color: var(--border);
}
.rate-table tbody th { font-weight: 600; color: var(--text); }
.rate-table td { color: var(--muted); }
.rate-table .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rate-table tbody td.num { color: var(--text); }

.rate-code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  margin-top: 3px;
}
.rate-pair { font-size: 13px; line-height: 1.5; }
/* A gap in the data has to look like a gap, not like a zero. */
.rate-missing { color: var(--faint); }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--rPill);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-left: 5px;
  vertical-align: 2px;
}

@media (max-width: 720px) {
  /* The tariff code doubles the height of every row on a phone and is the
     one column nobody is reading on one. */
  .rate-code { display: none; }
}

.hero-tariff {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.hero-tariff a { color: var(--accent); text-decoration: none; }
.hero-tariff a:hover { text-decoration: underline; }

/* .btn's 8px gap is sized for an icon beside a label. The header button's
   tail is a continuation of the sentence, so it wants a word space. */
.land-header .btn { gap: 0.25em; }