/* ============================================================
   MY ACCOUNT — purchase history on phones
   EDD's [purchase_history] table (ID, Date, Amount, Details, plus
   edd-invoices' Invoice column) is ~480px wide at its narrowest,
   and reset.css clips sideways overflow on html/body, so on a
   375px phone the Details and Invoice links were cut off and
   unreachable.

   EDD's markup can't be wrapped from outside (it is a template,
   and EDD core is not edited), so below 768px each order row is
   restacked as a card:

     #105368                 $24.00
     September 22, 2026
     View Details and Downloads
     View Invoice

   The column headings are visually hidden rather than removed:
   every cell's value says what it is on its own (#number, date,
   amount, link text), and they stay in the markup for screen
   readers.

   Unknown cells (another plugin hooking edd_order_history_row_*)
   default to a full-width line, so nothing added later is lost.

   Selectors carry the row class because edd-widgets' style.css
   sets the cell padding as `#edd_user_history td` with !important.

   The licence-keys table above it (uilib-licensing, Receipt.php)
   stays a table: "1 of 1" under Domains means nothing without its
   heading. It already sits in an overflow-x:auto wrapper, but a
   long domain name or product word held it ~30px wider than a
   phone, so it needed a sideways swipe. Below 768px its padding is
   tightened and the key and domain list may break mid-word, so it
   fits as well; the wrapper stays as the fallback for anything
   wider still (a very long single product word).
   ============================================================ */

@media (max-width: 767px) {
    #edd_user_history,
    #edd_user_history tbody {
        display: block;
        width: 100%;
        border: 0;
    }

    #edd_user_history thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #edd_user_history tbody .edd_purchase_row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        padding: 14px 16px;
        margin: 0 0 12px;
        border: 1px solid var(--u-line);
        border-radius: var(--u-radius-lg);
        background: var(--u-surface);
    }

    #edd_user_history .edd_purchase_row > td {
        display: block;
        grid-column: 1 / -1;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: none;
        text-align: left;
        overflow-wrap: anywhere;
    }

    #edd_user_history .edd_purchase_row > td.edd_purchase_id {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        color: var(--u-ink);
    }

    #edd_user_history .edd_purchase_row > td.edd_purchase_amount {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
        color: var(--u-ink);
        text-align: right;
    }

    #edd_user_history .edd_purchase_row > td.edd_purchase_date {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 14px;
        color: var(--u-muted);
    }

    #edd_user_history .edd_purchase_row > td.edd_purchase_details {
        grid-row: 3;
        padding-top: 10px !important;
    }

    #edd_user_history .edd_purchase_row > td.edd_invoice {
        grid-row: 4;
        padding-top: 4px !important;
    }

    /* edd-invoices prints an empty cell for orders with no invoice. */
    #edd_user_history .edd_purchase_row > td.edd_invoice:not(:has(a)) {
        display: none;
    }

    .ul-license-table th,
    .ul-license-table td {
        padding: 10px;
    }

    /* Only the key and the domain list may break mid-word; product
       names wrap between words. */
    .ul-license-table td > code,
    .ul-license-table td > span {
        overflow-wrap: anywhere;
    }
}