/* Hallmark · macrostructure: Workspace checklist · tone: practical · anchor hue: existing PayHr */
.payroll-dashboard .dashboard-grid--checklist { grid-template-columns: minmax(0, 1fr); }
.payroll-dashboard .dashboard-checklist { background: var(--color-surface); }
.dashboard-checklist-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--space-md); }
.dashboard-checklist-heading p { color: var(--color-muted); font-size: 14px; line-height: 1.6; margin: var(--space-sm) 0 var(--space-lg); }
.dashboard-checklist-count { flex-shrink: 0; color: var(--color-muted); font-size: 13px; padding-top: var(--space-xs); }
.dashboard-checklist-items { list-style: none; padding: 0; margin: 0; }
.dashboard-checklist-items li { display: flex; gap: var(--space-md); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); }
.dashboard-checklist-items li:last-child { padding-bottom: 0; }
.dashboard-checklist-marker { flex: 0 0 20px; height: 20px; border: 1px solid var(--color-rule); border-radius: 50%; margin-top: var(--space-xs); }
.dashboard-checklist-items h3 { font-size: 16px; line-height: 1.5; margin: 0; }
.dashboard-checklist-items a { color: var(--color-ink); text-decoration: none; }
.dashboard-checklist-items a:hover { color: var(--color-accent); text-decoration: underline; }
.dashboard-checklist-items a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.dashboard-checklist-items p { color: var(--color-muted); font-size: 14px; line-height: 1.6; margin: var(--space-xs) 0; }
.dashboard-checklist-optional { font-size: 12px; color: var(--color-muted); }
@media (max-width: 600px) {
  .dashboard-checklist-heading { display: block; }
  .dashboard-checklist-count { display: block; padding: 0 0 var(--space-md); }
}

/* Incomplete tasks use colour and explicit status text together. */
.payroll-dashboard .dashboard-checklist--incomplete {
  background: color-mix(in srgb, var(--color-warning-tint) 35%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));
}
.dashboard-checklist--incomplete h2 { color: var(--color-warning); }
.dashboard-checklist-status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); flex-shrink: 0; }
.dashboard-checklist-badge { display: inline-flex; padding: 6px 10px; border-radius: var(--radius-button); background: var(--color-warning-tint); color: var(--color-warning); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dashboard-checklist-status .dashboard-checklist-count { padding: 0; }
.dashboard-checklist-marker { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; }
.dashboard-checklist-items .is-required .dashboard-checklist-marker { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-surface); }
.dashboard-checklist-items .is-required .dashboard-checklist-optional { color: var(--color-warning); font-weight: 600; }
.dashboard-checklist-items .is-optional .dashboard-checklist-marker { background: var(--color-selection); border-color: var(--color-selection); color: var(--color-accent); }
@media (max-width: 600px) {
  .dashboard-checklist-status { align-items: flex-start; padding-bottom: var(--space-md); }
}