@layer components {

    .sub {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-5);
        padding-block: var(--s-5);
        border-bottom: 1px solid var(--c-line);
    }

    .sub__thumb {
        width: 88px;
        height: 88px;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .sub__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sub__body {
        display: grid;
        gap: 2px;
        font-size: var(--t-sm);
    }

    .sub__name {
        font-family: var(--f-display);
        font-size: var(--t-lg);
    }

    .sub__meta {
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

    .sub__next strong {
        font-weight: 500;
    }

    .sub__side {
        display: grid;
        justify-items: end;
        gap: var(--s-3);
    }

    @media (max-width: 599px) {
        .sub {
            grid-template-columns: 64px minmax(0, 1fr);
        }

        .sub__thumb {
            width: 64px;
            height: 64px;
        }

        .sub__side {
            grid-column: 1 / -1;
            grid-auto-flow: column;
            justify-content: space-between;
            justify-items: start;
        }
    }

    .sub__actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-2) var(--s-3);
    }

    .sub__freq {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        margin-right: auto;
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .sub__freq:has(+ .sub__freq) {
        margin-right: var(--s-4);
    }

    .sub__select {
        min-height: 36px;
        padding: 0 var(--s-6) 0 var(--s-3);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: var(--c-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
        color: var(--c-ink);
        cursor: pointer;
        appearance: none;
    }

    .sub__note {
        grid-column: 1 / -1;
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .sub__note:empty {
        display: none;
    }

    .sub__history {
        grid-column: 1 / -1;
        font-size: var(--t-sm);
    }

    .sub__history-title {
        cursor: pointer;
        color: var(--c-muted);
    }

    .sub__history-list {
        display: grid;
        gap: var(--s-1);
        margin-top: var(--s-2);
    }

    .sub__history-row {
        display: flex;
        gap: var(--s-3);
    }

    .sub__history-date {
        flex: none;
        min-width: 11ch;
        white-space: nowrap;
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

}

@layer components {

    .addresses {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--s-4);
    }

    .address {
        display: grid;
        align-content: start;
        gap: var(--s-2);
        padding: var(--s-5);
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background: var(--c-surface);
        font-size: var(--t-sm);
    }

    .address__tag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        font-weight: 500;
    }

    .address__default {
        padding: 2px 8px;
        border-radius: var(--r-pill);
        background: var(--c-tile);
        font-size: var(--t-2xs);
        font-weight: 500;
    }

    .address__lines {
        font-style: normal;
        white-space: pre-line;
        color: var(--c-muted);
    }

}

@layer components {

    .rewards-card {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--s-6) var(--s-8);
        padding: var(--s-7);
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .rewards-card__main {
        display: grid;
        justify-items: start;
        gap: var(--s-3);
    }

    .rewards-card__n {
        font-size: var(--t-2xl);
        font-variant-numeric: lining-nums;
    }

    .rewards-card__bar {
        display: block;
        width: 100%;
        max-width: 420px;
        height: 4px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--c-line-strong);
        overflow: hidden;
        appearance: none;
    }

    .rewards-card__bar::-webkit-progress-bar {
        background: var(--c-line-strong);
    }

    .rewards-card__bar::-webkit-progress-value {
        background: var(--c-accent);
    }

    .rewards-card__bar::-moz-progress-bar {
        background: var(--c-accent);
    }

    .rewards-card__next {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .rewards-card__tiers {
        display: grid;
        align-content: center;
        border-top: 1px solid var(--c-line-strong);
    }

    .rewards-card__tier {
        display: flex;
        justify-content: space-between;
        gap: var(--s-4);
        padding-block: var(--s-3);
        border-bottom: 1px solid var(--c-line-strong);
        font-size: var(--t-sm);
        font-variant-numeric: tabular-nums;
    }

    .rewards-card__tier[aria-current="true"] {
        font-weight: 600;
    }

    @media (max-width: 767px) {
        .rewards-card {
            grid-template-columns: minmax(0, 1fr);
            padding: var(--s-5);
        }
    }

}

@layer components {

    .ledger {
        display: grid;
        border-top: 1px solid var(--c-line);
    }

    .ledger__row {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) auto;
        gap: var(--s-4);
        padding-block: var(--s-3);
        border-bottom: 1px solid var(--c-line);
        font-size: var(--t-sm);
        font-variant-numeric: tabular-nums;
    }

    .ledger__date {
        color: var(--c-muted);
    }

    .ledger__n {
        font-weight: 500;
    }

}