/* core/static/core/css/channel-chips.css — de kanaalstandaard (spec 2026-10-17-kanaalstatus-standaard §1).
   Ring = verversing, bolletje = zichtbaarheid. Het logo zelf krijgt nooit een toestandskleur. */
.chn-row { display: inline-flex; align-items: center; gap: 6px; }
.chn { --chn-size: 28px; --chn-ground: var(--white, #fff); position: relative; display: inline-flex; width: calc(var(--chn-size) + 4px); height: calc(var(--chn-size) + 4px); align-items: center; justify-content: center; text-decoration: none; color: var(--char-700); }
.chn-row--lg .chn { --chn-size: 36px; }
.chn-ring { box-sizing: border-box; width: var(--chn-size); height: var(--chn-size); border-radius: 9999px; border: 2px solid transparent; background: var(--char-100); display: inline-flex; align-items: center; justify-content: center; }
.chn-icon { width: 55%; height: 55%; }
a.chn:hover .chn-ring { background: var(--char-200); }
a.chn:focus-visible { outline: 2px solid var(--sea-700); outline-offset: 2px; border-radius: 9999px; }
.chn[data-freshness="due"] .chn-ring { border-color: var(--red-500); }
.chn[data-freshness="never"] .chn-ring { border: 2px dashed var(--char-400); }
.chn--none { opacity: .4; }
.chn-dot { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; }
.chn-dot-ground { fill: var(--chn-ground); }
.chn-dot-glyph { stroke: var(--white, #fff); }
.chn[data-visibility="public"] .chn-dot-disc { fill: var(--green-500); }
.chn[data-visibility="private"] .chn-dot-disc { fill: var(--red-500); }
.chn[data-visibility="not_found"] .chn-dot-disc { fill: var(--char-700); }
.chn[data-visibility="unknown"] .chn-dot-disc { fill: var(--char-400); }
.chn[data-visibility="unchecked"] .chn-dot-disc { fill: var(--chn-ground); stroke: var(--char-400); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) { .chn-ring { transition: background .15s; } }