/* The Join page (10-02): the hotel court's loop full-window, a frosted-glass card over it — the waitlist. Wide screens:
   the card on the left, the court on the right. Phones / portrait: the card is a bottom sheet under the court.
   Elements speak the closing card's language: ink outlines, white pills, Outfit grey + ink headlines, Sora text. */
/* Sampled from the hotel lawn; also used by the browser's theme color. */
#join { --community-grass: #8ec569; position: fixed; inset: 0; z-index: 7; color: #141612; background-color: var(--community-grass); }
#join.hidden { display: none; }
#join.flying { opacity: 0; pointer-events: none; }                    /* (the flight in draws its video into the doorway) */
/* (10-03) the card's first paint, at load, all but invisible: its shaders, glyphs and SVGs are ready before it is needed */
#join.warm { opacity: .004; pointer-events: none; }
#join.warm #joinBg { visibility: hidden; }
#join.warm .jcard, #join.warm .jback { visibility: visible !important; animation: none !important; }
#joinBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--community-grass); }

.jback { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.8); background: rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  font: 600 14px 'Sora', sans-serif; color: #141612; cursor: pointer; box-shadow: 0 8px 24px rgba(20,22,18,.14); transition: background .15s, transform .15s; }
.jback:hover { background: rgba(255,255,255,.85); }
.jback .arr { font-size: 17px; line-height: 1; }

.jcard { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 26px 26px 22px; border-radius: 30px;
  background: rgba(255,255,255,.6); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 40px 90px rgba(20,22,18,.28), inset 0 1px 0 rgba(255,255,255,.95); }
/* the scrollbar: a slim ink pill inside the card's rounded edge (only ever seen on a phone) — no arrows. (10-03 c) the
   standard scrollbar-width / -color are for browsers WITHOUT ::-webkit-scrollbar only: Chromium honours them over the
   pill below, and its standard scrollbar on Windows has arrow buttons */
@supports not selector(::-webkit-scrollbar) { .jcard { scrollbar-width: thin; scrollbar-color: rgba(20,22,18,.24) transparent; } }
.jcard::-webkit-scrollbar { width: 12px; }
.jcard::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.jcard::-webkit-scrollbar-track { background: transparent; margin: 22px 0; }
.jcard::-webkit-scrollbar-thumb { background: rgba(20,22,18,.22); border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
.jcard::-webkit-scrollbar-thumb:hover { background-color: rgba(20,22,18,.36); }
#join:not(.in):not(.out) .jcard, #join:not(.in):not(.out) .jback { visibility: hidden; }   /* (the court first, then the card) */
#join.in .jcard { animation: jIn .75s cubic-bezier(.2,1.25,.35,1) both; }
#join.in .jback { animation: jFade .5s .35s both; }
#join.out .jcard { animation: jOut .3s ease both; }
#join.out .jback { animation: jFade .2s ease reverse both; }
@keyframes jIn { from { opacity: 0; transform: translateY(36px) scale(.9) rotate(-1.5deg); } }
@keyframes jOut { to { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes jFade { from { opacity: 0; } }

.jkick { display: inline-block; font: 700 11px/1 'Sora', sans-serif; letter-spacing: .12em; text-transform: uppercase; background: #CDBEFF; border: 2px solid #141612;
  border-radius: 999px; padding: 6px 11px 5px; }
.jcard h2 { margin: 14px 0 8px; font: 800 38px/1.02 'Outfit', 'Sora', sans-serif; letter-spacing: -.035em; }
.jcard h2 .g { color: rgba(20,22,18,.42); }
.jcard h2 > span { display: block; }                               /* (grey line, then ink line — never a word stranded) */
.jcard.done .jmain > p.jsub { display: none; }                             /* (signed up: "You're in" says it — the card stays short) */
.jsub { margin: 0 0 18px; font: 500 14px/1.5 'Sora', sans-serif; color: rgba(20,22,18,.72); }
.jsub b { color: #141612; font-weight: 700; }

/* the form: an email pill; "I want to build it with your studio" (a switch) opens files + a link + a note to the founder;
   one ink call to action, which fills with the upload's progress */
.jinput { display: block; width: 100%; box-sizing: border-box; height: 50px; padding: 0 18px; background: #fff; border: 2.5px solid #141612; border-radius: 999px; outline: 0;
  font: 500 16px 'Sora', sans-serif; color: #141612; transition: box-shadow .15s, border-color .15s; }
.jinput.sm { height: 44px; font-size: 15px; }
.jinput::placeholder, .jnotebox textarea::placeholder { color: rgba(20,22,18,.4); }
.jinput:focus, .jnotebox textarea:focus { box-shadow: 0 0 0 4px rgba(123,92,255,.25); }
.jinput.err, .jnotebox textarea.err, .jcta.err { border-color: #E0303A; animation: jShake .4s; }
@keyframes jShake { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }

.jbuild { display: flex; align-items: center; gap: 10px; margin: 12px 2px 0; cursor: pointer; font: 600 13.5px/1.3 'Sora', sans-serif; color: rgba(20,22,18,.82); user-select: none; }
.jbuild input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jsw { position: relative; flex: none; box-sizing: border-box; width: 40px; height: 24px; border-radius: 999px; background: rgba(20,22,18,.14); border: 2px solid #141612; transition: background .2s; }
.jsw::after { content: ''; position: absolute; left: 2px; top: 50%; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #141612;
  transform: translateY(-50%); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.jbuild.on .jsw { background: #D8F24A; }
.jbuild.on .jsw::after { transform: translate(16px, -50%); }
.jbuild.on { color: #141612; }
.jbuild input:focus-visible + .jsw { box-shadow: 0 0 0 4px rgba(123,92,255,.3); }

.jextra { display: grid; gap: 10px; margin-top: 12px; animation: jUnfold .4s cubic-bezier(.2,1.2,.4,1) both; }
.jextra[hidden] { display: none; }
@keyframes jUnfold { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.jfiles { padding: 12px 12px 10px; border: 2px dashed rgba(20,22,18,.35); border-radius: 20px; background: rgba(255,255,255,.5); transition: background .15s, border-color .15s; }
.jfiles.over { background: rgba(216,242,74,.35); border-color: #141612; }
.jfiles-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font: 600 13px 'Sora', sans-serif; }
.jopt { font: 500 11.5px 'Sora', sans-serif; color: rgba(20,22,18,.5); }
.jvalue { margin: 5px 0 0; font: 600 12px/1.4 'Sora', sans-serif; color: rgba(20,22,18,.72); }
.jchips { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.jchips:empty { display: none; }
.jchip { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; background: #fff; border: 2px solid #141612;
  border-radius: 999px; font: 600 12.5px 'Sora', sans-serif; animation: jRow .45s cubic-bezier(.2,1.5,.4,1) both; }
.jchip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jchip .sz { font-weight: 500; color: rgba(20,22,18,.5); }
.jchip .x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(20,22,18,.08); cursor: pointer; font: 700 11px 'Sora', sans-serif; color: #141612; }
.jchip .x:hover { background: #141612; color: #fff; }
.jattach { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 2px solid #141612;
  font: 600 13px 'Sora', sans-serif; cursor: pointer; transition: background .15s; }
.jattach:hover { background: #F4F1EA; }
.jattach[hidden] { display: none; }
.jattach input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jattach:focus-within { box-shadow: 0 0 0 4px rgba(123,92,255,.25); }
.jnotebox { position: relative; }
.jnotebox textarea { display: block; width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical; padding: 12px 16px 22px; background: #fff; border: 2.5px solid #141612;
  border-radius: 20px; outline: 0; font: 500 14.5px/1.45 'Sora', sans-serif; color: #141612; transition: box-shadow .15s; }
.jcount { position: absolute; right: 14px; bottom: 7px; font: 600 11px 'Sora', sans-serif; color: rgba(20,22,18,.4); pointer-events: none; }

.jcta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; margin-top: 12px; border-radius: 999px;
  border: 2.5px solid #141612; background: #141612; color: #fff; cursor: pointer; font: 600 15.5px 'Sora', sans-serif; transition: background .15s, transform .12s; }
.jcta:hover { background: #2b2e28; }
.jcta:active { transform: scale(.985); }
.jcta:disabled { cursor: progress; }
.jcta > span { position: relative; }
.jcta .arr { font-size: 19px; line-height: 1; }
.jcta.busy .arr { animation: jBusy .7s ease-in-out infinite alternate; }
@keyframes jBusy { to { transform: translateX(4px); } }
.jprog { position: absolute !important; inset: 0; background: rgba(216,242,74,.32); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s; }
.jbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 600 15px 'Sora', sans-serif; transition: background .15s, color .15s, transform .12s; }
.jbtn:active { transform: scale(.97); }
.jbtn .arr { font-size: 19px; line-height: 1; }
.jbuildlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px 8px; border-radius: 999px; border: 2px dashed rgba(20,22,18,.4); background: rgba(255,255,255,.45);
  cursor: pointer; font: 600 13px 'Sora', sans-serif; color: #141612; transition: background .15s, border-color .15s; }
.jbuildlink:hover { background: #D8F24A; border-color: #141612; border-style: solid; }
.jbuildlink[hidden] { display: none; }
.jbuildlink .arr { font-size: 16px; line-height: 1; }
.jhp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jmsg { min-height: 0; margin: 8px 0 0; font: 600 13px 'Sora', sans-serif; color: #c02530; }
.jmsg:empty { display: none; }
.jfine { margin: 10px 0 0; font: 500 12px 'Sora', sans-serif; color: rgba(20,22,18,.5); }

/* signed up: your head hops in, your place in line, the link to share */
.jdone[hidden], #joinForm[hidden], .jshare[hidden] { display: none; }
.jme { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.jmehead { display: inline-block; line-height: 0; }
.jmehead.hop { animation: jHop .9s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes jHop { 0% { transform: scale(.2) rotate(-20deg); } 55% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
.jyou { font: 700 15px 'Sora', sans-serif; }
.jpos { font: 800 34px/1 'Outfit', sans-serif; letter-spacing: -.03em; }
.jpos[hidden] { display: none; }
.jshare { display: flex; gap: 8px; flex-wrap: wrap; }
.jbtn.ink { border: 2.5px solid #141612; background: #141612; color: #fff; }
.jbtn.ink:hover { background: #2b2e28; }
.jbtn.ghost { border: 2.5px solid #141612; background: #fff; color: #141612; }
.jbtn.ghost:hover { background: #F4F1EA; }
.jbtn.ok { background: #D8F24A; color: #141612; }
.jinv { margin: 12px 0 0; font: 500 12.5px 'Sora', sans-serif; color: rgba(20,22,18,.6); }
.jinv.got { color: #141612; font-weight: 700; }
.jlink { display: block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 12.5px 'Sora', sans-serif; color: rgba(20,22,18,.55); text-decoration: underline; text-underline-offset: 3px; }
.jlink:hover { color: #141612; }

/* the line itself, live */
.jlist { margin-top: 20px; padding-top: 16px; border-top: 1.5px solid rgba(20,22,18,.1); }
.jlist-head { display: flex; align-items: center; gap: 8px; font: 600 13.5px 'Sora', sans-serif; color: rgba(20,22,18,.7); min-height: 18px; }
.jlist-head b { font: 800 19px/1 'Outfit', sans-serif; color: #141612; letter-spacing: -.02em; }
.live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; animation: jLive 2s ease-out infinite; }
.live.off { background: #c9c4b8; animation: none; }
@keyframes jLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
#joinRows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#joinRows:empty { margin: 0; }
.jrow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.62); border: 1.5px solid rgba(255,255,255,.9); font: 600 13.5px 'Sora', sans-serif; }
.jrow .jav { display: block; }
.jrow .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jrow time { font: 500 12px 'Sora', sans-serif; color: rgba(20,22,18,.5); white-space: nowrap; }
.jrow.me { background: #D8F24A; border-color: #141612; }
.jrow.new { animation: jRow .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes jRow { from { opacity: 0; transform: translateY(-10px) scale(.6); } }
.jrow.more { grid-template-columns: auto 1fr; padding-left: 8px; font-weight: 500; color: rgba(20,22,18,.65); background: rgba(255,255,255,.35); }
.jrow.more .stack { display: flex; }
.jrow.more .stack .jav { margin-left: -7px; } .jrow.more .stack .jav:first-child { margin-left: 0; }
.jcc { display: inline-flex; line-height: 0; flex: none; }
.jflag { display: block; flex: none; }


/* (10-03 c) a computer: ONE card size whatever the switch says — two columns: the pitch + the form on the left (it sets
   the card's height), on the right the supporters filling the column, or ("I want to build it") the application with
   the supporters summed up under it, the message box taking whatever height is left. js/join.js moves the application
   block into the right column (placeExtra) and fits the rows to it */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .jcard { width: min(880px, calc(100vw - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; padding: 30px 30px 26px; }
  .jmain { display: flex; flex-direction: column; }
  .jmain > .jkick, .jmain .jdone > .jbuildlink, .jmain .jdone > .jlink { align-self: flex-start; }
  .jmain > #joinForm:not([hidden]), .jmain > .jdone:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
  .jmain .jfine { margin-top: auto; padding-top: 12px; }               /* (the fine print closes the column) */
  .jside { contain: size; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-left: 30px; border-left: 1.5px solid rgba(20,22,18,.1); }
  .jside .jextra:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
  .jside .jextra > :not(.jnotebox) { flex: none; }                    /* (only the message box gives — never the link field) */
  .jside .jnotebox { flex: 1 1 auto; min-height: 72px; display: flex; }
  .jside .jnotebox textarea { flex: 1; min-height: 0; resize: none; }
  .jside .jlist { flex: none; margin-top: 0; padding-top: 2px; border-top: 0; }
  .jside .jextra:not([hidden]) + .jlist { margin-top: 12px; padding-top: 10px; border-top: 1.5px solid rgba(20,22,18,.1); }
}

/* phones / portrait: the same centred card, a little smaller, with more air between its parts; it may scroll (its own
   slim scrollbar) */
@media (max-width: 699px), (max-aspect-ratio: 999/1000) {
  .jcard { width: calc(100vw - 40px); max-width: 420px; max-height: calc(100dvh - 120px); top: calc(50% + 28px); padding: 24px 20px 20px 22px; border-radius: 26px; }
  .jkick { font-size: 10.5px; }
  .jcard h2 { font-size: 29px; margin: 16px 0 10px; }
  .jsub { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }
  .jinput { height: 48px; }
  .jbuild { margin-top: 16px; }
  .jextra { gap: 12px; margin-top: 16px; }
  .jcta { height: 48px; margin-top: 18px; }
  .jmsg { margin-top: 10px; }
  .jfine { margin-top: 14px; line-height: 1.45; }
  .jlist { margin-top: 22px; padding-top: 18px; }
  #joinRows { gap: 8px; margin-top: 14px; }
  .jshare { gap: 10px; }
  .jinv { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #join.in .jcard, .jrow.new, .jmehead.hop, .live { animation: none; }
}