/* The replay demo, in the product's data-view style (clearintervals-ui:
   src/lib/styles/data-tokens.css, data-view.css, StatusPill, AlertList).
   Roboto for text, ink #000 on white blocks with a 15px radius on the #f5f5f5 canvas,
   11px uppercase micro labels, tabular figures, status colours only for state. */
.pv{font-family:'Roboto','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.3;letter-spacing:-.45px;color:#000;font-variant-numeric:tabular-nums}
.pv-bar{display:flex;align-items:center;gap:15px}
.pv-bar input{flex:1 1 auto;min-width:0;height:42px;margin:0;accent-color:#000}
.pv-play{min-width:96px}
.pv-date{font-weight:500;min-width:56px;text-align:right}
.pv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:15px}
.pv-kpi{background:#fff;border-radius:15px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pv-big{font-family:'Cossette Texte','Roboto',sans-serif;font-size:40px;line-height:1;letter-spacing:-2px}
.pv-big small{font-family:'Roboto',sans-serif;font-size:15px;letter-spacing:-.45px;color:#6d6d6d}
.pv-note{font-size:13px;color:#6d6d6d}
.pv-micro{font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;line-height:1.3}
.pv-quiet{color:#6d6d6d}
.pv-sub{font-size:12px;color:#6d6d6d;letter-spacing:0}
.pv-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:5px;font-size:15px;white-space:nowrap}
.pv-critical{background:#fcefee;color:#d8180b}
.pv-warning{background:#f6d3a3;color:#9a5300}
.pv-neutral{background:#f0f0f0;color:#6b6b6b}
.pv-ok{background:#f0f0f0;color:#000}
.pv-ok::before{content:'';width:8px;height:8px;border-radius:999px;background:#6aa700}
.pv-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:15px;margin-top:15px;align-items:start}
.pv-panel{background:#fff;border-radius:15px;padding:20px;min-width:0}
.pv-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.pv-panel h3{margin:0;font-size:15px;font-weight:500;letter-spacing:-.45px;font-family:inherit}
.pv-plot{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px}
.pv-labs{position:relative}
.pv-lab{position:absolute;left:0;right:0;display:flex;flex-direction:column;gap:1px}
.pv-val{font-size:13px}
.pv-plot svg{display:block;width:100%;overflow:visible}
.pv-t{font-family:'Roboto',sans-serif;font-size:11px;letter-spacing:0;fill:#505050}
.pv-strong{fill:#000;font-weight:500}
.pv-cap{fill:#c10800;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.pv-red{fill:#c10800}
.pv-now{fill:#d8180b;font-weight:500}
.pv-summary{margin:12px 0 0;font-size:13px;color:#505050;letter-spacing:0}
.pv-ahead{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.pv-alert{padding:12px 0;border-top:1px solid #dedede}
.pv-alert:first-of-type{border-top:0}
.pv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pv-meta .pv-pill{font-size:12px;padding:2px 8px}
.pv-alert h4{margin:8px 0 2px;font-size:15px;font-weight:500;letter-spacing:-.45px;line-height:1.3}
.pv-alert p{margin:0;font-size:14px;color:#505050;letter-spacing:-.2px}
.pv-empty{margin:6px 0 0;color:#6d6d6d;font-size:14px}
.pv-maint{display:flex;gap:8px;align-items:baseline;margin:10px 0 0;padding-top:12px;border-top:1px solid #dedede;font-size:14px}
.pv-dot{flex:0 0 auto;width:8px;height:8px;border-radius:999px;background:#6aa700;transform:translateY(-1px)}
@media (max-width:1055px){.pv-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:671px){
  .pv-kpis{grid-template-columns:minmax(0,1fr)}
  .pv-kpi{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:15px}
  .pv-kpi .pv-micro{width:100%}
  .pv-big{font-size:32px}
  .pv-plot{grid-template-columns:minmax(0,1fr)}
  .pv-labs{display:none}
  .pv-panel{padding:15px}
}
.pv-lane{font-size:11px;letter-spacing:.5px}