/* ==========================================================================
   metrics.html — page-only rules. Charts are hand-drawn inline SVG; every
   bar uses preserveAspectRatio="none" so it stretches to its container and
   all labelling stays in HTML, which keeps the type legible at 375px.
   ========================================================================== */

.updated{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;line-height:16px;
  color:var(--muted-2);margin-top:24px}
.updated .dot{width:6px;height:6px;border-radius:0;background:var(--accent);flex:none}

/* ---------- Generic labelled bar row ---------- */
.bar-row{display:grid;grid-template-columns:190px minmax(0,1fr) 132px;gap:20px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--hairline)}
.bar-row:last-child{border-bottom:none}
.bar-row .bl{font-size:14px;line-height:20px;color:var(--text)}
.bar-row .bl small{display:block;color:var(--muted-2);font-size:12px;line-height:16px}
.bar-row .bar{width:100%;height:22px;display:block}
.bar-row .bv{font-family:var(--font-mono);font-size:13px;line-height:18px;color:var(--text);text-align:right;white-space:nowrap}
.bar-row .bv small{display:block;color:var(--muted-2);font-size:11px;line-height:15px}

/* ---------- Deployment bar ---------- */
.deploy-bar{width:100%;height:56px;display:block;border-radius:0;overflow:hidden;background:var(--chip)}
.legend{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px}
.legend .li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px}
.legend .sw{width:10px;height:10px;border-radius:0;flex:none;margin-top:5px}
.legend .li b{display:block;font-weight:600;color:var(--text)}
.legend .li span{color:var(--muted-2);font-family:var(--font-mono);font-size:12px;line-height:16px}

/* ---------- Column chart (pace) ---------- */
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;align-items:end;
  min-height:190px;border-bottom:1px solid var(--border)}
.col{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0}
.col .cv{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--text);text-align:center}
.col .cbar{width:100%;display:block}
.col-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:10px}
.col-labels div{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);text-align:center;
  white-space:nowrap}

/* ---------- Funnel ---------- */
.funnel-row{display:grid;grid-template-columns:200px minmax(0,1fr) 170px;gap:20px;align-items:center;padding:8px 0}
.funnel-row .fl{font-size:15px;line-height:22px;font-weight:600}
.funnel-row .fl small{display:block;font-weight:400;color:var(--muted-2);font-size:12px;line-height:16px}
.funnel-row .fbar{width:100%;height:38px;display:block}
.funnel-row .fv{text-align:right;font-family:var(--font-mono);font-size:15px;line-height:20px}
.funnel-row .fv small{display:block;font-size:11px;line-height:16px;color:var(--muted-2)}
.funnel-drop{display:grid;grid-template-columns:200px minmax(0,1fr) 170px;gap:20px}
.funnel-drop .d{grid-column:2;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);
  text-align:center;padding:2px 0}

/* ---------- Decision speed (the headline) ---------- */
.speed{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.speed > *{padding:32px 40px}
.speed > * + *{border-left:1px solid var(--border)}
.speed .hd{font-size:14px;line-height:20px;color:var(--muted-2)}
.speed .big{font-family:var(--font-head);font-weight:700;font-size:60px;line-height:52px;letter-spacing:0;
  text-transform:uppercase;margin-top:14px}
.speed .big .u{font-size:24px;letter-spacing:0;color:var(--muted-2)}
.speed .sub{color:var(--muted);font-size:15px;line-height:23px;margin-top:12px;max-width:44ch}
.speed .gauge{margin-top:28px}
.speed .gauge .g-row{display:grid;grid-template-columns:96px minmax(0,1fr) 74px;gap:12px;align-items:center;padding:6px 0}
.speed .gauge .g-row .gl{font-size:13px;line-height:18px;color:var(--muted-2)}
.speed .gauge .g-row .gv{font-family:var(--font-mono);font-size:12px;line-height:18px;text-align:right}
.speed .gauge svg{width:100%;height:20px;display:block}
.speed .note{font-family:var(--font-mono);font-size:12px;line-height:18px;color:var(--muted-2);margin-top:18px}

/* ---------- Donut ---------- */
.donut-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center}
.donut-wrap svg{width:200px;height:200px;display:block}

/* ---------- Three-up breakdown ---------- */
.breakdown{display:grid;grid-template-columns:repeat(3,1fr)}
.breakdown > *{padding:32px;border-right:1px solid var(--border)}
.breakdown > *:last-child{border-right:none}
.breakdown h3{font-size:16px;line-height:24px;font-weight:600;margin-bottom:18px}
.breakdown .bar-row{grid-template-columns:minmax(0,1fr) 56px;gap:12px;padding:9px 0}
.breakdown .bar-row .bar{display:none}
.breakdown .bar-row .bl{font-size:14px}
.breakdown .mini{display:block;width:100%;height:6px;margin-top:6px}

/* ---------- Caveats ---------- */
.caveats{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.caveats > *{padding:28px 32px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.caveats > *:nth-child(2n){border-right:none}
.caveats > *:nth-last-child(-n+2){border-bottom:none}
.caveats h4{font-size:15px;line-height:22px;font-weight:600;margin-bottom:8px}
.caveats p{color:var(--muted);font-size:14px;line-height:22px}
.caveats .n{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--faint);margin-bottom:10px}

@media (max-width:1100px){
  .speed{grid-template-columns:1fr}
  .speed > * + *{border-left:none;border-top:1px solid var(--border)}
  .speed > *{padding:28px 32px}
  .breakdown{grid-template-columns:1fr}
  .breakdown > *{border-right:none;border-bottom:1px solid var(--border)}
  .breakdown > *:last-child{border-bottom:none}
  .donut-wrap{grid-template-columns:1fr;gap:28px;justify-items:start}
}
@media (max-width:620px){
  .bar-row{grid-template-columns:minmax(0,1fr) 104px;gap:12px}
  .bar-row .bar{grid-column:1 / -1;grid-row:2}
  .funnel-row,.funnel-drop{grid-template-columns:minmax(0,1fr) 116px;gap:12px}
  .funnel-row .fbar{grid-column:1 / -1;grid-row:2;height:26px}
  .funnel-drop .d{grid-column:1 / -1;text-align:left}
  .caveats{grid-template-columns:1fr}
  .caveats > *{border-right:none}
  .caveats > *:nth-last-child(2){border-bottom:1px solid var(--border)}
  .speed .big{font-size:44px;line-height:40px}
  .speed .gauge .g-row{grid-template-columns:62px minmax(0,1fr) 42px;gap:8px}
  .speed .gauge .g-row .gl{font-size:12px}
  .col-labels div{font-size:10px}
  .cols{height:150px}
}