/* Ölçek yardımcıları — CSP satır içi stil yasağının doğrudan sonucu.
 *
 * **Neden bu dosya var.** Güvenlik başlığımız `style-src 'self'` diyor:
 * `'unsafe-inline'` yok. Bu, tarayıcının `style="width:57%"` gibi **satır
 * içi stil özniteliklerini tamamen yok saymasi** demek (CSP3, style-src-attr
 * geri dönüşü). Sprint 16'da ekran görüntüsü alınırken görüldü: tüm ölçer
 * çubukları %100 doluydu — güven 0.57 olan kolon bile. Bir veri kalitesi
 * ürününün ekranında bundan daha kötü bir kusur az bulunur.
 *
 * **Neden CSP gevşetilmedi.** `'unsafe-inline'` eklemek, XSS'in stil
 * enjeksiyonuyla veri sızdırmasına (CSS attribute selector + background-image)
 * kapı açar. `style-src-attr 'unsafe-inline'` daha dar ama Firefox bu
 * direktifi tanımıyor; tanımayan tarayıcı `style-src`'ye düşer ve hata
 * geri gelir. Doğru çözüm işaretlemeyi düzeltmek.
 *
 * **Neden sınıf, JavaScript değil.** Genişliği JS ile atamak (CSSOM, CSP'ye
 * takılmaz) çubukları JavaScript'e bağımlı kılardı; ADR-0020 formların ve
 * içeriğin JS'siz çalışmasını şart koşuyor. Sınıf, sunucudan gelen HTML'in
 * kendi kendine doğru olması demek.
 *
 * **Neden 101 kural.** Yüzde tam sayıya yuvarlanıyor; 0–100 kapalı bir
 * küme. Kova (%10'luk adım) kullanmak 0.57 güveni 0.60 göstermek olurdu ve
 * bu üründe gösterilen sayı ile çubuğun uyuşmaması kabul edilemez.
 * Sıkıştırılmış boyut ~0.6 KB.
 */

.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }