.invisible
{
    visibility: hidden;
}

#mainContents
{
    white-space: nowrap;

    @media screen and (max-width: 740px)
    {
        article .content
        {
            padding: 0 10px;
        }
    }
}

#outline
{
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 20px;

    section
    {
        margin-right: 30px;
        ol
        {
            margin-left: 10px;
            padding-left: 28px;
            border-left: solid 3px color-mix(in srgb, var(--c-black), transparent 88%);
            /* font-size: large; */

            li
            {
                margin: 1lh 0;
            }
        }
    }

    @media screen and (max-width: 1500px)
    {
        grid-template-columns: repeat(2, auto);

        section:nth-child(1)
        {
            grid-area: 1 / 1 / 2 / 2;
        }

        section:nth-child(2)
        {
            grid-area: 2 / 1 / 3 / 2;
        }

        section:nth-child(3)
        {
            grid-area: 1 / 2 / 4 / 4;
        }
    }

    @media screen and (max-width: 925px)
    {
        grid-gap: 0px;

        section:nth-child(1)
        {
            grid-area: 1 / 1 / 2 / 2;
        }

        section:nth-child(2)
        {
            grid-area: 1 / 2 / 2 / 3;
        }

        section:nth-child(3)
        {
            grid-area: 2 / 1 / 3 / 3;
        }
    }

    @media screen and (max-width: 636px)
    {
        display: block;

        section
        {
            width: fit-content;
        }
    }
}

#history
{
    --border: 1px solid color-mix(in srgb, var(--c-black), var(--c-background) 83%);

    /* font-size: large; */
    grid-template-columns: repeat(3, max-content) auto;
    min-width: 0;
    max-width: 100%;

    .header, .years, .month, .event
    {
        border-top: var(--border);
        border-left: var(--border);
        padding: 20px 8px;
        min-width: 0;
    }

    .monthly > span:not(.month)
    {
        border-right: var(--border);
    }

    > .gridItem:last-child > span
    {
        border-bottom: var(--border);
    }

    > .gridItem:last-child .gridItem > span
    {
        border-bottom: var(--border);
    }

    .gridItem:not(.monthly):nth-child(odd)
    {
        .header, .years, .month, .event
        {
            background-color: color-mix(in srgb, var(--c-black), transparent 92%);
        }
    }

    /* span.years
    {
        padding: 20px 0;
    }

    .monthly *:nth-child(1), .monthly *:nth-child(2)
    {
        padding-top: 20px;
    }

    .monthly *:nth-child(-1), .monthly *:nth-child(-2)
    {
        padding-bottom: 20px;
    } */

    [rows]
    {
        grid-row: span attr(rows type(<integer>), 1);
    }

    @media screen and (max-width: 625px)
    {
        /* font-size: medium; */
    }

    @media screen and (max-width: 562px)
    {
        font-size: smaller;

        .header, .years, .month, .event
        {
            padding: 10px 4px;
        }
    }

    @media screen and (max-width: 448px)
    {
        *
        {
            word-break: keep-all;
            overflow-wrap: anywhere;
            white-space: normal;
        }
    }
}

#orgChart
{
    width: fit-content;
    max-width: 100%;
    display: flex;

    a
    {
        display: contents;
    }

    img
    {
        width: 100%;
        border-radius: 3px;
    }
}

#access
{
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 10px 0;

    button
    {
        display: flex;
        outline: none;
        font-family: inherit;
        /* text-box-edge: cap alphabetic;
        text-box-trim: trim-both; */
        padding: 4px;
        font-size: initial;

        .icon
        {
            width: 24px;
            height: 24px;
            min-width: 24px;
            min-height: 24px;
            margin-right: 8px;
            background-color: var(--c-black);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: 100%;
        }

        .icon.map
        {
            mask-image: var(--icon-map);
        }
    }

    button.hidden
    {
        display: none;
    }

    #map
    {
        width: 100%;
        height: 100%;
        outline-style: none;
        border-radius: 5px;
        margin-top: 1lh;

        .leaflet-overlay-pane g
        {
            filter: drop-shadow(0 3px 3px #88abff);

            path:first-child
            {
                stroke-opacity: 0;
            }
        }

        .leaflet-pane.leaflet-tooltip-pane
        {
            .leaflet-tooltip
            {
                font-family: "Shippori Mincho", serif;
                font-weight: bold;
                font-size: initial;
            }
        }
    }

    #facilities
    {
        button
        {
            --btnColor: color-mix(in srgb, var(--c-background), var(--c-black) 10%);
            background-color: var(--btnColor);
            border-radius: 100px;
            padding: 6px 10px;
            border: solid 4px var(--c-background);
            box-shadow: 0 0 0 3px var(--btnColor);
            margin: 5px;
            font-weight: bold;
        }

        button:focus
        {
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
        }

        button:hover
        {
            --btnColor: color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            background-color: var(--btnColor);
            box-shadow: 0 0 0 3px var(--btnColor);
        }

        button:active
        {
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
        }

        button.active
        {
            --btnColor: color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
            color: var(--c-background);
        }

        @media screen and (max-width: 369px)
        {
            button
            {
                width: 100%;
            }
        }
    }

    #routes
    {
        button
        {
            background-color: transparent;
            border: none;

            .icon
            {
                opacity: 0.2;
            }

            .flexText
            {
                box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--c-black), transparent 90%);
            }
        }

        button:focus, button:hover
        {
            .icon
            {
                background-color: color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
                opacity: 1;
            }

            .flexText
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            }
        }

        button:active
        {
            .icon
            {
                background-color: var(--c-logo);
                opacity: 1;
            }

            .flexText
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 55%);
            }
        }

        button.active
        {
            .icon
            {
                background-color: var(--c-logo);
                opacity: 1;
            }

            .flexText
            {
                box-shadow: none;
                background-color: color-mix(in srgb, var(--c-background), var(--c-logo) 22%);
            }
        }
    }

    #routesSteps
    {
        grid-template-columns: 1fr;
        width: fit-content;

        button
        {
            background-color: transparent;
            border: none;

            .number
            {
                --btnColor: color-mix(in srgb, var(--c-background), var(--c-black) 10%);
                display: flex;
                width: 35px;
                min-width: 35px;
                height: 35px;
                margin-right: 12px;
                border-radius: 100px;
                background-color: var(--btnColor);
                justify-content: center;
                align-items: center;
                border: solid 4px var(--c-background);
                box-shadow: 0 0 0 3px var(--btnColor);

                span
                {
                    text-box-edge: cap alphabetic;
                    text-box-trim: trim-both;
                }
            }

            .flexText
            {
                align-items: center;
                width: 100%;

                span
                {
                    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--c-black), transparent 90%);
                }

                span:last-child
                {
                    flex-grow: 1;
                    text-align: left;
                }
            }
        }

        button:focus
        {
            .number
            {
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            }

            .flexText span
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            }
        }

        button:hover
        {
            .number
            {
                background-color: color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            }

            .flexText span
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 35%);
            }
        }

        button:active
        {
            .number
            {
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
            }

            .flexText span
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 55%);
            }
        }

        button.active
        {
            .number
            {
                color: white;
                background-color: color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-background), var(--c-logo) 70%);
            }

            .flexText span
            {
                box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--c-background), var(--c-logo) 22%);
            }
        }
    }
}

.divider
{
    display: flex;
    width: 100%;
    height: fit-content;
    margin: 12px;
    opacity: 0.3;

    .line, .arrow
    {
        height: 15px;
        background-color: var(--c-black);
    }

    .line
    {
        width: 100%;
        mask-image: url(divider-line.png);
        mask-repeat: repeat-x;
    }

    .arrow
    {
        width: 39px;
        min-width: 39px;
        mask-image: url(divider.png);
        mask-repeat: no-repeat;
        mask-position: center;
    }
}

.divider.hidden
{
    display: none;
}

.grid.basic
{
    align-items: center;
    grid-template-columns: max-content auto;
    grid-row-gap: 4px;
    min-width: 0;

    .label
    {
        padding: 8px;
        margin-right: 5px;
        height: 100%;
        background-color: color-mix(in srgb, var(--c-black), transparent 94%);
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .text
    {
        margin-right: 12px;
        width: fit-content;
    }

    .hFull
    {
        padding-top: 8px;
    }
}