/* /watch broadcast hub + ad slots. Dark, flat, data-first. */
.wh { --wh-line:#1f262f; --wh-line2:#2a323d; --wh-panel:#0f1318; --wh-dim:#8a939f; --wh-text:#e9edf2; --wh-green:#e3263b; --wh-red:#ff3b40;
  color:var(--wh-text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.wh .num, .wh-t td { font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }
.wh a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── ad slots (component) ── */
.ad-slot { display:flex; flex-direction:column; align-items:center; gap:4px; max-width:100%; }
.ad-label { font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#68717d; }
.ad-box { display:flex; align-items:center; justify-content:center; width:var(--ad-w); height:var(--ad-h); max-width:100%; overflow:hidden; text-decoration:none; color:var(--wh-text,#e9edf2); }
.ad-box img { width:100%; height:100%; object-fit:contain; display:block; }
.ad-slot.is-house .ad-box { border:1px dashed #3a4350; background:#0c1015; }
.ad-slot.is-house .ad-box:hover { border-color:#56606d; }
.ad-house { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; line-height:1.2; }
.ad-house b { font:700 14px/1.1 'Saira','Inter',sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.ad-house span { font-size:12px; color:var(--wh-green,#e3263b); }
.ad-house em { font-style:normal; font-size:10px; color:#68717d; }
.ad-slot--banner[data-ad-size="320x50"] .ad-house, .ad-slot--banner[data-ad-size="728x90"] .ad-house { flex-direction:row; gap:12px; }
.ad-slot--lockup { flex-direction:row; gap:8px; }
.ad-slot--lockup .ad-box { padding:0 8px; }
.ad-slot--banner[data-ad-size="320x50"] .ad-house b { font-size:12px; white-space:nowrap; }
.ad-slot--banner[data-ad-size="320x50"] .ad-house span { font-size:11px; white-space:nowrap; }
.ad-slot--banner[data-ad-size="320x50"] .ad-house em { display:none; }
.ad-house-l { font-size:11px; font-weight:600; color:#aeb6c1; white-space:nowrap; }
.ad-name { font:700 13px/1 'Saira',sans-serif; text-transform:uppercase; }

/* side skins: identical size both sides, desktop only */
.wh-skin { display:none; }
@media (min-width:1440px) {
  .wh-skin { display:flex; position:fixed; z-index:20; top:calc(var(--psh-top, 104px) + 20px); width:160px; }
  .wh-skin--l { left:calc((100vw - 1080px) / 4 - 80px); }
  .wh-skin--r { right:calc((100vw - 1080px) / 4 - 80px); }
}

/* ── page ── */
.wh-banner { display:flex; justify-content:center; padding:4px 0 14px; }
.wh-banner:not(:has(.is-sold)), .wh-infeed:not(:has(.is-sold)), .ad-slot.is-collapsed, .wh-title-spon:empty, .wh-seg-h > [data-ad-slot]:empty { display:none !important; }
.wh-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--wh-line2); }
.wh-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--wh-dim); margin-bottom:4px; }
.wh-title { margin:0; font:800 32px/1 'Saira','Inter',sans-serif; letter-spacing:.01em; text-transform:uppercase; color:var(--wh-text); }

.wh-top { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; }
.wh-feature { display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); background:#07090c; border:1px solid var(--wh-line); }
.wh-feature.is-live { border-color:#5b1f24; box-shadow:inset 0 3px 0 var(--wh-red); }
.wh-feature__stage { display:flex; align-items:center; justify-content:center; padding:18px 10px; background:#040507; border-right:1px solid var(--wh-line); }
.wh .wh-tree { width:150px; --bulb:27px; --bulb-sm:14px; }
.wh .wh-tree .ptl-labels { display:none; }
.wh-feature { grid-template-columns:200px minmax(0,1fr); }
.wh-feature__info { padding:24px 26px; display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
.wh-feature__status { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--wh-dim); }
.wh-live, .wh-off { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.1em; padding:3px 6px; margin-right:6px; vertical-align:1px; }
.wh-live { background:var(--wh-red); color:#fff; }
.wh-off { background:#1b2129; color:#aeb6c1; }
.wh-feature__title { margin:0; font:700 28px/1.15 'Saira','Inter',sans-serif; color:var(--wh-text); overflow-wrap:anywhere; }
.wh-feature__sub { margin:0; font-size:14px; line-height:1.5; color:var(--wh-dim); max-width:46ch; }
.wh-feature__sub b { color:var(--wh-text); }
.wh-btn { align-self:flex-start; display:inline-block; margin-top:6px; padding:11px 18px; font:700 14px/1 'Inter',sans-serif; text-decoration:none; border:1px solid var(--wh-line2); }
.wh-btn.go { background:#E3263B; border-color:#E3263B; color:#fff !important; }

.wh-rotd { background:var(--wh-panel); border:1px solid var(--wh-line); padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.wh-seg-h { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wh-rotd .wh-seg-h > span { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.wh-rotd__tree { font-size:12px; color:var(--wh-dim); }
.wh-rotd__board { width:100%; max-width:268px; margin:4px auto 2px; }
.wh-rotd__name { font:700 18px/1.2 'Saira','Inter',sans-serif; text-align:center; }
.wh-rotd__meta { font-size:12px; color:var(--wh-dim); text-align:center; }

.wh-sec { margin-top:26px; min-width:0; }
.wh-sec-h { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:7px; border-bottom:1px solid var(--wh-line2); flex-wrap:wrap; }
.wh-sec-h h2 { margin:0; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wh-text); }
.wh-sec-h > span, .wh-sec-h > a { font-size:12px; color:var(--wh-dim); }
.wh-sec-h > a { color:#E8EDF3; text-decoration:none; }
.wh-sec-sub { font-size:12px; color:var(--wh-dim); padding:8px 0 0; }

.wh-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:10px; overflow-x:auto; padding:12px 0 4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.wh-tile { display:flex; flex-direction:column; gap:5px; padding:12px 14px; background:var(--wh-panel); border:1px solid var(--wh-line); text-decoration:none; min-width:0; }
.wh-tile:hover { border-color:#3a4350; }
.wh-tile.is-live { border-color:#5b1f24; }
.wh-tile .k { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wh-dim); }
.wh-tile .t { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-tile .m { font-size:12.5px; color:var(--wh-dim); }
.wh-tile .m b { color:var(--wh-text); font-weight:700; }
.wh-empty { padding:14px 0; font-size:14px; color:var(--wh-dim); }

.wh-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.wh-grid--2 { grid-template-columns:1fr 1fr; }
.wh-grid--2:has(> .wh-sec:only-child) { grid-template-columns:minmax(0,1fr); }
.wh-infeed { margin-top:26px; display:flex; justify-content:center; }

.wh-t { width:100%; border-collapse:collapse; font-size:14px; }
.wh-t th { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--wh-dim); text-align:right; padding:9px 8px; border-bottom:1px solid var(--wh-line); white-space:nowrap; }
.wh-t td { text-align:right; padding:9px 8px; border-bottom:1px solid var(--wh-line); white-space:nowrap; }
.wh-t th:first-child, .wh-t td:first-child { padding-left:0; }
.wh-t th:last-child, .wh-t td:last-child { padding-right:0; }
.wh-t .l { text-align:left; }
.wh-t td.l:not(.dim) { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.wh-t .rt, .wh .num { font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; }
.wh-t .dim { color:var(--wh-dim); }
.wh-t tbody tr:nth-child(even) td { background:rgba(255,255,255,.015); }
.wh-foot { margin:22px 0 0; font-size:12px; color:var(--wh-dim); }
.wh-foot a { color:#E8EDF3; }

@media (max-width:900px) {
  .wh-top, .wh-grid, .wh-grid--2 { grid-template-columns:minmax(0,1fr); }
  .wh-infeed { margin-top:18px; }
}
@media (max-width:719px) {
  .wh-banner { padding-top:0; }
  .wh-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .wh-title { font-size:26px; }
  .wh-feature { grid-template-columns:96px minmax(0,1fr); }
  .wh-feature__stage { padding:12px 6px; }
  .wh .wh-tree { width:84px; --bulb:15px; --bulb-sm:8px; }
  .wh-feature__info { padding:16px; }
  .wh-feature__title { font-size:22px; }
  .wh-strip { grid-auto-columns:minmax(200px, 78%); }
  .wh-t { font-size:13px; }
}
html.ptl-ios-app .wh { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
html, body { overflow-x:clip; }
/* show the tree head only (the art includes a tall stand) */
.wh .wh-tree { height:280px; overflow:hidden; justify-content:flex-start; }
.wh-feature__stage { align-items:flex-start; }
@media (max-width:719px) { .wh .wh-tree { height:158px; } }
.wh-rotd__board { max-width:200px; }
@media (min-width:720px) { .wh-feature { grid-template-columns:220px minmax(0,1fr); } .wh .wh-tree { width:180px; height:330px; --bulb:32px; --bulb-sm:16px; } .wh-feature__stage { align-items:center; } }
@media (max-width:719px) { .wh-rotd__board { max-width:170px; } }
