/* The Transfer Desk (/join/): the public face of the Transfer Managers' work. Tokens only; the page sets data-sec="transfers" so the accent is the Transfers
   one (light #5B6B7B / dark #A3B4C6): the thin bar at the top, labels, countdown numbers, main buttons, selected choices and progress. Everything else is gray.
   Builds on onepage.css (labels, panels, the NAP 5 grid, icons). */
body.desk header.top .bar{grid-template-columns:1fr auto 1fr}
.back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:none;font:500 14px var(--f-body);border-radius:8px;padding:0 4px}
.back-link:hover{color:var(--accent)}
.back-link svg{width:20px;height:20px;flex:none}
@media (max-width:860px){body.desk .back-link span{display:none}body.desk header.top .hub-btn{display:none}body.desk header.top .bar{grid-template-columns:auto 1fr auto}body.desk header.top .l{gap:0}}
@media (min-width:861px){body.desk .menu-btn{display:none}}
.dk{padding:96px 0 72px;overflow-x:clip}
@media (max-width:860px){.dk{padding:72px 0 72px}}
.dk .wrap{max-width:1000px}
.dk h1{font-size:clamp(30px,4.4vw,44px);letter-spacing:-.02em}
.dk h2{font-size:clamp(24px,2.7vw,32px);letter-spacing:-.015em;line-height:1.2}
.dk .lede{color:var(--muted);max-width:60ch;margin:12px 0 0;font-size:17px}
.dk section.blk{padding:72px 0 0}
@media (max-width:820px){.dk section.blk{padding:52px 0 0}}
.dk .kick{margin:0 0 10px}
.dk .btn.gold{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dk .btn svg.ic{width:18px;height:18px;margin-left:8px}
.dk .btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.dk .tlink{color:var(--accent)}

/* ---------- next window banner ---------- */
.banner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top cd" "bot cd";gap:0 40px;align-items:start;margin-top:30px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.bn-top{grid-area:top}.bn-bot{grid-area:bot}.cdwrap{grid-area:cd;align-self:center}
@media (max-width:760px){.banner{grid-template-columns:1fr;grid-template-areas:"top" "cd" "bot";padding:20px}.cdwrap{min-width:0;margin-top:18px}}
.banner h2{font-size:clamp(26px,3.4vw,34px);margin:2px 0 0}
.banner .meta{color:var(--muted);margin:6px 0 0;font-size:15px}
.hl{display:inline-block;margin:16px 0 0;padding:10px 14px;border-radius:10px;background:var(--raised);font-size:15px;font-weight:500}
.banner .acts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:18px}
.banner .acts .btn.line{background:var(--surface)}
.cdwrap{min-width:280px}
.cdwrap .opens{font:600 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.cdrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cd{text-align:center;padding:14px 8px 10px;border-radius:12px;background:var(--raised)}
.cd b{display:block;font:800 clamp(26px,3.2vw,34px)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--accent)}
.cd small{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.cdwrap .sub{margin:10px 0 0;font-size:13px;color:var(--muted)}

/* ---------- three steps ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px}
.steps3>div{padding:2px 28px;display:flex;flex-direction:column;gap:6px}
.steps3>div:first-child{padding-left:0}.steps3>div:last-child{padding-right:0}
.steps3>div+div{border-left:1px solid var(--line)}
.steps3 .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 14px var(--f-display);margin-bottom:6px}
.steps3 h3{font:700 17px var(--f-display);margin:0}
.steps3 p{margin:0;color:var(--muted);font-size:15px}
.steps3 a{margin-top:6px;font-size:14.5px}
@media (max-width:760px){.steps3{grid-template-columns:1fr;gap:26px}.steps3>div,.steps3>div:first-child,.steps3>div:last-child{padding:0}.steps3>div+div{border-left:0;padding-top:24px;border-top:1px solid var(--line)}}

/* ---------- seats and windows ---------- */
.seatsgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px 64px;margin-top:6px}
@media (max-width:860px){.seatsgrid{grid-template-columns:1fr;gap:48px}}
.seatsgrid h2{margin:0}
.seatsgrid .txt{margin:8px 0 0;color:var(--muted)}
.sqs{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 6px;max-width:420px}
.sq{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--muted);background:transparent;display:block}
.sq.f{background:var(--fg);border-color:var(--fg)}
.sq.sp{border-color:var(--accent);border-width:2px}
.sq.sp.f{background:var(--accent)}
.sq.op{border-style:dashed;border-color:var(--line);width:16px}
.sqs .gap{flex-basis:100%;height:0}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.legend li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.legend li b{color:var(--fg);font-weight:600}
.legend .sq{margin-top:3px;flex:none}
.wlbox{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px;border:1.5px dashed var(--line);border-radius:12px}
.wlbox b{display:block;font:700 15px var(--f-display);margin-bottom:2px}
.wlbox p{margin:0;font-size:14.5px;color:var(--muted)}
.tline{list-style:none;margin:18px 0 0;padding:0 0 0 26px;position:relative}
.tline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tline li{position:relative;padding:0 0 22px}
.tline li:last-child{padding-bottom:0}
.tline .dot{position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);background:var(--bg)}
.tline li.sel .dot{background:var(--accent);border-color:var(--accent)}
.tline button.w{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;border-radius:8px}
.tline button.w:hover b.d{color:var(--accent)}
.tline b.d{font:700 15.5px var(--f-display)}
.tline .pill2{display:inline-block;margin-left:8px;font:600 11px var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--chip);color:var(--chip-ink);vertical-align:1px}
.tline .pill2.ann{background:var(--accent);color:var(--accent-ink)}
.tline small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.tline small.left{color:var(--fg);font-weight:500}
.srcnote{margin:18px 0 0;font-size:13px;color:var(--muted)}

/* ---------- alliances with room ---------- */
.rbadge{font:600 11px var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.rbadge.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.apick{gap:8px}
.apick .em img{border-radius:10px}

/* ---------- the form ---------- */
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media (max-width:760px){.choices{grid-template-columns:1fr}}
.choice{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.choice:hover{border-color:var(--muted)}
.choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice .ictile{width:40px;height:40px}
.choice b{display:block;font:700 15.5px var(--f-display)}
.choice small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.fcard{margin-top:22px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
@media (max-width:760px){.fcard{padding:18px}}
.fld{display:block;font:600 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 8px}
#qf>.hp+.two .fld{margin-top:0}
.fcard .in,.fcard select.in{background:var(--bg)}
.fcard .in{min-width:0}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);font:500 14.5px var(--f-body);color:var(--fg)}
.pchip .tagl{font-size:12px;color:var(--muted)}
.pchip.sel{border-color:var(--accent)}
.pchip button.rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;padding:0 4px;min-width:28px;min-height:28px;border-radius:6px}
.pchip.add{border-style:dashed;padding:0 16px;cursor:pointer;background:none}
.addrow2{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.addrow2 .in{flex:1 1 200px;max-width:320px}
.pdet{margin-top:12px;display:grid;gap:10px}
.pd{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pd .top{display:flex;gap:12px;align-items:center}
.pd .who{flex:1;min-width:0}.pd .who b{display:block;font:700 15px var(--f-display)}.pd .who small{color:var(--muted);font-size:13px}
.pd .st{display:block;font-size:13.5px;margin-top:2px}.st-ok{color:var(--ok);font-weight:600}.st-warn{color:var(--warn);font-weight:600}
.pd .lead{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-top:4px}.pd .lead input{accent-color:var(--accent)}
.pd .plan{margin-top:10px;padding:10px 12px;border-left:3px solid var(--warn);background:var(--surface);border-radius:0 8px 8px 0}
.pd .plan p{margin:0 0 8px;font-size:14px}
.moves{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.moves{grid-template-columns:1fr}}
.mcard{position:relative;display:block;text-align:left;width:100%;padding:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;transition:border-color .2s ease}
.mcard:hover:not([disabled]){border-color:var(--muted)}
.mcard[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mcard[disabled]{opacity:.62;cursor:not-allowed;background:var(--raised)}
.mcard .t{display:flex;align-items:center;gap:8px;font:700 16px var(--f-display)}
.mcard .t small{font:500 12px var(--f-body);color:var(--muted)}
.mcard p{margin:6px 0 0;font-size:14px;color:var(--muted);max-width:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font:500 14.5px var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.note2{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:var(--raised);font-size:14px;color:var(--muted);max-width:none}
.warn2{margin:10px 0 0;padding:10px 14px;border-radius:10px;border:1px solid var(--warn);font-size:14px;background:var(--surface);max-width:none}
.privnote{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;color:var(--muted);max-width:none}
.privnote svg.ic{width:16px;height:16px;margin-top:2px}
.err{color:var(--err);min-height:1.4em;margin-top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.asking{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 6px 6px 14px;border-radius:999px;background:var(--raised);font-size:14px}
.asking button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;min-width:32px;min-height:32px}
.done{border:1.5px solid var(--accent);border-radius:14px;padding:22px;background:var(--bg)}
.done h2{font-size:26px;margin:6px 0 8px}
.codebox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0;padding:14px 16px;border:1.5px dashed var(--accent);border-radius:10px;background:var(--surface)}
.codebox b{font:800 1.5rem var(--f-display);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.sx-copy{margin-left:6px;padding:3px 12px;min-height:30px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:600 .74rem var(--f-display);cursor:pointer}

/* ---------- your request (private) ---------- */
.res{margin-top:6px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.res .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.res .lab{font:600 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.res h3{font-size:clamp(24px,3vw,30px);margin:8px 0 8px}
.res .sent{color:var(--muted);margin:0;max-width:64ch}
.spill{font:700 11px var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--chip-ink)}
.spill.acc{background:var(--accent);color:var(--accent-ink)}
.prog{list-style:none;margin:22px 0 0;padding:0;display:flex;justify-content:space-between;position:relative}
.prog::before{content:"";position:absolute;left:5%;right:5%;top:15px;height:2px;background:var(--line)}
.prog li{position:relative;flex:1;text-align:center;font-size:12.5px;color:var(--muted)}
.prog li i{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;border:2px solid var(--line);background:var(--bg);font-style:normal;font-weight:700;font-size:12px;position:relative}
.prog li.sd i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.prog li.now i{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.prog li.now{color:var(--fg);font-weight:600}
.prog svg.ic{width:16px;height:16px}
.res .pchips{margin-top:20px}
.res .acts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:20px}
.res .msgbox{margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--raised);font-size:14.5px;max-width:none}
.res .msgbox b{display:block;font:600 11.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.signin2{display:grid;gap:10px}
.signin2 .two .in{max-width:none}
.hr2{border:0;border-top:1px solid var(--line);margin:22px 0}

/* ---------- what happens next ---------- */
.after{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.after li{padding:0 18px 0 0;position:relative}
.after .ictile{background:var(--surface);border:1px solid var(--line)}
.after li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:6px;height:2px;background:var(--line)}
.after h3{font:700 16px var(--f-display);margin:14px 0 4px}
.after p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:760px){.after{grid-template-columns:1fr;gap:22px}.after li:not(:last-child)::after{display:none}.after li{display:flex;gap:14px;padding:0}.after h3{margin:0 0 2px}}

/* ---------- the transfer team ---------- */
.team{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;height:100%;padding:20px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.tav{position:relative;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--raised);color:var(--muted);box-shadow:0 0 0 3px var(--ring,var(--line));overflow:hidden;margin-bottom:6px}
.tav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tav svg.ic{width:28px;height:28px}
.tcard b{font:700 15.5px var(--f-display)}
.tcard .m{color:var(--muted);font-size:13.5px}
.tcard .btn{margin-top:10px;width:100%}

/* ---------- misc ---------- */
.napbox{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:72px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.napbox .tx{flex:1;min-width:240px}.napbox b{display:block;font:700 17px var(--f-display)}.napbox p{margin:3px 0 0;color:var(--muted);font-size:15px}
.stick{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none}
.stick .btn{width:100%;box-shadow:0 6px 24px color-mix(in srgb,#000 22%,transparent)}
@media (max-width:760px){.stick.on{display:block}body.desk .site-foot{padding-bottom:84px}}
.faqnote{margin-top:14px}
.dk .pnl-c p{max-width:none}
.tagl{font-size:12px;color:var(--muted)}
.dk .cap{font-size:14px;color:var(--muted)}
.team li{display:flex}.tcard{width:100%}.tcard .btn{margin-top:auto}.tcard .m{min-height:1.2em}

/* ---------- ranking, split party, the acknowledgement ---------- */
.infonote{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:13px;color:var(--muted);max-width:60ch}
.infonote svg.ic{width:15px;height:15px;margin-top:2px}
.banner .infonote{margin-top:10px}
ol.rank{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
ol.rank li.rk{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);cursor:grab}
ol.rank li.rk.over{border-color:var(--accent)}
ol.rank li.rk.drag{opacity:.5}
ol.rank .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--raised);font:700 13px var(--f-display);flex:none}
ol.rank b{font:600 15px var(--f-body);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.rank .mv{display:flex;gap:4px;margin-left:auto}
ol.rank .mv button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);cursor:pointer}
ol.rank .mv button:disabled{opacity:.35;cursor:default}
ol.rank .mv svg.ic{width:18px;height:18px}
ol.rank li.cutline{display:flex;align-items:center;gap:10px;margin:2px 0;font:600 12.5px var(--f-display);letter-spacing:.02em;color:var(--accent);list-style:none}
ol.rank li.cutline::before,ol.rank li.cutline::after{content:"";flex:1;border-top:2px dashed var(--accent)}
ol.rank li.cutline span{max-width:70%;text-align:center}
.moves.three{grid-template-columns:repeat(3,1fr)}
.moves:has(#m-split:not([hidden])){grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.moves:has(#m-split:not([hidden])){grid-template-columns:1fr}}
.ack{display:flex;gap:12px;align-items:flex-start;margin:26px 0 8px;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;font-size:14.5px;max-width:none}
.ack input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin-top:1px}
.ack:has(input:checked){border-color:var(--accent)}
button.btn[disabled]{opacity:.5;cursor:not-allowed}
.splitnote{margin:16px 0 0;padding:14px 16px;border-radius:12px;border:1.5px solid var(--accent);background:var(--surface);font-size:15px;max-width:none}
.splitnote b{display:block;font:700 15px var(--f-display);margin-bottom:2px}
.parts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
@media (max-width:760px){.parts{grid-template-columns:1fr}}
.part{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.part .lab{font:600 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.part .big{font:700 15.5px var(--f-display);margin:0 0 10px}
.part .pchips{margin-top:0;display:grid;gap:8px}
.pchip .rkn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--raised);font:700 12px var(--f-display);flex:none}
.pchip small{display:block;color:var(--muted);font-size:12px;line-height:1.1}
.pchip .tx{display:flex;flex-direction:column;line-height:1.2}
#redit-box{margin-top:16px}

ol.rank .nm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
ol.rank .nm b{flex:none;max-width:100%}
ol.rank .tagl{margin:0}