/* How data centers work: the "follow the power and the heat" diagram (guide-explorer.js). Without JavaScript every
   part's notes stay listed beside the diagram, the diagram's parts are plain links to them, and the cooling switch
   still works through :has(). With it, one part shows at a time and the units calculator replaces its static line. */
.explore { margin:34px 0 8px; padding:22px 22px 18px; background:#fff; border:1px solid var(--line-dark); border-radius:8px; }
.explore > .kicker { margin:0 0 6px; }
.article .explore-intro { margin:0 0 14px; font-size:.95rem; }
.explore-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; padding:0; border:0; font-size:.86rem; color:#34485b; }
.explore-switch legend { float:left; margin:0 4px 0 0; padding:0; font-weight:750; color:#07111f; }
.explore-switch label { position:relative; cursor:pointer; padding:6px 13px; border:1px solid #b9c7d3; border-radius:999px; background:#f4f7f9; color:#1d3347; font-weight:650; }
.explore-switch input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.explore-switch label:has(input:checked) { background:#07111f; border-color:#07111f; color:#fff; }
.explore-switch label:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:2px; }
.explore:has(input[value="tower"]:checked) .explore-dry-only,
.explore:has(input[value="dry"]:checked) .explore-tower-only { display:none; }
/* The drawing spans the figure; the numbered list and the chosen part's notes sit under it, side by side. */
.explore-body { display:grid; grid-template-columns:minmax(190px,.75fr) minmax(0,1.75fr); grid-template-areas:"drawing drawing" "index panel"; gap:18px 24px; align-items:start; }
.explore-stage { display:contents; }
.explore-svg { grid-area:drawing; }
.explore-panel { grid-area:panel; min-width:0; }

.explore-svg { display:block; width:100%; height:auto; font-family:var(--sans); }
.explore-svg .underground { fill:#eef2f5; }
.explore-svg .building-fill { fill:#f7f9fb; }
.explore-svg .building-outline { fill:none; stroke:#1d3347; stroke-width:2.5; pointer-events:none; }
.explore-svg .ground-line { stroke:#8fa3b6; stroke-width:2; pointer-events:none; }
.explore-svg .frame { fill:none; stroke:#1d3347; stroke-width:2; pointer-events:none; }
.explore-svg .art { fill:#fff; stroke:#1d3347; stroke-width:2; stroke-linejoin:round; }
.explore-svg .art-fill { fill:#dfe7ee; stroke:#1d3347; stroke-width:2; stroke-linejoin:round; }
.explore-svg .art-line { fill:none; stroke:#1d3347; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.explore-svg .flow { fill:none; stroke-width:4; stroke-linecap:round; pointer-events:none; }
.explore-svg .flow-power { stroke:#d48418; }
.explore-svg .flow-backup { stroke:#d48418; stroke-dasharray:7 6; }
.explore-svg .flow-warm { stroke:#c4502f; }
.explore-svg .flow-cool, .explore-svg .flow-water { stroke:#2f6fae; }
.explore-svg .flow-discharge { stroke:#8a7660; }
.explore-svg .flow-anim { stroke-dasharray:12 7; animation:explore-flow 1.6s linear infinite; }
.explore-svg .plume { fill:none; stroke:#9fb4c6; stroke-width:3; stroke-linecap:round; }
.explore-svg .plume-warm { stroke:#e3a08b; }
.explore-svg .note { fill:#566779; font-size:12px; font-weight:650; }
.explore-svg .hit { cursor:pointer; }
.explore-svg .hit-area { fill:transparent; stroke:transparent; stroke-width:2; }
.explore-svg .hit:hover .hit-area { fill:rgba(36,127,140,.06); }
.explore-svg .hit.is-selected .hit-area { fill:rgba(36,127,140,.1); stroke:#247f8c; stroke-dasharray:6 5; }
.explore-svg .tag > rect { fill:#fff; stroke:#c9d4dd; }
.explore-svg .tag circle { fill:#07111f; }
.explore-svg .hit.is-selected .tag circle { fill:#247f8c; }
.explore-svg .tag .num { fill:#fff; font-size:14px; font-weight:800; text-anchor:middle; }
.explore-svg .tag .name { fill:#07111f; font-size:14px; font-weight:750; }
@keyframes explore-flow { to { stroke-dashoffset:-19; } }

.article .explore-index { grid-area:index; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:6px; min-width:0; }
.article .explore-index li { margin:0; font-size:.88rem; }
.article .explore-index a { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 10px; border:1px solid var(--line-dark); border-radius:6px; background:#f8fafb; color:#07111f; font-weight:650; text-decoration:none; line-height:1.2; }
.article .explore-index a:hover { border-color:#247f8c; }
.article .explore-index a[aria-current="true"] { border-color:#247f8c; background:#e9f3f5; }
.explore-num { display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:#07111f; color:#fff; font:800 .74rem/1 var(--sans); }
.explore-index a[aria-current="true"] .explore-num, .explore-part h3 .explore-num { background:#247f8c; }

.explore-part { padding:0 0 16px; margin:0 0 16px; border-bottom:1px solid var(--line-dark); }
.explore-part:last-child { padding-bottom:0; margin-bottom:0; border-bottom:0; }
.article .explore-part h3 { display:flex; align-items:center; gap:9px; margin:0 0 8px; font-size:1.12rem; line-height:1.25; }
.explore-part h3:focus { outline:none; }
.article .explore-part p { margin:0 0 10px; font-size:.95rem; }
.explore-facts { display:grid; gap:9px; margin:0; }
.explore-facts dt { color:#316b76; font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.explore-facts dd { margin:2px 0 0; color:#34485b; font-size:.93rem; }
.explore-facts .explore-limit dt { color:#945200; }
.article .explore-part .explore-aside { margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line-dark); color:#566779; font-size:.86rem; }
.article .explore-part .explore-more { margin:12px 0 0; color:#566779; font-size:.86rem; }
.explore-js .explore-part { padding:0; margin:0; border:0; }
.explore-js .explore-part:not(.is-active) { display:none; }

.explore-units { margin:18px 0 0; padding:14px 16px; background:#f4f7f9; border-radius:6px; }
.explore-units[hidden], .explore-js .explore-units-static { display:none; }
.article .explore-units p { margin:0; font-size:.95rem; }
.explore-units-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0 6px; color:#34485b; font-size:.95rem; }
.explore-units input, .explore-units select { font:inherit; padding:6px 8px; border:1px solid #b9c7d3; border-radius:5px; background:#fff; color:#07111f; }
.explore-units input { width:7.5em; }
.article .explore-units .explore-units-out { font:500 1.55rem/1.3 var(--serif); color:#07111f; }
.explore-units-out span { color:#566779; font-size:1rem; }
.article .explore-units .table-note { margin-top:6px; font-size:.82rem; }
.article .explore-units-static { margin:16px 0 0; font-size:.93rem; }
.explore figcaption { margin:12px 0 0; color:#566779; font-size:.8rem; }

@media (max-width:760px) {
  .explore { padding:16px 14px 14px; }
  .explore-body { grid-template-columns:minmax(0,1fr); grid-template-areas:"drawing" "index" "panel"; gap:14px; }
  .article .explore-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .explore-switch legend { float:none; width:100%; margin:0 0 6px; }
  .explore-svg .tag .name, .explore-svg .tag > rect, .explore-svg .note { display:none; }
  .explore-svg .tag .badge { transform:scale(1.7); transform-box:fill-box; transform-origin:center; }
}
@media (max-width:380px) { .article .explore-index { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .explore-svg .flow-anim { animation:none; } }

/* Optional 3D view (guide-explorer-3d.js), offered by guide-explorer.js only where WebGL works. */
.explore-view { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:-4px 0 14px; }
.explore-view-toggle { font:inherit; font-size:.86rem; font-weight:700; padding:7px 14px; border:1px solid #247f8c; border-radius:999px; background:#e9f3f5; color:#0d4f58; cursor:pointer; }
.explore-view-toggle:hover { background:#d7ecef; }
.explore-view-toggle:disabled { opacity:.6; cursor:progress; }
.explore-view-note { color:#566779; font-size:.8rem; }
.explore-3d { grid-area:drawing; position:relative; min-width:0; overflow:hidden; border:1px solid var(--line-dark); border-radius:6px; background:#f4f7f9; }
.explore-3d[hidden] { display:none; }
.explore-3d-canvas { display:block; width:100%; touch-action:pan-y; cursor:grab; }
.explore-3d-canvas:active { cursor:grabbing; }
.explore-3d-tags { position:absolute; inset:0; pointer-events:none; }
.explore-3d-tag { position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; padding:0; border:2px solid #fff; border-radius:50%; background:#07111f; color:#fff; font:800 .8rem/1 var(--sans); cursor:pointer; pointer-events:auto; box-shadow:0 1px 3px rgba(7,17,31,.25); }
.explore-3d-tag.is-selected { background:#247f8c; }
.explore-3d-controls { position:absolute; z-index:1; top:10px; right:10px; display:flex; gap:6px; }
.explore-3d-controls button { min-width:34px; height:34px; padding:0 10px; border:1px solid #b9c7d3; border-radius:6px; background:#fff; color:#07111f; font:700 .86rem/1 var(--sans); cursor:pointer; }
.article .explore-3d-picked { position:absolute; left:10px; top:10px; max-width:calc(100% - 190px); margin:0; padding:5px 9px; border-radius:6px; background:rgba(255,255,255,.92); color:#07111f; font-size:.82rem; font-weight:650; }
.article .explore-3d-note { margin:0; padding:7px 12px; border-top:1px solid var(--line-dark); background:#fff; color:#566779; font-size:.78rem; }
@media (max-width:600px) {
  .article .explore-3d-picked { position:static; max-width:none; border-radius:0; border-top:1px solid var(--line-dark); }
  .explore-3d-tag { width:24px; height:24px; font-size:.72rem; }
}
/* "Color by: Kind of record" (3D only). Green and blue match the facility pages' "Public record" and
   "Company-stated" labels; the chosen part keeps its record colour and gets the accent ring. */
.explore-lens { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.86rem; }
.explore-lens[hidden], .article .explore-3d-legend[hidden] { display:none; }
.explore-lens-label { font-weight:750; color:#07111f; }
.explore-lens button { font:inherit; font-size:.84rem; font-weight:650; padding:6px 12px; border:1px solid #b9c7d3; border-radius:999px; background:#f4f7f9; color:#1d3347; cursor:pointer; }
.explore-lens button[aria-pressed="true"] { background:#07111f; border-color:#07111f; color:#fff; }
.explore-lens button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.explore-3d-tags.is-records .explore-3d-tag[data-record="public"] { background:#1e6b3a; }
.explore-3d-tags.is-records .explore-3d-tag[data-record="company"] { background:#315f9f; }
.explore-3d-tags.is-records .explore-3d-tag.is-selected { box-shadow:0 0 0 3px #247f8c; }
.article .explore-3d-legend { display:grid; gap:4px; padding:8px 12px; border-top:1px solid var(--line-dark); background:#fff; color:#1d3347; font-size:.8rem; }
.article .explore-3d-legend p { margin:0; font-size:.82rem; line-height:1.4; }
.article .explore-3d-legend .explore-3d-legend-note { color:#566779; font-size:.78rem; }
.explore-swatch { display:inline-block; width:.8em; height:.8em; margin-right:6px; border-radius:50%; vertical-align:-.05em; }
.explore-swatch[data-record="public"] { background:#1e6b3a; }
.explore-swatch[data-record="company"] { background:#315f9f; }
.explore-lens-records .explore-part[data-record="public"] .explore-record { border-left:4px solid #1e6b3a; padding-left:8px; }
.explore-lens-records .explore-part[data-record="company"] .explore-record { border-left:4px solid #315f9f; padding-left:8px; }
/* Guided tours (3D only) and latest checked answers (each part with an evidence topic). Focus rings here use ink on
   these light surfaces (at least 3:1), like the site-wide light-surface rule in styles.css. */
.explore-tour-start { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.86rem; }
.explore-tour-start[hidden], .article .explore-tour[hidden], .explore-tour-controls [hidden] { display:none; }
.explore-tour-start button, .explore-tour-controls button { font:inherit; font-size:.84rem; font-weight:650; padding:6px 12px; border:1px solid #b9c7d3; border-radius:999px; background:#f4f7f9; color:#1d3347; cursor:pointer; }
.explore-tour-start button[aria-pressed="true"] { background:#07111f; border-color:#07111f; color:#fff; }
.explore-tour-start button:focus-visible, .explore-tour-controls button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.explore-tour-controls button:disabled { opacity:.5; cursor:default; }
.explore-tours { display:grid; gap:10px; margin:0 0 14px; }
.article .explore-tour { padding:10px 12px; border:1px solid var(--line-dark); border-left:4px solid #247f8c; border-radius:6px; background:#fff; }
.article .explore-tour-caption { margin:0 0 8px; color:#07111f; font-size:.9rem; line-height:1.45; }
.explore-tour-controls { display:flex; flex-wrap:wrap; gap:6px; }
.article .explore-part .explore-evidence { margin:12px 0 0; padding:10px 12px; border:1px solid var(--line-dark); border-radius:6px; background:#fff; }
.article .explore-part .explore-evidence-title { margin:0 0 6px; color:#07111f; font-size:.84rem; font-weight:750; }
.article .explore-evidence ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.article .explore-evidence li { margin:0; font-size:.86rem; line-height:1.4; }
.article .explore-evidence a { color:#0d4f58; }
.explore-evidence-meta { display:block; color:#566779; font-size:.78rem; }
.article .explore-part .explore-evidence-note { margin:8px 0 0; color:#566779; font-size:.76rem; line-height:1.4; }
.explore-evidence-new { display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px; background:#fff4e6; color:#5c3300; font-size:.74rem; font-weight:700; }