.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);
}

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

.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-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.participation-audio {
  display: block;
  width: 100%;
}

.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;
}

.participation-unsubscribe {
  text-align: center;
  padding: var(--space-2) 0;
}

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

.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;
  }
}

.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);
}

.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);
}

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

.participation-goto {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0;
}

.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;
}

.participation-goto-menu__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 24rem;
  margin: 0 auto;
}

.participation-goto-menu__options > form { display: contents; }
.participation-goto-menu__options .btn { width: 100%; }

@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; }
}

.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); }

.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 {
  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);
}

.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;
}

.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 { 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); } }

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

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

.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);
}

@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);
  }

}

.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: 10px 0 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);
}

.participation-observation__boosts form,
.participation-observation__actions > form {
  display: inline-flex;
}

.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;
  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;
}

.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);
}

.participation-question .ds-lexxy-editor {
  display: block;
  width: 100%;
}

.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);
  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);
  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__edit > form > .participation-question__comments,
.nomination__edit > form > .participation-question__uploads {
  margin-top: 0;
}

.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;
}

.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); }

.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); }

.participation-detail__boost--star { color: var(--status-warning); font-size: 16px; }
.participation-detail__boost--growth { color: var(--status-success); font-size: 16px; }

.participation-text-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.participation-text-answers--bare { gap: 0; }
.participation-text-answers__entry { padding: 0; }

.participation-text-answers__entry--well {
  background: var(--surface-zone-well);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.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);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.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);
}

.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);
}

.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--justified {
  --gallery-row-max-h: clamp(220px, 40vh, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.participation-gallery--justified .participation-gallery__row {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--gallery-row-max-h) * var(--row-aspect) + var(--row-gaps) * var(--space-2));
  margin-inline: auto;
}
.participation-gallery--justified .participation-gallery__tile {
  flex: var(--cell-aspect) 1 0%;
  aspect-ratio: var(--cell-aspect);
  min-width: 0;
}

.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);
}

.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%;
  }
}

.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);
}

.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);
}

.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;

  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 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.participation-files {
  margin: var(--space-4) 0 0;
}
.participation-files--cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.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);
}

.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);
}

.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);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.participation-upload-dropzone__browse-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
}
.participation-upload-dropzone__browse-label: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);
  cursor: pointer;
}
.participation-upload-dropzone__camera-link {
  position: relative;
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.participation-observation__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
}
.participation-observation__chips:not(:has(*)) { display: none; }
.participation-observation__attachment-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.participation-observation__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
}

.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);
}

.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);
}

.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);
}

.participation-question__comments .form-textarea { font-family: var(--soul-font-answer); }

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

.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)}

.shell[data-shell-context="participation"] :where(
  .rich-text:not(.rich-text--reading),
  .participation-text-answers__rich
) {
  font-family: var(--font-body);
  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: 62ch;
  background: var(--surface-neutral);
  padding: var(--space-4);
  border-radius: var(--radius-xl, 16px);
}

.roster-list { overflow: hidden; }

.roster-list__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-8);
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .roster-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.roster-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.roster-person__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.roster-person__name {
  font-family: var(--soul-font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.roster-person__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.roster-faces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.roster-faces .avatar-group .avatar { border-color: var(--surface-raised); }

.roster-faces__names {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.roster-faces__names strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}