/* CrypTap · contact: THE TICKET. Owned by contact. Scoped under #ct, #ctForm, #cx* ids and .cx-* classes; keyframes are
   prefixed cx-. Reuses core (.rcpt, .btn, .lab), chrome and the shell (page.css) read-only.
   One region, section#ct on paper. Desktop: the form at cols 1-7, a thermal ticket at cols 9-12 that prints a row the first
   time each field gets a value. Phones: no live ticket; the result ticket prints under the form after Send. */

/* ================================================================ header: kept tight so the form and the ticket start on the first screen */
.cx-head>.pg-rule{margin-top:clamp(40px,4.6vw,64px)}
.cx-meta{grid-column:9/13;grid-row:3;align-self:end;margin-top:clamp(24px,3vw,40px);min-width:0}
.cx-meta .pg-meta{margin-top:0}
.cx-meta dd a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0;text-transform:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(14,23,38,.4);
  transition:color .24s linear,text-decoration-color .24s linear}
.cx-meta-p{font-family:var(--mono);font-size:11.5px;line-height:1.9;letter-spacing:.04em;color:var(--ink-2)}

/* ================================================================ body: form | ticket */
.cx-body{margin-top:clamp(40px,4.6vw,64px);align-items:start}
.cx-form{grid-column:1/8;display:flex;flex-direction:column;gap:40px;min-width:0}
.cx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(16px,2vw,32px)}
/* errors sit in the gap under their line, so flagging a field never moves the form */
.cx-f{position:relative}
.cx-f>.pg-err,.cx-keys>.pg-err{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0}
#ctForm :is(input,textarea),.cx-res{scroll-margin:calc(var(--nav-h) + 64px) 0 48px}

/* the seven topic keys: 4 + 3 */
.cx-keys{position:relative}
.cx-keys .pg-keys-g{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr}
.cx-keys.cx-bad>legend{color:var(--red)}
.cx-keys.cx-bad .pg-key:not(:has(>input:checked)){border-color:rgba(179,38,30,.6)}

/* the purchase key's line: it opens under the keys and the link rises into it */
.cx-buy{height:0;overflow:hidden;visibility:hidden}
.cx-buy.cx-on{height:auto;visibility:visible}
.cx-buy .pg-link{margin-top:10px}

/* send */
.cx-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:4px}
.cx-go.btn{height:52px;padding:0 26px}
.cx-or{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.cx-or a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(14,23,38,.4);
  transition:color .24s linear,text-decoration-color .24s linear}
@media (hover:hover){ .cx-or a:hover,.cx-meta dd a:hover{color:var(--blue);text-decoration-color:currentColor} }

/* the outcome: role=status (sent) and role=alert (not sent), each under the button. They share one flex slot (.cx-out),
   which takes no room until it holds something. */
.cx-out{margin-top:-40px}
.cx-res:not(:empty){margin-top:40px;padding-top:24px;box-shadow:inset 0 1px 0 var(--line)}
.cx-res[hidden]{display:none}
/* focused by script so the next Tab starts here and a screen reader reads it; like main.pg, it shows no ring */
.cx-res:focus{outline:none}
.cx-res-h{margin-top:16px;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em}
.cx-res-p{margin-top:12px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;max-width:44ch;color:var(--ink-2)}
.cx-no .cx-res-p{color:var(--ink)}
.cx-res-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:24px}
/* on failure, Email it instead is the till's next action: the same 52px key as Send */
.cx-res-a .btn{height:52px;padding:0 26px}
/* text-align:left: a button centres by default, and CT.roll would then centre the outgoing word over the new, shorter one,
   swinging COPY MESSAGE 21px left into the gap beside Email it instead as it leaves */
.cx-copy{display:inline-flex;align-items:center;min-height:44px;font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;text-align:left;-webkit-tap-highlight-color:transparent}
.cx-copy-l{display:inline-block;padding-bottom:3px;box-shadow:inset 0 -1px 0 currentColor;white-space:nowrap}
/* the underline glides to the new word's width (js); the word itself is never cut short with an ellipsis while it does */
.cx-copy-l .core-roll{max-width:none}
.cx-copy-l .core-roll-i{overflow:visible;text-overflow:clip}
@media (hover:hover){ .cx-copy:hover{color:var(--blue)} }

/* ================================================================ the ticket (desktop, aria-hidden: the form is the accessible source) */
.cx-tk{grid-column:9/13;position:sticky;top:calc(var(--nav-h) + 40px);display:flex;flex-direction:column;align-items:center;min-width:0}
.cx-slot{display:block;flex:none;width:min(348px,100%);height:1px;background:var(--ink)}
.cx-paper{width:min(300px,100%);transform-origin:50% 0;
  filter:drop-shadow(0 1px 0 rgba(14,23,38,.06)) drop-shadow(0 14px 18px rgba(14,23,38,.10))}
.cx-rc{font-size:12px;padding:16px 14px 8px}
.cx-rc .rcpt-rl{min-height:1.9em}
.cx-rc .rcpt-c{letter-spacing:.12em}
/* lead rows: the label keeps its line and leader; a long value wraps to a second line, never past the paper's edge */
.cx-rc .rcpt-lead{align-items:flex-start}
.cx-r>.cx-v{flex:0 1 auto;max-width:calc(68% + 1ch);white-space:normal;overflow-wrap:anywhere;text-align:right;text-transform:uppercase;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  /* the clamp's ellipsis follows the right-aligned line, past its edge: 1ch of padding gives it room to hang there (inside the
     paper's 14px margin), so a value cut at two lines says so instead of dropping its last words without a trace */
  padding-right:1ch;margin-right:-1ch}
/* blank rows: the ghost of what will print, at 40% ink */
.cx-nil{color:rgba(26,26,26,.4)}
/* subject and message: label, then the text as typed */
.cx-blk>.cx-v{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.cx-blk.cx-nil>.cx-v,.cx-blk:not(.cx-nil) .cx-dash,.cx-msg:not(.cx-nil)>.cx-lab{display:none}
.cx-blk:not(.cx-nil) .cx-lab>span:first-child::after{visibility:hidden}
.cx-sub{-webkit-line-clamp:2;line-clamp:2;line-height:1.9}
.cx-txt{-webkit-line-clamp:7;line-clamp:7;font-size:11.5px;line-height:1.75;margin:5px 0 7px}
.cx-st>span:last-child{text-align:right}
/* CT.roll pins the outgoing value at its old width, right-aligned, so a longer value (NOT SENT YET -> SENDING) hangs over the
   leader that has already grown under it. Backed with the paper, it covers those dots until it has rolled up and out. */
.cx-sv .core-roll-o{background:var(--rcpt);box-shadow:-8px 0 0 var(--rcpt)}
/* what the till adds after Send */
.cx-rc .cx-x{white-space:normal}
.cx-rc .cx-x>span{text-wrap:balance}
.cx-rc .cx-yes-r{color:#d9ad12}
.cx-rc .cx-no-r{color:var(--red)}
.cx-rc .cx-w{line-height:1.6;padding:3px 0}
.cx-rc a.cx-mail{width:100%;color:inherit;font:inherit;line-height:inherit;cursor:pointer}
.cx-rc a.cx-mail>span:last-child{transition:transform .38s var(--out)}
@media (hover:hover){ .cx-rc a.cx-mail:hover{color:var(--blue)} .cx-rc a.cx-mail:hover>span:last-child{transform:translateX(3px)} }
.cx-roll{position:relative}
.cx-hd{position:absolute;left:4px;top:0;width:6px;height:6px;background:#d9ad12;opacity:0;pointer-events:none;
  transition:transform .24s var(--out),opacity .12s linear}
.cx-hd.cx-on{opacity:1}
.cx-cap{margin-top:18px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
/* without script nothing prints as you type: no ticket */
html:not(.js) .cx-tk{display:none}
/* before its first print the ticket waits under the slot (the safety shows it after 3s if no script runs) */
html.js:not(.reduce) .cx-tk:not(.cx-on) .cx-roll{clip-path:inset(0 0 100% 0);animation:cx-show 0s 3s forwards}
@keyframes cx-show{to{clip-path:none}}

/* the result ticket under the form (phones) */
.cx-rt{display:none}

/* ================================================================ widths */
@media (min-width:980px) and (max-width:1199.98px){ .cx-tk,.cx-meta{grid-column:8/13} }
@media (max-width:979.98px){
  .cx-head>.pg-rule{margin-top:40px}
  .cx-meta{margin-top:28px}
  .cx-body{margin-top:40px}
  .cx-form{gap:36px}
  .cx-out{margin-top:-36px}
  .cx-pair{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .cx-keys .pg-keys-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 64px keys: a border, 9px of padding, the index and a two-line label (PARTNERSHIP / OPPORTUNITIES): 1+9+10+4+30+9+1 */
  .cx-keys .pg-keys-g{grid-auto-rows:minmax(64px,auto)}
  .cx-keys .pg-key{min-height:64px;gap:4px;padding-block:9px}
  .cx-keys .pg-key:nth-child(7){grid-column:1/-1}
  .cx-tk{display:none}
  .cx-rt:not(:empty){display:flex;flex-direction:column;align-items:center;margin-top:40px}
}
/* phones: Send and Email it instead are full-width keys under the thumb. A tablet or a phone on its side keeps them their own
   size, with "or email" beside Send, as on the desktop (a 760px-wide button is a banner, not a key). */
@media (max-width:599.98px){
  .cx-send{flex-direction:column;align-items:stretch;gap:4px}
  .cx-go.btn{width:100%}
  .cx-or{align-self:flex-start}
  .cx-res-a .btn{flex:1 1 100%}
}

/* ================================================================ print: the form as written, no ticket */
@media print{ .cx-tk,.cx-rt,.cx-buy{display:none!important} }

/* ================================================================ reduced motion */
html.reduce .cx-rc a.cx-mail>span:last-child,html.reduce .cx-hd{transition:none}
html.reduce .cx-rc a.cx-mail:hover>span:last-child{transform:none}