/* Keep the public key form balanced without scaling text or clipping content. */
.mode-redeem .redeem-stage,
.mode-redeem .redeem-card,
.mode-redeem #redeem-form > *,
.mode-redeem .details > * {
    min-width: 0;
}

@media (min-width: 760px) {
    body.mode-redeem,
    body.mode-redeem.redeem-quantity-layout {
        height: auto;
        min-height: 100dvh;
        padding: 12px 20px;
        overflow: auto;
        align-items: center;
    }

    .mode-redeem .redeem-stage {
        width: min(100%, 1120px);
        flex: 0 1 1120px;
    }

    .mode-redeem .redeem-card {
        max-width: 1120px;
        padding: 20px 26px;
    }

    .mode-redeem .redeem-card form#redeem-form {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: 12px 22px;
        align-items: start;
    }

    .mode-redeem .redeem-card form#redeem-form > .field.order-key-field {
        grid-column: 1;
        grid-row: 1;
    }

    .mode-redeem .redeem-card form#redeem-form > .field.delivery-location-field {
        grid-column: 1;
        grid-row: 2 / 5;
    }

    .mode-redeem .redeem-card form#redeem-form > .details {
        grid-column: 2;
        grid-row: 1 / 3;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .mode-redeem #redeem-form > .details h2,
    .mode-redeem #redeem-form .redeem-note-field {
        grid-column: 1 / -1;
    }

    .mode-redeem .redeem-card form#redeem-form > .confirm {
        grid-column: 2;
        grid-row: 3;
    }

    .mode-redeem .redeem-card form#redeem-form > .submit {
        grid-column: 2;
        grid-row: 4;
    }

    .mode-redeem .redeem-location-list {
        max-height: clamp(160px, 31dvh, 360px);
        overflow-y: auto;
        scrollbar-gutter: stable;
        padding: 2px;
        overscroll-behavior-y: contain;
    }

    .mode-redeem.redeem-many-locations .redeem-location-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mode-redeem .public-announcements {
        max-height: min(120px, 16dvh);
        margin-bottom: 12px;
    }

    .mode-redeem .subtitle { margin-bottom: 12px; }
    .mode-redeem .redeem-topbar { margin-bottom: 8px; }
    .mode-redeem .redeem-location-help,
    .mode-redeem .redeem-note-help { overflow-wrap: anywhere; }
}

@media (min-width: 760px) and (max-height: 800px) {
    body.mode-redeem.redeem-quantity-layout { padding-block: 8px; }
    .mode-redeem .redeem-card { padding: 14px 22px; }
    .mode-redeem .brand-mark { width: 40px; height: 40px; font-size: 14px; }
    .mode-redeem .title { font-size: 22px; }
    .mode-redeem .subtitle { margin-bottom: 8px; }
    .mode-redeem .redeem-topbar { margin-bottom: 4px; }
    .mode-redeem .mode-tabs { margin-bottom: 10px; }
    .mode-redeem .mode-tab { padding-block: 7px; }
    .mode-redeem .redeem-card input,
    .mode-redeem .redeem-card textarea { padding-block: 8px; }
    .mode-redeem .redeem-card textarea { min-height: 58px; }
    .mode-redeem .redeem-card form#redeem-form > .details { padding: 10px; gap: 8px; }
    .mode-redeem .redeem-card form#redeem-form > .confirm { padding: 8px 10px; }
    .mode-redeem .redeem-card form#redeem-form { gap: 10px 18px; }
    .mode-redeem .redeem-card .notice { margin-top: 10px; }
}