/*
 * TML Knowledge Map reader UI.
 * Lightweight: CSS only, no JavaScript.
 */

.tml-km {
    margin: 0;
}

.tml-km--top {
    padding: 0 0 28px;
}

.tml-km__box {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 20px;
    border: 1px solid rgba(20, 45, 70, 0.14);
    border-radius: 12px;
    background: rgba(245, 248, 251, 0.72);
}

.tml-km__eyebrow,
.tml-km__head > p {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.tml-km__box h2,
.tml-km__head h2 {
    margin: 0;
}

.tml-km__box h2 {
    font-size: 19px;
}

.tml-km__quick-list {
    display: grid;
    gap: 9px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.tml-km__quick-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tml-km__quick-list a {
    font-weight: 650;
    text-decoration: none;
}

.tml-km__quick-list a:hover,
.tml-km__quick-list a:focus {
    text-decoration: underline;
}

.tml-km__label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.72;
}

.tml-km--bottom {
    padding: 42px 0;
    border-top: 1px solid rgba(20, 45, 70, 0.10);
}

.tml-km--bottom .tml-single-wide {
    width: min(
        calc(100% - 40px),
        900px
    );
}

.tml-km__head {
    margin-bottom: 22px;
}

.tml-km__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.tml-km__columns > :only-child {
    grid-column: 1 / -1;
}

.tml-km__group {
    padding: 20px;
    border: 1px solid rgba(20, 45, 70, 0.12);
    border-radius: 12px;
}

.tml-km__group h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.tml-km__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tml-km__group li + li {
    margin-top: 11px;
}

.tml-km__group a {
    font-weight: 650;
    text-decoration: none;
}

.tml-km__group a:hover,
.tml-km__group a:focus {
    text-decoration: underline;
}

.tml-km__badge,
.tml-km__meta {
    display: inline-block;
    margin-left: 7px;
    font-size: 12px;
    opacity: 0.68;
}

.tml-km__badge {
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.tml-km__exam-list {
    display: grid;
    gap: 12px;
}

.tml-km__exam-item {
    padding: 17px 19px;
    border: 1px solid rgba(20, 45, 70, 0.12);
    border-radius: 10px;
}

.tml-km__exam-item p {
    margin: 0 0 5px;
    font-size: 12px;
    opacity: 0.68;
}

.tml-km__exam-item h3 {
    margin: 0;
    font-size: 17px;
}

.tml-km__exam-item a {
    text-decoration: none;
}

.tml-km__exam-item a:hover,
.tml-km__exam-item a:focus {
    text-decoration: underline;
}

@media (max-width: 720px) {

    .tml-km--top {
        padding-bottom: 22px;
    }

    .tml-km__box {
        padding: 16px;
    }

    .tml-km__quick-list li {
        display: block;
    }

    .tml-km__label {
        display: block;
        margin-bottom: 3px;
    }

    .tml-km--bottom {
        padding: 34px 0;
    }

    .tml-km--bottom .tml-single-wide {
        width: min(
            calc(100% - 28px),
            900px
        );
    }

    .tml-km__columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}