/* THE CHECKOUT (Steven 2026-10-14 morning: "This is the checkout page,
   man, we have to make this like a checkout page. Show the 15% fee etc.").
   One shape for two doors, templates/targets/_checkout.html: the ready-made
   target's product page and its Details sheet (.ck--page, its own control
   Get this), and the Approve and pay sheet's block (.ck--sheet, the
   sheet's own confirm "Pay $X"). Design tokens only.

   THE CHECKOUT KEEPS ITS OWN FACES. The product page draws it inside
   .boh-interface, whose standards (css/components/interface-standards.css)
   point every font token at the system face and put var(--interface-font)
   on every element at 0,2,1; so, as the one card does (cards/card.css
   .tb-card), the checkout points the tokens back at their :root values
   (--auth-title-font the heading face, --topbar-pill-font the mono,
   --font-edit the serif) and hands each part the face it asks for through
   --interface-font. */
.ck {
  --font-body: var(--font-sans);
  --font-heading: var(--auth-title-font);
  --font-serif: var(--font-edit);
  --font-mono: var(--topbar-pill-font);
  --interface-font: var(--font-body);
  font-family: var(--font-body);
  color: var(--text-primary);
  text-align: left;
}
.boh-interface .ck,
.want-accept-overlay .ck { font-size: var(--text-base); line-height: var(--leading-normal); }
.ck :is(p, h1, h2, h3, dl, dd, ol) { margin: 0; }

/* The product page: the checkout as one white sheet on the page. */
.ck--page {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: var(--space-3) auto var(--space-8);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ck--sheet { display: flex; flex-direction: column; gap: var(--space-4); margin: 0 0 var(--space-4); }
.ck--sheet[hidden] { display: none; }

/* THE WAY OUT (Steven 2026-10-14: "there no way to close the checkout"):
   the page's round X, 40px, at the card's top right, white on the card
   with a hairline like the sheets' own X; the title keeps clear of it. */
.ck--page { position: relative; }
.ck-x {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--size-10);
  height: var(--size-10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  box-shadow: var(--shadow-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  cursor: pointer;
}
.ck-x svg { display: block; width: var(--size-6); height: var(--size-6); }
.ck-x:hover { background: var(--surface-secondary); }
.ck-x:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.ck-x ~ :is(.ck-kicker, .ck-title) { padding-right: var(--space-10); }

/* The kicker, in the mono caps the sheets wear ("CHECKOUT"). */
.ck-kicker {
  --interface-font: var(--font-mono);
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The title with the brand mark: the yellow disc and the black target. */
.ck-title {
  --interface-font: var(--font-heading);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--font-bold) var(--text-3xl)/var(--leading-tight) var(--font-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.ck-title__words { --interface-font: var(--font-heading); min-width: 0; }
.ck-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-8);
  height: var(--size-8);
  border-radius: var(--radius-full);
  background: var(--highlight-yellow);
  color: var(--color-black);
}
.ck-mark__glyph { width: 70%; height: 70%; }

/* The price, then "Pay as you approve each piece". */
.ck-price { display: flex; flex-direction: column; gap: var(--space-1); }
.ck-price__amount {
  --interface-font: var(--font-heading);
  font: var(--font-bold) var(--text-4xl)/var(--leading-tight) var(--font-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.ck-price__pay {
  font: var(--font-medium) var(--text-sm)/var(--leading-snug) var(--font-body);
  color: var(--text-secondary);
}
/* "+ fees" beside a paid price (Steven 2026-10-14 ~12:50: "On the details
   page, and also on the PDP page, we should always put the little
   '+ fees', like they do with plus tax"): small and quiet, the money
   words' own tone; the Order summary says what the fees are. */
.ck-price__fees {
  font: var(--font-medium) var(--text-sm)/var(--leading-snug) var(--font-body);
  letter-spacing: normal;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ck-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--surface-secondary);
}

/* THE AGENT AS A STRIP (Steven: "that should be a strip card for the
   agent"): one row, its round face, then its name with the certification
   badge beside it (only when real) over the with-line. */
.ck-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.ck-strip__face {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-12);
  height: var(--size-12);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--accent-tertiary-subtle);
}
.ck-strip__face > * { width: 100%; height: 100%; }
.ck-strip__still { display: block; object-fit: cover; }
/* With no picture at all, the plain initial, never words. */
.ck-strip__initial {
  --interface-font: var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--font-bold) var(--text-lg)/1 var(--font-heading);
  color: var(--tb-brand-purple);
}
.ck-strip__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ck-strip__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
.ck-strip__name {
  --interface-font: var(--font-heading);
  min-width: 0;
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-strip__with {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body);
  color: var(--text-secondary);
}
.ck-strip__dot { color: var(--text-muted); }
.ck-strip__mark { font-size: var(--text-sm); color: var(--text-primary); }
.ck-strip__model { font-weight: var(--font-semibold); color: var(--text-primary); }
.ck-strip__badge { flex: none; display: inline-flex; }

/* The agent's own words, right under the picture, in the serif. */
.ck-words {
  --interface-font: var(--font-serif);
  font: var(--font-normal) var(--text-lg)/var(--leading-relaxed) var(--font-serif);
  color: var(--text-primary);
}

.ck-sample { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-sample__title { font: var(--font-semibold) var(--text-base)/var(--leading-snug) var(--font-body); }
.ck-sample__audio { width: 100%; }
.ck-sample__note { font: var(--font-normal) var(--text-sm)/var(--leading-normal) var(--font-body); color: var(--text-secondary); }

.ck-section { display: flex; flex-direction: column; gap: var(--space-3); }
.ck-label {
  --interface-font: var(--font-mono);
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* THE PLAN: one row a step, its number, its words, its amount. Every
   number the same brand purple ("Keep the steps colors the same"); a step
   that pays out wears a small "$" on its number's corner ("just add a small
   button on the number that shows a $ so we know that is a pay point"). */
.ck-plan { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ck-step {
  display: grid;
  grid-template-columns: var(--size-8) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
}
.ck-step:first-child { border-top: 0; padding-top: 0; }
.ck-step__num {
  --interface-font: var(--font-heading);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-8);
  height: var(--size-8);
  border-radius: var(--radius-full);
  background: var(--tb-brand-purple);
  color: var(--text-inverse);
  font: var(--font-bold) var(--text-sm)/1 var(--font-heading);
}
.ck-step__dollar {
  --interface-font: var(--font-body);
  position: absolute;
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-1) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-4);
  height: var(--size-4);
  border: 1px solid var(--surface-primary);
  border-radius: var(--radius-full);
  background: var(--accent-neon);
  color: var(--color-black);
  font: var(--font-bold) var(--text-xs)/1 var(--font-body);
}
.ck-step__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ck-step__title {
  --interface-font: var(--font-heading);
  font: var(--font-semibold) var(--text-base)/var(--leading-snug) var(--font-heading);
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ck-step__part {
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body);
  color: var(--text-secondary);
}
.ck-step__amt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-1);
}
.ck-step__amt b {
  --interface-font: var(--font-heading);
  font: var(--font-bold) var(--text-base)/var(--leading-snug) var(--font-heading);
  color: var(--text-primary);
  white-space: nowrap;
}
.ck-step__amt small {
  font: var(--font-normal) var(--text-xs)/var(--leading-snug) var(--font-body);
  color: var(--text-muted);
  white-space: nowrap;
}
.ck-step__amt--zero b { font-weight: var(--font-medium); color: var(--text-muted); }

/* THE ORDER SUMMARY: the item, the fee with its percent, the Total. */
.ck-sum {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}
.ck-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font: var(--font-normal) var(--text-base)/var(--leading-snug) var(--font-body);
  color: var(--text-secondary);
}
.ck-sum__row dd { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-sum__row--total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-strong);
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  color: var(--text-primary);
}
.ck-sum__row--total :is(dt, dd) { --interface-font: var(--font-heading); }

/* THE ONE GREEN CONTROL (the sheet language's go). */
.ck-go-form { margin: 0; }
.ck-go {
  --interface-font: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--size-14);
  margin: 0;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent-neon);
  color: var(--color-black);
  font: var(--font-bold) var(--text-lg)/1.2 var(--font-body);
  cursor: pointer;
}
.ck-go:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }

/* The two money lines and Read the FAQ, under the control. */
.ck-assure { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-assure__line {
  font: var(--font-normal) var(--text-sm)/var(--leading-normal) var(--font-body);
  color: var(--text-secondary);
}
.ck-faq {
  align-self: flex-start;
  font: var(--font-semibold) var(--text-sm)/var(--leading-snug) var(--font-body);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-faq:hover { color: var(--tb-brand-purple); }

/* ON THE APPROVE AND PAY SHEET. The sheet language (css/pages/step-cards.css)
   hands every element its body face with ".sl-sheet * { font-family:
   inherit !important }", so the checkout says its faces again at that
   weight; the sheet's own kicker row reads Checkout above the block. */
.sl-sheet .ck :is(.ck-kicker, .ck-label) { font-family: var(--font-mono) !important; }
.sl-sheet .ck :is(.ck-title, .ck-title__words, .ck-price__amount, .ck-strip__name, .ck-strip__initial,
  .ck-step__num, .ck-step__title, .ck-step__amt b, .ck-sum__row--total, .ck-sum__row--total dt,
  .ck-sum__row--total dd) { font-family: var(--font-heading) !important; }
.sl-sheet .ck .ck-words { font-family: var(--font-serif) !important; }
.sl-sheet .ck .ck-price__fees { font-family: var(--font-body) !important; }
.ck--sheet .ck-title { font-size: var(--text-2xl); }

/* THE PLAN IS THE PROPOSAL'S TIMELINE (Steven 2026-10-14 ~12:55, of the
   Details sheet on a ready-made target: "I thought I saw a checkout page
   that had the faces and icons on it, that was the proposal page; this
   needs to match the proposal page, it was more advanced"). The plan is
   feed/_proposal_cards.html plan_list, open, in its .psteps frame; its
   look is cards/plan-sheet.css. Here only the frame's own top margin goes. */
.ck .psteps { margin: 0; }

/* THE PAY BUTTON IS ALWAYS IN REACH (Steven 2026-10-14 ~12:55: "The
   checkout should always have the button that you're paying with on top,
   so everything scrolls in between that."). The one control stands in the
   sheet language's foot (.sl-foot, css/pages/step-cards.css, which says
   it again here so a page without that sheet draws it the same), the last
   thing in the checkout, sticky at the bottom of whatever scrolls: the
   viewport on the product page, the sheet's panel in a Details sheet. The
   two money lines and Read the FAQ sit just above its line. Its right side
   keeps the fail dot's room (--sl-dot-room, the same sum step-cards.css
   and fail-dot.css keep); its left side is the checkout's own edge. */
.ck--page { --ck-pad: var(--space-5); }
.ck--page > .sl-foot {
  --sl-edge: var(--ck-pad);
  --sl-dot-room: calc(var(--size-12) + var(--space-1) + var(--space-5) + var(--space-2));
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--ck-pad));
  padding: var(--space-3) var(--sl-dot-room) calc(var(--space-3) + env(safe-area-inset-bottom)) var(--ck-pad);
  background: var(--surface-primary);
  box-shadow: 0 -1px 0 var(--border-default);
}

/* IN A DETAILS SHEET (the frames that bring targets/_ready_sheet.html in:
   ready-sheet.js .ready-sheet, the /home deck's .hc-sheet, the shop's
   .wm-sheet): the work sheet's three parts. The frame's own head (the
   kicker and the X) is pinned at the top with a hairline under it, the
   checkout lies flat on the white sheet between, and the foot is pinned at
   the bottom across the sheet's whole width; the sheet's bottom inset is
   the foot's. */
:is(.ready-sheet, .hc-sheet, .wm-sheet) :is(.sc-sheet__panel, .wm-sheet__panel):has(.ck--page) {
  padding-bottom: 0;
  background: var(--surface-primary);
}
:is(.sc-sheet__panel, .wm-sheet__panel):has(.ck--page) :is(.ready-sheet__top, .hc-sheet__top, .wm-sheet__top) {
  box-shadow: 0 1px 0 var(--border-default);
}
.want-detail.ready-sheet__want:has(.ck--page) { padding-bottom: 0; }
.ready-sheet__want .ck--page {
  max-width: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 420px) {
  .ck--page { --ck-pad: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-xl); }
  .ready-sheet__want .ck--page { --ck-pad: var(--space-5); padding: var(--space-4) 0 0; border-radius: 0; }
  .ck-title { font-size: var(--text-2xl); }
}