/* One ring per horizon across the top of the blocker modal
   (js/reflection-blocker/reflection_rings.js).

   Its own stylesheet rather than more rules in reflection-blocker-modal.css,
   which is already the modal's longest file. Must load AFTER it: these rings
   sit inside its scroll area and lean on its tokens.

   The row lives IN the title bar (2026-08-02), where the "N of M done" pill
   used to be — the first thing on the screen, beside the sentence saying why
   the screen is there. Rings are smaller there than they were as a band, and
   only the horizons still owing anything are drawn at all, so the header holds
   one to five of them. It still wraps: this is the first thing on a PHONE
   screen too, and a header that pushed the title off it would be worse than a
   second row of rings. */

.rbm-rings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  /* Nothing above it in the header, so no top padding: the rings' own labels
     give them their optical spacing from the title beside them. */
  padding: 0;
}

/* Nothing qualified — no per-goal word condition is switched on. An empty
   flex row would still eat its padding and read as a missing widget. */
.rbm-rings:empty {
  display: none;
}

.rbm-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* The whole ring carries a title; the cursor is what says so. */
  cursor: default;
}

.rbm-ring-dial-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.rbm-ring-dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Start the arc at twelve o'clock instead of three. */
  transform: rotate(-90deg);
}

.rbm-ring-track,
.rbm-ring-fill {
  fill: none;
  stroke-width: 4;
}

.rbm-ring-track {
  stroke: var(--border-subtle);
}

.rbm-ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  /* The count is what changes on a keystroke; the arc catching up a beat later
     is what makes progress feel like progress rather than a number ticking. */
  transition: stroke-dashoffset 320ms ease, stroke 320ms ease;
}

.rbm-ring.is-met .rbm-ring-fill {
  stroke: var(--success, #33c46e);
}

.rbm-ring-count {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.rbm-ring.is-met .rbm-ring-count {
  color: var(--success, #33c46e);
}

.rbm-ring-label {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

/* A phone in portrait: the header is already two lines of text, and five rings
   beside it would leave neither readable. They keep their own row underneath,
   still in the header, still the first thing on the screen. */
@media (max-width: 560px) {
  .rbm-rings {
    justify-content: flex-start;
    gap: 10px;
  }

  .rbm-ring-dial-wrap {
    width: 40px;
    height: 40px;
  }
}

/* A ring is a picture of a number that is also printed inside it, so there is
   nothing to lose by holding it still for anyone who asked for that. */
@media (prefers-reduced-motion: reduce) {
  .rbm-ring-fill {
    transition: none;
  }
}