/* ============================================================
   Circular Progress — CSS-only donut ring component
   Driven by CSS custom properties; no JavaScript required.

   Custom properties (set via inline style or a parent scope):
     --cp-progress  0–100 fill value (unitless)     default: 0
     --cp-size      Diameter                         default: 48px
     --cp-stroke    Ring thickness                   default: 4px
     --cp-color     Fill arc color                   default: var(--color-primary)
     --cp-track     Background ring color            default: var(--color-border-light)
     --cp-bg        Inner circle fill                default: var(--color-surface)
   ============================================================ */

.circular-progress {
  /* Defaults — overridden per-instance via inline style */
  --cp-progress: 0;
  --cp-size:     48px;
  --cp-stroke:   4px;
  --cp-color:    var(--color-primary);
  --cp-track:    var(--color-border-light);
  --cp-bg:       var(--color-surface, #fff);

  /* Layout: overlay ::before (inner circle) and __label in the same cell */
  display: grid;
  place-items: center;

  width:         var(--cp-size);
  height:        var(--cp-size);
  border-radius: 50%;
  flex-shrink:   0; /* safe inside flex parents */

  /* Progress ring: fill arc + track background */
  background: conic-gradient(
    from -90deg,
    var(--cp-color) calc(var(--cp-progress) * 1%),
    var(--cp-track) 0
  );
}

/* Inner circle — punches the donut hole and carries the surface background */
.circular-progress::before {
  content:       "";
  grid-area:     1 / 1; /* same grid cell so siblings can stack over it */
  width:         calc(var(--cp-size) - var(--cp-stroke) * 2);
  height:        calc(var(--cp-size) - var(--cp-stroke) * 2);
  border-radius: 50%;
  background:    var(--cp-bg);
}

/* Optional center label */
.circular-progress__label {
  grid-area:     1 / 1;
  position:      relative; /* ensures it renders above ::before */
  font-size:     calc(var(--cp-size) * 0.25);
  font-weight:   var(--font-semibold, 600);
  color:         var(--color-text);
  line-height:   1;
  text-align:    center;
  pointer-events: none;
  user-select:   none;
}