/* THE PURCHASE IS AN OFFER'S BACK (Steven 2026-11-10: the market card's
   back is the purchase page; "Get this must be instant"). The back of a
   ready-made target's card, templates/cards/_card.html _offer_back: the
   checkout's own parts (targets/_checkout.html, css/pages/checkout.css)
   scrolling inside the card on white, the way a want card's plan back does
   (card.css .tb-card__planscroll), and its foot, the purchase, on the line
   the front's button sits on. Placing and framing only; every face, colour
   and size is the checkout's or the card's. Design tokens only. */

.tb-card__back--offer { contain: size; overflow: hidden; background: var(--surface-primary); }
.tb-card__offerscroll { background: var(--surface-primary); }
.tb-card__offerscroll > .ck--card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-6);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}
/* the plan's rows keep their own frame (plan-sheet.css), the card's width */
.tb-card__offerscroll .ck .psteps { margin: 0; }

/* THE FOOT: the purchase, pinned under the scroll, the front's own green
   pill (card.css .tb-card__cta) as a button posting the purchase door */
.tb-card__offerfoot {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}
.tb-card__offerfoot > .tb-card__cta {
    width: 100%;
    border: 0;
    cursor: pointer;
}
.tb-card__offerfoot > .tb-card__cta:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
/* the tap draws at once: the pill dims while the purchase is on its way
   (cards/_card.html data-offer-buy, aria-busy set as it posts) */
.tb-card__offerfoot > .tb-card__cta[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* ON THE DECK (the deck shell, tb_card with the column): the words run the
   card's full width under the column's discs (Steven 2026-11-10: "when you
   flip the card too, the text needs to go full card width"; card-col.css
   THE COLUMN FLOATS OVER THE CARD), Checkout stands right of the type
   mark's pocket on its line (the front's title does the same, card-frame.css)
   and the title starts under the pocket, and the pill sits on the bottom
   line between the shell's two discs, at their height, as the front's does
   (card-col.css and card-frame.css, the dock's tokens) */
.app-shell--deck-shell .has-cf.tb-card--col .tb-card__offerscroll > .ck--card > .ck-kicker {
    display: flex;
    align-items: center;
    min-height: calc(2 * var(--cf-a) - var(--space-5));
    margin-top: calc(-1 * var(--space-2));
    margin-left: calc(2 * var(--cf-a) + var(--space-2) - var(--space-5));
}
.app-shell--deck-shell .tb-card--col .tb-card__offerfoot {
    padding-bottom: var(--ds-dock-in-b);
    border-top: 0;
    box-shadow: 0 -1px 0 var(--border-default);
}
.app-shell--deck-shell .tb-card--col .tb-card__offerfoot > .tb-card__cta {
    box-sizing: border-box;
    width: auto;
    min-height: var(--ds-dock-h);
    height: var(--ds-dock-h);
    margin-left: calc(var(--ds-dock-h) + var(--ds-dock-gap));
    margin-right: calc(var(--ds-dock-h) + var(--ds-dock-gap));
}
.app-shell--deck-shell .hc-slide .has-cf.tb-card--col .tb-card__offerfoot > .tb-card__cta {
    margin-left: calc(var(--cf-clear) - var(--space-5));
    margin-right: calc(var(--cf-clear) - var(--space-5));
}

/* a card drawn without the column under the deck shell (a shared card's
   page, cards/share.html): the pill clears the shell's two discs at its
   ends, as that page's front button does */
.app-shell--deck-shell .tb-card:not(.tb-card--col) .tb-card__offerfoot > .tb-card__cta {
    width: auto;
    margin-left: calc(var(--ds-dock-h) + var(--ds-dock-gap));
    margin-right: calc(var(--ds-dock-h) + var(--ds-dock-gap));
}