/* ==========================================================================
   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 */
.participation-element {
  width: 100%;
}

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

.participation-question__text {
  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-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #9ca3af);
  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;
}

.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-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* 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 { display: flex; flex-direction: column; gap: var(--space-6); }
.nom-agg__prompt { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.nom-agg__section-label { font-size: var(--text-sm); color: var(--text-secondary); }
.nom-agg__toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nom-agg__stats { display: flex; align-items: baseline; gap: var(--space-2); }
.nom-agg__stats-num { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--accent-primary); letter-spacing: var(--tracking-tight); line-height: 1; }
.nom-agg__stats-lbl { font-size: var(--text-sm); color: var(--text-secondary); }
.nom-agg__group { margin-bottom: var(--space-10); }
.nom-agg__group-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.nom-agg__group-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.nom-agg__group-rule { flex: 1; height: 1px; background: var(--border-subtle); }
.nom-agg__group-count { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); background: var(--surface-neutral); }
.nom-agg__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  /* align-items: start prevents the grid's default `stretch` from forcing
     every card in a row to the tallest card's height. Each card sizes to
     its own content. */
  align-items: start;
}
@media (min-width: 640px) { .nom-agg__grid { grid-template-columns: 1fr 1fr; } }

.nom-agg__empty { padding: var(--space-12) var(--space-6); text-align: center; border: 1px dashed var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-neutral); }
.nom-agg__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--surface-base); margin-bottom: var(--space-4); }
.nom-agg__empty-icon .material-symbols-rounded { font-size: var(--text-3xl); color: var(--text-tertiary); }
.nom-agg__empty-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 24; font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
.nom-agg__empty-body { font-size: var(--text-sm); color: var(--text-secondary); max-width: 420px; margin: 0 auto; }


/* 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;
}

/* 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, #fff);
  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: #fff;
  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: #f59e0b;
}

.participation-observation__boost--active.participation-observation__boost--growth {
  color: #16a34a;
}

.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(--color-red-500, #ef4444);
}

/* 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: #f59e0b; font-size: 16px; }
.participation-detail__boost--growth { color: #16a34a; font-size: 16px; }

/* ── Universal text answers aggregation — journal renderer (Question +
      Theme Cards visualizations + details rendering for SC/MC/Grids/etc.).
      Two chrome modes: --bare (Question pill, hairline-separated, default)
      and --card (Theme Cards pill, .card chrome per entry). ─────────────── */
.participation-text-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.participation-text-answers--bare { gap: 0; }
.participation-text-answers__entry { padding: var(--space-3); }
.participation-text-answers__entry--bare {
  padding: var(--space-3) 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-sm);
  line-height: 1.45;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.participation-text-answers__rich {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-primary);
}
.participation-text-answers__comment {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-secondary);
}
.participation-text-answers__meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.participation-text-answers__sep { color: var(--text-tertiary); }
/* Visual hierarchy of the meta line, most prominent → least:
   provider name → timestamp → "Created"/"Updated" label. The label is
   de-emphasized so the focal points are who answered and when. */
.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-medium);
  color: var(--text-secondary);
}
.participation-text-answers__date-label {
  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) ──────────────────────────────────────────── */
.participation-gallery {
  margin: var(--space-2) 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: #ffffff;
}

.participation-gallery--hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.participation-gallery__hero {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--surface-sunken);
}
.participation-gallery__hero img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  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-sunken);
  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: #000;
}
.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) ────────────────────────────────────────────── */
.participation-files {
  margin: var(--space-2) 0;
}
.participation-files--cards {
  display: flex;
  flex-direction: column;
  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: #dc2626; }
.participation-file-chip--doc .participation-file-chip__type,
.participation-file-chip--docx .participation-file-chip__type { color: #2563eb; }
.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: #16a34a; }
.participation-file-chip--ppt .participation-file-chip__type,
.participation-file-chip--pptx .participation-file-chip__type { color: #ea580c; }
.participation-file-chip--zip .participation-file-chip__type { color: #6b7280; }
.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: #7c3aed; }
.participation-file-chip--mp3 .participation-file-chip__type,
.participation-file-chip--wav .participation-file-chip__type { color: #db2777; }

/* ── 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. */