/* /Components/Dashboards/BroadcastSlide.razor.rz.scp.css */
/* In the stage's 1280x720 space, in the frame language of Steven's spec §2, laid out as Hoopla's newsflash. */
.nf[b-0f1upyl931] { position: absolute; inset: 0; --gib: "Figtree", "Segoe UI", system-ui, sans-serif; --nf-delay: 650ms; }
/* No transition: straight in. */
.nf.nf-now[b-0f1upyl931] { --nf-delay: 0ms; }
.nf-frame[b-0f1upyl931] { position: absolute; left: 0; top: 0; overflow: visible; }
/* Translucent, so the broadcast's background shows through - as Hoopla's did. */
.nf-fill[b-0f1upyl931] { fill: rgba(0, 0, 0, .55); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.nf-title[b-0f1upyl931] { position: absolute; left: 100px; top: 23px; width: 860px; margin: 0; font: 700 46px/104px var(--gib); color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nf-card[b-0f1upyl931] { position: absolute; left: 73px; top: 157px; width: 1132px; height: 400px; color: #fff; }
.nf-who[b-0f1upyl931] { position: absolute; left: 36px; top: 28px; right: 36px; display: flex; align-items: center; gap: 22px;
    font: 700 40px var(--gib); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px; }
.nf-msg[b-0f1upyl931] { position: absolute; left: 36px; right: 36px; top: 140px; margin: 0; font: 400 42px/1.3 var(--gib);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nf-msg-top[b-0f1upyl931] { top: 40px; -webkit-line-clamp: 7; }

/* The words appear as the transition peaks - nothing else moves; the background does the work. */
.nf-in[b-0f1upyl931] { opacity: 0; animation: nf-in-b-0f1upyl931 500ms ease-out var(--nf-delay) forwards; }
@keyframes nf-in-b-0f1upyl931 { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
/* After a clip: held back until the player says it's over (js/dashboard.js, after-clip), then in straight away. */
.nf.nf-wait[b-0f1upyl931] { --nf-delay: 0ms; }
.nf.nf-wait:not(.after-clip) .nf-in[b-0f1upyl931] { animation: none; opacity: 0; }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css): still translucent, for the broadcast's background. */
.nf-soft[b-0f1upyl931] { display: none; }
.th-soft .nf-std[b-0f1upyl931] { display: none; }
.th-soft .nf-soft[b-0f1upyl931] { display: inline; }
.th-soft .nf-soft-dark[b-0f1upyl931] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .nf-soft-red[b-0f1upyl931] { fill: var(--accent); }

/* Over a held clip (js/dashboard.js, db-clip-held), solid - its picture is busier than a background (Andy, 2026-11-03: "much darker still"). */
.db-clip-held .nf-fill[b-0f1upyl931] { fill: rgb(0, 0, 0); }
.th-soft .db-clip-held .nf-soft-dark[b-0f1upyl931] { fill: rgb(var(--panel)); }
/* Light (and Dark): the words from the theme. */
.th-soft .nf-title[b-0f1upyl931], .th-soft .nf-card[b-0f1upyl931] { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .nf-in[b-0f1upyl931] { animation: none; opacity: 1; }
}
/* /Components/Dashboards/CountdownSlide.razor.rz.scp.css */
/* Steven's spec §3.2 (docs/hoopla-tv-replica), in the stage's 1280x720 space. Hoopla's face here is Gibson; Figtree is
   the spec's substitute where installed, then Segoe UI. */
.cd[b-6ipsr2usm3] { position: absolute; inset: 0; --gib: "Figtree", "Segoe UI", system-ui, sans-serif; }
.cd-frame[b-6ipsr2usm3] { position: absolute; overflow: visible; }
/* The title bar is light and translucent, the background showing through. */
.cd-bar[b-6ipsr2usm3] { fill: rgba(255, 255, 255, .7); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.cd-clock[b-6ipsr2usm3] { fill: rgba(0, 0, 0, .8); stroke: #b4b4b4; stroke-width: 2; }
.cd-line[b-6ipsr2usm3] { stroke: #b4b4b4; stroke-width: 1.5; }
/* The bar stops short of the logo: white on it would not read. */
.cd-title[b-6ipsr2usm3] { position: absolute; left: 122px; top: 20px; width: 830px; margin: 0; text-align: center;
    font: 600 48px/112px var(--gib); color: #333; text-transform: uppercase; }
.cd-cells[b-6ipsr2usm3] { position: absolute; inset: 0; }
.cd-cell[b-6ipsr2usm3] { position: absolute; top: 230px; width: 259px; height: 266px; text-align: center; color: #fff; font-family: var(--gib); }
.cd-n[b-6ipsr2usm3] { position: absolute; left: 0; right: 0; top: 40px; font-size: 104px; font-weight: 700; line-height: 120px;
    font-variant-numeric: tabular-nums; }
.cd-l[b-6ipsr2usm3] { position: absolute; left: 0; right: 0; top: 168px; font-size: 40px; font-weight: 400; }

.cd-fade[b-6ipsr2usm3] { opacity: 0; animation: cd-in-b-6ipsr2usm3 1000ms linear forwards; }
@keyframes cd-in-b-6ipsr2usm3 { from { opacity: 0; } to { opacity: 1; } }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css). */
.cd-soft[b-6ipsr2usm3] { display: none; }
.th-soft .cd-std[b-6ipsr2usm3] { display: none; }
.th-soft .cd-soft[b-6ipsr2usm3] { display: inline; }
.th-soft .cd-soft-dark[b-6ipsr2usm3] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .cd-soft-red[b-6ipsr2usm3] { fill: var(--accent); }
.th-soft .cd-line[b-6ipsr2usm3] { stroke: var(--line); }
.th-soft .cd-title[b-6ipsr2usm3] { left: 96px; top: 23px; width: 860px; text-align: left; color: var(--ink); text-transform: none; font-size: 46px; line-height: 104px; }
/* Light (and Dark): the figures from the theme. */
.th-soft .cd-cell[b-6ipsr2usm3] { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .cd-fade[b-6ipsr2usm3] { animation: none; opacity: 1; }
}
/* /Components/Dashboards/DashboardStage.razor.rz.scp.css */
/* What holds the stage: filled by the background and the transition canvas, cropped to fit; the 1280x720 stage in the
   middle, scaled by js/dashboard.js so all of it shows. */
.db-host[b-11jaqvuco3] { position: relative; width: 100%; height: 100%; min-height: 320px; background: #000; overflow: hidden; }
.db-stage[b-11jaqvuco3] { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform: translate(-50%, -50%);
    transform-origin: 50% 50%; overflow: hidden; }
.db-video[b-11jaqvuco3], .db-bg[b-11jaqvuco3], .db-fx[b-11jaqvuco3] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-slides[b-11jaqvuco3] { position: absolute; inset: 0; }
/* In the right-hand end of the title frame (x73-1205, y23-127), centred top to bottom. */
.db-logo[b-11jaqvuco3] { position: absolute; left: 971px; top: 39px; width: 210px; height: auto; pointer-events: none; }
/* The transition canvas is over everything, and lets clicks through. */
.db-fx[b-11jaqvuco3] { pointer-events: none; }
/* A clip fills the screen, over everything, while it plays; then it's held, paused, under the stage - the broadcast's
   card over its last picture - or fades out to the background (js/dashboard.js). */
.db-clip[b-11jaqvuco3] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; transition: opacity 300ms; }
.db-clip.db-clip-wait[b-11jaqvuco3], .db-clip.db-clip-out[b-11jaqvuco3] { opacity: 0; pointer-events: none; }
.db-host.db-clip-held .db-clip[b-11jaqvuco3] { z-index: 1; }
.db-host.db-clip-held .db-stage[b-11jaqvuco3] { z-index: 2; }
.db-clip[hidden][b-11jaqvuco3], .db-sound[hidden][b-11jaqvuco3] { display: none; }
.db-sound[b-11jaqvuco3] { position: absolute; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 16px; }
/* /Components/Dashboards/InsightSlide.razor.rz.scp.css */
/* Steven's spec §4, in the stage's 1280x720 space. One card takes 7.5s (InsightSlide.SecondsPerCard): in by 0.7s, holding to
   7s, out by 7.5s - as percentages in the keyframes. The arrows say it's a rise, not only the lime: Steven is colour-blind. */
.in[b-or3hi6gbcs] { position: absolute; inset: 0; perspective: 1000px; color: #fff; --din: "Bahnschrift", "Barlow Semi Condensed", "D-DIN", "DIN Pro", "Arial Narrow", sans-serif;
    --gib: "Figtree", "Segoe UI", system-ui, sans-serif; --lime: #b5e61d; }
.in-frame[b-or3hi6gbcs] { position: absolute; overflow: visible; }
.in-fill[b-or3hi6gbcs] { fill: rgba(0, 0, 0, .78); stroke: #b4b4b4; stroke-width: 2; }
.in-title[b-or3hi6gbcs] { position: absolute; left: 96px; top: 23px; max-width: 860px; overflow: hidden; text-overflow: ellipsis; margin: 0; font: 700 50px/104px var(--din); text-transform: uppercase;
    color: #fff; letter-spacing: .3px; white-space: nowrap; }

.in-tab[b-or3hi6gbcs] { position: absolute; left: 96px; top: 127px; width: 601px; height: 47px; display: flex; align-items: center; gap: 12px; padding-left: 18px; box-sizing: border-box;
    background: #000; border: 1px solid #b4b4b4; border-radius: 0 0 8px 8px; font: 400 30px var(--gib); text-transform: uppercase;
    transform-origin: top; animation: in-tab-b-or3hi6gbcs 300ms ease-out both; }

.in-card[b-or3hi6gbcs] { position: absolute; left: 468px; top: 242px; width: 631px; height: 315px; box-sizing: border-box; padding: 20px 40px 20px 110px; text-align: center;
    background: rgba(0, 0, 0, .72); border: 2px solid #b4b4b4; border-radius: 8px; font: 400 32px/1.3 var(--gib); animation: in-card-b-or3hi6gbcs 7500ms both; }
.in-card p[b-or3hi6gbcs] { margin: 6px 0; }
.in-wide[b-or3hi6gbcs] { left: 223px; top: 214px; width: 834px; height: 372px; padding: 20px 24px; }
.in-name[b-or3hi6gbcs], .in-blue[b-or3hi6gbcs] { color: #5ab4ff; font-weight: 700; }
.in-name[b-or3hi6gbcs] { font-size: 40px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-moved[b-or3hi6gbcs] { display: flex; align-items: center; justify-content: center; gap: 10px; }
.in-big[b-or3hi6gbcs] { font-size: 70px; line-height: 1; color: var(--lime); font-weight: 700; }
.in-ago[b-or3hi6gbcs] { color: rgba(255, 255, 255, .65); font-size: 24px; }
.in-measure[b-or3hi6gbcs] { font-size: 26px; line-height: 32px; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-when[b-or3hi6gbcs] { font-size: 18px; line-height: 22px; color: rgba(255, 255, 255, .65); }
/* Top Performer: up by, then to. */
.in-up[b-or3hi6gbcs] { font-size: 64px; line-height: 76px; margin-top: 8px; }
.in-to[b-or3hi6gbcs] { font-size: 30px; line-height: 40px; margin-bottom: 6px; }
/* Performance: each team on its own - photo, name, rise, figure - five to a card. */
.in-head[b-or3hi6gbcs] { font-size: 28px; }
.in-row[b-or3hi6gbcs] { display: flex; justify-content: center; gap: 30px; margin: 14px 0 4px; }
.in-team[b-or3hi6gbcs] { width: 136px; display: flex; flex-direction: column; align-items: center; }
.in-team[b-or3hi6gbcs]  .in-small { border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.in-tname[b-or3hi6gbcs] { font-size: 22px; line-height: 30px; margin-top: 8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-tup[b-or3hi6gbcs] { font-size: 26px; line-height: 32px; }
.in-tto[b-or3hi6gbcs] { font-size: 20px; line-height: 26px; color: rgba(255, 255, 255, .75); }
.in-page[b-or3hi6gbcs] { position: absolute; right: 18px; bottom: 12px; font-size: 18px; color: rgba(255, 255, 255, .65); }
.in-lime[b-or3hi6gbcs] { color: var(--lime); font-weight: 700; }

.in-photo[b-or3hi6gbcs] { position: absolute; left: 161px; top: 207px; width: 385px; height: 385px; border-radius: 50%; box-shadow: 0 0 0 4px #fff; filter: grayscale(1); overflow: hidden; z-index: 1;
    animation: in-photo-b-or3hi6gbcs 7500ms both; }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css). A rise goes white, not lime or red: red would read as bad news. */
.in-soft[b-or3hi6gbcs] { display: none; }
.th-soft .in[b-or3hi6gbcs] { --din: "Figtree", "Segoe UI", system-ui, sans-serif; --lime: var(--ink); }
.th-soft .in-std[b-or3hi6gbcs] { display: none; }
.th-soft .in-soft[b-or3hi6gbcs] { display: inline; }
.th-soft .in-soft-dark[b-or3hi6gbcs] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .in-soft-red[b-or3hi6gbcs] { fill: var(--accent); }
.th-soft .in-title[b-or3hi6gbcs] { text-transform: none; font-weight: 600; font-size: 46px; }
.th-soft .in-tab[b-or3hi6gbcs] { background: var(--row); border: 0; border-radius: 0 0 14px 14px; text-transform: none; font-size: 26px; }
.th-soft .in-card[b-or3hi6gbcs] { background: rgba(var(--card), .95); border: 0; border-radius: 18px; }
.th-soft .in-name[b-or3hi6gbcs], .th-soft .in-blue[b-or3hi6gbcs] { color: var(--ink); }
.th-soft .in-photo[b-or3hi6gbcs] { box-shadow: 0 0 0 5px var(--accent); }
.th-soft .in-up path[b-or3hi6gbcs], .th-soft .in-tup path[b-or3hi6gbcs] { stroke: var(--ink); }
.th-soft .in-team[b-or3hi6gbcs]  .in-small { box-shadow: 0 0 0 3px var(--accent); }
/* Climbers' step arrow is gold, as on the board. */
.th-soft .in-zig path[b-or3hi6gbcs], .th-soft .in-moved path[b-or3hi6gbcs] { stroke: var(--gold); }
/* Light (and Dark, the same as before): the words and the gold marks, from the theme. */
.th-soft .in[b-or3hi6gbcs], .th-soft .in-title[b-or3hi6gbcs] { color: var(--ink); }
.th-soft .in-ago[b-or3hi6gbcs], .th-soft .in-when[b-or3hi6gbcs], .th-soft .in-page[b-or3hi6gbcs] { color: var(--ink-3); }
.th-soft .in-measure[b-or3hi6gbcs], .th-soft .in-tto[b-or3hi6gbcs] { color: var(--ink-2); }
.th-soft .in-tab path[b-or3hi6gbcs] { stroke: var(--gold); }

@keyframes in-tab-b-or3hi6gbcs { from { transform: rotateX(-90deg); } to { transform: rotateX(0); } }
@keyframes in-card-b-or3hi6gbcs {
    0% { transform: translateX(1000px) rotateY(-20deg); opacity: 0; animation-timing-function: ease-out; }
    9% { transform: none; opacity: 1; }
    93% { transform: none; opacity: 1; animation-timing-function: ease-in; }
    100% { transform: translateX(-3500px) rotateY(20deg); opacity: 1; }
}
@keyframes in-photo-b-or3hi6gbcs {
    0% { transform: translateY(-600px) rotateX(-20deg); opacity: 0; animation-timing-function: ease-out; }
    9% { transform: none; opacity: 1; }
    93% { transform: none; opacity: 1; animation-timing-function: ease-in; }
    100% { transform: translateY(800px) rotateX(20deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .in-tab[b-or3hi6gbcs], .in-card[b-or3hi6gbcs], .in-photo[b-or3hi6gbcs] { animation: none; }
}
/* /Components/Dashboards/LeaderboardSlide.razor.rz.scp.css */
/* Steven's spec §2 and §3.1 (docs/hoopla-tv-replica), in the stage's 1280x720 space. Fonts: Bahnschrift is Windows' DIN,
   the face Hoopla's tables use; the others are the spec's substitutes, used where installed. */
.lb[b-52y2ekpbnm] { position: absolute; inset: 0; --din: "Bahnschrift", "Barlow Semi Condensed", "D-DIN", "DIN Pro", "Arial Narrow", sans-serif; }
.lb-frame[b-52y2ekpbnm] { position: absolute; overflow: visible; }
.lb-fill[b-52y2ekpbnm] { fill: rgba(0, 0, 0, .78); stroke: #b4b4b4; stroke-width: 2; }
.lb-table[b-52y2ekpbnm] { fill: rgba(0, 0, 0, .6); stroke: #b4b4b4; stroke-width: 2; }
.lb-title[b-52y2ekpbnm] { position: absolute; left: 96px; top: 23px; max-width: 860px; overflow: hidden; text-overflow: ellipsis; margin: 0; font: 700 50px/104px var(--din); text-transform: uppercase;
    color: #fff; letter-spacing: .3px; white-space: nowrap; }
.lb-rows[b-52y2ekpbnm] { position: absolute; inset: 0; }
.lb-hd[b-52y2ekpbnm] { position: absolute; top: 157px; width: 220px; height: 32px; text-align: center; font: 600 25px/33px var(--din);
    color: #333; white-space: nowrap; }
.lb-sr[b-52y2ekpbnm] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lb-row[b-52y2ekpbnm] { position: absolute; left: 0; width: 1280px; height: 46px; font: 400 28px/46px var(--din); color: #fff; opacity: 0;
    animation: lb-in-b-52y2ekpbnm 300ms linear forwards; }
.lb-rank[b-52y2ekpbnm] { position: absolute; left: 105px; }
.lb-badge[b-52y2ekpbnm] { position: absolute; left: 56px; top: 1px; width: 44px; height: 44px; }
.lb-badge svg[b-52y2ekpbnm] { display: block; }
.lb-badge .lb-soft[b-52y2ekpbnm] { display: none; }
.lb-name[b-52y2ekpbnm] { position: absolute; left: 140px; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val[b-52y2ekpbnm] { position: absolute; width: 220px; text-align: center; color: rgba(255, 255, 255, .55); }
.lb-starred[b-52y2ekpbnm] { position: relative; }
.lb-star[b-52y2ekpbnm] { position: absolute; left: 100%; top: 50%; margin: -13px 0 0 8px; }
.lb-empty span[b-52y2ekpbnm] { position: absolute; left: 140px; color: rgba(255, 255, 255, .55); }

/* The build: frames, title and headings over a second; each row's delay is on the row. */
.lb-fade[b-52y2ekpbnm] { opacity: 0; animation: lb-in-b-52y2ekpbnm 1000ms linear forwards; }
@keyframes lb-in-b-52y2ekpbnm { from { opacity: 0; } to { opacity: 1; } }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css). */
.lb-soft[b-52y2ekpbnm] { display: none; }
.th-soft .lb[b-52y2ekpbnm] { --din: "Figtree", "Segoe UI", system-ui, sans-serif; }
.th-soft .lb-std[b-52y2ekpbnm] { display: none; }
.th-soft .lb-soft[b-52y2ekpbnm] { display: inline; }
.th-soft .lb-soft-dark[b-52y2ekpbnm] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .lb-soft-red[b-52y2ekpbnm] { fill: var(--accent); }
.th-soft .lb-soft-band[b-52y2ekpbnm] { fill: var(--band); }
.th-soft .lb-title[b-52y2ekpbnm] { text-transform: none; font-weight: 600; font-size: 46px; }
.th-soft .lb-hd[b-52y2ekpbnm] { color: var(--ink); font-size: 22px; font-weight: 500; }
.th-soft .lb-row[b-52y2ekpbnm]::before { content: ""; position: absolute; left: 88px; width: 1103px; top: 3px; height: 40px; border-radius: 10px; background: var(--row); z-index: -1; }
.th-soft .lb-row[b-52y2ekpbnm] { font-size: 26px; }
.th-soft .lb-val[b-52y2ekpbnm] { color: var(--ink-2); }
/* Just left of the row, clear of its edge. */
.th-soft .lb-badge .lb-climb[b-52y2ekpbnm] { display: block; width: 34px; height: 34px; margin: 5px 0 0 -4px; }
/* Light (and Dark, the same as before): the words and the gold marks, from the theme. */
.th-soft .lb-title[b-52y2ekpbnm], .th-soft .lb-row[b-52y2ekpbnm] { color: var(--ink); }
.th-soft .lb-empty span[b-52y2ekpbnm] { color: var(--ink-3); }
.th-soft .lb-climb path[b-52y2ekpbnm], .th-soft .lb-star path[b-52y2ekpbnm] { stroke: var(--gold); }

@media (prefers-reduced-motion: reduce) {
    .lb-fade[b-52y2ekpbnm], .lb-row[b-52y2ekpbnm] { animation: none; opacity: 1; }
}
/* /Components/Dashboards/ProgressSlide.razor.rz.scp.css */
/* In the stage's 1280x720 space, in the countdown's frame language; the bar measured from Hoopla's. */
.pg[b-1orjkwdsjt] { position: absolute; inset: 0; --gib: "Figtree", "Segoe UI", system-ui, sans-serif; }
.pg-frame[b-1orjkwdsjt] { position: absolute; overflow: visible; }
.pg-title-bar[b-1orjkwdsjt] { fill: rgba(255, 255, 255, .7); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.pg-panel[b-1orjkwdsjt] { fill: rgba(0, 0, 0, .8); stroke: #b4b4b4; stroke-width: 2; }
/* The bar stops short of the logo: white on it would not read. */
.pg-title[b-1orjkwdsjt] { position: absolute; left: 122px; top: 20px; width: 830px; margin: 0; text-align: center; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font: 600 48px/112px var(--gib); color: #333; text-transform: uppercase; }

.pg-track[b-1orjkwdsjt] { position: absolute; left: 277px; top: 366px; width: 728px; height: 68px; background: #9a9a9a; border-radius: 6px;
    outline: 2px solid #d8d8d8; outline-offset: 14px; }
.pg-fill[b-1orjkwdsjt] { position: relative; height: 100%; background: linear-gradient(90deg, #76bd3a, #d4e021); border-radius: 6px; overflow: hidden;
    animation: pg-grow-b-1orjkwdsjt 1500ms ease-out both; transform-origin: left; }
/* Placed by the slide: over its part of the fill, or just past the fill's end. */
.pg-pct[b-1orjkwdsjt] { position: absolute; top: 0; height: 100%; text-align: center; font: 500 44px/68px var(--gib); color: #fff; white-space: nowrap; }
.pg-pct-out[b-1orjkwdsjt] { text-align: left; }
.pg-tick[b-1orjkwdsjt] { position: absolute; top: 0; width: 8px; height: 100%; margin-left: -4px; background: #fff; }
/* Labels are centred on their point. */
.pg-value[b-1orjkwdsjt], .pg-target[b-1orjkwdsjt] { position: absolute; transform: translateX(-50%); color: #fff; font-family: var(--gib); text-align: center; white-space: nowrap; }
.pg-value[b-1orjkwdsjt] { top: 296px; font-size: 40px; font-weight: 700; line-height: 46px; }
.pg-target[b-1orjkwdsjt] { top: 456px; font-size: 34px; line-height: 44px; }

.pg-fade[b-1orjkwdsjt] { animation: pg-in-b-1orjkwdsjt 1000ms linear both; }
/* The figures come in as the fill arrives. */
.pg-late[b-1orjkwdsjt] { animation: pg-in-b-1orjkwdsjt 500ms linear 1400ms both; }
@keyframes pg-in-b-1orjkwdsjt { from { opacity: 0; } to { opacity: 1; } }
@keyframes pg-grow-b-1orjkwdsjt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css). */
.pg-soft[b-1orjkwdsjt] { display: none; }
.th-soft .pg-std[b-1orjkwdsjt] { display: none; }
.th-soft .pg-soft[b-1orjkwdsjt] { display: inline; }
.th-soft .pg-soft-dark[b-1orjkwdsjt] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .pg-soft-red[b-1orjkwdsjt] { fill: var(--accent); }
.th-soft .pg-title[b-1orjkwdsjt] { left: 96px; top: 23px; width: 860px; text-align: left; color: var(--ink); text-transform: none; font-size: 46px; line-height: 104px; }
.th-soft .pg-track[b-1orjkwdsjt] { background: var(--track); border-radius: 12px; outline-color: var(--track-edge); }
.th-soft .pg-fill[b-1orjkwdsjt] { background: var(--accent); border-radius: 12px; }
/* Light (and Dark): the figures from the theme. The percentage on the fill is white whatever the accent, with a shadow so
   it still reads on a light one (Innotech yellow); past the fill it is on the track, so the theme's ink. */
.th-soft .pg-value[b-1orjkwdsjt], .th-soft .pg-target[b-1orjkwdsjt] { color: var(--ink); }
.th-soft .pg-pct[b-1orjkwdsjt] { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.th-soft .pg-pct-out[b-1orjkwdsjt] { color: var(--ink); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .pg-fade[b-1orjkwdsjt], .pg-late[b-1orjkwdsjt], .pg-fill[b-1orjkwdsjt] { animation: none; }
}
/* /Components/Dashboards/SpotlightSlide.razor.rz.scp.css */
/* Steven's spec §3.3 (docs/hoopla-tv-replica), in the stage's 1280x720 space. The table starts centred (x349) and slides to
   x131; the card is at x732, level with the row it's for. */
.sl[b-f46g1oy06q] { position: absolute; inset: 0; --din: "Bahnschrift", "Barlow Semi Condensed", "D-DIN", "DIN Pro", "Arial Narrow", sans-serif;
    --gib: "Figtree", "Segoe UI", system-ui, sans-serif; }
.sl-frame[b-f46g1oy06q] { position: absolute; overflow: visible; }
.sl-fill[b-f46g1oy06q] { fill: rgba(0, 0, 0, .8); stroke: #b4b4b4; stroke-width: 2; }
.sl-title[b-f46g1oy06q] { position: absolute; left: 96px; top: 23px; max-width: 860px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 50px/104px var(--din); text-transform: uppercase; color: #fff; letter-spacing: .3px; }
.sl-band[b-f46g1oy06q] { fill: #a6a6a6; }
.sl-hd[b-f46g1oy06q] { position: absolute; right: 22px; top: 0; font: 600 25px/33px var(--din); color: #333; white-space: nowrap; }
.sl-sr[b-f46g1oy06q] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sl-table[b-f46g1oy06q] { position: absolute; left: 349px; top: 150px; width: 581px; height: 508px; transition: transform 700ms ease-in-out; }
.sl-moved[b-f46g1oy06q] { transform: translateX(-218px); }
.sl-row[b-f46g1oy06q] { position: absolute; left: 0; width: 581px; height: 42px; font: 400 30px/42px var(--gib); color: #fff; opacity: 0;
    animation: sl-in-b-f46g1oy06q 300ms linear forwards; transition: color 200ms; }
.sl-rank[b-f46g1oy06q] { position: absolute; left: 24px; }
.sl-name[b-f46g1oy06q] { position: absolute; left: 70px; width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-val[b-f46g1oy06q] { position: absolute; right: 22px; font-family: var(--din); color: rgba(253, 185, 19, .55); transition: color 200ms; }
.sl-lit[b-f46g1oy06q] { color: #333; }
.sl-lit .sl-val[b-f46g1oy06q] { color: #f47b20; font-weight: 600; }
.sl-none span[b-f46g1oy06q] { position: absolute; left: 24px; color: rgba(255, 255, 255, .55); }

/* White fading to nothing, with a chevron pointing at the card. */
.sl-bar[b-f46g1oy06q] { position: absolute; left: 0; width: 599px; height: 42px; opacity: 0; background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, .75));
    clip-path: polygon(0 0, 581px 0, 100% 50%, 581px 100%, 0 100%); transition: top 400ms ease-in-out, opacity 300ms; }
.sl-bar-on[b-f46g1oy06q] { opacity: 1; }

/* The card wipes open downwards, photo and all, then its figures. It starts 30px above its frame for the photo's overhang. */
.sl-card[b-f46g1oy06q] { position: absolute; left: 732px; width: 417px; height: 470px; color: #fff; clip-path: inset(0 0 100% 0); transition: clip-path 500ms ease-out; }
.sl-card.sl-open[b-f46g1oy06q] { clip-path: inset(0 -4px -4px -4px); }
.sl-card-fill[b-f46g1oy06q] { fill: rgba(34, 34, 34, .92); stroke: #b4b4b4; stroke-width: 2; }
.sl-photo[b-f46g1oy06q] { position: absolute; left: 10px; top: 0; padding: 5px; border-radius: 50%; background: #fff; display: flex; }
.sl-who[b-f46g1oy06q] { position: absolute; left: 204px; right: 14px; top: 44px; }
.sl-team[b-f46g1oy06q] { font: 600 34px/40px var(--gib); color: #72cfe9; }
.sl-place[b-f46g1oy06q] { margin-top: 8px; font: 400 28px/34px var(--gib); }
.sl-stats[b-f46g1oy06q] { position: absolute; left: 18px; right: 18px; top: 202px; clip-path: inset(0 0 100% 0); transition: clip-path 500ms ease-out; }
.sl-stats.sl-open[b-f46g1oy06q] { clip-path: inset(0); }
.sl-stat[b-f46g1oy06q] { display: flex; justify-content: space-between; gap: 16px; font: 700 28px/49px var(--din); white-space: nowrap; }
.sl-stat span:last-child[b-f46g1oy06q] { font-weight: 400; color: rgba(255, 255, 255, .55); }

.sl-fade[b-f46g1oy06q] { animation: sl-in-b-f46g1oy06q 1000ms linear both; }
@keyframes sl-in-b-f46g1oy06q { from { opacity: 0; } to { opacity: 1; } }

/* The Dark and Light themes (Core.Channels.ChannelThemes; colours in app.css). */
.sl-soft[b-f46g1oy06q] { display: none; }
.th-soft .sl[b-f46g1oy06q] { --din: "Figtree", "Segoe UI", system-ui, sans-serif; }
.th-soft .sl-std[b-f46g1oy06q] { display: none; }
.th-soft .sl-soft[b-f46g1oy06q] { display: inline; }
.th-soft .sl-soft-dark[b-f46g1oy06q] { fill: rgba(var(--panel), var(--panel-a)); }
.th-soft .sl-soft-red[b-f46g1oy06q] { fill: var(--accent); }
.th-soft .sl-soft-band[b-f46g1oy06q] { fill: var(--band); }
.th-soft .sl-soft-card[b-f46g1oy06q] { fill: rgba(var(--card), .96); }
.th-soft .sl-title[b-f46g1oy06q] { text-transform: none; font-weight: 600; font-size: 46px; }
.th-soft .sl-hd[b-f46g1oy06q] { color: var(--ink); font-size: 22px; font-weight: 500; }
.th-soft .sl-val[b-f46g1oy06q] { color: var(--ink-2); }
.th-soft .sl-lit .sl-val[b-f46g1oy06q] { color: var(--lit-ink); font-weight: 700; }
.th-soft .sl-team[b-f46g1oy06q] { color: var(--ink); }
.th-soft .sl-photo[b-f46g1oy06q] { background: var(--accent); }
.th-soft .sl-stat span:last-child[b-f46g1oy06q] { color: var(--ink-2); }
/* Light (and Dark, the same as before): the words, and the lit row - white on Dark, dark on Light. */
.th-soft .sl-title[b-f46g1oy06q], .th-soft .sl-row[b-f46g1oy06q], .th-soft .sl-card[b-f46g1oy06q] { color: var(--ink); }
.th-soft .sl-lit[b-f46g1oy06q] { color: var(--lit-ink); }
.th-soft .sl-bar[b-f46g1oy06q] { background: linear-gradient(90deg, var(--lit-bg) 55%, var(--lit-fade)); }
.th-soft .sl-none span[b-f46g1oy06q] { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
    .sl-fade[b-f46g1oy06q], .sl-row[b-f46g1oy06q] { animation: none; opacity: 1; }
    .sl-table[b-f46g1oy06q], .sl-bar[b-f46g1oy06q], .sl-card[b-f46g1oy06q], .sl-stats[b-f46g1oy06q] { transition: none; }
}
/* /Components/Layout/BareLayout.razor.rz.scp.css */
/* Exactly the window, black, nothing to scroll. */
.bare-page[b-xdgoltp6ba] { position: fixed; inset: 0; background: #000; overflow: hidden; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The frame in SHS's colours: a dark grey side menu (their site's #333 band - black was too dark, Andy, 2026-10-15)
   with the red marking where you are, a white header with the page's title and the avatar, the page below. */
/* EXACTLY THE WINDOW, NOT TALLER (Andy, 2026-10-17: "the tabs never move if you scroll"): the menu and the header stay
   put and only the content area scrolls - and a page that fills it (Settings) scrolls inside itself instead. */
.shs-shell[b-739djkm78g] { height: 100vh; display: flex; overflow: hidden; }

/* ---- side menu ---- */
.shs-side[b-739djkm78g] { width: 224px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px;
    background: var(--shs-grey-dark); color: #fff; transition: width .15s ease; overflow-y: auto; }

/* Their logo - the white-and-red one from their site's footer (Andy, 2026-10-15). */
/* Centred across the menu, with room above and below inside the 64-pixel band that lines up with the header (Andy,
   2026-10-16: "no gap at top and not central"). */
.shs-logo[b-739djkm78g] { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0; margin-bottom: 10px;
    text-decoration: none; border-bottom: 1px solid #4a4a4a; }
/* img/shs-logo-menu.png: the footer logo cropped to its lettering and scaled to three times this size, so it stays sharp -
   the 3362-pixel original, shrunk 26 times by the browser, came out soft and jagged (Andy, 2026-10-16). */
.shs-logo-img[b-739djkm78g] { display: block; width: 128px; height: auto; }

[b-739djkm78g] .shs-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px;
    color: #e6e6e6; text-decoration: none; white-space: nowrap; overflow: hidden; border-left: 3px solid transparent; }
[b-739djkm78g] .shs-nav-link:hover { background: #444; color: #fff; }
[b-739djkm78g] .shs-nav-link.active { background: #474747; color: #fff; font-weight: 600; border-left-color: var(--shs-red); }
[b-739djkm78g] .shs-nav-icon { flex: none; }
.shs-nav-line[b-739djkm78g] { margin: 10px 4px; border: 0; border-top: 1px solid #4a4a4a; opacity: 1; }

.shs-collapse[b-739djkm78g] { margin-top: auto; align-self: flex-end; border: 0; background: none; color: #b5b5b5; padding: 6px; cursor: pointer; }
.shs-collapse:hover[b-739djkm78g] { color: #fff; }

.shs-shell.collapsed .shs-side[b-739djkm78g] { width: 60px; padding-left: 8px; padding-right: 8px; }
.shs-shell.collapsed .shs-logo[b-739djkm78g] { justify-content: center; padding: 0; }
.shs-shell.collapsed .shs-logo-img[b-739djkm78g] { width: 44px; }
.shs-shell.collapsed .shs-collapse[b-739djkm78g] { align-self: center; }
.shs-shell.collapsed[b-739djkm78g]  .shs-nav-text { display: none; }
.shs-shell.collapsed[b-739djkm78g]  .shs-nav-link { justify-content: center; padding: 9px 0; }

/* ---- page ---- */
.shs-page[b-739djkm78g] { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.shs-header[b-739djkm78g] { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 24px; background: #fff;
    border-bottom: 1px solid var(--shs-grey); }
.shs-title[b-739djkm78g] { font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--shs-black); }
/* The light grey page (their #F3F2F2), so the tabs and white panes stand out from it, as in DavidsonHR. */
.shs-main[b-739djkm78g] { flex: 1; min-height: 0; padding: 20px 24px; overflow: auto; background: var(--shs-grey-light); }
/* /Components/TeamAvatar.razor.rz.scp.css */
.team-avatar[b-wzni9pszi3] { flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    width: var(--ta-size); height: var(--ta-size); border-radius: 50%; vertical-align: middle;
    background: hsl(var(--ta-hue) 45% 42%); color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / .85); }
.team-avatar img[b-wzni9pszi3] { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ta-initials[b-wzni9pszi3] { font-weight: 700; font-size: calc(var(--ta-size) * .4); line-height: 1; letter-spacing: .02em; }
/* /Components/Tv/ChannelPlayer.razor.rz.scp.css */
/* The player fills its page (a tab of its own, BareLayout): the stage, letterboxed in black. */
.ch-root[b-fz1u36r429] { position: absolute; inset: 0; background: #000; }
.ch-screen[b-fz1u36r429] { position: absolute; inset: 0; }

.ch-root:not(.ch-awake)[b-fz1u36r429] { cursor: none; }

/* The channel's name, what's on and Full screen - shown while the mouse is moving (js/channel-hud.js), fading away again;
   always, when something's wrong. Nothing on a TV with no mouse, or one left still. */
.ch-hud[b-fz1u36r429] { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px; background: rgba(24, 24, 24, .85); color: #ddd; font: 14px "Segoe UI", system-ui, sans-serif;
    opacity: 0; transition: opacity .4s; pointer-events: none; }
.ch-root.ch-awake .ch-hud[b-fz1u36r429], .ch-hud.ch-hud-show[b-fz1u36r429] { opacity: 1; pointer-events: auto; }
.ch-name[b-fz1u36r429] { font-weight: 700; color: #fff; }
.ch-btn[b-fz1u36r429] { font: inherit; color: #fff; background: #303030; border: 1px solid #5a5a5a; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.ch-btn:hover[b-fz1u36r429] { background: #404040; }

/* How a slide comes in (Core.Channels.SlideTransitions). The slide's own build (frames, then rows) runs inside this. */
.ch-slide[b-fz1u36r429] { position: absolute; inset: 0; }
.ch-in-fade[b-fz1u36r429] { animation: ch-fade-b-fz1u36r429 800ms ease-out both; }
.ch-in-slide[b-fz1u36r429] { animation: ch-slide-b-fz1u36r429 700ms cubic-bezier(.25,.46,.45,.94) both; }
.ch-in-bounce[b-fz1u36r429] { animation: ch-bounce-b-fz1u36r429 900ms ease-out both; }
/* A broadcast transition plays over the stage; the slide appears as it peaks. */
.ch-in-light-burst[b-fz1u36r429], .ch-in-shutter[b-fz1u36r429] { animation: ch-fade-b-fz1u36r429 400ms ease-out 650ms both; }
@keyframes ch-fade-b-fz1u36r429 { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-slide-b-fz1u36r429 { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ch-bounce-b-fz1u36r429 {
    0% { opacity: 0; transform: scale(.82); }
    55% { opacity: 1; transform: scale(1.04); }
    78% { transform: scale(.985); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ch-slide[b-fz1u36r429] { animation: none; }
}
/* /Components/Tv/TvLink.razor.rz.scp.css */
.tl[b-trr928bz70] { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px;
    color: #fff; text-align: center; font-family: "Figtree", "Segoe UI", system-ui, sans-serif; }
.tl-logo[b-trr928bz70] { width: min(280px, 40vw); height: auto; margin-bottom: 2vh; }
.tl-h[b-trr928bz70] { margin: 0; font-size: clamp(24px, 4vw, 48px); font-weight: 700; }
.tl-p[b-trr928bz70] { margin: 0; max-width: 900px; font-size: clamp(16px, 2.2vw, 28px); color: rgba(255, 255, 255, .8); }
.tl-sub[b-trr928bz70] { font-size: clamp(14px, 1.6vw, 20px); color: rgba(255, 255, 255, .6); }
.tl-code[b-trr928bz70] { padding: 12px 40px; border: 2px solid #b4b4b4; font: 700 clamp(48px, 11vw, 140px)/1.2 "Bahnschrift", "Segoe UI", sans-serif; letter-spacing: .08em; white-space: pre; }
/* /Components/Tv/TvScreen.razor.rz.scp.css */
.ts[b-3c2bgbdr0g] { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px;
    color: #fff; text-align: center; font-family: "Figtree", "Segoe UI", system-ui, sans-serif; }
.ts-logo[b-3c2bgbdr0g] { width: min(280px, 40vw); height: auto; }
.ts-p[b-3c2bgbdr0g] { margin: 0; font-size: clamp(16px, 2.2vw, 28px); color: rgba(255, 255, 255, .8); }