/*
    Testcard Circle TV — loaded only when Site:Theme is "tcc".

    Sets the theme hooks declared in app.css and nothing else. The layout's own styles are
    scoped per component; a theme that overrode their rules would have to out-rank them,
    and would quietly become a second copy of the stylesheets to keep in step.

    Paired with Site:ShowTvCabinet = false: this site shows the picture in a black frame
    rather than the wooden television.
*/

:root {
    /* The site name in the navigation bar: a heavy serif rather than the caption face. */
    --font-brand: Georgia, 'Times New Roman', Times, serif;

    /* A thick black border round the picture, standing in for the cabinet. */
    --plain-frame: 10px;
    --plain-radius: 26px;
    --plain-screen-radius: 16px;
    --plain-frame-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

    /* Nothing behind the frame, so the page shows round it. */
    --plain-cabinet-bg: transparent;
    --plain-cabinet-shadow: none;

    /* The caption's dark text needs something pale under it on the rainbow. */
    --caption-bg: rgba(255, 255, 255, 0.92);
    --caption-pad: 0.3rem 0.9rem;
    --caption-radius: 999px;
    --caption-width: fit-content;

    /* What the frame (10px above and below) and the caption's padding add to the height.
       Without it the ON AIR line is pushed off the bottom while a stream is live. */
    --theme-v-reserve: 34px;
}

/*
    A wider chat on big screens, as in the design. Plain-screen mode narrows the chat to suit
    a phone on its side; this site is in plain-screen mode everywhere, so without this a
    desktop would get the phone's cramped column, built for a much narrower screen. Large
    screens only: there the picture is limited by height, not width, so the extra column
    costs it nothing. The same selector as app.css's, and loaded later, so this wins.
*/
@media (min-width: 1200px) and (min-height: 601px) {
    :root.plain-screen {
        --chat-width: 400px;
    }
}

/*
    The rainbow belongs to the home page only — it is the studio around the picture. Text
    pages, the admin area and the page that turns strangers away keep the plain background,
    and the navigation bar carries the site's identity across all of them.

    Keyed on .home-layout, which only the home page renders and only for someone allowed
    to watch, so no page has to opt in. Browsers without :has() simply keep the plain
    background everywhere.

    Matched to the example TCC supplied by sampling its colours and comparing renders side
    by side: a warm sweep across the top over a cool band along the bottom, blending in a
    soft middle. Drawn in CSS rather than used as an image — the example is a watermarked
    stock preview, which could not be used as it is, and a gradient weighs nothing.

    Every layer is `fixed`. The background is painted on both html and body; fixed ties each
    layer to the viewport, so the two paint the same picture. Any layer left scrolling would
    be positioned against body's box instead, and show a seam where they disagree.
*/
html:has(.home-layout) {
    --page-bg:
        /* Cool band along the bottom: purple, indigo, blue, teal, each fading upwards. */
        radial-gradient(ellipse 56% 76% at 0% 108%,  #3c0372 0%, rgba(60, 3, 114, 0) 100%) fixed,
        radial-gradient(ellipse 50% 62% at 30% 112%, #3410a0 0%, rgba(52, 16, 160, 0) 100%) fixed,
        radial-gradient(ellipse 48% 56% at 62% 112%, #2a34c0 0%, rgba(42, 52, 192, 0) 100%) fixed,
        radial-gradient(ellipse 40% 52% at 95% 110%, #1f88c6 0%, rgba(31, 136, 198, 0) 100%) fixed,
        radial-gradient(ellipse 16% 34% at 104% 92%, #18aa9a 0%, rgba(24, 170, 154, 0) 100%) fixed,
        /* The left edge darkens from red to crimson on its way down. */
        radial-gradient(ellipse 14% 50% at -2% 48%,  #7c1534 0%, rgba(124, 21, 52, 0) 100%) fixed,
        /* Warm sweep across the top: red, orange, gold, yellow-green, green. */
        linear-gradient(90deg,
            #cc1a16 0%, #bd5419 15%, #c48116 33%, #c1a013 50%,
            #a5b612 65%, #7abf13 80%, #3fc416 92%, #1fc71d 100%) fixed;
}