/* =====================================================================
   board-media.css — the board's 📼 Replays, 🎬 Films and 📊 Analytics (js/board-media.js). The board's own colour names
   and unit (board.css: .bub-sec scope, --rbu). Tables on a wide screen; below 900 px each row is a card (no sideways
   scroll on any screen - the site's rule).
   ===================================================================== */
/* each media screen keeps a page's height while it loads: switching tabs never shortens the page (no jump to the top) */
.bm-view { min-height: calc(100vh - var(--nav-h, 64px) - 40px); }
.bm-view.busy .bm-table, .bm-view.busy .bm-tiles, .bm-view.busy .bm-charts { opacity: .5; transition: opacity .15s; }
.bm-skel { display: grid; gap: calc(8 * var(--rbu)); }
.bm-skel i { display: block; height: calc(44 * var(--rbu)); border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-card), var(--bg-elevated), var(--bg-card)); background-size: 200% 100%; animation: bm-skel 1.2s linear infinite; }
@keyframes bm-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bm-skel i { animation: none; } }
.bm-updated { font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); margin-left: auto; align-self: center; }
.bm-filters { display: flex; flex-wrap: wrap; gap: calc(10 * var(--rbu)); align-items: flex-end; margin: 0 0 calc(14 * var(--rbu)); }
.bm-f { display: grid; gap: calc(4 * var(--rbu)); font-size: calc(11 * var(--rbu)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bm-f select, .bm-f input { font: inherit; font-size: calc(13 * var(--rbu)); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-primary);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: calc(7 * var(--rbu)) calc(10 * var(--rbu)); min-width: calc(120 * var(--rbu)); }
.bm-f select:focus, .bm-f input:focus { outline: 2px solid var(--accent-gold); outline-offset: 1px; }
.bm-q { flex: 1 1 calc(220 * var(--rbu)); }
.bm-q input { width: 100%; box-sizing: border-box; }

.bm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(13 * var(--rbu)); color: var(--text-primary); }
.bm-table th { text-align: left; font-size: calc(11 * var(--rbu)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
    padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); border-bottom: 1px solid var(--border); white-space: nowrap; }
.bm-table td { padding: calc(9 * var(--rbu)) calc(10 * var(--rbu)); border-bottom: 1px solid var(--border); vertical-align: top; }
.bm-table td small { display: block; margin-top: 2px; font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); overflow-wrap: anywhere; }
.bm-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-table tbody tr:hover td { background: var(--bg-card); }
.bm-table tr.on td { background: var(--bg-elevated); }
.bm-table b { font-weight: 700; }
.bm-act { white-space: nowrap; text-align: right; }
.bm-act .rb-x { margin-left: calc(4 * var(--rbu)); }
.bm-danger { color: var(--accent-red) !important; }
.bm-person { font-weight: 700; color: var(--text-primary); }
.bm-dim { color: var(--text-muted); }
.bm-player td { background: var(--bg-deepest) !important; padding: calc(12 * var(--rbu)); }
.bm-player video { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; background: #000; border-radius: var(--radius-sm); }

.bm-chip { display: inline-block; margin: 0 calc(4 * var(--rbu)) calc(3 * var(--rbu)) 0; padding: 1px calc(7 * var(--rbu)); border-radius: 999px; font-size: calc(11 * var(--rbu)); font-weight: 700; white-space: nowrap; }
.bm-chip.ok { background: var(--accent-green-dim); color: var(--accent-green); }
.bm-chip.off { background: rgba(255, 255, 255, .06); color: var(--text-secondary); }
.bm-chip.pub { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.bm-chip.keep { background: var(--accent-gold-dim); color: var(--accent-gold); }
.bm-chip.held { background: var(--accent-orange-dim); color: var(--accent-orange); }
.bm-chip.q { background: var(--accent-purple-dim); color: var(--accent-purple); }

.bm-pager { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--rbu)); margin-top: calc(14 * var(--rbu)); color: var(--text-secondary); font-size: calc(13 * var(--rbu)); }

/* 📊 the numbers */
.bm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(170 * var(--rbu)), 1fr)); gap: calc(10 * var(--rbu)); margin-bottom: calc(16 * var(--rbu)); }
.bm-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); display: grid; gap: calc(4 * var(--rbu)); min-width: 0; }
.bm-tile span { font-size: calc(11 * var(--rbu)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bm-tile b { font-size: calc(26 * var(--rbu)); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bm-tile small { font-size: calc(11.5 * var(--rbu)); color: var(--text-secondary); overflow-wrap: anywhere; }
.bm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(300 * var(--rbu)), 1fr)); gap: calc(12 * var(--rbu)); margin-bottom: calc(16 * var(--rbu)); }
.bm-chart { margin: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)) calc(8 * var(--rbu)); min-width: 0; }
.bm-chart figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: calc(13 * var(--rbu)); font-weight: 700; color: var(--text-primary); margin-bottom: calc(10 * var(--rbu)); }
.bm-chart figcaption span { font-weight: 600; color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.bm-bars { display: flex; align-items: flex-end; height: calc(130 * var(--rbu)); border-bottom: 1px solid var(--border); }
.bm-bar { height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; box-sizing: border-box; cursor: default; }
.bm-bar i { display: block; width: 100%; max-width: calc(22 * var(--rbu)); border-radius: 4px 4px 0 0; }
.bm-bar i.r { background: var(--accent-cyan); }
.bm-bar i.f { background: var(--accent-gold); }
.bm-bar:hover i { filter: brightness(1.25); }
.bm-axis { display: flex; justify-content: space-between; font-size: calc(11 * var(--rbu)); color: var(--text-muted); margin-top: calc(4 * var(--rbu)); }
.bm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(260 * var(--rbu)), 1fr)); gap: calc(12 * var(--rbu)); }
.bm-cols section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); min-width: 0; }
.bm-cols h3 { margin: 0 0 calc(8 * var(--rbu)); font-size: calc(14 * var(--rbu)); color: var(--text-primary); }
.bm-cols h4 { margin: calc(8 * var(--rbu)) 0 calc(4 * var(--rbu)); font-size: calc(11 * var(--rbu)); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bm-list { margin: 0; padding: 0 0 0 calc(18 * var(--rbu)); display: grid; gap: calc(6 * var(--rbu)); font-size: calc(13 * var(--rbu)); color: var(--text-secondary); }
ul.bm-list { list-style: none; padding: 0; }
.bm-list li { display: flex; align-items: baseline; gap: calc(8 * var(--rbu)); min-width: 0; }
.bm-list li > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-list li b { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-list small { color: var(--text-muted); white-space: nowrap; }
.bm-list a { color: var(--accent-cyan); text-decoration: none; }
.bm-list code { font-size: calc(12 * var(--rbu)); }
.bm-raw { margin-top: calc(14 * var(--rbu)); color: var(--text-secondary); font-size: calc(13 * var(--rbu)); }
.bm-raw summary { cursor: pointer; font-weight: 700; }
.bm-small { max-width: calc(520 * var(--rbu)); margin-top: calc(8 * var(--rbu)); }

/* below 900 px: each row a card - the label beside each value, nothing wider than the screen */
@media (max-width: 900px) {
    .bm-table thead { display: none; }
    .bm-table, .bm-table tbody, .bm-table tr, .bm-table td { display: block; width: 100%; box-sizing: border-box; }
    .bm-table tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: calc(10 * var(--rbu)); padding: calc(6 * var(--rbu)) 0; background: var(--bg-card); }
    .bm-table td { border: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: calc(5 * var(--rbu)) calc(12 * var(--rbu)); text-align: left; }
    .bm-table td.n { text-align: left; white-space: normal; }
    .bm-table td[data-l]::before { content: attr(data-l); flex: 0 0 34%; min-width: 80px; padding-right: 8px; box-sizing: border-box; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
    .bm-table td small { flex: 0 0 100%; padding-left: max(34%, 80px); box-sizing: border-box; }
    .bm-table .bm-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
    .bm-table .bm-act .rb-x { margin: 0; }
    .bm-table tr.bm-player { padding: 0; }
    .bm-table tr.bm-player td { display: block; }
    .bm-f { flex: 1 1 calc(140 * var(--rbu)); }
    .bm-f select { width: 100%; min-width: 0; }
}