/* Strong's verse-study presentation.
   Desktop keeps the traditional table; narrow screens use labeled rows so
   pronunciation, original text, Strong's number, and meaning remain readable. */

#words-modal {
    box-sizing: border-box;
}

#words-modal #modalText {
    width: 100%;
    max-width: 100%;
}

#words-modal #modalText table {
    width: 100%;
    max-width: 100%;
}

/* Keep the desktop Strong's study panel fully inside the viewport. */
@media (min-width: 901px) {
    #words-modal {
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
        padding: 24px !important;
        box-sizing: border-box !important;
    }

    #words-modal .modal-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: min(1280px, calc(100vw - 48px)) !important;
        max-width: calc(100vw - 48px) !important;
        height: auto !important;
        max-height: calc(100vh - 48px) !important;
        margin: 0 auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #words-modal .close-btn-top-right {
        position: sticky !important;
        top: 0 !important;
        float: right;
        z-index: 20;
    }

    #words-modal #modalText th {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #words-modal #modalText th:nth-child(2),
    #words-modal #modalText td:nth-child(2) {
        min-width: 140px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 900px) {
    #words-modal .modal-content {
        overflow-x: hidden !important;
    }

    #words-modal #modalText table,
    #words-modal #modalText tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #words-modal #modalText tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid var(--reader-border, #3f3f46);
    }

    #words-modal #modalText tr:has(> th) {
        display: none !important;
    }

    #words-modal #modalText th {
        display: none !important;
    }

    #words-modal #modalText td {
        display: grid !important;
        grid-template-columns: 124px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    #words-modal #modalText td::before {
        color: var(--reader-muted, #c7c7c7);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-size: .78em !important;
        font-weight: 700;
        line-height: 1.35;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #words-modal #modalText td:nth-child(1)::before { content: "Word"; }
    #words-modal #modalText td:nth-child(2)::before { content: "Pronunciation"; }
    #words-modal #modalText td:nth-child(3)::before { content: "Original"; }
    #words-modal #modalText td:nth-child(4)::before { content: "Strong's"; }
    #words-modal #modalText td:nth-child(5)::before { content: "Meaning"; }

    #words-modal #modalText tr:first-of-type {
        padding-top: 4px !important;
    }

    #words-modal #modalText tr:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 420px) {
    #words-modal #modalText td {
        grid-template-columns: 124px minmax(0, 1fr) !important;
        gap: 10px !important;
    }
}