/* PROTOTYPE — landing A in-page checkout dialog (CheckoutA.astro). 012 tokens come from .a-root (a-base.css). */
.ck { padding: 0; border: 0; background: transparent; color: var(--pa-ink); max-width: none; max-height: none; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; }
.ck::backdrop { background: color-mix(in srgb, #0b1011 72%, transparent); backdrop-filter: blur(3px); }
.ck[open] { display: grid; place-items: center; padding: 24px 16px; }
.ck-box { width: min(560px, 100%); padding: 24px; border-radius: var(--pa-r-l); background: var(--pa-float-bg); box-shadow: var(--pa-shadow-float), 0 30px 80px -20px rgba(0, 0, 0, .6); animation: ck-in var(--pa-dur-3) var(--pa-ease); }
@keyframes ck-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ck-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ck-head h2 { margin: 6px 0 0; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--pa-ink); }
.ck-x { all: unset; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--pa-r-s); color: var(--pa-ink-3); font-size: 22px; }
.ck-x:hover { background: var(--pa-tint-2); color: var(--pa-ink); }
.ck-demo { margin-left: 6px; padding: 1px 6px; border-radius: var(--pa-r-xs); background: color-mix(in oklch, var(--pa-st-attention) 20%, transparent); color: var(--pa-st-attention); }

.ck-steps { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: ck; }
.ck-steps li { counter-increment: ck; font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); padding-top: 8px; border-top: 2px solid var(--pa-line); }
.ck-steps li::before { content: counter(ck) " · "; }
.ck-steps li.on { color: var(--pa-ink); border-color: var(--pa-st-running); }
.ck-steps li.ok { color: var(--pa-st-done); border-color: var(--pa-st-done); }

.ck-pane { display: grid; gap: 12px; }
.ck-pane[hidden] { display: none; }
.ck-sum { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: var(--pa-r-m); background: var(--pa-accent-tint); }
.ck-sum b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--pa-ink); }
.ck-sum span { font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.ck-pane label { display: grid; gap: 6px; font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.ck-pane input { height: 44px; padding: 0 14px; border-radius: var(--pa-r-m); border: var(--pa-bw) solid var(--pa-line-strong); background: var(--pa-canvas); color: var(--pa-ink); font: 16px var(--pa-font-ui); outline: 0; transition: border-color var(--pa-dur-1), box-shadow var(--pa-dur-1); }
.ck-pane input:focus { border-color: var(--pa-link); box-shadow: var(--pa-focus); }
.ck-pane input.bad { border-color: var(--pa-st-error); }
.ck-msg { margin: 0; min-height: 1.2em; font-size: var(--pa-fs-sm); color: var(--pa-st-attention); }
.ck-pane .a-fine { text-align: left; margin: 0 !important; }
.ck-lead { margin: 0; font-size: var(--pa-fs-md); line-height: 1.55; color: var(--pa-ink-2); }

.ck-qr-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.ck-qr { width: 220px; aspect-ratio: 1; padding: 8px; border-radius: var(--pa-r-m); background: #fff; display: grid; place-items: center; color: #222; font-size: 12px; text-align: center; }
.ck-qr svg { width: 100%; height: 100%; display: block; }
.ck-info { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: baseline; font-size: var(--pa-fs); }
.ck-info dt { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.ck-info dd { margin: 0; color: var(--pa-ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; word-break: break-word; }
.ck-info dd:first-of-type { font-size: 20px; font-weight: 700; }
.ck-copy { all: unset; cursor: pointer; font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-link); padding: 2px 6px; border-radius: var(--pa-r-xs); background: var(--pa-tint-2); }
.ck-copy:hover { background: var(--pa-tint-3); }
.ck-wait { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--pa-fs-md); color: var(--pa-ink); }
.ck-dots { display: inline-flex; gap: 5px; }
.ck-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pa-st-running); opacity: .35; animation: ck-b 1.1s ease-in-out infinite; }
.ck-dots i:nth-child(2) { animation-delay: .15s; } .ck-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ck-b { 50% { transform: translateY(-4px); opacity: 1; } }
.ck-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ck .ck-row [hidden] { display: none; } /* beats .a-root .pa-btn (pa-ui.css loads later) */

.ck-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--pa-r-m); border: var(--pa-bw) solid color-mix(in oklch, var(--pa-st-done) 50%, transparent); background: color-mix(in oklch, var(--pa-st-done) 10%, transparent); }
.ck-key code { font: 700 18px var(--pa-font-mono); letter-spacing: .04em; color: var(--pa-ink); word-break: break-all; }
.ck-how { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--pa-fs-md); color: var(--pa-ink-2); line-height: 1.5; }
.ck-how b { color: var(--pa-ink); font-weight: 600; }

@media (max-width: 560px) {
  .ck[open] { place-items: end center; padding: 0; }
  .ck-box { border-radius: var(--pa-r-l) var(--pa-r-l) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 100svh; overflow: auto; }
  .ck-head h2 { font-size: 22px; }
  .ck-qr-wrap { grid-template-columns: 1fr; justify-items: center; }
  .ck-qr { width: min(240px, 70vw); }
  .ck-info { width: 100%; }
  .ck-row .pa-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ck-box { animation: none; } .ck-dots i { animation: none; opacity: 1; } }