/* My Participation tab — phase-driven party workspace.
   Layout: phase narrative (main) + EIR Process stepper (aside), then a row of
   party-status tiles. Mirrors the Figma "Project detail: My Participation". */

.participation__intro { margin-bottom: 2rem; }
.participation__intro-title {
  font-size: 30px; font-weight: 500; line-height: 38px; letter-spacing: -0.3px;
  color: var(--text-heading, #101828);
}
.participation__intro-desc {
  margin-top: 1rem; font-size: 16px; line-height: 24px;
  color: var(--text-body, #1e2939); max-width: 888px;
}

/* ---- Two-column layout ---- */
.participation__layout {
  display: flex; align-items: flex-start; gap: 24px;
}
.participation__main { flex: 1 1 0; min-width: 0; }
.participation__aside { flex: 0 0 420px; max-width: 420px; }

@media (max-width: 1100px) {
  .participation__layout { flex-direction: column; }
  .participation__aside { flex-basis: auto; max-width: none; width: 100%; }
}

/* ---- Phase narrative card ---- */
.participation-card {
  background: var(--white, #fff);
  border: 1px solid var(--border-default, #d1d5dc);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  padding: 25px;
  display: flex; flex-direction: column; gap: 32px;
}
.participation-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.participation-card__title {
  font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.2px;
  color: var(--text-heading, #101828);
}
.participation-card__date {
  font-size: 14px; line-height: 20px; color: var(--text-disabled, #4a5565);
  white-space: nowrap;
}
.participation-card__body {
  font-size: 16px; line-height: 24px; color: var(--text-body, #1e2939);
}
.participation-card__split {
  display: flex; align-items: stretch; gap: 24px;
}
@media (max-width: 720px) {
  .participation-card__split { flex-direction: column; }
}

/* EIR Coordinator panel */
.coordinator-card {
  flex: 1 1 0; min-width: 0;
  background: var(--background-page, #f6f8f9);
  border-radius: 6px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.coordinator-card__label {
  font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-disabled, #4a5565);
}
.coordinator-card__name {
  font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.1px;
  color: var(--text-body, #1e2939);
}
.coordinator-card__contacts {
  display: flex; flex-direction: column; gap: 12px; padding-top: 4px;
}
.coordinator-card__contact {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 20px; color: var(--teal-950, #111f22);
}
.coordinator-card__contact a { text-decoration: underline; color: inherit; }
.coordinator-card__contact svg { width: 15px; height: 15px; color: var(--neutral-500, #6a7282); flex-shrink: 0; }
.coordinator-card__note {
  font-size: 14px; line-height: 20px; color: var(--text-body, #1e2939);
}

/* "What happens during X" panel */
.phase-info-card {
  flex: 1 1 0; min-width: 0;
  background: var(--purple-bg, #faf7fd);
  border-radius: 6px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.phase-info-card__head { display: flex; align-items: center; gap: 6px; }
.phase-info-card__head svg { width: 25px; height: 25px; color: var(--purple-text, #7c45a7); flex-shrink: 0; }
.phase-info-card__title {
  font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.1px;
  color: var(--text-heading, #101828);
}
.phase-info-card__paras { display: flex; flex-direction: column; gap: 6px; }
.phase-info-card__paras p { font-size: 14px; line-height: 20px; color: var(--text-body, #1e2939); }

/* ---- EIR Process stepper aside ---- */
.eir-process {
  background: var(--green-900, #144035);
  border-radius: 12px; padding: 24px 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 1.5px rgba(0, 0, 0, 0.08);
}
.eir-process__head { text-align: left; color: var(--white, #fff); }
.eir-process__title { font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.2px; }
.eir-process__subtitle { font-size: 16px; line-height: 24px; }

.eir-process__progress { display: flex; gap: 4px; }
.eir-process__progress-seg {
  flex: 1 1 0; height: 6px; border-radius: 9999px;
  background: var(--neutral-300, #d1d5dc);
}
.eir-process__progress-seg--done { background: var(--success-default, #319977); }
.eir-process__progress-nums {
  display: flex; justify-content: space-between; padding: 0 16px;
  font-size: 12px; font-weight: 500;
}
.eir-process__progress-num { color: var(--neutral-300, #d1d5dc); }
.eir-process__progress-num--done { color: var(--white, #fff); }

.phase-accordion {
  background: var(--white, #fff);
  border: 1px solid #e5e8eb; border-radius: 6px;
}
.phase-accordion__item { padding: 12px 16px; }
.phase-accordion__item + .phase-accordion__item { border-top: 1px solid var(--border-default, #d1d5dc); }
.phase-accordion__row { display: flex; align-items: center; gap: 6px; }
.phase-accordion__marker { width: 15px; height: 15px; flex-shrink: 0; display: inline-flex; }
.phase-accordion__marker svg { width: 15px; height: 15px; }
.phase-accordion__marker--current { color: var(--success-default, #319977); }
.phase-accordion__marker--upcoming { color: var(--stone-400, #7a746c); }
.phase-accordion__name {
  flex: 1 1 0; min-width: 0;
  font-size: 16px; font-weight: 500; line-height: 24px;
  color: var(--text-body, #1e2939);
}
.phase-accordion__desc {
  padding-left: 21px; margin-top: 6px;
  font-size: 12px; line-height: 16px; color: var(--text-disabled, #4a5565);
}

.phase-accordion__activities {
  margin-top: 12px; margin-left: 21px;
  border-left: 3px solid var(--success-default, #319977);
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.phase-activity { border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.phase-activity--done {
  background: var(--white, #fff);
  border: 1px solid rgba(115, 134, 139, 0.5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 1.5px rgba(0, 0, 0, 0.08);
}
.phase-activity__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.phase-activity__label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--text-body, #1e2939); }
.phase-activity__icon { width: 15px; height: 15px; flex-shrink: 0; }
.phase-activity__icon svg { width: 15px; height: 15px; }
.phase-activity__icon--done { color: var(--success-text, #1a624e); }
.phase-activity__icon--pending { color: var(--neutral-300, #d1d5dc); }
.phase-activity__date { font-size: 10px; line-height: 12px; color: var(--text-disabled, #4a5565); }

/* ---- Bottom party-status tiles ---- */
.participation__cards {
  display: flex; gap: 24px; align-items: stretch;
  margin-top: 48px;
}
@media (max-width: 980px) { .participation__cards { flex-direction: column; } }
.participation-tile {
  flex: 1 1 0; min-width: 0;
  background: var(--white, #fff);
  border: 1px solid var(--border-default, #d1d5dc);
  border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.participation-tile__head { display: flex; flex-direction: column; gap: 12px; }
.participation-tile__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.participation-tile__title {
  font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.1px;
  color: var(--text-heading, #101828);
}
.participation-tile__body { font-size: 16px; line-height: 24px; color: var(--text-body, #1e2939); }

.participation-tile__btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 6px;
  border: 1px solid rgba(115, 134, 139, 0.5);
  background: var(--background-page, #f6f8f9);
  font-size: 14px; font-weight: 500; line-height: 20px;
  color: var(--teal-950, #111f22); cursor: pointer;
  transition: opacity 0.15s ease;
}
.participation-tile__btn--block { align-self: stretch; width: 100%; }
.participation-tile__btn:hover { opacity: 0.9; }

/* Pills */
.participation-pill {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.1px; white-space: nowrap;
}
.participation-pill--approved { background: var(--success-bg, #eaf5f1); color: var(--success-text, #1a624e); }
.participation-pill--pending { background: var(--warning-bg, #faf3db); color: var(--yellow-700, #9b6300); }
.participation-pill--inprogress { background: var(--warning-bg, #faf3db); color: var(--yellow-700, #9b6300); }

/* Open-for-input actions panel */
.participation-actions {
  margin-top: 32px;
  background: var(--white, #fff);
  border: 1px solid var(--border-default, #d1d5dc);
  border-radius: 12px; padding: 24px;
}
.participation-actions__title {
  font-size: 18px; font-weight: 600; line-height: 24px;
  color: var(--text-heading, #101828); margin-bottom: 16px;
}
.participation-actions__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 980px) { .participation-actions__grid { grid-template-columns: 1fr; } }
.participation-action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border-default, #d1d5dc); border-radius: 8px; padding: 16px;
}
.participation-action__label { font-size: 15px; font-weight: 600; color: var(--text-heading, #101828); }
.participation-action__meta { font-size: 12px; color: var(--text-muted, #6a7282); margin-top: 2px; }
.participation-action__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border-radius: 6px; white-space: nowrap;
  background: var(--teal-950, #111f22); color: var(--white, #fff);
  font-size: 14px; font-weight: 500; line-height: 20px; transition: opacity 0.15s ease;
}
.participation-action__btn:hover { opacity: 0.9; }
.participation-action__note {
  font-size: 14px; font-weight: 500; color: var(--teal-700, #1a5560); white-space: nowrap;
}
.participation-actions__empty { font-size: 15px; color: var(--text-muted, #6a7282); }
.participation-actions__links { display: flex; gap: 20px; margin-top: 16px; }

/* Filing hub (party / public member) */
.hub__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.hub__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hub__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 6px; white-space: nowrap;
  background: var(--teal-950, #111f22); color: var(--white, #fff);
  font-size: 14px; font-weight: 500; line-height: 20px; transition: opacity 0.15s ease;
}
.hub__btn:hover { opacity: 0.9; }
.hub__btn--disabled {
  background: var(--background-page, #f6f8f9); color: var(--text-muted, #6a7282);
  border: 1px solid var(--border-default, #d1d5dc); cursor: not-allowed;
}
.hub__status {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 28px;
  background: var(--white, #fff); border: 1px solid var(--border-default, #d1d5dc); border-radius: 10px;
}
.hub__status-phase { font-size: 14px; color: var(--text-body, #1e2939); }
.hub__status-pill {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 500; background: var(--background-page, #f6f8f9); color: var(--text-muted, #6a7282);
}
.hub__status-pill--open { background: var(--success-bg, #eaf5f1); color: var(--success-text, #1a624e); }

.hub__section { margin-bottom: 32px; }
.hub__section-title {
  font-size: 18px; font-weight: 600; line-height: 24px; color: var(--text-heading, #101828);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.hub__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 8px; border-radius: 100px; background: var(--background-page, #f6f8f9);
  font-size: 13px; font-weight: 600; color: var(--text-muted, #6a7282);
}
.hub__table {
  border: 1px solid var(--border-default, #d1d5dc); border-radius: 10px; overflow: hidden;
  background: var(--white, #fff);
}
.hub__row {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  border-top: 1px solid var(--border-subtle, #eceef1);
}
.hub__row:first-child { border-top: none; }
.hub__row--head {
  background: var(--background-page, #f6f8f9);
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-muted, #6a7282);
}
.hub__cell { flex: 1; min-width: 0; font-size: 14px; color: var(--text-body, #1e2939); }
.hub__cell--title { flex: 2; font-weight: 500; color: var(--text-heading, #101828); }
.hub__cell--action { flex: 0 0 88px; text-align: right; }
.hub__link { font-size: 14px; font-weight: 500; color: var(--teal-700, #1a5560); }
.hub__empty { font-size: 15px; color: var(--text-muted, #6a7282); }

/* My submissions list */
.participation-mine { margin-top: 32px; }
.participation-mine__list { display: flex; flex-direction: column; gap: 12px; }
.participation-mine__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white, #fff);
  border: 1px solid var(--border-default, #d1d5dc); border-radius: 8px; padding: 16px 20px;
}
.participation-mine__title { font-size: 15px; font-weight: 600; color: var(--text-heading, #101828); }
.participation-mine__actions { display: flex; align-items: center; gap: 16px; }

/* ── Participation filing hub (party view) ───────────────────────────── */
.pa-window {
  background: var(--white, #fff);
  border: 1px solid var(--border-default, #d1d5dc);
  border-radius: 8px; padding: 24px; margin-bottom: 24px;
}
.pa-window__head { margin-bottom: 16px; }
.pa-window__title {
  font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.2px;
  color: var(--text-heading, #101828);
}
.pa-window__empty { font-size: 16px; line-height: 24px; color: var(--text-body, #1e2939); }
.pa-window__rows {
  border: 1px solid var(--border-default, #d1d5dc); border-radius: 6px; overflow: hidden;
}
.pa-window__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border-top: 1px solid var(--border-default, #d1d5dc);
}
.pa-window__row:first-child { border-top: none; }
.pa-window__row-title { font-size: 16px; font-weight: 500; color: var(--text-heading, #101828); }
.pa-window__row-meta { font-size: 14px; color: var(--text-disabled, #4a5565); margin-top: 2px; }
.pa-window__note { font-size: 14px; font-weight: 500; color: var(--teal-700, #1a5560); white-space: nowrap; }
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 6px; white-space: nowrap;
  font-size: 14px; font-weight: 500; line-height: 20px; transition: opacity 0.15s ease;
}
.pa-btn:hover { opacity: 0.9; }
.pa-btn--primary { background: var(--primary-bg, #f3ab1b); color: var(--teal-950, #111f22); }

/* Phase Activity */
.pa-activity { margin-top: 8px; }
.pa-activity__intro { margin-bottom: 16px; }
.pa-activity__title {
  font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.2px;
  color: var(--text-heading, #101828);
}
.pa-activity__desc { font-size: 16px; line-height: 24px; color: var(--text-body, #1e2939); margin-top: 6px; }

/* CSS-only tabs (no JS) */
.pa-tabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pa-tabs__nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-tabs__tab {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 6px;
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-body, #1e2939);
}
.pa-tabs__tab:hover { background: var(--background-page, #f6f8f9); }
.pa-tabs__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9999px;
  background: var(--text-muted, #6a7282); color: #fff; font-size: 10px; font-weight: 500;
}
.pa-tabs__panel { display: none; }
#pa-tab-ir:checked   ~ .pa-tabs__panel--ir,
#pa-tab-doc:checked  ~ .pa-tabs__panel--doc,
#pa-tab-sub:checked  ~ .pa-tabs__panel--sub,
#pa-tab-resp:checked ~ .pa-tabs__panel--resp { display: block; }
#pa-tab-ir:checked   ~ .pa-tabs__nav .pa-tabs__tab--ir,
#pa-tab-doc:checked  ~ .pa-tabs__nav .pa-tabs__tab--doc,
#pa-tab-sub:checked  ~ .pa-tabs__nav .pa-tabs__tab--sub,
#pa-tab-resp:checked ~ .pa-tabs__nav .pa-tabs__tab--resp {
  background: var(--neutral-200, #e5e7eb); color: var(--text-heading, #101828); font-weight: 600;
}

/* Activity table */
.pa-table {
  border: 1px solid var(--border-default, #d1d5dc); border-radius: 6px; overflow: hidden;
  background: var(--white, #fff);
}
.pa-table__head, .pa-table__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.pa-table__head {
  background: var(--background-page, #f6f8f9); border-bottom: 1px solid var(--border-default, #d1d5dc);
  font-size: 12px; font-weight: 500; color: var(--text-disabled, #4a5565);
}
.pa-table__row { border-top: 1px solid var(--border-default, #d1d5dc); font-size: 14px; color: var(--text-body, #1e2939); }
.pa-table__row:first-child { border-top: none; }
.pa-table__col { flex: 1; min-width: 0; }
.pa-table__col--id { flex: 0 0 110px; }
.pa-table__col--subj { flex: 2; color: var(--text-heading, #101828); font-weight: 500; }
.pa-table__col--date { flex: 0 0 110px; }
.pa-table__col--status { flex: 0 0 110px; }
.pa-code {
  display: inline-flex; padding: 4px 6px; border-radius: 4px; background: var(--background-page, #f6f8f9);
  font-family: ui-monospace, "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.2px;
  text-transform: uppercase; color: var(--text-disabled, #4a5565);
}
.pa-link { font-size: 14px; font-weight: 500; color: var(--teal-700, #1a5560); }
.pa-tabs__empty { font-size: 15px; color: var(--text-muted, #6a7282); padding: 8px 0; }

/* Phase context banner (party hub) */
.pa-context {
  background: var(--purple-bg, #faf7fd);
  border: 1px solid var(--border-default, #d1d5dc);
  border-radius: 8px; padding: 20px 24px; margin-bottom: 24px;
}
.pa-context__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-context__title { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--text-heading, #101828); }
.pa-context__ref { font-size: 12px; font-weight: 500; color: var(--text-disabled, #4a5565); white-space: nowrap; }
.pa-context__body { font-size: 14px; line-height: 20px; color: var(--text-body, #1e2939); margin-top: 6px; }