/* Live numbers section on the homepage (js/live-stats.js). Colours come from the homepage tokens. */
.sfy-live{padding:64px 0}
.sfy-live[hidden]{display:none}
.sfy-live [hidden]{display:none !important}
.sfy-live-head{margin-bottom:24px;text-align:start}
.sfy-live-head h2{margin:0 0 8px;font-family:var(--font-heading);font-size:clamp(24px,3.4vw,34px);line-height:1.3;color:var(--text);text-align:start}
.sfy-live-head p{margin:0;max-width:62ch;color:var(--muted);font-size:15px;line-height:1.9;text-align:start}

.sfy-live-panel{border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden;text-align:start}

/* Six figures. The 1px gaps are the dividing lines: the grid background shows through them. */
.sfy-live-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--line)}
.sfy-live-item{margin:0;padding:22px 22px 20px;background:var(--panel);min-width:0}
.sfy-live-item dt{color:var(--muted);font-size:13px;line-height:1.6}
.sfy-live-item dd{margin:8px 0 0;font-family:var(--font-heading);font-size:clamp(24px,3vw,34px);line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
@media (min-width:860px){ .sfy-live-summary{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .sfy-live-summary{grid-template-columns:repeat(6,1fr)} }

.sfy-live-runnote{margin:0;padding:14px 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.8}

/* Weekday × hour grid (UTC). Time runs left to right; the labels are in the page's digits. */
.sfy-live-heat{padding:22px;border-bottom:1px solid var(--line)}
.sfy-live-heat-head h3{margin:0;font-size:17px;line-height:1.4;color:var(--text)}
.sfy-live-heat-head p{margin:4px 0 0;max-width:70ch;color:var(--muted);font-size:13px;line-height:1.7}
.sfy-live-heatgrid{display:grid;grid-template-columns:auto repeat(24,minmax(0,1fr));gap:3px;margin-top:16px;direction:ltr}
.sfy-live-corner{display:block}
.sfy-live-hour{display:block;height:14px;font-size:11px;line-height:14px;color:var(--muted);text-align:start;white-space:nowrap;overflow:visible;font-variant-numeric:tabular-nums}
.sfy-live-day{display:flex;align-items:center;height:14px;padding-inline-end:10px;font-size:12px;line-height:1;color:var(--muted);white-space:nowrap}
.sfy-live-cell{display:block;height:14px;border-radius:3px;background:var(--subify-softblur-2,#CFC2FF)}
.sfy-live-cell.is-zero{background:var(--line)}
.sfy-live-heat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.sfy-live-peak{margin:0;font-size:14px;line-height:1.6;color:var(--text)}
.sfy-live-legend{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--muted)}
.sfy-live-ramp{display:block;width:84px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--line),var(--subify-softblur-2,#CFC2FF))}

.sfy-live-langs{padding:22px}
.sfy-live-langs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.sfy-live-langs-head h3{margin:0;font-size:17px;line-height:1.4;color:var(--text)}
.sfy-live-langs-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.sfy-live-strip{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line)}
.sfy-live-seg{display:block;height:100%;width:var(--w);background:var(--subify-softblur-2,#CFC2FF);opacity:var(--o,1);transition:opacity .2s}
.sfy-live-seg + .sfy-live-seg{box-shadow:inset 1px 0 0 var(--panel)}
.sfy-live-seg.is-rest{background:var(--text);opacity:.14}

.sfy-live-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;color:var(--text)}
.sfy-live-table th,.sfy-live-table td{padding:12px 0;border-bottom:1px solid var(--line);text-align:start;font-weight:400;vertical-align:middle}
.sfy-live-table tbody tr:last-child th,.sfy-live-table tbody tr:last-child td{border-bottom:0}
.sfy-live-table thead th{color:var(--muted);font-size:12px;font-weight:600;padding-top:0}
.sfy-live-table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;padding-inline-start:14px}
.sfy-live-table th.bar,.sfy-live-table td.bar{width:38%;padding-inline:18px}
.sfy-live-table tbody th{font-weight:500}
.sfy-live-table tbody tr:hover th,.sfy-live-table tbody tr:hover td{background:color-mix(in srgb,var(--line) 45%,transparent)}

/* Share bar per language: a thin track with a fill of the language's share. */
.sfy-live-track{display:block;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.sfy-live-fill{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--subify-softblur-2,#CFC2FF);transition:width .4s ease}
.sfy-live-fill.is-rest{background:var(--muted);opacity:.5}

.sfy-live-note{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin:18px 0 0;color:var(--muted);font-size:13px;line-height:1.9;text-align:start}
.sfy-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--subify-softblur-2,#CFC2FF);box-shadow:0 0 0 4px color-mix(in srgb,var(--subify-softblur-2,#CFC2FF) 22%,transparent)}
.sfy-live .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .sfy-live-fill,.sfy-live-seg{transition:none}
}
@media (max-width:460px){
  .sfy-live-item{padding:16px}
  .sfy-live-langs{padding:16px}
  .sfy-live-heat{padding:14px}
  .sfy-live-runnote{padding:12px 16px}
  .sfy-live-heatgrid{gap:2px}
  .sfy-live-day{font-size:11px;padding-inline-end:6px}
  .sfy-live-table .num{padding-inline-start:10px}
  .sfy-live-table th.bar,.sfy-live-table td.bar{width:30%;padding-inline:8px}
}