/* Data Center Tracking Index — page components.
   Loaded after site.css on /data-center-index/ pages only. Uses the site tokens.
   CSP note: no inline styles anywhere; bar widths are SVG attributes, map tiles are placed by class. */

:root { --gas: #a1460a; --tile-0: #eef0ea; --tile-1: #e4f0bd; --tile-2: #bfdd39; --tile-3: #3aa010; --tile-4: #1f4f0a; }

.dci .section h2 { max-width: 30ch; }
.dci .section-intro { max-width: 62ch; margin-bottom: 32px; }
.dci .callout--preview { border-left-color: #e3a86b; margin: 0 0 40px; }
.dci .callout--preview p { font-size: 15px; }

/* icon sprite holder */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- lightning-bolt rating ---------- */
.bolts { display: inline-flex; gap: 1px; vertical-align: middle; flex: none; }
.bolt { width: 18px; height: 18px; max-width: none; flex: none; display: block; stroke-width: 1.8; stroke-linejoin: round; }
.bolt.on { fill: var(--ink); stroke: var(--ink); }
.bolt.spec { fill: #fff; stroke: var(--ink); }
.bolt.off { fill: #dfe2d8; stroke: #dfe2d8; }
.bolts--lg .bolt { width: 30px; height: 30px; }
.bolts--md .bolt { width: 22px; height: 22px; }
.rating { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.drv { font-size: 13px; font-weight: 700; color: var(--green-text); }
.drv--gas { color: var(--gas); }
.drv--both { color: var(--ink); }

/* ---------- status pills ---------- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.pill--op { background: var(--ink); color: #fff; }
.pill--exp { background: var(--green-deeper); color: #fff; }
.pill--uc { background: var(--green); color: var(--ink); }
.pill--appr { background: #d9ecb0; color: var(--ink); }
.pill--ann { background: var(--lime); color: var(--ink); }
.pill--prop { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #8f9389; }

/* ---------- tile map + side panel ---------- */
.dci-map { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.dci-map__map { flex: 999 1 560px; min-width: 0; }
.dci-map__panel { flex: 1 1 320px; min-width: 0; background: var(--soft); border-radius: 4px; padding: 28px; }
.tmap { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.tile { aspect-ratio: 1 / 1; min-width: 0; border: 0; border-radius: 4px; padding: 0; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.1; color: var(--ink); }
.tile .t-ab { font-size: 13px; font-weight: 700; }
.tile .t-gw { font-size: 11px; font-weight: 600; }
.tile.b0 { background: var(--tile-0); color: #55594f; cursor: default; }
.tile.b1 { background: var(--tile-1); }
.tile.b2 { background: var(--tile-2); }
.tile.b3 { background: var(--tile-3); }
.tile.b4 { background: var(--tile-4); color: #fff; }
.tile[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.tile.b4[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--lime); }
.tile:focus-visible { outline-offset: 1px; }
@media (max-width: 600px) { .tile .t-gw { display: none; } .tile .t-ab { font-size: 11px; } .tmap { gap: 3px; } }
.tlegend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 18px; font-size: 14px; color: var(--body); }
.tlegend b { color: var(--ink); }
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin-right: 6px; }
.sw.b0 { background: var(--tile-0); box-shadow: inset 0 0 0 1px #d6d9cf; } .sw.b1 { background: var(--tile-1); } .sw.b2 { background: var(--tile-2); } .sw.b3 { background: var(--tile-3); } .sw.b4 { background: var(--tile-4); }
.tpanel__country { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-text); margin: 0; }
.tpanel__name { font-size: 30px; margin: 4px 0 18px; }
.tpanel__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.tpanel__stats div { display: grid; }
.tpanel__stats dt { order: 2; font-size: 14px; color: var(--body); }
.tpanel__stats dd { order: 1; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tpanel__stats .gasv { color: var(--gas); }
.tpanel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tpanel__list li { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; display: grid; gap: 6px; }
.tpanel__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tpanel__top b { font-size: 15px; line-height: 1.35; }
.tpanel__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--body); }
.tpanel__empty { font-size: 15px; }
.tpanel__more { margin-top: 14px; font: inherit; font-size: 15px; font-weight: 700; color: var(--green-text); background: none; border: 0; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }

/* ---------- filters + campus table ---------- */
.dci-filters { display: grid; gap: 12px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips__label { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 4.5rem; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #c4c7bd; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .bolt { width: 15px; height: 15px; }
.chip[aria-pressed="true"] .bolt.on { fill: #fff; stroke: #fff; }
.dci-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 14px; color: var(--body); margin: 0 0 8px; }
.dci-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.dci-legend > .lg-txt { display: inline; }
.dci-count { font-size: 15px; color: var(--body); margin: 0; }
.dci-count b { color: var(--ink); }
.section--sheet table.data, .section--tint table.data { background: #fff; }
table.dci-table { font-size: 15px; min-width: 1060px; }
table.dci-table thead th { padding-left: 12px; white-space: nowrap; }
table.dci-table td { padding: 13px 12px; }
table.dci-table td:first-child { font-weight: 600; min-width: 13rem; }
table.dci-table td.loc { min-width: 10rem; }
.dci-table .dev { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.dci-table .loc small { display: block; font-size: 13px; }
.dci-table .conf { text-align: center; font-weight: 700; color: var(--ink); }
.dci-table tr.is-hidden { display: none; }
.dci-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center; }

/* ---------- regional scorecard ---------- */
table.dci-score { min-width: 980px; font-size: 15px; }
table.dci-score td, table.dci-score th { vertical-align: middle; }
.dci-score .rk { font-size: 24px; font-weight: 800; color: var(--ink); width: 3rem; }
.dci-score .rg { display: block; font-weight: 700; color: var(--ink); }
.dci-score .rg-d { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.dci-score .na { color: var(--muted); font-size: 14px; }
.bar { display: block; width: 100%; min-width: 180px; height: 14px; }
.bar .track { fill: #eceee7; }
.bar .grid { fill: var(--green); }
.bar .onsite { fill: var(--gas); }
.bar-v { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.key { display: inline-block; width: 22px; height: 10px; border-radius: 2px; vertical-align: 0; margin-right: 8px; }
.key--grid { background: var(--green); } .key--onsite { background: var(--gas); }
.shield { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.shield--partial { background: #d9ecb0; color: var(--ink); }
.shield--strong { background: var(--lime); color: var(--ink); }
.shield--review { background: #eceee7; color: #4f5349; }
.dci-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 20px; margin-top: 40px; }
.dci-pair .card--ink { background: var(--ink); border-color: var(--ink); }
.dci-pair .card--ink .label { color: var(--lime); }
.dci-pair .card--ink .card-h { color: #fff; }
.dci-pair .card--ink p { color: #d4d4d4; }
.label--gas { color: var(--gas) !important; }

/* ---------- bill calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc .form { padding: 32px; max-width: none; min-width: 0; }
.calc .form label { min-width: 0; }
.calc .form input, .calc .form select { width: 100%; min-width: 0; }
.calc input[type="range"] { padding: 0; accent-color: var(--green-dark); min-height: 44px; border: 0; }
.calc-out { background: var(--ink); color: #d4d4d4; padding: 32px; display: grid; gap: 18px; align-content: start; }
.calc-out .co-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin: 0; }
.calc-out .co-big { font-size: clamp(40px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; color: var(--lime); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.calc-out .co-sub { color: #e6e6e6; font-size: 17px; margin: 0; }
.calc-out .co-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #3a3a3a; padding-top: 18px; }
.calc-out .co-row b { display: block; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calc-out .co-row span { font-size: 14px; color: #c9c9c9; }
.calc-out .co-note { font-size: 13px; color: #bdbdbd; margin: 0; }
.calc-out .co-split { display: block; width: 100%; height: 16px; }
.calc-out .co-split .dc { fill: var(--lime); } .calc-out .co-split .rest { fill: #444; }
.calc-out .co-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #e0e0e0; margin: 6px 0 0; }
.calc-out [hidden] { display: none !important; }
.calc-out a { color: var(--lime); }

/* ---------- small column chart (capacity prices) ---------- */
figure.chart .chart-scroll .cap-svg { min-width: 520px; max-width: 760px; margin: 0 auto; }
.cap-svg .col { fill: var(--lime); } .cap-svg .col--hi { fill: var(--green); } .cap-svg .col--last { fill: var(--green-deeper); }
.cap-svg text { font-family: var(--font); fill: var(--ink); }
.cap-svg .axis { stroke: #8f9389; stroke-width: 1; }

/* ---------- rating page ---------- */
table.dci-scale { min-width: 900px; }
table.dci-scale td { vertical-align: top; }
.dci-scale .lvl { display: grid; gap: 8px; }
.dci-scale .lvl b { font-size: 18px; color: var(--ink); }
.dci-scale .thr { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.dci-scale .ex { display: block; font-size: 14px; margin-bottom: 4px; }
.dist { display: block; width: 100%; height: 18px; margin: 8px 0 12px; }
.dist .d4 { fill: var(--ink); } .dist .d3 { fill: var(--green); } .dist .d2 { fill: var(--lime); } .dist .d1 { fill: #c4c7bd; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; margin: 0; }
.dist-legend b { color: var(--ink); }
.k4 { background: var(--ink); } .k3 { background: var(--green); } .k2 { background: var(--lime); } .k1 { background: #c4c7bd; }

/* ---------- methodology ---------- */
.dci-method table.data { font-size: 15px; }
.dci-method .stages--1col li > p { max-width: 64ch; }
@media print { .dci-filters, .dci-actions, .calc, .tmap, .dci-map__panel { display: none; } }

/* tile placement (generated) */
.t-BC { grid-column: 2; grid-row: 1; }
.t-AB { grid-column: 3; grid-row: 1; }
.t-SK { grid-column: 4; grid-row: 1; }
.t-MB { grid-column: 5; grid-row: 1; }
.t-ON { grid-column: 7; grid-row: 1; }
.t-QC { grid-column: 9; grid-row: 1; }
.t-NB { grid-column: 10; grid-row: 1; }
.t-NS { grid-column: 11; grid-row: 1; }
.t-AK { grid-column: 1; grid-row: 2; }
.t-ME { grid-column: 11; grid-row: 2; }
.t-VT { grid-column: 10; grid-row: 3; }
.t-NH { grid-column: 11; grid-row: 3; }
.t-WA { grid-column: 1; grid-row: 4; }
.t-ID { grid-column: 2; grid-row: 4; }
.t-MT { grid-column: 3; grid-row: 4; }
.t-ND { grid-column: 4; grid-row: 4; }
.t-MN { grid-column: 5; grid-row: 4; }
.t-IL { grid-column: 6; grid-row: 4; }
.t-WI { grid-column: 7; grid-row: 4; }
.t-MI { grid-column: 8; grid-row: 4; }
.t-NY { grid-column: 9; grid-row: 4; }
.t-RI { grid-column: 10; grid-row: 4; }
.t-MA { grid-column: 11; grid-row: 4; }
.t-OR { grid-column: 1; grid-row: 5; }
.t-NV { grid-column: 2; grid-row: 5; }
.t-WY { grid-column: 3; grid-row: 5; }
.t-SD { grid-column: 4; grid-row: 5; }
.t-IA { grid-column: 5; grid-row: 5; }
.t-IN { grid-column: 6; grid-row: 5; }
.t-OH { grid-column: 7; grid-row: 5; }
.t-PA { grid-column: 8; grid-row: 5; }
.t-NJ { grid-column: 9; grid-row: 5; }
.t-CT { grid-column: 10; grid-row: 5; }
.t-CA { grid-column: 1; grid-row: 6; }
.t-UT { grid-column: 2; grid-row: 6; }
.t-CO { grid-column: 3; grid-row: 6; }
.t-NE { grid-column: 4; grid-row: 6; }
.t-MO { grid-column: 5; grid-row: 6; }
.t-KY { grid-column: 6; grid-row: 6; }
.t-WV { grid-column: 7; grid-row: 6; }
.t-VA { grid-column: 8; grid-row: 6; }
.t-MD { grid-column: 9; grid-row: 6; }
.t-DE { grid-column: 10; grid-row: 6; }
.t-AZ { grid-column: 2; grid-row: 7; }
.t-NM { grid-column: 3; grid-row: 7; }
.t-KS { grid-column: 4; grid-row: 7; }
.t-AR { grid-column: 5; grid-row: 7; }
.t-TN { grid-column: 6; grid-row: 7; }
.t-NC { grid-column: 7; grid-row: 7; }
.t-SC { grid-column: 8; grid-row: 7; }
.t-DC { grid-column: 9; grid-row: 7; }
.t-OK { grid-column: 4; grid-row: 8; }
.t-LA { grid-column: 5; grid-row: 8; }
.t-MS { grid-column: 6; grid-row: 8; }
.t-AL { grid-column: 7; grid-row: 8; }
.t-GA { grid-column: 8; grid-row: 8; }
.t-HI { grid-column: 1; grid-row: 9; }
.t-TX { grid-column: 4; grid-row: 9; }
.t-FL { grid-column: 9; grid-row: 9; }