/* Register + confirmation (T-020), after pages.css. Versioned by asset() from this file's
   mtime (CLAUDE.md rule 6) — no constant anywhere.
   Layout (feat/register-design, a proposal for CJ): a shorter hero; steps 1 Your details →
   2 Payment → 3 Confirmed; the form in three fieldsets; an order summary card on the right from
   980px (sticky), a compact <details> bar above the form below that. Every rule is scoped to these
   pages (.ck-*), so the Contact and Sponsor forms keep their look. */

/* page tokens: field borders at 3:1 against the field (WCAG 1.4.11), the focus halo, a soft tint */
:root,.theme-dark{--ck-field-line:#6b6b82;--ck-field-hover:#8a8aa0;--ck-ring:rgba(232,200,119,.3);--ck-soft:rgba(232,200,119,.06);--ck-err:#e08a8a;--ck-err-bg:rgba(242,167,167,.08)}
:root[data-theme="light"]{--ck-field-line:#958e81;--ck-field-hover:#6f695e;--ck-ring:rgba(125,90,20,.22);--ck-soft:#faf6ee;--ck-err:#a3302b;--ck-err-bg:#fbefee}

/* ---- hero: shorter than the other pages, shorter still on a phone ---- */
.ck-hero{padding:calc(var(--hdr) + 44px) 0 30px}
.ck-hero h1{max-width:none;text-wrap:balance;margin-bottom:12px}
.ck-hero .lead{max-width:62ch;margin:0}
.ck-body{padding:6px 0 88px}
@media (max-width:759px){
  .ck-hero{padding:calc(var(--hdr) + 24px) 0 18px}
  .ck-hero .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:10px}
  .ck-hero h1{font-size:clamp(26px,8vw,40px);margin-bottom:8px}   /* = fix/register-title: "Your NAMB member pass" on one line at 360–430px */
  .ck-hero .lead{font-size:15px;line-height:1.55}
  .ck-body{padding-bottom:64px}
}

/* ---- grid: [summary bar] [steps + panels] [summary card] ---- */
.ck-grid{display:grid;gap:16px;align-items:start}
.ck-main{display:grid;gap:16px;min-width:0}
.ck-main > *{max-width:860px}
@media (min-width:980px){
  .ck-grid{grid-template-columns:minmax(0,1fr) 340px;column-gap:36px}
  .ck-bar{display:none}
  .ck-side{position:sticky;top:calc(var(--hdr) + 20px)}
  .ck-grid:has(.ck-steps) .ck-side{margin-top:50px}   /* level with the form card, under the steps */
}
@media (min-width:1200px){.ck-grid{grid-template-columns:minmax(0,1fr) 360px;column-gap:48px}}

/* ---- steps ---- */
.ck-steps{list-style:none;display:flex;align-items:center;min-height:34px;margin:0;padding:0}
.ck-step{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--muted);white-space:nowrap}
.ck-step[hidden]{display:none}
.ck-step + .ck-step{flex:1 1 auto}
.ck-step + .ck-step::before{content:"";flex:1 1 16px;min-width:12px;height:1px;margin:0 2px 0 10px;background:var(--line)}
.ck-step-n{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--ck-field-line);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.ck-step-n > *{grid-area:1/1}
.ck-step-ok{display:none;width:16px;height:16px}
.ck-step[aria-current="step"]{color:var(--ivory)}
.ck-step[aria-current="step"] .ck-step-n{background:var(--gold);box-shadow:none;color:var(--on-acc)}
.ck-step.is-done{color:var(--body)}
.ck-step.is-done .ck-step-n{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold-text)}
.ck-step.is-done .ck-step-num{visibility:hidden}
.ck-step.is-done .ck-step-ok{display:block}
.ck-step.is-done + .ck-step::before{background:var(--gold)}
@media (max-width:480px){.ck-step{gap:6px;font-size:12.5px}.ck-step-n{width:26px;height:26px}.ck-step + .ck-step::before{margin-left:6px;min-width:6px}}
@media (max-width:374px){.ck-step{gap:5px;font-size:11.5px}.ck-step-n{width:24px;height:24px;font-size:11.5px}.ck-step + .ck-step::before{margin:0 1px 0 5px;min-width:4px}}

/* ---- the form card ---- */
.ck-main .pg-form{padding:34px 38px 36px}
@media (max-width:699px){.ck-main .pg-form{padding:24px 18px 26px}}
.ck-main .pg-form-h{font-size:clamp(25px,2.4vw,30px);margin-bottom:0}
.ck-form-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.ck-req-note{margin:0;font-size:12.5px;color:var(--muted)}
.ck-req-note .ff-req{color:var(--gold-text)}

/* fieldsets: the float keeps the legend a plain block (no notch in a border) */
.ck-fs{border:0;margin:22px 0 0;padding:0;min-width:0}
.ck-fs + .ck-fs{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-soft)}
.ck-legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0;
  font-family:var(--ui);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ck-legend + *{clear:both}
.ck-opt{padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}

/* fields: sentence-case labels, one height, a clear focus and error state */
.ck-form .ff-grid{gap:18px 16px}
.ck-form .ff{gap:7px;align-content:start}
.ck-form .ff-label{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.35;color:var(--ivory)}
.ck-form .ff-req{color:var(--gold-text);margin-left:1px}
.ck-form .ff-input{min-height:50px;padding:12px 14px;border:1px solid var(--ck-field-line);background-color:var(--field);
  transition:border-color .15s ease,box-shadow .15s ease}
.ck-form select.ff-input{padding-right:42px}
.ck-form .ff-input::placeholder{color:var(--muted);opacity:.8}
.ck-form .ff-input:hover{border-color:var(--ck-field-hover)}
.ck-form .ff-input:focus{outline:2px solid transparent;outline-offset:0;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 0 5px var(--ck-ring)}
.ck-form [aria-invalid="true"].ff-input{border-color:var(--ck-err);box-shadow:0 0 0 1px var(--ck-err)}
.ck-form [aria-invalid="true"].ff-input:focus{box-shadow:0 0 0 1px var(--ck-err),0 0 0 5px var(--ck-err-bg)}
.ck-form .ff-error{margin:1px 0 0}
.ck-phone{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px}
@media (max-width:559px){.ck-phone{grid-template-columns:1fr}}
[data-ck-other][hidden]{display:none}

/* the end of the form: the terms box and the button, set apart */
.ck-final{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.ck-terms{margin:0}
/* T-044: the promo code (/register/ only), above the terms: the field and its Apply / Remove button on one row */
.ck-promo{margin:0 0 18px}
.ck-promo .ck-opt{margin-left:6px;font-size:11px}
.ck-promo-row{display:flex;gap:8px}
.ck-promo-row .ff-input{flex:1 1 auto;min-width:0;max-width:22rem;text-transform:uppercase}
.ck-promo-row .ff-input[readonly]{color:var(--gold-text);background-color:var(--ck-soft);border-color:var(--gold)}
.ck-promo-btn{flex:0 0 auto;min-height:50px;padding:10px 20px;font-size:11.5px}
.ck-promo-btn[hidden]{display:none}
.ck-promo-msg{margin:0;font-size:13.5px;font-weight:600;color:var(--gold-text)}
.ck-promo-msg:empty{display:none}
.ck-terms .nl-consent{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border-radius:var(--radius);
  font-size:14px;line-height:1.55;color:var(--body);background:var(--ck-soft);box-shadow:inset 0 0 0 1px var(--line)}
.ck-terms input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--gold)}
.ck-terms a{color:var(--gold-lt)}
.ck-terms:has([aria-invalid="true"]) .nl-consent{background:var(--ck-err-bg);box-shadow:inset 0 0 0 1px var(--ck-err)}
.ck-form .ff-actions{margin-top:20px;gap:12px 20px}
.ck-next{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.ck-next .icon{width:16px;height:16px;flex:0 0 auto;color:var(--gold)}
.ck-form .ff-actions .nl-status{flex-basis:100%;font-size:13.5px}
.ck-form .ff-actions .nl-status.is-error{padding:11px 14px;background:var(--ck-err-bg);box-shadow:inset 3px 0 0 var(--ck-err)}
@media (max-width:759px){
  .ck-form .ff-actions .btn{width:100%}
  .ck-next{width:100%;justify-content:center}
}

/* ---- order summary: the card (from 980px) ---- */
.ck-summary{padding:0}
.ck-sum-main{padding:26px 26px 24px}
.ck-sum-kicker{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ck-sum-name{font-size:28px;line-height:1.1;margin:0 0 4px}
.ck-sum-event{margin:0 0 18px;font-size:14px;color:var(--muted)}
.ck-sum-facts{list-style:none;display:grid;gap:10px;margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--line-soft)}
.ck-sum-facts li{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.4;color:var(--body)}
.ck-sum-facts .icon{width:18px;height:18px;flex:0 0 auto;color:var(--gold)}
.ck-sum-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0 4px;border-top:1px solid var(--line-soft)}
.ck-sum-price-l{font-size:14px;font-weight:600;color:var(--ivory)}
.ck-sum-price-v{font-family:var(--display);font-size:40px;font-weight:600;line-height:1;color:var(--gold-text);white-space:nowrap}
.ck-cur{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
/* a partner page (NAMB): the row is hidden until the server answers; then the regular rate struck before the price */
.ck-sum-price[hidden]{display:none}
.ck-sum-price-partner .ck-sum-price-v{font-size:34px}
.ck-sum-price-comp .ck-sum-price-v{font-size:28px}   /* T-042: "Complimentary" in place of a price */
/* T-044: a promo code applied swaps the tier price ([data-ck-promo-off]) for the struck rate + the code's price */
[data-ck-promo-on][hidden],[data-ck-promo-off][hidden]{display:none}
.ck-sum-price-v.ck-sum-price-promo{font-size:34px}
.ck-promo-sum{font-weight:600;color:var(--body)}
.ck-sum-price .ck-was,.ck-bar-price .ck-was{font-family:var(--ui);font-size:14px;font-weight:500;vertical-align:.3em}
.ck-bar-price .ck-was{display:block;margin:0 0 3px;font-size:12px;line-height:1;text-align:right;vertical-align:0}   /* the phone bar: the struck rate above the price, so the bar never overflows at 320px */
.ck-small{font-size:13px;line-height:1.55;color:var(--muted);margin:6px 0 0}
.ck-sum-ends{font-weight:600;color:var(--body)}
.ck-secure{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border-radius:var(--radius);
  font-size:13px;line-height:1.5;color:var(--body);background:var(--ck-soft)}
.ck-secure .icon{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--gold)}
.ck-sum-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:10px 0 0;font-size:13px}
.ck-sum-links a{display:inline-block;padding:7px 0;color:var(--gold-lt)}
.ck-sum-help{padding:20px 26px 20px;border-top:1px solid var(--line-soft)}
.ck-sum-help-h{font-size:21px;margin:0 0 4px}
.ck-sum-help .ct-list{gap:0}
.ck-sum-help .ct-list a{min-height:44px;font-size:14px;overflow-wrap:anywhere}
@media (max-width:979px){.ck-sum-main{display:none}.ck-sum-help{border-top:0;padding:20px 20px 16px}}

/* ---- order summary: the compact bar (below 980px) ---- */
.ck-bar{border-radius:var(--radius);background:var(--panel);box-shadow:var(--panel-shadow)}
.ck-bar-sum{list-style:none;display:flex;align-items:center;gap:10px 12px;min-height:58px;padding:10px 16px;cursor:pointer}
.ck-bar-sum::-webkit-details-marker{display:none}
.ck-bar-sum:focus-visible{outline-offset:-3px}
.ck-bar-name{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ivory)}
.ck-bar-price{font-family:var(--display);font-size:26px;font-weight:600;line-height:1;color:var(--gold-text);white-space:nowrap}
.ck-bar-price-comp{font-size:18px}   /* T-042: the word, not a price: room left for the pass name at 320px */
.ck-bar-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;padding-left:12px;border-left:1px solid var(--line-soft);font-size:12.5px;font-weight:600;color:var(--gold-lt)}
.ck-bar-chev{width:20px;height:20px;transition:transform .2s ease}
.ck-bar[open] .ck-bar-chev{transform:rotate(180deg)}
.ck-bar-body{padding:2px 16px 16px;border-top:1px solid var(--line-soft)}
.ck-bar-body .ck-sum-event{margin:12px 0 12px}
.ck-bar-body .ck-sum-facts{border-top:0;padding-top:0;margin-bottom:6px}
.ck-bar-body .ck-sum-price{display:none}
.ck-bar-body .ck-secure{margin-top:14px}
.ck-bar-body .ck-sum-ends{margin-top:14px}

/* ---- step 2: the payment panel (Stripe draws its own light form inside the iframe) ---- */
.ck-pay-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:12px}
.ck-back{min-height:44px;padding:10px 16px;font-size:11.5px}
.ck-pay-note{font-size:14px;color:var(--body);margin:0 0 14px}
.ck-pay-amount{font-size:15px;padding:12px 14px;background:var(--ck-soft);box-shadow:inset 3px 0 0 var(--gold)}
.ck-mount{min-height:420px;border-radius:var(--radius);background:#fff;padding:8px 0;box-shadow:0 0 0 1px var(--line)}
@media (max-width:559px){.ck-mount{margin-inline:-18px;box-shadow:none}}
.ck-pay [tabindex="-1"]:focus{outline:none}
.ck-pay-secure{margin-top:14px;padding:0;background:none;justify-content:center;color:var(--muted)}

/* ---- closed states ---- */
.ck-closed .ct-list{margin-top:18px}
.ck-not-ready .btn{margin-top:14px}

/* ---- step 3: the confirmation (the NAMB on-page one and /register/complete/) ---- */
.ck-done{max-width:760px}
.ck-done-badge{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:50%;background:var(--gold);color:var(--on-acc)}
.ck-done-badge .icon{width:26px;height:26px}
.ck-done dl{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:24px 0 20px;font-size:15px;border-top:1px solid var(--line-soft)}
.ck-done dt,.ck-done dd{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ck-done dt{padding-right:24px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:stretch;display:flex;align-items:center}
.ck-done dd{margin:0;color:var(--ivory);overflow-wrap:anywhere}
.ck-done-see{color:var(--body)}
.ck-free [tabindex="-1"]:focus{outline:none}
.ck-spinner{display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-3px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold-lt);animation:ck-spin 1s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ck-spinner{animation:none}}
.ck-complete{padding-top:calc(var(--hdr) + 36px)}
.ck-complete .ck-steps{margin-bottom:18px}
.ck-done-card{padding:34px 38px}
.ck-done-card h1{font-size:clamp(32px,4vw,46px)}
.ck-done-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ck-done-help{margin:18px 0 0;font-size:14px;color:var(--muted)}
.ck-done-help a{white-space:nowrap}
@media (max-width:699px){
  .ck-complete{padding-top:calc(var(--hdr) + 22px)}
  .ck-done-card{padding:24px 18px 26px}
  .ck-done-actions .btn{width:100%}
}

/* NAMB price (CJ 2026-10-15): the regular rate struck through before the member price */
.ck-was{color:var(--muted);font-weight:400;text-decoration-thickness:1px;margin-right:.2em}

/* no newsletter block on these pages (register-page.php / complete: $page 'newsletter' => false) */
.pg-register .ft-grid:first-child,.pg-register-complete .ft-grid:first-child{padding-top:0}
/* The registration pages' titles ("Your NAMB member pass") on one line where they fit: no 16ch cap; balanced when they wrap (CJ 2026-10-15) */
.pg-register .pg-hero h1{max-width:none;text-wrap:balance}
@media (max-width:559px){.pg-register .pg-hero h1{font-size:clamp(26px,8vw,40px)}}
.pg-register .pg-hero .lead{text-wrap:pretty}   /* no lone last word under the title */
@media (min-width:760px){.pg-register .pg-hero .lead{max-width:none}}   /* one line on desktop (CJ 2026-10-15) */
.ck-nowrap{white-space:nowrap}   /* the dates in the eyebrow never split at the dash */
/* …and on ONE line from 760px up for real (CJ 2026-10-15): between 760 and ~1000px the copy is wider than the
   column at 16px, so the size follows the width there. 52 = the longest lead (/register/'s, 50.7 em) plus a margin;
   a longer lead would only wrap (text-wrap), never overflow. */
@media (min-width:760px){.pg-register .pg-hero .lead{font-size:min(16.4px,calc((100vw - 80px) / 52))}}