.shell[data-shell-context="participation"] {
  --dock-content-max-width: var(--participation-max-width);
}
.shell[data-shell-context="participation"] .shell__dock {
  display: flex;
}

/* The legacy participation header is superseded by the Crown grammar
   (shell/shell.css). The Dock and container rules below stay. */

/* The footer button steps DOWN to fit the Crown-matched bar, keeping its
   breathing room — it does not fill the bar (user correction 2026-07-23). The
   Dock shrank from 64px to the 48px Crown height, so btn--lg (44px) would sit
   with only ~2px above/below; instead the button drops to ~36px and centres
   with ~6px of padding each side (the button is smaller, the padding is kept).
   Scrolled, it steps down again for the 40px bar. Both transition with the
   scroll-shrink. Overrides btn--lg by specificity (0,2,0 > 0,1,0). */
.shell__dock .btn {
  min-height: 0;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-base);
  transition: min-height var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out),
              font-size var(--duration-normal) var(--ease-out);
}
.shell.shell--shrunk .shell__dock .btn {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
}

/* The Requirements pill scales with the scroll-shrink too — it is NOT a .btn,
   so the rule above misses it, and it sat at full size while Back/Next shrank
   (user catch 2026-07-23). Resize the trigger + glyph on the dock's own
   duration so all three footer zones shrink together. */
.shell__dock .participation-requirements-pill__trigger {
  transition: width var(--duration-normal) var(--ease-out),
              height var(--duration-normal) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.shell__dock .participation-requirements-pill__glyph {
  transition: font-size var(--duration-normal) var(--ease-out);
}
.shell.shell--shrunk .shell__dock .participation-requirements-pill__trigger {
  width: 24px;
  height: 24px;
}
.shell.shell--shrunk .shell__dock .participation-requirements-pill__glyph {
  font-size: 15px;
}

/* ── Participation footer (Dock) — Back · Requirements · Next ──────────────
   Requirements is anchored to the FOOTER CENTRE (1fr auto 1fr), not equal
   thirds: Back owns the left half, Next the right half. So Next grows with its
   label up to its half before it must clip, instead of being capped at a third
   and bleeding off both edges (user ruling 2026-07-23). Requirements is
   dead-centre in EVERY config — Back present or not — because both 1fr tracks
   are equal. The child justify (start/centre/end) stays in zones.css; this only
   re-columns the grid. Higher specificity than the generic thirds rule, and it
   loads after zones.css in CSS_BUNDLE, so these columns win. */
.shell__dock--thirds .shell__dock-content.participation-footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
}
/* No overflow:hidden on the zone — clipping lives on the button label below, so
   the Requirements dropdown (absolutely positioned) is free to escape upward. */
.participation-footer__zone {
  min-width: 0;
}
.participation-footer__zone--next .participation-step__advance {
  max-width: 100%;
  min-width: 0;
}
/* The Next/Back button grows to its zone's width, then the LABEL clips with a
   left-aligned ellipsis — a long label never bleeds past the button edges. The
   label is a span so text-overflow lands on a flex item reliably (the button is
   an inline-flex .btn that would otherwise centre and spill its text). */
.participation-footer__btn {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.participation-footer__btn-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Web Delivery Method step body is the Stage's single `paper` zone: the
   reader Stage centers it at the content measure, .shell__zone--paper (zones.css)
   paints the bordered white sheet, and only its LAYOUT is set here. It keeps the
   full workspace height — the step panel fills to the Dock as it always has, so
   it overrides the zone default (align-self: start) — and bleeds to the screen
   edges on phones (the panel's border/radius drop, matching the original mobile
   step). Surface tokens live with the style in zones.css, never here.

   (Corrects the prior transparent/full-width rule: the step's card was dropped
   during Shell polish on the mistaken belief the Stage owns the surface — the
   Stage owns inset and centering, never the surface style. Restored as `paper`,
   2026-07-23.) */
.participation-container {
  align-self: stretch;
  min-height: 100%;
}
/* B5 (VC-locked 2026-07-24) — a reading sheet needs more inset than a dashboard
   tile. Scoped to the participation step body ONLY (the shared --zone-pad on
   .shell__zone still governs EE preview + coach dashboard paper zones). */
.participation-container.shell__zone--paper {
  --zone-pad: clamp(16px, 3vw, 28px);
}
@media (max-width: 640px) {
  .participation-container.shell__zone--paper {
    margin-left: calc(-1 * var(--content-pad));
    margin-right: calc(-1 * var(--content-pad));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}