@layer components {
/* =============================================================================
   @elements/style — native

   Native HTML widgets: progress, meter, details/summary.
============================================================================= */

progress {
  appearance:    none;
  width:         100%;
  height:        0.5rem;
  border:        none;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--bg-muted);
}
progress::-webkit-progress-bar   { background: var(--bg-muted); }
progress::-webkit-progress-value { background: var(--accent); transition: width var(--duration-normal) var(--ease-out); }
progress::-moz-progress-bar      { background: var(--accent); }

meter {
  appearance:    none;
  width:         100%;
  height:        0.5rem;
  border:        none;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--bg-muted);
}
meter::-webkit-meter-bar                  { background: var(--bg-muted); border: none; }
meter::-webkit-meter-optimum-value        { background: var(--success); }
meter::-webkit-meter-suboptimum-value     { background: var(--warning); }
meter::-webkit-meter-even-less-good-value { background: var(--danger); }

details > summary {
  cursor:      pointer;
  font-weight: var(--weight-medium);
}
details > summary:focus-visible {
  outline:        none;
  box-shadow:     var(--focus-ring);
  border-radius:  var(--radius-xs);
}

}