@tailwind base;
@tailwind components;
@tailwind utilities;

/* SEC_REVIEW F62: dropping `style-src 'unsafe-inline'` from CSP means
   no inline `style="…"` attributes. Two patterns the templates need:

   1. Alpine's pre-init hide pattern. The previously-`style="display:none;"`
      element gets `x-cloak` and we set the rule here so the stylesheet
      hides it before Alpine boots (and `x-cloak` is removed by Alpine
      after `init()`).
   2. Data-driven score-bar width. Templates render
      `data-score-width="N"` where `N` is the percent rounded to 5; this
      stylesheet provides one rule per bucket. 5% buckets are visually
      indistinguishable from per-pixel widths on the small bar UIs the
      templates use. */
[x-cloak] { display: none !important; }

[data-score-width="0"]   { width: 0%; }
[data-score-width="5"]   { width: 5%; }
[data-score-width="10"]  { width: 10%; }
[data-score-width="15"]  { width: 15%; }
[data-score-width="20"]  { width: 20%; }
[data-score-width="25"]  { width: 25%; }
[data-score-width="30"]  { width: 30%; }
[data-score-width="35"]  { width: 35%; }
[data-score-width="40"]  { width: 40%; }
[data-score-width="45"]  { width: 45%; }
[data-score-width="50"]  { width: 50%; }
[data-score-width="55"]  { width: 55%; }
[data-score-width="60"]  { width: 60%; }
[data-score-width="65"]  { width: 65%; }
[data-score-width="70"]  { width: 70%; }
[data-score-width="75"]  { width: 75%; }
[data-score-width="80"]  { width: 80%; }
[data-score-width="85"]  { width: 85%; }
[data-score-width="90"]  { width: 90%; }
[data-score-width="95"]  { width: 95%; }
[data-score-width="100"] { width: 100%; }