Progress

<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Completion</span>
          <h2 class="h4">Progress Examples</h2>
          <p class="text-secondary">Progress bars need nearby text labels so users do not have to infer meaning from colour or width alone.</p>
          <div class="athena-stack">
            <div>
              <div class="d-flex justify-content-between gap-3"><span id="progress-setup-label">Workspace setup</span><strong>72%</strong></div>
              <div class="progress" role="progressbar" aria-labelledby="progress-setup-label" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:72%">72%</div></div>
            </div>
            <div>
              <div class="d-flex justify-content-between gap-3"><span id="progress-storage-label">Storage used</span><strong>44%</strong></div>
              <div class="progress" role="progressbar" aria-labelledby="progress-storage-label" aria-valuenow="44" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-success" style="width:44%">44%</div></div>
            </div>
            <div>
              <div class="d-flex justify-content-between gap-3"><span id="progress-risk-label">Risk remediation</span><strong>88%</strong></div>
              <div class="progress" role="progressbar" aria-labelledby="progress-risk-label" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-warning" style="width:88%">88%</div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">Progress Guidance</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use determinate progress only when a real value is known.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Expose the value with text and ARIA attributes.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Do not use colour as the only sign of risk or success.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Stacked</span>
          <h2 class="h5">Quota Breakdown</h2>
          <p class="text-secondary">Stacked bars need a visible legend because each segment has its own meaning.</p>
          <div class="progress mb-3" role="img" aria-label="Quota breakdown: 35 percent documents, 25 percent images, 15 percent exports">
            <div class="progress-bar" style="width:35%">Docs</div>
            <div class="progress-bar bg-success" style="width:25%">Images</div>
            <div class="progress-bar bg-warning" style="width:15%">Exports</div>
          </div>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge text-bg-primary">Documents 35%</span>
            <span class="badge text-bg-success">Images 25%</span>
            <span class="badge text-bg-warning">Exports 15%</span>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Limits</span>
          <h2 class="h5">Assurance Note</h2>
          <p class="text-secondary mb-0">These progress examples demonstrate source-level labelling patterns only. A WCAG 2.2 claim still needs manual keyboard, screen reader, contrast, zoom, target-size, and motion testing. Backend security and data integrity controls remain product responsibilities.</p>
        </article>
      </div>
    </section>