/* StatusCreatorCircle.kt — a 64 circle with a SEGMENTED ring: one arc per unseen post, 3 stroke,
   8° gaps. The arcs are an SVG behind the avatar, so the gaps are real geometry rather than a
   border that can only ever be solid. */
.story { width: 96px; flex: 0 0 auto; cursor: pointer; text-align: center; padding: 6px 4px; }
.story .avatar { position: relative; width: 64px; height: 64px; margin: 0 auto 6px; display: block; }
.story .avatar svg { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); }
.story .avatar svg circle {
  fill: none; stroke: var(--md-primary); stroke-width: 3; stroke-linecap: butt;
}
.story .avatar svg circle.seen { stroke: var(--md-outline-variant); }
.story .avatar img {
  position: absolute; inset: 5px; width: 54px; height: 54px; border-radius: 50%;
  object-fit: cover; background: var(--md-surface-container-high);
}
/* display:block matters: the label is a <span>, and an INLINE box ignores width and overflow, so
   the ellipsis never applied and long names ran past the cell into the next one. */
.story .t {
  display: block; max-width: 100%;
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px;
  color: var(--md-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 840px) { .story { width: 120px; } }

/* The Statuses catalog: the same circles as the home row, wrapped into a grid.
   The circle is a fixed width in a RAIL, but in a grid it must take the cell instead — at >=840 the
   rail widens it to 120 and a 96 cell would leave it overlapping its neighbour. */
.storygrid {
  display: grid; gap: 8px 4px; padding: 12px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  justify-items: stretch;
}
.storygrid .story { width: 100%; }