/* Data Center Census: boom timelapse and "if it all gets built" meter.
   Loaded by /timelapse, /if-it-all-gets-built and their embeds (which use embed.css, so every
   site token here has a fallback). The stage and the meter are always dark: the status colors
   below are the site's dark-mode palette, and timelapse.js reads them from here. */
.tl-stage, .meter {
  --tl-bg: #0b0e15; --tl-ink: #eef1f6; --tl-muted: #939bab; --tl-line: #232937;
  --tl-land: rgba(148, 163, 184, .30); --tl-tint: rgba(242, 95, 192, .26); --tl-mor: #f25fc0; --tl-off: #8b93a3;
  --s-rumored: #a68cf0; --s-proposed: #e3a232; --s-approved: #45a9e6; --s-under_construction: #f47a3d;
  --s-operating: #3cc28a; --s-paused: #95a0b2; --s-cancelled: #f06a6e; --s-denied: #f06a6e;
}
.tl { margin: 0; }
.tl-stage { position: relative; background: var(--tl-bg); color: var(--tl-ink); border-radius: var(--r-lg, 14px); padding: 18px 20px 12px; overflow: hidden; }
.tl-hud { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; }
.tl-date { margin: 0; font: 600 clamp(1.7rem, 4.4vw, 2.8rem)/1 var(--sans, system-ui, sans-serif); letter-spacing: -.035em; color: var(--tl-ink); font-variant-numeric: tabular-nums; }
.tl-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.tl-stats dt { font-size: .72rem; font-weight: 500; color: var(--tl-muted); }
.tl-stats dd { margin: 3px 0 0; font: 600 clamp(1.05rem, 2.3vw, 1.4rem)/1.1 var(--sans, system-ui, sans-serif); letter-spacing: -.02em; color: var(--tl-ink); font-variant-numeric: tabular-nums; }
.tl-canvas { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; max-width: max(320px, calc((100vh - 330px) * 1.6)); margin: 0 auto; touch-action: manipulation; cursor: default; }
.tl-compact .tl-canvas { max-width: none; }
.tl-ticker { list-style: none; margin: 6px 0 0; padding: 0; min-height: 1.45em; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: .8rem; line-height: 1.45; color: var(--tl-muted); }
.tl-ticker b { color: var(--tl-ink); font-weight: 600; }
.tl-ticker i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.tl-tip { position: absolute; z-index: 3; max-width: 270px; padding: 10px 12px; border-radius: 10px; background: #151b27; border: 1px solid #2f3646; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8); font-size: .82rem; line-height: 1.45; color: var(--tl-ink); }
.tl-tip b { display: block; font-size: .9rem; color: #fff; }
.tl-tip .m { color: var(--tl-muted); }
.tl-tip a { color: #9cb0ff; font-weight: 600; }
.tl-noscript { color: var(--tl-muted); font-size: .9rem; }
.tl-noscript a { color: #9cb0ff; }
.tl-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tl-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2, var(--line, #d4d9e1)); background: var(--card, var(--bg, #fff)); color: var(--ink, #0a0d14); cursor: pointer; font: 600 .85rem var(--sans, system-ui, sans-serif); }
.tl-btn:hover { border-color: var(--accent, #2548f5); color: var(--accent, #2548f5); }
.tl-btn svg { width: 16px; height: 16px; }
.tl-speed { width: auto; min-width: 52px; padding: 0 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.tl-range { flex: 1; min-width: 0; height: 30px; margin: 0; accent-color: var(--accent, #2548f5); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .8rem; line-height: 1.4; color: var(--muted, #5b6476); }
.tl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend .tl-note { flex-basis: 100%; }
.tl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.tl-dot[data-s=rumored] { background: #a68cf0; } .tl-dot[data-s=proposed] { background: #e3a232; } .tl-dot[data-s=approved] { background: #45a9e6; }
.tl-dot[data-s=under_construction] { background: #f47a3d; } .tl-dot[data-s=operating] { background: #3cc28a; } .tl-dot[data-s=paused] { background: #95a0b2; }
.tl-dot[data-s=cancelled] { background: #f06a6e; }
.tl-ring { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #e04fae; }
.tl-ring.pending { border-style: dashed; }
.tl-ring.off { border-color: #8b93a3; }
.tl-compact .tl-stage { padding: 12px 12px 8px; border-radius: 10px; }
.tl-compact .tl-controls { margin-top: 8px; }
.tl-compact .tl-legend { margin-top: 8px; gap: 4px 12px; font-size: .72rem; }

/* ---------- Meter ---------- */
.meter { background: var(--tl-bg); color: #c9cfda; border-radius: var(--r-lg, 14px); padding: 28px 30px 22px; }
.meter-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.meter-k { margin: 0 0 6px; font-size: .82rem; font-weight: 500; color: var(--tl-muted); }
.meter-big { margin: 0; font: 700 clamp(2.3rem, 6.4vw, 4rem)/1 var(--sans, system-ui, sans-serif); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.meter-sub { margin: 8px 0 0; font-size: .86rem; color: var(--tl-muted); }
.meter-sub b { color: #fff; font-variant-numeric: tabular-nums; }
.meter-live { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tl-line); }
.meter-tick { margin: 0; font: 600 clamp(1.7rem, 5vw, 2.9rem)/1.1 var(--mono, ui-monospace, monospace); letter-spacing: -.03em; color: #f47a3d; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.meter-bar { display: flex; gap: 3px; height: 12px; margin: 24px 0 10px; border-radius: 999px; overflow: hidden; }
.meter-bar > span { background: currentColor; min-width: 3px; }
.meter .legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; font-size: .86rem; }
.meter .legend li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--tl-line); color: #c9cfda; white-space: nowrap; }
.meter .legend li i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.meter .legend b { margin-left: auto; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-row { height: 4px; max-width: 220px; margin-top: 7px; border-radius: 99px; background: var(--surface-2, var(--surface, #eef1f5)); }
.meter-row span { display: block; height: 100%; border-radius: inherit; background: var(--accent, #2548f5); }
.meter-compact { padding: 18px 18px 14px; }
.meter-compact .meter-top { gap: 16px; }
.meter-compact .meter-big { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.meter-compact .meter-live { margin-top: 16px; padding-top: 14px; }
.meter-compact .meter-tick { font-size: clamp(1.3rem, 5vw, 1.9rem); }
@media (max-width: 640px) {
  .tl-stage { padding: 14px 12px 10px; }
  .tl-stats { gap: 6px 18px; }
  .meter { padding: 22px 18px 18px; }
  .meter-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}