/* VRS invites (docs/design/vrs-invites.html), and the "Who gets the seats" section on an event page. */
.vi-say{margin:.55rem 0 0;color:var(--text-2);max-width:78ch;font-size:.97rem}
.vi-say b{color:var(--text);font-weight:600}
.vi-none{color:var(--muted);margin:2rem 0 0}
.vi-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:1.2rem 0 .45rem}
.vi-k--list{color:var(--text-2)}
.vi-list+.vi-list{margin-top:.4rem}

/* seats */
.vi-seats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vi-seat{position:relative;width:54px;height:54px;display:grid;place-items:center;background:var(--rc);flex:none}
.vi-seat img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.vi-seat b{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:#06090c}
.vi-seat i{position:absolute;bottom:2px;right:3px;font-style:normal;font-family:var(--mono);font-size:.66rem;color:#06090c;font-weight:700}
.vi-seat.ghost,.vi-seat.qual{background:transparent;box-shadow:inset 0 0 0 2px var(--rc)}
.vi-seat.back{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);width:42px;height:42px}
.vi-seat.back img{width:26px;height:26px;opacity:.75}
.vi-seat.ghost b,.vi-seat.qual b,.vi-seat.back b{color:var(--text)}
.vi-seat.ghost i,.vi-seat.qual i,.vi-seat.back i{color:var(--muted-2)}
.vi-seat.me{outline:3px solid #fff;outline-offset:2px;z-index:1}
@media(max-width:640px){.vi-seat{width:44px;height:44px}.vi-seat img{width:28px;height:28px}.vi-seat.back{width:36px;height:36px}.vi-seat.back img{width:22px;height:22px}}

/* the picker */
.vi-pick{margin-top:2rem;padding:1.3rem 0 1.4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vi-pick__h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.vi-pick__t{font-family:var(--disp);font-weight:700;font-size:1.5rem;text-transform:uppercase}
.vi-pick input{flex:1;min-width:12rem;max-width:22rem;background:var(--panel);border:1px solid rgba(255,255,255,.18);color:var(--text);font:inherit;font-size:16px;padding:.6rem .8rem;min-height:44px}
.vi-pick input:focus{outline:2px solid var(--sys);outline-offset:0}
.vi-pick__x{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:var(--muted-2);cursor:pointer;min-height:44px}
.vi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem}
.vi-chips button{width:44px;height:44px;display:grid;place-items:center;background:var(--panel);border:0;cursor:pointer;padding:0;box-shadow:inset 0 -3px 0 var(--rc)}
.vi-chips button img{width:28px;height:28px;object-fit:contain}
.vi-chips button b{font-family:var(--disp);color:var(--text)}
.vi-chips button:hover{background:#1a2029}
.vi-chips button.on{background:var(--rc)}
.vi-mc{margin-top:1.4rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem 2rem}
@media(max-width:760px){.vi-mc{grid-template-columns:1fr}}
.vi-mc__id{display:flex;align-items:center;gap:1rem}
.vi-mc__r{font-family:var(--disp);font-weight:700;font-size:5.6rem;line-height:.8;letter-spacing:-.05em;color:var(--rc)}
.vi-mc__l img{object-fit:contain;display:block}
.vi-mc__l b{display:grid;place-items:center;width:64px;height:64px;background:var(--rc);color:#06090c;font-family:var(--disp);font-size:2rem}
.vi-mc__n{display:block;font-family:var(--disp);font-weight:700;font-size:2rem;text-transform:uppercase;line-height:.95;color:var(--rt)}
.vi-mc__s{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted-2);margin-top:.3rem}
.vi-mc__s b{color:var(--text-2);font-weight:400}
.vi-mrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.45rem 0;border-top:1px solid var(--line)}
.vi-mrow:first-child{border-top:0}
.vi-mrow img{width:26px;height:26px;object-fit:contain}
.vi-mrow__n{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.02rem;line-height:1.1;min-width:0}
.vi-mrow__n small{display:block;font-family:var(--mono);font-weight:400;text-transform:none;font-size:.7rem;color:var(--muted-2)}
.vi-st{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;white-space:nowrap;text-align:right}
.vi-st.in{background:var(--rc);color:#06090c}
.vi-st.q{box-shadow:inset 0 0 0 2px var(--rc);color:var(--text)}
.vi-st.line{color:#ffd23f;box-shadow:inset 0 0 0 1px rgba(255,210,63,.5)}
.vi-st.no{color:var(--muted-2)}
.vi-st.big{font-family:var(--disp);font-size:1.5rem;letter-spacing:0;padding:0 .2rem;color:var(--text)}

/* open invitations */
.vi-opens{display:flex;flex-direction:column;gap:3.2rem;margin-top:2.4rem}
.vi-oc__head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.vi-ev{width:44px;height:44px;object-fit:contain}
.vi-oc__n{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);text-transform:uppercase;line-height:1}
a.vi-oc__n:hover{text-decoration:underline}
.vi-dt{font-family:var(--mono);font-size:.74rem;color:var(--muted-2)}
.vi-badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .55rem;white-space:nowrap}
.vi-badge.t1{background:var(--sys);color:#140701}
.vi-badge.t2{color:#ffb08a;box-shadow:inset 0 0 0 1px rgba(255,92,26,.6)}
.vi-badge.mj{background:#fff;color:#000}

/* the ladder: who is in on the list still to come, in our runs */
.vi-lad{margin-top:1.4rem;max-width:920px}
.vi-lad__t{font-family:var(--disp);font-weight:700;font-size:1.25rem;text-transform:uppercase;margin-bottom:.4rem}
.vi-lad__t em{font-style:normal;color:var(--sys)}
.vi-lr{display:grid;grid-template-columns:2.6rem minmax(0,12rem) minmax(0,1fr) 3.6rem;gap:.7rem;align-items:center;padding:.28rem 0}
@media(max-width:640px){.vi-lr{grid-template-columns:2.2rem minmax(0,1fr) 3.2rem}.vi-lr__bar{grid-column:1/-1;grid-row:2}}
.vi-lr__w{font-family:var(--disp);font-weight:700;font-size:1.2rem;text-align:right;color:var(--muted-2)}
.vi-lr__n{font-family:var(--disp);font-weight:600;font-size:1.05rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi-lr__bar{height:12px;background:rgba(255,255,255,.06);position:relative}
.vi-lr__bar span{position:absolute;inset:0 auto 0 0;background:var(--rc)}
.vi-lr__p{font-family:var(--disp);font-weight:700;font-size:1.25rem;text-align:right}
.vi-lr.me{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 #fff}
.vi-lad__cut{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sys-text);margin:.2rem 0}
.vi-lad__cut::after{content:"";flex:1;border-top:2px dashed var(--sys);opacity:.7}

/* the Major */
.vi-majs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;margin-top:1.2rem}
@media(max-width:820px){.vi-majs{grid-template-columns:1fr}}
.vi-maj__h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--rc);padding-bottom:.3rem;gap:.6rem}
.vi-maj__h b{font-family:var(--disp);font-weight:700;font-size:1.25rem;text-transform:uppercase;color:var(--rt)}
.vi-maj__h span{font-family:var(--mono);font-size:.68rem;color:var(--muted-2)}
.vi-mr{display:flex;align-items:center;gap:.6rem;padding:.3rem 0}
.vi-mr__k{font-family:var(--disp);font-weight:700;font-size:1.5rem;width:2.1rem;text-align:right;color:var(--rt);line-height:1}
.vi-mr__n{font-family:var(--disp);font-weight:600;font-size:1.1rem;text-transform:uppercase;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi-mr__p{font-family:var(--disp);font-weight:700;font-size:1.3rem}
.vi-mr.out .vi-mr__k{color:var(--muted-2)}
.vi-mr.me{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 #fff}
.vi-mline{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rt);margin:.15rem 0}
.vi-mline::after{content:"";flex:1;border-top:2px solid var(--rc)}
.vi-go{display:inline-block;margin-top:1.2rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:var(--sys);color:#140701;padding:.75rem 1.2rem;clip-path:var(--pill)}

/* later and settled */
.vi-later{display:flex;flex-wrap:wrap;gap:1rem 2.4rem}
.vi-later__i{display:flex;align-items:center;gap:.7rem}
.vi-later__i img{width:32px;height:32px;object-fit:contain}
.vi-later__n{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.1rem;line-height:1}
.vi-later__s{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted-2)}
.vi-dn{border-top:1px solid var(--line)}
.vi-dn:last-child{border-bottom:1px solid var(--line)}
.vi-dn summary{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr);gap:.8rem;align-items:center;padding:.75rem 0;cursor:pointer}
.vi-dn summary::-webkit-details-marker{display:none}
.vi-dn summary img{width:28px;height:28px;object-fit:contain}
.vi-dn__n{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.1rem;line-height:1.05}
.vi-dn__m{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted-2);margin-top:.15rem}
.vi-dn[open] summary .vi-dn__n{color:var(--sys-text)}
.vi-dn.me>summary .vi-dn__n::after{content:"  ·  your team plays";color:var(--text);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em}
.vi-dn__body{padding:0 0 1.1rem 2.6rem}
@media(max-width:560px){.vi-dn__body{padding-left:0}}
.vi-passed{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-size:.92rem;color:var(--text-2)}
.vi-passed b{font-family:var(--disp);color:var(--muted-2);margin-right:.2rem}
.vi-passed li.me{color:var(--text);box-shadow:inset 0 -2px 0 #fff}
.vi-more-line{margin:1rem 0 0}
.vi-more{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sys-text)}
.vi-key{display:flex;gap:1.3rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted-2);margin-top:1rem}
.vi-key span{display:inline-flex;align-items:center;gap:.45rem}
.vi-key s{display:inline-block;width:12px;height:12px;background:var(--text-2)}
.vi-key s.q{background:transparent;box-shadow:inset 0 0 0 2px var(--text-2)}
