/* =========================================================================
   zuzz.tv — "Midnight & Ember"
   Hand-written. Deliberately does NOT depend on output.css: the redesigned
   page ships its own markup, so loading 43KB of purged Tailwind that nothing
   references would be dead weight and a specificity fight for no gain.

   Two rules govern everything here:

   1. DEPTH, NOT DECORATION. The old page read as flat because every surface
      was the same value. There are four surface levels below, separated by
      luminance and a 1px hairline, not by drop shadows.

   2. ORANGE IS RARE. #FB623F appears about three times per screen - the
      Get Access button, the active league, the live indicator. An accent
      that is everywhere is not an accent.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
    /* The one breakpoint that matters: at and above this the player and the
       channel rail sit side by side. JavaScript reads this value rather than
       repeating a number, so the layout and the player controller can never
       disagree about what "wide" means. */
    --zz-bp-wide: 1024px;

    /* surfaces, darkest to lightest */
    --zz-canvas:      #080c0f;
    --zz-surface-1:   #0d1317;
    --zz-surface-2:   #121a20;
    --zz-surface-3:   #18232a;

    /* hairlines do the work drop shadows used to */
    --zz-line:        rgba(255, 255, 255, .07);
    --zz-line-2:      rgba(255, 255, 255, .12);
    --zz-line-3:      rgba(255, 255, 255, .20);

    /* Translucent fills, four steps. These used to be written out at the point
       of use, which is what made the page impossible to re-theme: a white wash
       lightens a dark surface but does nothing at all to a white one. Routing
       them through tokens is what makes light mode possible. */
    --zz-fill-1:      rgba(255, 255, 255, .03);
    --zz-fill-2:      rgba(255, 255, 255, .05);
    --zz-fill-3:      rgba(255, 255, 255, .07);
    --zz-fill-4:      rgba(255, 255, 255, .18);
    /* The sweep across the "connecting" placeholder. */
    --zz-shimmer:     rgba(255, 255, 255, .05);

    /* Shadows. Pure black at high alpha is right on a black canvas and reads as
       a grey smudge on paper, so the COLOUR is a token and only the geometry
       stays at the point of use. */
    --zz-sh:          rgba(0, 0, 0, 1);
    --zz-sh-soft:     rgba(0, 0, 0, .9);
    /* The footer sits in a shallow well at the bottom of the page. */
    --zz-foot-wash:   rgba(0, 0, 0, .35);
    /* The "more below" shadow inside a scrolling list. */
    --zz-scroll-shadow: rgba(0, 0, 0, .55);
    /* The header and drawer sit on a translucent wash of the canvas colour.
       This used to be color-mix(), which is Chromium 111 - so on anything older
       the header had NO background at all and the page scrolled visibly through
       it. Written out, it is the same colour and works everywhere. */
    --zz-veil:        rgba(8, 12, 15, .82);
    --zz-veil-2:      rgba(8, 12, 15, .96);

    /* ink */
    --zz-ink:         #f3f6f8;
    /* Brighter than ink, for the two or three things that must out-rank it. */
    --zz-ink-hi:      #ffffff;
    --zz-ink-2:       #9aa7b0;
    /* Measured, not chosen by eye: #6b7a85 looked right in a mockup but fell to
       4.23:1 on a panel and 3.62:1 on a raised card - under the 4.5:1 that small
       text needs. This clears 4.5:1 on every surface it is used on. */
    --zz-ink-3:       #7e8b95;

    /* the brand */
    --zz-ember:       #fb623f;

    /* The primary-button pair, named for the job rather than the hue, because
       these two are the ones that must not drift: every "do the thing" button
       on the site uses them, from Get Access to Pay now. */
    --zz-cta:         #fb623f;   /* rgb(251, 98, 63) */
    --zz-cta-hi:      #da4819;   /* rgb(218, 72, 25) - hover */
    --zz-cta-lo:      #c23f14;   /* pressed */
    --zz-r-btn:       10px;
    --zz-ember-hi:    #ff7d5e;
    --zz-ember-lo:    #e04a28;
    --zz-ember-ghost: rgba(251, 98, 63, .12);
    --zz-ember-line:  rgba(251, 98, 63, .35);

    /* The brand orange as TEXT is a different value from the brand orange as a
       FILL. #fb623f on paper measures 2.65:1 - a fine button and an illegal
       paragraph. In dark mode the two are the same colour; in light mode the
       text one darkens until it clears 4.5:1. Same story for the live green. */
    --zz-ember-ink:   #fb623f;
    /* What actually forms the edge of an orange control. On the dark canvas the
       fill does it unaided; on paper it needs the darker brand orange, or a
       2.65:1 button floats with no boundary at all. */
    --zz-ember-edge:  #fb623f;

    --zz-live:        #3ddc84;
    --zz-live-ink:    #3ddc84;

    /* type: one family, a real 1.25 scale */
    --zz-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --zz-t-xs:   11px;
    --zz-t-sm:   12px;
    --zz-t-base: 14px;
    --zz-t-md:   16px;
    --zz-t-lg:   20px;
    --zz-t-xl:   26px;

    /* space: an 8px rhythm. The old page had almost none of this. */
    --zz-s-1: 4px;
    --zz-s-2: 8px;
    --zz-s-3: 12px;
    --zz-s-4: 16px;
    --zz-s-5: 24px;
    --zz-s-6: 32px;
    --zz-s-7: 48px;

    --zz-r-sm: 8px;
    --zz-r:    12px;
    --zz-r-lg: 16px;
    --zz-r-pill: 999px;

    --zz-fast: 120ms;
    --zz-med:  180ms;
    --zz-ease: cubic-bezier(.2, .8, .2, 1);

    /* Motion for the 2026 app shell. Three curves, three durations, and nothing
       else - a motion system with a dozen ad-hoc timings reads as unfinished.
       ease-out for anything arriving (it answers the touch at once), in-out for
       something moving between two on-screen places, and the drawer curve for
       sheets, which is the one iOS uses. Everything stays under 300ms: a UI
       used many times a session must never make anyone wait for it. */
    --zz-ease-out:    cubic-bezier(.23, 1, .32, 1);
    --zz-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --zz-ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --zz-d-1: 140ms;
    --zz-d-2: 200ms;
    --zz-d-3: 260ms;

    /* The app shell below the wide breakpoint: a tab bar, and the stream
       shrunk to a bar above it while browsing another tab. */
    --zz-tabbar-h: 64px;
    --zz-mini-h:   64px;
    --zz-r-xl:     20px;

    /* Inter, for the 2026 shell. Rubik stays on --zz-font until that shell
       ships, so pages outside the preview do not change underneath anyone. */
    --zz-font-app: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --zz-shell: 1360px;
    /* The page gutter. The full-bleed player cancels it with a negative margin,
       so the two must be one value or a gap appears at tablet widths. */
    --zz-gutter: 16px;
    --zz-rail:  300px;
    --zz-header-h: 64px;

    /* The player embed draws a fixed-height feed strip ABOVE the video. The box
       has to be that strip PLUS a 16:9 video, or the strip eats into the video
       and the player's own controls end up outside the frame - which is exactly
       what cut them off. Must match --pz-strip-h in player-2026.css. */
    --zz-player-strip: 48px;

    color-scheme: dark;
}

/* --------------------------------------------------------- light palette
   Warm paper, not white. A pure #ffffff canvas next to a pure-white card gives
   the page no depth at all, which is the light-mode equivalent of the flatness
   this redesign set out to fix; the four surfaces below climb from a warm grey
   ground to plain white, exactly mirroring the dark set.

   The site ALWAYS opens dark. This block applies only when the visitor has
   pressed the toggle, so there is no `prefers-color-scheme` rule here on
   purpose - the dark page is the product, and light is an accommodation.

   Every value below was measured, not picked: see the contrast table in
   test-theme.js, which fails the build under 4.5:1 for text.

   On a 2016-17 television none of this applies - CSS custom properties do not
   exist below Chromium 49, so those sets stay dark. That is the default anyway,
   so nothing is lost; the toggle is simply inert there. */
[data-theme="light"] {
    --zz-canvas:      #f2efeb;
    --zz-surface-1:   #f8f6f3;
    --zz-surface-2:   #fdfcfb;
    --zz-surface-3:   #ffffff;

    /* Hairlines invert: on paper the separator is a shadow, not a highlight. */
    --zz-line:        rgba(16, 24, 29, .10);
    --zz-line-2:      rgba(16, 24, 29, .16);
    --zz-line-3:      rgba(16, 24, 29, .28);

    --zz-fill-1:      rgba(16, 24, 29, .035);
    --zz-fill-2:      rgba(16, 24, 29, .06);
    --zz-fill-3:      rgba(16, 24, 29, .09);
    --zz-fill-4:      rgba(16, 24, 29, .16);
    --zz-shimmer:     rgba(16, 24, 29, .05);

    --zz-ink:         #12181d;   /* 15.60:1 on canvas */
    --zz-ink-hi:      #05090c;
    --zz-ink-2:       #4d5a63;   /*  6.19:1 */
    --zz-ink-3:       #5f6b74;   /*  4.77:1 - the floor for small text */

    /* The fill orange is untouched: it is the brand, and a button is not text.
       The ink orange darkens to clear 4.5:1 on paper (#fb623f measures 2.65). */
    --zz-ember-ink:   #b83c10;   /*  4.96:1 */
    --zz-ember-edge:  #e04a28;   /*  3.54:1 - the boundary, not the fill */
    --zz-ember-ghost: rgba(251, 98, 63, .10);
    --zz-ember-line:  rgba(251, 98, 63, .42);

    /* The indicator dot is a fill, so it answers to 3:1, not 4.5. #3ddc84 is
       1.56:1 on paper - a pale mint smudge. */
    --zz-live:        #1f9e57;   /*  3.01:1 */
    --zz-live-ink:    #12703c;   /*  5.38:1 */

    /* Pure black at alpha 1 is right under a black page and reads as a grey
       smudge on paper. Warm, and much weaker. */
    --zz-sh:          rgba(38, 28, 20, .28);
    --zz-sh-soft:     rgba(38, 28, 20, .20);
    --zz-foot-wash:   rgba(16, 24, 29, .05);
    --zz-scroll-shadow: rgba(16, 24, 29, .22);
    --zz-veil:        rgba(242, 239, 235, .84);
    --zz-veil-2:      rgba(242, 239, 235, .97);

    color-scheme: light;
}

/* The one ember glow behind the player, softened for paper - the same light
   source, seen through a bright room rather than a dark one. */
[data-theme="light"] body {
    background-image:
        radial-gradient(1100px 620px at 50% -10%, rgba(251, 98, 63, .10), transparent 62%),
        radial-gradient(760px 460px at 88% 8%, rgba(41, 80, 102, .07), transparent 60%);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /*!fb*/ background: #080c0f;
    background: var(--zz-canvas);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-family: var(--zz-font);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* One ember glow, high and centred, sitting behind the player. It is the
       only light source on the page - which is what stops "dark" reading as
       "grey". No photograph: the old bgscreen.jpg sat under a 98% wash and
       cost an image request to be almost invisible. */
    background-image:
        radial-gradient(1100px 620px at 50% -10%, rgba(251, 98, 63, .085), transparent 62%),
        radial-gradient(760px 460px at 88% 8%, rgba(41, 80, 102, .16), transparent 60%);
    background-repeat: no-repeat;
    /* `background-attachment: fixed` used to be here. Behind two large radial
       gradients it forces a full-viewport repaint on EVERY scroll frame, which
       a television's graphics chip cannot keep up with - it is one of the
       best-known ways to make a TV browser stutter. The gradients scroll with
       the page now, which nobody has ever noticed. */
    min-height: 100vh;
}

/* The `hidden` attribute is enforced by the UA stylesheet at the lowest possible
   specificity, so ANY component rule that sets `display` silently defeats it.
   That is what put an opaque "pick a channel" panel on top of a playing stream:
   the video was there, the audio was audible, and a grey box was covering it.
   One rule, once, so it can never happen again to any component. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Numbers must not dance. Clocks, kickoff times and counts all use this. */
.zz-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* One visible, consistent focus ring - the old page had none.

   Written in three rulesets, never one list. `:focus-visible` is unknown before
   Chromium 86 and an unknown pseudo-class invalidates the entire selector list
   it appears in, so a combined rule leaves an old browser - or a television -
   with no focus indicator anywhere. The plain `:focus` below is what those get.
   The middle rule is itself invalid on those engines, so it is simply dropped
   and the ring stays on; modern engines parse it and take the mouse ring away. */
:focus {
    /*!fb*/ outline: 2px solid #fb623f;
    outline: 2px solid var(--zz-ember);
    outline-offset: 2px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
}
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    /*!fb*/ outline: 2px solid #fb623f;
    outline: 2px solid var(--zz-ember);
    outline-offset: 2px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
}

.zz-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.zz-shell {
    width: 100%;
    /*!fb*/ max-width: 1360px;
    max-width: var(--zz-shell);
    /* Physical properties, not logical ones. `margin-inline` is Chromium 87.
        On an older set the declaration is dropped and this container loses its
        centring AND both gutters at once - the page runs to the bezel. The site
        has one writing direction, so there is nothing logical to gain here. */
    margin-left: auto;
    margin-right: auto;
    /*!fb*/ padding-left: 24px;
    padding-left: var(--zz-gutter);
    /*!fb*/ padding-right: 24px;
    padding-right: var(--zz-gutter);
}
@media (min-width: 640px) { :root { --zz-gutter: 24px; } }

/* =========================================================================
   HEADER
   ========================================================================= */
/* The header carries TWO rows: the top bar (logo, clock, account) and the league
   nav. Scrolling down slides the top bar away and leaves the nav stuck to the
   top; scrolling up brings both back. */
.zz-head {
    position: sticky;
    top: 0;
    z-index: 70;
    /*!fb*/ background: rgba(8, 12, 15, .82);
    background: var(--zz-veil);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
/* Browsers without backdrop-filter get a solid bar rather than unreadable text. */
@supports not (backdrop-filter: blur(1px)) {
    .zz-head { /*!fb*/ background: #080c0f; background: var(--zz-canvas); }
}

/* THE WHOLE HEADER slides, and its box in the page never changes size.

   The first attempt moved the top row by transform and pulled the nav row up
   with a negative margin. That shortened the header's layout box, so the page
   below it jumped up, so the scroll position moved, so the scroll handler read
   the movement as "the user scrolled up" and re-opened the header - which
   pushed the page back down. A closed loop: the header flickered, and the
   measurement caught it mid-flicker at 103px when it should have been 53.

   Moving the whole element instead changes nothing about the page's layout, so
   there is no loop to close. The top row travels off the top of the viewport
   and the nav row lands exactly where the top row was. Transform only - a
   transform is composited, while a height or margin relayouts the document on
   every frame, and a television cannot afford that at sixty frames a second. */
.zz-head {
    /*!fb*/ transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
    transition: transform var(--zz-med) var(--zz-ease);
    will-change: transform;
}
.zz-head.is-condensed { /*!fb*/ transform: translateY(calc(64px * -1)); transform: translateY(calc(var(--zz-header-h) * -1)); }

/* The top row is off-screen when condensed, but off-screen is not the same as
   out of the way: Tab - or a remote's D-pad - would still land on the account
   button, and the focus ring would be somewhere the viewer cannot see.
   `visibility: hidden` takes it out of the tab order, delayed so it fades
   rather than blinking out. */
.zz-head-slide {
    /*!fb*/ transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s;
    transition: opacity var(--zz-med) var(--zz-ease), visibility 0s linear 0s;
}
.zz-head.is-condensed .zz-head-slide {
    opacity: 0;
    visibility: hidden;
    /*!fb*/ transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 180ms;
    transition: opacity var(--zz-med) var(--zz-ease),
                visibility 0s linear var(--zz-med);
}

@media (prefers-reduced-motion: reduce) {
    .zz-head, .zz-head-slide { transition: none; }
}

/* The top row's menus - the timezone list, the notifications - open DOWN over
   the league bar. Both rows carry a backdrop blur, and a blur makes each row a
   drawing layer of its own, so the league bar, which comes later, was painted
   over any open menu. Lifting the top row above its sibling fixes every menu in
   it at once. When the header is condensed the row is hidden, so it is above
   nothing that can be seen. */
.zz-head-slide { position: relative; z-index: 2; }

.zz-head-in {
    /*!fb*/ height: 64px;
    height: var(--zz-header-h);
    display: flex;
    align-items: center;
    /*!fb*/ gap: 16px;
    gap: var(--zz-s-4);
}

.zz-logo { display: flex; align-items: center; flex: 0 0 auto; }
.zz-logo img {
    /* The source is a 153x52 raster. Rendering it at its exact intrinsic size
       is the only way to keep it as sharp as the file allows. */
    width: 128px; height: 43.5px;
    object-fit: contain;
}
@media (min-width: 1024px) { .zz-logo img { width: 143px; height: 48.6px; } }

.zz-head-spacer { flex: 1 1 auto; }

.zz-head-nav { display: flex; align-items: center; /*!fb*/ gap: 4px; gap: var(--zz-s-1); }

/* Quiet text actions. They recede so the one orange button can lead. */
.zz-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 500;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-link:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
.zz-link svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Secondary action: outlined, never filled. */
.zz-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    white-space: nowrap;
    cursor: pointer;
    /*!fb*/ transition: border-color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: border-color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-btn-ghost:hover { /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); }

/* THE button. The only solid orange fill above the fold. */
/* The primary button.
   FLAT and SOLID, not a gradient with a glow. One colour, #fb623f, going to
   #da4819 on hover - the same pair the checkout's "Pay now" uses, so the button
   that takes a payment and the button that starts the journey are recognisably
   the same control. The old one was a light-to-dark gradient with an inset
   highlight, a coloured drop shadow and near-black text, which read as a
   different component on every page it appeared. */
.zz-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 22px;
    /*!fb*/ border-radius: 10px;
    border-radius: var(--zz-r-btn);
    border: 0;
    /*!fb*/ background: #fb623f;
    background: var(--zz-cta);
    color: #ffffff;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    /*!fb*/ transition: background 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background var(--zz-fast) var(--zz-ease);
}

.zz-btn-cta:hover,
.zz-btn-cta:focus { /*!fb*/ background: #da4819; background: var(--zz-cta-hi); color: #ffffff; }

/* Pressed: a shade darker again, and no movement. A button that jumps under
   the finger is harder to hit, which matters most on a phone and on a
   television pointer. */
.zz-btn-cta:active { /*!fb*/ background: #c23f14; background: var(--zz-cta-lo); }

.zz-btn-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Disabled reads as disabled, rather than as a button that did nothing. */
.zz-btn-cta[disabled],
.zz-btn-cta.is-busy { opacity: .55; cursor: default; }

/* ------------------------------------------------- clock + timezone picker */
.zz-clock {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    cursor: pointer;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    white-space: nowrap;
    /*!fb*/ transition: border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: border-color var(--zz-fast) var(--zz-ease);
}
.zz-clock:hover { /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }
.zz-clock svg { width: 14px; height: 14px; opacity: .7; }
.zz-clock-time { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 600; }
.zz-clock-zone { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }

.zz-clock ul {
    list-style: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    margin: 0;
    /*!fb*/ padding: 4px;
    padding: var(--zz-s-1);
    width: 150px;
    max-height: 280px;
    overflow-y: auto;
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
    box-shadow: 0 24px 60px -20px var(--zz-sh-soft);
}
.zz-clock ul button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 7px 10px;
    border-radius: 6px;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                color var(--zz-fast) var(--zz-ease);
}
.zz-clock ul button:hover { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-clock ul button.is-on { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 600; }
.zz-clock-cur {
    padding: 6px 10px 8px;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    white-space: nowrap;
}
.zz-clock-cur .zz-clock-zone { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 600; margin-left: 4px; }
/* Its own ruleset, never in a list with :focus-visible - and it must LOOK
   different, not just carry an outline, because a remote user navigating a
   25-row list has nothing else telling them where they are. */
.zz-clock ul button:focus { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

/* On a 320px phone the bar carries a burger, a bell, the logo and the Get
   Access button. At the desktop sizes that overflows by ~21px and pushes the
   whole page sideways, so everything tightens up together. Measured in a real
   browser at 320, 360 and 390px. */
@media (max-width: 479.98px) {
    :root { --zz-gutter: 12px; }
    .zz-head-in { gap: 6px; }
    .zz-logo img { width: 104px; height: 35.3px; }
    .zz-burger { width: 34px; padding: 0 7px; }
    .zz-btn-cta { padding: 8px 11px; /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); gap: 5px; }
    .zz-btn-cta svg { display: none; }
}

/* ---------------------------------------------------------- mobile header */
.zz-head-mob { display: flex; }
.zz-head-desk { display: none; }
@media (min-width: 1024px) {
    .zz-head-mob { display: none; }
    .zz-head-desk { display: flex; }
}

.zz-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    flex: 0 0 auto;
    width: 40px; height: 40px;
    padding: 0 10px;
    border: 0; background: transparent; cursor: pointer;
}
.zz-burger span {
    display: block; height: 2px; width: 100%;
    /*!fb*/ background: #9aa7b0;
    background: var(--zz-ink-2); border-radius: 2px;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease);
}
.zz-burger:hover span { /*!fb*/ background: #f3f6f8; background: var(--zz-ink); }

/* The drawer. Everything the mobile bar has no room for lives here. */
.zz-drawer {
    position: fixed;
    /*!fb*/ top: 64px;
    top: var(--zz-header-h); right: 0; bottom: 0; left: 0;
    z-index: 65;
    /*!fb*/ background: rgba(8, 12, 15, .96);
    background: var(--zz-veil-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /*!fb*/ padding: 24px 16px 48px;
    padding: var(--zz-s-5) var(--zz-s-4) var(--zz-s-7);
    overflow-y: auto;
    display: none;
}
.zz-drawer-in { display: flex; flex-direction: column; /*!fb*/ gap: 8px; gap: var(--zz-s-2); }
.zz-drawer .zz-link,
.zz-drawer .zz-btn-ghost,
.zz-drawer .zz-btn-cta { justify-content: center; padding-top: 13px; padding-bottom: 13px; /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
.zz-drawer .zz-clock { justify-content: center; padding-top: 12px; padding-bottom: 12px; }
.zz-drawer-sep { height: 1px; /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-line); /*!fb*/ margin: 12px 0; margin: var(--zz-s-3) 0; }

/* If the drawer is open and the window is widened to desktop, its trigger
   disappears with the mobile bar and the panel would be stranded on screen with
   no way to close it. !important is warranted here: the script opens the drawer
   with an inline style, and this has to beat it. */
@media (min-width: 1024px) { .zz-drawer { display: none !important; } }

/* =========================================================================
   NOTIFICATION BELL
   Styled here rather than injected by the script. bell.js used to inject its
   own stylesheet at runtime, which put it last in the cascade and let it
   restyle this page's components by accident. Design lives in one file.
   ========================================================================= */
.zz-bell-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }

.zz-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    border: 1px solid transparent;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease);
}
.zz-bell:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
.zz-bell svg { width: 19px; height: 19px; display: block; }
.zz-bell-ico { display: block; transform-origin: 50% 4px; }

/* Unread: the bell warms to the brand colour and gives one slow nudge. */
.zz-bell.is-unread { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); }
.zz-bell.is-unread .zz-bell-ico { animation: zz-nudge 4s ease-in-out infinite; }
@keyframes zz-nudge {
    0%, 82%, 100% { transform: rotate(0); }
    86% { transform: rotate(11deg); }
    90% { transform: rotate(-9deg); }
    94% { transform: rotate(5deg); }
}

/* Ember, not the old bright red: on this palette red reads as an error, and
   the brand colour is what the eye is already trained to follow. */
.zz-bell-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    color: #1a0a05;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /*!fb*/ box-shadow: 0 0 0 2px #080c0f, 0 2px 10px -2px rgba(251, 98, 63, .9);
    box-shadow: 0 0 0 2px var(--zz-canvas), 0 2px 10px -2px rgba(251, 98, 63, .9);
}

/* ---------------------------------------------------------------- panel */
.zz-note {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* `width` plus `max-width` IS min(92vw, 348px), in every engine ever
        written. min() itself is Chromium 79. */
    width: 348px;
    max-width: 92vw;
    z-index: 120;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1);
    box-shadow: 0 30px 70px -30px var(--zz-sh);
    overflow: hidden;
}

.zz-note-head {
    display: flex; align-items: center; justify-content: space-between; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 12px 16px;
    padding: var(--zz-s-3) var(--zz-s-4);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-note-allread {
    border: 0; background: transparent;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}
.zz-note-allread:hover { text-decoration: underline; }
.zz-note-allread:disabled { opacity: .45; cursor: default; text-decoration: none; }

/* 60vh and 420px meet at a 700px-tall window, so the media query below says
   exactly what min(60vh, 420px) said, without needing min(). */
.zz-note-list { max-height: 420px; overflow-y: auto; /*!fb*/ padding: 8px; padding: var(--zz-s-2); }
@media (max-height: 700px) { .zz-note-list { max-height: 60vh; } }
.zz-note-list::-webkit-scrollbar { width: 8px; }
.zz-note-list::-webkit-scrollbar-thumb {
    /*!fb*/ background: rgba(255, 255, 255, .12);
    background: var(--zz-line-2); border-radius: 99px;
    border: 2px solid transparent; background-clip: content-box;
}

.zz-note-item {
    display: flex; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 12px;
    padding: var(--zz-s-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    border: 1px solid transparent;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1), opacity 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease),
                opacity var(--zz-fast) var(--zz-ease);
}
.zz-note-item:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); /*!fb*/ border-color: rgba(255, 255, 255, .07); border-color: var(--zz-line); }
.zz-note-item.is-going { opacity: .35; }
.zz-note-item + .zz-note-item { margin-top: 2px; }

.zz-note-dot {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    box-shadow: 0 0 8px 0 rgba(251, 98, 63, .8);
}
.zz-note-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zz-note-t { /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); font-weight: 600; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); letter-spacing: -.005em; }
.zz-note-x {
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm); /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zz-note-foot { display: flex; align-items: center; justify-content: space-between; /*!fb*/ gap: 12px; gap: var(--zz-s-3); margin-top: 4px; }
.zz-note-when { /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-note-lock { font-size: 10px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-style: italic; }
.zz-note-mark {
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
    padding: 4px 9px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    cursor: pointer;
    white-space: nowrap;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease);
}
.zz-note-mark:hover { /*!fb*/ background: #fb623f; background: var(--zz-ember); /*!fb*/ border-color: #fb623f; border-color: var(--zz-ember); color: #1a0a05; }
.zz-note-mark:disabled { opacity: .45; cursor: default; }

.zz-note-empty { min-height: 0; /*!fb*/ padding: 32px 24px; padding: var(--zz-s-6) var(--zz-s-5); }
.zz-note-empty .zz-btn-cta,
.zz-note-empty .zz-btn-ghost { /*!fb*/ margin-top: 8px; margin-top: var(--zz-s-2); }

.zz-note-foot-link {
    /*!fb*/ padding: 12px;
    padding: var(--zz-s-3);
    text-align: center;
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}
.zz-note-foot-link a {
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}
.zz-note-foot-link a:hover { text-decoration: underline; }

/* =========================================================================
   LEAGUE STRIP
   Fading edges instead of arrow buttons: the fade is what tells you there is
   more to scroll, so two more controls are not needed on screen.
   ========================================================================= */
.zz-leagues { position: relative; min-width: 0; }

/* The nav row inside the header: the scrolling league strip, then the theme
   toggle pinned to the right so it never scrolls away with the leagues. */
.zz-head-nav-row {
    display: flex;
    align-items: center;
}
.zz-head-nav-row > .zz-leagues { flex: 1 1 auto; min-width: 0; }

.zz-leagues-scroll {
    display: flex;
    /*!fb*/ gap: 8px;
    gap: var(--zz-s-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /*!fb*/ padding: 4px 0;
    padding: var(--zz-s-1) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.zz-leagues-scroll::-webkit-scrollbar { display: none; }

.zz-league {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 16px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    border: 1px solid transparent;
    background: transparent;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-league img { width: 22px; height: 22px; object-fit: contain; opacity: .55; /*!fb*/ transition: opacity 120ms cubic-bezier(.2, .8, .2, 1); transition: opacity var(--zz-fast) var(--zz-ease); }
.zz-league:hover { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ background: rgba(255, 255, 255, .03); background: var(--zz-fill-1); }
.zz-league:hover img { opacity: .85; }

/* The active league. `active` is the state class the tab script toggles - it
   is preserved from the original contract, only its appearance is new. */
.zz-league.active { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
.zz-league.active img { opacity: 1; }
.zz-league.active::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    box-shadow: 0 0 14px 0 rgba(251, 98, 63, .75);
}

/* LIVE - the last tab, pushed to the right end of the bar while there is room.
   The dot breathes and the number shows only while games are on; both are
   worked out in the browser (Live in zuzz-2026.js). Green, like every other
   "live" mark on the site. */
.zz-league-live { margin-left: auto; }
.zz-live-dot {
    width: 8px; height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    /*!fb*/ background: #7e8b95;
    background: var(--zz-ink-3);
}
.zz-league-live.has-live { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-league-live.has-live .zz-live-dot {
    /*!fb*/ background: #3ddc84;
    background: var(--zz-live);
    box-shadow: 0 0 10px 0 rgba(61, 220, 132, .6);
    -webkit-animation: zz-breathe 2s ease-in-out infinite;
            animation: zz-breathe 2s ease-in-out infinite;
}
.zz-live-n {
    margin-left: -2px;
    color: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
    .zz-league-live.has-live .zz-live-dot { -webkit-animation: none; animation: none; }
}

.zz-leagues-rule { height: 1px; /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-line); }
.zz-head-nav-row .zz-leagues-rule { display: none; }

/* =========================================================================
   REMOTE CONTROL

   `data-remote` is set once the viewer is driving with a D-pad or the arrow
   keys. Everything here is about one thing: making the highlight impossible to
   lose. An outline is enough for a mouse user glancing at a laptop; it is not
   enough at three metres, where the eye needs a filled shape to lock onto.

   It is additive, like TV mode. With the attribute absent - which is every
   mouse visitor - the page looks exactly as it did.
   ========================================================================= */

/* The row or control the remote is on. Background AND border AND a ring, so it
   reads as "selected", not merely "outlined". */
[data-remote] .zz-channel:focus,
[data-remote] .zz-match:focus {
    outline: none;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ box-shadow: 0 0 0 2px rgba(251, 98, 63, .35);
    box-shadow: 0 0 0 2px var(--zz-ember-line);
}
[data-remote] .zz-channel:focus .zz-watch,
[data-remote] .zz-match.is-upcoming:focus .zz-watch {
    opacity: 1;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}
[data-remote] .zz-league:focus {
    outline: none;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ box-shadow: inset 0 0 0 1px rgba(251, 98, 63, .35);
    box-shadow: inset 0 0 0 1px var(--zz-ember-line);
}
[data-remote] .zz-theme:focus,
[data-remote] .zz-bell:focus,
[data-remote] .zz-clock:focus,
[data-remote] .zz-link:focus,
[data-remote] .zz-btn-cta:focus,
[data-remote] .zz-btn-ghost:focus,
[data-remote] .zz-search input:focus,
[data-remote] .zz-clock ul button:focus {
    /*!fb*/ outline: 2px solid #fb623f;
    outline: 2px solid var(--zz-ember);
    outline-offset: 2px;
}

/* The player, while the remote is inside it. The embed draws its own controls;
   this is the outline around the whole frame so the viewer can see that the
   highlight has crossed into it. */
[data-remote] .zz-player-frame:focus-within,
[data-remote] .zz-player-frame.is-remote {
    /*!fb*/ box-shadow: 0 0 0 3px rgba(251, 98, 63, .35);
    box-shadow: 0 0 0 3px var(--zz-ember-line);
}

/* On a television everything is bigger, including this. */
[data-tv] .zz-channel:focus,
[data-tv] .zz-match:focus {
    /*!fb*/ box-shadow: 0 0 0 3px #fb623f;
    box-shadow: 0 0 0 3px var(--zz-ember);
}

/* -------------------------------------------------------------------------
   POSITION BAR

   Where am I in this list, and how much is left. Many TV browsers draw no
   scrollbar at all, and a list that gives no sign of continuing looks like a
   list that has ended.

   IT IS A PICTURE, NOT A CONTROL - no tabindex, aria-hidden, and the navigation
   engine never collects it. Pressing down on the last visible card always goes
   to the next card, because there is nothing here to move to.

   JavaScript hides it entirely when the list fits on screen.
   ------------------------------------------------------------------------- */
.zz-railbar {
    display: none;
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 3px;
    width: 4px;
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    pointer-events: none;
    z-index: 3;
}
.zz-railbar-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .20);
    background: var(--zz-line-3);
    /*!fb*/ transition: top 120ms cubic-bezier(.2, .8, .2, 1);
    transition: top var(--zz-fast) var(--zz-ease);
}
[data-remote] .zz-railbar-thumb { /*!fb*/ background: #fb623f; background: var(--zz-ember); }
/* Wide enough to see from a sofa. */
[data-tv] .zz-railbar { width: 6px; right: 4px; }

@media (prefers-reduced-motion: reduce) {
    .zz-railbar-thumb { transition: none; }
}

/* -------------------------------------------------------------------------
   SCROLL BUTTONS  -  for a viewer who has a pointer and no wheel

   Measured on a Samsung Tizen 6.5 set: 0 key presses reached the page, 150
   pointer movements did. Its browser keeps every arrow press to drive its own
   cursor. So the D-pad cannot scroll the list there, and with no mouse wheel
   there was no way to scroll it at all - which is the complaint this whole
   piece of work started from.

   Two buttons the cursor can hit. They belong to the pointer alone: the
   navigation engine skips them and they are out of the tab order, so a D-pad or
   keyboard - on the sets where those do work - walks the rows without ever
   landing on one.

   Shown only in TV mode. A desktop visitor has a wheel and does not need them.
   ------------------------------------------------------------------------- */
.zz-nudge { display: none; }

/* Full-width bars, not floating pills.

   A pill floating over the list covered whatever row happened to be under it,
   which looked like a mistake. A bar that spans the list with a solid
   background reads as part of the panel - the way a sticky header does - and is
   a far easier target for a wandering cursor.

   No padding is reserved for them, and none is needed: each bar disappears at
   exactly the end it points towards, so the first and last rows are always
   fully visible once you reach them. Nothing is ever permanently hidden. */
[data-tv] .zz-nudge {
    position: absolute;
    left: 1px;
    right: 1px;
    height: 46px;
    z-index: 5;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
}
[data-tv] .zz-nudge svg { width: 26px; height: 26px; display: block; }
[data-tv] .zz-nudge-up {
    top: 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 16px 16px 0 0;
    border-radius: var(--zz-r-lg) var(--zz-r-lg) 0 0;
}
[data-tv] .zz-nudge-down {
    bottom: 0;
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 0 0 16px 16px;
    border-radius: 0 0 var(--zz-r-lg) var(--zz-r-lg);
}

/* The pointer is the input here, so hover is the feedback that matters. */
[data-tv] .zz-nudge:hover,
[data-tv] .zz-nudge:active {
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    color: #1a0a05;
}

/* -------------------------------------------------------------------------
   HOVER, ON A TELEVISION

   `:hover` is not a desktop-only idea here. A TV pointer generates real
   mousemove events, so hover IS the feedback a Samsung viewer gets as they
   sweep the cursor across the screen - and it needs to be visible from a sofa,
   not the polite tint a laptop gets.
   ------------------------------------------------------------------------- */
[data-tv] .zz-channel:hover,
[data-tv] .zz-match:hover {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ box-shadow: 0 0 0 2px rgba(251, 98, 63, .35);
    box-shadow: 0 0 0 2px var(--zz-ember-line);
}
[data-tv] .zz-channel:hover .zz-watch,
[data-tv] .zz-match.is-upcoming:hover .zz-watch {
    opacity: 1;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}
[data-tv] .zz-league:hover {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ box-shadow: inset 0 0 0 1px rgba(251, 98, 63, .35);
    box-shadow: inset 0 0 0 1px var(--zz-ember-line);
}
[data-tv] .zz-theme:hover,
[data-tv] .zz-bell:hover,
[data-tv] .zz-clock:hover,
[data-tv] .zz-link:hover,
[data-tv] .zz-btn-cta:hover,
[data-tv] .zz-btn-ghost:hover,
[data-tv] .zz-clock ul button:hover {
    /*!fb*/ outline: 2px solid #fb623f;
    outline: 2px solid var(--zz-ember);
    outline-offset: 2px;
}

/* Rows are aimed at with a wandering cursor, so they are taller and the whole
   row is the target. */
[data-tv] .zz-channel,
[data-tv] .zz-match { min-height: 64px; }

/* =========================================================================
   TELEVISION

   Everything under [data-tv] is additive. If the user-agent sniff misses a set
   - and it will, there are hundreds of them - the viewer gets the ordinary page,
   which already works. Nothing here is load-bearing, so a miss costs polish and
   never function.
   ========================================================================= */

/* Overscan. Older panels crop the edges of the picture: roughly 5% horizontally
   and 2.5% vertically is the long-standing broadcast-safe allowance, and
   without it the bottom of the page is physically off the screen. */
[data-tv] body {
    padding: 2.5vh 5vw;
}

/* A viewer is three metres away. 14px body text is a squint at that distance,
   and the focus ring has to be visible across a room. */
[data-tv] {
    --zz-t-xs:   13px;
    --zz-t-sm:   15px;
    --zz-t-base: 17px;
    --zz-t-md:   19px;
    --zz-t-lg:   24px;
    --zz-t-xl:   31px;
}
[data-tv] :focus {
    outline-width: 3px;
    outline-offset: 3px;
}
[data-tv][data-remote] .zz-scroll:focus {
    /*!fb*/ box-shadow: inset 0 0 0 3px #fb623f;
    box-shadow: inset 0 0 0 3px var(--zz-ember);
}
[data-tv] .zz-scroll:focus-visible {
    /*!fb*/ box-shadow: inset 0 0 0 3px #fb623f;
    box-shadow: inset 0 0 0 3px var(--zz-ember);
}

/* Rows are targets for a D-pad, so they need to be big enough to see which one
   is lit from across the room. */
[data-tv] .zz-channel,
[data-tv] .zz-match {
    /*!fb*/ padding: 16px 12px;
    padding: var(--zz-s-4) var(--zz-s-3);
}
[data-tv] .zz-channel:focus,
[data-tv] .zz-match:focus {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
}

/* The blur is the single most expensive thing on the page and a TV chip cannot
   composite it at sixty frames a second. The header keeps its colour and loses
   the effect. */
[data-tv] .zz-head {
    /* Stay inside the safe area when it sticks, or the header pins itself into
       the part of the picture an older panel crops off. */
    top: 2.5vh;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    /*!fb*/ background: #080c0f;
    background: var(--zz-canvas);
}

/* And nothing animates. A dropped frame in a countdown is fine; a dropped frame
   while the viewer is moving between rows feels like the remote is broken. */
[data-tv] * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* =========================================================================
   THEME TOGGLE
   ========================================================================= */
.zz-theme {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    /*!fb*/ margin-left: 8px;
    margin-left: var(--zz-s-2);
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-theme:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }
.zz-theme svg { width: 17px; height: 17px; display: block; }
/* One button, two glyphs, showing the theme you would switch TO - which is what
   the button's own label says it does. Showing the CURRENT theme instead would
   read as a status light next to a control that promises an action. */
.zz-theme .zz-theme-moon { display: none; }
[data-theme="light"] .zz-theme .zz-theme-moon { display: block; }
[data-theme="light"] .zz-theme .zz-theme-sun { display: none; }

/* =========================================================================
   LAYOUT
   One DOM order, two arrangements. `order` on mobile lifts the player above
   the league strip; grid areas on desktop put the strip across the top.
   ========================================================================= */
.zz-main { /*!fb*/ padding-bottom: 48px; padding-bottom: var(--zz-s-7); }

.zz-layout { display: flex; flex-direction: column; /*!fb*/ gap: 16px; gap: var(--zz-s-4); }
.zz-layout > .zz-player { order: -1; }

@media (min-width: 1024px) {
    /* A flex ROW, not a grid. Two reasons, and the second is the important one:
       equal-height children are simply what flexbox does (`align-items:stretch`
       is the default), so the rail matches the player for free; and flexbox
       works back to Chromium 21 where CSS grid does not reach a television
       until 2019. */
    .zz-layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    .zz-layout > .zz-rail {
        /*!fb*/ width: 336px;
        width: var(--zz-rail);
        flex: 0 0 auto;
        /*!fb*/ margin-right: 16px;
        margin-right: var(--zz-s-4);
        order: 0;
    }
    .zz-layout > .zz-player {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
}
/* The rail earns more room as there is more room to give. At exactly 1024px a
   336px rail would take a third of the screen and squeeze the player. */
@media (min-width: 1280px) { :root { --zz-rail: 336px; } }
@media (min-width: 1600px) { :root { --zz-rail: 368px; } }

/* =========================================================================
   PLAYER
   ONE iframe for the whole page. It never moves in the DOM - moving an
   iframe reloads it - so crossing the breakpoint or rotating a tablet does
   not interrupt the stream. CSS alone decides where it appears.
   ========================================================================= */
.zz-player { position: relative; min-width: 0; }

/* Below the breakpoint the player pins to the top and the list scrolls under
   it, so a viewer can keep browsing channels while watching. */
@media (max-width: 1023.98px) {
    .zz-player {
        position: sticky;
        /*!fb*/ top: 64px;
        top: var(--zz-header-h);
        z-index: 60;
        /*!fb*/ margin-left: calc(24px * -1);
        margin-left: calc(var(--zz-gutter) * -1);
        /*!fb*/ margin-right: calc(24px * -1);
        margin-right: calc(var(--zz-gutter) * -1);
    }
    .zz-player-frame { border-radius: 0; border-left: 0; border-right: 0; }
}

.zz-player-frame {
    position: relative;
    width: 100%;
    /* A percentage padding resolves against the WIDTH, so this is "16:9, plus
       the strip" - something aspect-ratio alone cannot express, because the
       strip is a fixed number of pixels rather than a share of the width. */
    height: 0;
    /*!fb*/ padding-bottom: calc(56.25% + 48px);
    padding-bottom: calc(56.25% + var(--zz-player-strip));
    overflow: hidden;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background: #000;
    /*!fb*/ box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1), 0 0 90px -40px rgba(251, 98, 63, .3);
    box-shadow: 0 40px 90px -50px var(--zz-sh),
                0 0 90px -40px rgba(251, 98, 63, .3);
}
/* No max-height: with the padding technique it would crop the video rather than
   scale it. The player column is already bounded by the shell width. */

/* THE SWITCHING SKELETON - see the markup in zx7q-preview-*.php and Player.load(). Only between a
   click and the player page arriving. Two parts, like the player: the stream-tabs strip (one tab for a
   channel, several for a game), and the picture area under it. */
.zz-player-skel {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    pointer-events: none;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
}
.zz-player-frame.is-loading .zz-player-skel {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.zz-skel-strip {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*!fb*/ height: 48px;
    height: var(--zz-player-strip);
    padding: 0 10px;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-skel-tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 32px;
    margin-right: 6px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
}
.zz-skel-tab + .zz-skel-tab { display: none; }
.zz-player-frame.is-game .zz-skel-tab + .zz-skel-tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.zz-skel-tab.is-on {
    border-color: rgba(251, 98, 63, .35);
    background: rgba(251, 98, 63, .10);
}
.zz-skel-tab b {
    display: block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.zz-skel-tab.is-on b { background: rgba(61, 220, 132, .7); }
.zz-skel-tab i {
    display: block;
    width: 84px;
    height: 10px;
    border-radius: 5px;
}
.zz-skel-tab + .zz-skel-tab i { width: 66px; }
.zz-skel-tab i,
.zz-skel-stage {
    /*!fb*/ background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, 0) 64%), rgba(255, 255, 255, .06);
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, var(--zz-shimmer) 42%, rgba(255, 255, 255, 0) 64%), rgba(255, 255, 255, .06);
    background-size: 220% 100%, auto;
    -webkit-animation: zz-skel 1.5s linear infinite;
            animation: zz-skel 1.5s linear infinite;
}
.zz-skel-stage {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    /*!fb*/ background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, 0) 64%), #000;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, var(--zz-shimmer) 42%, rgba(255, 255, 255, 0) 64%), #000;
    background-size: 220% 100%, auto;
}
@-webkit-keyframes zz-skel { from { background-position: 140% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes zz-skel { from { background-position: 140% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .zz-skel-tab i, .zz-skel-stage { -webkit-animation: none; animation: none; }
}

.zz-player-frame iframe {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* The bar under the player: what is playing, and the way out on mobile. */
.zz-player-bar {
    display: flex;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ padding: 12px 16px;
    padding: var(--zz-s-3) var(--zz-s-4);
    min-height: 52px;
}
@media (max-width: 1023.98px) {
    .zz-player-bar {
        /*!fb*/ background: #0d1317;
        background: var(--zz-surface-1);
        /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
        border-bottom: 1px solid var(--zz-line);
        /*!fb*/ padding-left: 16px;
        padding-left: var(--zz-s-4);
        /*!fb*/ padding-right: 16px;
        padding-right: var(--zz-s-4);
    }
}
.zz-player-title {
    /*!fb*/ font-size: 16px;
    font-size: var(--zz-t-md);
    font-weight: 600;
    letter-spacing: -.01em;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.zz-player-bar-sp { flex: 1 1 auto; }

.zz-live-chip {
    display: inline-flex; align-items: center; gap: 7px;
    flex: 0 0 auto;
    padding: 4px 10px 4px 8px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    border: 1px solid rgba(61, 220, 132, .3);
    background: rgba(61, 220, 132, .1);
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live-ink);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
}
.zz-live-chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: zz-breathe 2s ease-in-out infinite;
}
@keyframes zz-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* Close. On desktop the player is always present, so there is nothing to close. */
.zz-player-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    cursor: pointer;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease);
}
.zz-player-close:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }
.zz-player-close svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .zz-player-close { display: none; } }

/* Before anything is playing, desktop shows a quiet placeholder rather than
   a black hole. */
.zz-player-idle {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    /*!fb*/ padding: 24px;
    padding: var(--zz-s-5);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-player-idle svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 12px; }
.zz-player-idle p { margin: 0; /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); max-width: 30ch; line-height: 1.6; }

/* =========================================================================
   RAIL — the tabbed panels
   ========================================================================= */
.zz-rail { min-width: 0; display: flex; flex-direction: column; }

/* The rail is exactly as tall as the player beside it, whatever the player is
   showing - a stream, the sign-in gate, the plans, or a countdown.

   The panel is taken OUT OF FLOW to get there, and that is the whole trick. A
   flex line takes its height from its tallest item; with the panel in flow the
   tallest item is a 54-row channel list, so the row came out 3364px tall, the
   player stretched to match, and the "scrollable" list had nothing to scroll
   because it was already showing everything. Absolutely positioned, the rail
   contributes no height at all, the line is sized by the player, and
   `align-items: stretch` hands that height straight back to the rail. */
@media (min-width: 1024px) {
    .zz-layout > .zz-rail { position: relative; }
    .zz-rail > .zz-panel {
        position: absolute;
        /* Four longhands, not `inset`: `inset` is Chromium 87 and the sets this
           has to run on are 38 and 47. */
        top: 0; right: 0; bottom: 0; left: 0;
    }
}

.zz-panel {
    display: none;
    flex-direction: column;
    min-width: 0;
    /* The position bar is absolutely placed inside this. (An earlier version of
       this rule existed for the scroll fade and went away with it.) */
    position: relative;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    overflow: hidden;
}
.zz-panel.is-open { display: flex; }
/* Off-screen panels cost no layout: a 54-row list is not free to measure. */
.zz-panel:not(.is-open) { content-visibility: hidden; }

.zz-panel-head {
    display: flex; align-items: center; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 16px;
    padding: var(--zz-s-4);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-panel-title {
    margin: 0;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-count {
    margin-left: auto;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 600;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    padding: 3px 8px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
}

/* THE SCROLL CONTAINER, and the one place TV support is won or lost.

   `tabindex="0"` in the markup is what lets a D-pad reach this at all - a
   scrolling div is not focusable before Chromium 130. Everything here is the
   other half: once focus arrives, the viewer has to be able to SEE that it
   arrived, and see that there is more below. On a set with no pointer and often
   no visible scrollbar, a list that gives no sign of continuing simply looks
   like a list that has ended. */
.zz-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    /*!fb*/ padding: 8px;
    padding: var(--zz-s-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    /*!fb*/ scrollbar-color: rgba(255, 255, 255, .20) transparent;
    scrollbar-color: var(--zz-line-3) transparent;
}
.zz-scroll::-webkit-scrollbar { width: 8px; }
.zz-scroll::-webkit-scrollbar-track { background: transparent; }
.zz-scroll::-webkit-scrollbar-thumb { /*!fb*/ background: rgba(255, 255, 255, .12); background: var(--zz-line-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.zz-scroll::-webkit-scrollbar-thumb:hover { /*!fb*/ background: rgba(255, 255, 255, .20); background: var(--zz-line-3); background-clip: content-box; }

/* Focus on the container itself. Its own ruleset - see the note on :focus at
   the top of this file - and an inset ring rather than an outline, because an
   outline on a box that is flush against the panel edge gets clipped. */
.zz-scroll:focus { outline: none; }
.zz-scroll:focus-visible {
    /*!fb*/ box-shadow: inset 0 0 0 2px #fb623f;
    box-shadow: inset 0 0 0 2px var(--zz-ember);
}
[data-remote] .zz-scroll:focus {
    /*!fb*/ box-shadow: inset 0 0 0 2px #fb623f;
    box-shadow: inset 0 0 0 2px var(--zz-ember);
}

/* "There is more below."

   Many television browsers draw no scrollbar at all, so a list that gives no
   sign of continuing simply looks like a list that has ended - which is half of
   what "I cannot scroll it" means in practice.

   This is the four-layer scroll shadow, and the reason for its shape is
   `background-attachment: local`: the first two layers scroll WITH the content
   and the last two stay put, so a solid cover slides over each shadow exactly
   when that end is reached. The shadow at the bottom disappears when you get to
   the bottom, and reappears the moment you scroll away from it - a real
   indicator, not a permanent gradient sitting on the last row.

   No JavaScript, no scroll listener, and `local` has been supported since long
   before any set this has to run on. */
.zz-scroll {
    /*!fb*/ background: linear-gradient(#0d1317 30%, rgba(255, 255, 255, 0)) top / 100% 22px no-repeat local, linear-gradient(rgba(255, 255, 255, 0), #0d1317 70%) bottom / 100% 22px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .55), rgba(255, 255, 255, 0)) top / 100% 11px no-repeat, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .55), rgba(255, 255, 255, 0)) bottom / 100% 11px no-repeat, #0d1317;
    background:
        linear-gradient(var(--zz-surface-1) 30%, rgba(255, 255, 255, 0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), var(--zz-surface-1) 70%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0,
            var(--zz-scroll-shadow), rgba(255, 255, 255, 0)) top / 100% 11px no-repeat,
        radial-gradient(farthest-side at 50% 100%,
            var(--zz-scroll-shadow), rgba(255, 255, 255, 0)) bottom / 100% 11px no-repeat,
        var(--zz-surface-1);
}

/* `min-height: 0` is not decoration. Without it a flex item refuses to shrink
   below its content, the box quietly stops being a scroll container, and the
   list simply runs off the bottom - one of the ways a sidebar "cannot be
   scrolled". */
@media (min-width: 1024px) {
    .zz-scroll { flex: 1 1 auto; min-height: 0; }
}
@media (max-width: 1023.98px) { .zz-scroll { max-height: 62vh; } }

/* ---------------------------------------------------------------- search */
/* The icon and the clear button are flex items pulled over the input by
   negative margins, so they are centred on the INPUT by the flex line itself -
   whatever padding a layout gives the box. They used to be positioned from the
   box's own top with a fixed nudge, which only matched the desktop padding
   and left the icon below the text on phones. */
.zz-search {
    position: relative;
    display: flex;
    align-items: center;
    /*!fb*/ padding: 12px 12px 0;
    padding: var(--zz-s-3) var(--zz-s-3) 0;
}
.zz-search svg {
    position: relative;
    z-index: 1;
    flex: 0 0 15px;
    width: 15px; height: 15px;
    margin: 0 -27px 0 12px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    pointer-events: none;
}
.zz-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 34px 0 36px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-family: inherit;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ transition: border-color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: border-color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-search input::placeholder { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-search input:focus {
    outline: none;
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
}
.zz-search-clear {
    position: relative;
    z-index: 1;
    flex: 0 0 22px;
    margin: 0 8px 0 -30px;
    width: 22px; height: 22px;
    display: none; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
    font-size: 13px; line-height: 1;
}
.zz-search.has-value .zz-search-clear { display: inline-flex; }
.zz-search-clear:hover { /*!fb*/ background: rgba(255, 255, 255, .18); background: var(--zz-fill-4); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

/* =========================================================================
   CHANNEL ROWS
   ========================================================================= */
.zz-channel {
    display: flex;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /* The old rows were 50px tall with 10px of padding. Room to breathe is
       the cheapest thing that reads as expensive. */
    min-height: 58px;
    /*!fb*/ padding: 8px 12px;
    padding: var(--zz-s-2) var(--zz-s-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1), transform 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease),
                transform var(--zz-fast) var(--zz-ease);
}
.zz-channel:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }
.zz-channel:active { transform: scale(.985); }

.zz-channel-logo {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    overflow: hidden;
}
.zz-channel-logo img { width: 30px; height: 30px; object-fit: contain; }

.zz-channel-name {
    flex: 1 1 auto;
    min-width: 0;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 500;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    letter-spacing: -.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The Watch pill is quiet until the row is hovered, focused or playing - QUIET,
   not absent. It used to be `opacity: 0`, revealed on `:hover`. A remote control
   cannot hover; `@media (hover: none)` does not rescue it either, because Tizen
   and webOS both report `hover: hover` (they model the remote as a pointer). An
   affordance behind hover alone is an affordance a TV viewer does not have. */
.zz-watch {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    opacity: .6;
    /*!fb*/ transition: opacity 120ms cubic-bezier(.2, .8, .2, 1), color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: opacity var(--zz-fast) var(--zz-ease),
                color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
.zz-channel .zz-watch {
    opacity: 1;
    background: transparent;
    /*!fb*/ border-color: rgba(255, 255, 255, .12);
    border-color: var(--zz-line-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}
.zz-channel:hover .zz-watch { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-channel:focus .zz-watch { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }

/* --- playing state -------------------------------------------------------
   `bg-blueOpacity` is the class the tab/channel script has always toggled to
   mean "this one is playing". The name is kept so the JavaScript contract is
   untouched; only what it looks like is new. */
.zz-channel.bg-blueOpacity {
    /*!fb*/ background: linear-gradient(90deg, rgba(251, 98, 63, .12), rgba(251, 98, 63, .03));
    background: linear-gradient(90deg, var(--zz-ember-ghost), rgba(251, 98, 63, .03));
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
}
.zz-channel.bg-blueOpacity .zz-channel-name { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-weight: 600; }
.zz-channel.bg-blueOpacity .zz-channel-logo { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); background: rgba(251, 98, 63, .1); }
.zz-channel.bg-blueOpacity .zz-watch {
    opacity: 1;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}
.zz-channel.bg-blueOpacity::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 26px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    box-shadow: 0 0 12px 0 rgba(251, 98, 63, .8);
}

/* =========================================================================
   SCHEDULE CARDS
   ========================================================================= */
.zz-daygroup { /*!fb*/ padding: 12px 8px 4px; padding: var(--zz-s-3) var(--zz-s-2) var(--zz-s-1); }
.zz-daygroup:first-child { /*!fb*/ padding-top: 8px; padding-top: var(--zz-s-2); }
.zz-day {
    display: flex; align-items: center; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-day::after { content: ""; flex: 1 1 auto; height: 1px; /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-line); }

.zz-match {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    /*!fb*/ padding: 12px;
    padding: var(--zz-s-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    cursor: pointer;
    text-align: left;
    position: relative;
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease);
}
.zz-match + .zz-match { margin-top: 6px; }
.zz-match:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }

.zz-match-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.zz-match-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 10px;
}
.zz-match-when > * { margin-right: 8px; }
.zz-match-when > *:last-child { margin-right: 0; }
.zz-match-time {
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 700;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    white-space: nowrap;
}
.zz-match-until {
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 500;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    white-space: nowrap;
}
.zz-match-until:empty { display: none; }

.zz-match-state {
    display: none;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.zz-match-state.blinking {
    display: inline-flex;
    align-items: center;
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live-ink);
}
.zz-match-state .live-text { /*!fb*/ color: #3ddc84; color: var(--zz-live-ink); }
.zz-match-state.blinking::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    /*!fb*/ background: #3ddc84;
    background: var(--zz-live);
    display: inline-block;
    margin-right: 5px;
    animation: zz-breathe 2s ease-in-out infinite;
}

.zz-match .zz-watch {
    opacity: 1;
    gap: 0;
    padding: 5px 11px;
    white-space: nowrap;
}
.zz-watch-play { display: block; width: 9px; height: 9px; margin-left: 6px; flex: 0 0 auto; }
.zz-watch-dot {
    display: none;
    width: 6px; height: 6px; border-radius: 50%;
    margin-left: 6px;
    background: currentColor;
    animation: zz-breathe 2s ease-in-out infinite;
}

.zz-match.is-upcoming .zz-watch {
    background: transparent;
    /*!fb*/ border-color: rgba(255, 255, 255, .12);
    border-color: var(--zz-line-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}
.zz-match.is-upcoming:hover .zz-watch { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-match.is-upcoming:focus .zz-watch { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }

.zz-match.is-live .zz-watch {
    /*!fb*/ background: #fb623f;
    background: var(--zz-cta);
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-cta);
    color: #ffffff;
}
.zz-match.is-live:hover .zz-watch { /*!fb*/ background: #ff7d5e; background: var(--zz-ember-hi); /*!fb*/ border-color: #ff7d5e; border-color: var(--zz-ember-hi); }
.zz-match.is-live:focus .zz-watch { /*!fb*/ background: #ff7d5e; background: var(--zz-ember-hi); /*!fb*/ border-color: #ff7d5e; border-color: var(--zz-ember-hi); }

.zz-match.is-watching .zz-watch {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}
.zz-match.is-watching .zz-watch-play { display: none; }
.zz-match.is-watching .zz-watch-dot { display: inline-block; }

.zz-match-teams { display: block; min-width: 0; }
.zz-team { display: flex; align-items: center; min-width: 0; }
.zz-team + .zz-team { margin-top: 8px; }
.zz-team-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.zz-team-logo img { display: block; width: 24px; height: 24px; object-fit: contain; }
.zz-team-name {
    flex: 1 1 auto;
    min-width: 0;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 500;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.zz-match.border-violet {
    /*!fb*/ background: linear-gradient(90deg, rgba(251, 98, 63, .12), rgba(251, 98, 63, .03));
    background: linear-gradient(90deg, var(--zz-ember-ghost), rgba(251, 98, 63, .03));
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
}
.zz-match.border-violet::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 32px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    box-shadow: 0 0 12px 0 rgba(251, 98, 63, .8);
}
.zz-match.border-violet .zz-team-name { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }

.zz-match .zz-tag { display: none; }
[data-live-panel] .zz-match .zz-tag,
.zz-finder .zz-match .zz-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    margin-right: 8px;
    padding: 0 8px 0 6px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}
.zz-match .zz-tag img,
.zz-match .zz-tag svg {
    display: block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    object-fit: contain;
    flex: 0 0 auto;
}

.zz-match::after,
.zz-channel::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    background: rgba(251, 98, 63, .10);
    box-shadow: inset 0 0 0 1px rgba(251, 98, 63, .6);
    opacity: 0;
    pointer-events: none;
}
.zz-match.is-picked::after,
.zz-channel.is-picked::after { animation: zz-pick 700ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes zz-pick { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.zz-match:active { transform: scale(.985); }
.zz-match { transition-property: background-color, border-color, transform; }

@media (max-width: 479.98px) {
    .zz-match { padding: 12px 14px; }
    .zz-channel { padding: 10px 14px; }
    .zz-match .zz-watch { padding: 7px 13px; }
    .zz-team-logo { flex-basis: 26px; width: 26px; height: 26px; }
    .zz-team-logo img { width: 26px; height: 26px; }
    .zz-team-name { font-size: 15px; }
}

[data-tv] .zz-match + .zz-match { margin-top: 10px; }
[data-tv] .zz-match-head { margin-bottom: 14px; }
[data-tv] .zz-match-time { font-size: 15px; }
[data-tv] .zz-match-until { font-size: 15px; }
[data-tv] .zz-match-state { font-size: 13px; }
[data-tv] .zz-match .zz-watch { padding: 8px 16px; font-size: 14px; }
[data-tv] .zz-watch-play { width: 12px; height: 12px; margin-left: 8px; }
[data-tv] .zz-team + .zz-team { margin-top: 10px; }
[data-tv] .zz-team-logo { flex-basis: 34px; width: 34px; height: 34px; margin-right: 14px; }
[data-tv] .zz-team-logo img { width: 34px; height: 34px; }
[data-tv] .zz-team-name { font-size: 19px; }
[data-tv] [data-live-panel] .zz-match .zz-tag { height: 28px; padding: 0 10px 0 8px; font-size: 14px; }
[data-tv] .zz-match .zz-tag img,
[data-tv] .zz-match .zz-tag svg { width: 18px; height: 18px; }
[data-tv] .zz-match:active { transform: none; }
[data-tv] .zz-channel { margin-bottom: 10px; }
[data-tv] .zz-channel:active { transform: none; }

/* ---------------------------------------------------------- empty states */
/* THE ONE DEFINITION. account-2026.css used to redefine all four of these
   classes, and the homepage fetches that sheet the moment its sign-in pop-up
   opens - so every empty schedule on the page changed shape mid-visit. The
   account area's quieter variant now lives under .zz-acc there, and this
   stays the only unscoped rule. Flex, not grid, for the television floor. */
.zz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*!fb*/ padding: 48px 24px;
    padding: var(--zz-s-7) var(--zz-s-5);
    min-height: 260px;
}
.zz-empty-ico {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border: 1px solid rgba(251, 98, 63, .35);
    border: 1px solid var(--zz-ember-line);
}
.zz-empty-ico svg { width: 22px; height: 22px; /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }
.zz-empty-t { margin-top: 12px; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 600; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); letter-spacing: -.01em; }
.zz-empty-x { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); max-width: 34ch; line-height: 1.6; margin: 12px 0 0; }

/* =========================================================================
   WHY ZUZZ — the comparison, rebuilt from the old JPG
   ========================================================================= */
.zz-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    /*!fb*/ padding: 16px;
    padding: var(--zz-s-4);
    overflow-y: auto;
    background: rgba(4, 7, 9, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.zz-modal.is-open { display: flex; }

.zz-modal-card {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: auto;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 1);
    box-shadow: 0 60px 140px -60px var(--zz-sh);
    overflow: hidden;
}

.zz-modal-head {
    /*!fb*/ padding: 24px 24px 16px;
    padding: var(--zz-s-5) var(--zz-s-5) var(--zz-s-4);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    padding-right: 64px;
}
.zz-modal-eyebrow {
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; /*!fb*/ color: #fb623f; color: var(--zz-ember-ink);
    /*!fb*/ margin: 0 0 8px;
    margin: 0 0 var(--zz-s-2);
}
.zz-modal-title {
    margin: 0;
    /*!fb*/ font-size: 26px;
    font-size: var(--zz-t-xl);
    font-weight: 700;
    letter-spacing: -.025em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    line-height: 1.15;
}
.zz-modal-sub { /*!fb*/ margin: 8px 0 0; margin: var(--zz-s-2) 0 0; /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }

.zz-modal-close {
    position: absolute;
    /*!fb*/ top: 16px;
    top: var(--zz-s-4); /*!fb*/ right: 16px; right: var(--zz-s-4);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease), border-color var(--zz-fast) var(--zz-ease);
}
.zz-modal-close:hover { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-modal-close svg { width: 18px; height: 18px; }

/* --- the table (wide screens) --- */
.zz-cmp { /*!fb*/ padding: 16px 24px 24px; padding: var(--zz-s-4) var(--zz-s-5) var(--zz-s-5); }
.zz-cmp-table { width: 100%; border-collapse: collapse; }
.zz-cmp-table th, .zz-cmp-table td { /*!fb*/ padding: 13px 12px; padding: 13px var(--zz-s-3); text-align: center; }
.zz-cmp-table thead th {
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ padding-bottom: 16px;
    padding-bottom: var(--zz-s-4);
}
.zz-cmp-table tbody th {
    text-align: left;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 500;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    white-space: nowrap;
}
.zz-cmp-table td { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-cmp-table tbody tr + tr th, .zz-cmp-table tbody tr + tr td { /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07); border-top: 1px solid var(--zz-line); }

/* The ZUZZ column is the only one that is lit. */
.zz-cmp-us { position: relative; }
.zz-cmp-table thead .zz-cmp-us,
.zz-cmp-table tbody .zz-cmp-us {
    background: linear-gradient(180deg, rgba(251, 98, 63, .09), rgba(251, 98, 63, .035));
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-weight: 600;
}
.zz-cmp-table thead .zz-cmp-us { /*!fb*/ border-radius: 12px 12px 0 0; border-radius: var(--zz-r) var(--zz-r) 0 0; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-cmp-table tbody tr:last-child .zz-cmp-us { /*!fb*/ border-radius: 0 0 12px 12px; border-radius: 0 0 var(--zz-r) var(--zz-r); }
.zz-cmp-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.zz-cmp-brand img { width: 92px; height: auto; }
.zz-cmp-price { /*!fb*/ font-size: 20px; font-size: var(--zz-t-lg); font-weight: 700; letter-spacing: -.02em; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-cmp-price small { display: block; /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); font-weight: 500; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); letter-spacing: 0; }
.zz-cmp-price-alt { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }

.zz-yes, .zz-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
}
.zz-yes { background: rgba(61, 220, 132, .14); /*!fb*/ color: #3ddc84; color: var(--zz-live-ink); }
.zz-no  { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-yes svg, .zz-no svg { width: 13px; height: 13px; }

.zz-cmp-foot {
    display: flex; flex-wrap: wrap; align-items: center; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 16px 24px 24px;
    padding: var(--zz-s-4) var(--zz-s-5) var(--zz-s-5);
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}
.zz-cmp-foot p { margin: 0; /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); flex: 1 1 240px; }

/* --- the same data as cards (phones) --- */
.zz-cmp-cards { display: none; /*!fb*/ padding: 16px; padding: var(--zz-s-4); /*!fb*/ gap: 12px; gap: var(--zz-s-3); flex-direction: column; }
.zz-cmp-card {
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    overflow: hidden;
}
.zz-cmp-card.is-us { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); /*!fb*/ background: linear-gradient(180deg, rgba(251, 98, 63, .08), #121a20); background: linear-gradient(180deg, rgba(251, 98, 63, .08), var(--zz-surface-2)); }
.zz-cmp-card-h {
    display: flex; align-items: baseline; justify-content: space-between; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 12px 16px;
    padding: var(--zz-s-3) var(--zz-s-4);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-cmp-card-h b { /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 700; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); letter-spacing: -.01em; }
.zz-cmp-card-h span { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); white-space: nowrap; }
.zz-cmp-card.is-us .zz-cmp-card-h span { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 700; }
.zz-cmp-row {
    display: flex; align-items: center; justify-content: space-between; /*!fb*/ gap: 12px; gap: var(--zz-s-3);
    /*!fb*/ padding: 10px 16px;
    padding: 10px var(--zz-s-4);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-cmp-row + .zz-cmp-row { /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07); border-top: 1px solid var(--zz-line); }
.zz-cmp-row dt { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); margin: 0; }
.zz-cmp-row dd { margin: 0; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); text-align: right; }

@media (max-width: 767.98px) {
    .zz-cmp { display: none; }
    .zz-cmp-cards { display: flex; }
    .zz-modal-title { /*!fb*/ font-size: 20px; font-size: var(--zz-t-lg); }
}

/* =========================================================================
   CONNECTION LIMIT — "you are watching somewhere else"
   Shown by csl-parent-2026.js when the account is opened on another device.
   Styled here rather than injected by that script, for the same reason the
   bell is: a stylesheet added at runtime lands last in the cascade and can
   restyle this page by accident.
   ========================================================================= */
.zz-kick { align-items: center; }

.zz-kick-card {
    max-width: 460px;
    /*!fb*/ padding: 32px 24px 24px;
    padding: var(--zz-s-6) var(--zz-s-5) var(--zz-s-5);
    text-align: center;
    /* A warmer ground than the plain panel: this is the one moment the site
       interrupts somebody, so it should feel deliberate rather than like an
       error box. */
    background:
        radial-gradient(420px 240px at 50% 0%, rgba(251, 98, 63, .13), transparent 65%),
        var(--zz-surface-1);
}

.zz-kick-ico {
    width: 60px; height: 60px;
    /*!fb*/ margin: 0 auto 16px;
    margin: 0 auto var(--zz-s-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border: 1px solid rgba(251, 98, 63, .35);
    border: 1px solid var(--zz-ember-line);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}
.zz-kick-ico svg { width: 27px; height: 27px; }

.zz-kick-t {
    /*!fb*/ margin: 0 0 12px;
    margin: 0 0 var(--zz-s-3);
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
.zz-kick-x {
    margin: 0;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    line-height: 1.65;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}

/* What their plan actually allows — the fact that answers "why me?". */
.zz-kick-plan {
    display: inline-block;
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    padding: 6px 14px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-kick-plan b { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 700; }

.zz-kick-actions {
    display: flex; flex-direction: column; /*!fb*/ gap: 8px; gap: var(--zz-s-2);
    /*!fb*/ margin-top: 24px;
    margin-top: var(--zz-s-5);
}
.zz-kick-actions .zz-btn-cta,
.zz-kick-actions .zz-btn-ghost {
    justify-content: center;
    padding-top: 13px;
    padding-bottom: 13px;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
}

.zz-kick-note {
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    line-height: 1.6;
}
.zz-kick-note a { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); text-decoration: underline; }
.zz-kick-note a:hover { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }

@media (min-width: 480px) {
    .zz-kick-actions { flex-direction: row; }
    .zz-kick-actions > * { flex: 1 1 0; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.zz-foot {
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
    /*!fb*/ margin-top: 32px;
    margin-top: var(--zz-s-6);
    /*!fb*/ padding: 32px 0 48px;
    padding: var(--zz-s-6) 0 var(--zz-s-7);
    /*!fb*/ background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35));
    background: linear-gradient(180deg, transparent, var(--zz-foot-wash));
}
.zz-foot-in { display: flex; flex-wrap: wrap; align-items: center; /*!fb*/ gap: 16px 24px; gap: var(--zz-s-4) var(--zz-s-5); }
.zz-foot-brand {
    /* One row: mark, tagline, rating. It used to stack, which made the footer
       taller than it needed to be for three short things. */
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    flex: 0 0 auto;
    /* Pushed right: the links lead now, and the brand closes. */
    margin-left: auto;
}
.zz-foot-brand img { width: 104px; height: auto; opacity: .85; }
.zz-foot-tag { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-foot-links { display: flex; flex-wrap: wrap; /*!fb*/ gap: 8px 16px; gap: var(--zz-s-2) var(--zz-s-4); }
.zz-foot-links a {
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease);
}
.zz-foot-links a:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-foot-legal {
    flex: 1 1 100%;
    /*!fb*/ padding-top: 16px;
    padding-top: var(--zz-s-4);
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}

/* =========================================================================
   MOTION — every animation above is opt-out
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------- Trustpilot
   Drawn here rather than loaded from Trustpilot's widget script: that script
   is third-party JavaScript on every page, and it renders nothing at all on a
   2016 television. The rating is stated plainly and the block links to the
   real reviews. */
.zz-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    transition: color 120ms cubic-bezier(.2, .8, .2, 1);
}

.zz-trust:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-trust-stars { display: inline-flex; gap: 2px; color: #00b67a; }
.zz-trust-text { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }
.zz-trust-text b { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 700; }

@media (max-width: 640px) {
    /* Left-aligned and allowed to take the full row - a right-aligned block on
       a phone just looks like a mistake.

       `flex: 1 1 100%` is the part that matters: the brand is a flex ITEM of
       .zz-foot-in, and while it was `0 0 auto` it refused to shrink, so the
       mark, the tagline and the rating together measured 370px inside a 320px
       screen and pushed the whole page sideways. Its own contents still wrap
       within that row. */
    .zz-foot-brand {
        align-items: flex-start;
        margin-left: 0;
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* The primary button, on a small phone.
   The flat style is roomier than the gradient pill it replaced (12px/22px
   against 8px/17px), which is right everywhere it has space and 52px too wide
   for a 320px header carrying a burger, a bell, a theme toggle and the logo.
   It steps down rather than wrapping or pushing the bar off-screen. */
@media (max-width: 420px) {
    .zz-head .zz-btn-cta {
        padding: 9px 13px;
        /*!fb*/ font-size: 12px;
        font-size: var(--zz-t-sm);
        gap: 5px;
    }
    .zz-head .zz-btn-cta svg { display: none; }
}

/* =========================================================================
   MULTI-SCREEN and THEATRE MODE

   Two features that only make sense on a big picture, so both are hidden
   below the one breakpoint this file already has. Televisions are wide, so
   they get both.

   No CSS grid here on purpose (banned below Tizen 2019): the four screens are
   placed by percentage with top/left/width/height, which every engine back to
   Chromium 21 understands and which animates when the layout is switched.
   ========================================================================= */

/* ------------------------------------------------------- the two buttons */
.zz-mvbtn,
.zz-thbtn {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    cursor: pointer;
    /*!fb*/ transition: color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease),
                background-color var(--zz-fast) var(--zz-ease);
}
@media (min-width: 1024px) {
    .zz-mvbtn, .zz-thbtn { display: inline-flex; }
}
.zz-mvbtn:hover,
.zz-thbtn:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .12); border-color: var(--zz-line-2); }
.zz-mvbtn:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-thbtn:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mvbtn svg,
.zz-thbtn svg { flex: 0 0 auto; }

/* The switch. A picture of the state, not a control of its own: the whole
   button is the control, so a remote has one stop here, not two. */
.zz-mvbtn-sw {
    position: relative;
    display: block;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ transition: background-color 120ms cubic-bezier(.2, .8, .2, 1), border-color 120ms cubic-bezier(.2, .8, .2, 1);
    transition: background-color var(--zz-fast) var(--zz-ease),
                border-color var(--zz-fast) var(--zz-ease);
}
.zz-mvbtn-sw i {
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /*!fb*/ background: #9aa7b0;
    background: var(--zz-ink-2);
    /*!fb*/ -webkit-transition: -webkit-transform 120ms cubic-bezier(.2, .8, .2, 1);
    -webkit-transition: -webkit-transform var(--zz-fast) var(--zz-ease);
    /*!fb*/ transition: transform 120ms cubic-bezier(.2, .8, .2, 1);
    transition: transform var(--zz-fast) var(--zz-ease);
}
.zz-mvbtn.is-on { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); border-color: rgba(251, 98, 63, .45); background: rgba(251, 98, 63, .10); }
.zz-mvbtn.is-on .zz-mvbtn-sw { /*!fb*/ background: #fb623f; background: var(--zz-ember); /*!fb*/ border-color: #fb623f; border-color: var(--zz-ember); }
.zz-mvbtn.is-on .zz-mvbtn-sw i {
    background: #fff;
    -webkit-transform: translateX(13px);
            transform: translateX(13px);
}
.zz-thbtn.is-on { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); border-color: rgba(251, 98, 63, .45); background: rgba(251, 98, 63, .10); }

/* -------------------------------------------------------- the four screens */
.zz-multi {
    position: relative;
    width: 100%;
    height: 0;
    /*!fb*/ padding-bottom: calc(56.25% + 48px);
    padding-bottom: calc(56.25% + var(--zz-player-strip));
    overflow: hidden;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background: #000;
    /*!fb*/ box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1), 0 0 90px -40px rgba(251, 98, 63, .3);
    box-shadow: 0 40px 90px -50px var(--zz-sh),
                0 0 90px -40px rgba(251, 98, 63, .3);
}
/* One is the picture, the other is the four - never both. */
html[data-mv] .zz-player-frame { display: none; }

.zz-mv-cell {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    overflow: hidden;
    border: 1px solid transparent;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ transition: top 180ms cubic-bezier(.2, .8, .2, 1), left 180ms cubic-bezier(.2, .8, .2, 1), width 180ms cubic-bezier(.2, .8, .2, 1), height 180ms cubic-bezier(.2, .8, .2, 1);
    transition: top var(--zz-med) var(--zz-ease),
                left var(--zz-med) var(--zz-ease),
                width var(--zz-med) var(--zz-ease),
                height var(--zz-med) var(--zz-ease);
}
.zz-mv-cell[data-pos="2"] { left: 50%; }
.zz-mv-cell[data-pos="3"] { top: 50%; }
.zz-mv-cell[data-pos="4"] { top: 50%; left: 50%; }

/* One big, three down the side. The big one is whichever screen has the
   sound, so looking at a screen and giving it the sound are one gesture. */
.zz-multi.is-big .zz-mv-cell[data-pos="1"] { top: 0; left: 0; width: 67%; height: 100%; }
.zz-multi.is-big .zz-mv-cell[data-pos="2"] { top: 0; left: 67%; width: 33%; height: 33.34%; }
.zz-multi.is-big .zz-mv-cell[data-pos="3"] { top: 33.33%; left: 67%; width: 33%; height: 33.34%; }
.zz-multi.is-big .zz-mv-cell[data-pos="4"] { top: 66.66%; left: 67%; width: 33%; height: 33.34%; }

/* The screen with the sound. A border, not a glow: a glow is a shadow, and a
   shadow on four moving boxes is what makes an old set drop frames. */
.zz-mv-cell.is-sound { /*!fb*/ border-color: #fb623f; border-color: var(--zz-ember); }

.zz-mv-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 6px 0 8px;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
}
.zz-mv-n {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 17px;
    height: 17px;
    margin-right: 7px;
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.zz-mv-cell.is-sound .zz-mv-n { /*!fb*/ background: #fb623f; background: var(--zz-ember); color: #fff; }
.zz-mv-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
}
.zz-mv-sound {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(251, 98, 63, .15);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
}
.zz-mv-swap,
.zz-mv-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    height: 24px;
    padding: 0 9px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    cursor: pointer;
}
.zz-mv-x { width: 24px; padding: 0; }
.zz-mv-swap:hover,
.zz-mv-x:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-mv-swap:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mv-x:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mv-swap { border-color: rgba(251, 98, 63, .5); /*!fb*/ color: #fb623f; color: var(--zz-ember); }

.zz-mv-stage {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
}
.zz-mv-stage iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.zz-mv-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-mv-empty-ico { display: block; opacity: .4; margin-bottom: 8px; }
.zz-mv-empty-t { display: block; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); font-weight: 700; }
.zz-mv-empty-x { display: block; margin-top: 3px; /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); }

/* ------------------------------------------- the screens, in the sidebar */
.zz-mvbar {
    /*!fb*/ margin-bottom: 12px;
    margin-bottom: var(--zz-s-3);
    padding: 10px 12px 12px;
    border-radius: var(--zz-r-md);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
}
.zz-mvbar-h { display: flex; align-items: center; }
.zz-mvbar-t { flex: 1 1 auto; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); font-weight: 700; }
.zz-mvbar-n { flex: 0 0 auto; margin-right: 8px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); font-weight: 700; }
.zz-mvbar-lay {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    cursor: pointer;
}
.zz-mvbar-lay:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-mvbar-lay:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mvbar-lay[data-layout="grid"] .zz-lay-big { display: none; }
.zz-mvbar-lay[data-layout="big"] .zz-lay-grid { display: none; }
.zz-mvbar-list { margin-top: 8px; }
.zz-mvbar-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 6px;
    padding: 6px 6px 6px 8px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    text-align: left;
    cursor: pointer;
}
.zz-mvbar-row:hover { /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-mvbar-row:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mvbar-row .zz-mv-n { /*!fb*/ background: #fb623f; background: var(--zz-ember); color: #fff; }
.zz-mvbar-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zz-mvbar-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-mvbar-x {
    margin: 8px 0 0;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    line-height: 1.5;
}

/* A card that is on a screen says which one, and says so on every list it
   appears in - the league lists, Live and Search. */
.zz-channel.is-onscreen,
.zz-match.is-onscreen {
    border-color: rgba(251, 98, 63, .5);
    background: rgba(251, 98, 63, .07);
}
.zz-onscreen-n {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 999px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    color: #fff;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* --------------------------------------------------------- theatre mode */
html[data-theatre] body { overflow: hidden; }
html[data-theatre] .zz-foot { display: none; }
html[data-theatre] .zz-tabbar { display: none; }
html[data-theatre] .zz-finder { display: none; }
html[data-theatre] .zz-head-slide { display: none; }

/*
   THE BAR SITS BESIDE THE PICTURE, NEVER ON IT.

   It floated over the bottom of the video at first - which is exactly where the
   player keeps its OWN controls, so play, pause and the sound button ended up
   underneath ours and could not be reached. The picture is given the room that
   is left instead, and when the mouse goes still the bar folds away to nothing
   and the picture grows into it. Nothing overlaps at any moment, so every
   control belongs to whoever drew it.
*/
html[data-theatre] .zz-player {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    margin: 0;
    background: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}
html[data-theatre] .zz-player-frame,
html[data-theatre] .zz-multi {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html[data-theatre] .zz-player-bar {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    z-index: 3;
    overflow: hidden;
    /*!fb*/ background: rgba(8, 12, 15, .96);
    background: var(--zz-veil-2);
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}

/* The lists, over the picture. The header's league strip and the rail move
   together as one panel - the video is never reloaded, it is only covered. */
html[data-theatre] .zz-head {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 95;
    width: 380px;
    max-width: 88%;
    height: auto;
    margin: 0;
    padding: 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ background: rgba(8, 12, 15, .96);
    background: var(--zz-veil-2);
    -webkit-transform: translateX(-102%);
            transform: translateX(-102%);
    /*!fb*/ -webkit-transition: -webkit-transform 180ms cubic-bezier(.32, .72, 0, 1);
    -webkit-transition: -webkit-transform var(--zz-med) var(--zz-ease-drawer);
    /*!fb*/ transition: transform 180ms cubic-bezier(.32, .72, 0, 1);
    transition: transform var(--zz-med) var(--zz-ease-drawer);
}
html[data-theatre] .zz-rail {
    position: fixed;
    top: 57px;
    bottom: 0;
    left: 0;
    z-index: 94;
    width: 380px;
    max-width: 88%;
    padding: 12px;
    /*!fb*/ background: rgba(8, 12, 15, .96);
    background: var(--zz-veil-2);
    /*!fb*/ border-right: 1px solid rgba(255, 255, 255, .07);
    border-right: 1px solid var(--zz-line);
    overflow: hidden;
    -webkit-transform: translateX(-102%);
            transform: translateX(-102%);
    /*!fb*/ -webkit-transition: -webkit-transform 180ms cubic-bezier(.32, .72, 0, 1);
    -webkit-transition: -webkit-transform var(--zz-med) var(--zz-ease-drawer);
    /*!fb*/ transition: transform 180ms cubic-bezier(.32, .72, 0, 1);
    transition: transform var(--zz-med) var(--zz-ease-drawer);
}
/* Out of the way means OUT OF REACH. A panel that is only slid off-screen still
   collects the highlight, and a remote that walks into it lands on controls
   nobody can see - the commonest way a television page becomes unusable. The
   delay lets it finish sliding before it disappears. */
html[data-theatre] .zz-head,
html[data-theatre] .zz-rail {
    visibility: hidden;
    /*!fb*/ -webkit-transition: -webkit-transform 180ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 180ms;
    -webkit-transition: -webkit-transform var(--zz-med) var(--zz-ease-drawer), visibility 0s linear var(--zz-med);
    /*!fb*/ transition: transform 180ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 180ms;
    transition: transform var(--zz-med) var(--zz-ease-drawer), visibility 0s linear var(--zz-med);
}
html[data-theatre][data-th-open] .zz-head,
html[data-theatre][data-th-open] .zz-rail {
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*!fb*/ -webkit-transition: -webkit-transform 180ms cubic-bezier(.32, .72, 0, 1), visibility 0s;
    -webkit-transition: -webkit-transform var(--zz-med) var(--zz-ease-drawer), visibility 0s;
    /*!fb*/ transition: transform 180ms cubic-bezier(.32, .72, 0, 1), visibility 0s;
    transition: transform var(--zz-med) var(--zz-ease-drawer), visibility 0s;
}

/* The way back to the lists. Drawn always, because a television sends no
   hover and often no key at all - see .claude-docs/12. */
.zz-th-handle {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 64px;
    margin-top: -32px;
    padding: 0;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    border-left: 0;
    border-top-right-radius: var(--zz-r-md);
    border-bottom-right-radius: var(--zz-r-md);
    /*!fb*/ background: rgba(8, 12, 15, .96);
    background: var(--zz-veil-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    cursor: pointer;
    /*!fb*/ transition: opacity 120ms cubic-bezier(.2, .8, .2, 1);
    transition: opacity var(--zz-fast) var(--zz-ease);
}
.zz-th-handle:hover { /*!fb*/ background: #18232a; background: var(--zz-surface-3); }
.zz-th-handle:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
html[data-th-open] .zz-th-handle { opacity: 0; pointer-events: none; }
.zz-th-hot {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 93;
    width: 18px;
}
html[data-th-open] .zz-th-hot { width: 0; }

/* A remote is not a mouse: on a television the panel stays put rather than
   sliding, and nothing about the four screens animates. */
html[data-tv] .zz-mv-cell { transition: none; }
html[data-tv][data-theatre] .zz-head { transition: none; }
html[data-tv][data-theatre] .zz-rail { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .zz-mv-cell { transition: none; }
    .zz-mvbtn-sw i { transition: none; }
    html[data-theatre] .zz-head { transition: none; }
    html[data-theatre] .zz-rail { transition: none; }
}

/* ---------------------------------------------- theatre mode: out of the way
   A still mouse means "I am watching". After a couple of seconds the bar, the
   handle and the pointer itself all fade out, leaving nothing but the picture;
   the smallest movement brings them straight back (Theatre.awake).

   Never on a television: a set has no pointer to wake anything with, and many
   send no key events at all, so there the controls simply stay (see
   .claude-docs/12 and Theatre.awake in zuzz-2026.js). */
html[data-theatre] .zz-player-bar {
    /*!fb*/ -webkit-transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), height 180ms cubic-bezier(.2, .8, .2, 1), min-height 180ms cubic-bezier(.2, .8, .2, 1), padding 180ms cubic-bezier(.2, .8, .2, 1);
    -webkit-transition: opacity var(--zz-med) var(--zz-ease), height var(--zz-med) var(--zz-ease), min-height var(--zz-med) var(--zz-ease), padding var(--zz-med) var(--zz-ease);
    /*!fb*/ transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), height 180ms cubic-bezier(.2, .8, .2, 1), min-height 180ms cubic-bezier(.2, .8, .2, 1), padding 180ms cubic-bezier(.2, .8, .2, 1);
    transition: opacity var(--zz-med) var(--zz-ease), height var(--zz-med) var(--zz-ease), min-height var(--zz-med) var(--zz-ease), padding var(--zz-med) var(--zz-ease);
}
/* Folded away to nothing, and the picture grows into the space. Height rather
   than a slide: a slide leaves the gap behind, which is the black band this
   replaced. */
html[data-theatre][data-th-idle] .zz-player-bar {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    opacity: 0;
    pointer-events: none;
}
html[data-theatre][data-th-idle] .zz-th-handle {
    opacity: 0;
    pointer-events: none;
}
/* The pointer goes too - it is the one thing left sitting on the picture. */
html[data-theatre][data-th-idle] .zz-player,
html[data-theatre][data-th-idle] .zz-multi,
html[data-theatre][data-th-idle] .zz-player-frame { cursor: none; }

@media (prefers-reduced-motion: reduce) {
    html[data-theatre] .zz-player-bar { transition: none; }
}

/* ---------------------------------------------- the multi-screen offer
   In the player, over what is playing, so nobody is sent away to find out
   what multi-screen is. The stream keeps running behind it and "Not now"
   puts it away - an upsell that stops the thing you were watching is how a
   viewer learns to avoid the button. */
.zz-mvup {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 12, 15, .93);
}
.zz-mvup-card {
    width: 100%;
    max-width: 460px;
    padding: 22px;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    text-align: center;
}
.zz-mvup-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    border: 1px solid rgba(251, 98, 63, .35);
    background: rgba(251, 98, 63, .12);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember);
}
.zz-mvup-t {
    margin: 0 0 8px;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.zz-mvup-x {
    margin: 0 0 14px;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 16px;
    font-size: var(--zz-t-md);
    line-height: 1.5;
}
.zz-mvup-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    text-align: left;
}
.zz-mvup-list li {
    position: relative;
    padding: 5px 0 5px 26px;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    line-height: 1.45;
}
.zz-mvup-list li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
}

/* The price, when billing has answered. A link of its own: the whole row is
   the upgrade, which is one press on a remote. */
.zz-mvup-offer {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--zz-r-md);
    border: 1px solid rgba(251, 98, 63, .4);
    background: rgba(251, 98, 63, .08);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    text-decoration: none;
    text-align: left;
}
.zz-mvup-offer:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-mvup-name { flex: 0 0 auto; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 700; }
.zz-mvup-meta { flex: 1 1 auto; margin-left: 8px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); }
.zz-mvup-price { flex: 0 0 auto; text-align: right; }
.zz-mvup-price s { display: block; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); }
.zz-mvup-price b { display: block; /*!fb*/ color: #fb623f; color: var(--zz-ember); /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 700; }

.zz-mvup-acts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.zz-mvup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px;
    height: 42px;
    padding: 0 18px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.zz-mvup-btn.is-primary {
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    color: #fff;
}
.zz-mvup-btn.is-primary:hover { background: #ff7551; border-color: #ff7551; }
.zz-mvup-btn.is-quiet { border-color: transparent; background: none; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-weight: 600; }
.zz-mvup-btn:hover { /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
.zz-mvup-btn:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }

/* A television reads from three metres: everything one step larger, and the
   card is allowed the width for it. */
html[data-tv] .zz-mvup-card { max-width: 620px; padding: 28px; }
html[data-tv] .zz-mvup-t { font-size: 26px; }
html[data-tv] .zz-mvup-x { font-size: 17px; }
html[data-tv] .zz-mvup-list li { font-size: 16px; }
html[data-tv] .zz-mvup-btn { height: 52px; padding: 0 24px; font-size: 16px; }