/* ==========================================================================
   Participation Step — Page-specific styles
   ========================================================================== */

.participation-step {
  animation: fade-up var(--duration-normal) var(--ease-out);
}

.participation-step__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  line-height: 1.2;
}

.participation-step__elements {
  display: flex;
  flex-direction: column;
}

.participation-step__advance {
  display: inline-flex;
}

.participation-complete__confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.participation-step__error {
  text-align: center;
  color: var(--status-error);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}

/* Element wrapper — Pattern 9 spacing via data-spacing attribute */
.participation-element {
  width: 100%;
}

.participation-element[data-spacing="none"] { margin-bottom: 0; }
.participation-element[data-spacing="sm"]   { margin-bottom: var(--space-3); }
.participation-element[data-spacing="md"]   { margin-bottom: var(--space-6); }
.participation-element[data-spacing="lg"]   { margin-bottom: calc(var(--space-6) + var(--space-3)); }
.participation-element[data-spacing="xl"]   { margin-bottom: var(--space-12); }

.participation-element__unknown-type {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.participation-element__preview-unavailable {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-default);
}

.participation-element__preview-unavailable-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.participation-element__preview-unavailable-icon {
  font-size: 16px;
  vertical-align: -3px;
}

/* Unsubscribe (Before-Transition) */
.participation-unsubscribe {
  text-align: center;
  padding: var(--space-2) 0;
}

.participation-unsubscribe__link {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}


/* Complete / GenerateReport shared chrome */
.participation-complete__icon {
  color: var(--status-success);
  font-size: 24px;
}

.participation-complete__spinner {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .participation-step {
    animation: none;
  }

  .participation-complete__spinner {
    animation: none;
  }
}

/* Question styles */
.participation-question {
  margin-bottom: var(--space-2);
}

.participation-question__text {
  font-family: var(--soul-font-prompt);
  font-weight: var(--soul-prompt-weight, 600);
  margin-bottom: var(--space-4);
}

/* Universal required-state marker — inline glyph (red asterisk → green
   check_circle when met) plus the configured exception text revealed
   inline when the .participation-step container has
   data-show-requirements="true". Source: _required_marker partial. */
.participation-required-marker {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: var(--space-1);
}
.participation-required-marker__icon {
  font-size: 1.05em;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 700;
  transition: color var(--duration-fast) var(--ease-out);
}
.participation-required-marker[data-met="false"] .participation-required-marker__icon {
  color: var(--status-error);
}
.participation-required-marker[data-met="true"] .participation-required-marker__icon {
  color: var(--status-success);
  animation: required-marker-pop var(--duration-normal) var(--ease-spring);
}
@keyframes required-marker-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.participation-required-marker__text {
  display: none;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1;
}
[data-show-requirements="true"] .participation-required-marker__text {
  display: inline;
}
.participation-required-marker[data-met="false"] .participation-required-marker__text {
  color: var(--status-error-text);
}
.participation-required-marker[data-met="true"] .participation-required-marker__text {
  color: var(--status-success-text);
}

.participation-question__privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--soul-font-chrome);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--surface-neutral);
  border-radius: var(--radius-full, 999px);
  padding: 2px 8px;
  margin-bottom: var(--space-3);
}
.participation-question__privacy .material-symbols-rounded {
  font-size: 16px;
}

.participation-question__input {
  width: 100%;
}

.participation-question__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}

.participation-question__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.participation-question__option:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
}

.participation-question__option:has(input:checked) {
  background: var(--accent-subtle);
  border-color: var(--accent-primary);
}

.participation-question__option-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* Complete button */
.participation-complete {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* Goto elements */
.participation-goto {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0;
}
/* form_with wraps the button; make it layout-transparent so the button is the
   flex item and its width:100%/max-width actually apply. */
.participation-goto > form { display: contents; }
.participation-goto .btn { width: 100%; max-width: 24rem; }

.participation-goto-menu__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-align: center;
}

/* Default + Stack: single-column full-width buttons (mobile-first) */
.participation-goto-menu__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 24rem;
  margin: 0 auto;
}
/* Each form_with wrapper is transparent so the button/card is the flex item */
.participation-goto-menu__options > form { display: contents; }
.participation-goto-menu__options .btn { width: 100%; }

/* Row: wrapping row on tablet+, single column on mobile */
@media (min-width: 768px) {
  .participation-goto-menu--row .participation-goto-menu__options {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }
  .participation-goto-menu--row .participation-goto-menu__options .btn { width: auto; }
}

/* Cards: tappable rows */
.participation-goto-menu__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  cursor: pointer;
}
.participation-goto-menu__card-icon { color: var(--accent-primary); }
.participation-goto-menu__card-text { flex: 1; font-weight: var(--weight-semibold); }
.participation-goto-menu__card-chevron { color: var(--text-tertiary); }

/* Discussion */
.participation-discussion {
  margin-bottom: var(--space-4);
}

.participation-discussion__thread {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.participation-discussion__entry {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.participation-discussion__entry:last-child {
  border-bottom: none;
}

/* File upload */
.file-upload {
  margin-bottom: var(--space-4);
}

.file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--duration-fast);
}

.file-upload--dragover .file-upload__dropzone {
  border-color: var(--accent-primary);
  background: var(--accent-subtle);
}

.file-upload__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.file-upload__browse {
  color: var(--accent-primary);
  cursor: pointer;
  font-weight: 600;
}

.file-upload__filename {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: var(--space-2);
}

/* Grid questions */
.participation-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.participation-grid table {
  min-width: 100%;
}

.participation-grid__row-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  padding-right: var(--space-4);
}

.participation-grid__col-header {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
  min-width: 80px;
}

.participation-grid__cell {
  text-align: center;
}

/* Drawing */
.participation-drawing {
  margin-bottom: var(--space-4);
}

.participation-drawing__pad {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.participation-drawing__pad canvas {
  touch-action: none;
}

.participation-drawing__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.participation-drawing__preview img {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

/* nomination styles moved to components/nomination-card.css and .nomination__* below */

/* Q-Web NOMINATION shell — form, preview, submitted states.
   Card styles live in components/nomination-card.css. */
.nomination { display: flex; flex-direction: column; gap: var(--space-6); }
.nomination__edit, .nomination__preview, .nomination__submitted,
.nomination__edit > form, .nomination__preview > form, .nomination__submitted > form {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.nomination__actions { display: flex; gap: var(--space-3); justify-content: flex-end; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); }

.nomination__preview-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--accent-subtle); border: 1px solid var(--accent-muted); border-radius: var(--radius-lg); color: var(--accent-hover); font-size: var(--text-sm); }
.nomination__preview-banner .material-symbols-rounded { color: var(--accent-primary); flex-shrink: 0; }
.nomination__preview-banner strong { display: block; font-weight: var(--weight-semibold); margin-bottom: 2px; }
.nomination__preview-card { max-width: 480px; margin: 0 auto; }

.nomination__celebration { padding: var(--space-12) var(--space-6); text-align: center; position: relative; overflow: hidden; }
.nomination__check { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--status-success-bg); border: 2px solid var(--status-success); color: var(--status-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); animation: nominationBounce var(--duration-slow) var(--ease-spring); }
.nomination__check .material-symbols-rounded { font-size: var(--text-3xl); font-variation-settings: 'wght' 600; }
@keyframes nominationBounce { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.nomination__celebration-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 32; font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); }
.nomination__celebration-sub { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-8); max-width: 480px; margin-left: auto; margin-right: auto; }
.nomination__reveal { margin: 0 auto var(--space-6); max-width: 360px; animation: nominationReveal var(--duration-slower) var(--ease-out) 200ms backwards; }
@keyframes nominationReveal { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* A-Web aggregated layout (.nom-agg*) MOVED to components/nomination-card.css.
   The nomination list partial is Multi-Use — it renders on the member/org
   dashboards and the /n permalink too, and this sheet is excluded from those
   bundles. Composition for a Multi-Use partial cannot live in a per-shell page
   bundle. Only the Q-Web `.nomination__*` shell above stays here: it renders
   on /p and nowhere else. */

/* Gauge */
.participation-gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Thank you page */
.participation-thank-you {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-6);
}

/* Terminal Doorway — celebrated completion + governed "Open Dashboard" CTA
   (Act 2). Uses DS tokens only. */
.thank-you__celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: var(--field-max-width-compact);
}
.thank-you__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-muted);
  color: var(--accent-primary);
}
.thank-you__check .material-symbols-rounded {
  font-size: 36px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
}
.thank-you__title {
  margin: 0;
  font-family: var(--soul-font-display);
  font-size: var(--text-2xl);
  font-weight: var(--soul-display-weight);
  letter-spacing: var(--soul-display-tracking);
  color: var(--text-primary);
}
.thank-you__cta {
  margin-top: var(--space-3);
}
.thank-you__cta .material-symbols-rounded { font-size: 20px; }
.thank-you__dismiss {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Responsive – small screens */
@media (max-width: 640px) {
  .participation-step__title {
    font-size: var(--text-xl);
  }

  .participation-question__option {
    padding: var(--space-3);
  }

  .participation-grid {
    font-size: var(--text-xs);
  }

}

/* ==========================================================================
   OBSERVATION — Chat-like multi-entry input
   ========================================================================== */

.participation-observation__composer {
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--space-4);
  padding: var(--space-1-5, 6px) var(--space-1-5, 6px) var(--space-1-5, 6px) var(--space-4);
  border: 1.5px solid var(--border-default);
  border-radius: 24px;
  background: var(--input-bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.participation-observation__composer:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.participation-observation__input {
  flex: 1;
  min-height: 28px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  resize: none;
  outline: none;
  line-height: 28px;
}

.participation-observation__input::placeholder {
  color: var(--input-placeholder, var(--text-secondary));
}

.participation-observation__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.participation-observation__send .material-symbols-rounded {
  font-size: 16px;
  font-weight: 600;
}

.participation-observation__send:hover {
  opacity: 0.85;
}

.participation-observation__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.participation-observation__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2-5, 10px) 0 var(--space-2-5, 10px) var(--space-3);
  border-left: 3px solid var(--border-default);
  position: relative;
}

.participation-observation__item + .participation-observation__item {
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}

.participation-observation__item[data-controller]:hover {
  border-left-color: var(--accent-primary);
}

.participation-observation__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.participation-observation__text {
  width: 100%;
  min-height: 0;
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow: hidden;
  padding: 0;
}

.participation-observation__actions {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 1px;
}

.participation-observation__boosts {
  display: flex;
  gap: 2px;
}

.participation-observation__boost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary, var(--text-secondary));
  cursor: pointer;
  padding: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.participation-observation__boost .material-symbols-rounded {
  font-size: 16px;
}

.participation-observation__boost:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
  color: var(--text-primary);
}

.participation-observation__boost--active.participation-observation__boost--star {
  color: var(--status-warning);
}

.participation-observation__boost--active.participation-observation__boost--growth {
  color: var(--status-success);
}

.participation-observation__attach,
.participation-observation__attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.participation-observation__attach-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary, var(--text-secondary));
  cursor: pointer;
  padding: 0;
  transition: all var(--duration-fast) var(--ease-out);
}
.participation-observation__attach-btn .material-symbols-rounded { font-size: 16px; }
.participation-observation__attach-btn:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
  color: var(--text-primary);
}
.participation-observation__attach--uploading .participation-observation__attach-btn {
  opacity: 0.5;
  pointer-events: none;
}

.participation-observation__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary, var(--text-secondary));
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.participation-observation__delete .material-symbols-rounded {
  font-size: 16px;
}

.participation-observation__item:hover .participation-observation__delete {
  opacity: 1;
}

.participation-observation__delete:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
  color: var(--status-error);
}

/* button_to wraps in a form — reset its display */
.participation-observation__boosts form,
.participation-observation__actions > form {
  display: inline-flex;
}

/* ── Observation per-row attachments — single inline row that wraps. ──── */
.participation-observation__attachments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-2);
}
.participation-observation__attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  margin-left: -2px; /* visual align to the text edge above */
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  max-width: 240px;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.participation-observation__attachment:hover {
  background: var(--surface-hover);
  color: var(--accent-primary);
}
.participation-observation__attachment-icon {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.participation-observation__attachment:hover .participation-observation__attachment-icon {
  color: var(--accent-primary);
}
.participation-observation__attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Readonly A-side row chrome (comment, meta) — extends the singular
      __item/__body namespace used by both Q-side input rows and the
      A-side aggregated journal. ────────────────────────────────────────── */
.participation-observation__comment {
  margin: 0;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
}

.participation-observation__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.participation-observation__sep {
  color: var(--text-tertiary);
}

.participation-observation__provider {
  font-weight: var(--weight-medium, 500);
  color: var(--text-secondary);
}

.participation-observation__timestamp {
  color: var(--text-tertiary);
}

/* RICH — Lexxy editor uses the .ds-lexxy-editor DS component
   (app/assets/stylesheets/components/lexxy.css). Participation needs the
   editor to fill its column; admin contexts let the surrounding flex layout
   size it (forcing display:block there breaks the toolbar/content frame).
   RUBRIC uses .ds-matrix--rubric (components/ds-matrix.css). */
.participation-question .ds-lexxy-editor {
  display: block;
  width: 100%;
}

/* Custom Grid planning — two-pane row/column editor */
.participation-twin-pane {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .participation-twin-pane { grid-template-columns: 1fr 1fr; }
}
.participation-twin-pane__pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.participation-twin-pane__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body-admin);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.participation-twin-pane__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.participation-twin-pane__entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.participation-twin-pane__entry input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-body-admin);
  font-size: var(--text-sm);
  color: var(--text-primary);
  padding: 0;
}
.participation-twin-pane__entry input:focus {
  outline: 1px solid var(--border-focus);
  outline-offset: var(--space-0-5);
}

.participation-question__comments,
.participation-question__uploads {
  margin-top: var(--space-4);
}

/* Nomination's edit form is a flex column with gap: var(--space-6). The
   wrappers' own margin-top stacks on the gap and double-spaces the section.
   Zero it out in this context — gap alone handles separation. */
.nomination__edit > form > .participation-question__comments,
.nomination__edit > form > .participation-question__uploads {
  margin-top: 0;
}

/* ==========================================================================
   Answer Element — Visualization + Details
   ========================================================================== */

.participation-answer__question-text {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}

.participation-answer__exception {
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Horizontal bar visualization ── */
.participation-viz-bars { margin-bottom: var(--space-4); }
.participation-viz-bars__row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.participation-viz-bars__label { font-size: var(--text-sm); font-weight: 600; text-align: right; }
.participation-viz-bars__track { height: 24px; background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.participation-viz-bars__fill { height: 100%; background: var(--accent-primary); border-radius: var(--radius-sm); transition: width 0.3s ease; min-width: 2px; }
.participation-viz-bars__count { font-size: var(--text-sm); color: var(--text-secondary); }

/* Card gallery visualization is now provided by the DS `.ds-color-gallery`
   component (components/option-rows.css). The answers view partials moved to
   the DS primitive in the SINGLE_CHOICE polish pass — stable answer ordering,
   semantic token palette, light/bright tone modes. */

/* Question UI (rubric with counts) migrated to .ds-matrix--rubric .ds-matrix--readonly. */

/* ── Answer details list ── */
.participation-answer__details { display: flex; flex-direction: column; gap: var(--space-3); }
.participation-answer__row { padding: var(--space-3); border: 1px solid var(--border-subtle, var(--border-default)); border-radius: var(--radius-md); }
.participation-answer__provider { font-weight: 600; font-size: var(--text-sm); color: var(--text-secondary); }
.participation-answer__value { margin-top: var(--space-1); }
.participation-answer__comment { font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; margin-top: var(--space-1); }
.participation-answer__timestamp { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── Boost icons in answer details ── */
.participation-detail__boost--star { color: var(--status-warning); font-size: 16px; }
.participation-detail__boost--growth { color: var(--status-success); font-size: 16px; }

/* ── Universal text answers aggregation — journal renderer (Question +
      Well visualization + details rendering for SC/MC/Grids/etc.).
      A consumer-grade reading thread: attribution is a BYLINE above the copy,
      the copy reads at base size, uploads sit inline beneath. Two chrome modes:
      --bare (Question pill / details, hairline-separated) and --cards (the
      "Well" visualization — one theme-neutral well per person's answer).
      Redesign 2026-07-24 (VC-locked); see docs/shapes/participation_answer_surface_knobs.md */
.participation-text-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* B3 — separate people read as separate */
}
.participation-text-answers--bare { gap: 0; }
.participation-text-answers__entry { padding: 0; }

/* "Well" chrome (the visualization formerly labeled Theme Cards): each answer
   is a theme-neutral well — --surface-sunken resolves slate on cool themes and
   stone on warm ones (modes/warm-theme-neutrals.css), so temperature is always
   honored. Fill only — no border, no shadow (A1). B4 = the well owns its inset. */
.participation-text-answers__entry--well {
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
/* Bare journal (Question pill / details beneath a chart): hairline-separated,
   no fill. */
.participation-text-answers__entry--bare {
  padding: var(--space-4) 0;
}
.participation-text-answers__entry--bare + .participation-text-answers__entry--bare {
  border-top: 1px solid var(--border-subtle);
}
.participation-text-answers__text {
  margin: 0;
  font-size: var(--text-base); /* B7 — long-form reading copy */
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* B7 — RICH is the long-form reading surface. Size to --text-base; leading is
   governed by components/prose.css (1.7), so no line-height override here. */
.participation-text-answers__rich {
  font-size: var(--text-base);
  color: var(--text-primary);
}
.participation-text-answers__comment {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-secondary);
}
/* BYLINE (C1/C2/C3) — attribution sits ABOVE the copy, the byline IS the
   separator, so no hairline/offset. Reads (--text-sm), doesn't hide. */
.participation-text-answers__meta {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.participation-text-answers__sep { color: var(--text-tertiary); }
.participation-text-answers__provider {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.participation-text-answers__date { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.participation-text-answers__timestamp {
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
}
.participation-text-answers__person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.participation-text-answers__person-icon {
  font-size: 20px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  padding: var(--space-1);
}
.participation-text-answers__person-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.participation-text-answers__person-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.participation-text-answers__person-org {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── UPLOAD: Gallery (Web) ──────────────────────────────────────────── */
/* B8 — uploads breathe under the copy (was --space-2). Top-only: the entry gap
   owns the space below. */
.participation-gallery {
  margin: var(--space-4) 0 0;
}

.participation-gallery--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .participation-gallery--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.participation-gallery--masonry {
  column-count: 2;
  column-gap: var(--space-2);
}
@media (min-width: 768px) {
  .participation-gallery--masonry {
    column-count: 4;
  }
}
.participation-gallery--masonry .participation-gallery__tile {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--space-2);
  width: 100%;
}

/* Stacked one-per-row — DRAWING-only. Width depends on canvas mode:
   Drawing fills the content section, Signature is half-width. */
.participation-gallery--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.participation-gallery--stack .participation-gallery__row {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.participation-gallery--stack .participation-gallery__row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* Width bands keyed off the canvas_mode persisted on each Answer.
   Mobile-first: base values apply <768px; desktop overrides apply ≥768px.
   Drawing → 100% / 80%   Signature → 65% / 35%   Legacy → 100% / 65% */
.participation-gallery--stack-drawing .participation-gallery__row {
  width: 100%;
}
.participation-gallery--stack-signature .participation-gallery__row {
  width: 65%;
}
.participation-gallery--stack-legacy .participation-gallery__row {
  width: 100%;
}
@media (min-width: 768px) {
  .participation-gallery--stack-drawing .participation-gallery__row {
    width: 80%;
  }
  .participation-gallery--stack-signature .participation-gallery__row {
    width: 35%;
  }
  .participation-gallery--stack-legacy .participation-gallery__row {
    width: 65%;
  }
}

/* DRAWING-scoped tile/row whiteout — drawing PNGs are intentionally saved
   with transparent backgrounds so the rendering surface controls the
   visible background (allowing a future dark theme or alternate canvas
   colors without re-encoding stored uploads). Forces white behind every
   gallery layout (grid / masonry / hero / stack) for DRAWING answers
   only; other types keep their default tile chrome. */
.participation-answer[data-question-type="DRAWING"] .participation-gallery__tile,
.participation-answer[data-question-type="DRAWING"] .participation-gallery__row,
.participation-answer[data-question-type="DRAWING"] .participation-gallery__hero,
.participation-answer[data-question-type="DRAWING"] .participation-gallery__thumb {
  background: var(--surface-base);
}

.participation-gallery--hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Hero stage — CONTAIN ON AMBIENT BLUR (H1, VC-locked 2026-07-24). A portrait
   photo is never cropped: it's contained in a fixed, orientation-agnostic stage
   whose empty space is the photo itself, scaled + blurred. The strip and the
   copy below never move on a thumbnail swap. The blurred backdrop is opaque, so
   the stage reads identically on the white sheet AND inside a sunken well.
   Stage height is a px clamp (mode-immune, per the shell geometry idiom) — it
   replaces the old raw 480px, not a new magic number. */
.participation-gallery__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(260px, 52vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--surface-sunken);
}
/* The ambient backdrop: the hero image itself, cover-filled, blurred, dimmed,
   set per-image via --hero-bg (gallery_hero_controller updates it on swap). */
.participation-gallery__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.3) brightness(0.85);
  transform: scale(1.2);
}
.participation-gallery__hero img {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
}
.participation-gallery__caption {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.participation-gallery__strip {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}
.participation-gallery__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: pointer;
}
.participation-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.participation-gallery__thumb--active {
  border-color: var(--accent-primary);
}

.participation-gallery__tile {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  padding: 0;
  /* B9 — a tile sitting ON a sunken well must read as an object, not dissolve
     into it. --surface-base is the white sheet regardless of theme temperature. */
  background: var(--surface-base);
  cursor: pointer;
  aspect-ratio: 1;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.participation-gallery__tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.participation-gallery__tile--natural {
  aspect-ratio: auto;
}
.participation-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.participation-gallery__tile--natural img {
  height: auto;
  object-fit: contain;
}

/* ── UPLOAD: Lightbox ────────────────────────────────────────────────── */
.participation-lightbox {
  width: min(95vw, 1400px);
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  background: var(--surface-base);
  border: 0;
  border-radius: var(--radius-lg);
  position: relative;
}
.participation-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}
.participation-lightbox__image {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: var(--text-primary);
}
.participation-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.participation-lightbox__nav:hover {
  background: rgba(0, 0, 0, 0.85);
}
.participation-lightbox__nav--prev { left: var(--space-3); }
.participation-lightbox__nav--next { right: var(--space-3); }
.participation-lightbox__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── UPLOAD: Files (Web) ────────────────────────────────────────────── */
/* B8 — top-only margin, matching the gallery. */
.participation-files {
  margin: var(--space-4) 0 0;
}
.participation-files--cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* A3/A4 (inline) — files render as a flat chip row on the sheet, no card
   container, no duplicate provider/date header (the answer byline already
   attributes). The aggregate/grouped block keeps the card treatment above. */
.participation-files--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.participation-files__card {
  padding: var(--space-3);
}
.participation-files__header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.participation-files__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.participation-files--stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.participation-files__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.participation-files__row:last-child { border-bottom: 0; }
.participation-files__row:hover { background: var(--surface-hover); }
.participation-files__name { flex: 1; }
.participation-files__size,
.participation-files__provider,
.participation-files__timestamp {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ── UPLOAD: File chip pill ─────────────────────────────────────────── */
.participation-file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--text-xs);
}
.participation-file-chip:hover { background: var(--surface-hover); }
.participation-file-chip__type {
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.participation-file-chip__name { font-weight: var(--weight-medium); }
.participation-file-chip__size { color: var(--text-tertiary); }

/* Type-color tints */
.participation-file-chip--pdf .participation-file-chip__type { color: var(--status-error); }
.participation-file-chip--doc .participation-file-chip__type,
.participation-file-chip--docx .participation-file-chip__type { color: var(--status-info); }
.participation-file-chip--xls .participation-file-chip__type,
.participation-file-chip--xlsx .participation-file-chip__type,
.participation-file-chip--csv .participation-file-chip__type { color: var(--status-success); }
.participation-file-chip--ppt .participation-file-chip__type,
.participation-file-chip--pptx .participation-file-chip__type { color: var(--status-warning); }
.participation-file-chip--zip .participation-file-chip__type { color: var(--text-tertiary); }
.participation-file-chip--mp4 .participation-file-chip__type,
.participation-file-chip--mov .participation-file-chip__type,
.participation-file-chip--webm .participation-file-chip__type { color: var(--accent-primary); }
.participation-file-chip--mp3 .participation-file-chip__type,
.participation-file-chip--wav .participation-file-chip__type { color: var(--accent-hover); }

/* ── File chip states (uploading / uploaded / error) ───────────────── */
.participation-file-chip {
  position: relative;
  overflow: hidden;
}

.participation-file-chip__thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.participation-file-chip__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-1);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.participation-file-chip__action .material-symbols-rounded {
  font-size: 16px;
}
.participation-file-chip__action:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.participation-file-chip--uploading {
  opacity: 0.9;
}

.participation-file-chip__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-subtle);
}
.participation-file-chip__progress-bar {
  height: 100%;
  background: var(--accent-primary);
  width: 0%;
  transition: width var(--duration-normal) var(--ease-out);
}

.participation-file-chip--uploaded {
  border-color: var(--status-success);
}
.participation-file-chip--uploaded .participation-file-chip__progress-bar {
  background: var(--status-success);
}

.participation-file-chip--error {
  border-color: var(--status-error);
  background: var(--status-error-bg);
  color: var(--status-error-text);
}
.participation-file-chip__error-icon {
  font-size: 16px;
  color: var(--status-error);
  flex-shrink: 0;
}
.participation-file-chip__error-msg {
  color: var(--status-error-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ── Upload dropzone (universal Q Web attachment widget) ───────────── */
.participation-upload-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-base);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.participation-upload-dropzone:hover {
  border-color: var(--border-strong);
}
.participation-upload-dropzone--dragover {
  border-color: var(--accent-primary);
  background: var(--accent-subtle);
}

.participation-upload-dropzone__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Hide the chips container when there are no chip children. `:empty` doesn't
   match because ERB output leaves whitespace inside the div; `:not(:has(*))`
   matches whether or not whitespace is present. */
.participation-upload-dropzone__chips:not(:has(*)) {
  display: none;
}

.participation-upload-dropzone__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-out);
}
.participation-upload-dropzone__zone:hover {
  background: var(--surface-hover);
}

.participation-upload-dropzone__icon {
  font-size: 22px;
  color: var(--text-tertiary);
}

.participation-upload-dropzone__browse {
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

/* ── Observation row attachments (chips below textarea) ────────────── */
.participation-observation__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
}

/* PERSON / ORGANIZATION question — single-pick async member/org picker
   Reuses .membership-picker primitives. The wrapper is just a positioning
   anchor so the picker dropdown can absolute-position relative to it. */
.participation-person {
  position: relative;
}

.participation-person__org-meta {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* Server-side validation error toast — prepended into #question-{id} on
   422 from AnswersController. Auto-dismisses on next input/change inside
   the same Q-Element (answer_error_controller). */
.participation-answer-error {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--status-error-bg);
  border: 1px solid var(--status-error);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  color: var(--status-error-text);
}

.participation-answer-error__msg {
  margin: 0;
  font-size: var(--text-sm);
}

.participation-answer-error__msg + .participation-answer-error__msg {
  margin-top: var(--space-1);
}

/* ── Requirements Pill — small icon-only entrypoint that lives inside
   .participation-footer__nav, immediately to the left of the Next button.
   Click opens a dropdown that drops UP (away from the bottom toolbar) showing
   per-category counts. "Show all requirements" closes the dropdown and toggles
   the inline exception-text slots beneath each required input. Source:
   shared/_requirements_pill partial; behavior in requirements_pill_controller.js. ── */
.participation-requirements-pill {
  position: relative;
  display: inline-flex;
}
.participation-requirements-pill__trigger {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid currentColor;
  background: var(--surface-base);
  cursor: pointer;
  transition: 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);
}
[data-state="unmet"] > .participation-requirements-pill__trigger {
  color: var(--status-error);
  background: var(--status-error-bg);
}
[data-state="met"] > .participation-requirements-pill__trigger {
  color: var(--status-success);
  background: var(--status-success-bg);
}
.participation-requirements-pill__trigger:hover {
  transform: scale(1.05);
}
.participation-requirements-pill__glyph {
  font-size: 18px;
  line-height: 1;
  display: block;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

.participation-requirements-pill__dropdown {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  min-width: 240px;
  max-width: min(360px, calc(100vw - var(--space-6)));
  padding: var(--space-2);
  background: var(--surface-overlay, var(--surface-base));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: var(--z-dropdown);
}
.participation-requirements-pill__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.participation-requirements-pill__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.participation-requirements-pill__row[data-met="true"] .participation-requirements-pill__row-icon {
  color: var(--status-success);
}
.participation-requirements-pill__row[data-met="false"] .participation-requirements-pill__row-icon {
  color: var(--status-error);
}
.participation-requirements-pill__row-icon {
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
}
.participation-requirements-pill__row-label {
  font-weight: var(--weight-medium);
}
.participation-requirements-pill__reveal-toggle {
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.participation-requirements-pill__reveal-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Inline exception-text slots are now merged into .participation-required-marker
   (block earlier in this file). The standalone _required_message partial was
   deleted. */

/* Comments are always the member's sans voice, even under a RICH (serif) answer. */
.participation-question__comments .form-textarea { font-family: var(--soul-font-answer); }

/* Answer gallery surfaces follow the soul control radius. */
.participation-gallery [class*="participation-gallery--"] { border-radius: var(--soul-radius-control, 10px); }

/* ── Answer Element participant editing (edit deck + trailing pencil) ── */
.participation-edit-deck{border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md),0 0 0 3px var(--accent-subtle);overflow:hidden;margin-top:var(--space-3)}
.participation-edit-deck__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-page-translucent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.participation-edit-deck__title{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--accent-primary)}
.participation-edit-deck__title .material-symbols-rounded{font-size:20px}
.participation-edit-deck__pager{display:inline-flex;align-items:center;gap:var(--space-1)}
.participation-edit-deck__count{font-size:var(--text-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums;padding:0 var(--space-1)}
.participation-edit-deck__body{padding:var(--space-4)}
.participation-edit-deck__actions{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-subtle);background:var(--surface-base)}
.participation-answer__edit-bar{display:flex;justify-content:flex-end;margin-bottom:var(--space-2)}
.participation-answer__edit-btn{color:var(--text-secondary)}
.participation-answer__edit-btn:hover,.participation-answer__edit-btn:focus-visible{color:var(--accent-primary)}

/* ── Participation typography (R7.4 / BS-7 / Fix-1) ───────────────────────
   Default: sans + full-width on the reader Stage. Serif/narrow reading style
   is a per-Content-element opt-in via .rich-text--reading (not shell soul). */
.shell[data-shell-context="participation"] :where(
  .rich-text:not(.rich-text--reading),
  .participation-text-answers__rich
) {
  font-family: var(--font-body-participant);
  max-width: none;
}

.shell[data-shell-context="participation"] .rich-text--reading {
  font-family: var(--font-serif, 'Newsreader', Georgia, serif);
  line-height: 1.72;
  max-width: var(--rich-text-measure, 62ch);
  background: var(--surface-neutral);
  padding: var(--space-4);
  border-radius: var(--radius-xl, 16px);
}