/* Brief page layout (Task 11). */
.verdict { min-height: 1.2em; }
.wl { display: grid; gap: 9px; }
.wlr { display: grid; grid-template-columns: 110px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 12.5px; }
.wlr .mono { font-size: 11px; text-align: right; }
.wbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--glass-2); gap: 2px; }
.wbar i { display: block; height: 100%; border-radius: 2px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.legend.col { flex-direction: column; gap: 4px; }
.perc { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.donut { width: 110px; height: 110px; }
@media (max-width: 520px) { .perc { grid-template-columns: minmax(0, 1fr); } .wlr { grid-template-columns: 84px minmax(0, 1fr) 46px; } }