/* ============================================
   EVALUATIONS PAGES
   ============================================ */

@layer components {
  /* ---------- Shared ---------- */

  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    font-size: var(--fs-xsmall);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
  }

  .avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
  }

  .score-pct {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
  }

  .score-bar-track {
    flex: 1;
    block-size: 8px;
    border-radius: 4px;
    overflow: hidden;
  }

  .score-bar-fill {
    block-size: 100%;
    border-radius: 4px;
    transition: width 0.4s ease-out;
  }

  /* ============================================
       EVALUATIONS LIST PAGE
       ============================================ */

  .evaluations-page {
    padding-block: var(--space-xl);
    position: relative;
    overflow: hidden;

    .page-header {
      .eval-count {
        padding: var(--space-xs) var(--space-md);
        border-radius: 100px;
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }
    }

    .evals-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-lg);
      position: relative;
      z-index: 1;

      .evals-filter-search {
        flex: 1 1 240px;
        min-inline-size: 200px;
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        font-size: var(--fs-small);
      }

      .evals-filter-select {
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        font-size: var(--fs-small);
        cursor: pointer;
      }

      .evals-filter-apply {
        padding: var(--space-sm) var(--space-lg);
        border-radius: 8px;
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
        cursor: pointer;
      }

      .evals-filter-clear {
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        font-size: var(--fs-small);
        text-decoration: none;
      }
    }

    .table-container {
      overflow-x: auto;
      border-radius: 12px;
      position: relative;
      z-index: 1;
    }

    .actions-cell {
      inline-size: 1%;
      white-space: nowrap;
      text-align: end;
    }

    .eval-delete-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 32px;
      block-size: 32px;
      padding: 0;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition:
        background 0.15s ease-out,
        color 0.15s ease-out;
    }

    .evals-table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--fs-small);

      th,
      td {
        padding: var(--space-md) var(--space-lg);
        text-align: start;
        vertical-align: middle;
      }

      th {
        font-weight: var(--fw-medium);
        white-space: nowrap;
        font-size: var(--fs-xsmall);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      tbody tr {
        cursor: pointer;
        transition: background 0.15s ease-out;
      }
    }

    .candidate-cell {
      min-inline-size: 200px;
      display: flex;
      align-items: center;
      gap: var(--space-md);

      strong {
        display: block;
        margin-block-end: 2px;
      }

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

    .date-cell {
      white-space: nowrap;
      font-size: var(--fs-xsmall);
    }

    .score-pct {
      font-weight: var(--fw-bold);
      font-size: var(--fs-body);
    }

    .status-badge {
      padding: 4px 12px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      text-transform: capitalize;
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-lg);
      padding-block: var(--space-lg);
      position: relative;
      z-index: 1;
    }

    .page-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
      text-decoration: none;
      transition:
        background 0.15s ease-out,
        opacity 0.15s ease-out;

      &.disabled {
        pointer-events: none;
        opacity: 0.3;
      }
    }

    .page-info {
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
    }
  }

  /* ============================================
       EVALUATION DETAIL PAGE (redesigned)
       ============================================ */

  .evaluation-detail-page {
    padding-block: var(--space-lg) calc(var(--space-xl) * 2);
    position: relative;
    overflow: hidden;

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-small);
      text-decoration: none;
      color: inherit;
      transition: opacity 0.15s;
      position: relative;
      z-index: 1;
    }

    /* ── Verdict Card ────────────────────── */
    .verdict-card {
      border-radius: 12px;
      overflow: hidden;
      margin-block: var(--space-lg);
      position: relative;
      z-index: 1;
    }

    .verdict-strip {
      block-size: 4px;
      inline-size: 100%;
    }

    .verdict-body {
      padding: var(--space-lg) var(--space-xl);
    }

    .verdict-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-lg);
    }

    .verdict-identity {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      min-inline-size: 0;
      flex: 1;
    }

    .verdict-identity-text {
      min-inline-size: 0;

      h1 {
        font-size: var(--fs-h3);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .email {
        font-size: var(--fs-small);
        margin: 0;
      }
    }

    .verdict-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-block-start: var(--space-sm);
    }

    .verdict-badge {
      padding: 3px 10px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
    }

    .verdict-right {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      flex-shrink: 0;
    }

    .hiring-decision-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hiring-decision-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-bold);
    }

    .hiring-confidence {
      margin-block-start: 6px;
      font-size: var(--fs-xsmall);

      strong {
        font-weight: var(--fw-medium);
      }
    }

    .score-ring-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .score-ring-track {
      stroke: light-dark(oklch(90% 0 0), oklch(30% 0 0));
    }

    .score-ring-fill {
      transition: stroke-dashoffset 0.7s ease;
    }

    .score-ring-label {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
    }

    /* Hiring rec body */
    .hiring-summary {
      font-size: var(--fs-small);
      line-height: 1.6;
      margin-block: var(--space-md) 0;
    }

    .hiring-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
      margin-block-start: var(--space-md);

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
      }
    }

    .hiring-detail-col {
      border-radius: 8px;
      padding: var(--space-md);
    }

    .hiring-detail-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      letter-spacing: 0.04em;
      margin-block-end: var(--space-sm);
    }

    .hiring-detail-item {
      font-size: var(--fs-xsmall);
      line-height: 1.6;
      margin-block-end: 4px;
    }

    .legacy-extra-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-sm);
      margin-block-start: var(--space-sm);
    }

    .legacy-extra-item {
      border-radius: 6px;
      padding: var(--space-sm) var(--space-md);
    }

    .legacy-extra-label {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      margin-block-end: 4px;
    }

    .legacy-extra-text {
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .verdict-footer {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-block-start: var(--space-md);
      padding-block-start: var(--space-md);
    }

    .verdict-meta-item {
      font-size: var(--fs-xsmall);
    }

    .verdict-meta-corrected {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      padding: 2px 10px;
      border-radius: 100px;
    }

    /* ── Summary Cards Row ───────────────── */
    .summary-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
      margin-block-end: var(--space-lg);
      position: relative;
      z-index: 1;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .summary-card {
      border-radius: 12px;
      padding: var(--space-lg);
    }

    .summary-card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
      margin: 0 0 var(--space-md) 0;
    }

    /* Key Scores (compact) */
    .key-scores-compact {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .key-score-compact {
      .key-score-header {
        display: flex;
        justify-content: space-between;
        margin-block-end: 4px;
      }

      .key-score-name {
        font-size: var(--fs-small);
      }

      .score-pct {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
      }

      .score-bar-track {
        block-size: 6px;
        border-radius: 3px;
      }
    }

    /* Competency Profile bars */
    .competency-bars {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .competency-bar-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .competency-bar-label {
      min-inline-size: 80px;
      font-size: var(--fs-xsmall);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .competency-bar-track {
      flex: 1;
      block-size: 6px;
      border-radius: 3px;
      overflow: hidden;
    }

    .competency-bar-fill {
      block-size: 100%;
      border-radius: 3px;
      transition: width 0.4s ease-out;
    }

    .competency-bar-value {
      min-inline-size: 32px;
      text-align: end;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
    }

    /* Task Glance bars */
    .task-glance-bars {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .task-glance-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .task-glance-name {
      min-inline-size: 100px;
      max-inline-size: 160px;
      font-size: var(--fs-xsmall);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-glance-track {
      flex: 1;
      block-size: 8px;
      border-radius: 4px;
      overflow: hidden;
    }

    .task-glance-fill {
      block-size: 100%;
      border-radius: 4px;
      transition: width 0.4s ease-out;
      opacity: 0.8;
    }

    .task-glance-value {
      min-inline-size: 32px;
      text-align: end;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
    }

    /* ── Tabs ─────────────────────────────── */
    .eval-tabs {
      display: block;
      position: relative;
      z-index: 1;
    }

    .tab-list {
      display: flex;
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: var(--space-sm) var(--space-md);
      border: none;
      border-radius: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
      cursor: pointer;
      background: transparent;
      transition:
        background 0.15s,
        color 0.15s;
    }

    .tab-panel {
      display: none;
      margin-block-start: var(--space-lg);
      padding-block-end: 20vh;

      &.active {
        display: block;
      }
    }

    /* ── Journey Timeline ────────────────── */
    .timeline-stage {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      padding-block-end: var(--space-xl);
    }

    .timeline-stage--last {
      padding-block-end: 0;
    }

    .timeline-connector {
      position: absolute;
      inset-inline-start: 19px;
      inset-block-start: 40px;
      inset-block-end: 0;
      inline-size: 2px;
    }

    .timeline-stage--last .timeline-connector {
      display: none;
    }

    .timeline-dot {
      inline-size: 40px;
      block-size: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .timeline-content {
      flex: 1;
      min-inline-size: 0;
    }

    .timeline-stage-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);

      h3 {
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        margin: 0;
      }
    }

    .timeline-count-badge {
      padding: 2px 10px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
    }

    .journey-scores-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
      }
    }

    .journey-score-item {
      border-radius: 8px;
      padding: var(--space-md);
    }

    .journey-score-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-block-end: var(--space-sm);

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

      .score-pct {
        font-size: var(--fs-small);
        font-weight: var(--fw-bold);
      }
    }

    .score-bar-track--sm {
      block-size: 5px;
      border-radius: 3px;
      margin-block-end: var(--space-sm);
    }

    .journey-explanation {
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .evidence-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--fs-xsmall);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin-block-start: var(--space-xs);
      transition: color 0.15s;
    }

    .evidence-block {
      margin-block-start: var(--space-sm);
      border-radius: 6px;
      padding: var(--space-md);
      border-inline-start: 2px solid;
    }

    .evidence-text {
      font-size: var(--fs-xsmall);
      font-style: italic;
      line-height: 1.5;
    }

    .journey-no-data {
      .journey-no-data-label {
        font-size: var(--fs-small);
      }

      .journey-no-data-desc {
        font-size: var(--fs-xsmall);
        font-style: italic;
      }
    }

    /* ── Task Cards (v2 — collapsible) ───── */
    .task-card-v2 {
      border-radius: 12px;
      margin-block-end: var(--space-sm);
      interpolate-size: allow-keywords;
      overflow-anchor: none;

      summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        cursor: pointer;
        list-style: none;
        user-select: none;

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

      &::details-content {
        block-size: 0;
        overflow: clip;
        transition:
          block-size 0.3s ease,
          content-visibility 0.3s allow-discrete;
      }

      &[open]::details-content {
        block-size: auto;
      }
    }

    .task-card-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      min-inline-size: 0;
    }

    .task-card-num {
      inline-size: 28px;
      block-size: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-bold);
      flex-shrink: 0;
    }

    .task-card-info {
      min-inline-size: 0;
    }

    .task-card-name {
      font-size: var(--fs-body);
      font-weight: var(--fw-semibold);
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-type-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      margin-block-start: 4px;
    }

    .task-card-right {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      flex-shrink: 0;

      .score-pct {
        font-size: var(--fs-h3);
        font-weight: var(--fw-bold);
      }
    }

    .task-card-body {
      padding: 0 var(--space-lg) var(--space-lg);
    }

    .task-card-scores {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
      }
    }

    /* Signals */
    .signals-section {
      margin-block-start: var(--space-md);
    }

    .signals-label {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      letter-spacing: 0.05em;
      margin-block-end: var(--space-sm);
    }

    .signals-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .signal-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--fs-xsmall);
      padding: 4px 10px;
      border-radius: 100px;
    }

    /* ── Skills Tab ──────────────────────── */
    .skill-group {
      margin-block-end: var(--space-xl);
    }

    .skill-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      margin: 0 0 var(--space-md) 0;
    }

    .skill-group-count {
      padding: 1px 8px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
    }

    .skill-row-v2 {
      border-radius: 8px;
      padding: var(--space-md);
      margin-block-end: var(--space-sm);
    }

    .skill-row-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-block-end: var(--space-sm);
    }

    .skill-row-name-block {
      .skill-row-name {
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }
    }

    .skill-explanation {
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .skill-row-compact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 6px;
      padding: var(--space-sm) var(--space-md);
      margin-block-end: 4px;
    }

    .skill-row-compact-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);

      .skill-row-compact-name {
        font-size: var(--fs-xsmall);
      }
    }

    /* No-evidence collapsible */
    .no-evidence-section {
      margin-block-start: var(--space-sm);
    }

    .no-evidence-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      inline-size: 100%;
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: var(--fs-xsmall);
      background: transparent;
      transition: border-color 0.15s;
    }

    .no-evidence-trigger-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .no-evidence-dot {
      inline-size: 8px;
      block-size: 8px;
      border-radius: 50%;
    }

    .no-evidence-trigger-right {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .no-evidence-chevron {
      inline-size: 7px;
      block-size: 7px;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.2s ease;
    }

    .no-evidence-trigger.open .no-evidence-chevron {
      transform: rotate(45deg);
    }

    .no-evidence-content {
      margin-block-start: var(--space-sm);
    }

    /* ── Recordings Tab ──────────────────── */
    .rec-stats {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      border-radius: 8px;
      padding: var(--space-md);
      margin-block-end: var(--space-lg);
    }

    .rec-stat {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
    }

    .rec-stat-sep {
      inline-size: 1px;
      block-size: 20px;
    }

    .rec-group {
      margin-block-end: var(--space-xl);
    }

    .rec-group-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);
    }

    .rec-group-num {
      inline-size: 28px;
      block-size: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-bold);
    }

    .rec-group-label {
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      margin: 0;
    }

    .rec-partial-badge {
      font-size: var(--fs-xsmall);
      padding: 2px 10px;
      border-radius: 100px;
    }

    .rec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
      }
    }

    .rec-grid--single {
      grid-template-columns: 1fr;
      max-inline-size: 640px;
    }

    .rec-card {
      border-radius: 10px;
      overflow: hidden;
      transition: border-color 0.15s;
    }

    .rec-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-sm) var(--space-md);
    }

    .rec-card-type {
      display: flex;
      align-items: center;
      gap: 8px;

      span {
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
        text-transform: capitalize;
      }
    }

    .rec-card-date {
      font-size: var(--fs-xsmall);
    }

    .rec-card-size {
      font-size: var(--fs-xsmall);
    }

    .rec-card-video {
      aspect-ratio: 16 / 9;

      video {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
      }
    }

    /* Shared empty state */
    .empty-state {
      font-size: var(--fs-small);
      font-style: italic;
      opacity: 0.4;
    }

    /* ── G-Eval observation drilldown ── */

    .geval-obs-badge,
    .partial-badge {
      display: inline-block;
      padding-inline: 6px;
      padding-block: 2px;
      font-size: var(--fs-xsmall);
      border-radius: var(--radius-xs);
    }

    .not-assessed-label {
      font-size: var(--fs-small);
      cursor: help;
    }

    .observation-drilldown {
      margin-block-start: 8px;

      & summary {
        cursor: pointer;
        font-size: var(--fs-small);
        user-select: none;
      }
    }

    .observation-list {
      list-style: none;
      padding-inline-start: 0;
      margin-block-start: 8px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .obs-item {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .obs-icon {
      flex-shrink: 0;
      inline-size: 20px;
      text-align: center;
      font-weight: var(--fw-semibold);
    }

    .obs-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .obs-question {
      font-size: var(--fs-small);
    }

    .obs-citation {
      margin: 0;
      padding-inline-start: 12px;
      font-size: var(--fs-xsmall);
      font-style: italic;
    }

    .obs-reasoning {
      font-size: var(--fs-xsmall);
    }
  }
}

/* ============================================
   THEME
   ============================================ */
@layer theme {
  /* ---------- Shared Score Colors ---------- */

  .score-pct {
    &.score-high {
      color: var(--color-success);
    }
    &.score-mid {
      color: var(--color-warning);
    }
    &.score-low {
      color: var(--color-error);
    }
  }

  .score-bar-track {
    background: oklch(from var(--glass-tint) l c h / 0.06);
  }

  .score-bar-fill {
    &.score-high {
      background: var(--color-success);
    }
    &.score-mid {
      background: var(--color-warning);
    }
    &.score-low {
      background: var(--color-error);
    }
  }

  .avatar,
  .avatar-lg {
    background: linear-gradient(
      135deg,
      var(--accent-primary),
      var(--accent-secondary, var(--accent-primary))
    );
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px oklch(from var(--accent-primary) l c h / 0.3);
  }

  /* ---------- Evaluations List Page ---------- */

  .evaluations-page {
    .eval-count {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.08),
        oklch(from var(--accent-primary) l c h / 0.1)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.25)
        );
      color: var(--accent-primary);
    }

    .evals-filters {
      .evals-filter-search,
      .evals-filter-select {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.12);
        color: var(--text-primary);
      }

      .evals-filter-search::placeholder {
        color: var(--text-secondary);
      }

      .evals-filter-apply {
        background: var(--accent-primary);
        border: 1px solid var(--accent-primary);
        color: var(--color-white, #fff);
      }

      .evals-filter-clear {
        color: var(--text-secondary);
      }
    }

    .table-container {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(8px);
    }

    .eval-delete-btn {
      background: transparent;
      color: var(--text-secondary);

      &:hover {
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.1),
          oklch(from var(--color-error) l c h / 0.15)
        );
        color: var(--color-error);
      }
    }

    .evals-table {
      th {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        color: var(--text-secondary);
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }

      td {
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
      }

      tbody tr:hover {
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      }
    }

    .candidate-cell .email {
      color: var(--text-secondary);
    }

    .date-cell {
      color: var(--text-secondary);
    }

    .status-badge {
      &.status-completed {
        background: light-dark(
          oklch(from var(--color-success) l c h / 0.08),
          oklch(from var(--color-success) l c h / 0.12)
        );
        border: 1px solid
          light-dark(
            oklch(from var(--color-success) l c h / 0.2),
            oklch(from var(--color-success) l c h / 0.25)
          );
        color: var(--color-success);
      }

      &.status-in_progress,
      &.status-in-progress {
        background: light-dark(
          oklch(from var(--accent-primary) l c h / 0.08),
          oklch(from var(--accent-primary) l c h / 0.12)
        );
        border: 1px solid
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.2),
            oklch(from var(--accent-primary) l c h / 0.25)
          );
        color: var(--accent-primary);
      }

      &.status-pending {
        background: light-dark(
          oklch(from var(--color-warning) l c h / 0.08),
          oklch(from var(--color-warning) l c h / 0.12)
        );
        border: 1px solid
          light-dark(
            oklch(from var(--color-warning) l c h / 0.2),
            oklch(from var(--color-warning) l c h / 0.25)
          );
        color: var(--color-warning);
      }
    }

    .page-btn {
      color: var(--accent-primary);
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.06),
        oklch(from var(--accent-primary) l c h / 0.08)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.15),
          oklch(from var(--accent-primary) l c h / 0.2)
        );

      &:hover:not(.disabled) {
        background: light-dark(
          oklch(from var(--accent-primary) l c h / 0.12),
          oklch(from var(--accent-primary) l c h / 0.15)
        );
      }
    }

    .page-info {
      color: var(--text-secondary);
    }
  }

  /* ---------- Evaluation Detail Page (redesigned) ---------- */

  .evaluation-detail-page {
    /* Markdown-rendered AI content */
    .verdict-card strong,
    .hiring-detail-item strong,
    .journey-score-item strong,
    .skill-row-v2 strong {
      color: var(--accent-primary, oklch(0.65 0.15 250));
      font-weight: 600;
    }

    .back-link {
      color: var(--text-secondary);
      &:hover {
        color: var(--text-primary);
      }
    }

    /* ── Verdict Card ────────────────────── */
    .verdict-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(12px);
    }

    .verdict-strip--hire {
      background: var(--color-success);
    }
    .verdict-strip--no-hire {
      background: var(--color-error);
    }

    .verdict-identity-text .email {
      color: var(--text-secondary);
    }

    .verdict-badge {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
      color: var(--text-secondary);
    }

    .hiring-decision-chip {
      border: 1px solid;

      &.decision--hire {
        background: light-dark(
          oklch(from var(--color-success) l c h / 0.08),
          oklch(from var(--color-success) l c h / 0.12)
        );
        border-color: light-dark(
          oklch(from var(--color-success) l c h / 0.25),
          oklch(from var(--color-success) l c h / 0.3)
        );
        color: var(--color-success);
      }

      &.decision--no-hire {
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.08),
          oklch(from var(--color-error) l c h / 0.12)
        );
        border-color: light-dark(
          oklch(from var(--color-error) l c h / 0.25),
          oklch(from var(--color-error) l c h / 0.3)
        );
        color: var(--color-error);
      }
    }

    .hiring-confidence {
      color: var(--text-secondary);
    }
    .hiring-confidence strong {
      color: var(--text-primary);
    }
    .score-ring-label {
      color: var(--text-secondary);
    }

    .hiring-summary {
      color: var(--text-secondary);
    }

    .hiring-detail-col {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));

      &--positive .hiring-detail-label {
        color: var(--color-success);
      }
      &--warning .hiring-detail-label {
        color: var(--color-warning);
      }
    }

    .hiring-detail-item {
      color: var(--text-secondary);
    }

    .legacy-extra-item {
      background: light-dark(oklch(0% 0 0 / 0.015), oklch(100% 0 0 / 0.02));
    }

    .legacy-extra-label {
      color: var(--text-secondary);
    }
    .legacy-extra-text {
      color: var(--text-secondary);
    }

    .verdict-footer {
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
    }

    .verdict-meta-item {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .verdict-meta-corrected {
      background: light-dark(
        oklch(from var(--color-warning) l c h / 0.08),
        oklch(from var(--color-warning) l c h / 0.12)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--color-warning) l c h / 0.2),
          oklch(from var(--color-warning) l c h / 0.25)
        );
      color: var(--color-warning);
    }

    /* ── Summary Cards ───────────────────── */
    .summary-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(12px);
    }

    .summary-card-title {
      color: var(--text-secondary);
    }
    .key-score-name {
      color: var(--text-primary);
    }

    .competency-bar-label {
      color: var(--text-secondary);
    }
    .competency-bar-track {
      background: oklch(from var(--glass-tint) l c h / 0.06);
    }
    .task-glance-name {
      color: var(--text-secondary);
    }
    .task-glance-track {
      background: oklch(from var(--glass-tint) l c h / 0.06);
    }

    /* ── Tabs ─────────────────────────────── */
    .tab-list {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .tab-trigger {
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
      }

      &.active {
        background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.06));
        color: var(--text-primary);
      }
    }

    /* ── Journey Timeline ────────────────── */
    .timeline-connector {
      background: oklch(from var(--glass-tint) l c h / 0.06);
    }

    .timeline-dot {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
    }

    .timeline-count-badge {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-secondary);
    }

    .journey-score-item {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.025));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.05);
    }

    .journey-score-name {
      color: var(--text-primary);
    }
    .journey-explanation {
      color: var(--text-secondary);
    }

    .evidence-toggle {
      color: var(--text-secondary);
      opacity: 0.6;
      &:hover {
        opacity: 1;
        color: var(--text-primary);
      }
    }

    .evidence-block {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.02));
      border-color: oklch(from var(--color-warning) l c h / 0.4);
    }

    .evidence-text {
      color: var(--text-secondary);
    }

    .journey-no-data-label {
      color: var(--text-secondary);
      opacity: 0.5;
    }
    .journey-no-data-desc {
      color: var(--text-secondary);
      opacity: 0.4;
    }

    /* ── Task Cards ──────────────────────── */
    .task-card-v2 {
      background: light-dark(oklch(0% 0 0 / 0.01), oklch(100% 0 0 / 0.025));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      summary:hover {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      }
    }

    .task-card-num {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
      color: var(--text-secondary);
    }

    .task-type-badge {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-secondary);
    }

    .task-card-body {
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
    }

    .signals-label {
      color: var(--text-secondary);
    }

    .signal-chip {
      border: 1px solid;

      &.signal-positive {
        background: light-dark(
          oklch(from var(--color-success) l c h / 0.06),
          oklch(from var(--color-success) l c h / 0.08)
        );
        border-color: light-dark(
          oklch(from var(--color-success) l c h / 0.2),
          oklch(from var(--color-success) l c h / 0.25)
        );
        color: var(--color-success);
      }

      &.signal-negative {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
        border-color: oklch(from var(--glass-tint) l c h / 0.06);
        color: var(--text-secondary);
        opacity: 0.5;
      }
    }

    /* ── Skills Tab ──────────────────────── */
    .skill-group-title {
      color: var(--text-primary);
    }

    .skill-group-count {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-secondary);
    }

    .skill-row-v2 {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.025));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.05);
    }

    .skill-row-name {
      color: var(--text-primary);
    }
    .skill-explanation {
      color: var(--text-secondary);
    }

    .skill-row-compact {
      background: light-dark(oklch(0% 0 0 / 0.01), oklch(100% 0 0 / 0.015));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.03);
    }

    .skill-row-compact-name {
      color: var(--text-secondary);
    }

    .no-evidence-trigger {
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
      color: var(--text-secondary);
      &:hover {
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
      }
    }

    .no-evidence-dot {
      background: var(--color-error);
      opacity: 0.6;
    }
    .no-evidence-chevron {
      opacity: 0.4;
    }

    /* ── Recordings Tab ──────────────────── */
    .rec-stats {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.025));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.05);
    }

    .rec-stat {
      color: var(--text-primary);
    }
    .rec-stat-sep {
      background: oklch(from var(--glass-tint) l c h / 0.1);
    }

    .rec-group-num {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-secondary);
    }

    .rec-partial-badge {
      background: light-dark(
        oklch(from var(--color-warning) l c h / 0.08),
        oklch(from var(--color-warning) l c h / 0.12)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--color-warning) l c h / 0.2),
          oklch(from var(--color-warning) l c h / 0.25)
        );
      color: var(--color-warning);
    }

    .rec-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.02));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      &:hover {
        border-color: oklch(from var(--glass-tint) l c h / 0.1);
      }
    }

    .rec-card-header {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
    }

    .rec-card-type {
      color: var(--text-primary);
    }
    .rec-card-type.rec-type--camera svg {
      color: oklch(0.65 0.12 230);
    }
    .rec-card-type.rec-type--screen svg {
      color: var(--color-success);
    }
    .rec-card-date {
      color: var(--text-secondary);
      opacity: 0.5;
    }
    .rec-card-size {
      color: var(--text-secondary);
    }

    .rec-card-video {
      background: oklch(0% 0 0);
    }

    .empty-state {
      color: var(--text-secondary);
    }

    /* ── G-Eval observation drilldown ── */

    .geval-obs-badge {
      background: oklch(from var(--color-info) l c h / 0.15);
      color: oklch(from var(--color-info) calc(l + 0.1) calc(c - 0.03) h);
    }

    .partial-badge {
      background: oklch(from var(--color-warning) l c h / 0.15);
      color: oklch(from var(--color-warning) calc(l + 0.1) calc(c - 0.03) h);
    }

    .not-assessed-label {
      color: var(--text-secondary);
    }

    .geval-not-assessed {
      opacity: 0.7;
    }

    .observation-drilldown summary {
      color: var(--text-secondary);
    }

    .obs-yes .obs-icon {
      color: oklch(55% 0.18 145);
    }
    .obs-no .obs-icon {
      color: oklch(55% 0.18 25);
    }
    .obs-insufficient .obs-icon {
      color: var(--text-secondary);
    }

    .obs-citation {
      border-inline-start: 3px solid oklch(85% 0.02 250);
      color: var(--text-secondary);
    }

    .obs-reasoning {
      color: var(--text-secondary);
    }
  }
}