/* /join/: "Enter the code on the TV" (Remote / Buzz in from the site header). Brand: ink stage, paper card, yellow go. */
.jn { padding: 22px 18px 48px; display: flex; justify-content: center; }
.jn-card { width: min(100%, 30rem); background: var(--cg-paper); color: var(--cg-ink); border: 4px solid var(--cg-ink); border-radius: 14px; padding: 18px 18px 20px; box-shadow: 8px 8px 0 var(--cg-acc); }
.jn-role { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jn-rb { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 58px; padding: 6px 8px; border: 3px solid var(--cg-ink); border-radius: 10px;
  background: #fff; color: var(--cg-ink); text-decoration: none; font: 800 1rem/1.1 var(--cg-font); text-align: center; }
.jn-rb small { font: 800 .68rem/1 var(--cg-label); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; color: var(--cg-slate, #4A443A); }
.jn-rb.on { background: var(--cg-ink); color: var(--cg-paper); box-shadow: 4px 4px 0 var(--cg-acc); } .jn-rb.on small { color: var(--cg-acc); }
.jn-rb:hover { color: var(--cg-ink); } .jn-rb.on:hover { color: var(--cg-paper); }
.jn-h { font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.02 var(--cg-shout); color: var(--cg-ink); text-transform: none; margin: 22px 0 6px; }
.jn-sub { margin: 0 0 14px; font-weight: 700; color: var(--cg-slate, #4A443A); line-height: 1.35; }
.jn-l { display: block; font: 800 .78rem/1 var(--cg-label); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.jn-f { display: grid; gap: 12px; }
.jn-code { width: 100%; box-sizing: border-box; min-height: 88px; padding: 6px 10px; border: 4px solid var(--cg-ink); border-radius: 12px; background: #fff; color: var(--cg-ink);
  font: 900 3.6rem/1 var(--cg-disp); letter-spacing: .32em; text-indent: .32em; text-align: center; text-transform: uppercase; }
.jn-code::placeholder { color: #C9BFA9; }
.jn-code:focus { outline: 4px solid var(--cg-acc); outline-offset: 2px; }
.jn-go { min-height: 64px; border: 3px solid var(--cg-ink); border-radius: 12px; background: var(--cg-acc); color: var(--cg-ink); font: 800 1.3rem/1 var(--cg-font); cursor: pointer;
  box-shadow: 5px 5px 0 var(--cg-ink); transition: transform .08s, box-shadow .08s; }
.jn-go:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--cg-ink); }
.jn-go:disabled { opacity: .6; cursor: progress; }
.jn-go:focus-visible, .jn-rb:focus-visible, .jn-g:focus-visible, .jn-fl:focus-visible { outline: 4px solid var(--cg-acc); outline-offset: 3px; }
.jn-msg { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-weight: 700; line-height: 1.35; border: 3px solid var(--cg-ink); background: #fff; }
.jn-msg[hidden] { display: none; }
.jn-msg.bad { background: #FFE3DC; border-color: #B3261E; color: #5C0F0A; }
.jn-msg.ok { background: #E3F6E8; border-color: #1E7A3C; color: #0C3B1C; }
.jn-msg.info { background: #fff; }
.jn-msg.wait { position: relative; padding-left: 44px; }
.jn-msg.wait::before { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -9px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--cg-ink); border-right-color: transparent; animation: jn-spin .9s linear infinite; }
@keyframes jn-spin { to { transform: rotate(360deg); } }
.jn-fl { display: flex; align-items: center; justify-content: center; min-height: 58px; margin-top: 10px; border: 3px solid var(--cg-ink); border-radius: 10px; background: var(--cg-ink); color: var(--cg-paper); text-decoration: none; font: 800 1.05rem/1 var(--cg-font); }
.jn-fl:hover { color: var(--cg-acc); }
.jn-pick[hidden] { display: none; }
.jn-pt { margin: 16px 0 8px; font-weight: 800; }
.jn-pl { display: grid; gap: 10px; }
.jn-g { display: block; min-height: 58px; padding: 10px 14px; border: 3px solid var(--cg-ink); border-radius: 10px; background: #fff; color: var(--cg-ink); text-decoration: none; box-shadow: 4px 4px 0 var(--cg-ink); }
.jn-g b { display: block; font: 900 1.25rem/1.1 var(--cg-font); } .jn-g span { display: block; font-size: .85rem; font-weight: 700; color: var(--cg-slate, #4A443A); margin-top: 3px; line-height: 1.3; }
.jn-g:hover { color: var(--cg-ink); }
.jn-help { margin: 16px 0 0; font-size: .92rem; color: var(--cg-slate, #4A443A); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .jn-go { transition: none; } .jn-go:active { transform: none; } .jn-msg.wait::before { animation: none; border-right-color: var(--cg-ink); } }