/* OEO data center dashboard */
:root {
  --navy: #0a3954; --navy-2: #1f5a7c; --slate: #527086; --tint: #eef2f5; --gold: #fbcb39;
  --ink: #1f2933; --ink-2: #52606d; --ink-3: #616e7c;
  --line: #e4e7eb; --line-2: #cbd2d9; --surface: #ffffff; --bg: #f5f7f9;
  --case-u: #2a6fb0; --case-n: #c4561d;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
a { color: var(--navy-2); }
button { font: inherit; }
[hidden] { display: none !important; }
/* Nothing shows until dashboard.js has put the text in, so the empty page never paints and then
   jumps (layout shift). The class comes from a script in the page head, so without JavaScript
   nothing is hidden; it goes when the text is in, after 3 s, or if a script fails to load. */
.dash-wait body { visibility: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Headings and labels wrap into even lines, so no word (or ⓘ) is left alone on the last line */
h1, h2, h3, .tile .label { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* Site header: mirrors openenergyoutlook.org */
.site-header { background: var(--surface); border-bottom: 3px solid var(--gold); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.site-header img { height: 48px; display: block; }
.site-nav { display: flex; gap: 22px; }
.site-nav a { color: var(--navy); text-decoration: none; font-size: 15px; padding: 4px 0; }
.site-nav a[aria-current="page"] { color: var(--navy-2); font-weight: 600; }
.site-header .menu-btn { display: none; margin-left: auto; width: 40px; height: 40px; }
.site-header .menu-btn svg { width: 20px; height: 20px; }

/* Page header */
.page-head { background: var(--tint); }
.page-head .wrap { padding-top: 28px; padding-bottom: 20px; }
.eyebrow { color: var(--slate); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
h1 { color: var(--navy); font-size: 30px; line-height: 1.2; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 760px; margin: 0 0 16px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.btn-primary { background: var(--navy); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-primary:hover { background: var(--navy-2); }
.btn-primary:not([href]) { cursor: default; }
.btn-primary:not([href]):hover { background: var(--navy); }
.btn-secondary { background: var(--surface); color: var(--navy); border: 1px solid var(--navy); border-radius: 6px; padding: 7px 13px; text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-secondary:hover { background: var(--tint); }
.btn-secondary:not([href]) { cursor: default; }
.btn-secondary:not([href]):hover { background: var(--surface); }
/* About these results: the toggle sits in the action row; its text opens below the row at the
   intro's measure, so the row never moves */
.disclosure { background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy-2); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.disclosure::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.disclosure[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.about-text { color: var(--ink-2); font-size: 14px; max-width: 760px; margin: 12px 0 0; }
.text-link { color: var(--navy-2); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.text-link:hover { text-decoration: underline; }

/* Control bar */
.controls { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.controls .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding-top: 10px; padding-bottom: 10px; }
.ctl { display: flex; flex-direction: column; gap: 4px; }
.ctl-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: 6px 12px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg button:focus-visible { outline-offset: -3px; }
select { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 30px 6px 10px; appearance: none; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ctl-spacer { flex: 1; }
/* The case key, "What are these?" and copy link: one flex row, each item wraps only when it doesn't fit */
.ctl-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
.key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chip-btn { background: none; border: 0; color: var(--navy-2); cursor: pointer; padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }
.icon-btn { background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); padding: 0; }
.icon-btn:hover { color: var(--navy); border-color: var(--slate); }
.icon-btn svg { width: 16px; height: 16px; }
/* PNG until Plotly has loaded */
.icon-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.icon-btn[aria-disabled="true"]:hover { color: var(--ink-2); border-color: var(--line-2); }
.copied { font-size: 12px; color: var(--ink-3); }
.copied:empty { display: none; }
.link-field { font: inherit; font-size: 13px; width: min(360px, 100%); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; }

/* Info popover: one component for every ⓘ and "What are these?" */
.popover { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,42,67,.12);
  padding: 14px 16px; width: min(420px, calc(100vw - 32px)); font-size: 14px; color: var(--ink-2); }
.popover h3 { font-size: 13px; color: var(--ink); margin: 10px 0 4px; }
.popover h3 .normal { font-weight: 400; }
.popover ul { margin: 0; padding-left: 18px; }
.popover p { margin: 0; }
/* "What are these?": a text column of at most 520px (dashboard.js right-aligns it under its link) */
.popover.wide { width: min(554px, calc(100vw - 32px)); }
.popover p + p { margin-top: 8px; }

/* Tabs */
/* The tab row closes the page header (the top-level choice); the control bar below it opens the
   tab's content. The tabs sit 1px over the row's bottom rule, so the active tab's border covers it.
   The tabs wrap when they don't fit (phones), so every tab is always visible and nothing scrolls
   sideways. */
/* Navy tab band: the site's navy, white labels, gold underline on the active tab. */
.tab-row { background: var(--navy); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px 9px; color: #d3dde5; font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--gold); }
.tabs button:focus-visible { outline-offset: -3px; }

/* Stat tiles */
.section { margin-top: 24px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.section-head h2 { font-size: 18px; color: var(--ink); margin: 0; font-weight: 650; }
.section-head .context { font-size: 14px; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Tiles in a row share their label, value and detail rows, so the values line up when a label wraps */
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: inherit;
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.tile:hover { border-color: var(--slate); }
.tile .label { font-size: 14px; color: var(--ink-2); margin: 0 0 4px; }
.tile .value { font-size: 44px; line-height: 1.1; font-weight: 650; color: var(--navy); margin: 0; letter-spacing: -.02em; min-height: 1.1em; }
.tile .detail { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; min-height: 1.5em; }
.tile .detail b { color: var(--ink); font-weight: 600; }
.range-note { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }

/* Cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 10px; min-width: 0; }
/* A card or the footer scrolled to lands below the sticky control bar (--bar-h, set from its height) */
.card, .site-footer { scroll-margin-top: calc(var(--bar-h, 0px) + 16px); }
/* Cards side by side share their head and chart rows, so their plot areas line up */
.cards > .card, .card-grid > .card { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
.card.full { grid-column: 1 / -1; }
.card:focus:not(:focus-visible) { outline: none; }
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; margin-bottom: 8px; }
.card-head h3 { grid-column: 1; font-size: 16px; line-height: 1.4; margin: 0; color: var(--ink); font-weight: 650; }
.card-head .info-btn { width: 24px; height: 24px; border: 0; background: none; color: var(--ink-3); vertical-align: middle; margin: -4px 0 -4px 2px; }
.card-head .info-btn:hover { color: var(--navy); }
.card-head .info-btn svg { width: 16px; height: 16px; }
.card-head .sub { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--ink-3); margin: 2px 0 0; }
.card-actions { grid-column: 2; grid-row: 1; display: flex; gap: 6px; }
.card-actions .icon-btn { width: 28px; height: 28px; }
.chart { width: 100%; min-width: 0; }
.chart-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px 20px; align-items: start; }
.legend { list-style: none; margin: 0; padding: 40px 0 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-2); }
/* The swatch, then the label: a wrapped label lines up with its first line */
.legend li { display: flex; align-items: flex-start; }
/* Legend below the chart (dashboard.js decides: no room beside it), in two columns */
.chart-row.legend-below { grid-template-columns: minmax(0, 1fr); }
/* Two columns that read down the stack (column by column) */
.chart-row.legend-below .legend { display: block; column-count: 2; column-gap: 12px; padding: 0 0 4px 4px; }
.chart-row.legend-below .legend li, .group-row.legend-below .legend li { break-inside: avoid; margin-bottom: 6px; }
.legend .sw { flex: none; width: 10px; height: 10px; border-radius: 2px; margin: 4px 8px 0 0; }
.legend .sw.round { border-radius: 50%; }
.legend .sw.line { width: 18px; height: 3px; border-radius: 0; margin-top: 8px; }
/* Card group: rows of two cards (one column below 768px), each row with one legend in its own card.
   Beside the row, the legend card spans the row's height; where it can't sit beside (dashboard.js
   placeGroup), it goes below the row. In one column each card shows its own legend below its
   chart, and the row legends are hidden. */
.card-group { grid-column: 1 / -1; display: grid; gap: 16px; }
.group-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: stretch; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.legend-card { padding: 16px; }
.legend-card .legend { padding: 0; }
.group-row.legend-below { grid-template-columns: minmax(0, 1fr); }
.group-row.legend-below .legend { display: block; column-count: 2; column-gap: 12px; }
@media (min-width: 768px) { .card-grid .chart-row > .legend { display: none; } }
@media (max-width: 767.98px) { .card-grid, .group-row { grid-template-columns: 1fr; } .group-row > .legend-card { display: none; } }

/* Table card: top flow changes */
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 14px; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.data-table th, .data-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.data-table th:first-child { text-align: left; padding-left: 0; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.data-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); border-bottom-color: var(--line-2); vertical-align: bottom; white-space: normal; }
.data-table tbody th { font-weight: 600; color: var(--ink); }
.data-table td { color: var(--ink-2); }

/* Footer */
.site-footer { background: var(--navy); color: #dce6f0; margin-top: 48px; font-size: 14px; }
.site-footer .wrap { padding-top: 24px; padding-bottom: 28px; }
.site-footer a { color: var(--gold); overflow-wrap: anywhere; }
.cite { max-width: 860px; margin: 0 0 12px; }
.license { margin: 0; }

@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
/* Phones: the table fits a 375px screen with smaller headers and tighter columns */
@media (max-width: 480px) {
  /* the five tabs on two rows at 375; every subtitle on one line */
  .tabs button { font-size: 14px; padding: 10px 10px; }
  .card-head .sub { font-size: 12px; }
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding-left: 3px; padding-right: 3px; }
  .data-table thead th { font-size: 11px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 0 18px; }
  .site-header img { height: 40px; }
  .site-header .menu-btn { display: inline-grid; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: 8px; }
  .site-header.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 10px 0; border-top: 1px solid var(--line); }
  h1 { font-size: 24px; }
  .lede { font-size: 15px; }
  .controls { position: static; }
  .ctl-spacer { display: none; }
  .tiles { grid-template-columns: 1fr; }
  .tile .value { font-size: 36px; }
}