.metric-demo{border:1px solid var(--line);background:var(--mint);padding:18px 22px;border-radius:12px;margin-bottom:22px}.metric-demo p{font-size:13px;line-height:1.6;margin:8px 0 0}.metric-filters{padding:0;margin-bottom:28px}.metric-filters>.help-text{flex:1;min-width:220px;margin:0;padding-bottom:8px}.metric-chart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;margin-bottom:24px}.metric-chart-grid h2,.metric-reach h2,.metric-table h2{font-size:23px;margin-top:0}.metric-columns{display:flex;gap:16px;align-items:end;height:260px;margin-top:24px}.metric-column{flex:1;min-width:0;text-align:center}.metric-column>strong,.metric-column>span{display:block;font-size:12px}.metric-column>span{margin-top:10px;color:var(--muted)}.metric-bar-track{height:190px;display:flex;align-items:end;border-bottom:1px solid var(--line);margin-top:10px}.metric-bar{width:100%;max-width:64px;margin:auto auto 0;background:#527961;border-radius:7px 7px 0 0;min-height:3px}.metric-donut{width:190px;height:190px;position:relative;margin:24px auto}.metric-donut svg{width:100%;height:100%;stroke-width:12;fill:none}.metric-ring-base{stroke:var(--line)}.metric-ring-value{stroke:#a95164}.metric-donut>strong{position:absolute;inset:0;display:grid;place-items:center;font-size:36px}.metric-reach{margin-bottom:24px}.metric-reach-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 48px;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.metric-reach-row:last-child{border:0}.metric-reach-row small{display:block;font-size:12px;color:var(--muted);margin-top:7px}.metric-horizontal{height:9px;border-radius:10px;background:var(--line);overflow:hidden}.metric-horizontal>span{display:block;height:100%;background:#527961;border-radius:10px}.metric-table small{color:var(--muted)}[data-theme=dark] .metric-bar,[data-theme=dark] .metric-horizontal>span{background:#90b59c}[data-theme=dark] .metric-ring-value{stroke:#d891a4}@media(max-width:900px){.metric-chart-grid{grid-template-columns:1fr}}@media(max-width:650px){.metric-reach-row{grid-template-columns:1fr 48px;gap:12px}.metric-reach-row>div:first-child{grid-column:1/-1}.metric-columns{gap:9px}.metric-column>strong{font-size:11px}}

/* Keep bars aligned and labels readable for long libraries. */
.metrics-fold .metric-columns{height:auto;align-items:flex-start;overflow-x:auto;padding-bottom:12px}
.metrics-fold .metric-column{flex:1 0 110px;min-width:110px}
.metrics-fold .metric-column>span{height:3em;line-height:1.5;overflow:hidden}
.metrics-fold .metric-column>small{display:block;font-size:11px;color:var(--muted)}