/* data-explorer.css
   Charts and the interactive data explorer used in data articles (js/sbti-explorer.js).
   Loaded only by pages that need it. Uses the palette tokens from style.css.
   One data hue (azure); grey marks context; text always wears ink colours, never the series colour. */

.sx-figure{margin:1.8rem 0 2.2rem}
.sx-figure h3,.sx-chart-title{font-size:0.95rem;font-weight:700;color:var(--navy);line-height:1.45;margin:0 0 0.25rem}
.sx-figure .sx-sub{font-size:0.82rem;color:#6b7785;margin:0 0 0.9rem;max-width:none}
.sx-figure figcaption{margin-top:0.7rem;font-size:0.78rem;color:#6b7785;line-height:1.6}
.sx-failed{font-size:0.85rem;color:#6b7785;background:var(--cloud);border-radius:6px;padding:0.8rem 1rem}

/* ---- bars ---- */
.sx-bars{display:grid;gap:0.5rem}
.sx-row{
  display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr) 3.4rem;
  grid-template-areas:"label track val" "label detail detail";
  column-gap:0.8rem;align-items:center;border-radius:4px;padding:0.1rem 0.2rem;
}
.sx-row:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.sx-label{grid-area:label;font-size:0.84rem;color:var(--text);line-height:1.35;overflow-wrap:anywhere}
.sx-track{grid-area:track;position:relative;height:14px;border-radius:0 4px 4px 0;background:transparent}
.sx-share .sx-track{background:#E7ECF0}
.sx-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--azure);min-width:0}
.sx-fill.is-sliver{min-width:3px}
.sx-row.is-muted .sx-fill{background:#B4C0CA}
.sx-fill-sub{background:#0F6F8E;border-right:2px solid #fff;border-radius:0}
.sx-val{grid-area:val;font-size:0.9rem;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.sx-detail{grid-area:detail;font-size:0.74rem;color:#6b7785;line-height:1.4;font-variant-numeric:tabular-nums}
.sx-row:hover .sx-fill,.sx-row:focus .sx-fill{filter:brightness(0.92)}
.sx-axis{
  display:flex;justify-content:space-between;font-size:0.7rem;color:#8a95a1;
  margin:0.35rem 4.2rem 0 calc(36% + 1rem);padding-top:0.3rem;border-top:1px solid #E1E7EC;
}
.sx-legend{display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;margin-top:0.8rem;font-size:0.78rem;color:var(--text)}
.sx-legend-item{display:inline-flex;align-items:center;gap:0.4rem}
.sx-swatch{width:12px;height:12px;border-radius:2px;background:var(--azure);display:inline-block}
.sx-swatch.is-muted{background:#B4C0CA}
.sx-swatch.is-sub{background:#0F6F8E}

/* ---- tooltip ---- */
.sx-tip{
  position:absolute;z-index:200;max-width:280px;pointer-events:none;
  background:var(--navy);color:#fff;border-radius:6px;padding:0.55rem 0.75rem;
  font-size:0.78rem;line-height:1.45;box-shadow:0 6px 20px rgba(3,35,77,0.25);
  opacity:0;visibility:hidden;transition:opacity 120ms ease;
}
.sx-tip.on{opacity:1;visibility:visible}
.sx-tip-head{display:block;font-weight:700;margin-bottom:0.15rem}
.sx-tip-line{display:block;color:#d6e2ee;font-variant-numeric:tabular-nums}

/* ---- explorer ---- */
.sx-explorer{
  margin:2.2rem 0 2.6rem;border:1px solid #DCE4EA;border-radius:12px;background:#fff;
  box-shadow:0 2px 18px rgba(3,35,77,0.06);overflow:hidden;
}
.sx-explorer-head{background:var(--navy);padding:1.1rem 1.4rem 1.2rem}
.sx-explorer-head h3{color:#fff;font-size:1.05rem;line-height:1.35;margin:0 0 0.25rem}
.article-wrap .sx-explorer-head p{color:#b9cede;font-size:0.84rem;line-height:1.55;margin:0;max-width:none}
.sx-kicker{color:var(--amber);font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;display:block;margin-bottom:0.35rem}
.sx-body{padding:1.3rem 1.4rem 1.5rem}
.sx-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.8rem;margin-bottom:1.3rem}
.sx-control{display:block}
.sx-control-label{display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#6b7785;margin-bottom:0.3rem}
.sx-control select{
  width:100%;font:inherit;font-size:0.86rem;color:var(--navy);background:var(--cloud);
  border:1px solid #CBD6DE;border-radius:6px;padding:0.5rem 0.6rem;cursor:pointer;
}
.sx-control select:focus-visible{outline:2px solid var(--azure);outline-offset:1px}
.sx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.8rem;margin-bottom:1.5rem}
.sx-tile{background:var(--cloud);border-radius:8px;padding:0.9rem 1rem;border:1px solid #DCE4EA}
.sx-tile-label{display:block;font-size:0.74rem;color:#5c6875;line-height:1.35;margin-bottom:0.3rem}
.sx-tile-value{display:block;font-size:1.9rem;font-weight:700;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.sx-tile-calc{display:block;font-size:0.76rem;color:#5c6875;margin-top:0.3rem;font-variant-numeric:tabular-nums}
.sx-tile-warn{display:block;font-size:0.72rem;color:#8a5a00;background:#FFF6DC;border-radius:4px;padding:0.3rem 0.45rem;margin-top:0.45rem;line-height:1.4}
.sx-chart-title{margin-bottom:0.9rem}
.sx-empty{font-size:0.88rem;color:#6b7785}
.sx-more{
  margin-top:0.9rem;font:inherit;font-size:0.8rem;font-weight:600;color:var(--azure);
  background:none;border:1.5px solid var(--azure);border-radius:4px;padding:0.4rem 0.9rem;cursor:pointer;
}
.sx-more:hover{background:var(--azure);color:#fff}
.sx-table{margin-top:1.2rem}
.sx-table summary{font-size:0.82rem;font-weight:600;color:var(--azure);cursor:pointer}
.sx-table .table-scroll{margin:0.8rem 0 0}
.sx-source{font-size:0.74rem;color:#6b7785;line-height:1.55;margin:0;padding:0.8rem 1.4rem 1rem;border-top:1px solid #E6EBEF;max-width:none}
.article-wrap p.sx-source{font-size:0.74rem;max-width:none;margin-bottom:0}

/* numeric tables read better right-aligned */
table.data.num td:not(:first-child):not(.txt),table.data.num th:not(:first-child):not(.txt){text-align:right;font-variant-numeric:tabular-nums}
.article-wrap ol.sources{font-size:0.85rem}
.article-wrap ol.sources li{font-size:0.85rem;overflow-wrap:anywhere}
.article-wrap sup a{text-decoration:none;font-weight:600}

/* ---- illustrated article hero ----
   An original inline SVG scene (sunset, turbines, fuel plant, solar field, crops) drawn in the
   brand palette and animated from here. Inline SVG + external CSS keeps it inside the site CSP. */
.page-hero.ph-illustrated{position:relative;overflow:hidden;background:var(--navy);padding:4.6rem 5% 9.5rem;isolation:isolate}
.ph-illustrated > *:not(.ph-art){position:relative;z-index:1}
.ph-illustrated h1,.ph-illustrated p.intro{text-shadow:0 1px 14px rgba(3,35,77,0.65)}
.ph-illustrated p.intro{color:#dbe7f1}
.ph-art{position:absolute;inset:0;z-index:0}
.ph-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(3,35,77,0.88) 0%,rgba(3,35,77,0.72) 34%,rgba(3,35,77,0.12) 72%,rgba(3,35,77,0) 100%);
}

.sc-rotor{transform-origin:0 0;animation:sc-spin 9s linear infinite}
.sc-r1{animation-duration:8s}
.sc-r2{animation-duration:10s}
.sc-r3{animation-duration:12s}
.sc-d1{animation-delay:-2.5s}
.sc-d2{animation-delay:-5s}
.sc-d3{animation-delay:-7s}
.sc-sunglow{transform-box:fill-box;transform-origin:center;animation:sc-breathe 9s ease-in-out infinite}
.sc-cloud{animation:sc-drift 46s ease-in-out infinite alternate}
.sc-c1{animation-duration:62s;animation-delay:-20s}
.sc-c2{animation-duration:54s;animation-delay:-35s}
.sc-sway{transform-box:fill-box;transform-origin:50% 100%;animation:sc-sway 6s ease-in-out infinite alternate}
.sc-w1{animation-duration:5s;animation-delay:-1.5s}
.sc-w2{animation-duration:4.2s;animation-delay:-3s}
.sc-steam{transform-box:fill-box;transform-origin:center;animation:sc-steam 7s ease-out infinite}
.sc-s1{animation-delay:-2.3s}
.sc-s2{animation-delay:-4.6s}
.sc-glint{animation:sc-glint 11s ease-in-out infinite}
.sc-g1{animation-delay:-2.7s}
.sc-g2{animation-delay:-5.5s}
.sc-g3{animation-delay:-8.2s}

@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-breathe{0%,100%{transform:scale(1);opacity:0.9}50%{transform:scale(1.08);opacity:1}}
@keyframes sc-drift{from{transform:translateX(-30px)}to{transform:translateX(45px)}}
@keyframes sc-sway{from{transform:skewX(-2.2deg)}to{transform:skewX(2.2deg)}}
@keyframes sc-steam{
  0%{transform:translate(0,0) scale(0.6);opacity:0}
  15%{opacity:0.5}
  100%{transform:translate(38px,-90px) scale(2.1);opacity:0}
}
@keyframes sc-glint{0%,78%,100%{opacity:0}86%{opacity:0.55}}

@media(max-width:760px){
  .page-hero.ph-illustrated{padding:3.2rem 5% 8rem}
  .ph-art::after{background:linear-gradient(to bottom,rgba(3,35,77,0.88) 0%,rgba(3,35,77,0.74) 55%,rgba(3,35,77,0.1) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .sc-rotor,.sc-sunglow,.sc-cloud,.sc-sway,.sc-steam,.sc-glint{animation:none}
}

@media(max-width:640px){
  .sx-row{grid-template-columns:minmax(0,1fr) 3.4rem;grid-template-areas:"label label" "track val" "detail detail";row-gap:0.15rem}
  .sx-axis{margin-left:0.2rem;margin-right:4.2rem}
  .sx-body{padding:1.1rem 1rem 1.2rem}
  .sx-explorer-head{padding:1rem}
  .sx-source{padding:0.8rem 1rem 1rem}
}
@media(prefers-reduced-motion:reduce){.sx-tip{transition:none}}
@media print{.sx-controls,.sx-more,.sx-tip{display:none}}

/* ---- teaser in the article: one click opens the dashboard page ---- */
.article-wrap a.sx-teaser{
  display:block;margin:1.8rem 0 2.6rem;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;
  border:1px solid #DCE4EA;background:#fff;box-shadow:0 2px 18px rgba(3,35,77,0.06);
  transition:box-shadow var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.article-wrap a.sx-teaser:hover{box-shadow:0 8px 28px rgba(3,35,77,0.16)}
.article-wrap a.sx-teaser:focus-visible{outline:3px solid var(--azure);outline-offset:3px}
.sx-teaser-head{display:block;background:var(--navy);padding:1.1rem 1.4rem 1.2rem}
.sx-teaser-title{display:block;color:#fff;font-size:1.05rem;font-weight:700;line-height:1.35}
.sx-teaser-sub{display:block;color:#b9cede;font-size:0.84rem;line-height:1.55;margin-top:0.2rem}
.sx-teaser-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.8rem;padding:1.2rem 1.4rem 0.4rem}
.sx-teaser-cta{display:inline-block;margin:0.9rem 1.4rem 1.3rem;background:var(--azure);color:#fff;font-weight:700;font-size:0.88rem;padding:0.6rem 1.2rem;border-radius:4px}
.sx-teaser:hover .sx-teaser-cta{filter:brightness(1.07)}

/* ---- dashboard page: the explorer at full width, fitted to one screen on desktop ---- */
.page-hero.sx-dash-hero{padding:1.6rem 5% 1.5rem}
.sx-dash-hero h1{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.page-hero.sx-dash-hero p.intro{margin-top:0.4rem;font-size:0.9rem;max-width:none}
.sx-dash-hero p.intro a{color:var(--amber)}
section.sx-dash-band{padding:1.6rem 3% 2.4rem}
.sx-dash{max-width:1400px;margin:0 auto}
.sx-dash .sx-body{padding:1.2rem 1.4rem 1.3rem}
.sx-dash .sx-controls{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1rem}
.sx-dash .sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:1.2rem}
.sx-dash .sx-tile{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center;padding:0.7rem 1rem}
.sx-dash .sx-tile-label{grid-column:1 / -1;margin-bottom:0.15rem}
.sx-dash .sx-tile-calc{margin-top:0}
.sx-dash .sx-tile-warn{grid-column:1 / -1}
.sx-panels{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.sx-panel{min-width:0}
.sx-dash .sx-bars{gap:0.28rem}
.sx-dash .sx-row{grid-template-columns:minmax(0,38%) minmax(0,1fr) 3.2rem 6.6rem;grid-template-areas:"label track val detail"}
.sx-dash .sx-detail{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-dash .sx-label{font-size:0.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-dash .sx-axis{margin:0.3rem 10.6rem 0 calc(38% + 1rem)}
.sx-dash .sx-panel .table-scroll{margin:0;max-height:420px;overflow:auto;border:1px solid #E1E7EC;border-radius:8px}
.sx-dash table.data{min-width:0;font-size:0.78rem}
.sx-dash table.data th,.sx-dash table.data td{padding:0.4rem 0.6rem;line-height:1.4}
.sx-dash table.data thead th{position:sticky;top:0;font-size:0.72rem}
.sx-dash table.data td:not(:first-child),.sx-dash table.data th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.sx-dash-back{max-width:1400px;margin:1.2rem auto 0}
@media(max-width:980px){
  .sx-panels{grid-template-columns:1fr}
  .sx-dash .sx-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .sx-dash .sx-tiles{grid-template-columns:1fr}
  .sx-dash .sx-row{grid-template-columns:minmax(0,1fr) 3.4rem;grid-template-areas:"label label" "track val" "detail detail"}
  .sx-dash .sx-detail{text-align:left}
  .sx-dash .sx-label{white-space:normal}
  .sx-dash .sx-axis{margin:0.3rem 4.2rem 0 0.2rem}
  .sx-dash .sx-controls{grid-template-columns:1fr}
}
.sx-teaser .sx-tile{display:block}

/* Centered page column (added 2026-10-05): keep in sync with style.css */
.page-hero.ph-illustrated,
.page-hero.sx-dash-hero{
  padding-left:max(5%,calc((100% - 1200px) / 2));
  padding-right:max(5%,calc((100% - 1200px) / 2));
}

/* Sortable table headers */
table.data th:has(.sx-sort),.sx-dash table.data th:has(.sx-sort){padding:0}
table.data th .sx-sort{all:unset;box-sizing:border-box;display:block;width:100%;padding:0.4rem 0.6rem;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
table.data th .sx-sort:hover{color:var(--amber)}
table.data th .sx-sort:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
table.data th .sx-sort::after{content:" \2195";opacity:0.4;font-weight:400}
table.data th .sx-sort.asc::after{content:" \25B2";opacity:1;color:var(--amber);font-size:0.7em}
table.data th .sx-sort.desc::after{content:" \25BC";opacity:1;color:var(--amber);font-size:0.7em}
.sx-footnote{font-size:0.74rem;color:#6b7785;line-height:1.4;margin:0.5rem 0 0}