#performancePage {color: var(--ink);}
#performancePage [hidden] {display: none !important;}
#performancePage h1 {font-size: clamp(25px, 3vw, 36px); letter-spacing: -.8px; margin: 6px 0 10px;}
#performancePage h2 {font-size: 20px; margin: 0;}
#performancePage h3 {font-size: 16px; margin: 0;}
#performancePage p {margin: 6px 0;}
#performancePage .performance-banner {display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 24px; padding: 26px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;}
#performancePage .performance-banner img {width: 100%; height: auto; display: block; border-radius: 7px;}
#performancePage .performance-banner p:not(.eyebrow) {color: var(--muted);}
#performancePage .performance-controls {display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; padding: 17px; margin-bottom: 12px;}
#performancePage .performance-controls label {flex: 1 1 200px; display: grid; gap: 6px; font-size: 13px; color: var(--muted);}
#performancePage select {font-size: 15px; min-height: 44px; padding: 9px 30px 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%;}
#performancePage .performance-status {font-size: 13px; color: var(--muted); margin: 12px 0 22px;}
#performancePage .performance-section-heading {display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px;}
#performancePage .performance-section-heading p {font-size: 13px; color: var(--muted);}
#performancePage .performance-section-heading label {display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);}
#performancePage .performance-section-heading select {width: auto; max-width: 100%;}
#performancePage .performance-period-label {font-size: 13px; color: var(--brand-dark); background: var(--brand-soft); padding: 5px 9px; border-radius: 5px;}
#performancePage .performance-podium {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 24px;}
#performancePage .performance-winner {text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 21px 15px; min-width: 0;}
#performancePage .performance-first {background: #fff8e8; border-color: #dfc38d;}
#performancePage .performance-place {display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 13px;}
#performancePage .performance-first .performance-place {color: #775415;}
#performancePage .performance-avatar {display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 600;}
#performancePage .performance-first .performance-avatar {background: #f3e3bd; color: #674a14;}
#performancePage .performance-winner p {font-size: 12px; color: var(--muted); overflow-wrap: anywhere;}
#performancePage .performance-score {font-size: 34px; font-weight: 600; letter-spacing: -1px; margin-top: 12px; font-variant-numeric: tabular-nums;}
#performancePage .performance-score small {font-size: 13px; letter-spacing: 0; color: var(--muted); font-weight: 400;}
#performancePage .performance-caption {font-size: 12px; color: var(--muted);}
#performancePage .performance-categories {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 24px;}
#performancePage .performance-category {padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; min-width: 0;}
#performancePage .performance-category h3 {color: var(--brand-dark);}
#performancePage .performance-category > p {font-size: 12px; color: var(--muted);}
#performancePage .performance-category ol {list-style: none; padding: 0; margin: 14px 0 0;}
#performancePage .performance-category li {display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 7px; padding: 8px 0; font-size: 13px; border-top: 1px solid var(--line);}
#performancePage .performance-category li strong {font-weight: 600; font-variant-numeric: tabular-nums;}
#performancePage .performance-category li small {display: block; font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere;}
#performancePage .performance-category-rank {color: var(--muted);}
#performancePage .performance-own, #performancePage .performance-standings, #performancePage .performance-attention {margin: 0 0 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: clip;}
#performancePage .performance-detail {padding: 21px; background: var(--brand-soft);}
#performancePage .performance-detail-heading {display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px;}
#performancePage .performance-detail-heading p {font-size: 12px; color: var(--brand-dark);}
#performancePage .performance-detail-heading .eyebrow {font-size: 11px; letter-spacing: 1px;}
#performancePage .performance-score-badge {display: inline-block; padding: 5px 9px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 6px; font-weight: 600; white-space: nowrap;}
#performancePage .performance-detail .performance-score-badge {background: var(--surface);}
#performancePage .performance-measures {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;}
#performancePage .performance-measure-label {display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 8px;}
#performancePage .performance-measure-label strong {white-space: nowrap; font-weight: 600;}
#performancePage .performance-measures progress {display: block; width: 100%; height: 6px; border: 0; border-radius: 4px; overflow: hidden; accent-color: var(--brand); background: #cde5df;}
#performancePage .performance-measures progress::-webkit-progress-bar {background: #cde5df;}
#performancePage .performance-measures progress::-webkit-progress-value {background: var(--brand);}
#performancePage .performance-measures progress::-moz-progress-bar {background: var(--brand);}
#performancePage .performance-measures p {font-size: 12px; color: var(--brand-dark);}
#performancePage .performance-detail-notes {display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 17px; font-size: 12px; color: var(--brand-dark);}
#performancePage .performance-eligibility {padding-top: 11px; border-top: 1px solid #b9d9d1; margin-top: 13px; font-size: 12px; color: var(--brand-dark);}
#performancePage .performance-standings > .performance-section-heading, #performancePage .performance-attention {padding: 20px;}
#performancePage .performance-standings > .performance-section-heading {margin: 0;}
#performancePage .performance-table {width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums;}
#performancePage .performance-table th {background: var(--canvas); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; padding: 12px;}
#performancePage .performance-table td {padding: 14px 12px; border-top: 1px solid var(--line);}
#performancePage .performance-table th:first-child, #performancePage .performance-table td:first-child {padding-left: 20px;}
#performancePage .performance-table th:last-child, #performancePage .performance-table td:last-child {padding-right: 20px; text-align: right;}
#performancePage .performance-table small {display: block; font-size: 12px; color: var(--muted); margin-top: 4px;}
#performancePage .performance-rank {color: var(--muted); width: 56px;}
#performancePage .performance-member {background: transparent; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-dark); cursor: pointer; display: flex; align-items: center; gap: 9px; text-align: left; min-height: 30px;}
#performancePage .performance-table .performance-detail-row td {padding: 0; text-align: left;}
#performancePage .performance-attention-groups {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px;}
#performancePage .performance-attention h3 {font-size: 14px;}
#performancePage .performance-attention h3 span {font-size: 12px; color: var(--brand-dark); margin-left: 5px;}
#performancePage .performance-attention ul {list-style: none; padding: 0; margin: 8px 0 0;}
#performancePage .performance-attention li {padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;}
#performancePage .performance-attention li strong {display: block; font-weight: 500;}
#performancePage .performance-attention li span {display: block; font-size: 12px; color: var(--muted); margin-top: 4px;}
#performancePage .performance-rules {padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px;}
#performancePage .performance-rules summary {cursor: pointer; color: var(--brand-dark); font-weight: 600; min-height: 24px;}
#performancePage .performance-rules ul {padding-left: 20px; color: var(--muted);}
#performancePage .performance-rules li {margin: 9px 0;}
#performancePage .performance-empty {border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 22px; background: var(--surface); color: var(--muted);}
#performancePage .performance-empty strong {color: var(--ink);}
#performancePage .performance-empty p {font-size: 14px;}
#performancePage .performance-mobile-label {display: none;}
#performancePage .performance-view-tabs {display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scrollbar-width: none;}
#performancePage .performance-view-tabs::-webkit-scrollbar {display: none;}
#performancePage .performance-view-tab {flex: 0 0 auto; min-height: 42px; padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;}
#performancePage .performance-view-tab.active {border-color: var(--brand); background: var(--brand); color: #fff;}
#performancePage .performance-pip-heading {display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; margin-bottom: 14px;}
#performancePage .performance-pip-heading p:not(.eyebrow) {color: var(--muted); font-size: 13px;}
#performancePage .performance-pip-privacy {display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #b9ddd7; border-radius: 11px; background: #effaf8; color: #18594f; font-size: 12px; line-height: 1.5;}
#performancePage .performance-pip-filters {display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, .7fr); gap: 12px; padding: 14px; margin-bottom: 16px;}
#performancePage .performance-pip-filters label {display: grid; gap: 6px; color: var(--muted); font-size: 12px;}
#performancePage .performance-pip-list {display: grid; gap: 14px;}
#performancePage .performance-pip-card {overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);}
#performancePage .performance-pip-card.awaiting {border-color: #e2bd6b;}
#performancePage .performance-pip-card-header {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid var(--line); background: #fafcfc;}
#performancePage .performance-pip-card-header h3 {margin-top: 3px; color: var(--brand-dark);}
#performancePage .performance-pip-card-header p {color: var(--muted); font-size: 12px;}
#performancePage .performance-pip-status {display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; background: #e7f4f1; color: #17675c; font-size: 11px; font-weight: 800; white-space: nowrap;}
#performancePage .performance-pip-status[data-status="OPEN"] {background: #fff1d6; color: #805612;}
#performancePage .performance-pip-status[data-status="IN_PROGRESS"] {background: #e9f1ff; color: #2e5d99;}
#performancePage .performance-pip-status[data-status="IMPROVED"] {background: #e7f7ec; color: #23683b;}
#performancePage .performance-pip-status[data-status="CLOSED"] {background: #edf0f2; color: #50616c;}
#performancePage .performance-pip-fields {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;}
#performancePage .performance-pip-field {padding: 16px 18px; border-bottom: 1px solid var(--line);}
#performancePage .performance-pip-field:nth-child(odd) {border-right: 1px solid var(--line);}
#performancePage .performance-pip-field span {display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
#performancePage .performance-pip-field p {color: var(--ink); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;}
#performancePage .performance-pip-meta {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; color: var(--muted); font-size: 11px;}
#performancePage .performance-pip-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px;}
#performancePage .performance-pip-acknowledged {color: #23683b; font-size: 12px; font-weight: 700;}
#performancePage .performance-pip-awaiting {color: #8a5d12; font-size: 12px; font-weight: 700;}
#performancePage .performance-pip-history {margin: 0 18px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfc;}
#performancePage .performance-pip-history summary {min-height: 30px; color: var(--brand-dark); font-size: 12px; font-weight: 700; cursor: pointer;}
#performancePage .performance-pip-history ol {display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none;}
#performancePage .performance-pip-history li {padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5;}
#performancePage .performance-pip-history li strong {display: block; color: var(--ink); font-size: 12px;}
.performance-pip-form {width: min(720px, calc(100vw - 28px));}
.performance-pip-form textarea {resize: vertical; min-height: 76px;}
@media (max-width: 1050px) {
  #performancePage .performance-categories, #performancePage .performance-attention-groups {grid-template-columns: 1fr;}
  #performancePage .performance-category ol {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
  #performancePage .performance-category li {grid-template-columns: 20px minmax(0, 1fr);}
  #performancePage .performance-category li strong {grid-column: 2;}
  #performancePage .performance-measures {grid-template-columns: 1fr; gap: 18px;}
}
@media (max-width: 800px) {
  #performancePage .performance-banner {grid-template-columns: 1fr; padding: 20px; gap: 16px;}
  #performancePage .performance-table, #performancePage .performance-table tbody {display: block;}
  #performancePage .performance-table thead {display: none;}
  #performancePage .performance-table tr {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 16px 20px; position: relative; border-top: 1px solid var(--line);}
  #performancePage .performance-table td, #performancePage .performance-table td:first-child, #performancePage .performance-table td:last-child {display: block; padding: 0; border: none; text-align: left;}
  #performancePage .performance-table .performance-rank {position: absolute; right: 20px; top: 16px; width: auto;}
  #performancePage .performance-member-cell {grid-column: 1 / -1; padding-right: 38px !important;}
  #performancePage .performance-mobile-label {display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;}
  #performancePage .performance-table tr.performance-detail-row {display: block; padding: 0;}
}
@media (max-width: 520px) {
  #performancePage .performance-controls label {flex-basis: 100%;}
  #performancePage .performance-podium {grid-template-columns: 1fr; gap: 10px;}
  #performancePage .performance-winner {padding: 14px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 11px; text-align: left; align-items: center;}
  #performancePage .performance-place {grid-column: 2; grid-row: 1; margin: 0; font-size: 12px;}
  #performancePage .performance-avatar {grid-column: 1; grid-row: 1 / 4; width: 42px; height: 42px; margin: 0;}
  #performancePage .performance-winner h3 {grid-column: 2; grid-row: 2; font-size: 15px;}
  #performancePage .performance-winner p {grid-column: 2; grid-row: 3; margin: 0; font-size: 11px;}
  #performancePage .performance-score {grid-column: 3; grid-row: 1 / 4; margin: 0; font-size: 27px;}
  #performancePage .performance-score small {display: block; text-align: right; font-size: 12px;}
  #performancePage .performance-winner > .performance-caption {grid-column: 2 / -1; font-size: 11px;}
  #performancePage .performance-category ol {grid-template-columns: 1fr; gap: 0;}
  #performancePage .performance-category li {grid-template-columns: 20px minmax(0, 1fr) auto;}
  #performancePage .performance-category li strong {grid-column: 3;}
  #performancePage .performance-section-heading label {flex-wrap: wrap;}
  #performancePage .performance-view-tabs {position: sticky; top: 80px; z-index: 3;}
  #performancePage .performance-view-tab {min-height: 44px;}
  #performancePage .performance-pip-heading {align-items: stretch; flex-direction: column; padding: 17px;}
  #performancePage .performance-pip-heading .button {width: 100%;}
  #performancePage .performance-pip-filters {grid-template-columns: 1fr;}
  #performancePage .performance-pip-card-header {flex-direction: column;}
  #performancePage .performance-pip-fields {grid-template-columns: 1fr;}
  #performancePage .performance-pip-field:nth-child(odd) {border-right: 0;}
  #performancePage .performance-pip-actions .button {width: 100%;}
}
@media (pointer: coarse) {
  #performancePage .performance-member, #performancePage .performance-rules summary {min-height: 44px;}
  #performancePage select {font-size: 16px;}
}