/**
 * Telemetry Module — RFDD.org · "Hero World" redesign (INDEX-REDESIGN P6)
 * Ported from the signed-off design file (`.stats__*`, `.chart*`, `.tile*`).
 * 3-tile column (no minutes tile). Homepage-only. Shared chrome in home-shell.css.
 */

.stats__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.stats__chartbox { border: 1px solid var(--line); background: var(--bg-panel); padding: 22px 24px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.stats__chart-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; display: flex; justify-content: space-between; }
.stats__chart-title b { color: var(--neon-green); }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.chart__bar { width: 100%; max-width: 44px; background: linear-gradient(180deg, var(--neon-cyan), rgba(57, 255, 20, .85)); box-shadow: 0 0 14px rgba(0, 245, 255, .35); position: relative; transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .2s; transform-origin: bottom; transform: scaleY(0); }
.in .chart__bar { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .chart__bar { transform: scaleY(1); } }
.chart__col:hover .chart__bar { filter: brightness(1.4); }
.chart__col:hover .chart__val { opacity: 1; }
.chart__val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--neon-cyan); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.chart__day { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--text-dim); }
.chart__col--today .chart__bar { background: linear-gradient(180deg, var(--iris-violet), var(--neon-green)); }
.chart__empty { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: center; padding: 54px 8px; }

.stats__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { border: 1px solid var(--line); background: var(--bg-panel); padding: 16px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tile__l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); }
.tile__v { font-family: var(--font-display); font-size: 24px; color: var(--text); margin-top: 6px; }
.tile__v em { font-style: normal; color: var(--neon-green); }
.tile__s { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); margin-top: 4px; }
.tile__s.up { color: var(--neon-green); }

@media (max-width: 860px) { .stats__grid { grid-template-columns: 1fr; } }