/*
 * My Page (/account overview, /account/dp history) and the sponsorship page (/donate). It builds on the
 * shared .tabs, .card, .btn, .data-table, .form-note and .notice-banner of site.css; the forms inside a box take the
 * form rules of account.css (.mypage-form). No inline styles anywhere: the CSP forbids them.
 */

/* ---- overview boxes ------------------------------------------------------------------------------------------------ */

.mypage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "basic account"
        "dp account";
    gap: 24px;
    align-items: start;
}

.mypage-box--basic { grid-area: basic; }

.mypage-box--account { grid-area: account; }

.mypage-box--dp { grid-area: dp; }

/* The account's own ban, above the boxes (the private member center only). */
.mypage-ban {
    margin: 0 0 24px;
    padding: 24px 32px;
    border-left: 4px solid var(--c-error);
}

.mypage-ban p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.mypage-box {
    min-width: 0;
    padding: 28px 32px 32px;
}

.mypage-box__title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d1d1d1;
    font-size: 20px;
    font-weight: 700;
}

.mypage-facts {
    display: grid;
    grid-template-columns: 9em 1fr;
    margin: 0 0 16px;
}

.mypage-facts dt,
.mypage-facts dd {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-rule-soft);
}

.mypage-facts dt {
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 700;
}

.mypage-facts dd {
    overflow-wrap: anywhere;
}

.mypage-zone {
    color: var(--c-muted);
    font-size: 13px;
}

.mypage-disclosure {
    margin-top: 16px;
}

.mypage-disclosure > summary {
    list-style: none;
}

.mypage-disclosure > summary::-webkit-details-marker {
    display: none;
}

.mypage-disclosure[open] > summary {
    margin-bottom: 12px;
}

.mypage-balance {
    margin: 0 0 8px;
}

.mypage-balance__label {
    display: block;
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 700;
}

.mypage-balance__value {
    font-size: 32px;
    font-weight: 700;
}

.mypage-balance__unit {
    margin-left: 6px;
    font-size: 16px;
    font-weight: 700;
}

.mypage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}

@media (max-width: 767.98px) {
    .mypage-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "basic"
            "account"
            "dp";
    }
}

@media (max-width: 575.98px) {
    .mypage-box {
        padding: 20px 18px 24px;
    }

    .mypage-facts {
        grid-template-columns: 7em 1fr;
    }
}

/* ---- DP history ---------------------------------------------------------------------------------------------------- */

/* The table scrolls inside its own box on narrow screens instead of widening the page. */
.dp-scroll {
    overflow-x: auto;
}

.dp-table td {
    white-space: nowrap;
}

.dp-table td.dp-table__content {
    min-width: 12em;
    white-space: normal;
}

/*
 * Qualified with .data-table td so they out-rank its text colour. Contrast on white: the debit red (#d93025) is
 * 4.8:1; the site's category blue (#2e8dde) is only 3.5:1, so credits use a darker blue (#1a6fc0, 5.2:1).
 */
.data-table td.dp-delta--credit {
    color: #1a6fc0;
}

.data-table td.dp-delta--debit {
    color: var(--c-error);
}

/*
 * Below 992px the six columns no longer fit (the table is about 820px wide), and a hidden DP change and balance
 * would be easy to miss. Each row then becomes a card of labelled lines; the labels come from the cells' data-label
 * (the header row stays for screen readers, visually hidden).
 */
@media (max-width: 991.98px) {
    .dp-scroll {
        overflow-x: visible;
    }

    .dp-table,
    .dp-table tbody,
    .dp-table tr,
    .dp-table td {
        display: block;
    }

    .dp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .dp-table tr.dp-row {
        margin: 0 0 12px;
        padding: 6px 16px;
        border: 1px solid var(--c-rule-soft);
        background: var(--c-card);
    }

    .dp-table td,
    .dp-table td.data-table__num {
        display: flex;
        gap: 16px;
        align-items: baseline;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--c-rule-soft);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dp-table td:last-child {
        border-bottom: 0;
    }

    .dp-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--c-muted);
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .dp-table td.dp-table__content {
        min-width: 0;
    }
}

.dp-empty {
    padding: 40px 0;
    color: var(--c-muted);
    text-align: center;
}

.dp-pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 40px 0 0;
}

/* ---- sponsorship page ---------------------------------------------------------------------------------------------- */

.sponsor-card {
    padding: 32px 32px 36px;
}

.sponsor-closed {
    margin: 0;
    font-size: 18px;
    text-align: center;
}