/* =====================================================================
   board-tv.css — the board's 📺 UNDERDOG TV (js/board-tv.js) and 🧪 Test Crew (js/board-crew.js), with the Test Crew
   application's Meta e-mail in the Inbox. The board's colour names and unit (board.css: .bub-sec scope, --rbu); the
   tables, chips and filters row are board-media.css's (.bm-table: a card per row below 900 px, no sideways scroll).
   ===================================================================== */

/* 📺 the station's switch: big, one look tells on or off */
.btv-air { display: inline-flex; align-items: center; gap: calc(12 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(18 * var(--rbu)) calc(10 * var(--rbu)) calc(12 * var(--rbu));
    border-radius: 999px; border: 2px solid var(--border-hover); background: var(--bg-card); color: var(--text-secondary); font: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.btv-air:hover:not([disabled]) { border-color: var(--text-secondary); }
.btv-air[disabled] { cursor: default; opacity: .85; }
.btv-air:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.btv-track { flex: none; position: relative; width: calc(52 * var(--rbu)); height: calc(28 * var(--rbu)); border-radius: 999px; background: var(--bg-elevated); transition: background .15s; }
.btv-track span { position: absolute; top: calc(3 * var(--rbu)); left: calc(3 * var(--rbu)); width: calc(22 * var(--rbu)); height: calc(22 * var(--rbu)); border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.btv-air-t { display: grid; min-width: 0; }
.btv-air-t b { font-size: calc(17 * var(--rbu)); font-weight: 900; letter-spacing: .12em; color: var(--text-primary); line-height: 1.1; }
.btv-air-t small { font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); }
.btv-air.on { border-color: var(--accent-red); background: var(--accent-red-dim); }
.btv-air.on .btv-track { background: var(--accent-red); }
.btv-air.on .btv-track span { transform: translateX(calc(24 * var(--rbu))); background: #fff; }
.btv-air.on .btv-air-t b { color: #fff; }
.btv-air.on .btv-air-t small { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .btv-track, .btv-track span { transition: none; } }

.btv-bar { align-items: center; }
.btv-mode { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(8 * var(--rbu)); min-width: 0; font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); }
.btv-mode .bm-chip { margin: 0; font-size: calc(11.5 * var(--rbu)); letter-spacing: .08em; }
.btv-time { font-size: calc(15 * var(--rbu)); font-variant-numeric: tabular-nums; }
.btv-film { color: var(--text-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.btv-film:hover { color: var(--accent-cyan); }
.btv-why { color: var(--text-secondary); font-size: calc(12.5 * var(--rbu)); overflow-wrap: anywhere; }
.btv-table tr.btv-past td { opacity: .6; }
.btv-done { font-size: calc(14 * var(--rbu)); }
.btv-swap td { background: var(--bg-deepest) !important; }
.btv-swap-b { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(8 * var(--rbu)); }
.btv-swap-b .bm-f select { max-width: 100%; }
.btv-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6 * var(--rbu)); }
.btv-picks li { display: flex; align-items: center; gap: calc(10 * var(--rbu)); padding: calc(7 * var(--rbu)) calc(10 * var(--rbu)); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.btv-pk { flex: 1; min-width: 0; font-size: calc(13 * var(--rbu)); color: var(--accent-gold); overflow-wrap: anywhere; }
.btv-pk a { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.btv-pk small { margin-left: calc(8 * var(--rbu)); color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.btv-none { font-size: calc(12.5 * var(--rbu)); }
.btv-view .rb-acts .rb-in { flex: 1 1 calc(200 * var(--rbu)); max-width: calc(360 * var(--rbu)); }

/* 🧪 Test Crew: the level badge (a glove wrap: 1–3 stripes in the level's colour, as on Discord) */
.bcr-lv { --lv: #8BD17C; display: inline-flex; align-items: center; gap: calc(6 * var(--rbu)); padding: 2px calc(9 * var(--rbu)) 2px calc(4 * var(--rbu)); border-radius: 999px;
    background: color-mix(in srgb, var(--lv) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 50%, transparent); color: var(--lv); font-size: calc(12 * var(--rbu)); font-weight: 800; white-space: nowrap; }
.bcr-lv.lv-pro { --lv: #26C6A6; }
.bcr-lv.lv-elite { --lv: #FF8A3D; }
.bcr-st { display: inline-flex; flex-direction: column-reverse; justify-content: center; gap: 2px; width: calc(18 * var(--rbu)); height: calc(18 * var(--rbu)); border-radius: calc(5 * var(--rbu)); background: var(--lv); padding: 0 calc(3 * var(--rbu)); box-sizing: border-box; }
.bcr-st i { display: block; height: 2px; border-radius: 1px; background: #fff; }
.bcr-n { font-size: calc(16 * var(--rbu)); font-variant-numeric: tabular-nums; margin-right: calc(6 * var(--rbu)); }
.bcr-bar { --lv: #8BD17C; display: inline-block; vertical-align: middle; width: calc(90 * var(--rbu)); height: calc(6 * var(--rbu)); border-radius: 99px; background: var(--bg-elevated); overflow: hidden; }
.bcr-bar s { display: block; height: 100%; text-decoration: none; background: var(--lv); border-radius: 99px; }
.bcr-bar.lv-pro { --lv: #26C6A6; }
.bcr-bar.lv-elite { --lv: #FF8A3D; }
.bcr-mx { display: inline-flex; flex-wrap: nowrap; gap: calc(3 * var(--rbu)); }
.bcr-m { display: inline-grid; place-items: center; width: calc(24 * var(--rbu)); height: calc(24 * var(--rbu)); border-radius: calc(5 * var(--rbu)); background: var(--bg-elevated); font-size: calc(12 * var(--rbu)); color: var(--text-muted); cursor: default; }
.bcr-m.ok { background: var(--accent-green-dim); }
.bcr-vers { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.bcr-now { display: block; white-space: nowrap; color: var(--accent-red); font-weight: 700; }
.bcr-now.ok { color: var(--accent-green); }
.bm-table .bcr-now small, .bm-table .btv-done small { display: inline; color: var(--text-muted); font-weight: 500; }
.bcr-table tr.bcr-out td { opacity: .55; }
.bcr-lists { margin-bottom: calc(16 * var(--rbu)); }
.bcr-lists h3 { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--rbu)); }
.bcr-lists h3 small { color: var(--text-muted); font-weight: 600; }
.bcr-lists h3 .rb-x { margin-left: auto; }
.bcr-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6 * var(--rbu)); }
.bcr-meta li { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--rbu)); }
.bcr-meta li > span { flex: 1 1 calc(180 * var(--rbu)); min-width: 0; display: grid; font-size: calc(13 * var(--rbu)); }
.bcr-meta code { font-size: calc(12.5 * var(--rbu)); color: var(--accent-cyan); overflow-wrap: anywhere; }

/* the Inbox: a Test Crew application's Meta e-mail, first and big (Damian adds it in Meta's release channel) */
.rb-refapp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(38, 198, 166, .1); border: 1px solid rgba(38, 198, 166, .35); }
.rb-refapp-meta span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.rb-refapp-meta b { font-size: 16px; color: #26C6A6; overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 900px) {
    .btv-air { width: 100%; }
    .btv-swap-b .bm-f { flex: 1 1 100%; }
    .btv-swap-b .bm-f select { width: 100%; }
    .bcr-now { display: inline; margin-right: 10px; }
    .bcr-mx { flex-wrap: wrap; }
    .bm-table .bcr-now small, .bm-table .btv-done small { padding-left: 0; flex: none; }
}