/* Four individual stages and three group stages share aligned cards. */
.evaluation-person-card { grid-template-columns: 180px minmax(0, 1fr); align-items: start; padding: 16px; gap: 16px; }
.evaluation-stage-grid { grid-template-columns: repeat(var(--evaluation-stage-count, 4), minmax(0, 1fr)); gap: 10px; }
.evaluation-stage-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; }
.evaluation-stage-card .stage-card-heading { min-height: 38px; align-items: start; flex-wrap: wrap; gap: 6px; margin: 0; }
.evaluation-stage-card .stage-card-heading > strong { font-size: 13px; }
.evaluation-stage-card .stage-due-date { margin: 0; padding: 8px 0; flex-wrap: wrap; gap: 6px; }
.evaluation-stage-card .stage-complete-check { min-height: 34px; margin: auto 0 0; }
.evaluation-stage-card .stage-actual-date { width: 100%; margin: 0; }
.evaluation-stage-card .stage-actual-date:has(input:disabled) { display: block; }
.evaluation-panel .evaluation-notice { display: block; }
.evaluation-stage-card .stage-actual-date input { width: 100%; min-width: 0; }
.overview-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.overview-stage-head { flex-wrap: wrap; gap: 5px; }
.evaluation-list { min-width: 290px; }
.evaluation-item { grid-template-columns: 82px 84px minmax(90px, 1fr); min-width: 290px; }
#rosterEvaluationSecondLabel[hidden], #evaluationMonthFields[hidden] { display: none; }
#evaluationMonthFields h3 { font-size: 14px; margin: 18px 0 12px; }

/* Annual business KPI and stage-record counts use separate, labelled sources. */
.evaluation-overview { height: auto; }
.evaluation-annual-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.evaluation-annual-summary > div { display: flex; flex-direction: column; align-items: start; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f4f8f7; }
.evaluation-annual-summary span { font-size: 12px; color: var(--muted); }
.evaluation-annual-summary strong { font-size: 25px; line-height: 1.2; color: #0f766e; overflow-wrap: anywhere; }
.evaluation-annual-summary small { font-size: 11px; color: var(--muted); }
.evaluation-annual-basis { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.evaluation-annual-basis button { padding: 6px 8px; font-size: 11px; margin-left: auto; }
.evaluation-overview .overview-stage { height: auto; min-height: 270px; }
.evaluation-overview .overview-stage-head { min-height: 52px; align-items: flex-start; align-content: flex-start; }
.evaluation-overview .overview-stage-head > strong { white-space: normal; overflow: visible; text-overflow: clip; }
.evaluation-stage-annual { display: grid; gap: 6px; margin-top: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.evaluation-stage-annual > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: var(--muted); }
.evaluation-stage-annual strong { color: var(--ink); font-size: 14px; white-space: nowrap; }
.evaluation-metric-notes { margin-top: 14px; font-size: 11px; color: var(--muted); }
.evaluation-metric-notes summary { cursor: pointer; }
.evaluation-metric-notes p { line-height: 1.7; margin: 10px 0 0; }
@media (max-width: 620px) {
  .evaluation-annual-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evaluation-overview .overview-stage { min-height: 250px; }
}
@media (max-width: 1200px) {
  .evaluation-person-card { grid-template-columns: 1fr; }
  .evaluation-person-card > header div { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .evaluation-stage-grid, .overview-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .evaluation-stage-grid, .overview-stages { grid-template-columns: 1fr; }
  .evaluation-stage-card .stage-card-heading { min-height: 0; }
}