/* ============================================================================
   SHARED PASSAGE CLUSTERS — synoptic view (matches page, shared scope mode)
   ============================================================================

   Cluster cards for /api/matches/shared-clusters. Collapsed: header line
   (cluster title, similarity range, word estimate, isnad badge, match count),
   a snippet of the earliest witness, and chips naming the other witnesses.
   Expanded: all witnesses stacked chronologically with region text and a
   jump link into the reader.

   Token-based; visually consistent with .match-item cards (match-viewer.css).

   ============================================================================ */

.shared-cluster-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    direction: rtl;
}

.shared-cluster-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-shadow);
}

.shared-cluster-card:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================================================
   COLLAPSED HEADER
   ============================================================================ */

.shared-cluster-card .cluster-header {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: var(--transition-bg);
}

.shared-cluster-card .cluster-header:hover {
    background: var(--color-gray-light);
}

.shared-cluster-card .cluster-header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-family: var(--font-ui);
}

.shared-cluster-card .cluster-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    margin-inline-end: auto;
}

.shared-cluster-card .cluster-similarity {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.shared-cluster-card .cluster-word-estimate,
.shared-cluster-card .cluster-match-count {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.shared-cluster-card .cluster-isnad-badge {
    background: var(--color-warning-bg);
    color: var(--p-amber-800);
    border: 1px solid var(--color-warning);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.shared-cluster-card .cluster-expand-indicator {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Snippet of the earliest witness's text */
.shared-cluster-card .cluster-snippet {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    direction: rtl;
    text-align: start;
}

/* Chips naming the other witnesses */
.shared-cluster-card .cluster-witness-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.shared-cluster-card .witness-chip {
    background: var(--color-sand-light);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-muted);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   EXPANDED WITNESS LIST (chronological)
   ============================================================================ */

.shared-cluster-card .cluster-witnesses {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-4);
}

.shared-cluster-card .cluster-witness {
    border-inline-start: 3px solid var(--color-primary-light);
    padding-inline-start: var(--space-3);
}

.shared-cluster-card .witness-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-family: var(--font-ui);
}

.shared-cluster-card .witness-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.shared-cluster-card .witness-death-year {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.shared-cluster-card .witness-author {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.shared-cluster-card .witness-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-arabic);
    color: var(--page-text);
    background: var(--page-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    direction: rtl;
    text-align: start;
    margin-bottom: var(--space-2);
}

.shared-cluster-card .witness-jump-link {
    display: inline-block;
    color: var(--color-text-link);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.shared-cluster-card .witness-jump-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .shared-cluster-card .cluster-header-top {
        gap: var(--space-1);
    }

    .shared-cluster-card .witness-chip {
        max-width: 140px;
    }
}