/* ==========================================================================
   Page: Participation Hub
   Description: 3-panel participation browser
   ========================================================================== */

.participation-hub {
  /* height intentionally NOT set — inherits from .panel-layout grid at >=1200px */
}

/* Tab bar: hidden on wide screens, shown at lower breakpoints */
.participation-hub .panel-layout__tab-bar {
  display: none;
}

@media (max-width: 1199px) {
  .participation-hub .panel-layout__tab-bar {
    display: flex;
  }
}

/* --- Org-filtered member picker: hides options not in selected org --- */
.ee-picker__option[data-org-hidden] {
  display: none;
}

/* --- Filter Panel (Panel 1) --- */
.participation-hub__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-y: auto;
}

.participation-hub__filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.participation-hub__filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Status filter chips --- */
.participation-hub__status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.participation-hub__status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: var(--surface-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.participation-hub__status-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.participation-hub__status-chip--active {
  border-color: var(--accent-primary);
  background: var(--accent-subtle);
  color: var(--accent-primary);
}

/* --- Chapter cards list --- */
.participation-hub__chapters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
}

/* --- Chapter card --- */
.participation-hub__chapter {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.participation-hub__chapter:hover {
  border-color: var(--border-default);
}

.participation-hub__chapter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.participation-hub__chapter-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

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

.participation-hub__chapter-participant {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

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

.participation-hub__chapter-progress {
  margin-top: var(--space-2);
}

/* --- Clickable chapter card — selected state --- */
.participation-hub__chapter {
  cursor: pointer;
}

.participation-hub__chapter--selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

/* Compounding opacity on connector LINES — theme-safe via border token */
/* Dots keep their DS status colors (--pending, --active, etc.) */
.participation-hub .timeline__item:not(:last-child) .timeline__node::after {
  background-color: var(--border-default);
  opacity: calc(0.3 + var(--depth, 0) * 0.15);
}

/* ── Depth tinting: compounding neutral wash per nesting level ──
   Same approach as the Experience Editor tree (tree.css):
   each children wrapper adds 6% of --border-subtle. Nesting compounds naturally.
   Uses --border-subtle (warm stone on warm themes, cool slate on cool). */
.participation-hub .timeline-tree__children {
  background: color-mix(in srgb, var(--border-subtle) 30%, transparent);
}

/* --- Children wrapper (flat siblings, no indentation) --- */
.timeline-tree__children {
  /* No padding, no margin, no indentation — children are flat */
}

/* ==========================================================================
   Fix R15/R16: Preview panel surface treatment
   - Single scrollable container (no flex column split)
   - EE-matching surface: gray bg (from panel-layout__aside), card-like calendar
   - Controls bar matches EE header treatment
   ========================================================================== */

/* The aside already has background: var(--surface-neutral) from panel-layout__aside.
   The preview content sits on that gray surface.
   Override the aside's overflow:hidden + padding so preview can scroll. */

.participation-hub .panel-layout__aside {
  padding: 0;
  overflow: hidden;
}

.participation-hub .panel-layout__aside > turbo-frame {
  overflow: hidden;
}

.participation-preview {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding: 0;
  min-width: 0;
}

/* ── Controls bar: matches EE header height, border-bottom, title styling ── */
.participation-preview__controls {
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
}

.participation-preview__controls-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
}

.participation-preview__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Calendar: raised card on gray surface ── */
.participation-preview__calendar-wrap {
  padding: var(--space-3);
}

.participation-preview__calendar-wrap .calendar {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

/* ── Timeline card: raised white surface on gray background ── */
.participation-preview__timeline-card {
  margin: var(--space-3);
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

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

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

/* ── Inline preview frame: constrain width inside timeline ── */
.participation-preview turbo-frame[id^="step_inline_preview_"] {
  max-width: 100%;
}

/* The inline preview panel should not have its own header height constraint
   since it lives inside the scrolling timeline */
.participation-preview .preview-panel {
  height: auto;
  overflow: visible;
}

.participation-preview .preview-panel__viewport {
  overflow: visible;
  padding: var(--space-2);
}

/* ── Calendar event → timeline scroll highlight ── */
@keyframes timeline-highlight {
  0% { background-color: var(--accent-subtle); }
  100% { background-color: transparent; }
}

.timeline__item--highlight {
  animation: timeline-highlight 1.5s var(--ease-out);
}