/* ============================================================
   ceefax.live — main stylesheet

   Font family matrix — all built on the Teletext50 CFF chassis:

                      Normal              In-vision (1.25× wide)
   Later eras         Teletext50          Teletext50Wide
   1980s era          TifaxTeletext       TifaxTeletextWide

   Each family also has an ultra-condensed face used at 2× size
   for double-height rows (.dh).
   ============================================================ */


/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
    font-family: Teletext50;
    font-stretch: normal;
    src: url('../fonts/Teletext50.otf') format('opentype');
}

@font-face {
    font-family: Teletext50;
    font-stretch: ultra-condensed;
    src: url('../fonts/Teletext50-ultracondensed.otf') format('opentype');
}

@font-face {
    font-family: 'TifaxTeletext';
    font-stretch: normal;
    src: url('../fonts/TifaxTeletext.woff2') format('woff2'), url('../fonts/TifaxTeletext.otf') format('opentype');
}

@font-face {
    font-family: 'TifaxTeletext';
    font-stretch: ultra-condensed;
    src: url('../fonts/TifaxTeletext-uc.woff2') format('woff2'), url('../fonts/TifaxTeletext-uc.otf') format('opentype');
}

@font-face {
    font-family: 'Teletext50Wide';
    font-stretch: normal;
    src: url('../fonts/Teletext50Wide.woff2') format('woff2'), url('../fonts/Teletext50Wide.otf') format('opentype');
}

@font-face {
    font-family: 'Teletext50Wide';
    font-stretch: ultra-condensed;
    src: url('../fonts/Teletext50Wide-uc.woff2') format('woff2'), url('../fonts/Teletext50Wide-uc.otf') format('opentype');
}

@font-face {
    font-family: 'TifaxTeletextWide';
    font-stretch: normal;
    src: url('../fonts/TifaxTeletextWide.woff2') format('woff2'), url('../fonts/TifaxTeletextWide.otf') format('opentype');
}

@font-face {
    font-family: 'TifaxTeletextWide';
    font-stretch: ultra-condensed;
    src: url('../fonts/TifaxTeletextWide-uc.woff2') format('woff2'), url('../fonts/TifaxTeletextWide-uc.otf') format('opentype');
}


/* ── Base ──────────────────────────────────────────────────── */

html, body {
    margin: 0;
    padding: 0;
    background: #000;
}


/* ── Shell: full-viewport flex container ───────────────────── */

.demo-shell {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    background: #000;
}

@media (orientation: landscape) {
    .demo-shell {
        align-items: center;
    }

    .ceefax-page {
        font-size: var(--ceefax-font-size, 3.6vh);
    }
}

@media (orientation: portrait) {
    .demo-shell {
        align-items: flex-start;
        padding: 2svh 2vw 0;
    }

    .ceefax-page {
        font-size: var(--ceefax-font-size, 4.0vw);
    }
}


/* ── Ceefax page ───────────────────────────────────────────── */

/*  Swap font-family to choose era:
    Teletext50 | TifaxTeletext | Teletext50Wide | TifaxTeletextWide  */
.ceefax-page {
    font-family: Teletext50, monospace;
    background: #000;
    color: #fff;
    height: 25em;
    transform: scaleY(var(--ceefax-scale-y, 1));
    transform-origin: center center;
}


    .ceefax-page p {
        margin: 0 0 -1px 0;
        padding: 0;
        white-space: pre;
        line-height: 1;
        min-height: 1em;
        letter-spacing: -0.5px;
    }
            /*  Each teletext row is a <p>.
    line-height driven by JS (--ceefax-line-height) so integer
    font-sizes fill the viewport exactly; falls back to 1.485.
    letter-spacing closes sub-pixel gaps between graphic characters. */
            /*  Double-height rows: 2× size in the ultra-condensed face
    produces normal-width characters two rows tall.             */
            .ceefax-page p.dh {
                font-size: 2em;
                font-stretch: ultra-condensed;
                line-height: 1;
            }
        /*  Links inherit the span colour; teletext had no underlines.  */
        .ceefax-page a {
            color: inherit;
            text-decoration: none;
        }
        /* ── Foreground colours ────────────────────────────────────── */

        .white {
            color: #ffffff;
        }

        .yellow {
            color: #ffff00;
        }

        .green {
            color: #00ff00;
        }

        .cyan {
            color: #00ffff;
        }

        .red {
            color: #ff0000;
        }

        .blue {
            color: #0000ff;
        }

        .magenta {
            color: #ff00ff;
        }

        .black {
            color: #000000;
        }
        /* ── Background colours ────────────────────────────────────── */

        .whitebg {
            background-color: #ffffff;
        }

        .yellowbg {
            background-color: #ffff00;
        }

        .greenbg {
            background-color: #00ff00;
        }

        .cyanbg {
            background-color: #00ffff;
        }

        .redbg {
            background-color: #ff0000;
        }

        .bluebg {
            background-color: #0000ff;
        }

        .magentabg {
            background-color: #ff00ff;
        }

        .blackbg {
            background-color: #000000;
        }
        /* ── Demo navigation (fastext-style) ───────────────────────── */

        .demo-nav {
            display: flex;
            gap: 1rem;
        }

            .demo-nav button {
                font-family: Teletext50, monospace;
                font-size: 16px;
                background: #000;
                border: 2px solid #333;
                padding: 0.4em 1em;
                cursor: pointer;
            }

        .nav-red {
            color: #ff0000;
        }

        .nav-green {
            color: #00ff00;
        }

        .nav-yellow {
            color: #ffff00;
        }

        .demo-nav button:hover {
            border-color: #888;
        }

        .demo-note {
            color: #888;
            font-family: sans-serif;
            font-size: 13px;
            max-width: 44ch;
            text-align: center;
        }