/* The channel choice before the character screen (ui/flow/ChannelSelectScreen.js): one compact card, the server panel on the left, the channels on the right as a table (light, name, rule tags, state, head count,
   meter), a footer with the selection and the buttons. Status colours are lit, not flat: a shaded light with a soft glow and a tinted state word. Tokens first (docs/decisions/ui-bible.md). */
.chp-wrap { max-width: 760px; padding-top: 10vh; }
.chp-card { padding: var(--sp-6); color: var(--text); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--bevel), var(--drop); text-align: left; }
.chp-top { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--edge); }
html .chp-card .logo.nf-logo { margin: 0; flex: none; }
html .chp-card .logo.nf-logo img { width: 112px; margin: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.chp-who { display: flex; flex-direction: column; min-width: 0; margin-left: auto; text-align: right; }
.chp-who b { font-size: var(--fs-lead); color: var(--accent-hi); }
.chp-who .mute { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.chp-cols { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(0, 2.2fr); gap: var(--sp-5); align-items: start; }
.chp-panel { background: var(--surface-deep); border: 1px solid var(--edge); border-radius: var(--r-sm); overflow: hidden; }
.chp-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 28px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gf-title); background: linear-gradient(var(--gf-frame-hi), var(--gf-frame)); border-bottom: 1px solid var(--edge); }
.chp-list { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 120px; max-height: 44vh; overflow-y: auto; padding: var(--sp-3); }
.chp-srv, .chp-row { display: flex; align-items: center; gap: var(--sp-4); width: 100%; min-width: 0; min-height: 36px; padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-strong); color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.chp-row:hover:not(:disabled) { background: color-mix(in srgb, var(--gf-frame) 50%, var(--surface)); border-color: var(--edge-hi); }
.chp-srv.sel, .chp-row.sel { background: linear-gradient(color-mix(in srgb, var(--accent-lo) 85%, var(--surface)), color-mix(in srgb, var(--accent-lo) 55%, var(--surface))); border-color: var(--edge-hi); color: var(--accent-hi); }
.chp-row.off { cursor: default; color: var(--muted); }
.chp-row.off .chp-name { font-weight: 400; }
.chp-row:focus-visible, .chp-srv:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.chp-srv .chp-name { flex: 1; }
.chp-list .chp-row .chp-name { flex: 0 1 auto; min-width: 4.6em; max-width: 13em; } /* (the name takes its own width, « Canal 4 (noBOT) » included; the tags share what is left) */
.chp-place { flex: none; min-width: 2.2em; font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--muted); opacity: 0.85; } /* (where the machine is: FR, UK) */
.chp-tags { flex: 1; display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.chp-tag { padding: 0 var(--sp-3); font-size: var(--fs-caption); line-height: 16px; color: var(--accent); background: color-mix(in srgb, var(--gf-frame) 70%, transparent); border: 1px solid var(--edge); border-radius: var(--r-sq); white-space: nowrap; }
.chp-state { flex: none; font-size: var(--fs-small); font-weight: 700; color: var(--muted); white-space: nowrap; }
.chp-state.good { color: color-mix(in srgb, #3fc183 78%, var(--text)); }
.chp-state.warn { color: #e2b34a; }
.chp-state.bad { color: color-mix(in srgb, #e5574f 75%, var(--text)); }
.chp-row.off .chp-state { opacity: 0.8; }
.chp-count { flex: none; min-width: 4.4em; font-size: var(--fs-body); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); white-space: nowrap; }
.chp-srv { flex-wrap: wrap; row-gap: 0; }
.chp-srv .chp-count { flex-basis: 100%; min-width: 0; padding-left: calc(10px + var(--sp-4)); text-align: left; font-size: var(--fs-small); }
.chp-row.sel .chp-count, .chp-srv.sel .chp-count { color: var(--accent-hi); }
.chp-meter { flex: none; width: 48px; height: 5px; background: var(--surface-deep); border: 1px solid var(--edge); border-radius: var(--r-sq); overflow: hidden; }
.chp-meter i { display: block; height: 100%; background: linear-gradient(90deg, #2f9e6b, #56d39b); }
/* the lights: --c is the tone, the radial shading and the glow come from it */
.chp-dot { --c: #8f8aae; flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--r-round); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 65%, #000)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, #000), 0 0 6px color-mix(in srgb, var(--c) 55%, transparent); }
.chp-dot.good { --c: #34b47a; }
.chp-dot.warn { --c: #e0a526; }
.chp-dot.bad { --c: #dc4b4b; }
.chp-legend { display: inline-flex; gap: var(--sp-5); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gf-title); }
.chp-key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chp-empty { padding: var(--sp-6); text-align: center; font-size: var(--fs-body); }
.chp-foot { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--edge); }
.chp-info { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--muted); }
.chp-detail { overflow-wrap: anywhere; }
.chp-msg { min-height: 1.2em; color: var(--red); font-weight: 700; }
.chp-actions { display: flex; flex: none; gap: var(--sp-3); }
.chp-actions .btn { min-width: 92px; }
@media (max-width: 640px) { .chp-wrap { padding-top: 4vh; } .chp-card { padding: var(--sp-5); } .chp-cols { grid-template-columns: 1fr; } .chp-servers { min-height: 0; } .chp-tags, .chp-meter { display: none; } .chp-list .chp-state { margin-left: auto; } .chp-foot { flex-direction: column; align-items: stretch; } .chp-actions { justify-content: flex-end; } }