/*
 * Performance reviews, shared by the Admin console and the portal (docs/PHASE2.md §18.5):
 *   .perf-icon-tile     the star tile of a review (A-38 38px, D-35 46px)
 *   .perf-tiles         four progress tiles (A-41 28px values; portal 26px)
 *   .perf-progress      the people of a review (A-41; D-38 with a chevron column)
 *   .perf-person        avatar + name + second line in a row
 *   .perf-score         the scoring form (D-36, D-37, E-15; the A-39 preview): item cards, circle
 *                       buttons, notes, the sticky side card
 *   .perf-totals, .perf-result, .perf-comment   a result (A-42, E-16)
 *   .perf-person-head   the avatar head of someone's result (A-42)
 *   print               "Print / Save as PDF": only the result, on white
 */
@layer pages {
  /* Star tile ---------------------------------------------------------------------------------- */
  .perf-icon-tile {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--petal-form-bg);
    color: var(--petal-form-fg);
    font-size: 18px;
  }
  .perf-icon-tile--lg { width: 46px; height: 46px; border-radius: 16px; font-size: 21px; }

  /* A link that makes its whole row the target (the row is position: relative). */
  .perf-row-link { color: var(--color-text); font-weight: 700; text-decoration: none; }
  .perf-row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .perf-row-link:hover { color: var(--color-text); text-decoration: underline; }
  .list-row:has(.perf-row-link:hover) { box-shadow: 0 0 0 2px var(--color-divider); }
  .list-row:has(.perf-row-link:focus-visible) { box-shadow: var(--ring); }
  .perf-row-link:focus-visible { outline: none; }

  /* The Director tag (A-41, D-38): the job tag shape, sage, with the building icon. */
  .perf-director-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-900);
  }
  .perf-director-tag .icon { font-size: 12px; }

  .perf-section { display: flex; flex-direction: column; gap: 10px; }
  .perf-section__head { display: flex; align-items: baseline; gap: 10px; }
  .perf-section__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  .perf-section__aside { color: var(--color-neutral-700); }

  /* Tiles ---------------------------------------------------------------------------------------- */
  .perf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .perf-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
  }
  .perf-tile__value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; }
  .perf-tiles--small .perf-tile__value { font-size: 26px; }

  /* Toolbar (pills, then the selects and the search on the right) -------------------------------- */
  .perf-toolbar { gap: 8px; }
  .perf-toolbar__spacer { flex: 1; }
  .perf-toolbar__search { width: 220px; }

  /* People in a review ----------------------------------------------------------------------------- */
  .perf-progress { --list-cols: minmax(0, 1.5fr) 130px minmax(0, 1.1fr) 140px 160px 120px 120px; }
  .perf-progress--site { --list-cols: minmax(0, 1.5fr) 160px minmax(0, 1.1fr) 130px 140px 110px 120px 40px; }
  .perf-progress__row { min-height: 66px; }
  .perf-progress--site .perf-progress__row { min-height: 64px; }
  .perf-progress__supervisor { min-width: 0; }
  .perf-progress__chev { justify-content: flex-end; color: var(--color-neutral-700); font-size: 16px; }

  .perf-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .perf-person .avatar--36 { width: 34px; height: 34px; }
  .perf-person__text { display: flex; flex-direction: column; min-width: 0; }
  .perf-person__meta { color: var(--color-neutral-700); font-size: 12.5px; }

  .perf-score-cell { display: flex; flex-direction: column; }
  .perf-score-cell__avg { color: var(--color-neutral-700); font-size: 12px; }

  /* The scoring form --------------------------------------------------------------------------- */
  .perf-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }
  .perf-score__items { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

  .perf-item-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    transition: box-shadow var(--motion-fast) var(--ease-standard);
  }
  .perf-item-card:focus-within { box-shadow: 0 0 0 2px var(--color-blue); }
  .perf-item-card__head { display: flex; flex-direction: column; gap: 6px; }
  .perf-item-card__name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  .perf-item-card__standard { max-width: 720px; color: var(--color-neutral-800); font-size: 14px; line-height: 1.55; }
  .perf-item-card__standard p { margin: 0; }
  .perf-item-card__standard p + p { margin-top: 6px; }

  /* The person's self score above the supervisor's (D-36). */
  .perf-their {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: var(--color-neutral-800);
    font-size: 13px;
  }
  .perf-their__note { font-style: italic; }
  .perf-dots { display: flex; gap: 6px; }
  .perf-dot {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
    color: var(--color-neutral-600);
    font-size: 12.5px;
    font-weight: 700;
  }
  .perf-dot.is-on { box-shadow: none; background: var(--color-blue); color: #fff; }

  /* Circle buttons: radio inputs, each in its label. */
  .perf-scale { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .perf-label { padding: 0; font-size: 13px; font-weight: 700; }
  .perf-circles { display: flex; flex-wrap: wrap; gap: 6px; }
  .perf-circle { position: relative; display: inline-flex; cursor: pointer; }
  /* The radio stays in the page for the keyboard and screen readers; the label takes the clicks. */
  .perf-circle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .perf-circle__face {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-btn-border);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
  }
  .perf-circle:hover .perf-circle__face { background: var(--color-btn-hover); }
  .perf-circle__input:checked + .perf-circle__face { box-shadow: none; background: var(--color-blue); color: #fff; }
  .perf-circle__input:focus-visible + .perf-circle__face { outline: 2px solid var(--color-blue); outline-offset: 2px; }
  .perf-scale:disabled .perf-circle { cursor: default; }
  .perf-scale:disabled .perf-circle__input { cursor: default; }
  .perf-scale:disabled .perf-circle:hover .perf-circle__face { background: none; }
  .perf-scale:disabled .perf-circle__input:checked + .perf-circle__face { background: var(--color-blue); }

  .perf-note__input { min-height: 64px; font-size: 14.5px; line-height: 1.55; }
  textarea.perf-note__input { min-height: 64px; }
  textarea.perf-note__input--comment { min-height: 110px; }
  .perf-note__text { color: var(--color-neutral-800); font-size: 14.5px; line-height: 1.55; }
  .perf-note__text p { margin: 0; }

  /* Side card */
  .perf-side {
    position: sticky;
    top: 16px;
    gap: 12px;
  }
  .perf-side__total { display: flex; align-items: baseline; gap: 6px; }
  .perf-side__number { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .perf-side__max { color: var(--color-neutral-700); font-size: 15px; font-weight: 700; }
  .perf-side__average { font-size: 13.5px; font-weight: 700; }
  .perf-side__items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .perf-side__item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .perf-side__item-name { flex: 1; min-width: 0; }
  .perf-side__kv { display: flex; flex-direction: column; }
  .perf-side__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--color-hairline);
    font-size: 14px;
  }
  .perf-side__row span { color: var(--color-neutral-700); }
  .perf-side__row b { text-align: right; }
  .perf-side__hint { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }
  .perf-side__error { margin: 0; color: var(--color-err-text); font-size: 12.5px; font-weight: 700; }
  .perf-side__save[hidden] { display: none; }

  /* Result --------------------------------------------------------------------------------------- */
  .perf-result-page { display: flex; flex-direction: column; gap: 28px; }

  .perf-person-head { display: flex; align-items: center; gap: 18px; }
  .perf-person-head__text { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .perf-person-head__crumbs { gap: 0; }
  .perf-person-head__title { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .perf-person-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .perf-person-head__line { color: var(--color-neutral-800); font-size: 13.5px; }
  .perf-person-head__actions { display: flex; flex: none; flex-wrap: wrap; gap: 10px; }

  .perf-totals { display: flex; gap: 12px; }
  .perf-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
  }
  .perf-total--supervisor { background: var(--color-accent-2-100); }
  .perf-total__score { display: flex; align-items: baseline; gap: 6px; }
  .perf-total__number { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .perf-total__max { color: var(--color-neutral-700); font-size: 14px; font-weight: 700; }
  .perf-total__avg { font-size: 13px; font-weight: 700; }
  .perf-total__waiting { padding: 10px 0 4px; color: var(--color-neutral-700); font-size: 14px; font-weight: 600; }

  .perf-result { --list-cols: minmax(0, 1.4fr) 110px 110px minmax(0, 1.6fr); }
  .perf-result:has(.perf-result__row--one) { --list-cols: minmax(0, 1.4fr) 110px minmax(0, 1.6fr); }
  .perf-result__row { align-items: start; min-height: 0; padding: 14px 20px; }
  .perf-result__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .perf-result__standard { color: var(--color-neutral-700); font-size: 12px; line-height: 1.45; }
  .perf-result__score b { font-size: 18px; }
  .perf-result__max { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
  .perf-result__max::before { content: " "; }
  .perf-result__notes { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
  .perf-result__who--self { color: var(--color-neutral-700); }
  .perf-result__who--supervisor { color: var(--color-accent-2-800); }

  .perf-comment { gap: 16px; }
  .perf-comment__text { font-size: 15px; line-height: 1.6; }
  .perf-comment__text p { margin: 0; }
  .perf-comment__text p + p { margin-top: 8px; }

  /* Laptop and tablet ------------------------------------------------------------------------- */
  @media (max-width: 1199px) {
    .perf-score { grid-template-columns: minmax(0, 1fr) 300px; }
    .perf-progress { --list-cols: minmax(0, 1.5fr) 120px minmax(0, 1fr) 120px 130px 96px 96px; }
    .perf-progress--site { --list-cols: minmax(0, 1.5fr) 130px minmax(0, 1fr) 116px 120px 90px 96px 28px; }
  }

  @media (max-width: 1023px) {
    .perf-score { grid-template-columns: minmax(0, 1fr); }
    .perf-side { position: static; }
    .perf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Person, Self and Supervisor: the job role, the supervisor's name and the scores are on the result. */
    .perf-progress, .perf-progress--site { --list-cols: minmax(0, 1fr) 130px 150px; }
    .perf-progress :is(.list-header, .perf-progress__row) > :is(:nth-child(2), :nth-child(3), :nth-child(n + 6)) { display: none; }
  }

  /* Phones ------------------------------------------------------------------------------------- */
  @media (max-width: 767px) {
    .perf-section__title { font-size: 19px; }
    .perf-tiles { gap: 8px; }
    .perf-tile { padding: 12px 14px; }
    .perf-tile__value, .perf-tiles--small .perf-tile__value { font-size: 22px; }
    .perf-toolbar__spacer { display: none; }
    .perf-toolbar__search { width: 100%; }
    .perf-progress, .perf-progress--site { --list-cols-mobile: minmax(0, 1fr) auto; }
    .perf-progress__row > :nth-child(5) { display: none; }

    .perf-item-card { padding: 18px; gap: 12px; border-radius: var(--radius-row); }
    .perf-item-card__name { font-size: 18px; }
    .perf-circles { gap: 8px; }
    .perf-circle__face { width: 44px; height: 44px; font-size: 15px; }
    .perf-their { align-items: flex-start; }

    .perf-person-head { flex-wrap: wrap; gap: 14px; }
    .perf-person-head__avatar { display: none; }
    .perf-person-head__title { font-size: 26px; }
    .perf-person-head__crumbs { display: none; }
    .perf-person-head__actions { padding-top: 0; }
    .perf-totals { flex-direction: column; gap: 8px; }
    .perf-result, .perf-result:has(.perf-result__row--one) { --list-cols-mobile: minmax(0, 1fr) auto auto; }
    .perf-result__notes { grid-column: 1 / -1; }
  }

  /* Print / Save as PDF: the result only, on white, without the shell or the buttons. */
  @media print {
    @page { margin: 14mm; }
    body { background: #fff; }
    .rail, .app-header, .mobile-header, .tabbar, .sheet, .flash-stack, .skip-link, #impersonation-banner,
    .perf-person-head__actions, .page-head__actions, .page-head-group > .crumbs, .perf-person-head__crumbs, .notice { display: none !important; }
    .app, .main { display: block; padding: 0; max-width: none; }
    .perf-result-page { gap: 16px; }
    .perf-total, .perf-result__row, .perf-comment {
      break-inside: avoid;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
  }
}