/* =========================================
           TfL colours
           ========================================= */

        :root {
            --tfl-bakerloo: #AE6118;
            --tfl-central: #E41F1F;
            --tfl-circle: #F8D42D;
            --tfl-district: #007229;
            --tfl-hammersmith-city: #E899A8;
            --tfl-jubilee: #686E72;
            --tfl-metropolitan: #893267;
            --tfl-northern: #000000;
            --tfl-piccadilly: #0450A1;
            --tfl-victoria: #009FE0;
            --tfl-waterloo-city: #70C3CE;

            --tfl-elizabeth: #772CE8;
            --tfl-dlr: #00BBB4;
            --tfl-tram: #66CC33;

            --tfl-overground-lioness: #FFCC00;
            --tfl-overground-mildmay: #0066CC;
            --tfl-overground-windrush: #E1251B;
            --tfl-overground-weaver: #7B1E3A;
            --tfl-overground-suffragette: #00843D;
            --tfl-overground-liberty: #6D6E71;
        }


        /* =========================================
           Terminal theme
           ========================================= */

        body.terminal {
--background-color: #191e2c;
            --font-color: #d6d6d6;
            --primary-color: #5764d9;
            --secondary-color: #777;
            --code-bg-color: #111;
            --block-background-color: #111;

            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
        }


        /* =========================================
           Header
           ========================================= */

        .site-header {
            margin-bottom: 2rem;
        }

        .terminal-alert {
            margin-bottom: 1.5rem;
        }

        .ascii-wrapper {
            width: 100%;
            overflow: hidden;
        }

        .ascii-art {
            color: #535783;
            white-space: pre;
            font-family: monospace;
            line-height: 1;
            font-size: clamp(5px, 1.15vw, 14px);
            width: max-content;
        }


        /* =========================================
           System information
           ========================================= */

        .system-info {
            display: flex;
            justify-content: space-between;
            gap: 1rem;

            margin: 1.5rem 0;

            padding: 0.5rem 0;

            border-top: 1px dashed #444;
            border-bottom: 1px dashed #444;

            color: #777;
            font-size: 0.85rem;
        }


        /* =========================================
           Service sections
           ========================================= */

        .status-section {
            margin: 2rem 0;
        }

        .status-section h2 {
            color: #D97757;
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }

        .status-section h2::before {
            content: "[ ";
        }

        .status-section h2::after {
            content: " ]";
        }


        /* =========================================
           Status list
           ========================================= */

        .status-list {
            border-top: 1px dashed #333;
        }

        .status-row {
            display: flex;
            align-items: baseline;

            gap: 0.5rem;

            margin: 0;
            padding: 0.55rem 0;

            border-bottom: 1px dashed #333;
        }

        .line-name {
            font-weight: bold;
            white-space: nowrap;
        }

        .status-text {
            color: #ccc;
        }


        /* =========================================
           TfL line colours
           ========================================= */

        .status-bakerloo {
            background-color: var(--tfl-bakerloo);
        }

        .status-central {
            background-color: var(--tfl-central);
        }

        .status-circle {
            background-color: var(--tfl-circle);
        }

        .status-district {
            background-color: var(--tfl-district);
        }

        .status-hammersmith-city {
            background-color: var(--tfl-hammersmith-city);
        }

        .status-jubilee {
            background-color: var(--tfl-jubilee);
        }

        .status-metropolitan {
            background-color: var(--tfl-metropolitan);
        }

        .status-northern {
            background-color: #aaa;
        }

        .status-piccadilly {
            background-color: var(--tfl-piccadilly);
        }

        .status-victoria {
            background-color: var(--tfl-victoria);
        }

        .status-waterloo-city {
            background-color: var(--tfl-waterloo-city);
        }

        .status-elizabeth {
            background-color: var(--tfl-elizabeth);
        }

        .status-dlr {
            background-color: var(--tfl-dlr);
        }

        .status-tram {
            background-color: var(--tfl-tram);
        }

        .status-lioness {
            background-color: var(--tfl-overground-lioness);
        }

        .status-mildmay {
            background-color: var(--tfl-overground-mildmay);
        }

        .status-windrush {
            background-color: var(--tfl-overground-windrush);
        }

        .status-weaver {
            background-color: var(--tfl-overground-weaver);
        }

        .status-suffragette {
            background-color: var(--tfl-overground-suffragette);
        }

        .status-liberty {
            background-color: var(--tfl-overground-liberty);
        }


        /* =========================================
           Status indicators
           ========================================= */

        .good {
            color: #6BCB77;
        }

        .minor {
            color: #F8D42D;
        }

        .severe,
        .suspended {
            color: #E41F1F;
        }


        /* =========================================
           Mobile
           ========================================= */

        @media (max-width: 600px) {

            body.terminal {
                padding: 12px;
            }

            .ascii-art {
                font-size: 5px;
            }

            .system-info {
                flex-direction: column;
                gap: 0.25rem;
            }

            .status-row {
                display: block;
                padding: 0.7rem 0;
            }

            .line-name {
                display: inline-block;
                margin-right: 0.25rem;
            }
        }

        #terminal-output::after {
    content: "█";
    color: #D97757;
    animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
    50% {
        opacity: 0;
    }
}

.typing-complete::after {
    display: none;
}

.status-text {
    font-weight: bold;
}

.status-text.good {
    color: #6BCB77;
}

.status-text.minor {
    color: #F8D42D;
}

.status-text.severe,
.status-text.suspended {
    color: #FF5555;
}

.status-text.unknown {
    color: #888;
}

/* ==========================================
   TfL STATUS CARDS
   ========================================== */

.terminal-card.tfl-card {
    --line-colour: #666;
    --line-text: #fff;

    border-color: var(--line-colour);
}


/* Line header */

.terminal-card.tfl-card > header {
    background: var(--line-colour);
    color: var(--line-text);
}


/* Status text */

.terminal-card.tfl-card .status-label {
    font-weight: bold;
}


/* ==========================================
   LINE COLOURS
   ========================================== */

.tfl-card.bakerloo {
    --line-colour: var(--tfl-bakerloo);
    --line-text: #fff;
}

.tfl-card.central {
    --line-colour: var(--tfl-central);
    --line-text: #fff;
}

.tfl-card.circle {
    --line-colour: var(--tfl-circle);
    --line-text: #113b92;
}

.tfl-card.district {
    --line-colour: var(--tfl-district);
    --line-text: #fff;
}

.tfl-card.hammersmith-city {
    --line-colour: var(--tfl-hammersmith-city);
    --line-text: #113b92;
}

.tfl-card.jubilee {
    --line-colour: var(--tfl-jubilee);
    --line-text: #fff;
}

.tfl-card.metropolitan {
    --line-colour: var(--tfl-metropolitan);
    --line-text: #fff;
}

.tfl-card.northern {
    --line-colour: var(--tfl-northern);
    --line-text: #fff;
}

.tfl-card.piccadilly {
    --line-colour: var(--tfl-piccadilly);
    --line-text: #fff;
}

.tfl-card.victoria {
    --line-colour: var(--tfl-victoria);
    --line-text: #fff;
}

.tfl-card.waterloo-city {
    --line-colour: var(--tfl-waterloo-city);
    --line-text: #113b92;
}

.tfl-card.elizabeth {
    --line-colour: var(--tfl-elizabeth);
    --line-text: #fff;
}

.tfl-card.dlr {
    --line-colour: var(--tfl-dlr);
    --line-text: #fff;
}

.tfl-card.tram {
    --line-colour: var(--tfl-tram);
    --line-text: #113b92;
}

.tfl-card.lioness {
    --line-colour: var(--tfl-overground-lioness);
    --line-text: #113b92;
}

.tfl-card.mildmay {
    --line-colour: var(--tfl-overground-mildmay);
    --line-text: #fff;
}

.tfl-card.windrush {
    --line-colour: var(--tfl-overground-windrush);
    --line-text: #fff;
}

.tfl-card.weaver {
    --line-colour: var(--tfl-overground-weaver);
    --line-text: #fff;
}

.tfl-card.suffragette {
    --line-colour: var(--tfl-overground-suffragette);
    --line-text: #fff;
}

.tfl-card.liberty {
    --line-colour: var(--tfl-overground-liberty);
    --line-text: #fff;
}

.status-static {
    color: inherit;
    font-weight: normal;
}

.terminal-card.tfl-card::before {
    background-color: var(--line-colour);
}