/* ================================================
   PREVIEW RUNS — the admin's own "Preview as Candidate"
   attempts, listed in their own panel on the Evaluations
   tab.

   Its own file because it styles markup from
   talent_management_content.html (PreviewRunsTpl /
   PreviewRowTpl), NOT from cohort_results.html — it only
   lived in eval-cohort.css because it renders adjacent
   to the cohort on the same tab.

   NOTE the nesting parent: .preview-runs is a SIBLING of
   .cohort-root, never a descendant. Wrapping these rules
   in .cohort-root compiles them to
   `.cohort-root .preview-runs-*`, which matches nothing,
   and the whole panel silently loses its styling.
   ================================================ */

@layer components {
  .preview-runs {
    margin-block-start: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;

    .preview-runs-summary {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      cursor: pointer;
      list-style: none;
      font-size: var(--fs-small);

      &::-webkit-details-marker {
        display: none;
      }

      .preview-runs-title {
        font-weight: var(--fw-semibold);
      }

      .preview-runs-count {
        padding: 0 var(--space-2xs);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-bold);
      }

      .preview-runs-note {
        margin-inline-start: auto;
        font-size: var(--fs-xsmall);
      }
    }

    .preview-runs-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0 var(--space-sm) var(--space-sm);
      list-style: none;
    }

    .preview-run-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-sm);

      .preview-run-identity {
        display: flex;
        flex-direction: column;
        min-width: 0;

        .preview-run-name {
          font-size: var(--fs-small);
          font-weight: var(--fw-medium);
        }

        .preview-run-email {
          font-size: var(--fs-xsmall);
        }
      }

      .preview-run-view {
        margin-inline-start: auto;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        text-decoration: none;
        white-space: nowrap;
      }
    }
  }
}

@layer theme {
  .preview-runs {
    border: 1px solid var(--border-subtle);
    background: light-dark(oklch(0% 0 0 / 0.015), oklch(100% 0 0 / 0.02));

    .preview-runs-summary {
      color: var(--text-primary);

      .preview-runs-count {
        background: oklch(from var(--text-secondary) l c h / 0.14);
        color: var(--text-secondary);
      }

      .preview-runs-note {
        color: var(--text-secondary);
      }
    }

    .preview-run-row {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.02));

      .preview-run-name {
        color: var(--text-primary);
      }

      .preview-run-email {
        color: var(--text-secondary);
      }

      .preview-run-view {
        color: var(--accent-primary);
      }
    }
  }
}