/* components/subscriber-ring.css · THE ONE SUBSCRIBER-HEADLINE RING
   ---------------------------------------------------------------
   Paired with lib/subscriber-ring.js, which owns the markup this styles and
   the strings inside it. Three surfaces drew three rings from one set of
   counts (96px/16px wall on the lens headers, 150px/30px on the Teglo card),
   and the shared label "monitored subscribers up" wrapped to three lines
   inside the thick one. One geometry now: a LARGER circle with a THINNER
   wall, so the two lines it carries sit in it comfortably.

   No new colours. --ok and --status-down are the same two tokens the rings
   already used (--danger resolves to --status-down); the hole takes the
   surface it is drawn on, which is the only thing a host may set, via
   --sub-ring-hole. */

.sub-ring-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* 140px across with an 11px wall. The wall is the ONE number that decides
   whether the centre has room for two lines of text; it is set here and
   nowhere else. */
.sub-ring {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}
.sub-ring::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: var(--radius-circle);
  /* The hole is whatever the ring is drawn ON. A card sets its own; the
     default is the raised surface the lens panels use. */
  background: var(--sub-ring-hole, var(--surface-raised));
}
.sub-ring-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 18px;
  text-align: center;
}
.sub-ring-center .v {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--text);
  line-height: 1.05;
}
/* ONE line, and it stays one line: the label is fixed copy in the module
   ("monitored up"), short enough that nothing here has to shrink it. */
.sub-ring-center .l {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
}

/* THE SENTENCE. It carries the four counts the ring cannot draw, and it is
   the only place they are said on that surface. */
.sub-ring-line {
  margin: 0;
  max-width: 20rem;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  /* Secondary, not tertiary: this sentence is now the only place the four counts
     are said on the surface, and tertiary is flagged in tokens.css at 2.56:1 on
     white - fine for non-essential meta, not for the numbers themselves. */
  color: var(--text-secondary);
}
.sub-ring-line:empty { display: none; }