/* Label League — 30 /join · two forms behind one toggle (v2, 9/26/2026 · the "30 Join a Label" bundle: Mode A join · Mode B apply). Every measurement is the artboard's inline style
   (design/claude-design-handoff-2026-09-26/team-sign-up/…/Label League - 30 Join a Label.dc.html): desktop 1280 light, phone 390 dark —
   the tokens flip with the scheme, the numbers don't. Objects: the level meter (no eyebrow above it), the record, the cassette spines.
   v8 (STEP 14, 10/11): the label card's one track is minmax(0,1fr) (its no-wrap seats · points row had pushed the track past the card,
   so "1st" and "pre-season" ran out of its right edge); that row wraps, the seats line loses its ellipsis, and the names (the card's,
   the picked label's, the spines') are fit boxes (#grid / #pick data-fit-in, ll-shell.js LLFit). */
@keyframes llspin{to{transform:rotate(360deg)}}
@keyframes llrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lleq{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
body.joinpage{background:var(--paper);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;margin:0}
.joinpage .jn{padding:52px 40px 60px;display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:start;max-width:1280px;margin:0 auto;box-sizing:border-box}
/* the level meter — 34 bars × 3 px, height 26; it replaces an eyebrow */
.joinpage .jn-eq{display:flex;align-items:flex-end;gap:3px;height:26px}
.joinpage .jn-eq span{display:block;width:3px;height:100%;border-radius:1px;background:var(--ink);transform-origin:bottom;animation:lleq var(--d,1s) ease-in-out var(--dl,0s) infinite}
.joinpage .jn-title{font-weight:700;font-size:72px;line-height:.9;letter-spacing:-.05em;margin:22px 0 0}
.joinpage .jn-p{font-size:16px;line-height:1.55;color:var(--ink2);margin:18px 0 0;max-width:46ch}
/* the season line (Lake 10/9) — off the masthead, under the lede: the sentence + Apply now (the Join side only) */
.joinpage .jn-season{margin-top:20px;display:flex;align-items:center;gap:12px 20px;max-width:560px;box-sizing:border-box;padding:14px 14px 14px 18px;background:var(--card);border:1px solid var(--rule);border-radius:12px;animation:llrise .3s ease both}
.joinpage .jn-season p{margin:0;flex:1;font-size:14.5px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.joinpage .jn-season .go{flex:none;height:40px;padding:0 16px;border-radius:10px;background:var(--ink);color:var(--paper);border:0;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
/* the segmented toggle — one page, two forms (margin-top 26) */
.joinpage .jn-seg{margin-top:26px;display:inline-flex;background:var(--sunk);border-radius:12px;padding:3px;gap:2px}
.joinpage .jn-seg button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:9px;background:transparent;color:var(--ink2);border:0;cursor:pointer}
.joinpage .jn-seg button.on{background:var(--ink);color:var(--paper)}
.joinpage .jn-seg .s{display:none}
/* Mode B · the four fact cards (16/16/14 · eyebrow 9.5 · number 28/700 −.04em · line mono 10/1.5) and the record + line */
/* two by two (Lake 10/9: "Fix Commissioner overflowing its facts card"): the artboard's fourth card said Lake; Commissioner at 28px is 185px and
   four across the left column leave each value 126px (88 at 1024), so the cards pair up and every value keeps its 28px */
.joinpage .jn-facts{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;animation:llrise .3s ease both}
.joinpage .jn-fact{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:16px 16px 14px}
.joinpage .jn-fact .e{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.joinpage .jn-fact .n{font-weight:700;font-size:28px;letter-spacing:-.04em;line-height:1;margin-top:8px}
.joinpage .jn-fact .m{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--eyebrow);margin-top:8px}
.joinpage .jn-pfacts{display:none}
.joinpage .jn-pnote{display:none}   /* the 10/1 final review (F10): the phone-only copy of the drawn card's line — desktop reads it in the card */
.joinpage .jn-ground{margin-top:28px;display:flex;gap:16px;align-items:center;animation:llrise .3s ease both}
.joinpage .jn-ground .nm{font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1}
.joinpage .jn-ground .mo{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:8px;max-width:44ch}
.joinpage .jn-rec.paper{background:radial-gradient(circle,#F1EFEA 0 30%,#0B0B0D 30.5%)}.joinpage .jn-rec.paper svg{stroke:#111}
.joinpage .jn-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-top:4px}
.joinpage .jn-fields input.lname{font-weight:700}
.joinpage .jn-apply.b textarea{height:112px}
.joinpage .jn-help{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--eyebrow)}
/* the label grid */
.joinpage .jn-chips{display:none}
.joinpage .jn-grid{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.joinpage .jn-card{text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:12px;padding:14px 14px 12px;cursor:pointer;font-family:var(--disp);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;transition:border-color .12s}
.joinpage .jn-card:hover{border-color:var(--ink)}
.joinpage .jn-card.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.joinpage .jn-card .r1{display:flex;justify-content:space-between;align-items:center}
.joinpage .jn-card .dot{width:22px;height:22px;border-radius:50%;background:var(--t);display:grid;place-items:center}.joinpage .jn-card .dot svg{width:12px;height:12px;stroke:#fff}
.joinpage .jn-card .rk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;opacity:.7}
.joinpage .jn-card .nm{font-weight:700;font-size:calc(var(--fit,1) * 15px);letter-spacing:-.02em;line-height:1.1;min-height:34px}
.joinpage .jn-card .r3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;opacity:.75}.joinpage .jn-card .r3 span{white-space:nowrap}
/* the picked label — the record + the spines */
.joinpage .jn-pick{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;animation:llrise .3s ease both}
.joinpage .jn-rec{width:var(--sz,110px);height:var(--sz,110px);border-radius:50%;position:relative;background:radial-gradient(circle,var(--t) 0 30%,#0B0B0D 30.5%);box-shadow:0 18px 36px -18px rgba(0,0,0,.6);flex:none;animation:llspin 9s linear infinite}
.joinpage .jn-rec i{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2px,rgba(255,255,255,.05) 2px 3px);mask:radial-gradient(circle,transparent 0 31%,#000 32%);-webkit-mask:radial-gradient(circle,transparent 0 31%,#000 32%)}
.joinpage .jn-rec svg{position:absolute;inset:0;margin:auto;width:calc(var(--sz,110px) * .2);height:calc(var(--sz,110px) * .2);stroke:#fff}
.joinpage .jn-who{display:flex;gap:16px;align-items:center}
.joinpage .jn-who{min-width:0}.joinpage .jn-who>div{min-width:0}.joinpage .jn-who .nm{font-weight:700;font-size:calc(var(--fit,1) * 26px);letter-spacing:-.03em;line-height:1}
.joinpage .jn-who .mo{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:8px;font-style:italic}
.joinpage .jn-who .me{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--eyebrow);margin-top:10px}
.joinpage .jn-spines{display:flex;flex-direction:column;gap:6px}
.joinpage .jn-spine{height:34px;border-radius:3px;background:var(--t);color:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.joinpage .jn-spine svg{width:12px;height:12px;stroke:#fff;flex:none}.joinpage .jn-spine span{font-weight:700;font-size:calc(var(--fit,1) * 11px);--fit-floor:.7;letter-spacing:.14em;text-transform:uppercase;flex:1;white-space:nowrap}
.joinpage .jn-spine.empty{background:transparent;border:1px dashed var(--rule-strong);color:var(--mute);box-shadow:none}.joinpage .jn-spine.empty svg{stroke:var(--mute)}
/* the form card */
.joinpage .jn-form{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:28px 28px 26px;box-shadow:0 30px 60px -36px rgba(0,0,0,.35);position:sticky;top:20px}
.joinpage .jn-form .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.joinpage .jn-form .hd b{font-weight:700;font-size:22px;letter-spacing:-.03em}.joinpage .jn-form .hd .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);white-space:nowrap}
.joinpage .jn-fields{display:grid;gap:10px;margin-top:22px}
.joinpage .jn-fields input,.joinpage .jn-fields textarea{width:100%;height:50px;padding:0 16px;border-radius:12px;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-size:15px;outline:none;box-sizing:border-box;font-family:var(--disp)}
.joinpage .jn-fields input.mono{font-family:var(--mono);font-size:14px}
.joinpage .jn-fields textarea{height:132px;padding:14px 16px;line-height:1.5;resize:none}
.joinpage .jn-fields input:focus,.joinpage .jn-fields textarea:focus{border-color:var(--ink)}
.joinpage .jn-roles{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.joinpage .jn-roles button{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink2);font-family:var(--mono);font-size:10px;letter-spacing:.08em;cursor:pointer}
.joinpage .jn-roles button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.joinpage .jn-want{display:contents}   /* Lake 10/1: Which label? — the eyebrow + chips sit in the fields' grid like Solo or a team? */
.joinpage .jn-cta{margin-top:22px;width:100%;height:54px;border-radius:14px;background:var(--ink);color:var(--paper);border:0;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.joinpage .jn-cta:disabled{opacity:.5;cursor:default}
.joinpage .jn-err{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--ink);margin-top:-2px}
/* 54 · the consent line (10/8): under the email field, after its error line — a grid item in .jn-fields */
.joinpage .jn-consent{margin:-2px 0 2px;font:400 10px/1.5 var(--mono);color:var(--eyebrow)}
.joinpage .jn-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;padding:8px 0}
.joinpage .jn-mform .jn-consent{text-wrap:balance}   /* the artboard balances the phone's line ("… agree to the / Terms and the Privacy Policy."); the desktop card's isn't */
.joinpage .jn-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* the sent state · the full state */
.joinpage .jn-sent{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 16px;animation:llrise .3s ease both}
.joinpage .jn-sent .t{font-weight:700;font-size:30px;letter-spacing:-.035em;line-height:1;margin-top:26px}
.joinpage .jn-sent .m{font-size:14.5px;line-height:1.5;color:var(--ink2);margin-top:12px;max-width:30ch}
.joinpage .jn-sent .again{margin-top:26px;height:44px;padding:0 18px;border-radius:12px;background:transparent;color:var(--ink);border:1px solid var(--rule-strong);font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.joinpage .jn-sent .full{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:14px}
.joinpage .jn-mform,.joinpage .jn-thumb{display:none}
@media(min-width:1024px) and (max-width:1199px){.joinpage .jn{grid-template-columns:1fr 380px;gap:40px}.joinpage .jn-form .hd{flex-wrap:wrap;gap:6px 12px}}
/* ── phone (the 390 artboard, dark) ── */
@media(max-width:1023px){
  .joinpage .jn{display:block;padding:26px 22px 120px}
  .joinpage .jn-seg{margin-top:18px;background:var(--card);border:1px solid var(--rule);border-radius:10px}.joinpage .jn-seg button{font-size:9.5px;padding:8px 12px;border-radius:7px}
  .joinpage .jn-seg .l{display:none}.joinpage .jn-seg .s{display:inline}
  .joinpage .jn-facts,.joinpage .jn-ground{display:none}
  .joinpage .jn-pfacts{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px;animation:llrise .3s ease both}
  .joinpage .jn-pnote{display:block}
  .joinpage .jn-pfacts .jn-fact{padding:12px 14px}.joinpage .jn-pfacts .e{font-size:8.5px}.joinpage .jn-pfacts .n{font-size:22px;margin-top:6px}
  .joinpage #mformA{margin-top:8px}.joinpage #mformA .jn-fields textarea{height:96px}
  .joinpage .jn-thumb .jn-help{margin-top:8px;text-align:center}
  .joinpage .jn-eq{height:22px}.joinpage .jn-eq span:nth-child(n+27){display:none}
  .joinpage .jn-title{font-size:48px;margin-top:18px}
  .joinpage .jn-p{font-size:14px;margin-top:14px}
  .joinpage .jn-season{margin-top:16px;flex-direction:column;align-items:stretch;padding:14px 14px 12px}.joinpage .jn-season p{font-size:13.5px}.joinpage .jn-season .go{height:42px}
  .joinpage .jn-grid{display:none}
  .joinpage .jn-chips{display:flex;gap:6px;margin-top:22px;overflow-x:auto;scrollbar-width:none;padding-right:22px;margin-right:-22px}.joinpage .jn-chips::-webkit-scrollbar{display:none}
  .joinpage .jn-chip{flex:none;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:-.01em;cursor:pointer;white-space:nowrap}
  .joinpage .jn-chip i{width:16px;height:16px;border-radius:50%;background:var(--t);display:block}
  .joinpage .jn-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .joinpage .jn-pick{margin-top:22px;display:block}
  .joinpage .jn-spines{display:none}
  .joinpage .jn-who{gap:14px}.joinpage .jn-who .jn-rec{--sz:72px;box-shadow:0 18px 36px -18px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08)}
  .joinpage .jn-who>div{min-width:0}.joinpage .jn-who .nm{font-size:20px}.joinpage .jn-who .mo{font-size:12.5px;line-height:1.45;margin-top:6px}.joinpage .jn-who .me{font-size:9.5px;letter-spacing:.08em;margin-top:6px}
  .joinpage .jn-form{display:none}
  .joinpage .jn-mform{display:block;margin-top:18px}
  .joinpage .jn-mform .jn-fields{display:grid;gap:8px;margin-top:0}
  .joinpage .jn-mform .jn-fields input,.joinpage .jn-mform .jn-fields textarea{height:48px;padding:0 14px;font-size:14px;background:var(--card)}
  .joinpage .jn-mform .jn-fields input.mono{font-size:13px}
  .joinpage .jn-mform .jn-fields textarea{height:96px;padding:12px 14px;line-height:1.45}
  .joinpage .jn-mform .jn-fields .dsk{display:none}.joinpage .jn-mform .jn-roles{display:none}.joinpage .jn-mform .jn-roles.sz{display:flex}.joinpage .jn-mform .jn-help{display:none}
  .joinpage .jn-mform .jn-sent{padding:22px 0 0}.joinpage .jn-mform .jn-sent .t{font-size:26px}
  .joinpage .jn-thumb{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 22px calc(30px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);z-index:8}
  .joinpage .jn-thumb button{width:100%;height:52px;border-radius:14px;background:var(--ink);color:var(--paper);border:0;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .joinpage .jn-thumb button:disabled{opacity:.5}
}
/* 9/28: the Join side says nothing until the labels load — the static placeholder ("Eight labels are mid-season") and the empty state never flash; the space stays reserved */
.joinpage .jn[data-mode="join"]:not([data-ready="1"]) #jnP,.joinpage .jn[data-mode="join"]:not([data-ready="1"]) #form,.joinpage .jn[data-mode="join"]:not([data-ready="1"]) #mform{visibility:hidden}
/* 10/1 · STEP 9: the Apply side's season words arrive with /join/labels (the season toggle is gone) — no state claim until then; the form itself paints at once (9/28) */
.joinpage .jn[data-mode="apply"]:not([data-ready="1"]) #jnP,.joinpage .jn[data-mode="apply"]:not([data-ready="1"]) .jn-facts,.joinpage .jn[data-mode="apply"]:not([data-ready="1"]) .jn-pfacts,.joinpage .jn[data-mode="apply"]:not([data-ready="1"]) .jn-pnote,.joinpage .jn[data-mode="apply"]:not([data-ready="1"]) .jn-ground .mo{visibility:hidden}