/* The application (join.js): three screens at /join/, and the same markup as a pop-up
   from any Apply free link. A full-screen sheet on phones. */
.jn-page{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px)}
.jn-page .mg-wrap{max-width:820px}
.jn-h1{margin:0;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(34px,4.6vw,52px);line-height:1.04;letter-spacing:-0.025em}
.jn-intro{margin:12px 0 28px;font-size:18px;color:var(--soft)}

.jn{position:relative;padding:clamp(20px,3.4vw,36px);border-radius:20px;background:var(--panel);border:1px solid var(--line2)}
.jn-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.05);color:var(--soft);cursor:pointer}
.jn-x:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.jn-x[hidden]{display:none}
.jn-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:260px}
.jn-bar i{height:4px;border-radius:2px;background:var(--line);transition:background-color .3s}
.jn-bar i.on{background:var(--acc)}
.jn-step{margin:10px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.jn-step b{color:var(--ink);font-weight:500}

.jn-form{margin:22px 0 0}
.jn-bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.jn-panel[hidden]{display:none}
.jn-h2{margin:0;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,34px);line-height:1.1;letter-spacing:-0.02em;outline:none}
.jn-lede{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--mute)}

/* Screen 1: class tiles */
.jn-group{margin:22px 0 0;padding:0;border:0;min-width:0}
.jn-group legend{padding:0;margin:0 0 10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.jn-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jn-tile{position:relative;display:block;cursor:pointer}
.jn-tile input{position:absolute;opacity:0;width:1px;height:1px}
.jn-tile span{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px 14px 13px;box-sizing:border-box;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,background-color .15s,transform .15s}
.jn-tile i{font-style:normal;font-size:22px;line-height:1;margin-bottom:6px}
.jn-tile b{font-size:16px;font-weight:700;color:var(--ink)}
.jn-tile small{font-size:13px;color:var(--dim)}
.jn-tile:hover span{box-shadow:inset 0 0 0 1px #3A3F4A}
.jn-tile input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.jn-tile input:checked+span{background:rgba(200,245,90,.08);box-shadow:inset 0 0 0 2px var(--acc)}
.jn-tile input:checked+span::after{content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0D10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.jn-tile.is-off{cursor:not-allowed}
.jn-tile.is-off span{opacity:.45}
.jn-count{margin:16px 0 0;font-size:14px;color:var(--mute)}

.jn-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px;margin:22px 0 0}
.jn-nav .mg-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.jn-unsure{margin-right:auto;font-size:15px;color:var(--acc);text-decoration:none}
.jn-unsure:hover{text-decoration:underline}

/* Screen 2: name, contact, consent */
.jn-score{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;padding:10px 14px;border-radius:12px;background:rgba(200,245,90,.08);box-shadow:inset 0 0 0 1px rgba(200,245,90,.25);font-size:15px;color:var(--soft)}
.jn-score[hidden]{display:none}
.jn-score span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.jn-score b{font-weight:600;color:var(--ink)}
.jn-field{display:flex;flex-direction:column;gap:7px;margin:20px 0 0;min-width:0}
.jn-field label{font-size:15px;font-weight:600;color:var(--ink)}
.jn-field label small{margin-left:6px;font-weight:400;font-size:13px;color:var(--dim)}
.jn-input{width:100%;min-height:52px;padding:0 16px;box-sizing:border-box;border-radius:12px;border:0;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:500 17px 'Inter',system-ui,sans-serif}
.jn-input::placeholder{color:#5D626D}
.jn-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.jn-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--red)}
.jn-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.jn-hint{margin:0;font-size:13px;color:var(--dim)}
.jn-err{margin:6px 0 0;font-size:14px;color:#FF8A73}
.jn-err[hidden]{display:none}
.jn-check{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--soft);cursor:pointer}
.jn-check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--acc);cursor:pointer}
.jn-check a{color:var(--acc)}
.jn-offers{margin-top:24px;padding:14px 16px;border-radius:14px;background:rgba(200,245,90,.06);box-shadow:inset 0 0 0 1px rgba(200,245,90,.3)}
.jn-offers b{color:var(--ink);font-weight:700}
.jn-fine{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.jn-link{padding:0;border:0;background:none;color:var(--mute);font:inherit;text-decoration:underline;cursor:pointer}

/* Screen 3: in the queue */
.jn-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 12px;border-radius:999px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-applicant);box-shadow:inset 0 0 0 1px rgba(142,154,175,.5)}
.jn-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t-applicant);animation:jn-pulse 1.6s ease-in-out infinite}
@keyframes jn-pulse{50%{opacity:.3}}
.jn-card{display:flex;justify-content:center;margin:24px 0 0}
.jn-boost{margin:22px 0 0;padding:14px 16px;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.jn-boost p{margin:0;font-size:15px;line-height:1.5;color:var(--soft)}
.jn-boost b{color:var(--ink)}
.jn-done .jn-nav{justify-content:flex-start}

/* The pop-up */
.jn-modal{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:20px;background:transparent;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.jn-modal::backdrop{background:rgba(6,7,9,.78);backdrop-filter:blur(6px)}
.jn-modal[open]{animation:jn-in .28s cubic-bezier(.2,.9,.2,1)}
@keyframes jn-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.jn-modal .jn{padding-top:clamp(24px,3.6vw,36px);border-color:var(--line)}
.jn-modal .jn-bar{max-width:220px}
html:has(.jn-modal[open]){overflow:hidden}

@media (max-width:640px){
  .jn-page{padding-top:28px}
  .jn-page .jn{padding:20px 16px;border-radius:16px}
  .jn-tiles{grid-template-columns:1fr 1fr;gap:8px}
  .jn-tile span{padding:12px}
  .jn-two{grid-template-columns:1fr}
  .jn-nav{justify-content:stretch}
  .jn-nav .mg-btn{flex:1 1 auto}
  .jn-unsure{order:2;flex:1 1 100%;text-align:center;margin:0}
  .jn-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .jn-modal .jn{min-height:100%;box-sizing:border-box;border:0;border-radius:0;padding:20px 16px 28px}
  .jn-modal[open]{animation-name:jn-up}
  @keyframes jn-up{from{transform:translateY(40px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.jn-modal[open],.jn-chip::before{animation:none}}