/* THE BACK OF A MARKET CARD IS ITS PRODUCT PAGE AND THE PURCHASE (Steven
   2026-11-12: "the back is the very detailed page and purchase. look good.").
   templates/cards/_card.html _offer_back. The want card's back language
   (want-back.css): white, the title in the top row beside the corner, small
   mono labels over each part, one scroll inside the card, the bottom row
   holding "Back to the card". Tokens only. */

.tb-card__back--pdp { contain: size; overflow: hidden; background: var(--surface-primary); color: var(--text-primary); }
.tb-card__back--pdp > .tb-pdp { padding: var(--space-5) var(--space-5) var(--space-6); }
.tb-pdp > .tb-pdp__page { display: flex; flex-direction: column; gap: var(--space-6); max-width: none; }
.tb-pdp > .tb-pdp__page > * { flex: none; margin: 0; }

/* the top row: the title beside the corner, the price under it */
.tb-pdp__head .ck-title { display: block; margin: 0; }
.tb-pdp__head .ck-title__words { font: inherit; }
.tb-pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; }
.tb-pdp__amount { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--text-primary); }
.tb-pdp__fees { font-size: var(--text-sm); color: var(--text-secondary); }
.tb-pdp__pay { flex-basis: 100%; font-size: var(--text-sm); color: var(--text-secondary); }
.tb-pdp__odds { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.tb-card--col .tb-pdp__head .tb-card__headwords { padding-right: calc(var(--tb-col-w, var(--size-16)) - var(--space-3)); }
/* ONE SCROLL BELOW THE TOP ROW: the title and the price stay put; the page
   under them scrolls, inside the card, to Get this at its end */
.tb-card__back--pdp > .tb-pdp { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.tb-card__back--pdp > .tb-pdp > .tb-pdp__head { flex: none; margin-bottom: 0; padding-bottom: var(--space-3); }
.tb-card__back--pdp > .tb-pdp > .tb-pdp__page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-default);
}
/* THE TITLE GOES UP BESIDE THE BUTTONS (Steven 2026-11-12: "make sure that
   the titles go up beside the buttons. Like, you're leaving this white space
   up there"): the top row ends where its words end and the agent follows
   straight after. The page under it runs the card's full width; the
   column's discs float over it as on the front (Steven 2026-11-12: "your not
   supposed to indent, its supposed to be to the edge of the card") */


/* each part's small label, the card back's mono caps */
.tb-pdp__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* the agent: the checkout's strip, the people it has served under it */
.tb-pdp__agent .ck-strip { margin: 0; }
.tb-pdp__served { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* the facts: three small cells in a row */
.tb-pdp__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}
.tb-pdp__fact {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}
.tb-pdp__fact dt {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tb-pdp__fact dd { margin: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tb-pdp__fact--wide { grid-column: 1 / -1; }
.tb-pdp__fact--wide dd { font-weight: 600; }

/* what you get: the whole description in the card's own face */
.tb-pdp__words {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-line;
}

/* the plan: the proposal's own timeline (agents-now.css), at the card's width */
.tb-pdp .psteps { margin: 0; }

/* the order summary: one quiet panel, the total heavy */
.tb-pdp__order .ck-sum {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}
.tb-pdp__order .ck-sum__row--total { font-size: var(--text-lg); }

/* the money line and Read the FAQ sit right under the button */
.tb-pdp__assure { margin-top: calc(-1 * var(--space-4)); }
.tb-pdp__assure .ck-assure__line { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* the purchase at the end of the page, room under it */
.tb-pdp__buy { display: block; margin: 0; padding: 0; background: none; border: 0; }
.tb-pdp__buy > .tb-card__cta { display: flex; width: 100%; margin: 0; }
.tb-pdp__buy > .tb-card__cta[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* the bottom row: "Back to the card" between the shell's Market and + */
.tb-card__back--pdp > .tb-card__backdock { background: var(--surface-primary); }
.tb-pdp__dock .tb-bids__flipback {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--ds-dock-h, 48px);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tb-pdp__dock .tb-bids__flipback:hover { background: var(--surface-secondary); }
.tb-pdp__dock .tb-bids__flipback:focus-visible { outline: 2px solid var(--border-focus, currentColor); outline-offset: 2px; }
@media (max-width: 380px) { .tb-pdp__dock .tb-bids__flipback { font-size: var(--text-sm); padding: 0 var(--space-2); } }

/* the agent row is still: its face, never the moving round (the card's own
   film is the only thing that plays) */
.tb-pdp__face { position: relative; display: block; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-secondary); }
.tb-pdp__face > .ck-strip__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-pdp__face > .ck-strip__initial { display: grid; place-items: center; width: 100%; height: 100%; }