/* Charts: bar rows, columns, table view, meters, rating distribution. */
.dist{flex-wrap:nowrap;gap:10px}
.dist .mono:first-child{width:26px}
.dist-t{flex:1;height:8px;background:var(--hair)}
.dist-t span{display:block;height:100%;background:var(--accent);outline:1px solid var(--ink)}
/* charts */
.chart{margin:0;border:1px solid var(--hair-strong);background:var(--paper);padding:18px 18px 8px}
.chart figcaption{display:grid;gap:2px;margin-bottom:14px}
.bars{display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(110px,34%) 1fr 48px;gap:12px;align-items:center;font-size:var(--fs-body-s);outline-offset:2px}
.bar-t{height:22px;background:var(--hair);position:relative}
.bar-f{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ink);border-radius:0 4px 4px 0}
.bar-f.hi{background:var(--accent);outline:1px solid var(--ink)}
.bar-v{text-align:right;font-size:var(--fs-small)}
.cols{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;height:180px;align-items:end;padding-top:10px}
.col{display:grid;grid-template-rows:1fr auto;height:100%;gap:6px}
.col-f{align-self:end;height:var(--h);min-height:2px;background:var(--ink);border-radius:4px 4px 0 0}
.col-f.hi{background:var(--accent);outline:1px solid var(--ink)}
.col-l{text-align:center;font-size:var(--fs-micro);color:var(--muted)}
.table-view{border:0;padding:10px 0 6px}
.table-view summary{font-size:var(--fs-ui);font-family:var(--mono)}
.table-view table{margin-top:8px;font-size:var(--fs-ui)}
.table-view:last-of-type{border-bottom:0}
.meter{height:8px;background:var(--hair)}
.meter span{display:block;height:100%;background:var(--accent);outline:1px solid var(--ink)}
@media (max-width:600px){
  .bar-row{grid-template-columns:1fr 44px;row-gap:4px}
  .bar-l{grid-column:1/-1}
}
.dist-t span.zero{outline:0}