/* The illustrated joining object takes the full available height. On a TV,
   the enlarged room/address sit beside it so the QR owns the object's face. */
body[class] #join-dialog{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 16px);margin:auto;padding:0;filter:none}
.join-layout{--join-object-width:min(calc((100dvh - 24px)*2/3),48vw);height:calc(100dvh - 24px);width:100%;display:grid;grid-template-columns:minmax(0,1fr) var(--join-object-width) minmax(0,1fr);align-items:center;justify-items:center;gap:18px}
body.theme-solomon #join-dialog{width:calc(100vw - 24px)}
.theme-solomon .join-layout{--join-object-width:min(calc((100dvh - 24px)*.74),48vw)}
.join-object-space{container-type:size;width:100%;height:100%;min-height:0;display:grid;place-items:center}
body #join-dialog .join-artifact{width:min(100cqw,calc(100cqh * 2/3));height:auto;max-height:100%;filter:drop-shadow(0 10px 22px #06132288)}
body.theme-solomon #join-dialog .join-artifact{width:min(100cqw,calc(100cqh * .74))}
body #join-dialog .join-face{container-type:size;gap:10px;justify-content:center}
body #join-dialog .join-qr-paper{width:min(100cqw,calc(100cqh - 42px));height:auto;aspect-ratio:1;flex:none;max-width:none;padding:0;border-radius:8px;box-shadow:0 4px 15px #132b321a}
body #join-dialog #join-qr{width:100%;height:100%;object-fit:contain;max-width:none;border-radius:8px}
body #join-dialog #join-heading{font-size:clamp(46px,5.5vw,64px);line-height:1.12;flex-direction:column;gap:12px;max-width:100%;padding:24px 15px;border-radius:24px;background:var(--join-paper);box-shadow:0 5px 0 color-mix(in srgb,var(--join-edge) 60%,transparent);border:2px solid var(--join-edge);filter:drop-shadow(0 10px 18px #06132255)}
body #join-heading small{font:800 18px/1.2 system-ui,sans-serif;letter-spacing:.22em}
body #join-dialog #join-room{letter-spacing:.12em}
body #join-dialog #join-link{font-size:clamp(24px,2.7vw,40px);line-height:1.25;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0;max-width:100%;padding:22px 12px;border-radius:24px;background:var(--join-paper);border:2px solid var(--join-edge);box-shadow:0 5px 0 color-mix(in srgb,var(--join-edge) 60%,transparent);filter:drop-shadow(0 10px 18px #06132255)}
#join-link>span{white-space:nowrap}
body #join-dialog .join-close{width:38px;height:38px;min-height:38px;font-size:28px;top:-22px;right:-14px}
body #join-network{font-size:clamp(12px,2.4cqw,18px);min-height:30px;margin:0;width:100%}
@media(max-aspect-ratio:1/1){
 .join-layout,.theme-solomon .join-layout{--join-object-width:100%;height:calc(100dvh - 20px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
 body #join-dialog #join-heading{flex-direction:row;gap:10px;font-size:44px;padding:4px 18px;border-radius:18px;box-shadow:none;line-height:1.1}
 body #join-heading small{font-size:13px}
 body #join-dialog .join-artifact{height:auto;width:min(100cqw,calc(100cqh * 2/3));max-width:100%;aspect-ratio:2/3;justify-self:center}
 body.theme-solomon #join-dialog .join-artifact{aspect-ratio:.74}
 body #join-dialog #join-link{font-size:28px;padding:4px 16px;border-radius:18px;box-shadow:none}
 body #join-dialog .join-close{width:30px;height:30px;min-height:30px;font-size:24px;top:-12px;right:-10px}
 body #join-dialog .join-face{gap:5px}
 body #join-dialog .join-qr-paper{width:min(100cqw,calc(100cqh - 32px))}
 body #join-network{min-height:25px;font-size:11px;padding:2px 4px}
}
@media(max-width:899px) and (min-aspect-ratio:1/1){
 .join-layout{gap:8px}
 body #join-dialog #join-heading{font-size:clamp(30px,6vw,48px);padding:12px 8px;gap:7px;border-radius:16px}
 body #join-heading small{font-size:12px}
 body #join-dialog #join-link{font-size:20px;padding:12px 6px;border-radius:16px}
 body #join-dialog .join-close{width:28px;height:28px;min-height:28px;font-size:22px;top:-12px;right:-6px}
}

@media(min-width:1200px){body #join-dialog #join-link{font-size:40px}}