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

body {
    background-color: #FF5300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.logo {
    width: 40px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.CTA {
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    background-color: #121212;
    color: white;
    padding: 12px 24px;
    margin-top: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.CTA:hover {
    background-color: #333;
}

.stationContents {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 96px 16px 32px;
}

.announcement {
    color: white;
    font-weight: 900;
    font-size: 16px;
}

.stationResult {
    display: flex;
    align-items: flex-start;
    text-align: left;
    flex-direction: column;
    color: #121212;
    margin: 8px 0px 0px 0px;
    font-size: 16px;
}

#stationName {
    background-color: #121212;
    border-radius: 4px;
    color: white;
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 500;
    width: 100%;
    padding: 16px;
    margin: 24px 0 8px;
    display: flex;
    min-height: 80px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#stationName::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: white;
}

#stationName .trains {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    width: 100%; 
}

.route {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #008EB7;
}

.route[data-route="1"], .route[data-route="2"], .route[data-route="3"] { background-color: #EE352E; }
.route[data-route="4"], .route[data-route="5"], .route[data-route="6"] { background-color: #00933C; }
.route[data-route="7"] { background-color: #B933AD; }
.route[data-route="A"], .route[data-route="C"], .route[data-route="E"] { background-color: #0039A6; }
.route[data-route="B"], .route[data-route="D"], .route[data-route="F"], .route[data-route="M"] { background-color: #FF6319; }
.route[data-route="G"] { background-color: #6CBE45; }
.route[data-route="J"], .route[data-route="Z"] { background-color: #996633; }
.route[data-route="L"] { background-color: #A7A9AC; }
.route[data-route="N"], .route[data-route="Q"], .route[data-route="R"], .route[data-route="W"] { background-color: #FCCC0A; color: black; }
.route[data-route="S"] { background-color: #808183; }

.context {
    background-color: white;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
    gap: 16px;
    width: 400px;
    margin: 8px;
    padding: 24px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 448px;   /* 400px content + 24px padding each side */
    margin: 8px 0;
}

#doorsCanvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 5;
}

#structureImg {
    width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 4px;
}

.contextText {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    margin: 0px;
}

.contextText p {
    margin: 0;
}

#blurb {
    width: auto;
    margin-top: 16px;
    font-style: italic;
    text-align: left;
    font-weight: lighter;
}

#accessibility {
    display: flex;
    align-items: center;
    gap: 6px;
}

.adaIcon {
    width: 20px;
    height: 20px;
}

@media (max-width: 480px) {
    header {
        position: static;       /* stops overlapping the card */
        padding: 16px;
    }

    .logo {
        width: 48px;
        height: auto;
    }

    .announcement {
        font-size: 14px;
    }

    .stationContents {
        padding-top: 8px;       /* the header no longer needs clearing */
        min-height: auto;
    }

    #stationName {
        font-size: 20px;
    }

    .CTA {
        width: 100%;
        max-width: 448px;
        padding: 16px;          /* bigger tap target */
    }
}