/* Debug > Canaux (ui/debug/Channels.js): one card per channel with its status light and figures. Colours from the console tokens (--dc-*), sizes from the scale (--fs-*). */
.debug-console .chn { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.debug-console .chn-role { margin: 0; padding: 8px 12px; border: 1px solid var(--dc-line); border-radius: 6px; background: var(--dc-card); font-size: var(--fs-body); overflow-wrap: anywhere; }
.debug-console .chn-role[data-tone="good"] { border-color: var(--dc-good); }
.debug-console .chn-role[data-tone="bad"] { border-color: var(--dc-bad); }
.debug-console .chn-notice { margin: 0; min-height: 1.2em; font-size: var(--fs-small); }
.debug-console .chn-list { display: flex; flex-direction: column; gap: 8px; }
.debug-console .chn-row { padding: 10px 12px; border: 1px solid var(--dc-line); border-radius: 6px; background: var(--dc-card); display: flex; flex-direction: column; gap: 6px; }
.debug-console .chn-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.debug-console .chn-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dc-mute); }
.debug-console .chn-row[data-tone="good"] .chn-dot { background: var(--dc-good); }
.debug-console .chn-row[data-tone="warn"] .chn-dot { background: var(--dc-warn); }
.debug-console .chn-row[data-tone="bad"] .chn-dot { background: var(--dc-bad); }
.debug-console .chn-status { margin-left: auto; font-size: var(--fs-small); color: var(--dc-text); }
.debug-console .chn-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.debug-console .chn-fig { display: flex; flex-direction: column; min-width: 0; }
.debug-console .chn-fig small { font-size: var(--fs-small); color: var(--dc-mute); }
.debug-console .chn-fig b { font-size: var(--fs-body); overflow-wrap: anywhere; }