/*
 * Portal Performance (docs/PHASE2.md §18.5; D-35, D-38, E-14):
 *   .perf-tabs        a Director's "Mine & my reports N" | "<Site> N" (underlined, blue)
 *   .perf-mine        my reviews: the star tile, "My self-review", the meta line, the chip, the button
 *   .perf-people      People I review: Person · Job role · Their self-review · the action
 *   .perf-site-head   D-38: the review (or its selector), the chips, Export CSV
 */
@layer pages {
  .perf-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }
  .perf-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1.5px;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .perf-tabs__tab:hover { color: var(--color-text); }
  .perf-tabs__tab.is-active { border-bottom-color: var(--color-blue); color: var(--color-text); font-weight: 700; }

  .perf-mine { gap: 16px; padding: 20px; }
  .perf-mine__row { display: flex; align-items: center; gap: 14px; }
  .perf-mine__row + .perf-mine__row { padding-top: 16px; border-top: 1px solid var(--color-hairline); }
  .perf-mine__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .perf-mine__title { font-size: 16px; }
  .perf-mine__meta { color: var(--color-neutral-700); font-size: 13px; }

  .perf-people { --list-cols: minmax(0, 1.5fr) 180px 170px 150px; }

  .perf-site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .perf-site-head__title { font-size: 15px; font-weight: 700; }
  .perf-site-head__select { display: flex; }
  .perf-site-head__spacer { flex: 1; }

  @media (max-width: 1023px) {
    .perf-people { --list-cols: minmax(0, 1.5fr) 150px 150px 110px; }
  }

  @media (max-width: 767px) {
    .perf-tabs { overflow-x: auto; scrollbar-width: none; }
    .perf-mine { padding: 16px; }
    .perf-mine__row { flex-wrap: wrap; gap: 10px 12px; }
    .perf-mine__text { flex-basis: calc(100% - 60px); }
    .perf-mine__row .btn { margin-left: auto; }
    .perf-people { --list-cols-mobile: minmax(0, 1fr) auto; }
    .perf-people__row { grid-template-areas: "person action" "chip chip"; }
    .perf-people__row > :nth-child(1) { grid-area: person; }
    .perf-people__row > :nth-child(2) { display: none; }
    .perf-people__row > :nth-child(3) { grid-area: chip; }
    .perf-people__row > :nth-child(4) { grid-area: action; }
    .perf-site-head__spacer { display: none; }
  }
}