.ios-guide {
    container-type: inline-size;
}

.ios-guide table {
    width: 100%;
    overflow-wrap: normal;
}

/* Give labels their natural width instead of squeezing them into a narrow column. */
.ios-guide th:first-child,
.ios-guide td:first-child {
    width: 1%;
    white-space: nowrap;
}

.ios-guide .table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

/* Stack two-column references when the guide itself has limited space. */
@container (max-width: 36rem) {
    .ios-guide table:not(:has(th:nth-child(3))) {
        display: block;
    }

    .ios-guide table:not(:has(th:nth-child(3))) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ios-guide table:not(:has(th:nth-child(3))) tbody,
    .ios-guide table:not(:has(th:nth-child(3))) tr,
    .ios-guide table:not(:has(th:nth-child(3))) td {
        display: block;
    }

    .ios-guide table:not(:has(th:nth-child(3))) tr {
        margin-bottom: 1rem;
    }

    .ios-guide table:not(:has(th:nth-child(3))) td {
        width: auto;
        padding: 0;
        white-space: normal;
    }

    .ios-guide table:not(:has(th:nth-child(3))) td:first-child {
        margin-bottom: .25rem;
    }
}
}