/*
 * Admin Performance (docs/PHASE2.md §18.5):
 *   .perf-cycles        A-38 the review cycles: title with its star tile, assigned, due, two progress
 *                       bars (.perf-bar: blue self-reviews, olive supervisor reviews), the status chip
 *   .perf-editor        A-39 the editor: items (.perf-edit-item: number and grip, summary or open
 *                       fields), the dashed Add item bar, beside them Settings, Who scores and the
 *                       Save Draft / Next: Assign buttons (.perf-switch: the design's 46px olive switch)
 *   .perf-assign        A-40 Who is reviewed (.perf-group: a checkbox, the hint, a token picker), the
 *                       locked due date and Reminders, the live Preview card (.perf-preview)
 *   .perf-reopen        A-42 the Reopen dialog's choice, and "Who scores it" (.perf-reopen__scorer) for a
 *                       supervisor review whose submitter can't score it any more (hidden while the
 *                       self-review is chosen)
 */
@layer pages {
  /* A-38 ------------------------------------------------------------------------------------------ */
  .perf-cycles { --list-cols: minmax(0, 1.6fr) 150px 120px 200px 200px 110px; }
  .perf-cycles__row { min-height: 72px; }
  .perf-cycles__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .perf-cycles__title .perf-row-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .perf-bar { display: flex; flex-direction: column; gap: 5px; }
  .perf-bar__count { font-size: 12.5px; font-weight: 700; }
  .perf-bar__meter {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-300);
    appearance: none;
    color: var(--perf-bar-color);
  }
  .perf-bar__meter::-webkit-progress-bar { background: var(--color-neutral-300); }
  .perf-bar__meter::-webkit-progress-value { background: var(--perf-bar-color); }
  .perf-bar__meter::-moz-progress-bar { background: var(--perf-bar-color); }
  .perf-bar__meter--self { --perf-bar-color: var(--color-blue); }
  .perf-bar__meter--supervisor { --perf-bar-color: var(--color-accent-2-600); }

  .perf-footnote { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }

  /* A-39 ------------------------------------------------------------------------------------------ */
  .perf-errors { margin: 0; padding-left: 18px; }

  .perf-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .perf-editor__items { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .perf-items { display: flex; flex-direction: column; gap: 10px; }
  .perf-items__empty { margin: 0; padding: 14px 18px; color: var(--color-neutral-700); font-size: 14px; }
  .perf-items__empty[hidden] { display: none; }

  .perf-edit-item {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 24px;
    background: var(--color-bg);
  }
  .perf-edit-item.is-open { box-shadow: 0 0 0 2px var(--color-blue); }
  .perf-edit-item.is-locked { background: var(--color-surface); }
  .perf-edit-item__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    color: var(--color-neutral-600);
  }
  .perf-edit-item:not(.is-open) .perf-edit-item__rail { padding-top: 3px; }
  .perf-edit-item__number { color: var(--color-neutral-800); font: 700 12px var(--font-mono); }
  .perf-edit-item__grip {
    width: 24px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-neutral-600);
    font-size: 16px;
  }
  .perf-edit-item__grip:hover { background: var(--color-btn-hover); color: var(--color-text); }
  .perf-edit-item__main { flex: 1; min-width: 0; }
  .perf-edit-item__summary { display: flex; flex-direction: column; gap: 12px; }
  .perf-edit-item__summary[hidden], .perf-edit-item__fields[hidden] { display: none; }
  .perf-edit-item__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .perf-edit-item__title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  a.perf-edit-item__title:hover { color: var(--color-text); text-decoration: underline; }
  .perf-edit-item__chips { display: flex; gap: 6px; margin-left: auto; }
  .perf-edit-item__chips .chip[hidden] { display: none; }
  .perf-edit-item__more {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text);
    font-size: 16px;
  }
  .perf-edit-item__more:hover, .perf-edit-item__more[aria-expanded="true"] { background: var(--color-surface); }
  .perf-edit-item.is-locked .perf-edit-item__chips { margin-right: 0; }
  .perf-edit-item__standard { color: var(--color-neutral-800); font-size: 13px; line-height: 1.5; }
  .perf-edit-item__standard.is-empty { color: var(--color-neutral-700); font-size: 14.5px; }
  .perf-icon-up { transform: rotate(-90deg); }

  .perf-edit-item__fields { display: flex; flex-direction: column; gap: 12px; }
  .perf-edit-item__fields textarea.input { min-height: 64px; }
  .perf-edit-item__grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
    align-items: end;
  }
  .perf-edit-item__note-switch { align-items: flex-start; padding-bottom: 10px; cursor: pointer; }
  .perf-edit-item__note-switch .switch-row__title { font-size: 14px; }
  .perf-edit-item__note-switch .switch-row__hint { font-size: 12.5px; }

  .perf-switch.switch { width: 46px; height: 28px; }
  .perf-switch .switch__knob { width: 22px; height: 22px; }
  .perf-switch.switch:has(input:checked) { background: var(--color-accent-2-600); }

  .perf-addbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: 24px;
  }
  .perf-addbar__add {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .perf-addbar__add .icon { font-size: 17px; }
  .perf-addbar__add:hover { text-decoration: underline; }

  .perf-editor__side { display: flex; flex-direction: column; gap: 16px; }
  .perf-settings .card__title { font-size: 18px; }
  .perf-settings:has(.perf-who) { gap: 14px; }
  .perf-who { align-items: flex-start; cursor: pointer; }
  .perf-who .switch-row__title { font-size: 14px; }
  .perf-who .switch-row__hint { font-size: 12.5px; line-height: 1.45; }
  .perf-editor__actions { display: flex; align-items: center; gap: 10px; }
  .perf-editor__next { flex: 1; }

  .perf-date { position: relative; }
  .perf-date__value {
    position: absolute;
    left: 45.5px;
    right: 18px;
    overflow: hidden;
    color: var(--color-text);
    font-size: 14.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
  .perf-date__value.is-empty { color: var(--color-neutral-700); }
  .perf-date:not(:focus-within) .perf-date__input::-webkit-datetime-edit { opacity: 0; }
  .perf-date:focus-within .perf-date__value { display: none; }
  .perf-date__input { cursor: pointer; }
  .perf-date .input-wrap__icon { color: var(--color-text); font-size: 17px; }

  /* A-40 ------------------------------------------------------------------------------------------ */
  .perf-assign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
  }
  .perf-assign__main { gap: 16px; }
  .perf-assign__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

  .perf-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
  }
  .perf-group__head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .perf-group__check {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    border: 2px solid var(--color-neutral-500);
    border-radius: 7px;
    background: transparent center / 14px 14px no-repeat;
    appearance: none;
    cursor: pointer;
  }
  .perf-group__check:checked {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
  .perf-group__check:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-blue); }
  .perf-group__text { display: flex; flex-direction: column; gap: 2px; }
  .perf-group__title { font-size: 15px; font-weight: 700; }
  .perf-group__hint { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }
  .perf-group__body { display: flex; flex-direction: column; gap: 6px; }
  .perf-group__body[hidden] { display: none; }
  .perf-group.is-off .perf-group__title { color: var(--color-neutral-700); }

  .perf-assign .token-field { min-height: 48px; padding: 6.5px 10px; border-radius: 24px; }
  .perf-assign .token {
    padding: 0 6px 0 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13.5px;
  }
  .perf-assign .token__remove { color: var(--color-neutral-700); font-size: 14px; }
  .perf-assign .token__remove:hover { background: var(--color-btn-hover); color: var(--color-text); }
  .perf-assign .token-input { padding: 0 6px; }

  .perf-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px;
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: 14.5px;
  }
  .perf-locked > .icon:first-child { font-size: 17px; }
  .perf-locked__value { flex: 1; }
  .perf-locked__lock { color: var(--color-neutral-700); font-size: 15px; }

  .perf-assign__preview { display: block; min-width: 0; }
  .perf-preview { gap: 16px; }
  .perf-preview__overline { margin: 0; }
  .perf-preview__count { display: flex; align-items: baseline; gap: 8px; }
  .perf-preview__number { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .perf-preview__unit { font-size: 15px; font-weight: 700; }
  .perf-preview__lines { display: flex; flex-direction: column; margin: 0; }
  .perf-preview__line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--color-hairline);
    font-size: 14px;
  }
  .perf-preview__line dt { color: var(--color-neutral-700); }
  .perf-preview__line dd { margin: 0; font-weight: 700; text-align: right; }
  .perf-preview__chain { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .perf-preview__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
  .perf-preview__link .icon { font-size: 14px; }
  .perf-preview__empty { margin: 0; color: var(--color-neutral-700); font-size: 14px; }

  /* A-42 Reopen ---------------------------------------------------------------------------------- */
  .perf-reopen { gap: 18px; }
  .perf-reopen__choices { flex-direction: column; }
  .perf-reopen:has(#reopen_self:checked) .perf-reopen__scorer { display: none; }

  /* Laptop / tablet ------------------------------------------------------------------------------- */
  @media (max-width: 1199px) {
    .perf-cycles { --list-cols: minmax(0, 1.4fr) 110px 110px 160px 160px 90px; }
    .perf-editor { grid-template-columns: minmax(0, 1fr) 320px; }
    .perf-assign { grid-template-columns: minmax(0, 1fr) 360px; }
  }

  @media (max-width: 1023px) {
    .perf-editor, .perf-assign { grid-template-columns: minmax(0, 1fr); }
    .perf-cycles { --list-cols: minmax(0, 1.4fr) 110px 150px 90px; }
    .perf-cycles :is(.list-header, .perf-cycles__row) > :is(:nth-child(2), :nth-child(5)) { display: none; }
  }

  @media (max-width: 767px) {
    .perf-cycles { --list-cols-mobile: minmax(0, 1fr) auto; }
    .perf-cycles__row > :is(:nth-child(3), :nth-child(4)) { display: none; }
    .perf-edit-item { padding: 14px; }
    .perf-edit-item__grid { grid-template-columns: minmax(0, 1fr); }
    .perf-addbar { flex-wrap: wrap; }
    .perf-assign__when { grid-template-columns: minmax(0, 1fr); }
  }
}