/* Participant account: one title, the email with Sign out, one row of tabs, then the view.
   Field visuals match the account inputs: fill, hairline border, 12px radius, 46px height. */
html[data-participant-shell] .account-intro { margin-bottom: var(--bb-space-6) !important; }
html[data-participant-shell] .account-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bb-space-2) var(--bb-space-4); margin: 0 !important; min-height: 21px; font-size: var(--bb-text-callout); }
html[data-participant-shell] .account-identity .muted { color: var(--bb-text-2); overflow-wrap: anywhere; }
html[data-participant-shell] .link-button { all: unset; cursor: pointer; color: var(--bb-ink); font-size: var(--bb-text-callout); font-weight: var(--bb-weight-medium); text-decoration: underline; text-decoration-color: var(--bb-hairline-strong); text-underline-offset: 3px; border-radius: 4px; }
html[data-participant-shell] .link-button:hover { text-decoration-color: currentColor; }
html[data-participant-shell] .link-button:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 3px; }

html[data-participant-shell] .account-view > h2:first-child, html[data-participant-shell] .profile-form > h2:first-child { margin-top: 0; }
html[data-participant-shell] .account-lead { margin: 0 0 var(--bb-space-6); max-width: 640px; }
html[data-participant-shell] .account-view .notice { padding: var(--bb-space-3) var(--bb-space-4); }

/* Profile form */
html[data-participant-shell] .profile-form { max-width: 640px; }
html[data-participant-shell] .profile-form h2 { font-size: var(--bb-text-title-3); margin: 0 0 var(--bb-space-5); }
html[data-participant-shell] .profile-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--bb-space-4); }
html[data-participant-shell] .profile-form .field { margin-bottom: 18px; }
html[data-participant-shell] .profile-form label.field[for] { display: block; margin-bottom: 8px; }
html[data-participant-shell] :is(#countryField, #languagesField) { margin-bottom: 18px; }
html[data-participant-shell] .field-group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
html[data-participant-shell] .field-group legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: var(--bb-weight-medium); color: var(--bb-ink); }
html[data-participant-shell] .field-group .optional { color: var(--bb-text-3); font-weight: var(--bb-weight-regular); }

/* Gender: radios drawn as chips; the native radio stays focusable for keyboards and screen readers. */
html[data-participant-shell] .choice-chips { display: flex; flex-wrap: wrap; gap: var(--bb-space-2); }
html[data-participant-shell] .choice-chip { position: relative; display: inline-flex; }
html[data-participant-shell] .choice-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
html[data-participant-shell] .choice-chip span { display: inline-flex; align-items: center; min-height: var(--bb-control); padding: 0 var(--bb-space-4); border-radius: var(--bb-radius-capsule); background: var(--bb-fill-1); box-shadow: inset 0 0 0 1px var(--bb-hairline-strong); font-size: var(--bb-text-body); font-weight: var(--bb-weight-medium); color: var(--bb-ink); transition: background var(--bb-fast) var(--bb-ease); }
html[data-participant-shell] .choice-chip:hover span { background: var(--bb-fill-2); }
html[data-participant-shell] .choice-chip input:checked + span { background: var(--bb-ink); color: var(--bb-on-ink); box-shadow: none; }
html[data-participant-shell] .choice-chip input:focus-visible + span { outline: 2px solid var(--bb-focus); outline-offset: 2px; }

/* Date of birth: three selects in the locale's order. */
html[data-participant-shell] .birth-date-parts { display: flex; gap: var(--bb-space-3); }
html[data-participant-shell] .birth-date-parts select { width: 100%; min-width: 0; flex: 1 1 0; }
html[data-participant-shell] .birth-date-parts [name=birth-day] { flex-grow: .75; }
html[data-participant-shell] .birth-date-parts [name=birth-month] { flex-grow: 1.6; }

/* Searchable fields (country, languages) */
html[data-participant-shell] .combo, html[data-participant-shell] .token-field { position: relative; }
html[data-participant-shell] .combo input[role=combobox] { width: 100%; }
html[data-participant-shell] .combo.has-lead input[role=combobox] { padding-inline-start: 44px !important; }
html[data-participant-shell] .combo-lead { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; pointer-events: none; }
html[data-participant-shell] .combo-list { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px); max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bb-canvas); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-shadow-menu), 0 0 0 1px var(--bb-hairline); }
html[data-participant-shell] .combo-list [role=option] { display: flex; align-items: center; gap: var(--bb-space-3); min-height: 40px; padding: 0 var(--bb-space-3); border-radius: var(--bb-radius-sm); font-size: var(--bb-text-callout); color: var(--bb-ink); cursor: pointer; }
html[data-participant-shell] .combo-list [role=option]:hover { background: var(--bb-fill-1); }
html[data-participant-shell] .combo-list [role=option][aria-selected=true] { background: var(--bb-fill-2); }
html[data-participant-shell] .combo-flag { font-size: 20px; line-height: 1; width: 24px; text-align: center; flex: none; }
html[data-participant-shell] .combo-empty { padding: var(--bb-space-3); color: var(--bb-text-2); font-size: var(--bb-text-body); }

/* Languages: pills inside one input-like box, followed by the search input. */
html[data-participant-shell] .token-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px; border: 1px solid var(--bb-hairline-strong); border-radius: var(--bb-radius-md); background: var(--bb-surface-1, rgb(247, 248, 247)); cursor: text; }
html[data-participant-shell] .token-field:focus-within { outline: 2px solid var(--bb-focus); outline-offset: 1px; }
html[data-participant-shell] .token-list { display: contents; list-style: none; }
html[data-participant-shell] .token { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding-inline: 12px 4px; border-radius: var(--bb-radius-capsule); background: var(--bb-canvas); box-shadow: var(--bb-shadow-bead); font-size: var(--bb-text-body); font-weight: var(--bb-weight-medium); color: var(--bb-ink); }
html[data-participant-shell] .token-remove { all: unset; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--bb-text-2); font-size: 17px; line-height: 1; cursor: pointer; }
html[data-participant-shell] .token-remove:hover { background: var(--bb-fill-2); color: var(--bb-ink); }
html[data-participant-shell] .token-remove:focus-visible { outline: 2px solid var(--bb-focus); }
html[data-participant-shell] .token-field input[role=combobox] { flex: 1 1 140px; min-width: 120px; min-height: 32px !important; height: 32px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 6px !important; outline: none; }
html[data-participant-shell] .token-field .combo-list { top: calc(100% + 6px); }

@media (max-width: 760px) {
  html[data-participant-shell] .profile-form .fields { grid-template-columns: 1fr; }
  html[data-participant-shell] .birth-date-parts { gap: var(--bb-space-2); }
  html[data-participant-shell] .choice-chip span { min-height: var(--bb-target); }
}