/* Pruhy "nový vs súčasný web": čas načítania v sekundách (úvod a merania/). Základ je KONEČNÝ stav, animácia len pod .js. */
.sp{--sp-old:#5c5c5c;--sp-new:var(--fg);display:grid;gap:10px}
.sp-legend{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--mute);font-size:var(--fs-xs);letter-spacing:.03em}
.sp-lg-k{flex:1 0 100%;color:var(--fg)}
.sp-lg{display:inline-flex;align-items:center;gap:8px}
.sp-lg::before{content:"";width:18px;height:10px;border-radius:2px;background:var(--sp-old)}
.sp-lg-new::before{background:var(--sp-new)}
.sp-list{display:grid;gap:2px}
.sp-row{display:grid;grid-template-columns:minmax(74px,27%) minmax(0,1fr);align-items:center;gap:0 10px;padding:7px 0}
.sp-name{font-size:var(--fs-md);font-weight:600;letter-spacing:-.015em;line-height:1.15;overflow-wrap:anywhere}
.sp-bars{display:grid;gap:5px}
.sp-bar{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:8px}
.sp-track{position:relative;display:block;height:12px}
.sp-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);min-width:3px;border-radius:2px;background:var(--sp-old);transform-origin:0 50%}
.sp-new .sp-fill{background:var(--sp-new)}
.sp-fill.is-cut::after{content:"";position:absolute;right:11%;top:-3px;bottom:-3px;width:5px;background:var(--bg);transform:skewX(-28deg);box-shadow:8px 0 0 var(--bg)}
.sp-v{display:block;text-align:right;font-size:var(--fs-sm);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--mute)}
.sp-new .sp-v{color:var(--fg)}
@media (prefers-reduced-motion:no-preference){
  .js:not(:where(.is-paused)) .sp .sp-fill{transform:scaleX(0);transition:transform 1s var(--ease-io);transition-delay:calc(var(--i,0) * 90ms)}
  .js:not(:where(.is-paused)) .sp .sp-new .sp-fill{transition-delay:calc(var(--i,0) * 90ms + .35s)}
  .js:not(:where(.is-paused)) .sp.in .sp-fill{transform:none}
  .js:not(:where(.is-paused)) .sp .sp-v{opacity:0;transition:opacity var(--dur-2) .5s}
  .js:not(:where(.is-paused)) .sp.in .sp-v{opacity:1}
}
@media (min-width:700px){
  .sp-row{grid-template-columns:150px minmax(0,1fr);gap:0 20px;padding:12px 0}
  .sp-name{font-size:var(--fs-lg)}
  .sp-bar{grid-template-columns:minmax(0,1fr) 84px}
  .sp-track{height:14px}
  .sp-v{font-size:var(--fs-md)}
}