:root {
  --bg: #06130f;
  --panel: rgba(255, 255, 255, 0.075);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.16);
  --text: #f1fbf6;
  --muted: #b7c9c1;
  --green: #49d17d;
  --lime: #b8f06a;
  --amber: #f7c948;
  --red: #ff6b6b;
  --blue: #72d6ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(73, 209, 125, 0.22), transparent 34rem),
    radial-gradient(circle at top right, rgba(114, 214, 255, 0.14), transparent 32rem),
    linear-gradient(135deg, #04100c, #06130f 48%, #0c211a);
  line-height: 1.55;
}

a {
  color: inherit;
}

.back-link {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 12, 9, 0.68);
  backdrop-filter: blur(14px);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}

.hero {
  min-height: 92vh;
  padding: 5.5rem clamp(1rem, 4vw, 4rem) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topbar {
  position: absolute;
  top: 1rem;
  right: clamp(1rem, 4vw, 4rem);
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.topbar a {
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
}

.topbar a:hover {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
  gap: 2rem;
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(3.3rem, 8vw, 7.2rem);
  line-height: 0.9;
  margin-bottom: 1.2rem;
  letter-spacing: -0.075em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.055em;
  margin-bottom: 0.8rem;
}

h3 {
  font-size: 1.15rem;
  margin-bottom: 0.55rem;
}

.lead {
  max-width: 760px;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  color: #e7fff1;
}

.hero-copy {
  max-width: 780px;
  color: var(--muted);
  font-size: 1.04rem;
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 750;
}

.button.primary {
  background: linear-gradient(135deg, var(--green), var(--lime));
  color: #062015;
  border-color: transparent;
}

.status-card,
.panel,
.metric-card,
.truth-card,
.price-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.status-card {
  padding: 1.4rem;
}

.status-label {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}

.status-card strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.05;
  margin-bottom: 0.6rem;
}

.mini-meta {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.65rem;
}

.mini-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  font-weight: 800;
}

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4rem clamp(1rem, 3vw, 2rem);
}

.section-head {
  max-width: 820px;
  margin-bottom: 1.8rem;
}

.section-head p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.03rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card {
  padding: 1rem;
  min-height: 8.2rem;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-card strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
  margin: 0.6rem 0;
}

.metric-card small {
  color: var(--muted);
}

.dashboard-grid,
.county-layout,
.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.panel {
  padding: 1.25rem;
}

.panel.wide {
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: #d9fff0;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.pill.accent {
  color: var(--lime);
}

.pill.warning {
  color: var(--amber);
}

.pill.danger {
  color: var(--red);
}

.stacked-bars {
  display: grid;
  gap: 0.85rem;
}

.mix-row {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr) 4.2rem;
  gap: 0.8rem;
  align-items: center;
}

.mix-row label {
  color: var(--muted);
  font-size: 0.9rem;
}

.bar-track {
  height: 0.86rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--lime));
}

.mix-row:nth-child(2n) .bar-fill {
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.mix-row.gas .bar-fill {
  background: linear-gradient(90deg, var(--amber), #ff9f43);
}

.mix-row.imports .bar-fill {
  background: linear-gradient(90deg, #a29bfe, var(--blue));
}

.mix-row.other .bar-fill {
  background: linear-gradient(90deg, #95a5a6, #dfe6e9);
}

.big-quote {
  font-size: 1.55rem;
  line-height: 1.14;
  color: #eafff2;
  font-weight: 850;
}

.truth-grid,
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.truth-card,
.price-card {
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
}

.truth-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.32rem;
  background: var(--amber);
}

.truth-card.on::before {
  background: var(--green);
}

.truth-card.risk::before {
  background: var(--amber);
}

.truth-card.off::before {
  background: var(--red);
}

.truth-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.truth-status {
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
}

.truth-card.on .truth-status {
  color: var(--green);
}

.truth-card.risk .truth-status {
  color: var(--amber);
}

.truth-card.off .truth-status {
  color: var(--red);
}

.truth-card p,
.price-card p,
.panel p,
li {
  color: var(--muted);
}

.truth-value,
.price-value {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text);
}

.trajectory {
  min-height: 300px;
}

.trajectory svg {
  width: 100%;
  height: 300px;
  display: block;
}

.axis-text {
  fill: rgba(241, 251, 246, 0.75);
  font-size: 11px;
}

.line-target {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  stroke-dasharray: 7 7;
}

.line-actual {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
}

.grid-line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.gauge {
  margin-top: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
  position: relative;
}

.gauge::after {
  content: "";
  position: absolute;
  top: -0.36rem;
  left: var(--value, 50%);
  transform: translateX(-50%);
  width: 0.28rem;
  height: 1.75rem;
  border-radius: 999px;
  background: white;
}

.county-list {
  display: grid;
  gap: 0.75rem;
}

.county-item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) 4rem;
  gap: 0.6rem;
  align-items: center;
}

.novelty-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.novelty-list div {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
}

.novelty-list strong,
.novelty-list span {
  display: block;
}

.novelty-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

.method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.footer {
  padding: 2.5rem 1rem 3.5rem;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.small {
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .hero-grid,
  .dashboard-grid,
  .county-layout,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .truth-grid,
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    position: static;
    margin: 0 0 2rem;
  }

  .back-link {
    position: static;
    display: inline-flex;
    margin: 1rem 1rem 0;
  }

  .hero {
    padding-top: 1rem;
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .metric-grid,
  .truth-grid,
  .price-grid,
  .novelty-list {
    grid-template-columns: 1fr;
  }

  .mix-row,
  .county-item {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: clamp(3rem, 18vw, 4.6rem);
  }
}

/* FINAL LAYOUT FIX: project tools block */
#project-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 1rem !important;
  width: min(1180px, calc(100% - 2rem)) !important;
  margin: 2.25rem auto 0 !important;
  align-items: stretch !important;
}

#project-tools .hero-card {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 1.45rem !important;
  padding: 1rem !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(18px) !important;
}

#project-tools .hero-card-kicker,
#project-tools .share-kicker {
  margin: 0 0 0.75rem !important;
  color: var(--lime) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
}

#project-tools .top-links,
#project-tools .grant-links {
  display: grid !important;
  gap: 0.75rem !important;
}

#project-tools .top-row-links,
#project-tools .share-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
}

#project-tools .pill-link,
#project-tools button.pill-link {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.45rem !important;
  padding: 0.62rem 0.9rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: 850 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#project-tools .pill-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

#project-tools .support-link {
  background: linear-gradient(135deg, var(--green), var(--lime)) !important;
  color: #062015 !important;
  border-color: transparent !important;
}

#project-tools .email-link {
  background: rgba(247, 201, 72, 0.18) !important;
  border-color: rgba(247, 201, 72, 0.35) !important;
}

#project-tools .github-blob {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
  align-items: center !important;
  padding: 0.58rem 0.78rem !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#project-tools .github-label {
  color: var(--muted) !important;
  font-weight: 900 !important;
}

#project-tools .github-inline-link {
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
}

#project-tools .github-inline-link:hover {
  color: var(--lime) !important;
}

#project-tools .github-sep {
  color: var(--muted) !important;
}

#project-tools .hero-doi-row {
  margin-top: 0.75rem !important;
}

#project-tools .doi-strip {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  padding: 0.46rem 0.62rem !important;
  border-radius: 999px !important;
  background: rgba(114, 214, 255, 0.09) !important;
  border: 1px solid rgba(114, 214, 255, 0.25) !important;
}

#project-tools .doi-strip-label {
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

#project-tools .doi-strip-badge {
  padding: 0.16rem 0.36rem !important;
  border-radius: 0.45rem !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--text) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

#project-tools .doi-strip-link {
  color: var(--blue) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
}

#project-tools .share-copy {
  color: var(--muted) !important;
  margin: 0 0 0.75rem !important;
}

#project-tools .share-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 1rem !important;
  align-items: center !important;
}

#project-tools .share-actions-wrap {
  min-width: 0 !important;
}

#project-tools .share-qr-wrap {
  width: 116px !important;
  height: 116px !important;
  padding: 0.45rem !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  flex: 0 0 auto !important;
}

#project-tools .qr-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0.55rem !important;
  background: white !important;
}

/* tighten the top section */
.hero {
  min-height: auto !important;
  padding-bottom: 2.75rem !important;
}

.hero-grid {
  align-items: center !important;
}

/* start content closer after hero tools */
main > .section:first-child {
  padding-top: 2.5rem !important;
}

@media (max-width: 980px) {
  #project-tools {
    grid-template-columns: 1fr !important;
  }

  #project-tools .share-main-row {
    grid-template-columns: 1fr !important;
  }

  #project-tools .share-qr-wrap {
    width: 132px !important;
    height: 132px !important;
  }
}

@media (max-width: 620px) {
  #project-tools .github-blob,
  #project-tools .doi-strip {
    width: 100% !important;
    border-radius: 1rem !important;
  }

  #project-tools .pill-link,
  #project-tools button.pill-link {
    width: 100% !important;
  }
}

/* Grant-Radar-style DOI strip and hero tools, final override */

#project-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 0.95rem !important;
  width: min(1180px, calc(100% - 2rem)) !important;
  margin: 2rem auto 0 !important;
  align-items: stretch !important;
}

#project-tools .hero-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 1rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28) !important;
}

#project-tools .hero-card-kicker,
#project-tools .share-kicker {
  margin: 0 0 0.45rem !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #d7ff8a !important;
  font-weight: 800 !important;
}

#project-tools .top-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
}

#project-tools .top-row-links,
#project-tools .share-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
}

#project-tools .pill-link,
#project-tools button.pill-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 0.72rem 1rem !important;
  background: rgba(255,255,255,0.04) !important;
  color: #ecf8f5 !important;
  text-decoration: none !important;
  font: inherit !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#project-tools .pill-link:hover {
  text-decoration: none !important;
  border-color: #72ebc2 !important;
  background: rgba(114, 235, 194, 0.12) !important;
}

#project-tools .support-link {
  background: linear-gradient(180deg, #1f8f5f, #19734d) !important;
  border-color: #42b983 !important;
  color: #f4fff9 !important;
  box-shadow: 0 10px 24px rgba(25, 115, 77, 0.28) !important;
}

#project-tools .email-link {
  background: linear-gradient(180deg, rgba(255, 240, 186, 0.2), rgba(255, 226, 122, 0.14)) !important;
  border-color: rgba(255, 223, 123, 0.42) !important;
  color: #fff4cc !important;
}

#project-tools .github-blob {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
  padding: 0.72rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
}

#project-tools .github-label {
  color: #b8d9d1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#project-tools .github-inline-link {
  color: #ecf8f5 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#project-tools .github-inline-link:hover {
  color: #72ebc2 !important;
  text-decoration: none !important;
}

#project-tools .github-sep {
  color: rgba(255, 255, 255, 0.38) !important;
}

/* Exact Grant Radar DOI strip style */
#project-tools .hero-doi-row {
  margin-top: 0.7rem !important;
}

#project-tools .doi-strip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  padding: 0.34rem 0.42rem 0.34rem 0.58rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(143, 220, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(16, 54, 57, 0.92), rgba(13, 43, 46, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(221, 247, 255, 0.06), 0 10px 24px rgba(2, 16, 20, 0.22) !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#project-tools .doi-strip-label {
  color: rgba(228, 242, 233, 0.9) !important;
  font-size: 0.69rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#project-tools .doi-strip-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.32rem !important;
  padding: 0.08rem 0.34rem !important;
  border-radius: 0.26rem !important;
  background: rgba(111, 121, 130, 0.42) !important;
  border: 1px solid rgba(210, 220, 228, 0.12) !important;
  color: #f0f4f7 !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#project-tools .doi-strip-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.52rem !important;
  padding: 0.08rem 0.56rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #1787dd, #0f72c8) !important;
  border: 1px solid rgba(171, 224, 255, 0.42) !important;
  color: #f4fbff !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: inset 0 1px 0 rgba(233, 247, 255, 0.22), 0 8px 14px rgba(4, 53, 93, 0.22) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#project-tools .doi-strip-link:hover {
  background: linear-gradient(180deg, #2796ea, #137fd6) !important;
  border-color: rgba(201, 236, 255, 0.68) !important;
  text-decoration: none !important;
}

#project-tools .share-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.95rem !important;
  align-items: start !important;
}

#project-tools .share-copy {
  color: #b8d9d1 !important;
  line-height: 1.5 !important;
  margin: 0 0 0.7rem !important;
}

#project-tools .share-qr-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

#project-tools .qr-image {
  width: 124px !important;
  height: 124px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.08) !important;
  padding: 0.5rem !important;
}

@media (max-width: 980px) {
  #project-tools {
    grid-template-columns: 1fr !important;
  }

  #project-tools .share-main-row {
    grid-template-columns: 1fr !important;
  }

  #project-tools .share-qr-wrap {
    justify-content: flex-start !important;
  }
}

@media (max-width: 620px) {
  #project-tools .doi-strip,
  #project-tools .github-blob {
    width: 100% !important;
    border-radius: 1rem !important;
  }

  #project-tools .pill-link,
  #project-tools button.pill-link {
    width: 100% !important;
  }
}

/* Data completeness repair */
.metric-card.missing {
  border-style: dashed;
  opacity: 0.82;
}

.metric-card.missing strong {
  color: var(--muted);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.mix-row.unavailable {
  opacity: 0.68;
}

.mix-row.unavailable .bar-track {
  background: rgba(255, 255, 255, 0.055);
  border: 1px dashed rgba(255,255,255,0.18);
}

.mix-row.unavailable .bar-fill {
  width: 0 !important;
}

.mix-row.unavailable strong {
  color: var(--muted);
}

/* Energy-now card layout: allow Demand/Renewables/Wind/Solar/Residual/Imports/CO2 */
.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

.metric-card strong {
  overflow-wrap: anywhere;
}

/* Data quality panel */
.data-quality-panel {
  margin-top: 1rem;
}

.quality-intro {
  max-width: 900px;
  color: var(--muted);
  margin-bottom: 1rem;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.quality-item {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.85rem;
  background: rgba(255,255,255,0.045);
  min-height: 8rem;
}

.quality-item strong,
.quality-item small {
  display: block;
}

.quality-item strong {
  margin: 0.55rem 0 0.35rem;
}

.quality-item small {
  color: var(--muted);
  line-height: 1.35;
}

.quality-badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 900;
}

.quality-item.mapped .quality-badge {
  color: #dfffee;
  background: rgba(73, 209, 125, 0.16);
  border: 1px solid rgba(73, 209, 125, 0.38);
}

.quality-item.computed .quality-badge {
  color: #fff4d5;
  background: rgba(247, 201, 72, 0.16);
  border: 1px solid rgba(247, 201, 72, 0.38);
}

.quality-item.missing .quality-badge {
  color: #e6eef0;
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.28);
}

.quality-item.missing {
  opacity: 0.78;
  border-style: dashed;
}

@media (max-width: 980px) {
  .quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Price-source badge */
.source-note-pill {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.65rem;
  padding: 0.44rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.36);
  background: rgba(247, 201, 72, 0.13);
  color: #fff4d5;
  font-size: 0.88rem;
  font-weight: 850;
}

/* Target Drift Engine */
.target-drift-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.target-drift-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.85rem;
  background: rgba(255,255,255,0.045);
  min-height: 7.6rem;
  position: relative;
  overflow: hidden;
}

.target-drift-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.26rem;
  background: rgba(255,255,255,0.22);
}

.target-drift-card.on::before {
  background: var(--green);
}

.target-drift-card.risk::before {
  background: var(--amber);
}

.target-drift-card.off::before {
  background: var(--red);
}

.target-drift-card span,
.target-drift-card strong,
.target-drift-card small {
  display: block;
}

.target-drift-card span {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.target-drift-card strong {
  margin: 0.45rem 0 0.25rem;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
}

.target-drift-card small {
  color: var(--muted);
  line-height: 1.32;
}

@media (max-width: 980px) {
  .target-drift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .target-drift-grid {
    grid-template-columns: 1fr;
  }
}

/* County Hosting Index and schematic Ireland heatmap */
.county-hosting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  align-items: stretch;
}

.heatmap-panel {
  overflow: visible;
}

.ireland-heatmap {
  display: grid;
  grid-template-columns: repeat(8, minmax(2.6rem, 1fr));
  grid-template-rows: repeat(9, minmax(2.6rem, 1fr));
  gap: 0.38rem;
  min-height: 35rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 35% 18%, rgba(114, 214, 255, 0.10), transparent 30%),
    radial-gradient(circle at 45% 75%, rgba(73, 209, 125, 0.12), transparent 34%),
    rgba(255,255,255,0.04);
}

.county-tile {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0.85rem;
  color: #06130f;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
  cursor: help;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px rgba(0,0,0,0.18);
}

.county-tile strong {
  font-size: 0.82rem;
  line-height: 1;
}

.county-tile span {
  font-size: 0.7rem;
  font-weight: 900;
  opacity: 0.82;
}

.heat-very-low {
  background: linear-gradient(180deg, #d8e4de, #a8bdb3);
}

.heat-low {
  background: linear-gradient(180deg, #cfe8a9, #a4c978);
}

.heat-medium {
  background: linear-gradient(180deg, #f4d06f, #d6a946);
}

.heat-high {
  background: linear-gradient(180deg, #7bdc89, #39aa62);
}

.heat-very-high {
  background: linear-gradient(180deg, #39d17d, #087c50);
  color: #f4fff9;
}

.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: var(--muted);
  margin-top: 0.8rem;
  font-size: 0.85rem;
}

.legend-swatch {
  width: 1.35rem;
  height: 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}

.county-summary-grid {
  display: grid;
  gap: 0.75rem;
}

.county-summary-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.9rem;
  background: rgba(255,255,255,0.045);
}

.county-summary-card h4 {
  margin: 0 0 0.55rem;
}

.county-summary-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.county-summary-card li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.45rem;
}

.county-summary-card li:first-child {
  border-top: 0;
  padding-top: 0;
}

.county-summary-card span {
  color: var(--muted);
  text-align: right;
}

.county-summary-card.high {
  border-color: rgba(73, 209, 125, 0.32);
}

.county-summary-card.low {
  border-color: rgba(247, 201, 72, 0.32);
}

.county-summary-card.caveat {
  border-style: dashed;
  opacity: 0.88;
}

.county-method-panel {
  margin-top: 1rem;
}

@media (max-width: 980px) {
  .county-hosting-layout {
    grid-template-columns: 1fr;
  }

  .ireland-heatmap {
    min-height: 30rem;
  }
}

@media (max-width: 620px) {
  .ireland-heatmap {
    grid-template-columns: repeat(8, minmax(1.8rem, 1fr));
    grid-template-rows: repeat(9, minmax(2.1rem, 1fr));
    gap: 0.25rem;
    padding: 0.55rem;
    min-height: 24rem;
  }

  .county-tile {
    border-radius: 0.55rem;
    padding: 0.2rem;
  }

  .county-tile strong {
    font-size: 0.68rem;
  }

  .county-tile span {
    font-size: 0.6rem;
  }

  .county-summary-card li {
    flex-direction: column;
  }

  .county-summary-card span {
    text-align: left;
  }
}

/* Source Status Console */
.source-console-panel {
  margin-bottom: 1rem;
}

.source-console-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.source-console-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.9rem;
  background: rgba(255,255,255,0.045);
  min-height: 11rem;
}

.source-console-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.source-console-top h4 {
  margin: 0;
  font-size: 1rem;
}

.source-console-top span {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(114, 214, 255, 0.32);
  background: rgba(114, 214, 255, 0.11);
  color: #e1f6ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.source-console-card p {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.38;
}

.source-console-card a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 800;
}

.source-console-card a:hover {
  text-decoration: underline;
}

.source-console-caveat {
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.55rem;
}

@media (max-width: 1100px) {
  .source-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .source-console-grid {
    grid-template-columns: 1fr;
  }
}

/* CO2 metric typography repair */
.metric-card.co2-card strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 0.95;
  overflow-wrap: normal;
  word-break: normal;
}

.metric-card.co2-card .co2-value {
  font-size: clamp(2.35rem, 4.1vw, 3.35rem);
  line-height: 0.95;
}

.metric-card.co2-card .co2-unit {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.92;
}

.metric-card.co2-card small {
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .metric-card.co2-card strong {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
}

/* Target drift card alignment and unit clarity */
.target-drift-grid {
  align-items: stretch;
}

.target-drift-card {
  display: flex;
  flex-direction: column;
  min-height: 9.2rem;
}

.target-drift-card span:first-child {
  min-height: 2.2rem;
}

.target-drift-card strong {
  display: flex;
  align-items: baseline;
  gap: 0.32rem;
  flex-wrap: nowrap;
  min-height: 3.25rem;
  margin: 0.5rem 0 0.35rem;
  line-height: 0.95;
}

.target-number {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.target-unit {
  font-size: clamp(0.82rem, 1.15vw, 1.02rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  letter-spacing: -0.02em;
}

.target-drift-card small {
  margin-top: auto;
  max-width: 12rem;
}

.target-status-card strong {
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: normal;
}

.target-status-card small {
  font-size: 0.76rem;
  line-height: 1.32;
}

@media (max-width: 980px) {
  .target-drift-card span:first-child {
    min-height: auto;
  }
}

/* v0.5 design repair: target drift and residual panel */
.target-drift-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  margin-top: 1rem !important;
}

.target-drift-card {
  min-height: 0 !important;
  padding: 0.95rem 1rem !important;
  border-radius: 1rem !important;
  background: rgba(255,255,255,0.045) !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
}

.target-drift-card::before {
  width: 0.18rem !important;
  opacity: 0.75 !important;
}

.target-drift-card span:first-child {
  min-height: 0 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  line-height: 1.25 !important;
}

.target-drift-card strong {
  min-height: 0 !important;
  margin: 0.42rem 0 0.28rem !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 0.28rem !important;
  line-height: 0.95 !important;
}

.target-number {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
}

.target-unit {
  font-size: 0.86rem !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}

.target-drift-card small {
  margin-top: 0 !important;
  max-width: none !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

.target-status-card {
  grid-column: span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr) !important;
  column-gap: 1rem !important;
  align-items: center !important;
  border-color: rgba(255, 107, 107, 0.32) !important;
}

.target-status-card span:first-child {
  grid-column: 1 / -1;
}

.target-status-card strong {
  margin: 0 !important;
  font-size: clamp(1.65rem, 2.4vw, 2.4rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.target-status-card small {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  color: var(--muted) !important;
}

/* Soften the warning visual: red means off-track, not emergency-room decor */
.target-drift-card.off::before,
.target-status-card.off::before {
  background: linear-gradient(180deg, rgba(255,107,107,0.95), rgba(255,107,107,0.35)) !important;
}

/* Compact thermal/other panel */
#residualGauge {
  margin-top: 1rem !important;
}

#residualNarrative {
  max-width: 34rem !important;
  line-height: 1.55 !important;
}

#residualSignal {
  white-space: normal !important;
}

/* Reduce huge empty panel feeling in two-column analytical rows */
.section .panel {
  align-self: start;
}

/* Better chart/card balance */
.trajectory {
  margin-bottom: 0.8rem !important;
}

@media (max-width: 900px) {
  .target-drift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .target-status-card {
    grid-column: span 2 !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .target-drift-grid {
    grid-template-columns: 1fr !important;
  }

  .target-status-card {
    grid-column: span 1 !important;
  }
}

/* v0.6 Daily Pulse Engine: fine-line briefing panels */
.pulse-section {
  padding-top: 1.4rem;
}

.pulse-head {
  margin-bottom: 1rem;
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.13);
  border-bottom: 1px solid rgba(255,255,255,0.13);
}

.pulse-card {
  min-height: 13rem;
  padding: 1rem 1.05rem 0.95rem;
  border-right: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.018);
  display: grid;
  grid-template-rows: auto 3.1rem 1fr;
  gap: 0.75rem;
}

.pulse-card-top span {
  display: block;
  color: rgba(232, 244, 238, 0.74);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.pulse-card-top strong {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  color: var(--text);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 760;
}

.pulse-card-top strong small {
  color: rgba(232, 244, 238, 0.74);
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pulse-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  max-width: 14rem;
}

.pulse-sparkline {
  width: 100%;
  height: 3.1rem;
  overflow: visible;
}

.pulse-sparkline line {
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1;
}

.pulse-sparkline polyline {
  fill: none;
  stroke: rgba(114, 214, 255, 0.92);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pulse-card.good .pulse-sparkline polyline {
  stroke: rgba(73, 209, 125, 0.95);
}

.pulse-card.caution .pulse-sparkline polyline {
  stroke: rgba(247, 201, 72, 0.95);
}

.pulse-card.risk .pulse-sparkline polyline {
  stroke: rgba(255, 107, 107, 0.95);
}

.pulse-card.muted {
  opacity: 0.72;
}

.pulse-sparkline.empty line {
  stroke-dasharray: 3 4;
}

@media (max-width: 1100px) {
  .pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .pulse-card {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.13);
  }

  .pulse-card:last-child {
    border-bottom: 0;
  }
}

/* v0.7 Editorial Pulse Layout: ZEIT-inspired, not copied */
:root {
  --editorial-bg: #070d0b;
  --editorial-panel: rgba(255,255,255,0.018);
  --editorial-line: rgba(255,255,255,0.16);
  --editorial-muted: rgba(232,244,238,0.62);
  --editorial-soft: rgba(232,244,238,0.82);
}

/* Global softening */
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(69, 209, 125, 0.055), transparent 26rem),
    var(--editorial-bg) !important;
}

.section {
  margin-top: clamp(2.2rem, 5vw, 4.8rem);
}

/* Daily pulse becomes the real dashboard front */
.pulse-section {
  margin-top: 1.8rem !important;
}

.pulse-head {
  max-width: 58rem;
}

.pulse-head h2 {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  letter-spacing: -0.055em;
}

.pulse-head p {
  max-width: 44rem;
  color: var(--editorial-muted);
}

/* Fine-line panel system */
.pulse-grid {
  margin-top: 1.2rem;
  background: transparent !important;
  border-top: 1px solid var(--editorial-line) !important;
  border-bottom: 1px solid var(--editorial-line) !important;
}

.pulse-card {
  border-right: 1px solid var(--editorial-line) !important;
  background: transparent !important;
  min-height: 12.2rem !important;
  padding: 1.05rem 1.05rem 1rem !important;
  transition: background 160ms ease, transform 160ms ease;
}

.pulse-card:hover {
  background: rgba(255,255,255,0.025) !important;
  transform: translateY(-1px);
}

.pulse-card-top span {
  color: var(--editorial-soft) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.085em !important;
  font-weight: 800 !important;
}

.pulse-card-top strong {
  font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important;
  font-weight: 720 !important;
  letter-spacing: -0.045em !important;
  color: #e9f6ef !important;
}

.pulse-card-top strong small {
  color: var(--editorial-muted) !important;
  font-weight: 650 !important;
}

.pulse-card p {
  color: var(--editorial-muted) !important;
  font-size: 0.8rem !important;
  line-height: 1.42 !important;
}

.pulse-sparkline polyline {
  stroke-width: 1.75 !important;
}

.pulse-sparkline line {
  stroke: rgba(255,255,255,0.11) !important;
}

/* Demote the old large card readout */
#today .section-head h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.1rem) !important;
}

#today .section-head p {
  max-width: 50rem;
  color: var(--editorial-muted);
}

.metric-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
}

.metric-card {
  border: 0 !important;
  border-right: 1px solid var(--editorial-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 8.8rem !important;
  padding: 0.9rem 0.95rem !important;
}

.metric-card:last-child {
  border-right: 0 !important;
}

.metric-card > span:first-child {
  font-size: 0.66rem !important;
  letter-spacing: 0.1em !important;
}

.metric-card strong {
  margin: 0.45rem 0 0.45rem !important;
}

.metric-number {
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
  font-weight: 720 !important;
}

.metric-unit {
  font-size: 0.82rem !important;
}

.metric-card small {
  font-size: 0.74rem !important;
  line-height: 1.34 !important;
}

/* Make heavy panels calmer */
.panel {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.13) !important;
  box-shadow: none !important;
}

/* Target drift: less tombstone, more analytical */
.target-drift-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
  gap: 0 !important;
}

.target-drift-card {
  border: 0 !important;
  border-right: 1px solid var(--editorial-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.95rem !important;
}

.target-drift-card:last-child {
  border-right: 0 !important;
}

.target-drift-card::before {
  display: none !important;
}

.target-number {
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
}

.target-unit {
  font-size: 0.72rem !important;
}

/* Responsive repair */
@media (max-width: 1180px) {
  .metric-grid,
  .target-drift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .metric-card,
  .target-drift-card {
    border-bottom: 1px solid var(--editorial-line) !important;
  }
}

@media (max-width: 680px) {
  .metric-grid,
  .target-drift-grid,
  .pulse-grid {
    grid-template-columns: 1fr !important;
  }

  .metric-card,
  .target-drift-card,
  .pulse-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--editorial-line) !important;
  }
}

/* v0.8 ZEIT-like compact rhythm and fine-line reading layer */
:root {
  --zeit-bg: #050908;
  --zeit-line: rgba(238, 248, 243, 0.135);
  --zeit-line-soft: rgba(238, 248, 243, 0.085);
  --zeit-text: #edf7f1;
  --zeit-muted: rgba(237, 247, 241, 0.62);
  --zeit-dim: rgba(237, 247, 241, 0.42);
}

/* Kill the magazine-sized vertical gaps */
.hero {
  min-height: auto !important;
  padding-top: clamp(3.7rem, 6vw, 5.6rem) !important;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.section {
  padding-top: clamp(1.35rem, 2.6vw, 2.35rem) !important;
  padding-bottom: clamp(1.35rem, 2.6vw, 2.35rem) !important;
}

.section + .section {
  margin-top: 0 !important;
}

.section-head {
  margin-bottom: clamp(0.85rem, 1.8vw, 1.25rem) !important;
}

.section-head p:not(.eyebrow) {
  margin-bottom: 0 !important;
}

/* Overall editorial restraint */
h1 {
  letter-spacing: -0.072em !important;
}

h2 {
  font-weight: 760 !important;
  letter-spacing: -0.055em !important;
}

h3 {
  font-weight: 760 !important;
}

.panel,
.status-card,
.metric-card,
.truth-card,
.price-card {
  box-shadow: none !important;
}

/* ZEIT-like question strip */
.question-strip-section {
  padding-top: 0.9rem !important;
  padding-bottom: 1.1rem !important;
}

.question-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--zeit-line);
  padding-top: 1rem;
  margin-bottom: 0.75rem;
}

.question-strip-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
}

.question-strip-head p {
  margin: 0;
  color: var(--zeit-muted);
  font-size: 0.86rem;
}

.question-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--zeit-line);
  border-bottom: 1px solid var(--zeit-line);
}

.question-link {
  min-height: 7.4rem;
  padding: 0.95rem 0.9rem;
  border-right: 1px solid var(--zeit-line);
  text-decoration: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.55rem;
  background: transparent;
}

.question-link:last-child {
  border-right: 0;
}

.question-link:hover {
  background: rgba(255,255,255,0.026);
}

.question-icon {
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--zeit-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 0.95rem;
  line-height: 1;
}

.question-link strong {
  color: var(--zeit-text);
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 720;
  max-width: 11rem;
}

.question-link small {
  color: var(--zeit-muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

/* Daily pulse should feel like the main ZEIT dashboard */
.pulse-section {
  padding-top: 1.1rem !important;
  padding-bottom: 1.2rem !important;
}

.pulse-head {
  margin-bottom: 0.7rem !important;
}

.pulse-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.65rem) !important;
  margin-bottom: 0.35rem !important;
}

.pulse-grid {
  margin-top: 0.75rem !important;
}

.pulse-card {
  min-height: 10.6rem !important;
  padding: 0.9rem 0.9rem 0.85rem !important;
  gap: 0.58rem !important;
  grid-template-rows: auto 2.55rem 1fr !important;
}

.pulse-card-top span {
  font-size: 0.68rem !important;
  letter-spacing: 0.075em !important;
}

.pulse-card-top strong {
  font-size: clamp(1.32rem, 2vw, 1.85rem) !important;
  font-weight: 690 !important;
}

.pulse-card-top strong small {
  font-size: 0.76rem !important;
  font-weight: 620 !important;
}

.pulse-sparkline {
  height: 2.55rem !important;
}

.pulse-sparkline polyline {
  stroke-width: 1.55 !important;
}

.pulse-card p {
  font-size: 0.76rem !important;
  line-height: 1.33 !important;
}

/* Demote old large metric cards into a technical readout */
#today {
  padding-top: 1rem !important;
}

#today .section-head {
  margin-bottom: 0.65rem !important;
}

#today .section-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  margin-bottom: 0.25rem !important;
}

.metric-grid {
  margin-bottom: 0.75rem !important;
}

.metric-card {
  min-height: 7rem !important;
  padding: 0.75rem 0.78rem !important;
}

.metric-card > span:first-child {
  font-size: 0.61rem !important;
}

.metric-number {
  font-size: clamp(1.25rem, 1.75vw, 1.75rem) !important;
  font-weight: 680 !important;
}

.metric-unit {
  font-size: 0.68rem !important;
}

.metric-card small {
  font-size: 0.68rem !important;
  line-height: 1.28 !important;
}

/* Reduce huge panel feel in dashboard rows */
.dashboard-grid,
.county-layout,
.method-grid {
  gap: 0.8rem !important;
}

.panel {
  border-radius: 1.05rem !important;
  padding: 1rem !important;
}

.panel-head {
  margin-bottom: 0.6rem !important;
}

.panel p {
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

/* Target section: less vertical bulk */
.trajectory {
  min-height: 220px !important;
  margin-bottom: 0.55rem !important;
}

.trajectory svg {
  height: 220px !important;
}

.target-drift-grid {
  margin-top: 0.6rem !important;
}

.target-drift-card {
  padding: 0.75rem !important;
}

.target-drift-card span:first-child {
  font-size: 0.6rem !important;
}

.target-number {
  font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important;
}

.target-unit {
  font-size: 0.62rem !important;
}

.target-drift-card small {
  font-size: 0.68rem !important;
  line-height: 1.24 !important;
}

/* Reduce excess emptiness around cards such as residual signal */
.gauge {
  margin-top: 0.75rem !important;
  height: 0.72rem !important;
}

.big-quote {
  font-size: 1.18rem !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
}

/* Truth / prices: less startup-card, more thin monitor */
.truth-grid,
.price-grid {
  gap: 0 !important;
  border-top: 1px solid var(--zeit-line);
  border-bottom: 1px solid var(--zeit-line);
}

.truth-card,
.price-card {
  border: 0 !important;
  border-right: 1px solid var(--zeit-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 8.5rem;
  padding: 0.85rem !important;
}

.truth-card:last-child,
.price-card:last-child {
  border-right: 0 !important;
}

.truth-value,
.price-value {
  font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
  font-weight: 700 !important;
}

.truth-card p,
.price-card p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

/* tighter mobile/tablet rhythm */
@media (max-width: 980px) {
  .question-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-link:nth-child(2n) {
    border-right: 0;
  }

  .metric-grid,
  .target-drift-grid,
  .truth-grid,
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .question-strip,
  .metric-grid,
  .target-drift-grid,
  .truth-grid,
  .price-grid {
    grid-template-columns: 1fr !important;
  }

  .question-link,
  .truth-card,
  .price-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--zeit-line) !important;
  }

  .question-strip-head {
    display: block;
  }

  .question-strip-head p {
    margin-top: 0.35rem;
  }
}

/* v0.9 Real Ireland county boundary heatmap */
.ireland-boundary-map {
  display: block !important;
  min-height: 34rem;
  padding: 0.8rem;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 42% 44%, rgba(73, 209, 125, 0.08), transparent 18rem),
    rgba(255,255,255,0.015);
}

.county-map-svg {
  width: 100%;
  max-width: 46rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

.county-boundary {
  stroke: rgba(238, 248, 243, 0.48);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  transition: filter 140ms ease, opacity 140ms ease, stroke 140ms ease;
}

.county-map-glow .county-boundary {
  stroke: none;
  opacity: 0.22;
  filter: blur(10px);
}

.county-map-counties .county-boundary:hover,
.county-map-counties .county-boundary:focus {
  stroke: #eafff2;
  filter: drop-shadow(0 0 8px rgba(184, 240, 106, 0.28));
  outline: none;
}

.county-boundary.heat-very-low { fill: #d7e2dd; }
.county-boundary.heat-low { fill: #b8d88c; }
.county-boundary.heat-medium { fill: #f0cf62; }
.county-boundary.heat-high { fill: #71d67a; }
.county-boundary.heat-very-high { fill: #18a863; }

.county-map-label {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(232, 244, 238, 0.52);
  stroke-width: 2.8px;
  stroke-linejoin: round;
}

.county-map-code,
.county-map-score {
  fill: #06130f;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.county-map-code {
  font-size: 19px;
}

.county-map-score {
  font-size: 13px;
  font-weight: 760;
}

.heatmap-panel .panel-head .pill {
  color: var(--lime);
}

@media (max-width: 720px) {
  .ireland-boundary-map {
    min-height: 26rem;
    padding: 0.25rem;
  }

  .county-map-code {
    font-size: 15px;
  }

  .county-map-score {
    font-size: 11px;
  }
}

/* v0.10 Mobile Editorial Compression */
@media (max-width: 760px) {
  :root {
    --mobile-pad: 0.86rem;
    --mobile-line: rgba(238, 248, 243, 0.13);
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(73, 209, 125, 0.08), transparent 18rem),
      #050908 !important;
  }

  .back-link {
    position: fixed !important;
    top: 0.55rem !important;
    left: 0.55rem !important;
    z-index: 50 !important;
    padding: 0.42rem 0.62rem !important;
    font-size: 0.72rem !important;
    background: rgba(5, 9, 8, 0.82) !important;
    backdrop-filter: blur(14px) !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    margin: 0 -0.86rem 0.7rem !important;
    padding: 0.5rem 0.75rem 0.52rem 4.4rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.35rem !important;
    background: rgba(5, 9, 8, 0.86) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    scrollbar-width: none;
  }

  .topbar::-webkit-scrollbar {
    display: none;
  }

  .topbar a {
    flex: 0 0 auto;
    padding: 0.38rem 0.62rem !important;
    font-size: 0.72rem !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    background: rgba(255,255,255,0.035) !important;
  }

  .hero {
    padding: 0.2rem var(--mobile-pad) 1rem !important;
  }

  .hero-grid {
    display: block !important;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 13vw, 4rem) !important;
    line-height: 0.92 !important;
    margin-bottom: 0.65rem !important;
    letter-spacing: -0.075em !important;
  }

  .hero .eyebrow {
    font-size: 0.66rem !important;
    margin-bottom: 0.45rem !important;
  }

  .lead {
    font-size: 1.08rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-copy {
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
    max-width: none !important;
    color: rgba(237, 247, 241, 0.66) !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-actions {
    margin-top: 0.75rem !important;
    gap: 0.45rem !important;
  }

  .button {
    min-height: 2.15rem !important;
    padding: 0.48rem 0.68rem !important;
    font-size: 0.76rem !important;
  }

  .status-card {
    margin-top: 0.85rem !important;
    padding: 0.8rem !important;
    border-radius: 0.95rem !important;
  }

  .status-card strong {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  .status-card p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.65rem !important;
  }

  .mini-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
  }

  .mini-meta div {
    display: block !important;
    padding-top: 0.45rem !important;
  }

  .mini-meta dt {
    font-size: 0.62rem !important;
  }

  .mini-meta dd {
    font-size: 0.72rem !important;
  }

  #project-tools {
    margin-top: 0.85rem !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  #project-tools .hero-card {
    border-radius: 0.95rem !important;
    padding: 0.72rem !important;
  }

  #project-tools .top-row-links,
  #project-tools .share-actions {
    gap: 0.4rem !important;
  }

  #project-tools .pill-link,
  #project-tools button.pill-link {
    min-height: 2rem !important;
    padding: 0.44rem 0.58rem !important;
    font-size: 0.72rem !important;
  }

  #project-tools .github-blob,
  #project-tools .doi-strip {
    border-radius: 0.8rem !important;
    padding: 0.48rem 0.58rem !important;
    font-size: 0.72rem !important;
  }

  #project-tools .share-main-row {
    grid-template-columns: 1fr auto !important;
    gap: 0.55rem !important;
  }

  #project-tools .share-copy {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.45rem !important;
  }

  #project-tools .share-qr-wrap {
    width: 72px !important;
    height: 72px !important;
    border-radius: 0.72rem !important;
    padding: 0.28rem !important;
  }

  .section {
    width: 100% !important;
    padding: 1rem var(--mobile-pad) !important;
  }

  .section-head {
    margin-bottom: 0.65rem !important;
  }

  .section-head h2 {
    font-size: clamp(1.28rem, 7vw, 2rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 0.35rem !important;
  }

  .section-head p:not(.eyebrow) {
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
  }

  .eyebrow {
    font-size: 0.62rem !important;
    margin-bottom: 0.35rem !important;
  }

  /* Daily Pulse becomes compact rows */
  .pulse-section {
    padding-top: 0.75rem !important;
  }

  .pulse-head p {
    display: none !important;
  }

  .pulse-grid {
    display: block !important;
    border-top: 1px solid var(--mobile-line) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .pulse-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 7rem !important;
    grid-template-rows: auto auto !important;
    gap: 0.35rem 0.6rem !important;
    padding: 0.72rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    background: transparent !important;
  }

  .pulse-card:last-child {
    border-bottom: 0 !important;
  }

  .pulse-card-top {
    grid-column: 1;
    grid-row: 1;
  }

  .pulse-card-top span {
    font-size: 0.61rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.2rem !important;
  }

  .pulse-card-top strong {
    font-size: 1.34rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .pulse-card-top strong small {
    font-size: 0.68rem !important;
  }

  .pulse-card p {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    max-width: none !important;
  }

  .pulse-sparkline {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    height: 2.8rem !important;
  }

  .question-strip-section {
    padding-top: 0.55rem !important;
    padding-bottom: 0.75rem !important;
  }

  .question-strip-head {
    display: block !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.7rem !important;
  }

  .question-strip-head h2 {
    font-size: 1.02rem !important;
  }

  .question-strip-head p {
    font-size: 0.72rem !important;
    margin-top: 0.18rem !important;
  }

  .question-strip {
    display: flex !important;
    overflow-x: auto !important;
    border-top: 1px solid var(--mobile-line) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    scrollbar-width: none;
  }

  .question-strip::-webkit-scrollbar {
    display: none;
  }

  .question-link {
    flex: 0 0 10.6rem;
    min-height: 5.9rem !important;
    padding: 0.65rem !important;
    border-right: 1px solid var(--mobile-line) !important;
    border-bottom: 0 !important;
    gap: 0.35rem !important;
  }

  .question-icon {
    width: 1.45rem !important;
    height: 1.45rem !important;
    font-size: 0.78rem !important;
  }

  .question-link strong {
    font-size: 0.78rem !important;
    line-height: 1.16 !important;
  }

  .question-link small {
    font-size: 0.66rem !important;
  }

  /* Old metric readout becomes compact technical rows */
  .metric-grid {
    display: block !important;
    border-top: 1px solid var(--mobile-line) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .metric-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.25rem 0.55rem !important;
    padding: 0.58rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    background: transparent !important;
  }

  .metric-card:last-child {
    border-bottom: 0 !important;
  }

  .metric-card > span:first-child {
    font-size: 0.62rem !important;
    grid-column: 1;
  }

  .metric-card strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0 !important;
    justify-content: flex-end;
  }

  .metric-number,
  .metric-card strong {
    font-size: 1.18rem !important;
  }

  .metric-unit {
    font-size: 0.62rem !important;
  }

  .metric-card small {
    grid-column: 1;
    font-size: 0.68rem !important;
    line-height: 1.22 !important;
  }

  .dashboard-grid,
  .county-layout,
  .county-hosting-layout,
  .method-grid {
    display: block !important;
  }

  .panel {
    border-radius: 0.92rem !important;
    padding: 0.78rem !important;
    margin-bottom: 0.72rem !important;
  }

  .panel-head {
    margin-bottom: 0.45rem !important;
    gap: 0.45rem !important;
  }

  .panel-head h3 {
    font-size: 0.95rem !important;
  }

  .pill {
    padding: 0.24rem 0.44rem !important;
    font-size: 0.66rem !important;
  }

  .mix-row {
    grid-template-columns: 4.6rem minmax(0, 1fr) 2.8rem !important;
    gap: 0.45rem !important;
  }

  .mix-row label,
  .mix-row strong {
    font-size: 0.72rem !important;
  }

  .bar-track {
    height: 0.52rem !important;
  }

  .big-quote {
    font-size: 1rem !important;
  }

  .quality-grid,
  .source-console-grid,
  .county-summary-grid {
    display: block !important;
  }

  .quality-item,
  .source-console-card,
  .county-summary-card {
    border-radius: 0.78rem !important;
    padding: 0.68rem !important;
    margin-bottom: 0.55rem !important;
  }

  .truth-grid,
  .price-grid {
    display: block !important;
    border-top: 1px solid var(--mobile-line) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .truth-card,
  .price-card {
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    padding: 0.7rem 0 !important;
  }

  .truth-card:last-child,
  .price-card:last-child {
    border-bottom: 0 !important;
  }

  .truth-top {
    margin-bottom: 0.35rem !important;
  }

  .truth-card h3,
  .price-card h3 {
    font-size: 0.88rem !important;
  }

  .truth-value,
  .price-value {
    font-size: 1.28rem !important;
  }

  .truth-card p,
  .price-card p {
    font-size: 0.72rem !important;
    line-height: 1.28 !important;
  }

  .trajectory {
    min-height: 170px !important;
    overflow: hidden;
  }

  .trajectory svg {
    height: 170px !important;
  }

  .target-drift-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .target-drift-card {
    min-height: 0 !important;
    padding: 0.58rem !important;
  }

  .target-status-card {
    grid-column: 1 / -1 !important;
  }

  .target-number {
    font-size: 1.15rem !important;
  }

  .target-unit {
    font-size: 0.6rem !important;
  }

  .target-drift-card small {
    font-size: 0.64rem !important;
  }

  .ireland-boundary-map {
    min-height: 0 !important;
    padding: 0.25rem !important;
    overflow: hidden !important;
  }

  .county-map-svg {
    max-width: 100% !important;
  }

  .county-map-code {
    font-size: 13px !important;
  }

  .county-map-score {
    font-size: 9px !important;
  }

  .heatmap-legend {
    gap: 0.32rem !important;
    font-size: 0.68rem !important;
    margin-top: 0.45rem !important;
  }

  .legend-swatch {
    width: 1.1rem !important;
    height: 0.42rem !important;
  }

  .method-section {
    padding-bottom: 1.5rem !important;
  }

  .method-grid .panel {
    margin-bottom: 0.55rem !important;
  }

  .footer {
    padding: 1.25rem 0.8rem 1.8rem !important;
    font-size: 0.72rem !important;
  }
}

/* v0.11 Truth meter clarity: fixed signal labels vs readings */
.truth-scale-card {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  padding: 0.85rem !important;
  border-top: 1px solid var(--zeit-line, rgba(238,248,243,0.135)) !important;
  border-bottom: 1px solid var(--zeit-line, rgba(238,248,243,0.135)) !important;
  background: rgba(255,255,255,0.018) !important;
}

.truth-scale-card::before {
  display: none !important;
}

.truth-scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0.55rem;
}

.truth-scale-pill,
.truth-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.25rem 0.48rem;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.truth-scale-pill.on,
.truth-status-on {
  color: var(--green);
  background: rgba(73, 209, 125, 0.09);
  border-color: rgba(73, 209, 125, 0.24);
}

.truth-scale-pill.risk,
.truth-status-risk {
  color: var(--amber);
  background: rgba(247, 201, 72, 0.09);
  border-color: rgba(247, 201, 72, 0.26);
}

.truth-scale-pill.off,
.truth-status-off {
  color: var(--red);
  background: rgba(255, 107, 107, 0.09);
  border-color: rgba(255, 107, 107, 0.26);
}

.truth-status-scale {
  color: var(--muted);
}

.truth-reading {
  display: grid;
  gap: 0.18rem;
  margin: 0.55rem 0 0.45rem;
}

.truth-reading span {
  color: var(--zeit-muted, rgba(237,247,241,0.62));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 850;
}

.truth-reading strong {
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.truth-reading small {
  color: var(--zeit-muted, rgba(237,247,241,0.62));
  font-size: 0.76rem;
  line-height: 1.25;
}

.truth-logic {
  margin: 0;
}

.truth-logic strong {
  color: var(--text);
  font-weight: 850;
}

.truth-card.on::before {
  background: var(--green) !important;
}

.truth-card.risk::before {
  background: var(--amber) !important;
}

.truth-card.off::before {
  background: var(--red) !important;
}

@media (max-width: 760px) {
  .truth-scale-card {
    padding: 0.7rem 0 !important;
  }

  .truth-scale-row {
    gap: 0.35rem;
  }

  .truth-status,
  .truth-scale-pill {
    font-size: 0.62rem;
    padding: 0.2rem 0.4rem;
  }

  .truth-reading strong {
    font-size: 1.18rem;
  }
}

/* v0.12 Trajectory chart and KPI readability upgrade */
.trajectory {
  min-height: 300px !important;
  margin-bottom: 0.8rem !important;
}

.trajectory-svg-v2 {
  width: 100%;
  height: 300px;
  display: block;
  overflow: visible;
}

.trajectory-plot-bg {
  fill: rgba(255,255,255,0.008);
}

.trajectory-grid-h,
.trajectory-grid-v {
  stroke: rgba(255,255,255,0.09);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trajectory-grid-v {
  stroke: rgba(255,255,255,0.055);
}

.trajectory-tick {
  stroke: rgba(255,255,255,0.26);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trajectory-axis-text,
.trajectory-legend-text {
  fill: rgba(237,247,241,0.7);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.trajectory-legend-text {
  fill: rgba(237,247,241,0.74);
}

.trajectory-line-required,
.trajectory-line-observed {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.trajectory-line-required {
  stroke: var(--lime);
  stroke-width: 2.35;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trajectory-line-observed {
  stroke: var(--blue);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trajectory-dot {
  vector-effect: non-scaling-stroke;
}

.target-dot {
  fill: var(--lime);
  stroke: #050908;
  stroke-width: 1.4;
}

.actual-dot {
  fill: var(--blue);
  stroke: #050908;
  stroke-width: 1.6;
}

/* KPI strip below trajectory */
.trajectory-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-top: 0.75rem;
}

.trajectory-metric {
  min-height: 6.7rem;
  padding: 0.85rem 0.75rem 0.9rem;
  border-right: 1px solid rgba(255,255,255,0.13);
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  background: transparent;
}

.trajectory-metric:last-child {
  border-right: 0;
}

.trajectory-metric-label {
  display: block;
  color: rgba(237,247,241,0.72);
  font-size: 0.61rem;
  line-height: 1.12;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  font-weight: 860;
  margin-bottom: 0.45rem;
}

.trajectory-metric-value {
  color: #ffffff;
  font-size: clamp(1.38rem, 2.2vw, 1.95rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 780;
  margin-bottom: 0.35rem;
  white-space: nowrap;
}

.trajectory-metric-value small {
  margin-left: 0.18rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.58em;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 730;
}

.trajectory-metric-note {
  color: rgba(237,247,241,0.66);
  font-size: 0.73rem;
  line-height: 1.25;
  font-style: normal;
}

.trajectory-status-value {
  color: #ffffff;
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 820;
  margin-bottom: 0.35rem;
}

.trajectory-metric.off {
  box-shadow: inset 3px 0 0 rgba(255,107,107,0.95);
}

.trajectory-metric.risk {
  box-shadow: inset 3px 0 0 rgba(247,201,72,0.95);
}

.trajectory-metric.on {
  box-shadow: inset 3px 0 0 rgba(73,209,125,0.95);
}

/* Keep older target-card rules from overpowering the new trajectory strip */
.trajectory-metrics .target-drift-card,
.trajectory-metrics .target-status-card {
  all: unset;
}

@media (max-width: 1100px) {
  .trajectory-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .trajectory-metric {
    border-bottom: 1px solid rgba(255,255,255,0.13);
  }

  .trajectory-metric:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .trajectory {
    min-height: 230px !important;
  }

  .trajectory-svg-v2 {
    height: 230px;
  }

  .trajectory-axis-text,
  .trajectory-legend-text {
    font-size: 9px;
  }

  .trajectory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trajectory-metric {
    min-height: 5.6rem;
    padding: 0.68rem 0.62rem;
  }

  .trajectory-metric:nth-child(3n) {
    border-right: 1px solid rgba(255,255,255,0.13);
  }

  .trajectory-metric:nth-child(2n) {
    border-right: 0;
  }

  .trajectory-metric-label {
    font-size: 0.55rem;
  }

  .trajectory-metric-value {
    font-size: 1.22rem;
  }

  .trajectory-status-value {
    font-size: 1.45rem;
  }

  .trajectory-metric-note {
    font-size: 0.64rem;
  }
}

/* v0.13 Mobile truth meter left-padding repair */
@media (max-width: 760px) {
  #truth-meter {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }

  #truth-meter .truth-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #truth-meter .truth-card {
    position: relative;
    padding: 0.82rem 0.85rem 0.85rem 1.15rem !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--mobile-line, rgba(238,248,243,0.13)) !important;
    overflow: hidden;
  }

  #truth-meter .truth-card::before {
    left: 0 !important;
    width: 0.18rem !important;
  }

  #truth-meter .truth-scale-card {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  #truth-meter .truth-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
  }

  #truth-meter .truth-top h3 {
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
  }

  #truth-meter .truth-status {
    flex: 0 0 auto;
    max-width: 7.2rem;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }

  #truth-meter .truth-reading {
    margin-top: 0.55rem !important;
  }

  #truth-meter .truth-reading span {
    font-size: 0.58rem !important;
    letter-spacing: 0.075em !important;
  }

  #truth-meter .truth-reading strong {
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  #truth-meter .truth-reading small {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  #truth-meter .truth-logic {
    margin-top: 0.45rem !important;
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
  }
}

/* v0.14 Mobile data-quality compact audit table */
@media (max-width: 760px) {
  .data-quality-panel {
    padding: 0.78rem !important;
  }

  .data-quality-panel .panel-head {
    align-items: flex-start !important;
    gap: 0.45rem !important;
    margin-bottom: 0.45rem !important;
  }

  .data-quality-panel .panel-head h3 {
    font-size: 0.95rem !important;
    line-height: 1.05 !important;
  }

  .data-quality-panel .pill {
    max-width: 8.6rem;
    white-space: normal;
    text-align: right;
    line-height: 1.1;
  }

  .quality-intro {
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
    margin-bottom: 0.55rem !important;
    color: rgba(237,247,241,0.68) !important;
  }

  .quality-grid {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-top: 1px solid rgba(238,248,243,0.13);
    border-bottom: 1px solid rgba(238,248,243,0.13);
  }

  .quality-item {
    display: grid !important;
    grid-template-columns: 4.7rem 4.4rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.42rem !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(238,248,243,0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .quality-item:last-child {
    border-bottom: 0 !important;
  }

  .quality-item strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    color: #edf7f1 !important;
  }

  .quality-badge {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    padding: 0.18rem 0.4rem !important;
    border-radius: 999px !important;
    font-size: 0.55rem !important;
    line-height: 1 !important;
    letter-spacing: 0.065em !important;
  }

  .quality-item small {
    grid-column: 3 !important;
    grid-row: 1 !important;
    font-size: 0.68rem !important;
    line-height: 1.22 !important;
    color: rgba(237,247,241,0.66) !important;
    overflow-wrap: anywhere;
  }

  .quality-item.mapped,
  .quality-item.computed,
  .quality-item.missing {
    box-shadow: none !important;
  }
}

/* v0.15 Mobile data-quality ledger: compact ZEIT-style audit rows */
@media (max-width: 760px) {
  #today .data-quality-panel {
    padding: 0.72rem 0.78rem !important;
    margin-bottom: 0.72rem !important;
    border-radius: 0.9rem !important;
  }

  #today .data-quality-panel .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.55rem !important;
    margin-bottom: 0.38rem !important;
  }

  #today .data-quality-panel .panel-head h3 {
    font-size: 0.88rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #today .data-quality-panel .panel-head .pill {
    max-width: none !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-size: 0.55rem !important;
    padding: 0.18rem 0.4rem !important;
    line-height: 1 !important;
  }

  #today .quality-intro {
    display: none !important;
  }

  #today .quality-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin-top: 0.35rem !important;
    border-top: 1px solid rgba(238,248,243,0.13) !important;
    border-bottom: 1px solid rgba(238,248,243,0.13) !important;
  }

  #today .quality-item {
    display: grid !important;
    grid-template-columns: 4.2rem 3.9rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.45rem !important;

    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.34rem 0 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(238,248,243,0.085) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #today .quality-item:last-child {
    border-bottom: 0 !important;
  }

  #today .quality-item strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;

    color: rgba(237,247,241,0.92) !important;
    font-size: 0.67rem !important;
    line-height: 1.05 !important;
    font-weight: 780 !important;
    letter-spacing: -0.015em !important;
  }

  #today .quality-badge {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;

    margin: 0 !important;
    padding: 0.13rem 0.32rem !important;
    min-width: 0 !important;

    border-radius: 999px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
    font-weight: 850 !important;
  }

  #today .quality-item small {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;

    color: rgba(237,247,241,0.56) !important;
    font-size: 0.61rem !important;
    line-height: 1.12 !important;

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

  #today .quality-item.computed .quality-badge {
    color: var(--amber) !important;
    border-color: rgba(247,201,72,0.28) !important;
    background: rgba(247,201,72,0.08) !important;
  }

  #today .quality-item.mapped .quality-badge {
    color: var(--green) !important;
    border-color: rgba(73,209,125,0.28) !important;
    background: rgba(73,209,125,0.08) !important;
  }

  #today .quality-item.missing .quality-badge {
    color: var(--red) !important;
    border-color: rgba(255,107,107,0.28) !important;
    background: rgba(255,107,107,0.08) !important;
  }
}

/* v0.16 Daily market price layer */
.market-price-section {
  padding-top: clamp(1.2rem, 2.4vw, 2rem) !important;
}

.market-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(238,248,243,0.135);
  border-bottom: 1px solid rgba(238,248,243,0.135);
}

.market-price-card {
  min-height: 10rem;
  padding: 0.95rem;
  border-right: 1px solid rgba(238,248,243,0.135);
  background: transparent;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.market-price-card:last-child {
  border-right: 0;
}

.market-price-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.market-price-top h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.15;
}

.market-price-top span {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.market-price-card strong {
  color: #fff;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.market-price-card small {
  color: rgba(237,247,241,0.66);
  font-size: 0.76rem;
  line-height: 1.25;
}

.market-price-card p {
  margin: 0;
  color: rgba(237,247,241,0.7);
  font-size: 0.82rem;
  line-height: 1.38;
}

.market-price-card a {
  color: var(--lime);
  font-size: 0.75rem;
  text-decoration: none;
}

.market-price-card.mapped {
  box-shadow: inset 3px 0 0 rgba(73,209,125,0.95);
}

.market-price-card.risk {
  box-shadow: inset 3px 0 0 rgba(247,201,72,0.95);
}

.market-price-card.missing {
  box-shadow: inset 3px 0 0 rgba(255,107,107,0.95);
}

.market-price-card.mapped .market-price-top span {
  color: var(--green);
  background: rgba(73,209,125,0.08);
  border-color: rgba(73,209,125,0.26);
}

.market-price-card.risk .market-price-top span {
  color: var(--amber);
  background: rgba(247,201,72,0.08);
  border-color: rgba(247,201,72,0.26);
}

@media (max-width: 760px) {
  .market-price-grid {
    display: block;
  }

  .market-price-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(238,248,243,0.135);
    padding: 0.78rem 0.85rem;
  }

  .market-price-card:last-child {
    border-bottom: 0;
  }

  .market-price-card strong {
    font-size: 1.45rem;
  }

  .market-price-card p {
    font-size: 0.74rem;
    line-height: 1.3;
  }
}

/* v0.17 clearer system-price vs household-price visual language */
.market-price-section .section-head h2 {
  max-width: 46rem;
}

.market-price-card {
  gap: 0.5rem !important;
}

.market-price-top span {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.market-price-card.risk .market-price-top span,
.market-price-card.missing .market-price-top span {
  color: var(--amber) !important;
  background: rgba(247,201,72,0.08) !important;
  border-color: rgba(247,201,72,0.28) !important;
}

.market-price-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  margin: 0.15rem 0 0.2rem;
}

.market-price-value-wrap strong {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 790;
}

.market-price-value-wrap small {
  color: rgba(237,247,241,0.72);
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 720;
  white-space: nowrap;
}

.market-price-subnote {
  display: block;
  color: rgba(237,247,241,0.62) !important;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

.market-price-card p {
  max-width: 30rem;
}

#prices .section-head h2 {
  max-width: 42rem;
}

#prices .source-note-pill,
#market-prices .source-note-pill {
  display: inline-flex;
  max-width: 100%;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .market-price-section .section-head h2 {
    font-size: 1.85rem !important;
    max-width: 15rem;
  }

  .market-price-section .section-head p:not(.eyebrow) {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .market-price-card {
    padding: 0.8rem 0 !important;
  }

  .market-price-top h3 {
    font-size: 0.86rem !important;
  }

  .market-price-top span {
    font-size: 0.58rem !important;
    padding: 0.18rem 0.4rem !important;
  }

  .market-price-value-wrap {
    gap: 0.34rem;
  }

  .market-price-value-wrap strong {
    font-size: 1.65rem !important;
  }

  .market-price-value-wrap small {
    font-size: 0.72rem !important;
  }

  .market-price-card p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  .market-price-card a {
    font-size: 0.68rem !important;
  }

  #prices .section-head h2 {
    font-size: 1.85rem !important;
    max-width: 16rem;
  }
}

/* v0.18 Market-price unavailable state: honest, not broken-looking */
.market-price-card.risk,
.market-price-card.missing {
  box-shadow: inset 3px 0 0 rgba(247,201,72,0.82) !important;
}

.market-price-card.risk .market-price-value-wrap strong,
.market-price-card.missing .market-price-value-wrap strong {
  color: rgba(237,247,241,0.72) !important;
}

.market-price-card.risk .market-price-value-wrap small,
.market-price-card.missing .market-price-value-wrap small {
  color: rgba(237,247,241,0.46) !important;
}

.market-price-card.risk p,
.market-price-card.missing p {
  color: rgba(237,247,241,0.68) !important;
}

.market-price-card.risk a,
.market-price-card.missing a {
  color: rgba(184,243,106,0.78) !important;
}

/* v0.20 remove empty panel shells */
.hidden-empty-panel {
  display: none !important;
}

@media (max-width: 760px) {
  .hidden-empty-panel {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

/* v0.31 compact polish: quick links + share */

.quick-links-polished .quick-links-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0.6rem 0 0.8rem;
}

.quick-links-polished .quick-links-duo > a,
.quick-links-polished .quick-links-duo > button {
  width: 100%;
  min-width: 0;
}

.quick-links-polished .zenodo-strip-compact {
  padding: 0.55rem 0.8rem !important;
  border-radius: 14px !important;
  min-height: unset !important;
}

.quick-links-polished .zenodo-strip-compact * {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-links-polished .zenodo-strip-compact a,
.quick-links-polished .zenodo-strip-compact .doi,
.quick-links-polished .zenodo-strip-compact .doi-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.88rem;
  line-height: 1.15;
}

.share-polished .share-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 0.8rem;
  align-items: start;
  margin-top: 0.6rem;
}

.share-polished .share-actions {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.share-polished .share-actions > a,
.share-polished .share-actions > button {
  width: 100%;
}

.share-polished .share-qr-box {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.35rem;
}

.share-polished .share-qr-box img,
.share-polished .share-qr-box canvas,
.share-polished .share-qr-box svg {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  max-height: 82px !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 760px) {
  .quick-links-polished .quick-links-duo {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .quick-links-polished .zenodo-strip-compact {
    padding: 0.48rem 0.7rem !important;
  }

  .quick-links-polished .zenodo-strip-compact a,
  .quick-links-polished .zenodo-strip-compact .doi,
  .quick-links-polished .zenodo-strip-compact .doi-badge {
    font-size: 0.8rem;
  }

  .share-polished .share-layout {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 0.6rem;
  }

  .share-polished .share-qr-box {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    padding: 0.25rem;
  }

  .share-polished .share-qr-box img,
  .share-polished .share-qr-box canvas,
  .share-polished .share-qr-box svg {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
}

/* v0.32 Die Zeit refinement: quiet secondary panels */
:root {
  --zeit-hairline: rgba(237, 247, 241, 0.105);
  --zeit-hairline-strong: rgba(237, 247, 241, 0.155);
  --zeit-panel-soft: rgba(255, 255, 255, 0.012);
  --zeit-panel-hover: rgba(255, 255, 255, 0.025);
}

/* Quieter panels generally */
.hero-card,
.panel,
.status-card,
.market-price-card,
.truth-card,
.price-card,
.source-console-card,
.county-summary-card,
.quality-item {
  box-shadow: none !important;
  border-color: var(--zeit-hairline) !important;
}

/* Refine Quick Links */
.quick-links-polished {
  border-radius: 1rem !important;
  background: var(--zeit-panel-soft) !important;
  border: 1px solid var(--zeit-hairline) !important;
  padding: 0.9rem !important;
}

.quick-links-polished .eyebrow,
.quick-links-polished h3,
.quick-links-polished h4 {
  letter-spacing: 0.11em !important;
}

.quick-links-polished a,
.quick-links-polished button {
  border-radius: 999px !important;
  min-height: 2.15rem !important;
  padding: 0.48rem 0.72rem !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
  box-shadow: none !important;
  border-width: 1px !important;
}

.quick-links-polished a:hover,
.quick-links-polished button:hover {
  transform: translateY(-1px);
  background: var(--zeit-panel-hover) !important;
}

.quick-links-polished .quick-links-duo {
  margin: 0.55rem 0 0.65rem !important;
}

.quick-links-polished .github-blob,
.quick-links-polished [class*="github"] {
  border-radius: 0.8rem !important;
  border: 1px solid var(--zeit-hairline) !important;
  background: rgba(255,255,255,0.018) !important;
  padding: 0.45rem 0.6rem !important;
}

/* Compact DOI / Zenodo strip */
.quick-links-polished .zenodo-strip-compact {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 2.15rem !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 0.8rem !important;
  background: rgba(35, 168, 142, 0.12) !important;
  border: 1px solid rgba(114, 214, 255, 0.18) !important;
}

.quick-links-polished .zenodo-strip-compact::before {
  content: "DOI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: rgba(114, 214, 255, 0.15);
  color: rgba(237,247,241,0.88);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}

.quick-links-polished .zenodo-strip-compact * {
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/* Refine Share panel */
.share-polished {
  border-radius: 1rem !important;
  background: var(--zeit-panel-soft) !important;
  border: 1px solid var(--zeit-hairline) !important;
  padding: 0.9rem !important;
}

.share-polished .share-layout {
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 0.72rem !important;
  align-items: start !important;
}

.share-polished .share-actions {
  gap: 0.42rem !important;
}

.share-polished .share-actions > a,
.share-polished .share-actions > button {
  min-height: 2.05rem !important;
  border-radius: 999px !important;
  padding: 0.42rem 0.66rem !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  border: 1px solid var(--zeit-hairline-strong) !important;
  background: rgba(255,255,255,0.015) !important;
  box-shadow: none !important;
}

.share-polished .share-actions > a:hover,
.share-polished .share-actions > button:hover {
  background: var(--zeit-panel-hover) !important;
  transform: translateY(-1px);
}

.share-polished .share-qr-box {
  width: 88px !important;
  height: 88px !important;
  border-radius: 0.72rem !important;
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid var(--zeit-hairline-strong) !important;
  padding: 0.28rem !important;
  box-shadow: none !important;
}

.share-polished .share-qr-box img,
.share-polished .share-qr-box canvas,
.share-polished .share-qr-box svg {
  width: 76px !important;
  height: 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
}

/* Mobile second pass */
@media (max-width: 760px) {
  .quick-links-polished,
  .share-polished {
    padding: 0.72rem !important;
    border-radius: 0.85rem !important;
  }

  .quick-links-polished .quick-links-duo {
    gap: 0.45rem !important;
    margin: 0.45rem 0 0.55rem !important;
  }

  .quick-links-polished a,
  .quick-links-polished button,
  .share-polished .share-actions > a,
  .share-polished .share-actions > button {
    min-height: 1.95rem !important;
    padding: 0.38rem 0.52rem !important;
    font-size: 0.66rem !important;
  }

  .quick-links-polished .zenodo-strip-compact {
    min-height: 1.95rem !important;
    padding: 0.38rem 0.55rem !important;
    gap: 0.42rem !important;
  }

  .quick-links-polished .zenodo-strip-compact::before {
    height: 1.08rem;
    font-size: 0.52rem;
    padding: 0 0.34rem;
  }

  .quick-links-polished .zenodo-strip-compact * {
    font-size: 0.68rem !important;
  }

  .share-polished .share-layout {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 0.55rem !important;
  }

  .share-polished .share-qr-box {
    width: 78px !important;
    height: 78px !important;
    border-radius: 0.62rem !important;
    padding: 0.22rem !important;
  }

  .share-polished .share-qr-box img,
  .share-polished .share-qr-box canvas,
  .share-polished .share-qr-box svg {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
}

/* v0.33 final mobile market-card inset repair */
@media (max-width: 760px) {
  #market-prices .market-price-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #market-prices .market-price-grid > .market-price-card {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0.92rem 1rem 0.95rem 1.35rem !important;
    margin: 0 !important;
    border-left: 0 !important;
    position: relative !important;
  }

  #market-prices .market-price-grid > .market-price-card::before {
    left: 0.18rem !important;
    top: 0.85rem !important;
    bottom: 0.85rem !important;
    width: 0.14rem !important;
  }

  #market-prices .market-price-top,
  #market-prices .market-price-value-wrap,
  #market-prices .market-price-card p,
  #market-prices .market-price-card a,
  #market-prices .market-price-subnote {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  #market-prices .market-price-value-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.42rem !important;
    margin-top: 0.48rem !important;
    margin-bottom: 0.42rem !important;
  }

  #market-prices .market-price-value-wrap strong {
    display: inline-block !important;
    min-width: 2.7rem !important;
    font-size: 1.75rem !important;
    line-height: 0.95 !important;
  }

  #market-prices .market-price-value-wrap small {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #market-prices .market-price-card p {
    font-size: 0.72rem !important;
    line-height: 1.34 !important;
    max-width: 17rem !important;
  }

  #market-prices .market-price-card a {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }
}

/* v0.35 hard-target mobile utility panel polish */

/* Quick links: force Buy + Feedback beside each other */
#project-tools .action-card .top-row-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.55rem !important;
  width: 100% !important;
}

#project-tools .action-card .top-row-links .pill-link {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* GitHub blob tighter */
#project-tools .github-blob {
  margin-top: 0.55rem !important;
  padding: 0.48rem 0.65rem !important;
  border-radius: 0.75rem !important;
  line-height: 1 !important;
}

/* DOI strip: one compact line */
#project-tools .hero-doi-row {
  margin-top: 0.55rem !important;
}

#project-tools .doi-strip {
  display: flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  flex-wrap: nowrap !important;
  min-height: 2rem !important;
  padding: 0.42rem 0.6rem !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

#project-tools .doi-strip-label,
#project-tools .doi-strip-badge,
#project-tools .doi-strip-link {
  white-space: nowrap !important;
  line-height: 1 !important;
}

#project-tools .doi-strip-label {
  font-size: 0.58rem !important;
  letter-spacing: 0.075em !important;
}

#project-tools .doi-strip-badge {
  font-size: 0.55rem !important;
  padding: 0.18rem 0.34rem !important;
}

#project-tools .doi-strip-link {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.72rem !important;
}

/* Share panel: keep QR contained in its square */
#project-tools .share-card .share-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  gap: 0.6rem !important;
  align-items: start !important;
}

#project-tools .share-card .share-actions-wrap,
#project-tools .share-card .share-actions {
  min-width: 0 !important;
  width: 100% !important;
}

#project-tools .share-card .share-actions {
  display: grid !important;
  gap: 0.42rem !important;
}

#project-tools .share-card .share-actions .pill-link {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.95rem !important;
  padding: 0.38rem 0.52rem !important;
  font-size: 0.68rem !important;
  justify-content: center !important;
  text-align: center !important;
}

#project-tools .share-card .share-qr-wrap {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  border-radius: 0.7rem !important;
  padding: 0.24rem !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

#project-tools .share-card .qr-image {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Mobile-specific final clamp */
@media (max-width: 760px) {
  #project-tools {
    gap: 0.65rem !important;
  }

  #project-tools .hero-card {
    padding: 0.72rem !important;
  }

  #project-tools .action-card .top-row-links {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }

  #project-tools .action-card .top-row-links .pill-link {
    min-height: 1.9rem !important;
    padding: 0.34rem 0.42rem !important;
    font-size: 0.64rem !important;
  }

  #project-tools .doi-strip {
    min-height: 1.85rem !important;
    padding: 0.36rem 0.52rem !important;
    gap: 0.34rem !important;
  }

  #project-tools .doi-strip-label {
    max-width: 5.4rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #project-tools .doi-strip-link {
    font-size: 0.66rem !important;
  }

  #project-tools .share-card .share-main-row {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 0.52rem !important;
  }

  #project-tools .share-card .share-qr-wrap {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  #project-tools .share-card .qr-image {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
}

/* v0.36 Live electricity source badge */
.electricity-live-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.75rem;
}

.electricity-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.15);
  background: rgba(255,255,255,0.025);
  color: rgba(237,247,241,0.82);
  padding: 0.32rem 0.58rem;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.electricity-live-badge i {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: rgba(237,247,241,0.42);
  box-shadow: 0 0 0 0 rgba(237,247,241,0);
}

.electricity-live-badge.is-live {
  color: var(--green);
  border-color: rgba(73,209,125,0.28);
  background: rgba(73,209,125,0.075);
}

.electricity-live-badge.is-live i {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(73,209,125,0.10);
}

.electricity-live-badge.is-fallback {
  color: var(--amber);
  border-color: rgba(247,201,72,0.28);
  background: rgba(247,201,72,0.075);
}

.electricity-live-badge.is-fallback i {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(247,201,72,0.10);
}

.electricity-live-meta {
  color: rgba(237,247,241,0.56);
  font-size: 0.72rem;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .electricity-live-badge-row {
    margin-top: 0.55rem;
    gap: 0.35rem;
  }

  .electricity-live-badge {
    padding: 0.28rem 0.48rem;
    font-size: 0.64rem;
  }

  .electricity-live-meta {
    width: 100%;
    font-size: 0.62rem;
  }
}

/* v0.36 Live electricity source badge */
.electricity-live-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.75rem;
}

.electricity-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.15);
  background: rgba(255,255,255,0.025);
  color: rgba(237,247,241,0.82);
  padding: 0.32rem 0.58rem;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.electricity-live-badge i {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: rgba(237,247,241,0.42);
  box-shadow: 0 0 0 0 rgba(237,247,241,0);
}

.electricity-live-badge.is-live {
  color: var(--green);
  border-color: rgba(73,209,125,0.28);
  background: rgba(73,209,125,0.075);
}

.electricity-live-badge.is-live i {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(73,209,125,0.10);
}

.electricity-live-badge.is-fallback {
  color: var(--amber);
  border-color: rgba(247,201,72,0.28);
  background: rgba(247,201,72,0.075);
}

.electricity-live-badge.is-fallback i {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(247,201,72,0.10);
}

.electricity-live-meta {
  color: rgba(237,247,241,0.56);
  font-size: 0.72rem;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .electricity-live-badge-row {
    margin-top: 0.55rem;
    gap: 0.35rem;
  }

  .electricity-live-badge {
    padding: 0.28rem 0.48rem;
    font-size: 0.64rem;
  }

  .electricity-live-meta {
    width: 100%;
    font-size: 0.62rem;
  }
}

/* v0.37 Daily pulse history-note */
.history-note-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.65rem;
  padding: 0.36rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.26);
  background: rgba(247, 201, 72, 0.075);
  color: rgba(247, 201, 72, 0.95);
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: 820;
}

@media (max-width: 760px) {
  .history-note-pill {
    margin-top: 0.45rem;
    padding: 0.3rem 0.48rem;
    font-size: 0.62rem;
    line-height: 1.2;
  }
}

/* v0.38 visible 30-day sparkline note */
.history-note-pill {
  display: inline-flex !important;
  width: fit-content;
  max-width: 100%;
  margin: 0.42rem 0 0.7rem;
  padding: 0.3rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.28);
  background: rgba(247, 201, 72, 0.075);
  color: rgba(247, 201, 72, 0.95);
  font-size: 0.68rem;
  line-height: 1.15;
  font-weight: 820;
}

@media (max-width: 760px) {
  .history-note-pill {
    margin: 0.32rem 0 0.55rem !important;
    padding: 0.26rem 0.44rem !important;
    font-size: 0.58rem !important;
    line-height: 1.18 !important;
  }
}

/* v0.39 Transition Truth Meter flagship redesign */
#truthGrid {
  gap: 0 !important;
}

.truth-summary-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(14rem, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(237,247,241,0.14);
  border-bottom: 1px solid rgba(237,247,241,0.14);
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.truth-summary-main span,
.truth-legend-strip span,
.truth-rule-box span {
  display: block;
  color: rgba(237,247,241,0.58);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 860;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.truth-summary-main strong {
  display: block;
  margin-top: 0.28rem;
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.truth-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.truth-summary-counts span,
.truth-legend-strip b,
.truth-evidence-row span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.14);
  padding: 0.28rem 0.48rem;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 850;
}

.truth-summary-counts .on,
.truth-legend-strip .on {
  color: var(--green);
  border-color: rgba(73,209,125,0.26);
  background: rgba(73,209,125,0.07);
}

.truth-summary-counts .risk,
.truth-legend-strip .risk {
  color: var(--amber);
  border-color: rgba(247,201,72,0.28);
  background: rgba(247,201,72,0.07);
}

.truth-summary-counts .off,
.truth-legend-strip .off {
  color: var(--red);
  border-color: rgba(255,107,107,0.28);
  background: rgba(255,107,107,0.07);
}

.truth-summary-card p {
  margin: 0;
  color: rgba(237,247,241,0.74);
  font-size: 0.88rem;
  line-height: 1.35;
}

.truth-legend-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(237,247,241,0.1);
}

.truth-instrument-card {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 0.72rem;
  padding: 1rem 0.9rem 1.05rem 1rem !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(237,247,241,0.105) !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}

.truth-instrument-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 0.16rem;
  border-radius: 999px;
}

.truth-instrument-card.on::before {
  background: var(--green);
}

.truth-instrument-card.risk::before {
  background: var(--amber);
}

.truth-instrument-card.off::before {
  background: var(--red);
}

.truth-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.truth-card-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.truth-value-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0.65rem;
}

.truth-value-row strong {
  color: #fff;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.truth-value-row span {
  color: rgba(237,247,241,0.62);
  font-size: 0.74rem;
  line-height: 1.16;
  padding-bottom: 0.08rem;
}

.truth-rule-box {
  padding: 0.62rem 0.68rem;
  border: 1px solid rgba(237,247,241,0.1);
  border-radius: 0.72rem;
  background: rgba(255,255,255,0.018);
}

.truth-rule-box p {
  margin: 0.28rem 0 0;
  color: rgba(237,247,241,0.84);
  font-size: 0.78rem;
  line-height: 1.28;
}

.truth-evidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.truth-evidence.live {
  color: var(--green);
  border-color: rgba(73,209,125,0.24);
  background: rgba(73,209,125,0.07);
}

.truth-evidence.official {
  color: var(--blue);
  border-color: rgba(114,214,255,0.24);
  background: rgba(114,214,255,0.07);
}

.truth-evidence.computed,
.truth-evidence.proxy {
  color: var(--amber);
  border-color: rgba(247,201,72,0.24);
  background: rgba(247,201,72,0.07);
}

.truth-confidence {
  color: rgba(237,247,241,0.66);
  background: rgba(255,255,255,0.018);
}

.truth-why,
.truth-instrument-card .truth-logic {
  margin: 0;
  color: rgba(237,247,241,0.68);
  font-size: 0.76rem;
  line-height: 1.34;
}

.truth-instrument-card .truth-logic {
  color: rgba(237,247,241,0.58);
}

@media (max-width: 760px) {
  .truth-summary-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.78rem 0 !important;
  }

  .truth-summary-main strong {
    font-size: 2rem;
  }

  .truth-summary-counts {
    justify-content: flex-start;
  }

  .truth-summary-card p {
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .truth-legend-strip {
    padding: 0.58rem 0;
    gap: 0.32rem;
    overflow-x: auto;
  }

  .truth-legend-strip span {
    flex: 0 0 auto;
    font-size: 0.54rem;
  }

  .truth-legend-strip b {
    flex: 0 0 auto;
    padding: 0.23rem 0.38rem;
    font-size: 0.56rem;
  }

  .truth-instrument-card {
    padding: 0.82rem 0.15rem 0.86rem 0.82rem !important;
    gap: 0.58rem;
  }

  .truth-instrument-card::before {
    top: 0.82rem;
    bottom: 0.82rem;
    width: 0.14rem;
  }

  .truth-card-head h3 {
    font-size: 0.92rem;
  }

  .truth-status {
    font-size: 0.56rem !important;
    padding: 0.2rem 0.38rem !important;
  }

  .truth-value-row {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .truth-value-row strong {
    font-size: 1.78rem;
  }

  .truth-value-row span {
    font-size: 0.66rem;
  }

  .truth-rule-box {
    padding: 0.5rem 0.56rem;
    border-radius: 0.62rem;
  }

  .truth-rule-box p,
  .truth-why,
  .truth-instrument-card .truth-logic {
    font-size: 0.67rem;
    line-height: 1.28;
  }

  .truth-evidence-row span {
    font-size: 0.54rem;
    padding: 0.22rem 0.34rem;
  }
}

/* v0.40 observed-only pulse deltas */
.pulse-delta {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.22rem;
  padding: 0.18rem 0.38rem;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.12);
  background: rgba(255,255,255,0.018);
  color: rgba(237,247,241,0.58);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 780;
}

.pulse-delta.good {
  color: var(--green);
  border-color: rgba(73,209,125,0.22);
  background: rgba(73,209,125,0.06);
}

.pulse-delta.bad {
  color: var(--red);
  border-color: rgba(255,107,107,0.22);
  background: rgba(255,107,107,0.06);
}

.pulse-delta.neutral {
  color: var(--blue);
  border-color: rgba(114,214,255,0.2);
  background: rgba(114,214,255,0.055);
}

.pulse-delta.flat {
  color: rgba(237,247,241,0.5);
}

@media (max-width: 760px) {
  .pulse-delta {
    font-size: 0.52rem;
    padding: 0.16rem 0.32rem;
    margin-top: 0.18rem;
  }
}

/* v0.41 Trajectory status sidecar */
.target-drift-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.target-drift-card {
  position: relative;
  overflow: hidden;
}

.target-drift-card.risk::before,
.target-drift-card.off::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 0.16rem;
  border-radius: 999px;
}

.target-drift-card.risk::before {
  background: var(--amber);
}

.target-drift-card.off::before {
  background: var(--red);
}

.target-status-sidecar {
  margin-top: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(237,247,241,0.14);
  border-bottom: 1px solid rgba(237,247,241,0.14);
  position: relative;
}

.target-status-sidecar::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 0.95rem;
  bottom: 0.95rem;
  width: 0.18rem;
  border-radius: 999px;
}

.target-status-sidecar.on::before {
  background: var(--green);
}

.target-status-sidecar.risk::before {
  background: var(--amber);
}

.target-status-sidecar.off::before {
  background: var(--red);
}

.target-status-sidecar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.target-status-sidecar-top span,
.target-status-mini-grid span {
  color: rgba(237,247,241,0.58);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 860;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.target-status-sidecar-top strong {
  color: #fff;
  font-size: clamp(1.55rem, 2.3vw, 2.45rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.target-status-sidecar p {
  margin: 0;
  color: rgba(237,247,241,0.76);
  font-size: 0.88rem;
  line-height: 1.38;
}

.target-status-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0.85rem 0;
}

.target-status-mini-grid div {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 0.48rem;
  border-top: 1px solid rgba(237,247,241,0.08);
}

.target-status-mini-grid strong {
  color: #fff;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
}

.target-status-sidecar small {
  display: block;
  color: rgba(237,247,241,0.54);
  font-size: 0.72rem;
  line-height: 1.28;
}

@media (max-width: 900px) {
  .target-drift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .target-drift-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .target-status-sidecar {
    margin-top: 0.8rem;
    padding: 0.75rem 0 0.8rem 0.72rem;
  }

  .target-status-sidecar::before {
    left: 0;
    top: 0.82rem;
    bottom: 0.82rem;
    width: 0.14rem;
  }

  .target-status-sidecar-top {
    display: block;
    margin-bottom: 0.55rem;
  }

  .target-status-sidecar-top strong {
    display: block;
    margin-top: 0.22rem;
    font-size: 1.9rem;
  }

  .target-status-sidecar p {
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .target-status-mini-grid {
    gap: 0.42rem;
    margin: 0.65rem 0;
  }

  .target-status-mini-grid strong {
    font-size: 0.78rem;
  }

  .target-status-sidecar small {
    font-size: 0.64rem;
  }
}

/* v0.43 Electricity Now metric accent strips */
#metricGrid .metric-card {
  position: relative !important;
  overflow: hidden !important;
}

#metricGrid .metric-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(237,247,241,0.14);
  z-index: 2;
}

#metricGrid .metric-card[data-accent="renewables"]::before {
  background: linear-gradient(90deg, #49d17d, #a8f27a);
}

#metricGrid .metric-card[data-accent="wind"]::before {
  background: linear-gradient(90deg, #49c6ff, #8be2ff);
}

#metricGrid .metric-card[data-accent="solar"]::before {
  background: linear-gradient(90deg, #f2c94c, #ffe27a);
}

#metricGrid .metric-card[data-accent="residual"]::before {
  background: linear-gradient(90deg, #4b3a78, #7b62c4);
}

#metricGrid .metric-card[data-accent="imports"]::before {
  background: linear-gradient(90deg, #ff9f43, #ffc36b);
}

#metricGrid .metric-card[data-accent="demand"]::before {
  background: rgba(237,247,241,0.22);
}

#metricGrid .metric-card[data-accent="co2"]::before {
  background: linear-gradient(90deg, #9aa8a3, #d7e3dc);
}

@media (max-width: 760px) {
  #metricGrid .metric-card::before {
    height: 3px;
  }
}

/* v0.44 Slightly thicker Electricity Now accent strips */
#metricGrid .metric-card::before {
  height: 6px !important;
}

@media (max-width: 760px) {
  #metricGrid .metric-card::before {
    height: 5px !important;
  }
}

/* v0.44 Slightly thicker Electricity Now accent strips */
#metricGrid .metric-card::before {
  height: 6px !important;
}

@media (max-width: 760px) {
  #metricGrid .metric-card::before {
    height: 10px !important;
  }
}

/* v0.45 Methodological governance and interconnection polish */
.method-section {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.method-grid {
  display: grid;
  gap: 1rem;
}

.method-subgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(237,247,241,0.13);
  border-left: 1px solid rgba(237,247,241,0.08);
}

.method-card {
  position: relative;
  min-height: 13rem;
  padding: 1rem;
  border-right: 1px solid rgba(237,247,241,0.08);
  border-bottom: 1px solid rgba(237,247,241,0.1);
  background: rgba(255,255,255,0.012);
}

.method-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: rgba(237,247,241,0.14);
}

.method-card[data-accent="green"]::before { background: linear-gradient(90deg, #49d17d, #a8f27a); }
.method-card[data-accent="blue"]::before { background: linear-gradient(90deg, #49c6ff, #8be2ff); }
.method-card[data-accent="yellow"]::before { background: linear-gradient(90deg, #f2c94c, #ffe27a); }
.method-card[data-accent="purple"]::before { background: linear-gradient(90deg, #4b3a78, #7b62c4); }
.method-card[data-accent="orange"]::before { background: linear-gradient(90deg, #ff9f43, #ffc36b); }
.method-card[data-accent="grey"]::before { background: linear-gradient(90deg, #9aa8a3, #d7e3dc); }
.method-card[data-accent="red"]::before { background: linear-gradient(90deg, #ff6b6b, #ff9f9f); }

.method-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: flex-start;
}

.method-card h3,
.method-wide-card h3 {
  margin: 0;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.method-card-top span {
  flex: 0 0 auto;
  border: 1px solid rgba(237,247,241,0.13);
  border-radius: 999px;
  padding: 0.22rem 0.42rem;
  color: rgba(237,247,241,0.72);
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 820;
}

.method-card p {
  margin: 0.75rem 0;
  color: rgba(237,247,241,0.74);
  font-size: 0.78rem;
  line-height: 1.35;
}

.method-card dl {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.method-card dl div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.5rem;
  padding-top: 0.32rem;
  border-top: 1px solid rgba(237,247,241,0.07);
}

.method-card dt {
  color: rgba(237,247,241,0.45);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-card dd {
  margin: 0;
  color: rgba(237,247,241,0.76);
  font-size: 0.68rem;
  line-height: 1.25;
}

.method-card small {
  display: block;
  margin-top: 0.75rem;
  color: rgba(237,247,241,0.48);
  font-size: 0.66rem;
  line-height: 1.28;
}

.method-wide-card {
  padding: 1rem;
  border: 1px solid rgba(237,247,241,0.1);
  background: rgba(255,255,255,0.012);
}

.method-wide-card ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.method-wide-card li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.75rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(237,247,241,0.07);
}

.method-wide-card strong {
  color: rgba(237,247,241,0.9);
  font-size: 0.72rem;
  text-transform: capitalize;
}

.method-wide-card span {
  color: rgba(237,247,241,0.66);
  font-size: 0.72rem;
  line-height: 1.32;
}

@media (max-width: 1100px) {
  .method-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .method-subgrid {
    grid-template-columns: 1fr;
  }

  .method-card {
    min-height: auto;
    padding: 0.85rem;
  }

  .method-card dl div,
  .method-wide-card li {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .method-card p,
  .method-card dd,
  .method-card small,
  .method-wide-card strong,
  .method-wide-card span {
    font-size: 0.66rem;
  }
}

/* v0.46 Question strip anchor and mobile slider affordance */
#target,
#today,
#truth-meter,
#prices,
#counties,
#method {
  scroll-margin-top: 5rem;
}

.question-strip-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.question-strip-cue {
  display: none;
  flex: 0 0 auto;
  color: rgba(237,247,241,0.58);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.question-strip {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.question-link {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.target-section:target .panel.wide {
  outline: 1px solid rgba(114,214,255,0.42);
  outline-offset: 0.35rem;
}

@media (max-width: 760px) {
  .question-strip-section {
    position: relative;
  }

  .question-strip-head {
    align-items: start;
    margin-bottom: 0.5rem;
  }

  .question-strip-head h2 {
    margin-bottom: 0.2rem;
  }

  .question-strip-cue {
    display: inline-flex;
    padding: 0.24rem 0.48rem;
    border: 1px solid rgba(237,247,241,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.018);
    white-space: nowrap;
  }

  .question-strip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.15rem 1.35rem 0.65rem 0;
    border-top: 1px solid rgba(237,247,241,0.1);
    border-bottom: 1px solid rgba(237,247,241,0.1);
  }

  .question-strip::after {
    content: "";
    flex: 0 0 0.5rem;
  }

  .question-link {
    flex: 0 0 78%;
    min-width: 14.5rem;
    border: 1px solid rgba(237,247,241,0.12);
    border-radius: 0.85rem;
    padding: 0.85rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  }

  .question-link:focus,
  .question-link:hover {
    border-color: rgba(114,214,255,0.45);
  }

  .question-strip-section::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.65rem;
    width: 2.3rem;
    height: 6.6rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3,18,14,0), rgba(3,18,14,0.96));
  }
}

/* v0.47 Reliable section anchors for question strip */
.scroll-anchor {
  position: relative;
  top: -5.5rem;
  height: 0;
  width: 0;
  pointer-events: none;
}

#target-jump:target + .target-section .panel.wide {
  outline: 1px solid rgba(114,214,255,0.42);
  outline-offset: 0.35rem;
}

/* v0.47 Reliable section anchors for question strip */
.scroll-anchor {
  position: relative;
  top: -5.5rem;
  height: 0;
  width: 0;
  pointer-events: none;
}

#target-jump:target + .target-section .panel.wide {
  outline: 1px solid rgba(114,214,255,0.42);
  outline-offset: 0.35rem;
}

/* v0.48 RES-E trajectory explains the Renewable electricity Truth Meter verdict */
.target-explainer-panel {
  position: relative;
}

.target-explains-pill {
  color: var(--blue) !important;
  border-color: rgba(114,214,255,0.26) !important;
  background: rgba(114,214,255,0.06) !important;
}

.target-explainer-note {
  max-width: 58rem;
  margin: 0.15rem 0 0.75rem;
  color: rgba(237,247,241,0.62);
  font-size: 0.78rem;
  line-height: 1.35;
}

.target-drift-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.target-verdict-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1fr) minmax(12rem, 0.55fr);
  gap: 1rem;
  align-items: center;
  position: relative;
  padding: 0.95rem 0 0.95rem 1rem;
  border-top: 1px solid rgba(237,247,241,0.13);
  border-bottom: 1px solid rgba(237,247,241,0.13);
}

.target-verdict-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 0.2rem;
  border-radius: 999px;
}

.target-verdict-card.on::before {
  background: var(--green);
}

.target-verdict-card.risk::before {
  background: var(--amber);
}

.target-verdict-card.off::before {
  background: var(--red);
}

.target-verdict-card span {
  display: block;
  color: rgba(237,247,241,0.58);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 860;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.target-verdict-card strong {
  color: #fff;
}

.target-verdict-card > div > strong {
  display: block;
  margin-top: 0.28rem;
  font-size: clamp(1.65rem, 2.6vw, 2.8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.target-verdict-card p {
  margin: 0;
  color: rgba(237,247,241,0.78);
  font-size: 0.86rem;
  line-height: 1.38;
}

.target-verdict-card small {
  color: rgba(237,247,241,0.52);
  font-size: 0.72rem;
  line-height: 1.28;
}

.truth-explainer-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.55rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(114,214,255,0.24);
  background: rgba(114,214,255,0.055);
  color: var(--blue);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 820;
  text-decoration: none;
}

.truth-explainer-link:hover,
.truth-explainer-link:focus {
  border-color: rgba(114,214,255,0.48);
  background: rgba(114,214,255,0.1);
}

#residualSignal + .target-status-sidecar,
.target-status-sidecar {
  display: none !important;
}

@media (max-width: 900px) {
  .target-drift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .target-verdict-card {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

@media (max-width: 760px) {
  .target-explainer-note {
    margin: 0.05rem 0 0.55rem;
    font-size: 0.66rem;
    line-height: 1.3;
  }

  .target-verdict-card {
    padding: 0.8rem 0 0.85rem 0.85rem;
  }

  .target-verdict-card::before {
    top: 0.8rem;
    bottom: 0.8rem;
    width: 0.15rem;
  }

  .target-verdict-card > div > strong {
    font-size: 2rem;
  }

  .target-verdict-card p,
  .target-verdict-card small {
    font-size: 0.66rem;
    line-height: 1.3;
  }

  .target-explains-pill {
    width: fit-content;
    margin-top: 0.35rem;
  }
}

/* v0.49 Full-width residual explainer and consistent signal colours */
.target-section .dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.05rem !important;
}

.target-section .dashboard-grid > .panel,
.target-section .dashboard-grid > .panel.wide {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.residual-explainer-panel {
  display: grid;
  gap: 0.85rem;
  position: relative;
}

.residual-explainer-panel .panel-head {
  align-items: start;
}

.panel-subtitle {
  margin: 0.24rem 0 0;
  color: rgba(237,247,241,0.58);
  font-size: 0.72rem;
  line-height: 1.25;
}

.panel-signal-pill {
  border-radius: 999px !important;
  padding: 0.42rem 0.68rem !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap;
}

.panel-signal-pill.signal-on {
  color: var(--green) !important;
  border-color: rgba(73,209,125,0.30) !important;
  background: rgba(73,209,125,0.08) !important;
}

.panel-signal-pill.signal-risk {
  color: var(--amber) !important;
  border-color: rgba(247,201,72,0.32) !important;
  background: rgba(247,201,72,0.08) !important;
}

.panel-signal-pill.signal-off {
  color: var(--red) !important;
  border-color: rgba(255,107,107,0.32) !important;
  background: rgba(255,107,107,0.08) !important;
}

.target-signal-pill {
  margin-left: auto;
}

.residual-explainer-panel #residualNarrative {
  max-width: 70rem;
  color: rgba(237,247,241,0.76);
  font-size: 0.92rem;
  line-height: 1.42;
}

.residual-explainer-panel .gauge {
  max-width: 42rem;
}

@media (max-width: 760px) {
  .target-section .dashboard-grid {
    gap: 0.8rem !important;
  }

  .panel-signal-pill {
    padding: 0.32rem 0.52rem !important;
    font-size: 0.58rem !important;
  }

  .target-signal-pill {
    margin-left: 0;
    margin-top: 0.35rem;
    width: fit-content;
  }

  .residual-explainer-panel .panel-head {
    display: grid;
    gap: 0.45rem;
  }

  .panel-subtitle {
    font-size: 0.62rem;
  }

  .residual-explainer-panel #residualNarrative {
    font-size: 0.7rem;
    line-height: 1.33;
  }
}

/* v0.50 Tighten Truth Meter to trajectory rhythm */
#truth-meter {
  margin-bottom: clamp(1.1rem, 2.4vw, 2rem) !important;
}

#target,
.target-section {
  margin-top: clamp(1rem, 2.2vw, 1.8rem) !important;
}

.target-section .panel-head {
  gap: 0.65rem;
}

.target-section .target-signal-pill + .target-signal-pill {
  display: none !important;
}

/* v0.51 Tight Truth Meter → RES-E trajectory spacing */
#truth-meter.truth-section,
#truth-meter {
  margin-bottom: 0.35rem !important;
  padding-bottom: 0 !important;
}

#truthGrid,
.truth-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#truthGrid > .truth-card:last-child,
.truth-grid > .truth-card:last-child {
  margin-bottom: 0 !important;
}

#target-jump {
  top: -4.75rem !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#target.target-section,
.target-section {
  margin-top: 0.45rem !important;
  padding-top: 0 !important;
}

#target.target-section .dashboard-grid,
.target-section .dashboard-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#target.target-section .panel,
.target-section .panel {
  margin-top: 0 !important;
}

/* If the anchor sits directly between truth meter and target, collapse that run. */
#truth-meter + #target-jump + #target,
#truth-meter + .scroll-anchor + .target-section {
  margin-top: 0.35rem !important;
}

@media (max-width: 760px) {
  #truth-meter.truth-section,
  #truth-meter {
    margin-bottom: 0.2rem !important;
  }

  #target.target-section,
  .target-section {
    margin-top: 0.25rem !important;
  }
}

/* v0.52 Taller trajectory chart without stretching */
.trajectory {
  min-height: 25rem !important;
  display: flex !important;
  align-items: center !important;
}

.trajectory-svg {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 980 / 420;
  display: block;
}

.trajectory .grid-line.vertical {
  opacity: 0.38;
}

.trajectory .y-axis-label {
  fill: rgba(237,247,241,0.64);
}

.trajectory .chart-key {
  fill: rgba(237,247,241,0.72);
  font-weight: 760;
}

@media (max-width: 760px) {
  .trajectory {
    min-height: 18rem !important;
  }

  .trajectory-svg {
    aspect-ratio: 980 / 460;
  }
}

/* v0.53 Fix miniature trajectory chart: fill available panel, keep SVG proportions */
.target-explainer-panel .trajectory,
#trajectoryChart.trajectory {
  width: 100% !important;
  min-height: 29rem !important;
  height: 29rem !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  overflow: visible !important;
}

.target-explainer-panel .trajectory svg,
#trajectoryChart svg,
.trajectory-svg-large {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
}

.target-explainer-panel .trajectory .line-target,
#trajectoryChart .line-target {
  vector-effect: non-scaling-stroke;
}

.target-explainer-panel .trajectory .line-actual,
#trajectoryChart .line-actual {
  vector-effect: non-scaling-stroke;
}

.target-explainer-panel .trajectory .grid-line,
#trajectoryChart .grid-line {
  vector-effect: non-scaling-stroke;
}

@media (max-width: 760px) {
  .target-explainer-panel .trajectory,
  #trajectoryChart.trajectory {
    min-height: 20rem !important;
    height: 20rem !important;
  }
}

/* v0.54 RES-E trendline and escalating catch-up burden note */
#trajectoryChart .line-trend,
.target-explainer-panel .line-trend {
  stroke: rgba(237,247,241,0.58);
  stroke-width: 1.15;
  stroke-dasharray: 4 5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

#trajectoryChart .trendline-label,
.target-explainer-panel .trendline-label {
  fill: rgba(237,247,241,0.72);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#trajectoryChart .trendline-endpoint,
.target-explainer-panel .trendline-endpoint {
  fill: rgba(247,201,72,0.88);
  font-weight: 780;
}

.systems-note {
  margin: 0.55rem 0 0.9rem;
  padding: 0.62rem 0.78rem;
  border-left: 3px solid rgba(247,201,72,0.88);
  background: rgba(247,201,72,0.045);
  color: rgba(237,247,241,0.78);
  font-size: 0.9rem;
  line-height: 1.38;
}

.systems-note strong {
  color: rgba(247,201,72,0.96);
}

@media (max-width: 760px) {
  #trajectoryChart .trendline-label,
  .target-explainer-panel .trendline-label {
    font-size: 10px;
  }

  .systems-note {
    margin: 0.42rem 0 0.7rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.68rem;
    line-height: 1.32;
  }
}

/* v0.54 RES-E trendline and escalating catch-up burden note */
#trajectoryChart .line-trend,
.target-explainer-panel .line-trend {
  stroke: rgba(237,247,241,0.58);
  stroke-width: 1.15;
  stroke-dasharray: 4 5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

#trajectoryChart .trendline-label,
.target-explainer-panel .trendline-label {
  fill: rgba(237,247,241,0.72);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#trajectoryChart .trendline-endpoint,
.target-explainer-panel .trendline-endpoint {
  fill: rgba(247,201,72,0.88);
  font-weight: 780;
}

.systems-note {
  margin: 0.55rem 0 0.9rem;
  padding: 0.62rem 0.78rem;
  border-left: 3px solid rgba(247,201,72,0.88);
  background: rgba(247,201,72,0.045);
  color: rgba(237,247,241,0.78);
  font-size: 0.9rem;
  line-height: 1.38;
}

.systems-note strong {
  color: rgba(247,201,72,0.96);
}

@media (max-width: 760px) {
  #trajectoryChart .trendline-label,
  .target-explainer-panel .trendline-label {
    font-size: 10px;
  }

  .systems-note {
    margin: 0.42rem 0 0.7rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.68rem;
    line-height: 1.32;
  }
}

/* v0.55 Mobile-readable trajectory axis and chart labels */
#trajectoryChart .trajectory-mobile-svg .axis-text {
  font-size: 21px !important;
  font-weight: 760 !important;
  fill: rgba(237,247,241,0.82) !important;
}

#trajectoryChart .trajectory-mobile-svg .y-axis-label,
#trajectoryChart .trajectory-mobile-svg .x-axis-label {
  font-size: 22px !important;
  font-weight: 820 !important;
}

#trajectoryChart .trajectory-mobile-svg .trendline-label {
  font-size: 20px !important;
  font-weight: 760 !important;
  fill: rgba(237,247,241,0.84) !important;
}

#trajectoryChart .trajectory-mobile-svg .trendline-endpoint {
  fill: rgba(247,201,72,0.96) !important;
}

#trajectoryChart .trajectory-mobile-svg .chart-key {
  font-size: 18px !important;
  font-weight: 760 !important;
  fill: rgba(237,247,241,0.72) !important;
}

#trajectoryChart .trajectory-mobile-svg .line-target,
#trajectoryChart .trajectory-mobile-svg .line-actual {
  stroke-width: 3.2 !important;
}

#trajectoryChart .trajectory-mobile-svg .line-trend {
  stroke-width: 2.2 !important;
}

@media (max-width: 760px) {
  .target-explainer-panel .trajectory,
  #trajectoryChart.trajectory {
    min-height: 23rem !important;
    height: 23rem !important;
  }
}

/* v0.56 Mobile trajectory solution: scrollable plot, not squeezed SVG */
#trajectoryChart.trajectory {
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
}

.trajectory-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(237,247,241,0.06);
  border-bottom: 1px solid rgba(237,247,241,0.06);
  scrollbar-color: rgba(114,214,255,0.38) rgba(255,255,255,0.04);
}

.trajectory-scroll-wrap::-webkit-scrollbar {
  height: 0.45rem;
}

.trajectory-scroll-wrap::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.trajectory-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(114,214,255,0.35);
  border-radius: 999px;
}

.trajectory-svg-large {
  display: block !important;
  height: auto !important;
  max-width: none !important;
}

.trajectory-mobile-readout {
  display: none;
}

@media (min-width: 761px) {
  .trajectory-scroll-wrap {
    overflow: visible;
    border-top: 0;
    border-bottom: 0;
  }

  .trajectory-svg-large {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  #trajectoryChart.trajectory {
    margin-top: 0.65rem;
  }

  .trajectory-scroll-wrap {
    position: relative;
    margin: 0.4rem -0.15rem 0;
    padding-bottom: 0.35rem;
  }

  .trajectory-mobile-scroll-svg {
    width: 980px !important;
    min-width: 980px !important;
    height: 520px !important;
  }

  #trajectoryChart .trajectory-mobile-scroll-svg .axis-text {
    font-size: 20px !important;
    font-weight: 820 !important;
    fill: rgba(237,247,241,0.82) !important;
  }

  #trajectoryChart .trajectory-mobile-scroll-svg .y-axis-label,
  #trajectoryChart .trajectory-mobile-scroll-svg .x-axis-label {
    font-size: 22px !important;
    font-weight: 860 !important;
  }

  #trajectoryChart .trajectory-mobile-scroll-svg .chart-key {
    font-size: 18px !important;
    font-weight: 760 !important;
    fill: rgba(237,247,241,0.76) !important;
  }

  #trajectoryChart .trajectory-mobile-scroll-svg .line-target,
  #trajectoryChart .trajectory-mobile-scroll-svg .line-actual {
    stroke-width: 3.2 !important;
  }

  #trajectoryChart .trajectory-mobile-scroll-svg .line-trend {
    stroke-width: 2.2 !important;
  }

  .trajectory-mobile-readout {
    display: grid;
    gap: 0.22rem;
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.65rem;
    border-left: 3px solid rgba(114,214,255,0.55);
    background: rgba(114,214,255,0.045);
  }

  .trajectory-mobile-readout span {
    color: rgba(237,247,241,0.86);
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 750;
  }

  .trajectory-mobile-readout strong {
    color: rgba(247,201,72,0.95);
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .trajectory-mobile-readout em {
    color: rgba(237,247,241,0.52);
    font-size: 0.6rem;
    line-height: 1.2;
    font-style: normal;
  }
}

/* v0.58 Interpreted system price cards */
.market-price-card.interpreted {
  position: relative;
  padding-top: 1rem;
}

.market-price-card.interpreted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 5px;
  background: rgba(237,247,241,0.14);
}

.market-price-card.interpreted.good::before {
  background: var(--green);
}

.market-price-card.interpreted.watch::before {
  background: var(--blue);
}

.market-price-card.interpreted.risk::before {
  background: var(--amber);
}

.market-price-card.interpreted.off::before,
.market-price-card.interpreted.bad::before {
  background: var(--red);
}

.market-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: flex-start;
}

.market-card-head h3 {
  margin: 0;
}

.market-signal {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.26rem 0.5rem;
  border: 1px solid rgba(237,247,241,0.16);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.market-signal.good {
  color: var(--green);
  border-color: rgba(73,209,125,0.28);
  background: rgba(73,209,125,0.07);
}

.market-signal.watch {
  color: var(--blue);
  border-color: rgba(114,214,255,0.28);
  background: rgba(114,214,255,0.07);
}

.market-signal.risk {
  color: var(--amber);
  border-color: rgba(247,201,72,0.32);
  background: rgba(247,201,72,0.08);
}

.market-signal.off,
.market-signal.bad {
  color: var(--red);
  border-color: rgba(255,107,107,0.32);
  background: rgba(255,107,107,0.08);
}

.market-signal.missing {
  color: rgba(237,247,241,0.58);
  background: rgba(255,255,255,0.035);
}

.market-value-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: baseline;
  margin-top: 0.75rem;
}

.market-value-line strong {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.market-equivalent {
  color: rgba(237,247,241,0.62);
  font-size: 0.78rem;
  font-weight: 780;
}

.market-trend {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.55rem;
  padding: 0.28rem 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.13);
  color: rgba(237,247,241,0.66);
  background: rgba(255,255,255,0.018);
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 820;
}

.market-trend.good {
  color: var(--green);
  border-color: rgba(73,209,125,0.24);
  background: rgba(73,209,125,0.06);
}

.market-trend.bad {
  color: var(--red);
  border-color: rgba(255,107,107,0.24);
  background: rgba(255,107,107,0.06);
}

.market-meaning {
  margin: 0.75rem 0 0;
  color: rgba(237,247,241,0.82);
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 650;
}

.market-detail {
  margin-top: 0.55rem;
  color: rgba(237,247,241,0.62);
  font-size: 0.78rem;
  line-height: 1.34;
}

@media (max-width: 760px) {
  .market-value-line strong {
    font-size: 1.9rem;
  }

  .market-meaning,
  .market-detail {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .market-trend,
  .market-signal {
    font-size: 0.56rem;
  }
}

/* v0.62 Electricity Now coverage note */
.electricity-coverage-note {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid rgba(114,214,255,0.68);
  background: rgba(114,214,255,0.045);
  color: rgba(237,247,241,0.72);
  font-size: 0.78rem;
  line-height: 1.38;
}

.electricity-coverage-note strong {
  color: rgba(114,214,255,0.95);
}

.electricity-coverage-note b {
  color: rgba(237,247,241,0.94);
}

@media (max-width: 760px) {
  .electricity-coverage-note {
    font-size: 0.66rem;
    line-height: 1.32;
    padding: 0.48rem 0.6rem;
  }
}

/* v0.64 Honest source badge states */
.workbook-source {
  color: rgba(247,201,72,0.96) !important;
  border-color: rgba(247,201,72,0.32) !important;
  background: rgba(247,201,72,0.08) !important;
}

.live-source {
  color: var(--green) !important;
  border-color: rgba(73,209,125,0.28) !important;
  background: rgba(73,209,125,0.08) !important;
}

/* v0.65 Source model and freshness gates */
.source-freshness-note {
  margin: 0.5rem 0 0.7rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid rgba(247,201,72,0.84);
  background: rgba(247,201,72,0.045);
  color: rgba(237,247,241,0.74);
  font-size: 0.76rem;
  line-height: 1.34;
}

.source-freshness-note strong {
  color: rgba(247,201,72,0.96);
}

.workbook-source {
  color: rgba(247,201,72,0.96) !important;
  border-color: rgba(247,201,72,0.32) !important;
  background: rgba(247,201,72,0.08) !important;
}

.live-source {
  color: var(--green) !important;
  border-color: rgba(73,209,125,0.28) !important;
  background: rgba(73,209,125,0.08) !important;
}

@media (max-width: 760px) {
  .source-freshness-note {
    font-size: 0.64rem;
    line-height: 1.3;
    padding: 0.46rem 0.58rem;
  }
}

/* v0.73 Interconnection direction arrow badge */
.flow-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.flow-indicator-arrow {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.035);
  flex: 0 0 auto;
}

.flow-indicator.export {
  color: #4ade80;
}

.flow-indicator.import {
  color: #f87171;
}

.flow-indicator.balanced {
  color: #cbd5e1;
}

.flow-indicator.unknown {
  color: #94a3b8;
}

.metric-card small .flow-indicator {
  margin-top: 0.08rem;
}

/* v0.74 Interconnection arrow badge rendered as DOM */
.flow-note {
  display: block;
}

.flow-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.flow-indicator-arrow {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.035);
  flex: 0 0 auto;
}

.flow-indicator.export {
  color: #4ade80;
}

.flow-indicator.import {
  color: #f87171;
}

.flow-indicator.balanced {
  color: #cbd5e1;
}

.flow-indicator.unknown {
  color: #94a3b8;
}

/* v0.75 Normalise interconnection badge typography and colour */
.metric-card small.flow-note,
.metric-card .flow-note {
  display: block !important;
  margin-top: 0.42rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.metric-card small.flow-note .flow-indicator,
.metric-card .flow-note .flow-indicator,
.metric-card .flow-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.metric-card small.flow-note .flow-indicator-arrow,
.metric-card .flow-note .flow-indicator-arrow,
.metric-card .flow-indicator-arrow {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  border: 1px solid currentColor !important;
  background: rgba(255,255,255,0.035) !important;
  color: inherit !important;
}

.metric-card .flow-indicator.export,
.metric-card small.flow-note .flow-indicator.export {
  color: #4ade80 !important;
}

.metric-card .flow-indicator.import,
.metric-card small.flow-note .flow-indicator.import {
  color: #f87171 !important;
}

.metric-card .flow-indicator.balanced,
.metric-card small.flow-note .flow-indicator.balanced {
  color: #cbd5e1 !important;
}

.metric-card .flow-indicator.unknown,
.metric-card small.flow-note .flow-indicator.unknown {
  color: #94a3b8 !important;
}

.metric-card .flow-indicator span:last-child {
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* v0.75 Normalise interconnection badge typography and colour */
.metric-card small.flow-note,
.metric-card .flow-note {
  display: block !important;
  margin-top: 0.42rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.metric-card small.flow-note .flow-indicator,
.metric-card .flow-note .flow-indicator,
.metric-card .flow-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.metric-card small.flow-note .flow-indicator-arrow,
.metric-card .flow-note .flow-indicator-arrow,
.metric-card .flow-indicator-arrow {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  border: 1px solid currentColor !important;
  background: rgba(255,255,255,0.035) !important;
  color: inherit !important;
}

.metric-card .flow-indicator.export,
.metric-card small.flow-note .flow-indicator.export {
  color: #4ade80 !important;
}

.metric-card .flow-indicator.import,
.metric-card small.flow-note .flow-indicator.import {
  color: #f87171 !important;
}

.metric-card .flow-indicator.balanced,
.metric-card small.flow-note .flow-indicator.balanced {
  color: #cbd5e1 !important;
}

.metric-card .flow-indicator.unknown,
.metric-card small.flow-note .flow-indicator.unknown {
  color: #94a3b8 !important;
}

.metric-card .flow-indicator span:last-child {
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* v0.76 Renewable parent/subcomponent hierarchy */
.metric-card.renewable-parent-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(73,209,125,0.075), rgba(73,209,125,0.018)),
    rgba(255,255,255,0.012);
}

.metric-card.renewable-parent-card::after {
  content: "total";
  position: absolute;
  top: 0.62rem;
  right: 0.7rem;
  padding: 0.15rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(73,209,125,0.26);
  color: rgba(73,209,125,0.92);
  background: rgba(73,209,125,0.055);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-card.renewable-child-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006)),
    rgba(255,255,255,0.006);
}

.metric-card.renewable-child-card::after {
  content: "component";
  position: absolute;
  top: 0.62rem;
  right: 0.7rem;
  padding: 0.15rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(237,247,241,0.14);
  color: rgba(237,247,241,0.56);
  background: rgba(255,255,255,0.025);
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-card.wind-child-card {
  box-shadow: inset 0 3px 0 rgba(114,214,255,0.95);
}

.metric-card.solar-child-card {
  box-shadow: inset 0 3px 0 rgba(247,201,72,0.95);
}

.renewable-components {
  margin-top: 0.68rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(237,247,241,0.09);
}

.renewable-components-label {
  margin-bottom: 0.34rem;
  color: rgba(237,247,241,0.62);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.renewable-component-bar {
  display: flex;
  width: 100%;
  height: 0.48rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.renewable-component-bar .wind-part {
  display: block;
  background: rgba(114,214,255,0.95);
}

.renewable-component-bar .solar-part {
  display: block;
  background: rgba(247,201,72,0.95);
}

.renewable-component-values {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.34rem;
  color: rgba(237,247,241,0.74);
  font-size: 0.68rem;
  line-height: 1.15;
}

.renewable-component-values b {
  color: rgba(237,247,241,0.9);
  font-weight: 850;
}

@media (max-width: 760px) {
  .metric-card.renewable-parent-card::after,
  .metric-card.renewable-child-card::after {
    top: 0.48rem;
    right: 0.5rem;
    font-size: 0.48rem;
  }

  .renewable-components {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
  }

  .renewable-components-label {
    font-size: 0.54rem;
  }

  .renewable-component-values {
    font-size: 0.6rem;
  }
}

/* v0.77 Mobile: remove decorative metric strips so only real percentage bars remain */
@media (max-width: 760px) {
  /*
    On mobile, full-width accent strips look like data bars.
    Hide decorative card accents in the electricity pulse.
  */
  #metricGrid .metric-card::before,
  #metricGrid .metric-card::after {
    display: none !important;
    content: none !important;
  }

  #metricGrid .metric-card,
  #metricGrid .metric-card[data-accent],
  #metricGrid .metric-card.renewable-parent-card,
  #metricGrid .metric-card.renewable-child-card,
  #metricGrid .metric-card.wind-child-card,
  #metricGrid .metric-card.solar-child-card {
    box-shadow: none !important;
    border-top: 1px solid rgba(237,247,241,0.10) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006)),
      rgba(255,255,255,0.006) !important;
  }

  /*
    Keep only genuine quantitative bars.
    This is the real Wind + Solar composition bar inside Renewable cover.
  */
  #metricGrid .renewable-component-bar {
    display: flex !important;
    height: 0.5rem !important;
    margin-top: 0.28rem !important;
    background: rgba(255,255,255,0.10) !important;
  }

  #metricGrid .renewable-component-bar .wind-part,
  #metricGrid .renewable-component-bar .solar-part {
    display: block !important;
  }

  /*
    Replace lost visual hierarchy with small text chips, not bars.
  */
  #metricGrid .renewable-parent-card {
    border-left: 3px solid rgba(73,209,125,0.85) !important;
  }

  #metricGrid .wind-child-card {
    border-left: 3px solid rgba(114,214,255,0.85) !important;
  }

  #metricGrid .solar-child-card {
    border-left: 3px solid rgba(247,201,72,0.85) !important;
  }

  /*
    Keep the interconnection badge as an icon/text signal, not a bar.
  */
  #metricGrid .flow-indicator {
    font-size: 0.72rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /*
    The lower demand-cover card contains real percentage bars. Keep them.
  */
  .fuel-mix-row .bar,
  .fuel-mix-row .fill,
  .mix-bar,
  .mix-fill,
  .demand-cover-bar,
  .demand-cover-fill {
    display: block;
  }
}

/* v0.79 Simplify renewable card and colour uncovered demand consistently */
.renewable-components {
  display: none !important;
}

/* Lower demand-cover card: Uncovered / residual should be purple, not grey */
.fuel-mix-row .fill.other,
.fuel-mix-row .mix-fill.other,
.fuel-mix-row .bar-fill.other,
.mix-row .fill.other,
.mix-row .mix-fill.other,
.mix-row .bar-fill.other,
.fuel-mix-row[data-class="other"] .fill,
.fuel-mix-row[data-class="other"] .mix-fill,
.fuel-mix-row[data-class="other"] .bar-fill,
.mix-row[data-class="other"] .fill,
.mix-row[data-class="other"] .mix-fill,
.mix-row[data-class="other"] .bar-fill {
  background: linear-gradient(90deg, #8e6bff 0%, #b38cff 100%) !important;
}

/* Fallback for the actual class names used in the demand-cover renderer */
.fuel-mix .other,
.fuel-mix-list .other,
.fuel-mix-bars .other,
.demand-cover .other {
  background-color: #8e6bff !important;
}

/* v0.79b Residual / uncovered demand-cover bar */
.fuel-mix-row .fill.residual,
.fuel-mix-row .mix-fill.residual,
.fuel-mix-row .bar-fill.residual,
.mix-row .fill.residual,
.mix-row .mix-fill.residual,
.mix-row .bar-fill.residual,
.fuel-mix .residual,
.fuel-mix-list .residual,
.fuel-mix-bars .residual,
.demand-cover .residual {
  background: linear-gradient(90deg, #8e6bff 0%, #b38cff 100%) !important;
}

/* v0.80 Demand-cover card: semantic bar colours
   Wind = blue, Solar = yellow, Uncovered = purple
*/

/* Wind */
.fuel-mix-row[data-class="wind"] .fill,
.fuel-mix-row[data-class="wind"] .mix-fill,
.fuel-mix-row[data-class="wind"] .bar-fill,
.mix-row[data-class="wind"] .fill,
.mix-row[data-class="wind"] .mix-fill,
.mix-row[data-class="wind"] .bar-fill,
.fuel-mix-row.wind .fill,
.fuel-mix-row.wind .mix-fill,
.fuel-mix-row.wind .bar-fill,
.mix-row.wind .fill,
.mix-row.wind .mix-fill,
.mix-row.wind .bar-fill {
  background: linear-gradient(90deg, #59d4ff 0%, #8be8ff 100%) !important;
}

/* Solar */
.fuel-mix-row[data-class="solar"] .fill,
.fuel-mix-row[data-class="solar"] .mix-fill,
.fuel-mix-row[data-class="solar"] .bar-fill,
.mix-row[data-class="solar"] .fill,
.mix-row[data-class="solar"] .mix-fill,
.mix-row[data-class="solar"] .bar-fill,
.fuel-mix-row.solar .fill,
.fuel-mix-row.solar .mix-fill,
.fuel-mix-row.solar .bar-fill,
.mix-row.solar .fill,
.mix-row.solar .mix-fill,
.mix-row.solar .bar-fill {
  background: linear-gradient(90deg, #ffd24d 0%, #ffe680 100%) !important;
}

/* Imports */
.fuel-mix-row[data-class="imports"] .fill,
.fuel-mix-row[data-class="imports"] .mix-fill,
.fuel-mix-row[data-class="imports"] .bar-fill,
.mix-row[data-class="imports"] .fill,
.mix-row[data-class="imports"] .mix-fill,
.mix-row[data-class="imports"] .bar-fill,
.fuel-mix-row.imports .fill,
.fuel-mix-row.imports .mix-fill,
.fuel-mix-row.imports .bar-fill,
.mix-row.imports .fill,
.mix-row.imports .mix-fill,
.mix-row.imports .bar-fill {
  background: linear-gradient(90deg, #9aa7b0 0%, #c3ccd2 100%) !important;
}

/* Uncovered / residual */
.fuel-mix-row[data-class="uncovered"] .fill,
.fuel-mix-row[data-class="uncovered"] .mix-fill,
.fuel-mix-row[data-class="uncovered"] .bar-fill,
.mix-row[data-class="uncovered"] .fill,
.mix-row[data-class="uncovered"] .mix-fill,
.mix-row[data-class="uncovered"] .bar-fill,
.fuel-mix-row[data-class="residual"] .fill,
.fuel-mix-row[data-class="residual"] .mix-fill,
.fuel-mix-row[data-class="residual"] .bar-fill,
.mix-row[data-class="residual"] .fill,
.mix-row[data-class="residual"] .mix-fill,
.mix-row[data-class="residual"] .bar-fill,
.fuel-mix-row.uncovered .fill,
.fuel-mix-row.uncovered .mix-fill,
.fuel-mix-row.uncovered .bar-fill,
.mix-row.uncovered .fill,
.mix-row.uncovered .mix-fill,
.mix-row.uncovered .bar-fill,
.fuel-mix-row.residual .fill,
.fuel-mix-row.residual .mix-fill,
.fuel-mix-row.residual .bar-fill,
.mix-row.residual .fill,
.mix-row.residual .mix-fill,
.mix-row.residual .bar-fill {
  background: linear-gradient(90deg, #8c6bff 0%, #b69cff 100%) !important;
}

/* v0.81 Make wind/solar subset cards visually subordinate to renewable total */
#metricGrid .metric-card.wind-child-card strong,
#metricGrid .metric-card.solar-child-card strong {
  font-size: clamp(1.65rem, 3.2vw, 2.45rem) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.95 !important;
  opacity: 0.92;
}

#metricGrid .metric-card.renewable-parent-card strong {
  font-size: clamp(2.05rem, 4.2vw, 3.3rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.92 !important;
}

/* Tone down the component chips so they do not compete with the numbers */
#metricGrid .metric-card.renewable-child-card::after {
  font-size: 0.46rem !important;
  padding: 0.12rem 0.32rem !important;
  opacity: 0.62 !important;
}

@media (max-width: 760px) {
  #metricGrid .metric-card.wind-child-card strong,
  #metricGrid .metric-card.solar-child-card strong {
    font-size: 1.85rem !important;
  }

  #metricGrid .metric-card.renewable-parent-card strong {
    font-size: 2.35rem !important;
  }
}

/* v0.82 Only reduce wind/solar subset metric numbers; keep renewable total normal */
#metricGrid .metric-card.renewable-parent-card strong {
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

#metricGrid .metric-card.wind-child-card strong,
#metricGrid .metric-card.solar-child-card strong {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

@media (max-width: 760px) {
  #metricGrid .metric-card.renewable-parent-card strong {
    font-size: inherit !important;
  }

  #metricGrid .metric-card.wind-child-card strong,
  #metricGrid .metric-card.solar-child-card strong {
    font-size: 1.55rem !important;
  }
}

/* v0.82 Only reduce wind/solar subset metric numbers; keep renewable total normal */
#metricGrid .metric-card.renewable-parent-card strong {
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

#metricGrid .metric-card.wind-child-card strong,
#metricGrid .metric-card.solar-child-card strong {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

@media (max-width: 760px) {
  #metricGrid .metric-card.renewable-parent-card strong {
    font-size: inherit !important;
  }

  #metricGrid .metric-card.wind-child-card strong,
  #metricGrid .metric-card.solar-child-card strong {
    font-size: 1.55rem !important;
  }
}

/* v0.84 Clean metric hierarchy: renewable is parent, wind/solar are smaller components */

/* Remove noisy TOTAL / COMPONENT chips */
#metricGrid .metric-card.renewable-parent-card::after,
#metricGrid .metric-card.renewable-child-card::after,
#metricGrid .metric-card.wind-child-card::after,
#metricGrid .metric-card.solar-child-card::after {
  display: none !important;
  content: none !important;
}

/* Restore Renewable cover as a primary metric */
#metricGrid .metric-card.renewable-parent-card strong,
#metricGrid .metric-card.renewable-parent-card .metric-value,
#metricGrid .metric-card.renewable-parent-card h2,
#metricGrid .metric-card.renewable-parent-card h3 {
  font-size: clamp(2.15rem, 4vw, 3rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.055em !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

/* Make Wind and Solar visibly subordinate */
#metricGrid .metric-card.wind-child-card strong,
#metricGrid .metric-card.solar-child-card strong,
#metricGrid .metric-card.wind-child-card .metric-value,
#metricGrid .metric-card.solar-child-card .metric-value,
#metricGrid .metric-card.wind-child-card h2,
#metricGrid .metric-card.solar-child-card h2,
#metricGrid .metric-card.wind-child-card h3,
#metricGrid .metric-card.solar-child-card h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  font-weight: 850 !important;
  opacity: 0.88 !important;
}

/* Keep Uncovered as a sibling metric, slightly stronger than components */
#metricGrid .metric-card.is-uncovered strong,
#metricGrid .metric-card.is-uncovered .metric-value,
#metricGrid .metric-card:has(span:first-child:is(:not(.flow-indicator))) strong {
  font-weight: 900;
}

@media (max-width: 760px) {
  #metricGrid .metric-card.renewable-parent-card strong,
  #metricGrid .metric-card.renewable-parent-card .metric-value,
  #metricGrid .metric-card.renewable-parent-card h2,
  #metricGrid .metric-card.renewable-parent-card h3 {
    font-size: 2.2rem !important;
  }

  #metricGrid .metric-card.wind-child-card strong,
  #metricGrid .metric-card.solar-child-card strong,
  #metricGrid .metric-card.wind-child-card .metric-value,
  #metricGrid .metric-card.solar-child-card .metric-value,
  #metricGrid .metric-card.wind-child-card h2,
  #metricGrid .metric-card.solar-child-card h2,
  #metricGrid .metric-card.wind-child-card h3,
  #metricGrid .metric-card.solar-child-card h3 {
    font-size: 1.5rem !important;
  }
}

/* v0.85 Metric hierarchy: parent/sibling cards equal, wind+solar slightly smaller */

/* remove noisy semantic chips if still present */
#metricGrid .metric-card.renewable-parent-card::after,
#metricGrid .metric-card.wind-child-card::after,
#metricGrid .metric-card.solar-child-card::after {
  display: none !important;
  content: none !important;
}

/* MAIN tier: Demand, Renewable, Uncovered, Interconnection */
#metricGrid .metric-card.metric-demand strong,
#metricGrid .metric-card.metric-demand .metric-value,
#metricGrid .metric-card.renewable-parent-card strong,
#metricGrid .metric-card.renewable-parent-card .metric-value,
#metricGrid .metric-card.is-uncovered strong,
#metricGrid .metric-card.is-uncovered .metric-value,
#metricGrid .metric-card.metric-interconnection strong,
#metricGrid .metric-card.metric-interconnection .metric-value {
  font-size: clamp(2.15rem, 4vw, 3rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.055em !important;
  font-weight: 950 !important;
}

/* COMPONENT tier: Wind and Solar */
#metricGrid .metric-card.wind-child-card strong,
#metricGrid .metric-card.wind-child-card .metric-value,
#metricGrid .metric-card.solar-child-card strong,
#metricGrid .metric-card.solar-child-card .metric-value {
  font-size: clamp(1.7rem, 2.9vw, 2.2rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
}

/* keep labels visually calm */
#metricGrid .metric-card .metric-label,
#metricGrid .metric-card .eyebrow,
#metricGrid .metric-card small {
  letter-spacing: 0.12em;
}

/* mobile tuning */
@media (max-width: 760px) {
  #metricGrid .metric-card.metric-demand strong,
  #metricGrid .metric-card.metric-demand .metric-value,
  #metricGrid .metric-card.renewable-parent-card strong,
  #metricGrid .metric-card.renewable-parent-card .metric-value,
  #metricGrid .metric-card.is-uncovered strong,
  #metricGrid .metric-card.is-uncovered .metric-value,
  #metricGrid .metric-card.metric-interconnection strong,
  #metricGrid .metric-card.metric-interconnection .metric-value {
    font-size: 2.15rem !important;
  }

  #metricGrid .metric-card.wind-child-card strong,
  #metricGrid .metric-card.wind-child-card .metric-value,
  #metricGrid .metric-card.solar-child-card strong,
  #metricGrid .metric-card.solar-child-card .metric-value {
    font-size: 1.65rem !important;
  }
}

/* IETM metric number hierarchy: BEGIN */

/* Main KPI numbers: demand, renewable cover, uncovered, interconnection, CO2 */
#metricGrid.metric-grid .metric-card strong,
#metricGrid.metric-grid .metric-card[data-accent="demand"] strong,
#metricGrid.metric-grid .metric-card[data-accent="renewables"] strong,
#metricGrid.metric-grid .metric-card[data-accent="residual"] strong,
#metricGrid.metric-grid .metric-card[data-accent="imports"] strong,
#metricGrid.metric-grid .metric-card[data-accent="co2"] strong {
  display: block !important;
  font-size: clamp(1.85rem, 2.15vw, 2.25rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  font-weight: 850 !important;
  margin: 0.52rem 0 0.45rem !important;
}

/* Wind and solar are subsets of renewable cover, so keep only these smaller */
#metricGrid.metric-grid .metric-card[data-accent="wind"] strong,
#metricGrid.metric-grid .metric-card[data-accent="solar"] strong {
  font-size: clamp(1.45rem, 1.65vw, 1.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  font-weight: 850 !important;
}

/* Keep the CO2 number visually aligned with the other main KPIs */
#metricGrid.metric-grid .metric-card .co2-value {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}

/* CO2 unit stays smaller */
#metricGrid.metric-grid .metric-card .co2-unit {
  display: block !important;
  font-size: 0.48em !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-top: 0.16rem !important;
}

/* IETM metric number hierarchy: END */

/* IETM demand pressure panel: BEGIN */

.demand-pressure-section {
  scroll-margin-top: 1.5rem;
}

.demand-pressure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.demand-pressure-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.45rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding: 1rem;
  min-height: 12rem;
  position: relative;
  overflow: hidden;
}

.demand-pressure-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.32rem;
  background: var(--amber);
}

.demand-pressure-card.measured::before {
  background: var(--green);
}

.demand-pressure-card.modelled::before {
  background: var(--blue);
}

.demand-pressure-card.pressure::before {
  background: var(--red);
}

.demand-pressure-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.demand-pressure-card strong {
  display: block;
  font-size: clamp(1.8rem, 2.4vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0.62rem 0 0.35rem;
  color: var(--text);
}

.demand-pressure-card small {
  display: block;
  color: #eafff2;
  font-weight: 850;
  margin-bottom: 0.7rem;
}

.demand-pressure-card p {
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.demand-pressure-card em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.48rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.demand-pressure-note-panel {
  margin-top: 1rem;
}

@media (max-width: 980px) {
  .demand-pressure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .demand-pressure-grid {
    grid-template-columns: 1fr;
  }
}

/* IETM demand pressure panel: END */

/* IETM demand pressure unit hierarchy: BEGIN */

.demand-pressure-card strong {
  font-size: clamp(1.9rem, 2.6vw, 2.45rem) !important;
}

.demand-pressure-card small {
  color: #eafff2 !important;
  font-weight: 900 !important;
}

.demand-pressure-card p {
  margin-top: 0.65rem !important;
}

.demand-pressure-note-panel p {
  line-height: 1.65 !important;
}

.demand-pressure-note-panel p strong {
  color: #eafff2 !important;
}

/* IETM demand pressure unit hierarchy: END */

/* IETM interconnection inline note: BEGIN */

#metricGrid .metric-card[data-accent="interconnection"] .interconnection-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.32rem !important;
  white-space: nowrap !important;
  color: var(--green) !important;
  font-weight: 850 !important;
}

#metricGrid .metric-card[data-accent="interconnection"] .interconnection-arrow {
  width: 0.95rem !important;
  height: 0.95rem !important;
  flex: 0 0 0.95rem !important;
  display: inline-block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#metricGrid .metric-card[data-accent="interconnection"] .interconnection-arrow circle {
  fill: currentColor !important;
  stroke: none !important;
}

/* IETM interconnection inline note: END */

/* IETM simple interconnection note: BEGIN */

#metricGrid .metric-card[data-accent="interconnection"] small,
#metricGrid .metric-card small.interconnection-note {
  white-space: nowrap !important;
}

/* IETM simple interconnection note: END */

/* IETM final interconnection CSS arrow: BEGIN */

#metricGrid .metric-card[data-accent="interconnection"] .interconnection-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  white-space: nowrap !important;
  color: var(--green) !important;
  font-weight: 850 !important;
}

#metricGrid .metric-card[data-accent="interconnection"] .interconnection-note::before {
  display: inline-block !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#metricGrid .metric-card[data-accent="interconnection"][data-flow="export"] .interconnection-note::before {
  content: "↗" !important;
}

#metricGrid .metric-card[data-accent="interconnection"][data-flow="import"] .interconnection-note::before {
  content: "↘" !important;
}

#metricGrid .metric-card[data-accent="interconnection"][data-flow="balanced"] .interconnection-note::before {
  content: "•" !important;
}

/* IETM final interconnection CSS arrow: END */

/* IETM interconnection note colour: BEGIN */

#metricGrid .metric-card[data-accent="interconnection"] small {
  color: var(--green) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

/* IETM interconnection note colour: END */

/* IETM demand pressure fallback polish: BEGIN */

.demand-pressure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.demand-pressure-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.45rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding: 1rem;
  min-height: 12rem;
  position: relative;
  overflow: hidden;
}

.demand-pressure-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.32rem;
  background: var(--amber);
}

.demand-pressure-card.pressure::before {
  background: var(--red);
}

.demand-pressure-card.measured::before {
  background: var(--green);
}

.demand-pressure-card.modelled::before {
  background: var(--blue);
}

.demand-pressure-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.demand-pressure-card strong {
  display: block;
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0.62rem 0 0.35rem;
  color: var(--text);
}

.demand-pressure-card small {
  display: block;
  color: #eafff2;
  font-weight: 900;
  margin-bottom: 0.7rem;
}

.demand-pressure-card p {
  color: var(--muted);
  margin: 0.65rem 0 0.75rem;
}

.demand-pressure-card em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.48rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.demand-acceleration {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.25rem 0 0.75rem;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.32);
  background: rgba(247, 201, 72, 0.12);
  color: #fff0ba;
  font-size: 0.76rem;
  line-height: 1.25;
  font-weight: 850;
}

.demand-pressure-note-panel p {
  line-height: 1.65;
}

.demand-pressure-note-panel p strong {
  color: #eafff2;
}

@media (max-width: 980px) {
  .demand-pressure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .demand-pressure-grid {
    grid-template-columns: 1fr;
  }
}

/* IETM demand pressure fallback polish: END */

/* IETM generation mix flow split: BEGIN */

.mix-flow-separator {
  height: 1px;
  margin: 0.85rem 0 0.75rem;
  background: var(--line);
}

.mix-flow-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.mix-flow-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.mix-flow-card strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--green);
  font-size: 0.95rem;
  line-height: 1.1;
}

.mix-flow-card small {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.mix-flow-card b {
  color: var(--text);
  font-size: 1.25rem;
  white-space: nowrap;
}

.mix-flow-card.import strong {
  color: var(--blue);
}

.mix-flow-card.balanced strong {
  color: var(--muted);
}

/* IETM generation mix flow split: END */

/* IETM flow scale and thermal accent: BEGIN */

:root {
  --thermal-purple: #5b3a96;
  --thermal-purple-soft: rgba(91, 58, 150, 0.78);
  --flow-export: var(--green);
  --flow-import: #ff5d5d;
}

/* Top KPI stripe: Thermal/other */
#metricGrid .metric-card[data-accent="thermal"] {
  border-top-color: var(--thermal-purple) !important;
}

#metricGrid .metric-card[data-accent="thermal"]::before {
  background: var(--thermal-purple) !important;
}

/* Generation-mix bar: Thermal/other */
.mix-row.thermal .bar-fill,
.mix-row.residual .bar-fill {
  background: var(--thermal-purple-soft) !important;
}

.mix-flow-separator {
  height: 1px;
  margin: 0.85rem 0 0.75rem;
  background: var(--line);
}

.mix-flow-card {
  display: grid;
  gap: 0.62rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.mix-flow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mix-flow-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.mix-flow-card strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--flow-export);
  font-size: 0.95rem;
  line-height: 1.1;
}

.mix-flow-card.import strong {
  color: var(--flow-import);
}

.mix-flow-card.balanced strong {
  color: var(--muted);
}

.mix-flow-card small {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.mix-flow-card b {
  color: var(--text);
  font-size: 1.25rem;
  white-space: nowrap;
}

.mix-flow-scale {
  position: relative;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mix-flow-axis {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.mix-flow-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255, 255, 255, 0.55);
}

.mix-flow-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.mix-flow-fill.export {
  background: var(--flow-export);
}

.mix-flow-fill.import {
  background: var(--flow-import);
}

.mix-flow-fill.balanced {
  background: var(--muted);
}

.mix-flow-scale-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
}

.mix-flow-scale-labels span:nth-child(1) {
  text-align: left;
}

.mix-flow-scale-labels span:nth-child(2) {
  text-align: center;
}

.mix-flow-scale-labels span:nth-child(3) {
  text-align: right;
}

/* IETM flow scale and thermal accent: END */

/* IETM cross-border flow desktop meter layout: BEGIN */

.mix-flow-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 42%) !important;
  align-items: center !important;
  gap: 1.1rem !important;
}

.mix-flow-copy {
  min-width: 0 !important;
}

.mix-flow-meter {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 220px !important;
}

.mix-flow-meter b {
  justify-self: end !important;
  color: var(--text) !important;
  font-size: 1.25rem !important;
  white-space: nowrap !important;
}

.mix-flow-card-top {
  display: contents !important;
}

@media (max-width: 700px) {
  .mix-flow-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .mix-flow-meter {
    min-width: 0 !important;
  }

  .mix-flow-meter b {
    justify-self: start !important;
  }
}

/* IETM cross-border flow desktop meter layout: END */

/* IETM mobile reorder for Today at a glance */
@media (max-width: 700px) {
  .pulse-card[data-kpi="demand"] { order: 1; }
  .pulse-card[data-kpi="renewables"] { order: 2; }
  .pulse-card[data-kpi="residual"] { order: 3; }
  .pulse-card[data-kpi="co2"] { order: 4; }
  .pulse-card[data-kpi="interconnection"] { order: 5; }
  .pulse-card[data-kpi="target-gap"] { order: 6; }
  .pulse-card[data-kpi="electricity-price"] { order: 7; }
  .pulse-card[data-kpi="gas-price"] { order: 8; }
}

/* IETM other renewables generation mix: BEGIN */

.mix-row.other-renewables .bar-fill {
  background: var(--green) !important;
  opacity: 0.78;
}

.mix-row.other-renewables label {
  color: var(--text);
}

/* IETM other renewables generation mix: END */

/* IETM residual sparkline purple: BEGIN */

#dailyPulseGrid .pulse-card.thermal .sparkline path,
#dailyPulseGrid .pulse-card.thermal .sparkline polyline,
#dailyPulseGrid .pulse-card.thermal svg path,
#dailyPulseGrid .pulse-card.thermal svg polyline,
#dailyPulseGrid .pulse-card[data-kpi="residual"] .sparkline path,
#dailyPulseGrid .pulse-card[data-kpi="residual"] .sparkline polyline,
#dailyPulseGrid .pulse-card[data-kpi="residual"] svg path,
#dailyPulseGrid .pulse-card[data-kpi="residual"] svg polyline {
  stroke: var(--thermal-purple) !important;
}

#dailyPulseGrid .pulse-card.thermal .sparkline,
#dailyPulseGrid .pulse-card[data-kpi="residual"] .sparkline {
  color: var(--thermal-purple) !important;
}

/* IETM residual sparkline purple: END */

/* IETM renewable reconciliation helper */
.generation-reconcile-box {
  margin: 0.9rem 0 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.generation-reconcile-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}

.generation-reconcile-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

.generation-reconcile-text strong {
  color: #fff;
  font-weight: 800;
}

/* IETM others calculated KPI card */
#metricGrid .metric-card[data-accent="other-renewables"] {
  border-top-color: var(--green) !important;
}

#metricGrid .metric-card[data-accent="other-renewables"]::before {
  background: var(--green) !important;
  opacity: 0.72;
}

/* IETM KPI accent consistency: Thermal purple, Others green-blue */
:root {
  --ietm-thermal-purple: #7b5ce1;
  --ietm-others-teal: #38d7c8;
}

#metricGrid .metric-card[data-accent="thermal"] {
  border-top-color: var(--ietm-thermal-purple) !important;
}

#metricGrid .metric-card[data-accent="thermal"]::before {
  background: var(--ietm-thermal-purple) !important;
}

#metricGrid .metric-card[data-accent="others-calculated"] {
  border-top-color: var(--ietm-others-teal) !important;
}

#metricGrid .metric-card[data-accent="others-calculated"]::before {
  background: var(--ietm-others-teal) !important;
}

/* IETM forced KPI card accents */
#metricGrid .metric-card.others-calculated-card {
  border-top-color: #38d7c8 !important;
}

#metricGrid .metric-card.others-calculated-card::before {
  background: #38d7c8 !important;
}

#metricGrid .metric-card.thermal-other-card {
  border-top-color: #7b5ce1 !important;
}

#metricGrid .metric-card.thermal-other-card::before {
  background: #7b5ce1 !important;
}

/* IETM canonical residual daily-pulse styling */
#dailyPulseGrid .pulse-card.thermal .pulse-sparkline path,
#dailyPulseGrid .pulse-card.thermal .pulse-sparkline polyline,
#dailyPulseGrid .pulse-card.thermal svg path,
#dailyPulseGrid .pulse-card.thermal svg polyline {
  stroke: var(--thermal-purple, #5b3a96) !important;
}

#dailyPulseGrid .pulse-card.thermal .pulse-sparkline line,
#dailyPulseGrid .pulse-card.thermal svg line {
  stroke: rgba(91, 58, 150, 0.28) !important;
}

#dailyPulseGrid .pulse-card.thermal .pulse-sparkline,
#dailyPulseGrid .pulse-card.thermal svg {
  color: var(--thermal-purple, #5b3a96) !important;
}

/* IETM canonical interconnection KPI note */
#metricGrid .metric-card.interconnection-card small {
  white-space: nowrap;
  font-weight: 850;
}

#metricGrid .metric-card.interconnection-card.export small {
  color: var(--green) !important;
}

#metricGrid .metric-card.interconnection-card.import small {
  color: #ff5d5d !important;
}

#metricGrid .metric-card.interconnection-card.balanced small {
  color: var(--muted) !important;
}

/* IETM Today at a glance canonical order: BEGIN */
/* Page order:
   Generation now | System demand if shown | Renewables now | Thermal/other
   CO2 now | Interconnection | 2030 target gap | Electricity price | Gas price
*/
#dailyPulseGrid .pulse-card[data-kpi="generation"] { order: 1 !important; }
#dailyPulseGrid .pulse-card[data-kpi="demand"] { order: 2 !important; }
#dailyPulseGrid .pulse-card[data-kpi="renewables"] { order: 3 !important; }
#dailyPulseGrid .pulse-card[data-kpi="residual"] { order: 4 !important; }
#dailyPulseGrid .pulse-card[data-kpi="co2"] { order: 5 !important; }
#dailyPulseGrid .pulse-card[data-kpi="interconnection"] { order: 6 !important; }
#dailyPulseGrid .pulse-card[data-kpi="target-gap"] { order: 7 !important; }
#dailyPulseGrid .pulse-card[data-kpi="electricity-price"] { order: 8 !important; }
#dailyPulseGrid .pulse-card[data-kpi="gas-price"] { order: 9 !important; }

@media (max-width: 700px) {
  #dailyPulseGrid {
    display: flex !important;
    flex-direction: column !important;
  }
}
/* IETM Today at a glance canonical order: END */

/* IETM hero status desktop alignment: BEGIN */
@media (min-width: 900px) {
  .hero {
    align-items: start !important;
  }

  .hero .prototype-status-card {
    align-self: start !important;
    margin-top: 0 !important;
  }
}
/* IETM hero status desktop alignment: END */

/* IETM hero text flow: BEGIN */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) !important;
    column-gap: clamp(2rem, 5vw, 5rem) !important;
    align-items: start !important;
  }

  .hero > div:first-child,
  .hero .hero-copy,
  .hero .hero-content,
  .hero .hero-text {
    max-width: none !important;
    width: 100% !important;
  }

  .hero .lede,
  .hero .hero-lede,
  .hero .micro-note,
  .hero p {
    max-width: min(980px, 100%) !important;
  }

  .hero .lede,
  .hero .hero-lede {
    max-width: min(1040px, 100%) !important;
  }
}

@media (min-width: 1200px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  .hero .lede,
  .hero .hero-lede {
    max-width: 1080px !important;
  }

  .hero .micro-note,
  .hero p {
    max-width: 980px !important;
  }
}
/* IETM hero text flow: END */

/* IETM hero wide text layout: BEGIN */
@media (min-width: 1000px) {
  header.hero.panel,
  .hero.panel,
  .hero {
    grid-template-columns: minmax(720px, 1fr) 300px !important;
    column-gap: clamp(1.5rem, 3vw, 3rem) !important;
    align-items: start !important;
  }

  header.hero.panel > *:first-child,
  .hero.panel > *:first-child,
  .hero > *:first-child {
    max-width: none !important;
    width: 100% !important;
  }

  header.hero.panel .lede,
  header.hero.panel .micro-note,
  .hero.panel .lede,
  .hero.panel .micro-note,
  .hero .lede,
  .hero .micro-note {
    max-width: 900px !important;
    width: 100% !important;
  }

  header.hero.panel .prototype-status-card,
  .hero.panel .prototype-status-card,
  .hero .prototype-status-card {
    width: 300px !important;
    max-width: 300px !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 1250px) {
  header.hero.panel,
  .hero.panel,
  .hero {
    grid-template-columns: minmax(820px, 1fr) 300px !important;
  }

  header.hero.panel .lede,
  header.hero.panel .micro-note,
  .hero.panel .lede,
  .hero.panel .micro-note,
  .hero .lede,
  .hero .micro-note {
    max-width: 980px !important;
  }
}
/* IETM hero wide text layout: END */

/* IETM reduce gap before Today at a glance: BEGIN */
.pulse-section,
section:has(#dailyPulseGrid) {
  margin-top: clamp(1.25rem, 3vw, 2.25rem) !important;
}

.share-panel,
.support-panel,
.share-strip,
.demo-links-panel {
  margin-bottom: 0 !important;
}

.share-panel + .pulse-section,
.support-panel + .pulse-section,
.share-strip + .pulse-section,
.demo-links-panel + .pulse-section,
section:has(+ .pulse-section) {
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
}
/* IETM reduce gap before Today at a glance: END */

/* IETM tighten first Today section spacing: BEGIN */
/* Today at a glance is the first section in <main>, so its own desktop
   margin/padding creates the apparent gap below the hero/status area. */
main > .pulse-section:first-child {
  margin-top: 0 !important;
  padding-top: 1rem !important;
}

@media (min-width: 900px) {
  main > .pulse-section:first-child {
    margin-top: 0 !important;
    padding-top: 0.85rem !important;
  }

  header.hero.panel,
  .hero.panel {
    margin-bottom: 0 !important;
  }
}
/* IETM tighten first Today section spacing: END */

/* IETM Today interconnection direction signal: BEGIN */
#dailyPulseGrid .pulse-card.interconnection-export p {
  color: var(--green) !important;
  font-weight: 850 !important;
}

#dailyPulseGrid .pulse-card.interconnection-import p {
  color: #ff5d5d !important;
  font-weight: 850 !important;
}

#dailyPulseGrid .pulse-card.interconnection-balanced p {
  color: var(--muted) !important;
  font-weight: 850 !important;
}
/* IETM Today interconnection direction signal: END */

#metricGrid .metric-card.others-calculated-card > span:first-child,
#metricGrid .metric-card[data-accent="other-renewables"] > span:first-child {
  font-size: 0.58rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0.13em !important;
}

/* IETM Current grid pulse: Others calculated matches Wind/Solar child metric sizing */
#metricGrid.metric-grid article.metric-card.others-calculated-card > span:first-child {
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.12em !important;
}

#metricGrid.metric-grid article.metric-card.others-calculated-card > strong {
  font-size: clamp(1.45rem, 2.1vw, 1.9rem) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
}

#metricGrid.metric-grid article.metric-card.others-calculated-card > small {
  font-size: 0.66rem !important;
  line-height: 1.45 !important;
}

/* IETM exact match: Current grid pulse Others (calculated) = Wind/Solar sizing */
html body #metricGrid.metric-grid article.metric-card.others-calculated-card > span:first-child {
  font-size: 9.76px !important;
  line-height: 15.128px !important;
}

html body #metricGrid.metric-grid article.metric-card.others-calculated-card > strong {
  font-size: 23.2px !important;
  line-height: 23.2px !important;
  font-weight: 850 !important;
}

html body #metricGrid.metric-grid article.metric-card.others-calculated-card > small {
  font-size: 10.88px !important;
  line-height: 13.9264px !important;
}

/* IETM Current grid pulse: align value rows across desktop cards */
@media (min-width: 760px) {
  html body #metricGrid.metric-grid article.metric-card {
    display: grid !important;
    grid-template-rows: 2.15rem auto 1fr !important;
    align-content: start !important;
  }

  html body #metricGrid.metric-grid article.metric-card > span:first-child {
    min-height: 2.15rem !important;
    display: block !important;
    margin: 0 !important;
  }

  html body #metricGrid.metric-grid article.metric-card > strong {
    align-self: start !important;
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
  }

  html body #metricGrid.metric-grid article.metric-card > small {
    align-self: start !important;
  }
}

/* IETM Current grid pulse: soften child renewable values */
html body #metricGrid.metric-grid article.metric-card[data-accent="wind"] > strong,
html body #metricGrid.metric-grid article.metric-card[data-accent="solar"] > strong,
html body #metricGrid.metric-grid article.metric-card.others-calculated-card > strong {
  color: rgba(224, 236, 229, 0.78) !important;
}

/* IETM mobile Current grid pulse: force visible accent strips on every metric card */
@media (max-width: 760px) {
  html body #metricGrid.metric-grid article.metric-card {
    border-top: 3px solid rgba(224, 236, 229, 0.35) !important;
  }

  html body #metricGrid.metric-grid article.metric-card[data-accent="renewables"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="renewable"] {
    border-top-color: var(--green) !important;
  }

  html body #metricGrid.metric-grid article.metric-card[data-accent="wind"] {
    border-top-color: #62d8ff !important;
  }

  html body #metricGrid.metric-grid article.metric-card[data-accent="solar"] {
    border-top-color: #ffe36e !important;
  }

  html body #metricGrid.metric-grid article.metric-card.others-calculated-card,
  html body #metricGrid.metric-grid article.metric-card[data-accent="other-renewables"] {
    border-top-color: #46e3c5 !important;
  }

  html body #metricGrid.metric-grid article.metric-card.thermal-other-card,
  html body #metricGrid.metric-grid article.metric-card[data-accent="thermal"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="thermal-other"] {
    border-top-color: #8b5cf6 !important;
  }

  html body #metricGrid.metric-grid article.metric-card.interconnection-card,
  html body #metricGrid.metric-grid article.metric-card[data-accent="imports"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"] {
    border-top-color: #ffb25f !important;
  }

  html body #metricGrid.metric-grid article.metric-card[data-accent="co2"] {
    border-top-color: rgba(224, 236, 229, 0.55) !important;
  }
}

/* IETM Current grid pulse: Interconnection is a neutral grid-flow metric, not a fuel source */
html body #metricGrid.metric-grid article.metric-card.interconnection-card,
html body #metricGrid.metric-grid article.metric-card[data-accent="imports"],
html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"] {
  border-top-color: rgba(224, 236, 229, 0.55) !important;
}

html body #metricGrid.metric-grid article.metric-card.interconnection-card::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="imports"]::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"]::before {
  background: rgba(224, 236, 229, 0.55) !important;
}

@media (max-width: 760px) {
  html body #metricGrid.metric-grid article.metric-card.interconnection-card,
  html body #metricGrid.metric-grid article.metric-card[data-accent="imports"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"] {
    border-top-color: rgba(224, 236, 229, 0.55) !important;
  }
}

/* IETM Current grid pulse: neutral grey accent for non-fuel grid/system metrics */
:root {
  --ietm-neutral-grid-accent: rgba(224, 236, 229, 0.55);
}

/* Generation now: first Current grid pulse metric card */
html body #metricGrid.metric-grid article.metric-card:first-child,
html body #metricGrid.metric-grid article.metric-card[data-accent="generation"],
html body #metricGrid.metric-grid article.metric-card[data-accent="demand"] {
  border-top-color: var(--ietm-neutral-grid-accent) !important;
}

html body #metricGrid.metric-grid article.metric-card:first-child::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="generation"]::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="demand"]::before {
  background: var(--ietm-neutral-grid-accent) !important;
}

/* Interconnection */
html body #metricGrid.metric-grid article.metric-card.interconnection-card,
html body #metricGrid.metric-grid article.metric-card[data-accent="imports"],
html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"] {
  border-top-color: var(--ietm-neutral-grid-accent) !important;
}

html body #metricGrid.metric-grid article.metric-card.interconnection-card::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="imports"]::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"]::before {
  background: var(--ietm-neutral-grid-accent) !important;
}

/* CO₂ intensity */
html body #metricGrid.metric-grid article.metric-card[data-accent="co2"],
html body #metricGrid.metric-grid article.metric-card[data-accent="co₂"] {
  border-top-color: var(--ietm-neutral-grid-accent) !important;
}

html body #metricGrid.metric-grid article.metric-card[data-accent="co2"]::before,
html body #metricGrid.metric-grid article.metric-card[data-accent="co₂"]::before {
  background: var(--ietm-neutral-grid-accent) !important;
}

@media (max-width: 760px) {
  html body #metricGrid.metric-grid article.metric-card:first-child,
  html body #metricGrid.metric-grid article.metric-card[data-accent="generation"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="demand"],
  html body #metricGrid.metric-grid article.metric-card.interconnection-card,
  html body #metricGrid.metric-grid article.metric-card[data-accent="imports"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="interconnection"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="co2"],
  html body #metricGrid.metric-grid article.metric-card[data-accent="co₂"] {
    border-top-color: var(--ietm-neutral-grid-accent) !important;
  }
}

/* IETM demand pressure trend sparklines: BEGIN */
.demand-pressure-card .demand-trend {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(224, 236, 229, 0.12);
  color: rgba(224, 236, 229, 0.72);
}

.demand-pressure-card .demand-trend svg {
  display: block;
  width: 100%;
  height: 46px;
  overflow: visible;
}

.demand-pressure-card .demand-trend-axis {
  stroke: rgba(224, 236, 229, 0.15);
  stroke-width: 1;
}

.demand-pressure-card .demand-trend-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.demand-pressure-card .demand-trend-point {
  fill: currentColor;
  stroke: rgba(5, 18, 14, 0.95);
  stroke-width: 1.4;
}

.demand-pressure-card .demand-trend-point.forecast {
  fill: rgba(5, 18, 14, 0.95);
  stroke: currentColor;
  stroke-width: 2;
}

.demand-pressure-card .demand-trend-single-track {
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(224, 236, 229, 0.15);
}

.demand-pressure-card .demand-trend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
}

.demand-pressure-card .demand-trend-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.28rem;
  font-size: 0.66rem;
  color: rgba(224, 236, 229, 0.72);
}

.demand-pressure-card .demand-trend-meta strong {
  font-size: 0.68rem;
  color: rgba(224, 236, 229, 0.92);
}

.demand-pressure-card .demand-trend small {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.63rem;
  line-height: 1.25;
  color: rgba(224, 236, 229, 0.58);
}

.demand-pressure-card.pressure .demand-trend {
  color: #ff7b7b;
}

.demand-pressure-card.measured .demand-trend {
  color: #72f0a0;
}

.demand-pressure-card.modelled .demand-trend {
  color: #62d8ff;
}
/* IETM demand pressure trend sparklines: END */

/* IETM demand pressure scenario chart: BEGIN */
.demand-scenario-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(224, 236, 229, 0.12);
  background: rgba(224, 236, 229, 0.025);
}

.demand-scenario-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.demand-scenario-head h4 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.demand-scenario-head p {
  margin: 0;
  max-width: 64rem;
  color: rgba(224, 236, 229, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.demand-scenario-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(224, 236, 229, 0.14);
  border-radius: 999px;
  padding: 0.32rem 0.55rem;
  color: rgba(224, 236, 229, 0.72);
  font-size: 0.68rem;
  white-space: nowrap;
}

.demand-scenario-chart-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.demand-scenario-svg {
  display: block;
  min-width: 920px;
  width: 100%;
  height: auto;
}

.demand-scenario-grid {
  stroke: rgba(224, 236, 229, 0.10);
  stroke-width: 1;
}

.demand-scenario-grid.vertical {
  stroke: rgba(224, 236, 229, 0.055);
}

.demand-scenario-axis {
  fill: rgba(224, 236, 229, 0.58);
  font-size: 11px;
  font-weight: 750;
}

.demand-scenario-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demand-scenario-line.scenario-low,
.demand-scenario-dot.scenario-low,
.demand-scenario-end-label.scenario-low,
.demand-scenario-legend .scenario-low i {
  stroke: #72f0a0;
  fill: #72f0a0;
  color: #72f0a0;
  background: #72f0a0;
}

.demand-scenario-line.scenario-central,
.demand-scenario-dot.scenario-central,
.demand-scenario-end-label.scenario-central,
.demand-scenario-legend .scenario-central i {
  stroke: #ffd166;
  fill: #ffd166;
  color: #ffd166;
  background: #ffd166;
}

.demand-scenario-line.scenario-high,
.demand-scenario-dot.scenario-high,
.demand-scenario-end-label.scenario-high,
.demand-scenario-legend .scenario-high i {
  stroke: #ff7b7b;
  fill: #ff7b7b;
  color: #ff7b7b;
  background: #ff7b7b;
}

.demand-scenario-end-label {
  font-size: 12px;
  font-weight: 850;
}

.demand-scenario-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.65rem;
}

.demand-scenario-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: rgba(224, 236, 229, 0.84);
  font-size: 0.74rem;
  font-weight: 800;
}

.demand-scenario-legend i {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 999px;
  display: inline-block;
}

.demand-scenario-note {
  margin: 0.7rem 0 0;
  color: rgba(224, 236, 229, 0.62);
  font-size: 0.76rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .demand-scenario-panel {
    padding: 0.85rem;
  }

  .demand-scenario-head {
    flex-direction: column;
  }

  .demand-scenario-pill {
    white-space: normal;
  }

  .demand-scenario-svg {
    min-width: 960px;
  }
}
/* IETM demand pressure scenario chart: END */

/* IETM 2030 target burden callout: BEGIN */
#trajectoryChart {
  position: relative;
}

.target-burden-callout {
  position: static;
  width: auto;
  margin: 0.75rem 1rem 0;
  padding: 0.72rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(224, 236, 229, 0.14);
  background: rgba(224, 236, 229, 0.035);
}

.target-burden-callout span {
  display: block;
  margin-bottom: 0.15rem;
  color: rgba(224, 236, 229, 0.66);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.target-burden-callout > strong {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(244, 255, 248, 0.96);
  font-size: 0.84rem;
  line-height: 1.15;
}

.target-burden-callout dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
}

.target-burden-callout dl div {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.7rem;
  background: rgba(224, 236, 229, 0.035);
}

.target-burden-callout dt,
.target-burden-callout dd {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.2;
}

.target-burden-callout dt {
  color: rgba(224, 236, 229, 0.68);
}

.target-burden-callout dd {
  color: rgba(244, 255, 248, 0.92);
  font-weight: 850;
}

.target-burden-callout p {
  margin: 0.5rem 0 0;
  color: rgba(224, 236, 229, 0.62);
  font-size: 0.66rem;
  line-height: 1.28;
}

@media (max-width: 760px) {
  .target-burden-callout {
    margin: 0.65rem 0 0;
  }

  .target-burden-callout dl {
    grid-template-columns: 1fr;
  }
}
/* IETM 2030 target burden callout: END */

/* IETM demand-match sensitivity panel: BEGIN */
.rese-gap-panel {
  margin-top: 1rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(9,18,17,0.56);
}

.rese-gap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.rese-gap-head h4 {
  margin: 0 0 0.28rem;
  font-size: 1rem;
}

.rese-gap-head p {
  margin: 0;
  color: rgba(235,245,242,0.78);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 64rem;
}

.rese-gap-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(235,245,242,0.84);
  font-size: 0.74rem;
  white-space: nowrap;
}

.rese-gap-chart-wrap {
  overflow-x: auto;
}

.rese-gap-svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.rese-gap-grid {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 1;
}

.rese-gap-grid.vertical {
  stroke: rgba(255,255,255,0.055);
}

.rese-gap-axis {
  fill: rgba(235,245,242,0.66);
  font-size: 12px;
  font-weight: 650;
}

.rese-gap-pressure-band {
  fill: rgba(255,123,123,0.14);
  stroke: rgba(255,209,102,0.16);
  stroke-width: 1;
}

.rese-gap-official-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3.2;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
}

.rese-gap-base-line {
  fill: none;
  stroke: rgba(235,245,242,0.72);
  stroke-width: 2.4;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
}

.rese-gap-pressure-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rese-gap-pressure-line.scenario-low,
.rese-gap-dot.scenario-low,
.rese-gap-label.scenario-low,
.rese-gap-legend i.low {
  stroke: #7fbf7f;
  fill: #7fbf7f;
  color: #7fbf7f;
  background: #7fbf7f;
}

.rese-gap-pressure-line.scenario-central,
.rese-gap-dot.scenario-central,
.rese-gap-label.scenario-central,
.rese-gap-legend i.central {
  stroke: #d9a441;
  fill: #d9a441;
  color: #d9a441;
  background: #d9a441;
}

.rese-gap-pressure-line.scenario-high,
.rese-gap-dot.scenario-high,
.rese-gap-label.scenario-high,
.rese-gap-legend i.high {
  stroke: #d46a6a;
  fill: #d46a6a;
  color: #d46a6a;
  background: #d46a6a;
}

.rese-gap-gap-bracket {
  stroke: rgba(255,123,123,0.82);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.rese-gap-label {
  font-size: 12px;
  font-weight: 850;
}

.rese-gap-label.official {
  fill: var(--lime);
}

.rese-gap-label.base {
  fill: rgba(235,245,242,0.74);
}

.rese-gap-label.gap {
  fill: rgba(255,123,123,0.88);
}

.rese-gap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-top: 0.7rem;
  color: rgba(235,245,242,0.82);
  font-size: 0.8rem;
}

.rese-gap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.rese-gap-legend i {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  display: inline-block;
}

.rese-gap-legend i.official {
  background: var(--lime);
}

.rese-gap-legend i.base {
  background: rgba(235,245,242,0.72);
}

.rese-gap-legend i.band {
  background: linear-gradient(90deg, #7fbf7f, #d9a441, #d46a6a);
}

.rese-gap-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.rese-gap-cards article {
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 4px solid var(--gap-colour);
  border-radius: 0.82rem;
  padding: 0.62rem 0.68rem;
  background: rgba(255,255,255,0.028);
}

.rese-gap-cards span {
  display: block;
  color: rgba(235,245,242,0.68);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rese-gap-cards strong {
  display: block;
  margin-top: 0.16rem;
  color: var(--gap-colour);
  font-size: 0.98rem;
  line-height: 1.1;
}

.rese-gap-cards small {
  display: block;
  margin-top: 0.15rem;
  color: rgba(235,245,242,0.76);
  font-size: 0.7rem;
}

.rese-gap-cards p {
  margin: 0.32rem 0 0;
  color: rgba(235,245,242,0.62);
  font-size: 0.68rem;
  line-height: 1.28;
}

.rese-gap-note {
  margin: 0.8rem 0 0;
  color: rgba(235,245,242,0.72);
  font-size: 0.84rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .rese-gap-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rese-gap-head {
    flex-direction: column;
  }

  .rese-gap-pill {
    white-space: normal;
  }

  .rese-gap-svg {
    min-width: 960px;
  }

  .rese-gap-cards {
    grid-template-columns: 1fr;
  }
}
/* IETM demand-match sensitivity panel: END */

/* IETM Pink Floyd simplification: BEGIN */
/*
  Simplified trajectory story:
  - hide the original RES-E plot
  - hide the demand-pressure scenario plot
  - hide the 80% goalpost mini-plot
  - keep surrounding titles, badges, notes, chips, tiles, legends and final gap-widening chart
*/

#trajectoryChart .trajectory-scroll-wrap {
  display: none !important;
}

#demandPressureScenarioChart .demand-scenario-chart-wrap {
  display: none !important;
}

#trajectoryDemandAdjustedPanel .trajectory-demand-adjusted-svg-wrap {
  display: none !important;
}

/* Tighten spacing where hidden plots used to sit */
#trajectoryChart {
  padding-bottom: 0.75rem;
}

#demandPressureScenarioChart,
#trajectoryDemandAdjustedPanel {
  padding-top: 0.95rem;
}

#demandPressureScenarioChart .demand-scenario-legend,
#trajectoryDemandAdjustedPanel .trajectory-demand-adjusted-legend {
  margin-top: 0.15rem;
}

/* Preserve explanatory labels and burden tiles as the visible narrative layer */
.trajectory-demand-burden-chips,
.demand-scenario-note,
.trajectory-demand-adjusted-note {
  margin-top: 0.75rem;
}
/* IETM Pink Floyd simplification: END */

/* IETM compact prototype status final: BEGIN */
.status-card {
  width: min(100%, 15.6rem) !important;
  padding: 0.85rem 1rem !important;
  border-radius: 1rem !important;
}

.status-card .status-label {
  display: block;
  margin: 0 0 0.65rem !important;
  color: rgba(235,245,242,0.84);
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  font-weight: 850;
}

.prototype-status-list {
  display: grid;
  gap: 0 !important;
}

.prototype-status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.prototype-status-row span {
  color: rgba(235,245,242,0.72);
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}

.prototype-status-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  font-size: 0.7rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

.prototype-status-row strong i {
  display: inline-grid;
  place-items: center;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  line-height: 1;
  color: #06160f;
}

.prototype-status-row .status-ok {
  color: #72f09a;
}

.prototype-status-row .status-ok i {
  background: #72f09a;
}

.prototype-status-row .status-bad {
  color: #ff6f7d;
}

.prototype-status-row .status-bad i {
  background: #ff6f7d;
}

.prototype-status-row .status-warn {
  color: #ffd866;
}

.prototype-status-row .status-warn i {
  background: #ffd866;
}

.prototype-status-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem !important;
  margin: 0.72rem 0 0 !important;
}

.prototype-status-meta div {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.prototype-status-meta dt {
  margin: 0 0 0.2rem !important;
  color: rgba(235,245,242,0.62);
  font-size: 0.58rem !important;
  line-height: 1.1 !important;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.prototype-status-meta dd {
  margin: 0 !important;
  color: rgba(244,255,248,0.95);
  font-size: 0.68rem !important;
  line-height: 1.12 !important;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .status-card {
    width: 100% !important;
  }
}
/* IETM compact prototype status final: END */

/* IETM generation-now sparkline restore: BEGIN */
.generation-now-sparkline {
  display: block;
  width: min(8rem, 100%);
  height: 2rem;
  margin: 0.35rem 0 0.45rem;
  overflow: visible;
}

.generation-now-sparkline-baseline {
  fill: none;
  stroke: rgba(114,214,255,0.24);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.generation-now-sparkline-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* IETM generation-now sparkline restore: END */

/* IETM forced generation-now sparkline: BEGIN */
.generation-now-forced-sparkline {
  display: block;
  width: min(8.75rem, 100%);
  height: 2.25rem;
  margin: 0.38rem 0 0.46rem;
  overflow: visible;
}
/* IETM forced generation-now sparkline: END */

/* IETM post-render generation sparkline repair: BEGIN */
.generation-now-repaired-sparkline {
  display: block;
  width: min(8.75rem, 100%);
  height: 2rem;
  margin: 0.38rem 0 0.45rem;
  overflow: visible;
}

.generation-now-repaired-baseline {
  fill: none;
  stroke: rgba(114,214,255,0.28);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.generation-now-repaired-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* IETM post-render generation sparkline repair: END */

/* IETM generation mix other-renewables teal: BEGIN */
/* Latest generation mix only: Others (calculated), rendered as .other-renewables. */
#mixBars .mix-row.other-renewables .bar-fill {
  background: #2dd4bf !important;
}
/* IETM generation mix other-renewables teal: END */

/* v0.59 RES-E demand fan arriving renewables: BEGIN */
.rese-gap-supply-line {
  fill: none;
  stroke: var(--green, #72e0a8);
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(114, 224, 168, 0.18));
}

.rese-gap-dot.supply-central {
  fill: var(--green, #72e0a8);
  stroke: rgba(4, 12, 10, 0.9);
  stroke-width: 2;
}

.rese-gap-label.supply-central {
  fill: var(--green, #72e0a8);
  font-weight: 850;
  paint-order: stroke;
  stroke: rgba(4, 12, 10, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.rese-gap-legend i.supply {
  background: var(--green, #72e0a8);
  box-shadow: 0 0 0 1px rgba(114, 224, 168, 0.2);
}
/* v0.59 RES-E demand fan arriving renewables: END */

/* v0.70 Transition pathway v2 graph: BEGIN */
.transition-v2-benchmark {
  fill: none;
  stroke: var(--lime, #b7ef67);
  stroke-width: 3px;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.transition-v2-official {
  fill: none;
  stroke: var(--blue, #72d6ff);
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.transition-v2-drag {
  fill: none;
  stroke: #d9a441;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.transition-v2-arrivals {
  fill: none;
  stroke: var(--green, #72e0a8);
  stroke-width: 3.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.transition-v2-uplift {
  stroke: var(--green, #72e0a8);
  stroke-width: 4px;
  stroke-linecap: round;
  opacity: 0.9;
}

.transition-v2-dot {
  stroke: rgba(4, 12, 10, 0.9);
  stroke-width: 1.2px;
}

.transition-v2-dot.official {
  fill: var(--blue, #72d6ff);
}

.transition-v2-dot.drag {
  fill: #d9a441;
}

.transition-v2-dot.arrivals {
  fill: var(--green, #72e0a8);
  stroke-width: 1.5px;
}

.transition-v2-label {
  font-weight: 820;
  paint-order: stroke;
  stroke: rgba(4, 12, 10, 0.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.transition-v2-label.benchmark {
  fill: var(--lime, #b7ef67);
}

.transition-v2-label.official {
  fill: var(--blue, #72d6ff);
}

.transition-v2-label.drag {
  fill: #d9a441;
}

.transition-v2-label.arrivals,
.transition-v2-label.uplift {
  fill: var(--green, #72e0a8);
}

.transition-v2-label.gap {
  fill: rgba(235, 245, 242, 0.84);
}

.transition-v2-legend i.benchmark {
  background: var(--lime, #b7ef67);
}

.transition-v2-legend i.official {
  background: var(--blue, #72d6ff);
}

.transition-v2-legend i.drag {
  background: #d9a441;
}

.transition-v2-legend i.arrivals {
  background: var(--green, #72e0a8);
}

.transition-v2-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.transition-v2-cards article {
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.045);
}

.transition-v2-cards span,
.transition-v2-cards small {
  display: block;
  color: var(--muted, #9fb3bd);
}

.transition-v2-cards strong {
  display: block;
  margin: 0.25rem 0;
  color: var(--text, #ecf6f8);
  font-size: 1.16rem;
}

.transition-v2-cards p {
  margin: 0.45rem 0 0;
  color: var(--muted, #9fb3bd);
  font-size: 0.86rem;
}

.transition-v2-note code {
  color: var(--green, #72e0a8);
}

@media (max-width: 860px) {
  .transition-v2-cards {
    grid-template-columns: 1fr;
  }
}
/* v0.70 Transition pathway v2 graph: END */

/* v0.71 Transition pathway card cleanup: BEGIN */
.transition-v2-cards article {
  min-height: 0;
}

.transition-v2-cards article.official-card {
  border-color: rgba(114, 214, 255, 0.24);
}

.transition-v2-cards article.drag-card {
  border-color: rgba(217, 164, 65, 0.25);
}

.transition-v2-cards article.uplift-card,
.transition-v2-cards article.corrected-card {
  border-color: rgba(114, 224, 168, 0.25);
}

.transition-v2-cards article.official-card strong {
  color: var(--blue, #72d6ff);
}

.transition-v2-cards article.drag-card strong {
  color: #d9a441;
}

.transition-v2-cards article.uplift-card strong,
.transition-v2-cards article.corrected-card strong {
  color: var(--green, #72e0a8);
}

.transition-v2-context {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(114, 214, 255, 0.16);
  border-radius: 0.85rem;
  color: var(--muted, #9fb3bd);
  background: rgba(114, 214, 255, 0.045);
  font-size: 0.92rem;
  line-height: 1.45;
}

.transition-v2-note {
  margin-top: 0.85rem;
}
/* v0.71 Transition pathway card cleanup: END */

/* v0.73 Force transition pathway v2 visibility: BEGIN */
.transition-v2-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 1rem;
}

.transition-v2-panel .rese-gap-chart-wrap,
.transition-v2-panel .transition-v2-svg,
.transition-v2-panel svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.transition-v2-panel .rese-gap-chart-wrap {
  min-height: 390px;
}
/* v0.73 Force transition pathway v2 visibility: END */

/* v0.74 Crisp RES-E trajectory panel: BEGIN */
/* Hide the old duplicated target-drift strip and second Off track verdict.
   The v2 graph and four cards now carry the message. */
#targetDriftGrid {
  display: none !important;
}

.transition-v2-context,
.transition-v2-note {
  display: none !important;
}

.transition-v2-bottomline {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #9fb3bd);
  font-size: 0.88rem;
  line-height: 1.45;
}
/* v0.74 Crisp RES-E trajectory panel: END */

/* v0.75 RES-E pathway label polish: BEGIN */
.transition-v2-uplift {
  stroke: rgba(255, 255, 255, 0.78) !important;
  stroke-width: 1.4px !important;
  stroke-dasharray: 4 6 !important;
  stroke-linecap: round;
  opacity: 0.92;
}

.transition-v2-label.gap {
  fill: rgba(235, 245, 242, 0.9);
}

.transition-v2-label.drag {
  paint-order: stroke;
  stroke-width: 3.5px;
}
/* v0.75 RES-E pathway label polish: END */