/* One frame for every participant page (interest registration, project page, booking): the study
   summary on the reading-start side, what people fill in or book beside it, and how the study works
   with its payment terms underneath. The boxes keep their size and place through every step and
   state, so nothing jumps. tests/harness/browser-participant-frame.mjs measures all three pages. */
html[data-bb-design] {
  --frame-soft: #f6f6f3; --frame-line: #deded8; --frame-surface: #fff; --frame-shadow: 0 6px 24px #0000000d;
}
/* The booking page follows the device's dark setting (bracketbridge-system.css); the frame follows it. */
@media (prefers-color-scheme: dark) {
  html[data-bb-design][data-bb-page='book'] {
    --frame-soft: var(--bb-surface-1); --frame-line: var(--bb-hairline-strong); --frame-surface: var(--bb-canvas); --frame-shadow: none;
  }
}
html[data-bb-design] .participant-frame {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-areas: "summary main" "details details";
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 32px 0 0;
}
/* participant-shell.css clears the top space of any panel holding the page heading (!important);
   inside the frame every box keeps its full padding. */
html[data-bb-design] .participant-frame > [data-participant-box] {
  min-width: 0;
  margin: 0 !important;
  padding: 32px !important;
  border: 1px solid var(--frame-line);
  border-radius: 20px;
  box-sizing: border-box;
}
html[data-bb-design] .participant-frame > [data-participant-box='summary'] { grid-area: summary; background: var(--frame-soft); }
html[data-bb-design] .participant-frame > [data-participant-box='main'] {
  grid-area: main;
  display: flex;
  flex-direction: column;
  background: var(--frame-surface);
  box-shadow: var(--frame-shadow);
}
html[data-bb-design] .participant-frame > [data-participant-box='details'] { grid-area: details; background: var(--frame-surface); box-shadow: var(--frame-shadow); }
html[data-bb-design] .participant-frame > [data-participant-box][hidden] { display: none !important; }

@media (max-width: 900px) {
  html[data-bb-design] .participant-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "main" "details";
    gap: 16px;
    margin-top: 20px;
  }
  html[data-bb-design] .participant-frame > [data-participant-box] { padding: 22px 18px !important; border-radius: 16px; }
}
@media (forced-colors: active) {
  html[data-bb-design] .participant-frame > [data-participant-box] { border-color: CanvasText; }
}

/* The bottom box: the published brief and its payment terms (shared/participant-brief-v1.js). */
html[data-bb-design] .participant-frame [data-participant-box='details'] { color: #292926; }
html[data-bb-design] .participant-frame .study-information-header { display: grid; gap: 10px; margin-bottom: 22px; }
html[data-bb-design] .participant-frame .study-information-header h2 { margin: 0; color: #24241f; font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
html[data-bb-design] .participant-frame .study-information-header p { max-width: 80ch; margin: 0; color: #4b4b47; font-size: 16px; line-height: 1.7; }
html[data-bb-design] .participant-frame .study-fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); gap: 14px; margin: 0 0 28px; }
html[data-bb-design] .participant-frame .study-fee-card { display: grid; gap: 5px; min-width: 0; padding: 18px 20px; border: 1px solid var(--frame-line); border-radius: 14px; background: var(--frame-soft); }
html[data-bb-design] .participant-frame .study-fee-card strong { color: #24241f; font-size: clamp(20px, 3vw, 26px); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
html[data-bb-design] .participant-frame .study-fee-card span { color: #65655e; font-size: 14px; line-height: 1.45; }
html[data-bb-design] .participant-frame .study-information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
html[data-bb-design] .participant-frame .study-information-card { min-width: 0; padding-top: 18px; border-top: 1px solid var(--frame-line); }
html[data-bb-design] .participant-frame .study-information-card h3 { margin: 0 0 9px; color: #292926; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
html[data-bb-design] .participant-frame .study-information-card p { margin: 0; color: #4b4b47; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  html[data-bb-design][data-bb-page='book'] .participant-frame [data-participant-box='details'],
  html[data-bb-design][data-bb-page='book'] .participant-frame :is(.study-information-header h2, .study-fee-card strong, .study-information-card h3) { color: var(--bb-ink); }
  html[data-bb-design][data-bb-page='book'] .participant-frame :is(.study-information-header p, .study-fee-card span, .study-information-card p) { color: var(--bb-text-2); }
}

/* Interest registration: every step, and the sent state, share one place in the form box. The box
   is as tall as the longest step, so moving between steps changes only what is inside it. */
html[data-bb-design][data-bb-page='study-application'] .step-heading { display: grid; }
html[data-bb-design][data-bb-page='study-application'] .step-heading > * { grid-area: 1 / 1; min-width: 0; }
html[data-bb-design][data-bb-page='study-application'] .step-heading-sizer { visibility: hidden; pointer-events: none; }
html[data-bb-design][data-bb-page='study-application'] :is(#step-title, .step-title-text) { margin: 0 0 10px; color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
html[data-bb-design][data-bb-page='study-application'][dir='rtl'] :is(#step-title, .step-title-text) { letter-spacing: 0; }
html[data-bb-design][data-bb-page='study-application'] #step-title:is(:focus, :focus-visible) { outline: none !important; }
html[data-bb-design][data-bb-page='study-application'] .step-body { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
html[data-bb-design][data-bb-page='study-application'] .step-body > #status { grid-area: 1 / 1; }
html[data-bb-design][data-bb-page='study-application'] .step-body > #status[data-final] { grid-row: 1 / 3; align-self: start; }
html[data-bb-design][data-bb-page='study-application'] .step-body > #application { grid-area: 2 / 1; display: flex; flex-direction: column; min-width: 0; }
html[data-bb-design][data-bb-page='study-application'] [data-concealed] { visibility: hidden; }
html[data-bb-design][data-bb-page='study-application'] .step-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
html[data-bb-design][data-bb-page='study-application'] #questions { display: contents; }
html[data-bb-design][data-bb-page='study-application'] :is(.step-stack > *, #questions > [data-step]) { grid-area: 1 / 1; min-width: 0; }
html[data-bb-design][data-bb-page='study-application'] [data-step-inactive] { visibility: hidden; }
html[data-bb-design][data-bb-page='study-application'] .form-actions { margin-top: auto; }
/* Back and Continue are one pair: same height, type and corners, so the row keeps its height when Back appears. */
html[data-bb-design][data-bb-page='study-application'] .form-actions :is(#back, #submit) { box-sizing: border-box; min-height: 50px; padding: 12px 24px; font-size: 16px; line-height: 24px; border-radius: 12px; }
html[data-bb-design][data-bb-page='study-application'] .name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
/* The dialling code sits before the number in both reading directions, as people write it. */
html[data-bb-design][data-bb-page='study-application'] .phone-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px; direction: ltr; }
html[data-bb-design][data-bb-page='study-application'] .phone-row select { text-overflow: ellipsis; }
@media (max-width: 900px) {
  /* On a phone the steps follow the page; a short step leaves no empty space. */
  html[data-bb-design][data-bb-page='study-application'] [data-step-inactive] { display: none; }
}
@media (max-width: 520px) {
  html[data-bb-design][data-bb-page='study-application'] .name-row { grid-template-columns: minmax(0, 1fr); }
  html[data-bb-design][data-bb-page='study-application'] .phone-row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
}
@media (max-width: 700px) {
  html[data-bb-design] .participant-frame .study-information-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[data-bb-design] .participant-frame .study-information-header { margin-bottom: 18px; }
  html[data-bb-design] .participant-frame .study-fee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
}
@media (forced-colors: active) {
  html[data-bb-design] .participant-frame :is(.study-fee-card, .study-information-card) { border-color: CanvasText; }
}