/* css/grid/network-health.css  -  "We are early" pictures (2026-10-12). Linked automatically by grid.php. No em dashes. */
.nh-fig { margin: 8px auto 18px; max-width: 760px; text-align: center; }
.nh-fig figcaption { margin-top: 6px; color: #b9c3cf; font-size: .92em; }
.nh-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.nh-svg text { font-family: inherit; }
.nh-drift { animation: nh-drift 7s ease-in-out infinite; }
@keyframes nh-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -4px); } }
@media (prefers-reduced-motion: reduce) { .nh-drift { animation: none; } }
/* phones: the pictures keep a readable size and scroll sideways */
@media (max-width: 640px) { .nh-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nh-svg { min-width: 640px; } .nh-fig figcaption { position: sticky; left: 0; max-width: 100vw; } }

/* three sourced figures */
.nh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin: 16px auto 4px; }
.nh-stat { border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.05); text-align: left; }
.nh-stat b { display: block; font-size: 2em; line-height: 1.05; letter-spacing: -.02em; }
.nh-stat span { display: block; margin-top: 4px; font-size: .92em; line-height: 1.35; color: #d6dde6; }
.nh-stat small { display: block; margin-top: 6px; font-size: .78em; color: #9fb0c4; }
.nh-stat.r b { color: #ff8a7a; } .nh-stat.o b { color: #f0932b; } .nh-stat.b b { color: #6db0f2; }
.nh-statline { text-align: center; color: #c9d1da; margin: 8px 0 0; }
@media (max-width: 640px) { .nh-stats { grid-template-columns: 1fr; } }

/* 2004 to 2026 */
.nh-time { list-style: none; display: flex; gap: 0; max-width: 760px; margin: 20px auto 6px; padding: 0; position: relative; }
.nh-time::before { content: ""; position: absolute; left: 4%; right: 4%; top: 9px; height: 2px; background: rgba(255,255,255,.2); }
.nh-time li { position: relative; flex: 1 1 0; padding: 26px 6px 0; text-align: center; font-size: .85em; line-height: 1.3; color: #c9d1da; }
.nh-time li::before { content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #4a90d9; }
.nh-time li.on::before { border-bottom-color: #f0932b; }
.nh-time li em { display: block; font-style: normal; font-weight: bold; color: #fff; font-size: 1.1em; }
.nh-time li b { display: block; color: #fff; margin: 2px 0; }
.nh-time li span { display: block; }
@media (max-width: 640px) {
  .nh-time { flex-direction: column; }
  .nh-time::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .nh-time li { padding: 0 0 14px 34px; text-align: left; }
  .nh-time li::before { left: 0; top: 2px; margin-left: 0; }
}

/* the planet */
.nh-fig-wide { max-width: 860px; }
.nh-planet { max-height: 520px; }

.nh-statline { max-width: none !important; }