/* Apply to get in (apply.php): the invite page's look (assets/invite-gate.css) with a pick-your-category grid. Each category is a
   radio in a card; the chosen one goes gold with a check. Tokens only (assets/tokens.css). */
.ap-main{max-width:1080px;margin:0 auto;padding:var(--muck-space-7) var(--muck-space-6) 96px}
.ap-intro{text-align:center;max-width:640px;margin:0 auto}
.ap-intro h1,.ap-done h1{margin:0;font-size:clamp(36px,6vw,56px);line-height:.99;letter-spacing:-.031em;font-weight:750}   /* the homepage hero's type (Shaun, 2026-11-01: "hp is source of truth") */
.ap-intro h1 span,.ap-done h1 span{color:#ffd34f}
.ap-notfor{display:flex;align-items:flex-start;gap:var(--muck-space-3);margin:var(--muck-space-5) auto 0;max-width:560px;padding:var(--muck-space-4);border:1px solid var(--muck-amber);border-radius:var(--muck-radius-card);background:rgba(242,184,75,.12);color:var(--muck-text);font-size:15px;line-height:1.5;text-align:left}   /* a warning: someone else's invite (api/x_callback.php) */
.ap-notfor-icon{flex:none;margin-top:1px;color:var(--muck-amber)}
.ap-notfor b{color:var(--muck-amber)}
.ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the categories */
.ap-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--muck-space-4);margin:var(--muck-space-7) 0 0;padding:0;border:0;min-width:0}
.ap-kind{position:relative;display:flex;flex-direction:column;gap:var(--muck-space-2);padding:var(--muck-space-5);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1);cursor:pointer;transition:border-color var(--muck-dur-fast),background var(--muck-dur-fast)}
.ap-kind:hover{border-color:var(--muck-line-strong)}
.ap-kind>input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ap-kind b{padding-right:var(--muck-space-6);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--muck-text)}
.ap-kind span{font-size:14px;line-height:1.55;color:var(--muck-text-2)}
/* the check: an empty circle, gold and ticked when chosen */
.ap-kind::after{content:'';position:absolute;top:var(--muck-space-5);right:var(--muck-space-5);width:20px;height:20px;box-sizing:border-box;border:1px solid var(--muck-line-strong);border-radius:50%}
.ap-kind:has(>input:checked){border-color:var(--muck-gold);background:var(--muck-surface-2)}
.ap-kind:has(>input:checked)::after{content:'✓';display:grid;place-items:center;border-color:var(--muck-gold);background:var(--muck-gold);color:var(--muck-gold-ink);font-size:12px;font-weight:800}
.ap-kind:has(>input:focus-visible){outline:2px solid var(--muck-gold);outline-offset:2px}

/* about you, once a category is picked */
.ap-about{margin:var(--muck-space-7) auto 0;max-width:720px;padding-top:var(--muck-space-6);border-top:1px solid var(--muck-line);scroll-margin-top:var(--muck-space-6)}
.ap-about[hidden],.ap-done[hidden],.ap-form[hidden],.ap-error[hidden]{display:none}
.ap-about h2{margin:0 0 var(--muck-space-5);font-size:28px;font-weight:800;letter-spacing:-.02em}
.ap-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--muck-space-4)}
.ap-field{display:flex;flex-direction:column;gap:var(--muck-space-2);min-width:0}
.ap-field--wide{grid-column:1/-1}
.ap-field .mk-label small{font-weight:500;color:var(--muck-text-3)}
.ap-field .mk-input,.ap-field .mk-textarea{width:100%;min-height:48px}
.ap-at{display:flex;align-items:center;position:relative}
.ap-at>span{position:absolute;left:var(--muck-space-3);color:var(--muck-text-3);pointer-events:none}
.ap-at .mk-input{padding-left:28px}
.ap-count{align-self:flex-end;font-size:12px;color:var(--muck-text-3)}
.ap-error{margin:var(--muck-space-4) 0 0;font-size:14px;color:var(--muck-red)}
.ap-send{display:flex;align-items:center;gap:var(--muck-space-4);margin-top:var(--muck-space-5)}
.ap-send .mk-btn{min-height:48px;padding:0 var(--muck-space-6)}
.ap-send span{font-size:13px;color:var(--muck-text-3)}

/* sent */
.ap-done{max-width:640px;margin:0 auto;text-align:center;outline:none}
/* the request to post on X: their words, editable, then Post it on X or Skip it */
.ap-post{margin:var(--muck-space-6) auto 0;max-width:560px;padding:var(--muck-space-5);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1);text-align:left;display:flex;flex-direction:column;gap:var(--muck-space-2)}
.ap-post[hidden],.ap-after[hidden]{display:none}
.ap-post .mk-textarea{width:100%;min-height:96px;resize:none;overflow:hidden;font-size:15px;line-height:1.5}
.ap-post-foot{display:flex;justify-content:space-between;gap:var(--muck-space-3);font-size:12px;color:var(--muck-text-3)}
.ap-post-tools{display:flex;align-items:center;gap:var(--muck-space-3)}
.ap-post-tools .ap-other{padding:0;font-size:12px}
.ap-post-count{font-size:12px;font-variant-numeric:tabular-nums}
.ap-post-count.is-over{color:var(--muck-red)}
.ap-post-actions{display:flex;align-items:center;gap:var(--muck-space-4);margin-top:var(--muck-space-3)}
.ap-post-actions .mk-btn{min-height:48px;padding:0 var(--muck-space-6);gap:var(--muck-space-2)}
.ap-x{font-size:16px;line-height:1}
.ap-skip,.ap-other{border:0;background:none;padding:var(--muck-space-2);color:var(--muck-text-3);font:600 14px var(--muck-font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ap-skip:hover,.ap-other:hover{color:var(--muck-text-2)}
.ap-skip:focus-visible,.ap-other:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px;border-radius:2px}
.ap-card{position:relative;margin:var(--muck-space-2) 0 0;border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);overflow:hidden;transition:opacity var(--muck-dur-fast)}
.ap-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:var(--muck-surface-3)}
.ap-card.is-off{opacity:.3}
.ap-card-check{display:flex;align-items:center;gap:var(--muck-space-2);min-height:44px;font-size:14px;color:var(--muck-text-2);cursor:pointer}
.ap-card-check input{width:18px;height:18px;margin:0;accent-color:var(--muck-gold)}
.ap-after{margin:var(--muck-space-6) auto 0;max-width:560px;font-size:16px;line-height:1.55;color:var(--muck-text-2)}

@media(max-width:900px){
 .ap-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .ap-main{padding:var(--muck-space-6) var(--muck-space-4) var(--muck-space-7)}
 .ap-kinds{grid-template-columns:1fr;gap:var(--muck-space-3);margin-top:var(--muck-space-6)}
 .ap-kind{padding:var(--muck-space-4)}
 .ap-kind::after{top:var(--muck-space-4);right:var(--muck-space-4)}
 .ap-fields{grid-template-columns:1fr}
 .ap-send{flex-direction:column;align-items:stretch;text-align:center}
 .ap-post{padding:var(--muck-space-4)}
 .ap-post-actions{flex-direction:column;align-items:stretch}
}