/* ==========================================================================
   Source dots — shared by index.html (desktop sidebar) and mobile.html
   (settings modal).

   The per-source brand COLOR is DATA, not CSS: it lives in each source's
   YAML config (src/sources/configs/<key>.yaml → dot_color) and reaches the
   page through /api/sources; the JS applies it as an inline style after
   validating the hex. Onboarding a new source needs NO frontend change.
   This file only defines the dot's shape and the shared special cases.
   ========================================================================== */

.source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    /* fallback for sources without a (valid) dot_color in their YAML */
    background: var(--text-muted, #606070);
}

/* the "and more" chip's dot: the app accent gradient — every brand color
   at once, i.e. "all the sources you don't see" */
.source-dot.source-dot-more {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}