/* Shared structural chrome. No page-specific navigation or floating tools. */
html[data-participant-shell] body { margin:0; background:var(--bb-canvas); color:var(--bb-ink); }
html[data-participant-shell] .participant-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; position:static; padding:24px 0; margin:0 0 32px; border:0; border-bottom:1px solid var(--bb-hairline-strong); border-radius:0; background:var(--bb-canvas); box-shadow:none; backdrop-filter:none; }
html[data-participant-shell] .participant-brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:600; text-decoration:none; color:inherit; white-space:nowrap; }
html[data-participant-shell] .participant-brand img { width:172px; height:auto; content:var(--bb-studies-logo); }
html[data-participant-shell] .participant-links { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px 24px; }
html[data-participant-shell] .participant-links a { color:var(--bb-text-2); padding:8px 0; font-size:14px; font-weight:500; text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
html[data-participant-shell] .participant-links a[aria-current=page] { color:var(--bb-ink); border-color:var(--bb-ink); }
html[data-participant-shell] .participant-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width:200px; gap:12px; }
html[data-participant-shell] .participant-controls select { max-width:180px; min-height:40px; font-size:14px; }
html[data-participant-shell] .participant-controls label > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html[data-participant-shell] .participant-controls :is(.public-locale-selector__label,label[for=locale]) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html[data-participant-shell] .participant-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; box-sizing:border-box; max-width:1200px; margin:48px auto 0; padding:24px 0 32px; border-top:1px solid var(--bb-hairline-strong); background:var(--bb-canvas); }
html[data-participant-shell] .participant-footer nav { display:flex; flex-wrap:wrap; gap:12px 24px; }
html[data-participant-shell] .participant-footer a { color:var(--bb-text-2); font-size:13px; text-decoration:none; line-height:1.6; }
html[data-participant-shell] .participant-footer a:hover { text-decoration:underline; }
html[data-participant-shell] .participant-section-nav { width:calc(100% - 64px); max-width:1200px; margin:0 auto 24px; }
html[data-participant-shell] body > .participant-header,html[data-participant-shell] body > .participant-footer { width:calc(100% - 64px); max-width:1200px; margin-inline:auto; }
html[data-participant-shell] :is(.portal,.overview-shell,.legal-shell,.booking-shell,.manage-shell,main.shell,#app.community) { max-width:1200px; }
@media(max-width:760px) {
  html[data-participant-shell] .participant-header { grid-template-columns:1fr auto; gap:16px; padding:20px 0 12px; margin-bottom:24px; }
  html[data-participant-shell] .participant-links { grid-column:1/-1; grid-row:2; justify-content:flex-start; gap:24px; }
  html[data-participant-shell] .participant-controls { grid-column:2; grid-row:1; }
  html[data-participant-shell] .participant-controls select { max-width:125px; }
  html[data-participant-shell] body > .participant-header,html[data-participant-shell] body > .participant-footer { width:calc(100% - 32px); }
  html[data-participant-shell] .participant-brand { font-size:18px; }
}

html[data-participant-shell] .participant-context { display:flex; flex-wrap:wrap; gap:16px; margin:0 auto 24px; max-width:1200px; }
html[data-participant-shell] body > .participant-context { width:calc(100% - 64px); }

html[data-participant-shell] .participant-context > * { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }

html[data-participant-shell] .participant-controls > * { min-width:0; max-width:100%; }
html[data-participant-shell] .participant-controls :is(select,.manage-locale-switch,.booking-locale-switch) { box-sizing:border-box; min-width:0; width:auto; }
@media(max-width:760px) { html[data-participant-shell] .participant-controls { max-width:125px; } html[data-participant-shell] .participant-controls select { width:100%; } }
html[data-participant-shell] .participant-controls :is([data-public-locale-selector],.public-locale-selector,#profileLocale,#payoutLocale,#bookingLocaleSelector,#manageLocaleSwitch) { box-sizing:border-box; min-width:0; max-width:100%; }
html[data-participant-shell] .participant-controls select { box-sizing:border-box; min-width:0!important; max-width:100%!important; width:100%!important; }

/* One page frame for every participant page, from the design tokens: the footer sits at the foot of the
   window on short pages, the header is the same height everywhere, every page's content starts the same
   distance below the header rule, and a title, its lead and the first action keep one rhythm. */
html[data-participant-shell] { --participant-page-top:calc(var(--bb-space-8) + var(--bb-space-4)); --participant-block-gap:var(--bb-space-8); }
html[data-participant-shell] body { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
html[data-participant-shell] body > main { flex:1 0 auto; padding-top:0!important; }
html[data-participant-shell] .participant-header { padding:var(--bb-space-6) 0!important; margin-bottom:var(--participant-page-top)!important; }
html[data-participant-shell] .participant-brand img { width:auto; height:29px; }
html[data-participant-shell] .participant-controls label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html[data-participant-shell] .participant-controls :is(div,span) { border:0!important; padding:0!important; background:none!important; box-shadow:none!important; }
html[data-participant-shell] .participant-controls select { border:0!important; border-radius:var(--bb-radius-capsule)!important; min-height:var(--bb-control)!important; padding-block:6px!important; padding-inline:12px 30px!important; background-color:var(--bb-fill-1)!important; box-shadow:inset 0 0 0 .5px var(--bb-hairline-strong)!important; color:var(--bb-ink)!important; font-size:var(--bb-text-footnote)!important; }
html[data-participant-shell] main :is(.hero,.intro,.page-heading,.overview,.layout,.unavailable-panel,.access-state):has(h1) { padding-top:0!important; margin-top:0!important; }
html[data-participant-shell] main :is(.hero,.intro,.page-heading):has(> h1) { padding-bottom:0!important; }
html[data-participant-shell] main :is(.unavailable-panel,.access-state) { padding-bottom:0!important; text-align:start!important; }
html[data-participant-shell] main :is(.hero,.intro,.page-heading,.overview,.unavailable-panel,.access-state) > h1 { margin:0 0 var(--bb-space-3)!important; font-size:var(--bb-text-display)!important; letter-spacing:var(--bb-tracking-display); line-height:var(--bb-leading-tight)!important; }
html[data-participant-shell] main :is(.hero,.intro,.page-heading,.overview,.unavailable-panel,.access-state) > h1 + p { margin-top:0!important; margin-bottom:0!important; }
html[data-participant-shell] main :is(.hero,.intro,.page-heading,.unavailable-panel,.access-state):has(> h1) { margin-bottom:var(--participant-block-gap)!important; }
html[data-participant-shell] main :is(.page-heading,.unavailable-panel,.access-state) :is(.actions,.button-row,.cta-row) { margin-top:var(--participant-block-gap)!important; }
html[data-participant-shell] body > [data-participant-footer] { margin-top:var(--participant-page-top)!important; }
/* The context row (status pill, back link) adds space only for what it shows: a pill hidden on a phone leaves no gap. */
html[data-participant-shell] .participant-context { margin-bottom:0!important; row-gap:0!important; }
html[data-participant-shell] .participant-context > * { margin-bottom:var(--bb-space-6)!important; }
@media(max-width:760px) {
  html[data-participant-shell] { --participant-page-top:var(--bb-space-8); --participant-block-gap:var(--bb-space-6); }
  html[data-participant-shell] .participant-header { padding:var(--bb-space-5) 0 var(--bb-space-3)!important; }
  html[data-participant-shell] .participant-brand img { height:clamp(22px, 7vw, 26px); }
  html[data-participant-shell] .participant-controls select { min-height:44px!important; }
  html[data-participant-shell] main :is(.hero,.intro,.page-heading,.overview,.unavailable-panel,.access-state) > h1 { font-size:var(--bb-text-title-1)!important; }
}
@media(max-width:359px) { html[data-participant-shell] .participant-controls { max-width:104px; } }
/* One drawn chevron for every participant select. Native arrows ignore padding (Safari draws its
   own about 7px from the edge), so the arrow now sits as far from the right edge as the text sits
   from the left. Forced-colour modes keep the native control. */
@media (forced-colors:none) {
  html[data-participant-shell] select:not([multiple]):not([size]), html[data-bb-design][data-participant-shell] select:not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select) { -webkit-appearance:none!important; appearance:none!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235a5f66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-position:calc(100% - 14px) 50%!important; background-size:12px 8px!important; background-repeat:no-repeat!important; padding-inline-end:38px!important; }
  html[data-participant-shell] :is([dir=rtl] select,select[dir=rtl]):not([multiple]):not([size]), html[dir=rtl][data-participant-shell] select:not([multiple]):not([size]), html[data-bb-design][data-participant-shell] :is([dir=rtl] select,select[dir=rtl]):not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select), html[dir=rtl][data-bb-design][data-participant-shell] select:not([multiple]):not([size]):not(:is(.phone-control,.project-context-control,.interface-language-control) select) { background-position:14px 50%!important; }
  html[data-participant-shell] .participant-controls select { padding-inline:14px 38px!important; }
}
/* The project overview kept its own narrower shell and an 82px top band, so its edges and title sat
   off the frame every other participant page shares. */
html[data-participant-shell] main.overview-shell { width:min(1200px,calc(100% - var(--bb-gutter) * 2))!important; margin-inline:auto!important; padding-top:0!important; }
html[data-participant-shell] .project-overview { padding-top:0!important; }
/* Section tabs (account, Refer & earn): every item is the same capsule; the selected one carries the bead. */
html[data-participant-shell] .dashboard-tabs { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0 0 var(--bb-space-8) !important; padding: 0; overflow-x: auto; scrollbar-width: none; }
html[data-participant-shell] .dashboard-tabs::-webkit-scrollbar { display: none; }
html[data-participant-shell] .dashboard-tabs button { flex: none; min-height: var(--bb-control) !important; height: var(--bb-control); padding: 0 var(--bb-space-4) !important; margin: 0; font-size: var(--bb-text-body) !important; font-weight: var(--bb-weight-medium) !important; white-space: nowrap; }
@media(max-width:760px) {
  html[data-participant-shell] .dashboard-tabs { margin-bottom: var(--bb-space-6) !important; margin-inline: -16px !important; padding-inline: 16px; }
}
/* Refer & earn renders its own tab row under the title; the shell's one-link row above it is not shown. */
html[data-participant-shell] .participant-section-nav { display:none!important; }