html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.page {
    flex: 1 0 auto;
}

form {

    margin: 1rem auto;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgb(14 30 37 / 10%);
    box-shadow: 0 1px 15px rgb(14 30 37 / 30%);
}

form label {
    margin: 0 0.5rem 0 0;
    color: #222;
    font-weight: 600;
    white-space: nowrap;
}

input[type="text"] {
    flex: 1 1 auto;
    font-size: 1.1rem;
    min-width: 0;
    height: 3rem;
    padding: 0 1rem;
    border-radius: .5rem;
    border: 1px solid rgb(0 0 0 / 10%);
    background: #bbb;
    transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
    box-shadow: none;
}

input[type="text"]:focus {
    outline: none;
    box-shadow: 0 8px 24px rgb(0 122 255 / 12%);
    background: #bbb;
}

button#runAudit {
    height: 3rem;
    padding: 0 1rem;
    border-radius: .5rem;
    border: none;
    color: #fff;
    background: linear-gradient(180deg, #8262d3 0%, #260a6e 100%);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgb(255 90 95 / 10%);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

button#runAudit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgb(255 90 95 / 20%);
    opacity: 0.98;
}


/* Stack inputs on small screens */
@media (max-width: 520px) {
    form {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem;
    }

    form label {
        align-self: flex-start;
        padding-left: 6px;
    }

    input[type="text"],
    button#runAudit {
        width: 80%;
    }
}

#report {
    margin: 1rem;

    & h3 {
        margin: 1rem 0 0 0;
    }

    & .url {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-gap: 0.5rem;
        background-color: #eee;
        font-size: smaller;

        & span:nth-of-type(2n-1) {
            text-align: right;
        }
    }
}

#message {
    width: fit-content;
    display: none;
    margin: 0 auto;
    padding: .25rem;
}

.lineitem {
    margin: 0.5rem 0;
    display: grid;
    grid-template-columns: 125px 35px 1fr;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 1rem 0;
    background-color: #eee;
}

.label {
    border: none;
    padding: 0.35rem 0.75rem;
    background-color: #000;
    color: #fff;
    font-size: smaller;
    font-weight: 700;
    border-radius: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* right-align content inside the cell */
    text-align: right;
    width: 100%;
    /* fill available cell width */
    height: 100%;
    /* fill available cell height */
    box-sizing: border-box;
}

.mark {
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.standard {
    justify-content: left;
    font-size: smaller;
    padding: 0.5rem 1rem;

    & p {
        margin: 0;
    }
}

.colhead {
    background-color: #000;
    color: #fff;
    font-weight: 700;
    font-size: larger;
    text-align: center;
}

dialog .close-button {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
}

dialog>* {
    padding: .25rem;
}

dialog::backdrop {
    background: rgb(0 0 0 / 40%);
}

.link-list {
    margin: 0 0 0 25px;
    padding: 0;

    & li {
        margin: 0;
    }
}

.grid-list {
    margin-top: .25rem;
    display: grid;
    grid-template-columns: 1fr 90px 1fr;


    & div {
        padding: .5rem;
        border: 1px solid rgb(0 0 0 / 10%);
        border-top: none;
    }

}

.linkslayout {
    grid-template-columns: 200px 1fr 60px;
}

.title {
    background-color: #000;
    color: #fff;
    text-align: center;
    font-weight: 700;
}

.grid-item {
    background-color: #fff;
}

.anchors {
    grid-template-columns: 1fr 2fr;
    background-color: #fff;

    &> :nth-child(4n + 3),
    > :nth-child(4n + 4) {
        background-color: #eee;
        padding: .5rem;
    }
}

.twocolumns {
    grid-column: 2 / 4;
}

.resFlex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    & span {
        width: 150px;
        margin: 0.15rem;
        border: 1px solid rgb(0 0 0 / 10%);
        padding: .5rem;
        font-weight: 700;
        ;
    }
}

details {
    margin: 0;
    background-color: #fff;

    & summary {
        cursor: pointer;
        font-weight: 700;
    }

    & ul,
    li {
        margin: 0;
    }

    ;
}



/* auto margin to push it to bottom in the flex column */
footer {
    margin-top: auto;
    background-color: var(--byuiblue);
    color: #fff;
}