/* Fill widths for the star bars, the star histogram and the enrolment
 * progress bars.
 *
 * ★ WHY THIS FILE EXISTS — CSP, not taste.
 *
 * The response carries style-src 'self' with no 'unsafe-inline'
 * (internal/transport/web/middleware.go), so a style= attribute in the markup
 * is refused by the browser. The star bars used to set their width that way;
 * the width never applied, the fill fell back to the full width of its track,
 * and every rating in the system rendered as five gold stars no matter what it
 * actually was. These classes are that width, moved into the stylesheet where
 * the policy allows it.
 *
 * The value is quantised to 2% by render.fillClass, which is 0.1 of a star —
 * the precision an average is printed with — so the bar never contradicts the
 * number beside it. Every class render.fillClass can name has a rule below, and
 * render.TestFillClassesAllExist fails the build if that stops being true.
 *
 * --w feeds .fillbar (which reads width:var(--w,0%)); width feeds .stars .fg,
 * which declares no width of its own. One class serves both.
 */

.fill-0{--w:0%;width:0%}
.fill-2{--w:2%;width:2%}
.fill-4{--w:4%;width:4%}
.fill-6{--w:6%;width:6%}
.fill-8{--w:8%;width:8%}
.fill-10{--w:10%;width:10%}
.fill-12{--w:12%;width:12%}
.fill-14{--w:14%;width:14%}
.fill-16{--w:16%;width:16%}
.fill-18{--w:18%;width:18%}
.fill-20{--w:20%;width:20%}
.fill-22{--w:22%;width:22%}
.fill-24{--w:24%;width:24%}
.fill-26{--w:26%;width:26%}
.fill-28{--w:28%;width:28%}
.fill-30{--w:30%;width:30%}
.fill-32{--w:32%;width:32%}
.fill-34{--w:34%;width:34%}
.fill-36{--w:36%;width:36%}
.fill-38{--w:38%;width:38%}
.fill-40{--w:40%;width:40%}
.fill-42{--w:42%;width:42%}
.fill-44{--w:44%;width:44%}
.fill-46{--w:46%;width:46%}
.fill-48{--w:48%;width:48%}
.fill-50{--w:50%;width:50%}
.fill-52{--w:52%;width:52%}
.fill-54{--w:54%;width:54%}
.fill-56{--w:56%;width:56%}
.fill-58{--w:58%;width:58%}
.fill-60{--w:60%;width:60%}
.fill-62{--w:62%;width:62%}
.fill-64{--w:64%;width:64%}
.fill-66{--w:66%;width:66%}
.fill-68{--w:68%;width:68%}
.fill-70{--w:70%;width:70%}
.fill-72{--w:72%;width:72%}
.fill-74{--w:74%;width:74%}
.fill-76{--w:76%;width:76%}
.fill-78{--w:78%;width:78%}
.fill-80{--w:80%;width:80%}
.fill-82{--w:82%;width:82%}
.fill-84{--w:84%;width:84%}
.fill-86{--w:86%;width:86%}
.fill-88{--w:88%;width:88%}
.fill-90{--w:90%;width:90%}
.fill-92{--w:92%;width:92%}
.fill-94{--w:94%;width:94%}
.fill-96{--w:96%;width:96%}
.fill-98{--w:98%;width:98%}
.fill-100{--w:100%;width:100%}
