/* Y2: prominence of the official-role picker. The grid is a mobile-friendly list that becomes a wrap at wider widths. */
.pf-rolegrid { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .25rem; }
@media (min-width: 540px) { .pf-rolegrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 820px) { .pf-rolegrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pf-role-opt { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid var(--line, #d8dce7); border-radius: .5rem; background: #fff; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.pf-role-opt:hover { border-color: #1b4db3; }
.pf-role-opt.on { border-color: #1b4db3; background: #eef3fb; box-shadow: inset 0 0 0 1px #1b4db3; }
.pf-role-opt input { accent-color: #1b4db3; }
#officialRoleBox { border-left: 4px solid #1b4db3; background: linear-gradient(0deg, rgba(27,77,179,.04), rgba(27,77,179,.07)); padding-left: 1rem; }

/* Public team page registration banner. */
.y2-reg-banner { background: #fff8dc; border: 1px solid #e6c74a; color: #624e05; padding: .75rem 1rem; border-radius: .5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.y2-reg-banner.closed { background: #fde3e3; border-color: #d33; color: #7a0e0e; }
.y2-reg-banner .y2-cta { margin-left: auto; }

/* Admin role chip on participants list. */
.ap-role-chip { display: inline-block; background: #eef3fb; color: #1b4db3; border: 1px solid #cfd9ee; padding: 1px 6px; border-radius: .35rem; font-size: .72rem; font-weight: 600; margin-top: 2px; }