@layer components {
  .sync-status__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
  }

  .sync-status__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: oklch(60% 0.02 0);
    flex: none;
  }

  .sync-status__dot--online {
    background: oklch(var(--lch-laser));
  }

  .sync-status__dot--offline {
    background: oklch(70% 0.18 30);
  }

  .sync-status__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .sync-status__list li {
    padding: 0.125rem 0;
    color: oklch(var(--lch-bone) / 0.78);
  }

  .sync-status__group {
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .sync-status__group small {
    margin-left: 0.5rem;
    color: oklch(var(--lch-bone) / 0.55);
    font-weight: 400;
  }

  .sync-status__hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: oklch(var(--lch-bone) / 0.55);
  }
}